/* =========================================================
   Michelangelo – Die Familien vor Christus
   Grundgestaltung
   ========================================================= */

:root {
  --hintergrund: #f4f0e8;
  --hintergrund-hell: #fbf9f4;
  --hintergrund-dunkel: #25231f;

  --schrift: #282722;
  --schrift-hell: #f8f4eb;
  --schrift-mild: #6e695f;

  --gold: #a6864b;
  --gold-dunkel: #735c32;
  --linie: rgba(40, 39, 34, 0.17);

  --seitenbreite: 1280px;
  --schatten: 0 18px 45px rgba(33, 29, 22, 0.14);
}


/* =========================================================
   Zurücksetzen
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--schrift);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 18px;
  line-height: 1.7;
}

body,
button,
a {
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-weight: 400;
  line-height: 1.16;
}

h2 {
  max-width: 900px;
  margin-bottom: 34px;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  letter-spacing: -0.035em;
}

h3 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.seitenbreite {
  width: min(calc(100% - 48px), var(--seitenbreite));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}


/* =========================================================
   Kopf und Navigation
   ========================================================= */

.seitenkopf {
  position: sticky;
  z-index: 1000;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;

  min-height: 86px;
  padding: 14px max(24px, calc((100% - var(--seitenbreite)) / 2));

  border-bottom: 1px solid var(--linie);
  background: rgba(244, 240, 232, 0.96);
  backdrop-filter: blur(12px);
}

.logo {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;

  color: var(--schrift);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1.35rem;
  line-height: 1.1;
  text-decoration: none;
}

.logo span {
  margin-top: 6px;
  color: var(--schrift-mild);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hauptnavigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2.2vw, 35px);
}

.hauptnavigation a {
  position: relative;

  padding: 8px 0;

  color: var(--schrift);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-decoration: none;
}

.hauptnavigation a::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;

  height: 1px;

  background: var(--gold);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.hauptnavigation a:hover::after,
.hauptnavigation a:focus-visible::after,
.hauptnavigation a.aktiv::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menue-schalter {
  display: none;

  width: 48px;
  height: 48px;
  padding: 0;

  border: 1px solid var(--linie);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.menue-symbol,
.menue-symbol::before,
.menue-symbol::after {
  display: block;
  width: 20px;
  height: 1px;

  background: var(--schrift);
  content: "";
}

.menue-symbol {
  position: relative;
  margin: auto;
}

.menue-symbol::before {
  position: absolute;
  top: -6px;
}

.menue-symbol::after {
  position: absolute;
  top: 6px;
}


/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background: var(--hintergrund-dunkel);
}

.hero-bild {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.hero-abdunklung {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(17, 15, 12, 0.88) 0%,
      rgba(17, 15, 12, 0.64) 43%,
      rgba(17, 15, 12, 0.16) 78%,
      rgba(17, 15, 12, 0.1) 100%
    );
}

.hero-inhalt {
  position: relative;
  z-index: 2;

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

  width: min(calc(100% - 48px), var(--seitenbreite));
  min-height: 640px;
  margin-inline: auto;
  padding-block: 70px;

  color: var(--schrift-hell);
}

.hero-ueberzeile,
.abschnitt-ueberzeile {
  margin-bottom: 18px;

  color: var(--gold);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 850px;
  margin-bottom: 30px;

  font-size: clamp(3.3rem, 8vw, 7.6rem);
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.hero h1 span {
  display: block;

  margin-top: 18px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: clamp(1.05rem, 2.5vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.025em;
}

.hero-text {
  max-width: 700px;
  margin-bottom: 42px;

  color: rgba(248, 244, 235, 0.9);
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  line-height: 1.65;
}

.hero-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}


/* =========================================================
   Buttons und Links
   ========================================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 54px;
  padding: 13px 25px;

  border: 1px solid transparent;
  border-radius: 2px;

  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: center;
  text-decoration: none;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-hell {
  background: var(--schrift-hell);
  color: var(--schrift);
}

.button-hell:hover,
.button-hell:focus-visible {
  background: var(--gold);
  color: #fff;
}

.button-transparent {
  border-color: rgba(255, 255, 255, 0.58);
  color: #fff;
}

.button-transparent:hover,
.button-transparent:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.button-dunkel {
  background: var(--hintergrund-dunkel);
  color: var(--schrift-hell);
}

.button-dunkel:hover,
.button-dunkel:focus-visible {
  background: var(--gold-dunkel);
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding-bottom: 3px;

  border-bottom: 1px solid var(--gold);

  color: var(--gold-dunkel);
  font-size: 0.91rem;
  font-weight: 700;
  text-decoration: none;
}

.textlink span {
  transition: transform 180ms ease;
}

.textlink:hover span,
.textlink:focus-visible span {
  transform: translateX(5px);
}


/* =========================================================
   Einleitung
   ========================================================= */

.einleitung {
  padding-block: clamp(90px, 12vw, 170px);
}

.einleitung h2 {
  max-width: 1000px;
}

.einleitung-text {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 5vw, 80px);

  margin-top: 60px;
  padding-top: 45px;

  border-top: 1px solid var(--linie);
}

.einleitung-text p {
  margin-bottom: 0;
  color: var(--schrift-mild);
}


/* =========================================================
   Drei Wege
   ========================================================= */

.wege-bereich {
  padding-block: clamp(85px, 11vw, 150px);
  background: var(--hintergrund-hell);
}

.wege-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;

  margin-top: 60px;

  background: var(--linie);
  border: 1px solid var(--linie);
}

.weg-karte {
  min-height: 390px;
  padding: clamp(30px, 4vw, 55px);

  background: var(--hintergrund-hell);
}

.weg-nummer {
  margin-bottom: 50px;

  color: var(--gold);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1.12rem;
}

.weg-karte h3 {
  margin-bottom: 25px;
}

.weg-karte > p:not(.weg-nummer) {
  margin-bottom: 35px;
  color: var(--schrift-mild);
}


/* =========================================================
   Familienübersicht
   ========================================================= */

.familien-bereich {
  padding-block: clamp(90px, 12vw, 170px);
}

.abschnitt-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  align-items: end;
  gap: 60px;

  margin-bottom: 65px;
}

.abschnitt-kopf h2 {
  margin-bottom: 0;
}

.abschnitt-einfuehrung {
  margin-bottom: 8px;
  color: var(--schrift-mild);
}

.familien-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 54px);
}

.familien-karte {
  overflow: hidden;
  background: var(--hintergrund-hell);
  box-shadow: var(--schatten);
}

.familien-karte a {
  display: block;
  text-decoration: none;
}

.familien-karte img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;

  transition: transform 500ms ease;
}

.familien-karte:hover img,
.familien-karte:focus-within img {
  transform: scale(1.025);
}

.familien-karte-text {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;

  min-height: 120px;
  padding: 28px 30px;
}

.familien-karte-text p {
  margin: 4px 0 0;
  color: var(--gold);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

.familien-karte-text h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
}


/* =========================================================
   Abschluss
   ========================================================= */

.abschluss {
  padding-block: clamp(90px, 12vw, 160px);
  background: #ded4c4;
  text-align: center;
}

.abschluss-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.abschluss h2 {
  max-width: 900px;
  margin-inline: auto;
}

.abschluss p:not(.abschnitt-ueberzeile) {
  max-width: 720px;
  margin-bottom: 36px;
  color: #5b554b;
}


/* =========================================================
   Fußbereich
   ========================================================= */

.seitenfuss {
  padding-block: 55px;
  background: var(--hintergrund-dunkel);
  color: rgba(248, 244, 235, 0.76);
}

.fuss-inhalt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px 60px;
  align-items: start;
}

.fuss-inhalt p {
  margin-bottom: 0;
}

.fuss-titel {
  color: var(--schrift-hell);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1.35rem;
}

