/* ============================================================
   SEFODO Landing html_v5 "Weglassen"
   Markenwelt wie html_v2/html_v4 (Paper/Terrakotta, Instrument
   Serif + Hanken Grotesk). Aufbau: Vollbild-Szenen mit einem
   kleinen Motiv in einer Ecke, der Text steht in der leeren
   Bildhälfte. Je Fotografen-Gruppe eine Szene (aus html_v4).
   Bewegung nur über opacity/transform, kein Scroll-Listener,
   alles statisch unter prefers-reduced-motion.
   ============================================================ */

/* ---------- Tokens ---------- */

:root {
  --bg:        #F7F2EA;
  --border:    #E3DACB;
  --text:      #221C16;   /* 15:1 auf --bg */
  --text-2:    #4A4238;   /* 8.6:1 auf --bg */
  --text-3:    #6B6153;   /* zurückgetretene Zeilen, 5.4:1, groß gesetzt */
  --accent:    #B35A34;   /* Flächen, weiße Schrift darauf 4.8:1 */
  --accent-ink:#9B4D2B;   /* Akzent als Schrift auf Paper 5.5:1 */
  --ink:       #1F1A15;
  --paper-on-ink:   #F7F2EA;
  --paper-on-ink-2: #E3DACB;
  --paper-on-ink-3: #BDB2A0;

  --r: 2px;               /* ein Radius für alles, fast scharf wie ein Abzug */

  --f-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-sm:   0.9rem;
  --fs-base: 1.0625rem;
  --fs-lg:   clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-xl:   clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  --fs-2xl:  clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
  --fs-hero: clamp(2.4rem, 1.3rem + 3vw, 3.7rem);

  --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem; --s-9: 6rem;
  --section-y: clamp(6rem, 14vw, 12rem);

  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --nav-h: 68px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --slow: 1.1s;
  --dwell: 150dvh;        /* Verweilstrecke: so weit scrollt man, bis das nächste Blatt kommt */
}

/* ---------- Reset & Basis ---------- */

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

html { scroll-behavior: smooth; }

body {
  position: relative;        /* Bezug für den überlagernden Footer */
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

::selection { background: rgba(179, 90, 52, 0.25); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r); }

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

.skip-link {
  position: absolute; top: -100px; left: var(--s-4); z-index: 100;
  padding: var(--s-2) var(--s-4); background: var(--accent); color: #fff;
  border-radius: var(--r); text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

em { font-style: italic; }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.01em; }

.section-title {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  max-width: 22ch;
  margin-bottom: var(--s-8);
}

.text-link {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.25s var(--ease-out);
}
.text-link:hover { color: var(--text); }

/* ---------- Buttons ---------- */

/* Ruhig wie der Rest der Seite: scharfe Kante, kein Glanz. Der Hover ist ein
   Tintenschleier, der von links über die Fläche zieht; der große Call-to-Action
   trägt einen Serif-Pfeil, der beim Hover ein Stück weiterrückt. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem;
  min-height: 46px;
  padding: 0.75rem 1.5rem;
  font: 500 var(--fs-base)/1.2 var(--f-body);
  letter-spacing: 0.012em;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.35s var(--ease-out), color 0.3s, border-color 0.3s,
              background-color 0.3s, box-shadow 0.35s var(--ease-out);
}
.btn::before {                       /* Tintenschleier (Hover-Füllung) */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-ink, var(--accent-ink));
  transform: translateX(-101%);
  transition: transform 0.55s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.12s; }
.btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

.btn-primary {
  --btn-ink: var(--accent-ink);
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 0 rgba(31, 26, 21, 0.06), 0 10px 26px -16px rgba(155, 77, 43, 0.65);
}
.btn-primary:hover {
  box-shadow: 0 2px 0 rgba(31, 26, 21, 0.05), 0 20px 36px -18px rgba(155, 77, 43, 0.75);
}

