/**/
/* Styles für https://www.tanja-mifka.de/ */
/*

Farben
  Kopfzeile: #f9e2c7;
  Menü oben, Transparent hsla(32, 80.6%, 87.8%, 0.95);





*/
/* Schriftart der Seite bestimmen	*/
/* Goggle-Schrift: open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/open-sans-v40-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('./fonts/open-sans-v40-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./fonts/open-sans-v40-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  url('./fonts/open-sans-v40-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
  url('./fonts/open-sans-v40-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  url('./fonts/open-sans-v40-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}


/* material-icons-outlined-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/material-icons-outlined-v109-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('./fonts/material-icons-outlined-v109-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./fonts/material-icons-outlined-v109-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  url('./fonts/material-icons-outlined-v109-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
  url('./fonts/material-icons-outlined-v109-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  url('./fonts/material-icons-outlined-v109-latin-regular.svg#MaterialIconsOutlined') format('svg'); /* Legacy iOS */
}


/**/
/* Layout komplette Seite	*/
/* kein äußerer und innerer Abstand */
* {
  padding: 0;
  margin: 0;
}

/**/
/* die Container sollen die gesamte Höhe nutzen	*/
/**/
html, body {
  height: 100%
}

/**/
/* Schrift, Seitenhintergrund */
/* linker und rechter Innenabstand */
body {
  font-family: Open Sans;
  padding-left: clamp(5px, calc(1px + (300 - 1) * ((100vw - 560px) / 1920)), 300px);
  padding-right: clamp(5px, calc(1px + (300 - 1) * ((100vw - 560px) / 1920)), 300px);
  background-color: white;
  /*background-color: hsla(61, 66%, 87%, 0.95);*/
}

/*****************************************************************************/
/* Seitenkopf	*/
/* Box oben, fest (sticky), Hintergrundfarbe */
header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;  /* Anordnung für oberste Sichtbarkeit */
}

/**/
/* Layout des oberen Seitenbereiches	*/
/* Einstellungen für das Logo und Menue */
kopf {
  display: grid;
  grid-template-columns: 10% 1fr repeat(5, auto) 0.1em;
  grid-template-rows: repeat(3, auto);
  gap: 0px 0px;
  grid-template-areas:
    "logo l1 k1 k1 k1 k1 k1 k1"
    "logo l1 menu-oben menu-oben menu-oben menu-oben menu-oben l3"
    "logo l1 l2 l2 l2 l2 l2 l3";
  top: 0;
}

/* Grideinteilung */

l1 {
  grid-area: l1;
  background-color: hsla(0, 0%, 100%, 0.95);
  font-size: clamp(8px, calc(8px + (38 - 8) * ((100vw - 360px) / 1560)), 38px);
  display: flex;
  width: 100%;
  margin: 0 auto;
  padding-left: 1em;
  text-align: right;
  align-items: center;
}
l2 { grid-area: l2; }
l3 { grid-area: l3; }
l2, l3 {
  background-color: hsla(0, 0%, 100%, 0.95);
}

/* Obere Kopfzeile */
k1 {
  grid-area: k1;
  background-color: hsla(0, 0%, 100%, 0.95);
  height: auto;
  display: block;
  width: 100%;
}




/**/
/* Layout des Logos	*/
/* Das Bild soll sich an den Container anpassen */
logo {
  grid-area: logo;
  display: block;
  justify-content: center;
  align-items: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: hsla(0, 0%, 100%, 0.95);
  z-index: 95;
}

logo img {
  object-fit: cover;
  max-width: auto;
  height: auto;
  float: left;
}


/*****************************************************************************/
/* Menu - Layout	*/
/**/

/* Obere Menü-Box	 anlegen */
menu-oben {
  grid-area: menu-oben;
  background-color: hsla(0, 0%, 100%, 0.95);
}