.fuss-inhalt nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 28px;
}

.fuss-inhalt nav a {
  font-size: 0.82rem;
  text-decoration: none;
}

.fuss-inhalt nav a:hover,
.fuss-inhalt nav a:focus-visible {
  color: #fff;
}

.copyright {
  grid-column: 1 / -1;

  padding-top: 30px;

  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 0.78rem;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1050px) {

  body {
    font-size: 17px;
  }

  .menue-schalter {
    display: block;
    flex-shrink: 0;
  }

  .hauptnavigation {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;

    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    padding: 15px 24px 25px;

    border-bottom: 1px solid var(--linie);
    background: var(--hintergrund);
    box-shadow: 0 18px 35px rgba(20, 18, 14, 0.12);
  }

  .hauptnavigation.sichtbar {
    display: flex;
  }

  .hauptnavigation a {
    padding: 15px 5px;
    border-bottom: 1px solid var(--linie);
  }

  .hauptnavigation a:last-child {
    border-bottom: 0;
  }

  .hauptnavigation a::after {
    display: none;
  }

  .einleitung-text {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .wege-raster {
    grid-template-columns: 1fr;
  }

  .weg-karte {
    min-height: 0;
  }

  .weg-nummer {
    margin-bottom: 30px;
  }

  .abschnitt-kopf {
    grid-template-columns: 1fr;
    gap: 15px;
  }

}


/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 700px) {

  .seitenbreite,
  .hero-inhalt {
    width: min(calc(100% - 30px), var(--seitenbreite));
  }

  .seitenkopf {
    min-height: 76px;
    padding-inline: 15px;
  }

  .logo {
    font-size: 1.1rem;
  }

  .logo span {
    font-size: 0.57rem;
  }

  .hero {
    min-height: 700px;
  }

  .hero-inhalt {
    min-height: 700px;
    padding-block: 75px;
  }

  .hero-abdunklung {
    background:
      linear-gradient(
        0deg,
        rgba(17, 15, 12, 0.92) 0%,
        rgba(17, 15, 12, 0.62) 65%,
        rgba(17, 15, 12, 0.34) 100%
      );
  }

  .hero-bild {
    object-position: center;
  }

  .hero h1 {
    font-size: clamp(3rem, 15vw, 5.5rem);
  }

  .hero-aktionen {
    flex-direction: column;
  }

  .hero-aktionen .button {
    width: 100%;
  }

  .familien-raster {
    grid-template-columns: 1fr;
  }

  .familien-karte-text {
    min-height: 105px;
    padding: 24px 20px;
  }

  .fuss-inhalt {
    grid-template-columns: 1fr;
  }

  .fuss-inhalt nav {
    flex-direction: column;
    justify-content: flex-start;
    gap: 13px;
  }

}


/* =========================================================
   Sehr kleine Bildschirme
   ========================================================= */

@media (max-width: 420px) {

  body {
    font-size: 16px;
  }

  .logo span {
    max-width: 220px;
  }

  .menue-schalter {
    width: 44px;
    height: 44px;
  }

  .familien-karte-text {
    grid-template-columns: 38px 1fr;
    gap: 8px;
  }

}
/* =========================================================
   Unterseiten – gemeinsamer Kopf
   ========================================================= */

.unterseite-kopf {
  padding-block: clamp(90px, 11vw, 155px);
  background: var(--hintergrund-dunkel);
  color: var(--schrift-hell);
}

.unterseite-kopf-inhalt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.unterseite-kopf h1 {
  max-width: 1000px;
  margin-bottom: 32px;

  font-size: clamp(4rem, 10vw, 8rem);
  letter-spacing: -0.055em;
}

.unterseite-kopf p:not(.hero-ueberzeile) {
  max-width: 800px;
  margin-bottom: 42px;

  color: rgba(248, 244, 235, 0.82);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
}

.sprungnavigation {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sprungnavigation a {
  padding: 10px 18px;

  border: 1px solid rgba(255, 255, 255, 0.28);

  color: var(--schrift-hell);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-decoration: none;

  transition:
    border-color 180ms ease,
    background-color 180ms ease;
}

.sprungnavigation a:hover,
.sprungnavigation a:focus-visible {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}


/* =========================================================
   Rundgang – Einführung
   ========================================================= */

.rundgang-einfuehrung {
  padding-block: clamp(90px, 11vw, 150px);
}

.rundgang-einfuehrung-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: end;
}

.rundgang-einfuehrung h2 {
  margin-bottom: 0;
}

.rundgang-einfuehrung-text {
  padding-left: 35px;
  border-left: 1px solid var(--linie);
}

.rundgang-einfuehrung-text p {
  color: var(--schrift-mild);
}

.rundgang-einfuehrung-text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   Rundgang – Wände und Panoramen
   ========================================================= */

.wand-abschnitt {
  padding-block: clamp(85px, 10vw, 140px);
  overflow: hidden;
  background: #ded4c4;
}

.wand-abschnitt-hell {
  background: var(--hintergrund-hell);
}

.wand-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 60px;
  align-items: end;

  margin-bottom: 55px;
}

.wand-kopf h2 {
  margin-bottom: 0;
}

.wand-nummer {
  margin-bottom: 22px;

  color: rgba(40, 39, 34, 0.38);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 3rem;
  line-height: 1;
}

.wand-beschreibung {
  margin-bottom: 5px;
  color: var(--schrift-mild);
}

.panorama-aussen {
  width: min(calc(100% - 48px), 1540px);
  margin-inline: auto;
}

.panorama-scroll {
  overflow-x: auto;
  overflow-y: hidden;

  background: #171612;
  box-shadow: var(--schatten);

  scrollbar-color: var(--gold) rgba(255, 255, 255, 0.12);
  scrollbar-width: thin;
}

.panorama-scroll:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}

.panorama-scroll::-webkit-scrollbar {
  height: 11px;
}

.panorama-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
}

.panorama-scroll::-webkit-scrollbar-thumb {
  background: var(--gold);
}

.panorama-figur {
  margin: 0;
}

.panorama-figur img {
  width: 100%;
  height: auto;
  min-height: 350px;

  object-fit: cover;
}

.panorama-figur figcaption {
  padding: 14px 20px;

  color: rgba(248, 244, 235, 0.68);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}


/* =========================================================
   Rundgang – Stationen
   ========================================================= */

.rundgang-stationen {
  padding-block: clamp(95px, 12vw, 170px);
}

.stationen-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin: 0;
  padding: 0;

  border-top: 1px solid var(--linie);
  list-style: none;
}

.stationen-liste li {
  border-bottom: 1px solid var(--linie);
}

.stationen-liste li:nth-child(odd) {
  border-right: 1px solid var(--linie);
}

.stationen-liste a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 30px;
  gap: 18px;
  align-items: center;

  min-height: 112px;
  padding: 25px 30px;

  text-decoration: none;

  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.stationen-liste a:hover,
.stationen-liste a:focus-visible {
  background: var(--hintergrund-hell);
}

.station-nummer {
  color: var(--gold);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1rem;
}

.station-name {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.25;
}

.station-pfeil {
  color: var(--gold);
  font-size: 1.45rem;

  transition: transform 180ms ease;
}

.stationen-liste a:hover .station-pfeil,
.stationen-liste a:focus-visible .station-pfeil {
  transform: translateX(6px);
}


/* =========================================================
   Rundgang – Weiterführung
   ========================================================= */

.weiter-bereich {
  padding-block: clamp(85px, 10vw, 135px);
  background: var(--hintergrund-dunkel);
  color: var(--schrift-hell);
}

.weiter-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 70px;
  align-items: center;
}

.weiter-inhalt h2 {
  margin-bottom: 25px;
}

.weiter-inhalt p:not(.abschnitt-ueberzeile) {
  max-width: 760px;
  margin-bottom: 0;
  color: rgba(248, 244, 235, 0.75);
}


