/* =====================================================================
   Reset Discipline v190 — built from zero.
   One idea: ONE OBJECT PER SCREEN, named in plain words, with air around it.
   Not boxes on black. Not type over photographs. The product is the hero,
   the way a product page should work.
   index.html loads only this file. style.css survives for the legal pages.
   ===================================================================== */

@font-face{
  font-family:'Oswald';
  src:url('/assets/fonts/oswald-latin.woff2') format('woff2');
  font-weight:200 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'InterVar';
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ------------------------------------------------------------- tokens */
:root{
  /* Not flat #000. A page-wide field with a warm source at the top, so the
     dark reads as a lit room rather than a switched-off screen. */
  --bg:#070708;
  --bg-2:#0b0b0d;
  --cream:#f6f1e6;
  --cream-2:rgba(246,241,230,.72);
  --cream-3:rgba(246,241,230,.50);
  --line:rgba(246,241,230,.10);

  --gold:#d8a94b;
  --gold-hi:#f6dc95;
  --gold-lo:#a87f2e;
  --metal:linear-gradient(165deg,#fbedc2 0%,#eed189 14%,#d8a94b 44%,#b1872f 70%,#e8c883 100%);

  --f-disp:'Oswald',ui-sans-serif,system-ui,sans-serif;
  --f-body:'InterVar',ui-sans-serif,system-ui,-apple-system,sans-serif;

  --t-display:clamp(1.72rem,6.9vw,4.4rem);
  --t-lead:clamp(1.06rem,.99rem + .5vw,1.32rem);
  --t-price:clamp(3.2rem,7.5vw,6.5rem);
  --t-kicker:.68rem;

  --wrap:70rem;
  --gap:clamp(3.5rem,9vh,7rem);
  --sec:clamp(5.5rem,13vh,9.5rem);

  /* Emil: the built-in curves are too weak for UI. */
  --ease-out:cubic-bezier(.23,1,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  background:var(--bg);color:var(--cream);
  font-family:var(--f-body);font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:#100c04}

/* the field: a warm source above, grain over everything. Fixed, so the page
   scrolls through the light instead of dragging it along. */
/* Stacking order, once and explicitly:
   0 field · 1 sword · 2 grain · 3 content.
   Reihenfolge, einmal und ausdruecklich: 0 Feld, 2 Korn, 3 Inhalt. */
.field{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 42% at 50% -6%,rgba(216,169,75,.10),transparent 68%),
    radial-gradient(46% 30% at 84% 12%,rgba(216,169,75,.045),transparent 70%),
    linear-gradient(180deg,#0a0a0c 0%,#070708 42%,#050506 100%);
}
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.030;mix-blend-mode:overlay;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-contrast:more){ .grain{display:none} }

/* ------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2.5rem)}
.narrow{max-width:46rem}
section{position:relative;z-index:3}
/* decorative bleed (glows, shadows, pseudo-elements) must never be able to
   open a horizontal scrollbar. `clip` rather than `hidden`: hidden would
   also kill position:sticky inside. */
main{overflow-x:clip}
.sec{padding-block:clamp(4.2rem,8.5vh,6.5rem)}
.closer{padding-block:clamp(5.2rem,11vh,8rem) clamp(4rem,8vh,6rem)}

/* --------------------------------------------------------------- type */
.kicker{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:var(--f-disp);font-weight:500;font-size:var(--t-kicker);
  letter-spacing:.30em;text-transform:uppercase;color:var(--gold);
}
.kicker::before,.kicker::after{content:"";width:1.4rem;height:1px;background:var(--gold);opacity:.55}
.kicker--start{justify-content:flex-start}
.kicker--start::after{display:none}

h1,h2,h3{font-family:var(--f-disp);font-weight:600;text-transform:uppercase}
.display{
  margin-top:1.1rem;font-size:clamp(1.6rem,8.4vw,3.8rem);line-height:.96;letter-spacing:-.022em;
  text-wrap:balance;
}
.lead{
  margin-top:1.35rem;font-size:var(--t-lead);line-height:1.6;color:var(--cream-2);
  max-width:34rem;text-wrap:pretty;
}
.center{text-align:center}
.center .lead{margin-inline:auto}
.metal{
  background-image:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hair{height:1px;width:4.5rem;background:linear-gradient(90deg,var(--gold),transparent);opacity:.6}

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-disp);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:.84rem;line-height:1;
  min-height:3.5rem;padding:1.15rem 2.1rem;border-radius:999px;
  /* Emil: name the properties, never `all`; press feedback must be instant */
  transition:transform 150ms var(--ease-out),background-position 420ms var(--ease-out),
             box-shadow 260ms var(--ease-out),border-color 200ms,color 200ms,background-color 200ms;
}
.btn--gold{
  background-image:var(--metal);background-size:210% 100%;background-position:16% 0;color:#120d03;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25),
             0 2px 8px -3px rgba(0,0,0,.8),0 22px 48px -26px rgba(216,169,75,.85);
}
.btn--ghost{border:1px solid rgba(216,169,75,.42);color:var(--gold)}
.btn--lg{min-height:3.9rem;padding-inline:2.5rem;font-size:.9rem}
#topbar .btn{min-height:3rem}
.btn--block{display:flex;width:100%}
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{background-position:84% 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.25),0 2px 8px -3px rgba(0,0,0,.8),0 26px 60px -24px rgba(216,169,75,1)}
  .btn--ghost:hover{background:rgba(216,169,75,.10);border-color:var(--gold)}
}
.btn:active,.btn[data-press]{transform:scale(.97)}
.btn[disabled]{cursor:progress;opacity:.62}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:2.25rem}
.center .cta-row{justify-content:center}
.fineprint{font-size:.78rem;letter-spacing:.04em;color:var(--cream-3)}

/* -------------------------------------------------------------- reveal
   One entrance, everywhere. 520 ms is a content reveal, not a UI response —
   UI responses in this file stay under 200 ms. */
.js .r{opacity:0;transform:translateY(22px);filter:blur(5px);
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out),filter 620ms var(--ease-out)}
.js .r.in{opacity:1;transform:none;filter:none}
/* pictures arrive differently from text: they settle in place rather than
   travel, so they read as objects rather than as another paragraph */
.js figure.r,.js .beat__panel.r{transform:translateY(26px) scale(.975)}
.js figure.r.in,.js .beat__panel.r.in{transform:none}
/* the headline builds line by line — the three hero lines already carry
   their own delay, so they cascade instead of landing as one block */
.js .hero h1 span{display:block;opacity:0;transform:translateY(26px);filter:blur(6px);
  animation:heroline 900ms var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 110ms + 120ms)}
@keyframes heroline{to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .r,.js figure.r,.js .beat__panel.r{transition:opacity 200ms linear;transform:none;filter:none}
  .js .hero h1 span{animation:none;opacity:1;transform:none;filter:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Die Schwert-Bildfolge (#stage, #sword, #vignette) ist ersatzlos entfallen.
   Ihre Regeln standen hier noch, obwohl es die Elemente im Markup seit
   Langem nicht mehr gibt und die Bildfolgen auf dem Server 404 liefern.
   Einzige feste Hintergrundebene ist .field ganz oben in dieser Datei. */

/* ============================================================== TOPBAR */
#topbar{
  position:fixed;inset-inline:0;top:var(--refbar-h,0px);z-index:60;
  display:flex;align-items:center;gap:1.25rem;
  padding:.7rem clamp(1rem,5vw,2.5rem);
  background:rgba(7,7,8,.72);
  backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--line);
  transform:translateY(-105%);transition:transform 380ms var(--ease-out);
}
#topbar[data-state="shown"]{transform:none}
.topbar__brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;min-height:2.75rem}
.topbar__brand img{width:2.35rem;height:2.35rem;object-fit:contain}
.topbar__name{font-family:var(--f-disp);font-size:.86rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--cream);white-space:nowrap}
/* a hairline and a short claim so the bar has a left side, not a lone mark */
.topbar__line{display:none;width:1px;height:1.1rem;background:var(--line)}
.topbar__claim{display:none;font-size:.76rem;letter-spacing:.03em;color:var(--cream-3);white-space:nowrap}
@media (min-width:64rem){ .topbar__line,.topbar__claim{display:block} }
.topbar__nav{display:none;gap:1.5rem}
.topbar__nav a{display:inline-flex;align-items:center;min-height:2.75rem;font-family:var(--f-disp);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-3);transition:color 200ms}
.topbar__nav a:hover{color:var(--gold)}
#topbar .btn{min-height:2.6rem;padding:.75rem 1.25rem;font-size:.7rem}
@media (min-width:56rem){ .topbar__nav{display:flex} }
@media (max-width:26rem){ .topbar__name{display:none} }

#refbar{position:fixed;inset-inline:0;top:0;z-index:70;display:flex;align-items:center;gap:.75rem;
  padding:.65rem clamp(1rem,4vw,2rem);background:rgba(0,0,0,.92);
  border-bottom:1px solid rgba(216,169,75,.3);font-size:.8rem;color:var(--cream-2)}
#refbar[hidden]{display:none}
#refbar b{color:var(--gold);font-weight:600}
#refbar .x{margin-left:auto;padding:.25rem .5rem;color:var(--cream-3);font-size:1.15rem;line-height:1}

/* ================================================================ HERO */
.hero{
  position:relative;z-index:3;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(6rem,14vh,9rem) clamp(6rem,16vh,10rem);
}
/* The hero read as empty because the type was carrying a full viewport at
   display size, not hero size. Larger, tighter, and a narrower measure so the
   three lines stack into a block instead of drifting across the screen. */