.btn-ghost {
  --btn-ink: var(--text);
  background: transparent; color: var(--text); border-color: var(--text-3);
}
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--bg); border-color: var(--text); }
.scene-dark .btn-ghost { --btn-ink: var(--paper-on-ink); color: var(--paper-on-ink); border-color: var(--paper-on-ink-3); }
.scene-dark .btn-ghost:hover, .scene-dark .btn-ghost:focus-visible { color: var(--ink); border-color: var(--paper-on-ink); }

.btn-lg { min-height: 54px; padding: 1rem 2.1rem; font-size: 1.1rem; }
.btn-lg.btn-primary { padding-right: 1.6rem; }
.btn-lg.btn-primary::after {         /* Serif-Pfeil, rückt beim Hover weiter */
  content: "\2192"; font-family: var(--f-display); font-size: 1.35em; line-height: 0;
  transform: translateX(0); transition: transform 0.45s var(--ease-out);
}
.btn-lg.btn-primary:hover::after, .btn-lg.btn-primary:focus-visible::after { transform: translateX(5px); }

.btn-nav { padding: 0.5rem 1.05rem; min-height: 40px; font-size: 0.95rem; }

/* Dezenter Zweit-Button („Alle Funktionen"): kleiner, hairline-Rahmen, Serif-Pfeil;
   beim Hover zieht wie überall der Tintenschleier durch. */
.btn-quiet {
  min-height: 40px; padding: 0.55rem 1.1rem 0.55rem 1.2rem;
  font-size: var(--fs-sm); letter-spacing: 0.02em; gap: 0.55rem;
  border-color: var(--border); color: var(--text-2);
}
.btn-quiet::after {
  content: "\2192"; font-family: var(--f-display); font-size: 1.3em; line-height: 0;
  transition: transform 0.45s var(--ease-out);
}
.btn-quiet:hover::after, .btn-quiet:focus-visible::after { transform: translateX(4px); }
.btn-quiet:hover, .btn-quiet:focus-visible { border-color: var(--text); color: var(--bg); }
.scene-copy > .btn-quiet { margin-top: var(--s-3); }  /* allein stehend (Demo-Galerie, Alle Funktionen) */

/* ---------- Header: über dem Hero transparent, danach Papier ---------- */

#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
.site-header.is-scrolled, .site-header.menu-open {
  background: rgba(247, 242, 234, 0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}

.nav {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); }
.brand-logo { display: block; height: 32px; width: auto; }
.brand-text { font: 400 1.35rem var(--f-display); letter-spacing: 0.04em; }

.nav-links { display: flex; gap: var(--s-6); }
.nav-link {
  color: var(--text-2); text-decoration: none; font-size: 0.98rem;
  padding: 0.4rem 0; border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.nav-link:hover { color: var(--text); border-bottom-color: var(--text); }
.nav-link-login { display: none; }
.nav-actions { display: flex; align-items: center; gap: var(--s-5); }

.nav-burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
}
.nav-burger-box { position: relative; width: 22px; height: 14px; display: block; }
.nav-burger-line, .nav-burger-box::before, .nav-burger-box::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--text);
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.nav-burger-box::before { top: 0; }
.nav-burger-line { top: 50%; transform: translateY(-50%); }
.nav-burger-box::after { bottom: 0; }
.menu-open .nav-burger-box::before { transform: translateY(6.25px) rotate(45deg); }
.menu-open .nav-burger-line { opacity: 0; }
.menu-open .nav-burger-box::after { transform: translateY(-6.25px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: var(--s-4) var(--gutter) var(--s-5);
    display: none;
  }
  .menu-open .nav-links { display: flex; }
  .nav-links li { border-top: 1px solid var(--border); }
  .nav-link { display: block; padding: 0.9rem 0; font-size: 1.05rem; border-bottom: 0; }
  .nav-link-login { display: block; }
  .nav-login { display: none; }
  .nav-burger { display: inline-flex; }
  .btn-nav { display: none; }
}

/* ---------- Reveal (IntersectionObserver setzt .is-visible) ---------- */

.reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Szenen (Vollbild, Motiv in einer Ecke, Text in der Leere) ---------- */

.scene {
  position: sticky; top: 0;          /* Vorhang: die Szene bleibt stehen, der nächste Abschnitt schiebt sich darüber */
  min-height: 100dvh;
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding-block: calc(var(--nav-h) + var(--s-6)) var(--s-8);
  background: var(--bg);              /* deckend, auch bevor das Bild eingeblendet ist */
  box-shadow: 0 -30px 70px rgba(31, 26, 21, 0.3);    /* weiche Kante des Blatts, statisch */
}
.scene-dark { background: var(--ink); }

/* Verweilen: Nach dem Einblenden bleibt die Szene für --dwell Scrollweg stehen,
   bevor das nächste Blatt von unten kommt. Der Abstand liegt hinter der klebenden
   Szene und ist deshalb nie als Lücke sichtbar. */
.dwell { height: var(--dwell); }   /* ein Platzhalter nach jeder Szene; beobachtbar per IntersectionObserver */
main { display: flow-root; }
/* Verdeckte Blätter nicht mehr zeichnen: sobald das nächste Blatt vollständig liegt
   (sein Platzhalter-Vorgänger ist nach oben aus dem Viewport), wird die Szene darunter
   unsichtbar. So liegen nie mehr als zwei bildschirmfüllende Ebenen übereinander,
   sonst bauen sich bis zum neunten Blatt Rendering-Fehler auf (Safari: fehlende Kacheln). */
.scene.is-covered { visibility: hidden; }
/* Abschluss: letztes Blatt mit derselben Verweilstrecke (.dwell) wie alle anderen;
   der Klebebereich endet am Inhaltsrand von main, deshalb Platzhalter statt Abstand.
   Am Ende der Strecke blendet der Footer darauf ein. */
/* Papier-Abschnitte müssen positioniert sein, damit sie in DOM-Reihenfolge über
   den klebenden Szenen liegen; sie scrollen normal darüber hinweg. */


/* Fotostapel: Jedes Blatt (Szene oder Papier-Abschnitt) kommt wie ein Abzug von unten,
   leicht gedreht und etwas kleiner, und legt sich gerade auf den Stapel. Die Bewegung
   ist an den Scroll-Fortschritt gebunden (CSS Scroll-Driven Animations, kein JS);
   Browser ohne Unterstützung bekommen den flachen Vorhang. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section:not(.scene-hero) {
      transform-origin: 50% 110%;
      animation: sheet-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100vh;
    }
    /* abwechselnd nach links und rechts gekippt, wie von Hand abgelegt */
    main > section:nth-child(even):not(.scene-hero) { animation-name: sheet-in-alt; }
  }
}
/* Nur transform animieren: ein animierter box-shadow würde das ganze Blatt bei jedem
   Scrollschritt neu rastern. Der Schatten ist statisch (siehe .scene). */
@keyframes sheet-in {
  from { transform: translateY(5vh) rotate(-2.4deg) scale(0.93); }
  to   { transform: none; }
}
@keyframes sheet-in-alt {
  from { transform: translateY(5vh) rotate(2.4deg) scale(0.93); }
  to   { transform: none; }
}
.scene picture { display: contents; }   /* <picture> ist nur Umschalter, das img bleibt absolut im Blatt */
.scene-img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(1.04);
  transition: transform 9s var(--ease-out);
  will-change: transform;   /* eigene GPU-Ebene: Bitmap bleibt vorgehalten, kein Nachdekodieren beim Hereinkommen */
  /* keine Einblendung: das Blatt kommt mit seinem Bild an, sonst wirkt es wie halb geladen */
}
.scene.is-visible .scene-img { transform: scale(1); }

