/* ==========================================================================
   Pandomirwelt · Stylesheet
   Nach dem Pandomir-Styleguide vom 03.11.2026 und den Vorgaben von AL:
   – die sechs Farbfelder des Styleguides, dazu Schwarz für Konturen und
     längere Texte und das Textgrün des Styleguides (= Mütze im Logo)
   – Headlines in Caveat SemiBold, Farbe Grau 1 (#3a3933), nie Schwarz
   – Fließtext Montserrat Regular, liegt als Datei auf dem eigenen Webspace
   – Längere Texte Montserrat Regular in Schwarz, nur Regular, kein Fett;
     Hervorhebungen im Textgrün, kleine Zeilen in Grau 2 (besser lesbar)
   – Felder flach: Palettenfarbe, feine schwarze Kontur, runde Ecken,
     keine Schatten; Textfelder mit leichter Transparenz (Wunsch AL, 04.11.)
   – Key-Visual: Grün #849975 mit hellen Wellenlinien

   Alles liegt auf dem eigenen Webspace: keine Google Fonts, kein Adobe Fonts, kein CDN.
   Bewegung ist sanft und entfällt, wenn das Gerät „Bewegung reduzieren“ meldet.
   ========================================================================== */


/* ---------- 1. Schriften (lokal) ---------------------------------------- */

/* Überschriften: Caveat SemiBold (Wahl AL, 04.11.), freie Lizenz (OFL),
   liegt auf dem eigenen Webspace. .woff auf die Zeichen für Deutsch verkleinert.
   Die frühere Variante mit Market über Adobe Fonts steht in
   _Quelle/src/MARKET_ADOBE_ALTERNATIVE.md. */