.hero h1{
  font-size:clamp(3rem,1.3rem + 6.4vw,6.6rem);line-height:.93;letter-spacing:-.03em;
  max-width:13ch;text-wrap:balance;
}
.hero h1 span{display:block}
.hero__sub{margin-top:1.9rem;max-width:33rem;color:var(--cream);font-size:clamp(1.12rem,1rem + .7vw,1.45rem);line-height:1.5}
.hero__cta{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
.hero .r{transition-delay:var(--d,0ms)}
.hero__scroll{position:absolute;left:50%;bottom:clamp(1.25rem,3.5vh,2.25rem);translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.hero__scroll span{font-family:var(--f-disp);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-3)}
.hero__scroll i{display:block;width:1px;height:2.25rem;background:linear-gradient(180deg,rgba(216,169,75,.75),transparent)}

/* ============================================================= PROBLEM
   Still sitting on the sword. app.js anchors the sword fade and the sticky
   header on `.problem .cards`, so that selector has to survive. */
.problem{position:relative;background:transparent;padding-block:clamp(3.6rem,8vh,6rem) 0}
/* Nach einem Hero, der ganz aus Licht gebaut ist, lag dieser Abschnitt
   vollkommen flach. Eine Lichtquelle, oben links, sonst nichts. */
.problem::before{
  /* Der Verlauf beginnt WEIT oberhalb der Sektionskante - sonst schneidet
     die Kante ihn an seiner hellsten Stelle ab und man sieht einen Streifen. */
  content:"";position:absolute;inset:-16rem 0 24% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 46% at 18% 42%,rgba(216,169,75,.08),transparent 72%);
}
/* Frueher stand dieser Block schmal und mittig, dazu lag der schwarze
   Verlauf von .answer::before darueber - deshalb wirkte er gequetscht und
   schlecht sichtbar. Jetzt: linksbuendig, grosse Schrift, Kicker als
   Auftakt, kein Schleier mehr. */
.problem__intro{position:relative;max-width:40rem;text-align:left;padding-block:0}
.problem__intro .display{
  margin-top:1rem;
  /* Groesse kommt jetzt aus .display - ein Rang, eine Groesse. Der Abstand
     zur Hero-Zeile entsteht durch deren 96 px, nicht durch eine Sonderregel. */
  line-height:.97;
  letter-spacing:-.026em;color:var(--cream);text-shadow:none;
}
.problem__intro .lead{
  color:var(--cream-2);text-shadow:none;
  font-size:clamp(1.12rem,4.8vw,1.45rem);line-height:1.42;
  margin-top:1.15rem;max-width:34rem;margin-inline:0;
}

/* =========================================================== THE ANSWER
   The first thing after the sword. One screen that says what it is, what it
   does for you, and what it costs — because that is what visitors were not
   getting. The device is the real photograph, frontal, on black. */
.answer{
  position:relative;background:transparent;
  padding-block:clamp(1.2rem,3vh,2rem) clamp(2rem,5vh,3.2rem);
  margin-top:0;
}
/* Die beiden schwarzen Verlaeufe (::before/::after) stammen aus der Zeit,
   als dieser Block massiv schwarz war. Ohne den schwarzen Grund legte
   ::before einen 14rem hohen dunklen Schleier ueber die Ueberschrift
   darueber. Beide sind raus. */
/* the tiers show the same photographs, so they need the same ground.
   scroll-margin-top: a jump to #pricing stops early enough that the trust
   strip right above it is still peeking in at the top, not cut off cold */
#pricing{scroll-margin-top:24vh}
.answer__grid{display:grid;gap:var(--gap);align-items:center}
@media (min-width:60rem){
  .answer__grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(3rem,6vw,6rem)}
}
.answer__copy .display{margin-top:1.1rem}
.facts{display:grid;gap:1.15rem;margin-top:2rem;max-width:32rem}
.facts li{position:relative;padding-left:1.9rem;color:var(--cream-2);font-size:1.02rem;line-height:1.55}
.facts li::before{
  content:"";position:absolute;left:0;top:.44em;width:.78rem;height:.42rem;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg);
}
.facts b{color:var(--cream);font-weight:600}
.pricelead{
  display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-top:2.25rem;
  padding-top:1.75rem;border-top:1px solid var(--line);
}
.pricelead__from{font-family:var(--f-disp);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-3)}
.pricelead__v{font-family:var(--f-disp);font-weight:600;font-size:2.1rem;line-height:1;color:var(--cream)}
.pricelead__note{font-size:.88rem;color:var(--cream-3)}

/* the device: a photograph, never a drawn shell */
.device{position:relative;justify-self:center;width:min(24rem,82vw)}
/* the object drifts against the page as you scroll past it — small, bound to
   scroll, no loop. Only transform, so it stays on the compositor. */
.device__btn{display:block;width:100%;border-radius:1.5rem;transition:transform 260ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .device__btn:hover{transform:translateY(-6px)} }
.device__btn:active,.device__btn[data-press]{transform:scale(.985)}
.device img{width:100%;transform:translate3d(0,calc((.5 - var(--p,.5)) * 2.4rem),0)}
@media (prefers-reduced-motion:reduce){ .device img{transform:none} }
/* No glow behind the device. The photographs carry their own #000 surround,
   and any light behind them turns that surround into a visible second frame
   around the phone. The section is pure black instead, so the photograph's
   background and the page are the same colour and the edge disappears. */
@media (min-width:60rem){ .device{width:min(27rem,38vw)} }

/* ============================================================== BEATS
   What it does. One panel per beat, all treated identically — same size,
   same corner, same edge, same light. Sameness is what reads as calm. */
.beats{display:grid;gap:var(--gap)}
.beat{display:grid;gap:1.05rem;align-items:center}
@media (min-width:60rem){
  .beat{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem)}
  .beat--flip .beat__copy{order:2}
  .beat--flip .beat__panel{order:1}
}
.beat__panel{transform:translate3d(0,calc((.5 - var(--p,.5)) * 1.8rem),0)}
@media (prefers-reduced-motion:reduce){ .beat__panel{transform:none} }
/* Alle Produktbilder bekommen DIESELBE Box. Vorher schwankten sie zwischen
   252 und 356 px, und weil das Karussell sich nach der hoechsten Folie
   richtet, blieb bei den flachen Bildern bis zu 100 px tote Flaeche stehen. */
.beat__panel img{width:100%;height:auto;max-height:none}
.beat__copy{max-width:30rem}
/* Die Zwischenueberschrift darf nicht mit der Sektionsueberschrift
   konkurrieren — sie war gleich schwer und beide lasen sich als Titel. */
.beat__copy h3{font-size:clamp(1.15rem,1rem+.9vw,1.5rem);line-height:1.12;margin-top:.35rem}
.beat__copy p{margin-top:.55rem}
.beat__copy h3{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.06;letter-spacing:-.015em;margin-top:.9rem}
.beat__copy p{margin-top:1rem;color:var(--cream-2);line-height:1.6}
/* Nothing on this page is a rectangle pasted onto the layout. The panels
   dissolve at their borders exactly like the device photographs do, so the
   whole page shares one edge treatment instead of two. */
/* Nothing on this page is a rectangle pasted onto the layout. One radial
   mask fades all four borders at once — a single layer, because the
   two-layer + mask-composite form is dropped whole by the parser here and
   silently removes the mask instead of failing loudly. */
.panel{
  position:relative;display:block;width:100%;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.85));
  transition:transform 220ms var(--ease-out);
  /* 58 % left the top and bottom centres fully opaque - the ellipse reaches
     those edges long before its fade begins. 40 % puts every border inside
     the gradient. Die Regel stand nur im Kommentar; jetzt steht sie da. */
  -webkit-mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 40%,transparent 100%);
}
.panel img{width:100%}
@media (hover:hover) and (pointer:fine){ .panel:hover{transform:translateY(-4px)} }
.panel:active,.panel[data-press]{transform:scale(.99)}

/* ============================================================== LADDER
   How it works: seven days, then thirty. A line and four marks — nothing
   that needs its own container. */
.ladder{position:relative;display:grid;gap:2.5rem;margin-top:3rem;padding-left:3.6rem;max-width:44rem}
.ladder::before{content:"";position:absolute;left:1.05rem;top:.6rem;bottom:.6rem;width:1px;background:var(--line)}
/* the rail fills as you scroll the section — the page's own progress bar */
.ladder::after{
  content:"";position:absolute;left:1.05rem;top:.6rem;width:1px;
  height:calc((100% - 1.2rem) * clamp(0, (var(--p,0) - .2) * 2.2, 1));
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,rgba(216,169,75,.2));
  box-shadow:0 0 10px rgba(216,169,75,.5);
}
.ladder__i{position:relative}
.ladder__n{
  position:absolute;left:-3.6rem;top:-.1rem;display:grid;place-items:center;
  width:2.1rem;height:2.1rem;border-radius:50%;background:var(--bg);
  box-shadow:inset 0 0 0 1px rgba(216,169,75,.5);
  font-family:var(--f-disp);font-size:.68rem;font-weight:600;color:var(--gold);
}
.ladder__i h3{font-size:1.2rem;letter-spacing:.01em;line-height:1.15}
.ladder__i p{margin-top:.5rem;color:var(--cream-2);font-size:.98rem;line-height:1.55}

/* ============================================================= PRICING */
.deadline{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.75rem;
  padding:.6rem 1.1rem;border-radius:999px;
  background:rgba(216,169,75,.07);box-shadow:inset 0 0 0 1px rgba(216,169,75,.3);
  font-size:.86rem;color:var(--cream-2);
}
.deadline b{color:var(--gold);font-weight:600}
.deadline .dot{width:.4rem;height:.4rem;border-radius:50%;background:var(--gold);flex:none}

.tiers{display:grid;gap:var(--gap);margin-top:clamp(3rem,7vh,5rem);align-items:start}
@media (min-width:62rem){ .tiers{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5.5rem)} }
.tier{display:flex;flex-direction:column;align-items:center;text-align:center}
.tier .device{width:min(17rem,62vw)}
/* flex + wrap: as an inline ::after the badge could not break onto its own
   line and pushed the whole page sideways on a 390 px screen */
