@charset "UTF-8";
:root {
  --primary-color: rgb(95, 158, 160);
  --secondary-color: #F27645;
  --light-secondary-color: #FFEBCD;
  --text-color: #ffffff;
  --third-text-color: #4169e1;
  --first-headline: lightgreen;
  --secondary-headline: #FF4500;
  --first-shade: silver;
  --background-color: #314453;
  --darker-background-color: #243848;
  --accent-color: #41DCE1;
  --navbar-height: 5em;
  --footer-height: 3em;
  --navbar-height-resp: 3.5em;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
  font-size: 62.5%;
}

/* ---------------------------------------------------------- */
body {
  height: 100vh;
  background-color: var(--text-color);
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.headline {
  top: 7%;
  width: 100%;
  text-align: center;
  padding-top: auto;
  padding-bottom: auto;
  margin: 0 0 3em 0;
}
.headline h1 {
  width: 100%;
  font-weight: bold;
  font-size: 3rem;
  padding: 0;
  color: var(--secondary-color);
}

.sub-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 120em;
  height: 55em;
}

/* ----------------------------- Navigation Start ------------------------------ */
nav {
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  width: 100%;
  background-color: var(--primary-color);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav svg {
  fill: var(--text-color);
}

.links-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

nav a {
  height: 100%;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 2rem;
  color: var(--text-color);
}

.cube-link {
  display: none;
}

nav a:hover {
  background-color: var(--accent-color);
}

.home-link {
  margin-right: auto;
}

#sidebar-active {
  display: none;
}

.open-sidebar-button, .close-sidebar-button {
  display: none;
}

/* ----------------------------- Navigation Ende ------------------------------ */
.wuerfel {
  display: flex;
  position: absolute;
  top: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* ------------------- 3D-Würfel -------------- */
#box::before(1) {
  display: block;
  position: absolute;
  content: "A";
  -webkit-transform-origin: left center;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: left center;
  -moz-transform: rotateY(-90deg);
  -o-transform-origin: left center;
  -o-transform: rotateY(-90deg);
  -ms-transform-origin: left center;
  -ms-transform: rotateY(-90deg);
  transform-origin: left center;
  transform: rotateY(-90deg);
}

#box::before(2) {
  display: block;
  position: absolute;
  content: "D";
  -webkit-transform-origin: left center;
  -webkit-transform: translateZ(100px);
  -moz-transform-origin: left center;
  -moz-transform: translateZ(100px);
  -o-transform-origin: left center;
  -o-transform: translateZ(100px);
  -ms-transform-origin: left center;
  -ms-transform: translateZ(100px);
  transform-origin: left center;
  transform: translateZ(100px);
}

#box::before(3) {
  display: block;
  position: absolute;
  content: "H";
  -webkit-transform-origin: right center;
  -webkit-transform: rotateY(90deg);
  -moz-transform-origin: right center;
  -moz-transform: rotateY(90deg);
  -o-transform-origin: right center;
  -o-transform: rotateY(90deg);
  -ms-transform-origin: right center;
  -ms-transform: rotateY(90deg);
  transform-origin: right center;
  transform: rotateY(90deg);
}

#box::before(4) {
  display: block;
  content: "S";
  position: absolute;
  -webkit-transform-origin: center center;
  -webkit-transform: rotateY(180deg);
  -moz-transform-origin: center center;
  -moz-transform: rotateY(180deg);
  -o-transform-origin: center center;
  -o-transform: rotateY(180deg);
  -ms-transform-origin: center center;
  -ms-transform: rotateY(180deg);
  transform-origin: center center;
  transform: rotateY(180deg);
}

#box::nth-pseudo(before, even) {
  background: var(--secondary-color);
  opacity: 0.65;
}

#box::nth-pseudo(before, even) {
  background: var(--primary-color);
  opacity: 0.8;
}