/* =========================================================
   Rundgang – Tablet
   ========================================================= */

@media (max-width: 950px) {

  .rundgang-einfuehrung-kopf,
  .wand-kopf {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .rundgang-einfuehrung-text {
    padding-top: 30px;
    padding-left: 0;

    border-top: 1px solid var(--linie);
    border-left: 0;
  }

  .weiter-inhalt {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .weiter-inhalt .button {
    justify-self: start;
  }

}


/* =========================================================
   Rundgang – Smartphone
   ========================================================= */

@media (max-width: 700px) {

  .unterseite-kopf {
    padding-block: 75px 90px;
  }

  .unterseite-kopf h1 {
    font-size: clamp(3.5rem, 18vw, 5.7rem);
  }

  .sprungnavigation {
    width: 100%;
  }

  .sprungnavigation a {
    flex: 1 1 auto;
    text-align: center;
  }

  .panorama-aussen {
    width: calc(100% - 30px);
  }

  .panorama-scroll {
    scroll-snap-type: x proximity;
  }

  .panorama-figur {
    width: max-content;
    min-width: 100%;
  }

  .panorama-figur img {
    width: auto;
    max-width: none;
    height: 390px;
    min-height: 0;

    object-fit: contain;
    scroll-snap-align: start;
  }

  .panorama-figur figcaption {
    text-align: left;
  }

  .stationen-liste {
    grid-template-columns: 1fr;
  }

  .stationen-liste li:nth-child(odd) {
    border-right: 0;
  }

  .stationen-liste a {
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    gap: 10px;

    min-height: 95px;
    padding: 22px 12px;
  }

  .weiter-inhalt .button {
    width: 100%;
  }

}

/* =========================================================
   Stammbaum – Einführung
   ========================================================= */

.stammbaum-einfuehrung {
  padding-block: clamp(90px, 11vw, 150px);
}

.stammbaum-einfuehrung-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: end;
}

.stammbaum-einfuehrung h2 {
  margin-bottom: 0;
}

.stammbaum-einfuehrung-text {
  padding-left: 35px;
  border-left: 1px solid var(--linie);
}

.stammbaum-einfuehrung-text p {
  color: var(--schrift-mild);
}

.stammbaum-einfuehrung-text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   Stammbaum – Abschnitte
   ========================================================= */

.stammbaum-abschnitt {
  padding-block: clamp(90px, 11vw, 150px);
  background: #ded4c4;
}

.stammbaum-abschnitt-hell {
  background: var(--hintergrund-hell);
}

.stammbaum-abschnitt-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 60px;
  align-items: end;

  margin-bottom: 65px;
}

.stammbaum-abschnitt-kopf h2 {
  margin-bottom: 0;
}

.stammbaum-abschnitt-kopf > p {
  margin-bottom: 5px;
  color: var(--schrift-mild);
}

.stammbaum-zahl {
  margin-bottom: 20px;

  color: rgba(40, 39, 34, 0.3);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1;
}


/* =========================================================
   Stammbaum – Generationen
   ========================================================= */

.generationen-liste {
  border-top: 1px solid var(--linie);
}

.generation {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 40px;
  gap: 24px;
  align-items: center;

  min-height: 125px;
  padding: 28px 30px;

  border-bottom: 1px solid var(--linie);
  text-decoration: none;

  transition:
    background-color 180ms ease,
    transform 180ms ease;
}

.generation:hover,
.generation:focus-visible {
  background: rgba(255, 255, 255, 0.42);
}

.generation-nummer {
  color: var(--gold);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1rem;
}

.generation-namen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px 18px;
}

.generation-namen strong {
  color: var(--schrift);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 400;
}

.generation-namen span {
  position: relative;
  color: var(--schrift-mild);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}

.generation-namen span::before {
  margin-right: 16px;
  color: var(--gold);
  content: "—";
}

.generation-pfeil {
  color: var(--gold);
  font-size: 1.6rem;

  transition: transform 180ms ease;
}

.generation:hover .generation-pfeil,
.generation:focus-visible .generation-pfeil {
  transform: translateX(7px);
}


/* =========================================================
   Stammbaum – Hinweis
   ========================================================= */

.stammbaum-hinweis {
  padding-block: clamp(90px, 11vw, 145px);
  background: var(--hintergrund);
  text-align: center;
}

.stammbaum-hinweis-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stammbaum-hinweis h2 {
  margin-inline: auto;
}

.stammbaum-hinweis p:not(.abschnitt-ueberzeile) {
  max-width: 720px;
  margin-bottom: 36px;
  color: var(--schrift-mild);
}


/* =========================================================
   Stammbaum – Tablet
   ========================================================= */

@media (max-width: 950px) {

  .stammbaum-einfuehrung-kopf,
  .stammbaum-abschnitt-kopf {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .stammbaum-einfuehrung-text {
    padding-top: 30px;
    padding-left: 0;

    border-top: 1px solid var(--linie);
    border-left: 0;
  }

}


/* =========================================================
   Stammbaum – Smartphone
   ========================================================= */

@media (max-width: 700px) {

  .generation {
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    gap: 10px;

    min-height: 105px;
    padding: 24px 12px;
  }

  .generation-namen {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .generation-namen strong {
    font-size: 1.55rem;
  }

  .generation-namen span {
    font-size: 1rem;
  }

  .generation-namen span::before {
    margin-right: 8px;
  }

}

/* =========================================================
   Footer – Rechtliches
   ========================================================= */

.fuss-abschluss {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  padding-top: 30px;

  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.fuss-abschluss .copyright {
  grid-column: auto;
  padding-top: 0;
  border-top: 0;
}

.rechtliches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 25px;
}

.rechtliches a {
  color: rgba(248, 244, 235, 0.76);
  font-size: 0.78rem;
  text-decoration: none;
}

.rechtliches a:hover,
.rechtliches a:focus-visible {
  color: #fff;
}

@media (max-width: 700px) {

  .fuss-abschluss {
    flex-direction: column;
    align-items: flex-start;
  }

  .rechtliches {
    flex-direction: row !important;
  }

}

.sichtbar-raeume {
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
  color: var(--schrift-mild);
  font-size: 0.86rem;
  line-height: 1.7;
  text-align: center;
}

.sichtbar-raeume p {
  margin-bottom: 6px;
}

.sichtbar-raeume p:last-child {
  margin-bottom: 0;
}

.sichtbar-raeume a {
  color: inherit;
  text-decoration: none;
}

.sichtbar-raeume a:hover,
.sichtbar-raeume a:focus-visible {
  color: var(--gold);
  text-decoration: underline;
}

.ki-hinweis {
  width: 100%;
  max-width: 900px;
  margin: 24px auto 0;
  padding: 20px 12px 0;
  border-top: 1px solid var(--linie);
  color: var(--schrift-mild);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  opacity: 0.85;
}

/* =========================================================
   Verlorene Lünetten – Einführung
   ========================================================= */

.verlorene-einfuehrung {
  padding-block: clamp(90px, 11vw, 155px);
}

.verlorene-einfuehrung-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: end;
}

.verlorene-einfuehrung h2 {
  margin-bottom: 0;
}

.verlorene-einfuehrung-text {
  padding-left: 36px;
  border-left: 1px solid var(--linie);
}

.verlorene-einfuehrung-text p {
  color: var(--schrift-mild);
}

.verlorene-einfuehrung-text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   Verlorene Lünetten – Werke
   ========================================================= */

.verlorenes-werk {
  padding-block: clamp(90px, 11vw, 155px);
  background: #ded4c4;
}

.verlorenes-werk-hell {
  background: var(--hintergrund-hell);
}

.verlorenes-werk-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: end;

  margin-bottom: 58px;
}

