/****************** DESIGNED BY *****************/
/*               Constanze Deten                */
/* Idee und Inhalt: Hans-Peter Herrmann         */
/*                   c 2023                     */
/************************************************/
/* pop-kekse ist nur für Index.html relevant 
@import url(pop-kekse.css); */
@import url(font-awesome.css);
@import url(pop-kekse.css);
@import url(navi.css);
@import url(calendar.css);
@import url(toggle-table.css);
@import url(notenspur.css);

/* zum Neutralisiereen des iframe mit Sandbox in HTML-head !!!! */
iframe,
.allow-forms {
  display: none;
  height: 0;
}

/* Android benötigt die .ttf-Datei */
@font-face {
  font-family: "Sundayscript";
  src: url("/css/fonts/Sundayscript.eot");
  src: url("/css/fonts/Sundayscript.eot?#iefix") format("embedded-opentype"),
    url("/css/fonts/Sundayscript.woff2") format("woff2"),
    url("/css/fonts/Sundayscript.woff") format("woff"),
    url("/css/fonts/Sundayscript.svg#Sundayscript") format("svg")
      url("/css/fonts/Sundayscript.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* schmutziges weisz, Wrapper, Text NavBar */
  --weisz80: rgba(250, 250, 250, 0.8);
  /* schmutziges weisz hinter sticky Header */
  --weisz100: rgba(250, 250, 250, 1);
  /* dark-türkis, urspr. rgb(7, 125, 146), #077c91 */
  --water100: rgb(5, 109, 113);
  /* light-water, Schatten für H1 */
  --water30: rgb(127, 250, 252);
  /* dunkles dark-türkis, Hover Navi-Item */
  --greyturquoise100: rgb(3, 60, 63);
  /* sienna, #9f512d */
  --sienna100: rgb(158, 81, 46);
  /* sand als Schattenfarbe (100%) */
  --sand100: rgb(222, 184, 135);
  /* light-sand, #deb887, Quader-BG, Button-BG */
  --sand40: rgba(222, 184, 135, 0.4);
  /* rgb(69, 69, 69), #444, anthrazit */
  --anthrazit100: #444;
  /* rgb(139, 139, 139), #8b8b8b, anthrazit */
  --anthrazit40: #8b8b8b;

  --bg-img: url(../images/img/pexels_lucas-meneses_4712714.jpg);
  --bg-img-sand: url(../images/img/bg-sand.jpg);

  --h1-shadow-1: 0.2vw 0.2vw 0.5vw var(--water30);
  --h1-shadow-2: 0.1vw 0.1vw 0.5vw var(--water30);
  --h1-shadow-3: 0.07vw 0.07vw 0.5vw var(--water30);

  --h2-shadow-1: 0.1vw 0.1vw 0.5vw var(--sand100);
  --h2-shadow-2: 0.07vw 0.07vw 0.5vw var(--sand100);
  --h2-shadow-3: 0.05vw 0.05vw 0.3vw var(--sand100);

  --link-shadow: 0.07vw 0.07vw 0.5vw rgb(69, 69, 69); /* anthrazit */

  --navbar-height: 1vh;
}

/* ##### INTRO all ##### */

* {
  font-family: Helvetica, Tahoma, Verdana, sans-serif;
  font-weight: normal;
  /* Test-Apassung */
  font-size: 1.7vh;
  color: var(--anthrazit100);
  text-decoration: none;

  word-wrap: normal;
  word-wrap: break-word;
  padding: 0;
  border: none;
  margin: 0 auto;

  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* ##### ENDE Intro ##### */

/* ##### Body - PC-Ansicht und hochauflösende Smartphones, Landscape mit 3x3-Grid ##### */

body {
  width: 100%;
  margin: 2vh auto;
}

#body-index,
#body-inhalt {
  height: 200vh;
  background: var(--bg-img) var(--water100) fixed top right;
  background-size: cover;
}
#body-imp,
#body-fakten {
  height: 100%;
  background: var(--bg-img-sand) var(--sand40);
}

.h1-all,
.h1-pc,
.h1-imp,
.h1-inhalt,
h2,
h2.bx.bx-cookie,
.ignorestyle,
#head-cal,
#headinnav {
  font-family: "Sundayscript", "Cabin", Helvetica, sans-serif;
}

