/* ==========================================================================
   AURION BAUELEMENTE (DEMO) — main.css
   Premium dark, architectural "engineered in Germany" design system.
   Sections: tokens · base · fonts · layout · buttons · header/nav · hero ·
   brands · products · why · industries · process · export · references ·
   quote · footer · legal · utilities · motion · responsive
   ========================================================================== */

/* ---------- Fonts (vendored locally; no external requests) --------------- */
@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Design tokens ------------------------------------------------ */
:root{
  /* Kräftig & kontrastreich: fast schwarze Basis, hellerer Text, kräftigeres
     Amber-Orange als Signalfarbe, deutlich sichtbarere Linien/Kanten. */
  --bg:#050607; --bg-2:#090b0e; --bg-3:#0e1114;
  --surface:#111418; --surface-2:#171c22; --surface-3:#212831;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.26); --line-3:rgba(255,255,255,.42);
  --text:#f5f8fb; --text-2:#bcc6d2; --text-3:#7e8996;
  --accent:#ff9d2b; --accent-2:#ffbe63; --accent-ink:#180e01;
  --accent-glow:rgba(255,157,43,.48);
  --teal:#5ec8bf;
  --r-xs:6px; --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px;
  --shadow:0 24px 60px -28px rgba(0,0,0,.75);
  --shadow-lg:0 50px 110px -40px rgba(0,0,0,.85);
  --container:1280px; --narrow:760px;
  --strip-h:0px; --header-h:74px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-2:cubic-bezier(.65,.05,.36,1);
  --font-display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sp-section:clamp(72px,11vw,150px);
}

/* ---------- Reset / base ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* scroll-behavior steht eine Zeile hoeher — weiche Ankersprunge macht der
   Browser selbst. Hier standen bis zum 25.08.2026 vier Regeln fuer die
   Bibliothek Lenis, die das Rad-Scrollen per JavaScript nachgebildet hat;
   genau das hat sich traege angefuehlt und ist entfernt.
   Wer Bewegung abgestellt hat, bekommt auch keine weichen Sprunge. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-text);background:transparent;color:var(--text);
  font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,canvas,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ---------- Scrollgesteuerter Foto-Hintergrund --------------------------- */
#bgfx{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg)}
/* Nur Überblendung (Opacity) — KEINE Dauer-Zoom-Animation und KEIN will-change.
   Ein bildschirmfüllendes Element pro Frame endlos zu skalieren zwingt die GPU,
   ständig neu zu komponieren → genau das ruckelte beim Scrollen. Die
   Kreuzblende reicht optisch völlig und ist praktisch kostenlos. */
/* visibility zusaetzlich zur Deckkraft: ein Element mit opacity:0 ist zwar
   unsichtbar, bleibt fuer den Browser aber eine bildschirmfuellende Ebene,
   die er bei jedem Bild mitzeichnet. Bei fuenf Fotos sind das fuenf
   Vollbild-Ebenen, von denen hoechstens zwei etwas beitragen. Auf Geraeten
   ohne Grafikbeschleunigung — Bueroraechner, Remotedesktop, aeltere Handys —
   ist das genau die Arbeit, die beim Scrollen fehlt.
   Die 0s-Verzoegerung schaltet visibility ERST nach der Blende um, sonst
   verschwaende das Bild schlagartig statt weich. */
.bgfx__slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 0s linear 1.1s}
.bgfx__slide.is-active{opacity:1;visibility:visible;transition:opacity 1.1s ease,visibility 0s}
/* ---- Sparsamer Modus -------------------------------------------------
   Wird von main.js gesetzt, wenn beim Scrollen weniger als rund 38 Bilder je
   Sekunde ankommen. Dann kosten die bildschirmfuellenden Videos und die
   Ueberblendung mehr, als sie optisch bringen. An ihrer Stelle bleibt das
   Standbild stehen — inhaltlich geht nichts verloren. */
/* Am 03.09.2026 entfernt: hier standen display:none auf hero__video,
   showcase__video und angebot__video sowie ein erzwungenes Standbild. Das
   hat dem Betreiber auf seinem Remotedesktop-Rechner saemtliche
   Hintergrundvideos genommen — dauerhaft, weil das Urteil gemerkt wurde.
   Der sparsame Modus laesst die Videos jetzt stehen und nimmt stattdessen
   die teure Scroll-Kopplung weg (siehe schalteSparsam in main.js). */
.is-sparsam .bgfx__slide{transition:none}

#bgfx-scrim{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,7,.6),rgba(5,6,7,.74) 55%,rgba(5,6,7,.85))}
/* Home-Abschnitte transparent, damit der Foto-Hintergrund durchscheint.
   Karten/Flächen behalten ihren eigenen, deckenden Hintergrund. */
.brands,.products,.why,.industries,.process,.export,.references,.quote{background:transparent!important}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:#fff}

/* ---------- Layout helpers ----------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.container--narrow{max-width:var(--narrow)}
.section{position:relative;padding-block:var(--sp-section)}
.section__head{max-width:760px;margin-bottom:clamp(40px,6vw,72px)}
.section__head--center{margin-inline:auto;text-align:center}
.section__title{font-size:clamp(2rem,4.6vw,3.6rem);margin-block:.35em .5em}
.section__lead{font-size:clamp(1.02rem,1.5vw,1.25rem);color:var(--text-2);max-width:62ch}
.section__head--center .section__lead{margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-display);font-weight:500;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2)}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.section__head--center .eyebrow::before{display:none}

/* ---------- Icons -------------------------------------------------------- */
.icon{width:1.25em;height:1.25em;flex:0 0 auto;vertical-align:middle}

/* ---------- Buttons ------------------------------------------------------ */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;justify-content:center;
  padding:.95em 1.5em;border-radius:999px;font-family:var(--font-display);font-weight:500;
  font-size:.96rem;letter-spacing:.01em;line-height:1;cursor:pointer;
  transition:transform .5s var(--ease),background .35s,color .35s,border-color .35s,box-shadow .5s}