.tier__name{
  margin-top:2rem;font-family:var(--f-disp);font-weight:600;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.08em;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.55rem;max-width:100%;
}
.tier__price{margin-top:.6rem;font-family:var(--f-disp);font-weight:600;font-size:var(--t-price);line-height:.85}
.tier__unit{margin-top:.7rem;font-family:var(--f-disp);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-3)}
.tier__list{display:grid;gap:.7rem;margin:1.75rem 0 2rem;text-align:left;max-width:24rem;width:100%}
.tier__list li{position:relative;padding-left:1.65rem;font-size:.95rem;line-height:1.5;color:var(--cream-2)}
.tier__list li::before{content:"";position:absolute;left:0;top:.44em;width:.72rem;height:.4rem;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.tier__list li[data-no]{color:var(--cream-3)}
.tier__list li[data-no]::before{border-color:rgba(246,241,230,.25);transform:rotate(0);border-bottom:0;border-left:0;
  width:.7rem;height:1px;background:rgba(246,241,230,.28);top:.75em}
.tier .btn{width:100%;max-width:24rem}
.tier__secure{display:flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.74rem;color:var(--cream-3)}
.tier__secure svg{color:var(--gold);flex:none}
.tier--pro .tier__price{color:var(--gold)}
.afters{display:grid;gap:2.25rem;margin-top:clamp(3.5rem,8vh,5.5rem);max-width:56rem;margin-inline:auto}
@media (min-width:52rem){ .afters{grid-template-columns:1fr 1fr;gap:3rem} }
.after{padding-left:1.5rem;border-left:1px solid rgba(216,169,75,.3)}
.after svg{color:var(--gold)}
.after h3{margin-top:.7rem;font-size:1rem;letter-spacing:.05em}
.after p{margin-top:.5rem;font-size:.9rem;line-height:1.58;color:var(--cream-3)}

/* =========================================================== CAROUSEL
   One idea per view, swipeable. Powers "Inside" and the testimonials —
   same mechanism, different content. Loops forever via a cloned slide on
   each edge; carousel.js reads .carousel__slide / .carousel__dots. */
.carousel{position:relative}
.carousel__viewport{overflow:hidden;touch-action:pan-y;border-radius:1.25rem}
.carousel__track{display:flex;transform:translate3d(-100%,0,0);transition:transform 560ms var(--ease-out)}
.carousel__track.dragging{transition:none!important}
.carousel__slide{flex:0 0 100%;min-width:0;-webkit-user-select:none;user-select:none}
.carousel__dots{display:flex;justify-content:center;flex-wrap:wrap;gap:.55rem;margin-top:2.25rem}
.carousel__dot{position:relative;width:.5rem;height:.5rem;border-radius:50%;background:rgba(246,241,230,.22);
  transition:background 220ms,transform 220ms}
.carousel__dot::after{content:"";position:absolute;inset:-18px}
.carousel__dot:hover{background:rgba(246,241,230,.4)}
.carousel__dots{gap:.9rem}
.carousel__dot.is-active{background:var(--gold);transform:scale(1.35)}
@media (prefers-reduced-motion:reduce){ .carousel__track{transition:none} }

/* the beats keep their own two-column layout inside each slide */
.beats-carousel .beat{padding-block:.25rem}

/* ============================================================ TRUST
   Customer messages, one at a time, styled like a real chat bubble. The
   dots sit fixed under the heading (not glued to the bubble's own
   bottom edge), so a one-line message no longer leaves a gap of air
   before them — the position doesn't move with the message length. */
.trust{background:transparent;padding-bottom:clamp(2.5rem,6vh,4rem)}
.msgs-carousel{max-width:38rem;margin-inline:auto}
.msg{
  max-width:34rem;margin-inline:auto;padding:1.9rem 2rem 2.1rem;border-radius:1.35rem;
  background:rgba(246,241,230,.035);box-shadow:inset 0 0 0 1px var(--line);
  min-height:11rem;
}
.msg__head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.msg__avatar{
  display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;flex:none;
  background-image:var(--metal);color:#120d03;font-family:var(--f-disp);font-weight:600;font-size:.86rem;
}
.msg__name{font-family:var(--f-disp);font-size:.8rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
/* a touch of slant: enough to read as someone's own words, not a
   headline — without tipping into a script-y gimmick */
.msg p{color:var(--cream-2);font-size:.98rem;line-height:1.64;font-style:italic}
.msg p + p{margin-top:.9rem}
@media (min-width:36rem){ .msg{padding:2.25rem 2.5rem 2.5rem} }

/* ========================================================= DIFFERENCE */
.diffs{
  display:grid;gap:clamp(1.9rem,4.4vh,2.8rem);
  margin-top:clamp(1.6rem,3.6vh,2.4rem);max-width:none;margin-inline:0;
  counter-reset:d;
}
@media (min-width:52rem){ .diffs{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:clamp(2rem,3vw,3rem)} }
.diff{position:relative;padding-left:3.7rem;border-left:0}
/* Die Ziffern waren als Bildunterschriften gesetzt und der Goldverlauf
   darin war bei 13 px physisch unsichtbar. Jetzt tragen sie den Abschnitt. */
.diff::before{
  counter-increment:d;content:counter(d,decimal-leading-zero);
  position:absolute;left:0;top:-.06em;
  font-family:var(--f-disp);font-weight:600;letter-spacing:.06em;
  font-size:clamp(1.05rem,3.6vw,1.5rem);line-height:1;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.diff::after{
  content:"";position:absolute;left:2.35rem;top:.2rem;bottom:.2rem;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(216,169,75,.55),rgba(216,169,75,0));
}
.diff h3{font-size:clamp(1.18rem,4.9vw,1.45rem);letter-spacing:.012em;line-height:1.16}
/* nebeneinander gestellt muessen die drei Fliesstexte auf derselben Linie
   beginnen, auch wenn eine Ueberschrift zweizeilig laeuft */
@media (min-width:52rem){ .diff h3{min-height:2.32em} }
.diff p{margin-top:.68rem;color:var(--cream-2);font-size:1rem;line-height:1.6;max-width:32rem}

/* Der Schlusssatz des Kapitels - als Aussage gesetzt, nicht als Fliesstext.
   Er ist die Bruecke zum Produkt und muss deshalb haengen bleiben. */
.problem__close{
  margin-top:clamp(2.4rem,5.5vh,3.6rem);
  padding-top:clamp(1.7rem,3.8vh,2.5rem);
  border-top:1px solid var(--line);
  max-width:none;
}
.problem__close > p:first-child{
  margin:0;font-family:var(--f-disp);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.32rem,5.6vw,2.4rem);line-height:1.14;letter-spacing:.004em;
  color:var(--cream);max-width:46rem;
}
.problem__close b{
  font-weight:500;background:var(--metal);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Der Abschnitt endete bisher auf der staerksten Zeile und liess den Leser
   dann stehen. Diese Zeile plus der Knopf uebergeben ihn ans Produkt. */
.problem__bridge{
  margin-top:clamp(1.1rem,2.6vh,1.6rem);max-width:44rem;
  color:var(--cream-2);font-size:1.02rem;line-height:1.6;text-wrap:pretty;
}
.problem__go{margin-top:clamp(1.2rem,2.8vh,1.7rem)}
@media (max-width:52rem){ .problem__go{width:100%} }

/* ============================================================ URGENCY
   A running clock, not a calendar date: the same fact, but it reads as
   something running out instead of an announcement. */
.urgency{
  margin-top:1.1rem;padding:.75rem 1.1rem;border-radius:.85rem;
  background:rgba(216,169,75,.045);box-shadow:inset 0 0 0 1px rgba(216,169,75,.2);
  text-align:center;max-width:19rem;
}
.urgency__why{font-size:.76rem;line-height:1.45;color:var(--cream-2)}
.urgency__why b{color:var(--cream)}
.urgency__clock{
  display:flex;align-items:baseline;justify-content:center;gap:.15rem;margin-top:.5rem;
  font-family:var(--f-disp);font-variant-numeric:tabular-nums;
}
.urgency__clock b{font-size:1.3rem;font-weight:600;line-height:1;color:var(--gold)}
.urgency__clock span{margin-right:.45rem;font-size:.6rem;letter-spacing:.1em;color:var(--cream-3)}
.urgency__clock span:last-child{margin-right:0}
.urgency__at{margin-top:.3rem;font-family:var(--f-disp);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-3)}

/* ================================================================= FAQ */
.acc{border-top:1px solid var(--line);margin-top:3rem}
.acc__i{border-bottom:1px solid var(--line)}
.acc__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;cursor:pointer;list-style:none;
  font-family:var(--f-disp);font-size:1rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.3;transition:color 200ms;
}
.acc__i summary::-webkit-details-marker{display:none}
.acc__i summary::after{content:"+";flex:none;color:var(--gold);font-size:1.35rem;line-height:1;transition:transform 200ms var(--ease-out)}
.acc__i[open] summary{color:var(--gold)}
.acc__i[open] summary::after{transform:rotate(45deg)}
.acc__i summary:hover{color:var(--gold)}
.acc__i>div{padding:0 0 1.35rem;max-width:44rem}
.acc__i p{color:var(--cream-2);font-size:.95rem;line-height:1.68}

/* ============================================================== CLOSER */
.closer{position:relative;text-align:center;padding-block:var(--sec)}
.closer h2{font-size:clamp(2.2rem,8.8vw,4.2rem);line-height:.94;letter-spacing:-.03em}
.closer .lead{margin-inline:auto}
.closer__mark{width:3rem;height:3rem;object-fit:contain;opacity:.85;margin-inline:auto}

/* =============================================================== FOOTER */
.foot{position:relative;z-index:2;border-top:1px solid var(--line);padding-block:2.75rem}
.foot .wrap{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.25rem}
.foot__links a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:.78rem;color:var(--cream-3);transition:color 200ms}
.foot__links a:hover{color:var(--gold)}
.foot__copy{font-size:.75rem;color:var(--cream-3)}
@media (min-width:52rem){ .foot .wrap{flex-direction:row;justify-content:space-between;text-align:left} }

/* ============================================================ LIGHTBOX */
.lb{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.25rem;padding:clamp(3rem,8vh,4.5rem) 1rem clamp(1rem,4vh,2rem);
  background:rgba(0,0,0,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;transition:opacity 220ms var(--ease-out);
}
.lb[hidden]{display:none}
.lb.in{opacity:1}
.lb__fig{display:flex;flex-direction:column;align-items:center;gap:1rem;min-height:0;flex:1 1 auto;justify-content:center;width:100%}
.lb__img{max-width:min(100%,58rem);max-height:100%;width:auto;object-fit:contain;border-radius:.9rem;
  transform:scale(.97);transition:transform 260ms var(--ease-out);touch-action:pinch-zoom}
.lb.in .lb__img{transform:none}
.lb__cap{font-family:var(--f-disp);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-3)}
.lb__close,.lb__nav{position:absolute;z-index:2;width:2.75rem;height:2.75rem;border-radius:50%;
  color:var(--cream-2);border:1px solid var(--line);background:rgba(0,0,0,.55);line-height:1}