@font-face {
  font-family: "Pandomir Caveat";
  src: url("../fonts/Caveat-SemiBold.woff") format("woff"),
       url("../fonts/Caveat-SemiBold.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 122%;   /* Caveat läuft kleiner als die Größen, auf die das Layout abgestimmt ist */
}

/* Montserrat Regular – der einzige Textschnitt laut Styleguide (OFL, siehe
   fonts). .woff ist auf die Zeichen für Deutsch verkleinert (40 KB). */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.woff") format("woff"),
       url("../fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ---------- 2. Farben und Grundwerte ------------------------------------ */

/* Ruhige Bühne mit Foto, darunter Abschnitte auf Creme; Felder wie die
   Farbfelder im Styleguide, Key-Visual als wiederkehrendes Element. */
:root {
  /* Styleguide 03.11.2026 – die sechs Farbfelder */
  --gruen:       #849975;
  --gruen-hell:  #c0ccb8;
  --beige:       #dfdace;
  --creme:       #ece8e1;
  --grau:        #605e5a;
  --anthrazit:   #3a3933;

  /* aus Styleguide und Logo abgeleitet */
  --gruen-text:  #678054;   /* Textgrün im Styleguide, Mütze im Logo */
  --kv-linie:    #9cad90;   /* Wellenlinien im Key-Visual */
  --schwarz:     #141210;   /* Konturen und längere Texte */
  --papier:      #fbf7f1;   /* Papierton der Figurenbilder */

  /* Rollen */
  --text: var(--schwarz);
  --headline: var(--anthrazit);
  --leise: var(--grau);
  --akzent: var(--gruen-text);
  --seite-farbe: var(--creme);

  --hand: "Pandomir Caveat", "Segoe Print", "Bradley Hand", cursive;
  --schrift: "Montserrat", "Avenir Next", Avenir, "Century Gothic", "Segoe UI",
             system-ui, -apple-system, Roboto, Arial, sans-serif;

  --kontur: 1.5px solid var(--schwarz);
  --radius: 28px;
  --radius-m: 20px;
  --radius-s: 14px;
  --rand: clamp(16px, 4vw, 40px);
  --breite: 1140px;

  --hand-strich: 0;          /* Caveat SemiBold braucht keine Verstärkung */
  color-scheme: light;
}


/* ---------- 3. Grundgerüst ---------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--seite-farbe);
  color: var(--text);
  font-family: var(--schrift);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.seite {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--seite-farbe);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.seite > main { flex: 1; }

/* feine Wellen aus dem Styleguide im Seitenhintergrund */
.wellengrund {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.wellengrund__ebene {
  position: absolute;
  inset: -10% -5%;
  background: url("../img/wellen.svg") center / cover no-repeat;
  will-change: transform;
}

strong, b { font-weight: 400; color: var(--akzent); }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { color: var(--akzent); }

:focus-visible {
  outline: 3px solid var(--gruen-text);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 {
  font-family: var(--hand);
  font-weight: 400;
  color: var(--headline);
  /* die Kontur gibt der dünnen Ersatzschrift die Strichstärke von Market Pro */
  -webkit-text-stroke: var(--hand-strich) currentColor;
  letter-spacing: -0.005em;
  line-height: 1.12;
  text-wrap: balance;
  hyphens: manual;
  margin: 0;
}
h2 { font-size: clamp(2.3rem, 5vw, 3.3rem); }
h3 { font-size: clamp(1.6rem, 2.6vw, 1.95rem); }

p { margin: 0; }

.innen {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-left: max(var(--rand), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rand), env(safe-area-inset-right, 0px));
}

.springen {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 30;
  padding: 10px 16px;
  background: var(--anthrazit);
  color: var(--creme);
  border-radius: var(--radius-s);
  text-decoration: none;
}
.springen:focus { top: 12px; color: var(--creme); }


/* ---------- 4. Bausteine ----------------------------------------------- */

/* Feld wie die Farbfelder: Palettenfarbe, schwarze Kontur, runde Ecken */
.feld {
  background: var(--creme);
  border: var(--kontur);
  border-radius: var(--radius);
}

/* Key-Visual: Grün mit hellen Wellenlinien */
.keyvisual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--gruen);
  border: var(--kontur);
  border-radius: var(--radius);
}
.keyvisual::before {
  content: "";
  position: absolute;
  inset: -14% -3%;
  z-index: -1;
  background: url("../img/kv-wellen.svg") center / cover no-repeat;
  transform: translate3d(0, var(--kv-y, 0px), 0);
  will-change: transform;
}
.keyvisual--tag { background-color: var(--gruen-hell); }

/* Knöpfe im Stil der Farbfelder */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.7em 1.2em;
  background: var(--gruen-hell);
  border: var(--kontur);
  border-radius: var(--radius-s);
  color: var(--headline);
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.knopf:hover { background: var(--beige); color: var(--headline); }
.knopf--hell { background: var(--creme); }
.knopf__pfeil { width: 1.05em; height: 1.05em; flex: none; transition: transform 0.3s ease; }
.knopf:hover .knopf__pfeil { transform: translateX(3px); }

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.knoepfe--mitte { justify-content: center; }

/* kleines Wellenzeichen */
.wellenzeichen { width: 96px; height: auto; color: var(--gruen); }

/* Hervorhebung im Textgrün */
.hervor { color: var(--akzent); font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.5; }
.gross { font-size: clamp(1.1rem, 1.5vw, 1.2rem); line-height: 1.6; }
.leise-zeile { color: var(--leise); font-size: 0.95rem; }
.mitte { text-align: center; }
.folgenraster + .leise-zeile { margin-top: 28px; }

/* Statuszeile mit ruhig atmendem Punkt */
.status {
  display: flex;
  align-items: flex-start;
  gap: 0.65em;
  font-size: 0.98rem;
}
.status__punkt {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 0.5em;
  background: var(--gruen-text);
}

/* sanfter Hügel als Übergang */
.huegel {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(36px, 6vw, 80px);
  fill: var(--seite-farbe);
  pointer-events: none;
}


/* ---------- 5. Kopfzeile ------------------------------------------------ */

.kopf {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--creme);            /* deckend, nie transparent */
  border-bottom: 1px solid var(--beige);
}
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding: 10px max(var(--rand), env(safe-area-inset-right, 0px)) 10px max(var(--rand), env(safe-area-inset-left, 0px));
}
.marke {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}
.marke__zeichen { width: 58px; height: 48px; }
.marke__schrift { width: 174px; height: 24px; }

.navi {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 26px;
  font-size: 0.98rem;
}
.navi a {
  color: var(--headline);
  text-decoration: none;
  padding-block: 6px;
  background: linear-gradient(var(--gruen-text), var(--gruen-text)) left bottom / 0 2px no-repeat;
  transition: background-size 0.3s ease;
}
.navi a:hover,
.navi a[aria-current="page"] { background-size: 100% 2px; color: var(--headline); }

@media (max-width: 719px) {
  .kopf { position: relative; top: auto; }
  html { scroll-padding-top: 16px; }
  .kopf__innen { flex-direction: column; gap: 6px; padding-block: 12px 8px; }
  .navi { justify-content: center; gap: 2px 14px; font-size: 0.86rem; }
}


/* ---------- 6. Startseite: Bühne ---------------------------------------- */