.btn .icon{width:1.05em;height:1.05em;transition:transform .5s var(--ease)}
.btn--accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -12px var(--accent-glow)}
.btn--accent:hover{background:var(--accent-2);box-shadow:0 16px 40px -12px var(--accent-glow);transform:translateY(-2px)}
.btn--accent:hover .icon{transform:translateX(4px)}
.btn--ghost{border:1px solid var(--line-2);color:var(--text);background:rgba(255,255,255,.015)}
.btn--ghost:hover{border-color:var(--line-3);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.btn--lg{padding:1.1em 1.8em;font-size:1rem}
.btn--sm{padding:.7em 1.15em;font-size:.86rem}
.btn--block{display:flex;width:100%}

.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:500;
  color:var(--accent-2);font-size:.95rem;transition:gap .4s var(--ease),color .3s}
.link-arrow .icon{transition:transform .4s var(--ease)}
.link-arrow:hover{color:var(--accent)}
.link-arrow:hover .icon{transform:translateX(4px)}
.link{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.link:hover{text-decoration-color:var(--accent)}

.tag{display:inline-flex;align-items:center;gap:.4em;padding:.3em .7em;border-radius:999px;
  font-family:var(--font-display);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.tag--demo{background:var(--accent);color:var(--accent-ink)}
.chip{display:inline-flex;align-items:center;gap:.45em;padding:.5em .85em;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.025);font-size:.86rem;color:var(--text-2)}
.chip .icon{width:1em;height:1em;color:var(--accent-2)}
.ticks li{display:flex;gap:.7em;align-items:flex-start;padding:.5em 0;color:var(--text-2)}
.ticks .icon{color:var(--accent);margin-top:.15em}

/* ---------- Demo strip + header ----------------------------------------- */
.demo-strip{position:fixed;top:0;left:0;right:0;height:var(--strip-h);z-index:1001;
  display:flex;align-items:center;justify-content:center;gap:.6em;
  background:linear-gradient(90deg,#15110a,#1a1408);color:var(--accent-2);
  font-family:var(--font-display);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid rgba(224,164,74,.18)}
.demo-strip__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-glow);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

.site-header{position:fixed;top:var(--strip-h);left:0;right:0;z-index:1000;height:var(--header-h);
  display:flex;align-items:center;transition:background .4s var(--ease),border-color .4s}
.site-header::after{content:"";position:absolute;inset:0;background:rgba(11,13,16,0);border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s;z-index:-1}
/* Fast deckender Balken statt backdrop-filter: ein fixierter Header, dessen
   Hintergrund bei JEDEM Scroll-Frame neu weichgezeichnet wird, war die größte
   Ruckel-Ursache. Auf dunklem Grund sieht der deckende Balken quasi gleich aus. */
.site-header.is-scrolled::after{background:rgba(9,11,14,.92);border-bottom-color:var(--line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%}
.site-header__brand{display:inline-flex;align-items:center}

.logo{display:inline-flex;align-items:center;gap:.65em;color:#fff}
.logo__mark{width:34px;height:34px;color:#fff;transition:transform .6s var(--ease)}
.site-header__brand:hover .logo__mark{transform:rotate(-4deg)}
.logo__word{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:.16em}
.logo--footer .logo__word{font-size:1.5rem}

/* Abstaende bewusst knapp: der Container ist auf 1280px gedeckelt und hat 112px
   Polsterung, nutzbar sind also IMMER nur 1168px — auch auf einem 4K-Schirm.
   Mit acht Menuepunkten passt das nur mit dieser engeren Teilung. */
.site-nav__list{display:flex;align-items:center;gap:2px}
.site-nav__link{position:relative;display:inline-block;padding:.6em .56em;font-size:.9rem;color:var(--text-2);
  font-weight:500;white-space:nowrap;transition:color .35s}
.site-nav__link::after{content:"";position:absolute;left:.9em;right:.9em;bottom:.35em;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.site-nav__link:hover{color:var(--text)}
.site-nav__link:hover::after{transform:scaleX(1)}

/* Die rechte Seite darf NIE schrumpfen. Vorher galt fuer alle Flex-Kinder das
   voreingestellte flex-shrink:1 — sobald die Navigation zu breit wurde, quetschte
   sie den Sprachumschalter zusammen (dessen overflow:hidden schnitt dann "EN" ab)
   und liess die Beschriftung des CTA-Knopfs auf drei Zeilen umbrechen.
   Nachgeben soll die Navigation, nicht die Bedienelemente. */
.site-header__actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
/* Auch die Navigation schrumpft nicht. Laesst man sie nachgeben, rutscht statt
   des Sprachumschalters eben der letzte Menuepunkt aus dem sichtbaren Bereich —
   das Problem waere nur verschoben. Passt nicht mehr alles nebeneinander,
   uebernimmt der Menueknopf (Umschaltpunkt unten). */
.site-nav{flex:0 0 auto}
.site-header__cta{white-space:nowrap}

.lang-switch{display:inline-flex;align-items:center;flex:0 0 auto;
  border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
/* Trennstrich zwischen den beiden Kuerzeln: ohne ihn verschwimmt die inaktive
   Sprache mit dem Header-Hintergrund und der Schalter sieht aus wie ein
   angeschnittener Knopf. */
.lang-switch__opt{padding:.42em .72em;font-family:var(--font-display);font-size:.78rem;
  font-weight:600;letter-spacing:.06em;color:var(--text-2);white-space:nowrap;
  line-height:1;transition:color .3s,background .3s}
.lang-switch__opt + .lang-switch__opt{border-left:1px solid var(--line-2)}
.lang-switch__opt.is-active{color:var(--accent-ink);background:var(--accent)}
.lang-switch__opt:not(.is-active):hover{color:var(--text);background:var(--surface-2)}

.nav-toggle{display:none;width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;align-items:center;justify-content:center}
.nav-toggle__box{position:relative;width:20px;height:14px}
.nav-toggle__inner,.nav-toggle__box::before,.nav-toggle__box::after{content:"";position:absolute;left:0;width:100%;height:2px;background:var(--text);border-radius:2px;transition:transform .45s var(--ease),opacity .3s}
.nav-toggle__box::before{top:0}.nav-toggle__inner{top:6px}.nav-toggle__box::after{bottom:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__box::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__inner{opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__box::after{transform:translateY(-6px) rotate(-45deg)}

.mobile-nav{position:fixed;inset:0;z-index:999;background:rgba(8,10,13,.92);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.mobile-nav.is-open{opacity:1;visibility:visible}
.mobile-nav__inner{display:flex;flex-direction:column;gap:24px;width:min(440px,86vw);text-align:center}
.mobile-nav__list{display:flex;flex-direction:column;gap:6px}
.mobile-nav__link{font-family:var(--font-display);font-size:1.5rem;font-weight:500;padding:.4em;color:var(--text);
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s}
.mobile-nav.is-open .mobile-nav__link{opacity:1;transform:none}
.mobile-nav__link:hover{color:var(--accent-2)}
.mobile-nav__meta{display:flex;flex-direction:column;gap:6px;color:var(--text-2);font-size:.95rem;margin-top:8px}

.skip-link{position:fixed;top:-100px;left:14px;z-index:1100;background:var(--accent);color:var(--accent-ink);
  padding:.7em 1.1em;border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:600;transition:top .3s}
.skip-link:focus{top:0}

/* ---------- HERO --------------------------------------------------------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden}
.hero__stage{position:relative;height:100%;width:100%;overflow:hidden}
.hero__bg{position:absolute;inset:-8% 0;z-index:1}
.hero__video,.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__poster{z-index:0}
.hero__video{z-index:1;opacity:0;transition:opacity 1.2s ease}
.hero__video.is-ready{opacity:1}
.hero__canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.hero__canvas.is-ready{opacity:1}
.hero__scrim{position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(8,10,13,.62) 0%,rgba(8,10,13,.22) 32%,rgba(8,10,13,.55) 72%,var(--bg) 100%),
             radial-gradient(120% 80% at 18% 50%,rgba(8,10,13,.66),transparent 60%)}
.hero__grid-overlay{position:absolute;inset:0;z-index:3;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(120% 90% at 50% 30%,#000,transparent 75%)}
.hero__content{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--container)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-display);font-weight:500;
  font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);margin-bottom:24px}
.hero__eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent-glow)}
.hero__title{font-size:clamp(2.7rem,8.2vw,6.6rem);line-height:.98;letter-spacing:-.03em}
.hero__title-line{display:block;overflow:hidden}
.hero__title-line--accent{color:transparent;background:linear-gradient(100deg,var(--accent-2),var(--accent) 55%,#fff);-webkit-background-clip:text;background-clip:text}
.hero__lead{max-width:54ch;margin-top:28px;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--text-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__badges{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:40px}
.hero__badges li{display:inline-flex;align-items:center;gap:.5em;font-size:.92rem;color:var(--text-2)}
.hero__badges .icon{color:var(--accent);width:1.05em;height:1.05em}
.hero__scroll{position:absolute;left:50%;bottom:26px;z-index:5;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-3);
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.hero__scroll-line{width:1px;height:46px;background:linear-gradient(var(--accent),transparent);position:relative;overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--accent-2);animation:scrollLine 2.4s var(--ease) infinite}
@keyframes scrollLine{0%{top:-50%}60%,100%{top:100%}}

/* ---------- BRANDS ------------------------------------------------------- */
.brands{padding-block:clamp(54px,8vw,96px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.brands__marquee{position:relative;margin-block:34px;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brands__track{display:flex;width:max-content;gap:0;animation:marquee 38s linear infinite}
.brands__row{display:flex;align-items:stretch;gap:0}
.brand-mark{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 clamp(28px,4vw,60px);
  border-right:1px solid var(--line);min-width:max-content}
.brand-mark__name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,2.3rem);color:var(--text-2);letter-spacing:.02em;transition:color .4s}
.brand-mark__tag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.brand-mark--flagship .brand-mark__name{color:#fff}
.brand-mark--flagship .brand-mark__tag{color:var(--accent-2)}
.brands__marquee:hover .brands__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.brands__note{display:flex;align-items:flex-start;gap:.6em;justify-content:center;text-align:center;max-width:760px;margin-inline:auto;color:var(--text-3);font-size:.86rem}
.brands__note .icon{color:var(--accent-2);flex:0 0 auto;margin-top:.15em}

/* ---------- PRODUCTS (horizontal scroll) -------------------------------- */
.products{overflow:visible}
.products__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:24px;align-items:stretch}
.product-card{position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .5s,transform .6s var(--ease),box-shadow .6s}
.product-card:hover{border-color:var(--line-2);transform:translateY(-6px);box-shadow:var(--shadow)}
.product-card__media{position:relative;aspect-ratio:3/2;overflow:hidden}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.product-card:hover .product-card__media img{transform:scale(1.06)}
.product-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,13,16,.85))}
.product-card__index{position:absolute;top:16px;left:18px;z-index:2;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:#fff;
  width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;background:rgba(8,10,13,.72)}
.product-card__tagline{position:absolute;left:18px;bottom:16px;z-index:2;font-family:var(--font-display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.product-card__body{display:flex;flex-direction:column;gap:14px;padding:26px 26px 30px;flex:1}
.product-card__title{font-size:1.45rem}
.product-card__desc{color:var(--text-2);font-size:.96rem}
.product-card__points{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:6px}
.product-card__points li{display:flex;gap:.6em;align-items:flex-start;font-size:.9rem;color:var(--text-2)}
.product-card__points .icon{color:var(--accent);width:1.05em;height:1.05em;margin-top:.15em}
.product-card__link{margin-top:14px}
.product-card--cta{justify-content:center;align-items:center;text-align:center;
  background:linear-gradient(160deg,var(--surface-2),var(--bg-3));border-style:dashed}
.product-card__cta-inner{display:flex;flex-direction:column;gap:16px;padding:36px;align-items:center}
.product-card__cta-inner h3{font-size:1.5rem}.product-card__cta-inner p{color:var(--text-2)}

/* ---------- WHY ---------------------------------------------------------- */
.why{background:var(--bg)}
.why__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:clamp(48px,7vw,84px);
  border-block:1px solid var(--line);padding-block:clamp(34px,5vw,52px)}
.stat{text-align:left}
.stat__num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;color:#fff;
  display:inline-flex;align-items:baseline;letter-spacing:-.02em}
.stat__suffix{color:var(--accent)}
.stat__label{display:block;margin-top:10px;color:var(--text-2);font-size:.96rem}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value-card{padding:30px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .5s,transform .6s var(--ease),background .5s}
.value-card:hover{border-color:var(--line-2);transform:translateY(-5px);background:var(--surface-2)}
.value-card__icon{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;margin-bottom:18px;
  background:linear-gradient(160deg,rgba(224,164,74,.16),rgba(224,164,74,.04));border:1px solid rgba(224,164,74,.22);color:var(--accent-2)}
.value-card__icon .icon{width:1.6em;height:1.6em}
.value-card__title{font-size:1.22rem;margin-bottom:10px}
.value-card__desc{color:var(--text-2);font-size:.95rem}

/* ---------- INDUSTRIES --------------------------------------------------- */
.industries{background:var(--bg-2);border-top:1px solid var(--line)}
.industries__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.industry-card{position:relative;padding:28px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  display:flex;flex-direction:column;gap:12px;min-height:230px;overflow:hidden;transition:border-color .5s,transform .6s var(--ease)}
.industry-card:hover{border-color:var(--line-2);transform:translateY(-5px)}
.industry-card__num{font-family:var(--font-display);font-size:.78rem;letter-spacing:.16em;color:var(--text-3)}
.industry-card__icon{color:var(--accent-2);margin-top:auto}.industry-card__icon .icon{width:1.9em;height:1.9em}
.industry-card__title{font-size:1.1rem;margin-top:6px}
.industry-card__desc{color:var(--text-2);font-size:.88rem;line-height:1.55}

/* ---------- PROCESS ------------------------------------------------------ */
.process{background:var(--bg)}
.process__wrap{position:relative;padding-left:18px}
.process__rail{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--line)}
.process__rail-fill{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(var(--accent),var(--accent-2));transform-origin:top;box-shadow:0 0 16px var(--accent-glow)}
.process__list{display:flex;flex-direction:column;gap:clamp(26px,4vw,44px)}
.process-step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start;padding-left:18px}
.process-step__node{position:absolute;left:-26px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--line-2);display:grid;place-items:center}
.process-step__dot{width:6px;height:6px;border-radius:50%;background:var(--text-3);transition:background .4s,box-shadow .4s}
.process-step.is-inview .process-step__dot{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.process-step__num{font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:transparent;-webkit-text-stroke:1px var(--line-3);line-height:1}
.process-step__title{font-size:1.3rem;margin-bottom:6px}
.process-step__desc{color:var(--text-2);max-width:52ch}

/* ---------- EXPORT ------------------------------------------------------- */
.export{position:relative;overflow:hidden;background:var(--bg-3)}
.export__bg{position:absolute;inset:-10% 0;z-index:0}
.export__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.export__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.export__video.is-ready{opacity:.42}
.export__bg-veil{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg-3),rgba(18,22,27,.6) 40%,var(--bg-3)),radial-gradient(80% 60% at 80% 50%,transparent,var(--bg-3))}
.export__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,80px);align-items:center}
.export__points{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.export__points li{display:flex;gap:.7em;align-items:center;font-size:1.02rem}
.export__points .icon{color:var(--accent)}
.export__panel{background:rgba(12,15,19,.94);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,4vw,40px)}
.export__figure{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:22px}
.export__figure-num{font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,7vw,4.6rem);line-height:1;color:#fff}
/* Textangabe ("bundesweit") statt Zahl — braucht weniger Groesse, damit auch
   ein laengeres Wort wie "Germany-wide" nicht umbricht. */
.export__figure-num--text{font-size:clamp(1.9rem,4.2vw,2.9rem);letter-spacing:-.01em}
.export__figure-label{display:block;margin-top:8px;color:var(--text-2);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.export__countries{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- REFERENCES --------------------------------------------------- */
.references{background:var(--bg)}
.references__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ref-card{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);min-height:330px;display:flex;align-items:flex-end;isolation:isolate;transition:transform .6s var(--ease),border-color .5s}
.ref-card:hover{transform:translateY(-6px);border-color:var(--line-2)}
.ref-card__media{position:absolute;inset:0;z-index:-1}
.ref-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ref-card:hover .ref-card__media img{transform:scale(1.07)}
.ref-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,16,.1) 30%,rgba(11,13,16,.92))}
.ref-card__body{position:relative;padding:26px;display:flex;flex-direction:column;gap:6px}
.ref-card__cat{font-family:var(--font-display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.ref-card__title{font-size:1.35rem}
.ref-card__meta{display:inline-flex;align-items:center;gap:.4em;color:var(--text-2);font-size:.88rem}
.ref-card__meta .icon{width:1em;height:1em;color:var(--accent-2)}
.references__note{margin-top:28px;text-align:center;color:var(--text-3);font-size:.86rem}

/* ---------- QUOTE -------------------------------------------------------- */
.quote{background:var(--bg-2);border-top:1px solid var(--line)}
.quote__layout{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(28px,4vw,56px);align-items:start}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:.88rem;font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:.5em}
.field__req{color:var(--accent)}
.field__opt{color:var(--text-3);font-size:.78rem;font-weight:400}
.field input,.field textarea,.field select{width:100%;padding:.85em 1em;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--text);font-size:.96rem;transition:border-color .35s,background .35s,box-shadow .35s}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);background:var(--surface-2);box-shadow:0 0 0 3px rgba(224,164,74,.12)}
.field [aria-invalid="true"]{border-color:#e0604a;box-shadow:0 0 0 3px rgba(224,96,74,.12)}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:2.6em;cursor:pointer}
.select-wrap .icon{position:absolute;right:.9em;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-3);width:1.1em;height:1.1em}
.field__error{color:#f08a78;font-size:.82rem}
/* Erlaeuterung unter einem Feld (erlaubte Dateitypen, Groessengrenze). */
.field__hint{color:var(--text-3);font-size:.8rem;margin:0}
/* Dateifeld: der native Auswahlknopf soll wie die uebrigen Bedienelemente
   aussehen, nicht wie ein Fremdkoerper aus dem Betriebssystem. */
.field input[type="file"]{padding:.62em .8em;cursor:pointer}
.field input[type="file"]::file-selector-button{margin-right:.9em;padding:.5em 1em;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-2);font:inherit;font-size:.86rem;cursor:pointer;
  transition:border-color .3s,color .3s}
