/* ============================================================
   0. SCHRIFT — lokal, Dateinamen wie von google-webfonts-helper
   ============================================================ */
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/schrift/outfit-v15-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/schrift/outfit-v15-latin-500.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/schrift/outfit-v15-latin-800.woff2') format('woff2');
}

/* ============================================================
   1. DESIGN-TOKENS
   ============================================================ */
:root{
  --kupfer:#C4632C;
  --kupfer-dunkel:#A9521F;
  --tinte:#2A2622;
  --tinte-weich:#3A342E;
  --papier:#F7F4F0;
  --grau:#B7AEA3;
  --namensgrau:#8C8378;
  --weiss:#FFFFFF;

  /* Textfarben für den durchgehend dunklen Grund */
  --text-body:rgba(247,244,240,.80);
  --text-leise:#B7AEA3;
  --linie:rgba(183,174,163,.20);

  --fs-h1:clamp(2.1rem, 5.2vw, 4rem);
  --fs-h2:clamp(1.75rem, 3.6vw, 2.9rem);
  --fs-h3:clamp(1.15rem, 1.9vw, 1.5rem);
  --fs-body:clamp(1rem, 1.15vw, 1.125rem);
  --fs-klein:0.875rem;
  --fs-mini:0.78rem;

  --sektion-y:clamp(4.5rem, 9vw, 8rem);
  --gutter:clamp(1.25rem, 5vw, 4.5rem);
  --maxw:1280px;
  --maxw-schmal:760px;

  --radius:8px;
  --radius-gross:14px;
  --nav-h:76px;

  /* Einheitliche Höhe aller Hochformat-Medien (Sektion 3, 4 und 5).
     Die Höhe führt, die Breite ergibt sich aus 9:16 — nur so bleiben
     die Felder immer innerhalb der Fensterhöhe. */
  --medien-h:min(calc(100svh - var(--nav-h) - 5rem), 860px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. RESET & BASIS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.68;
  letter-spacing:.012em;
  color:var(--text-body);
  background:var(--tinte);
  overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block;}
h1,h2,h3,h4{
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.018em;
  margin:0 0 .55em;
  color:var(--weiss);
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
/* Kupferstrich unter jeder großen Überschrift, über die volle Spaltenbreite.
   Gilt automatisch auch für alle Sektionen, die noch dazukommen. */
h2::after{
  content:'';display:block;
  width:128px;height:2px;
  background:var(--kupfer);
  margin:1.1rem 0 .2rem;
}
/* In zentriert gesetzten Sektionen rückt der Strich mit in die Mitte.
   Gilt für die Utility-Klasse .zentriert und für die Erkennen-Sektion —
   damit stimmt es auch für alle Sektionen, die noch dazukommen. */
.zentriert h2::after,
.erkennen h2::after{margin-inline:auto;}
h3{font-size:var(--fs-h3);letter-spacing:-.01em;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--kupfer);outline-offset:3px;border-radius:2px;}

/* ============================================================
   3. LAYOUT-HELFER
   ============================================================ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-schmal{max-width:var(--maxw-schmal);margin-inline:auto;padding-inline:var(--gutter);}
.sektion{padding-block:var(--sektion-y);}
/* Der Schlussteil rückt enger zusammen: Kundenstimmen, Kontakt,
   Instagram und Fragen gehören zusammen und sollen nicht wie vier
   einzelne Kapitel wirken. Halbiert wird nur zwischen ihnen — der
   Abstand zum Trenner davor und zum Footer danach bleibt. */
#stimmen{padding-bottom:calc(var(--sektion-y) / 2);}
/* #kontakt ist seit der Aufteilung auf kontakt.html die erste Sektion
   der Seite und liegt damit unter der fixierten Navigation — deshalb
   zusätzlicher Abstand nach oben, wie beim .hero auf der Startseite. */
#kontakt{padding-block:calc(var(--sektion-y) / 2);padding-top:calc(var(--nav-h) + var(--sektion-y) / 2);}
#folgen{padding-block:calc(var(--sektion-y) / 2);}
#faq{padding-top:calc(var(--sektion-y) / 2);}
/* #danke ist ebenfalls die einzige und damit erste Sektion ihrer
   eigenen Seite (danke.html) — braucht denselben Abstand zur fixierten
   Navigation wie #kontakt. */
#danke{padding-top:calc(var(--nav-h) + var(--sektion-y) / 2);min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;}
#danke > .wrap-schmal{width:100%;}
/* Abgesetzte Sektion als Karte auf Headerbreite — nicht als durchgehendes
   Band, damit sie zur übrigen Spur passt. */
.karte-aussen{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.karte{
  background:var(--tinte-weich);
  border-radius:var(--radius-gross);
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,4vw,3.5rem);
}
.zentriert{text-align:center;}

/* Trennpunkt — jeder runde Mittelpunkt im Text ist kupfern.
   aria-hidden, damit Screenreader nicht "Mittelpunkt" vorlesen. */
.tp{color:var(--kupfer);font-weight:500;padding-inline:.12em;}
/* Der Punkt hängt per geschütztem Leerzeichen am Wort davor — er kann
   dadurch nie allein am Zeilenanfang landen. */

.eyebrow{
  font-size:var(--fs-klein);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--kupfer);
  margin-bottom:1rem;
}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--text-leise);}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:52px;padding:.85em 1.9em;
  font-family:inherit;font-size:1rem;font-weight:500;letter-spacing:.02em;
  border:2px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .18s var(--ease);
}
.btn--kupfer{background:var(--kupfer);color:var(--weiss);border-color:var(--kupfer);}
.btn--kupfer:hover{background:var(--kupfer-dunkel);border-color:var(--kupfer-dunkel);transform:translateY(-2px);}
.btn--outline{background:transparent;color:var(--kupfer);border-color:var(--kupfer);}
.btn--outline:hover{background:var(--kupfer);color:var(--weiss);transform:translateY(-2px);}
.btn--gross{min-height:58px;padding:1em 2.4em;font-size:1.05rem;}

/* ============================================================
   4b. LINKS IM FLIESSTEXT
   Kein dauerhafter Unterstrich. Beim Darüberfahren wächst ein
   Kupferstrich von links heraus — dieselbe Bewegung wie im Menü.

   Warum die Links trotzdem dauerhaft kupfern sind: Wären sie im Ruhe-
   zustand nicht von normalem Text zu unterscheiden, fände sie niemand.
   Die Farbe ist die dauerhafte Kennzeichnung, der Strich die Rückmeldung.

   Technisch ein Verlauf als Hintergrundbild statt ::after — nur so
   funktioniert es auch bei Links, die über zwei Zeilen umbrechen.
   ============================================================ */
/* Der Strich ist das einzige Signal — die Textfarbe bleibt, wo sie ist.
   Deshalb ist die Mechanik hier von der Farbe getrennt: dieser Block
   setzt nur den wachsenden Strich, die Farben kommen darunter. So
   lässt sich jedes weitere anklickbare Element anschließen, ohne
   seine Farbe zu verlieren. */