.buehne {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 52vw, 820px);
  padding-block: clamp(40px, 6vw, 80px) clamp(70px, 9vw, 120px);
  overflow: hidden;
  isolation: isolate;
}
.buehne__bilder {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--papier);
}
.buehne__ebene {
  position: absolute;
  inset: -7% 0;
  will-change: transform;
}
.buehne__bild, .buehne__bild picture, .buehne__bild img {
  display: block;
  width: 100%;
  height: 100%;
}
.buehne__bild img { object-fit: cover; object-position: 30% 55%; }

/* Tag- und Nachtbild: von 18 bis 6 Uhr zeigt die Startseite das Nachtbild */
.buehne__bild--nacht { display: none; }
.nacht .buehne__bild--tag { display: none; }
.nacht .buehne__bild--nacht { display: block; }

.huegel--buehne, .huegel--unten { bottom: -1px; }

.buehne__innen { display: flex; justify-content: flex-end; }
.buehne__karte {
  container-type: inline-size;
  width: min(500px, 100%);
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.buehne__titel { font-size: clamp(1.75rem, 10cqi, 2.9rem); }
.buehne__fuer { color: var(--akzent); font-size: clamp(1.08rem, 1.4vw, 1.2rem); line-height: 1.45; }
.buehne__karte .wellenzeichen { margin-block: 2px 2px; }
.buehne__karte .knoepfe { margin-top: 6px; }

@media (prefers-reduced-motion: no-preference) {
  .buehne__karte { animation: auftauchen 1.4s ease-out 0.2s both; }
  @keyframes auftauchen {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Handy und Tablet hochkant: Bild oben, Karte darunter */
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  .buehne {
    display: block;
    min-height: 0;
    padding: 0 0 8px;
  }
  .buehne__bilder {
    position: relative;
    inset: auto;
    z-index: 0;
    height: 62vh;
    height: 62svh;
    min-height: 360px;
    max-height: 760px;
  }
  .buehne__bild img { object-position: 46% 40%; }
  .buehne__innen { position: relative; z-index: 1; margin-top: -64px; justify-content: center; }
  .buehne__karte { width: 100%; max-width: 600px; }
}


/* ---------- 7. Abschnitte ---------------------------------------------- */

.abschnitt {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
}
.abschnitt--eng { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 8vw, 96px); }
.abschnitt--band { padding-block: clamp(16px, 3vw, 32px); }
.abschnitt--figur { padding-block: clamp(40px, 6vw, 80px) clamp(72px, 9vw, 120px); }

.abschnitt__kopf {
  max-width: 44rem;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
  display: grid;
  gap: 12px;
}
.abschnitt__kopf--links { margin-inline: 0; text-align: left; }


/* Folgenkarten */
.folgenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 2.6vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.folgenkarte {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color 0.3s ease;
}
.folgenkarte:hover { background: var(--beige); }
.folgenkarte__bild {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: var(--kontur);
  background: var(--gruen) url("../img/kv-wellen.svg") center / cover no-repeat;
}
.folgenkarte__bild > img,
.folge__medium > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.medium-bild, .medium-bild picture, .medium-bild img { display: block; width: 100%; height: 100%; }
.medium-bild { position: absolute; inset: 0; }
.medium-bild img { object-fit: cover; object-position: 30% 55%; transition: transform 1.2s ease; }
.medium-bild--figur { background: var(--papier); }
.medium-bild--figur img { object-position: 50% 26%; }
.medium-bild--dragomir { background: #fdf9ef; }       /* Papierton des Bildes */
.medium-bild--dragomir img { object-position: 42% 50%; }   /* Pandomir links und das Häuschen rechts bleiben im Bild */
.medium-bild--vulkan { background: #fdfaf6; }         /* Papierton des Bildes */
.medium-bild--vulkan img { object-position: 0% 50%; }      /* Hütte, Pandomir und Vulkan bleiben im Bild */
.folgenkarte:hover .medium-bild img { transform: scale(1.04); }
.folgenkarte__nr,
.folge__nr {
  position: absolute;
  right: 14px;               /* oben rechts: verdeckt Pandomir in keinem Folgenbild */
  top: 12px;
  z-index: 2;
  padding: 2px 14px 4px;
  border: var(--kontur);
  border-radius: 999px;
  background: var(--glas-dicht);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  font-family: var(--hand);
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--headline);
  -webkit-text-stroke: var(--hand-strich) currentColor;
}
.folgenkarte__inhalt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
  flex: 1;
}
.folgenkarte__art { color: var(--leise); font-size: 0.9rem; }
.folgenkarte__titel a { text-decoration: none; color: inherit; }
.folgenkarte__titel a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }
.folgenkarte__titel a:focus-visible { outline: 0; }
.folgenkarte__titel a:focus-visible::after { outline: 3px solid var(--gruen-text); outline-offset: 3px; }
.folgenkarte__mehr {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: auto;
  padding-top: 6px;
  color: var(--headline);
  font-size: 0.95rem;
}
.folgenkarte:hover .knopf__pfeil { transform: translateX(3px); }

