/* ================================================================
   WANDSCHATTEN – eigene Farbebene über dem alten IONOS-Baukasten
   Blau = Nacht / Tiefe, Orange = Wärme / Bewegung, Papier = Text
   Diese Datei liegt absichtlich getrennt von den IONOS-CSS-Dateien.
   ================================================================ */

:root {
  --ws-nacht: #07162b;
  --ws-nacht-2: #0b263f;
  --ws-nacht-3: #102f4c;
  --ws-papier: #ebe6dc;
  --ws-papier-leise: #c9c2b7;
  --ws-orange: #d58a47;
  --ws-orange-hell: #efb06f;
  --ws-linie: rgba(239, 176, 111, 0.24);
  --ws-schatten: rgba(0, 0, 0, 0.34);
}

/* --- Grundfläche ------------------------------------------------ */
body#main_body {
  color: var(--ws-papier) !important;
  background-color: var(--ws-nacht) !important;
  background-image:
    radial-gradient(circle at 14% 8%, rgba(213, 138, 71, .16), transparent 34rem),
    linear-gradient(145deg, #07162b 0%, #0b263f 50%, #06111f 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  font-family: Georgia, "Times New Roman", serif;
}

#container {
  max-width: calc(100% - 24px);
  background: rgba(7, 22, 43, .91) !important;
  background-image: none !important;
  border-left: 1px solid rgba(239, 176, 111, .12);
  border-right: 1px solid rgba(239, 176, 111, .12);
  box-shadow: 0 22px 70px var(--ws-schatten);
}

/* Alte helle Baukastenflächen zurücknehmen */
#header,
#main_container {
  background-image: none !important;
}

/* --- Wandschatten-Kopf ------------------------------------------ */
#text_caption {
  width: auto !important;
  color: var(--ws-papier) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 25px !important;
  font-weight: normal !important;
  letter-spacing: .045em;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}

#key_visual {
  background-image: url(resources/_wsb_keyvisual.jpg) !important;
  background-position: center center !important;
  background-size: cover !important;
  border: 1px solid rgba(239, 176, 111, .18);
  box-shadow: inset 0 0 34px rgba(0,0,0,.16);
}

/* --- Navigation ------------------------------------------------- */
#main_nav_container {
  background: rgba(5, 18, 34, .82) !important;
  background-image: none !important;
  border-top: 1px solid rgba(239, 176, 111, .16);
  border-bottom: 1px solid rgba(239, 176, 111, .16);
}

#main_nav_list a.main_nav_item,
#main_nav_list a.main_nav_active_item {
  background-image: none !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: normal !important;
  color: var(--ws-papier-leise) !important;
  transition: color .2s ease, background .2s ease;
}

#main_nav_list a.main_nav_active_item {
  color: var(--ws-orange-hell) !important;
  background: rgba(213, 138, 71, .12) !important;
}

#main_nav_list a.main_nav_item:hover,
#main_nav_list a.main_nav_item:focus {
  color: var(--ws-papier) !important;
  background: rgba(213, 138, 71, .10) !important;
  text-decoration: none !important;
}

/* --- Inhalt ----------------------------------------------------- */
#sub_container2 {
  padding-top: 8px;
  padding-bottom: 18px;
}

#content_container,
.content,
.content p {
  color: var(--ws-papier) !important;
  background: transparent !important;
  font-family: Georgia, "Times New Roman", serif !important;
}

.content,
.content p {
  font-size: 17px !important;
  line-height: 1.68 !important;
}

#content_container p {
  margin: .35em 0 1.1em !important;
  padding: 4px 10px !important;
}

#content_container font,
#content_container span {
  font-family: inherit !important;
  color: inherit !important;
}

#content_container h1,
#content_container h2,
#content_container h3 {
  color: var(--ws-orange-hell) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  background-image: none !important;
}