.textlink,
.ort-link,
.einwilligung a,
.kontaktwege .wert,
.faq summary span,
.folgen__konto .name,
.footer__sozial a,
.footer__unten a{
  text-decoration:none;
  background-image:linear-gradient(var(--kupfer),var(--kupfer));
  background-size:0 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
  padding-bottom:2px;
  transition:background-size .3s var(--ease);
}
.textlink:hover,
.ort-link:hover,
.einwilligung a:hover,
.textlink:focus-visible,
.ort-link:focus-visible,
.einwilligung a:focus-visible,
.kontaktwege a:hover .wert,
.kontaktwege a:focus-visible .wert,
.faq summary:hover span,
.faq summary:focus-visible span,
.folgen__konto:hover .name,
.folgen__konto:focus-visible .name,
.footer__sozial a:hover,
.footer__sozial a:focus-visible,
.footer__unten a:hover,
.footer__unten a:focus-visible{
  background-size:100% 2px;
}
/* Kein Link im Fließtext ist kupfern. Kupfer bleibt den Buttons
   vorbehalten — sonst konkurrieren zwei Signale um dieselbe Farbe.
   Ein Textlink zeigt sich stattdessen durch mehr Strichstärke und,
   sobald die Maus darüber steht, durch den wachsenden Kupferstrich. */
.textlink,
.ort-link,
.einwilligung a{
  color:var(--text-leise);
  font-weight:500;
}
.textlink{font-size:1rem;}

/* ============================================================
   5a. LOGO-ZEILE  (einzeilige Wortmarke, aus Signet + Outfit gesetzt)
       Größe steuert allein --logo-h, alles andere skaliert mit.
   ============================================================ */
.logo-zeile{
  --logo-h:42px;
  display:inline-flex;align-items:center;
  gap:calc(var(--logo-h) * .26);
  line-height:1;text-decoration:none;
  transition:opacity .25s var(--ease);
}
.logo-zeile:hover{opacity:.82;}
.logo-zeile__signet{
  height:var(--logo-h);width:auto;flex-shrink:0;
}
.logo-zeile__name{
  font-family:'Outfit',sans-serif;font-weight:800;
  font-size:calc(var(--logo-h) * .50);
  letter-spacing:.005em;text-transform:uppercase;
  color:var(--weiss);white-space:nowrap;
}
.logo-zeile__strich{
  width:1.5px;height:calc(var(--logo-h) * .62);
  background:var(--kupfer);flex-shrink:0;border-radius:1px;
}
.logo-zeile__claim{
  font-family:'Outfit',sans-serif;font-weight:500;
  font-size:calc(var(--logo-h) * .225);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--grau);white-space:nowrap;
}
/* helle Variante — für Logo auf Papier-Hintergrund */
.logo-zeile--hell .logo-zeile__name{color:var(--tinte);}
.logo-zeile--hell .logo-zeile__claim{color:var(--namensgrau);}

/* ============================================================
   5. NAVIGATION
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.nav.ist-gescrollt{
  background:rgba(42,38,34,.90);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
  box-shadow:0 4px 26px rgba(0,0,0,.34);
}
.nav__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.nav__logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none;}
.nav__menu{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.1rem);}
.nav__link{
  color:var(--weiss);text-decoration:none;
  font-size:.95rem;font-weight:400;letter-spacing:.02em;
  padding:.4em 0;position:relative;white-space:nowrap;
}
.nav__link::after{
  content:'';position:absolute;left:0;bottom:0;
  width:0;height:2px;background:var(--kupfer);
  transition:width .28s var(--ease);
}
.nav__link:hover::after,.nav__link:focus-visible::after{width:100%;}
/* Einziger CTA der Seite bis zur Kontaktsektion — deshalb durchgehend sichtbar */
.nav__cta{min-height:44px;padding:.6em 1.35em;font-size:.92rem;}

.nav__burger{
  display:none;
  width:48px;height:48px;padding:0;
  background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav__burger span{
  display:block;position:relative;
  width:26px;height:2px;background:var(--weiss);
  transition:background .2s var(--ease);
}
.nav__burger span::before,.nav__burger span::after{
  content:'';position:absolute;left:0;width:26px;height:2px;background:var(--weiss);
  transition:transform .3s var(--ease),top .3s var(--ease);
}
.nav__burger span::before{top:-8px;}
.nav__burger span::after{top:8px;}
.nav.menu-offen .nav__burger span{background:transparent;}
.nav.menu-offen .nav__burger span::before{top:0;transform:rotate(45deg);}
.nav.menu-offen .nav__burger span::after{top:0;transform:rotate(-45deg);}

/* ============================================================
   6. HERO
   ============================================================ */
.hero{
  position:relative;
  max-width:var(--maxw);margin-inline:auto;
  padding:calc(var(--nav-h) + 1.5rem) var(--gutter) 1.5rem;
  min-height:100svh;
  display:grid;
  /* Links das Video mit seiner echten Breite, rechts der Text mit dem Rest */
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4.25rem);
  align-items:center;
}
.hero__text{
  order:2;
  display:flex;flex-direction:column;justify-content:center;
}
.hero__badge{
  font-size:var(--fs-klein);font-weight:500;
  letter-spacing:.055em;color:var(--grau);
  margin-bottom:1.5rem;
}
/* nur die direkten Kinder untereinander — sonst reißt es auch die
   Trennpunkte darin auf eigene Zeilen */
.hero__badge > span{display:block;}
.hero__badge .ort{
  color:rgba(183,174,163,.62);
  letter-spacing:.04em;margin-top:.28em;
}
.hero h1{color:var(--weiss);margin-bottom:.5em;}
.hero h1 .zeile1{display:block;}
.hero h1 .zeile2{
  display:block;
  font-size:.62em;line-height:1.24;
  letter-spacing:-.01em;margin-top:0;
}
/* Kupferstrich zwischen den beiden Headline-Zeilen — trennt Aussage
   von Erläuterung. Gleiches Maß wie unter den Sektionsüberschriften. */
.hero h1 .zeile2::before{
  content:'';display:block;
  width:128px;height:2px;
  background:var(--kupfer);
  margin:1.35rem 0 1.35rem;
}
.hero__subtext{color:rgba(255,255,255,.9);max-width:34em;margin-bottom:1.25em;}
.hero__subline{
  font-size:var(--fs-klein);font-weight:500;letter-spacing:.06em;
  color:var(--grau);margin-bottom:0;
}

/* Videofläche übernimmt exakt das 9:16 der Quelle — nichts wird beschnitten.
   Sie wird dadurch schmaler als ihre Rasterspalte und steht rechtsbündig
   an der Außenkante, damit die Textspalte optisch dagegen laufen kann. */
.hero__media{
  /* füllt die Bildschirmhöhe zwischen Navigation und unterem Rand.
     Deckel bei 980px, sonst frisst die Breite (9:16!) die Textspalte auf. */
  --media-h:min(calc(100svh - var(--nav-h) - 3rem), 980px);
  order:1;
  position:relative;overflow:hidden;
  background:var(--tinte-weich);
  border-radius:var(--radius-gross);
  height:var(--media-h);
  width:calc(var(--media-h) * 9 / 16);   /* 9:16 der Quelle, nichts wird beschnitten */
  justify-self:start;
  align-self:center;
}
.hero__media video,.hero__media img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ============================================================
   7. ERKENNEN (Sektion 2)
   PERI·MENO·POST und die Problemliste verschmolzen — ein
   Erkennungsmoment statt zwei.

   OHNE JAVASCRIPT: alles sichtbar, Sektion wächst mit dem Inhalt.
   MIT JAVASCRIPT: die Sektion wird oben festgehalten, PERI/MENO/POST
   erscheinen nacheinander, blenden dann gemeinsam auf 35% ab, danach
   stapeln sich die Punkte ein. Steuerung in Abschnitt 18.
   Das Video läuft in beiden Fällen als Endlosschleife — kein Scrubben,
   das ist auf iPhones nicht flüssig zu bekommen.
   ============================================================ */
