/* ==========================================================================
   FOUNDER COCKPIT — Business Workshop · Landing r5
   Gebaut nach DESIGN-DIRECTION.md. Kurz gefasst, damit niemand raten muss:

   LICHT   Ein einziges warmes Schlüssellicht oben links (~100°, Gold, α ≤ .16),
           kühler Fill unten rechts. Deshalb laufen ALLE Verläufe von oben links
           nach unten rechts und fallen alle Schatten nach unten rechts.
   FARBE   60 Papier · 30 Navy · 10 Gold. Genau ein gesättigter Akzent.
           Gold ist auf Papier NIE Textfarbe (dafür gold-deep) und bekommt
           NIEMALS text-shadow.
   TYPE    Alles fluid via clamp(); keine festen rem-Obergrenzen.
   MOTION  Nur transform/opacity, drei benannte Easings, reduced-motion killt alles.
   ========================================================================== */

/* ========================= Tokens ========================= */
:root{
  color-scheme: light;                 /* auch bei dunklem OS: helle Formularfelder */

  /* Farbe — Werte 1:1 aus der Direction-Sheet-Tabelle */
  --paper:      #FAF7F2;
  --paper-2:    #F3EEE6;
  --paper-3:    #EDE6DA;
  --navy:       #0C1233;
  --navy-soft:  #1B2450;
  --gold:       #E9CBA1;
  --gold-deep:  #A9863F;
  --ink:        #16192B;
  --ink-mute:   #6B7085;
  --shadow:     12 18 51;              /* Navy-getönt, nie grau */

  /* Typografie — ausnahmslos fluid */
  --t-h1:    clamp(2.6rem, 1.6rem + 3.4vw, 5.6rem);
  --t-h2:    clamp(1.9rem, 1.35rem + 2.1vw, 3.5rem);
  --t-h3:    clamp(1.18rem, 1.05rem + .5vw, 1.6rem);
  --t-lede:  clamp(1.1rem, 1rem + .55vw, 1.5rem);
  --t-body:  clamp(1.02rem, .96rem + .3vw, 1.2rem);
  --t-small: clamp(.92rem, .88rem + .18vw, 1.02rem);
  --t-micro: clamp(.68rem, .64rem + .12vw, .8rem);

  /* Raum */
  --wrap:    min(100% - 2.4rem, 1280px);
  --gap:     clamp(1.4rem, 2.4vw, 2.6rem);
  --band-y:  clamp(4.5rem, 8vw, 9rem);
  --r:       14px;

  /* Bewegung */
  --ease-cine: cubic-bezier(.16,.84,.28,1);
  --ease-firm: cubic-bezier(.22,1,.36,1);
  --ease-exit: cubic-bezier(.55,0,.75,.2);
  --d-hover: 160ms; --d-state: 420ms; --d-enter: 820ms; --d-wipe: 1200ms;
}

/* ========================= Basis ========================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Inter,system-ui,sans-serif; font-size:var(--t-body); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* Papierkorn — nur über dem Papiergrund, nie über Fotos (die haben ihr eigenes Korn) */
body::after{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,video,svg{ max-width:100%; display:block; }
h1,h2,h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-.02em;
  line-height:1.06; margin:0; text-wrap:balance; }
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); line-height:1.08; }
h3{ font-size:var(--t-h3); line-height:1.2; letter-spacing:-.01em; }
p{ margin:0; }
a{ color:inherit; }
.mono{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.gold{ color:var(--gold-deep); }                 /* Akzenttext auf Papier — nie --gold */
.stop{ color:var(--gold-deep); }
em{ font-style:normal; }
.wrap{ width:var(--wrap); margin-inline:auto; position:relative; z-index:2; }

:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:4px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--navy); color:#fff; padding:.8rem 1.2rem; }
.skip:focus{ left:1rem; top:1rem; }

/* Registraturzeile — das Dossier-Signal der Seite */
.reg{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:0;
  font-family:'JetBrains Mono',monospace; font-size:var(--t-micro);
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep);
}
.reg b{ font-weight:500; }
.reg i{ display:block; width:26px; height:1px; background:currentColor; opacity:.5; }

/* ========================= Buttons ========================= */
.btn{
  --btn-y:.95rem; --btn-x:1.5rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:var(--btn-y) var(--btn-x); border:0; border-radius:999px; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; font-size:var(--t-small); font-weight:600;
  letter-spacing:.01em; text-decoration:none; min-height:48px;
  transition:transform var(--d-hover) var(--ease-firm),
             box-shadow var(--d-hover) var(--ease-firm),
             background-color var(--d-hover) var(--ease-firm);
}
.btn-primary{
  color:#fff; background:linear-gradient(115deg,#C4A46A,var(--gold-deep) 62%,#8E6F31);
  box-shadow:0 2px 4px rgb(var(--shadow)/.14), 0 14px 30px -12px rgb(var(--shadow)/.34);
}
.btn-primary:hover{ transform:translateY(-2px);
  box-shadow:0 3px 6px rgb(var(--shadow)/.16), 0 22px 44px -14px rgb(var(--shadow)/.40); }
.btn-primary b{ font-weight:500; opacity:.92; }
.btn-quiet{
  color:var(--ink); background:transparent; border:1px solid rgb(var(--shadow)/.22);
}
.btn-quiet:hover{ background:rgb(var(--shadow)/.05); transform:translateY(-1px); }
.btn-sm{ --btn-y:.6rem; --btn-x:1.1rem; min-height:40px; font-size:var(--t-micro);
  letter-spacing:.08em; text-transform:uppercase; }
.btn-lg{ --btn-y:1.15rem; --btn-x:2.2rem; font-size:calc(var(--t-body)*1.02); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn.is-busy{ opacity:.7; pointer-events:none; }

/* ========================= Topbar / Rail / Sticky ========================= */
.rail{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
}
@supports (animation-timeline:scroll()){
  .rail{ width:100%; transform-origin:0 50%; transform:scaleX(0);
    animation:railgrow linear both; animation-timeline:scroll(); }
  @keyframes railgrow{ to{ transform:scaleX(1); } }
}

.topbar{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; gap:clamp(.8rem,2vw,2rem);
  /* Der senkrechte Innenabstand haelt die Kopfhoehe konstant, obwohl das
     Abzeichen gewachsen ist: 52 px + 2 x 13,6 = 60 px + 2 x 9,6. */
  padding:.6rem clamp(1.2rem,3vw,2.4rem);
  transition:background-color var(--d-state) var(--ease-firm),
             box-shadow var(--d-state) var(--ease-firm),
             backdrop-filter var(--d-state) var(--ease-firm);
}
.topbar.stuck{
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgb(var(--shadow)/.08), 0 12px 30px -22px rgb(var(--shadow)/.5);
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:'Space Grotesk',sans-serif; font-weight:500; letter-spacing:.16em;
  font-size:var(--t-micro); text-transform:uppercase; }
.brand b{ color:var(--gold-deep); font-weight:600; }
.mainnav{ display:none; margin-inline:auto; gap:clamp(1rem,2vw,2rem); }
@media(min-width:1080px){ .mainnav{ display:flex; } }
.mainnav a{ text-decoration:none; font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute); position:relative; padding:.4rem 0; }
.mainnav a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold-deep); transition:right var(--d-state) var(--ease-firm); }
.mainnav a:hover{ color:var(--ink); }
.mainnav a:hover::after{ right:0; }

.lang-bar{ display:flex; margin-left:auto; border:1px solid rgb(var(--shadow)/.18);
  border-radius:999px; overflow:hidden; }
@media(min-width:1080px){ .lang-bar{ margin-left:0; } }
/* Waren bis 2026-08-26 <button>. Jetzt Verweise auf / und /ru/ — deshalb die
   drei Zeilen, die ein Verweis mehr braucht als ein Knopf: kein Unterstrich,
   volle Höhe, mittig. Das Aussehen bleibt Zeichen für Zeichen dasselbe. */
.lang-bar a{ border:0; background:transparent; cursor:pointer; padding:.42rem .78rem;
  font-family:'JetBrains Mono',monospace; font-size:var(--t-micro); letter-spacing:.1em;
  text-decoration:none; display:flex; align-items:center;
  color:var(--ink-mute); transition:background-color var(--d-hover) var(--ease-firm); }
.lang-bar a[aria-current="true"]{ background:var(--navy); color:#fff; }
.topbar .btn-primary{ display:none; }
@media(min-width:720px){ .topbar .btn-primary{ display:inline-flex; } }

.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem clamp(1rem,4vw,1.6rem) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 -1px 0 rgb(var(--shadow)/.1), 0 -18px 40px -30px rgb(var(--shadow)/.6);
  transform:translateY(110%); transition:transform var(--d-state) var(--ease-cine);
}
.stickybar.show{ transform:none; }
.stickybar b{ font-size:calc(var(--t-body)*1.05); }
.stickybar span{ display:block; font-size:var(--t-micro); color:var(--ink-mute); }
@media(min-width:720px){ .stickybar{ display:none; } }

/* ========================= Reveal ========================= */
/* Startopacity hängt an html.js: fällt JS aus, bleibt die Seite vollständig sichtbar. */
.js .rv{ opacity:0; transform:translateY(20px);
  transition:opacity var(--d-enter) var(--ease-cine), transform var(--d-enter) var(--ease-cine); }
.js .rv.in{ opacity:1; transform:none; }
.js .rv[data-d="1"]{ transition-delay:70ms; }
.js .rv[data-d="2"]{ transition-delay:140ms; }
.js .rv[data-d="3"]{ transition-delay:210ms; }
.js .rv[data-d="4"]{ transition-delay:280ms; }
.js .rv[data-d="5"]{ transition-delay:350ms; }
/* Headline-Wisch per clip-path — bewusst OHNE DOM-Chirurgie, sonst zerstört der
   Sprachumschalter die russische Fassung (data-ru sitzt in Kind-Spans). */
.js h1.mask,.js h2.mask{ clip-path:inset(0 0 106% 0);
  transition:clip-path var(--d-wipe) var(--ease-cine), opacity var(--d-state) var(--ease-cine); }
.js h1.mask.in,.js h2.mask.in{ clip-path:inset(0 0 -12% 0); }
@media (prefers-reduced-motion:reduce){
  .js .rv,.js h1.mask,.js h2.mask{ opacity:1!important; transform:none!important;
    clip-path:none!important; transition:none!important; }
}

/* ========================= HERO ========================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; gap:clamp(1.2rem,3vh,2.2rem);
  padding:clamp(5rem,8vh,6.5rem) 0 clamp(1.6rem,3vh,2.4rem); overflow:hidden;
}
.stage{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.stage-poster,.stage-film{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:64% 50%; transform:scale(1.05);
  filter:contrast(1.08) saturate(1.04) brightness(.99);
}
.stage-film{ opacity:0; transition:opacity 1.1s var(--ease-cine); }
.stage-film.is-playing{ opacity:1; }

/* Schleier nach dem Lichtmodell: warm und deckend oben links, offen unten rechts.
   Er hält die Textspalte auf Papierton — Lesbarkeit steht über Bildanteil. */
.stage-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      var(--paper) 0%,
      color-mix(in srgb,var(--paper) 97%,transparent) 30%,
      color-mix(in srgb,var(--paper) 88%,transparent) 44%,
      color-mix(in srgb,var(--paper) 56%,transparent) 60%,
      color-mix(in srgb,var(--paper) 18%,transparent) 78%,
      transparent 94%),
    linear-gradient(to top, var(--paper) 0%, transparent 24%),
    radial-gradient(52% 46% at 3% 0%, rgb(233 203 161/.16), transparent 62%);
}
/* Der Schlussframe (offene Tür) ist deutlich heller als das Poster — ohne diese
   Absenkung wandert die Textspalte beim Ende des Films in den Kontrastkeller. */
.stage-film.is-playing{ filter:contrast(1.06) saturate(1.02) brightness(.9); }
.stage-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(rgb(var(--shadow)/.06) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--shadow)/.06) 1px,transparent 1px);
  background-size:clamp(56px,5vw,96px) clamp(56px,5vw,96px);
  mask-image:radial-gradient(72% 64% at 22% 38%,#000 0%,transparent 78%);
}
@media(max-width:1023px){
  /* Hochkant sitzt der Text ÜBER dem Bild → deutlich stärker abdecken.
     ACHTUNG: diese Regel wird von der globalen `.stage-veil` weiter unten
     (Abschnitt „Lesbarkeit vor Bildwirkung“) ueberschrieben — gleiche
     Spezifitaet, spaetere Stelle gewinnt, auch gegen eine Media-Regel. Wer
     hier etwas aendert, aendert nichts. Der wirksame Ort steht dort. */
  .stage-veil{
    background:
      linear-gradient(to bottom,
        color-mix(in srgb,var(--paper) 88%,transparent) 0%,
        color-mix(in srgb,var(--paper) 93%,transparent) 48%,
        var(--paper) 84%),
      radial-gradient(70% 40% at 50% 0%, rgb(233 203 161/.14), transparent 62%);
  }
  .stage-poster,.stage-film{ object-position:62% 32%; }
}

.hero-inner{ display:grid; gap:clamp(.9rem,1.7vw,1.4rem); }
/* Die gesamte Hero-Spalte bleibt in der gedeckten Zone des Schleiers.
   Ohne diese Grenze läuft die Zeile bis auf das helle Messingschild — dort ist
   sie am tatsächlichen Bild geprüft nicht mehr lesbar. */
.hero-inner > *{ max-width:min(100%,44rem); }
.hero h1{ max-width:14ch; }
.hero .lede{ font-size:var(--t-lede); color:var(--ink); line-height:1.5; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.4rem; }

.factline{
  list-style:none; margin:.1rem 0 0; padding:0; display:flex; flex-wrap:wrap;
  gap:.5rem clamp(1rem,2vw,1.8rem);
  font-family:'JetBrains Mono',monospace; font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
}
.factline li{ display:flex; align-items:center; gap:.55rem; }
.factline li::before{ content:''; width:5px; height:5px; border-radius:50%;
  background:var(--gold-deep); flex:none; }