.verlorenes-werk-kopf h2 {
  max-width: 950px;
  margin-bottom: 18px;
}

.werk-nummer {
  margin-bottom: 25px;

  color: rgba(40, 39, 34, 0.32);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(3.4rem, 7vw, 5.8rem);
  line-height: 1;
}

.werk-untertitel {
  margin-bottom: 0;

  color: var(--gold-dunkel);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  font-style: italic;
}

.werk-einordnung {
  margin-bottom: 5px;
  color: var(--schrift-mild);
}

.verlorenes-bild {
  margin: 0;
  overflow: hidden;
  background: var(--hintergrund-dunkel);
  box-shadow: var(--schatten);
}

.verlorenes-bild img {
  width: 100%;
  max-height: 820px;
  object-fit: contain;
  background: #171612;
}

.verlorenes-bild figcaption {
  padding: 17px 22px;

  color: rgba(248, 244, 235, 0.72);
  font-size: 0.76rem;
  line-height: 1.55;
  letter-spacing: 0.035em;
}

.verlorenes-werk-inhalt {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(50px, 8vw, 115px);

  margin-top: 65px;
}

.werk-kern blockquote {
  margin: 0;
  padding-left: 30px;

  border-left: 2px solid var(--gold);
}

.werk-kern blockquote p {
  margin-bottom: 18px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.55rem, 3vw, 2.55rem);
  line-height: 1.3;
}

.werk-kern blockquote p:last-child {
  margin-bottom: 0;
}

.werk-text p {
  color: var(--schrift-mild);
}

.werk-text .textlink {
  margin-top: 15px;
}


/* =========================================================
   Verlorene Lünetten – Verbindung
   ========================================================= */

.verlorene-verbindung {
  padding-block: clamp(90px, 11vw, 145px);
  background: var(--hintergrund-dunkel);
  color: var(--schrift-hell);
  text-align: center;
}

.verlorene-verbindung-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verlorene-verbindung h2 {
  max-width: 980px;
  margin-inline: auto;
}

.verlorene-verbindung p:not(.abschnitt-ueberzeile) {
  max-width: 780px;
  margin-bottom: 45px;

  color: rgba(248, 244, 235, 0.76);
  font-size: 1.12rem;
}

.genealogische-linie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;

  padding: 24px 30px;

  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.genealogische-linie span {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
}

.genealogische-linie i {
  color: var(--gold);
  font-style: normal;
}


/* =========================================================
   Verlorene Lünetten – Abschluss
   ========================================================= */

.verlorene-abschluss {
  padding-block: clamp(95px, 12vw, 160px);
  background: var(--hintergrund);
  text-align: center;
}

.verlorene-abschluss-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verlorene-abschluss h2 {
  max-width: 900px;
  margin-inline: auto;
}

.verlorene-abschluss p:not(.abschnitt-ueberzeile) {
  max-width: 760px;
  margin-bottom: 38px;
  color: var(--schrift-mild);
}

.verlorene-abschluss-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.button-rahmen-dunkel {
  border-color: var(--hintergrund-dunkel);
  color: var(--hintergrund-dunkel);
}

.button-rahmen-dunkel:hover,
.button-rahmen-dunkel:focus-visible {
  border-color: var(--gold-dunkel);
  background: var(--gold-dunkel);
  color: #fff;
}


/* =========================================================
   Verlorene Lünetten – Tablet
   ========================================================= */

@media (max-width: 950px) {

  .verlorene-einfuehrung-kopf,
  .verlorenes-werk-kopf,
  .verlorenes-werk-inhalt {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .verlorene-einfuehrung-text {
    padding-top: 30px;
    padding-left: 0;

    border-top: 1px solid var(--linie);
    border-left: 0;
  }

  .verlorenes-werk-inhalt {
    margin-top: 50px;
  }

}


/* =========================================================
   Verlorene Lünetten – Smartphone
   ========================================================= */

@media (max-width: 700px) {

  .verlorenes-werk-kopf {
    margin-bottom: 38px;
  }

  .verlorenes-bild figcaption {
    padding: 14px 15px;
  }

  .werk-kern blockquote {
    padding-left: 20px;
  }

  .genealogische-linie {
    padding-inline: 10px;
    gap: 8px 10px;
  }

  .verlorene-abschluss-aktionen {
    width: 100%;
  }

  .verlorene-abschluss-aktionen .button {
    width: 100%;
  }

}

/* =========================================================
   Über das Projekt – Einführung
   ========================================================= */

.projekt-einfuehrung {
  padding-block: clamp(90px, 11vw, 150px);
}

.projekt-einfuehrung-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: end;
}

.projekt-einfuehrung h2 {
  margin-bottom: 0;
}

.projekt-einfuehrung-text {
  padding-left: 35px;
  border-left: 1px solid var(--linie);
}

.projekt-einfuehrung-text p {
  color: var(--schrift-mild);
}

.projekt-einfuehrung-text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   Über das Projekt – Persönlicher Teil
   ========================================================= */

.projekt-persoenlich {
  padding-block: clamp(95px, 12vw, 165px);
  background: #ded4c4;
}

.projekt-persoenlich-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: clamp(40px, 7vw, 90px);
  align-items: end;
  margin-bottom: 60px;
}

.projekt-persoenlich-kopf h2 {
  margin-bottom: 0;
}

.projekt-persoenlich-einleitung {
  margin-bottom: 5px;
  color: var(--schrift-mild);
}

.projekt-galerie {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 24px;
  align-items: stretch;

  margin-bottom: 55px;
}

.projekt-grossbild,
.projekt-kleinbild {
  margin: 0;
  overflow: hidden;
  background: var(--hintergrund-hell);
  box-shadow: var(--schatten);
}

.projekt-grossbild {
  grid-row: span 2;
}

.projekt-grossbild img,
.projekt-kleinbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projekt-grossbild img {
  min-height: 640px;
}

.projekt-kleinbild img {
  min-height: 308px;
}

.projekt-grossbild figcaption,
.projekt-kleinbild figcaption {
  padding: 16px 18px;
  color: var(--schrift-mild);
  font-size: 0.82rem;
  line-height: 1.5;
}

.projekt-persoenlich-text {
  max-width: 980px;
}

.projekt-persoenlich-text p {
  color: #5f584e;
}


/* =========================================================
   Über das Projekt – Arbeitsweise
   ========================================================= */

.projekt-arbeitsweise {
  padding-block: clamp(95px, 12vw, 165px);
  background: var(--hintergrund-hell);
}

.projekt-arbeitsweise-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}

.projekt-arbeitsweise-kopf h2 {
  margin-bottom: 0;
}

.projekt-arbeitsweise-kopf > p {
  margin-bottom: 5px;
  color: var(--schrift-mild);
}

.projekt-bausteine {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}

.projekt-baustein {
  min-height: 300px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--hintergrund-hell);
}

.projekt-baustein-nummer {
  margin-bottom: 30px;
  color: var(--gold);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1.05rem;
}

.projekt-baustein h3 {
  margin-bottom: 20px;
}

.projekt-baustein p:last-child {
  margin-bottom: 0;
  color: var(--schrift-mild);
}


/* =========================================================
   Über das Projekt – Gedanke
   ========================================================= */

.projekt-gedanke {
  padding-block: clamp(95px, 12vw, 160px);
  background: var(--hintergrund-dunkel);
  color: var(--schrift-hell);
  text-align: center;
}

.projekt-gedanke-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.projekt-gedanke h2 {
  max-width: 960px;
  margin-inline: auto;
}

.projekt-gedanke p:not(.abschnitt-ueberzeile) {
  max-width: 830px;
  color: rgba(248, 244, 235, 0.76);
}

.projekt-zitat {
  max-width: 920px;
  margin: 30px 0 0;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.projekt-zitat p {
  margin-bottom: 0;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.6rem, 3.2vw, 2.7rem);
  line-height: 1.28;
  color: var(--schrift-hell);
}