/* Randlos über die volle Fensterbreite — wie Sektion 7 und 8.
   Der Inhalt bleibt trotzdem auf Lesebreite, den Rahmen setzt
   .erkennen__inhalt. */
.erkennen__aussen{
  width:100%;
}
.erkennen{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--tinte-weich);
  text-align:center;
  padding:clamp(3rem,7vw,5.5rem) var(--gutter);
  /* Füllt die Fläche unter der Menüleiste bis zur Unterkante.
     svh statt vh: das ist die Fensterhöhe *mit* eingeblendeter
     Adresszeile — sonst wäre das Band auf dem Handy anfangs zu
     hoch und würde beim Scrollen springen.
     min-height, nicht height: wenn der Inhalt einmal mehr Platz
     braucht, darf die Sektion wachsen. Dann greift das Festhalten
     nicht mehr, siehe Messung im Skript. */
  min-height:calc(100svh - var(--nav-h));
}
.erkennen__media{position:absolute;inset:0;}
.erkennen__media video,.erkennen__media img{
  width:100%;height:100%;object-fit:cover;
  /* Hochformat in breiter Fläche — 44% legt das sichtbare Band
     auf die Gesichter, ohne die Haare oben anzuschneiden. */
  object-position:center 44%;
}
.erkennen__media::after{
  content:'';position:absolute;inset:0;
  /* kräftiger als vorher: jetzt steht Fließtext darauf, nicht nur ein Wort */
  background:linear-gradient(180deg,rgba(42,38,34,.72) 0%,rgba(42,38,34,.82) 55%,rgba(42,38,34,.90) 100%);
}
.erkennen__inhalt{position:relative;z-index:1;width:100%;max-width:54rem;}

.erkennen__wortmarke{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(.6rem,2vw,1.6rem);
  font-size:clamp(1.9rem,7vw,5.2rem);
  font-weight:800;letter-spacing:.02em;
  color:var(--weiss);           /* voll deckend beim Eintreten */
  line-height:1.05;margin-bottom:1rem;
}
.erkennen__wortmarke .punkt{color:var(--kupfer);font-size:.7em;}
.erkennen__unterzeile{
  color:var(--grau);font-size:clamp(1rem,1.5vw,1.2rem);
  max-width:32em;margin:0 auto;
}

.erkennen__punkte{margin-top:clamp(2.75rem,5.5vw,4.5rem);}
.erkennen__punkte h2{
  font-size:clamp(1.45rem,2.8vw,2.1rem);
  margin-bottom:1.4rem;
}
/* Liste linksbündig, als Block mittig gestellt — zentrierte
   Aufzählungen sind schlecht zu lesen. */
.erkennen .problemliste{
  display:inline-block;text-align:left;
  max-width:34rem;margin:0;
}
.erkennen .problem__fazit{
  max-width:34rem;margin:2rem auto 0;text-align:left;
}

/* ============================================================
   8. WARUM ANDERS (Sektion 4)
   ============================================================ */
/* Zweispalter mit stehenbleibendem Bild — von mehreren Sektionen genutzt,
   damit sie garantiert identisch aufgebaut sind. */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,5rem);align-items:start;
}
/* Das Medienfeld richtet sich nach dem Hochformat-Video: 9:16.
   Hier führt die Höhe, die Breite folgt daraus. Andersherum — Breite
   aus der Spalte, Höhe aus dem Seitenverhältnis — würde das Feld auf
   breiten Bildschirmen über 1000 Pixel hoch und die Sektion passte
   nicht mehr in die Fensterhöhe. Dann könnte sie nicht festgehalten
   werden, und genau das ist hier der Punkt. */
.split__media{
  position:sticky;top:calc(var(--nav-h) + 2.5rem);
  aspect-ratio:9/16;
  height:var(--medien-h);
  width:auto;max-width:100%;
  justify-self:center;
  border-radius:var(--radius-gross);overflow:hidden;
  background:var(--tinte-weich);
}
.split__media img,
.split__media video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
/* gespiegelt — Bild links, Text rechts */
.split--gedreht .split__text{order:2;}
.split--gedreht .split__media{order:1;}

.problemliste{margin:0 0 3.5rem;padding:0;list-style:none;}
.problemliste li{
  position:relative;
  padding-left:1.25rem;margin-bottom:.5rem;
  line-height:1.5;
  color:var(--text-body);
}
/* Mittelpunkt in Kupfer — dasselbe Zeichen wie in PERI · MENO · POST.
   line-height gegen die Schriftgröße gerechnet, damit der Punkt auf der
   Mitte der ersten Zeile sitzt und nicht darunter hängt. */
.problemliste li::before{
  content:'·';
  position:absolute;left:0;top:0;
  color:var(--kupfer);
  font-weight:800;font-size:1.6em;line-height:.94;
}
/* Schlusssatz: kein Bullet, keine Linie — gleiche Größe wie die Punkte,
   nur leiser gesetzt. Liest sich dadurch als Erklärung, nicht als achter Punkt. */
.problem__fazit{
  color:var(--text-leise);
  margin-top:1.7rem;
}

/* keine Trennlinien — der Fettdruck der Zwischentitel gliedert bereits,
   Abstand genügt */
.feature-item{margin-bottom:2.4rem;}
.feature-item:last-of-type{margin-bottom:0;}
.feature-item h3{margin-bottom:.5em;}
.feature-item p{color:var(--text-body);margin:0;}

/* Steht als These am Anfang der Sektion. Eigene Linie entfällt — die
   Überschrift darüber trägt jetzt den Kupferstrich, zwei so dicht
   beieinander wären zu viel. Trennung über Abstand. */
.zitat{margin:0 0 3.2rem;padding:0;}
.zitat blockquote{
  margin:0;font-size:clamp(1.25rem,2.1vw,1.7rem);
  font-weight:800;font-style:italic;line-height:1.28;
  color:var(--kupfer);letter-spacing:-.01em;
}
.zitat cite{
  display:block;margin-top:.85rem;
  font-size:var(--fs-klein);font-style:normal;font-weight:400;
  color:var(--text-leise);
}
/* Stellas Antwort auf das fremde Zitat — macht aus geliehener
   Autorität ihre eigene. */
.zitat__antwort{
  margin:1.3rem 0 0;
  color:var(--text-body);
}
.zitat__antwort strong{color:var(--weiss);font-weight:800;}

/* ============================================================
   9. ÜBER MICH (Sektion 5)
   ============================================================ */
/* Text links, Video rechts. Die Reihenfolge im HTML bleibt, wie sie ist —
   order verschiebt nur die Darstellung. */
.ueber__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
}
.ueber__media{order:2;}
.ueber__text{order:1;}
/* Der Text setzt erst tiefer ein: beim Eintreten in die Sektion steht
   das Video zunächst allein da, der Text zieht danach herein.
   Dieser Wert steuert zugleich das Tempo der Drehung — er verlängert
   die Strecke, auf der das Video geparkt steht. Mehr Vorlauf heißt
   langsamere Umdrehung. */