#content_container a:link,
#content_container a:visited {
  color: var(--ws-orange-hell) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(239, 176, 111, .42) !important;
  text-underline-offset: 3px;
}

#content_container a:hover,
#content_container a:active {
  color: #ffd09d !important;
}

#content_container img,
#content_container video {
  max-width: 100%;
  height: auto;
}

/* --- Rezeption: der Text direkt hinter der Tür ----------------- */
body.rezeption #content_container p,
body.rezeption #content_container p font,
body.rezeption #content_container p span {
  font-size: 18px !important;
  line-height: 1.72 !important;
}

body.rezeption #content_container .rezeption-titel,
body.rezeption #content_container .rezeption-titel font,
body.rezeption #content_container .rezeption-titel span,
body.rezeption #content_container .rezeption-titel strong {
  font-size: 31px !important;
  line-height: 1.15 !important;
  font-weight: normal !important;
  color: var(--ws-papier) !important;
}

body.rezeption #content_container .rezeption-titel::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-top: 20px;
  background: var(--ws-orange);
  opacity: .72;
}

body.rezeption #content_container .gedanke {
  margin: 1.9em 10px 2.1em !important;
  padding: 2px 0 2px 20px !important;
  border-left: 1px solid var(--ws-linie);
  color: var(--ws-papier) !important;
  font-style: italic;
}

body.rezeption #content_container .abschluss {
  margin-top: 2.4em !important;
  margin-bottom: 2.8em !important;
}

body.rezeption #content_container .abschluss strong {
  color: var(--ws-orange-hell) !important;
  font-weight: normal !important;
}

body.rezeption #content_container .wer strong {
  color: var(--ws-orange-hell) !important;
  font-size: 21px !important;
  font-weight: normal !important;
}

/* --- Footer ----------------------------------------------------- */
#footer {
  background: rgba(5, 18, 34, .74) !important;
  background-image: none !important;
  border-top: 1px solid rgba(239, 176, 111, .12);
}

#footer_text,
#footer_text a {
  color: var(--ws-papier-leise) !important;
  font-family: Georgia, "Times New Roman", serif !important;
}

/* --- Handy / schmale Fenster ----------------------------------- */
@media (max-width: 820px) {
  body#main_body {
    text-align: left !important;
  }

  #container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-left: 0;
    border-right: 0;
    overflow: visible !important;
  }

  #header,
  #main_container {
    display: none !important;
  }

  #text_caption {
    width: auto !important;
    padding: 16px 18px 13px !important;
    font-size: 24px !important;
  }

  #key_visual {
    width: calc(100% - 24px) !important;
    height: auto !important;
    aspect-ratio: 749 / 208;
    margin: 0 12px !important;
    background-size: cover !important;
  }

  #main_nav_container {
    left: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  #main_nav_list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 7px 8px !important;
  }

  #main_nav_list li {
    float: none !important;
  }

  #main_nav_list a.main_nav_item,
  #main_nav_list a.main_nav_active_item {
    float: none !important;
    height: auto !important;
    line-height: 1.25 !important;
    padding: 8px 10px !important;
    border-radius: 999px;
    font-size: 13px !important;
  }

  #sub_container2 {
    margin: 16px 14px 0 !important;
    width: auto !important;
    overflow: visible !important;
  }

  #content_container {
    width: auto !important;
  }

  .content,
  .content p {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }

  body.rezeption #content_container p,
  body.rezeption #content_container p font,
  body.rezeption #content_container p span {
    font-size: 17px !important;
  }

  body.rezeption #content_container .rezeption-titel,
  body.rezeption #content_container .rezeption-titel font,
  body.rezeption #content_container .rezeption-titel span,
  body.rezeption #content_container .rezeption-titel strong {
    font-size: 27px !important;
  }

  #footer {
    width: 100% !important;
    height: auto !important;
    min-height: 65px;
  }

  #footer_text {
    width: auto !important;
    margin: 0 18px !important;
    padding: 22px 0 !important;
  }
}