/* ════════════════════════════════════════════════════════════════════════════
   KAIF — Energiewand v2
   Kompletter Neubau nach dem Asset-Schwung vom 06.08.: echte Kampagnen-
   fotografie trägt die Seite, die Gestaltung inszeniert sie nur noch.

   Prinzipien:
   · EIN Design-System — Tokens unten sind die einzige Farb- und Maßwahrheit.
   · Mobile zuerst: Basis-Styles = Telefon, zwei Breakpoints (760 / 1080).
   · Zwei Welten im Wechsel: Nacht (black) und Tag (mojito) — der Rhythmus
     dunkel → hell → dunkel → hell ist die Dramaturgie der Seite.
   · Bewegung: ein Ease, zwei Dauern. Reveals nur unter html.js (Ausfall-
     sicherung: ohne JavaScript ist alles sichtbar).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Schriften (lokal, DSGVO) ─────────────────────────────────────────────── */
@font-face{font-family:"Racing Energy";src:url("../../assets/fonts/racing-energy.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("../../assets/fonts/inter-tight-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("../../assets/fonts/inter-tight-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("../../assets/fonts/inter-tight-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Oswald;src:url("../../assets/fonts/oswald-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Oswald;src:url("../../assets/fonts/oswald-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../../assets/fonts/instrument-serif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Big Shoulders";src:url("../../assets/fonts/big-shoulders-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root{
  /* Flächen */
  --nacht:#0A0A0C;              /* Grundschwarz der dunklen Welt      */
  --nacht-2:#121216;            /* zweite dunkle Ebene (Karten, Form) */
  --tag:#F5F3ED;                /* Grund der hellen Welt              */
  --tag-2:#ECE9E0;              /* zweite helle Ebene                 */
  --weiss:#FFFFFF;

  /* Marke — aus den Originalassets gemessen */
  --magenta:#E42A86;
  --gruen:#8FC63F;
  --gruen-tief:#49731B;         /* Grün mit Kontrast auf hellem Grund */
  --gelb:#F8E41A;

  /* Text auf dunkel */
  --t-voll:rgba(255,255,255,.95);
  --t-mittel:rgba(255,255,255,.82);
  --t-leise:rgba(255,255,255,.64);
  /* Text auf hell */
  --d-voll:#17160F;
  --d-mittel:#4A473D;
  --d-leise:#5E5C50;

  /* Linien */
  --linie:rgba(255,255,255,.13);
  --linie-hell:rgba(23,22,15,.14);

  /* Typografie */
  --schrift-display:"Racing Energy","Archivo Black",Impact,sans-serif;
  --schrift-text:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --schrift-label:Oswald,"Arial Narrow",sans-serif;
  --schrift-zahl:"Big Shoulders",Impact,sans-serif;
  --schrift-serife:"Instrument Serif",Georgia,serif;

  --g-hero:clamp(2.2rem,9vw,6.6rem);
  --g-1:clamp(2rem,6vw,4.4rem);
  --g-2:clamp(1.45rem,3.4vw,2.5rem);
  --g-body:clamp(1rem,.95rem + .3vw,1.15rem);

  /* Raum */
  --sektion:clamp(4.5rem,12vw,8.5rem);
  --rand:clamp(1.25rem,4.5vw,3.75rem);
  --bahn:1280px;

  /* Bewegung */
  --ease:cubic-bezier(.22,.8,.3,1);
  --zug:.65s;                   /* Reveals   */
  --tipp:.2s;                   /* Interaktion */
}

/* ── Basis ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* Anker landen sonst unter der klebenden Kopfzeile; --kopf-h misst script.js */
  scroll-padding-top:calc(var(--kopf-h,96px) + 8px)}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--nacht);color:var(--t-voll);
  font-family:var(--schrift-text);font-size:var(--g-body);
  font-weight:400;line-height:1.62;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,figure,dl,dd,dt{margin:0}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:2px}
::selection{background:var(--magenta);color:#fff}

.wrap{max-width:var(--bahn);margin-inline:auto;padding-inline:var(--rand)}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprungmarke{position:absolute;left:-9999px;top:0;z-index:120;background:var(--magenta);color:#fff;
  padding:.7rem 1.2rem;font-family:var(--schrift-label);font-size:.75rem;text-transform:uppercase;letter-spacing:.16em}
.sprungmarke:focus{left:.5rem;top:.5rem}

/* ── Typo-Bausteine ───────────────────────────────────────────────────────── */
.display{
  font-family:var(--schrift-display);font-weight:400;text-transform:uppercase;
  line-height:1.04;letter-spacing:-.005em;text-wrap:balance;
  overflow-wrap:normal;hyphens:manual;
}
.display--hero{font-size:var(--g-hero)}
.display--1{font-size:var(--g-1)}
.display--2{font-size:var(--g-2)}
.kicker{
  display:flex;align-items:center;gap:.7rem;margin-bottom:clamp(1rem,2.5vw,1.6rem);
  font-family:var(--schrift-label);font-weight:500;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.24em;color:var(--t-leise);
}
.kicker::before{content:"";width:clamp(26px,4vw,54px);height:1px;background:var(--magenta)}
.hell .kicker{color:var(--d-leise)}
.hell .kicker::before{background:var(--gruen-tief)}
.fliess{max-width:58ch;color:var(--t-mittel);line-height:1.7}
.hell .fliess{color:var(--d-mittel)}
.betont{color:var(--t-voll);font-weight:500}
.hell .betont{color:var(--d-voll)}
.serif-em{font-family:var(--schrift-serife);font-style:italic;text-transform:none;letter-spacing:0}

/* ── Knöpfe ───────────────────────────────────────────────────────────────── */
.knopf{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;
  min-height:52px;padding:.95rem 1.7rem;isolation:isolate;
  font-family:var(--schrift-label);font-weight:600;font-size:.8125rem;
  text-transform:uppercase;letter-spacing:.16em;
  background:var(--gelb);color:#141200;border:1px solid var(--gelb);
  transition:transform var(--tipp) var(--ease);
}
.knopf::after{
  content:"";position:absolute;inset:0;z-index:-1;
  border:1px solid var(--magenta);transform:translate(6px,6px);
  transition:transform var(--tipp) var(--ease);
}
.knopf:hover{transform:translate(3px,3px)}
.knopf:hover::after{transform:translate(1px,1px)}
.knopf--breit{width:100%;justify-content:space-between}
.textlink{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--schrift-label);font-weight:500;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--t-mittel);
  border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:color var(--tipp) var(--ease);
}
.textlink:hover{color:var(--t-voll)}
/* Fließtext-Links bleiben so groß, wie die Zeile sie macht. WCAG 2.2 nimmt
   Links im Satz ausdrücklich von der Mindestgröße aus (SC 2.5.8, Ausnahme
   „Inline"), und jeder Versuch, sie zu vergrößern, wächst bei Inline-Boxen
   nur nach oben — der Treffer landet dann in der Zeile darüber. */