.triade{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem 1.6rem;
  max-width:44rem; padding-top:clamp(.7rem,1.6vh,1.2rem);
  border-top:1px solid rgb(var(--shadow)/.12);
}
@media(min-width:760px){ .triade{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.triade b{ display:block; font-size:clamp(1.6rem,1.1rem + 1.4vw,2.4rem); font-weight:500;
  line-height:1; color:var(--ink); }
.triade span{ display:block; margin-top:.35rem; font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }

/* ========================= Bänder & Sektionsköpfe ========================= */
.band{ position:relative; padding:var(--band-y) 0; }
.band-alt{ background:var(--paper-2); }
.band-alt::before,.band::after{ content:none; }
.band-navy{
  background:
    radial-gradient(60% 50% at 6% 0%, rgb(233 203 161/.10), transparent 60%),
    linear-gradient(150deg, var(--navy-soft), var(--navy) 58%);
  color:#fff;
}
/* Rim-Light an der Oberkante: das Licht kommt von oben — nie an der Unterkante. */
.band-navy::before{ content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgb(233 203 161/.55) 22%,transparent 78%); }
.band-navy::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
.band-navy .reg{ color:var(--gold); }
.band-navy .stop{ color:var(--gold); }

.shead{ display:grid; gap:clamp(.9rem,1.6vw,1.3rem); margin-bottom:clamp(2.4rem,4vw,3.6rem);
  max-width:56rem; }
.shead h2{ max-width:22ch; }
.shead-note{ color:var(--ink-mute); max-width:44em; font-size:var(--t-small); }
.band-navy .shead-note{ color:rgb(255 255 255/.72); }

.rule-note{ margin-top:clamp(1.6rem,3vw,2.4rem); padding-top:1.2rem;
  border-top:1px solid rgb(var(--shadow)/.12); color:var(--ink-mute);
  font-size:var(--t-small); max-width:52em; }
.band-navy .rule-note{ border-color:rgb(255 255 255/.16); color:rgb(255 255 255/.7); }

/* ========================= 01 · Ausgangslage ========================= */
.two{ display:grid; gap:var(--gap); }
@media(min-width:900px){ .two{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.sheet{
  position:relative; padding:clamp(1.6rem,3vw,2.6rem); border-radius:var(--r);
  background:linear-gradient(150deg,#fff,var(--paper-2));
  box-shadow:0 1px 2px rgb(var(--shadow)/.06), 0 26px 50px -34px rgb(var(--shadow)/.36);
}
.sheet::before{ content:''; position:absolute; inset:0 auto 0 0; width:2px;
  border-radius:2px 0 0 2px; background:linear-gradient(var(--gold),var(--gold-deep)); }
.sheet-reg{ display:block; font-size:var(--t-micro); letter-spacing:.24em;
  color:var(--gold-deep); margin-bottom:.7rem; }
.sheet h3{ margin-bottom:1.2rem; }
.symptoms{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.1rem; }
.symptoms li{ display:flex; gap:.9rem; align-items:baseline;
  padding:.68rem 0; border-top:1px solid rgb(var(--shadow)/.09); font-size:var(--t-small); }
.symptoms li::before{ content:'—'; color:var(--gold-deep); flex:none; }
.sheet blockquote{ margin:0; padding-top:1.1rem; border-top:1px solid rgb(var(--shadow)/.12);
  font-family:'Space Grotesk',sans-serif; font-size:var(--t-h3); line-height:1.3;
  letter-spacing:-.01em; text-wrap:balance; }

/* ========================= 02 · System ========================= */
.phases{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap); counter-reset:p; }
@media(min-width:880px){ .phases{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.phase{ position:relative; padding:clamp(1.5rem,2.6vw,2.2rem); border-radius:var(--r);
  background:rgb(255 255 255/.05); border:1px solid rgb(255 255 255/.1); }
.phase-no{ font-size:clamp(2.4rem,1.6rem + 2.4vw,4rem); line-height:1; font-weight:400;
  color:rgb(233 203 161/.34); display:block; margin-bottom:.6rem; }
.phase h3{ color:#fff; margin-bottom:.9rem; }
.phase p{ color:rgb(255 255 255/.74); font-size:var(--t-small); }
.trade{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:1rem;
  padding-bottom:1rem; border-bottom:1px solid rgb(255 255 255/.14);
  font-family:'JetBrains Mono',monospace; font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold)!important; }
.trade i{ opacity:.6; }

.sealed{
  margin-top:clamp(2rem,4vw,3rem); padding:clamp(1.5rem,3vw,2.4rem); border-radius:var(--r);
  display:grid; gap:1.4rem; align-items:center;
  background:rgb(255 255 255/.04);
  border:1px dashed rgb(233 203 161/.4);
}
@media(min-width:820px){ .sealed{ grid-template-columns:1fr auto; } }
.sealed p{ color:rgb(255 255 255/.76); font-size:var(--t-small); max-width:52em; margin-top:.6rem; }
.seal{
  display:inline-block; padding:.7rem 1.1rem; border-radius:6px;
  border:1px solid rgb(233 203 161/.55); color:var(--gold);
  font-size:var(--t-micro); letter-spacing:.24em; white-space:nowrap;
  transform:rotate(-2deg);
}
.band-alt .seal,.band .seal{ border-color:rgb(169 134 63/.5); color:var(--gold-deep); }

/* ========================= 03 · Der Tag ========================= */
.acts{ list-style:none; margin:0; padding:0; display:grid; }
.act{ display:grid; gap:.5rem 2rem; padding:clamp(1.4rem,2.6vw,2.2rem) 0;
  border-top:1px solid rgb(var(--shadow)/.13); align-items:start; }
.act:last-child{ border-bottom:1px solid rgb(var(--shadow)/.13); }
@media(min-width:760px){ .act{ grid-template-columns:8rem 1fr; } }
.act-time{ font-size:var(--t-small); color:var(--gold-deep); letter-spacing:.1em; padding-top:.2rem; }
.act h3{ margin-bottom:.5rem; }
.act p{ color:var(--ink-mute); font-size:var(--t-small); max-width:56em; }

/* ========================= 04 · Screening ========================= */
.screen-grid{ display:grid; gap:clamp(2rem,4vw,3.6rem); align-items:start; }
@media(min-width:980px){ .screen-grid{ grid-template-columns:.9fr 1.1fr; } }
.pillars ol{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; }
.pillars li{ display:flex; align-items:baseline; gap:1rem; padding:.85rem 0;
  border-top:1px solid rgb(var(--shadow)/.12);
  font-family:'Space Grotesk',sans-serif; font-size:var(--t-h3); letter-spacing:-.01em; }
.pillars li:last-child{ border-bottom:1px solid rgb(var(--shadow)/.12); }
.pillars li b{ font-size:var(--t-micro); font-weight:400; color:var(--gold-deep);
  letter-spacing:.14em; }
.pillars-note{ color:var(--ink-mute); font-size:var(--t-small); margin-bottom:1.2rem; max-width:44em; }

.radar-wrap{ margin:0; display:grid; gap:1.4rem; }
.radar{ position:relative; background:linear-gradient(150deg,#fff,var(--paper-3));
  border-radius:var(--r); padding:clamp(.8rem,2vw,1.4rem);
  box-shadow:0 1px 2px rgb(var(--shadow)/.06), 0 30px 60px -38px rgb(var(--shadow)/.4); }
.radar svg{ width:100%; height:auto; overflow:visible; }
.grid-ring{ fill:none; stroke:rgb(var(--shadow)/.12); }
.spoke{ stroke:rgb(var(--shadow)/.12); }
#radar-shape{ fill:rgb(169 134 63/.16); stroke:var(--gold-deep); stroke-width:1.6;
  stroke-linejoin:round; }
.node{ fill:var(--navy); }
.lbl{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.14em;
  fill:var(--ink-mute); }
.radar-wrap figcaption p{ color:var(--ink-mute); font-size:var(--t-small); margin:.7rem 0 1rem;
  max-width:44em; }
.radar-legend{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.radar-legend li{ display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:.8rem; padding:.5rem 0; border-top:1px solid rgb(var(--shadow)/.1);
  font-size:var(--t-small); }
.radar-legend i{ width:6px; height:6px; border-radius:50%; background:var(--gold-deep); }
.radar-legend .num{ font-family:'JetBrains Mono',monospace; font-weight:500; }

/* ========================= 05 · Ergebnis ========================= */
.deliver{ display:grid; gap:var(--gap); }
@media(min-width:700px){ .deliver{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1120px){ .deliver{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.del{ padding:clamp(1.4rem,2.4vw,2rem); border-radius:var(--r);
  background:linear-gradient(150deg,#fff,var(--paper-2));
  box-shadow:0 1px 2px rgb(var(--shadow)/.06), 0 24px 48px -34px rgb(var(--shadow)/.34);
  transition:transform var(--d-state) var(--ease-firm), box-shadow var(--d-state) var(--ease-firm); }
.del:hover{ transform:translateY(-3px);
  box-shadow:0 2px 4px rgb(var(--shadow)/.08), 0 34px 60px -34px rgb(var(--shadow)/.42); }
.del b{ display:block; font-size:var(--t-micro); letter-spacing:.2em; color:var(--gold-deep);
  margin-bottom:.9rem; }
.del h3{ margin-bottom:.6rem; }
.del p{ color:var(--ink-mute); font-size:var(--t-small); }

.claim{ position:relative; margin-top:clamp(2rem,4vw,3rem); border-radius:var(--r);
  overflow:hidden; isolation:isolate; display:grid; align-items:end;
  min-height:clamp(16rem,26vw,22rem); }
.claim img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 46%; z-index:-2; }
.claim::before{ content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgb(12 18 51/.93), rgb(12 18 51/.72) 62%, rgb(12 18 51/.5)); }
.claim p{ color:#fff; font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.15rem,.95rem + .9vw,1.8rem); line-height:1.32; letter-spacing:-.01em;
  padding:clamp(1.6rem,3.5vw,3rem); max-width:30ch; text-wrap:balance; }

/* ========================= 06 · Mentor ========================= */
.mentor-grid{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media(min-width:900px){ .mentor-grid{ grid-template-columns:.85fr 1.15fr; } }
.portrait{ position:relative; margin:0; border-radius:var(--r); overflow:hidden;
  background:var(--navy); aspect-ratio:4/5;
  box-shadow:0 2px 4px rgb(var(--shadow)/.1), 0 40px 70px -40px rgb(var(--shadow)/.5); }
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 16%; }
.portrait::after{ content:''; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(transparent,rgb(12 18 51/.85)); }
.portrait figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; color:#fff;
  padding:clamp(1.1rem,2.4vw,1.8rem); display:grid; gap:.15rem; }
.portrait figcaption b{ font-family:'Space Grotesk',sans-serif;
  font-size:calc(var(--t-body)*1.2); }
.portrait figcaption span{ font-family:'JetBrains Mono',monospace; font-size:var(--t-micro);
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.mentor-copy .shead{ margin-bottom:1.4rem; }
.mentor-copy .lede{ font-size:var(--t-lede); color:var(--ink); max-width:40em; line-height:1.5; }
.facts{ margin:clamp(1.6rem,3vw,2.4rem) 0 0; display:grid; gap:0; }
.facts > div{ display:grid; grid-template-columns:6.5rem 1fr; gap:1.2rem; align-items:baseline;
  padding:.9rem 0; border-top:1px solid rgb(var(--shadow)/.12); }
.facts dt{ font-size:clamp(1.4rem,1.1rem + .9vw,2rem); font-weight:500; color:var(--gold-deep);
  line-height:1; }
.facts dd{ margin:0; font-size:var(--t-small); color:var(--ink-mute); }

/* ========================= 07 · Grössenordnung ========================= */
.calc{ display:grid; gap:var(--gap); }
@media(min-width:860px){ .calc{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; } }
.calc-step{ padding:clamp(1.5rem,2.8vw,2.2rem); border-radius:var(--r);
  background:rgb(255 255 255/.05); border:1px solid rgb(255 255 255/.1); }
.calc-step b{ display:block; font-size:clamp(1.8rem,1.2rem + 1.8vw,2.9rem); font-weight:500;
  line-height:1.1; margin:.7rem 0 .5rem; color:#fff; }
.calc-step p{ color:rgb(255 255 255/.7); font-size:var(--t-small); }
.calc-out{ background:linear-gradient(150deg, rgb(233 203 161/.16), rgb(233 203 161/.06));
  border-color:rgb(233 203 161/.45); }
.calc-out b{ color:var(--gold); }
.disclaimer{ margin-top:clamp(1.6rem,3vw,2.4rem); font-size:var(--t-micro); line-height:1.7;
  color:rgb(255 255 255/.58); max-width:66em; }

/* ========================= 08 · Ticket ========================= */
.checkout{ display:grid; gap:var(--gap); align-items:start; }
@media(min-width:980px){ .checkout{ grid-template-columns:.92fr 1.08fr; } }

.price-card{
  position:relative; border-radius:var(--r); overflow:hidden; color:#fff;
  padding:clamp(1.7rem,3vw,2.6rem);
  background:
    radial-gradient(70% 55% at 4% 0%, rgb(233 203 161/.14), transparent 62%),
    linear-gradient(150deg, var(--navy-soft), var(--navy) 60%);
  box-shadow:0 2px 5px rgb(var(--shadow)/.14), 0 40px 70px -40px rgb(var(--shadow)/.55);
}
.price-card::before{ content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgb(233 203 161/.6) 24%,transparent 80%); }
.price-card .reg{ color:var(--gold); }
.price{ display:flex; align-items:flex-start; gap:.5rem; margin:1rem 0 .3rem; }
.price b{ font-size:clamp(3.4rem,2.2rem + 4.4vw,6rem); font-weight:500; line-height:.9;
  color:var(--gold); }
.price i{ font-style:normal; font-family:'JetBrains Mono',monospace;
  font-size:clamp(1.1rem,1.5vw,1.5rem); color:var(--gold); padding-top:.5rem; }
.price-note{ font-size:var(--t-micro); color:rgb(255 255 255/.62); letter-spacing:.04em; }
.price-alt{ margin-top:.9rem; padding-top:.9rem; line-height:1.65;
  border-top:1px solid rgb(255 255 255/.14); color:rgb(255 255 255/.7); }
.price-alt b{ color:var(--gold); font-weight:600; }
.incl{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; }
.incl li{ display:flex; gap:.85rem; align-items:baseline; padding:.62rem 0;
  border-top:1px solid rgb(255 255 255/.12); font-size:var(--t-small);
  color:rgb(255 255 255/.9); }
.incl li::before{ content:'✓'; color:var(--gold); flex:none; font-size:.9em; }
.seats{ margin-top:1.8rem; padding-top:1.3rem; border-top:1px solid rgb(255 255 255/.16); }
.seats-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.seats-top .reg{ color:rgb(255 255 255/.6); }
.seats-top b{ color:var(--gold); }
.seatbar{ height:3px; border-radius:3px; background:rgb(255 255 255/.14); margin:.7rem 0 .9rem;
  overflow:hidden; }
.seatbar i{ display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  transition:width var(--d-state) var(--ease-firm); }
.seats p{ font-size:var(--t-micro); line-height:1.7; color:rgb(255 255 255/.6); }

.form-card{ border-radius:var(--r); padding:clamp(1.7rem,3vw,2.6rem); background:#fff;
  box-shadow:0 1px 2px rgb(var(--shadow)/.06), 0 34px 64px -40px rgb(var(--shadow)/.4); }
.form-card h3{ margin-bottom:.5rem; }
.form-intro{ color:var(--ink-mute); font-size:var(--t-small); margin-bottom:1.6rem; }
#checkout-form{ display:grid; gap:.9rem; }
.frow{ display:grid; gap:.9rem; }
@media(min-width:560px){ .frow{ grid-template-columns:1fr 1fr; } }
#checkout-form label{ display:grid; gap:.4rem; }
#checkout-form label:not(.consent) > span{ font-family:'JetBrains Mono',monospace; font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
#checkout-form input:not([type=checkbox]){
  width:100%; padding:.85rem 1rem; border-radius:10px; font:inherit; color:var(--ink);
  background:var(--paper-2); border:1px solid rgb(var(--shadow)/.14);
  transition:border-color var(--d-hover) var(--ease-firm),
             background-color var(--d-hover) var(--ease-firm);
}
#checkout-form input:focus{ background:#fff; border-color:var(--gold-deep); outline:none;
  box-shadow:0 0 0 3px rgb(169 134 63/.16); }
/* ---- Tarifwahl · Anzahl · Summe ----
   Der gewaehlte Tarif ist eine Karte, kein Radiobutton in einer Zeile: die
   Entscheidung "allein / zu zweit" ist die erste echte Entscheidung im
   Formular und darf entsprechend Platz haben. Der Radiobutton bleibt im DOM
   (Tastatur, Screenreader), sichtbar ist die Karte. */
.tariffs{ display:grid; gap:.7rem; margin-bottom:.4rem; }
@media(min-width:560px){ .tariffs{ grid-template-columns:1fr 1fr; } }
.tariff{ position:relative; display:grid!important; gap:.35rem; cursor:pointer;
  padding:1rem 1.05rem; border-radius:12px; background:var(--paper-2);
  border:1px solid rgb(var(--shadow)/.14);
  transition:border-color var(--d-hover) var(--ease-firm),
             background-color var(--d-hover) var(--ease-firm),
             box-shadow var(--d-hover) var(--ease-firm); }
.tariff:hover{ border-color:rgb(169 134 63/.5); }
.tariff input{ position:absolute; opacity:0; width:0; height:0; }
.tariff:has(input:checked){ background:#fff; border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgb(169 134 63/.14); }
.tariff:has(input:focus-visible){ outline:2px solid var(--gold-deep); outline-offset:3px; }
/* Die Feldbeschriftungen im Formular sind mono/versal — die Tarifkarten sind
   keine Feldbeschriftungen, sondern Fliesstext. Der Selektor traegt die id,
   weil die Regel darueber sie ebenfalls traegt. */
#checkout-form label.tariff > span{ font-family:inherit; letter-spacing:normal;
  text-transform:none; font-size:inherit; color:var(--ink-mute); }
#checkout-form label.tariff .t-head{ display:flex; align-items:baseline;
  justify-content:space-between; gap:.6rem; }
.tariff .t-head b{ font-family:'Space Grotesk',sans-serif; font-size:1.02rem;
  letter-spacing:-.01em; color:var(--ink); }
.tariff .t-head i{ font-style:normal; font-size:1.02rem; color:var(--gold-deep); }
#checkout-form label.tariff .t-sub{ font-size:var(--t-micro); letter-spacing:.04em; }
#checkout-form label.tariff .t-txt{ font-size:var(--t-small); line-height:1.5;
  padding-top:.35rem; border-top:1px solid rgb(var(--shadow)/.1); margin-top:.35rem; }

.qty{ display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap;
  padding:1rem 1.05rem; border-radius:12px; background:var(--paper-2);
  border:1px solid rgb(var(--shadow)/.14); }
.qty[hidden]{ display:none; }
.qty-txt{ flex:1 1 15rem; }
.qty-txt b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:.98rem;
  color:var(--ink); margin-bottom:.3rem; }
.qty-txt p{ font-size:var(--t-micro); line-height:1.6; color:var(--ink-mute); }
.qty-txt p b{ display:inline; font-family:inherit; font-size:inherit; color:var(--gold-deep); }
.stepper{ display:flex; align-items:center; gap:.2rem; background:#fff; border-radius:999px;
  border:1px solid rgb(var(--shadow)/.14); padding:.25rem; }
.stepper button{ width:40px; height:40px; border:0; border-radius:999px; background:transparent;
  font-size:1.25rem; line-height:1; color:var(--ink); cursor:pointer;
  transition:background-color var(--d-hover) var(--ease-firm); }
.stepper button:hover:not(:disabled){ background:var(--paper-2); }
.stepper button:disabled{ opacity:.3; cursor:default; }
.stepper output{ min-width:2.4rem; text-align:center; font-size:1.05rem; color:var(--ink); }

.total{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  padding:.9rem 0 .2rem; border-top:1px solid rgb(var(--shadow)/.12); }
.total > span{ font-family:'JetBrains Mono',monospace; font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.total b{ font-size:1.35rem; color:var(--ink); }
.total small{ flex:1 1 100%; font-size:var(--t-micro); color:var(--ink-mute); }

.consent{ grid-template-columns:auto 1fr; align-items:start; gap:.8rem!important;
  margin:.6rem 0 .2rem; font-size:var(--t-small); color:var(--ink-mute); line-height:1.55; }
.consent input{ width:20px; height:20px; margin-top:.2rem; accent-color:var(--gold-deep); }
.consent a{ color:var(--gold-deep); }
.formmsg{ display:none; font-size:var(--t-small); border-radius:10px; padding:.85rem 1rem; }
.formmsg.err{ display:block; background:#FBF0EC; color:#7A2E1B; border:1px solid #E7C3B6; }
.formmsg.ok{ display:block; background:var(--paper-2); color:var(--navy);
  border:1px solid rgb(var(--shadow)/.16); }
.or{ display:flex; align-items:center; gap:1rem; margin:.4rem 0;
  font-family:'JetBrains Mono',monospace; font-size:var(--t-micro); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute); }
.or::before,.or::after{ content:''; flex:1; height:1px; background:rgb(var(--shadow)/.14); }
.assure{ list-style:none; margin:1.6rem 0 0; padding:1.2rem 0 0; display:grid; gap:.55rem;
  border-top:1px solid rgb(var(--shadow)/.12);
  font-size:var(--t-micro); color:var(--ink-mute); letter-spacing:.04em; }
@media(min-width:560px){ .assure{ grid-template-columns:1fr 1fr; } }
.assure li{ display:flex; gap:.6rem; align-items:baseline; }
.assure li::before{ content:'·'; color:var(--gold-deep); }

/* ========================= FAQ ========================= */
.faq{ display:grid; max-width:60rem; }
.faq details{ border-top:1px solid rgb(var(--shadow)/.13); }
.faq details:last-child{ border-bottom:1px solid rgb(var(--shadow)/.13); }
.faq summary{ list-style:none; cursor:pointer; padding:1.15rem 2.4rem 1.15rem 0;
  position:relative; font-family:'Space Grotesk',sans-serif; font-size:var(--t-h3);
  letter-spacing:-.01em; line-height:1.3; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:''; position:absolute; right:.4rem; top:calc(50% - 6px);
  width:11px; height:11px; border-right:1.5px solid var(--gold-deep);
  border-bottom:1.5px solid var(--gold-deep); transform:rotate(45deg);
  transition:transform var(--d-state) var(--ease-firm); }
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq p{ padding:0 2.4rem 1.4rem 0; color:var(--ink-mute); font-size:var(--t-small);
  max-width:56em; }

/* ========================= Final + Footer ========================= */
.final{ position:relative; isolation:isolate; overflow:hidden; color:#fff;
  padding:clamp(4rem,8vw,7rem) 0;
  background:
    radial-gradient(58% 52% at 8% 0%, rgb(233 203 161/.20), transparent 62%),
    linear-gradient(150deg, var(--navy-soft), var(--navy) 60%); }
.final::before{ content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgb(233 203 161/.55) 22%,transparent 78%); }
.final-grid{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media(min-width:900px){ .final-grid{ grid-template-columns:1.25fr .75fr; } }
.final-copy h2{ max-width:18ch; margin:.9rem 0 0; }
.final-copy .reg{ color:var(--gold); }
.final-copy > p{ margin:1.2rem 0 2rem; color:rgb(255 255 255/.76); font-size:var(--t-small);
  max-width:44em; }
.final .stop{ color:var(--gold); }
.final-note{ margin-top:1rem!important; font-size:var(--t-micro);
  color:rgb(255 255 255/.55)!important; }
.final-photo{ margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 3px 8px rgb(0 0 0/.24), 0 44px 80px -44px rgb(0 0 0/.6); }
.final-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; }

.foot{ background:var(--paper-2); padding:clamp(3rem,6vw,5rem) 0 2rem;
  border-top:1px solid rgb(var(--shadow)/.1); }
.foot-grid{ display:grid; gap:2rem; }
@media(min-width:760px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.foot-grid p{ color:var(--ink-mute); font-size:var(--t-small); margin-top:.8rem; max-width:32em; }
.foot-grid > div > .reg{ margin-bottom:.9rem; }
.foot-grid a:not(.brand){ display:block; text-decoration:none; color:var(--ink-mute);
  font-size:var(--t-small); padding:.28rem 0;
  transition:color var(--d-hover) var(--ease-firm); }
.foot-grid a:not(.brand):hover{ color:var(--gold-deep); }
.foot-base{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  margin-top:clamp(2.4rem,5vw,3.6rem); padding-top:1.4rem;
  border-top:1px solid rgb(var(--shadow)/.12);
  font-size:var(--t-micro); color:var(--ink-mute); }

/* ========================= Film (Vimeo) ========================= */
.film-frame{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:var(--navy);
  box-shadow:0 2px 5px rgb(var(--shadow)/.12), 0 40px 70px -40px rgb(var(--shadow)/.5); }
.film-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ========================= Druck ========================= */
@media print{
  .topbar,.stickybar,.rail,.stage,.final-bg,.btn{ display:none!important; }
  body{ background:#fff; }
  .band-navy,.price-card,.claim,.final{ background:#fff!important; color:#000!important; }
}

/* Ankersprünge dürfen nicht unter der fixierten Topbar landen. */
section[id]{ scroll-margin-top:clamp(4.5rem,7vw,6rem); }

/* ==========================================================================
   r6 — Verkaufsschicht (Baulig-Modell) + Scroll-Choreografie
   ========================================================================== */

/* ---------- Wortmarke: FOUNDER schwer, COCKPIT leicht und gesperrt ---------- */
/* Wortmarke exakt nach der Plattform-Sperrung: FOUNDER schwer und navy,
   darunter COCKPIT leicht und in Messing, auf dieselbe Breite gesperrt.
   Beide Wörter haben sieben Zeichen — deshalb reicht ein fester Sperrwert,
   um die Kanten bündig zu bekommen; das letzte Zeichen trägt den Sperrwert
   rechts noch mit, daher der negative Ausgleich. */
/* Die Maße stammen aus dem Original-Lockup und sind dort nachgemessen:
   COCKPIT trägt 63,4 % der Versalhöhe von FOUNDER, beginnt unter dem N und
   endet bündig unter dem R — das sind 57,6 % der FOUNDER-Breite —, und
   zwischen FOUNDER-Grundlinie und COCKPIT-Oberkante liegt eine Zehntel
   Versalhöhe. Der Zeilenabstand kommt deshalb als negativer oberer Rand:
   die Zeilenschachtel von COCKPIT trägt über den Versalien Vorschub, den
   das Original nicht hat. FOUNDER steht minimal negativ gesperrt.
   COCKPIT trägt Messing als Verlauf, nicht als Fläche — die Stops bleiben
   dabei im dunklen Teil der Messingskala, weil die hellen Stufen des
   Markenverlaufs auf dem hellen Papierton verschwinden würden. */
.wordmark{ display:inline-flex; flex-direction:column; align-items:stretch;
  line-height:1; gap:0; }
.wordmark b{ font-family:'Space Grotesk',sans-serif; font-weight:700;
  letter-spacing:-.01em; color:var(--ink); }
.wordmark i{ font-style:normal; font-weight:500; font-size:.634em;
  letter-spacing:-.006em; margin-right:.006em; margin-top:-.30em;
  text-align:right;
  color:var(--gold-deep); }
.band-navy .wordmark b,.foot .wordmark b{ color:inherit; }

/* ---------- Qualifikationsschwelle: Filter und Statussignal zugleich ---------- */
.qualify{ font-size:var(--t-small); color:var(--ink-mute); max-width:40em;
  padding-left:1rem; border-left:2px solid rgb(169 134 63/.5); }
.qualify b{ color:var(--ink); font-weight:600; }

/* ---------- Risk reversal am Kaufpunkt ---------- */
.reversal{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid rgb(var(--shadow)/.12);
  font-size:var(--t-micro); line-height:1.7; color:var(--ink-mute); }

/* ---------- Nächste Stufe der Leiter ---------- */
.ladder{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media(min-width:900px){ .ladder{ grid-template-columns:.8fr 1.2fr; } }
.ladder-photo{ margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5;
  background:var(--paper-3);
  box-shadow:0 2px 4px rgb(var(--shadow)/.1), 0 40px 70px -42px rgb(var(--shadow)/.45); }
.ladder-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 16%; }
.ladder-list{ list-style:none; margin:clamp(1.4rem,3vw,2rem) 0 0; padding:0; display:grid; }
.ladder-list li{ display:flex; gap:.9rem; align-items:baseline; padding:.75rem 0;
  border-top:1px solid rgb(var(--shadow)/.12); font-size:var(--t-small); }
.ladder-list li::before{ content:'—'; color:var(--gold-deep); flex:none; }
.ladder-note{ margin-top:1.2rem; font-size:var(--t-micro); color:var(--ink-mute);
  letter-spacing:.04em; }

/* ---------- Fallbeispiele (Gerüst, versteckt bis echte Zahlen vorliegen) ---------- */
.cases{ display:grid; gap:var(--gap); }
@media(min-width:900px){ .cases{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.case{ padding:clamp(1.5rem,2.6vw,2.2rem); border-radius:var(--r); background:#fff;
  box-shadow:0 1px 2px rgb(var(--shadow)/.06), 0 26px 50px -34px rgb(var(--shadow)/.34); }
.case-tag{ display:block; font-size:var(--t-micro); letter-spacing:.2em;
  color:var(--gold-deep); margin-bottom:1rem; }
.case h3{ font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:.9rem; font-family:'JetBrains Mono',monospace;
  font-weight:400; }
.case-num{ display:block; margin-top:1.2rem; padding-top:1rem;
  border-top:1px solid rgb(var(--shadow)/.12);
  font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem); color:var(--gold-deep); }

/* ==========================================================================
   Scroll-Choreografie — nativ, ohne Bibliothek.
   Alles hinter @supports: wo scroll-driven animations fehlen (Safari < 26,
   Firefox), steht schlicht das Endbild. Kein JS, kein Ruckeln, kein Polyfill.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){

    /* Bilder atmen gegen die Scrollrichtung — Tiefe, keine Show. */
    .claim img,.portrait img,.ladder-photo img,.final-photo img{
      animation:driftUp linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes driftUp{
      from{ transform:translate3d(0,3.5%,0) scale(1.08); }
      to  { transform:translate3d(0,-3.5%,0) scale(1.08); }
    }

    /* Die Haarlinie unter jedem Sektionskopf zieht sich beim Eintritt auf. */
    .shead{ position:relative; }
    .shead::after{
      content:''; position:absolute; left:0; bottom:calc(-1 * clamp(1rem,2vw,1.6rem));
      height:1px; width:100%; transform-origin:0 50%;
      background:linear-gradient(90deg,var(--gold-deep),transparent 70%);
      animation:lineDraw linear both;
      animation-timeline:view(); animation-range:entry 10% entry 70%;
    }
    @keyframes lineDraw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

    /* Der Tagesablauf bekommt eine mitlaufende Spur: Fortschritt durch den Tag. */
    .acts{ position:relative; }
    @media(min-width:760px){
      .acts::before{
        content:''; position:absolute; left:4.15rem; top:0; bottom:0; width:1px;
        background:rgb(var(--shadow)/.14);
      }
      .acts::after{
        content:''; position:absolute; left:4.15rem; top:0; width:1px; height:100%;
        transform-origin:50% 0; background:linear-gradient(var(--gold-deep),var(--gold));
        animation:lineGrow linear both;
        animation-timeline:view(); animation-range:entry 40% exit 60%;
      }
      @keyframes lineGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
    }

    /* Der Preis rückt beim Eintritt eine Spur heran — einmal, ohne Zappeln. */
    .price-card{
      animation:cardLift linear both;
      animation-timeline:view(); animation-range:entry 0% entry 80%;
    }
    @keyframes cardLift{
      from{ transform:translate3d(0,26px,0); }
      to  { transform:none; }
    }
  }
}


/* ==========================================================================
   r7 — MATERIAL, TIEFE, DAUERBEWEGUNG
   Auftrag: die Seite wirkte flach und schablonenhaft. Ursache war nicht die
   Palette, sondern dass jede Fläche dieselbe Höhe hatte und nichts sich bewegte,
   solange nicht gescrollt wurde. r7 führt darum drei Dinge ein:

   1 ELEVATION  Ein Höhenmodell statt einzelner box-shadows. Jede Stufe besteht
                aus Kontaktschatten + Kernschatten + Umgebungsschatten, alle in
                Navy getönt und alle nach unten RECHTS versetzt — das eine
                Schlüssellicht aus der Direction-Sheet bleibt gültig.
   2 RIM        Jede erhabene Fläche bekommt oben eine helle Innenkante und
                unten eine dunkle. Das ist der eigentliche Grund, warum Material
                teuer aussieht: die Kante fängt Licht, die Fläche nicht.
   3 AMBIENT    Dauerschleifen mit sehr langer Periode (18–60 s). Sie sind
                einzeln kaum bewusst wahrnehmbar, aber ihr Fehlen ist es —
                eine Seite ohne Eigenbewegung liest sich wie ein Ausdruck.

   Alles Ambient läuft ausschliesslich auf transform/opacity/background-position
   und liegt geschlossen hinter prefers-reduced-motion (ganz am Ende der Datei).
   ========================================================================== */

:root{
  /* Höhenmodell — Kontakt · Kern · Umgebung */
  --e1: 0 1px 1px rgb(var(--shadow)/.05),
        0 4px 10px -6px rgb(var(--shadow)/.20),
        0 18px 40px -28px rgb(var(--shadow)/.30);
  --e2: 0 1px 2px rgb(var(--shadow)/.07),
        0 8px 18px -10px rgb(var(--shadow)/.22),
        0 34px 66px -38px rgb(var(--shadow)/.40);
  --e3: 0 2px 4px rgb(var(--shadow)/.10),
        0 14px 30px -14px rgb(var(--shadow)/.26),
        0 56px 100px -50px rgb(var(--shadow)/.52);
  /* Innenkanten: oben Licht, unten Schatten */
  --rim-light: inset 0 1px 0 rgb(255 255 255/.92), inset 0 -1px 0 rgb(var(--shadow)/.06);
  --rim-dark:  inset 0 1px 0 rgb(233 203 161/.16), inset 0 -1px 0 rgb(0 0 0/.30);
  /* Messing als Verlauf, nicht als Fläche — Metall hat immer einen Horizont */
  --brass: linear-gradient(160deg,#E7CDA2 0%,#C9A868 34%,#A9863F 58%,#8A6C31 100%);
  --hair:  linear-gradient(90deg,transparent,rgb(169 134 63/.55) 18%,rgb(233 203 161/.9) 50%,rgb(169 134 63/.55) 82%,transparent);
}

/* Grundfläche: ohne Vignette bleibt Papier ein weisses Blatt.
   Zwei fixierte Lichter — warm oben links (Schlüssel), kühl unten rechts (Fill). */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 6% -10%, rgb(233 203 161/.20), transparent 58%),
    radial-gradient(90% 80% at 100% 106%, rgb(27 36 80/.10), transparent 60%);
}

/* ========================= Buttons, neu aufgebaut =========================
   Vorher: ein Farbverlauf mit grossem weichem Schatten — das ist der Look, der
   billig wirkt, weil er nach aufgeblasenem Plastik aussieht. Jetzt: gewalztes
   Messing. Flacher Körper, harte Kante, kurzer Kontaktschatten, und ein
   Glanzstreifen, der beim Hover EINMAL über die Fläche läuft. */
.btn{ position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--d-hover) var(--ease-firm),
             box-shadow var(--d-hover) var(--ease-firm),
             filter var(--d-hover) var(--ease-firm); }

.btn-primary{
  background:var(--brass);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.42),      /* Lichtkante oben */
    inset 0 -1px 0 rgb(0 0 0/.24),           /* Schattenkante unten */
    0 1px 2px rgb(var(--shadow)/.22),        /* Kontakt */
    0 10px 22px -12px rgb(122 96 42/.55);    /* Umgebung, im Materialton */
  text-shadow:0 1px 0 rgb(0 0 0/.22);        /* auf Metall, nicht auf Goldtext */
}
/* Glanzstreifen — Pseudoelement, damit der Hintergrund ruhig bleibt */
.btn-primary::after{
  content:''; position:absolute; inset:0; z-index:-1; transform:translateX(-120%);
  background:linear-gradient(74deg,transparent 30%,rgb(255 255 255/.34) 50%,transparent 70%);
}
.btn-primary:hover{
  transform:translateY(-1px);
  filter:saturate(1.06) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.5), inset 0 -1px 0 rgb(0 0 0/.26),
    0 2px 4px rgb(var(--shadow)/.24), 0 18px 34px -14px rgb(122 96 42/.6);
}
.btn-primary:hover::after{ transform:translateX(120%); transition:transform 720ms var(--ease-cine); }
.btn-primary:active{ transform:translateY(0);
  box-shadow:inset 0 2px 5px rgb(0 0 0/.3), 0 1px 1px rgb(var(--shadow)/.2); }

/* Der stille Knopf war randlos-blass. Jetzt: Papier mit echter Kante und
   Innenlicht — er darf nicht mit einem deaktivierten Feld verwechselbar sein. */
.btn-quiet{
  background:linear-gradient(168deg,#fff,var(--paper-2));
  border:1px solid rgb(var(--shadow)/.16);
  box-shadow:var(--rim-light), 0 1px 2px rgb(var(--shadow)/.06);
}
.btn-quiet:hover{ transform:translateY(-1px); border-color:rgb(169 134 63/.45);
  box-shadow:var(--rim-light), var(--e1); }

/* ========================= Flächen bekommen Höhe ========================= */
.sheet,.del,.case,.form-card,.radar{
  box-shadow:var(--rim-light), var(--e2);
  border:1px solid rgb(var(--shadow)/.07);
}
.sheet{ background:linear-gradient(158deg,#fff 0%,#FDFBF7 38%,var(--paper-2) 100%); }
.del  { background:linear-gradient(158deg,#fff 0%,#FCFAF6 46%,var(--paper-2) 100%); }
.price-card,.portrait,.ladder-photo,.film-frame{ box-shadow:var(--rim-dark), var(--e3); }

/* Karten auf Navy waren flache Milchglasflächen. Mit Innenkante und einem
   Verlauf, der dem Lichtmodell folgt, stehen sie im Raum statt darauf. */
.phase,.calc-step{
  background:linear-gradient(158deg, rgb(255 255 255/.085), rgb(255 255 255/.02));
  border:1px solid rgb(255 255 255/.10);
  box-shadow:var(--rim-dark), 0 24px 50px -34px rgb(0 0 0/.6);
}
.calc-out{ background:linear-gradient(158deg, rgb(233 203 161/.20), rgb(233 203 161/.05)); }

/* Hover-Verhalten vereinheitlicht: anheben, Höhe erhöhen, Kante wärmen. */
.sheet,.del,.case,.phase,.calc-step{
  transition:transform var(--d-state) var(--ease-firm),
             box-shadow var(--d-state) var(--ease-firm),
             border-color var(--d-state) var(--ease-firm);
}
.sheet:hover,.del:hover,.case:hover{ transform:translateY(-4px);
  border-color:rgb(169 134 63/.30); box-shadow:var(--rim-light), var(--e3); }
.phase:hover,.calc-step:hover{ transform:translateY(-4px);
  border-color:rgb(233 203 161/.34); box-shadow:var(--rim-dark), 0 34px 64px -32px rgb(0 0 0/.7); }

/* Navy-Bänder: statt einer Fläche zwei sich überlagernde Lichtkörper, die sehr
   langsam gegeneinander wandern. Das ist der Unterschied zwischen „dunkelblauer
   Kasten" und „Raum, in dem Licht steht". */
.band-navy,.final,.price-card{ position:relative; isolation:isolate; }
.band-navy::before,.final::before{ z-index:3; background:var(--hair); }
/* Bewusst inset:0 und Bewegung über background-position statt transform:
   die Sektion darf kein overflow:hidden bekommen, sonst hört position:sticky
   der Phasenkarten auf zu funktionieren — und ein transformiertes Kind hätte
   die Seite seitlich aufgeschoben (am Viewport gemessen: +101 px). */
.aurora{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background:
    radial-gradient(38% 46% at 18% 14%, rgb(228 199 156/.26), transparent 62%),
    radial-gradient(42% 40% at 82% 78%, rgb(70 96 190/.22), transparent 64%);
  background-size:170% 170%, 170% 170%;
  background-position:0% 0%, 100% 100%;
}

/* ========================= Navigation ========================= */
/* Der Balken bekommt eine Messing-Haarlinie an der Unterkante statt eines
   grauen Rahmens, und die aktive Sektion wird markiert (Scroll-Spy in main.js). */
.topbar.stuck{
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:0 14px 34px -26px rgb(var(--shadow)/.55);
}
.topbar.stuck::after{
  content:''; position:absolute; inset:auto 0 0; height:1px; background:var(--hair); opacity:.7;
}
.mainnav a{ transition:color var(--d-state) var(--ease-firm); }
.mainnav a::after{ height:2px; border-radius:2px; background:var(--brass); }
.mainnav a.is-here{ color:var(--ink); }
.mainnav a.is-here::after{ right:0; }
/* Emblem trägt einen Messingring, der eine volle Umdrehung pro Minute macht. */
.brand{ position:relative; }
.brand img{ border-radius:50%; }
/* Im Original steht das Abzeichen deutlich größer neben der Wortmarke — rund
   das Vierfache der Versalhöhe von FOUNDER. Bei 34 px war der Innensatz des
   Abzeichens grauer Brei; erst ab 46 px liest man dort wieder FOUNDER COCKPIT.
   Der laufende Messingring, der hier früher um das Abzeichen kreiste, ist
   entfernt: das Abzeichen trägt seinen Ring bereits selbst, ein zweiter
   dahinter las sich als goldener Rahmen um die Marke. */
.topbar .brand img{ width:60px; height:60px; }
/* .brand .wm-svg stand hier bis r169. Der Kopf traegt die Wortmarke nicht mehr
   als SVG, sondern die fertige Sperrung als ein Bild — die Regel hatte danach
   kein Element mehr. Im Flyer lebt dasselbe SVG weiter, mit eigenem Stil. */
/* Die Marke wird auf Emblemhöhe gebracht — in der Plattform-Sperrung ist der
   Textblock etwa so hoch wie das Abzeichen. */
.topbar .brand{ gap:.85rem; }
.lang-bar{ border-color:rgb(var(--shadow)/.14); box-shadow:var(--rim-light); overflow:hidden; }
.lang-bar a[aria-current="true"]{ background:var(--navy); box-shadow:inset 0 1px 0 rgb(255 255 255/.14); }

/* Fortschrittsschiene: Messing mit laufendem Glanz statt Flachverlauf. */
.rail{ height:3px; background:var(--brass); box-shadow:0 0 18px -2px rgb(169 134 63/.7); }

/* ========================= Hero ========================= */
/* Das Raster driftet minimal — der Raum steht dadurch nicht still, auch wenn
   der Film längst zu Ende ist. */
.stage-grid{ background-position:0 0; }
/* Ein Lichtstreifen zieht sehr langsam durch den Schleier: Fensterlicht. */
.stage-veil::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgb(255 255 255/.16) 50%,transparent 66%);
  mix-blend-mode:soft-light;
}

/* Kennzahlen im Hero: die Zahl bekommt Messing statt Tinte und einen Glanz,
   der sehr langsam durchläuft. Gold als TEXT ist auf Papier verboten — deshalb
   der dunkle Messingverlauf (gold-deep-Familie), nicht --gold. */
.triade b{
  background:linear-gradient(96deg,#7C6229 0%,#A9863F 30%,#E2C089 46%,#A9863F 62%,#7C6229 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.triade{ border-top:0; position:relative; }
.triade::before{ content:''; position:absolute; inset:0 0 auto; height:1px; background:var(--hair); opacity:.8; }

/* ========================= Sektionsköpfe ========================= */
/* Die Nummer der Sektion wird gross und blass hinter den Kopf gesetzt.
   Reines ::before auf .reg b — kein zusätzliches Markup, keine i18n-Berührung. */
.shead .reg b{ position:relative; }
.shead .reg b::after{
  content:''; position:absolute; left:-.2em; right:-.2em; bottom:-.15em; height:1px;
  background:var(--gold-deep); opacity:.45;
}

/* ========================= 02 · Phasen als Stapel =========================
   Auf grossen Schirmen bleiben die drei Phasen beim Scrollen stehen und legen
   sich übereinander — die Aussage der Sektion ist „keine lässt sich
   überspringen", und der Stapel führt das vor, statt es zu behaupten.
   Unter 1100px bleibt das gewöhnliche Raster: Sticky-Stapeln auf schmalen
   Schirmen sperrt den Daumen aus. */
@media(min-width:1100px){
  .phases{ display:block; }
  .phase{
    position:sticky; top:clamp(6rem,11vh,8rem);
    margin-bottom:clamp(1.2rem,2vw,2rem);
    display:grid; grid-template-columns:7rem minmax(0,1fr) minmax(0,1.1fr);
    grid-template-rows:auto auto; gap:.9rem clamp(1.6rem,3vw,3rem);
    align-items:start; padding:clamp(1.8rem,2.6vw,2.6rem);
    background:linear-gradient(158deg, rgb(23 32 74/.97), rgb(12 18 51/.95));
  }
  .phase:nth-child(2){ top:calc(clamp(6rem,11vh,8rem) + 1.1rem); }
  .phase:nth-child(3){ top:calc(clamp(6rem,11vh,8rem) + 2.2rem); }
  /* Die Ziffer läuft über beide Zeilen, Titel und Tausch stapeln daneben,
     der Fliesstext steht in der dritten Spalte — eine Zeile, keine Lücken. */
  .phase-no{ grid-row:1 / 3; margin:0; font-size:clamp(3rem,4.4vw,4.8rem); }
  .phase h3  { grid-column:2; grid-row:1; margin:0; }
  .phase .trade{ grid-column:2; grid-row:2; margin:0; padding:.9rem 0 0;
    border-bottom:0; border-top:1px solid rgb(255 255 255/.14); }
  .phase > p:not(.trade){ grid-column:3; grid-row:1 / 3; }
}

/* ========================= 03 · Der Tag ========================= */
/* Jede Zeile hebt sich beim Überfahren aus dem Papier — der Ablauf wird
   dadurch begehbar statt tabellarisch. */
.act{ position:relative; transition:background-color var(--d-state) var(--ease-firm); }
.act::before{
  content:''; position:absolute; inset:0 -1.2rem; border-radius:10px; z-index:-1;
  background:linear-gradient(158deg,#fff,var(--paper-2)); opacity:0;
  transition:opacity var(--d-state) var(--ease-firm);
}
.act:hover::before{ opacity:1; }
.act:hover{ box-shadow:none; }
.act-time{ font-family:'JetBrains Mono',monospace; }

/* ========================= 04 · Screening ========================= */
/* Die Netzringe atmen, damit die Karte lebt, ohne Werte vorzutäuschen. */
.radar::after{
  content:''; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
  background:radial-gradient(56% 56% at 50% 52%, rgb(169 134 63/.14), transparent 66%);
}
.pillars li{ transition:padding-left var(--d-state) var(--ease-firm),
                        color var(--d-state) var(--ease-firm); }
.pillars li:hover{ padding-left:.7rem; color:var(--gold-deep); }

/* ========================= 05 · Anspruchsband ========================= */
.claim{ box-shadow:var(--rim-dark), var(--e3); }
/* Glut über dem Boardroom — dieselbe Wärme wie der Kamin im Finale. */
.claim::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(46% 60% at 84% 68%, rgb(233 160 74/.26), transparent 66%);
}

/* ========================= 08 · Preis ========================= */
/* Um die Preiskarte läuft ein Messingschimmer — genau ein Element auf der
   Seite bekommt diese Auszeichnung, sonst entwertet sie sich. */
/* Kein rotierender Rahmen mehr: die Ring-Maske (mask-composite) hat in Chrome
   nicht gegriffen und die rohen Konus-Keile lagen als zwei Diagonalen quer über
   der Karte — am echten Rendering gesehen. Stattdessen wandert ein Lichtpunkt
   die obere Messing-Haarlinie entlang. Gleicher Zweck, keine Maskenabhängigkeit. */
.price-card::before{
  height:1px; background:
    linear-gradient(90deg,transparent,rgb(233 203 161/.55) 24%,transparent 80%),
    linear-gradient(90deg,transparent 42%,rgb(255 240 214/.95) 50%,transparent 58%);
  background-size:100% 100%, 42% 100%;
  background-repeat:no-repeat;
  background-position:0 0, -42% 0;
}
.price-card::after{ content:none; }
.price b{
  background:linear-gradient(96deg,#B08F49 0%,#E9CBA1 28%,#FFF0D6 44%,#E9CBA1 60%,#B08F49 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.seatbar{ box-shadow:inset 0 1px 2px rgb(0 0 0/.4); }
.seatbar i{ background:var(--brass); box-shadow:0 0 12px -2px rgb(233 203 161/.8); }

/* Formularfelder: Innenkante statt flacher Rahmen. */
#checkout-form input:not([type=checkbox]){
  box-shadow:inset 0 1px 2px rgb(var(--shadow)/.07);
}
#checkout-form input:focus{ box-shadow:inset 0 1px 2px rgb(var(--shadow)/.05),
  0 0 0 3px rgb(169 134 63/.18); }

/* ========================= FAQ ========================= */
.faq details{ transition:background-color var(--d-state) var(--ease-firm); }
.faq summary{ transition:padding-left var(--d-state) var(--ease-firm); }
.faq details[open] summary,.faq summary:hover{ padding-left:.6rem; }
.faq details[open]{ background:linear-gradient(158deg,rgb(255 255 255/.7),transparent 60%); }

/* ========================= Finale mit Kamin-Loop ========================= */
.final-stage{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.final-still,.final-film{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:72% 50%; transform:scale(1.06);
  filter:contrast(1.06) saturate(1.05);
}
.final-film{ opacity:0; transition:opacity 1.2s var(--ease-cine); }
.final-film.is-playing{ opacity:1; }
/* Schleier: links dicht (dort steht die Entscheidung), rechts offen (dort brennt
   das Feuer). Spiegelbild des Hero-Schleiers, auf Navy statt auf Papier. */
.final-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(96deg,
      rgb(9 14 40/.97) 0%, rgb(9 14 40/.94) 32%, rgb(9 14 40/.80) 50%,
      rgb(9 14 40/.58) 68%, rgb(9 14 40/.42) 100%),
    radial-gradient(52% 60% at 86% 62%, rgb(233 160 74/.22), transparent 64%);
}
.final-grid{ grid-template-columns:1fr; }
@media(min-width:900px){ .final-grid{ grid-template-columns:1fr; } }
.final-copy{ max-width:min(100%,46rem); }
@media(max-width:899px){
  /* Hochkant liegt der Text ÜBER dem Feuer → deutlich dichter decken. */
  .final-veil{ background:
      linear-gradient(to bottom, rgb(9 14 40/.95) 0%, rgb(9 14 40/.86) 62%, rgb(9 14 40/.72) 100%),
      radial-gradient(70% 40% at 60% 100%, rgb(233 160 74/.24), transparent 66%); }
  .final-still,.final-film{ object-position:64% 60%; }
}

/* ========================= Fussbereich ========================= */
.foot{ position:relative; background:linear-gradient(to bottom,var(--paper-2),var(--paper-3)); }
.foot::before{ content:''; position:absolute; inset:0 0 auto; height:1px; background:var(--hair); opacity:.6; }
.foot-grid a:not(.brand){ position:relative; width:fit-content; }
.foot-grid a:not(.brand)::after{
  content:''; position:absolute; left:0; right:100%; bottom:.15rem; height:1px;
  background:var(--gold-deep); transition:right var(--d-state) var(--ease-firm);
}
.foot-grid a:not(.brand):hover::after{ right:0; }

/* Signatur: dieselbe gesperrte Wortmarke, nur gross. Die Grösse kommt aus der
   Viewportbreite (7 Zeichen schwer gesetzt ≈ 5.4 Zeichenbreiten), damit sie auf
   jeder Breite bündig sitzt — ohne Media-Query. */
.foot-mark{ margin-top:clamp(2.4rem,5vw,4rem); overflow:hidden; }
.foot-mark .wordmark{ flex-direction:row; align-items:baseline; width:100%;
  justify-content:space-between; font-size:clamp(1.5rem,9.2vw,8.4rem); gap:.24em; }
.foot-mark .wordmark i{ font-size:.78em; margin-right:0; margin-top:0; letter-spacing:.06em; }
.foot-mark .wordmark b{ color:rgb(var(--shadow)/.16); }
.foot-mark .wordmark i{
  letter-spacing:.06em; color:transparent;
  background:linear-gradient(96deg,#C9AC72 0%,#EBD3AA 24%,#A9863F 48%,#EBD3AA 72%,#C9AC72 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
}

/* ==========================================================================
   DAUERSCHLEIFEN (ambient)
   Lange Perioden, kleine Amplituden. Wenn eine davon auffällt, ist sie zu stark.
   Sammelblock, damit prefers-reduced-motion sie in einem Zug abschalten kann.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .stage-grid       { animation:gridDrift 60s linear infinite; }
  .stage-veil::after{ animation:lightSweep 24s var(--ease-cine) infinite; }
  .aurora           { animation:auroraDrift 42s ease-in-out infinite alternate; }
  .rail             { animation:railGlow 6s ease-in-out infinite; }
  .triade b         { animation:sheen 9s ease-in-out infinite; }
  .price b          { animation:sheen 7s ease-in-out infinite; }
  .foot-mark .wordmark i{ animation:sheen 14s ease-in-out infinite; }
  .price-card::before{ animation:hairTravel 11s var(--ease-cine) infinite; }
  @keyframes hairTravel{ 0%{ background-position:0 0,-42% 0; }
                         70%,100%{ background-position:0 0,142% 0; } }
  .seal             { animation:breathe 7s ease-in-out infinite; }
  .claim::after     { animation:emberPulse 9s ease-in-out infinite; }
  .radar::after     { animation:emberPulse 11s ease-in-out infinite; }

  @keyframes gridDrift { to  { background-position:clamp(56px,5vw,96px) clamp(56px,5vw,96px); } }
  @keyframes lightSweep{ 0%,72%,100%{ transform:translateX(-38%); opacity:0; }
                         84%       { opacity:1; }
                         96%       { transform:translateX(38%); opacity:0; } }
  @keyframes auroraDrift{ from{ background-position:0% 0%,   100% 100%; }
                          to  { background-position:26% 18%, 74% 82%;   } }
  @keyframes spin      { to{ transform:rotate(360deg); } }
  @keyframes railGlow  { 0%,100%{ box-shadow:0 0 14px -3px rgb(169 134 63/.55); }
                         50%    { box-shadow:0 0 22px -1px rgb(233 203 161/.85); } }
  @keyframes sheen     { 0%,100%{ background-position:100% 0; }
                         50%    { background-position:0 0; } }
  @keyframes breathe   { 0%,100%{ opacity:.72; } 50%{ opacity:1; } }
  @keyframes emberPulse{ 0%,100%{ opacity:.72; transform:scale(1); }
                         50%    { opacity:1;   transform:scale(1.04); } }
}

/* ==========================================================================
   SCROLL-CHOREOGRAFIE r7 — nativ (animation-timeline)
   Ergänzt den r6-Block. Ohne Unterstützung steht überall das Endbild.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){

    /* Hero fährt beim Verlassen sanft zurück und dunkelt ab — die Tür bleibt
       hinter dem Inhalt zurück, statt einfach wegzuscrollen. */
    .stage{ animation:heroRecede linear both;
      animation-timeline:view(); animation-range:exit 0% exit 100%; }
    @keyframes heroRecede{ from{ transform:scale(1); filter:brightness(1); }
                           to  { transform:scale(1.12); filter:brightness(.72); } }

    /* Karten treten mit leichter Kippung aus der Tiefe ein. 6 Grad, nicht 30 —
       eine Karte, die sich sichtbar dreht, sieht nach Vorlage aus. */
    .del,.sheet,.case,.calc-step{
      animation:cardRise linear both;
      animation-timeline:view(); animation-range:entry 0% entry 62%;
      transform-origin:50% 100%;
    }
    @keyframes cardRise{
      from{ opacity:.2; transform:perspective(1200px) rotateX(6deg) translate3d(0,34px,0) scale(.97); }
      to  { opacity:1;  transform:none; }
    }

    /* Fliesstext wird beim Eintritt „gelesen": die Zeile hellt von links nach
       rechts auf. Reine Maske auf dem Element — kein Wort-Splitting, damit der
       Sprachumschalter (data-ru sitzt in Kind-Knoten) unversehrt bleibt. */
    .lede,.shead-note{
      animation:readThrough linear both;
      animation-timeline:view(); animation-range:entry 18% entry 84%;
    }
    @keyframes readThrough{
      from{ -webkit-mask-image:linear-gradient(96deg,#000 0%,#000 0%,rgb(0 0 0/.18) 14%,rgb(0 0 0/.18) 100%);
                    mask-image:linear-gradient(96deg,#000 0%,#000 0%,rgb(0 0 0/.18) 14%,rgb(0 0 0/.18) 100%); }
      to  { -webkit-mask-image:linear-gradient(96deg,#000 0%,#000 100%,rgb(0 0 0/.18) 114%,rgb(0 0 0/.18) 200%);
                    mask-image:linear-gradient(96deg,#000 0%,#000 100%,rgb(0 0 0/.18) 114%,rgb(0 0 0/.18) 200%); }
    }

    /* Der Kamin-Abschnitt kommt aus dem Dunkeln hoch. */
    .final-stage{ animation:hearthIn linear both;
      animation-timeline:view(); animation-range:entry 0% entry 90%; }
    @keyframes hearthIn{ from{ opacity:.35; transform:scale(1.1); }
                         to  { opacity:1;   transform:none; } }

    /* Die Wortmarke im Fuss läuft beim Erscheinen auseinander. */
    .foot-mark .wordmark b{ animation:markL linear both;
      animation-timeline:view(); animation-range:entry 0% entry 90%; }
    .foot-mark .wordmark i{ animation:markR linear both;
      animation-timeline:view(); animation-range:entry 0% entry 90%; }
    @keyframes markL{ from{ transform:translateX(-8%); opacity:.3; } to{ transform:none; opacity:1; } }
    @keyframes markR{ from{ transform:translateX(8%);  opacity:.3; } to{ transform:none; opacity:1; } }
  }
}

/* Ein Schalter für alles Bewegte. Steht bewusst als LETZTE Regel der Datei. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition-duration:1ms!important;
  }
}

/* ---------- Korrekturen am echten Bild geprüft ---------- */
/* Die Sprachumschaltung stand vor dem hellen Türbild ohne eigenen Grund:
   RU war praktisch unsichtbar, solange die Topbar noch transparent ist. */
.lang-bar{ background:color-mix(in srgb,var(--paper) 72%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.lang-bar a{ color:var(--ink); }
.lang-bar a[aria-current="false"]:hover{ background:rgb(var(--shadow)/.06); }

/* Die Kennzahlen standen knapp unter der Falz. Enger gesetzt statt kleiner:
   die Zeile darf nicht angeschnitten sein, sie ist der Vertrauensbeleg. */
.hero{ padding-bottom:clamp(1.2rem,2.4vh,1.8rem); }
.triade{ gap:.9rem 1.4rem; padding-top:clamp(.6rem,1.2vh,1rem); }
.triade span{ margin-top:.25rem; line-height:1.35; }

/* Der Kamin-Schleier war am echten Frame zu offen — der Abschnitt las sich als
   Foto mit Text darauf statt als Navy-Band mit Feuer darin. Dichter gezogen,
   Glut dafür stärker: das Feuer soll leuchten, nicht der Raum. */
.final-veil{
  background:
    linear-gradient(96deg,
      rgb(8 12 36/.985) 0%, rgb(8 12 36/.97) 34%, rgb(8 12 36/.90) 52%,
      rgb(8 12 36/.80) 72%, rgb(8 12 36/.70) 100%),
    radial-gradient(40% 46% at 84% 58%, rgb(240 158 62/.30), transparent 66%);
}
/* Terrassenbild im Anspruchsband: Kopf nicht anschneiden. */
.claim img{ object-position:50% 22%; }


/* ==========================================================================
   r8 — TYPOGRAFIE UND FARBE AUF LUXUSNIVEAU
   Befund: die Seite las sich billig, obwohl das Raster stimmte. Zwei Ursachen,
   beide typografisch/farblich, keine davon strukturell:

   A  DISPLAY WAR EIN GROTESK. Space Grotesk ist eine Tech-Schrift mit
      eigenwilligen Formen (G, S, Ziffern). Bei 5 rem Schriftgrad liest das als
      Startup, nicht als Kapital. Grosse Aussagen laufen jetzt in NEWSREADER —
      einer Antiqua mit optischer Achse, moderatem Strichkontrast und ruhiger
      Serife. Registerwechsel: Economist/FT statt SaaS-Landing. Die Wortmarke,
      alle Registraturzeilen, Zahlen und Buttons bleiben grotesk — der Kontrast
      zwischen beiden Familien ist genau das, was teuer wirkt.
   B  DIE GRAUSTUFEN WAREN BLAUSTICHIG UND ZU HELL. #6B7085 auf warmem Papier
      ergibt einen kalten Schleier — der klassische „Vorlage"-Eindruck.
      Sekundärtext wird wärmer und dunkler, Tinte tiefer, Messing bekommt eine
      echte Lichtstufe statt eines einzigen Mitteltons.
   ========================================================================== */

:root{
  /* Tinte: tiefer und wärmer. #16192B war ein Blaugrau, kein Schwarz. */
  --ink:      #0F1222;
  --ink-mute: #5C5C68;          /* neutral-warm statt blaustichig, 6.1:1 auf Papier */
  --ink-soft: #7A7A85;          /* nur für Beiwerk, nie für Fliesstext */
  /* Messing als Stufenleiter statt eines Mitteltons */
  --gold-hi:   #F2DFBE;
  --gold:      #E4C79C;
  --gold-deep: #9C7B33;         /* dunkler → 5.4:1 auf Papier, sicher für Text */
  --gold-ink:  #6E5522;         /* für kleine Schrift auf hellen Karten */
  /* Papier: eine Stufe mehr, damit Flächen sich unterscheiden können */
  --paper-4:   #E4DCCC;
}

/* Fliesstext: ruhiger gesetzt. Kerning und Ligaturen an, Ziffern tabellarisch
   dort, wo sie in Reihen stehen. */
body{
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  letter-spacing:-.003em;
  color:var(--ink);
}

/* ---------- Display: Antiqua ---------- */
h1,h2,blockquote,.claim p{
  font-family:Newsreader,Georgia,'Times New Roman',serif;
  font-weight:400;
  font-variation-settings:"opsz" 60;
  letter-spacing:-.012em;
}
h1{ line-height:1.0;  font-size:clamp(2.9rem,1.7rem + 3.8vw,6.1rem); }
h2{ line-height:1.04; font-size:clamp(2.05rem,1.4rem + 2.3vw,3.9rem); }
/* Der goldene Akzent im H1 steht in derselben Antiqua — kursiv, weil das der
   Stelle Betonung gibt, ohne einen zweiten Farbwert zu brauchen. */
.hero h1 em{ font-style:italic; font-variation-settings:"opsz" 72; }
.hero h1 .gold{ color:var(--gold-deep); }
/* Unterüberschriften bleiben grotesk: sie sind Etiketten, keine Aussagen. */
h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-.012em; }

blockquote{ font-size:clamp(1.3rem,1.05rem + 1vw,2rem); line-height:1.26;
  font-style:italic; font-variation-settings:"opsz" 48; }
.claim p{ font-size:clamp(1.35rem,1rem + 1.3vw,2.3rem); line-height:1.22;
  font-weight:300; font-variation-settings:"opsz" 72; }

/* ---------- Registratur / Etiketten ---------- */
/* Weniger Sperrung, mehr Gewicht: 0.22em war Dekoration, 0.16em ist Handwerk. */
.reg,.factline,.trade,.seal,.sheet-reg,.case-tag,.act-time{ letter-spacing:.16em; }
.reg{ font-weight:500; color:var(--gold-ink); }
.band-navy .reg,.final .reg,.price-card .reg{ color:var(--gold); }

/* ---------- Fliesstext-Farben ---------- */
.shead-note,.act p,.del p,.pillars-note,.radar-wrap figcaption p,.faq p,
.facts dd,.form-intro,.foot-grid p,.qualify,.ladder-note,.reversal,.assure{
  color:var(--ink-mute);
}
.lede{ color:var(--ink); font-weight:400; }
.hero .lede{ font-size:clamp(1.14rem,1rem + .6vw,1.55rem); line-height:1.46; }

/* Auf Navy war Weiss mit .7 Deckung stumpf. Ein warm getöntes Hellgrau bei
   voller Deckung liest sauberer und wirkt nicht wie ausgeblichener Text. */
.band-navy .shead-note,.phase p,.calc-step p,.disclaimer,.sealed p,
.final-copy > p,.seats p,.price-note{ color:#C9CCDA; }
.final-note{ color:#9AA0B4!important; }
.incl li{ color:#E6E8F0; }

/* ---------- Zahlen ---------- */
/* Kennzahlen laufen in der Antiqua: eine 26 in Newsreader hat Zeichnung,
   dieselbe Zahl in Mono hat Technik. Hier ist Zeichnung richtig. */
.triade b,.facts dt,.calc-step b,.price b,.case-num{
  font-family:Newsreader,Georgia,serif; font-weight:400;
  font-variation-settings:"opsz" 72; letter-spacing:-.02em;
}
.triade b{ font-size:clamp(2rem,1.3rem + 1.9vw,3.1rem); }
.facts dt{ font-size:clamp(1.7rem,1.2rem + 1.2vw,2.5rem); color:var(--gold-deep); }
.price b{ font-size:clamp(3.8rem,2.4rem + 4.8vw,6.6rem); }
.calc-step b{ font-size:clamp(1.9rem,1.2rem + 1.9vw,3.1rem); }

/* ---------- Karten, Kanten, Flächen ---------- */
.band-alt{ background:linear-gradient(to bottom,var(--paper-2),var(--paper-3)); }
.sheet blockquote,.symptoms li,.ladder-list li,.act,.faq details,.pillars li,
.facts > div,.radar-legend li{ border-color:rgb(15 18 34/.11); }

/* Kleine Auszeichnungen bekommen den dunklen Messington: Gold auf Papier ist
   in Kleingraden sonst nicht sicher lesbar. */
.symptoms li::before,.ladder-list li::before,.incl li::before,.assure li::before,
.factline li::before,.act-time,.sheet-reg,.case-tag,.pillars li b,.consent a,
.faq summary::after{ color:var(--gold-ink); }
.qualify{ border-left-color:rgb(156 123 51/.55); }
.qualify b{ color:var(--ink); }

/* Antiqua-Ziffern bauen mehr Höhe als die Groteske vorher — die Kennzahlenzeile
   war damit wieder angeschnitten. Am echten Viewport nachgezogen. */
.hero{ gap:clamp(.9rem,2.2vh,1.7rem); padding-top:clamp(4.6rem,7vh,6rem); }
.hero .lede{ line-height:1.42; }
.triade b{ font-size:clamp(1.9rem,1.25rem + 1.6vw,2.8rem); }
.triade span{ font-size:clamp(.66rem,.62rem + .1vw,.76rem); }


/* ==========================================================================
   r9 — DUNKEL DOMINANT, INHALT SCHWEBT DARAUF
   Vorlage: die vom Kunden benannten Referenzen (Baulig, DCF Verlag, business.de).
   Das gemeinsame Prinzip dort ist NICHT eine bestimmte Farbe, sondern ein
   Verhältnis: die Seite ist dunkel, und der Inhalt liegt als HELLE, klar
   begrenzte Tafel darauf. Volumen entsteht durch dieses Verhältnis, nicht durch
   Schatten — auf hellem Grund kann eine helle Karte nie plastisch werden, weil
   ihr die Kontrastkante fehlt.

   Umgesetzt in unseren Markenfarben statt in Schwarz/Orange:
   Navy trägt die Seite, Papier trägt den Inhalt, Messing trägt die Handlung.
   60-30-10 bleibt gültig — die Rollen von 60 und 30 tauschen den Platz.
   ========================================================================== */

/* Zwei Navy-Bänder dürfen nicht direkt aneinanderstossen, ohne dass man die
   Naht sieht. Jedes zweite bekommt Licht von der anderen Seite und eine Spur
   mehr Tiefe — die Sektion liest sich dadurch als eigener Raum. */
.band-navy:nth-of-type(even){
  background:
    radial-gradient(58% 48% at 92% 0%, rgb(228 199 156/.10), transparent 60%),
    linear-gradient(200deg, var(--navy-soft), var(--navy) 62%);
}
.band-navy + .band-navy{ padding-top:calc(var(--band-y) * .72); }

/* ---------- Inhalt als helle Tafel ----------
   Listen und Aufzählungen sind auf Navy nackt. Sie bekommen eine Tafel —
   dasselbe Bauteil wie eine Karte, nur breiter. */
.band-navy .pillars,
.band-navy .faq,
.band-navy .acts{
  background:linear-gradient(158deg,#fff 0%,#FCFAF6 44%,var(--paper-2) 100%);
  border:1px solid rgb(255 255 255/.5);
  border-radius:var(--r);
  padding:clamp(1.4rem,2.6vw,2.4rem);
  box-shadow:var(--rim-light), var(--e3);
}
/* Innerhalb der Tafel gilt wieder die helle Typografie. */
.band-navy .pillars li,.band-navy .faq summary{ color:var(--ink); }
.band-navy .faq p,.band-navy .pillars-note{ color:var(--ink-mute); }
.band-navy .faq details:first-child{ border-top:0; }
.band-navy .faq details:last-child{ border-bottom:0; }
.band-navy .pillars li:first-child{ border-top:0; }
.band-navy .pillars li:last-child{ border-bottom:0; }
.band-navy .pillars ol{ margin-bottom:0; }
.band-navy .pillars-note{ margin:1.2rem 0 0; }

/* Der Mentor-Abschnitt steht jetzt auf Navy: Kennzahlen und Fliesstext hell. */
.band-navy .facts > div{ border-color:rgb(255 255 255/.16); }
.band-navy .facts dt{ color:var(--gold); }
.band-navy .facts dd{ color:#C9CCDA; }
.band-navy .mentor-copy .lede{ color:#EDEFF5; }
.band-navy .rule-note{ color:#AFB4C6; }

/* Die Symptom-Karten liegen als Papier auf Navy — das ist der Kern des
   Referenz-Looks. Sie brauchen dort eine kräftigere Kante und mehr Abhebung. */
.band-navy .sheet,.band-navy .del,.band-navy .case,.band-navy .radar{
  border:1px solid rgb(255 255 255/.55);
  box-shadow:var(--rim-light), 0 3px 6px rgb(0 0 0/.28), 0 40px 80px -44px rgb(0 0 0/.85);
}
.band-navy .sheet:hover,.band-navy .del:hover{
  box-shadow:var(--rim-light), 0 5px 10px rgb(0 0 0/.32), 0 56px 100px -46px rgb(0 0 0/.9);
}

/* ---------- Auszeichnungsplatte in Überschriften ----------
   Die Referenzen setzen genau EIN Wort pro Headline in eine Platte. Das ist
   das stärkste Einzelmittel dieser Seiten: es zwingt den Blick auf das Wort,
   das die Aussage trägt. Bei uns: Messingplatte mit Navy-Schrift auf dunklem
   Grund, Navy-Platte mit Messing-Schrift auf hellem. Nie mehr als einmal
   pro Überschrift — sonst ist es Textmarker statt Auszeichnung. */
.hl{
  display:inline-block; padding:.02em .3em .1em; border-radius:.12em;
  background:var(--brass); color:var(--navy);
  box-shadow:0 1px 0 rgb(255 255 255/.35) inset, 0 10px 24px -14px rgb(122 96 42/.8);
  font-style:normal;
}
.band-navy .hl,.final .hl{ background:var(--brass); color:var(--navy); }
.band:not(.band-navy) .hl{
  background:linear-gradient(158deg,var(--navy-soft),var(--navy));
  color:var(--gold);
  box-shadow:0 1px 0 rgb(255 255 255/.14) inset, 0 12px 26px -14px rgb(12 18 51/.7);
}

/* ---------- Handlung ----------
   Die Referenzen benutzen eine grosse, satte, flache Fläche. Unser Messing
   bleibt ein Verlauf (Metall ohne Horizont wirkt wie Plastik), wird aber
   dichter, grösser und bekommt eine klare dunkle Kante. */
.btn-primary{
  background:linear-gradient(168deg,#DCBB7E 0%,#C09A50 40%,#A07B33 74%,#82632A 100%);
  border:1px solid #6E5322;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.45), inset 0 -1px 0 rgb(0 0 0/.28),
    0 2px 3px rgb(var(--shadow)/.28), 0 14px 26px -12px rgb(110 83 34/.7);
  letter-spacing:.005em;
}
.btn{ --btn-y:1.05rem; --btn-x:1.9rem; min-height:54px; font-size:var(--t-body); }
.btn-sm{ --btn-y:.62rem; --btn-x:1.15rem; min-height:42px; font-size:var(--t-micro); }
.btn-lg{ --btn-y:1.3rem; --btn-x:2.6rem; font-size:calc(var(--t-body)*1.1); }
/* Auf Navy braucht der stille Knopf eine eigene Fassung. */
.band-navy .btn-quiet,.final .btn-quiet{
  background:rgb(255 255 255/.06); border-color:rgb(255 255 255/.28); color:#fff;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.16);
}
.band-navy .btn-quiet:hover,.final .btn-quiet:hover{ background:rgb(255 255 255/.12); }

/* ---------- Sektionsköpfe auf Navy ---------- */
.band-navy .shead::after{ background:linear-gradient(90deg,var(--gold),transparent 70%); }
.band-navy .shead .reg b::after{ background:var(--gold); opacity:.6; }

/* ---------- Der Tag: helle Sektion, aber die Tafel bleibt ---------- */
.band:not(.band-navy) .acts{ background:none; border:0; box-shadow:none; padding:0; }

/* Helle Tafeln auf Navy erben sonst die weisse Bandfarbe — der Text wäre
   unsichtbar. Innerhalb einer Tafel gilt wieder die Papier-Typografie. */
.band-navy .sheet,.band-navy .del,.band-navy .case,
.band-navy .radar,.band-navy .pillars,.band-navy .faq{ color:var(--ink); }
.band-navy .sheet h3,.band-navy .del h3,.band-navy .sheet blockquote{ color:var(--ink); }
.band-navy .symptoms li,.band-navy .del p{ color:var(--ink); }
.band-navy .del p,.band-navy .radar-wrap figcaption p{ color:var(--ink-mute); }
.band-navy .sheet-reg,.band-navy .case-tag{ color:var(--gold-ink); }
.band-navy .radar-legend li{ color:var(--ink); border-color:rgb(15 18 34/.1); }
.band-navy .lbl{ fill:var(--ink-mute); }

/* Die Platte trägt Gewicht genug — enger gesetzt, sonst drückt sie die Zeile
   auseinander und die Überschrift zerfällt in zwei Blöcke. */
.hl{ padding:.0em .24em .06em; }

/* Sitzplatzzeile in der Mobilleiste bricht sonst zwischen Zahl und Wort. */
.stickybar > div > span{ white-space:nowrap; }


/* ==========================================================================
   r10 — Lesbarkeitsfehler, am gelieferten Screenshot gefunden
   ========================================================================== */

/* FEHLER 1: Die Radar-Legende steht in der figcaption, also AUSSERHALB der
   hellen Tafel — meine r9-Regel gab ihr trotzdem Tinte auf Navy. Sie war damit
   praktisch unsichtbar. Ausserhalb der Tafel gilt die helle Schrift. */
.band-navy .radar-wrap > figcaption .radar-legend li{ color:#E6E8F0; border-color:rgb(255 255 255/.16); }
.band-navy .radar-wrap > figcaption .radar-legend .num{ color:var(--gold); }
.band-navy .radar-wrap > figcaption .radar-legend i{ background:var(--gold); }
.band-navy .radar-wrap > figcaption p{ color:#C9CCDA; }
.band-navy .radar-wrap > figcaption .reg{ color:var(--gold); }

/* FEHLER 2: Auf Russisch ist „предпринимателя" ein Wort von 15 Zeichen. Die
   Begrenzung auf 14ch schnitt den letzten Buchstaben ab, und die Zeile brach
   hinter der Präposition um. Die Breite kommt jetzt aus der Spalte, nicht aus
   einer Zeichenzahl, die nur für Deutsch gemessen war. */
.hero h1{ max-width:none; }
.hero h1 em{ display:inline; }
.hero-inner > h1{ max-width:min(100%,20ch); }
@media(min-width:1100px){ .hero-inner > h1{ max-width:min(100%,17ch); } }
/* Sehr lange zusammengesetzte Wörter dürfen im Zweifel trennen, statt zu
   überlaufen — betrifft Deutsch wie Russisch. */
h1,h2,h3{ overflow-wrap:break-word; hyphens:auto; }

/* FEHLER 3: Die Beschriftungen der Kennzahlen stiessen ohne Spalt aneinander
   („…ПРАКТИКИКОМПАНИЙ"), weil das Raster keinen sicheren Mindestabstand hatte. */
.triade{ grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:1rem 2rem; }
.triade > div{ min-width:0; padding-right:.6rem; }
.triade span{ overflow-wrap:break-word; }


/* ==========================================================================
   r11 — Sektionen 03 und 07 neu, plus Bewegung mit Substanz
   ========================================================================== */

/* ---------- 03 · Der Tag: aus der Liste wird ein Ablauf ----------
   Vorher vier Zeilen unter einer Linie. Jetzt: die Uhrzeit sitzt als Marke auf
   der Spur, der Akt steht als eigene Tafel daneben, und die Spur füllt sich
   beim Scrollen. Der Tag wird begehbar statt tabellarisch. */
@media(min-width:760px){
  .acts{ padding-left:0; }
  .act{ grid-template-columns:7.5rem 1fr; column-gap:2.4rem; border-top:0;
    padding:clamp(1rem,1.8vw,1.6rem) 0; }
  .act:last-child{ border-bottom:0; }
  /* Die Marke auf der Spur */
  .act-time{ position:relative; padding-top:.35rem; text-align:right; padding-right:1.6rem; }
  .act-time::after{
    content:''; position:absolute; right:-.42rem; top:.55rem;
    width:11px; height:11px; border-radius:50%;
    background:var(--paper); border:2px solid var(--gold-deep);
    box-shadow:0 0 0 4px var(--paper), 0 0 16px -2px rgb(156 123 51/.7);
    transition:background-color var(--d-state) var(--ease-firm),
               transform var(--d-state) var(--ease-firm);
  }
  .act:hover .act-time::after{ background:var(--gold-deep); transform:scale(1.25); }
  /* Der Akt als Tafel */
  .act > div,.act-body{ }
  .act::before{ inset:0 -1.4rem; border-radius:12px;
    box-shadow:var(--rim-light), var(--e2); }
  .act:hover::before{ opacity:1; }
  .acts::before,.acts::after{ left:7.5rem; }
}
.act h3{ font-size:clamp(1.15rem,1rem + .55vw,1.5rem); }

/* ---------- 07 · Grössenordnung: die Differenz trägt die Sektion ----------
   Drei gleich grosse Karten geben drei gleich wichtige Zahlen. Wichtig ist aber
   nur eine — die Differenz. Sie bekommt jetzt die Fläche, die anderen beiden
   werden zur Herleitung. */
@media(min-width:860px){
  .calc{ grid-template-columns:1fr 1fr 1.35fr; align-items:stretch; }
  .calc-out{ position:relative; padding:clamp(1.8rem,3vw,2.8rem); }
  .calc-out b{ font-size:clamp(2.4rem,1.4rem + 2.8vw,4.2rem); }
}
.calc-out{ border-color:rgb(228 199 156/.5); }
.calc-out::after{
  content:''; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
  background:radial-gradient(70% 60% at 50% 110%, rgb(228 199 156/.16), transparent 68%);
}
/* Der Zwischenschritt bekommt ein Zeichen: aus 500 wird 650 wird die Differenz. */
@media(min-width:860px){
  .calc-step + .calc-step::before,
  .calc-step + .calc-out::before{
    content:'→'; position:absolute; left:calc(-1 * var(--gap) / 2); top:50%;
    transform:translate(-50%,-50%); color:rgb(228 199 156/.5);
    font-size:1.4rem; line-height:1;
  }
  .calc-step,.calc-out{ position:relative; }
}

/* ==========================================================================
   Bewegung r11 — jede mit einem Grund, keine als Effekt
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){

  /* Karten folgen dem Zeiger leicht — die Fläche bekommt dadurch eine
     Oberfläche statt nur eine Kante. Rein CSS über :hover, kein Zeiger-JS. */
  .del,.sheet,.case,.calc-step,.calc-out,.phase{ will-change:transform; }

  /* Der Messingschimmer läuft über jede Tafelkante, sobald sie erscheint. */
  .sheet::before{ background:linear-gradient(var(--gold),var(--gold-deep),var(--gold));
    background-size:100% 300%; animation:edgeFlow 9s ease-in-out infinite; }
  @keyframes edgeFlow{ 0%,100%{ background-position:0 0; } 50%{ background-position:0 100%; } }

  /* Das Siegel „Inhalt im Raum" bekommt einen langsamen Lichtdurchlauf —
     es ist das einzige Element, das etwas VERWEIGERT, und darf auffallen. */
  .seal{ position:relative; overflow:hidden; }
  .seal::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(78deg,transparent 38%,rgb(228 199 156/.35) 50%,transparent 62%);
    transform:translateX(-120%); animation:sealSweep 6.5s var(--ease-cine) infinite;
  }
  @keyframes sealSweep{ 0%,66%{ transform:translateX(-120%); } 92%,100%{ transform:translateX(120%); } }

  @supports (animation-timeline: view()){
    /* Die Spur im Tagesablauf füllt sich exakt mit dem Lesefortschritt. */
    .acts::after{ animation-range:entry 30% exit 40%; }

    /* Die Preiszahl zählt optisch hoch: sie kommt aus der Tiefe und schärft. */
    .price b{ animation:priceIn linear both;
      animation-timeline:view(); animation-range:entry 10% entry 70%; }
    @keyframes priceIn{
      from{ opacity:.25; letter-spacing:.14em; filter:blur(6px); }
      to  { opacity:1;   letter-spacing:-.02em; filter:none; }
    }

    /* Kennzahlen im Mentor-Block laufen nacheinander ein, nicht gleichzeitig. */
    .facts > div{ animation:factIn linear both;
      animation-timeline:view(); animation-range:entry 0% entry 76%; }
    @keyframes factIn{
      from{ opacity:0; transform:translate3d(-14px,0,0); }
      to  { opacity:1; transform:none; }
    }

    /* Die Auszeichnungsplatte wächst aus der Zeile heraus. */
    .hl{ animation:hlIn linear both; transform-origin:0 50%;
      animation-timeline:view(); animation-range:entry 20% entry 80%; }
    @keyframes hlIn{
      from{ clip-path:inset(0 100% 0 0); }
      to  { clip-path:inset(0 0 0 0); }
    }

    /* Symptomzeilen zeichnen sich nacheinander — die Liste wird gelesen,
       nicht überflogen. */
    .symptoms li,.incl li,.ladder-list li{
      animation:rowIn linear both;
      animation-timeline:view(); animation-range:entry 6% entry 70%;
    }
    @keyframes rowIn{
      from{ opacity:0; transform:translate3d(0,10px,0); }
      to  { opacity:1; transform:none; }
    }

    /* Navy-Bänder öffnen sich an der Oberkante — der Raum wird betreten. */
    .band-navy::before,.final::before{
      animation:seamOpen linear both; transform-origin:50% 50%;
      animation-timeline:view(); animation-range:entry 0% entry 60%;
    }
    @keyframes seamOpen{ from{ transform:scaleX(.2); opacity:0; }
                         to  { transform:scaleX(1);  opacity:1; } }
  }
}

/* Die Säulen-Tafel ist kürzer als die Radar-Spalte — darunter stand ein
   leeres Feld über die halbe Sektionshöhe. Sie läuft jetzt mit, statt
   stehenzubleiben; die Sektion hat damit keine tote Fläche mehr. */
@media(min-width:980px){
  .screen-grid{ align-items:start; }
  .pillars{ position:sticky; top:clamp(6rem,11vh,7.5rem); }
}

/* ══════════════════════════════════════════════════════════════════
   r12 · FOTOGRAFIE — Adobe-Stock, lizenziert
   ------------------------------------------------------------------
   Drei Aufnahmen an den Nahtstellen zwischen den Sektionen. Sie stehen
   nicht als Dekoration, sondern als Zäsur: jede sitzt genau dort, wo der
   Text von einem Gedanken in den nächsten wechselt, und zeigt exakt das,
   wovon der folgende Abschnitt handelt.

   Der Streifen ist bewusst schmal (Kinoformat) und randabfallend. Beide
   Kanten laufen ins Navy der Nachbarbänder aus — das Bild wird dadurch
   Teil der Seite und nicht ein aufgeklebtes Rechteck. Das Motiv fährt
   beim Scrollen langsamer als die Seite (Parallaxe, scroll-driven, kein
   JS), das erzeugt die Tiefe, die ein statisches Bild nie hat.
   ══════════════════════════════════════════════════════════════════ */
.photo-band{
  position:relative; overflow:hidden;
  height:clamp(15rem,34vw,26rem);
  background:var(--navy);
  isolation:isolate;
}
.photo-band img{
  position:absolute; inset:-12% 0 -12%;
  width:100%; height:124%;
  object-fit:cover; object-position:center;
  filter:saturate(.82) contrast(1.04);
}
/* Navy-Auslauf an Ober- und Unterkante + leichte Gesamttönung ins
   Markenblau: die Aufnahmen kommen aus unterschiedlichen Quellen, die
   Tönung bindet sie zu einer Bildsprache zusammen. */
.photo-band::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* Oben steht in allen drei Fällen ein Navy-Band, unten ein helles —
       der Verlauf endet deshalb nicht symmetrisch, sondern in der Farbe
       des jeweiligen Nachbarn. Sonst schneidet die Unterkante hart ab. */
    linear-gradient(to bottom, var(--navy) 0%, rgb(11 16 43/.10) 24%,
                    rgb(11 16 43/.10) 62%, rgb(250 247 242/.55) 88%,
                    var(--paper) 100%),
    linear-gradient(196deg, rgb(16 24 64/.42), rgb(8 12 36/.30));
}
/* Goldene Haarlinie als Abschluss — dasselbe Detail wie auf den Karten. */
.photo-band::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,rgb(201 168 104/.55),transparent);
}

@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .photo-band img{
      animation:photoPan linear both;
      animation-timeline:view(); animation-range:cover 0% cover 100%;
    }
    @keyframes photoPan{
      from{ transform:translate3d(0,-6%,0) scale(1.06); }
      to  { transform:translate3d(0, 6%,0) scale(1.06); }
    }
  }
}

/* Schmale Viewports: die Aufnahmen sind für die Breite gebaut. Mittig
   beschnitten bleibt bei zweien nur die leere Bildhälfte stehen — der
   Ausschnitt wandert deshalb auf das Motiv. */
@media(max-width:700px){
  .photo-band{ height:clamp(11rem,44vw,15rem); }
  .photo-band img{ object-position:28% center; }
}

/* ══════════════════════════════════════════════════════════════════
   r13 · RHYTHMUS, REVERSIBLE BEWEGUNG, TIEFE
   ══════════════════════════════════════════════════════════════════ */

/* ---------- 1 · Naht der Fotostreifen ----------
   Der Streifen läuft in die Farbe seiner Nachbarn aus. Nach dem Wechsel des
   Bandrhythmus steht über zwei Streifen ein helles Band statt Navy — dort
   dreht sich der Verlauf um. */
.photo-band.seam-ln{ background:var(--paper); }
.photo-band.seam-ln::before{
  background:
    linear-gradient(to bottom, var(--paper) 0%, rgb(250 247 242/.55) 12%,
                    rgb(11 16 43/.10) 38%, rgb(11 16 43/.10) 76%,
                    var(--navy) 100%),
    linear-gradient(196deg, rgb(16 24 64/.42), rgb(8 12 36/.30));
}

/* ---------- 2 · Bewegung läuft in beide Richtungen ----------
   Die Reveals hingen an einer Klasse, die der Beobachter einmal setzte und nie
   zurücknahm: beim Zurückscrollen passierte nichts mehr. Wo der Browser
   scroll-getriebene Animationen kann, hängt die Einblendung jetzt direkt an
   der Scrollposition des Elements — sie läuft vorwärts wie rückwärts, ohne
   JavaScript und ohne Klassenzustand. Die Klasse bleibt als Fallback für
   ältere Browser bestehen. */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .js .rv{
      opacity:1; transform:none; transition:none;
      animation:rvIn linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 46%;
    }
    @keyframes rvIn{
      from{ opacity:0; transform:translate3d(0,22px,0); }
      to  { opacity:1; transform:none; }
    }
    /* Der Versatz sitzt jetzt im Scrollweg, nicht in der Zeit — sonst
       liefen gestaffelte Elemente beim Rückwärtsscrollen aus dem Takt. */
    .js .rv[data-d="1"]{ animation-range:entry 7%  entry 49%; }
    .js .rv[data-d="2"]{ animation-range:entry 10% entry 52%; }
    .js .rv[data-d="3"]{ animation-range:entry 13% entry 55%; }
    .js .rv[data-d="4"]{ animation-range:entry 16% entry 58%; }
    .js .rv[data-d="5"]{ animation-range:entry 19% entry 61%; }
    .js .rv[data-d="6"]{ animation-range:entry 22% entry 64%; }
  }
}

/* ---------- 3 · Jedes Band bekommt Licht, Verlauf und Kante ----------
   Bisher trug nur Navy einen Verlauf; die hellen Bänder waren flache Flächen.
   Eine Fläche ohne Lichtquelle hat kein Volumen — egal wie gut der Inhalt
   darauf gebaut ist. Licht kommt auf der ganzen Seite von oben links, warm,
   und fällt nach unten rechts in einen kühleren Ton ab. */
.band:not(.band-navy):not(.band-alt){
  background:
    radial-gradient(72% 46% at 12% -6%, rgb(255 252 246/.95), transparent 62%),
    radial-gradient(46% 38% at 96% 8%,  rgb(233 203 161/.16), transparent 66%),
    linear-gradient(168deg, #FDFBF7 0%, var(--paper) 46%, #F1ECE3 100%);
}
/* Kante zum Nachbarband: ein feiner Schatten von oben, damit die Sektionen
   übereinander liegen statt nebeneinander. */
.band:not(.band-navy)::before{
  content:''; position:absolute; inset:0 0 auto; height:5rem; pointer-events:none;
  background:linear-gradient(to bottom, rgb(15 18 34/.055), transparent);
}
.photo-band + .band::before{ content:none; }

/* Navy bekommt eine zweite Lichtquelle und mehr Tiefe im Verlauf. */
.band-navy{
  background:
    radial-gradient(58% 44% at 8% -4%,  rgb(233 203 161/.15), transparent 62%),
    radial-gradient(50% 40% at 88% 104%, rgb(52 74 148/.30), transparent 64%),
    linear-gradient(154deg, #1B2450 0%, var(--navy-soft) 34%, #0B1029 100%);
}
.band-navy:nth-of-type(even){
  background:
    radial-gradient(58% 44% at 92% -4%, rgb(228 199 156/.15), transparent 62%),
    radial-gradient(50% 40% at 10% 104%, rgb(52 74 148/.30), transparent 64%),
    linear-gradient(206deg, #1B2450 0%, var(--navy-soft) 34%, #0B1029 100%);
}

/* ---------- 4 · Farbe: mehr Sättigung, mehr Kontrast ----------
   Die Palette war korrekt, aber blass — Papier fast weiss, Messing fast beige.
   Beide bekommen Sättigung, das Navy bekommt Tiefe. Die Werte sind so gewählt,
   dass die Kontraste gegen Schrift nicht unter die Lesbarkeitsgrenze fallen. */
:root{
  --paper:   #FBF8F2;
  --paper-2: #F5F0E6;
  --paper-3: #EDE6D8;
  --navy:      #0B1029;
  --navy-soft: #16203F;
  --gold:      #E3C48A;
  --gold-deep: #A8813A;
  --gold-ink:  #6B5220;
  --brass: linear-gradient(160deg,#F0D9B0 0%,#D4B171 32%,#AC8639 58%,#8A6A2C 100%);
}

/* Die Akte-Tafel war beim Bandwechsel die einzige helle Fläche, die nicht in
   der Ink-Liste stand — ihre Überschriften standen weiss auf Papier und waren
   unsichtbar. Am gerenderten Bild gefunden. */
.band-navy .acts{ color:var(--ink); }
.band-navy .acts h3,
.band-navy .acts p,
.band-navy .acts .act-out{ color:var(--ink); }
.band-navy .acts p:not(.act-out){ color:var(--ink-mute); }

/* Auf hellem Grund verschwand die Radar-Tafel im Papier: helle Karte auf
   heller Fläche hat keine Kontrastkante. Sie bekommt dort Weiss, eine echte
   Kante und den Kernschatten — auf Navy bleibt es beim Tafel-Look. */
.band:not(.band-navy) .radar,
.band:not(.band-navy) .sheet,
.band:not(.band-navy) .del,
.band:not(.band-navy) .case{
  background:linear-gradient(158deg,#fff 0%,#FDFBF7 52%,var(--paper) 100%);
  border:1px solid rgb(15 18 34/.09);
  box-shadow:var(--rim-light), var(--e2);
}

/* „Индивидуаль-ный“ — die Silbentrennung aus r10 griff auch in den schmalen
   Karten-Überschriften. Dort wird umbrochen, nicht getrennt. */
.del h3,.sheet h3,.act h3{ hyphens:manual; text-wrap:balance; }

/* ══════════════════════════════════════════════════════════════════
   r14 · HERO, TICKET, RESTFLÄCHEN
   ══════════════════════════════════════════════════════════════════ */

/* ---------- Der zweite Film liegt über dem ersten ----------
   Die Blende läuft über die Opazität; der Türfilm bleibt darunter stehen, bis
   der Kamin sichtbar ist, und wird erst danach angehalten. Kein schwarzer
   Zwischenframe, kein Sprung. */
.stage-film-2{ z-index:1; transition:opacity 1.2s var(--ease-cine); }
.stage-film-2.is-playing{ opacity:1; }

/* ---------- Hero: Bild als Raum, nicht als Aufheller ----------
   Der Film stand fast ungefiltert und zog die ganze Sektion ins Cremefarbene.
   Er bekommt jetzt eine Gradation ins Markenblau und eine Vignette — das Bild
   wird zur Tiefe hinter dem Satz statt zu einer hellen Fläche neben ihm. */
.stage-poster,.stage-film{ filter:contrast(1.12) saturate(.96) brightness(.93); }
.stage-film.is-playing,.stage-film-2.is-playing{
  filter:contrast(1.1) saturate(.96) brightness(.88);
}
.stage::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 96% at 50% 42%, transparent 42%, rgb(11 16 41/.30) 100%),
    linear-gradient(215deg, transparent 46%, rgb(11 16 41/.22) 100%);
}
/* Abschlusskante nach unten: der Hero endet auf einer Linie, nicht im Nichts. */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
  background:linear-gradient(90deg,transparent,rgb(168 129 58/.45) 30%,transparent 78%);
}

/* Die Kennzahlenzeile stand dreizeilig und wurde unten angeschnitten. Die
   Beschriftung bekommt eine Zeilenbreite, die Spalten bleiben in einer Zeile. */
.triade span{ max-width:16ch; line-height:1.25; }
.triade{ gap:.8rem 2.4rem; }

/* ---------- Ticket: Eingabefelder ----------
   Die Felder standen beige in einer weissen Karte und lasen sich als
   deaktiviert. Ein Eingabefeld muss aussehen, als könnte man hineinschreiben:
   heller als seine Umgebung, mit Kante und einer Andeutung von Tiefe. */
.form-grid input,.form-grid select,.form-grid textarea,
#ticket input,#ticket select,#ticket textarea{
  background:#fff;
  border:1px solid rgb(15 18 34/.16);
  box-shadow:inset 0 1px 2px rgb(15 18 34/.06);
  transition:border-color .18s ease, box-shadow .18s ease;
}
#ticket input:hover,#ticket select:hover,#ticket textarea:hover{
  border-color:rgb(15 18 34/.28);
}
#ticket input:focus,#ticket select:focus,#ticket textarea:focus{
  outline:none;
  border-color:var(--gold-deep);
  box-shadow:inset 0 1px 2px rgb(15 18 34/.05), 0 0 0 3px rgb(168 129 58/.18);
}

/* Die Felder trugen weiter Papierton: die frühere Regel steht mit
   #checkout-form höher in der Spezifität. Sie wird dort korrigiert, wo sie
   entstanden ist, statt eine dritte Regel darüberzulegen. */
#checkout-form input:not([type=checkbox]),
#checkout-form select,#checkout-form textarea{
  background:#fff;
  border:1px solid rgb(15 18 34/.16);
  box-shadow:inset 0 1px 2px rgb(15 18 34/.06);
}
#checkout-form input:not([type=checkbox]):hover{ border-color:rgb(15 18 34/.30); }
#checkout-form input:focus{
  background:#fff; border-color:var(--gold-deep);
  box-shadow:inset 0 1px 2px rgb(15 18 34/.05), 0 0 0 3px rgb(168 129 58/.20);
}

/* Der zweite Film bekam z-index:1 und lag damit ÜBER dem Schleier — die
   komplette Textspalte stand ungedeckt auf dem hellen Kaminbild. Die
   Stapelung der Bühne wird deshalb einmal vollständig festgeschrieben,
   statt sie aus der Dokumentreihenfolge zu erraten. */
.stage-poster{ z-index:0; }
.stage-film  { z-index:1; }
.stage-film-2{ z-index:2; }
.stage::after{ z-index:3; }   /* Vignette liegt auf dem Bild ... */
.stage-veil  { z-index:4; }   /* ... der Schleier über allem Bildhaften */
.stage-grid  { z-index:5; }

/* max-width auf der Beschriftung brach die Wörter mitten durch
   („СОПРОВОЖДЁН/НЫХ“). Die Zeile darf umbrechen, das Wort nicht. */
.triade span{ max-width:none; overflow-wrap:normal; hyphens:manual; }
.triade{ grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:.7rem 2.6rem; }

/* Auf dem Telefon trennte die Hauptzeile mit Bindestrich („само-занятого“,
   „предпринима-теля“). Eine Display-Zeile wird nicht getrennt — sie wird
   kleiner. Die Trennung aus r10 bleibt für Fliesstext und H3 bestehen. */
h1,.hero h1{ hyphens:manual; }
@media(max-width:520px){
  .hero h1{ font-size:clamp(1.9rem,1.1rem + 5.6vw,2.9rem); line-height:1.06; }
}

/* ══════════════════════════════════════════════════════════════════
   r15 · LESBARKEIT, BILDGRÖSSE, BEWEGUNG IN BEIDE RICHTUNGEN, FUSS
   ══════════════════════════════════════════════════════════════════ */

/* ---------- 1 · Das Siegel steht gerade ----------
   Die Neigung sollte „aufgedrückt" wirken, liest sich neben lauter exakten
   Kanten aber als Fehler. Gerade, dafür mit mehr Gewicht in Kante und Licht. */
.seal{
  transform:none;
  padding:.8rem 1.3rem; border-radius:8px;
  border:1px solid rgb(168 129 58/.6);
  background:linear-gradient(150deg, rgb(255 255 255/.06), rgb(168 129 58/.06));
}
.band:not(.band-navy) .seal{
  border-color:rgb(168 129 58/.45);
  background:linear-gradient(150deg,#fff,rgb(168 129 58/.07));
  box-shadow:var(--rim-light), var(--e1,0 1px 2px rgb(15 18 34/.06));
}

/* ---------- 2 · „Nicht auf dieser Seite" war auf hellem Grund kaum lesbar ----
   Der Absatz trug Weiss auf .76 — richtig auf Navy, unbrauchbar auf Papier.
   Der Kasten bekommt auf hellem Grund seine eigenen Werte. */
.band:not(.band-navy) .sealed{
  background:linear-gradient(158deg,#fff,var(--paper-2));
  border:1px dashed rgb(168 129 58/.5);
  box-shadow:var(--rim-light);
}
.band:not(.band-navy) .sealed p{ color:var(--ink); }
.band:not(.band-navy) .sealed .reg{ color:var(--gold-ink); }

/* ---------- 3 · Die Fotostreifen zeigen wieder das Bild ----------
   Sie waren zu flach geschnitten: vom Motiv blieb ein Band, das nichts erzählt.
   Deutlich höher, weniger stark getönt, und die Naht sitzt jetzt in schmalen
   Zonen an den Kanten statt über der halben Bildhöhe. */
.photo-band{ height:clamp(20rem,44vw,34rem); }
.photo-band::before{
  background:
    linear-gradient(to bottom, var(--navy) 0%, rgb(11 16 43/.34) 14%,
                    rgb(11 16 43/.06) 34%, rgb(11 16 43/.06) 66%,
                    rgb(250 247 242/.42) 88%, var(--paper) 100%),
    linear-gradient(196deg, rgb(16 24 64/.20), rgb(8 12 36/.14));
}
.photo-band.seam-ln::before{
  background:
    linear-gradient(to bottom, var(--paper) 0%, rgb(250 247 242/.42) 12%,
                    rgb(11 16 43/.06) 34%, rgb(11 16 43/.06) 66%,
                    rgb(11 16 43/.34) 86%, var(--navy) 100%),
    linear-gradient(196deg, rgb(16 24 64/.20), rgb(8 12 36/.14));
}
.photo-band img{ filter:saturate(.92) contrast(1.06); }
@media(max-width:700px){ .photo-band{ height:clamp(14rem,52vw,20rem); } }

/* ---------- 4 · Der Kopf im Zitatbild wird nicht mehr angeschnitten ---------- */
.claim{ min-height:clamp(20rem,34vw,28rem); }
.claim img{ object-position:50% 14%; }

/* ---------- 5 · Der Preis wurde unten abgeschnitten ----------
   Die Antiqua-Ziffern der Newsreader haben Unterlängen (die 9 läuft unter die
   Grundlinie); mit line-height .9 lag der Auslauf ausserhalb der Zeilenbox. */
.price{ align-items:baseline; }
.price b{ line-height:1.04; padding-bottom:.06em; }
.price-card{ overflow:visible; }
.price-card::before{ border-radius:var(--r) var(--r) 0 0; }

/* ---------- 6 · Bewegung läuft in JEDER Richtung, beliebig oft ----------
   Bisher hing nur die Einblendung am Scrollweg. Verliess ein Element die
   Fläche nach OBEN, blieb es dort eingeblendet stehen: beim Zurückscrollen
   passierte nichts mehr. Jetzt trägt jedes Element ZWEI scroll-getriebene
   Animationen — eine beim Eintreten unten, eine beim Austreten oben.

   Entscheidend ist der Füllmodus: rvOut füllt NUR vorwärts. Mit `both` würde
   es rückwärts bis zum Seitenanfang füllen und die Einblendung überschreiben
   (es steht später in der Liste und gewinnt bei gleicher Eigenschaft). */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .js .rv{
      animation:rvIn linear, rvOut linear;
      animation-fill-mode:both, forwards;
      animation-timeline:view(), view();
      animation-range:entry 4% entry 46%, exit 56% exit 96%;
    }
    @keyframes rvOut{
      from{ opacity:1; transform:none; }
      to  { opacity:0; transform:translate3d(0,-18px,0); }
    }
    .js .rv[data-d="1"]{ animation-range:entry 7%  entry 49%, exit 56% exit 96%; }
    .js .rv[data-d="2"]{ animation-range:entry 10% entry 52%, exit 56% exit 96%; }
    .js .rv[data-d="3"]{ animation-range:entry 13% entry 55%, exit 56% exit 96%; }
    .js .rv[data-d="4"]{ animation-range:entry 16% entry 58%, exit 56% exit 96%; }
    .js .rv[data-d="5"]{ animation-range:entry 19% entry 61%, exit 56% exit 96%; }
    .js .rv[data-d="6"]{ animation-range:entry 22% entry 64%, exit 56% exit 96%; }
  }
}

/* ---------- 7 · Der Fuss ----------
   Die Wortmarke sass in der Textspalte und hörte damit vor dem Bildschirmrand
   auf. Sie läuft jetzt über die volle Breite, steht in Markennavy statt in
   Grau — und bekommt Grund unter die Füsse: eine Navy-Fläche, auf der die
   goldene Hälfte tatsächlich leuchtet. */
.foot{ background:linear-gradient(to bottom,var(--paper-2) 0%,var(--paper-3) 62%,#E7E0D2 100%); }
.foot-mark{
  margin-inline:calc(50% - 50vw);
  padding:clamp(1.4rem,3vw,2.6rem) clamp(1rem,4vw,3rem) 0;
  width:100vw; max-width:100vw;
}
.foot-mark .wordmark b{
  color:transparent;
  background:linear-gradient(104deg,#2A3766 0%,#101838 26%,#33417A 52%,#0B1029 78%,#222D57 100%);
  -webkit-background-clip:text; background-clip:text;
}
.foot-base{ margin-top:clamp(1.6rem,3vw,2.4rem); }

/* Die Phasenkarten stapeln sich beim Scrollen übereinander (sticky). Ihr
   Verlauf war zu 95–97 % deckend — die 3–5 % liessen den Text der Karte
   DARUNTER durchscheinen, sobald sich zwei überlagerten. Voll deckend, und
   die spätere Karte liegt sauber über der früheren. */
.phase{ background:linear-gradient(158deg,#17204A,#0C1233); }
.phase:nth-child(1){ z-index:1; }
.phase:nth-child(2){ z-index:2; }
.phase:nth-child(3){ z-index:3; }

/* ══════════════════════════════════════════════════════════════════
   r16 · DER FUSS ALS EIGENE FLÄCHE
   Der Fuss lief in der Textspalte der Seite, während die Wortmarke darunter
   über die volle Breite ging — zwei Massstäbe übereinander. Jetzt nutzen alle
   drei Zeilen dieselbe volle Breite und dasselbe Randmass.
   ══════════════════════════════════════════════════════════════════ */
.foot-grid,.foot-base,.foot-mark{
  width:100%; max-width:none; margin-inline:0;
  padding-inline:clamp(1.2rem,4.5vw,4rem);
}
.foot-grid{ gap:2rem clamp(2rem,6vw,6rem); }
@media(min-width:760px){ .foot-grid{ grid-template-columns:1.6fr 1fr 1fr; } }

/* Das Emblem ersetzt den kleinen Schriftzug — der Name steht darunter in
   voller Grösse. Es bleibt Link zum Seitenanfang. */
.foot-emblem{ display:inline-block; line-height:0; border-radius:50%;
  transition:transform var(--d-hover) var(--ease-firm); }
.foot-emblem img{ width:clamp(3.4rem,5.6vw,4.6rem); height:auto; }
.foot-emblem:hover{ transform:translateY(-2px); }
.foot-grid > div > p{ margin-top:1.1rem; }

/* ---------- Die Wortmarke ist EIN Zeichen, nicht zwei Wörter ----------
   Über die Breite verteilt zerfiel sie in zwei getrennte Wörter an
   gegenüberliegenden Rändern. Sie steht jetzt mittig und eng — als ein
   Schriftzug, der die Seite unterschreibt. */
.foot-mark{ margin-top:clamp(2rem,4.5vw,3.4rem); }
.foot-mark .wordmark{
  width:auto; justify-content:center; gap:.2em;
  font-size:clamp(1.9rem,10.4vw,9.2rem);
  letter-spacing:-.005em;
}
.foot-mark .wordmark b{ letter-spacing:-.01em; }
.foot-mark .wordmark i{ letter-spacing:.02em; }
@media(max-width:520px){
  .foot-mark .wordmark{ flex-direction:column; align-items:center; gap:.04em;
    font-size:clamp(2.2rem,15vw,4rem); }
}

/* justify-content zentriert nur INNERHALB der Wortmarke; sie selbst ist ein
   Inline-Element in einem Block und stand deshalb weiter links. */
.foot-mark{ display:flex; justify-content:center; }

/* ══════════════════════════════════════════════════════════════════
   r17 · DIE AUSZEICHNUNGSPLATTE
   ══════════════════════════════════════════════════════════════════ */

/* Die Platte sass zu eng: kyrillische Oberlängen (б, В) stiessen fast an die
   Oberkante. Sie bekommt oben spürbar Luft — unten etwas mehr, weil dort die
   Unterlängen (у, р) laufen. Die Zeilenhöhe der Überschrift wächst mit, sonst
   berühren sich zwei Zeilen an der Platte. */
.hl{ padding:.14em .3em .18em; }
h2:has(.hl),h3:has(.hl){ line-height:1.16; }

/* r33b · Der Schlusspunkt wird nicht mehr per CSS an die Platte geklebt.
   Der Geschwister-Selektor .hl + .stop sieht keine Textknoten und traf damit
   auch Ueberschriften, in denen die Platte mitten im Satz steht und der Punkt
   erst am Satzende folgt — dort erschien ein goldener Kasten hinter dem
   letzten Wort. Das Zusammenziehen macht jetzt initStopMerge() im JS, das die
   echte Nachbarschaft pruefen kann; hier bleibt nur die Form. */
.hl.has-stop{ border-radius:.12em; padding-right:.34em;
  background:linear-gradient(to bottom,#F0D9B0 0%,#D4B171 34%,#AC8639 72%,#8A6A2C 100%); }
.band:not(.band-navy) .hl.has-stop{
  background:linear-gradient(to bottom,#1D2750 0%,#141C3E 50%,#0B1029 100%); }

/* Neues Motiv für den ersten Streifen: die alte Aufnahme war elektrisch blau
   und stand quer zur Palette. Diese ist gedämpft, echte Arbeitssituation,
   Schärfe auf dem Tisch — und verträgt die Navy-Tönung, statt gegen sie zu
   arbeiten. Leichte Wärme, damit sie zum Messing passt. */
.photo-band img{ filter:saturate(.86) contrast(1.07) sepia(.06); }


/* ── r18 · Saalfoto: Duotone statt Fremdfarbe ──────────────────────────────
   Das Bild bringt ein kaltes Kongress-Türkis mit, das in der Marken-Palette
   (Navy + Messing) wie ein Fremdkörper sitzt. Statt ein fünftes Motiv zu
   lizenzieren wird die Farbe des Bildes ersetzt, nicht korrigiert:
   Luminanz kommt aus dem Foto, Farbton aus dem Markenverlauf.
   `isolation:isolate` auf .photo-band hält das Blending im Band.          */
.photo-band.duo{
  background:linear-gradient(152deg,#0B1029 0%,#182247 34%,#3A3A4E 62%,#7A6134 88%,#A98A46 100%);
}
.photo-band.duo img{
  filter:grayscale(1) contrast(1.14) brightness(1.04);
  mix-blend-mode:luminosity;
}

/* ── r19 · Alle Knöpfe in Messing, Tinte statt Weiss ──────────────────────
   Weiss auf Messing ist der schwächste Kontrast der Seite — helles Warm auf
   hellem Warm, die Schrift franst aus. Beschriftung wird Navy-Tinte.
   Beide Knopfstufen sind jetzt Messing, die Hierarchie liegt im Material:
   .btn-primary = tiefes, gesättigtes Metall · .btn-quiet = Champagner,
   flacher, ohne Schlagschatten.                                            */
.btn-primary{ color:#151C38; text-shadow:0 1px 0 rgb(255 255 255/.26); }
.btn-primary b{ color:#1B2444; opacity:1; }

.btn-quiet,.band-navy .btn-quiet,.final .btn-quiet{
  background:linear-gradient(168deg,#F4E2BB 0%,#E2C68F 38%,#CBA967 72%,#B39352 100%);
  border:1px solid rgb(110 83 34/.5);
  color:#171F3E;
  text-shadow:0 1px 0 rgb(255 255 255/.3);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.6), inset 0 -1px 0 rgb(0 0 0/.14),
    0 1px 2px rgb(0 0 0/.18);
}
.btn-quiet:hover,.band-navy .btn-quiet:hover,.final .btn-quiet:hover{
  background:linear-gradient(168deg,#F9ECCC,#E9D2A0 38%,#D3B372 72%,#BC9B5A 100%);
  border-color:rgb(110 83 34/.66);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.68), inset 0 -1px 0 rgb(0 0 0/.14),
    0 2px 4px rgb(0 0 0/.2), 0 14px 26px -14px rgb(110 83 34/.5);
}

/* ── r20 · Knöpfe als poliertes Metall ────────────────────────────────────
   Ein Verlauf allein liest sich als lackierte Fläche, nicht als Metall.
   Metall hat eine harte Spiegelkante: obere Hälfte hell, dann ein scharfer
   Bruch, darunter die zurückgeworfene Reflexion vom Untergrund.
   Das liegt als ::before über der Füllung (z-index:-1 → unter der Schrift,
   über dem Hintergrund), damit die Grundfarbe pro Knopfstufe erhalten bleibt. */
.btn-primary::before,.btn-quiet::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  pointer-events:none;
  background:
    /* Spiegelkante: harter Bruch bei 48 % */
    linear-gradient(to bottom,
      rgb(255 255 255/.52) 0%,
      rgb(255 255 255/.26) 46%,
      rgb(255 255 255/.02) 48%,
      rgb(0 0 0/.10) 62%,
      rgb(255 255 255/.16) 100%),
    /* seitliche Wölbung — die Rundung des Materials */
    linear-gradient(100deg,
      rgb(0 0 0/.14) 0%, rgb(255 255 255/.10) 26%,
      rgb(255 255 255/0) 62%, rgb(0 0 0/.16) 100%);
}
.btn-primary,.btn-quiet{
  background-repeat:no-repeat;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.72),      /* polierte Oberkante */
    inset 0 -1px 0 rgb(0 0 0/.3),
    inset 0 0 0 1px rgb(255 255 255/.1),
    0 2px 3px rgb(var(--shadow)/.26),
    0 14px 26px -12px rgb(110 83 34/.62);
}
.btn-primary:hover::before,.btn-quiet:hover::before{
  /* beim Anheben wandert die Spiegelkante — Metall unter bewegtem Licht */
  background:
    linear-gradient(to bottom,
      rgb(255 255 255/.6) 0%,
      rgb(255 255 255/.3) 52%,
      rgb(255 255 255/.03) 54%,
      rgb(0 0 0/.09) 66%,
      rgb(255 255 255/.2) 100%),
    linear-gradient(100deg,
      rgb(0 0 0/.12) 0%, rgb(255 255 255/.14) 28%,
      rgb(255 255 255/0) 62%, rgb(0 0 0/.14) 100%);
}
.btn-primary:active::before,.btn-quiet:active::before{
  /* gedrückt: das Licht kippt, oben dunkel, unten hell */
  background:linear-gradient(to bottom,
    rgb(0 0 0/.16) 0%, rgb(0 0 0/.04) 46%,
    rgb(255 255 255/.14) 78%, rgb(255 255 255/.3) 100%);
}

/* ══════════════════════════════════════════════════════════════════════════
   r22 · Briefing „Landing Strategie Session“ — Hero-Neufassung + drei
   neue Sektionen (Verstehen · Erwartet · Herausforderungen).
   Die Reihenfolge der Flächen bleibt gewahrt: hell → navy → hell → navy.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- Hero: Anspruch statt Slogan ---------- */
/* Die neue Headline ist ein Satz, kein Zweizeiler. Sie braucht deshalb eine
   Stufe weniger Grad und eine engere Zeile, sonst kippt sie ins Plakative. */
.h1-claim{
  font-size:clamp(1.85rem,1.15rem + 1.95vw, 3.15rem);
  line-height:1.12; letter-spacing:-.012em; max-width:26ch;
  text-wrap:balance;
}
.hero-gains{
  list-style:none; margin:clamp(1.4rem,2.6vw,2rem) 0 0; padding:0;
  display:grid; gap:.72rem; max-width:44rem;
  counter-reset:g;
}
.hero-gains li{
  counter-increment:g; position:relative; padding-left:2.5rem;
  font-size:var(--t-small); line-height:1.5; color:var(--ink);
}
/* Die Ziffer ist gesetzt, nicht gemalt: Mono, Messing, auf der Grundlinie. */
.hero-gains li::before{
  content:counter(g,decimal-leading-zero);
  position:absolute; left:0; top:.06em;
  font-family:'JetBrains Mono',monospace; font-size:.72em; letter-spacing:.06em;
  color:var(--gold-deep);
}
.hero-gains li::after{
  content:''; position:absolute; left:1.85rem; top:.5em; bottom:.15em; width:1px;
  background:linear-gradient(to bottom,rgb(169 134 63/.5),transparent);
}
.hero-gains b{ font-weight:600; }
.hero-proof{
  margin-top:1rem; font-size:var(--t-micro); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-mute);
}
.hero-proof b{ color:var(--gold-deep); font-weight:600; letter-spacing:.04em; }
.factline li:has([data-dinner]){ opacity:.9; }

/* ---------- Warme Papierfläche: eigener Ton, damit drei helle Bänder
     hintereinander nicht als eine Fläche verschmelzen ---------- */
.band-warm{
  background:
    radial-gradient(78% 60% at 92% 4%, rgb(233 203 161/.28), transparent 62%),
    radial-gradient(60% 70% at 0% 100%, rgb(27 36 80/.06), transparent 60%),
    linear-gradient(168deg,var(--paper) 0%,var(--paper-2) 52%,var(--paper-3) 100%);
}
.grain{ position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* ---------- 00a · Verstehen ---------- */
.verstehen-grid{
  display:grid; gap:clamp(2.2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
}
@media(max-width:900px){ .verstehen-grid{ grid-template-columns:1fr; } }
.verstehen-text > p{
  max-width:52ch; font-size:var(--t-body); line-height:1.66; color:var(--ink);
  margin:0 0 1.15rem;
}
.verstehen-text .lead-in{ color:var(--navy); }
.verstehen-text .closing{
  font-family:'Newsreader',serif; font-size:var(--t-lede); line-height:1.42;
  color:var(--navy); margin-top:1.6rem;
}

/* Die Zahl trägt das Argument — also bekommt sie eine eigene Fläche mit
   Messingkante links, wie ein Aktenvermerk. */
.statcut{
  margin:1.9rem 0 0; padding:1.15rem 1.4rem 1.25rem 1.5rem;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.3rem; align-items:center;
  background:linear-gradient(150deg,#fff,var(--paper-2));
  border:1px solid rgb(var(--shadow)/.12);
  border-left:3px solid var(--gold-deep);
  border-radius:.2rem;
  box-shadow:var(--rim-light), 0 12px 26px -18px rgb(var(--shadow)/.4);
}
.statcut b{
  display:flex; align-items:baseline; gap:.04em;
  font-size:clamp(2.6rem,1.6rem + 2.6vw,4.2rem); line-height:1;
  color:var(--navy); letter-spacing:-.02em;
}
.statcut b i{ font-style:normal; font-size:.46em; color:var(--gold-deep); }
.statcut figcaption{ font-size:var(--t-small); line-height:1.56; color:var(--ink-mute); }

/* Porträt: Messingrahmen, der beim Scrollen aufzieht. Das Bild sitzt
   versetzt im Rahmen — sonst wirkt es wie ein Stock-Platzhalter. */
.mentor-shot{ margin:0; position:sticky; top:calc(var(--topbar-h,64px) + 2.5rem); }
@media(max-width:900px){ .mentor-shot{ position:static; } }
.mentor-frame{
  position:relative; border-radius:.25rem; overflow:hidden;
  background:var(--navy);
  box-shadow:0 30px 60px -32px rgb(var(--shadow)/.55), 0 2px 6px rgb(var(--shadow)/.16);
}
.mentor-frame img{
  display:block; width:100%; height:auto;
  filter:saturate(.94) contrast(1.06);
}
/* Innenkante aus Messing + Lichtverlauf von oben links */
.mentor-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgb(169 134 63/.45), inset 0 1px 0 rgb(255 255 255/.28);
  background:linear-gradient(196deg,rgb(255 255 255/.1) 0%,transparent 34%,rgb(12 18 51/.22) 100%);
}
.mentor-shot figcaption{
  margin-top:1rem; display:grid; gap:.2rem;
}
.mentor-shot figcaption b{ font-family:'Space Grotesk',sans-serif; font-size:var(--t-body);
  color:var(--navy); font-weight:600; }
.mentor-shot figcaption span{ font-size:var(--t-micro); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute); }

/* ---------- 00b · Was dich erwartet ---------- */
.promise-grid{
  display:grid; gap:clamp(1.2rem,2.4vw,2rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:860px){ .promise-grid{ grid-template-columns:1fr; } }
.promise{
  position:relative; padding:clamp(1.6rem,2.6vw,2.3rem);
  background:linear-gradient(158deg,#17204A,#0C1233);
  border:1px solid rgb(233 203 161/.16); border-radius:.3rem;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.07), 0 22px 44px -26px rgb(0 0 0/.7);
  transition:transform var(--d-hover) var(--ease-firm), border-color var(--d-hover) var(--ease-firm);
}
.promise:hover{ transform:translateY(-3px); border-color:rgb(233 203 161/.34); }
.promise-mark{
  width:clamp(3.4rem,5vw,4.4rem); height:auto; color:var(--gold);
  margin-bottom:1.2rem;
}
.promise-mark svg{ width:100%; height:auto; display:block;
  filter:drop-shadow(0 4px 12px rgb(233 203 161/.22)); }
.promise h3{
  font-family:'Space Grotesk',sans-serif; font-size:var(--t-h3); font-weight:600;
  color:#fff; margin:0 0 .6rem; letter-spacing:-.005em;
}
.promise p{ margin:0; font-size:var(--t-small); line-height:1.6; color:rgb(255 255 255/.76); }

/* Die Zeichen zeichnen sich beim Scrollen selbst — scrubbend, also in
   beide Richtungen und beliebig oft. */
.dr{ stroke-linecap:round; stroke-linejoin:round; }
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    /* Die Zeitachse haengt am DIV, nicht am SVG-Pfad: view() braucht eine
       echte Layout-Box: auf Geometrie-Elementen im SVG lief sie sofort durch
       (playState 'finished', bevor die Karte ueberhaupt im Bild war).
       Der benannte Timeline-Name ist fuer alle Nachfahren sichtbar. */
    .js .promise{ view-timeline-name:--mark; }   /* die Karte, nicht das Zeichen:
       die kleine Icon-Box war in ~180px Scrollweg durchgezeichnet */
    .js .promise .dr{
      stroke-dasharray:240; stroke-dashoffset:240;
      animation:markDraw linear both;
      animation-timeline:--mark;
      animation-range:entry 6% entry 74%;
    }
    .js .promise .dr:nth-child(2){ animation-range:entry 16% entry 84%; }
    .js .promise .dr:nth-child(3){ animation-range:entry 26% entry 94%; }
    .js .promise .dr:nth-child(4){ animation-range:entry 34% entry 100%; }
  }
}
@keyframes markDraw{ to{ stroke-dashoffset:0; } }

/* r22a · Kartenüberschriften werden nicht getrennt — Displayzeilen werden
   kleiner, nicht zerlegt („Вдохновляю-щее“). Gleiche Regel wie in r10. */
.promise h3{ hyphens:manual; text-wrap:balance; }

/* r22b · Auf schmalem Schirm hat die Zahl keine Spalte mehr zu verschenken —
   sie setzt sich über den Satz statt daneben. */
@media(max-width:620px){
  .statcut{ grid-template-columns:1fr; gap:.5rem; padding:1.1rem 1.15rem 1.2rem 1.25rem; }
  .statcut figcaption{ max-width:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   r23 · Hero atmet: die Spalte war zu schmal für den neuen Text
   Der alte Hero trug einen Vierwort-Slogan — dafür war die 44rem-Spalte
   (h1 sogar auf 17ch) genau richtig. Der neue Anspruch ist ein ganzer Satz
   plus vier Ergebnisse; in derselben Spalte stapelt er sich zu einem Block,
   der wie eine Textwand liest. Also: Spalte breiter, Zeilen länger, Ergebnisse
   in zwei Spalten statt vier gestapelten Zeilen.
   ══════════════════════════════════════════════════════════════════════════ */
@media(min-width:1000px){
  /* Die alte Kappung stammt aus dem Slogan-Hero und gewinnt über .h1-claim
     (Nachfahren-Selektor, höhere Spezifität) — deshalb hier gezielt gelöst. */
  .hero-inner > h1.h1-claim{ max-width:min(100%,30ch); }
  .hero-inner > *{ max-width:min(100%,58rem); }
  .hero .lede{ max-width:min(100%,48rem); }

  /* Vier Ergebnisse nebeneinander statt untereinander: halbiert die Höhe
     des Blocks und gibt jeder Zeile mehr Lauflänge. */
  .hero-gains{
    max-width:min(100%,58rem);
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(1.6rem,3vw,2.8rem); row-gap:.85rem;
  }
  .hero-gains li{ padding-left:2.3rem; }
}
@media(min-width:1280px){
  .hero-inner > h1.h1-claim{ max-width:min(100%,32ch); }
  .hero-inner > *{ max-width:min(100%,66rem); }
  .hero-gains{ max-width:min(100%,66rem); }
}
/* Die beiden Knöpfe sind eine Reihe, keine Treppe — sobald Platz da ist. */
@media(min-width:760px){ .hero-cta{ flex-wrap:nowrap; width:max-content; max-width:100%; } }

/* ══════════════════════════════════════════════════════════════════════════
   r24b · Porträtrahmen: Passepartout statt Bildkante
   Ein Bild mit Schlagschatten ist ein Bild. Ein Bild mit Passepartout, innerer
   Messinglinie und Eckmarken ist ein gerahmtes Porträt — und genau das trennt
   den Mentor optisch von den Stockfotos weiter unten. Aufbau von aussen nach
   innen: Rahmenkörper (Papier, warm) → Messing-Haarlinie → Bild.
   ══════════════════════════════════════════════════════════════════════════ */
.mentor-shot{ padding:0; }
.mentor-frame{
  padding:clamp(.85rem,1.5vw,1.35rem);            /* das Passepartout */
  background:
    linear-gradient(158deg,#FFFDF9 0%,var(--paper-2) 46%,var(--paper-3) 100%);
  border:1px solid rgb(var(--shadow)/.14);
  border-radius:.3rem;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.9),
    0 1px 2px rgb(var(--shadow)/.16),
    0 34px 64px -34px rgb(var(--shadow)/.55);
}
/* Messing-Haarlinie: sitzt zwischen Passepartout und Bild, nicht auf dem Bild. */
.mentor-frame::before{
  content:''; position:absolute;
  inset:calc(clamp(.85rem,1.5vw,1.35rem) - 3px);
  border:1px solid rgb(169 134 63/.55);
  border-radius:.14rem; pointer-events:none; z-index:2;
}
.mentor-frame img{ border-radius:.1rem; position:relative; z-index:1; }
/* Das Licht liegt jetzt auf dem Bild, nicht mehr auf dem Rahmenkörper. */
.mentor-frame::after{
  inset:clamp(.85rem,1.5vw,1.35rem);
  border-radius:.1rem;
  box-shadow:inset 0 0 0 1px rgb(12 18 51/.14);
  background:linear-gradient(198deg,rgb(255 255 255/.14) 0%,transparent 30%,rgb(12 18 51/.2) 100%);
  z-index:3;
}
/* Eckmarken — vier gesetzte Winkel, wie an einer Reprovorlage. */
.mentor-frame{ --ct:clamp(.85rem,1.5vw,1.35rem); }
.mentor-shot::before,.mentor-shot::after{
  content:''; position:absolute; width:14px; height:14px; z-index:4; pointer-events:none;
  border:1px solid rgb(169 134 63/.8);
}
.mentor-shot{ position:sticky; }
.mentor-shot::before{ top:9px; left:9px; border-right:0; border-bottom:0; }
.mentor-shot::after{ top:9px; right:9px; border-left:0; border-bottom:0; }
.mentor-frame > i{ position:absolute; inset:auto 9px 9px 9px; height:14px; z-index:4;
  pointer-events:none; }
.mentor-frame > i::before,.mentor-frame > i::after{
  content:''; position:absolute; bottom:0; width:14px; height:14px;
  border:1px solid rgb(169 134 63/.8);
}
.mentor-frame > i::before{ left:0; border-right:0; border-top:0; }
.mentor-frame > i::after{ right:0; border-left:0; border-top:0; }

/* Bildunterschrift als Messingplatte am Rahmenfuss */
.mentor-shot figcaption{
  margin-top:1.15rem; padding-left:1.05rem; position:relative;
}
.mentor-shot figcaption::before{
  content:''; position:absolute; left:0; top:.15em; bottom:.15em; width:2px;
  background:linear-gradient(to bottom,#DCBB7E,#A9863F 55%,transparent);
}


/* ══════════════════════════════════════════════════════════════════════════
   r25 · Hero entlasten: sechs Blöcke statt acht
   Im Hero standen drei Beweisblöcke übereinander (Faktenzeile, „500+“, Triade)
   und die Termindaten zweimal — einmal in der Regzeile, einmal als
   fünfgliedrige Faktenzeile darunter. Das liest sich als Textwand und billig,
   nicht als Anspruch.
   Geblieben ist, was der Brief verlangt: Regzeile · Anspruch · Versprechen ·
   vier Ergebnisse · CTA · Beleg. Die Termindaten sind dorthin gewandert, wo
   man sie tatsächlich braucht — an den Kauf.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-inner{ gap:clamp(1.1rem,2.1vw,1.7rem); }
/* r161: Die Registraturzeile im Hero stand auf --t-micro (11–13 px) und lag
   dabei ueber einem Foto, mit 0.22em Sperrung und in Versalien — drei Dinge,
   die jede fuer sich schon Tempo kosten. Datum und Platzzahl sind aber das
   Erste, was ueberhaupt gelesen werden muss. Deshalb hier eine eigene Stufe:
   NUR im Hero, denn `.reg` traegt 29 weitere Stellen auf der Seite, die
   bewusst klein bleiben. Die Sperrung geht leicht zurueck — bei groesserem
   Schnitt zerfaellt das Wort sonst in Einzelbuchstaben. */
.hero .reg{
  margin-bottom:.2rem;
  font-size:clamp(.82rem,.7rem + .38vw,.98rem);
  letter-spacing:.18em;
}
.hero .reg i{ width:34px; }
.hero-gains{ margin-top:clamp(.6rem,1.4vw,1rem); }
.hero-proof{ margin-top:.5rem; }

/* Lesbarkeit vor Bildwirkung: der Satz steht auf einem Foto, also braucht die
   linke Spalte einen eigenen, weicheren Schleier — nicht das ganze Bild. */
.stage-veil{
  background:
    linear-gradient(100deg,
      rgb(250 247 242/.97) 0%,
      rgb(250 247 242/.93) 34%,
      rgb(250 247 242/.72) 52%,
      rgb(250 247 242/.26) 72%,
      rgb(250 247 242/.06) 100%),
    linear-gradient(to bottom, rgb(250 247 242/.5), transparent 22%, transparent 74%, rgb(250 247 242/.72));
}

/* r165 · Hochkant war vom Film nichts zu erkennen — und der Schleier war nicht
   die Ursache. Der Film ist 16:9, das Telefon rund 9:19,5. `object-fit:cover`
   fuellt die Flaeche, indem es seitlich rund zwei Drittel wegschneidet: uebrig
   blieb ein schmaler senkrechter Streifen aus der hellen Wand zwischen den
   Tuerpfosten. Der Boardroom, die Tuer, das ganze Motiv lagen ausserhalb des
   Ausschnitts. Ein hellerer Schleier haette daran nichts geaendert — man haette
   denselben Streifen deutlicher gesehen.
   Deshalb ist die Buehne hochkant keine Hintergrundflaeche mehr, sondern ein
   Band am Fuss des Hero mit dem Seitenverhaeltnis des Films: das Bild bleibt
   ganz. Der Text steht darueber auf Papier, nicht mehr darauf — Lesbarkeit
   braucht dort also keinen Schleier mehr, nur noch eine leichte Angleichung
   des Farbtons. Die Kanten des Bandes loest eine Maske ins Papier auf, damit
   oben und unten keine Naht entsteht. */
@media(max-width:1023px){
  .hero{
    justify-content:flex-start;
    /* Platz fuer das Band reservieren, sonst laege es auf den Schaltflaechen */
    padding-bottom:calc(56.25vw + clamp(1rem,3vh,1.8rem));
  }
  .stage{
    inset:auto 0 0 0; height:auto; aspect-ratio:16/9;
    /* Unten laeuft der helle Bildboden gegen die dunkelblaue Sektion — dort
       faellt jede harte Kante auf. Die Ausblendung beginnt deshalb frueher und
       laeuft weiter, als sie oben ins Papier braucht. */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 58%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 58%,transparent 100%);
  }
  .stage-poster,.stage-film{ object-position:50% 50%; transform:none; }
  .stage-veil{
    background:linear-gradient(to bottom,
      rgb(250 247 242/.28) 0%,
      rgb(250 247 242/.08) 34%,
      rgb(250 247 242/.08) 66%,
      rgb(250 247 242/.3) 100%);
  }
  .stage-grid{ display:none; }
}

/* ---------- Termindaten im Ticket ---------- */
.event-facts{
  margin:1.15rem 0 1.35rem; padding:0 0 1.25rem;
  /* EIN Raster für alle Zeilen. Mit je eigenem Raster pro Zeile richtete sich
     die Wertspalte nach der längsten Beschriftung DIESER Zeile aus —
     'NETWORKING-DINNER' sprang dadurch 22px aus der Flucht.
     display:contents löst die Zeilen-DIVs auf, das Raster liegt am <dl>. */
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:.9rem; row-gap:.52rem; align-items:baseline;
  border-bottom:1px solid rgb(233 203 161/.22);
}
.event-facts > div{ display:contents; }
.event-facts dt{
  font-family:'JetBrains Mono',monospace; font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold); opacity:.8;
}
.event-facts dd{ margin:0; font-size:var(--t-small); line-height:1.45; color:#fff; }
/* Zusatz an einer Datenzeile — z. B. dass das Dinner nicht im Preis steckt.
   Leiser als die Zeile selbst, aber auf derselben Hoehe gelesen. */
.event-facts dd em{
  display:block; margin-top:.18rem; font-style:normal;
  font-size:.82em; font-weight:500; color:var(--gold);
}

/* Hinweis unter der Enthalten-Liste. Er widerspricht der Liste, deshalb steht
   er nicht darin: eine Liste mit Haken sagt "enthalten", ein Nachsatz sagt
   "und das hier nicht". Ruhig gesetzt, aber gross genug zum Lesen. */
.incl-note{
  margin:1.05rem 0 0; padding:.85rem 1rem;
  border-left:2px solid var(--gold);
  background:rgb(255 255 255 / .04);
  border-radius:0 .5rem .5rem 0;
  font-size:var(--t-small); line-height:1.5; color:#E6E8F0;
}
.incl-note b{ color:#fff; font-weight:600; }
@media(max-width:520px){
  .event-facts > div{ grid-template-columns:1fr; gap:.1rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   r26 · Material und Bewegung für die beiden neuen Sektionen
   Beide waren sauber, aber statisch: Fläche, Text, fertig. Premium entsteht
   hier nicht durch mehr Elemente, sondern durch Material (Tiefe, Licht,
   Messing) und durch Bewegung, die etwas AUSSAGT — der Messwert läuft ein,
   das Rückgrat wächst mit dem Lesefluss, das Licht wandert über das Metall.
   Alle Scroll-Bewegungen sind scrubbend (view-timeline) → beidseitig und
   beliebig oft; alle Dauerbewegungen sind langsam und schleifenfrei.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 00b · Zusagen: Karten aus Material ---------- */
#erwartet{ overflow:hidden; }
/* Zwei driftende Lichtfelder hinter den Karten — sehr langsam, nie synchron,
   damit die Fläche atmet statt zu blinken. */
#erwartet::after{
  content:''; position:absolute; inset:-20% -10%; pointer-events:none; z-index:0;
  background:
    radial-gradient(38% 42% at 22% 30%, rgb(233 203 161/.16), transparent 62%),
    radial-gradient(32% 38% at 78% 68%, rgb(120 150 255/.12), transparent 64%);
  filter:blur(6px);
}
@media(prefers-reduced-motion:no-preference){
  #erwartet::after{ animation:driftGlow 34s ease-in-out infinite alternate; }
}
@keyframes driftGlow{
  from{ transform:translate3d(-2.5%,-1.5%,0) scale(1); }
  to{   transform:translate3d(2.5%,2%,0) scale(1.08); }
}
#erwartet .wrap{ position:relative; z-index:1; }

.promise{
  position:relative; overflow:hidden; isolation:isolate;
  padding-top:clamp(2.6rem,4vw,3.4rem);
  background:
    linear-gradient(158deg,rgb(255 255 255/.05),transparent 42%),
    linear-gradient(158deg,#1A2450,#0B1130 74%);
  border-color:rgb(233 203 161/.2);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.1),
    inset 0 0 0 1px rgb(255 255 255/.03),
    0 30px 56px -30px rgb(0 0 0/.8);
}
/* Messingkante oben — sie zieht beim Scrollen von links nach rechts auf. */
.promise::before{
  content:''; position:absolute; inset:0 0 auto; height:1px; transform-origin:left;
  background:linear-gradient(90deg,transparent,#E9CBA1 26%,#A9863F 62%,transparent);
}
/* Wanderndes Licht auf dem Metall — die Dauerbewegung der Sektion. */
.promise::after{
  content:''; position:absolute; inset:-40% -60%; z-index:-1; pointer-events:none;
  background:linear-gradient(74deg,transparent 42%,rgb(233 203 161/.1) 50%,transparent 58%);
}
@media(prefers-reduced-motion:no-preference){
  .promise::after{ animation:promiseSheen 9s linear infinite; }
  .promise:nth-child(2)::after{ animation-delay:-3s; }
  .promise:nth-child(3)::after{ animation-delay:-6s; }
}
@keyframes promiseSheen{
  0%{ transform:translate3d(-46%,0,0); }
  62%,100%{ transform:translate3d(46%,0,0); }
}
.promise:hover{ transform:translateY(-4px); border-color:rgb(233 203 161/.42); }

/* Ordnungszahl: klein oben rechts gesetzt, nicht als Deko, sondern als Folge. */
.promise-no{
  position:absolute; top:clamp(1.1rem,1.8vw,1.5rem); right:clamp(1.2rem,2vw,1.7rem);
  font-size:var(--t-micro); letter-spacing:.14em;
  color:var(--gold); opacity:.55;
}
.promise-no::before{
  content:''; position:absolute; right:-.1em; top:-.55rem; width:1.6rem; height:1px;
  background:linear-gradient(90deg,transparent,rgb(233 203 161/.6));
}
.promise-mark{
  position:relative;
  filter:drop-shadow(0 6px 18px rgb(233 203 161/.2));
}
/* Der Ring hinter dem Zeichen gibt ihm Grund und Tiefe. */
.promise-mark::before{
  content:''; position:absolute; z-index:-1;
  left:-18%; top:-18%; width:136%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgb(233 203 161/.16), transparent 68%);
  box-shadow:inset 0 0 0 1px rgb(233 203 161/.14);
}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .js .promise::before{
      transform:scaleX(0);
      animation:edgeDraw linear both;
      animation-timeline:--mark; animation-range:entry 8% entry 58%;
    }
  }
}
@keyframes edgeDraw{ to{ transform:scaleX(1); } }


/* r26b · Auf schmalem Schirm rutschte der Schlusspunkt als eigene Platte in
   die nächste Zeile: .hl und .stop sind zwei Inline-Blöcke, zwischen denen die
   Zeile umbrechen darf, sobald die Platte nicht mehr passt.
   Unter 760px trägt deshalb .hl den Punkt selbst — eine Platte, kein Umbruch. */
/* r32 · Der Punkt sprang auch auf breitem Schirm auf eine eigene Platte.
   r33-Korrektur: die CSS-Loesung (.hl:has(+ .stop)) war falsch — der
   Geschwister-Selektor sieht keine Textknoten, also traf sie auch
   Ueberschriften, in denen die Platte MITTEN im Satz steht und der Punkt erst
   am Ende folgt („Die [5 Säulen.] einer soliden …“). Das Zusammenziehen macht
   jetzt JS, das die echte Nachbarschaft im DOM pruefen kann (initStopMerge).
   Hier bleibt nur die Form der zusammengezogenen Platte. */
.hl.has-stop{ border-radius:.12em; padding-right:.3em; }
/* Display-Zeilen werden nicht getrennt — dieselbe Regel wie in r10/r22, hier
   fehlte sie noch fuer die Platte selbst ('гарантиро-ванно'). */
h2:has(.hl),h3:has(.hl),.hl{ hyphens:manual; }

/* r27 · Der reale Raum als Grund der Zusagen-Sektion
   Ein Foto darf hier nicht Motiv sein — die Karten tragen die Aussage. Es wird
   deshalb entsättigt, tief nach Navy gezogen und an den Rändern weggeblendet:
   es liefert Textur und Tiefe, keine zweite Bildebene. Sehr langsamer Zoom
   (Endlosschleife, alternate) hält den Grund in Bewegung. */
.erwartet-bg{
  position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
  background:var(--navy);
}
.erwartet-bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  filter:grayscale(.72) contrast(1.12) brightness(.62);
  opacity:.5; mix-blend-mode:luminosity;
}
@media(prefers-reduced-motion:no-preference){
  .erwartet-bg img{ animation:roomBreath 48s ease-in-out infinite alternate; }
}
@keyframes roomBreath{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to{   transform:scale(1.12) translate3d(-1.2%,-1.4%,0); }
}
/* Weiche Kante rundum + Navy-Lasur, damit die Karten sauber darauf sitzen. */
.erwartet-bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(72% 68% at 50% 46%, transparent 8%, rgb(11 17 48/.72) 72%, rgb(11 17 48/.95) 100%),
    linear-gradient(to bottom, rgb(11 17 48/.9), rgb(11 17 48/.42) 26%, rgb(11 17 48/.5) 72%, rgb(11 17 48/.94));
}
#erwartet::after{ z-index:1; }
#erwartet .wrap{ z-index:2; }


/* ══════════════════════════════════════════════════════════════════════════
   r29 · Diagnose komplett neu: ein Prüfprotokoll statt drei Kästen
   Der alte Stand (r24–r28) war eine Liste aus drei gerahmten Karten mit
   Wasserzeichen. Drei gleich schwere Kästen untereinander lesen sich als
   Formular, nicht als Befund — und der dunkle Ursachen-Block war das
   schwerste Element der ganzen Sektion, obwohl er nur ein Nebensatz ist.
   Neu: EIN Bogen. Die drei Befunde stehen als Prüfpositionen darauf, getrennt
   durch Haarlinien statt durch Rahmen; links läuft eine durchgehende
   Messachse, die beim Scrollen mitwächst. Die Ursache bleibt hervorgehoben,
   aber als warmes Feld mit Messingkante — Hebel, nicht Blockade.
   Der Sektionskopf bekommt ein echtes Instrument: Zifferblatt mit Teilung,
   Gehäusering, Beschriftung. Alle Werte sind Text aus dem Briefing; es wird
   nichts gemessen, was nicht dasteht.
   ══════════════════════════════════════════════════════════════════════════ */
.dg{ position:relative; isolation:isolate; overflow:hidden; }
.dg > .wrap{ position:relative; z-index:1; }

/* Konstruktionspapier als Grund der ganzen Sektion — nur zu ahnen. */
.dg-paper{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgb(12 18 51/.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(12 18 51/.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(78% 62% at 26% 22%, #000 0%, transparent 74%);
}

/* ---------- Kopf: Instrument statt schwebender Ring ---------- */
#herausforderungen .shead{
  position:relative; max-width:64rem;
  padding-right:clamp(0rem,11vw,11.5rem);
}

/* Teilung: 60 Striche als Kegelverlauf, zum Ring maskiert. */
/* Gehäuse */

/* ---------- Der Bogen ---------- */
.dg-sheet{
  position:relative; margin-top:clamp(2rem,3.6vw,3.2rem);
  padding:clamp(1.4rem,2.6vw,2.6rem) clamp(1.3rem,2.8vw,3rem);
  padding-left:clamp(1.3rem,2.8vw,3rem);
  background:
    linear-gradient(180deg,rgb(255 255 255/.94),rgb(255 255 255/.62)),
    linear-gradient(152deg,#fff,var(--paper-2) 58%,var(--paper-3));
  border:1px solid rgb(var(--shadow)/.11); border-radius:.3rem;
  box-shadow:var(--rim-light), 0 34px 70px -46px rgb(var(--shadow)/.55);
  overflow:hidden;
}
/* Ruhiger Lichtzug über dem Bogen — das Blatt lebt, ohne zu blinken. */
.dg-sheet::after{
  content:''; position:absolute; inset:-40% -20%; z-index:0; pointer-events:none;
  background:linear-gradient(74deg,transparent 42%,rgb(233 203 161/.16) 50%,transparent 58%);
  animation:dgScan 14s linear infinite;
}
@keyframes dgScan{ from{ transform:translateX(-38%); } to{ transform:translateX(38%); } }
@media(prefers-reduced-motion:reduce){ .dg-sheet::after{ animation:none; opacity:.35; } }

/* Messachse im Bundsteg des Bogens */
.dg-axis{
  position:absolute; left:clamp(.6rem,1.3vw,1.35rem); top:clamp(1.4rem,2.6vw,2.6rem);
  bottom:clamp(1.4rem,2.6vw,2.6rem); width:2px; border-radius:2px; z-index:1;
  background:rgb(12 18 51/.08);
}
@media(max-width:760px){ .dg-axis{ display:none; } }
.dg-run{
  position:absolute; inset:0 0 auto; height:100%; border-radius:inherit;
  transform-origin:top;
  background:linear-gradient(to bottom,#DCBB7E,#A9863F 52%,#7A5E27);
  box-shadow:0 0 12px rgb(169 134 63/.45);
}

.dg-rows{ list-style:none; margin:0; padding:0; position:relative; z-index:1; }
.dg-row{
  display:grid; grid-template-columns:clamp(3.2rem,5vw,4.6rem) minmax(0,1fr);
  gap:clamp(.9rem,2vw,1.8rem); align-items:start;
  padding:clamp(1.5rem,2.8vw,2.4rem) 0;
  transition:background var(--d-hover) var(--ease-firm);
}
.dg-row:first-child{ padding-top:clamp(.4rem,1vw,.8rem); }
.dg-row:last-child{ padding-bottom:clamp(.4rem,1vw,.8rem); }
.dg-row:hover{ background:linear-gradient(90deg,rgb(233 203 161/.12),transparent 62%); }
/* Trennung durch Haarlinie statt durch Rahmen */
.dg-row + .dg-row{ border-top:1px solid rgb(var(--shadow)/.1); }
.dg-row + .dg-row::before{
  content:''; position:absolute; left:0; top:-1px; height:1px;
  width:clamp(2.4rem,4vw,3.6rem);
  background:linear-gradient(90deg,rgb(169 134 63/.75),transparent);
  transform-origin:left;
}
.dg-rows{ position:relative; }
.dg-row{ position:relative; }

/* Ordnungszahl als Messziffer mit eigenem Strich */
.dg-idx{ display:grid; justify-items:start; gap:.55rem; padding-top:.15rem; }
.dg-idx span{
  font-family:'JetBrains Mono',monospace; font-weight:500; line-height:1;
  font-size:clamp(1.5rem,1.1rem + 1.1vw,2.15rem); letter-spacing:-.03em;
  color:transparent;
  background:linear-gradient(158deg,#DCBB7E,#A07B33 60%,#7A5E27);
  -webkit-background-clip:text; background-clip:text;
}
.dg-idx i{
  display:block; width:1px; height:clamp(1.6rem,3vw,2.8rem);
  background:linear-gradient(to bottom,rgb(169 134 63/.55),transparent);
  transform-origin:top;
}

.dg-kicker{
  display:block; margin-bottom:.5rem;
  font-size:.63rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep);
}
.dg-h{
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(1.2rem,1.02rem + .68vw,1.7rem); line-height:1.28;
  letter-spacing:-.006em; color:var(--navy); margin:0 0 1.05rem;
  max-width:36ch; hyphens:manual; text-wrap:balance;
}
.dg-fields{
  display:grid; gap:clamp(.9rem,2vw,1.8rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start;
}
@media(max-width:900px){ .dg-fields{ grid-template-columns:1fr; } }
.dg-field b{
  display:block; margin-bottom:.4rem;
  font-size:.63rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); opacity:.72;
}
.dg-field p{
  margin:0; font-size:var(--t-small); line-height:1.6; color:var(--ink-mute);
  max-width:52ch;
}
/* Die Ursache ist der Hebel: warmes Feld mit Messingkante, kein dunkler Block. */
.dg-lever{
  padding:clamp(.8rem,1.4vw,1.1rem) clamp(.9rem,1.6vw,1.25rem);
  border-left:2px solid var(--gold-deep); border-radius:0 .22rem .22rem 0;
  background:linear-gradient(120deg,rgb(233 203 161/.24),rgb(233 203 161/.07));
  box-shadow:inset 0 1px 0 rgb(255 255 255/.6);
}
.dg-lever b{ color:var(--gold-deep); opacity:1; }
.dg-lever p{ color:var(--ink); }

/* ---------- Schlusszeile ---------- */
.dg-out{
  position:relative; margin-top:clamp(2.2rem,4vw,3.4rem);
  padding-top:clamp(2.4rem,4.5vw,3.6rem);
  display:grid; justify-items:center; gap:clamp(1.2rem,2.2vw,1.9rem); text-align:center;
}
.dg-out::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(100%,26rem); height:1px;
  background:linear-gradient(90deg,transparent,rgb(169 134 63/.6),transparent);
}
.dg-out p{
  margin:0; max-width:34ch; font-family:'Newsreader',serif;
  font-size:clamp(1.4rem,1.05rem + 1.1vw,2.2rem); line-height:1.3; color:var(--navy);
}

/* ---------- Scroll-getriebene Messung ---------- */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .js .dg-sheet{ view-timeline-name:--dgsheet; }
    .js .dg-run{
      transform:scaleY(0); animation:dgRun linear both;
      animation-timeline:--dgsheet; animation-range:entry 12% cover 72%;
    }
    .js .dg-row{ view-timeline-name:--dgrow; }
    .js .dg-idx i{
      transform:scaleY(0); animation:dgTick linear both;
      animation-timeline:--dgrow; animation-range:entry 20% entry 90%;
    }
    .js .dg-row + .dg-row::before{
      transform:scaleX(0); animation:dgRule linear both;
      animation-timeline:--dgrow; animation-range:entry 8% entry 62%;
    }
  }
}
@keyframes dgRun{ to{ transform:scaleY(1); } }
@keyframes dgArc{ to{ stroke-dashoffset:67.9; } }
@keyframes dgTick{ to{ transform:scaleY(1); } }
@keyframes dgRule{ to{ transform:scaleX(1); } }

@media(max-width:620px){
  .dg-row{ grid-template-columns:1fr; gap:.7rem; }
  .dg-idx{ grid-auto-flow:column; align-items:center; justify-content:start; gap:.7rem; }
  .dg-idx i{ width:clamp(1.6rem,12vw,3rem); height:1px; transform-origin:left;
    background:linear-gradient(90deg,rgb(169 134 63/.55),transparent); }
  .js .dg-idx i{ animation-name:dgRule; }
  .dg-field p{ max-width:none; }
}

/* r29a · Zwei Korrekturen aus der Messung am Schirm:
   1. Die Teilung des Zifferblatts war zu fein — 60 Haarstriche in einem 8px
      schmalen Ring lasen sich aus zwei Metern wie verwischte Schrift, nicht
      wie eine Skala. Jetzt 24 klare Striche in breiterem Ring.
   2. Unter der Ordnungszahl stand ein senkrechter Strich direkt neben der
      Messachse — zwei parallele Senkrechte, derselbe Fehler wie in r26/r28.
      Der Strich legt sich waagerecht unter die Ziffer. */
.dg-idx i{
  width:clamp(1.5rem,2.4vw,2.4rem); height:1px; transform-origin:left;
  background:linear-gradient(90deg,rgb(169 134 63/.6),transparent);
}
.js .dg-idx i{ animation-name:dgRule; }

/* ══════════════════════════════════════════════════════════════════════════
   r30 · Diagnose auf Luxus-Niveau: Befundtafel, Marken-Verlauf, grosse Zahl
   Drei Aufträge: (1) die 80 % sollen teuer aussehen, nicht wie eine Fussnote;
   (2) die ganze Sektion soll die Markenverläufe Navy→Messing tragen;
   (3) ein Foto soll den Befund tragen.
   Gewählt: der leere Boardroom bei Nacht (bereits lizenziert, bisher
   ungenutzt) — blaue Stadt im Fenster, goldenes Licht auf Nussbaum: die
   Markenfarben stecken schon im Bild. Er steht NICHT als Vollflächengrund
   (das macht bereits die Sektion darüber), sondern als gerahmte, dunkle
   Tafel neben dem Kopf: der Raum, in dem diese drei Fragen entschieden
   werden. Darauf montiert das Messwerk mit der grossen Zahl.
   Die Ursache-Felder werden wieder dunkel — jetzt aber als System mit der
   Tafel, nicht als einzelner schwerer Klotz.
   ══════════════════════════════════════════════════════════════════════════ */
@media(min-width:1080px){
  .dg > .wrap{
    display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
    column-gap:clamp(2rem,4vw,4.6rem); align-items:end;
  }
  .dg-sheet,.dg-out{ grid-column:1 / -1; }
  #herausforderungen .shead{ padding-right:0; max-width:none; margin-bottom:0; }
}
/* ---------- Bogen: Markenkante und dunkle Hebel ---------- */
.dg-sheet{ margin-top:clamp(2.4rem,4vw,3.6rem); }
/* Marken-Verlaufskante am Kopf des Bogens: Navy → Messing. */
.dg-sheet::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg,#0B1130 0%,#1B2444 22%,#A9863F 62%,#E9CBA1 82%,transparent);
}
.dg-row + .dg-row{ border-top-color:transparent; }
.dg-row + .dg-row::before{
  width:100%; height:1px;
  background:linear-gradient(90deg,
    rgb(169 134 63/.75) 0%, rgb(169 134 63/.3) 12%,
    rgb(12 18 51/.14) 34%, rgb(12 18 51/.05) 72%, transparent 100%);
}
.dg-row:hover{
  background:linear-gradient(90deg,rgb(233 203 161/.15),rgb(255 255 255/0) 58%);
}
.dg-idx span{ font-size:clamp(1.6rem,1.15rem + 1.2vw,2.35rem); }

/* Die Ursache ist der Hebel — dunkel wie die Tafel, mit Messingkante.
   Nach r29 war sie hell; zusammen mit der neuen Tafel im Kopf bleibt sie
   jetzt als System lesbar und nicht als einzelner schwerer Klotz. */
.dg-lever{
  border-left:2px solid var(--gold);
  background:linear-gradient(152deg,#1A2450,#0D1436 68%,#080E28);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.09), 0 18px 34px -26px rgb(11 17 48/.8);
  border-radius:0 .24rem .24rem 0;
}
.dg-lever b{ color:var(--gold); }
.dg-lever p{ color:rgb(255 255 255/.86); }


/* r30a · Messung am Schirm: die Zahl stand mit dunklem Messingverlauf mitten
   im hellen Teil des Bildes und war praktisch unlesbar. Das Messwerk bekommt
   einen eigenen dunklen Grund (Radialschleier auf der Tafel), der Verlauf der
   Zahl wird heller, das Bild unten tiefer abgedunkelt. Ausserdem stand der
   Kopf zu tief — Text und Tafel stehen jetzt auf gleicher Mitte. */
@media(min-width:1080px){ .dg > .wrap{ align-items:center; } }
/* ══════════════════════════════════════════════════════════════════════════
   r31 · Markenknopf nach Referenz (Screenshot Danilo, 06.08.2026)
   Der Stand aus r19/r20 war poliertes Metall — harte Spiegelkante, doppelte
   Reflexschicht, Pillenform. Die Referenz zeigt etwas anderes und das ist ab
   jetzt der Marken-Knopf: weicher Goldverlauf (hell oben links → tief unten
   rechts), abgerundetes Rechteck statt Pille, fast schwarzer Text, feine
   dunkle Goldkante, ruhiger Schatten, kleiner Pfeil ↗.
   Damit ersetzt r31 die Metalloptik bewusst — nicht ergänzend, sondern
   ablösend: die Reflexschichten aus r19/r20 werden abgeschaltet.
   ══════════════════════════════════════════════════════════════════════════ */
.btn{ border-radius:.85rem; }
.btn-sm{ border-radius:.7rem; }
.btn-lg{ border-radius:1rem; }

.btn-primary,.btn-quiet{
  background:linear-gradient(152deg,#EFDCB6 0%,#E0C795 26%,#CDAB6E 58%,#B7955A 82%,#A98A50 100%);
  border:1px solid rgb(133 103 46/.42);
  color:#141414; text-shadow:none;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.55),
    0 1px 2px rgb(var(--shadow)/.12),
    0 12px 26px -14px rgb(122 96 42/.55);
}
.btn-primary b,.btn-quiet b{ color:#141414; opacity:1; font-weight:600; }
/* Die harten Reflexschichten aus r19/r20 sind abgelöst. */
.btn-primary::before,.btn-quiet::before{ display:none; }
/* r48: Pfeil entfernt. r50 setzt hier das Plattform-Funkelzeichen. */

.btn-primary:hover,.btn-quiet:hover{
  transform:translateY(-1px); filter:brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.62),
    0 2px 4px rgb(var(--shadow)/.14),
    0 20px 38px -16px rgb(122 96 42/.6);
}
.btn-primary:active,.btn-quiet:active{
  transform:translateY(0); filter:none;
  box-shadow:inset 0 2px 6px rgb(94 72 28/.35), 0 1px 1px rgb(var(--shadow)/.16);
}
/* Der Glanzstreifen bleibt, aber deutlich weicher — kein Spiegel mehr. */
.btn-primary::after{
  background:linear-gradient(74deg,transparent 34%,rgb(255 255 255/.2) 50%,transparent 66%);
}
.band-navy .btn-quiet,.final .btn-quiet{ border-color:rgb(133 103 46/.5); }

/* r31a · Zwei identisch goldene Knöpfe nebeneinander löschen die Hierarchie
   aus: der Hauptknopf muss der einzige volle Goldkörper bleiben. Der stille
   Knopf bekommt dieselbe Familie in Champagner — gleiche Form, gleiche
   Kante, gleicher Text, nur ohne das satte Metall und ohne Pfeil. */
.btn-quiet,.band-navy .btn-quiet,.final .btn-quiet{
  background:linear-gradient(152deg,#FFFCF6 0%,#F7EEDC 38%,#EFE2C7 72%,#E7D7B7 100%);
  border:1px solid rgb(133 103 46/.34);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.8), 0 1px 2px rgb(var(--shadow)/.08),
             0 10px 22px -16px rgb(122 96 42/.4);
}
.btn-quiet:hover,.band-navy .btn-quiet:hover,.final .btn-quiet:hover{
  background:linear-gradient(152deg,#FFFEFA 0%,#FAF3E4 38%,#F3E8D2 72%,#EBDDC0 100%);
  border-color:rgb(133 103 46/.5);
}

/* ══════════════════════════════════════════════════════════════════════════
   r32 · Der Messwert wird zum Beweisstück — neue Idee statt Zifferblatt
   Zwei Ansagen von Danilo: das Boardroom-Foto passt nicht (es zeigt Reichtum,
   der Abschnitt handelt von Not — das Bild widerspricht dem Text), und die
   80 % sollen eine eigene, technisch hochwertige Idee bekommen.
   Das Foto fällt ersatzlos weg. An seine Stelle tritt ein Instrument, das die
   Aussage nicht schmückt, sondern ZEIGT: ein Raster aus 100 Einheiten, von
   denen 80 leuchten. Das ist die Behauptung in ihrer eigenen Währung —
   80 von 100 Unternehmen. Dazu der Zahlkörper in der Serife (Markenstimme
   Luxus) und der Prozentwert in Mono (Markenstimme Technik), beides im
   Messingverlauf auf Navy — die beiden Markenfarben in einem Körper.
   Bewegung: die Reihen des Rasters zünden beim Scrollen nacheinander, ein
   Messstrahl läuft endlos darüber, die Zahl zählt hoch (bestehende
   count-up-Mechanik, reduced-motion respektiert).
   ══════════════════════════════════════════════════════════════════════════ */
.dg-panel{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; gap:clamp(1.1rem,2vw,1.6rem);
  padding:clamp(1.5rem,2.6vw,2.2rem);
  border-radius:.4rem;
  background:
    radial-gradient(120% 80% at 84% 0%, rgb(233 203 161/.16), transparent 58%),
    linear-gradient(158deg,#1B2551 0%,#0D1436 58%,#070C24 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.12),
    0 0 0 1px rgb(169 134 63/.3),
    0 0 0 8px rgb(255 255 255/.55),
    0 44px 84px -50px rgb(11 17 48/.8);
}
@media(max-width:1079px){ .dg-panel{ max-width:32rem; margin:clamp(2rem,4vw,2.8rem) auto 0; } }
/* Eckmarken */
.dg-panel::before,.dg-panel::after{
  content:''; position:absolute; width:15px; height:15px; z-index:2; pointer-events:none;
  border:1px solid rgb(233 203 161/.45);
}
.dg-panel::before{ top:11px; left:11px; border-right:0; border-bottom:0; }
.dg-panel::after{ bottom:11px; right:11px; border-left:0; border-top:0; }

.dg-panel-lab{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:.6rem;
}
.dg-panel-lab::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,rgb(169 134 63/.5),transparent);
}

.dg-figure{ display:grid; gap:.5rem; }
.dg-num{
  font-family:'Newsreader',serif; font-weight:500; line-height:.9;
  font-size:clamp(3.6rem,2.2rem + 4.4vw,6.2rem); letter-spacing:-.03em;
}
.dg-num,.dg-num span{
  background:linear-gradient(158deg,#FFFBF2 0%,#F6E3BF 26%,#E2C68F 54%,#C29B54 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.dg-num i{
  font-family:'JetBrains Mono',monospace; font-style:normal; font-weight:400;
  font-size:.3em; margin-left:.1em; vertical-align:.62em;
  -webkit-text-fill-color:#E9CBA1; background:none;
}
.dg-figure-sub{
  font-size:.92rem; line-height:1.45; color:rgb(255 255 255/.7); max-width:26ch;
}

/* Das Raster: 100 Einheiten, 80 leuchten. */
.dg-matrix{
  position:relative; display:grid; grid-template-columns:repeat(10,1fr);
  gap:clamp(.3rem,.7vw,.5rem); padding:.2rem 0;
}
.dg-matrix i{
  aspect-ratio:1; border-radius:50%;
  background:rgb(255 255 255/.08);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.06);
}
.dg-matrix i:nth-child(-n+80){
  background:radial-gradient(circle at 32% 28%,#FFF4DE,#E2C68F 46%,#A9863F 100%);
  box-shadow:0 0 9px rgb(220 187 126/.5), inset 0 0 0 1px rgb(255 255 255/.22);
}
/* Messstrahl über dem Raster */
.dg-scan{
  position:absolute !important; inset:-6% -4% !important; aspect-ratio:auto !important;
  border-radius:0 !important; background:linear-gradient(100deg,
    transparent 40%, rgb(233 203 161/.22) 50%, transparent 60%) !important;
  box-shadow:none !important; pointer-events:none;
  animation:dgSweep 6.5s linear infinite;
}
@keyframes dgSweep{ from{ transform:translateX(-42%); } to{ transform:translateX(42%); } }
@media(prefers-reduced-motion:reduce){ .dg-scan{ animation:none; opacity:.3; } }

.dg-panel-foot{
  display:flex; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgb(255 255 255/.5);
}
.dg-panel-foot span:first-child{ color:var(--gold); }
.dg-panel-foot i{ flex:1; height:1px; background:rgb(255 255 255/.12); }

/* Die Reihen zünden beim Scrollen nacheinander. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .js .dg-panel{ view-timeline-name:--dgpanel; }
    .js .dg-matrix i:not(.dg-scan){
      opacity:.12; animation:dgLight linear both; animation-timeline:--dgpanel;
    }
    .js .dg-matrix i:nth-child(-n+10){          animation-range:entry 18% entry 40%; }
    .js .dg-matrix i:nth-child(n+11):nth-child(-n+20){ animation-range:entry 22% entry 44%; }
    .js .dg-matrix i:nth-child(n+21):nth-child(-n+30){ animation-range:entry 26% entry 48%; }
    .js .dg-matrix i:nth-child(n+31):nth-child(-n+40){ animation-range:entry 30% entry 52%; }
    .js .dg-matrix i:nth-child(n+41):nth-child(-n+50){ animation-range:entry 34% entry 56%; }
    .js .dg-matrix i:nth-child(n+51):nth-child(-n+60){ animation-range:entry 38% entry 60%; }
    .js .dg-matrix i:nth-child(n+61):nth-child(-n+70){ animation-range:entry 42% entry 64%; }
    .js .dg-matrix i:nth-child(n+71):nth-child(-n+80){ animation-range:entry 46% entry 68%; }
    .js .dg-matrix i:nth-child(n+81){ animation-range:entry 50% entry 72%; }
    .js .dg-scan{ opacity:1; animation:dgSweep 6.5s linear infinite; }
  }
}
@keyframes dgLight{ to{ opacity:1; } }

/* r32a · Das Raster las sich wie Luftpolsterfolie: zu grosse, zu plastische
   Kugeln. Teure Instrumente zeigen kleine, flache, präzise Marken. Punkte
   kleiner und flach, mehr Luft dazwischen, Glanz nur als feiner Schimmer.
   Der Messstrahl stand als heller Kasten über der rechten Rasterhälfte —
   er wird schwächer und an den Rändern ausgeblendet. */
.dg-matrix{ gap:clamp(.42rem,.9vw,.66rem); justify-items:center; }
.dg-matrix i{
  width:clamp(.44rem,.82vw,.6rem); height:clamp(.44rem,.82vw,.6rem); aspect-ratio:auto;
  background:rgb(255 255 255/.07); box-shadow:inset 0 0 0 1px rgb(255 255 255/.05);
}
.dg-matrix i:nth-child(-n+80){
  background:linear-gradient(160deg,#F6E3BF,#D8B87C 52%,#B08F4F);
  box-shadow:0 0 6px rgb(220 187 126/.35);
}
.dg-scan{
  width:auto !important; height:auto !important;
  background:linear-gradient(100deg,
    transparent 42%, rgb(233 203 161/.13) 50%, transparent 58%) !important;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   r33 · Slide 2 als eigene Sektion: Die 5 Säulen + Film
   Sie steht direkt nach dem Hero, vor „Ich kann dich voll verstehen“.
   Aufbau wie im Briefing-Slide: Kopf mittig, darunter links der Film, rechts
   die vier Gewinne des Tages, darunter Handlung und Beleg.
   ENTSCHEIDUNG: die vier Gewinne standen bisher im Hero. Zwei identische
   Listen direkt untereinander lesen sich als Versehen — sie sind deshalb
   hierher gewandert. Der Hero trägt jetzt Anspruch, Versprechen, Handlung
   und Beleg; die Ausführung beginnt hier.
   Der Boden ist Navy: der Hero endet im Bild, danach kommt band-warm — eine
   dunkle Sektion dazwischen gibt dem Film den Kinoraum, den er braucht.
   Unter allem stehen fünf Stützen mit Architrav: keine Datengrafik, sondern
   gebaute Ordnung — das Bild, das der Satz behauptet.
   ══════════════════════════════════════════════════════════════════════════ */
.sa{ position:relative; isolation:isolate; overflow:hidden; }
.sa > .wrap{ position:relative; z-index:1; }
.sa-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgb(255 255 255/.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255/.05) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(72% 60% at 50% 12%, #000, transparent 78%);
}
.sa-head{ max-width:52rem; margin-inline:auto; text-align:center; }
.sa-head .reg{ justify-content:center; }
.sa-head .reg b{ color:var(--gold); }
.sa-head .shead-note{ margin-inline:auto; }

.sa-body{
  margin-top:clamp(2.2rem,4vw,3.4rem);
  display:grid; gap:clamp(1.8rem,3.4vw,3.4rem);
  /* Solange kein Film laeuft, ist das Portrait das Hauptmotiv der Sektion —
     es bekommt entsprechend mehr Spalte als die Liste. */
  grid-template-columns:minmax(0,1.24fr) minmax(0,.88fr); align-items:center;
}
@media(max-width:980px){ .sa-body{ grid-template-columns:1fr; } }

/* ---------- Das Portrait ----------
   Lichtmodell: das Bild ist selbst die Lichtquelle der Sektion. Frueher lag es
   unter einer schweren Abdunklung (brightness .72 plus zwei Verlaeufe) und der
   Kopf sass am oberen Rand — es las sich als angeschnittenes Standbild. Jetzt
   wird es fast unbeschnitten gezeigt (Quelle ist 1280x721, der Rahmen 16/10),
   hell gehalten und nur unten zum Navy hin abgesenkt, damit das Namensschild
   sitzt und die Kante nicht hart abbricht. */
.sa-film{ position:relative; margin:0; }
.film-frame{
  position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:.42rem;
  background:linear-gradient(158deg,#16204A,#080E28);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.1),
    0 0 0 1px rgb(169 134 63/.42),
    0 0 0 8px rgb(255 255 255/.05),
    0 60px 110px -56px rgb(4 8 24/.92);
}
.film-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.sa-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* Der Kopf sitzt in der Quelle leicht rechts der Mitte und hat oben Luft —
     50%/34% laesst diese Luft stehen, statt die Stirn anzuschneiden. */
  object-position:50% 34%;
  filter:saturate(.94) contrast(1.04) brightness(.94);
  transition:transform 1200ms var(--ease-cine), filter 700ms var(--ease-firm);
}
/* Nur zwei leise Ebenen: ein warmer Streiflichthauch von links oben (dieselbe
   Richtung wie das Licht im Foto) und ein Absenken nach unten. */
.film-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(118deg, rgb(233 203 161/.14) 0%, transparent 34%),
    linear-gradient(to top, rgb(6 10 30/.78) 0%, rgb(6 10 30/.16) 30%, transparent 56%);
}
.film-frame:hover .sa-poster{ transform:scale(1.03); filter:saturate(1) contrast(1.05) brightness(.99); }
@media(prefers-reduced-motion:reduce){ .film-frame:hover .sa-poster{ transform:none; } }

/* Namensschild: Messingplatte auf der Bildkante — der Beleg dafuer, WER da
   steht. Es ersetzt die fruehere Abspielmarke und die Video-Tafel. */
.sa-plate{
  position:absolute; z-index:3;
  left:clamp(1rem,2.6vw,1.9rem); bottom:clamp(.9rem,2.2vw,1.6rem);
  display:grid; gap:.2rem; padding:.6rem .95rem;
  border-radius:.28rem;
  background:linear-gradient(150deg, rgb(12 18 51/.72), rgb(8 12 34/.62));
  border:1px solid rgb(233 203 161/.34);
  border-left:2px solid rgb(233 203 161/.85);
  backdrop-filter:blur(7px) saturate(1.15);
  box-shadow:0 18px 34px -22px rgb(4 8 24/.9);
}
.sa-plate b{
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(.94rem,.86rem + .28vw,1.12rem); letter-spacing:-.01em;
  color:#FDFAF4;
}
.sa-plate span{
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgb(233 203 161/.9);
}
/* Sobald ein Player im Rahmen liegt, treten Foto-Ebenen und Schild zurueck. */
.film-frame:has(iframe) .sa-poster,
.film-frame:has(iframe)::after{ display:none; }
.sa-film:has(iframe) .sa-plate{ display:none; }

/* ---------- Die vier Gewinne ---------- */
.sa-side{ display:grid; gap:clamp(1.4rem,2.6vw,2.2rem); align-content:start; }
.sa-gains{
  list-style:none; margin:0; padding:0; display:grid; gap:0;
  counter-reset:sa;
}
.sa-gains li{
  counter-increment:sa; position:relative; display:block;
  padding:clamp(.9rem,1.8vw,1.2rem) 0 clamp(.9rem,1.8vw,1.2rem) clamp(2.4rem,3.4vw,3.2rem);
  font-size:var(--t-small); line-height:1.55; color:rgb(255 255 255/.82);
  transition:color var(--d-hover) var(--ease-firm);
}
.sa-gains li + li{ border-top:1px solid rgb(255 255 255/.1); }
.sa-gains li::before{
  content:'0' counter(sa);
  position:absolute; left:0; top:calc(clamp(.9rem,1.8vw,1.2rem) + .15em);
  font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.06em;
  color:transparent;
  background:linear-gradient(158deg,#F6E3BF,#D8B87C 54%,#A9863F);
  -webkit-background-clip:text; background-clip:text;
}
.sa-gains li b{ color:#fff; font-weight:600; }
.sa-gains li:hover{ color:#fff; }
/* Feiner Messinganriss, der beim Scrollen einläuft */
.sa-gains li::after{
  content:''; position:absolute; left:0; top:-1px; height:1px; width:clamp(1.8rem,4vw,3rem);
  background:linear-gradient(90deg,rgb(233 203 161/.8),transparent);
  transform-origin:left;
}
.sa-gains li:first-child::after{ display:none; }

.sa-act{ display:grid; gap:.9rem; justify-items:start; }
.sa-proof{
  margin:0; font-size:.78rem; letter-spacing:.02em; color:rgb(255 255 255/.6);
}
.sa-proof b{ color:var(--gold); font-family:'JetBrains Mono',monospace; }

/* ---------- Fünf Stützen, ein Architrav ---------- */
.sa-temple{
  margin-top:clamp(2.6rem,5vw,4.2rem); display:grid; gap:0; justify-items:center;
}
.sa-beam{
  width:min(100%,44rem); height:3px; border-radius:2px;
  background:linear-gradient(90deg,transparent,#A9863F 14%,#E9CBA1 50%,#A9863F 86%,transparent);
  box-shadow:0 0 18px rgb(220 187 126/.35);
  transform-origin:center;
}
.sa-cols{
  width:min(100%,44rem); display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(1.6rem,6vw,4.4rem); justify-items:center; padding:0 clamp(1rem,4vw,3rem);
}
.sa-cols i{
  width:clamp(4px,.6vw,7px); height:clamp(2.4rem,5vw,4.2rem); border-radius:2px;
  transform-origin:top;
  background:linear-gradient(to bottom,rgb(233 203 161/.85),rgb(169 134 63/.4),transparent);
}

@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .js .sa-temple{ view-timeline-name:--temple; }
    .js .sa-beam{ transform:scaleX(0); animation:saGrow linear both;
      animation-timeline:--temple; animation-range:entry 14% entry 62%; }
    .js .sa-cols i{ transform:scaleY(0); animation:saDrop linear both;
      animation-timeline:--temple; }
    .js .sa-cols i:nth-child(1){ animation-range:entry 26% entry 60%; }
    .js .sa-cols i:nth-child(2){ animation-range:entry 30% entry 64%; }
    .js .sa-cols i:nth-child(3){ animation-range:entry 34% entry 68%; }
    .js .sa-cols i:nth-child(4){ animation-range:entry 38% entry 72%; }
    .js .sa-cols i:nth-child(5){ animation-range:entry 42% entry 76%; }
    .js .sa-gains li::after{ transform:scaleX(0); animation:saGrow linear both;
      animation-timeline:view(); animation-range:entry 12% entry 58%; }
  }
}
@keyframes saGrow{ to{ transform:scaleX(1); } }
@keyframes saDrop{ to{ transform:scaleY(1); } }

/* r33a · Der Sektionskopf lief in vier Zeilen aus — für einen Zwischenkopf
   zu gross. Eine Stufe kleiner, engere Zeile, klare Maxbreite. */
.sa-head h2{ font-size:clamp(1.65rem,1.15rem + 1.7vw,2.7rem); line-height:1.16; }
.sa-head{ max-width:46rem; }

/* ══════════════════════════════════════════════════════════════════════════
   r34 · Die Säulen-Sektion auf Luxusniveau
   Drei Punkte von Danilo: der Kopf lief zu schmal (fünf Zeilen für einen
   Satz), die Sektion soll teurer wirken, ein Foto soll den Grund tragen.
   Der Boardroom-Grund passt HIER inhaltlich (anders als in der Diagnose):
   dieser Abschnitt spricht vom Ziel — stabile fünf- bis sechsstellige
   Umsätze — und der Hero zeigt bereits die Tür zu genau diesem Raum
   („BOARDROOM ONE“). Tür im Hero, Raum dahinter hier: eine Erzählung.
   Das Bild bleibt Grund, nie Motiv: entsättigt, nach Navy gezogen, zu den
   Rändern weggeblendet, mit sehr langsamem Zug (56 s).
   Die Gewinne stehen auf einer Glastafel — sie müssen sich vom Bildgrund
   abheben, sonst liest sich Text auf Foto immer billig.
   ══════════════════════════════════════════════════════════════════════════ */
.sa-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.sa-bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  filter:grayscale(.5) contrast(1.12) brightness(.68) saturate(.95);
  opacity:.62; mix-blend-mode:luminosity;
  transform:scale(1.06);
  animation:saDrift 56s ease-in-out infinite alternate;
}
@keyframes saDrift{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to{   transform:scale(1.14) translate3d(-1.4%,-1%,0); }
}
@media(prefers-reduced-motion:reduce){ .sa-bg img{ animation:none; } }
.sa-bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(76% 64% at 50% 28%, transparent 6%, rgb(11 17 48/.56) 68%, rgb(8 13 38/.92) 100%),
    linear-gradient(to bottom, rgb(11 17 48/.82) 0%, rgb(11 17 48/.3) 24%,
      rgb(11 17 48/.48) 64%, rgb(9 14 40/.95) 100%);
}
.sa-grid{ z-index:1; }

/* Kopf: der Satz bekommt Breite — 22ch aus der Grundregel sind für einen
   Zwischenkopf mit Nebensatz zu eng. */
.sa-head{ max-width:60rem; }
.sa-head h2{
  max-width:30ch; margin-inline:auto;
  font-size:clamp(1.7rem,1.1rem + 1.95vw,2.85rem); line-height:1.14;
  text-wrap:balance;
}
.sa-head .shead-note{ max-width:52ch; }

/* Die Glastafel für Gewinne und Handlung */
.sa-side{
  padding:clamp(1.3rem,2.4vw,2rem) clamp(1.3rem,2.6vw,2.2rem);
  border-radius:.36rem; position:relative; isolation:isolate;
  background:linear-gradient(158deg,rgb(255 255 255/.09),rgb(255 255 255/.03));
  border:1px solid rgb(255 255 255/.1);
  backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.14), 0 40px 80px -50px rgb(4 8 24/.9);
}
/* Messingkante oben — dieselbe Marke wie am Diagnose-Bogen */
.sa-side::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  border-radius:.36rem .36rem 0 0;
  background:linear-gradient(90deg,transparent,#A9863F 24%,#E9CBA1 52%,#A9863F 78%,transparent);
}
.sa-gains li + li{ border-top-color:rgb(255 255 255/.08); }

/* Filmrahmen: Eckmarken und ein ruhiger Lichtzug über dem Glas */
.sa-film .film-frame::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(74deg,transparent 40%,rgb(233 203 161/.1) 50%,transparent 60%);
  animation:saGlint 11s linear infinite;
}
@keyframes saGlint{ from{ transform:translateX(-46%); } to{ transform:translateX(46%); } }
@media(prefers-reduced-motion:reduce){ .sa-film .film-frame::before{ animation:none; opacity:.3; } }
/* Eckmarken gehoeren an den Rahmen, nicht an die Figur — die Figur enthaelt
   auch die Bildunterschrift, dadurch sass die untere Marke mitten im Bild. */
.sa-marks{ position:absolute; inset:10px; z-index:4; pointer-events:none; }
.sa-marks::before,.sa-marks::after{
  content:''; position:absolute; width:16px; height:16px;
  border:1px solid rgb(233 203 161/.5);
}
.sa-marks::before{ top:0; left:0; border-right:0; border-bottom:0; }
.sa-marks::after{ bottom:0; right:0; border-left:0; border-top:0; }

/* Scrollgetrieben: Film und Tafel kommen aus der Tiefe. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .js .sa-body{ view-timeline-name:--sabody; }
    .js .sa-film .film-frame{
      animation:saRise linear both;
      animation-timeline:--sabody; animation-range:entry 8% entry 76%;
    }
    .js .sa-side{
      animation:saRiseSoft linear both;
      animation-timeline:--sabody; animation-range:entry 14% entry 82%;
    }
    .js .sa-bg img{
      animation:saDrift 56s ease-in-out infinite alternate,
                saPan linear both;
      animation-timeline:auto, view();
      animation-range:normal, cover 0% cover 100%;
    }
  }
}
@keyframes saRise{
  from{ transform:translateY(26px) scale(.985); opacity:.4; }
  to{   transform:none; opacity:1; }
}
@keyframes saRiseSoft{
  from{ transform:translateY(18px); opacity:.5; }
  to{   transform:none; opacity:1; }
}
@keyframes saPan{ from{ object-position:50% 30%; } to{ object-position:50% 52%; } }

/* ══════════════════════════════════════════════════════════════════════════
   r35 · Ein Blau für die ganze Seite
   Danilo hat das Blau der Zusagen-Sektion als Referenz gesetzt: es ist
   deutlich blauer und satter als die alten Grundwerte (#0B1029 / #16203F),
   die praktisch schwarzblau waren. Die Referenz stammt aus den Karten dort:
   #1A2450 → #0B1130. Diese Familie wird ab jetzt die Grundfarbe der Seite;
   alle Navy-Flächen, Platten und Ränder ziehen mit, damit nirgends zwei
   verschiedene Blaus nebeneinander stehen.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --navy:      #0C1436;   /* Grundfläche, tief aber blau — nicht schwarzblau */
  --navy-soft: #1A2450;   /* Kartengrund / Verlaufsanfang, aus der Referenz */
  --navy-deep: #080E28;   /* Tiefster Punkt für Vignetten und Fussflächen */
}
.band-navy,
.band-navy:nth-of-type(even){
  background:
    radial-gradient(58% 44% at 8% -4%,  rgb(233 203 161/.14), transparent 62%),
    radial-gradient(52% 42% at 90% 104%, rgb(52 74 148/.28), transparent 64%),
    linear-gradient(154deg, #1A2450 0%, #142046 36%, #0C1436 100%);
}
.band-navy:nth-of-type(even){
  background:
    radial-gradient(58% 44% at 92% -4%, rgb(233 203 161/.14), transparent 62%),
    radial-gradient(52% 42% at 10% 104%, rgb(52 74 148/.28), transparent 64%),
    linear-gradient(206deg, #1A2450 0%, #142046 36%, #0C1436 100%);
}
/* Die dunklen Bauteile der neuen Sektionen auf dieselbe Familie ziehen. */
.dg-panel{
  background:
    radial-gradient(120% 80% at 84% 0%, rgb(233 203 161/.16), transparent 58%),
    linear-gradient(158deg,#1F2A5C 0%,#142046 58%,#0C1436 100%);
}
.dg-lever{ background:linear-gradient(152deg,#1A2450,#121D42 68%,#0C1436); }
.film-frame{ background:linear-gradient(158deg,#1A2450,#0C1436); }
.sa-bg::after{
  background:
    radial-gradient(76% 64% at 50% 28%, transparent 6%, rgb(12 20 54/.56) 68%, rgb(10 16 44/.92) 100%),
    linear-gradient(to bottom, rgb(12 20 54/.82) 0%, rgb(12 20 54/.28) 24%,
      rgb(12 20 54/.46) 64%, rgb(10 16 44/.95) 100%);
}

/* r35a · Mit dem Foto darüber wurde die Sektion grau statt blau — das Bild
   zieht die Fläche zur Mitte. Es tritt zurück, und über ihm liegt jetzt eine
   blaue Lasur in der Referenzfarbe, damit das Blau der Seite gehalten wird. */
.sa-bg img{ opacity:.44; filter:grayscale(.58) contrast(1.14) brightness(.6) saturate(.95); }
.sa-bg::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(158deg, rgb(26 36 80/.5), rgb(12 20 54/.62));
  mix-blend-mode:multiply;
}
.sa-bg::after{ z-index:2; }

/* r36 · Zwei Korrekturen an der Säulen-Sektion
   1. Der Kopf lief auf breiten Schirmen weiter zu schmal — 30ch sind für
      diesen Satz zu eng. Breitere Spalte, breiteres Maß, ruhigerer Umbruch.
   2. Das Foto lag flächig unter dem Satz und zog die Fläche grau. Ein Grund
      gehört an die Ränder, nicht unter die Schrift: es wird zur Mitte hin
      ausmaskiert, aussen bleibt es stehen. */
.sa-head{ max-width:72rem; }
.sa-head h2{ max-width:34ch; font-size:clamp(1.7rem,1.05rem + 2.1vw,3.1rem); }
.sa-head .shead-note{ max-width:60ch; }
.sa-bg img{
  mask-image:
    radial-gradient(58% 46% at 50% 34%, transparent 0%, rgb(0 0 0/.45) 62%, #000 88%);
}

/* r37 · Neuer Grund für die Säulen-Sektion: echter Workshop statt Boardroom
   Danilos Vorgabe: ein Seminarbild, das den Massstab zeigt — und ausschliesslich
   kostenfreies Material. Gewählt: Unsplash (Lizenz erlaubt kommerzielle Nutzung,
   keine Namensnennung nötig, keine Kosten, kein Kreditverbrauch).
   Bewusst KEIN Hörsaal mit hunderten Köpfen: die Seite verkauft 20 Plätze —
   ein Bild mit 500 Zuhörern würde das Angebot falsch darstellen. Das Motiv
   zeigt einen echten Workshop-Raum in genau dieser Grössenordnung.
   Das Bild ist wärmer und heller als der Boardroom, also greift die Gradation
   härter: stärker entsättigt, dunkler, tiefer in die Markenfarbe gezogen. */
.sa-bg img{
  object-position:50% 46%;
  filter:grayscale(.74) contrast(1.16) brightness(.46) saturate(.9);
  opacity:.5;
}
.sa-bg::before{
  background:linear-gradient(158deg, rgb(26 36 80/.62), rgb(12 20 54/.74));
}

/* r38 · Der Grund war da, aber unsichtbar — Korrektur der Gradation
   Das Foto lag korrekt im Markup und auf dem Server, wurde aber von vier
   Schichten übereinander erdrückt: Maske, brightness .46, opacity .5 und
   zwei Lasuren. Das Ergebnis war eine leere blaue Fläche. Jetzt trägt eine
   Schicht die Abdunklung statt vier: das Bild bleibt hell genug, um als Raum
   lesbar zu sein, die Maske hält nur noch die Textzone frei, und die obere
   Lasur wird über der Schrift dicht, an den Rändern dünn. */
.sa-bg img{
  filter:grayscale(.62) contrast(1.1) brightness(.72) saturate(.92);
  opacity:.86;
  mask-image:
    radial-gradient(52% 40% at 50% 30%, rgb(0 0 0/.28) 0%, rgb(0 0 0/.7) 58%, #000 86%);
}
.sa-bg::before{
  background:linear-gradient(158deg, rgb(26 36 80/.42), rgb(12 20 54/.5));
}
.sa-bg::after{
  background:
    radial-gradient(74% 60% at 50% 28%, rgb(12 20 54/.5) 8%, rgb(12 20 54/.34) 62%, rgb(10 16 44/.72) 100%),
    linear-gradient(to bottom, rgb(12 20 54/.72) 0%, rgb(12 20 54/.16) 26%,
      rgb(12 20 54/.3) 66%, rgb(10 16 44/.88) 100%);
}

/* ══════════════════════════════════════════════════════════════════
   r39 · WORTMARKE IM KOPF UND ALS LAUFBAND
   1. Im Kopf stand COCKPIT klein unter FOUNDER. Der Fuss zeigt die richtige
      Form: beide Wörter gleich gross in einer Zeile, Navy und Messing.
      Der Kopf übernimmt sie — eine Marke, nicht zwei Zeichnungen.
   2. Zwischen der dunklen Säulen-Sektion und dem hellen Mentor-Abschnitt
      läuft der Name als Band durch. Es trägt keinen Inhalt, sondern die
      Naht: ein Übergang, der sich bewegt, statt einer Kante.
   ══════════════════════════════════════════════════════════════════ */
.markband{
  position:relative; overflow:hidden; padding:clamp(.9rem,2.2vw,1.8rem) 0;
  background:linear-gradient(to bottom,#0C1436 0%,#0A1130 52%,#0C1436 100%);
  border-block:1px solid rgb(201 172 114/.14);
}
.markband::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right,#0C1436 0%,transparent 16%,transparent 84%,#0C1436 100%);
}
.markband-track{
  display:flex; align-items:center; gap:clamp(1.6rem,4vw,3.4rem);
  width:max-content; animation:markRun 42s linear infinite;
}
.markband .wordmark{
  flex-direction:row; align-items:baseline; gap:.32em;
  font-size:clamp(1.5rem,4.6vw,3.6rem); letter-spacing:-.005em;
  opacity:.5; white-space:nowrap;
}
.markband .wordmark b{ color:rgb(214 224 255/.5); letter-spacing:-.01em; }
.markband .wordmark i{
  font-size:1em; letter-spacing:.02em; margin-right:0;
  /* Das Laufband setzt beide Wörter nebeneinander auf eine Grundlinie — der
     negative obere Rand des Lockups gehört dort nicht hin, sonst rutscht
     die Zeile. */
  margin-top:0;
  color:rgb(201 172 114/.62);
}
.markband-dot{
  flex:none; width:.42rem; height:.42rem; border-radius:50%;
  background:rgb(201 172 114/.4);
}
@keyframes markRun{ to{ transform:translate3d(-50%,0,0); } }
@media(prefers-reduced-motion:reduce){ .markband-track{ animation:none; } }


/* ══════════════════════════════════════════════════════════════════
   r41 · DER FUSS ALS ABSENDER
   Das Emblem mittig unter den Spalten war ein Schlusspunkt ohne Absender.
   Jetzt steht es links und trägt die Fläche, rechts hängen alle Auskünfte
   in drei Spalten an derselben Kante. Zwei Massstäbe, eine Grundlinie.
   Die Aura hinter dem Zeichen ersetzt einen Schatten: gedrucktes Messing
   leuchtet nicht, aber es wirft Wärme auf das Papier daneben.
   Die Datei misst 310 px — grösser wird sie nicht gerechnet, sonst weich.
   ══════════════════════════════════════════════════════════════════ */
.foot{ position:relative; padding-top:clamp(2.6rem,5vw,4.4rem); }
.foot::before{
  content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(to right, transparent 0%, rgb(169 134 63/.42) 22%,
    rgb(169 134 63/.62) 50%, rgb(169 134 63/.42) 78%, transparent 100%);
}
.foot-grid{
  display:grid; align-items:start;
  gap:clamp(2.4rem,5vw,4rem) clamp(2rem,6vw,6rem);
  grid-template-columns:1fr;
}
@media(min-width:860px){
  .foot-grid{ grid-template-columns:minmax(16rem,26rem) 1fr; align-items:center; }
}

.foot-sig{ display:flex; flex-direction:column; gap:clamp(1rem,2vw,1.6rem);
  align-items:flex-start; }
.foot-emblem{
  position:relative; display:block; line-height:0; border-radius:50%;
  transition:transform var(--d-hover) var(--ease-firm);
}
.foot-emblem img{ position:relative; z-index:1;
  width:clamp(9rem,19vw,19.4rem); height:auto; }
.foot-emblem:hover{ transform:translateY(-3px); }

/* Wärme statt Schlagschatten: ein weicher Messingschein unter dem Zeichen,
   der beim Überfahren aufgeht. */
.foot-aura{
  position:absolute; inset:-14%; z-index:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgb(201 172 114/.34) 0%, rgb(201 172 114/.14) 46%, transparent 72%);
  opacity:.75; transition:opacity var(--d-hover) var(--ease-firm),
    transform var(--d-hover) var(--ease-firm);
}
.foot-emblem:hover .foot-aura{ opacity:1; transform:scale(1.06); }

.foot-claim{ max-width:26ch; margin:0; }

.foot-cols{
  display:grid; gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.foot-cols > div{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.foot-cols .reg{ margin-bottom:.3rem; }
.foot-cols a{ position:relative; }

/* Der Unterstrich läuft von links ein statt zu blinken — dieselbe Geste wie
   in der Kopfnavigation, damit der Fuss nicht anders reagiert als der Kopf. */
.foot-cols a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-.18em; height:1px;
  background:linear-gradient(to right,#A9863F,#E0C795);
  transition:right var(--d-hover) var(--ease-firm);
}
.foot-cols a:hover::after{ right:0; }

@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .js .foot-sig{ animation:footRise linear both;
      animation-timeline:view(); animation-range:entry 6% entry 46%; }
  }
}
@keyframes footRise{
  from{ opacity:0; transform:translate3d(0,1.4rem,0); }
  to{ opacity:1; transform:none; }
}

/* r41a · Die dritte Spalte fiel um, weil die Mailadresse breiter ist als ihr
   Mindestmass — auto-fit rechnet mit dem Inhalt, nicht mit dem Wunsch. Feste
   Dreiteilung ab 620 px, und lange Adressen dürfen umbrechen. */
@media(min-width:620px){
  .foot-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.foot-cols a{ overflow-wrap:anywhere; }
.foot-sig{ gap:clamp(.8rem,1.4vw,1.2rem); }

/* r41b · Die Mailadresse brach mitten im Wort. Sie darf die Breite ihrer
   Spalte bestimmen — die drei Spalten richten sich nach ihrem Inhalt und
   verteilen den Rest zwischen sich. */
@media(min-width:620px){
  .foot-cols{ grid-template-columns:repeat(3,auto); justify-content:space-between;
    column-gap:clamp(2rem,5vw,4.5rem); }
  .foot-cols a{ overflow-wrap:normal; }
}

/* ══════════════════════════════════════════════════════════════════
   r42 · DER FUSS ALS SCHLUSSPLATTE
   Der helle Fuss liess die Seite auslaufen: eine blasse Fläche, auf der
   kleine graue Zeilen schwammen. Eine Seite, die 299 € verlangt, endet nicht
   in Beige. Sie endet in der Markenfarbe.
   Deshalb: dunkle Platte in Navy, das helle Emblem steht darauf wie ein
   Siegel auf Papier, Messing trägt die Beschriftung, und der Abschluss
   beginnt mit einer Aussage statt mit einer Linkliste.
   Bewegung ist Material, kein Effekt: die Haarlinie zieht sich beim
   Eintritt auf, die Zeilen steigen versetzt an, über die Linie läuft ein
   langsamer Messingschein, die Aura hinter dem Siegel atmet.
   ══════════════════════════════════════════════════════════════════ */
.foot{
  position:relative; isolation:isolate; overflow:hidden; color:#D7DEF2;
  background:
    radial-gradient(74% 58% at 12% 0%, rgb(31 42 92/.9) 0%, transparent 62%),
    linear-gradient(168deg,#141E44 0%,#0C1436 46%,#080E28 100%);
  padding-block:clamp(3.4rem,7vw,6.4rem) clamp(1.4rem,2.4vw,2rem);
}
.foot::before{
  background:linear-gradient(to right, transparent 0%, rgb(201 172 114/.5) 24%,
    rgb(230 205 158/.72) 50%, rgb(201 172 114/.5) 76%, transparent 100%);
}

/* Zwei Schichten Tiefe: ein Messingschimmer oben links und ein feines
   Raster, das dieselbe Sprache spricht wie die dunklen Bänder der Seite. */
.foot-veil{
  position:absolute; inset:auto -20% 40% -20%; height:52vh; z-index:0;
  pointer-events:none;
  background:radial-gradient(46% 60% at 22% 100%, rgb(201 172 114/.13) 0%, transparent 70%);
}
.foot-lines{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(to right, rgb(255 255 255/.028) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgb(255 255 255/.028) 0 1px, transparent 1px 88px);
  mask-image:radial-gradient(70% 78% at 26% 22%, #000 0%, transparent 76%);
}
.foot > *:not(.foot-veil):not(.foot-lines):not(.foot-photo){ position:relative; z-index:1; }

/* Schlusszeile: die Seite sagt zum Abschied, worum es ging. */
.foot-close{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.8rem 2rem;
  padding-bottom:clamp(1.2rem,2.4vw,2rem);
}
.foot-line{
  margin:0; font-family:'Newsreader',Georgia,serif;
  font-size:clamp(1.35rem,.9rem + 1.5vw,2.5rem); line-height:1.14;
  letter-spacing:-.01em; color:#F2F5FF;
}
.foot-when{ margin:0; font-size:var(--t-small); color:rgb(201 172 114/.86);
  letter-spacing:.08em; }

/* Die Haarlinie ist die Naht zwischen Aussage und Auskunft. Sie zieht sich
   beim Eintritt auf und trägt danach einen langsam wandernden Schein. */
.foot-rule{
  display:block; height:1px; transform-origin:left center;
  background:linear-gradient(to right, rgb(201 172 114/.62), rgb(230 205 158/.34) 46%,
    rgb(201 172 114/.14) 100%);
  margin-bottom:clamp(2.4rem,5vw,4.4rem);
}
.foot-rule::after{
  content:''; display:block; height:100%; width:22%;
  background:linear-gradient(to right, transparent, rgb(246 233 205/.85), transparent);
  animation:footSheen 9s ease-in-out infinite;
}
@keyframes footSheen{
  0%,100%{ transform:translateX(-30%); opacity:0; }
  18%{ opacity:.9; }
  62%{ opacity:.5; }
  85%,100%{ transform:translateX(440%); opacity:0; }
}

/* Das Emblem ist hell — auf Navy wird es zum Siegel. Ring und Aura geben
   ihm den Stand, den es auf Papier durch den Druck hätte. */
.foot-emblem::before{
  content:''; position:absolute; inset:-6%; border-radius:50%; z-index:0;
  border:1px solid rgb(201 172 114/.3);
}
.foot-aura{
  background:radial-gradient(circle at 50% 50%,
    rgb(201 172 114/.3) 0%, rgb(201 172 114/.12) 48%, transparent 74%);
  animation:footBreath 11s ease-in-out infinite;
}
@keyframes footBreath{ 0%,100%{ opacity:.62; transform:scale(1); }
  50%{ opacity:.94; transform:scale(1.05); } }

.foot-claim{ color:rgb(215 222 242/.72); }
.foot-cols .reg{ color:rgb(201 172 114/.9); }
.foot-cols a{ color:rgb(215 222 242/.82); }
.foot-cols a:hover{ color:#F2F5FF; }
.foot-cols > div{ padding-left:.9rem; border-left:1px solid rgb(201 172 114/.16); }

.foot-base{
  margin-top:clamp(2.4rem,5vw,4rem); padding-top:clamp(1rem,2vw,1.4rem);
  border-top:1px solid rgb(255 255 255/.08);
  color:rgb(215 222 242/.5);
}

@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .js .foot-rule{ animation:footDraw linear both;
      animation-timeline:view(); animation-range:entry 4% entry 34%; }
    .js .foot-close,.js .foot-cols > div:nth-child(1){ animation:footRise linear both;
      animation-timeline:view(); animation-range:entry 2% entry 32%; }
    .js .foot-cols > div:nth-child(2){ animation:footRise linear both;
      animation-timeline:view(); animation-range:entry 8% entry 40%; }
    .js .foot-cols > div:nth-child(3){ animation:footRise linear both;
      animation-timeline:view(); animation-range:entry 14% entry 48%; }
  }
}
@keyframes footDraw{ from{ transform:scaleX(0); opacity:0; } to{ transform:none; opacity:1; } }
@media(prefers-reduced-motion:reduce){
  .foot-rule::after,.foot-aura{ animation:none; }
}

/* r42a · Schlusszeile und Haarlinie standen ausserhalb des Satzspiegels —
   das Randmass der Fusszeilen gilt auch für sie. */
.foot-close,.foot-rule{ padding-inline:clamp(1.2rem,4.5vw,4rem); }
.foot-rule{ box-sizing:border-box; background-clip:content-box; }
.foot-rule::after{ margin-left:0; }

/* r42b · Die Spalten hingen in der Mitte der Fläche und liessen oben ein
   Loch. Sie hängen jetzt an derselben Oberkante wie das Siegel — beide
   beginnen unter der Haarlinie. */
@media(min-width:860px){
  .foot-grid{ align-items:start; }
  .foot-cols{ padding-top:.35rem; }
}

/* ══════════════════════════════════════════════════════════════════
   r43 · TIEFE, MATERIAL UND DAUERSCHLEIFEN IM FUSS
   Das Emblem lag als 310-px-Datei vor und trug einen weissen Rand — es war
   auf Weiss montiert worden, die halbtransparenten Randpixel schleppten die
   alte Hinterlegung mit. Neue Quelle: 925 px, weisser Matte-Anteil
   herausgerechnet, Alpha auf einen sauberen Kreis beschnitten, auf 1240 px
   gerechnet. Damit steht es bis 19.4 rem auf jedem Retina-Schirm scharf.
   Dazu bekommt die Platte Tiefe statt Farbe: ein Horizont oben, eine sehr
   langsam wandernde Messing-Aurora, ein Grund, der zum Rand hin abfällt.
   Alle Schleifen laufen 20–60 s — Bewegung, die man spürt statt sieht.
   ══════════════════════════════════════════════════════════════════ */
.foot{
  background:
    radial-gradient(120% 46% at 50% 0%, rgb(46 60 118/.7) 0%, transparent 64%),
    radial-gradient(74% 58% at 12% 6%, rgb(31 42 92/.82) 0%, transparent 62%),
    radial-gradient(90% 70% at 88% 100%, rgb(10 15 40/.9) 0%, transparent 60%),
    linear-gradient(168deg,#16214B 0%,#0D1539 44%,#070C24 100%);
}
/* Horizont: eine helle Kante oben, die die Platte vom Bild darüber abhebt. */
.foot::after{
  content:''; position:absolute; inset:0 0 auto; height:22vh; z-index:0;
  pointer-events:none;
  background:linear-gradient(to bottom, rgb(120 148 220/.14), transparent 82%);
}
/* Aurora: zwei weiche Messingfelder, die gegenläufig durch die Fläche
   ziehen. Sie sind fast unsichtbar — sie halten die Fläche nur am Leben. */
.foot-veil{
  inset:-30% -30% -10% -30%; height:auto;
  background:
    radial-gradient(38% 42% at 24% 78%, rgb(201 172 114/.16) 0%, transparent 68%),
    radial-gradient(32% 38% at 78% 34%, rgb(120 148 220/.12) 0%, transparent 70%);
  animation:footDrift 46s ease-in-out infinite alternate;
}
@keyframes footDrift{
  from{ transform:translate3d(-3%,2%,0) scale(1); }
  to{ transform:translate3d(4%,-3%,0) scale(1.08); }
}
.foot-lines{ opacity:.42; animation:footGridPulse 22s ease-in-out infinite; }
@keyframes footGridPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:.55; } }

/* Das Siegel: ein zweiter, dünner Ring läuft langsam um das Zeichen — der
   einzige Teil des Fusses, der sich dreht, deshalb sehr langsam und fein. */
.foot-emblem::after{
  content:''; position:absolute; inset:-13%; border-radius:50%; z-index:0;
  border:1px dashed rgb(201 172 114/.28);
  animation:footOrbit 64s linear infinite;
}
.foot-emblem::before{ inset:-5%; border-color:rgb(201 172 114/.34); }
@keyframes footOrbit{ to{ transform:rotate(360deg); } }
.foot-emblem img{
  filter:drop-shadow(0 18px 34px rgb(4 8 24/.55))
         drop-shadow(0 2px 0 rgb(201 172 114/.18));
}

/* Der Termin bekommt denselben Messing-Verlauf wie die Wortmarke im Band —
   Schrift als Material, nicht als Farbe. */
.foot-when{
  color:transparent;
  background:linear-gradient(96deg,#C9AC72 0%,#F0DCB6 26%,#B08F4F 52%,#F0DCB6 76%,#C9AC72 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:footShift 20s ease-in-out infinite;
}
@keyframes footShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* Die Spaltenkanten leuchten von oben nach unten aus, statt als harte
   Striche zu stehen. */
.foot-cols > div{
  border-left:0; padding-left:1.1rem; position:relative;
}
.foot-cols > div::before{
  content:''; position:absolute; left:0; top:.1rem; bottom:.4rem; width:1px;
  background:linear-gradient(to bottom, rgb(201 172 114/.5), rgb(201 172 114/.12) 62%, transparent);
}

@media(prefers-reduced-motion:reduce){
  .foot-veil,.foot-lines,.foot-emblem::after,.foot-when{ animation:none; }
}

/* r43a · Die Ringe lagen nicht auf dem Zeichen, sondern auf der Spalte:
   der Anker ist ein Block und damit so breit wie sein Platz. Ein Rest-Strich
   des gestrichelten Rings stand deshalb frei links neben dem Siegel.
   Der Anker misst jetzt genau sein Bild. */
.foot-emblem{ width:max-content; }

/* r43b · Der gestrichelte Ring hinterliess links neben dem Siegel einen
   losen Strich — gestrichelte Ränder auf runden Boxen zeichnen in Blink
   nicht sauber. Der Ring wird jetzt aus einem Kreisverlauf gebaut und auf
   eine Ringzone maskiert: gleiches Bild, keine Reste, und er dreht sich
   flüssiger, weil nur eine Fläche rotiert. */
.foot-emblem::after{
  border:0; inset:-12%;
  background:repeating-conic-gradient(from 0deg,
    rgb(201 172 114/.42) 0deg 1.6deg, transparent 1.6deg 7deg);
  -webkit-mask-image:radial-gradient(circle, transparent 0 49.2%, #000 49.2% 50%, transparent 50%);
  mask-image:radial-gradient(circle, transparent 0 49.2%, #000 49.2% 50%, transparent 50%);
}

/* r44 · Die Schlusszeile in Messing.
   Sie ist die letzte Aussage der Seite — sie trägt jetzt denselben
   Messing-Verlauf wie die Wortmarke, mit einem sehr langsamen Zug darüber,
   damit das Gold als Material liest und nicht als Farbe. */
.foot-line{
  color:transparent;
  background:linear-gradient(102deg,#A9863F 0%,#D8BC85 18%,#F6E9CD 38%,#C9AC72 58%,
    #F2E2BE 78%,#B08F4F 100%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:footShift 26s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){ .foot-line{ animation:none; } }

/* ══════════════════════════════════════════════════════════════════
   r45 · DIE LEERE UNTEN RECHTS BEKOMMT INHALT, DIE PLATTE BEKOMMT TIEFE
   Unter den drei Spalten stand eine halbe Bildschirmhöhe leer. Dekoration
   hätte sie gefüllt, ohne sie zu rechtfertigen — dort steht jetzt, was die
   Seite verkauft: Termin, Preis, freie Plätze, ein Weg zur Buchung. Die
   Werte kommen aus derselben Quelle wie oben, nicht aus dem Markup.
   Dazu bekommt die Fläche echte Tiefe: eine Vignette zieht die Ränder
   zurück, über die Karte wandert ein Lichtstreif, und die Karte selbst ist
   Glas mit Messingkante statt einer Box mit Rahmen.
   ══════════════════════════════════════════════════════════════════ */
.foot-right{ display:flex; flex-direction:column; gap:clamp(1.8rem,3.6vw,3rem); }

.foot-card{
  position:relative; overflow:hidden; isolation:isolate;
  align-self:end; width:min(100%,26rem);
  padding:clamp(1.1rem,2.2vw,1.6rem);
  border-radius:1.1rem;
  border:1px solid rgb(201 172 114/.26);
  background:
    linear-gradient(158deg, rgb(38 51 106/.72) 0%, rgb(16 24 58/.82) 62%, rgb(10 16 42/.9) 100%);
  backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.08),
    inset 0 0 0 1px rgb(255 255 255/.03),
    0 26px 50px -30px rgb(2 5 18/.9);
}
/* Der Lichtstreif ist die einzige schnelle Bewegung im Fuss — er läuft nur
   alle 14 s einmal durch, wie ein Reflex auf gebürstetem Metall. */
.foot-card-shine{
  position:absolute; inset:-40% -60%; z-index:-1; pointer-events:none;
  background:linear-gradient(104deg, transparent 42%,
    rgb(246 233 205/.14) 50%, transparent 58%);
  animation:footCardShine 14s ease-in-out infinite;
}
@keyframes footCardShine{
  0%,64%{ transform:translate3d(-42%,0,0); }
  86%,100%{ transform:translate3d(42%,0,0); }
}

.foot-card-head{ display:flex; flex-direction:column; gap:.24rem; }
.foot-card-head .reg{ color:rgb(201 172 114/.9); }
.foot-card-head b{ color:#EEF2FF; font-size:var(--t-small); letter-spacing:.02em; }

.foot-card-figs{
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem;
  margin:clamp(.9rem,2vw,1.2rem) 0;
  padding:clamp(.7rem,1.6vw,1rem) 0;
  border-block:1px solid rgb(255 255 255/.08);
}
.foot-card-figs div{ display:flex; flex-direction:column; gap:.15rem; }
.foot-card-figs b{
  font-size:clamp(1.25rem,.95rem + .8vw,1.7rem); line-height:1;
  color:transparent;
  background:linear-gradient(148deg,#F6E9CD,#D8BC85 46%,#B08F4F);
  -webkit-background-clip:text; background-clip:text;
}
.foot-card-figs span{ font-size:var(--t-tiny,.78rem); color:rgb(215 222 242/.6);
  letter-spacing:.04em; }

/* Tiefe: die Platte fällt zu allen Rändern hin ab, statt flach zu liegen. */
.foot-lines::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 38%, rgb(4 8 22/.55) 100%);
}

@media(max-width:860px){
  .foot-card{ align-self:stretch; width:100%; }
}
@media(prefers-reduced-motion:reduce){ .foot-card-shine{ animation:none; } }

/* r45a · Zwei Korrekturen an der Fuss-Karte: der Knopf lief nicht über die
   Breite, und in der Platzangabe standen die Zahlen kleiner als der
   Schrägstrich, weil die inneren Felder ihre eigene Grösse mitbrachten. */
.foot-card .btn-block{ display:flex; width:100%; justify-content:center; }
.foot-card-figs b span{ font:inherit; letter-spacing:inherit; color:inherit; }

/* r45b · Die allgemeine Fuss-Linkregel (`.foot-grid a:not(.brand)`) fasste
   auch den Knopf in der Karte an und hielt ihn auf `fit-content`. Der Knopf
   ist kein Textlink — er wird ausgenommen. */
.foot-grid a.btn{ display:flex; width:100%; justify-content:center;
  color:#141414; padding:var(--btn-y) var(--btn-x); }
.foot-grid a.btn::after{ display:none; }

/* ══════════════════════════════════════════════════════════════════
   r46 · DER FUSS OHNE LEERSTELLEN, MIT GRUND
   Vorher: Siegel links, Spalten rechts oben, Karte rechts unten — dazwischen
   zwei tote Felder. Jetzt drei Bänder statt zweier Spalten:
     1 Schlusszeile + Termin       2 Siegel  |  Buchungskarte
     3 Auskunft über die volle Breite        4 Rechtszeile
   Nichts hängt mehr in der Luft, und die Karte steht auf Augenhöhe mit dem
   Siegel statt als Nachtrag darunter.
   Dazu ein Grund: eine nächtliche Fassade mit warmem Innenlicht — dieselbe
   Temperatur wie das Messing der Seite. Sie liegt an den Rändern, wird zur
   Mitte hin ausmaskiert und trägt eine blaue Lasur, damit der Fuss ein Fuss
   bleibt und kein Bild.
   ══════════════════════════════════════════════════════════════════ */
.foot-photo{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.foot-photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  filter:grayscale(.42) contrast(1.06) brightness(.42) saturate(.86);
  opacity:.5;
  mask-image:radial-gradient(66% 58% at 34% 46%, transparent 0%, rgb(0 0 0/.5) 58%, #000 88%);
  animation:footPan 60s ease-in-out infinite alternate;
}
@keyframes footPan{ from{ transform:scale(1.06) translate3d(-1%,0,0); }
  to{ transform:scale(1.12) translate3d(1.5%,-1%,0); } }
.foot-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(162deg, rgb(20 30 72/.62), rgb(9 14 38/.78));
  mix-blend-mode:multiply;
}

.foot-grid{ align-items:stretch; }
@media(min-width:860px){
  .foot-grid{ grid-template-columns:minmax(0,1fr) minmax(20rem,26rem); align-items:center; }
}
.foot-sig{ gap:clamp(1rem,2vw,1.6rem); }
.foot-emblem img{ width:clamp(8rem,13vw,13.5rem); }
.foot-claim{ max-width:30ch; font-size:var(--t-body); color:rgb(215 222 242/.78); }

.foot-card{ align-self:auto; width:100%; }
.foot-card-note{
  margin:.7rem 0 0; font-size:var(--t-tiny,.78rem);
  color:rgb(215 222 242/.5); text-align:center;
}

/* Die Auskunft als eigene Zeile: vier gleich breite Felder über die ganze
   Breite, oben abgesetzt durch eine Linie, die zu den Rändern ausblendet. */
.foot-cols{
  margin-top:clamp(2.4rem,5vw,4rem);
  padding-top:clamp(1.4rem,3vw,2.2rem);
  padding-inline:clamp(1.2rem,4.5vw,4rem);
  border-top:1px solid transparent;
  border-image:linear-gradient(to right, transparent, rgb(201 172 114/.28) 18%,
    rgb(201 172 114/.28) 82%, transparent) 1;
}
@media(min-width:620px){
  .foot-cols{ grid-template-columns:repeat(4,minmax(0,1fr)); justify-content:stretch;
    column-gap:clamp(1.4rem,3vw,3rem); }
}
.foot-plain{ font-size:var(--t-small); color:rgb(215 222 242/.68); max-width:22ch; }

@media(prefers-reduced-motion:reduce){ .foot-photo img{ animation:none; } }

/* r46a · Drei Korrekturen nach dem Umbau
   1. Die Auskunftszeile liegt nicht mehr in `.foot-grid` — damit verlor sie
      die Linkform des Fusses und stand gross und unterstrichen da. Sie
      bekommt sie direkt.
   2. Zwischen Siegel und Auskunft blieb ein leeres Band: Zeichen und Zeile
      stehen jetzt nebeneinander statt untereinander.
   3. Der Grund war so weit zurückgenommen, dass er nur noch Rauschen war. */
.foot-cols a{
  display:block; width:fit-content; text-decoration:none;
  font-size:var(--t-small); padding:.28rem 0;
  color:rgb(215 222 242/.82);
}
.foot-cols a:hover{ color:#F2F5FF; }

.foot-sig{
  flex-direction:row; align-items:center; gap:clamp(1.2rem,3vw,2.4rem);
  flex-wrap:wrap;
}
.foot-claim{ margin:0; max-width:24ch; }

.foot-photo img{ opacity:.66; filter:grayscale(.3) contrast(1.08) brightness(.5) saturate(.9);
  mask-image:radial-gradient(58% 52% at 36% 44%, rgb(0 0 0/.22) 0%, rgb(0 0 0/.62) 56%, #000 86%); }

/* r46b · Der Grund war weiterhin nur zu ahnen: die Maske hielt ihn genau
   dort frei, wo er stand. Er liegt jetzt links und unten — dort, wo wenig
   Text steht — und blendet zur Karte hin aus. */
.foot-photo img{
  object-position:38% 46%; opacity:.72;
  filter:grayscale(.26) contrast(1.1) brightness(.54) saturate(.94);
  mask-image:
    linear-gradient(102deg, #000 0%, rgb(0 0 0/.72) 36%, rgb(0 0 0/.22) 62%, transparent 82%),
    linear-gradient(to bottom, rgb(0 0 0/.5) 0%, #000 34%, #000 78%, rgb(0 0 0/.35) 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

/* r46c · Der Grund war unsichtbar, weil eine ältere Regel
   (`.foot > *:not(.foot-veil):not(.foot-lines)`) ihn auf `position:relative`
   zurückgesetzt hat — damit fiel er in den Fluss und sein Bild auf Höhe 0.
   Die Bildebene wird ausgenommen. */
.foot > .foot-photo{ position:absolute; inset:0; z-index:0; }

/* ══════════════════════════════════════════════════════════════════
   r47 · GRUND UND SIEGEL NEU GESETZT
   Der Grund war eine anonyme Glaswand — technisch, aber ohne Bezug. Jetzt
   steht dort eine Hotelhalle im Abendlicht: Messingtöne, Symmetrie, Tiefe
   durch die Flucht, keine Gesichter. Sie passt zum Ort der Veranstaltung
   (der Workshop läuft in einem Hotel) und zur Temperatur der Marke.
   Das Siegel stand ganz am linken Rand und wirkte klein neben der Karte.
   Es rückt nach innen, wird deutlich grösser und bekommt die Claimzeile als
   Gegengewicht rechts daneben, getrennt durch eine Messing-Haarlinie.
   Der Fuss wird dabei nicht höher: das Siegel bleibt unter der Bauhöhe der
   Buchungskarte.
   ══════════════════════════════════════════════════════════════════ */
.foot-photo img{
  object-position:50% 44%; opacity:.62;
  filter:grayscale(.2) contrast(1.06) brightness(.5) saturate(.86);
  mask-image:
    linear-gradient(100deg, #000 0%, rgb(0 0 0/.8) 40%, rgb(0 0 0/.3) 66%, transparent 86%),
    linear-gradient(to bottom, rgb(0 0 0/.45) 0%, #000 30%, #000 76%, rgb(0 0 0/.4) 100%);
  mask-composite:intersect;
}
.foot-photo::after{
  background:linear-gradient(160deg, rgb(18 27 66/.66), rgb(9 14 38/.8));
}

@media(min-width:860px){
  .foot-sig{ padding-left:clamp(1rem,5vw,5.5rem); }
}
.foot-emblem img{ width:clamp(9rem,17vw,17.5rem); }
.foot-claim{
  position:relative; padding-left:clamp(1rem,2.4vw,2rem); max-width:22ch;
}
.foot-claim::before{
  content:''; position:absolute; left:0; top:.15em; bottom:.15em; width:1px;
  background:linear-gradient(to bottom, transparent, rgb(201 172 114/.5) 20%,
    rgb(201 172 114/.5) 80%, transparent);
}

/* r47a · Der Ausschnitt lag in der Tiefe der Halle, wo kaum Struktur ist —
   das Bild las sich als Unschärfe. Jetzt der obere Teil mit Decke, Leuchten
   und Säulenflucht, dazu etwas mehr Licht. */
.foot-photo img{ opacity:.72; filter:grayscale(.16) contrast(1.08) brightness(.6) saturate(.9); }

/* r47b · Das Hochformat der ersten Halle verlor im Breitband seine Symmetrie
   und las sich als Unschärfe. Jetzt eine querformatige Abendlobby: warme
   Leuchten, Glas, ruhige Flächen — Struktur, die auch als schmales Band
   trägt. Weniger Zoom im Lauf, damit die Kanten scharf bleiben. */
.foot-photo img{ object-position:50% 52%; opacity:.78;
  filter:grayscale(.1) contrast(1.06) brightness(.62) saturate(.94); }
@keyframes footPan{ from{ transform:scale(1.03) translate3d(-.8%,0,0); }
  to{ transform:scale(1.06) translate3d(.8%,-.6%,0); } }

/* ══════════════════════════════════════════════════════════════════════════
   r48 · TEXTKORREKTUREN AUS DEM BRIEFING
   Der Pfeil an den Knöpfen ist entfernt (oben, an der Quelle). Neu hier:
   die harte Faktenzeile im Hero (Zeiten und Ort, wortgleich aus dem
   Briefing) und ein engerer Diagnose-Kopf: die Unterzeile ist in die
   Überschrift gewandert, also wird die rechte Messtafel schmaler und der
   Kopf verliert seine Leerfläche.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-facts{
  margin-top:clamp(1rem,2vw,1.5rem);
  font-size:clamp(.72rem,.9vw,.8rem); line-height:1.75;
  letter-spacing:.04em; color:var(--ink-mute);
  text-transform:none;
  padding-left:clamp(.7rem,1vw,1rem);
  border-left:2px solid rgb(169 134 63/.55);
}
.hero-facts br{ line-height:inherit; }

@media(min-width:1080px){
  /* Der Kopf trägt jetzt den ganzen Satz — er darf mehr Breite nehmen,
     die Tafel wird entsprechend schmaler statt Luft stehen zu lassen. */
  .dg > .wrap{ grid-template-columns:minmax(0,1.46fr) minmax(0,.54fr); align-items:center; }
  .dg-panel{ padding:clamp(1.2rem,2vw,1.7rem); gap:clamp(.9rem,1.6vw,1.2rem); }
  .dg-panel .dg-matrix{ opacity:.9; }
}
/* Der Kopf trägt jetzt einen ganzen Satz statt einer Schlagzeile — also
   kleiner setzen, sonst erschlägt er die Tafel daneben. */
#herausforderungen .shead h2{
  font-size:clamp(1.45rem,2.5vw,2.3rem); line-height:1.24;
}

/* ══════════════════════════════════════════════════════════════════════════
   r49 · MARKE EINS ZU EINS MIT DER PLATTFORM
   Das Siegel ist jetzt das Plattform-Original (LOGOS 2025): Navy-Ring,
   Messingring, Halbtonkugel, FOUNDER/COCKPIT im Kern — nur rund
   freigestellt, sonst unangetastet. Kein Aussenglanz, kein Schatten mehr
   auf dem Ring: das Original trägt seine Kante selbst.
   Die Wortmarke folgt dem Plattform-Satz: FOUNDER fett Navy, COCKPIT
   leichter, weit gesperrt, in Messing.
   ══════════════════════════════════════════════════════════════════════════ */
.topbar .brand img{ filter:none; }
.foot-emblem img{ filter:none; }
.foot-emblem::after{ display:none; }
.foot-aura{ display:none; }

/* ══════════════════════════════════════════════════════════════════════════
   r50 · KNOEPFE EINS ZU EINS MIT DER PLATTFORM
   Der Plattform-Knopf traegt links das Funkel-Zeichen (grosser Vierstern
   mit kleinem Begleiter), dahinter der Text in Tinte auf Messingverlauf.
   Der frueher entfernte Pfeil bleibt entfernt — dies ist das Zeichen der
   Plattform, nicht seine Rueckkehr.
   ══════════════════════════════════════════════════════════════════════════ */
.btn-primary::before,
.btn-primary:not(.btn-block)::before{
  content:''; display:block; order:-1; flex:0 0 auto;
  width:1.15em; height:1.15em; margin-right:-.1em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M14.6%203.2c.15-.6%201-.6%201.15%200l.9%203.5a1%201%200%200%200%20.72.72l3.5.9c.6.15.6%201%200%201.15l-3.5.9a1%201%200%200%200-.72.72l-.9%203.5c-.15.6-1%20.6-1.15%200l-.9-3.5a1%201%200%200%200-.72-.72l-3.5-.9c-.6-.15-.6-1%200-1.15l3.5-.9a1%201%200%200%200%20.72-.72z%27%2F%3E%3Cpath%20d%3D%27M7.2%2013.6c.12-.48.8-.48.92%200l.5%201.95a1%201%200%200%200%20.72.72l1.95.5c.48.12.48.8%200%20.92l-1.95.5a1%201%200%200%200-.72.72l-.5%201.95c-.12.48-.8.48-.92%200l-.5-1.95a1%201%200%200%200-.72-.72l-1.95-.5c-.48-.12-.48-.8%200-.92l1.95-.5a1%201%200%200%200%20.72-.72z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M14.6%203.2c.15-.6%201-.6%201.15%200l.9%203.5a1%201%200%200%200%20.72.72l3.5.9c.6.15.6%201%200%201.15l-3.5.9a1%201%200%200%200-.72.72l-.9%203.5c-.15.6-1%20.6-1.15%200l-.9-3.5a1%201%200%200%200-.72-.72l-3.5-.9c-.6-.15-.6-1%200-1.15l3.5-.9a1%201%200%200%200%20.72-.72z%27%2F%3E%3Cpath%20d%3D%27M7.2%2013.6c.12-.48.8-.48.92%200l.5%201.95a1%201%200%200%200%20.72.72l1.95.5c.48.12.48.8%200%20.92l-1.95.5a1%201%200%200%200-.72.72l-.5%201.95c-.12.48-.8.48-.92%200l-.5-1.95a1%201%200%200%200-.72-.72l-1.95-.5c-.48-.12-.48-.8%200-.92l1.95-.5a1%201%200%200%200%20.72-.72z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  transition:transform var(--d-hover) var(--ease-firm);
}
.btn-primary:hover::before{ transform:rotate(12deg) scale(1.06); }
@media(prefers-reduced-motion:reduce){ .btn-primary:hover::before{ transform:none; } }

/* ══════════════════════════════════════════════════════════════════════════
   r51 · HERO-TITEL ALS VERKAUFSTITEL
   Der Name ist jetzt die Schlagzeile — also traegt er auch die Groesse
   einer Schlagzeile: eine Zeile Marke in Messing, darunter „Business
   Workshop" in voller Tinte. Enge Zeilen, negative Laufweite, keine
   Balance-Umbrueche, damit der Block als Platte steht.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-inner > h1.h1-claim{
  font-size:clamp(2.7rem,1.1rem + 5.1vw, 5.6rem);
  line-height:.99; letter-spacing:-.022em;
  max-width:min(100%,16ch); text-wrap:initial;
  margin-bottom:clamp(.6rem,1.2vw,1rem);
}
.hero-inner > h1.h1-claim .gold{
  display:block; letter-spacing:-.008em;
  font-size:.86em;
}
@media(max-width:640px){
  .hero-inner > h1.h1-claim{ font-size:clamp(2.15rem,9.4vw,3.2rem); letter-spacing:-.018em; }
}
/* Das Funkelzeichen muss im Fluss stehen — die alte Reflexschicht setzte
   ::before absolut, das erbte es sonst mit. */
.btn-primary::before{
  position:static; inset:auto; transform:none;
  width:1.15em; height:1.15em; flex:0 0 auto; opacity:1;
}

/* ══════════════════════════════════════════════════════════════════════════
   r52 · TAGESFAKTEN ALS TAFEL
   Vorher stand die Zeile mit Messingkante da wie ein Zitat. Jetzt sind es
   drei beschriftete Felder — Datum, Ablauf, Location — auf einer hellen
   Glasplatte mit Messing-Oberkante: liest sich sofort als Eckdaten und
   nicht als Aussage.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-sheet{
  margin:clamp(1.3rem,2.4vw,2rem) 0 0; padding:clamp(.95rem,1.8vw,1.3rem) clamp(1.1rem,2vw,1.6rem);
  display:grid; gap:clamp(.8rem,1.6vw,1.4rem);
  grid-template-columns:auto auto auto; justify-content:start; align-items:start;
  max-width:min(100%,54rem);
  position:relative; border-radius:.55rem;
  background:linear-gradient(150deg, rgb(255 255 255/.78), rgb(255 255 255/.5));
  backdrop-filter:blur(9px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.85),
    0 0 0 1px rgb(169 134 63/.22),
    0 22px 44px -30px rgb(var(--shadow)/.45);
}
.hero-sheet::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  border-radius:.55rem .55rem 0 0;
  background:linear-gradient(90deg,#A9863F,#E9CBA1 46%,#A9863F);
  opacity:.75;
}
.hero-sheet-cell{ display:grid; gap:.32rem; }
.hero-sheet-cell + .hero-sheet-cell{
  padding-left:clamp(.8rem,1.6vw,1.4rem);
  border-left:1px solid rgb(169 134 63/.24);
}
/* r161: Beide Stufen waren zu klein — die Beschriftung stand auf 0.63rem
   (rund 10 px) in Versalien und Gold, der Wert auf 12–13 px in einer
   Schreibmaschinenschrift, deren Zeichen ohnehin schmal laufen. Auf einer
   Glasplatte ueber einem Foto ist das die schwerste Kombination, die es hier
   gibt. Die Werte tragen Datum, Uhrzeit und Ort — wer die sucht, soll sie
   nicht suchen muessen. */
.hero-sheet dt{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(.72rem,.66rem + .2vw,.82rem); font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  /* --gold-deep kommt auf der Glasplatte nur auf 3.8:1 — unter der Schwelle
     fuer Fliesstext. --gold-ink ist genau dafuer da («kleine Schrift auf
     hellen Karten») und erreicht 6.8:1, ohne die Farbe zu wechseln. Dieselbe
     Wahl trifft `.reg` seit jeher; die Tafel hatte sie nur nie mitbekommen. */
  color:var(--gold-ink);
}
.hero-sheet dd{
  margin:0; font-size:clamp(.88rem,.82rem + .26vw,1rem); line-height:1.58;
  letter-spacing:.01em; color:var(--ink);
}
@media(max-width:900px){
  .hero-sheet{ grid-template-columns:1fr; }
  .hero-sheet-cell + .hero-sheet-cell{
    padding-left:0; padding-top:.8rem; border-left:0;
    border-top:1px solid rgb(169 134 63/.24);
  }
}
/* Aus dem Beleg ist ein Zielgruppensatz geworden — Kapitälchen-Satz passt
   dazu nicht mehr, er liest sich als Aussage. */
.hero-proof{
  text-transform:none; letter-spacing:.005em;
  font-size:clamp(.86rem,1.05vw,1rem); line-height:1.6;
  max-width:46ch; color:var(--ink-mute);
}
.hero-proof b{ color:var(--ink); font-weight:600; }

/* ══════════════════════════════════════════════════════════════════════════
   r53 · SAEULEN-KOPF ATMET
   Der Satz stand zu eng — vier gedrängte Zeilen wirken billig. Mehr
   Zeilenweite, ruhigere Laufweite, breiteres Mass: drei luftige Zeilen
   statt vier gestauchter, und die Unterzeile bekommt Abstand.
   ══════════════════════════════════════════════════════════════════════════ */
.sa-head{ max-width:min(96%,86rem); }
.sa-head h2{
  max-width:46ch; line-height:1.3; letter-spacing:.002em;
  font-size:clamp(1.6rem,1rem + 1.95vw,2.85rem);
  text-wrap:pretty;
}
.sa-head .shead-note{
  max-width:66ch; margin-top:clamp(1.1rem,2vw,1.7rem);
  line-height:1.75; letter-spacing:.012em;
}
/* r53a: Handlung und Beleg mittig auf der Tafel — linksbündig sassen sie
   unter einer Liste, die selbst schon eine Kante hat, und wirkten verrutscht. */
.sa-act{ justify-items:center; text-align:center; }
.sa-act .btn{ min-width:min(100%,22rem); }

/* ══════════════════════════════════════════════════════════════════════════
   r54 · KNOEPFE: NUR FORM, FARBE UND KOERPER DER PLATTFORM
   Das Funkelzeichen faellt wieder weg — uebernommen werden ausschliesslich
   Rundung, Verlaufsrichtung und Plastik: Licht oben, Schatten unten,
   dunklere Aussenkante, weicher Bodenschatten. Der Verlauf laeuft
   senkrecht wie auf der Plattform, nicht mehr diagonal.
   ══════════════════════════════════════════════════════════════════════════ */
.btn-primary::before{ content:none !important; display:none !important; }

.btn-primary{
  border-radius:1.1rem;
  background:
    linear-gradient(180deg,
      #E7D3AC 0%,
      #D9BF91 34%,
      #C2A470 68%,
      #A9884F 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.72),        /* Lichtkante oben */
    inset 0 -2px 2px rgb(90 66 22/.3),         /* Schattenkante unten */
    inset 0 0 0 1px rgb(140 108 52/.42),       /* dunklere Aussenkante */
    0 1px 2px rgb(var(--shadow)/.2),
    0 12px 24px -12px rgb(122 96 42/.55),
    0 26px 46px -28px rgb(20 16 6/.5);         /* Bodenschatten, Koerper */
  text-shadow:0 1px 0 rgb(255 255 255/.3);
}
.btn-primary:hover{
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.8),
    inset 0 -2px 2px rgb(90 66 22/.26),
    inset 0 0 0 1px rgb(140 108 52/.5),
    0 2px 4px rgb(var(--shadow)/.2),
    0 18px 32px -14px rgb(122 96 42/.6),
    0 32px 56px -30px rgb(20 16 6/.55);
}
.btn-primary:active{
  box-shadow:
    inset 0 2px 4px rgb(90 66 22/.34),
    inset 0 0 0 1px rgb(140 108 52/.5),
    0 1px 2px rgb(var(--shadow)/.18);
}
.btn-quiet{ border-radius:1.1rem; }

/* r55b: Eine echte Haarlinie — 1px, mittig, zu beiden Seiten weich
   ausgeblendet. Keine Keilform, kein harter Abriss. Der Selektor traegt
   .band-navy mit, sonst gewinnt die linksauslaufende Bandregel. */
.band-navy .sa-head::after,
.sa-head::after{
  left:50%; width:100%; height:1px; transform:translateX(-50%);
  transform-origin:50% 50%; clip-path:none; border-radius:0;
  background:linear-gradient(90deg,
    rgb(233 203 161/0) 0%,
    rgb(233 203 161/.55) 22%,
    rgb(246 233 205/1) 50%,
    rgb(233 203 161/.55) 78%,
    rgb(233 203 161/0) 100%);
  opacity:1;
  box-shadow:0 0 10px rgb(233 203 161/.28);
}
/* Keine Scroll-Animation auf dieser Linie: sie blieb je nach Scrollstand
   halb gezeichnet stehen. Eine Haarlinie ist Satzzeichen, kein Effekt. */
.js .sa-head::after{ animation:none !important; transform:translateX(-50%) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   r56 · MENTORTEXT VOLLSTAENDIG
   Der Absatz mit der Zahl ist kein Auszug mehr, sondern steht ganz da —
   deshalb kein Zahlen-Ausschnitt mit Rest-Satz, sondern eine eigene Tafel
   mit Messingkante, in der „über 50 %" das Gewicht traegt.
   ══════════════════════════════════════════════════════════════════════════ */
.verstehen-fact{
  position:relative; margin:clamp(1.4rem,2.6vw,2rem) 0;
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.2rem,2.4vw,1.8rem);
  border-radius:.5rem;
  background:linear-gradient(158deg, rgb(255 255 255/.9), rgb(250 246 238/.7));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.9),
    0 0 0 1px rgb(169 134 63/.2),
    0 20px 40px -30px rgb(var(--shadow)/.4);
}
.verstehen-fact::before{
  content:''; position:absolute; left:0; top:.6rem; bottom:.6rem; width:3px;
  border-radius:3px; background:linear-gradient(180deg,#E9CBA1,#A9863F);
}
.verstehen-fact b{
  font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:1.1em; letter-spacing:-.01em; color:var(--gold-deep);
  white-space:nowrap; margin-right:.22em;
}

/* ══════════════════════════════════════════════════════════════════════════
   r58 · DIAGNOSE-DOSSIER (Neubau der Herausforderungen)
   Die alte Anlage — hoher Messturm rechts, schmale Textspalte links —
   liess rechts Luft stehen und presste den Satz. Neu: der Kopf laeuft
   ueber die volle Breite, die Zahl ist eine flache Plakette daneben, und
   die drei Faelle stehen als gleich hohe Akten nebeneinander. Papierton,
   Messingkanten, ein einziger warmer Lichtkegel als Tiefe.
   ══════════════════════════════════════════════════════════════════════════ */
.dgx{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,#FBF8F2 0%,#F4EFE4 58%,#EFE8DA 100%);
}
.dgx-paper{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(90deg, rgb(169 134 63/.07) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg,  rgb(169 134 63/.07) 0 1px, transparent 1px 68px);
  mask-image:radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
}
.dgx-glow{
  position:absolute; z-index:0; pointer-events:none;
  top:-18%; right:-12%; width:60vw; height:60vw; border-radius:50%;
  background:radial-gradient(circle, rgb(233 203 161/.42), transparent 62%);
  filter:blur(20px); animation:dgxGlow 26s ease-in-out infinite alternate;
}
@keyframes dgxGlow{ from{ transform:translate3d(0,0,0) scale(1); opacity:.75; }
                    to{ transform:translate3d(-4%,3%,0) scale(1.08); opacity:1; } }
@media(prefers-reduced-motion:reduce){ .dgx-glow{ animation:none; } }
.dgx > .wrap{ position:relative; z-index:1; }

/* ---------- Kopf: voller Satz, Plakette rechts ---------- */
.dgx-head{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.6rem,4vw,4rem); align-items:end;
  padding-bottom:clamp(1.4rem,2.6vw,2.2rem);
  border-bottom:1px solid rgb(169 134 63/.28);
}
.dgx-head .reg{ grid-column:1 / -1; margin-bottom:.9rem; }
.dgx-head h2{
  margin:0; max-width:34ch;
  font-size:clamp(1.5rem,.85rem + 1.7vw,2.5rem); line-height:1.24;
  letter-spacing:-.008em; text-wrap:pretty;
}
.dgx-meter{
  display:grid; gap:.5rem; justify-items:end; text-align:right;
  padding:clamp(.9rem,1.6vw,1.2rem) clamp(1.1rem,2vw,1.5rem);
  border-radius:.5rem; min-width:min(100%,15rem);
  background:linear-gradient(158deg,#1B2551,#0C1436 62%,#080D26);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.14),
    0 0 0 1px rgb(169 134 63/.34),
    0 24px 44px -30px rgb(11 17 48/.8);
}
.dgx-meter-num{
  font-family:'Newsreader',Georgia,serif; font-weight:600; line-height:.9;
  font-size:clamp(2.6rem,4.4vw,3.9rem);
  background:linear-gradient(180deg,#F6E9CD,#C9AC72 62%,#A9863F);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dgx-meter-num i{ font-style:normal; font-size:.42em; margin-left:.06em; }
.dgx-meter-lab{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgb(255 255 255/.6); }
.dgx-meter-bar{ display:block; width:100%; height:3px; border-radius:3px;
  background:rgb(255 255 255/.14); overflow:hidden; }
.dgx-meter-bar i{ display:block; height:100%; width:80%; border-radius:3px;
  background:linear-gradient(90deg,#A9863F,#F6E9CD); }

/* ---------- Drei Akten ---------- */
.dgx-grid{
  list-style:none; margin:clamp(2rem,3.6vw,3rem) 0 0; padding:0;
  display:grid; gap:clamp(1rem,1.8vw,1.6rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.dgx-akte{
  position:relative; display:flex; flex-direction:column; gap:.9rem;
  padding:clamp(1.3rem,2.2vw,1.9rem);
  border-radius:.55rem; background:linear-gradient(158deg,#fff,rgb(255 255 255/.72));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.9),
    0 0 0 1px rgb(169 134 63/.2),
    0 30px 56px -40px rgb(var(--shadow)/.5);
  transition:transform var(--d-hover) var(--ease-firm),
             box-shadow var(--d-hover) var(--ease-firm);
}
.dgx-akte::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:.55rem .55rem 0 0;
  background:linear-gradient(90deg,#A9863F,#E9CBA1 52%,#A9863F);
}
.dgx-akte:hover{ transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.9),
    0 0 0 1px rgb(169 134 63/.34),
    0 40px 70px -44px rgb(var(--shadow)/.55); }
.dgx-akte-top{ display:flex; align-items:baseline; gap:.7rem; }
.dgx-no{ font-size:1.15rem; font-weight:700; color:var(--gold-deep); letter-spacing:.02em; }
.dgx-kick{ font-size:.6rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-mute); }
.dgx-akte h3{
  margin:0; font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(1rem,1.15vw,1.16rem); line-height:1.32; color:var(--ink);
}
.dgx-field{ display:grid; gap:.34rem; }
.dgx-field b,.dgx-cause b{
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
}
.dgx-field b{ color:var(--gold-deep); }
.dgx-field p{ margin:0; font-size:.86rem; line-height:1.62; color:var(--ink-mute); }
.dgx-cause{
  margin-top:auto; display:grid; gap:.34rem;
  padding:clamp(.8rem,1.4vw,1.05rem); border-radius:.4rem;
  background:linear-gradient(158deg,#182150,#0C1436);
  box-shadow:inset 3px 0 0 var(--gold-deep), 0 18px 32px -26px rgb(11 17 48/.8);
}
.dgx-cause b{ color:var(--gold); }
.dgx-cause p{ margin:0; font-size:.86rem; line-height:1.55; color:rgb(255 255 255/.9); }

/* ---------- Schluss ---------- */
.dgx-out{
  margin-top:clamp(2rem,3.6vw,3rem); display:grid; gap:1.2rem;
  justify-items:center; text-align:center;
}
.dgx-out p{
  margin:0; max-width:34ch;
  font-family:'Newsreader',Georgia,serif;
  font-size:clamp(1.25rem,.9rem + 1vw,1.85rem); line-height:1.3; color:var(--ink);
}
.dgx-out .btn{ text-transform:uppercase; letter-spacing:.08em; }

@media(max-width:1000px){
  .dgx-grid{ grid-template-columns:1fr; }
  .dgx-head{ grid-template-columns:1fr; align-items:start; }
  .dgx-meter{ justify-self:start; justify-items:start; text-align:left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   r59 · DIAGNOSE-DOSSIER, ZWEITE STUFE
   Kritik am ersten Wurf: zu klein, zu blass, zu flach. Also: groessere
   Schrift auf allen Ebenen, saturierteres Papier mit Navy-Vignette,
   Karten mit doppelter Schattenlage und Innenkante, kraeftigere
   Messingbaender, und die Ursache-Tafel als eigener Koerper mit Licht
   von oben. Die Zahl wird zur Plakette mit Rahmen und Glanz.
   ══════════════════════════════════════════════════════════════════════════ */
.dgx{
  background:
    radial-gradient(120% 80% at 78% 8%, rgb(233 203 161/.5), transparent 58%),
    radial-gradient(90% 70% at 8% 96%, rgb(11 17 48/.1), transparent 62%),
    linear-gradient(180deg,#FDFAF4 0%,#F3ECDD 52%,#EAE1CD 100%);
}
.dgx::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  box-shadow:inset 0 0 clamp(4rem,10vw,11rem) rgb(11 17 48/.14);
}
.dgx-paper{ opacity:.75;
  background:
    repeating-linear-gradient(90deg, rgb(122 96 42/.09) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg,  rgb(122 96 42/.09) 0 1px, transparent 1px 76px);
}
.dgx-glow{ filter:blur(26px); }

/* ---------- Kopf ---------- */
.dgx-head{ align-items:center; padding-bottom:clamp(1.8rem,3vw,2.8rem);
  border-bottom:0; }
.dgx-head::after{
  content:''; grid-column:1 / -1; height:2px; margin-top:clamp(1.4rem,2.4vw,2.2rem);
  background:linear-gradient(90deg,
    rgb(169 134 63/0), rgb(169 134 63/.7) 18%, rgb(233 203 161/.95) 50%,
    rgb(169 134 63/.7) 82%, rgb(169 134 63/0));
  box-shadow:0 0 12px rgb(233 203 161/.5);
}
.dgx-head h2{
  max-width:30ch;
  font-size:clamp(1.75rem,1rem + 2.1vw,3.05rem); line-height:1.18;
  letter-spacing:-.014em;
}

/* ---------- Plakette ---------- */
.dgx-meter{
  min-width:min(100%,20rem); gap:.7rem;
  padding:clamp(1.3rem,2.2vw,1.9rem) clamp(1.4rem,2.4vw,2rem);
  border-radius:.7rem; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 0%, rgb(233 203 161/.22), transparent 60%),
    linear-gradient(158deg,#22305F 0%,#111A44 54%,#070C24 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.22),
    inset 0 0 0 1px rgb(169 134 63/.45),
    0 0 0 7px rgb(255 255 255/.5),
    0 40px 70px -40px rgb(11 17 48/.85);
}
.dgx-meter::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(74deg,transparent 34%,rgb(255 255 255/.1) 50%,transparent 66%);
  transform:translateX(-120%); animation:dgxSheen 11s ease-in-out infinite;
}
@keyframes dgxSheen{ 0%,72%{ transform:translateX(-120%);} 92%,100%{ transform:translateX(120%);} }
@media(prefers-reduced-motion:reduce){ .dgx-meter::after{ animation:none; opacity:0; } }
.dgx-meter-num{ font-size:clamp(3.4rem,5.4vw,5rem); letter-spacing:-.03em;
  filter:drop-shadow(0 10px 22px rgb(122 96 42/.45)); }
/* Die Ziffern waren oben abgeschnitten. Ursache ist NICHT ein Ueberlauf,
   sondern background-clip:text: der Verlauf wird nur INNERHALB des Kastens
   gemalt, und line-height:.9 macht den Kasten kleiner als die Ziffern selbst
   — was darueber hinausragt, bekommt keine Farbe und ist damit durchsichtig.
   Ein groesserer Kasten heilt das; der Innenabstand wird vom gleich grossen
   negativen Aussenabstand wieder aufgehoben, damit die Plakette exakt so
   sitzt wie vorher. Die Verlaufsmitte wandert dabei um wenige Prozent, das
   ist auf zwei Ziffern nicht zu sehen (nachgemessen). */
.dgx-meter-num{
  padding-block:.16em .08em;
  margin-block:-.16em -.08em;
}
.dgx-meter-lab{ font-size:.66rem; letter-spacing:.2em; color:rgb(255 255 255/.72); }
.dgx-meter-bar{ height:4px; background:rgb(255 255 255/.16); }
.dgx-meter-bar i{ box-shadow:0 0 12px rgb(233 203 161/.7); }

/* ---------- Akten ---------- */
.dgx-grid{ gap:clamp(1.2rem,2vw,2rem); margin-top:clamp(2.4rem,4vw,3.6rem); }
.dgx-akte{
  gap:1.05rem; padding:clamp(1.7rem,2.6vw,2.4rem); border-radius:.7rem;
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(255 255 255/.95), transparent 60%),
    linear-gradient(168deg,#FFFDF9 0%,#FBF6EC 62%,#F6EFE1 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/1),
    inset 0 0 0 1px rgb(169 134 63/.26),
    0 2px 3px rgb(var(--shadow)/.07),
    0 26px 40px -30px rgb(var(--shadow)/.4),
    0 56px 90px -60px rgb(11 17 48/.55);
}
.dgx-akte::before{ height:4px; box-shadow:0 6px 18px -6px rgb(169 134 63/.7); }
.dgx-akte:hover{ transform:translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/1),
    inset 0 0 0 1px rgb(169 134 63/.4),
    0 3px 5px rgb(var(--shadow)/.08),
    0 40px 60px -34px rgb(var(--shadow)/.45),
    0 80px 120px -66px rgb(11 17 48/.6); }
.dgx-akte-top{ align-items:center; gap:.85rem; }
.dgx-no{
  font-size:clamp(1.7rem,2.4vw,2.3rem); line-height:1; font-weight:700;
  background:linear-gradient(180deg,#D8BC85,#A9863F);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dgx-kick{ font-size:.64rem; letter-spacing:.2em; color:#7A6538; }
.dgx-akte h3{ font-size:clamp(1.12rem,1.35vw,1.34rem); line-height:1.3;
  letter-spacing:-.006em; }
.dgx-field b,.dgx-cause b{ font-size:.62rem; letter-spacing:.22em; }
.dgx-field p{ font-size:.95rem; line-height:1.7; color:#4A4F62; }
.dgx-cause{
  padding:clamp(1rem,1.7vw,1.3rem) clamp(1.1rem,1.9vw,1.45rem); border-radius:.5rem;
  background:
    radial-gradient(120% 90% at 20% 0%, rgb(233 203 161/.18), transparent 62%),
    linear-gradient(158deg,#22305F,#0C1436 68%,#080D26);
  box-shadow:
    inset 4px 0 0 var(--gold),
    inset 0 1px 0 rgb(255 255 255/.16),
    0 26px 44px -30px rgb(11 17 48/.9);
}
.dgx-cause p{ font-size:.95rem; line-height:1.62; color:rgb(255 255 255/.94); }

/* ---------- Schluss ---------- */
.dgx-out{ margin-top:clamp(2.6rem,4.4vw,4rem); gap:1.6rem; }
.dgx-out p{ max-width:30ch;
  font-size:clamp(1.5rem,1rem + 1.5vw,2.35rem); line-height:1.24;
  letter-spacing:-.012em; }
.dgx-out .btn{ font-size:clamp(.9rem,1.05vw,1.02rem);
  padding:1.15rem 2.4rem; letter-spacing:.1em; }

/* ══════════════════════════════════════════════════════════════════════════
   r60 · DER SATZ ÜBER DAS UNTERNEHMERTUM IN MESSING
   Der Kernsatz der Seite bekommt die Markenlegierung: Verlaufsschrift in
   Messing, langsam wandernd, auf tiefer Navy-Platte mit warmem Lichtkegel,
   Messingrahmen und einem Glanz, der einmal durchlaeuft. Serifenschnitt,
   weil er als Zitat steht, nicht als Beschriftung.
   ══════════════════════════════════════════════════════════════════════════ */
.claim{
  min-height:clamp(19rem,30vw,26rem);
  box-shadow:
    inset 0 0 0 1px rgb(169 134 63/.45),
    inset 0 1px 0 rgb(255 255 255/.14),
    0 40px 80px -50px rgb(11 17 48/.85);
}
.claim::before{
  background:
    linear-gradient(103deg, rgb(8 13 38/.95) 0%, rgb(10 16 44/.86) 52%, rgb(12 18 51/.7) 100%);
}
.claim::after{
  background:
    radial-gradient(50% 62% at 78% 62%, rgb(233 160 74/.32), transparent 68%),
    radial-gradient(40% 50% at 12% 24%, rgb(233 203 161/.16), transparent 70%);
}
.claim p{
  font-family:'Newsreader',Georgia,serif; font-weight:500;
  font-size:clamp(1.35rem,.95rem + 1.35vw,2.35rem); line-height:1.28;
  letter-spacing:-.012em; max-width:24ch;
  color:transparent;
  background:linear-gradient(102deg,
    #A9863F 0%, #D8BC85 16%, #F6E9CD 34%, #C9AC72 54%, #F2E2BE 74%, #B08F4F 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:claimShift 24s ease-in-out infinite;
  text-wrap:pretty;
}
@keyframes claimShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
/* Der Glanz laeuft ueber die Platte, nicht ueber die Schrift — background-clip
   und filter vertragen sich im selben Element nicht. */
.claim > .claim-shine{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(74deg,transparent 38%,rgb(255 255 255/.09) 50%,transparent 62%);
  transform:translateX(-120%); animation:claimSweep 13s ease-in-out infinite;
}
@keyframes claimSweep{ 0%,74%{ transform:translateX(-120%);} 94%,100%{ transform:translateX(120%);} }
@media(prefers-reduced-motion:reduce){
  .claim p{ animation:none; }
  .claim > .claim-shine{ animation:none; opacity:0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   r74 · DER KERNSATZ ALS DIPTYCHON
   Der Satz stand als ein Block links und schob das Portraet aus dem Bild.
   Jetzt traegt die These die linke, die Gleichung die rechte Seite — die
   Mitte bleibt frei, und dort steht der Kopf. Beide Haelften sitzen auf
   halber Hoehe, damit die Achse durch die Augen laeuft.
   ══════════════════════════════════════════════════════════════════════════ */
.claim-split{
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(clamp(7rem,26vw,21rem),auto) minmax(0,1fr);
  column-gap:clamp(1rem,2.4vw,2.4rem);
  /* Gerechnet, nicht geschaetzt: die Quelle ist 1600x2000 (4:5), der Kopf sitzt
     auf 19 % der Bildhoehe. Bei object-fit:cover ist die skalierte Bildhoehe
     1,25 x Breite, der Kopf also auf 0,2375 x Breite. Ein Rahmen im Verhaeltnis
     2,05 ist 0,488 x Breite hoch, seine Mitte liegt auf 0,244 x Breite — genau
     dort. Deshalb Seitenverhaeltnis statt fester Hoehe: die Rechnung gilt dann
     auf jeder Bildschirmbreite. */
  aspect-ratio:2.05; min-height:22rem;
}
/* 0 % oben, weil der Ausschnitt beim obigen Verhaeltnis am Bildanfang beginnen
   muss, damit der Kopf mittig steht; 52 % seitlich, weil er in der Quelle
   leicht rechts der Mitte steht. Die Werte weiter oben (22 %/14 %) galten dem
   alten einseitigen Layout und werden hier bewusst ueberschrieben. */
.claim-split img{ object-position:52% 0%; }

/* Abdunklung an BEIDEN Raendern, offen in der Mitte: die Schrift steht auf
   Tiefe, das Gesicht im Licht. Vorher lief der Verlauf nur von links. */
.claim-split::before{
  background:
    linear-gradient(90deg,
      rgb(8 13 38/.94) 0%, rgb(8 13 38/.78) 18%, rgb(8 13 38/.24) 38%,
      rgb(8 13 38/.14) 50%,
      rgb(8 13 38/.26) 62%, rgb(8 13 38/.8) 82%, rgb(8 13 38/.95) 100%),
    linear-gradient(to top, rgb(8 13 38/.55), transparent 42%);
}
.claim-split .claim-a,
.claim-split .claim-b{
  padding:clamp(1.3rem,2.6vw,2.4rem);
  max-width:none; margin:0;
}
.claim-split .claim-a{ grid-column:1; text-align:left; }
.claim-split .claim-b{
  grid-column:3; text-align:right;
  font-size:clamp(1.15rem,.9rem + .95vw,1.85rem);
}
/* Die Gleichung ist die Pointe — sie bekommt eine Messinglinie als Auftakt
   und den kraeftigeren Schnitt, ohne die Farbfamilie zu verlassen. */
.claim-split .claim-b b{ font-weight:600; }
.claim-split .claim-b::before{
  content:''; display:block; margin:0 0 .9rem auto;
  width:clamp(2.6rem,6vw,4.6rem); height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, #E9CBA1);
}

/* Schmale Schirme: nebeneinander wird es zu eng — die Haelften stapeln,
   das Portraet steht darunter frei. */
@media(max-width:900px){
  /* Hochformat: nebeneinander waere es zu eng, also stapeln die Haelften unten
     — und darueber steht das Portraet frei, statt hinter dem Text zu
     verschwinden. 3:4 laesst die Quelle (4:5) fast vollstaendig stehen. */
  .claim-split{
    grid-template-columns:1fr; align-items:end;
    aspect-ratio:3/4; min-height:26rem; row-gap:0;
  }
  .claim-split img{ object-position:52% 4%; }
  .claim-split .claim-a,
  .claim-split .claim-b{ grid-column:1; text-align:left; }
  .claim-split .claim-b::before{ margin-left:0; margin-right:auto; }
  .claim-split .claim-a{ padding-bottom:0; }
  .claim-split::before{
    background:linear-gradient(to top, rgb(8 13 38/.95) 0%, rgb(8 13 38/.74) 46%, rgb(8 13 38/.3) 72%, rgb(8 13 38/.18) 100%);
  }
}
/* r60a: Der Zeilenabstand des Kopfrasters galt auch zwischen Kicker und
   Ueberschrift — dort gehoert er nicht hin. */
.dgx-head{ row-gap:0; }
.dgx-head .reg{ margin-bottom:clamp(.5rem,.9vw,.75rem); }

/* ══════════════════════════════════════════════════════════════════════════
   r61 · VORGABEN AUS DEM VIDEO (Waldemar, 2026-08-07)
   1. Der Hero-Titel folgt dem Logo: FOUNDER COCKPIT fett in Navy,
      „Business Workshop" darunter duenn in Messing.
   2. Der Kernsatz mit dem Portraet steht jetzt als eigene Sektion direkt
      hinter der Diagnose.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-inner > h1.h1-claim .wm-heavy{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:700;
  letter-spacing:-.012em; font-size:.92em;
  /* Markenblau als Verlauf statt Schwarz — hell oben links, tief unten rechts. */
  color:transparent;
  background:linear-gradient(112deg,#2C3C78 0%,#1B2450 32%,#0C1233 62%,#16204A 100%);
  -webkit-background-clip:text; background-clip:text;
}
.hero-inner > h1.h1-claim .wm-light{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:300;
  letter-spacing:.02em; font-size:.78em; margin-top:.1em;
  /* Markenmessing als Verlauf, langsam wandernd — wie im Kernsatz. */
  color:transparent;
  background:linear-gradient(102deg,
    #A9863F 0%, #D8BC85 18%, #F0DDB4 36%, #C9AC72 58%, #E8CFA0 78%, #A9863F 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:claimShift 22s ease-in-out infinite;
}

/* r62: Der Kernsatz steht in der hellen Diagnose-Sektion — dort braucht er
   eine eigene Fassung mit Messingrahmen, damit er auf Papier nicht schwebt. */
.claim-dg{
  margin-top:clamp(2.4rem,4vw,3.6rem);
  min-height:clamp(17rem,26vw,23rem);
  box-shadow:
    inset 0 0 0 1px rgb(169 134 63/.5),
    inset 0 1px 0 rgb(255 255 255/.16),
    0 40px 80px -46px rgb(11 17 48/.7),
    0 0 0 8px rgb(255 255 255/.5);
}
@media(prefers-reduced-motion:reduce){ .hero-inner > h1.h1-claim .wm-light{ animation:none; } }

/* ══════════════════════════════════════════════════════════════════════════
   r65 · HERO-TITEL: LESBARKEIT UND KOERPER
   Der helle Boardroom lief dem Titel ins Wort. Jetzt liegt hinter der
   Textspalte ein weicher Lichtschleier und die Verlaeufe sind tiefer
   gesaettigt. KEIN text-shadow: bei background-clip:text malt Blink den
   Schatten UEBER die Verlaufsfuellung — der Titel wird grau. Teuer
   getestet in r65a.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-inner{ position:relative; z-index:1; }
.hero-inner::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:-4vw -10vw -3vw -14vw;
  background:
    radial-gradient(58% 70% at 24% 40%, rgb(253 250 244/.8) 0%, rgb(253 250 244/.5) 48%, transparent 78%),
    linear-gradient(100deg, rgb(253 250 244/.58) 0%, rgb(253 250 244/.2) 54%, transparent 76%);
}
.hero-inner > h1.h1-claim .wm-heavy{
  background:linear-gradient(112deg,#25376F 0%,#16204A 30%,#070C22 62%,#101941 100%);
  -webkit-background-clip:text; background-clip:text;
}
.hero-inner > h1.h1-claim .wm-light{
  background:linear-gradient(102deg,
    #7E5F22 0%, #A9863F 14%, #D9BE88 30%, #8A6A28 50%, #C8A868 72%, #7E5F22 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
}

/* ========================= Einwilligung =========================
   Ein Stueck Seitenmoebel, keine Wand. Werte ausschliesslich aus der
   Direction-Sheet-Tabelle: Papier als Flaeche, --e2 als Hoehe (Licht faellt
   von oben, also liegt der Kasten AUF der Seite), Knoepfe sind die
   vorhandenen .btn-primary / .btn-quiet — es kommt keine neue Farbe und kein
   neues Zeichen auf die Seite.
   Bewusst NICHT bildschirmfuellend und ohne Abdunklung dahinter: gebraucht
   wird die Zustimmung nur fuer die Wiedererkennung, und wer ein Angebot
   liest, soll es weiterlesen koennen. */
.einwilligung{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem,3vw,2rem);
  padding:clamp(.9rem,2vw,1.15rem) clamp(1rem,4vw,2rem)
          calc(clamp(.9rem,2vw,1.15rem) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 -1px 0 rgb(var(--shadow)/.1), 0 -22px 50px -34px rgb(var(--shadow)/.55);
  opacity:0; transform:translateY(12px);
  transition:opacity var(--d-state) var(--ease-cine), transform var(--d-state) var(--ease-cine);
}
.einwilligung.is-da{ opacity:1; transform:none; }
.einwilligung p{
  margin:0; max-width:76ch;
  font-size:var(--t-small); line-height:1.55; color:var(--ink-mute);
}
.einwilligung p b{ color:var(--ink); font-weight:600; }
.einwilligung p a{ color:var(--gold-deep); text-underline-offset:.2em; }
.einwilligung-knoepfe{ display:flex; gap:.6rem; flex:0 0 auto; }
/* Beide Knoepfe gleich breit: die Wahl soll auch optisch eine Wahl sein. */
.einwilligung-knoepfe .btn{ min-width:8.5rem; justify-content:center; }

/* Zwei feste Leisten am selben Rand waeren ein Gedraenge — solange gefragt
   wird, tritt die Ticketleiste zurueck. Die Frage ist in einem Tipp erledigt,
   danach verhaelt sie sich wieder wie immer. */
body.einwilligung-offen .stickybar{ transform:translateY(110%); }

@media(max-width:719px){
  .einwilligung{ flex-direction:column; align-items:stretch; gap:.85rem; }
  .einwilligung-knoepfe .btn{ flex:1 1 0; min-width:0; }
}
@media (prefers-reduced-motion:reduce){
  .einwilligung{ transition:opacity var(--d-state) linear; transform:none; }
  .einwilligung.is-da{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   r162 · FILM STARTEN, WENN «BEWEGUNG REDUZIEREN» AN IST
   Kein Schmuck, sondern der Ersatz fuer etwas, das sonst ganz fehlt: mit
   aktivierter Systemeinstellung laeuft der Hero-Film nicht von allein — dieser
   Knopf ist der einzige Weg, ihn ueberhaupt zu sehen. Er existiert nur in
   diesem Fall; JavaScript legt ihn sonst gar nicht erst an.
   ══════════════════════════════════════════════════════════════════════════ */
.film-start{
  /* Im Fluss, am Ende der Heldenspalte. Schwebend ueber dem Bild lag er auf
     dem Telefon quer ueber der Registraturzeile; weiter unten stand er
     ausserhalb des sichtbaren Bereichs. Hier kollidiert er in keiner Breite. */
  align-self:start; margin-top:.2rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:44px; padding:.7rem 1.15rem;          /* 44px: Fingermass */
  font-family:'Space Grotesk',sans-serif; font-size:var(--t-small); font-weight:600;
  letter-spacing:.04em; color:var(--navy);
  background:rgb(255 255 255/.86); backdrop-filter:blur(8px) saturate(1.1);
  border:1px solid rgb(169 134 63/.4); border-radius:999px;
  box-shadow:0 10px 26px -18px rgb(var(--shadow)/.6);
}
.film-start::before{
  content:''; width:0; height:0; flex:none;
  border-left:9px solid var(--gold-deep);
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.film-start:hover{ background:#fff; border-color:var(--gold-deep); }
.film-start:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }

/* ══════════════════════════════════════════════════════════════════════════
   r164 · FRAGE NACH BEWEGUNG
   Gleiche Machart wie die Einwilligung — gleicher Rand, gleiche Flaeche,
   zwei gleich breite Knoepfe. Sie erscheint nur, wenn das Geraet weniger
   Bewegung wuenscht und fuer diese Seite noch nichts entschieden wurde, und
   nie gleichzeitig mit der Einwilligung.
   Die Einblendung selbst laeuft bewusst ohne Verschiebung: wer weniger
   Bewegung will, soll nicht ausgerechnet von dieser Frage angesprungen werden.
   ══════════════════════════════════════════════════════════════════════════ */
.bewegungsfrage{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem,3vw,2rem);
  padding:clamp(.9rem,2vw,1.15rem) clamp(1rem,4vw,2rem)
          calc(clamp(.9rem,2vw,1.15rem) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 -1px 0 rgb(var(--shadow)/.1), 0 -22px 50px -34px rgb(var(--shadow)/.55);
  opacity:0; transition:opacity var(--d-state) linear;
}
.bewegungsfrage.is-da{ opacity:1; }
.bewegungsfrage p{
  margin:0; max-width:76ch;
  font-size:var(--t-small); line-height:1.55; color:var(--ink-mute);
}
.bewegungsfrage p b{ color:var(--ink); font-weight:600; }
.bewegungsfrage-knoepfe{ display:flex; gap:.6rem; flex:0 0 auto; }
.bewegungsfrage-knoepfe .btn{ min-width:8.5rem; justify-content:center; }
@media(max-width:719px){
  .bewegungsfrage{ flex-direction:column; align-items:stretch; gap:.85rem; }
  .bewegungsfrage-knoepfe .btn{ flex:1 1 0; min-width:0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   r167 · HERO HOCHKANT: EINE ACHSE

   Direction Sheet (Auszug, verbindlich fuer diesen Pass):
   Konzept    Die erste Flaeche ist eine gedruckte Einladung in eine
              geschlossene Runde — ruhig, mittig, gesetzt; der Raum zeigt
              sich darunter im Filmband.
   Archetyp   Ruler (FC, gesetzt). Adjektive: gesetzt, praezise, einladend.
              Anti: SaaS-Hero, Canva-Flyer, App-Onboarding.
   Licht      unveraendert. Die mittige Achse vertraegt keinen gerichteten
              Verlauf hinter dem Satz — die Textzone bleibt flaches Papier
              (seit r165 ohnehin), das Licht traegt das Band am Fuss.
   Farbe      LOCKED. Einzige Rollenaenderung: der Strich in `.reg` wird vom
              seitlichen Trenner zum waagerechten Teiler zwischen Datum und
              Platzzahl.
   Typo       unveraendert. Mittiger Flattersatz braucht enge Zeilen, sonst
              franst er aus: Lede 33 Zeichen, Zielgruppensatz 32.
   Tiefe      drei Ebenen bleiben — Papier (Satz), Glastafel (Eckdaten),
              Filmband (Fuss). Die Tafel rueckt auf dieselbe Achse, damit die
              Spalte als EIN Block liest und nicht als zwei Ausrichtungen.
   Bewegung   unveraendert (rv-Reihenfolge 0,1,2,4,5,6).

   Warum ueberhaupt: linksbuendig ist auf einer breiten Buehne richtig, weil
   der Satz dort eine Kante gegen das Bild braucht. Hochkant gibt es diese
   Kante nicht mehr — der Satz steht allein auf Papier, und eine linke Kante
   ohne Gegenueber sieht aus wie ein Rest vom Desktop.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:719px){
  .hero-inner{ text-align:center; justify-items:center; }
  .hero-inner > *{ margin-left:auto; margin-right:auto; }

  /* Datum · Strich · Platzzahl untereinander: der Strich trennt, statt zu
     schieben. Waagerecht gelegt ist er breiter, sonst wirkt er wie ein Rest. */
  .hero .reg{ flex-direction:column; gap:.5rem; }
  .hero .reg i{ width:56px; }

  .hero h1{ max-width:none; text-wrap:balance; }
  .hero .lede{ max-width:33ch; text-wrap:pretty; }
  .hero-proof{ max-width:32ch; text-wrap:pretty; }

  /* Beide Wege gleich breit und gleich erreichbar — nebeneinander sind sie
     hochkant zu schmal fuer ihre Beschriftung. */
  .hero-cta{ flex-direction:column; align-items:center; width:100%; gap:.7rem; }
  .hero-cta .btn{ width:min(100%,21rem); justify-content:center; }

  /* Die Tafel steht auf derselben Achse; die Trennlinien laufen nicht mehr
     ueber die volle Breite, sondern nur so weit wie der Inhalt — eine Linie
     von Rand zu Rand zerschneidet eine mittige Spalte. */
  .hero-sheet{ width:min(100%,23rem); text-align:center; justify-items:center; }
  .hero-sheet-cell{ justify-items:center; }
  .hero-sheet-cell + .hero-sheet-cell{
    border-top:0; padding-top:.9rem; position:relative;
  }
  .hero-sheet-cell + .hero-sheet-cell::before{
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:44px; height:1px; background:rgb(169 134 63/.45);
  }
}

/* r166 · Nicht reparierbar, und kein Fehler von uns — hier festgehalten, damit
   es niemand ein zweites Mal jagt.
   Gemeldet: die Buchungsleiste stehe auf dem iPhone einen Finger breit ueber
   dem unteren Rand, darunter laufe der Seiteninhalt weiter durch.
   Gemessen auf einem iPhone 17: innerHeight 754, visualViewport 754,
   Unterkante der Leiste 754 — die Leiste sitzt also exakt auf der Kante des
   Bereichs, den Safari der Seite gibt. Der Streifen darunter gehoert zu
   Safaris eingeklappter Adressleiste; dort zeichnet Safari den Seiteninhalt
   weiter, feste Elemente aber nicht.
   Gegenprobe auf derselben Seite: ein voellig schlichter fester Balken
   (`bottom:0`, keine Blende, kein Weichzeichner, keine Bewegung) endet auf
   genau derselben Linie wie unsere Leiste. Es liegt also weder am
   Weichzeichner noch an der Einfahrbewegung noch an den Sicherheitsabstaenden.
   Versucht und wieder entfernt, weil wirkungslos: ::after-Saum, negativer
   Aussenabstand, Deckkraft statt Verschiebung, Weichzeichner aus.
   Der Streifen verschwindet, sobald Safari seine Leiste wieder ausklappt. */

/* ══════════════════════════════════════════════════════════════════════════
   r169 · Das Logo im Kopf: EINE Sperrung, ueber die volle Hoehe der Leiste
   ──────────────────────────────────────────────────────────────────────────
   Vorher standen Abzeichen und Wortmarke als zwei Teile nebeneinander, ihr
   Verhaeltnis ueber feste Breiten gehalten (60 px zu 6 rem). Jetzt ist es die
   fertige Datei aus assets/logo/ — dieselbe, die wir ausliefern. Damit kann
   der Kopf der Seite gar nicht mehr von der Marke abweichen.

   «Ueber die volle Hoehe» heisst hier woertlich: das Bild ist so hoch wie die
   Leiste selbst, also Inhaltshoehe PLUS die beiden Innenabstaende. Deshalb der
   negative Aussenabstand — ohne ihn koennte es nur bis an die Polsterung
   heranreichen. Die Leistenhoehe bleibt dieselbe wie vorher (79,2 px): sie
   haengt an der Schaltflaeche und der Sprachwahl, nicht am Logo.

   Die Datei ist auf die Zeichnung beschnitten, das Abzeichen beruehrt also
   Ober- und Unterkante wirklich. Wer wieder Luft haben will, aendert die eine
   Zeile --kopf-inhalt — nicht die Bildgroesse.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kopf-luft:.6rem;     /* = padding-block der .topbar */
  --kopf-inhalt:60px;    /* Hoehe des Leisteninhalts, unveraendert */
  --kopf-logo-saum:6px;  /* Luft ueber und unter dem Abzeichen */
}
/* min-height haelt die Leiste auf ihrer alten Hoehe (79,2 px). Ohne sie hing
   die Hoehe am groessten Kind — bis r169 war das das 60-px-Abzeichen, und als
   das Logo kleiner wurde, schrumpfte die Leiste einfach mit. Jetzt ist die
   Hoehe eine Ansage und das Logo haengt an IHR, nicht umgekehrt. */
.topbar{
  padding-block:var(--kopf-luft);
  min-height:calc(var(--kopf-inhalt) + 2 * var(--kopf-luft));
  box-sizing:border-box;
}
/* Der negative Aussenabstand laesst das Bild ueber die Polsterung hinausragen;
   align-items:center haelt es dabei mittig. Der Saum wird deshalb OBEN UND
   UNTEN gleich gross, ohne dass er zweimal dastehen muss. */
.topbar .brand{ margin-block:calc(-1 * var(--kopf-luft)); }
.topbar .brand .brand-lockup{
  height:calc(var(--kopf-inhalt) + 2 * var(--kopf-luft) - 2 * var(--kopf-logo-saum));
  width:auto; display:block; border-radius:0; flex:none;
}
/* Auf schmalen Geraeten steht neben dem Logo noch die Sprachwahl. Bei voller
   Hoehe waere die Sperrung 224 px breit und draengte sie aus der Zeile —
   deshalb hier nach der Breite bemessen und nicht nach der Hoehe. */
@media(max-width:479px){
  .topbar .brand .brand-lockup{ height:auto; width:min(52vw,190px); }
}