/* als Liste untereinander (Seite Einschlafgeschichten) */
@media (min-width: 760px) {
  .folgenraster--liste { grid-template-columns: 1fr; }
  .folgenraster--liste .folgenkarte { display: grid; grid-template-columns: minmax(260px, 38%) 1fr; }
  .folgenraster--liste .folgenkarte__bild { aspect-ratio: auto; min-height: 220px; border-bottom: 0; border-right: var(--kontur); }
  .folgenraster--liste .folgenkarte__inhalt { padding: 28px 32px; justify-content: center; }
}


/* Schluss: folgen */
.abschnitt--schluss { padding-top: 0; }
.schluss {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  padding: clamp(26px, 4vw, 48px);
  background: var(--beige);
}
.schluss__logo { width: clamp(96px, 14vw, 150px); }
.schluss__text { display: grid; gap: 14px; justify-items: start; }
.schluss__text h2 { font-size: clamp(2.1rem, 4vw, 2.8rem); }

@media (max-width: 599px) {
  .schluss { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .schluss__text { justify-items: center; }
}


/* ---------- 8. Unterseiten ---------------------------------------------- */

.titelfeld {
  container-type: inline-size;
  display: flex;
  align-items: flex-end;
  min-height: clamp(170px, 22vw, 260px);
  margin-block: clamp(20px, 3vw, 32px);
  padding: clamp(26px, 4vw, 44px) clamp(24px, 5vw, 56px);
}
.titelfeld h1 { font-size: clamp(2rem, 9.5cqi, 4.6rem); -webkit-text-stroke: var(--hand-strich) currentColor; }
.titelfeld__zeile { display: block; font-size: 0.42em; margin-top: 0.2em; -webkit-text-stroke: var(--hand-strich) currentColor; }

.zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 30px);
  align-items: start;
}
@media (max-width: 859px) { .zweispaltig { grid-template-columns: 1fr; } }

.einleitung {
  display: grid;
  gap: 14px;
  padding: clamp(24px, 4vw, 44px);
}
.einleitung .status { margin-top: 6px; }


.bald {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(26px, 4vw, 44px);
  text-align: center;
}
.bald img { width: 87px; height: 72px; }
.bald h2 { font-size: clamp(2rem, 3.4vw, 2.5rem); }


/* Folgenseite */
.pfad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: clamp(18px, 3vw, 28px) 16px;
  color: var(--leise);
  font-size: 0.92rem;
}
.pfad a { color: var(--headline); }

.folge__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 30px);
  align-items: stretch;
}
.folge__medium {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 360px;
  border: var(--kontur);
  border-radius: var(--radius);
  background: var(--gruen) url("../img/kv-wellen.svg") center / cover no-repeat;
}
.folge__medium .bildebene { inset: -6% 0; }
.folge__medium iframe {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.folge__nr { right: 18px; top: 16px; font-size: 1.6rem; }
/* Folge 3: Pandomir steht weit unten im Bild – unteren Bildrand zeigen */
.folge__medium--vulkan .bildebene { inset: -10% 0 -2%; }
.video-knopf { position: absolute; right: 16px; bottom: 16px; z-index: 3; }

.folge__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
}
.folge__art { color: var(--leise); font-size: 0.92rem; }
.folge__info h1 { font-size: clamp(2.3rem, 4.4vw, 3.2rem); }
.eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.eckdaten li {
  padding: 4px 12px;
  border: 1px solid var(--schwarz);
  border-radius: 999px;
  background: var(--gruen-hell);
  font-size: 0.9rem;
}
.folge__info .knoepfe { margin-top: 4px; }
.video-hinweis, .hoerprobe__hinweis { color: var(--leise); font-size: 0.86rem; line-height: 1.5; }

@media (max-width: 859px) {
  .folge__kopf { grid-template-columns: 1fr; }
  .folge__medium { min-height: 0; aspect-ratio: 16 / 11; }
}

.folge__rumpf {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(32px, 5vw, 56px);
}
@media (max-width: 859px) { .folge__rumpf { grid-template-columns: 1fr; } }
.folge__text { display: grid; gap: 24px; padding-inline: 4px; }
.zitat {
  margin: 0;
  padding-left: 22px;
  border-left: 3px solid var(--gruen);
}
.zitat p {
  font-family: var(--hand);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.25;
  color: var(--headline);
  -webkit-text-stroke: var(--hand-strich) currentColor;
}
.zitat footer { margin-top: 6px; color: var(--leise); font-size: 0.9rem; }