/* ein kaum sichtbarer Schleier hinter dem Text, falls das Motiv doch hineinragt */
.scene-text-left::before, .scene-text-right::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;   /* über dem Bild (-1), unter dem Text */
}
.scene-text-left::before  { background: linear-gradient(90deg, rgba(247,242,234,0.78) 0%, rgba(247,242,234,0.45) 40%, rgba(247,242,234,0) 62%); }
.scene-text-right::before { background: linear-gradient(270deg, rgba(247,242,234,0.78) 0%, rgba(247,242,234,0.45) 40%, rgba(247,242,234,0) 62%); }
.scene-dark.scene-text-left::before  { background: linear-gradient(90deg, rgba(31,26,21,0.85) 0%, rgba(31,26,21,0.5) 40%, rgba(31,26,21,0) 65%); }
.scene-dark.scene-text-right::before { background: linear-gradient(270deg, rgba(31,26,21,0.85) 0%, rgba(31,26,21,0.5) 40%, rgba(31,26,21,0) 65%); }

.scene-grid { position: relative; z-index: 1; }
.scene-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s-5);
}
.scene-text-left  .scene-copy { grid-column: 1 / span 5; }
.scene-text-right .scene-copy { grid-column: 8 / span 5; }
.scene-hero .scene-copy { grid-column: 1 / span 7; max-width: 48ch; }

.scene-copy { max-width: 40ch; }
.scene-copy > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
}
.scene.is-visible .scene-copy > * { opacity: 1; transform: none; }
.scene.is-visible .scene-copy > :nth-child(1) { transition-delay: 0.1s; }
.scene.is-visible .scene-copy > :nth-child(2) { transition-delay: 0.25s; }
.scene.is-visible .scene-copy > :nth-child(3) { transition-delay: 0.4s; }
.scene.is-visible .scene-copy > :nth-child(4) { transition-delay: 0.5s; }
.scene.is-visible .scene-copy > :nth-child(5) { transition-delay: 1.3s; }
.scene.is-visible .scene-copy > :nth-child(6) { transition-delay: 1.4s; }
.scene.is-visible .scene-copy > :nth-child(7) { transition-delay: 2.1s; }

.hero-title {
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  line-height: 1.04;
  max-width: 22ch;
  margin-bottom: var(--s-6);
}
.hero-sub { font-size: var(--fs-lg); color: var(--text-2); max-width: 34ch; margin-bottom: var(--s-7); }
.hero-actions { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }

.scene-title {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  margin-bottom: var(--s-4);
}
.scene-moment { font-size: var(--fs-lg); color: var(--text-2); margin-bottom: var(--s-6); }
.scene-label {
  font-size: var(--fs-sm); color: var(--text-2); letter-spacing: 0.02em;
  margin-bottom: var(--s-2);
}
.scene-today, .scene-after { margin-bottom: var(--s-6); }
.scene-today li, .scene-after li {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  line-height: 1.35;
  opacity: 0; transform: translateY(8px);
  transition:
    opacity 0.9s var(--ease-out) calc(0.5s + var(--i) * 180ms),
    transform 0.9s var(--ease-out) calc(0.5s + var(--i) * 180ms),
    color 1.4s ease 1.6s;                /* „Heute" tritt zurück, wenn „Mit SEFODO" kommt */
}
.scene-after li { transition-delay: calc(1.4s + var(--i) * 180ms), calc(1.4s + var(--i) * 180ms), 0s; }
.scene.is-visible .scene-today li { opacity: 1; transform: none; color: var(--text-3); }
.scene.is-visible .scene-after li { opacity: 1; transform: none; }
.scene-plan { color: var(--text-2); }
/* Satz + dezenter Button in einer Zeile, umbrechend auf dem Handy */
.scene-plan, .plans-foot, .closer-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
}
.scene-plan .btn-quiet, .plans-foot .btn-quiet, .closer-note .btn-quiet { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .btn-quiet::after { transition: none; } }