#box {
  position: absolute;
  z-index: 50;
  -webkit-perspective: -900;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: center center 75px;
  -webkit-animation: rotate 5s infinite linear;
  -moz-perspective: -900;
  -moz-transform-style: preserve-3d;
  -moz-transform-origin: center center 75px;
  -moz-animation: rotate 5s infinite linear;
  -o-perspective: -900;
  -o-transform-style: preserve-3d;
  -o-transform-origin: center center 75px;
  -o-animation: rotate 5s infinite linear;
  -ms-perspective: -900;
  -ms-transform-style: preserve-3d;
  -ms-transform-origin: center center 75px;
  -ms-animation: rotate 5s infinite linear;
  perspective: -900;
  transform-style: preserve-3d;
  transform-origin: center center 75px;
  animation: rotate 5s infinite linear;
}

#box:hover {
  animation-play-state: paused;
  transform: rotate(0.2turn);
}

#box,
#box * {
  color: var(--text-color);
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 2.5rem;
  line-height: 4;
  width: 100px;
  height: 100px;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(-20deg);
  }
  100% {
    transform: rotateY(-360deg) rotateX(-20deg);
  }
}
#tripwire {
  display: none;
  background: papayawhip;
  padding: 10px 20px;
}

/* --------------------------- 3D-Würfel Ende ---------------------- */
main {
  width: 100%;
}

#home {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  gap: 20em;
}

#home .sect_innen {
  display: flex;
  flex-direction: column;
  width: 125em;
  height: 45em;
  padding: 0.5em;
  flex: 1;
  overflow: hidden;
	margin: 0;
}
#home .sect_innen h2 {
  display: inline;
  width: 100%;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}
#home .sect_innen h3 {
  font-size: 1.75rem;
  font-weight: bold;
}
#home .sect_innen ul, #home .sect_innen ol {
  font-size: 1.5rem;
  line-height: 1.25;
  padding: 0.5em 3em;
  margin: 0;
}
#home .sect_innen p {
  font-size: 1.5rem;
  padding: 0.5em 0;
  margin: 0;
}

article {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  min-width: 40%;
  height: auto;
  justify-content: flex-start;
  justify-content: space-between;
  gap: 0.5em;
  align-items: center;
  padding: 0 1em;
  overflow: hidden;
}
article ul {
  font-size: 1.5rem;
  padding: 0.5em 0 0 2em;
  margin: 1em 0;
}
article p {
  font-size: 1.75rem;
  padding: 1em 1em 0 1em;
}

.sect_innen {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  height: 45em;
  column-gap: 10%;
  flex: 1;
  overflow: hidden;
  margin-top: 2em;
}
.sect_innen h2 {
  display: inline;
  width: 100%;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}
.sect_innen h3 {
  font-size: 1.75rem;
  font-weight: bold;
  margin: 1em 0;
}
.sect_innen p, .sect_innen ul, .sect_innen ol {
  font-size: 1.75rem;
  padding: 1.5em 0;
}
.sect_innen ul {
  list-style-type: circle;
  padding-left: 2em;
}
.sect_innen ol {
  list-style-type: decimal;
  padding-left: 2em;
}

/* ----------------------------- "Wo" Start ------------------------------ */
.box_li {
  display: flex;
  flex-direction: row;
  width: 65em;
  height: 60em;
  justify-content: start;
  align-content: space-between;
}

.box_li iframe {
  width: 100%;
  height: 100%;
}

.map {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-start;
}

.box_re {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 60em;
  height: 100%;
  overflow: auto;
}
.box_re ul, .box_re ol, .box_re p {
  margin: 0;
  padding: 0;
}
.box_re ul, .box_re ol {
  margin: 0.5em 0 0 2em;
  line-height: 1.5;
}
.box_re p {
  margin: 0.5em 0;
}

.oben {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 50%;
  padding: 0;
}

.oben figure {
  width: 50%;
  height: 100%;
  overflow: hidden;
  padding: 0 0.5em 0 0.5em;
}
.oben figure img {
  max-width: 100%;
  height: 80%;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin-bottom: 0.5em;
}

.oben figcaption {
  width: auto;
  font-size: 2rem;
  text-align: center;
  line-height: 1;
  border-top: solid 2px var(--third-text-color);
  border-bottom: solid 2px var(--third-text-color);
}