.js .ueber__text{padding-top:min(60svh, 660px);}
/* Das Video hält mittig im Fenster an, während der lange Text daran
   vorbeizieht. Es löst sich von selbst wieder, sobald das Raster zu
   Ende ist — dann stehen Video und Text unten auf derselben Linie.
   Genau das leistet position:sticky, ohne eine Zeile JavaScript.

   top mit max(): mittig, aber nie so hoch, dass die Menüleiste
   darüberliegt. Auf niedrigen Fenstern gewinnt der untere Wert.

   justify-self:end rückt das Video an die rechte Kante seiner Spalte,
   also an den Text heran — es ist durch die begrenzte Höhe schmaler
   als die Spalte. */
.ueber__media{
  position:sticky;
  top:max(calc(var(--nav-h) + 1.5rem), calc((100svh - var(--medien-h)) / 2));
  justify-self:end;
  width:auto;
}
.ueber__media video{
  display:block;
  height:var(--medien-h);
  width:auto;max-width:100%;
  aspect-ratio:9/16;
  border-radius:var(--radius);object-fit:cover;
}

.pullquote{
  margin:0 0 2rem;padding:0;
  font-size:clamp(1.35rem,2.5vw,2rem);
  font-weight:800;font-style:italic;line-height:1.24;
  letter-spacing:-.015em;color:var(--kupfer);
}
.ueber__text p{color:var(--text-body);}

/* ============================================================
   10. QUALIFIKATIONEN (Sektion 6)
   ============================================================ */
.quali__unterzeile{
  max-width:38rem;margin:0 auto clamp(2.25rem,4vw,3.25rem);
}
.quali__bereiche{display:block;margin-top:.25em;}

/* Portrait als eigene Spalte links, rechts daneben die Kupferkachel
   und darunter die Lizenzen. */
/* Drei Spalten: Porträt — Kacheln — Video. Die beiden Außenspalten sind
   exakt gleich breit, und align-items:stretch gibt ihnen die Höhe der
   mittleren Spalte. Damit sind Foto und Video ohne weiteres Zutun
   gleich groß, egal wie viele Kacheln in der Mitte stehen. */
.quali__layout{
  /* Prozent vom Raster, nicht vom Fenster: der Inhalt ist auf 1136 px
     gedeckelt, mit vw wären die Außenspalten auf großen Bildschirmen
     immer weiter gewachsen und hätten der Mitte den Platz genommen. */
  --quali-seite:clamp(190px, 24%, 300px);
  display:grid;
  grid-template-columns:minmax(0,var(--quali-seite)) minmax(0,1fr) minmax(0,var(--quali-seite));
  gap:clamp(1.1rem,2.2vw,1.75rem);
  align-items:stretch;text-align:left;
}
.quali__portrait,
.quali__video{
  position:relative;
  border-radius:var(--radius-gross);overflow:hidden;
  background:var(--tinte-weich);
  min-height:340px;
}
.quali__video video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
/* Die Höhe dieser Spalte richtet sich nach der rechten Spalte und ändert
   sich mit deren Inhalt. Der Ausschnitt wird deshalb oben verankert —
   beschnitten wird immer unten, nie der Kopf. */
.quali__portrait picture,
.quali__portrait img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 6%;
}
.quali__rechts{
  display:grid;gap:clamp(1.1rem,2.2vw,1.75rem);align-content:start;
}
.quali__haupt{
  background:var(--kupfer);color:var(--weiss);
  border-radius:var(--radius-gross);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.quali__haupt h3{color:var(--weiss);margin-bottom:.35em;}
.quali__meta{
  font-size:var(--fs-klein);font-weight:500;
  letter-spacing:.06em;color:rgba(255,255,255,.82);
  margin-bottom:.9rem;
}
.quali__haupt p:last-child{color:rgba(255,255,255,.92);margin:0;}

.quali__gitter{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,1.8vw,1.25rem);text-align:left;
}
/* Die erste Kachel läuft über beide Spalten — die medizinische A-Lizenz
   ist der stärkste der Nachweise und steht direkt unter der
   Diplom-Biologin. Die übrigen füllen danach saubere Zweierreihen. */
.quali__karte:first-child{grid-column:1 / -1;}
.quali__karte{
  border:2px solid var(--kupfer);
  border-radius:var(--radius);
  padding:1.4rem 1.5rem;
}
.quali__karte h3{
  font-size:1.05rem;line-height:1.3;
  margin-bottom:.45em;
}
.quali__karte p{
  margin:0;font-size:var(--fs-klein);
  color:var(--text-leise);line-height:1.5;
}
.quali__fussnote{
  margin-top:2rem;
  font-size:var(--fs-klein);color:var(--text-leise);
}

/* ============================================================
   11. RANDLOSE BILDSEKTIONEN (Sektion 7 und 8)
   Bewusster Bruch aus der Headerbreite.
   Das Bild liegt als <img> darunter, nicht als background-attachment:fixed —
   damit bleibt der Ausschnitt auf jeder Fenstergröße berechenbar und es
   ruckelt nicht auf iOS. Die Parallax-Bewegung steht in Abschnitt 18.
   ============================================================ */
.randlos{position:relative;overflow:hidden;}
.randlos__bild{position:absolute;inset:0;}
.randlos__bild img{width:100%;height:100%;object-fit:cover;}
.randlos__bild::after{
  content:'';position:absolute;inset:0;
  background:rgba(42,38,34,.86);
}
.randlos__inhalt{position:relative;z-index:1;}

/* Reine Bildbänder, kein Text */
.trenner{
  height:clamp(220px,40vh,420px);
}
.trenner .randlos__bild img{object-position:center 45%;}

/* Das Dachbild zeigt eine ganze Figur vor der Skyline und braucht
   deshalb ein höheres Band — in einem flachen Streifen bliebe von
   Stella nichts als der Rumpf.
   Der Ausschnitt ist oben verankert (15 %), damit Kopf und Himmel
   sicher im Bild bleiben; die Füße fallen bewusst heraus. */
.trenner--dach{
  height:clamp(280px,50vh,560px);
}
.trenner--dach .randlos__bild img{object-position:center 15%;}
.js .trenner--dach .randlos__bild img{
  height:124%;
  top:-12%;
}
.trenner .randlos__bild::after{display:none;}

/* Sektion 7 — Kraft statt Kalorienzählen */
.kraft__intro{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,3.5rem);}
.kraft__intro p{color:var(--text-body);}
.kraft__gitter{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(2rem,4vw,3rem);
}
.kraft__gitter h3{margin-bottom:.5em;}
.kraft__gitter p{margin:0;color:var(--text-body);}
.kraft__schluss{
  margin-top:clamp(2.75rem,5vw,4rem);
  padding-top:2rem;
  border-top:1px solid var(--linie);
  font-size:clamp(1.1rem,1.9vw,1.4rem);
  font-style:italic;font-weight:500;
  color:var(--weiss);max-width:44rem;
}

/* ============================================================
   12. ANGEBOTE (Sektion 9)
   ============================================================ */
/* Sechs Karten in einer seitlich verschiebbaren Reihe. Reihenfolge folgt
   dem Weg vom Unverbindlichen zum Verbindlichen. */
.angebote__schieber{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(262px,288px);
  gap:1.1rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-bottom:1.1rem;
  scrollbar-color:var(--kupfer) rgba(183,174,163,.14);
  scrollbar-width:thin;
}
.angebote__schieber::-webkit-scrollbar{height:8px;}
.angebote__schieber::-webkit-scrollbar-track{background:rgba(183,174,163,.14);border-radius:99px;}
.angebote__schieber::-webkit-scrollbar-thumb{background:var(--kupfer);border-radius:99px;}
.angebote__hinweis-scroll{
  font-size:var(--fs-mini);color:var(--text-leise);
  letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 1rem;
}