.icon {
  display: grid;
  grid-template-columns: repeat(1, 100%);
  place-items: center;
}
.fa.fa.fa-home {
  padding: 0 0.5vw;
  _transform: translateY(-5%);
  _transform: translateX(10%);
}
.fa.fa.fa-bars {
  padding: 0 0.5vw;
  _transform: translateY(5%);
  _transform: translateX(-10%);
}
.fa {
  color: var(--anthrazit100);
}

p {
  margin: .5vh 0;
}

a,
.link,
.link-imp {
  text-decoration: none;
  color: var(--water100);
  clear: both;
}
a:hover,
.link:hover,
.link-imp:hover {
  color: var(--sienna100);
  transition: 1s;
}

.center-text {
  text-align: center;
}

/* wird im Moment nicht verwendet, da Zeichen auch so erkannt werden ... */
/* .quote-vorn {
  quotes: "„";
}
.quote-hinten {
  quotes: "“";
} */

/* ##### Wrapper - ganze Inhaltsseite/ Inhalt über HG-Bild ##### */
.wrapper {
  width: 90%;
  background: var(--weisz80);
  padding: 0;
  margin: 0 auto;
}

/* ***** Header - Wrapper für head und nav ***** */
.header-index,
.header-inhalt,
.header-imp {
  background: var(--weisz100);
  text-align: center;
  padding: 0;
  margin: 0 auto;
}

.header-inhalt {
  display: none;
}
.head2cols {
  padding: 3vh 1vw 3vh 1vw;
  display: none;
}
/* .h1-all + .h1-pc - geteilte head für reponsive Darstellung 
-> erst ab 2-spaltiger Darstellung */
.h1-all,
.h1-pc {
  font-family: "Sundayscript", "Cabin", Helvetica, sans-serif;
  font-weight: 900;
  color: var(--water100);
  text-shadow: var(--h1-shadow-1);
  font-size: 4vh;
}

#main-index {
  padding: 0 10vw;
  margin: 0 auto;
}

/* Cookie-Abschnitt -> #consent-div */
#consent-div {
  margin: 3vh 10vw;
}

/* nav bei 3x3-Grid versteckt */
/* Navigation im Header - nav bei 2x2-Grid und Column eingeblendet */

/* nur #topnav hier, alles andere in navi.css */
#topnav {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  line-height: 100%;
  background-color: var(--water100);
}

#headinnav,
.fa.fa-home,
.fa.fa-bars {
  font-size: 3vh;
  font-weight: 900;
  color: var(--weisz100);
  _text-shadow: var(--h1-shadow-1);

  padding: 0;
  margin: 0;
  vertical-align: middle;
}
#headinnav {
  padding-top: 1vh;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
}

/* der jeweilige Navi-Punkt ist ausgeblendet .hidden-item */
.hidden-item {
  display: none;
}

.sienna {
  color: var(--sienna100);
}
.bold {
  font-weight: bold;
}

/* ***** ENDE header ***** */

/* ***** main/ page mit 9/8-Felder-Übersicht ***** */
/* -> Inhalte erstmal verborgen */
.head-img,
#aufruf-fakten,
#unnuetz-raetsel,
#klima-buch,
#consult-visit {
  display: none;
}

/* ***** A: Inhalts-Seite: Content mit 9 bzw. 8 Flächen ***** */

/* Klassen ignorestyle/-link für Links auf 8 bzw. 9 Cards der Inhalts-Seite */
h2,
.ignorestyle {
  color: var(--sienna100);
  font-size: 2.2vh;
  text-shadow: var(--h2-shadow-2);

  margin: 0vh 0.7vw;
}
.ignorestylelink {
  color: var(--anthrazit100);
}

.page-grid {
  width: 100%;
  height: 100%;
  text-align: center;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;

  padding: 1vw 1vw;
}

.quader {
  width: 100%;
  height: 100%;
  padding: 1vw;
  /* rgba hinter url, falls img nicht geladen wird */
  background: url(../images/img/pexels_kate-graur_5425708.jpg) var(--sand40);
  background-size: cover;
  box-shadow: 3px 3px 7px var(--sand100);
  border-radius: 2vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.quader:hover {
  filter: sepia(30%);
  transition: .5s ease;
}

/* für Card-Umsortierung doppelte Cards -> zunächst ausgeblendet*/
#lexikon-c2,
#visitenkarte-c2,
#sprechstunde-c2 {
  display: none;
}