.steckbrief {
  margin: 0;
  padding: clamp(20px, 3vw, 30px);
  background: var(--beige);
  display: grid;
  gap: 14px;
}
.steckbrief dt { color: var(--leise); font-size: 0.86rem; }
.steckbrief dd { margin: 2px 0 0; }

.nachbarn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  margin-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px);
}
.nachbar {
  display: grid;
  gap: 4px;
  padding: 20px 24px;
  border-radius: var(--radius-m);
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.nachbar:hover { background: var(--beige); color: var(--text); }
.nachbar--nach { text-align: right; grid-column: 2; }
.nachbar__richtung { color: var(--leise); font-size: 0.88rem; }
.nachbar__name { font-family: var(--hand); font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.2; color: var(--headline); -webkit-text-stroke: var(--hand-strich) currentColor; }
@media (max-width: 559px) {
  .nachbarn { grid-template-columns: 1fr; }
  .nachbar--nach { grid-column: auto; text-align: left; }
}


/* Hörprobe: eigener Player im Stil der Farbfelder */
.hoerprobe-platz audio { width: 100%; }
.hoerprobe {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: var(--kontur);
  border-radius: var(--radius-m);
  background: var(--beige);
}
.hoerprobe__knopf {
  width: 52px;
  height: 52px;
  min-height: 0;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.hoerprobe__knopf svg { width: 20px; height: 20px; }
.hoerprobe__mitte { display: grid; gap: 6px; min-width: 0; }
.hoerprobe__titel { font-size: 0.9rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoerprobe__zeit { color: var(--leise); font-size: 0.85rem; font-variant-numeric: tabular-nums; min-width: 4.4em; text-align: right; }

.hoerprobe__balken {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --anteil: 0%;
}
.hoerprobe__balken::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(var(--gruen-text), var(--gruen-text)) 0 0 / var(--anteil) 100% no-repeat, var(--gruen-hell);
}
.hoerprobe__balken::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(var(--gruen-text), var(--gruen-text)) 0 0 / var(--anteil) 100% no-repeat, var(--gruen-hell);
}
.hoerprobe__balken::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--anthrazit);
  border: 2px solid var(--creme);
}
.hoerprobe__balken::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--anthrazit);
  border: 2px solid var(--creme);
}


/* Textseiten (Impressum, Datenschutz) */
.textblatt {
  max-width: 860px;
  margin: clamp(20px, 3vw, 36px) auto clamp(48px, 7vw, 80px);
  padding: clamp(26px, 5vw, 56px);
}
.textblatt h1 { font-size: clamp(2.8rem, 7vw, 3.8rem); margin-bottom: 0.2em; -webkit-text-stroke: var(--hand-strich) currentColor; }
.textblatt h2 { margin: 1.5em 0 0.4em; font-size: clamp(1.6rem, 3.4vw, 1.9rem); }
.textblatt p, .textblatt ul { margin: 0 0 1em; max-width: 68ch; }
.textblatt ul { padding-left: 1.2em; }
.textblatt li { margin-bottom: 0.35em; }
.textblatt address { font-style: normal; }
.textblatt a { overflow-wrap: anywhere; }
.klein { font-size: 0.9rem; color: var(--leise); }
.kurzfassung {
  margin: 1.4em 0 0;
  padding: 1.1em 1.3em;
  background: var(--gruen-hell);
  border: var(--kontur);
  border-radius: var(--radius-s);
}
.kurzfassung p:last-child { margin-bottom: 0; }
.kurzfassung strong { color: var(--text); }


/* ---------- 9. Fußzeile --------------------------------------------------- */

.fuss {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
  background: var(--beige);
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}
.huegel--fuss { top: 1px; translate: 0 -100%; fill: var(--beige); }
.fuss__innen {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 28px clamp(24px, 5vw, 64px);
  padding-block: clamp(20px, 3vw, 32px) clamp(28px, 4vw, 44px);
}
.fuss__marke { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; max-width: 26rem; }
.fuss__marke img { width: 112px; height: 112px; }
.fuss__spalte { display: grid; align-content: start; gap: 6px; }
.fuss__spalte a { text-decoration: none; width: fit-content; }
.fuss__spalte a:hover, .fuss__spalte a[aria-current="page"] { text-decoration: underline; color: var(--text); }
.fuss__titel { font-family: var(--hand); font-size: 1.45rem; line-height: 1.2; color: var(--headline); -webkit-text-stroke: var(--hand-strich) currentColor; margin-bottom: 4px; }
.fuss__zeile {
  padding-top: 14px;
  border-top: 1px solid var(--creme);
  color: var(--leise);
  font-size: 0.88rem;
}
@media (max-width: 759px) {
  .fuss__innen { grid-template-columns: 1fr 1fr; }
  .fuss__marke { grid-column: 1 / -1; }
}
@media (max-width: 399px) {
  .fuss__marke { grid-template-columns: 1fr; }
}