.field input[type="file"]:hover::file-selector-button{border-color:var(--accent);color:var(--text)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field--consent{margin-top:22px}
.checkbox{display:flex;gap:.8em;align-items:flex-start;cursor:pointer;font-size:.9rem;color:var(--text-2);line-height:1.5}
.checkbox input{position:absolute;opacity:0;width:1px;height:1px}
.checkbox__box{flex:0 0 auto;width:22px;height:22px;border:1px solid var(--line-2);border-radius:6px;display:grid;place-items:center;background:var(--surface);transition:background .3s,border-color .3s;margin-top:1px}
.checkbox__box .icon{width:14px;height:14px;color:var(--accent-ink);opacity:0;transform:scale(.5);transition:opacity .25s,transform .25s}
.checkbox input:checked+.checkbox__box{background:var(--accent);border-color:var(--accent)}
.checkbox input:checked+.checkbox__box .icon{opacity:1;transform:none}
.checkbox input:focus-visible+.checkbox__box{outline:2px solid var(--accent);outline-offset:2px}
.quote-form__foot{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.quote-form__req-note{color:var(--text-3);font-size:.82rem}
.form-alert{padding:.9em 1.1em;border-radius:var(--r-sm);margin-bottom:20px;font-size:.92rem}
.form-alert--error{background:rgba(224,96,74,.1);border:1px solid rgba(224,96,74,.3);color:#f3a596}
.quote-success{padding:clamp(28px,4vw,44px);background:linear-gradient(160deg,rgba(224,164,74,.1),var(--surface));border:1px solid rgba(224,164,74,.28);border-radius:var(--r-lg);text-align:center}
.quote-success__icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--accent-ink);margin-bottom:18px}
.quote-success__icon .icon{width:2em;height:2em}
.quote-success h3{font-size:1.7rem;margin-bottom:10px}
.quote-success p{color:var(--text-2);max-width:46ch;margin-inline:auto}
.quote-card{position:sticky;top:calc(var(--strip-h) + var(--header-h) + 20px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,36px)}
.quote-card__title{font-size:1.4rem}
.quote-card__lead{color:var(--text-2);margin:10px 0 22px;font-size:.95rem}
.quote-card__contact{display:flex;flex-direction:column;gap:14px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.quote-card__contact li{display:flex;align-items:center;gap:.8em;color:var(--text)}
.quote-card__contact .icon{color:var(--accent-2);flex:0 0 auto}
.quote-card__contact a:hover{color:var(--accent-2)}
.quote-card__contact small{display:block;color:var(--text-3);font-size:.82rem;margin-top:2px}
.quote-card__benefits{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.quote-card__benefits li{display:flex;align-items:center;gap:.7em;font-size:.92rem;color:var(--text-2)}
.quote-card__benefits .icon{color:var(--accent)}
/* Konditionsblock (Lieferzeit, Zahlungsziel …) — erscheint nur, wenn in
   config/company.php unter 'terms' Werte hinterlegt sind. */
.quote-card__terms{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.quote-card__terms-title{font-family:var(--font-display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.quote-card__terms-list{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.92rem}
.quote-card__terms-list dt{color:var(--text-3)}
.quote-card__terms-list dd{color:var(--text)}
.quote-card__terms-note{margin-top:14px;color:var(--text-3);font-size:.82rem}

/* ---------- FOOTER ------------------------------------------------------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding-block:clamp(56px,7vw,90px) 30px}
.site-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:46px;border-bottom:1px solid var(--line)}
.site-footer__about{color:var(--text-2);margin:18px 0 12px;max-width:36ch;font-size:.95rem}
.site-footer__claim{color:var(--accent-2);font-family:var(--font-display);font-size:.92rem}
.site-footer__title{font-family:var(--font-display);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:18px}
.site-footer__col ul{display:flex;flex-direction:column;gap:12px}
.site-footer__col a{color:var(--text-2);font-size:.95rem;transition:color .3s}
.site-footer__col a:hover{color:var(--accent-2)}
.site-footer__contact address{display:flex;flex-direction:column;gap:7px;font-style:normal;color:var(--text-2);font-size:.95rem}
.site-footer__contact a:hover{color:var(--accent-2)}
.site-footer__hours{color:var(--text-3);font-size:.86rem;margin-top:4px}
/* Zwei Standorte im Seitenfuss: Firmenname einmal, darunter je Adresse eine
   Rollen-Zeile ("Lager, Vertrieb & Warenausgabe" / "Registersitz"). Ohne die
   Rolle liest sich die zweite Adresse wie ein Widerspruch. */
.site-footer__company{color:var(--text);font-weight:500}
.site-footer__role{margin-top:10px;color:var(--accent-2);font-family:var(--font-display);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.site-footer__role:first-of-type{margin-top:6px}
.site-footer__b2b{margin-top:14px;color:var(--text-3);font-size:.82rem;max-width:34ch}
.site-footer__demo{display:flex;align-items:center;gap:.8em;flex-wrap:wrap;margin-top:30px;color:var(--text-3);font-size:.86rem}
/* Pflichtangaben-Zeile: bewusst zurueckhaltend, sie soll auffindbar sein und
   nicht werben. Kontrast --text-3 auf --bg liegt bei 5,2:1 und damit ueber
   der AA-Schwelle von 4,5:1 — siehe Kontrastpruefung im Audit. */
.site-footer__legal{color:var(--text-3);font-size:.8rem;line-height:1.7;
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.site-footer__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px}
.site-footer__copy{color:var(--text-3);font-size:.86rem}
.site-footer__top{display:inline-flex;align-items:center;gap:.5em;color:var(--text-2);font-family:var(--font-display);font-size:.86rem;transition:color .3s,gap .3s}
.site-footer__top:hover{color:var(--accent-2);gap:.8em}
.site-footer__top .icon{width:1em;height:1em}

/* ---------- LEGAL / PRODUCT DETAIL -------------------------------------- */
.legal{padding-top:calc(var(--strip-h) + var(--header-h) + clamp(40px,6vw,80px))}
.legal__back{margin-bottom:30px}.legal__back .icon{transform:rotate(180deg)}
.legal__back:hover .icon{transform:rotate(180deg) translateX(4px)}
.legal__head{margin-bottom:24px}
.legal__title{font-size:clamp(2.2rem,5vw,3.4rem);margin-top:14px}
.legal__demo-note{padding:1em 1.2em;background:rgba(224,164,74,.08);border:1px solid rgba(224,164,74,.22);border-radius:var(--r-sm);color:var(--accent-2);font-size:.9rem;margin-bottom:36px}
.legal__block{margin-bottom:30px;max-width:70ch}
.legal__block h2{font-size:1.25rem;margin-bottom:10px}
.legal__block p{color:var(--text-2)}
.legal__block p + p{margin-top:12px}
.legal__block em{color:var(--text-3);font-style:normal;font-size:.92rem}
.legal__block a{color:var(--accent-2)}
/* Herkunftshinweis am Ende von Impressum/Datenschutz. */
.legal__note{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--text-3);font-size:.86rem;max-width:70ch}

/* ---------- KONDITIONEN & ABLAUF (?page=konditionen) --------------------- */
.konditionen .section__lead{margin-top:14px;max-width:60ch}
.konditionen__audience{padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.konditionen__audience h2{margin-bottom:8px}
/* Raster der harten Werte — erscheint nur mit hinterlegten Konditionen. */
.konditionen__figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:6px}
.konditionen__figure{padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.konditionen__figure dt{font-family:var(--font-display);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.konditionen__figure dd{color:var(--text);font-size:1.02rem}
.konditionen__binding{margin-top:16px;color:var(--text-3);font-size:.88rem}
.konditionen__foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.konditionen__or{color:var(--text-3);font-size:.92rem}
.konditionen__or a{color:var(--accent-2)}
.product-detail{padding-top:calc(var(--strip-h) + var(--header-h) + clamp(40px,6vw,80px))}
.product-detail__hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;margin:30px 0 clamp(40px,6vw,72px)}
.product-detail__media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:3/2}
.product-detail__media img{width:100%;height:100%;object-fit:cover}
.product-detail__index{position:absolute;top:18px;left:20px;font-family:var(--font-display);font-weight:700;font-size:1.2rem;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;background:rgba(8,10,13,.78)}
.product-detail__title{font-size:clamp(2rem,4.4vw,3.2rem);margin:14px 0}
.product-detail__lead{font-size:1.12rem;color:var(--text);margin-bottom:14px}
.product-detail__note{color:var(--text-2)}
.product-detail__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);margin-bottom:clamp(40px,6vw,72px)}
.product-detail__col h2{font-size:1.3rem;margin-bottom:14px}
.product-detail__cta{padding:clamp(28px,4vw,48px);background:linear-gradient(160deg,var(--surface-2),var(--bg-3));border:1px solid var(--line);border-radius:var(--r-lg);text-align:center}
.product-detail__cta h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:22px}

/* ---------- Motion / reveal --------------------------------------------- */
html.has-motion [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.has-motion [data-reveal="up"]{transform:translateY(40px)}
html.has-motion [data-reveal="left"]{transform:translateX(-44px)}
html.has-motion [data-reveal="right"]{transform:translateX(44px)}
html.has-motion [data-reveal="scale"]{transform:scale(.94)}
html.has-motion [data-reveal].is-inview{opacity:1;transform:none}
html.has-motion .hero__title-line{transform:translateY(110%);transition:transform 1.1s var(--ease)}
html.has-motion .hero__title-line.is-inview{transform:none}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:1080px){
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .industries__grid{grid-template-columns:repeat(3,1fr)}
  .references__grid{grid-template-columns:repeat(2,1fr)}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:34px}
}
/* Umschaltpunkt, nachgemessen am 16.08. (Chrome, deutsche Fassung — sie ist die
   breitere der beiden): die Leiste braucht 1127px, nutzbar sind
   min(Fenster,1280) - 112px Polsterung. Ab rund 1240px Fensterbreite passt
   alles; ab 1260px uebernimmt der Menueknopf, das laesst gut 20px Reserve.
   Wer hier Menuepunkte ergaenzt, muss beides neu nachmessen. */
@media (max-width:1259px){
  .site-nav,.site-header__cta{display:none}
  .nav-toggle{display:inline-flex}
}
@media (max-width:860px){
  .site-nav,.site-header__cta{display:none}
  .nav-toggle{display:inline-flex}
  .quote__layout{grid-template-columns:1fr}
  .export__inner{grid-template-columns:1fr}
  .why__stats{grid-template-columns:repeat(2,1fr);gap:30px 20px}
  .product-detail__hero,.product-detail__cols{grid-template-columns:1fr}
  .process-step{grid-template-columns:48px 1fr;gap:14px}
}
@media (max-width:560px){
  :root{--header-h:64px}
  .form-grid{grid-template-columns:1fr}
  .why__grid,.industries__grid,.references__grid{grid-template-columns:1fr}
  .hero__badges{gap:8px 16px}
  .product-card{flex-basis:84vw}
  .site-footer__grid{grid-template-columns:1fr}
  .btn--lg{width:100%}
  .hero__actions{flex-direction:column;align-items:stretch}
}

/* ---------- Reduced motion (mandatory) ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  /* Demo: scroll-driven motion and the ambient hero video stay on so the work is
     visible even when the OS requests reduced motion. Only the never-ending
     looping pulse is calmed. */
  .demo-strip__dot{animation:none}
}

/* ---------- SHOWCASE (scroll-driven image sequence, Apple/Framer-style) -- */
.showcase{position:relative;height:260vh;background:var(--bg)}
.showcase__pin{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;display:grid;align-items:center;background:#05070a}
.showcase__poster,.showcase__video,.showcase__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Das Canvas verhaelt sich wie das Video: erst unsichtbar, dann eingeblendet,
   sobald das erste Bild steht. Ohne das blitzt eine schwarze Flaeche auf. */
.showcase__canvas{opacity:0;transition:opacity .6s ease;display:block}
.showcase__canvas.is-ready{opacity:1}
.showcase__canvas.is-ready ~ .showcase__poster{opacity:0}
.is-sparsam .showcase__canvas{opacity:1}
.showcase__poster{transition:opacity .8s ease}
.showcase__video{opacity:0;transition:opacity 1s ease}
.showcase__video.is-ready{opacity:1}
.showcase__video.is-ready ~ .showcase__poster{opacity:0}
.showcase__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(5,7,10,.92),rgba(5,7,10,.5) 40%,rgba(5,7,10,0) 70%),
  linear-gradient(0deg,var(--bg),transparent 24%)}