/* Flipcards */
/* https://stackoverflow.com/questions/52697020/showing-full-content-of-the-flip-card-under-mobile-devices */

.flipbox {
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -o-perspective: 2000px;
  perspective: 2000px;
}

.flipbox:hover .flipper
/* , .flipbox.hover .flipper  */ {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flipper {
  -webkit-transition: 0.5s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;

  /* Parent-Div in Flipbox hat rel. Pos. */
  position: relative;
}

.front,
.back {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  border-radius: 2vw;
  padding: 0 0.9vw;
}

/* z-index 3: #wrapper, z-index 2: .page */
.front {
  position: relative;
  transform: rotateY(0deg);
  /* z-index 1 unter back-Div */
  z-index: 2;
}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);

  /* Chil-Divs in Flipbox haben absolute Pos. */
  position: absolute;
  top: 0%;
  left: 0%;
  /* z-index 1 über front-Div */
  z-index: 4;
}

/*
spezielle Cards mit Flip-Effekt: 
- hist. Fakt, 
- Ortsrätsel, 
- wusstest du, dass... , 
- Visitenkarte Region, 
*/
#urlaubsdetektive .flipper .front,
#visitenkarte .flipper .front,
#visitenkarte-c2 .flipper .front,
#urlaubsdetektive .flipper .front img,
#visitenkarte .flipper .front img,
#visitenkarte-c2 .flipper .front img {
  /* Flip-Cards mit 0 Padding und Margin */
  padding: 0;
  border-radius: 2vw;
  margin: 0;
}

/* Urlaubsdetektive mit 2. Layer über front-Div (uebergroszes Fragezeichen) */
.layer-flipimg {
  width: 99%;

  position: absolute;
  top: 0;
  left: 0;
  /* Test-Apassung */
  font-size: 15vh;
  color: red;
  font-weight: bold;

  z-index: 3;
}

/* Kalender im Zentrum bei 3x3-Grid */
#heute {
  width: 100%;
  height: 100%;
  padding: 1vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0.7)
    ),
    var(--bg-img) fixed top right;
    box-shadow: 3px 3px 7px var(--sand100);
    border-radius: 2vw;
  }

/* head in Card "Kalender im Zentrum" bei 3x3-Grid 
-> Card sonst versteckt */
#head-cal {
  font-size: 3.3vh;
  font-weight: bolder;
  color: var(--water100);
  text-shadow: var(--h2-shadow-1);
}

/* ################## Content-Seiten ########################### */
/* ***** C: Content-Seiten -> nur über Inhalts-Opener erreichbar ***** */

/* geringes Padding für gesamte Content-Page */
#main-imp,
#main-inhalt,
#main-notenspur {
  width: 100%;
  display: flex;
  flex-direction: column;
  _text-align: block;
}

head {
  display: block;
  float: left;
}


/* #### oberer Bereich - Bild mit NavItem-Layer ### */
/* Toggle-Button auf Head-Img -> nicht mehr im Einsatz */
#aufruf-fakten,
.button-cont {
  min-width: 15vw;
  padding: 0.8vw;
  background: var(--sand100);
  border: 0.1vw solid var(--sand100);
  border-radius: 1vw;
  font-weight: 700;
  color: var(--water100);
  cursor: pointer;
  transition: all 0.5s ease;

  z-index: 3;
}
#aufruf-fakten:hover,
.button-cont:hover {
  background-color: var(--water100);
  color: var(--weisz80);
  transition: 3s ease;
}

/* Überschrift unter Head-Img */
.h1-inhalt,
.h1-imp {
  width: 100%;
  padding: 4vh 0 1vh 0;
  margin: 0 auto;

  /* Test-Apassung */
  font-size: 3.5vh !important;
  font-weight: 900;

  letter-spacing: -1px;
  border: none;
  background: none;
  text-decoration: none;
  color: var(--sienna100);
  text-shadow: var(--h2-imp-shadow);
  text-align: center;
}

/* Cookie-Popup -> nicht mehr im Einsatz */
h2 .bx.bx-cookie {
  height: 3.5vh;
  font-size: 3.5vh;
}