/* =========================================================
   Über das Projekt – Abschluss
   ========================================================= */

.projekt-abschluss {
  padding-block: clamp(95px, 12vw, 155px);
  background: var(--hintergrund);
  text-align: center;
}

.projekt-abschluss-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.projekt-abschluss h2 {
  max-width: 880px;
  margin-inline: auto;
}

.projekt-abschluss p:not(.abschnitt-ueberzeile) {
  max-width: 720px;
  margin-bottom: 38px;
  color: var(--schrift-mild);
}

.projekt-abschluss-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}


/* =========================================================
   Über das Projekt – Tablet
   ========================================================= */

@media (max-width: 950px) {

  .projekt-einfuehrung-kopf,
  .projekt-persoenlich-kopf,
  .projekt-arbeitsweise-kopf {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .projekt-einfuehrung-text {
    padding-top: 30px;
    padding-left: 0;

    border-top: 1px solid var(--linie);
    border-left: 0;
  }

  .projekt-galerie {
    grid-template-columns: 1fr;
  }

  .projekt-grossbild {
    grid-row: auto;
  }

  .projekt-grossbild img {
    min-height: 420px;
  }

  .projekt-kleinbild img {
    min-height: 280px;
  }

  .projekt-bausteine {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   Über das Projekt – Smartphone
   ========================================================= */

@media (max-width: 700px) {

  .projekt-galerie {
    gap: 18px;
    margin-bottom: 40px;
  }

  .projekt-grossbild img {
    min-height: 320px;
  }

  .projekt-kleinbild img {
    min-height: 220px;
  }

  .projekt-grossbild figcaption,
  .projekt-kleinbild figcaption {
    padding: 13px 14px;
  }

  .projekt-baustein {
    min-height: 0;
  }

  .projekt-abschluss-aktionen {
    width: 100%;
  }

  .projekt-abschluss-aktionen .button {
    width: 100%;
  }

}

/* =========================================================
   Familienseiten – Kopf
   ========================================================= */

.familien-kopf {
  padding-block: clamp(90px, 11vw, 155px);
  background: var(--hintergrund-dunkel);
  color: var(--schrift-hell);
}

.familien-kopf-inhalt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.familien-kopf-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
}

.familien-kopf-meta .hero-ueberzeile {
  margin-bottom: 0;
}

.familien-seitennummer {
  margin: 0;
  color: rgba(248, 244, 235, 0.34);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 2.6rem;
  line-height: 1;
}

.familien-kopf h1 {
  margin-bottom: 16px;
  font-size: clamp(4.7rem, 12vw, 10rem);
  letter-spacing: -0.06em;
}

.familien-untertitel {
  margin-bottom: 30px;
  color: var(--gold);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  font-style: italic;
}

.familien-kopf-text {
  max-width: 780px;
  margin-bottom: 42px;
  color: rgba(248, 244, 235, 0.8);
  font-size: clamp(1.08rem, 2vw, 1.32rem);
}


/* =========================================================
   Familienseiten – gemeinsame Abschnittsköpfe
   ========================================================= */

.familien-abschnitt-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: clamp(45px, 7vw, 95px);
  align-items: end;
  margin-bottom: 58px;
}

.familien-abschnitt-kopf h2 {
  margin-bottom: 0;
}

.familien-abschnitt-kopf > p {
  margin-bottom: 5px;
  color: var(--schrift-mild);
}

.familien-abschnitt-kopf-dunkel > p {
  color: rgba(248, 244, 235, 0.72);
}


/* =========================================================
   Familienseiten – Hauptbild
   ========================================================= */

.familien-bildbereich {
  padding-block: clamp(90px, 11vw, 155px);
  background: #ded4c4;
}

.familien-hauptbild {
  margin: 0;
  overflow: hidden;
  background: var(--hintergrund-dunkel);
  box-shadow: var(--schatten);
}

.familien-hauptbild img {
  width: 100%;
  max-height: 900px;
  object-fit: contain;
  background: #171612;
}

.familien-hauptbild figcaption {
  padding: 17px 22px;
  color: rgba(248, 244, 235, 0.72);
  font-size: 0.78rem;
  line-height: 1.55;
}


/* =========================================================
   Familienseiten – Einordnung
   ========================================================= */

.familien-einordnung {
  padding-block: clamp(90px, 11vw, 150px);
  background: var(--hintergrund-hell);
}

.familien-einordnung-raster {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(50px, 8vw, 115px);
}

.familien-zitatblock blockquote {
  margin: 0;
  padding-left: 30px;
  border-left: 2px solid var(--gold);
}

.familien-zitatblock blockquote p {
  margin-bottom: 0;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.7rem, 3.2vw, 2.75rem);
  line-height: 1.28;
}

.familien-einordnung-text p {
  color: var(--schrift-mild);
}


/* =========================================================
   Familienseiten – Familiennetz
   ========================================================= */

.familien-stammbaum {
  padding-block: clamp(95px, 12vw, 165px);
  background: var(--hintergrund);
}

.familiennetz {
  display: grid;
  gap: 35px;
}

.familiennetz-vorfahren,
.familiennetz-zweig {
  padding: clamp(30px, 5vw, 55px);
  border: 1px solid var(--linie);
  background: var(--hintergrund-hell);
}

.familiennetz-verzweigung {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px;
}

.familiennetz-label {
  margin-bottom: 20px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.familiennetz-zweig h3 {
  margin-bottom: 30px;
}

.familiennetz-kette {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.familiennetz-kette span,
.familiennetz-kette strong {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 400;
}

.familiennetz-kette strong {
  color: var(--gold-dunkel);
}

.familiennetz-kette i {
  margin-left: 12px;
  color: var(--gold);
  font-style: normal;
}


/* =========================================================
   Familienseiten – Personen
   ========================================================= */

.familien-personen {
  padding-block: clamp(95px, 12vw, 165px);
  background: #ded4c4;
}

.personen-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--linie);
  background: var(--linie);
}

.personen-karte {
  min-height: 315px;
  padding: clamp(30px, 4vw, 50px);
  background: #ded4c4;
}

.personen-rolle {
  margin-bottom: 28px;
  color: var(--gold-dunkel);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.personen-karte h3 {
  margin-bottom: 20px;
}

.personen-karte p:last-child {
  margin-bottom: 0;
  color: var(--schrift-mild);
}


/* =========================================================
   Familienseiten – Bildlesung
   ========================================================= */

.familien-bildlesung {
  padding-block: clamp(95px, 12vw, 165px);
  background: var(--hintergrund-dunkel);
  color: var(--schrift-hell);
}

.bildlesung-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.14);
}

.bildlesung-karte {
  padding: clamp(30px, 5vw, 55px);
  background: var(--hintergrund-dunkel);
}

.bildlesung-karte-breit {
  grid-column: 1 / -1;
}

.bildlesung-nummer {
  margin-bottom: 30px;
  color: var(--gold);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1.1rem;
}

.bildlesung-karte p:not(.bildlesung-nummer) {
  color: rgba(248, 244, 235, 0.7);
}


/* =========================================================
   Familienseiten – Spannung
   ========================================================= */

.familien-spannung {
  padding-block: clamp(95px, 12vw, 160px);
  background: var(--hintergrund-hell);
  text-align: center;
}

.familien-spannung-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.familien-spannung h2 {
  max-width: 940px;
  margin-inline: auto;
}

.familien-spannung > .seitenbreite > p:not(.abschnitt-ueberzeile) {
  max-width: 800px;
  color: var(--schrift-mild);
}

.familien-spannung blockquote {
  max-width: 900px;
  margin: 35px 0 0;
  padding-top: 35px;
  border-top: 1px solid var(--linie);
}