/* Kopf - Menu */
nav.primary-navigation {
  margin: 0 auto;
  display: block;
  padding: 2em 0 0 0;
  text-align: center;
  font-size: clamp(8px, calc(8px + (20 - 8) * ((100vw - 360px) / 1560)), 20px);
}

  nav.primary-navigation ul li {
    list-style: none;
    margin: 0 auto;
    border-left: 2px solid #13820a;
    display: inline-block;
    padding: 0 clamp(5px, calc(5px + (20 - 1) * ((100vw - 560px) / 1920)), 25px);
    position: relative;
    text-decoration: none;
    text-align: center;
    font-family: Open Sans;
  }

  nav.primary-navigation li a {
    color: black;
  }

    nav.primary-navigation li a:hover {
      color: #13820a;
    }

  nav.primary-navigation li:hover {
    cursor: pointer;
  }

  nav.primary-navigation ul li ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    padding-left: 0;
    left: 0;
    display: none;
    background-color: hsla(32, 80.6%, 87.8%, 0.95); /* #F9E2C7 */
  }

    nav.primary-navigation ul li:hover > ul, nav.primary-navigation ul li ul:hover {
      visibility: visible;
      opacity: 1;
      display: block;
      min-width: clamp(180px, calc(180px + (350 - 1) * ((100vw - 560px) / 1920)), 350px);
      text-align: left;
      padding-top: 20px;
      box-shadow: 0px 3px 5px -1px #ccc;
    }

    nav.primary-navigation ul li ul li {
      clear: both;
      width: 100%;
      text-align: left;
      margin-bottom: 20px;
      border-style: none;
    }

      nav.primary-navigation ul li ul li a:hover {
        padding-left: 10px;
        border-left: 2px solid #13820a;
        transition: all 0.3s ease;
      }

a {
  text-decoration: none;
}

  a:hover {
    color: #13820a;
    /*#008F00;*/
  }

ul li ul li a {
  transition: all 0.5s ease;
}

/*****************************************************************************/
/* Formatierung der Seitenmitte	*/
/**/
seitenmitte {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 0px 0px;
  grid-template-areas:
    "bilder"
    "texte"
    ".";
  top: 0;
}

/**/
/* Bild Slideshow - Bilder überblenden	*/
/* Block im Grid formatieren	*/
bilder {
  grid-area: bilder;
  display: block;
  max-width: 100%;
  height: auto;
}

/* Einstellungen für das eigentliche Bild	*/
img {
  object-fit: cover;
  width: 100%;
  max-height: auto;
}

/* Slide-Einstellungen für das Bild	*/
css-slides img {
  opacity: 0;
  animation-name: fade;
  animation-duration: 70s;
  animation-iteration-count: infinite;
  position: absolute;
  left: 0;
  right: 0;
}

/* Bildcontaineranzeige Layout */
css-slides {
  position: relative;
  height: 0;
  padding-bottom: calc(1050/1980 * 100%);
  display: block;
}

/* Element einblenden */
@keyframes fade {
  /* 	Start ausgeblendet */
  0% { opacity: 0; }
  /*	nach 2,22% volle Sichtbarkeit */
  2.22% { opacity: 1; }
  /* bis 16,67% sichtbarbleiben */
  16.67% { opacity: 1; }
  /* bis 18.89 ausblenden */
  18.89% { opacity: 0; }
  /* bei 100% voll ausgeblendet */
  100% { opacity: 0; }
}

/* Überblendungen	alle 30 Sekunden */
css-slides img:nth-child(1) { animation-delay: 0s; }
css-slides img:nth-child(2) { animation-delay: 10s; }
css-slides img:nth-child(3) { animation-delay: 20s; }
css-slides img:nth-child(4) { animation-delay: 30s; }
css-slides img:nth-child(5) { animation-delay: 40s; }
css-slides img:nth-child(6) { animation-delay: 50s; }
css-slides img:nth-child(7) { animation-delay: 60s; }


meldung {
  grid-area: bilder;
  display: grid;
  position: relative;
  top: -6%;
  margin-left: 5%;
  margin-right: 5%;
  max-width: 100%;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  background-color: #f9e2c7;
  /*background-color: hsla(32, 80.6%, 87.8%, 0.95);*/
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-template-areas:
    "x1 x2 x3";
}

x1, x2, x3 {
  font-family: Open Sans;
  font-size: clamp(8px, calc(8px + (20 - 8) * ((100vw - 360px) / 1560)), 20px);
  padding-left: clamp(5px, calc(10px + (30 - 1) * ((100vw - 560px) / 1920)), 35px);
  padding-right: clamp(5px, calc(10px + (30 - 1) * ((100vw - 560px) / 1920)), 35px);
  padding-top: 2em;
  padding-bottom: 2em;
}

x1 {
  grid-area: x1;
  display: grid;
  grid-template-columns: 45% 65%;
  grid-template-rows: repeat(7, 1fr);
  grid-template-areas:
    "z11 z11"
    "z21 z22"
    "z31 z32"
    "z41 z42"
    "z51 z52"
    "z61 z62"
    "z71 z72"
    "z81 z82"
    "z91 z92";
}