.head-img,
.head-map {
  width: 100%;
  background-color: var(--weisz80);
}

.navlayer {
  position: absolute;
  left: 10%;
  top: 18%;

  display: flex;
  flex-direction: column;
  float: left;

  row-gap: 2vh;
  z-index: 0;
}


.sec-page {
  width: 100%;
  display: none;
}
.sec-imppage,
.sec-region {
  width: 100%;
  padding: 0 1.5vw;
}

article,
section {
  overflow: auto;
}

.page-inhalt,
#impdasch {
  width: 100%;
}

/* ########### Fakten-Seite ############ */
/* unterer Bereich - Inhalte unter Bild mit NavItem-Layer */

/* Baustellenseite */
.table-empty {
  display: none;
}

/* Inhaltsseiten */
.table-content {
  padding: 0;
  margin: 0 1vw;
}

/* ######## weitere Formate s. toggle-table.css ########## */

/* ********* Impressum/ Datenschutz-Seite ******** */
.h2-imp {
  text-align: left;
  padding: 2vh 0 1vh 0;
  margin: 0;
  color: var(--sienna100);

  font-size: 2.5vh;
  font-weight: 800;
  text-shadow: var(--h2-shadow-1);
}

.h3-imp {
  text-align: left;
  padding: 2vh 0 1vh 0;
  margin: 0;
  font-size: 2.4vh;
  font-weight: 600;
}

.h4-imp {
  text-align: left;
  padding: 2vh 0 1vh 0;
  margin: 0;
  font-size: 2.3vh;
  font-weight: 600;
}

/* ***** ENDE Inhalt main / page ***** */

/* ***** Footer **** */

#footer {
  width: 100%;
  height: 10vh;
  margin: 0 auto;
  padding: 2vh 0 2vh 0;

  font-size: 2.2vh;
  font-weight: 700;
  color: var(--water100);
  text-shadow: var(--link-shadow);
  text-align: center;
}
/* ***** ENDE Footer **** */
/* ##### ENDE Wrapper / Seiten-Inhalt ##### */

/* ***** Bildgröße wird immer auf 100% runtergerechnet ***** */
img {
  max-width: 100%;
  height: auto;
}

/* ##### Ende DESKTOP PC - Landscape ##### */

/* ################################################################ */
/* ############## 1. Schritt 3-spaltig, mittelgroße PC, Laptops, Tablet - Landscape ################ */
@media only screen and (min-width: 640px) and (max-width: 1200px) and (orientation: landscape) {
  /* flexible Größen durch %, em, vh/ vw (viewport with) */

  /* ##### Body - PC-Ansicht, Tablets und hochauflösende Smartphones, queer ##### */
  .index-body {
    height: 250vh;
  }
  .inhalt-body {
    height: 250vh;
  }

  /* ##### Wrapper - ganze Inhaltsseite/ Inhalt über HG-Bild ##### */

  /* wenn inhalt.html aufgerufen, erstmal unsichtbar
  -> bei Anzeige der Inhalte der Seite wird header-inhalt eingeblendet */
  .header-inhalt {
    display: none;
  }
  /* wenn Inhalts-Seite aufgerufen, dann .header-inhalt sichtbar, 
  -> aber head2cols noch nicht -> head steht in der Navigation als #headinnav  */
  .head2cols {
    display: none;
  }

  /* nav bei 3x3-Grid versteckt 
  -> bei Inhaltsaktivierung Bild mit 4 Layer-Button*/
  /* oberer Bereich - Bild mit NavItem-Layer */
  .navlayer {
    _left: 10%;
    left: 7%;
    top: 18%;
    row-gap: 1.5vh;
  }
  #aufruf-fakten,
  .button-cont {
    min-width: 15vw;
    padding: 0.8vw;
  }  

  /* Grid für Crads -> hier 3 x 3 */
  /* head "Wissenskalender" in Card "Kalender im Zentrum" bei 3x3-Grid -> Card sonst versteckt */
  .page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  /* Urlaubsdetektive mit 2. Layer über front-Div (groszes Fragezeichen) */
  #urlaubsdetektive .flipper .front {
    _font-size: 15vh;
  }

  /* ***** Footer **** */
  #footer {
    height: 10vh;
    padding: 2vh 0 2vh 0;
    font-size: 2vh;
  }
  /* ***** ENDE Footer **** */
  /* ##### ENDE Wrapper / Seiten-Inhalt ##### */
}