.lb__close{top:.75rem;right:.75rem;font-size:1.6rem}
.lb__nav{top:50%;translate:0 -50%;font-size:1.8rem}
.lb__nav--prev{left:.6rem}
.lb__nav--next{right:.6rem}
.lb__close:hover,.lb__nav:hover{color:var(--gold);border-color:var(--gold)}
@media (min-width:52rem){ .lb__nav--prev{left:1.5rem} .lb__nav--next{right:1.5rem} }

/* ------------------------------------------------------------- no-JS */
.no-js .hero{min-height:auto;padding-block:8rem 4rem}
.no-js .r{opacity:1;transform:none}

/* ===================================================================
   CHECKOUT — eine Flaeche
   ===================================================================
   Oben drei Felder, darunter die Zahlung. Kein Zwischenknopf, kein
   zweites Fenster: waehrend der Kunde tippt, laedt Dodos Zahlungsmaske
   per elementId in .cog__mount nach und meldet ihre Hoehe zurueck.

   Die Flaeche ist bewusst kein Formularkasten, sondern ein Stueck
   dieser Seite — gleiche Schriften, gleiches Gold, gleiche Kanten.
   Tokens dieser Datei (--bg-2, --line, --gold, --metal, --ease-out);
   NICHT die aus style.css, die index.html gar nicht laedt.
   =================================================================== */

.cog{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center;
  padding:1rem;
  background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  backdrop-filter:blur(10px) saturate(115%);
  opacity:0; transition:opacity .24s var(--ease-out);
}
.cog.in{opacity:1}
.cog[hidden]{display:none}

.cog__card{
  position:relative;
  width:min(27rem,100%);
  max-height:calc(100dvh - 2rem);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:clamp(1.7rem,1.3rem + 1.6vw,2.3rem);
  background:
    radial-gradient(125% 85% at 50% -12%,rgba(216,169,75,.14),transparent 62%),
    var(--bg-2);
  border:1px solid var(--line);
  border-radius:1.35rem;
  box-shadow:0 34px 90px rgba(0,0,0,.66);
  transform:translateY(14px) scale(.985);
  transition:transform .28s var(--ease-out);
}
.cog.in .cog__card{transform:none}

/* die feine Goldkante oben — dasselbe Motiv wie ueber den Preiskarten */
.cog__card::before{
  content:'';position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.7;
}

.cog__x{
  position:absolute;top:.5rem;right:.65rem;
  width:2.1rem;height:2.1rem;
  display:grid;place-items:center;
  font-size:1.45rem;line-height:1;
  color:var(--cream-3);background:none;border:0;cursor:pointer;
  border-radius:50%;transition:color .18s,background .18s;
}
.cog__x:hover{color:var(--cream);background:rgba(246,241,230,.07)}

.cog__eyebrow{
  margin:0 0 .5rem;
  font-family:var(--f-disp);font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;
  font-size:var(--t-kicker);color:var(--gold);
}
.cog__title{
  margin:0 0 .6rem;
  font-family:var(--f-disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.45rem,1.2rem + 1.1vw,1.85rem);
  line-height:1.06;letter-spacing:.01em;color:var(--cream);
}
.cog__price{
  display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
  margin:0 0 1.35rem;
  font-family:var(--f-disp);font-weight:600;font-size:1.7rem;
  background-image:var(--metal);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cog__once{
  font-family:var(--f-body);font-weight:400;font-size:.76rem;
  letter-spacing:.02em;color:var(--cream-3);
  background:none;-webkit-text-fill-color:currentColor;
}

/* ---------------------------------------------------------- Felder */

.cog__fields{display:grid;gap:.8rem}

.cog__f{display:grid;gap:.34rem}
.cog__f > span{
  font-size:.7rem;letter-spacing:.055em;text-transform:uppercase;
  color:var(--cream-3);
}
.cog__f input{
  width:100%;padding:.8rem .9rem;
  font-family:var(--f-body);font-size:1rem;color:var(--cream);
  background:rgba(246,241,230,.045);
  border:1px solid var(--line);
  border-radius:.85rem;
  transition:border-color .18s,background .18s,box-shadow .18s;
  -webkit-appearance:none;appearance:none;
}
.cog__f input::placeholder{color:rgba(246,241,230,.32)}
.cog__f input:focus{
  outline:none;border-color:var(--gold);
  background:rgba(246,241,230,.07);
  box-shadow:0 0 0 3px rgba(216,169,75,.17);
}
.cog__f--zip{max-width:11rem}

/* Der Satz zur E-Mail steht bewusst DIREKT unter dem Feld, nicht am Ende:
   dort wird er gelesen, wenn er noch etwas aendern kann. */
.cog__hint{
  margin:-.15rem 0 .1rem;
  font-size:.73rem;line-height:1.45;
  color:var(--cream-3);
}

/* --------------------------------------------------------- Zahlung */

.cog__pay{
  margin-top:1.15rem;padding-top:1.15rem;
  border-top:1px solid var(--line);
}

/* min-height kommt vom SDK (checkout.resize). Die Bewegung ist gebremst,
   damit die Flaeche waechst statt zu springen. */
.cog__mount{
  transition:min-height .3s var(--ease-out);
}
.cog__mount:empty{min-height:0}

.cog__status{
  margin:.15rem 0 0;font-size:.8rem;color:var(--cream-3);
}
.cog__status.is-err{color:#e2674f}

.cog__wait{
  margin:0;padding:1.1rem 1rem;
  text-align:center;font-size:.8rem;line-height:1.5;
  color:var(--cream-3);
  border:1px dashed var(--line);
  border-radius:.85rem;
}

.cog__trust{
  display:flex;align-items:center;justify-content:center;gap:.42rem;
  margin:1rem 0 0;font-size:.74rem;color:var(--cream-3);
}
.cog__trust svg{flex:none;opacity:.8}

/* Handy: die Flaeche sitzt unten wie ein Sheet und nimmt fast die volle
   Breite, bleibt aber eine Karte mit Rand und runden Ecken. Genau das
   unterscheidet "ein Bereich auf meiner Seite" von "ich wurde woanders
   hingeschickt". dvh, damit Safaris Leiste nichts abschneidet. */
@media (max-width:34rem){
  .cog{padding:.7rem;align-items:end}
  .cog__card{
    width:100%;
    max-height:calc(100dvh - 1.4rem);
    padding:1.5rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom,0px));
    border-radius:1.5rem;
  }
  .cog__f--zip{max-width:none}
  .cog__title{font-size:1.5rem}
}

@media (prefers-reduced-motion:reduce){
  .cog,.cog__card,.cog__mount{transition:none}
  .cog__card{transform:none}
}

/* Die eingeklappte Zeile: drei Felder werden zu einer, sobald die Zahlung
   geladen ist. Sie ist ein Knopf, weil sie die Felder wieder aufklappt —
   und sie zeigt E-Mail und PLZ, damit der Kunde sieht, worauf sein Zugang
   laeuft, bevor er zahlt. */
.cog__summary{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  width:100%;margin:.15rem 0 0;padding:.7rem .9rem;
  font-family:var(--f-body);font-size:.85rem;text-align:left;
  color:var(--cream-2);
  background:rgba(246,241,230,.045);
  border:1px solid var(--line);
  border-radius:.85rem;cursor:pointer;
  transition:border-color .18s,background .18s;
}
.cog__summary[hidden]{display:none}
.cog__summary:hover{background:rgba(246,241,230,.07);border-color:rgba(216,169,75,.42)}
.cog__sumtext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cog__sumedit{
  flex:none;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);
}
.cog__fields[hidden]{display:none}

/* Fehlerzeile unter einem Feld. Sie ist der Grund, warum die Flaeche nicht
   mehr stumm stehenbleiben kann: vorher fuehrte eine ungueltige Eingabe zu
   gar keiner Reaktion — keine Meldung, kein Knopf, nichts. */
.cog__fe{
  display:block;margin-top:.3rem;
  font-style:normal;font-size:.75rem;line-height:1.4;
  color:#e2674f;
}
.cog__fe[hidden]{display:none}
.cog__f input.is-bad{
  border-color:rgba(226,103,79,.65);
  background:rgba(226,103,79,.06);
}
.cog__f input.is-bad:focus{
  border-color:#e2674f;
  box-shadow:0 0 0 3px rgba(226,103,79,.16);
}


/* ===================================================================
   HERO — grosses Bild, wenig Text
   ===================================================================
   Handy zuerst. Vorher stand das Bild klein zwischen zwei Absaetzen
   eingeklemmt; jetzt laeuft es randlos ueber die volle Breite und
   verlaeuft nach unten in die Seite. Darunter: Ueberschrift, EIN Satz,
   Kaufknopf. Mehr steht oben nicht.
   =================================================================== */

/* Der Hero bekommt denselben Schwarzton wie die Bildraender. Dadurch
   verschwindet die Bildkante, auch wenn das Foto schmaler als die Seite
   ist — und unten laeuft der Grund in die Seitenfarbe aus. */