.showcase__inner{position:relative;z-index:2;width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,56px);display:grid}
.showcase__caption{grid-area:1/1;max-width:560px;opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.showcase__caption.is-active{opacity:1;transform:none;pointer-events:auto}
.showcase__title{font-size:clamp(2rem,4.8vw,3.7rem);margin:.28em 0 .35em}
.showcase__text{color:var(--text-2);font-size:clamp(1.02rem,1.5vw,1.25rem);max-width:46ch}
.showcase__loader{position:absolute;left:0;right:0;bottom:46px;text-align:center;z-index:3;color:var(--text-3);
  font-family:var(--font-display);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;transition:opacity .6s}
.showcase.is-ready .showcase__loader{opacity:0}
.showcase__bar-wrap{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);z-index:3}
.showcase__bar{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 14px var(--accent-glow)}
@media (max-width:560px){.showcase{height:300vh}}
/* Mobile / lightweight: static poster + stacked captions (no 61-frame scrub) */
.showcase.is-static{height:auto}
.showcase.is-static .showcase__pin{position:relative;height:auto;min-height:88svh;display:grid;align-items:center;overflow:hidden}
.showcase.is-static .showcase__video,.showcase.is-static .showcase__bar-wrap{display:none}
.showcase.is-static .showcase__poster{opacity:1!important}
.showcase.is-static .showcase__inner{display:flex;flex-direction:column;gap:20px;padding-block:86px}
.showcase.is-static .showcase__caption{position:relative;opacity:1!important;transform:none!important;max-width:none}
/* Auf dem Handy stand das Bild randfuellend hinter vier gestapelten
   Textbloecken. Es ist im Querformat, das Feld war hochkant — gemessen
   waren noch 21 Prozent des Bildes zu sehen, der Rest abgeschnitten. Man
   sah eine graue Torflaeche und sonst nichts. Jetzt eine Bildkachel im
   Seitenfluss: volles 16:9, Text darunter. Gleiche Loesung wie im
   Angebotsabschnitt, damit die Seite auf dem Handy einheitlich bleibt.
   Kein Medienabfragen-Rahmen noetig: die Klasse setzt main.js genau dann,
   wenn es schmal ist. */