.paket{
  display:flex;flex-direction:column;
  scroll-snap-align:start;
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  padding:clamp(1.4rem,2.4vw,1.8rem);
  background:var(--tinte-weich);
  transition:border-color .25s var(--ease);
}
/* Kupfer erscheint nur unter der Maus — die Marken oben markieren die
   besonderen Karten, der Rand markiert die gerade betrachtete.
   focus-within, damit es auch bei Tastaturbedienung greift. */
.paket:hover,
.paket:focus-within{border-color:var(--kupfer);}
.paket:hover .btn,
.paket:focus-within .btn{
  background:var(--kupfer);color:var(--weiss);border-color:var(--kupfer);
}
.paket__tag{
  justify-self:start;align-self:start;
  background:var(--kupfer);color:var(--weiss);
  font-size:var(--fs-mini);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.35em .85em;border-radius:99px;
  margin:0;
}
/* Titel und Zeile darunter bekommen feste zwei Zeilen — sonst beginnt der
   Fließtext in jeder Karte auf anderer Höhe, sobald ein Titel umbricht. */
.paket__name{
  font-size:1.4rem;margin-bottom:.2em;
  min-height:2.2em;          /* 2 × Zeilenhöhe 1.1 */
}
.paket__fuer{
  font-size:var(--fs-klein);color:var(--kupfer);
  font-weight:500;letter-spacing:.04em;
  line-height:1.4;
  min-height:2.8em;          /* 2 × Zeilenhöhe 1.4 */
  margin-bottom:1.2rem;
}
.paket__inhalt{color:var(--text-body);font-size:var(--fs-klein);line-height:1.6;margin-bottom:1.5rem;}
/* Preisblock sitzt unten — dadurch stehen die Preise aller Karten
   auf einer Linie, egal wie lang der Text darüber ist.
   Feste Zeile für die Marke, auch in Karten ohne Marke: sonst würden
   die zwei ausgezeichneten Karten ihren Preis nach unten schieben. */
.paket__preisblock{
  margin-top:auto;
  display:grid;
  grid-template-areas:"marke" "preis" "klein" "aktion";
  /* Zeile höher als die Marke selbst — der Überschuss wird zum Abstand
     nach unten, weil die Marke oben ausgerichtet ist. */
  grid-template-rows:3.3rem auto auto auto;
}
.paket__tag{grid-area:marke;}
.paket__preis{grid-area:preis;}
.paket__klein{grid-area:klein;}
.paket__preisblock .btn{grid-area:aktion;}
.paket__preis{
  font-size:clamp(1.75rem,2.6vw,2.15rem);font-weight:800;
  color:var(--weiss);line-height:1;letter-spacing:-.02em;
  margin-bottom:.4rem;
}
.paket--gratis .paket__preis{color:var(--kupfer);}
.paket__einheit{font-size:.42em;font-weight:500;letter-spacing:0;}
.paket__klein{
  font-size:var(--fs-mini);color:var(--text-leise);
  line-height:1.5;margin-bottom:1.4rem;
  min-height:2.6em;   /* zwei Zeilen reserviert, hält die Preise in einer Flucht */
}
/* volle Kartenbreite, engere Innenabstände und kein Umbruch — damit alle
   sechs Buttons garantiert dieselbe Höhe haben */
.paket .btn{
  width:100%;
  padding-inline:1rem;
  white-space:nowrap;
}

.angebote__hinweis{
  margin-top:2rem;font-size:var(--fs-klein);
  color:var(--text-leise);text-align:center;
}
.angebote__app{
  margin-top:1.75rem;padding:1.35rem 1.6rem;
  border:1px solid var(--linie);border-radius:var(--radius);
  font-size:var(--fs-klein);color:var(--text-body);line-height:1.6;
}
.angebote__app strong{color:var(--weiss);font-weight:800;}

/* ============================================================
   13. DEIN WEG ZU MIR (Sektion 10)
   ============================================================ */
.schritte{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(2rem,4vw,3rem);
  margin-bottom:clamp(3rem,6vw,4.5rem);
}
.schritt h3{margin-bottom:.5em;}
.schritt p{margin:0;color:var(--text-body);}
/* muss NACH ".schritt p" stehen, sonst überschreibt dessen Farbe das Kupfer */
.schritt .schritt__nr{
  font-size:3.2rem;font-weight:800;line-height:1;
  color:var(--kupfer);letter-spacing:-.03em;
  margin-bottom:.6rem;
}
.weg__abschluss{
  font-size:clamp(1.1rem,1.9vw,1.4rem);
  font-weight:500;color:var(--weiss);
  text-wrap:pretty;   /* kein einzelnes Wort auf der letzten Zeile */
  margin-bottom:2rem;
}

/* ============================================================
   14. KUNDENSTIMMEN (Sektion 11)
   ============================================================ */
.stimmen__gitter{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;align-items:stretch;
}
.stimme{
  display:flex;flex-direction:column;
  background:var(--tinte-weich);
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  padding:clamp(1.6rem,2.8vw,2.1rem);
}
.stimme blockquote{
  margin:0 0 1.75rem;
  font-size:1.05rem;line-height:1.6;
  color:var(--text-body);
}
/* Person am Kartenfuß — Kreis ist die einzige runde Form der Seite und
   steht deshalb ausschließlich für Menschen. */
.stimme__person{
  margin-top:auto;
  display:grid;grid-template-columns:auto 1fr;
  gap:1.15rem;align-items:center;
}
.stimme__bild{
  width:84px;height:84px;flex-shrink:0;
  border-radius:50%;overflow:hidden;
  background:var(--kupfer);
  display:grid;place-items:center;
  font-size:2rem;font-weight:800;color:var(--weiss);
  line-height:1;user-select:none;
}
.stimme__bild img{
  width:100%;height:100%;object-fit:cover;
  border-radius:50%;
}
.stimme cite{
  font-size:var(--fs-klein);font-style:normal;
  color:var(--text-leise);line-height:1.45;
}
.stimme cite strong{display:block;color:var(--weiss);font-weight:800;}
.stimmen__link{margin-top:2.25rem;}

/* ============================================================
   15. KONTAKT (Sektion 12)
   ============================================================ */
.kontakt__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
}
.kontakt__lead{margin-bottom:2.5rem;}

/* Gleichmäßiger Rhythmus: Text — 1,15rem — Linie — 1,15rem — Text.
   Auch der letzte Eintrag behält Linie und Abstand, sonst entsteht
   unten ein größerer Sprung als zwischen den Einträgen.

   Das Zeilengerüst sitzt auf dem Listenelement, nicht auf dem Link —
   nur so kann eine Zeile wie Instagram zwei Konten untereinander tragen. */
.kontaktwege{list-style:none;margin:0 0 1.15rem;padding:0;display:grid;gap:1.15rem;}
.kontaktwege li{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
  padding-bottom:1.15rem;
  border-bottom:1px solid var(--linie);
}
.kontaktwege a{text-decoration:none;justify-self:start;}
/* zwei Konten unter einer Beschriftung */
.kontaktwege__konten{display:grid;gap:.55rem;justify-items:start;}
.kontaktwege .was{
  font-size:var(--fs-mini);letter-spacing:.14em;text-transform:uppercase;
  color:var(--kupfer);min-width:7.5rem;
}
/* Weiß wie zuvor — der wachsende Kupferstrich allein zeigt den Link an.
   justify-self:start ist entscheidend: sonst füllt der Wert die ganze
   Rasterspalte und der Strich liefe bis zum rechten Rand. */