/* ---------- 10. Vorschau (nur in der Vorschau sichtbar) ------------------- */

.vorschau-leiste {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  translate: -50% 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--anthrazit);
  color: var(--creme);
  border-radius: 999px;
  font: 0.85rem/1 var(--schrift);
  white-space: nowrap;
}
.vorschau-leiste__titel { padding: 0 8px 0 10px; color: var(--gruen-hell); }
.vorschau-leiste a, .vorschau-leiste button {
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--creme);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.vorschau-leiste a:hover, .vorschau-leiste button:hover { background: var(--grau); color: var(--creme); }
.vorschau-leiste [aria-current="true"] { background: var(--creme); color: var(--anthrazit); }


/* ---------- 11. Ruhe für alle, die Bewegung reduzieren -------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-parallax], .keyvisual::before { transform: none !important; }
}


/* ---------- 12. Runde 2 (04.11.2026): Transparenz, Bilder, Struktur ------- */

/* Textfelder mit leichter Transparenz: Hintergrund und Wellen scheinen durch */
:root {
  --glas:        rgb(236 232 225 / 0.66);   /* Felder auf Creme: Wellenlinien scheinen leicht durch */
  --glas-dicht:  rgb(236 232 225 / 0.8);    /* Felder auf Bildern */
  --glas-beige:  rgb(223 218 206 / 0.7);
  --glas-gruen:  rgb(192 204 184 / 0.72);
  --unschaerfe:  blur(8px) saturate(1.05);  /* nur über Bildern */
  --unschaerfe-leicht: blur(0.6px);
}
.feld {
  background: var(--glas);
  -webkit-backdrop-filter: var(--unschaerfe-leicht);
  backdrop-filter: var(--unschaerfe-leicht);
}
.feld--glas {
  background: var(--glas-dicht);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
}
.folgenkarte:hover { background: var(--glas-beige); }
.schluss, .steckbrief { background: var(--glas-beige); }
.hoerprobe { background: var(--glas-beige); }
.kurzfassung { background: var(--glas-gruen); }
.knopf--hell { background: var(--glas-dicht); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .feld, .feld--glas { background: rgb(236 232 225 / 0.94); }
}

/* Abschnittsköpfe: immer gleich aufgebaut, linksbündig */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--leise);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.welle-klein { width: 34px; height: auto; flex: none; color: var(--gruen-text); }
.abschnittskopf {
  display: grid;
  gap: 12px;
  max-width: 46rem;
  margin: 0 0 clamp(28px, 4vw, 48px);
}
.abschnittskopf--mitte { margin-inline: auto; justify-items: center; text-align: center; }
.abschnitt--nach-kopf { padding-top: clamp(36px, 5vw, 64px); }
.abschnitt--beige { background: var(--beige); }
.folgenraster + .leise-zeile { margin-top: 24px; }

/* Bildebene für Parallaxe (Startbild, Bildbänder, Seitenköpfe) */
.bildebene { position: absolute; inset: -9% 0; will-change: transform; }
.bildebene picture, .bildebene img { display: block; width: 100%; height: 100%; }
.bildebene img { object-fit: cover; }

/* Bildband mit dem Nachtbild: Reinhören und „So wird der Abend leise“ */
.bildband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 8vw, 112px);
}
.bildband__bild { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--anthrazit); }
.bildband--nacht .bildebene img { object-position: 18% 55%; }
.bildband__innen { display: flex; justify-content: flex-end; }
.abend {
  width: min(600px, 100%);
  padding: clamp(26px, 3.4vw, 44px);
  display: grid;
  gap: 18px;
}
.abend .zitat p { font-size: clamp(1.55rem, 2.6vw, 2rem); }
.ruhe-liste {
  margin: 6px 0 0;
  padding: 18px 0 0;
  list-style: none;
  display: grid;
  gap: 16px;
  border-top: 1px solid var(--grau);
}
.ruhe-liste li { display: grid; gap: 4px; }
.ruhe-liste h3 { font-size: clamp(1.4rem, 2vw, 1.6rem); }

@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  .bildband { padding: 0 0 8px; }
  .bildband__bild { position: relative; inset: auto; z-index: 0; height: 58vw; min-height: 260px; max-height: 520px; }
  .bildband--nacht .bildebene img { object-position: 78% 50%; }
  .bildband__innen { position: relative; z-index: 1; margin-top: -56px; justify-content: center; }
}