/* dunkle Szenen */
.scene-dark { color: var(--paper-on-ink); }
.scene-dark .hero-sub, .scene-dark .scene-moment, .scene-dark .scene-label, .scene-dark .scene-plan { color: var(--paper-on-ink-2); }
.scene-dark.is-visible .scene-today li { color: var(--paper-on-ink-3); }
.scene-dark .text-link { color: var(--paper-on-ink); }
.scene-dark .text-link:hover { color: #fff; }

.room-title {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  margin-bottom: var(--s-5);
}
.room-title em { color: #fff; }

.closer-title {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  margin-bottom: var(--s-7);
}
.closer-title em { color: var(--accent-ink); }
.closer-note { margin-top: var(--s-5); color: var(--text-2); font-size: var(--fs-sm); }

@media (max-width: 1023px) {
  .scene-text-left  .scene-copy { grid-column: 1 / span 7; }
  .scene-chooser .scene-copy { grid-column: 1 / span 7; }
  .scene-text-right .scene-copy { grid-column: 6 / span 7; }
}
@media (max-width: 767px) {
  /* Handy: Text oben, das Motiv steht unten im Bild (per --pos-m). Die Szene bleibt
     ein Viewport hoch, sonst würde sticky den unteren Teil verdecken. */
  .scene { align-items: flex-start; padding-block: calc(var(--nav-h) + var(--s-5)) var(--s-7); }
  :root { --dwell: 110dvh; }
  .scene-grid { display: block; }
  .scene-copy { max-width: 100%; }
  /* auf dem Handy steht der Text oben, das Motiv bleibt unten im Bild */

  /* Handy: eigene Hochformat-Motive (img/m/*, Motiv im unteren Viertel), deshalb
     immer unten verankert und nur ein leichter Schleier oben für den Text */
  /* Bild bildschirmfüllend, unten verankert (Motiv im unteren Viertel) */
  .scene-img { object-position: 50% 100%; }
  /* Abschluss: Bild um die Footer-Höhe verkürzt (Variable aus app.js), der Steg bleibt
     über dem Footer; darunter Papier, das der Footer beim Einblenden exakt füllt */
  .scene-closer .scene-img { height: calc(100% - var(--footer-h, 0px)); }
  /* Halbtransparente Zwischenschicht über das ganze Blatt: gleichmäßiges Papier
     (dunkle Szenen: Tusche) zwischen Bild und Text, ohne Verlauf, ohne Weichzeichner */
  .scene-text-left::before, .scene-text-right::before { background: rgba(247, 242, 234, 0.5); }
  .scene-dark.scene-text-left::before, .scene-dark.scene-text-right::before { background: rgba(31, 26, 21, 0.45); }
  /* Listen-Szenen: Text füllt den ganzen Viewport, deshalb gleichmäßiger Schleier */

}

/* ---------- Was ist SEFODO? (Vollbild-Szene mit Begriffsliste) ---------- */

/* „Was ist SEFODO?" und „Wer bist du?" verhalten sich exakt wie die Gruppen-Szenen
   (kleben, verweilen, Fotostapel). Ihr Inhalt ist höher, deshalb werden sie bei
   geringer Viewport-Höhe kompakter gesetzt (max-height-Regel unten). Kein innerer
   Scrollbereich: der würde als Vollbild-Element jedes Scrollen schlucken. */
.about-list { margin-bottom: var(--s-6); }
.about-list > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  column-gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-2) 0;
  border-top: 1px solid rgba(34, 28, 22, 0.22);
  opacity: 0; transform: translateY(8px);
  transition:
    opacity 0.9s var(--ease-out) calc(0.6s + var(--i) * 140ms),
    transform 0.9s var(--ease-out) calc(0.6s + var(--i) * 140ms);
}
.scene.is-visible .about-list > div { opacity: 1; transform: none; }
.about-list dt { font-family: var(--f-display); font-size: var(--fs-lg); line-height: 1.2; }
.about-list dd { color: var(--text-2); font-size: 0.95rem; }

@media (max-width: 767px) {
}
@media (max-width: 479px) {
  .about-list > div { grid-template-columns: 1fr; row-gap: 2px; }
}