.hell .textlink{color:var(--d-mittel)}
.hell .textlink:hover{color:var(--d-voll)}

/* ── Kopfzeile ────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,12,.82);backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--linie);
  transition:background var(--tipp) linear,color var(--tipp) linear;
}
.kopf__innen{
  max-width:var(--bahn);margin-inline:auto;padding:.4rem var(--rand);
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1rem;
}
.kopf__logo{display:inline-flex;align-items:center;min-height:44px}
.kopf__logo img{height:clamp(36px,4.5vw,46px);width:auto}
.kopf__cta{margin-left:auto;min-height:44px;padding:.6rem 1.15rem;font-size:.72rem}
.kopf__cta::after{transform:translate(4px,4px)}
.kopf__nav{
  flex-basis:100%;display:flex;gap:1.15rem;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  font-family:var(--schrift-label);font-weight:500;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--t-mittel);
}
.kopf__nav::-webkit-scrollbar{display:none}
.kopf__nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;transition:color var(--tipp)}
.kopf__nav a:hover{color:var(--t-voll)}
.kopf__nav i{font-style:normal;color:var(--magenta);margin-right:.4em}
.kopf__balken{
  display:block;height:2px;background:var(--magenta);
  transform:scaleX(var(--fortschritt,0));transform-origin:left;
}
.kopf--hell{background:rgba(245,243,237,.88);border-bottom-color:var(--linie-hell);color:var(--d-voll)}
.kopf--hell .kopf__logo img{filter:invert(1)}
.kopf--hell .kopf__nav{color:var(--d-mittel)}
.kopf--hell .kopf__nav a:hover{color:var(--d-voll)}
/* Gelb auf Hell hat 1,2:1 — die dunkle Kante gibt dem CTA seine Form zurück. */
.kopf--hell .kopf__cta{border-color:#141200}
@media (min-width:1080px){
  .kopf__innen{flex-wrap:nowrap;padding-block:.65rem}
  .kopf__nav{flex-basis:auto;margin-left:auto;overflow:visible;padding-bottom:0}
  .kopf__cta{order:3;margin-left:1.2rem}
}

/* ── Hero: Kampagnenbild in voller Fläche ─────────────────────────────────── */
.hero{position:relative;
  /* Die Kopfzeile steht im Fluss darüber — ohne Abzug läge der CTA unter der Falz. */
  min-height:calc(100svh - var(--kopf-h,96px));display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__bild{position:absolute;inset:0;z-index:-2}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.hero::before{ /* Lesbarkeits-Scrim: unten dicht, oben offen */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,10,12,.94) 0%,rgba(10,10,12,.72) 26%,rgba(10,10,12,.46) 48%,rgba(10,10,12,.30) 72%,rgba(10,10,12,.40) 100%);
}
.hero__inhalt{position:relative;width:100%;padding-block:clamp(1.2rem,3.2vh,5rem)}
/* Eigene dunkle Unterlage genau unter der Textbahn. Der grosse Scrim des Hero
   muss das Motiv atmen lassen; hier darf es dichter sein, damit der Fliesstext
   nicht auf der Dose steht. Randlos ueber die volle Breite, damit keine Kante
   entsteht. */
.hero__inhalt::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;transform:translateX(-50%);width:100vw;
  top:-4rem;bottom:0;
  background:linear-gradient(to bottom,transparent 0%,rgba(10,10,12,.42) 22%,rgba(10,10,12,.62) 55%,rgba(10,10,12,.72) 100%);
}
@media (min-width:1080px){
  /* Auf breiten Schirmen laeuft die Unterlage nach rechts aus, damit die Dose
     frei steht — der Text sitzt ohnehin links. */
  .hero__inhalt::before{
    background:
      linear-gradient(to right,rgba(10,10,12,.55) 0%,rgba(10,10,12,.3) 46%,transparent 72%),
      linear-gradient(to bottom,transparent 0%,rgba(10,10,12,.34) 26%,rgba(10,10,12,.5) 60%,rgba(10,10,12,.58) 100%);
  }
}
.hero__inhalt .kicker{color:var(--t-mittel)}
/* Der Zeilenfall der Hero-Headline entscheidet über die Höhe des ganzen
   Hero — und damit darüber, ob das Reel-Trio noch über die Falz passt.
   Auf dem Telefon läuft sie deshalb über die volle Breite, auf großen
   Schirmen darf die Zeile lang stehen (dafür gibt es den Scrim von links). */