/* ##### Ende 3-spaltig, mittelgroße PC, Laptop - Landscape ##### */

/* ################################################################ */
/* ############## 2. Schritt 3-spaltig, Kindle, Tablet, iPad - Landscape ################ */
@media only screen and (min-width: 430px) and (max-width: 800px) and (orientation: landscape) {
  /* flexible Größen durch %, em, vh/ vw (viewport with) */

  /* ##### Body - PC-Ansicht, Tablets und hochauflösende Smartphones, queer ##### */
  .index-body {
    height: 250vh;
  }
  .inhalt-body {
    height: 250vh;
  }

  /* ##### Wrapper - ganze Inhaltsseite/ Inhalt über HG-Bild ##### */
  /* ***** Wrapper für head und nav ***** */

  /* ############### DESIGN für Inhalts-Seite ############ */
  /* .h1-all + .h1-pc - geteilte head für reponsive Darstellung 
  -> erst ab 2-spaltiger Darstellung */

  .head2cols {
    display: none;
    padding: 1.8vh 1vw 0.8vh 1vw;
  }
  .h1-all,
  .h1-pc {
    font-size: 4vh;
    _display: flex;
    _flex-direction: row;
    _flex-direction: column;
  }

  /* nav bei 3x3-Grid versteckt 
  -> sonst bei Landscape und hochauflösender Darstellung inlkine */
  #topnav {
    display: flex;
  }

  /* nav bei 3x3-Grid versteckt 
  -> bei Inhaltsaktivierung Bild mit 4 Layer-Button*/
  /* oberer Bereich - Bild mit NavItem-Layer */
  .navlayer {
    _left: 10%;
    left: 7%;
    top: 18%;
    row-gap: 1.5vh;
  }
  #aufruf-fakten,
  .button-cont {
    min-width: 15vw;
    padding: 0.8vw;
  }

  /* Grid für Cards -> hier 3 x 3 */
  .page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  /* Cards auf Inhalts-Seite */
  .quader {
    border-radius: 2vw;
  }

  /* Flipcards */
  .front,
  .back {
    border-radius: 3vw;
    padding: 0 0.7vw;
  }

  /* Urlaubsdetektive mit 2. Layer über front-Div (groszes Fragezeichen) */
  #urlaubsdetektive .flipper .front {
    font-size: 11vh;
  }

  /* Kalender im Zentrum bei 3x3-Grid */

  /* ***** Footer **** */
  #footer {
    height: 10vh;
    padding: 2vh 0 2vh 0;
    font-size: 2vh;
  }
  /* ***** ENDE Footer **** */
  /* ##### ENDE Wrapper / Seiten-Inhalt ##### */
}

/* ##### Ende 3-spaltig, Kindle, Tablet, iPad - Landscape ##### */