/* Seitenkopf der Unterseiten: Bild mit Karte */
.seitenkopf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(440px, 44vw, 640px);
  padding-block: clamp(40px, 6vw, 72px) clamp(72px, 9vw, 112px);
}
.seitenkopf__bild { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--papier); }
.seitenkopf--nacht .bildebene img { object-position: 22% 50%; }
.seitenkopf--tag .bildebene img { object-position: 22% 55%; }
.seitenkopf__innen { display: flex; justify-content: flex-end; }
.seitenkopf__karte {
  container-type: inline-size;
  width: min(540px, 100%);
  padding: clamp(24px, 3.4vw, 40px);
  display: grid;
  gap: 12px;
}
.seitenkopf__karte h1 { font-size: clamp(2rem, 10.5cqi, 3.8rem); -webkit-text-stroke: var(--hand-strich) currentColor; }
.seitenkopf__zeile {
  font-family: var(--hand);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  color: var(--headline);
  -webkit-text-stroke: var(--hand-strich) currentColor;
}
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  .seitenkopf { display: block; min-height: 0; padding: 0 0 8px; }
  .seitenkopf__bild { position: relative; inset: auto; z-index: 0; height: 52vh; height: 52svh; min-height: 320px; max-height: 640px; }
  .seitenkopf__innen { position: relative; z-index: 1; margin-top: -60px; justify-content: center; }
  .seitenkopf--nacht .bildebene img, .seitenkopf--tag .bildebene img { object-position: 46% 40%; }
}

/* Das ist Pandomir: drei Ansichten und drei Merkmale */
.ansichten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 2vw, 24px);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.ansicht { margin: 0; display: grid; justify-items: center; gap: 2px; mix-blend-mode: multiply; }
.ansicht img { width: 100%; }
.ansicht figcaption {
  font-family: var(--hand);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: var(--headline);
  -webkit-text-stroke: var(--hand-strich) currentColor;
}
.merkmalraster {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.merkmalkarte { overflow: hidden; display: flex; flex-direction: column; }
.merkmalkarte img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 42%;
  border-bottom: var(--kontur);
}
.merkmalkarte__text { padding: 20px 24px 24px; display: grid; gap: 8px; }
.merkmalkarte__text h3 { font-size: clamp(1.5rem, 2.2vw, 1.8rem); }