x2 {
  grid-area: x2;
  display: grid;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  grid-template-columns: 30% 70%;
  grid-template-rows: repeat(7, 1fr);
  grid-template-areas:
    "y11 y11"
    "y21 y21"
    "y31 y31"
    "y41 y41"
    "y51 y52"
    "y61 y62"
    "y71 y72"
    "y81 y82"
    "y91 y92";
}

x3 {
  grid-area: x3;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(7, 1fr);
  grid-template-areas:
    "w11"
    "w21"
    "w31"
    "w41"
    "w51"
    "w61"
    "w71"
    "w81"
    "w92";
}

z11 { grid-area: z11; }
z21 { grid-area: z21; }
z22 { grid-area: z22; }
z31 { grid-area: z31; }
z32 { grid-area: z32; }
z41 { grid-area: z41; }
z42 { grid-area: z42; }
z51 { grid-area: z51; }
z52 { grid-area: z52; }
z61 { grid-area: z61; }
z62 { grid-area: z62; }
z71 { grid-area: z71; }
z72 { grid-area: z72; }
z81 { grid-area: z81; }
z82 { grid-area: z82; }
z91 { grid-area: z91; }
z92 { grid-area: z92; }

y11 { grid-area: y11; }
y21 { grid-area: y21; }
y31 { grid-area: y31; }
y41 { grid-area: y41; }
y51 { grid-area: y51; }
y61 { grid-area: y61; }
y71 { grid-area: y71; }
y72 { grid-area: y72; }
y81 { grid-area: y81; }
y82 { grid-area: y82; }
y91 { grid-area: y91; }
y92 { grid-area: y92; }

w11 { grid-area: w11; }
w21 { grid-area: w21; }
w31 { grid-area: w31; }
w41 { grid-area: w41; }
w51 { grid-area: w51; }
w61 { grid-area: w61; }
w71 { grid-area: w71; }
w81 { grid-area: w81; }
w91 { grid-area: w91; }


z11, y11, w11 { 
  display: flex;
  align-items: flex-end;
  justify-content: left;
  width: 100%;
}