.familien-spannung blockquote p {
  margin-bottom: 10px;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.7rem, 3.3vw, 2.8rem);
  line-height: 1.3;
}


/* =========================================================
   Familienseiten – Gesichert und poetisch
   ========================================================= */

.familien-gewissheit {
  padding-block: clamp(95px, 12vw, 165px);
  background: var(--hintergrund);
}

.gewissheit-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.gewissheit-karte {
  padding: clamp(30px, 5vw, 52px);
  border-top: 4px solid var(--gold);
  background: var(--hintergrund-hell);
  box-shadow: var(--schatten);
}

.gewissheit-karte-poetisch {
  border-top-color: var(--hintergrund-dunkel);
}

.gewissheit-titel {
  margin-bottom: 28px;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 2rem;
}

.gewissheit-karte ul {
  margin: 0;
  padding-left: 22px;
}

.gewissheit-karte li {
  margin-bottom: 14px;
  color: var(--schrift-mild);
}

.gewissheit-karte li:last-child {
  margin-bottom: 0;
}


/* =========================================================
   Familienseiten – Kern
   ========================================================= */

.familien-kern {
  padding-block: clamp(100px, 13vw, 180px);
  background: #ded4c4;
  text-align: center;
}

.familien-kern-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.familien-kern h2 {
  margin-inline: auto;
}

.familien-kern p:not(.abschnitt-ueberzeile) {
  margin-bottom: 8px;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
}

.familien-kern .familien-kern-schluss {
  max-width: 830px;
  margin-top: 25px;
  color: var(--gold-dunkel);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.25;
}


/* =========================================================
   Familienseiten – Vorher / nachher
   ========================================================= */

.familien-weiter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--hintergrund-dunkel);
  color: var(--schrift-hell);
}

.familien-weiter-link {
  display: flex;
  flex-direction: column;
  min-height: 235px;
  padding: clamp(35px, 6vw, 75px);
  text-decoration: none;
  transition: background-color 180ms ease;
}

.familien-weiter-link:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.familien-weiter-link:hover,
.familien-weiter-link:focus-visible {
  background: #34312b;
}

.familien-weiter-naechste {
  align-items: flex-end;
  text-align: right;
}

