/* Yagi Asian Fusion, Coming Soon (site-v3: Design 2 mit Adresse, Flug durch zwei Mondfenster, Logo im Schild-Look)
   Aufbau:
   1. Schriften und Grundwerte
   2. Raum (Hintergrundbild, vorab in Python verwischt, nie per CSS-Filter)
   3. Startseite: Rahmen, Logo, Zeile, Adresse, Links, Stempel, Fuß
   4. Rechtsseiten
   5. Bewegung (nur mit JavaScript und nur ohne "Bewegung reduzieren").
      Der Teil zwischen den Marken ">>> FLUG" und "<<< FLUG" wird von tools/build_flug.py geschrieben.
   Ohne JavaScript oder mit reduzierter Bewegung gilt alles bis Punkt 4:
   die Seite steht sofort vollständig da. */

/* ---------- 1. Schriften und Grundwerte ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2?v=ba5f9398") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic.woff2?v=b7acbeef") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2?v=7e43eb9b") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  --ink: #0d0907;                          /* Grund, fast schwarzes Walnuss */
  --cream: #f4ecdd;                        /* Text */
  --cream-2: rgba(244, 236, 221, 0.8);
  --cream-3: rgba(244, 236, 221, 0.62);
  --neon: #ff4130;                         /* Rot des Leuchtschilds: Rand des Logos, Unterzeile, feine Linien */
  --neon-hi: #ffb4a6;
  --neon-line: rgba(255, 78, 60, 0.5);
  --face: #0a0606;                         /* schwarze Flächen des Logos */
  --red: #cf3a2c;                          /* Stempel */
  --serif: "Cormorant Garamond", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --edge: clamp(10px, 1.8vw, 22px);        /* Abstand des Rahmens zum Rand */
  --notch: clamp(9px, 1.2vw, 14px);        /* eingezogene Ecke */
  --pad: clamp(22px, 5vw, 64px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--neon-hi); outline-offset: 4px; border-radius: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 2. Raum ---------- */
.room { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--ink); pointer-events: none; }
.room__par { position: absolute; inset: -18px; }
.room__move { position: absolute; inset: 0; }
.room picture { position: absolute; inset: 0; display: block; }
/* Schichten nur für den Auftakt und das Glimmen danach: ohne JavaScript oder mit reduzierter Bewegung gibt es sie nicht */
.room__dim, .room__plate { display: none; }
.room picture img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  display: block;
}
/* Kirschblüten im Vordergrund: stark verwischt, wie durch die Kamera nah am Zweig */
.fore { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fly { position: absolute; inset: 0; }
.bloom { position: absolute; left: -7%; top: -9%; width: min(62vw, 540px); }
.bloom img { display: block; width: 100%; height: auto; opacity: 0.76; transform-origin: 6% 0; }
@media (max-height: 520px) and (min-aspect-ratio: 3/2) { .bloom { width: 34vw; } }

/* warmer Lichtschwall beim Durchflug durchs Mondfenster, sonst unsichtbar */
.room__flare { position: absolute; inset: 0; background: #ffcf96; opacity: 0; }
/* feines, stehendes Korn: nimmt dem Bild das Glatte und verhindert Streifen im Dunkeln */
.room__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.94 0 0 0 0 0.84 0 0 0 0.075 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.7;
}

/* ---------- 3. Startseite ---------- */
.page {
  position: relative; z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;                        /* der weiche Schatten hinter dem Logo darf die Seite nicht verbreitern */
}

/* Rahmen mit eingezogenen Ecken (japanische Etikettenform), haarfein im Rot des Schilds */
.frame { position: absolute; inset: var(--edge); pointer-events: none; }
.frame i { position: absolute; display: block; }
.frame__e { background: var(--neon-line); }
.frame__e--t, .frame__e--b { left: var(--notch); right: var(--notch); height: 1px; }
.frame__e--l, .frame__e--r { top: var(--notch); bottom: var(--notch); width: 1px; }
.frame__e--t { top: 0; } .frame__e--b { bottom: 0; }
.frame__e--l { left: 0; } .frame__e--r { right: 0; }
.frame__c { width: calc(var(--notch) + 1px); height: calc(var(--notch) + 1px); border: 0 solid var(--neon-line); }
.frame__c--tl { left: 0; top: 0; border-right-width: 1px; border-bottom-width: 1px; }
.frame__c--tr { right: 0; top: 0; border-left-width: 1px; border-bottom-width: 1px; }
.frame__c--bl { left: 0; bottom: 0; border-right-width: 1px; border-top-width: 1px; }
.frame__c--br { right: 0; bottom: 0; border-left-width: 1px; border-top-width: 1px; }

.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--edge) + clamp(14px, 4.2vh, 64px)) var(--pad) clamp(8px, 2.2vh, 40px);
  text-align: center;
}
.brand { position: relative; margin: 0; line-height: 0; }
/* weicher Schatten hinter Logo und Zeile: hält die Schrift lesbar, ohne den Raum zuzudecken */
.brand::before {
  content: ""; position: absolute; z-index: -1;
  left: -34%; right: -34%; top: -16%; bottom: -46%;
  background: radial-gradient(closest-side, rgba(10, 7, 5, 0.56), rgba(10, 7, 5, 0.40) 46%, rgba(10, 7, 5, 0.14) 78%, rgba(10, 7, 5, 0));
  pointer-events: none;
}
.brand__in { display: block; position: relative; }
/* Roter Lichthof hinter dem Logo: vorab gerechnete Bilder (tools/build_logo.py), sie ragen rundum 560 Logo-Einheiten
   über das Logo hinaus. Zwei Bilder gleicher Größe: logo-glow.webp für Zeichen und Schrift, logo-glow-sub.webp für die
   Unterzeile. So kann die Unterzeile später angehen als das Zeichen. */
.brand__glow, .brand__in::before {
  position: absolute; left: -10.52%; top: -10.28%; width: 121.03%; height: 120.55%; max-width: none;
  pointer-events: none;
}
.brand__in::before {
  content: "";
  background: url("../img/logo-glow-sub.webp?v=0b8f53c6") 50% 50% / 100% 100% no-repeat;
}
/* Schild-Look: schwarze Flächen mit leuchtendem Rand. "paint-order: stroke" legt die Fläche über die innere
   Hälfte der Linie, sichtbar bleibt nur der Rand außen. */
.lg-mark path, .lg-ink path {
  fill: var(--face);
  stroke: var(--neon); stroke-width: 34; stroke-linejoin: round; paint-order: stroke;
}
/* kleines Logo (schmales oder niedriges Fenster): Rand kräftiger, sonst wird er dünner als ein halber Bildpunkt */
@media (max-width: 560px), (max-height: 700px) { .lg-mark path, .lg-ink path { stroke-width: 46; } }
/* Unterzeile und ihre zwei Linien im selben Stil wie das Zeichen: schwarze Buchstaben mit rotem Leuchtrand.
   Orri hat das am 10.11. aus vier Fassungen gewählt ("B, wie das Logo"). Kräftige Schrift (Manrope 700), sonst
   bliebe zwischen den Rändern kein Schwarz. */
.lg-sub > * { fill: var(--face); stroke: var(--neon); stroke-width: 30; stroke-linejoin: round; paint-order: stroke; }
@media (max-width: 560px), (max-height: 700px) { .lg-sub > * { stroke-width: 40; } }
/* Am Handy (hoch und quer) eine eigene, deutlich größere Unterzeile ohne die beiden Linien (Orri 10.11.: "auf dem
   Handy finde ich es noch zu klein"). Sie ist breiter als das Logo selbst. Beide Gruppen stehen im SVG,
   tools/build_logo.py baut sie. Dazu gehört jeweils ein eigenes Bild für den Lichthof. */