/* ################################################################################################## */
/* ##### 3. Schritt 2-spaltig, 2-spaltig, Kindle, iPad, Laptop, Tablet, hochauflösende Phones - Portrait ##### */
@media only screen and (min-width: 800px) and (max-width: 1080px) and (orientation: portrait) {
  /* flexible Größen durch %, em, vh/ vw (viewport with) */

  /* ##### Body - PC-Ansicht, Tablets und hochauflösende Smartphones, hochkant ##### */

  body,
  .link {
    margin: 1.5vh auto;
  }

  /* ##### Body - PC-Ansicht, Tablets und hochauflösende Smartphones, queer ##### */
  .index-body {
    height: 160vh;
  }
  .inhalt-body {
    height: 160vh;
  }

  /* ##### Wrapper - ganze Inhaltsseite/ Inhalt über HG-Bild ##### */
  /* ***** Wrapper für head und nav ***** */

  /* ############### DESIGN für Inhalts-Seite ############ */
  /* .h1-all + .h1-pc - geteilte head für reponsive Darstellung 
  -> erst ab 1-spaltiger Darstellung ? TESTEN !!! */

  .head2cols {
    display: block;
    text-align: center;
    padding: 1.5vh 1vw 0.5vh 1vw;
  }
  .h1-all,
  .h1-pc {
    font-size: 3.8vh;
    _display: flex;
    _flex-direction: row;
    _flex-direction: column;
  }

  /* nav bei 3x3-Grid versteckt 
  -> sonst bei Landscape und hochauflösender Darstellung inlkine */
  /* nav bei 3x3-Grid versteckt 
  -> bei Inhaltsaktivierung Bild mit 4 Layer-Button*/
  #topnav {
    display: block;
  }
  #headinnav {
    display: none;
  }

  /* oberer Bereich - Bild mit NavItem-Layer */
  .navlayer {
    _left: 10%;
    left: 7%;
    _top: 18%;
    top: 20%;
    row-gap: 1.5vh;
  }
  #aufruf-fakten,
  .button-cont {
    min-width: 15vw;
    padding: 0.8vw;
  }

  /* der jeweilige Navi-Punkt ist ausgeblendet .hidden-item */
  /* head in Card "Kalender im Zentrum" bei 3x3-Grid -> Card sonst versteckt */

  /* Klassen ignorestyle/-link für Links auf 8 bzw. 9 Cards der Inhalts-Seite */
  h2,
  .ignorestyle {
    text-shadow: var(--h2-shadow-2);
    _margin: 0vh 0.7vw;
  }

  /* Grid für Cards -> hier 4 x 2 */
  .page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  /* Cards auf Inhalts-Seite */
  .quader {
    border-radius: 2vw;
  }

  /* für Card-Umsortierung doppelte Cards -> zunächst ausgeblendet */
  #lexikon-c2,
  #visitenkarte-c2,
  #sprechstunde-c2 {
    display: flex;
  }

  #lexikon,
  #calendar,
  #visitenkarte,
  #sprechstunde {
    display: none;
  }

  #heute,
  #heute div {
    visibility: hidden;
    display: none !important;
  }

  /* Flipcards */

  .front,
  .back {
    border-radius: 3vw;
    padding: 0 0.7vw;
  }

  /* Urlaubsdetektive mit 2. Layer über front-Div (groszes Fragezeichen) */
  #urlaubsdetektive .flipper .front {
    font-size: 10vh;
  }

  /* ***** Footer **** */
  #footer {
    font-size: 1.5vh;
    height: 8vh;
    padding: 2vh 0 2vh 0;
  }
  /* ***** ENDE Footer **** */
  /* ##### ENDE Wrapper / Seiten-Inhalt ##### */
}

/* ##### Ende 2-spaltig, Kindle, iPad, Laptop, Tablet, hochauflösende Phones - Portrait ##### */

/* ################################################################ */
/* ############## 4. Schritt 2-spaltig, Smartphones - Portrait ################ */
@media only screen and (max-width: 820px) and (orientation: portrait) {
  /* flexible Größen durch %, em, vh/ vw (viewport with) */

  /* ##### Body - PC-Ansicht, Tablets und hochauflösende Smartphones, queer ##### */

  body,
  .link {
    margin: 1.5vh auto;
  }

  .index-body {
    height: 250vh;
  }
  .inhalt-body {
    height: 250vh;
  }

  /* ##### Wrapper - ganze Inhaltsseite/ Inhalt über HG-Bild ##### */
  /* ***** Wrapper für head und nav ***** */

  /* .h1-all + .h1-pc - geteilte head für reponsive Darstellung 
  -> erst ab 2-spaltiger Darstellung */
  .head2cols {
    display: block;
    padding: 1.5vh 1vw 0.5vh 1vw;
  }
  .h1-all,
  .h1-pc {
    font-size: 3.5vh;
    display: flex;
    _flex-direction: row;
    flex-direction: column;
  }

  /* nav bei 3x3-Grid versteckt 
  -> sonst bei Landscape und hochauflösender Darstellung inlkine */
  #topnav {
    display: block;
  }
  #headinnav {
    display: none;
  }

  /* oberer Bereich - Bild mit NavItem-Layer */
  .navlayer {
    _left: 10%;
    left: 7%;
    top: 18%;
    row-gap: 1.5vh;
  }

  /* Grid für Cards -> hier 4 x 2 */
  .page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  /* Cards auf Inhalts-Seite */
  .quader {
    border-radius: 2vw;
  }

  /* für Card-Umsortierung doppelte Cards -> zunächst ausgeblendet */
  #lexikon-c2,
  #visitenkarte-c2,
  #sprechstunde-c2 {
    display: flex;
  }

  #lexikon,
  #calendar,
  #visitenkarte,
  #sprechstunde {
    display: none;
  }

  #heute,
  #heute div {
    visibility: hidden;
    display: none !important;
  }

  /* Flipcards */

  .front,
  .back {
    border-radius: 3vw;
    padding: 0 0.7vw;
  }

  /* Urlaubsdetektive mit 2. Layer über front-Div (groszes Fragezeichen) */
  #urlaubsdetektive .flipper .front {
    font-size: 12vh;
  }


  /* ***** Footer **** */
  #footer {
    font-size: 1.5vh;
    height: 9vh;
    padding: 2vh 0 2vh 0;
  }
  /* ***** ENDE Footer **** */
  /* ##### ENDE Wrapper / Seiten-Inhalt ##### */
}