.familien-weiter-richtung {
  margin-bottom: 25px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.familien-weiter-link strong {
  margin-bottom: 8px;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 400;
}

.familien-weiter-link > span:last-child {
  color: rgba(248, 244, 235, 0.58);
  font-size: 0.88rem;
}


/* =========================================================
   Familienseiten – Tablet
   ========================================================= */

@media (max-width: 950px) {

  .familien-abschnitt-kopf,
  .familien-einordnung-raster {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .familiennetz-verzweigung,
  .personen-raster,
  .gewissheit-raster {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   Familienseiten – Smartphone
   ========================================================= */

@media (max-width: 700px) {

  .familien-kopf h1 {
    font-size: clamp(4rem, 22vw, 6.5rem);
  }

  .familien-kopf-meta {
    align-items: flex-start;
  }

  .familien-hauptbild figcaption {
    padding: 14px 15px;
  }

  .bildlesung-raster {
    grid-template-columns: 1fr;
  }

  .bildlesung-karte-breit {
    grid-column: auto;
  }

  .familien-weiter {
    grid-template-columns: 1fr;
  }

  .familien-weiter-link {
    min-height: 190px;
  }

  .familien-weiter-link:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

}

/* =========================================================
   Familienseiten – Stichkappe
   ========================================================= */

.stichkappen-bereich {
  padding-block: clamp(95px, 12vw, 165px);
  background: #d5c8b5;
}

.stichkappen-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: clamp(45px, 7vw, 90px);
  align-items: center;
}

.stichkappen-bild {
  margin: 0;
  overflow: hidden;
  background: var(--hintergrund-dunkel);
  box-shadow: var(--schatten);
}

.stichkappen-bild img {
  width: 100%;
  max-height: 900px;
  object-fit: contain;
  background: #171612;
}

.stichkappen-bild figcaption {
  padding: 17px 22px;
  color: rgba(248, 244, 235, 0.72);
  font-size: 0.78rem;
  line-height: 1.55;
}

.stichkappen-text h3 {
  margin-bottom: 25px;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
}

.stichkappen-text p:not(.abschnitt-ueberzeile) {
  color: #5c554b;
}

.stichkappen-bewegung {
  margin-top: 70px;
  padding-top: 50px;
  border-top: 1px solid var(--linie);
  text-align: center;
}

.stichkappen-bewegung h3 {
  margin-bottom: 35px;
  font-size: clamp(1.9rem, 3.5vw, 3rem);
}

.stichkappen-bewegung > p:last-child {
  max-width: 820px;
  margin: 35px auto 0;
  color: #5c554b;
}

.stichkappen-folge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;

  padding: 25px 30px;

  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.stichkappen-folge span {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
}

.stichkappen-folge i {
  color: var(--gold-dunkel);
  font-style: normal;
}


/* =========================================================
   Stichkappe – Tablet
   ========================================================= */

@media (max-width: 950px) {

  .stichkappen-raster {
    grid-template-columns: 1fr;
    gap: 40px;
  }

}


/* =========================================================
   Stichkappe – Smartphone
   ========================================================= */

@media (max-width: 700px) {

  .stichkappen-bild figcaption {
    padding: 14px 15px;
  }

  .stichkappen-bewegung {
    margin-top: 50px;
    padding-top: 40px;
  }

  .stichkappen-folge {
    padding-inline: 12px;
    gap: 8px 10px;
  }

}

/* =========================================================
   Rundgang – interaktiver Kapellenplan
   ========================================================= */

.kapellenplan-bereich {
  padding-block: clamp(90px, 11vw, 155px);
  background: var(--hintergrund-hell);
}

.kapellenplan-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: clamp(45px, 7vw, 95px);
  align-items: end;
  margin-bottom: 58px;
}

.kapellenplan-kopf h2 {
  margin-bottom: 0;
}

.kapellenplan-einfuehrung {
  padding-left: 32px;
  border-left: 1px solid var(--linie);
}

.kapellenplan-einfuehrung p {
  color: var(--schrift-mild);
}

.kapellenplan-einfuehrung p:last-child {
  margin-bottom: 0;
}

.kapellenplan-hinweis {
  font-size: 0.83rem;
  line-height: 1.55;
}

.kapellenplan-rahmen {
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(16px, 3vw, 32px);
  overflow: hidden;
  border: 1px solid var(--linie);
  background: #e5dccd;
  box-shadow: var(--schatten);
}

.kapellenplan-svg {
  display: block;
  width: 100%;
  height: auto;
}

.kapelle-aussen {
  fill: #d1c4b0;
  stroke: var(--gold-dunkel);
  stroke-width: 4;
  filter: url(#plan-schatten);
}

.kapelle-innen {
  fill: var(--hintergrund-hell);
  stroke: rgba(40, 39, 34, 0.2);
  stroke-width: 2;
}

.wandtitel {
  fill: var(--schrift-mild);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.rundgang-linie {
  fill: none;
  stroke: rgba(115, 92, 50, 0.33);
  stroke-width: 3;
  stroke-dasharray: 9 12;
}

.plan-station {
  cursor: pointer;
  text-decoration: none;
}

.plan-station circle {
  fill: var(--hintergrund-dunkel);
  stroke: var(--gold);
  stroke-width: 4;
  transition: fill 180ms ease, stroke-width 180ms ease, transform 180ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.plan-station text {
  fill: var(--schrift-hell);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  pointer-events: none;
}

.plan-station:hover circle,
.plan-station:focus circle,
.plan-station:focus-visible circle {
  fill: var(--gold-dunkel);
  stroke-width: 7;
  transform: scale(1.09);
}

.plan-station:focus-visible {
  outline: none;
}

.plan-station.verloren circle {
  fill: #5e594f;
  stroke-dasharray: 7 7;
}

.stichkappen-zeichen {
  fill: var(--gold);
  stroke: var(--hintergrund-hell);
  stroke-width: 2;
  pointer-events: none;
}

.kapellenmitte {
  fill: rgba(40, 39, 34, 0.58);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 43px;
  letter-spacing: 0.08em;
}

.kapellenrichtung {
  fill: var(--gold-dunkel);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.kapellenplan-legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px 28px;
  max-width: 920px;
  margin: 28px auto 0;
  color: var(--schrift-mild);
  font-size: 0.82rem;
}

.kapellenplan-legende span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.legende-punkt {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--hintergrund-dunkel);
}

.legende-verloren {
  border-style: dashed;
  background: #5e594f;
}

.legende-raute {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: var(--gold);
  transform: rotate(45deg);
}

.kapellenplan-mobile-liste {
  display: none;
  max-width: 650px;
  margin: 25px auto 0;
  text-align: center;
}

.kapellenplan-mobile-liste p {
  margin-bottom: 0;
  color: var(--schrift-mild);
  font-size: 0.86rem;
}

@media (max-width: 950px) {
  .kapellenplan-kopf {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .kapellenplan-einfuehrung {
    padding-top: 28px;
    padding-left: 0;
    border-top: 1px solid var(--linie);
    border-left: 0;
  }
}

@media (max-width: 700px) {
  .kapellenplan-rahmen {
    padding: 8px;
  }

  .wandtitel {
    font-size: 29px;
  }

  .plan-station circle {
    stroke-width: 6;
  }

  .plan-station text {
    font-size: 30px;
  }

  .kapellenmitte {
    font-size: 37px;
  }

  .kapellenrichtung {
    font-size: 19px;
  }

  .kapellenplan-legende {
    justify-content: flex-start;
  }

  .kapellenplan-mobile-liste {
    display: block;
  }
}


/* =========================================================
   Stationsseiten – virtueller Kapellenführer
   ========================================================= */

.stationsseite {
  padding-bottom: 92px;
}

.station-main {
  overflow: clip;
}

.station-hero {
  padding-block: clamp(54px, 7vw, 95px);
  background: var(--hintergrund-dunkel);
  color: var(--schrift-hell);
}

.station-ort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;

  margin-bottom: 40px;

  color: rgba(248, 244, 235, 0.72);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.station-ort-punkt {
  width: 11px;
  height: 11px;

  border: 2px solid var(--gold);
  border-radius: 50%;

  background: var(--gold);
  box-shadow: 0 0 0 7px rgba(166, 134, 75, 0.14);
}

.station-hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: clamp(45px, 8vw, 115px);
  align-items: end;
}

.station-titelblock h1 {
  margin-bottom: 14px;

  font-size: clamp(5rem, 13vw, 11rem);
  letter-spacing: -0.065em;
}

.station-untertitel {
  margin-bottom: 0;

  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.6vw, 2.3rem);
}

.station-kurztext {
  padding-left: 34px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.station-kurztext p {
  margin-bottom: 0;
  color: rgba(248, 244, 235, 0.8);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}

.station-buehne {
  padding-block: clamp(38px, 6vw, 82px) clamp(90px, 11vw, 150px);
}

.station-buehne-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.station-bildspalte {
  position: sticky;
  top: 112px;
}

.station-hauptbild {
  margin: 0;
  overflow: hidden;

  background: #171612;
  box-shadow: var(--schatten);
}

.station-hauptbild img {
  width: 100%;
  max-height: 690px;

  object-fit: contain;
  background: #171612;
}

.station-hauptbild figcaption {
  padding: 14px 18px;

  color: rgba(248, 244, 235, 0.7);
  font-size: 0.74rem;
  line-height: 1.5;
  letter-spacing: 0.035em;
}

.station-position {
  display: grid;
  grid-template-columns: minmax(200px, 0.72fr) minmax(0, 1.28fr);
  gap: 26px;

  margin-top: 24px;
  padding: 24px;

  border: 1px solid var(--linie);
  background: var(--hintergrund-hell);
}

.station-mini-plan {
  display: grid;
  grid-template-columns: 37px minmax(115px, 1fr) 52px;
  grid-template-rows: 30px minmax(125px, 1fr) 30px;
  gap: 5px;

  min-height: 210px;
  padding: 8px;

  border: 1px solid var(--linie);
  background: #e7dfd2;

  color: var(--schrift-mild);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.mini-altar,
.mini-eingang,
.mini-nord,
.mini-sued {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(40, 39, 34, 0.22);
  background: rgba(251, 249, 244, 0.7);
}

.mini-altar {
  grid-column: 2;
  grid-row: 1;
}

.mini-eingang {
  grid-column: 2;
  grid-row: 3;
}

.mini-nord {
  grid-column: 1;
  grid-row: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.mini-sued {
  position: relative;

  grid-column: 3;
  grid-row: 2;

  flex-direction: column;
  gap: 12px;

  writing-mode: vertical-rl;
}

.mini-sued strong {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border-radius: 50%;
  background: var(--gold);
  color: #fff;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  writing-mode: horizontal-tb;

  box-shadow: 0 0 0 7px rgba(166, 134, 75, 0.16);
}

.mini-kapellenraum {
  grid-column: 2;
  grid-row: 2;

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

  border: 1px solid rgba(40, 39, 34, 0.12);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.45),
      rgba(255, 255, 255, 0.08)
    );
}

.mini-kapellenraum span {
  color: rgba(40, 39, 34, 0.42);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
}

.station-position-text {
  align-self: center;
}

.station-position-text .abschnitt-ueberzeile {
  margin-bottom: 7px;
}

.station-position-text h2 {
  margin-bottom: 13px;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
}

.station-position-text p {
  margin-bottom: 18px;
  color: var(--schrift-mild);
  font-size: 0.9rem;
  line-height: 1.55;
}

.station-inhaltsspalte {
  min-width: 0;
}

.station-umschaltung {
  position: sticky;
  z-index: 30;
  top: 86px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-bottom: 18px;

  border: 1px solid var(--linie);
  background: rgba(244, 240, 232, 0.96);
  backdrop-filter: blur(10px);
}

.station-umschaltung a {
  min-height: 54px;
  padding: 14px 8px;

  border-right: 1px solid var(--linie);

  color: var(--schrift);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.station-umschaltung a:last-child {
  border-right: 0;
}

.station-umschaltung a:hover,
.station-umschaltung a:focus-visible,
.station-umschaltung a.aktiv {
  background: var(--hintergrund-dunkel);
  color: var(--schrift-hell);
}

.station-panel {
  scroll-margin-top: 165px;

  margin-bottom: 20px;
  padding: clamp(30px, 4.3vw, 52px);

  border: 1px solid var(--linie);
  background: #ded4c4;
}

.station-panel-hell {
  background: var(--hintergrund-hell);
}

.station-panel h2 {
  margin-bottom: 26px;
  font-size: clamp(2.15rem, 4.4vw, 4.1rem);
}

.station-panel > p:not(.abschnitt-ueberzeile) {
  color: #5e584f;
}

.station-panel blockquote {
  margin: 30px 0;
  padding-left: 24px;
  border-left: 2px solid var(--gold);
}

.station-panel blockquote p {
  margin-bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1.35;
}

.station-fakten {
  display: grid;
  gap: 1px;

  margin-bottom: 32px;

  border: 1px solid var(--linie);
  background: var(--linie);
}

.station-fakten div {
  padding: 19px 20px;
  background: rgba(251, 249, 244, 0.72);
}

.station-fakten span {
  display: block;

  margin-bottom: 4px;

  color: var(--gold-dunkel);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.station-fakten strong {
  display: block;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

.station-hauptaktion {
  width: 100%;
  margin-top: 12px;
}

.station-musik {
  background: var(--hintergrund-dunkel);
  color: var(--schrift-hell);
}

.station-musik-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
}

.station-musik h2 {
  margin-bottom: 0;
}

.musik-status {
  flex-shrink: 0;

  padding: 7px 12px;

  border: 1px solid rgba(255, 255, 255, 0.23);

  color: rgba(248, 244, 235, 0.72);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.musik-platzhalter {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  gap: 22px;
  align-items: center;

  margin-top: 32px;
  padding-top: 30px;

  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.musik-symbol {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 65px;
  height: 65px;

  border: 1px solid var(--gold);
  border-radius: 50%;

  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
}

.musik-platzhalter h3 {
  margin-bottom: 8px;
  color: var(--schrift-hell);
  font-size: 1.2rem;
}

.musik-platzhalter p {
  margin-bottom: 0;
  color: rgba(248, 244, 235, 0.67);
  font-size: 0.88rem;
}

.station-navigationsleiste {
  position: fixed;
  z-index: 1200;
  right: 0;
  bottom: 0;
  left: 0;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.5fr) minmax(0, 1fr);

  min-height: 82px;

  border-top: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(25, 23, 19, 0.97);
  color: var(--schrift-hell);

  box-shadow: 0 -12px 30px rgba(15, 13, 10, 0.22);
  backdrop-filter: blur(14px);
}

.station-navigationsleiste > a {
  display: flex;
  align-items: center;
  gap: 16px;

  min-width: 0;
  padding: 13px clamp(16px, 3vw, 40px);

  color: var(--schrift-hell);
  text-decoration: none;
}

.station-navigationsleiste > a:hover,
.station-navigationsleiste > a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.station-nav-zurueck {
  border-right: 1px solid rgba(255, 255, 255, 0.13);
}

.station-nav-weiter {
  justify-content: flex-end;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
  text-align: right;
}

.station-nav-plan {
  flex-direction: column;
  justify-content: center;
  gap: 1px !important;

  color: var(--gold) !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.station-nav-plan-symbol {
  font-size: 1.35rem;
  line-height: 1;
}

.station-nav-text {
  min-width: 0;
}

.station-nav-text small,
.station-nav-text strong {
  display: block;
}

.station-nav-text small {
  margin-bottom: 2px;

  color: rgba(248, 244, 235, 0.58);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.station-nav-text strong {
  overflow: hidden;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.86rem, 1.4vw, 1.05rem);
  font-weight: 400;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-fuss {
  margin-bottom: -92px;
  padding-bottom: 145px;
}


/* =========================================================
   Stationsseiten – Tablet
   ========================================================= */

@media (max-width: 1050px) {

  .station-hero-raster,
  .station-buehne-raster {
    grid-template-columns: 1fr;
  }

  .station-kurztext {
    padding-top: 26px;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 0;
  }

  .station-bildspalte {
    position: static;
  }

  .station-hauptbild img {
    max-height: none;
  }

  .station-buehne-raster {
    gap: 34px;
  }

  .station-umschaltung {
    top: 76px;
  }

}


/* =========================================================
   Stationsseiten – Smartphone
   ========================================================= */

@media (max-width: 700px) {

  .stationsseite {
    padding-bottom: 72px;
  }

  .station-hero {
    padding-block: 42px 55px;
  }

  .station-ort {
    margin-bottom: 28px;
    font-size: 0.66rem;
  }

  .station-titelblock h1 {
    font-size: clamp(4rem, 23vw, 6.5rem);
  }

  .station-position {
    grid-template-columns: 1fr;
    padding: 17px;
  }

  .station-mini-plan {
    min-height: 190px;
  }

  .station-umschaltung {
    top: 75px;
    margin-inline: -15px;
  }

  .station-umschaltung a {
    min-height: 50px;
    padding-inline: 3px;
    font-size: 0.69rem;
  }

  .station-panel {
    margin-inline: -15px;
    padding: 28px 20px;
    border-right: 0;
    border-left: 0;
  }

  .station-musik-kopf {
    flex-direction: column;
  }

  .musik-platzhalter {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;
  }

  .musik-symbol {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }

  .station-navigationsleiste {
    grid-template-columns: 1fr 104px 1fr;
    min-height: 68px;
  }

  .station-navigationsleiste > a {
    gap: 8px;
    padding: 9px 10px;
  }

  .station-nav-text strong {
    max-width: 118px;
    font-size: 0.79rem;
  }

  .station-nav-plan {
    font-size: 0.61rem;
  }

  .station-nav-plan-symbol {
    font-size: 1.1rem;
  }

  .station-fuss {
    margin-bottom: -72px;
    padding-bottom: 120px;
  }

}


@media (max-width: 430px) {

  .station-nav-text strong {
    display: none;
  }

  .station-nav-text small {
    margin-bottom: 0;
    font-size: 0.7rem;
  }

}


/* =========================================================
   Stationsseiten – Audioplayer
   ========================================================= */

.musik-status-fertig {
  border-color: rgba(166, 134, 75, 0.72);
  background: rgba(166, 134, 75, 0.14);
  color: var(--gold);
}

.station-audio {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 28px;
  align-items: start;

  margin-top: 32px;
  padding-top: 32px;

  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.station-audio-symbol {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 82px;
  height: 82px;

  border: 1px solid var(--gold);
  border-radius: 50%;

  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
}

.station-audio-ueberzeile {
  margin-bottom: 6px;

  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.station-audio-inhalt h3 {
  margin-bottom: 10px;
  color: var(--schrift-hell);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

.station-audio-inhalt > p:not(.station-audio-ueberzeile) {
  margin-bottom: 22px;
  color: rgba(248, 244, 235, 0.7);
}

.station-audioplayer {
  display: block;
  width: 100%;
  min-height: 54px;
}

.station-audio-link {
  display: inline-block;
  margin-top: 13px;

  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.station-audio-link:hover,
.station-audio-link:focus-visible {
  color: var(--schrift-hell);
  text-decoration: underline;
}

@media (max-width: 700px) {

  .station-audio {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
  }

  .station-audio-symbol {
    width: 54px;
    height: 54px;
    font-size: 1.7rem;
  }

}

/* =========================================================
   Footer-Ergänzungen: sechs Räume, Abschluss und KI-Hinweis
   ========================================================= */

.sichtbar-raeume {
  grid-column: 1 / -1;
  width: 100%;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(248, 244, 235, 0.7);
  font-size: 0.84rem;
  line-height: 1.7;
  text-align: center;
}

.sichtbar-raeume p {
  margin: 0;
}

.sichtbar-raeume p + p {
  margin-top: 5px;
}

.sichtbar-raeume a {
  color: inherit;
  text-decoration: none;
}

.sichtbar-raeume a:hover,
.sichtbar-raeume a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.fuss-abschluss {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 25px 45px;
  align-items: center;
  width: 100%;
  padding-top: 4px;
  border-top: 0;
}

.fuss-abschluss .copyright {
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.fuss-abschluss .rechtliches:first-of-type {
  justify-self: center;
}

.fuss-abschluss .rechtliches:last-of-type {
  justify-self: end;
}

.rechtliches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 25px;
}

.ki-hinweis {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 1000px;
  margin: 4px auto 0;
  padding: 22px 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(248, 244, 235, 0.5);
  font-size: 0.72rem;
  line-height: 1.55;
  text-align: center;
}

@media (max-width: 700px) {

  .fuss-abschluss {
    grid-template-columns: 1fr;
    gap: 13px;
    justify-items: center;
    text-align: center;
  }

  .fuss-abschluss .rechtliches:first-of-type,
  .fuss-abschluss .rechtliches:last-of-type {
    justify-self: center;
  }

  .rechtliches {
    justify-content: center;
  }

  .sichtbar-raeume {
    padding: 24px 10px;
  }

}