.lg-sub--phone { display: none; }
@media (max-width: 560px), (max-height: 520px) and (min-aspect-ratio: 3/2) {
  .lg-sub--wide { display: none; }
  .lg-sub--phone { display: inline; }
  .brand__in::before { background-image: url("../img/logo-glow-sub-m.webp?v=f339ce17"); }
}
.logo {
  position: relative;
  display: block;
  width: min(66vw, 33vh, 500px);
  width: min(66vw, 33svh, 500px);
  min-width: 168px;
  height: auto;
  overflow: visible;
}
.lg-shine__ptr { opacity: 0; }

/* Gattungszeile unter dem Logo: sagt, was hier entsteht. Kursiv und klein geschrieben,
   damit sie sich von der Versalzeile darunter klar unterscheidet. */
.kind {
  margin: clamp(5px, 1.2vh, 14px) 0 0;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.15rem); line-height: 1.15; letter-spacing: 0.015em;
  color: var(--cream);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8);
}

/* Die eine Zeile. Einzige Versalzeile der Seite, Creme, mit Luft. */
.soon {
  margin: clamp(8px, 2vh, 30px) 0 0;
  padding-left: 0.36em;                    /* gleicht die Sperrung nach dem letzten Zeichen aus */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.02rem, 0.72rem + 1.7vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: 0.36em;
  color: var(--cream);
  white-space: nowrap;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
}
.soon span span { display: inline-block; }

/* Adresse: die zweite Hauptaussage. Nur Straße, Postleitzahl und Ort (Orri 10.11.), ohne Einleitungszeile. */
.place {
  position: relative;
  margin: clamp(10px, 2.3vh, 28px) 0 0;
  padding-top: clamp(9px, 2vh, 24px);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.5);
}
.place::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 60px; height: 1px; margin-left: -30px;
  background: var(--neon);
}
.place__addr { margin: 0; font-family: var(--serif); font-variant-numeric: lining-nums; color: var(--cream); }
.place__street {
  display: block;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.8rem); line-height: 1.1; letter-spacing: 0.005em;
}
.place__city {
  display: block; margin-top: 0.05em;
  font-weight: 500;
  font-size: clamp(1.18rem, 1.02rem + 0.75vw, 1.55rem); line-height: 1.25; letter-spacing: 0.01em;
}