.showcase.is-static .showcase__pin{min-height:0;padding-top:clamp(34px,7vw,48px)}
.showcase.is-static .showcase__bg{position:relative;
  margin:0 clamp(20px,5vw,56px);aspect-ratio:16/9;border-radius:14px;
  overflow:hidden;border:1px solid var(--line)}
.showcase.is-static .showcase__poster{position:absolute;inset:0}
/* Kein Text mehr auf dem Bild, also kein Abdunkler. */
.showcase.is-static .showcase__scrim{display:none}
.showcase.is-static .showcase__inner{padding-block:28px 64px}

/* ---------------------------------------------------------------- Angebot
   Herbstaktion mit Hintergrundvideo. Das Video traegt keine Aussage — der
   Text liegt als HTML darueber, damit er scharf, uebersetzbar und von
   Suchmaschinen lesbar ist. Der Scrim sorgt fuer den Kontrast; ohne ihn
   waere heller Putz unter weisser Schrift nicht lesbar. */
.angebot{position:relative;overflow:hidden;padding-block:clamp(64px,9vw,112px);
  isolation:isolate;border-block:1px solid var(--line)}
.angebot__bg{position:absolute;inset:0;z-index:-1;background:#0b0d0f
  url("../img/angebot-herbst-poster.webp") center/cover no-repeat}
