/* ============================================================================
   fc-thun-meisterdoku.css — XXL-Seite «Meistertitel 25/26. Der Film.»
   Farbwelt: edles Holzbraun, am Material gemessen (Bibliothek im Hotel, BTS-
   Fotos): Holzwand #664F41, Decke #56493D, Regal im Schatten #43342C.
   Levins Entscheid (11.09.): Holz als Farbwelt, eine feine Maserung nur in
   Bändern und Karten, kein durchgehender Holz-Hintergrund. Fotos bleiben der Star.
   Baut auf style.css (Topbar, Fliesstext, Fotoraster, Lightbox, CTA, Footer).
   ========================================================================== */
:root {
  --holz-grund:   #F3EDE4;   /* Seitengrund, Papier mit Holzton */
  --holz-papier:  #FBF8F3;   /* Karten */
  --holz-hell:    #E6DACB;   /* ruhige Flächen, Hover */
  --holz-mittel:  #8A6A55;
  --holz:         #664F41;   /* gemessen: Holzwand */
  --holz-tief:    #43342C;   /* gemessen: Regal im Schatten */
  --holz-nacht:   #2B211B;   /* Bänder */
  --holz-akzent:  #6B4F3F;   /* Links, Chips, Fokus */
  --holz-linie:   rgba(67, 52, 44, 0.16);
  --holz-linie-2: rgba(67, 52, 44, 0.28);
  --on-holz:      #F7F1E8;
  --on-holz-soft: rgba(247, 241, 232, 0.74);
  /* Maserung: gestreckter Rauschfilter, sehr leise. Zwei Frequenzen, damit
     sie wie Fasern liest und nicht wie Bildrauschen. */
  --maserung: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='160'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.13  0 0 0 0 0.08  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
}
body { background: var(--holz-grund); }

/* Topbar auf Holzton, bleibt sticky aus style.css */
/* Topbar dunkelbraun wie der Hero, bleibt sticky (Levin, 11.09.) */
/* Oben deckend (#14100E, fast schwarz mit Holzton), beim Scrollen leicht
   durchscheinend mit Weichzeichner, aber nie richtig transparent (Levin, 11.09.). */
.detail-topbar { background: #14100E; border-bottom-color: rgba(247, 241, 232, 0.08); transition: background var(--dur); }
.detail-topbar.is-scrolled { background: rgba(20, 16, 14, 0.86); }
.detail-back { color: var(--on-holz-soft); }
.detail-back:hover { color: var(--on-holz); }
.detail-back:focus-visible { outline: 2px solid var(--on-holz); outline-offset: 2px; border-radius: 4px; }

/* ---------- Fliesstext wie auf den anderen XXL-Seiten ---------- */
.xxl-text { max-width: 62ch; color: var(--text-soft); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.6; margin: 0 0 22px; }
.xxl-sec { margin-top: clamp(76px, 11vw, 132px); }
.detail-section__title { margin-bottom: clamp(14px, 2vw, 20px); }
.detail { padding-block-start: 0; }
.tag { border-color: var(--holz-linie-2); color: var(--holz-tief); background: rgba(255, 255, 255, 0.5); }
.text-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--holz-akzent); }

/* ---------- Hero: Titelbild volle Breite, Text unten links ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - 64px);   /* Topbar (64px) + Hero = ein Bildschirm */
  min-height: calc(100svh - 64px);
  display: grid; align-items: end;
  background: var(--holz-nacht);
  color: var(--on-holz);
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: -2; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(43, 33, 27, 0.92) 0%, rgba(43, 33, 27, 0.55) 38%, rgba(43, 33, 27, 0.08) 70%, transparent 100%);
}
.hero__inner { padding-block: clamp(36px, 6vw, 72px); }
.hero .detail-eyebrow { color: var(--on-holz-soft); }
.hero .detail-title { color: var(--on-holz); }
/* Zwei Zeilen, Umbruch nach «25/26.» (Levin, 11.09.). Die Spans halten den
   textContent gleich dem DB-Titel, sonst würde xxl-projekt.js den Umbruch überschreiben. */
.hero .detail-title__zeile { display: block; white-space: nowrap; }
@media (max-width: 420px) { .hero .detail-title__zeile { white-space: normal; } }
.hero .detail-lead { color: var(--on-holz-soft); max-width: 58ch; }
.hero .tag { color: var(--on-holz); border-color: rgba(247, 241, 232, 0.32); background: rgba(247, 241, 232, 0.08); }