.hero h1{max-width:none;margin-bottom:clamp(1rem,2.5vw,1.5rem)}
@media (min-width:760px){.hero h1{max-width:16ch}}
/* Kurze Telefon-Schirme: die Headline gibt Höhe ab, damit das Reel-Trio
   unter „Wo es KAIF gibt" noch vollständig über die Falz passt. */
@media (max-width:759px) and (max-height:800px){
  .hero .display--hero{font-size:clamp(1.9rem,8vw,2.2rem)}
  .hero__sub{margin-bottom:clamp(1rem,2.5vw,1.6rem)}
}
@media (min-width:1080px){.hero h1{max-width:19ch}}
.hero h1 .serif-em{color:var(--gelb)}
.hero__sub{max-width:44ch;margin-bottom:clamp(1.1rem,3.5vw,2.2rem)}
.hero__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
@media (min-width:1080px){
  .hero::after{ /* zweiter Scrim von links, damit die Zeile lang stehen kann */
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to right,rgba(10,10,12,.62) 0%,rgba(10,10,12,.18) 46%,transparent 68%);
  }
}

/* Faktenleiste unter dem Hero: läuft als Band, gelbe Blitze trennen.
   Der Screenreader bekommt den ruhenden Satz (.nur-sr), das Band ist Deko. */
.leiste{overflow:hidden;border-block:1px solid var(--linie);background:var(--nacht)}
.leiste__spur{display:flex;width:max-content;animation:lauf 38s linear infinite}
.leiste__zug{
  flex:0 0 auto;display:inline-flex;align-items:center;
  padding-block:clamp(.85rem,1.8vw,1.1rem);
  font-family:var(--schrift-label);font-weight:500;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--t-mittel);
  white-space:nowrap;
}
.leiste__zug svg{
  width:15px;height:15px;flex:0 0 auto;color:var(--gelb);
  margin-inline:clamp(1.1rem,2.6vw,1.9rem);
  animation:blitzen 2.6s ease-in-out infinite;
}
.leiste__zug svg:nth-of-type(2n){animation-delay:1.3s}
@keyframes blitzen{0%,100%{opacity:1}55%{opacity:.3}}

/* ── Laufband ─────────────────────────────────────────────────────────────── */
.laufband{overflow:hidden;background:var(--magenta);color:#16030C;border-block:1px solid rgba(0,0,0,.18)}
.laufband__spur{display:flex;width:max-content;animation:lauf 26s linear infinite}
.laufband__inhalt{
  flex:0 0 auto;padding-block:.42em;
  font-family:var(--schrift-display);font-size:clamp(1.25rem,3.6vw,2.1rem);
  text-transform:uppercase;line-height:1.1;white-space:nowrap;
}
.laufband__inhalt b{font-weight:400;opacity:.45;padding-inline:.45em}
@keyframes lauf{to{transform:translateX(-50%)}}

/* ── Sektions-Grundformen ─────────────────────────────────────────────────── */
.sektion{padding-block:var(--sektion)}
.hell{background:var(--tag);color:var(--d-voll)}
.split{display:grid;gap:clamp(1.8rem,5vw,4rem);align-items:center}
@media (min-width:1080px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .split--rechts{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .split--rechts > :first-child{order:2}
  .split--rechts > :last-child{order:1}
}

/* Pflichthinweis (LMIV) — ruhig, aber nie versteckt */
.koffein{margin-top:1.5rem;max-width:58ch;font-size:.78rem;line-height:1.65;color:var(--t-leise)}
.hell .koffein{color:var(--d-leise)}

/* Faktenzeile der Sorten */
.fakten{
  display:grid;grid-template-columns:repeat(2,minmax(0,auto));
  justify-content:start;gap:.55rem 1.6rem;
  margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--linie);
  font-family:var(--schrift-label);font-weight:500;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--t-mittel);
}
.fakten span{display:inline-flex;align-items:center;white-space:nowrap}
.hell .fakten{border-top-color:var(--linie-hell);color:var(--d-mittel)}
@media (min-width:760px){
  .fakten{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem clamp(.9rem,2vw,1.5rem)}
  .fakten span:not(:last-child)::after{
    content:"";width:3px;height:3px;border-radius:50%;
    background:currentColor;opacity:.5;margin-left:clamp(.9rem,2vw,1.5rem);
  }
}

/* ── Comeback (helle Welt) ────────────────────────────────────────────────── */
.comeback .display--1{max-width:14ch}
/* Bühne: das Foto sitzt in einem Passepartout (fasst den hellen Himmel),
   die Beleg-Karte legt sich dunkel darüber — Zahl, Foto und Text werden
   EIN Bild statt drei gestapelter Blöcke. */
.comeback__buehne{position:relative;margin-top:clamp(2rem,6vw,4rem)}
.comeback__rahmen{
  background:var(--tag-2);border:1px solid var(--linie-hell);
  padding:clamp(.6rem,1.8vw,1.1rem);
}
.comeback__rahmen img{width:100%;height:auto;display:block}
.comeback__karte{
  position:relative;z-index:2;background:var(--nacht);color:var(--t-voll);
  width:min(24rem,calc(100% - 2.5rem));
  margin:-3.2rem auto 0;padding:clamp(1.2rem,3vw,1.7rem);
}
.comeback__beleg{
  display:flex;align-items:baseline;gap:.15em;margin-bottom:.55rem;
  font-family:var(--schrift-zahl);font-weight:800;line-height:.9;
  font-size:clamp(2.55rem,7vw,4.6rem);color:var(--t-voll);letter-spacing:-.01em;
}
.comeback__beleg i{font-style:normal;font-size:.42em;color:var(--magenta);transform:translateY(-.9em)}
.comeback__karte p:not(.comeback__beleg):not(.comeback__quelle){
  font-size:.95rem;line-height:1.6;color:var(--t-mittel);
}
.comeback__quelle{
  margin-top:.8rem;font-family:var(--schrift-label);font-weight:500;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--t-leise);
}
@media (min-width:1080px){
  .comeback__karte{margin:-5rem 0 0 clamp(2rem,6vw,4.5rem)}
}