/* Das Standbild traegt den Abschnitt, bis das Video wirklich laeuft. Erst
   dann blendet es sich darueber — so gibt es kein schwarzes Loch und keinen
   Sprung, wenn die Leitung langsam ist. */
.angebot__video{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .9s ease}
.angebot__video.is-ready{opacity:1}
/* Zwei Verlaeufe. Der waagerechte traegt die Arbeit: links, wo die Schrift
   steht, deckt er fast vollstaendig ab, nach rechts laeuft er weit aus.
   Dort stehen Haustuer, Fenster und das Laub — die sollen zu sehen sein,
   sonst waere das Video sinnlos. Der senkrechte setzt die Sektion nur gegen
   Hero und Folgeabschnitt ab und bleibt deshalb schwach. */
.angebot__scrim{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,6,7,.93) 0%,rgba(5,6,7,.88) 40%,rgba(5,6,7,.64) 58%,
                          rgba(5,6,7,.30) 76%,rgba(5,6,7,.10) 100%),
    linear-gradient(180deg,rgba(5,6,7,.34),rgba(5,6,7,.04) 32%,rgba(5,6,7,.06) 68%,rgba(5,6,7,.42))}

.angebot__inner{position:relative;max-width:720px}
.angebot__eyebrow{color:var(--accent-2)}
.angebot__titel{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.05;
  margin:.35em 0 .5em;color:#fff}
.angebot__lead{font-size:clamp(1rem,1.4vw,1.16rem);color:var(--text-2);max-width:58ch}

.angebot__punkte{margin:26px 0 0;display:grid;gap:11px}
.angebot__punkte li{display:flex;align-items:flex-start;gap:.7em;
  color:var(--text);font-size:.99rem;line-height:1.5}
.angebot__punkte .icon{width:1.15em;height:1.15em;color:var(--accent);
  flex:0 0 auto;margin-top:.18em}

.angebot__aktion{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px}
.angebot__frist{font-family:var(--font-display);font-size:.84rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);
  border:1px solid rgba(255,157,43,.42);border-radius:999px;padding:.55em 1.05em}