/* ##### Ende 2-spaltig, hochauflösende Smartphones - Portrait ##### */

/* ################################################################ */
/* ################# 5. Schritt: 1-spaltig, Smartphones - Portrait ##############*/
/* Smartphone hochkant mit 1-spaltiger Darstellung der Inhalte  */
@media only screen and (max-width: 430px) and (orientation: portrait) {
  /* flexible Größen durch %, em, vh/ vw (viewport with) */

  /* ##### Body - zusammengeschobener PC-Screen und Smartphones, hochkant ##### */

  body,
  .link {
    margin: 1.8vh auto 10vh auto;
  }

  .index-body {
    height: 300vh;
  }
  .inhalt-body {
    height: 300vh;
  }

  /* ##### Wrapper - ganze Inhaltsseite/ Inhalt über HG-Bild ##### */
  /* ***** Wrapper für head und nav ***** */

  /* .h1-all + .h1-pc - geteilte head für reponsive Darstellung 
  -> erst ab 2-spaltiger Darstellung */

  /* Grid für Cards -> hier entfallen, nur eine Column mit 8 Cards */
  .head2cols {
    display: block;
    padding: 1.7vh 1vw 2.2vh 1vw;
  }
  .h1-all,
  .h1-pc {
    font-size: 3vh;
    display: flex;
    _flex-direction: row;
    flex-direction: column;
  }

  /* nav bei 3x3-Grid versteckt 
  -> bei Inhaltsaktivierung Bild mit 4 Layer-Button*/
  #topnav {
    display: block;
  }
  #headinnav {
    display: none;
  }

  /* oberer Bereich - Bild mit NavItem-Layer */
  .navlayer {
    left: 10%;
    _top: 18%;
    top: 20%;
    row-gap: 1.5vh;
  }
  #aufruf-fakten,
  .button-cont {
    min-width: 15vw;
    padding: 0.8vw;
  }

  /* Cards auf Inhalts-Seite */
  .page-grid {
    display: flex;
    flex-direction: column;
  }

  .quader {
    border-radius: 2vw;
    min-height: 30vh;
    max-height: 45vh;
  }

  /* für Card-Umsortierung doppelte Cards -> zunächst ausgeblendet */
  #lexikon-c2,
  #visitenkarte-c2,
  #sprechstunde-c2 {
    display: flex;
  }

  #lexikon,
  #calendar,
  #visitenkarte,
  #sprechstunde {
    display: none;
  }

  #heute,
  #heute div {
    visibility: hidden;
    display: none !important;
  }

  /* Flipcards */
  /* .flipbox {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    perspective: 800px;
  } */

  .front,
  .back {
    border-radius: 3vw;
    padding: 0 0.7vw;
  }

  /* Urlaubsdetektive mit 2. Layer über front-Div (groszes Fragezeichen) */
  #urlaubsdetektive .flipper .front {
    font-size: 12vh;
  }


  /* ***** Footer **** */
  #footer {
    height: 10vh;
    padding: 2vh 0 2vh 0;
    font-size: 2vh;
  }

  /* ***** ENDE Footer **** */
  /* ##### ENDE Wrapper / Seiten-Inhalt ##### */
}

/* ##### Ende 1-spaltig, Smartphones - Portrait ##### */