/* ── Sortenwelten ─────────────────────────────────────────────────────────── */
.welt{position:relative;overflow:clip}
.welt__marke{
  font-family:var(--schrift-label);font-weight:600;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.3em;margin-bottom:.9rem;
}
.welt--black .welt__marke{color:var(--magenta)}
.welt--mojito .welt__marke{color:var(--gruen-tief)}
.welt h2{margin-bottom:clamp(.9rem,2vw,1.3rem)}
/* „Kompromisslos." ist ein einziges langes Wort in einer schmalen Spalte.
   Es darf nicht getrennt werden — also richtet sich der Grad nach der
   Spaltenbreite (cqw), nie über den regulären Grad hinaus. Beide Sorten-
   Sektionen teilen die Regel, damit die Headlines gleich groß bleiben.  */
.welt__text{container-type:inline-size}
.welt__text .display--1{font-size:min(var(--g-1), 8.4cqw)}
.welt__bild{position:relative}
.welt__bild img{width:100%;height:auto}
/* Beide Sorten tragen freigestellte Dosen im Splash — dieselbe Bildsprache,
   je Welt das passende Schattenrezept. */
.welt--black .welt__bild img{
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.55));
}
/* Die freigestellte mojito-Dose schwebt frei auf dem hellen Grund. */
.welt--mojito .welt__bild img{
  filter:drop-shadow(0 30px 44px rgba(43,60,10,.18));
}
/* Signatur-Ebene: die Original-Wellen, leise, am Sektionsrand angeschnitten */
.welt__muster{position:absolute;z-index:0;pointer-events:none;user-select:none}
.welt--black .welt__muster{right:-18%;bottom:-6%;width:78%;opacity:.22;mix-blend-mode:screen}
.welt--mojito .welt__muster{left:-14%;top:-4%;width:70%;opacity:.3}
.welt .wrap{position:relative;z-index:1}
@media (max-width:759px){.welt__muster{display:none}}

/* ── Postkarte: das Kampagnenbild mit dem Dosen-Claim ─────────────────────── */
/* Die Dose füllt gut vier Fünftel der Bildhöhe. Ein flaches Band schneidet
   sie bei „cover" zwangsläufig oben an — deshalb wächst die Höhe mit der
   Breite mit, und der Bildausschnitt sitzt hoch genug für den Dosendeckel. */
.postkarte{position:relative;min-height:clamp(560px,46vw,900px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.postkarte__bild{position:absolute;inset:0;z-index:-2}
.postkarte__bild img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.postkarte::before{ /* von unten und — für den Claim — von links */
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(10,10,12,.80) 0%,rgba(10,10,12,.44) 34%,transparent 62%),
    linear-gradient(to top,rgba(10,10,12,.74) 0%,rgba(10,10,12,.24) 44%,transparent 72%);
}
.postkarte__inhalt{width:100%;padding-block:clamp(2rem,5vh,3.5rem)}
.postkarte__claim{
  max-width:11ch;
  /* Der wichtigste Markensatz der Seite verdient eine eigene Stufe zwischen
     display--1 und Hero — als kleinste Display-Größe ging er unter. */
  font-size:clamp(2.1rem,5.6vw,4.4rem);
}
.postkarte__fr{
  margin-top:.7rem;font-family:var(--schrift-serife);font-style:italic;
  font-size:clamp(1rem,2vw,1.3rem);color:var(--gelb);
}

/* ── Momente: die beiden Gesichter der Marke ──────────────────────────────── */
.momente__raster{display:grid;gap:clamp(1.2rem,3vw,2rem);margin-top:clamp(2rem,5vw,3.5rem)}
@media (min-width:760px){.momente__raster{grid-template-columns:1fr 1fr}}
.moment{position:relative;overflow:hidden}
.moment img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s var(--ease)}
@media (hover:hover){.moment:hover img{transform:scale(1.02)}}
.moment figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(1rem,3vw,1.6rem);
  background:linear-gradient(to top,rgba(10,10,12,.94),rgba(10,10,12,.5) 60%,transparent);
  font-family:var(--schrift-label);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--t-voll);
}
.moment--black figcaption b{color:var(--magenta)}
.moment--mojito figcaption b{color:var(--gruen)}
.moment figcaption b{font-weight:600}

/* ── Handel ───────────────────────────────────────────────────────────────── */
.handel .display--1{max-width:12ch}
.handel .display--1 .akzent{color:var(--gelb)}
.hell.handel .display--1 .akzent{color:var(--magenta)}
.hell .haendler{background:var(--weiss);border-color:var(--linie-hell)}
.hell .haendler__hinweis{color:var(--d-leise)}
.haendler{
  display:grid;gap:clamp(1.4rem,4vw,2.5rem);align-items:center;
  margin-top:clamp(2rem,5vw,3.2rem);padding:clamp(1.4rem,4vw,2.4rem);
  background:var(--nacht-2);border:1px solid var(--linie);
}
@media (min-width:760px){.haendler{grid-template-columns:minmax(200px,280px) 1fr}}
.haendler__logo{
  background:var(--weiss);padding:clamp(1.2rem,3vw,1.8rem);
  display:grid;place-items:center;
}
.haendler__logo img{width:min(220px,60vw);height:auto}
.haendler__text p + p{margin-top:.9rem}
.haendler__hinweis{font-size:.9rem;color:var(--t-leise)}
/* Im Fließtext läuft der Link in der Zeile mit — die Blockform riss den Satz auf. */
.haendler__hinweis .textlink{display:inline;min-height:0;padding-bottom:1px}