.angebot__klein{margin-top:26px;font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.6);
  max-width:70ch}

/* Schmale Anzeigen halten dasselbe Prinzip wie der Rechner — Video im
   Hintergrund, Text darueber — bekommen dafuer aber eine eigene, hochkante
   Aufnahme. Das Querformat hier einzusetzen ginge nicht: als randfuellender
   Hintergrund in einem hochkanten Feld bliebe davon nur ein stark
   vergroesserter Ausschnitt der Bildmitte uebrig, es saehe gezoomt aus.
   Der Text liegt hier ueber die volle Hoehe, deshalb deckt der Verlauf
   gleichmaessig ab statt nur links. */
@media (max-width:860px){
  .angebot__inner{max-width:none}
  .angebot__bg{background-image:url("../img/angebot-herbst-hoch-poster.webp")}
  /* Gleichmaessig .82: der Text liegt hier ueber die volle Hoehe, und die
     hellste Stelle des Videos (Putz in der Sonne) verlangt so viel, damit
     weisse Schrift die 4,5:1 aus WCAG AA haelt. Nachgerechnet ueber 24
     Bilder der Schleife, ungunstigster Streifen 5,4:1. */
  .angebot__scrim{background:linear-gradient(180deg,rgba(5,6,7,.82) 0%,
    rgba(5,6,7,.82) 85%,rgba(5,6,7,.88) 100%)}
}
/* Die reduced-motion-Sperre fuer .angebot__video ist am 03.09.2026 entfallen.
   Sie hat das Video auf Remotedesktop-Sitzungen abgeschaltet, die "reduzierte
   Bewegung" melden, ohne dass jemand das eingestellt hat. Hero und Showcase
   laufen dort seit jeher weiter (siehe oben) — jetzt ist es einheitlich. */