.hero3{
  position:relative;
  background:linear-gradient(180deg,#000 0%,#000 66%,var(--bg) 100%);
  padding-block:0 clamp(1rem,2.6vh,1.8rem);
}

/* Der Ausschnitt ist gerechnet, nicht geschaetzt. Das Foto steht bei 85 %
   Breite rechtsbuendig: dadurch liegt die Bildmitte des Handys bei rund
   41 % der Seitenbreite statt bei 31 % - das ist die Beschwerde "das Handy
   ist nicht mittig". Die linke Kante laeuft weich in den Grund, rechts
   blutet das Bild aus dem Rahmen, oben ist das Foto ohnehin schwarz.
   Hoehe 82 % der Breite: so steht das ganze Handy im Bild UND es bleibt
   Platz, bis der Knopf an der Browserleiste anstossen wuerde. */
.hero3__media{
  position:relative;width:100%;
  /* Hoehe an BEIDES gekoppelt: an die Breite, damit das Verhaeltnis stimmt,
     und an die Fensterhoehe, damit auf einem flachen Geraet nicht das halbe
     sichtbare Fenster vom Foto aufgefressen wird. Alles Weitere - Bildbreite
     und der Zug der Ueberschrift nach oben - ist aus dieser einen Zahl
     abgeleitet, deshalb sitzt der Abstand zwischen Handykante und Schrift
     auf jedem Geraet gleich. */
  height:min(77vw,42vh);
  overflow:hidden;
}
.hero3__media img{
  display:block;height:100%;
  /* 0,95 x Bildhoehe: so steht das ganze Handy im Ausschnitt UND es bleibt
     Schulter darunter stehen, auf der die Schrift liegen kann. */
  width:min(73.2vw,39.9vh);margin-left:auto;margin-right:0;
  object-fit:cover;object-position:50% 42%;
  /* unten laeuft das Bild in die Seite aus, links wird die eigene Bildkante
     weich. Rechts blutet es aus dem Rahmen, oben ist das Foto schwarz. */
  -webkit-mask-image:
    linear-gradient(180deg,#000 0,#000 84%,rgba(0,0,0,.55) 93%,transparent 100%),
    linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 5%,#000 13%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(180deg,#000 0,#000 84%,rgba(0,0,0,.55) 93%,transparent 100%),
    linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 5%,#000 13%);
  mask-composite:intersect;
}
/* Sicherheitsnetz fuer den Kontrast: egal wie der Ausschnitt auf einem
   fremden Geraet faellt, unter der Ueberschrift ist das Bild dunkel. */
.hero3__media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 52%,rgba(0,0,0,.82) 100%);
}
/* Goldschimmer hinter dem Bild - dasselbe Motiv wie ueber den Preiskarten */
.hero3__media::before{
  content:"";position:absolute;inset:0 0 34% 0;
  background:radial-gradient(58% 46% at 52% 34%,rgba(216,169,75,.13),transparent 72%);
  z-index:-1;pointer-events:none;
}

/* Der Zug nach oben ist gerechnet: 8.27 vw setzt den Auftakt genau 14 px
   unter die Unterkante des Handys. Vorher kuesste die Ueberschrift die
   Gehaeusekante - das schlimmste aller Abstaende. */
.hero3__over{
  position:relative;z-index:1;
  /* dieselben Terme wie die Bildhoehe, deshalb bleibt der Abstand zwischen
     Handy-Unterkante und Ueberschrift auf jedem Geraet konstant */
  margin-top:calc(.875rem - min(11.32vw,6.07vh));
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:clamp(1.1rem,4.6vw,2.5rem);
  text-align:left;
}
.hero3__h1{
  margin-top:.55rem;
  font-size:clamp(2.1rem,min(15vw,7.6vh),5.6rem);
  line-height:.96;letter-spacing:-.024em;
}
.hero3__h1 .metal{display:inline-block}
/* Der Auftaktstrich war ein 22-px-Stummel - hier traegt er eine Zeile. */
.hero3 .kicker::before,.problem .kicker::before{width:2.7rem}

.hero3__below{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:clamp(1.1rem,4.6vw,2.5rem);
  margin-top:clamp(.6rem,1.4vh,1rem);
  text-align:left;
}
.hero3__below .lead{max-width:31rem;margin-inline:0;margin-top:0;font-size:1.06rem;line-height:1.5;text-wrap:balance}
.hero3__below .cta-row{margin-top:clamp(.65rem,1.6vh,1.1rem);justify-content:flex-start}
/* Auf dem Desktop brach der Satz nach "A coach" um - Artikel und Nomen
   getrennt. Der harte Umbruch steht nur dort; auf dem Telefon faellt er weg. */
@media (max-width:52rem){ .lead-break{display:none} }
/* Die Zeile, die das Abo-Bedenken erschlaegt, war das schwaechste Element
   der Seite. Jetzt traegt die zweite Haelfte die volle Textfarbe. */
.hero3__below .fineprint{margin-top:.4rem;font-size:.97rem;letter-spacing:.02em;color:var(--cream-3)}
.hero3__below .fineprint b{color:var(--cream);font-weight:500}

/* Auf dem Telefon ist der Knopf die einzige Handlung - also volle Breite. */
@media (max-width:52rem){
  .hero3__below .btn{width:100%}
  /* Die Preiszeile steht mittig unter dem Knopf, der hier volle Breite hat. */
  .hero3__below .fineprint{text-align:center}
}

/* ---- Ab hier wird die Hoehe knapp. Der Kicker ist das erste, was geht:
   der Platz gehoert der Preiszeile, die ueber der Browserleiste bleiben
   muss. 830 px deckt iPhone 12 mini / X / 11 Pro und die 800er Androiden. */
@media (max-width:52rem) and (max-height:780px){
  .hero3 .kicker{display:none}
  .hero3__h1{margin-top:0}
}

/* ---- flache Telefone (iPhone SE, aeltere Androiden): flacherer Ausschnitt,
   kleinere Schrift, engere Abstaende, flacherer Knopf. 790 px deckt auch die
   breiten kurzen Geraete wie das iPhone 8 Plus (414x736) ab. */
@media (max-width:52rem) and (max-height:790px){
  .hero3__media{height:min(82vw,44vh)}
  .hero3__media img{width:min(77.9vw,41.8vh)}
  .hero3__over{margin-top:calc(.875rem - min(11.32vw,5.66vh))}
  .hero3__h1{font-size:clamp(1.8rem,min(12.6vw,5.3vh),2.9rem)}
  .hero3__below{margin-top:.75rem}
  .hero3__below .lead{font-size:1rem;line-height:1.5}
  .hero3__below .cta-row{margin-top:.7rem}
  .hero3__below .btn--lg{min-height:3.35rem;font-size:.84rem;padding-inline:1.2rem}
  .hero3__below .fineprint{margin-top:.45rem;font-size:.86rem}
}

/* ---- Tablet im Hochformat und aufgeklappte Falter: hier ist die Seite
   breit, aber das Layout noch das des Telefons. Wuerde das Foto weiter
   82 % der BREITE hoch sein, waere es allein 630 px hoch und der Knopf
   laege weit unter der Falz. Also: Hoehe an die Fensterhoehe koppeln und
   das Foto schmaler stellen, damit das Handy trotzdem ganz im Bild ist. */
@media (min-width:34rem) and (max-width:52rem){
  .hero3__media{height:min(78vw,54vh)}
  .hero3__media img{width:min(70vw,48.5vh);margin-left:auto}
  .hero3__h1{font-size:clamp(2.6rem,8.4vw,4.6rem)}
  .hero3__over,.hero3__below{max-width:40rem;margin-inline:0;padding-inline:clamp(1.6rem,5vw,2.5rem)}
  .hero3__below .btn{width:auto;min-width:20rem}
}

/* ---- sehr kleine alte Telefone (320 px). Selten, aber dort faellt sonst
   der Knopf unter die Leiste. */
@media (max-width:21.5rem){
  .hero3__media{height:min(82vw,37vh)}
  .hero3__media img{width:min(77.9vw,35.15vh)}
  .hero3__over{margin-top:calc(.875rem - min(11.32vw,5.11vh))}
  .hero3__h1{font-size:min(11vw,5.2vh)}
  .hero3__below .lead{font-size:.94rem;line-height:1.48}
  .hero3__below .fineprint{font-size:.82rem}
}

/* ------------------------------------------------- ab Tablet/Desktop */
@media (min-width:52rem){
  .hero3{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    row-gap:0;column-gap:clamp(2rem,4.5vw,3.5rem);
    /* Linksbuendig auf DASSELBE Raster wie .wrap - vorher sprang die Seite
       beim Scrollen um 40 px nach rechts, weil der Hero 70rem, der Rest
       aber 70rem PLUS Innenabstand benutzte. */
    max-width:none;margin-inline:0;
    padding:clamp(4rem,9vh,6.5rem) 0 clamp(3.5rem,8vh,5.5rem)
            calc(max(0px, (100% - var(--wrap)) / 2) + clamp(1.25rem,5vw,2.5rem));
    background:none;
  }
  /* Das Foto laeuft aus der Spalte heraus bis an die Fensterkante. */
  .hero3__media{
    grid-column:2;grid-row:1/3;align-self:center;
    aspect-ratio:auto;height:min(78vh,44rem);overflow:hidden;
  }
  .hero3__media img{
    width:100%;margin-left:0;margin-right:0;height:100%;object-fit:cover;object-position:44% 46%;
    /* nur links, oben und unten weich - rechts gibt es keine Kante mehr */
    -webkit-mask-image:
      linear-gradient(180deg,transparent 0,#000 8%,#000 82%,transparent 100%),
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 6%,#000 19%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(180deg,transparent 0,#000 8%,#000 82%,transparent 100%),
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 6%,#000 19%);
    mask-composite:intersect;
  }
  .hero3__media::after{display:none}
  /* Das Foto ist dunkler als der Seitengrund - deshalb las es sich als
     dunkle Platte im hellen Feld. Diese weiche schwarze Pfuetze liegt
     hinter dem Bild und nimmt den Unterschied weg. */
  .hero3::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(64% 82% at 80% 50%,#000 0,#000 44%,transparent 80%);
  }
  .hero3__over{
    grid-column:1;grid-row:1;justify-self:start;
    margin:0;padding:0;max-width:36rem;
    align-self:end;
  }
  .hero3__h1{margin-top:.85rem;font-size:clamp(4.4rem,6.6vw,6rem)}
  .hero3__below{
    grid-column:1;grid-row:2;align-self:start;justify-self:start;
    margin:1.6rem 0 0;padding:0;max-width:32rem;
  }
  .hero3__below .lead{font-size:var(--t-lead)}
  .hero3__below .fineprint{font-size:1rem}
}

/* Im Hero traegt die Kopfleiste nur die Wortmarke - ohne Platte, ohne
   Navigation, ohne zweiten Knopf. Sie kostet keine Bauhoehe, weil sie
   fixed liegt, und beantwortet die Frage "auf wessen Seite bin ich hier".
   Sobald der Besucher die Problem-Sektion erreicht, blendet die volle
   Leiste wie bisher ein. */
#topbar{transition:transform 380ms var(--ease-out),background-color 380ms ease,border-color 380ms ease}
#topbar[data-state="hidden"]{
  transform:none;background-color:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;
  background-image:none;
  /* nicht fixed, sondern im Dokument: im Hero traegt die Leiste nur die
     Wortmarke und scrollt mit dem Bild weg. Vorher stand sie fest und
     brauchte einen Verlauf gegen die Kollision - und dieser Verlauf war
     die schwarze Linie quer durch das Hero-Foto. */
  position:absolute;
  /* Im Hero war die Wortmarke das einzige Element neben der Satzkante -
     156 px daneben auf 1440. Jetzt steht sie auf derselben Linie wie H1,
     Fliesstext und Knopf. Nur im Hero-Zustand; die eingeblendete Leiste
     behaelt ihre volle Breite. */
  padding-inline:calc(max(0px, (100% - var(--wrap)) / 2) + clamp(1.25rem,5vw,2.5rem));
}
/* das Logo bringt rund 4,5 px durchsichtigen Rand mit - der wird genullt,
   damit die Tinte und nicht die Bilddatei auf der Kante steht */