/* ── Newsletter ───────────────────────────────────────────────────────────── */
.news{position:relative;overflow:clip}
.news__muster{position:absolute;z-index:0;right:-22%;top:-10%;width:80%;opacity:.22;mix-blend-mode:screen;pointer-events:none}
.news .wrap{position:relative;z-index:1}
.news__daten{
  display:flex;flex-wrap:wrap;gap:1rem 2.4rem;margin-top:1.6rem;
  padding-top:1.2rem;border-top:1px solid var(--linie);
}
.news__daten div{min-width:120px}
.news__daten dt{
  font-family:var(--schrift-label);font-weight:500;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--t-leise);margin-bottom:.25rem;
}
.news__daten dd{font-weight:500;font-size:.95rem}

.formular{
  background:var(--nacht-2);border:1px solid var(--linie);
  padding:clamp(1.4rem,4vw,2.2rem);display:grid;gap:1.2rem;
}
.feld{display:grid;gap:.45rem}
.feld label{
  font-family:var(--schrift-label);font-weight:500;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--t-mittel);
}
.feld__zusatz{color:var(--t-leise);letter-spacing:.12em;font-size:.62rem;margin-left:.5em}
.feld__zusatz--pflicht{color:var(--magenta)}
.feld input{
  min-height:52px;padding:.8rem 1rem;
  background:rgba(255,255,255,.05);border:1px solid var(--linie);
  color:var(--t-voll);font:inherit;border-radius:0;
  transition:border-color var(--tipp);
}
.feld input::placeholder{color:var(--t-leise)}
.feld input:focus{border-color:var(--magenta);outline:none}
.einwilligung{display:flex;gap:.8rem;align-items:flex-start;font-size:.82rem;line-height:1.6;color:var(--t-mittel)}
.einwilligung input{
  flex:0 0 auto;width:24px;height:24px;margin-top:.1rem;
  accent-color:var(--magenta);
}
.einwilligung a{text-decoration:underline;text-underline-offset:3px;color:var(--t-voll)}
.doi{font-size:.78rem;line-height:1.65;color:var(--t-leise)}

/* ── Fußzeile ─────────────────────────────────────────────────────────────── */
.fuss{border-top:1px solid var(--linie);padding-block:clamp(3rem,7vw,4.5rem) clamp(2rem,4vw,2.6rem)}
.fuss__gruss{
  font-family:var(--schrift-serife);font-style:italic;color:var(--magenta);
  font-size:clamp(1.6rem,4vw,2.6rem);margin-bottom:clamp(1.6rem,4vw,2.4rem);
}
.fuss__oben{display:flex;flex-wrap:wrap;align-items:flex-start;gap:2rem 3rem;margin-bottom:clamp(2rem,5vw,3rem)}
.fuss__logo img{width:120px;height:auto;opacity:.92}
.fuss__nav{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-left:auto}
.fuss__nav a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--schrift-label);font-weight:500;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--t-mittel);
  transition:color var(--tipp);
}
.fuss__nav a:hover{color:var(--t-voll)}
.fuss__pflicht{max-width:70ch;font-size:.8rem;line-height:1.7;color:var(--t-leise)}
.fuss__unten{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  margin-top:clamp(1.6rem,4vw,2.2rem);padding-top:1.2rem;border-top:1px solid var(--linie);
  font-size:.78rem;color:var(--t-leise);
}

/* ── Bewegung ─────────────────────────────────────────────────────────────── */
/* Reveals NUR unter html.js verstecken — ohne JavaScript ist alles sichtbar. */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--zug) var(--ease),transform var(--zug) var(--ease);
  transition-delay:var(--verzug,0ms)}
.js .reveal.sichtbar{opacity:1;transform:none}

[data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .laufband__spur{animation:none}
  .moment img{transition:none}
  [data-parallax]{transform:none !important}
}

/* ── WordPress-Umgebung ───────────────────────────────────────────────────── */
/* Nur in WordPress wirksam: die Block-Wrapper dürfen weder das Raster stören
   noch der klebenden Kopfzeile ihren Spielraum nehmen. Im Prototyp existieren
   diese Klassen nicht — dort sind die Regeln wirkungslos. */
.wp-block-template-part{display:contents}
.wp-site-blocks > .wp-block-group{display:contents}
.wp-block-group[class*="kaif-"]{display:contents}

/* Auf dem Telefon steht das Produktfoto VOR dem Text — es ist das stärkste
   Element der Sektion; der Pflichttext bleibt am Textende. Ab 1080 ordnet
   das Spaltenraster. */
@media (max-width:1079px){
  .welt__bild{order:-1}
}

/* ── Social: Poste deinen KAIF-Moment ─────────────────────────────────────
   Drei echte Reels in iPhone-Rahmen, dazu die Community-Motive als
   Polaroids. Folgen-CTA führt auf @kaifenergy_official.                    */
.social__kopf{max-width:640px}
.social__hash{color:var(--gelb)}
.social__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:clamp(1.2rem,3vw,1.8rem)}
.social__buehne{display:grid;gap:clamp(2.2rem,6vw,3.4rem)}
@media (min-width:940px){
  .social__buehne{grid-template-columns:minmax(0,1fr) minmax(0,320px);align-items:center;
    gap:clamp(2.4rem,5vw,4.5rem)}
}