/* ---------- Wer bist du? (Vollbild-Szene mit fünf Zeilen) ---------- */

.scene-chooser .scene-copy { grid-column: 1 / span 5; max-width: none; }
.scene-chooser .section-title { margin-bottom: var(--s-6); }
.choose-list { max-width: 760px; }
.choose-list li { border-top: 1px solid rgba(34, 28, 22, 0.22); }
.choose-list li:last-child { border-bottom: 1px solid rgba(34, 28, 22, 0.22); }
.choose {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--s-1, 0.25rem);
  padding: var(--s-4) 0;
  text-decoration: none; color: var(--text);
  transition: transform 0.5s var(--ease-out);
}
.choose:hover { transform: translateX(10px); }
.choose-role { font-family: var(--f-display); font-size: var(--fs-xl); line-height: 1.15; transition: color 0.3s; }
.choose:hover .choose-role { color: var(--accent-ink); }
.choose-pain { color: var(--text-2); }


/* Geringe Höhe (Laptop mit Browserleisten, kleine Handys): die beiden Listen-Szenen
   kompakter, damit sie in einen Viewport passen und der Stapel nichts verdeckt. */
@media (max-height: 780px), (max-width: 767px) and (max-height: 920px) {
  .scene-about, .scene-chooser { padding-top: calc(var(--nav-h) + var(--s-3)); }
  .scene-about .scene-title, .scene-chooser .section-title { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
  .scene-about .scene-moment { font-size: 1rem; margin-bottom: var(--s-4); }
  .about-list > div { padding: 0.35rem 0; }
  .about-list dt { font-size: 1.05rem; }
  .about-list dd, .choose-pain { font-size: 0.9rem; line-height: 1.4; }
  .choose { padding: 0.55rem 0; }
  .choose-role { font-size: 1.35rem; }
}

/* Kleine Handys (unter 720 px Höhe): Gruppen-Szenen kompakter, damit der Text über dem
   Motiv endet (das Motiv sitzt im unteren Viertel des Bilds, Bild = untere Hälfte). */
@media (max-width: 767px) and (max-height: 720px) {
  .scene-title { font-size: 1.5rem; margin-bottom: var(--s-2); }
  .scene-moment { font-size: 0.95rem; margin-bottom: var(--s-4); }
  .scene-label { font-size: 0.8rem; margin-bottom: 0; }
  .scene-today, .scene-after { margin-bottom: var(--s-4); }
  .scene-today li, .scene-after li { font-size: 1rem; line-height: 1.3; }
  .scene-plan { font-size: 0.95rem; }
  .room-title, .closer-title { font-size: 1.6rem; }
  /* „Was ist SEFODO?" ist die längste Szene: Listenzeilen enger */
  .scene-about .scene-moment { font-size: 0.9rem; line-height: 1.45; }
  .about-list > div { padding: 0.2rem 0; }
  .about-list dt { font-size: 1rem; }
  .about-list dd { font-size: 0.8rem; line-height: 1.3; }
}

/* ---------- Preise (eine Zeile, keine Karten) ---------- */

.scene-plans .container { width: min(100% - 2 * var(--gutter), var(--container)); }   /* Papier-Szene: klebt, verweilt, Fotostapel wie alle anderen */
.plan-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--s-6);
  border-top: 1px solid var(--border);
  padding-top: var(--s-6);
}
.plan dt { font-size: var(--fs-sm); color: var(--text-2); letter-spacing: 0.02em; margin-bottom: var(--s-3); }
.plan-price {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-4);
}
.plan-price span { font-size: 0.4em; color: var(--text-2); font-family: var(--f-body); }
.plan-note { color: var(--text-2); font-size: 0.95rem; max-width: 24ch; }
.plan-featured dt, .plan-featured .plan-price { color: var(--accent-ink); }
.plans-foot { margin-top: var(--s-8); color: var(--text-2); }