.kontaktwege .wert{
  font-weight:500;
  color:var(--weiss);
  justify-self:start;
}

/* keine eigene Linie mehr — die des letzten Kontaktwegs übernimmt das */
.kontakt__ort{
  font-size:var(--fs-klein);color:var(--text-leise);line-height:1.6;
}
.kontakt__ort strong{display:block;color:var(--weiss);font-weight:800;margin-bottom:.2em;}


/* --- Formular --- */
.formular{
  background:var(--tinte-weich);
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  padding:clamp(1.6rem,3vw,2.5rem);
  display:grid;gap:1.25rem;
}
.feld{display:grid;gap:.45rem;}
.feld label{
  font-size:var(--fs-klein);font-weight:500;
  letter-spacing:.03em;color:var(--text-leise);
}
.feld .pflicht{color:var(--kupfer);}
.feld input,
.feld select,
.feld textarea{
  font-family:inherit;font-size:1rem;
  color:var(--weiss);background:rgba(0,0,0,.18);
  border:1px solid var(--linie);border-radius:var(--radius);
  padding:.85em 1em;min-height:52px;width:100%;
  transition:border-color .2s var(--ease);
}
.feld textarea{min-height:120px;resize:vertical;line-height:1.55;}
.feld select{appearance:none;cursor:pointer;}
.feld input:focus,
.feld select:focus,
.feld textarea:focus{border-color:var(--kupfer);outline:none;}
.feld input::placeholder,
.feld textarea::placeholder{color:rgba(183,174,163,.5);}

.einwilligung{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
  font-size:var(--fs-mini);color:var(--text-leise);line-height:1.55;
}
.einwilligung input{
  width:20px;height:20px;min-height:0;margin-top:.15em;
  accent-color:var(--kupfer);cursor:pointer;
}
/* ============================================================
   16. FAQ (Sektion 13)
   ============================================================ */
.faq{max-width:52rem;}
.faq details{
  border-bottom:1px solid var(--linie);
}
.faq summary{
  display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;
  padding:1.35rem 0;cursor:pointer;list-style:none;
  font-size:clamp(1.05rem,1.6vw,1.2rem);font-weight:800;
  color:var(--weiss);letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none;}
/* justify-self:start ist nötig, sonst füllt die Frage die ganze
   Rasterspalte und der Strich liefe bis zum Plus. */
.faq summary span{justify-self:start;}
/* Plus, das sich beim Öffnen zum Minus dreht */
.faq summary::after{
  content:'';
  width:16px;height:16px;flex-shrink:0;
  background:
    linear-gradient(var(--kupfer),var(--kupfer)) center/100% 2px no-repeat,
    linear-gradient(var(--kupfer),var(--kupfer)) center/2px 100% no-repeat;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(90deg);background-size:100% 2px,0 100%;}
.faq details p{
  margin:0;padding:0 0 1.5rem;
  max-width:44rem;color:var(--text-body);
}

/* ============================================================
   16b. INSTAGRAM-BAND — die zweite Tür
   Für alle, die bis hierher gelesen haben, aber noch nicht buchen
   wollen. Bewusst nur Textlinks, kein eingebetteter Feed: ein Widget
   würde beim bloßen Seitenaufruf Daten an Meta senden.
   ============================================================ */
/* volle Spaltenbreite, aber mit ausgeglichenen Zeilen — sonst hängt beim
   Umbruch ein kurzer Rest allein in der zweiten Zeile */
/* Signet rechts, exakt so hoch wie der Textblock: Oberkante auf
   Oberkante der Überschrift, Unterkante auf der letzten Textzeile.

   Es liegt als Hintergrundbild auf diesem Block, nicht als <img>
   daneben. Grund: Ein Bild im Rasterfluss bringt seine eigene Größe
   mit (hier 900 × 742) und macht die Zeile damit selbst höher, statt
   sich der Textspalte anzupassen — genau das war der erste Anlauf,
   und das Signet wurde doppelt so hoch wie der Text.
   Als Hintergrund kann es die Höhe nicht beeinflussen: background-size
   „auto 100 %" nimmt die Höhe des Blocks und leitet die Breite daraus
   ab. Es ist reine Dekoration, also auch inhaltlich richtig so.
   Der rechte Innenabstand hält den Text davon frei. */
.folgen__kopf{
  background-image:url('assets/logo/signet-kupfer-leise.svg');
  background-repeat:no-repeat;
  background-position:right center;
  background-size:auto 100%;
  padding-right:clamp(9rem, 21%, 15rem);
  margin-bottom:clamp(2rem,4vw,2.75rem);
}
.folgen__kopf h2{margin-bottom:0;}
@media (max-width:640px){
  .folgen__kopf{background-image:none;padding-right:0;}
}

.folgen__intro{
  margin:1.25rem 0 0;color:var(--text-body);
  text-wrap:balance;
}
.folgen__konten{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.25rem;
}
.folgen__konto{
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,2.8vw,2rem);
  border:1px solid var(--linie);border-radius:var(--radius-gross);
  text-decoration:none;
  transition:border-color .25s var(--ease);
}
.folgen__konto:hover{border-color:var(--kupfer);}
.folgen__konto .rolle{
  font-size:var(--fs-mini);letter-spacing:.14em;text-transform:uppercase;
  color:var(--kupfer);margin-bottom:.6rem;
}
/* align-self:flex-start: die Kachel ist eine Flexspalte, ohne das
   liefe der Strich über die volle Kachelbreite statt nur unter dem Namen. */
.folgen__konto .name{
  font-size:1.35rem;font-weight:800;color:var(--weiss);
  letter-spacing:-.01em;margin-bottom:.5rem;
  align-self:flex-start;
}
.folgen__konto .was{
  font-size:var(--fs-klein);color:var(--text-body);line-height:1.6;
}

/* ============================================================
   17. FOOTER
   ============================================================ */
.footer{
  background:var(--tinte-weich);
  padding-block:clamp(3rem,6vw,4.5rem);
  margin-top:clamp(3rem,6vw,5rem);
}
/* 1fr auto 1fr statt auto 1fr auto: nur so ist die mittlere Spalte
   wirklich auf der Seitenmitte. Sonst teilt sie sich den Rest zwischen
   zwei verschieden breiten Nachbarn und sitzt schief. */
.footer__oben{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:2rem;align-items:center;
  padding-bottom:2rem;border-bottom:1px solid var(--linie);
}
.footer__oben > :first-child{justify-self:start;}
.footer__sozial{justify-self:end;}
.footer__mitte{
  /* margin:0 ist entscheidend: der geerbte Absatzabstand nach unten
     macht den Kasten unten höher und schiebt die Schrift beim
     Zentrieren nach oben — sie steht dann nicht auf einer Linie
     mit Logo und Instagram-Links. */
  margin:0;
  font-size:var(--fs-klein);color:var(--text-leise);
  text-align:center;letter-spacing:.04em;
}
.footer__sozial{display:flex;gap:1.5rem;justify-self:end;}
.footer__sozial a{
  font-size:var(--fs-klein);color:var(--text-leise);
  white-space:nowrap;
}
.footer__unten{
  margin-top:1.75rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  justify-content:space-between;align-items:center;
  font-size:var(--fs-mini);color:var(--text-leise);
}
.footer__unten p{margin:0;}
.footer__unten nav{display:flex;gap:1.5rem;}
/* Farbe bleibt grau — der Strich allein zeigt den Link an. */