/* ── Der Kanal als Gerät ──────────────────────────────────────────────────
   Im Rahmen steht der echte Screenshot der Profilseite, nicht ein Nachbau.
   Das Gerät selbst ist der Link zum Kanal.                                */
.insta{display:block;justify-self:center;width:min(300px,82vw);text-decoration:none}
.insta__geraet{
  position:relative;display:block;background:#050506;
  border:3px solid #2E2E34;border-radius:34px;padding:8px;
  box-shadow:0 30px 60px rgba(0,0,0,.55);
  transition:border-color var(--tipp),transform var(--tipp) var(--ease);
}
/* Kein Dynamic Island: der Screenshot beginnt unter der Statuszeile, eine
   aufgesetzte Insel läge auf dem Kanalnamen. */
.insta__geraet img{display:block;width:100%;height:auto;border-radius:27px}
.insta:hover .insta__geraet{border-color:var(--gelb);transform:translateY(-4px)}
.insta:focus-visible .insta__geraet{outline:2px solid var(--gelb);outline-offset:4px}
.insta__fuss{
  display:block;margin-top:1rem;text-align:center;
  font-family:var(--schrift-label);font-weight:500;font-size:.62rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--t-leise);
  transition:color var(--tipp);
}
.insta:hover .insta__fuss{color:var(--gelb)}


/* ── Das Reel-Trio ───────────────────────────────────────────────────────
   Drei Spalten nebeneinander — auf jeder Breite, auch auf dem Telefon.
   Mobil sprengt das Raster dafür den Satzspiegel bis fast an den Rand und
   der Gerätrahmen wird dünner, damit vom Bild möglichst viel übrig bleibt. */