.links {
  display: flex; align-items: center; justify-content: center;
  margin: clamp(2px, 1.2vh, 22px) 0 0; padding: 0; list-style: none;
}
.links li + li { margin-left: clamp(12px, 2.8vw, 28px); padding-left: clamp(12px, 2.8vw, 28px); position: relative; }
.links li + li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 18px; margin-top: -9px;
  background: var(--neon-line);
}
.links a {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 6px 2px;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.14rem, 1.02rem + 0.5vw, 1.42rem);
  letter-spacing: 0.01em;
  color: var(--cream);
  text-decoration: none;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8);
  transition: color 0.25s ease;
}
.links a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 8px; height: 1px;
  background: var(--neon);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.2, 1);
}
.links svg { width: 10px; height: 10px; flex: none; opacity: 0.8; }
@media (hover: hover) {
  .links a:hover { color: #fffaf0; }
  .links a:hover::after { transform: scaleX(0.3); transform-origin: right center; }
}

/* Stempel 準備中 (in Vorbereitung): dunkleres Rot als das Schild, damit er wie Stempelfarbe wirkt und nicht wie Licht.
   Nur in der breiten Ansicht, unten rechts über dem dunklen Boden, wie das Siegel auf einem Rollbild.
   Am Handy bleibt er weg (Orri 09.11.: unten war es mobil zu voll). */
.seal { display: none; margin: 0; }
.seal__in { display: block; transform: rotate(-5deg); transform-origin: 50% 50%; line-height: 0; }
.hanko { display: block; width: clamp(60px, 5vw, 76px); height: auto; }
.seal__cap {
  margin: 10px 0 0;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 0.95rem; line-height: 1.1; letter-spacing: 0.01em;
  color: var(--cream-3);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
@media (min-width: 760px) and (min-height: 521px) {
  .logo { width: min(70vw, 40vh, 480px); width: min(70vw, 40svh, 480px); }
  /* breites, niedriges Fenster (kleiner Laptop): Logo und Adresse kleiner, damit alles in eine Bildschirmhöhe passt */
  @media (max-height: 800px) {
    .logo { width: min(70vw, 33vh); width: min(70vw, 33svh); }
    .place__street { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.4rem); }
  }
  @media (max-height: 640px) {
    .logo { width: min(70vw, 28vh); width: min(70vw, 28svh); }
    .kind { font-size: 1.6rem; }
    .soon { font-size: 1.3rem; }
    .place__street { font-size: 1.9rem; }
    .place__city { font-size: 1.2rem; }
  }
  .seal {
    display: flex; flex-direction: column; align-items: flex-end;
    position: absolute;
    right: calc(var(--edge) + clamp(12px, 2vw, 24px) + 2px);
    bottom: calc(var(--edge) + 72px);
  }
}

.foot {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 28px;
  padding: 4px calc(var(--edge) + clamp(12px, 2vw, 24px)) calc(var(--edge) + clamp(6px, 1vw, 12px));
  font-size: 0.8125rem; letter-spacing: 0.02em;
  color: var(--cream-3);
}
.foot ul { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.foot p { margin: 0; }
.foot a {
  display: inline-block; padding: 11px 0;
  color: var(--cream-2); text-decoration: none;
  transition: color 0.2s ease;
}
.foot a[aria-current="page"] { color: var(--cream); }
.foot__credit a { text-decoration: underline; text-decoration-color: var(--neon-line); text-underline-offset: 4px; }
@media (hover: hover) { .foot a:hover { color: #fffaf0; } }
/* Handy: Fußzeile tritt zurück, kleiner und blasser */
@media (max-width: 560px) {
  .foot {
    justify-content: center; text-align: center; gap: 0 18px;
    padding-left: var(--pad); padding-right: var(--pad);
    font-size: 0.72rem; letter-spacing: 0.03em;
    color: rgba(244, 236, 221, 0.58);
  }
  .foot ul { justify-content: center; gap: 0 18px; }
  .foot a { padding: 8px 0; color: rgba(244, 236, 221, 0.68); }
  /* Am Handy steht kein Hinweis auf Orri Design (Orri 10.11.): unten bleiben nur Impressum und Datenschutz.
     Der Link steht weiter im HTML und ist auf größeren Bildschirmen sichtbar. */
  .foot__credit { display: none; }
}

/* Sehr breites, niedriges Fenster: Das Bild wird unten abgeschnitten, der dunkle Boden fehlt, und Stempel und
   Fußzeile lägen auf den hellen Regalen. Deshalb läuft das Bild dort nach unten ins Dunkle aus. */
@media (min-aspect-ratio: 17/10) and (min-height: 521px) {
  .room::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 7, 5, 0) 56%, rgba(10, 7, 5, 0.52) 82%, rgba(10, 7, 5, 0.82) 100%);
  }
}

/* Kleines, niedriges Fenster, das noch nicht als Handy quer zählt: Logo kleiner, damit nichts über den Rand läuft */
@media (min-width: 520px) and (max-height: 600px) {
  .logo { width: min(66vw, 25vh); width: min(66vw, 25svh); min-width: 120px; }
  .kind { font-size: 1.4rem; }
  .soon { margin-top: 6px; font-size: 1.1rem; }
  .place { margin-top: 9px; padding-top: 8px; }
  .place__street { font-size: 1.7rem; }
  .place__city { font-size: 1.12rem; }
}

/* Sehr schmale Handys: Fußzeile bleibt einzeilig */
@media (max-width: 350px) {
  .foot { gap: 0 11px; font-size: 0.68rem; letter-spacing: 0.01em; padding-left: 16px; padding-right: 16px; }
  .foot ul { gap: 0 11px; }
}

/* Querformat mit wenig Höhe (Handy quer): Logo links, Text rechts */
@media (max-height: 520px) and (min-aspect-ratio: 3/2) {
  .foot__credit { display: none; }                           /* auch quer am Handy kein Hinweis auf Orri Design */
  .room::after { content: ""; position: absolute; inset: 0; background: rgba(10, 7, 5, 0.34); }
  .hero {
    display: grid; grid-template-columns: auto auto;
    column-gap: clamp(28px, 7vw, 80px); justify-content: center; align-items: center; justify-items: center;
    padding-top: calc(var(--edge) + 14px); padding-bottom: 4px;
  }
  .foot { padding-top: 0; padding-bottom: calc(var(--edge) + 9px); }   /* Abstand zur Rahmenecke, sonst wirkt die Unterstreichung wie deren Fortsetzung */
  .foot a { padding: 4px 0; }
  .hero { grid-template-rows: 1fr auto auto auto auto 1fr; }
  .brand { grid-row: 1 / 7; }
  .logo { width: min(32vw, 56vh); width: min(32vw, 56svh); }
  .kind { grid-row: 2; grid-column: 2; margin: 0 0 3px; font-size: 1.32rem; }
  .soon { grid-row: 3; grid-column: 2; margin: 0; font-size: clamp(0.98rem, 2.3vw, 1.28rem); }
  .place { grid-row: 4; grid-column: 2; margin-top: 8px; padding-top: 7px; }
  .place__street { font-size: 1.55rem; }
  .place__city { font-size: 1.08rem; }
  .links { grid-row: 5; grid-column: 2; margin: 0; }
  .links a { min-height: 34px; padding: 3px 2px; font-size: 1.08rem; }
  .links a::after { bottom: 4px; }
  .foot { color: var(--cream-2); }                           /* hier liegt helles Bild dahinter, daher kräftiger */
  .foot a { color: var(--cream); }
}

/* ---------- 4. Rechtsseiten ---------- */
.legal-page .room::after {
  /* Rechtstexte brauchen Ruhe: der Raum tritt weit zurück */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 9, 7, 0.80), rgba(13, 9, 7, 0.93) 38%, rgba(13, 9, 7, 0.96));
}
.legal-page .page { display: block; }
.sheet {
  max-width: 720px; margin: 0 auto;
  padding: calc(var(--edge) + clamp(24px, 5vh, 52px)) var(--pad) clamp(36px, 7vh, 72px);
}
.sheet__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(30px, 6vh, 60px); }
.sheet__logo { display: block; line-height: 0; }
.sheet__logo img { display: block; width: clamp(84px, 14vw, 112px); height: auto; }
.back {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 6px 2px;
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.2rem;
  color: var(--cream); text-decoration: none;
}
.back svg { width: 15px; height: 15px; flex: none; color: var(--neon); transition: transform 0.3s var(--ease); }
@media (hover: hover) { .back:hover svg { transform: translateX(-4px); } }
.sheet h1 {
  margin: 0 0 8px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.3rem, 7.4vw, 3.9rem); line-height: 1; letter-spacing: -0.005em;
  color: var(--cream);
  overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto;
}
.sheet .meta { margin: 0 0 clamp(22px, 4vh, 38px); font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--cream-3); }
.sheet .meta::after { content: ""; display: block; width: 56px; height: 1px; margin-top: 22px; background: var(--neon-line); }
.sheet h2 {
  margin: 38px 0 8px;
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.2;
  color: var(--cream);
}
.sheet p { margin: 0 0 14px; color: var(--cream-2); font-size: 1rem; }
.sheet address { font-style: normal; }
.sheet p a, .sheet address a {
  color: var(--cream); text-decoration: underline; text-decoration-color: var(--neon);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  padding: 3px 0;                          /* Trefferfläche über 24 px, ohne die Zeilen zu verschieben */
}
@media (hover: hover) { .sheet p a:hover { color: #fffaf0; text-decoration-color: var(--neon-hi); } }
.legal-page .foot { max-width: 720px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); padding-bottom: calc(var(--edge) + 18px); }
.legal-page .foot::before { content: ""; flex-basis: 100%; height: 1px; margin-bottom: 8px; background: var(--neon-line); }

/* ---------- 5. Bewegung ---------- */
/* Die beiden Wände mit Mondfenster gibt es nur für den Auftakt. */
.gate { display: none; }

@media (prefers-reduced-motion: no-preference) {

  /* >>> FLUG (erzeugt von tools/build_flug.py, nicht von Hand ändern) */
  /* Zeitplan. Alle Zeiten ab dem Startsignal (Klasse is-ready). */
  .js {
    --t-light: 0.2s;       /* drinnen geht das erste Licht an */
    --t-logo: 0.9s;        /* das Zeichen beginnt sich zu zeichnen */
    --t-slats: 1.9s;       /* die Lamellen drehen sich auf */
    --t-fly: 2.4s;         /* die Kamera fliegt los: bis hier läuft je Schicht der Ablauf cam-...-a, danach cam-...-b */
    --d-fly: 3.9s;         /* Dauer des Flugs */
    --t-wall: 3.27s;       /* sie ist durch das erste Mondfenster */
    --t-screen: 3.77s;     /* und durch das zweite */
    --t-lamps: 3.99s;      /* die Papierschirme gehen nacheinander an */
    --t-focus: 5.05s;      /* das fertige Raumbild übernimmt (sieht gleich aus, danach wird aufgeräumt) */
    --t-rest: 5s;        /* Unterzeile, Zeilen, Adresse, Links */
    --t-end: 6.3s;         /* die Kamera steht */
    --t-wall-out: 3.12s; --d-wall-out: 0.09s;       /* Lamellenwand blendet aus, kurz bevor sie die Kamera erreicht */
    --t-screen-out: 3.51s; --d-screen-out: 0.13s;   /* Gitterwand ebenso */
  }

  /* Papierschirme an der Decke: Lage in Prozent der Bildplatte. --n = Reihenfolge beim Anschalten. */
  .lamp--1 { left: 0%; top: 0%; width: 16.375%; height: 12.7%; background-image: url("../img/lampe-w-1.webp?v=aff9d4d2"); --n: 0; }
  .glim--1 { left: 0%; top: 0%; width: 13.562%; height: 9.1%; background-image: url("../img/glimmen-w-1.webp?v=5a2dd737"); }
  .lamp--3 { left: 17.375%; top: 0%; width: 37.625%; height: 17.1%; background-image: url("../img/lampe-w-3.webp?v=ef8fa788"); --n: 1; }
  .glim--3 { left: 20.438%; top: 0%; width: 31.562%; height: 13.4%; background-image: url("../img/glimmen-w-3.webp?v=12dd6b8c"); }
  .lamp--2 { left: 7.5%; top: 0%; width: 23.375%; height: 14.8%; background-image: url("../img/lampe-w-2.webp?v=898a8933"); --n: 2; }
  .glim--2 { left: 10.125%; top: 0%; width: 18.062%; height: 11.1%; background-image: url("../img/glimmen-w-2.webp?v=00709f20"); }
  .lamp--5 { left: 40.188%; top: 0%; width: 20.312%; height: 18.1%; background-image: url("../img/lampe-w-5.webp?v=a2a4c233"); --n: 3; }
  .glim--5 { left: 42.625%; top: 0%; width: 15.438%; height: 14.3%; background-image: url("../img/glimmen-w-5.webp?v=43e68d0d"); }
  .lamp--8 { left: 75.688%; top: 0%; width: 24.312%; height: 21.8%; background-image: url("../img/lampe-w-8.webp?v=a963c4af"); --n: 4; }
  .glim--8 { left: 78.438%; top: 0%; width: 21.562%; height: 18%; background-image: url("../img/glimmen-w-8.webp?v=411a7c49"); }
  .lamp--7 { left: 60.312%; top: 0%; width: 24.188%; height: 22.3%; background-image: url("../img/lampe-w-7.webp?v=6d6cdb2d"); --n: 5; }
  .glim--7 { left: 62.875%; top: 0%; width: 19.125%; height: 18.5%; background-image: url("../img/glimmen-w-7.webp?v=45ddb93f"); }
  .lamp--6 { left: 43.25%; top: 0.3%; width: 34.188%; height: 28.6%; background-image: url("../img/lampe-w-6.webp?v=68a9d00d"); --n: 6; }
  .glim--6 { left: 46.188%; top: 4%; width: 28.312%; height: 21.2%; background-image: url("../img/glimmen-w-6.webp?v=9c3e2473"); }
  .lamp--4 { left: 28.813%; top: 4.1%; width: 24.5%; height: 23.1%; background-image: url("../img/lampe-w-4.webp?v=e4389b58"); --n: 7; }
  .glim--4 { left: 31.438%; top: 7.8%; width: 19.25%; height: 15.8%; background-image: url("../img/glimmen-w-4.webp?v=d971cd18"); }
  .lamp--11 { left: 39.812%; top: 10%; width: 16.25%; height: 18.9%; background-image: url("../img/lampe-w-11.webp?v=78d910e7"); --n: 8; }
  .glim--11 { left: 42.25%; top: 13.5%; width: 11.375%; height: 11.9%; background-image: url("../img/glimmen-w-11.webp?v=06bdb3a4"); }
  .lamp--9 { left: 64%; top: 8.4%; width: 33.625%; height: 26.5%; background-image: url("../img/lampe-w-9.webp?v=4c22cd8f"); --n: 9; }
  .glim--9 { left: 66.938%; top: 12.1%; width: 27.812%; height: 19.1%; background-image: url("../img/glimmen-w-9.webp?v=b7897632"); }
  .lamp--10 { left: 42.938%; top: 13.7%; width: 37.562%; height: 23.8%; background-image: url("../img/lampe-w-10.webp?v=fcf7744e"); --n: 10; }
  .glim--10 { left: 46%; top: 17.3%; width: 31.438%; height: 16.7%; background-image: url("../img/glimmen-w-10.webp?v=6a31fd88"); }
  @media (max-aspect-ratio: 4/5) {
    .lamp--1, .glim--1 { display: none; }
    .lamp--3 { left: 0%; top: 0%; width: 67.556%; height: 12.821%; background-image: url("../img/lampe-t-3.webp?v=1e7bf03e"); --n: 0; }
    .glim--3 { left: 0%; top: 0%; width: 59.556%; height: 10%; background-image: url("../img/glimmen-t-3.webp?v=5b933b96"); }
    .lamp--2, .glim--2 { display: none; }
    .lamp--5 { left: 28.889%; top: 0%; width: 53.111%; height: 13.59%; background-image: url("../img/lampe-t-5.webp?v=abbddd9a"); --n: 1; }
    .glim--5 { left: 35.222%; top: 0%; width: 40.333%; height: 10.769%; background-image: url("../img/glimmen-t-5.webp?v=42d63e4a"); }
    .lamp--8, .glim--8 { display: none; }
    .lamp--7, .glim--7 { display: none; }
    .lamp--6 { left: 36.889%; top: 0.205%; width: 63.111%; height: 21.487%; background-image: url("../img/lampe-t-6.webp?v=34d5ea1f"); --n: 2; }
    .glim--6 { left: 44.667%; top: 3.026%; width: 55.333%; height: 15.897%; background-image: url("../img/glimmen-t-6.webp?v=3a3e8b8f"); }
    .lamp--4 { left: 0%; top: 3.077%; width: 63.111%; height: 17.385%; background-image: url("../img/lampe-t-4.webp?v=91cdeee7"); --n: 3; }
    .glim--4 { left: 6.111%; top: 5.795%; width: 50%; height: 12%; background-image: url("../img/glimmen-t-4.webp?v=2f0f1e0e"); }
    .lamp--11 { left: 27.889%; top: 7.487%; width: 42.333%; height: 14.205%; background-image: url("../img/lampe-t-11.webp?v=62786042"); --n: 4; }
    .glim--11 { left: 34.333%; top: 10.154%; width: 29.556%; height: 8.923%; background-image: url("../img/glimmen-t-11.webp?v=f40f7978"); }
    .lamp--9, .glim--9 { display: none; }
    .lamp--10 { left: 36.111%; top: 10.308%; width: 63.889%; height: 17.897%; background-image: url("../img/lampe-t-10.webp?v=cced7677"); --n: 5; }
    .glim--10 { left: 44.111%; top: 13.026%; width: 55.889%; height: 12.462%; background-image: url("../img/glimmen-t-10.webp?v=72d0a6ed"); }
  }

  /* Kamerafahrt: je Schicht zwei Abläufe, gleichmäßig abgespielt. -a = Schleichen (0 bis --t-fly),
     -b = Flug (Dauer --d-fly, beginnt bei --t-fly, füllt nur nach hinten). Die Kurven stecken in den Stützpunkten.
     Nicht zu einem Ablauf zusammenlegen: Chrome rechnet sonst alle Ebenen von Anfang an für den größten Maßstab. */
  @keyframes cam-wall-a {
    0% { transform: scale(1); }
    16.84% { transform: scale(1.0081); }
    80.38% { transform: scale(1.1205); }
    97.22% { transform: scale(1.155); }
    99.83% { transform: scale(1.1605); }
    100% { transform: scale(1.1609); }
  }
  @keyframes cam-wall-b {
    0% { transform: scale(1.1609); }
    4.38% { transform: scale(1.1809); }
    7.26% { transform: scale(1.2185); }
    9.19% { transform: scale(1.2713); }
    10.79% { transform: scale(1.3438); }
    12.07% { transform: scale(1.4298); }
    13.35% { transform: scale(1.5519); }
    14.42% { transform: scale(1.694); }
    15.28% { transform: scale(1.846); }
    16.13% { transform: scale(2.0477); }
    16.88% { transform: scale(2.2836); }
    17.52% { transform: scale(2.5514); }
    18.06% { transform: scale(2.8424); }
    18.48% { transform: scale(3.139); }
    18.91% { transform: scale(3.5169); }
    19.23% { transform: scale(3.8752); }
    19.55% { transform: scale(4.3243); }
    19.87% { transform: scale(4.9027); }
    20.09% { transform: scale(5.3904); }
    20.3% { transform: scale(5.993); }
    20.51% { transform: scale(6.7561); }
    20.62% { transform: scale(7.2193); visibility: hidden; }
    20.73% { transform: scale(7.7534); visibility: hidden; }
    96.9% { transform: scale(7.7778); visibility: hidden; }
    99.79% { transform: scale(7.7778); visibility: hidden; }
    100% { transform: scale(7.7778); visibility: hidden; }
  }
  @keyframes cam-screen-a {
    0% { transform: scale(1); }
    32.64% { transform: scale(1.0141); }
    96.18% { transform: scale(1.0612); }
    100% { transform: scale(1.0641); }
  }
  @keyframes cam-screen-b {
    0% { transform: scale(1.0641); }
    6.73% { transform: scale(1.0811); }
    10.26% { transform: scale(1.1166); }
    13.14% { transform: scale(1.1769); }
    15.49% { transform: scale(1.2576); }
    17.41% { transform: scale(1.3531); }
    19.34% { transform: scale(1.4847); }
    20.94% { transform: scale(1.6315); }
    22.54% { transform: scale(1.8247); }
    23.82% { transform: scale(2.0248); }
    25.11% { transform: scale(2.2809); }
    26.18% { transform: scale(2.5534); }
    27.03% { transform: scale(2.8247); }
    27.88% { transform: scale(3.1611); }
    28.63% { transform: scale(3.5289); }
    29.38% { transform: scale(3.9935); }
    30.02% { transform: scale(4.5016); }
    30.56% { transform: scale(5.0354); }
    31.09% { transform: scale(5.7129); }
    31.52% { transform: scale(6.4019); }
    31.84% { transform: scale(7.0387); visibility: hidden; }
    32.16% { transform: scale(7.7778); visibility: hidden; }
    93.16% { transform: scale(7.7778); visibility: hidden; }
    99.89% { transform: scale(7.7778); visibility: hidden; }
    100% { transform: scale(7.7778); visibility: hidden; }
  }
  @keyframes cam-room-a {
    0% { transform: scale(1); }
    99.13% { transform: scale(1.0059); }
    100% { transform: scale(1.006); }
  }
  @keyframes cam-room-b {
    0% { transform: scale(1.006); }
    8.33% { transform: scale(1.0085); }
    13.78% { transform: scale(1.0164); }
    19.23% { transform: scale(1.0329); }
    27.56% { transform: scale(1.0707); }
    40.49% { transform: scale(1.1359); }
    48.82% { transform: scale(1.1682); }
    57.16% { transform: scale(1.1911); }
    67.52% { transform: scale(1.2086); }
    80.45% { transform: scale(1.218); }
    96.58% { transform: scale(1.22); }
    99.47% { transform: scale(1.22); }
    100% { transform: scale(1.22); }
  }
  @keyframes cam-logo-a {
    0% { transform: scale(0.78); }
    99.13% { transform: scale(0.7856); }
    100% { transform: scale(0.7857); }
  }
  @keyframes cam-logo-b {
    0% { transform: scale(0.7857); }
    8.33% { transform: scale(0.7881); }
    13.78% { transform: scale(0.7957); }
    18.16% { transform: scale(0.8077); }
    23.61% { transform: scale(0.8296); }
    33.97% { transform: scale(0.8809); }
    40.71% { transform: scale(0.9142); }
    47.44% { transform: scale(0.9414); }
    55.77% { transform: scale(0.9665); }
    64.1% { transform: scale(0.9833); }
    74.47% { transform: scale(0.9947); }
    87.39% { transform: scale(0.9995); }
    97.76% { transform: scale(1); }
    99.68% { transform: scale(1); }
    100% { transform: scale(1); }
  }
  /* <<< FLUG */

  /* Rückkehr von Impressum oder Datenschutz: kurzer Auftakt ohne Wände und ohne Flug */
  .js.quick { --t-light: 0s; --t-logo: 0.1s; --t-rest: 0.75s; --t-end: 0.6s; }

  /* Fluchtpunkt der Fahrt ist die Mitte des Logos, --r der Radius des Mondfensters. stage.js misst beides aus
     und setzt es am html-Element. Das hier sind Notwerte, falls das Skript nicht misst. */
  .js {
    --gx: 50vw; --gy: 30vh; --r: min(31vw, 21vh);
    --b: calc(var(--r) * 0.13);            /* Breite des Holzrings */
    --p: clamp(34px, 5.2vw, 84px);         /* Lamelle plus Fuge */
  }
  @media (max-aspect-ratio: 4/5) { .js { --gy: 35vh; } }   /* im Hochformat sitzt das Logo tiefer */

  /* --- Zwei Wände hintereinander, beide mit Mondfenster. Gerechnet wie in einem echten Raum: jede Schicht hat ihren
         Abstand zur Kamera und wächst im Maßstab 1/Abstand vom Fluchtpunkt (transform-origin) aus. Was näher ist,
         wächst schneller und ist eher vorbei. Die Abläufe cam-... schreibt tools/build_flug.py. --- */
  .js .gate {
    display: block; position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none;
  }
  .js.quick .gate, .js.no-flight .gate, .js.intro-done .gate { display: none; }
  /* Bis stage.js das Fenster ans Logo gesetzt hat (Klasse gate--fit), bleiben die Wände geschlossen. Sonst sähe man es
     bei langsamer Verbindung erst an der Notposition und dann springen. Startet der Auftakt ohne stage.js über den
     Nottimer, gelten ab "is-ready" wieder die Notwerte oben. */
  .js:not(.is-ready) .gate:not(.gate--fit) { --r: 0px; }
  .js:not(.is-ready) .gate:not(.gate--fit) .gate__ring,
  .js:not(.is-ready) .gate:not(.gate--fit) .screen { opacity: 0; }
  .gate__in { position: absolute; inset: 0; transform-origin: var(--gx) var(--gy); will-change: transform; }
  /* Je Wand zwei Abläufe nacheinander: erst Schleichen (-a), dann Flug (-b). Chrome bereitet jede Ebene beim Start
     einer Bewegung für deren größten Maßstab vor. In einem einzigen Ablauf wären das von Anfang an alle 30 Lamellen
     im Achtfachen: auf Orris 5K-Bildschirm 15 statt 60 Bilder je Sekunde und aufblitzende Kacheln (10.11. gemessen).
     "will-change: transform" hält die Ebenen danach bei ihrer ersten Auflösung. */
  .js.is-ready .gate__in--1 { animation: cam-wall-a var(--t-fly) linear both, cam-wall-b var(--d-fly) var(--t-fly) linear forwards, gone var(--d-wall-out) var(--t-wall-out) linear forwards; }
  .js.is-ready .gate__in--2 { animation: cam-screen-a var(--t-fly) linear both, cam-screen-b var(--d-fly) var(--t-fly) linear forwards; }
  /* Beide Wände blenden kurz aus, bevor sie die Kamera erreichen: sonst verschwinden die letzten Lamellen und Stäbe
     mit einem Ruck (als Helligkeitssprung gemessen). Die Gitterwand tut das an ihren beiden Teilen. */
  .js.is-ready .screen, .js.is-ready .screen__ring { animation: gone var(--d-screen-out) var(--t-screen-out) linear forwards; }

  /* Vordere Wand: Walnusslamellen im Gegenlicht */
  .gate__wall {
    position: absolute; inset: -1px;
    /* Front dunkel, Fuge offen, man sieht den Raum dahinter */
    background-image: linear-gradient(90deg,
      transparent 0, transparent 19%,
      #070403 19%, #20130c 23%, #2c1b11 46%, #24160d 78%, #130b07 97%, #070403 100%);
    background-size: var(--p) 100%;
    background-position: calc(var(--gx) - var(--p) * 0.595) 0;
    -webkit-mask-image: radial-gradient(circle at var(--gx) var(--gy), transparent calc(var(--r) + var(--b) * 0.5), #000 calc(var(--r) + var(--b) * 0.5 + 1px));
            mask-image: radial-gradient(circle at var(--gx) var(--gy), transparent calc(var(--r) + var(--b) * 0.5), #000 calc(var(--r) + var(--b) * 0.5 + 1px));
  }
  /* Streiflicht an den Lamellenkanten, sobald drinnen das Licht angeht */
  .gate__wall::after {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(90deg,
      transparent 0, transparent 19%,
      rgba(255, 184, 104, 0.62) 19%, rgba(255, 168, 88, 0.10) 24%, transparent 34%,
      transparent 90%, rgba(255, 150, 72, 0.20) 100%);
    background-size: var(--p) 100%;
    background-position: calc(var(--gx) - var(--p) * 0.595) 0;
  }
  .gate__ring, .gate__ring::after, .screen__ring { position: absolute; border-radius: 50%; }
  .gate__ring {
    left: var(--gx); top: var(--gy);
    width: calc((var(--r) + var(--b)) * 2); height: calc((var(--r) + var(--b)) * 2);
    margin: calc((var(--r) + var(--b)) * -1) 0 0 calc((var(--r) + var(--b)) * -1);
    /* Holzring mit runder Kante: innen etwas heller, außen dunkel */
    background: radial-gradient(closest-side,
      transparent calc(100% - var(--b) - 0.6px),
      #5a3923 calc(100% - var(--b) + 0.6px),
      #3b2416 calc(100% - var(--b) * 0.72),
      #2a190f calc(100% - var(--b) * 0.36),
      #120a06 calc(100% - 0.8px),
      transparent 100%);
    box-shadow: 0 0 0 1px rgba(5, 3, 2, 0.7), 0 20px 60px rgba(0, 0, 0, 0.6);
  }
  .gate__ring::after {
    content: ""; inset: 0;
    background: radial-gradient(closest-side,
      transparent calc(100% - var(--b) - 0.6px),
      rgba(255, 190, 120, 0.50) calc(100% - var(--b) + 0.6px),
      rgba(255, 160, 84, 0.16) calc(100% - var(--b) * 0.8),
      rgba(255, 150, 72, 0) calc(100% - var(--b) * 0.3),
      transparent 100%);
  }

  /* Hintere Wand: Gitter aus schmalen Stäben mit Querriegeln und einem zweiten Mondfenster, wie die Trennwände im
     Konzeptbild. Alle Maße in Vielfachen des Fensterradius, damit sie auf jedem Bildschirm zum Logo passt.
     Gesetzt ist sie so, wie sie am Anfang durch das erste Fenster zu sehen ist. */
  .screen {
    position: absolute; top: 0; bottom: 0;
    left: calc(var(--gx) - var(--r) * 3.2); width: calc(var(--r) * 6.4);
    --q: calc(var(--r) * 0.2);             /* Stab plus Fuge */
    --w: calc(var(--r) * 0.98);            /* Radius des zweiten Fensters */
    --b2: calc(var(--r) * 0.1);            /* Breite seines Rings */
    --k: calc(var(--r) * 0.085);           /* Stärke der Querriegel */
    --y1: calc(var(--gy) - var(--r) * 1.78);
    --y2: calc(var(--gy) - var(--r) * 1.5);
    --y3: calc(var(--gy) + var(--r) * 1.42);
    --y4: calc(var(--gy) + var(--r) * 1.7);
    background:
      linear-gradient(180deg, transparent var(--y1), #4e331f var(--y1), #281810 calc(var(--y1) + var(--k)), transparent calc(var(--y1) + var(--k))),
      linear-gradient(180deg, transparent var(--y2), #4e331f var(--y2), #281810 calc(var(--y2) + var(--k)), transparent calc(var(--y2) + var(--k))),
      linear-gradient(180deg, transparent var(--y3), #4e331f var(--y3), #281810 calc(var(--y3) + var(--k)), transparent calc(var(--y3) + var(--k))),
      linear-gradient(180deg, transparent var(--y4), #4e331f var(--y4), #281810 calc(var(--y4) + var(--k)), transparent calc(var(--y4) + var(--k))),
      linear-gradient(90deg, #170d08 0, #4a301d 7%, #3a2416 22%, #1c110a 37%, transparent 37%) 0 0 / var(--q) 100% repeat-x;
    /* Pfosten links und rechts */
    box-shadow: inset calc(var(--r) * 0.18) 0 0 #22140c, inset calc(var(--r) * -0.18) 0 0 #22140c;
    -webkit-mask-image: radial-gradient(circle at 50% var(--gy), transparent calc(var(--w) + var(--b2) * 0.5), #000 calc(var(--w) + var(--b2) * 0.5 + 1px));
            mask-image: radial-gradient(circle at 50% var(--gy), transparent calc(var(--w) + var(--b2) * 0.5), #000 calc(var(--w) + var(--b2) * 0.5 + 1px));
  }
  .screen__ring {
    left: var(--gx); top: var(--gy);
    --w: calc(var(--r) * 0.98); --b2: calc(var(--r) * 0.1);
    width: calc((var(--w) + var(--b2)) * 2); height: calc((var(--w) + var(--b2)) * 2);
    margin: calc((var(--w) + var(--b2)) * -1) 0 0 calc((var(--w) + var(--b2)) * -1);
    background: radial-gradient(closest-side,
      transparent calc(100% - var(--b2) - 0.6px),
      #7a5031 calc(100% - var(--b2) + 0.6px),
      #54351f calc(100% - var(--b2) * 0.7),
      #382214 calc(100% - var(--b2) * 0.34),
      #170d08 calc(100% - 0.8px),
      transparent 100%);
    box-shadow: 0 0 0 1px rgba(5, 3, 2, 0.6), 0 14px 44px rgba(0, 0, 0, 0.55);
  }

  /* --- Zustand vor dem Start: alles, was auftritt, ist noch unsichtbar --- */
  .js:not(.is-ready) .fly,
  .js:not(.is-ready) .bloom,
  .js:not(.is-ready) .gate__slat::after,
  .js:not(.is-ready) .room__dim,
  .js:not(.is-ready) .room__lit,
  .js:not(.is-ready) .lamp,
  .js:not(.is-ready) .brand__glow,
  .js:not(.is-ready) .brand__in::before,
  .js:not(.is-ready) .gate__wall::after,
  .js:not(.is-ready) .gate__ring::after,
  .js:not(.is-ready) .lg-ink > *,
  .js:not(.is-ready) .lg-sub > *,
  .js:not(.is-ready) .kind,
  .js:not(.is-ready) .soon span span,
  .js:not(.is-ready) .place,
  .js:not(.is-ready) .links,
  .js:not(.is-ready) .seal,
  .js:not(.is-ready) .foot,
  .js:not(.is-ready) .frame i { opacity: 0; }
  .js:not(.is-ready) .lg-m { fill-opacity: 0; stroke-dashoffset: 1; }

  /* --- 1. Erstes Licht: der Raum geht an, genau so weich wie im Endbild (nichts vom Laden wird schärfer gezeigt).
         Die Papierschirme an der Decke bleiben noch dunkel. --- */
  .js .room__dim {
    display: block; position: absolute; inset: 0;
    background-image: url("../img/bg-wide-dim.webp?v=d08f3d64");
    background-position: 50% 0; background-size: cover; background-repeat: no-repeat;
  }
  @media (max-aspect-ratio: 4/5) { .js .room__dim { background-image: url("../img/bg-tall-dim.webp?v=eac697be"); } }
  .js.quick .room__dim, .js.intro-done .room__dim,
  .js.quick .room__plate--lamps, .js.intro-done .room__plate--lamps { display: none; }
  /* Der zweite Ablauf (gone) räumt auf, falls stage.js es nicht tut */
  .js.is-ready .room__dim { animation: lights-on 1.6s var(--t-light) cubic-bezier(0.4, 0, 0.2, 1) both, gone 0.2s calc(var(--t-focus) + 1.9s) linear forwards; }
  .js.is-ready .gate__wall::after,
  .js.is-ready .gate__ring::after { animation: lights-on 1.6s var(--t-light) cubic-bezier(0.4, 0, 0.2, 1) both; }
  /* Das Licht geht weich an. Früher zuckte es hier wie eine Leuchtröhre (heller, dunkler, heller): das wirkte wie
     ein Fehler. Orri am 10.11.: "das flackert überall". */
  @keyframes lights-on { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes gone { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

  /* Lamellen als einzelne Leisten (baut stage.js): sie drehen sich in einer Welle auf wie eine Jalousie */
  .gate--slats .gate__wall { background-image: none; perspective: 1500px; perspective-origin: var(--gx) var(--gy); }
  .gate--slats .gate__wall::after { content: none; }
  .gate__slat {
    position: absolute; top: 0; bottom: 0;
    background: linear-gradient(90deg, #070403 0, #20130c 5%, #2c1b11 33%, #24160d 73%, #130b07 96%, #070403 100%);
    transform-origin: 50% 50%;
    will-change: transform;
  }
  .gate__slat::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255, 184, 104, 0.62) 0, rgba(255, 168, 88, 0.10) 6%, transparent 18%, transparent 88%, rgba(255, 150, 72, 0.20) 100%);
  }
  .js.is-ready .gate__slat::after { animation: lights-on 1.6s var(--t-light) cubic-bezier(0.4, 0, 0.2, 1) both; }
  .js.is-ready .gate__slat { animation: louver 1.5s calc(var(--t-slats) + var(--d) * 0.05s) cubic-bezier(0.6, 0, 0.3, 1) both; }
  @keyframes louver { from { transform: rotateY(0deg); } to { transform: rotateY(-78deg); } }

  /* --- 2. Das Zeichen zeichnet sich als rote Neonlinie, sichtbar durchs Mondfenster. Dann geht der Lichthof an. --- */
  .js .lg-m { stroke-dasharray: 1; }
  .js.is-ready .lg-m { animation: mark-draw 1.7s var(--t-logo) cubic-bezier(0.55, 0.1, 0.3, 1) both; }
  .js.is-ready .lg-m--ear-l, .js.is-ready .lg-m--ear-r { animation-duration: 1.2s; animation-delay: calc(var(--t-logo) + 0.5s); }
  .js.is-ready .lg-m--body { animation-delay: calc(var(--t-logo) + 0.2s); }
  @keyframes mark-draw {
    0% { stroke-dashoffset: 1; fill-opacity: 0; }
    58% { stroke-dashoffset: 0; fill-opacity: 0; }
    100% { stroke-dashoffset: 0; fill-opacity: 1; }
  }
  .lg-eye, .lg-jaw, .lg-l, .lg-s, .lg-rule { transform-box: fill-box; transform-origin: 50% 50%; }
  .js.is-ready .lg-eye { animation: eye-open 0.55s calc(var(--t-logo) + 1.35s) cubic-bezier(0.3, 1.3, 0.5, 1) both; }
  .js.is-ready .lg-jaw { animation: rise 0.8s calc(var(--t-logo) + 1.1s) var(--ease) both; }
  .js.is-ready .lg-l { animation: rise 0.95s calc(var(--t-logo) + 0.75s + var(--i) * 0.085s) var(--ease) both; }
  @keyframes eye-open { from { opacity: 0; transform: scaleY(0.05); } to { opacity: 1; transform: none; } }
  @keyframes rise { from { opacity: 0; transform: translateY(16%); } to { opacity: 1; transform: none; } }
  /* Lichthof: erst gedämpft (das Schild glimmt im Dunkeln), volle Kraft mit den Papierschirmen, danach atmet er langsam.
     Drei Abläufe auf derselben Eigenschaft: die späteren füllen nur nach hinten (forwards) oder gar nicht,
     sonst würden sie die früheren schon während ihrer Wartezeit überschreiben. */
  .js.is-ready .brand__glow {
    animation: glow-on 0.9s calc(var(--t-logo) + 1.35s) ease both,
               glow-full 1.5s calc(var(--t-lamps) + 0.25s) ease-in-out forwards,
               glow-breathe 7s calc(var(--t-end) + 1.2s) ease-in-out infinite alternate;
  }
  .js.quick.is-ready .brand__glow { animation: fade-in 0.8s 1.3s ease both, glow-breathe 7s 3.5s ease-in-out infinite alternate; }
  @keyframes glow-on { from { opacity: 0; } to { opacity: 0.8; } }
  @keyframes glow-full { from { opacity: 0.8; } to { opacity: 1; } }
  @keyframes glow-breathe { from { opacity: 1; } to { opacity: 0.8; } }
  /* der Schein der Unterzeile kommt mit ihren Buchstaben */
  .js.is-ready .brand__in::before { animation: fade-in 1.2s calc(var(--t-rest) + 0.25s) ease both; }

  /* --- 3. Die Kamera fliegt durch beide Mondfenster in den Raum --- */
  /* Raum und Logo sind weit weg: sie wachsen nur langsam mit (Abläufe cam-room und cam-logo). */
  .js.is-ready .room__move { animation: cam-room-a var(--t-fly) linear both, cam-room-b var(--d-fly) var(--t-fly) linear forwards, drift 34s var(--t-end) ease-in-out infinite alternate; }
  /* Kurzer Auftakt: der Raum steht von Anfang an dort, wo die Dauerbewegung in ihrer Mitte ist. Sonst springt das Bild beim Start. */
  .js.quick .room__move { transform: scale(1.245) translate3d(-0.4%, -0.3%, 0); }
  .js.quick.is-ready .room__move { animation: drift 34s -17s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: scale(1.22); } to { transform: scale(1.27) translate3d(-0.8%, -0.6%, 0); } }
  .js.is-ready .brand__in { animation: cam-logo-a var(--t-fly) linear both, cam-logo-b var(--d-fly) var(--t-fly) linear forwards; }
  .js.quick.is-ready .brand__in { animation: none; }
  /* Beim Durchflug schwillt das warme Licht kurz an, wie wenn die Kamera aus dem Dunkel in den Raum kommt. Weich, kein Blitz. */
  .js.is-ready .room__flare { animation: flare 2.4s calc(var(--t-wall) - 0.25s) ease-out both; }
  .js.quick.is-ready .room__flare { animation: none; }
  @keyframes flare { 0% { opacity: 0; } 30% { opacity: 0.11; } 100% { opacity: 0; } }

  /* Der Kirschzweig oben links kommt, sobald die zweite Wand durch ist: er blendet ein und setzt sich dabei leicht,
     als käme die Kamera unter ihm zum Stehen. Er fliegt nicht durchs Bild. (Fliegende Papierschirme und ein zweiter
     Zweig waren am 10.11. kurz drin, Orri: "mach das mit den überfliegenden Schirm und so raus".) */
  .js .fly--b1 { transform-origin: 0 0; }
  .js.is-ready .fly--b1 { animation: bloom-in 2.6s calc(var(--t-screen) + 0.1s) cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .js.quick.is-ready .fly--b1, .js.no-flight.is-ready .fly--b1 { animation: none; opacity: 1; }
  @keyframes bloom-in { from { opacity: 0; transform: scale(1.16); } to { opacity: 1; transform: none; } }
  /* Nach dem Auftakt: der Zweig treibt ganz langsam gegen den Raum. Das hält die Tiefe am Leben, auch am Handy ohne Maus. */
  .js.intro-done .fly--b1, .js.no-flight.intro-done .fly--b1, .js.quick.is-ready .fly--b1 { animation: fore-drift 34s ease-in-out infinite alternate; }
  @keyframes fore-drift { from { transform: none; } to { transform: translate3d(1.6%, 1%, 0) scale(1.04); } }
  .js.quick.is-ready .bloom { animation: fade-in 1s 0.3s ease both; }
  .js.is-ready .bloom img { animation: sway 13s ease-in-out infinite alternate; }
  @keyframes sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.7deg) translateY(5px); } }

  /* --- 4. Ankunft: die Papierschirme gehen nacheinander an, von der Kamera aus in die Tiefe.
         Jeder Schirm ist ein kleines Bild über dem Raum, in dem die Schirme noch aus sind. --- */
  @supports (width: 1cqw) {
    .js .room__move { container-type: size; }
    /* Fläche, die genau über dem Hintergrundbild liegt (das füllt den Bildschirm wie "cover", oben ausgerichtet) */
    .js .room__plate {
      display: block; position: absolute; left: 50%; top: 0;
      width: max(100cqw, 160cqh); aspect-ratio: 1600 / 1000;
      transform: translateX(-50%);
    }
    @media (max-aspect-ratio: 4/5) { .js .room__plate { width: max(100cqw, 46.154cqh); aspect-ratio: 900 / 1950; } }
  }
  .lamp, .glim { position: absolute; background-position: 50% 50%; background-size: 100% 100%; background-repeat: no-repeat; }
  /* Beide Flächen bleiben unsichtbar, bis sie dran sind. Sonst hält der Browser vom ersten Bild an zwei Dutzend
     zusätzliche Ebenen vor, die noch gar nichts zeigen. */
  .js .room__plate--lamps, .js .room__plate--glims { visibility: hidden; }
  .js.is-ready .room__plate--lamps { animation: show 0.01s calc(var(--t-lamps) - 0.15s) linear forwards; }
  @keyframes show { from { visibility: hidden; } to { visibility: visible; } }
  .js.is-ready .lamp { animation: lamp-on 0.8s calc(var(--t-lamps) + var(--n) * 0.115s) cubic-bezier(0.3, 0, 0.2, 1) both; }
  @keyframes lamp-on { from { opacity: 0; } to { opacity: 1; } }
  /* Sind alle Schirme an, sieht der Raum genau aus wie das Endbild. Das Endbild legt sich darüber (ohne sichtbaren
     Wechsel), danach räumt stage.js die Auftakt-Bilder weg. */
  .js.is-ready .room__lit { animation: fade-in 1.8s var(--t-focus) cubic-bezier(0.4, 0, 0.3, 1) both; }
  .js.quick.is-ready .room__lit { animation: fade-in 0.7s both; }
  /* Danach glimmen die Schirme: alle gemeinsam, sehr langsam, als eine einzige Ebene. Das ersetzt das frühere Auf und Ab
     des ganzen Raums. Bewusst nicht jeder Schirm für sich: viele kleine Wechsel zugleich wirken unruhig. */
  .js .room__plate--glims { opacity: 0; }
  .js.is-ready .room__plate--glims { animation: show 0.01s var(--t-end) linear forwards, glim 9s calc(var(--t-end) + 1s) ease-in-out infinite alternate; }
  .js.quick.is-ready .room__plate--glims { animation: show 0.01s 1.2s linear forwards, glim 9s 2.2s ease-in-out infinite alternate; }
  @keyframes glim { from { opacity: 0; } to { opacity: 0.7; } }

  /* --- 5. Unterzeile, Zeilen, Adresse, Links, Rahmen, Stempel --- */
  .js.is-ready .lg-s { animation: rise 0.85s calc(var(--t-rest) + var(--i) * 0.055s) var(--ease) both, glint 9.5s calc(var(--t-rest) + 3.1s + var(--i) * 0.05s) infinite; }
  @keyframes glint { 0%, 5.5%, 100% { stroke: #ff4130; } 2.6% { stroke: #ffd6cc; } }
  /* die beiden Linien neben der Unterzeile wachsen vom Text nach außen */
  .lg-rule--l { transform-origin: 100% 50%; }
  .lg-rule--r { transform-origin: 0 50%; }
  .js.is-ready .lg-rule { animation: rule-out 1.1s calc(var(--t-rest) + 0.45s) cubic-bezier(0.65, 0, 0.2, 1) both; }
  @keyframes rule-out { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: none; } }

  .js.is-ready .kind { animation: settle 1s calc(var(--t-rest) + 0.75s) var(--ease) both; }
  .js.is-ready .soon span span { animation: letter 0.9s calc(var(--t-rest) + 1.05s + var(--i) * 0.05s) var(--ease) both; }
  .js.is-ready .soon .dot { animation: letter 0.9s calc(var(--t-rest) + 1.05s + var(--i) * 0.05s) var(--ease) both, dot 2.6s calc(var(--t-rest) + 2.9s + (var(--i) - 11) * 0.28s) ease-in-out infinite; }
  @keyframes letter { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
  @keyframes dot { 0%, 70%, 100% { opacity: 1; } 35% { opacity: 0.2; } }

  .js.is-ready .place { animation: settle 1.1s calc(var(--t-rest) + 1.6s) var(--ease) both; }
  .js.is-ready .place::before { animation: line-x 0.9s calc(var(--t-rest) + 1.55s) cubic-bezier(0.65, 0, 0.2, 1) both; }
  .js.is-ready .links { animation: settle 1s calc(var(--t-rest) + 2.1s) var(--ease) both; }
  /* Fuß mit Impressum und Datenschutz kommt, sobald die zweite Wand durch ist, nicht erst mit der Schrift */
  .js.is-ready .foot { animation: fade-in 1s var(--t-screen) ease both; }
  .js.quick.is-ready .foot { animation: fade-in 0.8s 0.3s ease both; }
  @keyframes settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  .js.is-ready .frame__e { animation: line-x 1.3s calc(var(--t-rest) + 0.2s) cubic-bezier(0.65, 0, 0.2, 1) both; }
  .js.is-ready .frame__e--l, .js.is-ready .frame__e--r { animation-name: line-y; animation-delay: calc(var(--t-rest) + 0.75s); }
  .js.is-ready .frame__c { animation: fade-in 0.6s calc(var(--t-rest) + 1.3s) ease both; }
  @keyframes line-x { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: none; } }
  @keyframes line-y { from { opacity: 1; transform: scaleY(0); } to { opacity: 1; transform: none; } }

  .js.is-ready .seal { animation: fade-in 0.25s calc(var(--t-rest) + 3s) linear both; }
  .js.is-ready .seal__in { animation: stamp 0.5s calc(var(--t-rest) + 3s) cubic-bezier(0.2, 1.25, 0.4, 1) both; }
  /* Der Stempel schlägt auf, Logo und Zeile geben kurz nach. Nicht auf .hero legen:
     ein transform dort würde den unten rechts verankerten Stempel für die Dauer verschieben. */
  @media (min-width: 760px) and (min-height: 521px) {
    .js.is-ready .brand, .js.is-ready .soon { animation: thud 0.32s calc(var(--t-rest) + 3s + 0.19s) ease-out; }
  }
  @keyframes thud { 0% { transform: none; } 28% { transform: translateY(3px); } 62% { transform: translateY(-1px); } 100% { transform: none; } }
  .js.is-ready .seal__cap { animation: fade-in 0.8s calc(var(--t-rest) + 3.45s) ease both; }
  @keyframes stamp {
    0% { transform: rotate(-13deg) scale(1.7); }
    62% { transform: rotate(-4.4deg) scale(0.96); }
    100% { transform: rotate(-5deg) scale(1); }
  }

  /* --- 6. Glanz auf den schwarzen Flächen des Zeichens: einmal kräftig, wenn die Schirme angehen, dann alle paar Sekunden --- */
  .lg-shine__band { transform: skewX(-18deg); }
  .js.is-ready .lg-shine__band {
    animation: shine-once 1.5s calc(var(--t-lamps) + 0.6s) cubic-bezier(0.4, 0, 0.3, 1) both,
               shine 9.5s calc(var(--t-end) + 2.4s) cubic-bezier(0.4, 0, 0.3, 1) infinite;
  }
  .js.quick.is-ready .lg-shine__band { animation: shine 9.5s 2.4s cubic-bezier(0.4, 0, 0.3, 1) infinite; }
  @keyframes shine-once { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(6400px) skewX(-18deg); } }
  @keyframes shine {
    0% { transform: translateX(0) skewX(-18deg); }
    17%, 100% { transform: translateX(6400px) skewX(-18deg); }
  }
  .lg-shine__ptr { transition: opacity 0.6s ease; }
}