#topbar[data-state="hidden"] .topbar__brand img{margin-left:-.28rem}
#topbar[data-state="hidden"] .topbar__nav,
#topbar[data-state="hidden"] .topbar__line,
#topbar[data-state="hidden"] .topbar__claim,
#topbar[data-state="hidden"] > .btn{opacity:0;visibility:hidden}
#topbar[data-state="hidden"] .topbar__brand{pointer-events:auto}
@media (min-width:30rem){ #topbar[data-state="hidden"] .topbar__name{display:block} }

/* ---------------------------------------------------- Kleinteile */

.tier__tag{
  display:inline-block;vertical-align:middle;
  margin-left:.55rem;padding:.22rem .55rem;
  font-family:var(--f-body);font-weight:500;
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);
  border:1px solid rgba(216,169,75,.42);border-radius:999px;white-space:nowrap;
}

/* Firma, Adresse, Antwortzeit — steht anstelle einer Garantie.
   Nachpruefbarkeit wirkt auf einen skeptischen Leser staerker als ein
   Versprechen, das er nicht pruefen kann. */
.standby{
  margin-top:clamp(2.5rem,5vh,3.5rem);
  padding-top:clamp(1.6rem,3vh,2.2rem);
  border-top:1px solid var(--line);
}
.standby p{margin:0}
.standby p + p{margin-top:.4rem}
.standby a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(216,169,75,.35)}

/* Die Preiserhoehung als ruhige Zeile statt als Kasten mit laufender Uhr.
   Die Tatsache wirkt; der Sekundenzaehler wirkte wie Marktgeschrei und
   passte nicht zur Tonlage der Marke. */
.pricenote{
  margin-top:.9rem;text-align:center;
  font-size:.76rem;letter-spacing:.04em;
  color:var(--cream-3);
}
.pricenote [data-p30]{color:var(--gold)}


/* ===================================================== v201 conversion
   Drei Zutaten, die vorher fehlten: ein Kaufweg ab dem ersten Bildschirm,
   der Nachtmodus als eigene Aussage, und ein fester Kaufbalken auf dem
   Telefon, damit die Kaufentscheidung nicht auf Bildschirm neun wartet. */

/* der zweite, leise Weg unter dem Kaufknopf im Hero */
.herolink{margin-top:.45rem;font-size:.88rem;letter-spacing:.01em}
.herolink a{color:var(--cream-3);border-bottom:1px solid rgba(246,241,230,.22);padding-bottom:1px}
.herolink a:hover{color:var(--gold);border-bottom-color:rgba(216,169,75,.5)}
@media (max-width:52rem){ .herolink{text-align:center} }
@media (min-width:52rem){ .herolink{font-size:.95rem} }

/* Beats stehen wieder untereinander statt in einem Karussell ohne Punkte -
   zwei von drei Produktfunktionen waren so unsichtbar. */
.beats{display:grid;gap:clamp(3rem,8vh,5.5rem)}

/* Nachtmodus: bewusst ohne Bild, damit er als Aussage liest */
.nightmode{
  margin-top:clamp(3rem,8vh,5rem);
  padding-top:clamp(1.8rem,4vh,2.6rem);
  border-top:1px solid var(--line);
  max-width:44rem;
}
.nightmode h3{
  margin-top:.9rem;font-size:clamp(1.5rem,2.4vw,2.1rem);
  line-height:1.06;letter-spacing:-.015em;
}
.nightmode > p:last-child{margin-top:1rem;color:var(--cream-2);line-height:1.6}