/* ============================================================
   18. BEWEGUNG BEIM SCROLLEN  (Etappe 5)

   Grundsatz: Jede Bewegung ist Zugabe. Alles, was hier versteckt
   startet, hängt an der Klasse .js am <html>-Element — ohne
   JavaScript ist die Seite vollständig und statisch lesbar.
   Das Festhalten von Sektion 2 macht position:sticky, also der
   Browser selbst. Das ist der einzige Weg, der auf iPhones nicht
   bricht, wenn beim Scrollen die Adresszeile verschwindet und sich
   die Fensterhöhe mitten in der Bewegung ändert.
   ============================================================ */

/* --- Auftakt im Hero ---
   Die Zeilen warten unsichtbar und etwas tiefer, bis das Video läuft.
   Nur an .js gekoppelt: ohne JavaScript steht alles sofort da. */
.js .hero-zeile{
  opacity:0;
  transform:translateY(1.6rem);
  will-change:opacity,transform;
}
.js .hero-zeile.ist-da{
  opacity:1;
  transform:none;
  transition:opacity .55s var(--ease), transform .6s var(--ease);
}
/* Nur für den Fall „Bewegung reduzieren": sofort da, ohne Übergang. */
.js .hero-zeile.ohne-uebergang{transition:none;}

/* --- Sektion 2 festhalten ---
   Der äußere Rahmen wird künstlich hoch. Die Sektion darin klebt
   oben fest, solange dieser Rahmen durchs Bild wandert. Die Höhe
   setzt JavaScript, nachdem es gemessen hat, ob die Sektion
   überhaupt ins Fenster passt — sonst bliebe ihr unteres Ende
   unerreichbar. */
.erkennen__aussen.haelt-fest{
  height:var(--haltestrecke);
}
.erkennen__aussen.haelt-fest .erkennen{
  position:sticky;
  top:var(--nav-h);
}

/* --- Sektion 3 festhalten ---
   Gleiche Mechanik. Beim Festhalten wird der Außenabstand kleiner:
   eine Sektion, die den Bildschirm füllt, braucht keinen großen
   Rand mehr, und der gewonnene Platz entscheidet oft darüber, ob
   sie überhaupt in die Fensterhöhe passt.
   Das innere sticky des Fotos wird abgeschaltet — es hätte nichts
   mehr zu tun und würde das Bild nur verschieben. */
.warum__aussen.haelt-fest,
.erreichst__aussen.haelt-fest{
  height:var(--haltestrecke);
}
.warum__aussen.haelt-fest .warum,
.erreichst__aussen.haelt-fest .erreichst{
  position:sticky;
  top:var(--nav-h);
  padding-block:clamp(1.25rem,3vw,2.5rem);
  min-height:calc(100svh - var(--nav-h));
  display:flex;align-items:center;
}
.warum__aussen.haelt-fest .wrap,
.erreichst__aussen.haelt-fest .wrap{width:100%;}
/* Text und Medienfeld schließen unten auf derselben Linie ab.
   Nur im festgehaltenen Zustand — läuft der Text vorbei, braucht
   das klebende Bild oben Anlauf. */
.warum__aussen.haelt-fest .split,
.erreichst__aussen.haelt-fest .split{align-items:end;}
.warum__aussen.haelt-fest .split__media,
.erreichst__aussen.haelt-fest .split__media{position:relative;top:auto;}

/* Ausgangszustand: die drei Wörter warten unsichtbar und minimal
   tiefer, die Punkte darunter ebenso. transform statt margin —
   nur so bleibt die Bewegung auf der Grafikkarte und ruckelt nicht. */
.js .erkennen__wortmarke .wort,
.js .erkennen__wortmarke .punkt{
  opacity:0;
  transform:translateY(.22em);
  will-change:opacity,transform;
}
.js .erkennen__unterzeile,
.js .erkennen__punkte h2,
.js .erkennen__punkte li,
.js .erkennen__punkte .problem__fazit{
  opacity:0;
  transform:translateY(1.4rem);
  will-change:opacity,transform;
}
/* Die Wortmarke insgesamt wird später gemeinsam abgeblendet. */
.erkennen__wortmarke{will-change:opacity;}

/* --- Sektion 3 und 4: aktiver Block hell, die anderen zurückgenommen ---
   Zurückgenommen ist der Ausgangszustand, hell die Ausnahme. Nur so
   sind beim Eintreten in die Sektion wirklich alle Punkte abgedunkelt —
   auch bevor das Skript das erste Mal gerechnet hat. */
.js #warum .feature-item,
.js #erreichst .feature-item{
  opacity:.28;
  transition:opacity .45s var(--ease);
}
.js #warum .feature-item.ist-hell,
.js #erreichst .feature-item.ist-hell{opacity:1;}

.split__media img,
.split__media video{
  transition:opacity .6s var(--ease);
}

/* --- Randlose Bildsektionen: das Bild wandert langsamer als die Seite ---
   Das Bild ist bewusst höher als sein Rahmen, damit die Verschiebung
   oben und unten nicht ins Leere läuft. */
.js .randlos__bild img{
  height:130%;
  top:-15%;
  position:absolute;
  left:0;width:100%;
  will-change:transform;
}
/* Die Trenner tragen keinen Text und sind flach — dort darf die
   Bewegung deutlich kräftiger sein. Mehr Überstand heißt zugleich
   mehr Spielraum für den Ausschlag im Skript. */
.js .trenner .randlos__bild img{
  height:160%;
  top:-30%;
}

/* --- Wer im Betriebssystem weniger Bewegung eingestellt hat,
       bekommt die Seite ohne jede Animation. --- */
