/* ==========================================================================
   Fenster Hawara – Stylesheet
   Fließende Typo: 1rem entspricht 1/160 der Viewportbreite, dadurch skaliert
   die gesamte Seite stufenlos mit und braucht keine Font-Breakpoints.
   ========================================================================== */

@font-face{font-family:Grotesk;src:url(/assets/fonts/grotesk-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Grotesk;src:url(/assets/fonts/grotesk-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Mono;src:url(/assets/fonts/mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --size:1600;
  --fs:calc((100vw / var(--size)) * 10);
  --black:#0f1417;
  --grey:#212325;
  --cream:#f3f0ec;
  --sand:#d9d4cc;
  --accent:#8B9694;          /* Markengrau aus dem Logo */
  --sans:Grotesk,"Helvetica Neue",Arial,sans-serif;
  --mono:Mono,"SFMono-Regular",Consolas,monospace;
  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
@media (max-width:700px){ :root{ --size:430 } }

*,*::before,*::after{box-sizing:border-box}
*{margin:0;-webkit-tap-highlight-color:transparent}
html{font-size:var(--fs);scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);font-size:1.6rem;line-height:1.6;color:var(--grey);
  background:var(--cream);overflow-x:hidden}
body.is-locked{overflow:hidden}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}

/* --- Bausteine ---------------------------------------------------------- */
.label{font-family:var(--mono);font-size:1.15rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);position:relative;padding-left:1.8rem}
.label::before{content:"";position:absolute;left:0;top:.45em;width:.6rem;height:.6rem;
  background:var(--accent);transform:rotate(45deg)}
.label--light{color:var(--sand)}
.label--light::before{background:var(--sand)}

.btn{display:inline-flex;align-items:center;gap:.9rem;font-family:var(--mono);
  font-size:1.2rem;letter-spacing:.12em;text-transform:uppercase;
  padding:1.3rem 2.2rem;border:1px solid color-mix(in srgb,var(--grey) 22%,transparent);
  border-radius:0;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn:hover{background:var(--grey);border-color:var(--grey);color:var(--cream)}
/* Auf Touchgeräten kam der Knopf auf 43px – knapp unter dem Richtmaß von 44. */
@media (max-width:700px){ .btn{padding:1.55rem 2.2rem} }
.btn--solid{background:var(--grey);border-color:var(--grey);color:var(--cream)}
.btn--solid:hover{background:transparent;color:var(--grey);border-color:var(--grey)}
.arrow{font-size:1.4em;line-height:0}

/* --- Kennzeichnung KI-erzeugter Medien -----------------------------------
   Sämtliche Fotos und Videos dieser Seite sind KI-erzeugt und werden als
   solche gekennzeichnet (Transparenzpflicht nach Art. 50 der EU-KI-VO).
   Bewusst im Markup und nicht im Skript: Die Angabe muss auch dann stehen,
   wenn JavaScript nicht läuft. Klein und zurückhaltend, aber auf jedem
   Medium an derselben Stelle – unten rechts.
   Zurückhaltend, aber nicht unsichtbar: Der Schatten ersetzt den früheren
   Hintergrundbalken und hält die Angabe auch auf hellen Bildstellen lesbar.
   Weiter abschwächen sollte man sie nicht – sie muss erkennbar bleiben.    */
.kimark{position:absolute;z-index:3;right:1.2rem;bottom:1rem;
  font-family:var(--mono);font-size:.85rem;letter-spacing:.1em;
  text-transform:uppercase;line-height:1;white-space:nowrap;
  color:rgba(255,255,255,.42);text-shadow:0 0 .8rem rgba(0,0,0,.75);
  pointer-events:none;user-select:none}

/* --- Ladebildschirm ----------------------------------------------------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--cream);
  display:flex;align-items:center;justify-content:center}
.loader.is-done{opacity:0;visibility:hidden;transition:opacity .6s var(--ease-io),visibility .6s}
.loader__logo{display:flex;align-items:center;gap:1.6rem}
.loader__mark{position:relative;width:4.4rem;height:4.4rem;
  -webkit-mask:url(/assets/logo.svg) center/contain no-repeat;
          mask:url(/assets/logo.svg) center/contain no-repeat;
  background:color-mix(in srgb,var(--grey) 16%,transparent)}
.loader__fill{position:absolute;inset:0;background:var(--grey)}
.loader__word{overflow:hidden}
.loader__word span{display:block;font-size:3.2rem;font-weight:700;letter-spacing:-.03em}
.loader__word .buchstabe{display:inline-block}

/* --- Kopfzeile ---------------------------------------------------------- */
/* Vorher lag hier mix-blend-mode:difference. Über flächigen Abschnitten
   funktioniert das, über einem Foto nicht: Schriftzug und Knopf wurden auf dem
   hellen Hero praktisch unsichtbar. Stattdessen schaltet main.js die Farbe
   passend zum Abschnitt dahinter um – über Bildern zusätzlich mit weichem
   Schatten, damit die Schrift auf jedem Bildinhalt trägt.                  */
.head{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:2.6rem 3.2rem;color:#fff;
  transition:color .4s var(--ease),text-shadow .4s var(--ease)}
.head.is-hell{color:#fff;text-shadow:0 .1rem 1.4rem rgba(0,0,0,.55)}
.head.is-dunkel{color:var(--grey);text-shadow:none}
/* Die zweite Hero-Reihe trägt mittig dieselbe Art Beschriftung wie die
   Kopfzeile und ist ebenfalls weiß. Läuft sie durch das Kopfband, stapeln
   sich beide sichtbar übereinander. Im Vorbild tritt das nicht auf, weil die
   Kopfzeile dort mitscrollt und längst weg ist. Für genau diese Strecke
   blenden wir sie deshalb aus – danach kommt sie zurück.                   */
.head{transition:color .4s var(--ease),text-shadow .4s var(--ease),
  opacity .35s var(--ease),transform .35s var(--ease)}
.head.is-fort{opacity:0;pointer-events:none;transform:translateY(-1.2rem)}
.head__brand{font-weight:700;font-size:1.9rem;letter-spacing:-.02em}
.head__quote{position:absolute;right:3.2rem;top:50%;transform:translateY(-50%)}
.head__quote{font-family:var(--mono);font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.8rem}
/* Auf schmalen Fenstern reicht die Breite nicht für Schriftzug und Knopf
   nebeneinander – sie lagen übereinander. Der Knopf entfällt hier; „Angebot
   anfordern" steht weiterhin im Burger-Menü und im Kontaktabschnitt. */
@media (max-width:700px){ .head__quote{display:none} }

/* --- Hero --------------------------------------------------------------- */
/* Der Abschnitt ist höher als das Fenster: erste Reihe 100svh, zweite rund
   46rem. Das Bild liegt über beide Reihen und wird in main.js mit halber
   Scrollgeschwindigkeit bewegt. Ohne dieses Skript steht es einfach still –
   der Aufbau bleibt in jedem Fall stimmig.                                 */
.hero{position:relative;overflow:hidden;color:#fff}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 30%,rgba(0,0,0,.46))}
.hero__row{position:relative;z-index:1;padding:0 3.2rem}
.hero__row--eins{min-height:100svh;padding-bottom:16rem;
  display:flex;align-items:flex-end;justify-content:center}
.hero__title{max-width:88rem;text-align:center;
  font-size:6.4rem;line-height:1;letter-spacing:-.03em;font-weight:400}
.hero__title span{display:block}
.hero__hint{position:absolute;z-index:2;bottom:5.2rem;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;opacity:.75;transition:opacity .45s var(--ease)}
/* Sobald gescrollt wird, hat der Hinweis seinen Zweck erfüllt. */
.hero__hint.is-weg{opacity:0;pointer-events:none}
/* Zweite Reihe: Beschriftung mittig, Fließtext rechtsbündig – wie im Vorbild. */
.hero__row--zwei{position:relative;min-height:46rem;padding-top:2rem;
  display:flex;justify-content:flex-end;align-items:flex-start}
.hero__kicker{position:absolute;left:50%;transform:translateX(-50%);top:2rem;
  white-space:nowrap}
.hero__lead{width:30rem;font-size:1.8rem;line-height:1.3}
@media (max-width:700px){
  .hero__title{font-size:4.4rem}
  .hero__row--eins{padding-bottom:20rem}
  .hero__row--zwei{min-height:0;padding-bottom:10rem;display:block}
  /* relative, nicht static: .label bezieht sein ::before (die Raute) auf den
     eigenen Kasten. Mit static rutscht sie an den Rand der Reihe. */
  .hero__kicker{position:relative;left:auto;top:auto;transform:none;white-space:normal}
  .hero__lead{width:auto;margin-top:2.4rem}
}

/* --- Über uns ----------------------------------------------------------- */
/* Mittige Großüberschrift über die volle Breite, Button darunter. */
/* Redaktioneller Aufbau statt mittiger Textwand: große linksbündige
   Überschrift, Bild und Text nebeneinander, ein herausgestelltes Zitat und
   die Werte als nummeriertes Raster.                                      */
.about{padding:22rem 3.2rem 20rem}
.about__title{max-width:104rem;margin:6rem 0 8rem;
  font-size:5.2rem;line-height:1.06;letter-spacing:-.035em;font-weight:400}
.about__zeile{display:grid;gap:4rem}
.about__bild{position:relative;margin:0;overflow:hidden}
.about__bild img{width:100%;height:auto;display:block}
@media (min-width:920px){
  .about__zeile{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7rem;align-items:start}
  /* Das Bild sitzt tiefer als der Text – nimmt dem Zweispalter die Starre.
     Muss nach der Grundregel stehen, sonst setzt deren margin:0 es zurück. */
  .about__bild{margin-top:7rem}
}
.about__text p{margin-bottom:2rem;font-size:1.7rem;line-height:1.65;
  color:color-mix(in srgb,var(--grey) 78%,transparent)}
.about__text p:first-child{font-size:2.1rem;line-height:1.5;
  color:var(--grey)}
.about__zitat{max-width:92rem;margin:12rem 0 0;
  font-size:4rem;line-height:1.14;letter-spacing:-.03em;font-weight:400}
.about__zitat::before{content:"„"}
.about__zitat::after{content:"“"}
.about__cta{margin-top:6rem}
@media (max-width:700px){
  .about{padding:14rem 3.2rem 12rem}
  .about__title{font-size:3.6rem;margin:4rem 0 5rem}
  .about__text p:first-child{font-size:1.9rem}
  .about__zitat{font-size:2.8rem;margin-top:8rem}
}
@media (max-width:700px){ .about{padding:14rem 3.2rem 12rem} .about__title{font-size:3.6rem} }

/* --- Produkte ----------------------------------------------------------- */
/* Verstreute Anordnung: Kacheln unterschiedlich groß und versetzt,
   der Textblock sitzt mitten im Raster.                                   */
.products{padding:5rem 3.2rem 22rem}
.products__grid{display:grid;gap:3rem;grid-template-columns:1fr;margin-top:6rem}
.products__note{max-width:34rem}
.products__note p{margin-bottom:2.4rem;color:color-mix(in srgb,var(--grey) 78%,transparent)}
.tile{position:relative;overflow:hidden;border-radius:0;text-align:left;
  aspect-ratio:4/5;display:block;width:100%}
.tile img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55))}
.tile__name{position:absolute;z-index:1;left:2rem;bottom:1.8rem;color:#fff;
  font-size:2.4rem;letter-spacing:-.02em}
.tile:hover img{transform:scale(1.05)}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Auf dem Handy stehen die vier Kacheln untereinander. Mit 4/5 ergäbe das
   allein 1660px Scrollweg, bevor überhaupt Text kommt. Flacheres Format
   kürzt den Abschnitt spürbar, ohne dass die Motive leiden. */
@media (max-width:700px){ .tile{aspect-ratio:4/3} .products__grid{gap:2rem} }

@media (min-width:900px){
  .products__grid{grid-template-columns:repeat(12,1fr);gap:0 2rem;margin-top:8rem}
  .tile{width:100%}
  .tile--a{grid-column:4/8;  grid-row:1; aspect-ratio:3/4}
  .products__note{grid-column:9/12; grid-row:1; align-self:start; margin-top:6rem}
  .tile--b{grid-column:9/13; grid-row:2; aspect-ratio:3/4; margin-top:4rem}
  .tile--d{grid-column:6/9;  grid-row:2; aspect-ratio:4/5; margin-top:12rem}
  .tile--c{grid-column:1/4;  grid-row:2; aspect-ratio:4/3; margin-top:24rem}
}
/* --- Schauraum ----------------------------------------------------------
   Zwei Fassungen, und die sichere ist der Grundzustand:

   OHNE Klasse  – alles gestapelt, Video in normaler Größe, nichts versteckt.
                  So sieht der Abschnitt auf schmalen Fenstern aus, bei
                  reduzierter Bewegung und falls GSAP nicht lädt.
   is-pinned    – setzt main.js erst, wenn das Festhalten wirklich eingerichtet
                  ist. Dann ist der Abschnitt 200vh hoch, die Bühne wird für
                  die erste Hälfte festgehalten, und die Video-Hülle wächst
                  von 0,55 auf 1, während sie von 0,7 auf 0,3 abdimmt.

   Wichtig: Diese Reihenfolge ist Absicht. Wäre 200vh der Grundzustand, stünde
   bei ausbleibender Bewegung eine leere Fensterhöhe unter einem klein und
   dunkel eingefrorenen Video.                                             */
.showroom{position:relative;background:var(--grey);color:var(--cream);
  height:auto;padding:6rem 3.2rem 10rem}
.showroom__stage{position:relative;height:auto}
.showroom__media{position:static;transform:none;opacity:1}
.showroom__video{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.showroom__inner{position:relative;z-index:1;display:block;padding:0}
.showroom__line{display:none}
.showroom__title{margin-top:3rem;
  font-size:3.2rem;line-height:1.12;letter-spacing:-.02em;font-weight:400}
.showroom__meta{margin-top:3rem;
  color:color-mix(in srgb,var(--cream) 82%,transparent)}
.showroom__meta p{margin-top:1rem}
.showroom__btn{margin-top:3rem;white-space:nowrap;
  border-color:color-mix(in srgb,var(--cream) 34%,transparent)}
.showroom__btn:hover{background:var(--cream);border-color:var(--cream);color:var(--grey)}
/* Gestapelt sitzt die Kennzeichnung als schmale Zeile direkt unter dem Video.
   Als Auflage unten rechts läge sie sonst unterhalb des Textblocks – also
   weit weg von dem Medium, das sie kennzeichnet. */
.showroom__stage > .kimark{position:static;display:block;margin-top:.9rem;
  text-align:right}

/* Festgehaltene Fassung. Maße am Vorbild ausgemessen (Fenster 1512x860):
   Video ungezoomt 1512x860 randlos, bei 0,55 also 832x473 mittig;
   Textzeile senkrecht mittig, Trennlinie 3rem darüber.                    */
.showroom.is-pinned{height:200vh;padding:4rem 0 0}
/* margin-top statt padding-top: Die Raute von .label ist absolut positioniert
   und richtet sich am Padding-Kasten aus – mit Innenabstand säße sie über dem
   Text statt daneben. */
.showroom.is-pinned > .label{margin:2rem 0 0 3.2rem}
.showroom.is-pinned .showroom__stage{height:100vh;
  display:flex;align-items:center;justify-content:center}
.showroom.is-pinned .showroom__media{position:absolute;inset:0;z-index:0;
  transform:scale(.55);transform-origin:center center;opacity:.7;
  will-change:transform,opacity}
.showroom.is-pinned .showroom__video{height:100%;aspect-ratio:auto}
.showroom.is-pinned .showroom__inner{width:100%;padding:0 3.2rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:4rem}
.showroom.is-pinned .showroom__line{display:block;position:absolute;
  left:3.2rem;right:3.2rem;bottom:calc(100% + 3rem);height:1px;
  background:color-mix(in srgb,var(--cream) 20%,transparent);
  transform:scaleX(0);transform-origin:left center}
.showroom.is-pinned .showroom__title{max-width:45rem;margin-top:0;
  font-size:4rem;line-height:1}
/* Breiter als im Vorbild (16,4rem): unsere Schrift läuft breiter und die
   Beschriftungen sind länger. Bei 16,4rem bricht die Adresse dreizeilig und
   der Knopf zweizeilig um – dadurch wird die Spalte zu hoch und verschiebt
   die senkrechte Mitte der ganzen Zeile. */
.showroom.is-pinned .showroom__meta{flex:none;width:24rem;
  text-align:right;margin-top:0}
.showroom.is-pinned .showroom__meta .label{padding-left:0;padding-right:1.8rem}
.showroom.is-pinned .showroom__meta .label::before{left:auto;right:0}
/* Festgehalten füllt das Video die Bühne – dann wieder als Auflage. */
.showroom.is-pinned .showroom__stage > .kimark{position:absolute;
  right:3.2rem;bottom:2rem;margin:0;display:inline-block;text-align:left}
/* --- Werte in „Über uns“ ------------------------------------------------
   Zweispaltiges Raster mit Nummern statt einfacher Aufzählung – gibt dem
   Abschnitt einen grafischen Halt neben dem Fließtext.                   */
.werte{display:grid;gap:0;margin:10rem 0 0}
@media (min-width:820px){ .werte{grid-template-columns:1fr 1fr;column-gap:7rem} }
.werte > div{padding:2.6rem 0;
  border-top:1px solid color-mix(in srgb,var(--grey) 16%,transparent)}
.werte dt{display:flex;align-items:baseline;gap:1.4rem;margin-bottom:.8rem;
  font-size:2.1rem;line-height:1.2;letter-spacing:-.02em}
.werte__nr{font-family:var(--mono);font-size:1.2rem;letter-spacing:.14em;
  color:var(--accent)}
.werte dd{margin:0;padding-left:4.4rem;font-size:1.6rem;line-height:1.6;
  color:color-mix(in srgb,var(--grey) 72%,transparent)}
@media (max-width:700px){ .werte{margin-top:7rem} .werte dd{padding-left:0} }

/* --- Kurzüberblick der vier Bereiche ------------------------------------ */
.bereiche{display:grid;gap:4rem 5rem;max-width:120rem;margin:14rem auto 0}
@media (min-width:860px){ .bereiche{grid-template-columns:1fr 1fr} }
.bereich h3{font-size:2.8rem;line-height:1.15;letter-spacing:-.025em;font-weight:400;
  padding-bottom:1.4rem;border-bottom:1px solid color-mix(in srgb,var(--grey) 16%,transparent)}
.bereich__satz{margin:1.8rem 0 1.2rem;font-size:1.8rem;line-height:1.4;
  letter-spacing:-.01em}
.bereich p{font-size:1.55rem;line-height:1.65;
  color:color-mix(in srgb,var(--grey) 72%,transparent)}
.bereich ul{margin-top:1.8rem;display:grid;gap:.8rem}
.bereich li{position:relative;padding-left:2rem;font-size:1.45rem;line-height:1.5;
  color:color-mix(in srgb,var(--grey) 82%,transparent)}
.bereich li::before{content:"";position:absolute;left:0;top:.55em;
  width:.6rem;height:.6rem;background:var(--accent);transform:rotate(45deg)}

/* --- Leistungsumfang ---------------------------------------------------- */
.leistung{max-width:120rem;margin:12rem auto 0;padding-top:5rem;
  border-top:1px solid color-mix(in srgb,var(--grey) 16%,transparent)}
@media (min-width:860px){
  .leistung{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
  .leistung__titel{grid-column:1;grid-row:1}
  .leistung__text{grid-column:1;grid-row:2}
  .leistung__liste{grid-column:2;grid-row:1/3}
}
.leistung__titel{font-size:2.8rem;line-height:1.15;letter-spacing:-.025em;font-weight:400;
  margin-bottom:1.8rem}
.leistung__text{font-size:1.6rem;line-height:1.65;
  color:color-mix(in srgb,var(--grey) 72%,transparent)}
.leistung__liste{display:grid;gap:0;margin-top:2.4rem}
@media (min-width:860px){ .leistung__liste{margin-top:0} }
.leistung__liste li{padding:1.4rem 0;font-size:1.55rem;line-height:1.5;
  border-bottom:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
.leistung__liste li:first-child{border-top:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}

/* --- Warum Fenster Hawara ------------------------------------------------
   Dunkler Block als Ruhepunkt zwischen zwei hellen Abschnitten.          */
.warum{position:relative;overflow:hidden;
  background:var(--grey);color:var(--cream);padding:18rem 3.2rem 16rem}
.warum__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.warum__video{width:100%;height:100%;object-fit:cover}
/* Abdunkelung als eigene Ebene statt opacity am Video: Der Text steht darauf
   und der Kontrast bleibt so berechenbar, unabhängig vom Bildinhalt. */
.warum__bg::after{content:"";position:absolute;inset:0;
  background:color-mix(in srgb,var(--grey) 84%,transparent)}
/* Kein Sammelselektor für den Stapel – der würde auch .warum__bg treffen und
   dessen position:absolute aushebeln (siehe Fallstrick 18). Deshalb einzeln. */
.warum > .label,.warum__titel,.warum__liste,.warum__cta{position:relative;z-index:1}
.warum__kimark{z-index:2}
/* Bei reduzierter Bewegung kein laufendes Video – die Fläche bleibt ruhig. */
@media (prefers-reduced-motion:reduce){ .warum__bg{display:none} }
.warum__titel{max-width:80rem;margin:6rem 0 9rem;
  font-size:6.4rem;line-height:1.02;letter-spacing:-.04em;font-weight:400}
/* Zwei breite Spalten über die volle Sektionsbreite – dadurch bleibt unten
   links keine leere Fläche mehr stehen. */
.warum__liste{display:grid;gap:0 8rem}
@media (min-width:900px){ .warum__liste{grid-template-columns:1fr 1fr} }
.warum__liste li{padding:3.4rem 0;
  border-top:1px solid color-mix(in srgb,var(--cream) 20%,transparent)}
.warum__nr{display:block;margin-bottom:1.8rem;
  font-family:var(--mono);font-size:1.2rem;letter-spacing:.16em;color:var(--sand)}
.warum__liste h3{margin-bottom:1rem;
  font-size:2.8rem;line-height:1.15;letter-spacing:-.025em;font-weight:400}
.warum__liste p{font-size:1.6rem;line-height:1.6;
  color:color-mix(in srgb,var(--cream) 70%,transparent)}
.warum__cta{margin-top:7rem;padding-top:5rem;
  border-top:1px solid color-mix(in srgb,var(--cream) 20%,transparent)}
.warum__btn{border-color:color-mix(in srgb,var(--cream) 34%,transparent)}
.warum__btn:hover{background:var(--cream);border-color:var(--cream);color:var(--grey)}
@media (max-width:700px){
  .warum{padding:12rem 3.2rem 10rem}
  .warum__titel{font-size:3.6rem;margin:4rem 0 5rem}
  .warum__liste li{padding:2.8rem 0}
  .warum__liste h3{font-size:2.2rem}
  .warum__cta{margin-top:5rem;padding-top:4rem}
}

/* --- Ablauf in vier Schritten ------------------------------------------- */
/* GRUNDZUSTAND – normales Raster. Gilt ohne GSAP, bei reduzierter Bewegung
   und auf schmalen Fenstern. Muss für sich allein stimmig sein.           */
.ablauf{padding:18rem 3.2rem 16rem}
.ablauf__kopf{max-width:120rem;margin:0 auto}
.ablauf__titel{max-width:70rem;margin:6rem 0 0;
  font-size:5.2rem;line-height:1.06;letter-spacing:-.035em;font-weight:400}
.ablauf__fortschritt{display:none}
/* list-style aus: die globale Regel deckt nur ul ab, die ol würde sonst ihre
   eigenen Marker zusätzlich zu den Schrittnummern rendern („1. 01“). */
.ablauf__spur{list-style:none;padding:0;max-width:120rem;margin:7rem auto 0;
  display:grid;gap:4rem}
@media (min-width:760px){ .ablauf__spur{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .ablauf__spur{grid-template-columns:repeat(5,1fr);gap:2.4rem} }
.ablauf__panel{padding-top:2.4rem;
  border-top:1px solid color-mix(in srgb,var(--grey) 20%,transparent)}
.ablauf__nr{display:block;font-family:var(--mono);font-size:1.3rem;letter-spacing:.16em;
  color:var(--accent);margin-bottom:2.4rem}
.ablauf__panel h3{font-size:2.1rem;line-height:1.2;letter-spacing:-.02em;font-weight:400;
  margin-bottom:1.2rem}
.ablauf__panel p{font-size:1.5rem;line-height:1.6;
  color:color-mix(in srgb,var(--grey) 72%,transparent)}
.ablauf__panel .btn{margin-top:2.4rem}
@media (max-width:700px){
  .ablauf{padding:12rem 3.2rem 10rem}
  .ablauf__titel{font-size:3.6rem;margin-top:4rem}
}

/* QUERSTRECKE – erst wenn main.js sie eingerichtet hat.
   Der Abschnitt wird festgehalten, die Spur wandert nach links. Jedes Panel
   füllt gut zwei Drittel der Fensterbreite und die halbe Höhe.            */
.ablauf.is-quer{padding:0;overflow:hidden}
.ablauf.is-quer .ablauf__pin{height:100vh;display:flex;flex-direction:column;
  justify-content:center;gap:6rem;padding-left:3.2rem}
.ablauf.is-quer .ablauf__kopf{max-width:none;margin:0;padding-right:3.2rem}
.ablauf.is-quer .ablauf__titel{max-width:60rem;margin:3rem 0 0;font-size:4.4rem}
/* Fortschrittsbalken: bei einer festgehaltenen Strecke sieht man sonst nicht,
   wie weit man ist. */
.ablauf.is-quer .ablauf__fortschritt{display:block;margin-top:3.4rem;
  max-width:34rem;height:2px;background:color-mix(in srgb,var(--grey) 16%,transparent)}
.ablauf.is-quer .ablauf__fortschritt span{display:block;height:100%;
  background:var(--grey);transform:scaleX(0);transform-origin:left center}
.ablauf.is-quer .ablauf__spur{display:flex;grid-template-columns:none;
  max-width:none;margin:0;gap:4rem;will-change:transform}
.ablauf.is-quer .ablauf__panel{flex:0 0 62vw;min-height:44vh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:3.4rem 6rem 0 0}
.ablauf.is-quer .ablauf__nr{margin:0;font-size:9rem;line-height:.9;letter-spacing:-.04em;
  color:color-mix(in srgb,var(--grey) 22%,transparent)}
.ablauf.is-quer .ablauf__text{max-width:48rem}
.ablauf.is-quer .ablauf__panel h3{font-size:4rem;line-height:1.08;margin-bottom:1.8rem}
.ablauf.is-quer .ablauf__panel p{font-size:1.8rem;line-height:1.6}
.ablauf.is-quer .ablauf__panel--cta .ablauf__nr{font-family:var(--sans);font-size:7rem}

/* --- Kontaktdaten -------------------------------------------------------- */
.cta__lead{max-width:70rem;margin:6rem 0 0;font-size:1.7rem;line-height:1.65;
  color:color-mix(in srgb,var(--grey) 78%,transparent)}
.kontaktdaten{max-width:70rem;margin:4.5rem 0 0;
  border-top:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
.kontaktdaten > div{display:grid;gap:.3rem;padding:1.5rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
@media (min-width:700px){ .kontaktdaten > div{grid-template-columns:18rem 1fr;gap:2rem;align-items:baseline} }
.kontaktdaten dt{font-family:var(--mono);font-size:1.2rem;letter-spacing:.12em;
  text-transform:uppercase;color:color-mix(in srgb,var(--grey) 55%,transparent)}
.kontaktdaten dd{margin:0;font-size:1.6rem;line-height:1.6}
.kontaktdaten a{text-decoration:underline;text-underline-offset:.25em}
.kontaktdaten a:hover{color:var(--accent)}

/* --- Häufige Fragen ------------------------------------------------------
   <details>/<summary> statt eigener Aufklapp-Logik: funktioniert ohne
   JavaScript, ist per Tastatur bedienbar und wird von Screenreadern
   korrekt angesagt. Das Pluszeichen ist reine Dekoration.               */
.faq{padding:18rem 3.2rem 16rem;background:var(--cream)}
.faq__inner{max-width:96rem;margin:6rem auto 0}
.faq__title{font-size:4.4rem;line-height:1.1;letter-spacing:-.035em;font-weight:400;
  margin-bottom:5rem}
.faq__item{border-top:1px solid color-mix(in srgb,var(--grey) 16%,transparent)}
.faq__item:last-child{border-bottom:1px solid color-mix(in srgb,var(--grey) 16%,transparent)}
.faq__item summary{position:relative;display:block;cursor:pointer;list-style:none;
  padding:2.6rem 5rem 2.6rem 0;font-size:2rem;line-height:1.35;letter-spacing:-.015em;
  transition:color .3s var(--ease)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--accent)}
.faq__item summary:focus-visible{outline:2px solid var(--accent);outline-offset:.4rem}
/* Pluszeichen aus zwei Strichen; der senkrechte verschwindet beim Öffnen. */
.faq__item summary::before,.faq__item summary::after{content:"";position:absolute;
  right:.6rem;top:50%;background:var(--grey);transition:transform .35s var(--ease),opacity .35s}
.faq__item summary::before{width:1.6rem;height:1px;transform:translateY(-50%)}
/* Mittig über dem waagrechten Strich: dieser läuft von right .6rem über
   1.6rem Breite, seine Mitte liegt also bei right 1.4rem. */
.faq__item summary::after{width:1px;height:1.6rem;right:1.4rem;transform:translateY(-50%)}
.faq__item[open] summary::after{opacity:0;transform:translateY(-50%) rotate(90deg)}
.faq__item p{padding:0 6rem 3rem 0;font-size:1.65rem;line-height:1.7;
  color:color-mix(in srgb,var(--grey) 75%,transparent)}
@media (max-width:700px){
  .faq{padding:12rem 3.2rem 10rem}
  .faq__title{font-size:3.2rem}
  .faq__item summary{font-size:1.75rem;padding:2.2rem 4rem 2.2rem 0}
  .faq__item p{padding-right:0}
}

/* --- Kontakt ------------------------------------------------------------ */
.cta{padding:18rem 3.2rem 16rem}
.cta__row{display:grid;gap:3rem;align-items:start}
.cta__kicker{font-family:var(--mono);font-size:1.15rem;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.7;color:var(--accent);
  position:relative;padding-left:1.8rem}
.cta__kicker::before{content:"";position:absolute;left:0;top:.5em;width:.6rem;height:.6rem;
  background:var(--accent);transform:rotate(45deg)}
.cta__title{font-size:6rem;line-height:1.06;letter-spacing:-.04em;font-weight:400}
.cta__actions{display:flex;gap:1.2rem;flex-wrap:wrap}
@media (min-width:1000px){
  .cta__row{grid-template-columns:12rem minmax(auto,64rem) 1fr;gap:4rem;align-items:center}
  .cta__actions{justify-content:flex-end}
}
@media (max-width:700px){ .cta{padding:12rem 3.2rem} .cta__title{font-size:4rem} }
/* --- Fußzeile ----------------------------------------------------------- */
.foot{position:relative;min-height:100svh;background:var(--black);color:var(--cream);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8rem 3.2rem}
.foot__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.foot::after{content:"";position:absolute;inset:0;z-index:0;
  background:color-mix(in srgb,var(--black) 45%,transparent)}
/* Nur über den Stapel legen – die Positionierung regelt jedes Element selbst.
   Vorher stand hier zusätzlich position:relative. Diese Regel hat die höhere
   Spezifität (0,2,0) als .foot__watermark (0,1,0) und hat deren
   position:absolute ausgehebelt: Das Wasserzeichen lag dadurch als über 500px
   breites Element im Fluss, quetschte das Menü-Panel zusammen und schob es
   aus dem Bild. Dasselbe galt für .foot__copy.                             */
.foot > *:not(.foot__bg){z-index:1}
.foot__watermark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:19rem;font-weight:700;letter-spacing:-.05em;white-space:nowrap;
  color:color-mix(in srgb,var(--cream) 7%,transparent);pointer-events:none;user-select:none}
/* Das Menü geht beim Erreichen der Fußzeile auf, statt fertig dazustehen.
   Zugeklappt ist es nur, wenn main.js die Klasse gesetzt hat – ohne Skript
   steht es offen da. Der Inhalt blendet leicht verzögert nach, damit man
   das Aufgehen zuerst sieht. */
.foot__panel{transform-origin:top center;
  transition:transform .95s var(--ease-io)}
.foot__panel > *{transition:opacity .55s var(--ease) .3s}
.foot__panel.is-zu{transform:scaleY(0)}
.foot__panel.is-zu > *{opacity:0;transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  .foot__panel,.foot__panel > *{transition:none}
  .foot__panel.is-zu{transform:none}
  .foot__panel.is-zu > *{opacity:1}
}
.foot__panel{position:relative;z-index:1;width:min(42rem,100%);
  background:var(--cream);color:var(--grey);
  border:1px solid color-mix(in srgb,var(--grey) 12%,transparent);border-radius:0;
  box-shadow:0 2rem 6rem rgba(0,0,0,.28);padding:3.2rem}
.foot__panel .label{color:var(--accent)}
.foot__panel .label::before{background:var(--accent)}
.foot__nav{margin:2.4rem 0;padding-top:2.4rem;
  border-top:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
.foot__nav button{display:block;text-align:left;width:100%;font-size:3.6rem;
  line-height:1.26;letter-spacing:-.035em;transition:color .3s}
.foot__nav button:hover{color:var(--accent)}
.foot__meta{display:grid;gap:1.6rem;padding-top:2.4rem;
  font-family:var(--mono);font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase;
  border-top:1px solid color-mix(in srgb,var(--grey) 14%,transparent);
  color:color-mix(in srgb,var(--grey) 68%,transparent)}
@media (min-width:560px){ .foot__meta{grid-template-columns:1fr 1fr} }
.foot__copy{position:absolute;left:3.2rem;bottom:3.2rem;font-size:1.3rem;
  color:color-mix(in srgb,var(--cream) 55%,transparent)}
@media (max-width:900px){ .foot__watermark{font-size:9rem} }

/* --- Navigationsleiste -------------------------------------------------- */
.pill{position:fixed;z-index:70;left:50%;bottom:2.6rem;transform:translateX(-50%);
  display:flex;align-items:center;gap:1.6rem;padding:1.1rem 1.2rem 1.1rem 1.4rem;
  background:color-mix(in srgb,var(--black) 92%,transparent);color:var(--cream);
  border-radius:0;backdrop-filter:blur(1rem);-webkit-backdrop-filter:blur(1rem)}
.pill__mark{width:1.8rem;height:1.8rem;background:var(--cream);
  -webkit-mask:url(/assets/logo.svg) center/contain no-repeat;
          mask:url(/assets/logo.svg) center/contain no-repeat}
.pill__label{font-family:var(--mono);font-size:1.1rem;letter-spacing:.16em;
  text-transform:uppercase;min-width:9rem;text-align:center}
.pill__burger{display:flex;flex-direction:column;justify-content:center;gap:.45rem;
  width:3.4rem;height:3.4rem;border-radius:0;align-items:center;
  transition:background .3s var(--ease)}
.pill__burger span{display:block;width:1.6rem;height:1px;background:var(--cream);
  transition:transform .35s var(--ease),opacity .25s}
.pill__burger:hover{background:rgba(255,255,255,.12)}
/* Auf Touchgeräten war der Knopf nur 31px groß. 44px ist das gängige
   Mindestmaß für ein Tap-Ziel; die Striche bleiben unverändert. */
@media (max-width:700px){ .pill__burger{width:4.9rem;height:4.9rem} }
.pill.is-open .pill__burger span:first-child{transform:translateY(.36rem) rotate(45deg)}
.pill.is-open .pill__burger span:last-child{transform:translateY(-.36rem) rotate(-45deg)}

/* --- Menü --------------------------------------------------------------- */
.menu{position:fixed;inset:0;z-index:90;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s}
.menu.is-open{opacity:1;visibility:visible}
.menu__bg{position:absolute;inset:0;background:rgba(15,20,23,.5);
  backdrop-filter:blur(.6rem);-webkit-backdrop-filter:blur(.6rem)}
.menu__panel{position:absolute;left:50%;bottom:9rem;transform:translate(-50%,2rem);
  width:min(42rem,calc(100vw - 4rem));padding:3.2rem 3.2rem 2.8rem;
  background:var(--cream);border:1px solid color-mix(in srgb,var(--grey) 14%,transparent);
  border-radius:0;box-shadow:0 2rem 6rem rgba(15,20,23,.22);
  transition:transform .55s var(--ease)}
.menu.is-open .menu__panel{transform:translate(-50%,0)}
.menu__list{margin:2.4rem 0;padding-top:2.4rem;
  border-top:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
.menu__list li{overflow:hidden}
.menu__list button{display:block;width:100%;text-align:left;font-size:4rem;
  line-height:1.18;letter-spacing:-.035em;
  transform:translateY(110%);transition:transform .6s var(--ease),color .3s}
.menu.is-open .menu__list button{transform:translateY(0)}
.menu.is-open .menu__list li:nth-child(2) button{transition-delay:.06s}
.menu.is-open .menu__list li:nth-child(3) button{transition-delay:.12s}
.menu.is-open .menu__list li:nth-child(4) button{transition-delay:.18s}
.menu__list button:hover{color:var(--accent)}
/* Marke im Menü – dieselbe Kombination aus Raute und Schriftzug wie im
   Ladebildschirm und in der Navigationsleiste. Sie fehlte hier bisher. */
.menu__brand{display:flex;align-items:center;gap:1.4rem;margin-bottom:3.2rem}
.menu__mark{width:3.2rem;height:3.2rem;flex:none;background:var(--grey);
  -webkit-mask:url(/assets/logo.svg) center/contain no-repeat;
          mask:url(/assets/logo.svg) center/contain no-repeat}
.menu__word{font-size:2rem;font-weight:700;letter-spacing:-.02em}
.menu__meta{display:flex;flex-direction:column;gap:.4rem;padding-top:2.4rem;
  border-top:1px solid color-mix(in srgb,var(--grey) 14%,transparent);
  font-family:var(--mono);font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--grey) 70%,transparent)}
.menu__cta{margin-top:2.4rem;width:100%;justify-content:center}
/* Die Mailadresse war als reiner Fließtext nur 14px hoch und damit ein zu
   kleines Tap-Ziel. Die Polsterung bringt sie auf 24px (Mindestmaß nach
   WCAG 2.5.8). Auf 44px zu gehen würde den Zeilenfluss sichtbar aufreißen. */
.menu__meta a,.foot__meta a{display:inline-block;padding:.55rem 0}

/* --- Produktdetail ------------------------------------------------------ */
.detail{position:fixed;inset:0;z-index:120;opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s}
.detail.is-open{opacity:1;visibility:visible}
.detail__bg{position:absolute;inset:0;background:rgba(15,20,23,.55);
  backdrop-filter:blur(.8rem);-webkit-backdrop-filter:blur(.8rem)}
.detail__panel{position:absolute;inset:2rem;overflow-y:auto;overscroll-behavior:contain;
  background:var(--cream);border:1px solid color-mix(in srgb,var(--grey) 14%,transparent);
  border-radius:0;transform:translateY(2rem);transition:transform .6s var(--ease)}
.detail.is-open .detail__panel{transform:translateY(0)}
@media (min-width:1024px){ .detail__panel{inset:4rem 6rem} }
.detail__close{position:sticky;top:0;float:right;margin:1.6rem 2rem 0 0;z-index:2;
  font-family:var(--mono);font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--cream);border:1px solid color-mix(in srgb,var(--grey) 20%,transparent);
  padding:.9rem 1.6rem;border-radius:0;transition:background .3s,color .3s}
.detail__close:hover{background:var(--grey);color:var(--cream)}
@media (max-width:700px){ .detail__close{padding:1.6rem 1.8rem} }
.detail__inner{display:flex;flex-direction:column;gap:3rem;padding:2rem}
@media (min-width:1024px){ .detail__inner{flex-direction:row;gap:6rem;padding:6rem 5rem 3rem} }
.detail__fig{position:relative;flex:0 0 auto;width:100%}
@media (min-width:1024px){ .detail__fig{width:40%} }
.detail__fig img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:0}
.detail__body{flex:1;max-width:56rem}
.detail__title{font-size:4.4rem;line-height:1.05;letter-spacing:-.035em;font-weight:400;margin:1.6rem 0}
.detail__lead{font-size:1.9rem;line-height:1.4;margin-bottom:2.4rem}
.detail__text p{margin-bottom:1.6rem;color:color-mix(in srgb,var(--grey) 75%,transparent)}
.detail__points{display:grid;gap:.9rem;margin-top:2.8rem;padding-top:2.4rem;
  border-top:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
@media (min-width:640px){ .detail__points{grid-template-columns:1fr 1fr} }
.detail__points li{position:relative;padding-left:2rem;font-size:1.5rem}
.detail__points li::before{content:"";position:absolute;left:0;top:.55em;
  width:.6rem;height:.6rem;background:var(--accent);transform:rotate(45deg)}
.detail__more{padding:2.8rem 2rem 3rem;margin-top:1rem;
  border-top:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
@media (min-width:1024px){ .detail__more{padding:2.8rem 5rem 5rem} }
.detail__tabs{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}

/* --- Formular ----------------------------------------------------------- */
.form{position:fixed;inset:0;z-index:130;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s}
.form.is-open{opacity:1;visibility:visible}
.form__bg{position:absolute;inset:0;background:rgba(15,20,23,.5)}
.form__panel{position:absolute;inset:0 0 0 auto;width:min(68rem,100vw);
  overflow-y:auto;overscroll-behavior:contain;background:var(--cream);
  border-left:1px solid color-mix(in srgb,var(--grey) 16%,transparent);
  box-shadow:-2rem 0 8rem rgba(15,20,23,.18);
  padding:4rem 3.2rem 6rem;transform:translateX(3rem);transition:transform .55s var(--ease)}
.form.is-open .form__panel{transform:translateX(0)}
/* Als reines Zeichen war der Schließer nur 24px groß – zu klein zum Treffen,
   und ausgerechnet er wird am häufigsten gebraucht. */
.form__close{position:absolute;top:1.4rem;right:1.8rem;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:5rem;height:5rem;font-size:2.4rem;line-height:1}
.form__title{font-size:3.6rem;letter-spacing:-.03em;font-weight:400;
  padding-bottom:2rem;border-bottom:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
.form__lead{margin:2rem 0 3.4rem;color:color-mix(in srgb,var(--grey) 75%,transparent)}
.group{border:0;padding:0;margin-bottom:3.4rem}
.group legend{margin-bottom:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:1rem}
.chip{font-family:var(--mono);font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;
  padding:1rem 1.8rem;border-radius:0;
  border:1px solid color-mix(in srgb,var(--grey) 22%,transparent);
  transition:background .3s,color .3s,border-color .3s}
.chip:hover{border-color:var(--grey)}
/* Auf Touchgeräten kamen die Auswahlfelder auf 37px. */
@media (max-width:700px){ .chip{padding:1.5rem 1.8rem} }
.chip.is-on{background:var(--grey);border-color:var(--grey);color:var(--cream)}
textarea{width:100%;font:inherit;padding:1.4rem;border-radius:0;
  border:1px solid color-mix(in srgb,var(--grey) 18%,transparent);
  background:rgba(255,255,255,.55);resize:vertical;transition:border-color .3s}
textarea:focus{outline:0;border-color:var(--grey)}
.fields{display:grid;gap:2rem}
@media (min-width:640px){ .fields{grid-template-columns:1fr 1fr} .field--wide{grid-column:1/-1} }
.field label{display:block;font-family:var(--mono);font-size:1.1rem;letter-spacing:.12em;
  text-transform:uppercase;color:color-mix(in srgb,var(--grey) 55%,transparent);margin-bottom:.4rem}
.field input{width:100%;font:inherit;padding:.9rem 0;background:none;border:0;
  border-bottom:1px solid color-mix(in srgb,var(--grey) 28%,transparent);transition:border-color .3s}
/* Auf Touchgeräten kamen die Felder auf 41px. Zusätzlich mindestens 16px
   Schriftgröße – darunter zoomt iOS Safari beim Antippen ins Feld hinein. */
@media (max-width:700px){
  .field input{padding:1.3rem 0;font-size:max(1.6rem,16px)}
  textarea{font-size:max(1.6rem,16px)}
}
.field input:focus{outline:0;border-bottom-color:var(--grey)}
/* Zustimmung zur Datenschutzerklärung – Pflichtangabe, nicht vorangekreuzt. */
.zustimmung{display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:2.8rem}
.zustimmung input{flex:none;width:2rem;height:2rem;margin-top:.2rem;accent-color:var(--grey)}
.zustimmung label{font-size:1.4rem;line-height:1.55;
  color:color-mix(in srgb,var(--grey) 78%,transparent)}
.zustimmung a{text-decoration:underline;text-underline-offset:.25em}
.zustimmung a:hover{color:var(--accent)}
/* Auf Touchgeräten mindestens 24px – die Pflichtangabe muss sicher treffbar sein. */
@media (max-width:700px){ .zustimmung input{width:2.8rem;height:2.8rem} }
.form__send{margin-top:1rem}
.form__note{margin-top:1.6rem;font-size:1.25rem;
  color:color-mix(in srgb,var(--grey) 55%,transparent)}
.form__status{margin-top:1.6rem;font-size:1.4rem;color:var(--accent);min-height:1.6em}

/* --- Cookie-Hinweis ----------------------------------------------------- */
/* z-index bewusst unter den Überlagerungen (Menü 90, Detail 120,
   Formular 130) und über Kopfzeile und Navigationsleiste. Vorher stand hier
   140 – der Hinweis legte sich damit über das geöffnete Menü und verdeckte
   Kontaktdaten und Knopf. */
.cookies{position:fixed;z-index:80;right:2.4rem;bottom:2.4rem;
  width:min(34rem,calc(100vw - 4rem));padding:2.4rem;
  background:var(--cream);border:1px solid color-mix(in srgb,var(--grey) 16%,transparent);
  border-radius:0;box-shadow:0 1.6rem 5rem rgba(15,20,23,.2);
  opacity:0;transform:translateY(1.5rem);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cookies.is-in{opacity:1;transform:translateY(0)}
.cookies__text{margin:1.4rem 0 2rem;font-size:1.4rem;
  color:color-mix(in srgb,var(--grey) 75%,transparent)}
.cookies__actions{display:flex;gap:1rem;flex-wrap:wrap}

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

/* ==========================================================================
   Bewegung: weiches Scrollen, Einblendungen, Parallaxe
   Der Inhalt liegt fest im Viewport und wird verschoben; die Position folgt
   der echten Scrollposition verzögert nach (Trägheit).
   ========================================================================== */
/* ScrollSmoother übernimmt die Positionierung der Hülle selbst. */
html{scroll-behavior:auto}
#smooth-wrapper{overflow:hidden}

/* Zeilenweise Einblendung von Überschriften und Text */
.rv{display:block;overflow:hidden}
.rv > span{display:block;transform:translateY(115%);
  transition:transform .95s var(--ease)}
.is-in .rv > span,.rv.is-in > span{transform:translateY(0)}
.rv:nth-child(2) > span{transition-delay:.07s}
.rv:nth-child(3) > span{transition-delay:.14s}
.rv:nth-child(4) > span{transition-delay:.21s}

/* Sanftes Aufblenden für Blöcke */
.fade{opacity:0;transform:translateY(2.4rem);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fade.is-in{opacity:1;transform:none}
.fade--d1{transition-delay:.08s}
.fade--d2{transition-delay:.16s}
.fade--d3{transition-delay:.24s}

/* Bilder wandern beim Scrollen leicht gegen die Richtung */
.px{overflow:hidden}
.px > img,.px > video{will-change:transform}

/* Ladebildschirm: Schriftzug buchstabenweise */
.loader__word{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .scroll{position:static!important;transform:none!important}
  .rv > span,.fade{transform:none!important;opacity:1!important}
}

/* --- Lesbarkeit auf dem Handy -------------------------------------------
   Die fließende Typo rechnet unter 700px mit 1rem = Breite/43. Bei 390px
   sind das 9,07px – etliche Fließtexte landeten dadurch bei 13,6 bis 15,4px
   und waren zu klein. Gemessen und hier angehoben: Fließtext mindestens
   rund 16px, Aufzählungen knapp darunter.
   Nur Fließtext, nicht die Beschriftungen in Mono-Versalien – die sind als
   kleine Auszeichnung gedacht.                                            */
@media (max-width:700px){
  .products__note p,
  .leistung__text,
  .warum__liste p,
  .ablauf__liste p,
  .faq__item p,
  .cta__lead        { font-size:1.8rem;line-height:1.6 }
  .bereich p,
  .werte dd,
  .detail__text p   { font-size:1.75rem;line-height:1.62 }
  .bereich li,
  .leistung__liste li,
  .detail__points li,
  .kontaktdaten dd  { font-size:1.7rem;line-height:1.55 }
  .bereich__satz    { font-size:1.9rem }
  .detail__lead     { font-size:2rem }
  /* Mailadresse im Kontaktblock war nur 18px hoch – gleiche Behandlung wie
     die übrigen Mail-Links. */
  .kontaktdaten a   { display:inline-block;padding:.55rem 0 }
}

/* --- Rechtstexte ---------------------------------------------------------
   Eigene Seiten für Impressum, Datenschutz, Cookies, AGB, Rücktritt und
   Website-Hinweise. Bewusst schlicht und ohne GSAP: Diese Seiten müssen
   lesbar und druckbar sein, nicht beeindrucken.                           */
.rt{max-width:82rem;margin:0 auto;padding:14rem 3.2rem 12rem}
.rt__kopf{display:flex;align-items:center;gap:1.4rem;margin-bottom:6rem}
.rt__mark{width:3.2rem;height:3.2rem;flex:none;background:var(--grey);
  -webkit-mask:url(/assets/logo.svg) center/contain no-repeat;
          mask:url(/assets/logo.svg) center/contain no-repeat}
.rt__wort{font-size:2rem;font-weight:700;letter-spacing:-.02em}
.rt h1{font-size:4.8rem;line-height:1.08;letter-spacing:-.035em;font-weight:400;
  margin-bottom:1.6rem}
.rt__stand{font-family:var(--mono);font-size:1.2rem;letter-spacing:.1em;
  text-transform:uppercase;color:color-mix(in srgb,var(--grey) 55%,transparent);
  margin-bottom:5rem;padding-bottom:2.4rem;
  border-bottom:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
.rt h2{font-size:2.6rem;line-height:1.2;letter-spacing:-.02em;font-weight:400;
  margin:5rem 0 1.6rem}
.rt h3{font-size:1.9rem;line-height:1.3;font-weight:700;margin:3.2rem 0 1rem}
.rt p,.rt li{font-size:1.6rem;line-height:1.7;
  color:color-mix(in srgb,var(--grey) 88%,transparent)}
.rt p{margin-bottom:1.6rem}
.rt ul,.rt ol{margin:0 0 1.6rem;padding-left:2.4rem}
.rt ul{list-style:disc}
.rt ol{list-style:decimal}
.rt li{margin-bottom:.7rem}
.rt a{text-decoration:underline;text-underline-offset:.3em}
.rt a:hover{color:var(--accent)}
.rt strong{font-weight:700}
/* Angabenblock (Impressum) */
.rt__daten{display:grid;gap:0;margin:0 0 3.2rem;
  border-top:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
.rt__daten > div{display:grid;gap:.4rem;padding:1.6rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
@media (min-width:700px){ .rt__daten > div{grid-template-columns:24rem 1fr;gap:2rem} }
.rt__daten dt,.rt__daten .dt{font-family:var(--mono);font-size:1.2rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--grey) 55%,transparent)}
.rt__daten dd,.rt__daten .dd{font-size:1.6rem;line-height:1.6;margin:0}
/* Tabelle (Cookie-Richtlinie) */
.rt__tab{width:100%;border-collapse:collapse;margin:0 0 3.2rem;font-size:1.45rem}
.rt__tab th,.rt__tab td{text-align:left;vertical-align:top;padding:1.2rem 1.6rem 1.2rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--grey) 14%,transparent)}
.rt__tab th{font-family:var(--mono);font-size:1.15rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;
  color:color-mix(in srgb,var(--grey) 55%,transparent)}
.rt__wrap{overflow-x:auto}
/* Noch zu ergänzende Angaben – bewusst auffällig, damit sie vor dem
   Livegang nicht übersehen werden. */
.luecke{background:#ffe9a8;color:#5b4300;padding:.15em .5em;
  font-family:var(--mono);font-size:.9em;letter-spacing:.06em}
.rt__warnung{background:#fff4d6;border:1px solid #e8c766;padding:2.4rem;
  margin-bottom:4rem}
.rt__warnung p{margin-bottom:0}
.rt__warnung p + p{margin-top:1.2rem}
/* Fußzeile der Rechtstexte */
.rt__fuss{max-width:82rem;margin:0 auto;padding:0 3.2rem 10rem}
.rt__fuss hr{border:0;border-top:1px solid color-mix(in srgb,var(--grey) 14%,transparent);
  margin-bottom:3.2rem}
.rt__links{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;
  font-family:var(--mono);font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:700px){
  .rt{padding:10rem 3.2rem 8rem}
  .rt h1{font-size:3.6rem}
  .rt h2{font-size:2.2rem}
}

/* --- Rechts-Links in der Fußzeile der Startseite ------------------------- */
.foot__recht{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:2.4rem;
  padding-top:2.4rem;font-family:var(--mono);font-size:1.15rem;
  letter-spacing:.08em;text-transform:uppercase;
  border-top:1px solid color-mix(in srgb,var(--grey) 14%,transparent);
  color:color-mix(in srgb,var(--grey) 68%,transparent)}
.foot__recht a:hover,.foot__recht button:hover{color:var(--accent)}
.foot__recht button{font:inherit;letter-spacing:inherit;text-transform:inherit}