z21, z22, z31, z32, z41, z42, z42, z51, z52, z61, z62, z71, z72, z81, z82, z91, z92,
y21, y31, y41, y51, y52, y61, y62, y71, y72, y81, y82, y91, y92,
w21, w31, w41, w51, w61, w71, w81, w91 {
  display: flex;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

y81, y91 {
  padding-top: 0.35em;
}

/* Ausrichtung der Symbole Instagram, WhatsApp */
.symbol {
  width: auto;
  height: clamp(8px, calc(8px + (20 - 8) * ((100vw - 360px) / 1560)), 20px);
  justify-content: center;
  align-items: flex-end;
}


/*****************************************************************************/
  /* Inhaltsbereich	*/
  /* Box für den eigentlichen Seiteninhalt */
  /* Zwei Versionen */
  /* für kurze Inhalte */
main {
  display: block;
  height: 100%;
  /* background-color: hsla(0, 0%, 100%, 0.95);  */
  background-color: white;
  min-width: 16em;
  /* Mindestbreite (der Überschrift) verhindert Anzeigefehler in modernen Browsern */
}

/* für lange Inhalte */
main-lang {
  display: block;
  background-color: hsla(0, 0%, 100%, 0.95);
  min-width: 16em;
  /* Mindestbreite (der Überschrift) verhindert Anzeigefehler in modernen Browsern */
}


inhalt {
  grid-area: texte;
  display: block;
  max-width: 100%;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  background-color: white; /*    hsla(32, 80.6%, 87.8%, 0.95); */
  /* font-size: clamp(10px, calc(10px + (20 - 8) * ((100vw - 360px) / 1560)), 20px); */ 
  font-size: clamp(8px, calc(8px + (30 - 8) * ((100vw - 360px) / 1560)), 30px);
}

iz1, iz2, iz3 {
  text-align: center;
}

iz1 {
  font-size: clamp(8px, calc(8px + (30 - 8) * ((100vw - 360px) / 1560)), 30px);
}

iz2 {
  font-size: clamp(6px, calc(6px + (26 - 6) * ((100vw - 360px) / 1560)), 26px);
}

dltable1 {
  padding-left: 1.5em;
}

leistungen {
  display: grid;
  grid-template-columns: 1fr 2% 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "bilder . texte";
  top: 0;
}

bildblock1 {
  grid-area: bilder;
  display: block;
  background-color: white;
}

textblock1 {
  grid-area: texte;
  display: block;
  background-color: #AFF3C0; /*#96F5B2;*/
  padding: 0.5em;
  font-size: clamp(10px, calc(10px + (20 - 8) * ((100vw - 360px) / 1560)), 20px);
}

p.einruecken {
  padding-left: 3em;
}


ueber_uns {
  display: grid;
  grid-template-columns: 1fr 1% 1fr;
  grid-template-rows: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto;
  gap: 0px 0px;
  top: 0;
  grid-template-areas:
    "bild1 . text1"
    "zus1 zus1 zus1"
    "bild2 . text2"
    "zus2 zus2 zus2"
    "bild3 . text3"
    "zus3 zus3 zus3"
    "bild4 . text4"
    "zus4 zus4 zus4";
}

/*
ueber_uns {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto 
                      1fr auto auto 
                      1fr auto auto;
  gap: 0px 0px;
  top: 0;
  grid-template-areas:
    "bild1"
    "text1"
    "zus1"
    "bild2"
    "text2"
    "zus2"
    "bild3"
    "text3"
    "zus3"
    "bild4"
    "text4"
    "zus4";
}
*/

bild1 { grid-area: bild1; }
bild2 { grid-area: bild2; }
bild3 { grid-area: bild3; }
bild4 { grid-area: bild4; }

zus1 { grid-area: zus1; }
zus2 { grid-area: zus2; }
zus3 { grid-area: zus3; }
zus4 { grid-area: zus4; }

bild1, bild2, bild3, bild4 {
  display: block;
  justify-content: center;
  align-items: center;
  height: auto;
}


text1 { grid-area: text1; }
text2 { grid-area: text2; }
text3 { grid-area: text3; }
text4 { grid-area: text4; }

text1, text2, text3, text4 {
  display: block;
  background-color: #e6ddcf; /*#e2cfe6; /*  #AFF3C0; #96F5B2;*/
  margin-bottom: 0.4em;
  font-size: clamp(10px, calc(10px + (20 - 8) * ((100vw - 360px) / 1560)), 20px);
  padding-top: 2em;
  padding-left: 2em;
}

zus1, zus2, zus3, zus4 {
  /*background-color: #AFF3C0; /*#96F5B2;*/
  /*margin-bottom: 0.4em;*/
  font-size: clamp(10px, calc(10px + (20 - 8) * ((100vw - 360px) / 1560)), 20px);
  /*padding-top: 2em;
  padding-left: 2em; */
}






/* Aufzählung für Physiocoach */
  .coach ::marker {
  content: "⮚ ";
}

coach_einruecken {
  display: block;
  padding-left: 3em;
}
/* Ende --> Aufzählung für Physiocoach */


.steckb1, .steckb2, .steckb3, .steckb4 {
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
  padding: 20px 20px 1px;
  margin: 0px 0px 10px;
  z-index:20;
}




/*****************************************************************************/
/* keine Cookies - Layout	*/
/* Bildbox */
cookies {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2.5em;
}

/* Cookiebild */
cookies img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
  float: left;
}

/*****************************************************************************/
/* Fußzeilen - Layout	*/
/* Feste Position am unteren Rand	*/
/**/
footer {
  position: sticky;
  padding: .5em;
  bottom: 0;
  left: 0;
  right: 0;
  background: #696969;
  font-family: Open Sans;
  display: grid;
  grid-template-columns: repeat(2, auto) 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "f1 f2 .";
  font-size: clamp(8px, calc(8px + (18 - 8) * ((100vw - 360px) / 1560)), 18px);
  padding: 0.5em;
  height: 1.5em;
  grid-column-gap: 1.0em;
  vertical-align: middle;
}

f1 { grid-area: f1; }
f2 { grid-area: f2; }

footer p {
  float: right;
  margin: 0;
}


#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}


/* Fuss - Menue */
a.unten {
  font-family: Open Sans;
  color: white;
  font-size: clamp(8px, calc(8px + (18 - 8) * ((100vw - 360px) / 1560)), 18px);
}

  a.unten:link {
    color: white;
    text-decoration: none;
  }

  a.unten:hover {
    color: #00CC00;
    text-decoration: underline;
  }

/**/
/* Fußzeilen - Layout	*/
/* ENDE */



#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

  #button::after {
    content: "arrow_upward";
    font-family: Material Icons Outlined;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
  }

  #button:hover {
    cursor: pointer;
    background-color: #333;
  }

  #button:active {
    background-color: #555;
  }

  #button.show {
    opacity: 1;
    visibility: visible;
  }













.outside {
  list-style-position: outside;
}

.inside {
  list-style-position: inside;
}