/* So entsteht Pandomir */
.papierband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 120px);
  background: var(--beige);
}
.papierband__grund { position: absolute; inset: 0; pointer-events: none; }
.papierband > .innen { position: relative; }
.papierband__skizze {
  position: absolute;
  right: -4%;
  top: 2%;
  width: min(760px, 68%);
  opacity: 0.3;
  mix-blend-mode: multiply;
}
.entstehung {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}
.entstehung__bild {
  position: relative;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.entstehung__bild img, .entstehung__video { display: block; width: 100%; }
.entstehung__bild--scan { margin-top: clamp(0px, 5vw, 72px); }
.entstehung__bild--scan img { background: #fff; }
.entstehung__video { aspect-ratio: 480 / 854; object-fit: cover; background: var(--anthrazit); }
.entstehung__bild figcaption {
  padding: 10px 16px 12px;
  border-top: var(--kontur);
  font-family: var(--hand);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.25;
  color: var(--headline);
  -webkit-text-stroke: var(--hand-strich) currentColor;
}
.video-schalter {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 6px 12px;
  border: var(--kontur);
  border-radius: 999px;
  background: var(--glas-dicht);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  color: var(--headline);
  font: 0.85rem/1.2 var(--schrift);
  cursor: pointer;
}
@media (max-width: 899px) {
  .entstehung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .entstehung__bild--papier { grid-column: 1 / -1; }
  .entstehung__bild--scan { margin-top: 0; }
}
@media (max-width: 519px) {
  .entstehung { grid-template-columns: 1fr; }
  .entstehung__bild--video { max-width: 340px; justify-self: center; width: 100%; }
}

/* Galerie zum seitlichen Blättern */
.streifen { margin-top: clamp(36px, 5vw, 60px); }
.streifen__kopf {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.streifen__kopf h3 { font-size: clamp(1.7rem, 2.8vw, 2.1rem); }
.streifen__knoepfe { display: flex; gap: 8px; }
.knopf--rund { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
.knopf__pfeil--links { transform: scaleX(-1); }
.knopf:hover .knopf__pfeil--links { transform: scaleX(-1) translateX(3px); }
.streifen__liste {
  margin: 0;
  padding: 4px 2px 16px;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(170px, 21vw, 240px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--grau) transparent;
}
.streifen__liste li {
  scroll-snap-align: start;
  overflow: hidden;
  border: var(--kontur);
  border-radius: var(--radius-m);
  background: var(--anthrazit);
}
.streifen__liste img { width: 100%; aspect-ratio: 420 / 672; object-fit: cover; }

/* Was ihr hier findet: Karten mit Bild */
.weltenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.weltkarte { display: grid; gap: 14px; color: var(--text); text-decoration: none; }
.weltkarte__feld {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: end;
  padding: clamp(12px, 3cqi, 22px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: var(--kontur);
  border-radius: var(--radius);
}
.weltkarte__feld picture { position: absolute; inset: 0; z-index: -1; }
.weltkarte__feld img { width: 100%; height: 100%; object-fit: cover; object-position: 25% 50%; transition: transform 1.4s ease; }
.weltkarte:hover .weltkarte__feld img { transform: scale(1.05); }
.weltkarte__name {
  padding: 8px 20px 12px;
  border: var(--kontur);
  border-radius: var(--radius-m);
  font-family: var(--hand);
  font-size: clamp(1.4rem, 6cqi, 2.3rem);
  line-height: 1.1;
  text-align: right;
  color: var(--headline);
  -webkit-text-stroke: var(--hand-strich) currentColor;
}
.weltkarte__zeit { display: block; font-size: 0.55em; margin-top: 0.15em; }
.weltkarte__text { padding-inline: 6px; }
.weltkarte:hover .weltkarte__text { color: var(--akzent); }

/* So ist eine Traumreise gebaut */
.aufbau {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.aufbau__kopf { display: grid; gap: 8px; }
.aufbau__kopf .abschnittskopf { margin-bottom: 0; }
.aufbau__bild { margin: 0; }
.aufbau__bild img { width: min(340px, 80%); mix-blend-mode: multiply; }
.aufbau__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.aufbau__liste li { padding: 20px 22px; border-radius: var(--radius-m); display: grid; align-content: start; gap: 6px; }
.aufbau__liste h3 { font-size: clamp(1.4rem, 2vw, 1.6rem); }
@media (max-width: 859px) {
  .aufbau { grid-template-columns: 1fr; }
  .aufbau__kopf { position: static; }
  .aufbau__bild { display: none; }
}
@media (max-width: 519px) { .aufbau__liste { grid-template-columns: 1fr; } }

/* Abenteuer: Pandomir unterwegs */
.einleitung .abschnittskopf { margin-bottom: 2px; }
.unterwegs { margin: 0; display: grid; justify-items: center; gap: 4px; mix-blend-mode: multiply; }
.unterwegs img { width: min(460px, 100%); }
.unterwegs figcaption {
  font-family: var(--hand);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  color: var(--headline);
  -webkit-text-stroke: var(--hand-strich) currentColor;
}

/* atmender Punkt */
@media (prefers-reduced-motion: no-preference) {
  .status__punkt { animation: puls 6s ease-in-out infinite; }
  @keyframes puls {
    0%, 100% { scale: 1; }
    50%      { scale: 0.7; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-parallax] { transform: none !important; }
}

/* Abschnitt in Beige direkt vor der Fußzeile: nahtlos übergehen */
main:has(> .abschnitt--beige:last-child) + .fuss { margin-top: 0; border-top: 1px solid var(--creme); }
main:has(> .abschnitt--beige:last-child) + .fuss .huegel--fuss { display: none; }

/* Großes Feld auf der Startseite: so durchscheinend wie die übrigen Felder.
   Über dem hellen Tagbild leichter, über dem dunklen Nachtbild etwas dichter,
   damit die grüne Zeile lesbar bleibt. */
.buehne__karte {
  background: rgb(236 232 225 / 0.6);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
  backdrop-filter: blur(3px) saturate(1.05);
}
.nacht .buehne__karte {
  background: rgb(236 232 225 / 0.76);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
}
/* Auf dem Handy liegen die Karten unter dem Bild auf Creme: wie alle Felder dort */
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px) {
  .buehne__karte, .nacht .buehne__karte, .seitenkopf__karte, .abend {
    background: var(--glas);
    -webkit-backdrop-filter: var(--unschaerfe-leicht);
    backdrop-filter: var(--unschaerfe-leicht);
  }
}

/* Fließtext unter den Abschnittsköpfen in Schwarz (Vorgabe AL, 04.11.):
   längere Texte schwarz, Grün nur für kurze Zeilen */
.abschnittskopf .hervor { color: var(--text); }