/* ---------------------------------------------------------------- Katalog
   "Katalog auf Anfrage". Ein ruhiger Kasten statt einer weiteren bunten
   Sektion: der Abschnitt steht zwischen Sortiment und Nutzenargumenten und
   soll den Lesefluss nicht zerreissen, sondern eine Handlung anbieten. */
.katalog{padding-block:clamp(48px,7vw,88px)}
.katalog__box{position:relative;border:1px solid var(--line);border-radius:18px;
  padding:clamp(26px,4vw,54px);background:
    linear-gradient(135deg,rgba(255,157,43,.07),rgba(255,157,43,0) 46%),
    rgba(255,255,255,.02)}
.katalog__text{max-width:64ch}
.katalog__punkte{margin:22px 0 0;display:grid;gap:10px}
.katalog__punkte li{display:flex;align-items:flex-start;gap:.7em;
  color:var(--text);font-size:.99rem;line-height:1.5}
.katalog__punkte .icon{width:1.1em;height:1.1em;color:var(--accent);
  flex:0 0 auto;margin-top:.2em}
.katalog__aktion{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.katalog__zahl{font-family:var(--font-display);font-size:.84rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
/* Der B2B-Hinweis steht sichtbar dabei, nicht im Kleingedruckten: wer privat
   anfragt, soll es vorher lesen und nicht nach der Absage. */
.katalog__hinweis{margin-top:24px;display:flex;align-items:flex-start;gap:.6em;
  font-size:.82rem;line-height:1.6;color:var(--text-3);max-width:70ch}
.katalog__hinweis .icon{width:1.05em;height:1.05em;flex:0 0 auto;margin-top:.22em}
@media (max-width:560px){
  .katalog__aktion .btn{width:100%;justify-content:center}
}

/* Bildfolge im Angebotsabschnitt — gleiche Rolle wie .angebot__video, nur
   ohne Videodecoder. Beide koennen nebeneinander im Markup stehen; welches
   greift, entscheidet die Breite (data-small-max / data-only-small). */
.angebot__canvas{width:100%;height:100%;display:block;
  opacity:0;transition:opacity .6s ease}
.angebot__canvas.is-ready{opacity:1}