.unten {
  flex-direction: row;
  width: 100%;
  height: 50%;
  overflow: auto;
}

.unten figure {
  width: auto;
  font-size: 2rem;
  text-align: center;
  line-height: 1;
  padding: 0 0.5em 0 0.5em;
  margin-bottom: 0.5em;
}
.unten figure img {
  max-width: 100%;
  height: 80%;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin-bottom: 0.5em;
}

.unten figcaption {
  width: 100%;
  height: 50%;
  font-size: 2rem;
  border-top: solid 2px var(--third-text-color);
  border-bottom: solid 2px var(--third-text-color);
}

/* ----------------------------- Kalender Start ------------------------------ */
.kalender {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: start;
  overflow: hidden;
  margin-bottom: 1%;
}
.kalender ul, .kalender p {
  font-size: 1.75rem;
  line-height: 1;
}

.legende {
  box-sizing: content-box;
  width: 90%;
  height: auto;
  margin: 0 0 2em 0;
}
.legende ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-decoration: none;
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 0.5em;
}

.kalender_innen {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: space-around;
}

.cal {
  margin: 0 0.5em;
}

.cal, .calendar {
  display: flex;
  flex-direction: column;
}

.cal td, .calendar td {
  font-size: 1.8rem;
  padding: 0.5em;
}

.cal caption, .calendar caption {
  font-size: 2.5rem;
}

table {
  width: 3em;
}

table,
td,
caption {
  border: thin solid black;
  border-collapse: collapse;
  padding: 0.25em;
  text-align: center;
}

td:nth-of-type(6),
td:nth-of-type(7) {
  background: LightCyan;
  color: #666;
}

caption,
tr:first-of-type {
  background: #666;
  color: #c4ced3;
  font-weight: bold;
  margin-bottom: 0.25em;
}

td.heute {
  font-weight: bold;
  border: 5px red solid;
}

td.termin1 {
  font-weight: bold;
  background: cornflowerblue;
  color: white;
}

td.termin2 {
  font-weight: bold;
  background: green;
  color: white;
}

.daily {
  border: 3px red solid;
}

.shg2 {
  background: cornflowerblue;
  color: white;
  font-weight: bold;
  padding: 0 2px 0 2px;
}

.shg4 {
  background: green;
  color: white;
  font-weight: bold;
  padding: 0 2px 0 2px;
}

/* ----------------------------- Kalender Ende ------------------------------ */
/* ================================================================== print.html === */
#buecher {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  justify-content: center;
  overflow: scroll;
}

.kind:nth-child(3) {
  display: flex;
  flex-direction: row;
  width: 10em;
  justify-content: center;
  align-items: center;
}
.kind:nth-child(3) img {
  overflow: hidden;
  height: 123px;
  width: auto;
  margin: 0 0.5em;
  border: 1px solid black;
}

.kind:nth-child(1) img {
  height: 123px;
}

/* ------------------------------------- Bildergalerie Bücher ----------------------- */
.post {
  width: 120px;
  height: 175px;
  position: relative;
  margin: 1em;
  cursor: pointer;
}
.post img {
  border: solid 1px black;
}

.post:hover .flip-card-back {
  width: 40em;
}

.post img {
  display: block;
  width: 120px;
  height: 175px;
}

.flip-card-back {
  width: 0px;
  height: 40em;
  position: absolute;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(240, 255, 255, 0.3);
  overflow: scroll;
  transition: 0.7s ease;
  transition-delay: 1s;
  z-index: 1001;
}

.overlay p {
  color: var(--third-text-color);
  font-size: 1.5rem;
  text-align: left;
  padding: 0.5em;
}

.flip-card-back:hover {
  width: 100%;
  background-color: azure;
  transition: 0.5s;
}

.footer {
  display: flex;
  flex-direction: row;
  position: sticky;
  bottom: 0;
  width: 100%;
  height: var(--footer-height);
  justify-content: space-around;
  align-items: center;
  background-color: var(--primary-color);
  font-size: 2rem;
  color: white;
}

.footer span {
  font-size: 1.25vw;
}/*# sourceMappingURL=layout.css.map */