.phones{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--reel-luft);align-items:start;
  margin-top:1.4rem;
  margin-inline:calc(var(--reel-ausbruch) * -1);
}
.phone{margin:0}
@media (min-width:560px){
  .phones{margin-inline:0}
}
@media (min-width:760px){
  .phones{justify-items:center;align-items:end;margin-top:2rem}
  .phone{width:min(300px,26vw)}
  .phone--haupt{width:min(340px,29vw)}
}
.phone__geraet{
  position:relative;background:#050506;
  border:2px solid #2E2E34;border-radius:clamp(13px,3.6vw,44px);
  padding:3px;box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.hell .phone__geraet{box-shadow:0 14px 30px rgba(10,10,12,.22)}
.phone__geraet::before{ /* Dynamic Island — erst ab Tablet groß genug, um zu tragen */
  content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:30%;height:8px;background:#050506;border-radius:8px;z-index:2;
}
.phone__geraet video{
  display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
  border-radius:clamp(11px,3vw,34px);background:#0A0A0C;
}
@media (min-width:760px){
  .phone__geraet{border-width:3px;padding:10px;box-shadow:0 28px 56px rgba(0,0,0,.4)}
  .phone__geraet::before{top:19px;height:21px;border-radius:12px}
}
/* Der Ton-Schalter steht UNTER dem Gerät, nicht auf dem Bild: als
   beschriftete Schaltfläche, damit auf den ersten Blick klar ist, dass
   dieses eine Reel Ton hat. Gelb = Ton läuft. */
.phone__ton{
  display:flex;align-items:center;justify-content:center;gap:.34em;
  width:100%;margin-top:.32rem;padding:.4rem .3rem;
  border-radius:100px;cursor:pointer;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.34);
  color:var(--t-voll);
  font-family:var(--schrift-label);font-weight:500;
  font-size:.5rem;text-transform:uppercase;letter-spacing:.08em;
  white-space:nowrap;
  transition:border-color var(--tipp),background var(--tipp),color var(--tipp);
}
.hell .phone__ton{background:rgba(10,10,12,.06);border-color:rgba(10,10,12,.3);color:var(--d-voll)}
.phone__ton:hover{border-color:var(--gelb);background:rgba(248,228,26,.14)}
.phone__ton[aria-pressed="true"]{background:var(--gelb);border-color:var(--gelb);color:#141200}
.phone__ton svg{width:13px;height:13px;flex:0 0 auto}
.phone__ton .ton-an{display:none}
.phone__ton[aria-pressed="true"] .ton-an{display:inline-flex}
.phone__ton[aria-pressed="true"] svg.ton-an{display:block}
.phone__ton[aria-pressed="true"] .ton-aus{display:none}
@media (min-width:760px){
  .phone__ton{margin-top:.9rem;padding:.52rem .4rem;font-size:.56rem;letter-spacing:.1em}
  .phone__ton svg{width:15px;height:15px}
}
.phone figcaption{
  margin-top:.32rem;text-align:center;
  font-family:var(--schrift-label);font-weight:500;
  font-size:.52rem;line-height:1.3;
  text-transform:uppercase;letter-spacing:.06em;color:var(--t-leise);
}
.hell .phone figcaption{color:var(--d-leise)}
@media (min-width:760px){
  .phone figcaption{margin-top:.9rem;font-size:.72rem;letter-spacing:.2em}
}

/* Polaroids: Community-Beweisstücke */
.polaroids{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(1rem,4vw,3.5rem);
  margin-top:clamp(2.4rem,6vw,4.2rem);
}
.polaroid{
  margin:0;background:#FBFAF7;padding:10px 10px 12px;
  width:min(300px,42vw);
  box-shadow:0 20px 44px rgba(0,0,0,.45);
}
.polaroid img{display:block;width:100%;height:auto}
.polaroid figcaption{
  padding:12px 4px 4px;text-align:center;
  font-family:var(--schrift-serife);font-style:italic;
  font-size:1.05rem;color:#3A382F;
}
.polaroid figcaption b{font-weight:400;color:var(--magenta)}
.polaroid--a{transform:rotate(-2.4deg)}
.polaroid--b{transform:rotate(2deg);margin-top:1.8rem}
.polaroid figcaption{font-size:.82rem}
@media (min-width:760px){
  .polaroid{width:min(300px,26vw);padding:12px 12px 14px}
  .polaroid figcaption{font-size:1.05rem}
  .polaroid--b{margin-top:2.2rem}
}

/* ── Die drei Reels im Hero ───────────────────────────────────────────────
   Sie sitzen direkt unter „Wo es KAIF gibt" — nebeneinander, auf der
   schwarzen Fläche, in die der Hero unten ohnehin ausläuft. Diese Fläche
   zieht sich randlos über die volle Breite und ein Stück unter den Hero. */
.hero__reels{position:relative;margin-top:clamp(.7rem,1.2vh,2rem);
  --reel-luft:.5rem;--reel-ausbruch:calc(var(--rand) - .75rem)}
@media (min-width:560px){.hero__reels{--reel-luft:clamp(.7rem,1.6vw,1rem);--reel-ausbruch:0px}}
.hero__reels::before{
  content:"";position:absolute;pointer-events:none;
  left:50%;transform:translateX(-50%);width:100vw;
  top:clamp(-2.6rem,-4vh,-1.4rem);
  bottom:calc(clamp(1.2rem,3.2vh,5rem) * -1);
  background:linear-gradient(to bottom,transparent 0%,var(--nacht) 26%);
}
.hero__reels .phones{position:relative;z-index:1;margin-top:0}
@media (min-width:760px){
  /* Im Hero bleiben sie kompakt: eine Reihe unter dem CTA, nicht die
     ganze Bahn breit wie in einer eigenen Sektion. */
  .hero__reels{max-width:350px}
  .hero__reels .phones{justify-items:stretch;align-items:start}
  .hero__reels .phone,.hero__reels .phone--haupt{width:auto}
  .hero__reels .phone__geraet{border-width:2px;padding:5px;border-radius:20px;box-shadow:0 16px 34px rgba(0,0,0,.5)}
  .hero__reels .phone__geraet::before{top:11px;height:10px;border-radius:8px}
  .hero__reels .phone__geraet video{border-radius:15px}
  .hero__reels .phone__ton{margin-top:.42rem;padding:.4rem .3rem;font-size:.52rem}
  .hero__reels .phone__ton svg{width:13px;height:13px}
  .hero__reels .phone figcaption{margin-top:.42rem;font-size:.58rem;letter-spacing:.1em}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP AB 1080 px
   Bis hierher ist die Seite mobile-first: eine Spalte, links ausgerichtet.
   Auf einem 1680er Schirm bleibt davon eine schmale Textbahn übrig und rechts
   tote Fläche — und die vw-gebundenen Abstände reißen zusätzlich Löcher.
   Ab hier bekommt der Desktop eine eigene Ordnung: breitere Bahn, zwei echte
   Spalten (links Wort, rechts Beleg), halbierter vertikaler Raum, gemeinsame
   Oberkanten. Unterhalb von 1080 px ändert sich nichts.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1080px){

  /* ── Grundmaße ───────────────────────────────────────────────────────────
     1280 Bahn minus Rand ließ auf 1680 px rund 31 % reinen Rand stehen.
     1440 gibt zwei Spalten je ~620 px, ohne dass der Satz randlos ausblutet.
     --sektion stand ab 1133 px am Anschlag: 272 px an jedem Sektionsstoß,
     doppelt so viel wie mobil. */
  :root{--bahn:1440px;--sektion:5rem}
  /* momente und news sind beide dunkel — dort trennt keine Farbkante,
     also muss der Raum es tun. */
  .sektion.momente{padding-bottom:7rem}
  .sektion.news{padding-top:7rem}

  /* ── Hero: Wort links, Beleg rechts ──────────────────────────────────────
     Die Headline lief bisher quer über die Dose — das einzige echte
     Hero-Asset lag hinter Type. Jetzt teilt sich der Hero: vier Textzeilen
     links, das Reel-Trio als eigene Bahn rechts. Der ::before-Schleier ist
     absolut positioniert und damit kein Rasterkind. */
  .hero__inhalt{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(400px,34vw,620px);
    grid-template-rows:repeat(4,auto);
    column-gap:clamp(2rem,3.6vw,4rem);
    align-items:end;
  }
  .hero__inhalt > *{grid-column:1}
  .hero__inhalt > .hero__reels{
    grid-column:2;grid-row:1 / -1;align-self:end;
    max-width:none;margin-top:0;
  }
  .hero h1{max-width:none}
  .hero .display--hero{font-size:clamp(3rem,4.6vw,5rem)}
  .hero::after{
    background:linear-gradient(to right,
      rgba(10,10,12,.74) 0%,rgba(10,10,12,.34) 42%,transparent 64%);
  }
  /* Der randlose Schwarzbalken unter den Reels hätte den Hero jetzt quer
     durchgeschnitten — er sitzt ja nicht mehr unten, sondern rechts. */
  .hero__reels::before{
    left:-1.5rem;right:-1.5rem;width:auto;transform:none;
    top:-2.5rem;bottom:-1.5rem;
    background:radial-gradient(120% 92% at 50% 60%,
      rgba(10,10,12,.72) 0%,rgba(10,10,12,.30) 60%,transparent 100%);
  }
  /* Karussell-Anordnung: das mittlere Gerät steht vorn und größer, die
     beiden Nachbarn schieben sich dahinter. Aus drei gleichen Kacheln wird
     eine Bühne mit Tiefe — und die Reels bekommen endlich Format
     (248 px statt 141 px in der Mitte).
     Die Grundlinie bleibt gemeinsam: unten bündig, oben ragt die Mitte raus. */
  .hero__reels .phones{
    display:flex;align-items:end;justify-content:center;gap:0;
  }
  .hero__reels .phone{flex:0 0 auto;width:34%}
  .hero__reels .phone--haupt{
    width:40%;margin-inline:-4%;position:relative;z-index:2;
  }
  .hero__reels .phone--neben{z-index:1}
  .hero__reels .phone--neben .phone__geraet{
    transform:scale(.97);transform-origin:bottom center;
  }
  .hero__reels .phone__geraet{border-width:3px;padding:9px;border-radius:32px}
  .hero__reels .phone--haupt .phone__geraet{
    border-radius:36px;box-shadow:0 34px 64px rgba(0,0,0,.62);
  }
  .hero__reels .phone__geraet video{border-radius:24px}
  .hero__reels .phone--haupt .phone__geraet video{border-radius:27px}
  .hero__reels .phone__geraet::before{top:17px;height:16px;border-radius:10px}
  .hero__reels .phone__ton{font-size:.6rem;padding:.5rem .4rem}
  .hero__reels .phone figcaption{font-size:.68rem;letter-spacing:.14em}
  /* Der Inhalt ist konstant hoch; jeder weitere Fensterpixel wurde Luft. */
  .hero{min-height:min(calc(100svh - var(--kopf-h,96px)),920px)}

  /* ── Gemeinsame Oberkanten ───────────────────────────────────────────────
     align-items:center ließ die Absätze in ihren Spalten schweben. Bündige
     Oberkanten sind der Präzisionseindruck, für den Apple und Porsche stehen.
     Ausnahme: neben einer freigestellten Dose gibt es keine Grundlinie. */
  .split{align-items:start}
  .welt .split{align-items:center}

  /* ── Comeback: Headline frei, Absatz als Vorspann ────────────────────────
     14ch band die Headline auf ~490 px und erzwang eine vierte Zeile.
     min-content nur hier — .welt__text rechnet mit cqw und würde zirkulär. */
  .comeback .split{grid-template-columns:minmax(min-content,5fr) minmax(0,6fr)}
  .comeback .display--1{max-width:none}
  .comeback__kopf .fliess{max-width:34ch;font-size:1.3rem;line-height:1.58}

  /* ── Handel: Zweispalter mit Produktwand ─────────────────────────────────
     Die leerste Ansicht der Seite: 750 px Sektionshöhe für Kicker, zwei
     Headline-Zeilen und eine Karte — rechts 600 px nichts. Die Sektion sagt
     „Jetzt bei Mix Markt" und zeigt endlich, WAS dort im Regal steht.
     Als CSS-Hintergrund, damit mobil nichts geladen und nichts verändert wird. */
  .handel .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(300px,34%,480px);
    grid-template-rows:auto auto;
    column-gap:clamp(2.5rem,4vw,4.5rem);
    align-items:start;
  }
  .handel .wrap > *{grid-column:1}
  .handel .display--1{max-width:none}
  .handel .haendler{margin-top:clamp(1.6rem,2.6vw,2.4rem)}
  .handel .wrap::after{
    content:"";grid-column:2;grid-row:1 / -1;align-self:stretch;
    min-height:clamp(320px,24vw,420px);
    background:url("../../assets/img/aufstellung-1400.webp") no-repeat 50% 100%/contain;
    filter:drop-shadow(0 24px 40px rgba(23,22,15,.18));
  }

  /* ── Händlerkarte: die Weiß-auf-Weiß-Kollision ───────────────────────────
     .hell .haendler ist weiß, .haendler__logo ist weiß — das MIX-MARKT-Schild
     stand ohne Bezugsrahmen im Nichts. Die dunkle Variante löst das längst
     über eine zweite Ebene; die helle bekommt dieselbe Logik. */
  .hell .haendler__logo{background:var(--tag-2);border:1px solid var(--linie-hell)}
  .handel .haendler{
    grid-template-columns:minmax(0,240px) minmax(0,1fr);
    gap:clamp(1.4rem,2.2vw,2.2rem);
    padding:clamp(1.8rem,2.6vw,2.4rem);
  }

  /* ── Social: Gerät und Polaroids auf Desktop-Maß ─────────────────────────
     Gerät 300 → 360 px, Polaroids 300 → 400 px nehmen der Sektion den
     Inselcharakter. align-items:center bleibt: das 9:16-Gerät ist strukturell
     höher als der Textblock, jede andere Ausrichtung verschiebt das Loch nur. */
  .social__buehne{grid-template-columns:minmax(0,1fr) clamp(300px,23vw,360px)}
  .social__kopf{max-width:none}
  .insta{width:100%;justify-self:end}
  .insta__geraet{border-width:4px;border-radius:40px;padding:10px}
  .insta__geraet img{border-radius:31px}
  .polaroid{width:min(400px,25vw)}
  .polaroids{gap:clamp(2.5rem,5vw,5rem)}
  /* h2 hat global margin:0, nur .welt h2 hat eine — hier stieß der Fließtext
     direkt an die Display-Zeile. */
  .momente .social__kopf h2,
  .news .split h2{margin-bottom:clamp(.9rem,1.4vw,1.3rem)}

  /* ── Newsletter ──────────────────────────────────────────────────────────
     Die Trennlinie lief rund 270 px weiter als ihr Inhalt. */
  .news__daten{max-width:22rem}
}