/* ---------- Der Film: dunkles Holzband ---------- */
.film {
  position: relative; overflow: hidden;
  margin-top: 0;
  background: var(--holz-nacht); color: var(--on-holz);
  padding-block: clamp(48px, 7vw, 96px);
}
.film::before { content: ""; position: absolute; inset: 0; background: var(--maserung); opacity: .32; pointer-events: none; }
.film::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(138, 106, 85, 0.22), transparent 60%); pointer-events: none; }
.film > .container { position: relative; z-index: 1; }
.film__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 28px); }
.film .detail-eyebrow { color: var(--on-holz-soft); }
.film__title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 600; letter-spacing: var(--track-title); line-height: 1.1; color: var(--on-holz); margin: 6px 0 0; }
.film__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-holz); border: 1px solid rgba(247, 241, 232, 0.32); border-radius: var(--radius-pill); padding: .42rem .9rem;
}
.film__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E2B36A; box-shadow: 0 0 0 3px rgba(226, 179, 106, 0.22); }
.film__frame {
  position: relative; aspect-ratio: 16 / 9; max-width: 860px;   /* linksbündig zum Titel, kleiner, Vollbild gibt es im Player (Levin, 11.09.) */
  border-radius: var(--radius); overflow: hidden; background: #000;
  border: 1px solid rgba(247, 241, 232, 0.14);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.film__start { appearance: none; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; display: block; width: 100%; height: 100%; position: relative; }
.film__start:focus-visible { outline: 3px solid var(--on-holz); outline-offset: -3px; }
.film__start:hover .film__play span { background: rgba(43, 33, 27, 0.75); transform: scale(1.05); }
.film__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.film__play {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.film__play span {
  display: grid; place-items: center; width: clamp(64px, 8vw, 88px); aspect-ratio: 1; border-radius: 50%; transition: background var(--dur), transform var(--dur) var(--ease);
  background: rgba(43, 33, 27, 0.55); border: 1px solid rgba(247, 241, 232, 0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.film__play svg { width: 38%; height: 38%; fill: var(--on-holz); transform: translateX(6%); }   /* Dreieck optisch mittig: Pfad liegt bei 8 bis 19 von 24 */
.film__hint { max-width: 62ch; margin: clamp(16px, 2vw, 22px) auto 0; text-align: center; color: var(--on-holz-soft); font-size: 1rem; line-height: 1.55; }

/* ---------- Geschichte: Text links, Foto rechts ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.story__img { margin: 0; max-width: 340px; justify-self: end; }
.story__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
@media (max-width: 820px) { .story { grid-template-columns: 1fr; } .story__img { display: none; } }   /* Handy: Foto weg, nur Text (Levin, 11.09.) */

/* ---------- Behind the Scenes: vier Bilder, sonst nichts ---------- */
.bts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
@media (min-width: 900px) { .bts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bts-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--holz-tief); }

/* ---------- Planung: Notion-Nachbau ---------- */
.nt {
  display: grid; grid-template-rows: minmax(0, 1fr);
  /* Immer ganz im Bild: rund 90 % der Bildschirmhöhe, der Seiteninhalt
     scrollt innen wie in Notion (Levin, 11.09.). Keine Seitenleiste, die
     Navigation läuft über die Startseite, Brotkrumen und Zurück-Knopf. */
  height: 70vh; height: 70svh;
  background: var(--holz-papier); border: 1px solid var(--holz-linie-2); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 30px 70px -30px rgba(43, 33, 27, 0.45);
}
/* Scrollen: zuerst innen im Nachbau. Ist der Inhalt oben oder unten am Ende
   und es wird in dieselbe Richtung weitergescrollt, läuft die ganze Seite
   weiter (Levin, 11.09.). Das ist das normale Verketten, darum kein contain. */
.nt__page { position: relative; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; }
.nt.is-full .nt__page { overscroll-behavior: contain; }   /* im Popup bleibt die Seite dahinter stehen */
/* Scrollbalken ohne Schiene und ohne Trennlinie, nur der Griff im Holzton */
.nt__page { scrollbar-width: thin; scrollbar-color: rgba(67, 52, 44, 0.35) transparent; }
.nt__page::-webkit-scrollbar { width: 12px; background: transparent; }
.nt__page::-webkit-scrollbar-track { background: transparent; border: 0; }
.nt__page::-webkit-scrollbar-thumb { background: rgba(67, 52, 44, 0.35); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
.nt__page::-webkit-scrollbar-thumb:hover { background-color: rgba(67, 52, 44, 0.55); }

/* Vollbild als Popup */
.nt.is-full { position: fixed; inset: clamp(10px, 2vw, 28px); z-index: 120; height: auto; box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.6); }
/* Im Vollbild wie in Notion: Inhalt als Spalte eingemittet, Text bleibt linksbündig */
.nt.is-full .nt__body { max-width: 960px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 48px); }
/* Kopfzeile auf derselben Linie wie der eingemittete Inhalt */
.nt.is-full .nt__crumbs { padding-inline: max(clamp(18px, 4vw, 48px), calc((100% - 960px) / 2 + clamp(18px, 4vw, 48px))); }
.nt-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(20, 16, 14, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.nt__full {
  appearance: none; border: 1px solid var(--holz-linie-2); background: #fff; cursor: pointer; color: var(--text);
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.nt__full svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nt__full:hover { background: var(--holz-hell); border-color: var(--holz-akzent); }
.nt__full:focus-visible { outline: 2px solid var(--holz-akzent); outline-offset: 2px; }
.nt__full .nt__full-close { display: none; }
.nt.is-full .nt__full .nt__full-open { display: none; }
.nt.is-full .nt__full .nt__full-close { display: block; }
.nt__page:focus-visible { outline: 2px solid var(--holz-akzent); outline-offset: -2px; }
.nt__crumbs { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px clamp(18px, 3vw, 40px); font-size: .84rem; color: var(--text-dim); border-bottom: 1px solid var(--holz-linie); background: rgba(251, 248, 243, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nt__back {
  appearance: none; border: 1px solid var(--holz-linie-2); background: #fff; font: inherit; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: var(--radius-pill); font-size: .88rem; font-weight: 600;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.nt__back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nt__back:hover { background: var(--holz-hell); border-color: var(--holz-akzent); }
.nt__back:focus-visible { outline: 2px solid var(--holz-akzent); outline-offset: 2px; }
.nt__body .nt__back { margin: 0 0 clamp(18px, 2.5vw, 28px); }
.nt__crumb-icon { display: inline-block; width: 16px; text-align: center; margin-right: 5px; vertical-align: -2px; }
.nt__crumb-icon--img { height: 16px; width: auto; }
.nt__crumb { color: inherit; text-decoration: none; }
a.nt__crumb:hover { color: var(--text); text-decoration: underline; }
.nt__crumb.is-current { color: var(--text); }
.nt__cover { height: 110px; background: linear-gradient(180deg, #FBEFE3, #F6E3D1); }
.nt__body { padding: clamp(28px, 4vw, 56px) clamp(18px, 3vw, 40px) clamp(40px, 5vw, 72px); max-width: 940px; }   /* linksbündig wie die Kopfzeile */
.nt__body--cover { padding-top: 0; }
.nt__pageicon { font-size: clamp(40px, 5vw, 56px); line-height: 1; margin-bottom: 8px; }
.nt__pageicon img { display: block; height: clamp(56px, 7vw, 76px); width: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); }
.nt__body--cover .nt__pageicon { margin-top: -28px; }
.nt__title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: var(--track-title); line-height: 1.1; color: var(--text); margin: 0 0 22px; }
.nt__blocks { display: grid; gap: 10px; }
.nt-block { position: relative; min-width: 0; }   /* Grid-Kind: sonst drückt eine breite Tabelle den Rahmen auf */

.nt-p { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.6; }
.nt-h2 { font-size: 1.3rem; font-weight: 700; margin: 18px 0 2px; color: var(--text); }
.nt-h3 { font-size: 1.08rem; font-weight: 700; margin: 12px 0 0; color: var(--text); }
.nt-gap { height: 26px; }
.nt-ul, .nt-ol { margin: 0; padding-left: 1.5em; color: var(--text); line-height: 1.6; display: grid; gap: 4px; }
.nt-lines { display: grid; gap: 8px; }
.nt-mark { border-radius: 3px; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.nt-mark--grey { background: #E9E7E3; }
.nt-mark--blue { background: #DDE9F5; }
.nt-mark--yellow { background: #FBF0DA; }
.nt-legend { display: grid; gap: 8px; justify-items: start; }
.nt-todos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nt-todo { display: flex; align-items: flex-start; gap: 10px; color: var(--text); line-height: 1.5; }
.nt-check { flex: none; width: 16px; height: 16px; margin-top: .3em; border: 1.5px solid var(--holz-linie-2); border-radius: 3px; background: #fff; }
.nt-todo.is-done .nt-check { background: var(--holz-akzent); border-color: var(--holz-akzent); }
.nt-todo.is-done .nt-todo__text { text-decoration: line-through; color: var(--text-dim); }
.nt-empty { margin: 0; color: var(--text-dim); font-style: italic; }
.nt-missing { border: 1.5px dashed var(--holz-linie-2); border-radius: var(--radius-sm); padding: 16px 18px; color: var(--text-dim); font-size: .92rem; line-height: 1.5; }

.nt-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nt-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; max-width: 420px;
  color: var(--text); text-decoration: none; font-weight: 500;
  background: #fff; border: 1px solid var(--holz-linie); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.nt-link__icon { width: 22px; text-align: center; flex: none; }
.nt-link__icon--img { height: 20px; width: auto; }
.nt-link:hover { background: var(--holz-hell); border-color: var(--holz-linie-2); }
.nt-link:active { transform: translateY(1px); }
.nt-link:focus-visible { outline: 2px solid var(--holz-akzent); outline-offset: 2px; border-radius: 4px; }

/* Board */
.nt-board__title { font-weight: 700; font-size: 1.15rem; margin-bottom: 12px; }
.nt-board__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nt-col { border-radius: 10px; padding: 10px; background: #F5F2EE; display: grid; gap: 8px; align-content: start; }
.nt-col--blue { background: #EEF3F9; }
.nt-col--green { background: #EEF5EF; }
.nt-col__head { display: flex; align-items: center; gap: 8px; font-size: .86rem; padding: 2px 4px; }
.nt-col__dot { width: 8px; height: 8px; border-radius: 50%; background: #8E8B86; }
.nt-col--blue .nt-col__dot { background: #3E7BD6; }
.nt-col--green .nt-col__dot { background: #3E9A5B; }
.nt-col__name { padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.06); font-weight: 500; }
.nt-col__count { color: var(--text-dim); }
.nt-col__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nt-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 10px 12px; font-size: .92rem; line-height: 1.4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.nt-col__new { color: var(--text-dim); font-size: .9rem; padding: 6px 8px; border-radius: 8px; }
@media (max-width: 720px) { .nt-board__cols { grid-template-columns: 1fr; } }

/* Tabelle */
.nt-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--holz-linie); border-radius: 8px; }
.nt-table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.45; min-width: 520px; }
.nt-table th { text-align: left; background: #C8202A; color: #fff; padding: 9px 12px; font-weight: 700; }
.nt-table td { padding: 9px 12px; border-top: 1px solid var(--holz-linie); vertical-align: top; }
.nt-table tr.is-muted td { background: #F2EEE9; }
.nt-table td:first-child { white-space: nowrap; }

/* Bilder, Galerie, Video */
.nt-img { margin: 0; }
.nt-img img { display: block; width: 100%; height: auto; border-radius: 6px; }
.nt-gallery { display: grid; gap: 22px; }
.nt-gallery__item { margin: 0; display: grid; gap: 8px; }
.nt-gallery__label { font-size: .92rem; color: var(--text); }
.nt-gallery__item img { display: block; width: 100%; max-width: 620px; height: auto; border-radius: 6px; justify-self: center; }
.nt-video { margin: 0; display: grid; gap: 8px; justify-items: center; }
.nt-video video { display: block; width: 100%; max-width: 420px; border-radius: 8px; background: #000; }
.nt-video--portrait video { aspect-ratio: 9 / 16; object-fit: cover; max-width: 300px; }
.nt-video figcaption { color: var(--text-dim); font-size: .88rem; }

/* Toggle (Dokument, Unterseite) */
.nt-toggle { border: 1px solid var(--holz-linie); border-radius: 10px; background: #fff; overflow: hidden; }
.nt-toggle__btn {
  appearance: none; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
}
.nt-toggle__btn:hover { background: rgba(67, 52, 44, 0.05); }
.nt-toggle__btn:focus-visible { outline: 2px solid var(--holz-akzent); outline-offset: -2px; }
.nt-toggle__chev { width: 0; height: 0; border-left: 6px solid var(--text-dim); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform var(--dur-fast); flex: none; }
.nt-toggle__btn[aria-expanded="true"] .nt-toggle__chev { transform: rotate(90deg); }
.nt-toggle__label { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.nt-toggle__hint { color: var(--text-dim); font-size: .86rem; white-space: nowrap; }
.nt-status { font-size: .76rem; font-weight: 600; color: #1F7A4D; background: #E5F3EA; border-radius: var(--radius-pill); padding: 2px 9px; }
.nt-toggle__panel { border-top: 1px solid var(--holz-linie); padding: 14px; }
.nt-subpage { display: grid; gap: 10px; }

/* Dokument: Papierlook wie das Original-PDF (rote Titel) */
.nt-doc { background: #fff; padding: clamp(18px, 3vw, 36px); border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 30px -18px rgba(0, 0, 0, 0.3); }
.nt-doc__kicker { margin: 0 0 6px; color: #D9666E; font-size: .8rem; font-weight: 700; }
.nt-doc__title { margin: 0; color: #C8202A; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.nt-doc__sub { margin: 8px 0 0; font-size: 1.1rem; color: var(--text); }
.nt-doc__lead { margin: 4px 0 0; font-style: italic; color: var(--text-soft); line-height: 1.5; }
.nt-doc__rule { border: 0; border-top: 1.5px solid #C8202A; margin: 18px 0 16px; }
.nt-doc__body { display: grid; gap: 10px; }
.nt-doc__body .nt-h2 { color: #C8202A; font-size: 1.35rem; margin-top: 12px; }
.nt-doc__body .nt-h3 { font-size: 1.08rem; }
.nt-doc__footer { margin: 26px 0 0; color: var(--text-dim); font-size: .82rem; }

/* Fahrplan (Öv-Verbindung) */
.nt-journey { display: grid; gap: 6px; max-width: 520px; background: #F4F2EF; padding: 6px; border-radius: 10px; font-size: .92rem; }
.nt-journey__leg, .nt-journey__transfer, .nt-journey__end { background: #fff; border-radius: 8px; padding: 10px 12px; }
.nt-journey__row { display: grid; grid-template-columns: 44px 14px 1fr auto; align-items: center; gap: 6px; }
.nt-journey__time { font-weight: 700; }
.nt-journey__dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text); background: #fff; justify-self: center; }
.nt-journey__leg .nt-journey__row:last-child .nt-journey__dot { background: var(--text); }
.nt-journey__stop { font-weight: 600; }
.nt-journey__track { color: var(--text-soft); font-size: .86rem; }
.nt-journey__info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 6px 64px; color: var(--text-soft); font-size: .86rem; border-left: 1.5px solid var(--text); padding: 4px 0 4px 12px; position: relative; left: -10px; }
.nt-journey__line { font-weight: 800; font-style: italic; padding: 1px 6px; border-radius: 3px; font-size: .8rem; }
.nt-journey__line--outline { color: #C8202A; border: 1.5px solid #C8202A; }
.nt-journey__line--solid { color: #fff; background: #C8202A; }
.nt-journey__name { font-weight: 500; }
.nt-journey__dir { flex-basis: 100%; }
.nt-journey__transfer { display: flex; align-items: center; gap: 8px; color: var(--text); }
.nt-journey__min { font-weight: 600; }
.nt-journey__map { margin-left: auto; color: var(--text-soft); font-size: .86rem; }
.nt-journey__end { font-weight: 700; }

/* Notizzettel: unsere Gedanken im Nachhinein (zweiter Schritt, Daten noch leer) */
.nt-note {
  position: relative; margin: 10px 0 4px 8px; max-width: 420px;
  background: #FFF6C4; color: #3A3220; padding: 14px 16px 12px; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 10px 24px -14px rgba(0, 0, 0, 0.35);
  transform: rotate(-1.2deg);
  font-family: "Caveat", "Bradley Hand", "Segoe Print", cursive; font-size: 1.25rem; line-height: 1.3;
}
.nt-note p { margin: 0; }
.nt-note__pin { position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: #C8202A; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }

@media (max-width: 760px) {
  .nt__cover { height: 90px; }
  .nt__body--cover .nt__pageicon { margin-top: -22px; }
}

/* ---------- CTA in Holz ---------- */
.detail-cta .cta-panel { background: var(--holz-nacht); color: var(--on-holz); position: relative; overflow: hidden; }
.detail-cta .cta-panel::before { content: ""; position: absolute; inset: 0; background: var(--maserung); opacity: .3; pointer-events: none; }
.detail-cta .cta-panel > * { position: relative; }
.detail-cta .cta-panel__title { color: var(--on-holz); }
.detail-cta .cta-panel__text { color: var(--on-holz-soft); }

/* Footer auf dem Holzgrund */
.footer { background: var(--holz-grund); border-top-color: var(--holz-linie); }

@media (prefers-reduced-motion: reduce) {
  .nt-toggle__chev { transition: none; }
}

/* ---------- Hero mit Filmausschnitt (15.10.) ----------
   Der Clip läuft stumm über den ganzen Bildschirm, die Leiste liegt oben
   durchsichtig darüber. Schwarze Balken fahren beim Laden auf wie eine Leinwand,
   der Text steigt Zeile für Zeile nach. Schleier nur dort, wo Text steht
   (Levin 15.10.: viel weniger Schwarz, mehr vom Film sehen). */
body:has(.hero--film) .detail-topbar:not(.is-scrolled) {
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hero--film {
  min-height: 100vh; min-height: 100svh;
  margin-top: -65px; padding-top: 0;   /* unter die Leiste (64px + Linie), Inhalt mittig in der vollen Höhe */
  align-items: center;
  background: #0d0a08;   /* ersetzt auch das alte Headerbild aus style.css */
}
/* style.css legt über jeden .hero einen Schleier von 70 %, hier nicht */
.hero--film::before { display: none; }
.hero--film .hero__video { object-position: center; }
.hero--film::after {
  background:
    linear-gradient(to right, rgba(13, 10, 8, 0.52) 0%, rgba(13, 10, 8, 0.24) 45%, transparent 72%),
    linear-gradient(to top, rgba(13, 10, 8, 0.45) 0%, transparent 32%),
    linear-gradient(to bottom, rgba(13, 10, 8, 0.4) 0%, transparent 18%);
}
.hero--film :is(.detail-eyebrow, .detail-title, .detail-lead) { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 28px rgba(0, 0, 0, 0.45); }
.hero--film .detail-lead { color: rgba(247, 241, 232, 0.9); margin-bottom: 0; }
.hero__balken {
  position: absolute; left: 0; right: 0; z-index: 0; height: 50%;
  background: #0d0a08; pointer-events: none;
  transition: transform 1.4s cubic-bezier(.76, 0, .24, 1) .15s;
}
.hero__balken--oben { top: 0; transform-origin: top; }
.hero__balken--unten { bottom: 0; transform-origin: bottom; }
.hero--film.is-offen .hero__balken { transform: scaleY(0); }
.hero--film .hero__inner { position: relative; z-index: 1; }

.hero--film .detail-eyebrow,
.hero--film .detail-title__zeile,
.hero--film .detail-lead,
.hero--film .hero__aktionen {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s ease, transform 1s var(--ease);
}
.hero--film.is-offen .detail-eyebrow { transition-delay: .7s; }
.hero--film.is-offen .detail-title__zeile:nth-child(1) { transition-delay: .85s; }
.hero--film.is-offen .detail-title__zeile:nth-child(2) { transition-delay: 1s; }
.hero--film.is-offen .detail-lead { transition-delay: 1.25s; }
.hero--film.is-offen .hero__aktionen { transition-delay: 1.4s; }
.hero--film.is-offen :is(.detail-eyebrow, .detail-title__zeile, .detail-lead, .hero__aktionen) { opacity: 1; transform: none; }

.hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.hero__aktionen .btn svg { fill: currentColor; stroke: none; }
/* Kleine Quellenangabe unten rechts: der Hintergrund ist ein Ausschnitt, der ganze Film liegt auf YouTube */
.hero__quelle {
  position: absolute; z-index: 1; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--radius-pill);
  font-size: var(--fs-min); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--on-holz-soft); background: rgba(13, 10, 8, 0.3); border: 1px solid transparent;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .8s ease 1.6s, color var(--dur), border-color var(--dur), background-color var(--dur);
}
.hero--film.is-offen .hero__quelle { opacity: 1; }
.hero__quelle:hover { color: var(--on-holz); border-color: rgba(247, 241, 232, 0.28); background: rgba(13, 10, 8, 0.5); }
.hero__quelle:focus-visible { outline: 2px solid var(--on-holz); outline-offset: 3px; }
.hero__yt { display: inline-flex; align-items: center; gap: 3px; padding-left: 6px; border-left: 1px solid rgba(247, 241, 232, 0.22); color: var(--on-holz); }
.hero__yt svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero__zeit { font-variant-numeric: tabular-nums; color: var(--on-holz); }
.hero__rec { width: 5px; height: 5px; border-radius: 50%; background: var(--on-holz); animation: md-rec 1.6s ease-in-out infinite; }
.hero__link { color: inherit; text-decoration: underline; text-decoration-color: rgba(247, 241, 232, 0.45); text-underline-offset: 3px; transition: text-decoration-color var(--dur); }
.hero__link:hover { text-decoration-color: currentColor; }
.hero__link:focus-visible { outline: 2px solid var(--on-holz); outline-offset: 2px; border-radius: 2px; }
@keyframes md-rec { 50% { opacity: .25; } }
@media (max-width: 760px) {
  /* Handy: Video oben auf rund 40 % der Höhe, Text darunter auf dunklem Grund (Levin 15.10.) */
  /* Hell gedreht: das Video läuft lang ins Papier aus, Text dunkel darunter (Levin 15.10.) */
  .hero--film { --md-vid: calc(46svh + 65px); display: block; min-height: 0; padding-top: 0; background: var(--holz-grund); color: var(--text); }
  .hero--film .hero__video { position: relative; inset: auto; display: block; height: var(--md-vid); z-index: -2; }
  .hero--film::after {
    bottom: auto; height: calc(var(--md-vid) + 2px);
    background:
      linear-gradient(to bottom, rgba(13, 10, 8, 0.45) 0%, transparent 22%, transparent 42%, rgba(243, 237, 228, 0.55) 70%, var(--holz-grund) 100%);
  }
  .hero--film :is(.detail-eyebrow, .detail-title, .detail-lead) { text-shadow: none; }
  .hero--film .detail-eyebrow { color: var(--holz-akzent); }
  .hero--film .detail-title { color: var(--text); }
  .hero--film .detail-lead { color: var(--text-soft); }
  .hero--film .hero__link { text-decoration-color: rgba(67, 52, 44, 0.4); }
  .hero--film .hero__link:focus-visible { outline-color: var(--text); }
  .hero--film .btn--accent { background: var(--accent); color: var(--on-ink); border-color: var(--accent); box-shadow: var(--shadow-btn); }
  .hero--film .btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .hero--film .hero__quelle { color: var(--text-dim); background: rgba(243, 237, 228, 0.72); }
  .hero--film .hero__quelle:hover { color: var(--text); border-color: var(--holz-linie-2); background: rgba(243, 237, 228, 0.9); }
  .hero--film .hero__yt { color: var(--text); border-left-color: var(--holz-linie-2); }
  .hero--film .hero__zeit { color: var(--text); }
  .hero--film .hero__rec { background: var(--text); }
  .hero__balken { display: none; }   /* Handy: keine Leinwand, Video läuft direkt */
  .hero--film .hero__inner { padding-block: 0 44px; margin-top: -18px; }
  .hero--film .detail-title { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .hero--film .detail-lead { font-size: 1rem; }
  .hero__aktionen { margin-top: 20px; }
  .hero__quelle { top: calc(var(--md-vid) - 64px); bottom: auto; right: 8px; font-size: var(--fs-min); }
}

/* ---------- CTA mit dem Projekt-Titelbild als Hintergrund ---------- */
.cta-panel--bild { isolation: isolate; }
.cta-panel--bild .cta-panel__bild {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  filter: blur(3px); transform: scale(1.04);   /* leicht weich, damit der Text vorne steht */
}
.detail-cta .cta-panel--bild::before {
  z-index: 1; opacity: 1;
  background:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    linear-gradient(to top, rgba(20, 16, 14, 0.85) 0%, rgba(20, 16, 14, 0.62) 55%, rgba(20, 16, 14, 0.45) 100%);
}
.cta-panel--bild > :not(.cta-panel__bild) { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .hero__balken { display: none; }
  .hero--film :is(.detail-eyebrow, .detail-title__zeile, .detail-lead, .hero__aktionen, .hero__quelle) { opacity: 1; transform: none; transition: none; }
  .hero__rec { animation: none; }
}