/* fester Kaufbalken - nur auf dem Telefon, nur zwischen Hero und Preisen */
#buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  padding:.7rem clamp(1.1rem,4.6vw,2.5rem) calc(.7rem + env(safe-area-inset-bottom,0px));
  background:rgba(7,7,8,.93);
  -webkit-backdrop-filter:saturate(150%) blur(16px);backdrop-filter:saturate(150%) blur(16px);
  border-top:1px solid rgba(216,169,75,.22);
  transform:translateY(115%);transition:transform 320ms var(--ease-out);
  pointer-events:none;
}
#buybar[data-state="shown"]{transform:none;pointer-events:auto}
#buybar .btn{min-height:3.4rem;font-size:.84rem}
#buybar p{margin-top:.4rem;text-align:center;font-size:.75rem;letter-spacing:.04em;color:var(--cream-3)}
@media (min-width:52rem){ #buybar{display:none} }
@media (prefers-reduced-motion:reduce){ #buybar{transition:none} }


/* ================================================= v201 conversion, Teil 2 */

/* Sein eigener Donnerstag, bevor der Mechanismus kommt. */
.problem__mirror{margin-top:1.4rem;max-width:34rem;color:var(--cream-3)}

/* Vier schmale Spalten liessen 21 Zeichen pro Zeile - zwei sind lesbar. */
@media (min-width:52rem){
  #difference .diffs{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(2.5rem,5vw,4.5rem);row-gap:clamp(2.4rem,5vh,3.4rem);
  }
}

/* Nachtmodus stand als angeschnittene linke Spalte neben drei Bildbloecken. */
.nightmode{margin-inline:auto}
@media (min-width:60rem){ .nightmode{text-align:center} }
@media (min-width:60rem){ .nightmode .kicker{justify-content:center} }
@media (min-width:60rem){ .nightmode .kicker--start::after{display:block} }

/* Angebot am Ende der laengsten Strecke der Seite */
.insidebuy{margin-top:clamp(2.5rem,6vh,4rem)}
.insidebuy .fineprint{margin-top:.9rem}
@media (max-width:52rem){ .insidebuy .btn{width:100%} }

/* Stimmen stehen untereinander statt fuenf von sechs im Karussell */
.msgs{display:grid;gap:1.1rem;max-width:38rem;margin-inline:auto}

/* Die Preiskarten waren die einzigen Bloecke ohne Behaeltnis - auf dem Telefon
   liefen sie zu einer einzigen langen Liste zusammen. */
.tiers{align-items:stretch}
.tier{
  padding:clamp(1.75rem,3vw,2.5rem);
  border:1px solid var(--line);border-radius:1.5rem;
  background:rgba(246,241,230,.022);
}
.tier--pro{
  order:-1;
  border-color:rgba(216,169,75,.30);
  background:linear-gradient(180deg,rgba(216,169,75,.055),rgba(246,241,230,.012) 55%);
}
.tier .tier__name{margin-top:0}
.tier .btn{margin-top:auto}
.tier__list{margin-bottom:1.6rem}


/* ================================================= v201 conversion, Teil 3 */

/* Der Wiedererkennungs-Absatz war der einzige Fliesstext der Seite auf
   halber Deckkraft. */
.problem__mirror{color:var(--cream-2)}

/* Einwortige Schlusszeilen in den Argument-Ueberschriften */
.diff h3{text-wrap:balance}

/* Stimmen: auf dem Desktop zwei Spalten statt sechs Karten hintereinander */
@media (min-width:52rem){
  .msgs{
    grid-template-columns:1fr 1fr;max-width:none;
    column-gap:clamp(1.25rem,2vw,1.75rem);align-items:start;
  }
}

/* Die Reihenfolge-Umkehr gilt nur, solange die Karten uebereinander stehen.
   Nebeneinander wuerde sie den kleineren Tarif an die Stelle setzen, auf
   der das Auge stehen bleibt. */
@media (min-width:62rem){ .tier--pro{order:0} }

/* Die Frist steht jetzt unter beiden Karten, nicht in einer davon */
.pricenote{margin-top:clamp(1.6rem,3.5vh,2.4rem)}


/* Auf dem Tablet lief der Abschnittskopf der Hero-Zeile davon - dort hat
   die Seite das Telefon-Layout, aber Desktop-Breite. */
@media (min-width:34rem) and (max-width:52rem){
  /* :not() ist noetig - die Hero-Zeile traegt beide Klassen, und eine
     spaetere .display-Regel wuerde ihre eigene Groesse ueberschreiben */
  .display:not(.hero3__h1){font-size:clamp(1.85rem,6.6vw,3.4rem)}
}


/* ================================================= v201 conversion, Teil 4 */

/* Drei der groessten Ueberschriften nach der H1 liessen ihr letztes Wort
   allein stehen - .display und .hero h1 hatten die Regel, diese nicht. */
.beat__copy h3,.nightmode h3{text-wrap:balance}

/* Beide Kaufknoepfe auf eine Linie: die Notiz darunter ist einmal ein-,
   einmal zweizeilig, und margin-top:auto kann das nicht ausgleichen. */
.tier__secure{min-height:2.6rem;align-items:flex-start}

/* Stimmen in einer Reihe teilen sich eine Unterkante */
@media (min-width:52rem){ .msgs{align-items:stretch} }
.msgs .msg{height:100%}

/* Die zweite Seiten-Tatsache unter den Karten */
.pricenote--after{margin-top:.55rem;color:var(--cream-3)}

/* Die Fusszeilen-Links brachen unsymmetrisch um, "Company" blieb allein */
@media (max-width:52rem){ .foot__links{max-width:20rem;margin-inline:auto} }


/* ================================================= v203 */

/* Die Garantie ist das staerkste Argument der Seite. Eine Zeile, mittig,
   direkt unter beiden Karten - nicht als Kasten, nicht als Siegel. */
.guarantee{
  margin-top:clamp(1.6rem,3.5vh,2.4rem);text-align:center;
  font-size:1rem;line-height:1.6;color:var(--cream-2);
  max-width:34rem;margin-inline:auto;
}
.guarantee b{color:var(--cream);font-weight:600}
.pricenote--after{margin-top:.7rem}

/* Kundennachrichten sollen wie Nachrichten aussehen, nicht wie Zitate in
   einem Kasten: Sprechblasen-Form mit einer eckigen Ecke unten links,
   Absender darueber, aufrechte Schrift. Keine erfundene App-Oberflaeche
   und keine erfundenen Zeitstempel - nur die Form. */
.msg{
  max-width:none;margin-inline:0;
  padding:1.15rem 1.35rem 1.3rem;
  border-radius:1.25rem 1.25rem 1.25rem .3rem;
  background:rgba(246,241,230,.055);
  box-shadow:inset 0 0 0 1px rgba(246,241,230,.09);
  min-height:0;
}
@media (min-width:36rem){ .msg{padding:1.35rem 1.6rem 1.5rem} }
.msg__head{gap:.65rem;margin-bottom:.75rem}
.msg__avatar{width:1.9rem;height:1.9rem;font-size:.74rem}
.msg__name{font-size:.72rem;letter-spacing:.13em;color:var(--cream-2)}
.msg p{font-style:normal;font-size:.97rem;line-height:1.6;color:var(--cream-2)}
.msg-item{display:flex}
.msg-item .msg{width:100%}


/* Sagt vor dem Tippen, was danach kommt - und dass es ein Tipp ist. */
.cog__next{
  margin:0 0 1.1rem;font-size:.86rem;line-height:1.5;color:var(--cream-3);
  text-align:center;
}
/* Das Formular soll sich nicht anders verhalten als der fruehere Kasten. */
form.cog__fields{display:block;margin:0;padding:0;border:0}


/* ================================================= v214: Hero mittig
   Auf dem Telefon steht jetzt alles unter dem Foto mittig - Auftakt,
   Ueberschrift, Fliesstext, Knopf und die Zeile darunter. Vorher lief die
   Achse links, was neben dem rechtsbuendigen Foto unruhig wirkte. */
@media (max-width:52rem){
  .hero3__over,.hero3__below{text-align:center}
  .hero3__over .kicker{justify-content:center}
  .hero3__over .kicker--start::after{display:block}
  .hero3__below .lead{margin-inline:auto}
  .hero3__below .cta-row{justify-content:center}
}


/* ================================================= v215: die sieben Tage
   Eine Liste, kein Kasten. Sieben Zeilen, Tag in Gold, Thema in Versalien -
   der Leser soll die Themen in fuenf Sekunden ueberfliegen koennen. */
.daylist{
  margin-top:clamp(2rem,5vh,3rem);
  max-width:42rem;margin-inline:auto;
}
.daylist li{
  display:flex;align-items:baseline;gap:clamp(.9rem,3vw,1.4rem);
  padding:clamp(.85rem,2vh,1.1rem) 0;
  border-bottom:1px solid var(--line);
}
.daylist li:first-child{border-top:1px solid var(--line)}
.daylist span{
  flex:none;width:3.4rem;
  font-family:var(--f-disp);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.daylist b{
  font-family:var(--f-disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1rem,4.4vw,1.3rem);letter-spacing:.02em;line-height:1.18;
  color:var(--cream);
}


/* Zwischenband 780-830 px Hoehe (iPhone 12/13 mini, X, 11 Pro): der Auftakt
   bleibt sichtbar, dafuer ruecken Schrift und Abstaende etwas zusammen -
   sonst stoesst die Preiszeile an die Browserleiste. */
@media (max-width:52rem) and (max-height:830px){
  .hero3__h1{font-size:min(13.2vw,6.4vh)}
  .hero3__below{margin-top:.55rem}
  .hero3__below .cta-row{margin-top:.6rem}
}

/* ============================================== Preisnachlass 49 -> 39
   Zwei Bausteine, ueberall dieselben: der alte Preis durchgestrichen und
   ein goldenes Schild mit dem Prozentwert. Der neue Preis steht daneben
   im Knopf bzw. darunter in der Karte - er wird hier nicht wiederholt,
   sonst liest man dieselbe Zahl zweimal in einer Zeile.
   Der Streichpreis ist echt: $49 war der Preis bis zum 26.8.2026.       */
/* Bewusst KEIN flex mit fester Ausrichtung: als Block erbt die Zeile das
   text-align des Elternteils - im Hero links, in der Preiskarte und im
   Abbinder mittig. Ein zentriertes Flex haette unter dem linksbuendigen
   Desktop-Knopf gestanden.                                              */
.pricecut,.tier__cut{display:block;line-height:1}
.pricecut{margin-top:.9rem}
.tier__cut{margin-top:.75rem}
.pricecut s,.tier__cut s{
  display:inline-block;vertical-align:middle;margin-right:.55rem;
  font-family:var(--f-disp);font-weight:400;
  font-size:1.05rem;letter-spacing:.02em;
  color:var(--cream-3);
  text-decoration:none;position:relative;
}
/* ein selbst gezogener Strich statt line-through: der laeuft mittig und
   duenn durch die Ziffern, statt sie wie im Browser-Standard zu zerteilen */
.pricecut s::after,.tier__cut s::after{
  content:"";position:absolute;left:-.06em;right:-.06em;top:52%;
  height:1px;background:rgba(245,239,227,.55);transform:rotate(-6deg);
}
.savetag{
  display:inline-block;vertical-align:middle;
  font-family:var(--f-disp);font-weight:600;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#100c04;
  background:linear-gradient(102deg,var(--gold-hi) 0%,var(--gold) 55%,var(--gold-lo) 100%);
  border-radius:999px;padding:.3rem .62rem .26rem;
  white-space:nowrap;line-height:1;
  box-shadow:0 6px 18px -10px rgba(216,169,75,.9);
}
/* in der Preiskarte sitzt der Nachlass direkt ueber der grossen Zahl */
.tier--pro .tier__cut+.tier__price{margin-top:.45rem}

@media (max-width:52rem) and (max-height:830px){
  .pricecut{margin-top:.5rem}
}

/* ============================ sehr niedrige Telefone (iPhone SE, 667px)
   Gemessen, nicht geschaetzt: auf 375x667 sind beim ERSTEN Anzeigen in
   iOS Safari nur rund 477px sichtbar (Hoehe minus 190 fuer die Leisten).
   In v215 endete der Kaufknopf bei 493 - er lag also unter der Falz, und
   die neue Rabattzeile waere bei 528 noch weiter darunter gelandet.
   Deshalb hier ein gestraffter Hero: kleineres Bild, engere Abstaende.
   Groessere Geraete fasst diese Regel nicht an.                          */
@media (max-width:52rem) and (max-height:700px){
  .hero3__media{height:min(82vw,42vh)}
  .hero3__media img{width:min(77.9vw,39.9vh)}
  .hero3__h1{font-size:min(11vw,4.8vh)}
  .hero3__below{margin-top:.35rem}
  .hero3__below .cta-row{margin-top:.5rem}
  .hero3__below .lead{font-size:.9rem;line-height:1.42}
  .pricecut{margin-top:.45rem}
  .hero3__fine{margin-top:.45rem}
}

/* iPhone 12/13 (390x844) hatte nach dem Einbau nur noch 9px Reserve unter
   der Rabattzeile. Diese Regel fasst NUR die beiden Abstaende darunter an
   und laesst das gemessene 780-830-Band unberuehrt.                      */
@media (max-width:52rem) and (min-height:831px) and (max-height:880px){
  .pricecut{margin-top:.5rem}
  .hero3__fine{margin-top:.5rem}
}

/* ==================================================== Scroll-Hinweis v217
   Gemessen an echten Geraeten: der Hero endete bisher bei rund 75-80 % der
   Bildschirmhoehe, danach stand ein toter Streifen von 74-101 px und DANN
   begann die naechste Sektion - beides gleichzeitig im Bild. Das liest sich
   wie ein Layoutfehler und gibt keinen Impuls zu scrollen; Besucher tippen
   stattdessen herum.

   Zwei Aenderungen loesen das:
   1. Der Hero fuellt auf dem Telefon die ERSTE Bildschirmhoehe ganz (svh -
      also der Zustand mit ausgefahrenen Browserleisten). Die Sektionsgrenze
      liegt damit immer unter der Falz, nie halb darin.
   2. Am Fuss steht ein echtes Zeichen: Text plus eine Linie, an der ein
      goldener Punkt nach unten laeuft. Das ist der Impuls, der fehlte.     */

.scrollcue{
  display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;
  text-decoration:none;color:var(--cream-3);
  font-size:.86rem;letter-spacing:.01em;line-height:1.3;
  transition:color 260ms ease;
}
.scrollcue__txt{border-bottom:1px solid rgba(246,241,230,.22);padding-bottom:2px;transition:border-color 260ms ease}
.scrollcue:hover,.scrollcue:focus-visible{color:var(--gold)}
.scrollcue:hover .scrollcue__txt{border-bottom-color:rgba(216,169,75,.5)}
.scrollcue__rail{
  position:relative;display:block;width:1px;height:2.3rem;
  background:linear-gradient(180deg,rgba(216,169,75,.5) 0%,rgba(216,169,75,.06) 100%);
}
.scrollcue__rail i{
  position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--gold);
  box-shadow:0 0 9px 2px rgba(216,169,75,.5);
  animation:cuedrop 2.2s cubic-bezier(.5,0,.4,1) infinite;
}
@keyframes cuedrop{
  0%{transform:translateY(0);opacity:0}
  16%{opacity:1}
  70%{opacity:1}
  100%{transform:translateY(2.3rem);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .scrollcue__rail i{animation:none;top:auto;bottom:0;opacity:1}
}

/* ---- Telefon: Hero fuellt die erste Bildschirmhoehe, Hinweis an den Fuss */
@media (max-width:52rem){
  .hero3{
    /* dvh, nicht svh: der Hero soll immer genau den Bereich fuellen, den
       man GERADE sieht. Mit svh endete er im Zustand mit schwebender
       Leiste zu frueh - und die naechste Sektion ragte ins Bild.
       lvh statt dvh: die VOLLE Bildschirmhoehe. Damit liegt die naechste
       Sektion auch dann unter der Kante, wenn die Leiste nur schwebt. */
    min-height:100lvh;
    display:flex;flex-direction:column;
    /* Der untere Abstand haelt den Hinweis frei von der schwebenden
       Safari-Leiste (iOS 26), die den Inhalt ueberlagert statt ihn zu
       verkuerzen - und von der Home-Anzeige darunter. */
    padding-bottom:calc(clamp(3rem,6vh,4rem) + env(safe-area-inset-bottom,0px));
  }
  .hero3__below{flex:none}
  .scrollcue{margin-top:auto;padding-top:clamp(1rem,2.6vh,1.6rem);align-self:center}
}

/* ---- Desktop: der Hinweis bekommt eine eigene Rasterzeile unter dem Text */
@media (min-width:52rem){
  .hero3{grid-template-rows:auto auto auto}
  .hero3__media{grid-row:1/4}
  .scrollcue{grid-column:1;grid-row:3;justify-self:start;align-self:start;margin-top:1.5rem;font-size:.92rem}
}

/* Der Hero bringt auf dem Telefon jetzt selbst rund 110 px Luft unter dem
   Scroll-Hinweis mit. Wuerde .problem seinen vollen Kopfabstand behalten,
   staenden zwischen Hinweis und "Why it breaks" ueber 170 px Leere - beim
   Scrollen ein toter Block. Also hier enger; der Abstand entsteht aus dem
   Hero-Fuss, nicht doppelt.                                              */
@media (max-width:52rem){
  .problem{padding-block:clamp(1.4rem,3.2vh,2.4rem) 0}
}

/* ---- Bildgroesse im Telefon-Hero, v217
   Bisher entschied bei den meisten Geraeten die vh-Grenze ueber die Bildhoehe.
   Das hatte zwei Folgen: das Bild war in Safaris zwei Zustaenden
   unterschiedlich gross, und im Zustand mit ausgefahrenen Leisten blieb unter
   dem Text ein 170 px hohes Loch, in dem der Scroll-Hinweis frei schwebte.
   Die vh-Grenze liegt jetzt so hoch, dass in aller Regel die BREITE
   entscheidet - gleiche Bildgroesse in beiden Zustaenden, Loch weg.
   Diese Regeln stehen bewusst am Ende: sie ueberschreiben die aelteren
   Hoehen-Staffelungen, die fuer den mitwachsenden Hero gebaut waren.     */
/* (Bildgroesse bleibt bei der gemessenen Hoehenstaffelung weiter oben.
   Ein genereller Override hat sie aufgehoben und den Hero ueberlaufen
   lassen - die Staffelung ist noetig, weil flache Layouts ein flacheres
   Bild brauchen.) */

/* Ganz flache Layouts (iPhone SE mit ausgefahrenen Leisten, rund 477 px
   Layouthoehe): hier darf das Bild NICHT mitwachsen, sonst schiebt es den
   Scroll-Hinweis unter die Kante. Steht am Ende, weil es die 700er-Staffel
   ueberschreiben muss.                                                    */
/* (alte 560er-Regel entfernt - sie ueberschnitt sich mit der 540er-
   Untergrenze im v218-Regelsatz und haette ein Band von 541-560 px
   erzeugt, in dem wieder etwas anderes gilt.) */

/* Letzter Ausreisser im Sektionsrhythmus: .trust hatte unten 6vh, alle
   anderen Sektionen 8.5vh. Damit war der Uebergang zu den Preisen 20 px
   enger als jeder andere. Gleicher Wert wie .sec - jetzt ist der Abstand
   zwischen zwei Sektionen ueberall derselbe.                             */
.trust{padding-bottom:clamp(4.2rem,8.5vh,6.5rem)}

/* ================================================ TELEFON-HERO, v218
   Der Grund, warum die Seite auf dem Telefon anders aussah als in jeder
   Vorschau: bis hierher gab es SECHS Hoehenbaender (max-height 560, 700,
   780, 790, 830, 831-880), die Schriftgroesse, Bildgroesse, Abstaende und
   sogar die Sichtbarkeit der Kicker-Zeile umgeschaltet haben. Diese Baender
   pruefen die Layout-Hoehe - und die springt auf demselben iPhone um rund
   190 px, sobald Safari seine Leisten ein- oder ausfaehrt. Ein Geraet, zwei
   voellig verschiedene Layouts.

   Ab hier gilt fuer Telefone genau EIN Regelsatz, und er kennt keine
   Hoehen-Bedingung mehr:
     - Alle Groessen haengen an vw (Breite, aendert sich nie) und lvh
       (die KLEINE Viewport-Hoehe - pro Geraet eine feste Zahl, unabhaengig
       davon, ob die Leisten gerade stehen oder nicht).
     - Der Hero selbst misst 100dvh, also immer genau den Bereich, den man
       gerade sieht. Damit beginnt die naechste Sektion in JEDEM Zustand
       unter der Kante, statt halb ins Bild zu ragen.
   Ergebnis: dieselben Proportionen auf einem Geraet, egal was Safari mit
   seinen Leisten macht - und dasselbe Bild wie in der Vorschau.
   Die Grenze liegt bei 33.9rem, damit der Tablet-Regelsatz (ab 34rem)
   unberuehrt bleibt.                                                      */
@media (max-width:33.9rem){
  .hero3{
    /* Der Hero fuellt die volle Bildschirmhoehe - aber der Inhalt sitzt
       OBEN, nicht verteilt. Der Grund ist die Browserleiste: sie verdeckt
       auf dem Telefon die unteren rund 110 px. Was dort liegt, sieht der
       Besucher zerhackt - vorher waren das "Why it breaks" und die halbe
       Ueberschrift darunter. Jetzt liegt dort nur noch schwarzer Grund.
       In einer Vorschau ohne Leiste liest sich das als ruhiger Rand, auf
       dem Telefon deckt die Leiste ihn genau ab. Deshalb sehen Vorschau
       und Geraet zum ersten Mal dasselbe. */
    min-height:100lvh;
    display:flex;flex-direction:column;
    padding-bottom:calc(clamp(1.6rem,3.2lvh,2.4rem) + env(safe-area-inset-bottom,0px));
  }

  /* Die Kicker-Zeile war unter 780 px Layouthoehe ausgeblendet - also auf
     jedem iPhone, sobald Safari seine Leisten zeigte. Sie gehoert zum Bild. */
  .hero3 .kicker{display:flex}

  /* Werte aus dem Referenzbild des Kunden zurueckgerechnet:
     Wort "DISCIPLINE" = 57 % der Seitenbreite, Bild = 30,4 % der Hoehe.
     Vorher war die Schrift bei 46,8 % und das Bild bei 37,8 % - Schrift zu
     klein, Bild zu gross. Der Zug der Ueberschrift nach oben ist im selben
     Verhaeltnis mitgezogen, sonst haengt sie nicht mehr an der Schulter. */
  /* NUR die Breite entscheidet ueber die Groessen. Die Hoehen-Grenzen sind
     bewusst so weit gesetzt, dass sie im Normalfall nie greifen - sie sind
     eine Notbremse fuer sehr flache Fenster, kein Gestaltungsmittel. Vorher
     griff die Hoehen-Grenze auf dem Geraet des Kunden und machte die Schrift
     kleiner als in jeder Vorschau. Breite ist auf einem Telefon konstant,
     Hoehe nicht - deshalb haengt jetzt alles an der Breite. */
  /* Hoehe und Breite muessen im Verhaeltnis 0,95 bleiben, sonst schneidet
     object-fit das Handy oben und unten ab. Deshalb die Original-Formel
     82vw/77.9vw unveraendert - das ist der Ausschnitt, in dem Handy und
     Gesicht ganz stehen. Nur die Schrift ist groesser als vorher. */
  .hero3__media{height:min(75vw,38.5lvh)}
  /* Die Bildbreite bleibt bei der Original-Formel (77.9vw) - dadurch ist der
     Ausschnitt breit genug, dass Handy UND Gesicht ganz darin stehen und das
     Mockup optisch mittig sitzt. Ein schmaleres, zentriertes Bild schnitt
     beide an. Nur die HOEHE ist auf den Referenzwert gesetzt. */
  .hero3__media img{
    width:min(71.3vw,47.5lvh);
    /* Das Handy sitzt im Foto links. Ein zentrierter Rahmen schiebt es
       deshalb nach links aus der Mitte. Rechtsbuendig ausgerichtet landet
       das Mockup bei rund 50 % der Seitenbreite - also mittig. */
    margin-left:auto;margin-right:0;
    object-position:50% 42%;
  }
  .hero3__over{margin-top:calc(.875rem - min(9.1vw,6.2lvh))}
  .hero3__h1{margin-top:.5rem;font-size:min(13.5vw,9lvh)}

  .hero3__below{margin-top:clamp(.5rem,1.6lvh,1rem);flex:none}
  .hero3__below .lead{font-size:clamp(.95rem,4.1vw,1.15rem);line-height:1.44}
  .hero3__below .cta-row{margin-top:clamp(.6rem,1.8lvh,1rem)}
  .hero3__below .btn--lg{min-height:3.35rem;font-size:.84rem;padding-inline:1.2rem}
  .pricecut{margin-top:clamp(.45rem,1.4lvh,.8rem)}
  .hero3__below .fineprint{margin-top:clamp(.45rem,1.4lvh,.8rem);font-size:.86rem}

  .scrollcue{margin-top:clamp(.9rem,2.2lvh,1.4rem);align-self:center;gap:.35rem}
  .scrollcue .scrollcue__rail{height:1.6rem}
}

/* Nur fuer wirklich kleine Geraete (iPhone SE und aelter). Die Grenze liegt
   bei 540 px SICHTBARER Hoehe - unter diesem Wert liegt kein modernes iPhone,
   in keinem Safari-Zustand. Diese Regel kann also nicht zwischen den
   Zustaenden hin- und herspringen, anders als die alten Baender bei 780 und
   830 px, die auf JEDEM iPhone ansprangen, sobald die Leisten erschienen. */
@media (max-width:33.9rem) and (max-height:600px){
  /* Greift nur beim iPhone SE mit ausgefahrenen Leisten (477 px). Das
     kleinste moderne Geraet kommt in diesem Zustand auf 610 px und bleibt
     damit ausserhalb - die Regel kann also auf keinem aktuellen Telefon
     mitten in der Sitzung anspringen. */
  .hero3__media{height:min(70vw,30lvh)}
  .hero3__media img{width:min(66.5vw,28.5lvh)}
  .hero3__over{margin-top:calc(.6rem - min(9.7vw,4.2lvh))}
  .hero3__h1{margin-top:.3rem;font-size:min(11.6vw,5.6lvh)}
  .hero3__below .lead{font-size:.88rem;line-height:1.4}
  .hero3__below .btn--lg{min-height:3rem}
  .scrollcue{margin-top:.7rem}
}