@media (prefers-reduced-motion: reduce){
  .js .hero-zeile,
  .js .erkennen__wortmarke .wort,
  .js .erkennen__wortmarke .punkt,
  .js .erkennen__unterzeile,
  .js .erkennen__punkte h2,
  .js .erkennen__punkte li,
  .js .erkennen__punkte .problem__fazit,
  .js .erkennen__wortmarke{
    opacity:1 !important;transform:none !important;
  }
  .js #warum .feature-item,
  .js #erreichst .feature-item{opacity:1;}
  .js .ueber__text{padding-top:0;}
  .js .randlos__bild img{height:100%;top:0;transform:none !important;}
  .erkennen__aussen.haelt-fest{height:auto;}
  .erkennen__aussen.haelt-fest .erkennen{position:relative;top:0;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   18b. DANKE-SEITE (danke.html)
   Zielseite nach erfolgreichem Absenden des Kontaktformulars —
   siehe "_next"-Feld in kontakt.html.
   ============================================================ */
.danke__haken{margin:0 auto clamp(1.25rem,3vw,1.75rem);}
.danke__aktionen{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1rem;margin-top:clamp(1.5rem,3vw,2.25rem);
}

/* ============================================================
   19. RESPONSIVE
   ============================================================ */
/* ------------------------------------------------------------
   TABLET — 761 bis 1100 px, also auch ein iPad hochkant.
   Das Layout bleibt zweispaltig wie am Rechner. Damit das aufgeht,
   müssen die Hochformat-Medien schrumpfen: Ein 9:16-Feld von 860 px
   Höhe wäre 484 px breit und ließe der Textspalte bei 768 px
   Fensterbreite nur noch rund 170 px. Mit 560 px Höhe sind es 315 px
   Breite und der Text behält gut 330 px.
   ------------------------------------------------------------ */
@media (max-width:1100px) and (min-width:761px){
  :root{--medien-h:min(calc(100svh - var(--nav-h) - 5rem), 560px);}
  .hero__media{--media-h:min(calc(100svh - var(--nav-h) - 3rem), 660px);}

  /* Für drei Spalten reicht es nicht mehr: Porträt und Kacheln
     nebeneinander, das Video quer darunter. */
  .quali__layout{grid-template-columns:minmax(0,250px) minmax(0,1fr);}
  .quali__video{grid-column:1 / -1;aspect-ratio:16/9;min-height:0;}
}
/* Darunter wird auch die Kachelreihe zu eng für zwei nebeneinander. */
@media (max-width:900px) and (min-width:761px){
  .quali__gitter{grid-template-columns:1fr;}
}

/* ------------------------------------------------------------
   KLEINE GERÄTE — ab 760 px abwärts. Ein iPad hochkant (768 bis 834)
   bleibt bewusst darüber und bekommt die Rechnerfassung; erst ab
   iPad mini (744) und Telefonen wird einspaltig.
   ------------------------------------------------------------ */
@media (max-width:760px){
  .split,.ueber__grid,.kontakt__grid,.folgen{grid-template-columns:1fr;}
  .footer__oben{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.5rem;}
  .footer__unten{justify-content:center;text-align:center;}
  /* Einspaltig: Video wieder normal im Fluss, Höhe folgt der Breite,
     und es steht wie gehabt über dem Text. */
  .ueber__media{position:relative;top:auto;justify-self:center;width:100%;max-width:420px;order:1;}
  .ueber__media video{height:auto;width:100%;}
  /* Der Vorlauf des Textes gehört zur zweispaltigen Fassung: Er hält
     das Video frei und verlängert die Strecke für die Drehung. Hier
     stünde er zwischen Video und Text und risse ein 60-svh-Loch. */
  .js .ueber__text{order:2;padding-top:0;}
  .quali__layout{grid-template-columns:1fr;}
  .quali__portrait,
  .quali__video{aspect-ratio:4/5;min-height:0;max-width:420px;margin-inline:auto;width:100%;}
  .quali__gitter{grid-template-columns:1fr;}
  /* Einspaltig klebt das Bild oben und der Text zieht darunter vorbei;
     dabei wechseln die Fotos durch.
     Spalte als Flexbox, nicht als Raster: In einem einspaltigen Raster
     ist jede Zeile genau so hoch wie ihr Inhalt — ein klebendes Element
     hätte dort keine Strecke, auf der es stehen bleiben könnte. In
     einer Flexspalte reicht sein Bezugsrahmen über den Text mit. */
  .split{display:flex;flex-direction:column;gap:1.75rem;}
  .split__text{order:0;}
  .split__media{
    position:sticky;top:calc(var(--nav-h) + .5rem);
    order:-1;
    width:100%;height:min(44svh,400px);
    max-height:none;aspect-ratio:auto;
    z-index:1;
  }
  /* Sektion 3: einspaltig kein Video, nur die drei Fotos. Ein Video,
     das beim Scrollen an einem vorbeizieht, kostet Daten und Akku und
     bringt auf einem kleinen Schirm wenig. */
  #sticky-media video{display:none;}
}

/* ------------------------------------------------------------
   Die Stufen im Überblick:

   ≥ 1101  volle Fassung
   761–1100  Tablet: zweispaltig wie am Rechner, nur die
             Hochformat-Medien und die Menüschrift kleiner.
             Ein iPad hochkant (768–834) fällt hierher.
   ≤ 760   kleine Geräte: einspaltig, Bild klebt oben,
           Hamburger-Menü. Ab iPad mini (744) abwärts.
   ≤ 640   nur Telefone: engere Abstände, eigener
           Trenner-Ausschnitt, kein Signet
   ------------------------------------------------------------ */

/* Hero einspaltig — erst bei kleinen Geräten. Auf dem Tablet hochkant
   bleibt er zweispaltig, das Video ist dort über den Deckel im
   Tablet-Block schon schmal genug. */
@media (max-width:760px){
  .hero{
    grid-template-columns:1fr;min-height:0;
    gap:2rem;
    padding-top:calc(var(--nav-h) + 1.25rem);
  }
  .hero__media{
    --media-h:clamp(380px, 66svh, 620px);
    justify-self:center;
  }

  :root{--nav-h:66px;}

  .nav__menu{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--tinte);
    padding:.5rem var(--gutter) 1.75rem;
    box-shadow:0 18px 30px rgba(42,38,34,.3);
    transform:translateY(-130%);
    opacity:0;visibility:hidden;
    transition:transform .38s var(--ease),opacity .28s var(--ease),visibility .38s;
  }
  .nav.menu-offen{background:var(--tinte);}
  .nav.menu-offen .nav__menu{transform:translateY(0);opacity:1;visibility:visible;}
  .nav__link{
    padding:.95rem 0;font-size:1.05rem;
    border-bottom:1px solid rgba(183,174,163,.2);
  }
  .nav__link::after{display:none;}
  .nav__cta{margin-top:1.25rem;width:100%;min-height:52px;}
  .nav__burger{display:flex;}
}

/* Nur Telefone. Ein Tablet hochkant hat genug Platz für die normalen
   Abstände — dort wirkte das Zusammenrücken gedrängt. */
@media (max-width:640px){
  :root{--sektion-y:clamp(2.25rem, 5vw, 4rem);}
}

/* Enge Laptops / Tablet quer: Logo und Menü müssen sich die Zeile teilen.
   Claim und Trennstrich weichen, Signet + Namenszug bleiben. */
/* min-width:761px ist wichtig: Ohne diese Grenze griffen die engen
   Werte auch im aufgeklappten Hamburger-Menü und überschrieben dort
   die größere Schrift und den Abstand null — die Regeln stehen im
   Stylesheet weiter unten und gewinnen sonst. */
@media (max-width:1080px) and (min-width:761px){
  .nav__logo{--logo-h:36px;}
  .nav__logo .logo-zeile__strich,
  .nav__logo .logo-zeile__claim{display:none;}
  .nav__menu{gap:1.05rem;}
  .nav__link{font-size:.9rem;}
}
/* Das Logo darf auch im Hamburger-Bereich schmaler werden. */
@media (max-width:1080px){
  .nav__logo{--logo-h:36px;}
  .nav__logo .logo-zeile__strich,
  .nav__logo .logo-zeile__claim{display:none;}
}
/* Tablet hochkant: Das Menü bleibt vollständig, muss sich dafür aber
   deutlich zusammennehmen. Ohne diese Stufe passte es nicht in die
   Zeile und wäre umgebrochen. */
@media (max-width:900px) and (min-width:761px){
  .nav__logo{--logo-h:32px;}
  .nav__menu{gap:.8rem;}
  .nav__link{font-size:.83rem;}
  .nav__cta{font-size:.83rem;padding:.55em 1em;}
}
@media (max-width:560px){
  .nav__logo{--logo-h:33px;}
}
@media (max-width:360px){
  .nav__logo{--logo-h:29px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}