@media (max-width: 1023px) { .plan-row { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-7); } }
/* Handy: bleibt zweispaltig und kompakt, damit die Szene in einen Viewport passt
   (sie klebt wie alle anderen; was darüber hinausragt, bliebe hinter dem Stapel) */
@media (max-width: 767px) {
  .scene-plans .section-title { font-size: var(--fs-xl); margin-bottom: var(--s-5); }
  .plan-row { row-gap: var(--s-5); padding-top: var(--s-5); column-gap: var(--s-5); }
  .plan dt { margin-bottom: var(--s-2); }
  .plan-price { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
  .plan-note { font-size: 0.85rem; line-height: 1.4; }
  .plans-foot { margin-top: var(--s-5); font-size: var(--fs-sm); }
}

/* ---------- Footer ---------- */

.site-footer {
  /* liegt am Dokumentende über dem unteren Rand der Abschlussszene und blendet ein */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding-block: var(--s-3);
  font-size: 0.82rem;
  color: var(--text-2);
  background: var(--bg);
  border-top: 1px solid var(--border);   /* harte Oberkante, kein Verlauf */
}
.site-footer.reveal { transform: none; transition-duration: 1.6s; transition-delay: 0.5s; }   /* nur Opazität: eine Verschiebung würde das Dokument verlängern und das letzte Blatt am Ende hochrutschen lassen */
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;   /* Marke, Links, KI-Zeile, Copyright in einer Zeile */
  column-gap: var(--s-5);
  row-gap: var(--s-1, 0.25rem);
  align-items: center;
}
.footer-brand { font: 400 1rem var(--f-display); letter-spacing: 0.04em; color: var(--text); }
.footer-logo { display: block; height: 26px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-1, 0.25rem) var(--s-4); }
.footer-links a, .footer-ai a { color: var(--text-2); text-decoration: none; }
.footer-links a:hover, .footer-ai a:hover { color: var(--text); }
.footer-ai { font-size: 5px; line-height: 1.4; }

@media (max-width: 767px) { .footer-inner { grid-template-columns: 1fr; } .footer-ai { order: 10; } }

/* ---------- Cookie-Bar (Text unverändert aus html_v2) ---------- */

/* Schwebende Karte unten in der Mitte (wie html_v2), statt eines Balkens ueber
   die volle Breite, der auf jeder Vollbild-Szene den unteren Rand verdeckte.
   z-index ueber Header (sticky) und Szenen-Stapel. */
.consent-note {
  display: none; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 300;
  max-width: 720px; margin-inline: auto;
  padding: 1rem 1.2rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(31, 26, 21, 0.04), 0 18px 40px -18px rgba(31, 26, 21, 0.35);
}
.consent-note.show { display: block; }
.consent-note-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; }
.consent-note-text { flex: 1 1 320px; margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-2); }
.consent-note-text strong { color: var(--text); }
.consent-note-text a { color: var(--accent-ink); }
.consent-note-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.consent-note-actions .btn { font-size: 0.875rem; padding: 0.5rem 1rem; min-height: 40px; }
@media (max-width: 480px) {
  .consent-note { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
  .consent-note-actions { width: 100%; }
  .consent-note-actions .btn { flex: 1; }
}

/* ---------- KI-Kennzeichnung (Art. 50 AI Act), Badge per app.js ---------- */

.ai-badge {
  position: absolute; right: 12px; bottom: 12px; z-index: 1;
  font: 500 0.68rem var(--f-body); letter-spacing: 0.02em;
  padding: 0.2rem 0.45rem; border-radius: var(--r);
  background: rgba(31, 26, 21, 0.55); color: #fff;
  pointer-events: none;
}

/* ---------- Reduced Motion: alles sofort da ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .scene-img, .scene-copy > *, .scene-today li, .scene-after li {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .scene-today li { color: var(--text-3); }
  .scene-dark .scene-today li { color: var(--paper-on-ink-3); }
  .btn:hover, .btn:active, .choose:hover { transform: none; }
  .btn::before, .btn-lg.btn-primary::after { transition: none !important; }
}