/* ==========================================================================
   base.css – Struktur und Layout. Enthält KEINE Farben und keine Schriften,
   nur Variablen-Aufrufe. Das Aussehen liefert theme-a|b|c.css.
   Variablen-Vertrag, den jedes Theme setzen muss: siehe theme-a.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--ff-body);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-btn-bg); color: var(--c-btn-text);
  padding: var(--sp-sm) var(--sp-md); font-weight: 700;
}
.skip-link:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--max-w)); margin-inline: auto; }

h1, h2, h3 { font-family: var(--ff-head); line-height: 1.15; text-wrap: balance; }

/* --- Buttons --------------------------------------------------------- */
.btn {
  display: inline-block; padding: .85rem 1.6rem; border: 2px solid transparent;
  border-radius: var(--rad-sm); font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.btn--primary { background: var(--c-btn-bg); color: var(--c-btn-text); }
.btn--primary:hover { background: var(--c-btn-bg-hover); }
.btn--ghost { border-color: var(--c-border-stark); color: var(--c-text); }
.btn--ghost:hover { border-color: var(--c-akzent-text); color: var(--c-akzent-text); }

/* --- Abschnitts-Köpfe ------------------------------------------------ */
.abschnitt-kopf { max-width: 46rem; margin-bottom: var(--sp-lg); }
.abschnitt-titel { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: var(--sp-xs); }
.abschnitt-sub { color: var(--c-text-muted); font-size: 1.05rem; }

/* --- Kopf / Navigation ----------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-kopf-bg); border-bottom: 1px solid var(--c-border);
  backdrop-filter: var(--kopf-blur, none); -webkit-backdrop-filter: var(--kopf-blur, none);
}
.kopf__inner { display: flex; align-items: center; gap: var(--sp-md); min-height: var(--header-h); }
.kopf__logo { display: flex; align-items: center; gap: var(--sp-sm); text-decoration: none; flex-shrink: 0; }
.kopf__logo img { height: 40px; width: auto; filter: var(--logo-filter, none); }
.kopf__bereich {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text-muted); border-left: 1px solid var(--c-border); padding-left: var(--sp-sm);
}
.kopf__nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-md); }
.kopf__nav ul { display: flex; gap: var(--sp-md); list-style: none; }
.kopf__nav a { text-decoration: none; font-weight: 600; padding: .4rem 0; border-bottom: 2px solid transparent; }
.kopf__nav a:hover { border-bottom-color: var(--c-accent); }
.kopf__nav a[aria-current="page"] { border-bottom-color: var(--c-accent); color: var(--c-akzent-text); }

/* Bereichswechsel: eigene Leiste ueber dem Kopf, damit der Kippschalter nicht
   zwischen den Textlinks steht. Es ist ein Link, kein Formularfeld – der
   Schalter zeigt an, wo man ist, und fuehrt mit einem Klick auf die andere
   Seite. Ohne JavaScript, weil ein Link von sich aus navigiert. */
.bereichsleiste { background: var(--c-dark); color: var(--c-dark-text); }
.bereichsleiste__inner { display: flex; justify-content: center; padding-block: .35rem; }
.schalter {
  --sz: 13px;
  display: inline-flex; align-items: center; gap: .75rem;
  text-decoration: none; font-size: .78rem; letter-spacing: .03em;
}
.schalter__seite { color: var(--c-dark-muted); transition: color .3s; }
.schalter__seite.ist-an { color: var(--c-akzent-dunkel); font-weight: 700; }
.schalter__wippe {
  position: relative; flex-shrink: 0;
  width: calc(var(--sz) * 4); height: calc(var(--sz) * 2); border-radius: var(--sz);
  background: linear-gradient(0deg, #121720, #0d1217);
  box-shadow: 0 0 1px 1px #0006, 0 -1px 3px 1px #0b0b10,
              0 1px 2px 1px #f5f5f588, 0 -1px 1px 2px #00000060;
}
.schalter__wippe::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 calc(var(--sz) / 3) calc(var(--sz) / 10) #000 inset;
}
.schalter__knebel {
  position: absolute; z-index: 2;
  top: calc(var(--sz) / 14); left: calc(var(--sz) / 14);
  width: calc(var(--sz) * 2.2); height: calc(var(--sz) * 2 - var(--sz) / 7);
  border-radius: var(--sz);
  background: linear-gradient(0deg, #2b2b2b, #565656);
  /* Der Lichtsaum sitzt auf der Seite, zu der der Knebel gekippt ist – das
     ersetzt die zwei Lampen der Vorlage. */
  box-shadow: calc(var(--sz) / -8) 0 calc(var(--sz) / 6) calc(var(--sz) / -8) var(--c-accent),
              calc(var(--sz) / 8) 0 calc(var(--sz) / 8) calc(var(--sz) / -8) var(--c-accent) inset,
              calc(var(--sz) / -50) calc(var(--sz) / 40) calc(var(--sz) / 25) 0 #fff3 inset,
              0 0 calc(var(--sz) / 10) calc(var(--sz) / 50) #000c,
              0 calc(var(--sz) / 4) calc(var(--sz) / 5) 0 #000d;
  transition: left .35s cubic-bezier(.4, 1.5, .6, 1);
}
.schalter[data-stand="motoren"] .schalter__knebel {
  left: calc(100% - var(--sz) * 2.2 - var(--sz) / 14);
  box-shadow: calc(var(--sz) / 8) 0 calc(var(--sz) / 6) calc(var(--sz) / -8) var(--c-accent),
              calc(var(--sz) / -8) 0 calc(var(--sz) / 8) calc(var(--sz) / -8) var(--c-accent) inset,
              calc(var(--sz) / -50) calc(var(--sz) / 40) calc(var(--sz) / 25) 0 #fff3 inset,
              0 0 calc(var(--sz) / 10) calc(var(--sz) / 50) #000c,
              0 calc(var(--sz) / 4) calc(var(--sz) / 5) 0 #000d;
}
.schalter:hover .schalter__knebel { background: linear-gradient(0deg, #2a2a2a, #565656); }

/* Mobile Navigation – reines CSS, kein JavaScript */
.nav-schalter, .nav-knopf { display: none; }
@media (max-width: 900px) {
  /* Die Checkbox trägt den Menüzustand und muss deshalb fokussierbar bleiben.
     Mit display:none fällt sie aus der Tab-Reihenfolge — dann lässt sich das
     Menü per Tastatur nicht öffnen (WCAG 2.1.1, Level A). Also unsichtbar,
     aber vorhanden; den Fokusring zeigt stattdessen das Label.
     Auf dem Desktop bleibt sie display:none: dort ist die Navigation ohnehin
     offen, und ein fokussierbares unsichtbares Element wäre eine Fokusfalle. */
  .nav-schalter { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
  .nav-schalter:focus-visible ~ .nav-knopf { outline: 2px solid currentColor; outline-offset: 2px; }
  .nav-knopf {
    display: flex; align-items: center; gap: .5rem; margin-left: auto;
    padding: .5rem .9rem; border: 1px solid var(--c-border-stark); border-radius: var(--rad-sm);
    font-weight: 700; cursor: pointer;
  }
  .nav-knopf span { width: 18px; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }
  .kopf__nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--sp-sm);
    background: var(--c-kopf-bg); border-bottom: 1px solid var(--c-border); padding: var(--sp-md);
  }
  .nav-schalter:checked ~ .kopf__nav { display: flex; }
  .kopf__nav ul { flex-direction: column; gap: var(--sp-sm); }
  .kopf__bereich { display: none; }
}

/* --- Explosionsdarstellung -------------------------------------------- */
/* Grundzustand = auseinandergefahren, Legende sichtbar. So sieht die Seite
   ohne JavaScript aus und so liest sie jede Suchmaschine. Das Skript nimmt
   .laeuft weg und setzt es erst wieder, wenn der Abschnitt mittig im Bild
   steht — dann faehrt das Geraet nach rechts und zerlegt sich. */
.geraete { padding-block: clamp(2rem, 5vw, 3.5rem); }
.geraete + .geraete { padding-top: 0; }
.geraete__bereich {
  --ruhig: cubic-bezier(.22, .61, .36, 1);
  display: grid; gap: var(--sp-lg); align-items: center; margin-top: var(--sp-md);
}
@media (min-width: 900px) { .geraete__bereich { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* Vor dem Start liegt die Zeichnung mittig ueber der ganzen Breite: um die
   halbe Legendenspalte nach links, also 25 % der eigenen Breite plus halber
   Spaltenabstand. Prozente im transform rechnen auf die eigene Box. */
.geraet__huelle { transition: transform 900ms var(--ruhig); }
@media (min-width: 900px) {
  .geraete__bereich:not(.laeuft) .geraet__huelle {
    transform: translateX(calc(-25% - var(--sp-lg) / 2)) scale(1.35);
  }
}
.geraet {
  container-type: size; position: relative; width: 100%;
  aspect-ratio: var(--seite); margin-inline: auto;
}
.teil {
  position: absolute; transform-origin: center; opacity: 1; cursor: pointer;
  transform: translate(0, 0) scale(1);
  transition: transform 1000ms var(--ruhig) var(--v, 0ms), filter 180ms ease,
              opacity 600ms ease;
}
/* Zusammengebaut: Teile zur Buehnenmitte, leicht verkleinert, unsichtbar. Der
   Rueckweg braucht die spaete Deckkraft – erst zusammenfahren (1000 ms), dann
   ausblenden, sonst steht das montierte Foto zu frueh im Bild. */
.geraete__bereich:not(.laeuft) .teil {
  transform: translate(var(--mx), var(--my)) scale(.85);
  opacity: 0; pointer-events: none;
  transition: transform 1000ms var(--ruhig), filter 180ms ease,
              opacity 240ms ease 1020ms;
}
.teil.hell { filter: drop-shadow(0 0 10px var(--c-accent)) drop-shadow(0 0 3px var(--c-accent)); }
.teil.gedimmt { opacity: .2; }

/* Montiert ist das Originalfoto. Aus den freigestellten Teilen laesst sich
   kein sauberer Zusammenbau stapeln: jedes ist aus seiner Explosionslage
   fotografiert, der Zusatzgriff zeigt dort zur Kamera statt zur Seite. */
.montiert {
  /* left/top/width stehen als style-Attribut am Bild: sie haengen am Geraet,
     nicht am Stylesheet. Bis 02.09.2026 standen hier die Winkelschleifer-Werte
     fest verdrahtet — die drei Geraete haben verschiedene Bildformate. */
  position: absolute; z-index: 40;
  pointer-events: none; transform-origin: center;
  opacity: 0; transform: scale(.89);
  transition: opacity 380ms ease, transform 380ms var(--ruhig);
}
.geraete__bereich:not(.laeuft) .montiert {
  opacity: 1; transform: none;
  transition: opacity 320ms ease 1100ms, transform 320ms var(--ruhig) 1100ms;
}

/* Legende: nur die Benennung. Erscheint erst, wenn das Geraet Platz gemacht hat. */
.legende { list-style: none; display: grid; gap: 1px; align-content: center; }
.geraete__bereich:not(.laeuft) .legende {
  opacity: 0; transform: translateX(-1rem); pointer-events: none;
}
.legende {
  opacity: 1; transform: none;
  transition: opacity 500ms ease 350ms, transform 500ms var(--ruhig) 350ms;
}
.legende button {
  width: 100%; display: flex; gap: .7rem; align-items: baseline; text-align: left;
  padding: .35rem .6rem; border: 0; border-radius: var(--rad-sm);
  background: transparent; font: inherit; color: inherit; cursor: pointer;
  transition: background .18s, color .18s;
}
.legende button[disabled] { cursor: default; }   /* ohne Skript nicht bedienbar */
.legende__nr { flex: 0 0 1.6rem; font-size: .75rem; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.legende__name { font-weight: 700; line-height: 1.35; }
.legende button:hover, .legende button:focus-visible, .legende button.hell { background: var(--c-bg-alt); }
.legende button:hover .legende__nr, .legende button.hell .legende__nr { color: var(--c-akzent-text); }

/* Kennzeichnung der Bildherkunft (Art. 50 KI-VO): leise, aber lesbar. */
.geraete__hinweis {
  margin-top: var(--sp-sm); font-size: .8rem; color: var(--c-text-muted);
}

/* Jeder zweite Abschnitt seitenverkehrt: Zeichnung links, Legende rechts.
   Nur ab 900 px — schmal steht ohnehin alles untereinander, und dort soll die
   Legende in allen Abschnitten an derselben Stelle bleiben. Gleiche
   Spezifitaet wie die Regeln oben, gewinnt also ueber die Reihenfolge. */
@media (min-width: 900px) {
  .geraete__bereich--spiegel { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .geraete__bereich--spiegel .legende { order: 2; }
  .geraete__bereich--spiegel:not(.laeuft) .geraet__huelle {
    transform: translateX(calc(25% + var(--sp-lg) / 2)) scale(1.35);
  }
  .geraete__bereich--spiegel:not(.laeuft) .legende { transform: translateX(1rem); }
}

/* --- Hero ------------------------------------------------------------- */
.hero { background: var(--c-hero-bg); color: var(--c-hero-text); padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero__inner { display: grid; gap: var(--sp-lg); align-items: center; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.1fr 1fr; } }
.zurueck {
  /* block, sonst stellt sich der Kicker daneben statt darunter */
  display: block; width: max-content; margin-bottom: var(--sp-sm); text-decoration: none;
  font-size: .85rem; font-weight: 700; color: var(--c-hero-muted);
  transition: color .2s;
}
.zurueck:hover { color: var(--c-hero-akzent); }

.hero__kicker {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-hero-akzent); margin-bottom: var(--sp-sm);
}
.hero__title { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: var(--sp-sm); }
.hero__text { font-size: 1.125rem; color: var(--c-hero-muted); max-width: 34rem; margin-bottom: var(--sp-md); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.hero__bild { border-radius: var(--rad-md); }

/* --- Karten ----------------------------------------------------------- */
.karten { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.karten__grid { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.karte {
  display: flex; flex-direction: column; gap: var(--sp-xs);
  background: var(--c-karte-bg); border: 1px solid var(--c-karte-border);
  border-radius: var(--rad-md); padding: var(--sp-md); box-shadow: var(--shadow-karte);
  backdrop-filter: var(--karte-blur, none); -webkit-backdrop-filter: var(--karte-blur, none);
  transition: transform .2s, border-color .2s;
}
.karte:hover { transform: translateY(-3px); border-color: var(--c-accent); }
.karte__titel { font-size: 1.15rem; }
.karte__text { color: var(--c-text-muted); font-size: .95rem; flex: 1; }
.karte__link { color: var(--c-akzent-text); font-weight: 700; text-decoration: none; }
.karte__link:hover { text-decoration: underline; }

/* --- USP -------------------------------------------------------------- */
.usp { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--c-bg-alt); }
.usp__grid { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: var(--sp-lg); }
.usp__item { border-top: 3px solid var(--c-accent); padding-top: var(--sp-sm); }
.usp__titel { font-size: 1.05rem; margin-bottom: .35rem; }
.usp__text { color: var(--c-text-muted); font-size: .95rem; }

/* --- Textblock -------------------------------------------------------- */
.textblock { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.textblock__inner { display: grid; gap: var(--sp-lg); align-items: start; }
@media (min-width: 900px) { .textblock__inner { grid-template-columns: 1.2fr 1fr; } }
.textblock__text p { margin-top: var(--sp-sm); max-width: 40rem; color: var(--c-text-muted); }
.textblock__bild { border-radius: var(--rad-md); }

/* --- Liste ------------------------------------------------------------ */
.liste { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--c-bg-alt); }
.liste__items { list-style: none; display: grid; gap: var(--sp-sm); margin-top: var(--sp-md);
                grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.liste__item { position: relative; padding-left: 1.9rem; }
.liste__item::before {
  content: ""; position: absolute; left: 0; top: .45em; width: .85rem; height: .45rem;
  border-left: 3px solid var(--c-accent); border-bottom: 3px solid var(--c-accent);
  transform: rotate(-45deg);
}

/* --- Trust-Leiste ----------------------------------------------------- */
.trust { background: var(--c-dark); color: var(--c-dark-text); padding-block: var(--sp-md); }
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-md); }
.trust__partner { display: flex; align-items: center; gap: var(--sp-lg); flex-wrap: wrap; }
/* Partner-Logos auf heller Platte statt invertiert: das FEIN-Logo hat einen
   deckenden Hintergrund und würde vom Invertieren zur weißen Fläche. */
.trust__logo { height: 28px; width: auto; background: #fff; padding: .4rem .6rem;
               border-radius: var(--rad-sm); }
.trust__seit, .trust__ort { display: flex; flex-direction: column; line-height: 1.3; }
.trust__seit strong, .trust__ort strong { font-size: 1.05rem; }
.trust__seit span, .trust__ort span { font-size: .8rem; opacity: .7; }

/* --- Kontakt & Formular ----------------------------------------------- */
.kontakt { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.kontakt__inner { display: grid; gap: var(--sp-lg); }
@media (min-width: 900px) { .kontakt__inner { grid-template-columns: 1fr 1.2fr; } }
.kontakt__intro { color: var(--c-text-muted); margin-bottom: var(--sp-md); }
.kontakt__liste dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-muted); margin-top: var(--sp-sm); }
.kontakt__liste dd { font-size: 1.05rem; }
.kontakt__liste a { color: var(--c-akzent-text); text-decoration: none; font-weight: 600; }
.kontakt__liste a:hover { text-decoration: underline; }
.kontakt__liste small { color: var(--c-text-muted); font-size: .8rem; }

.formular {
  background: var(--c-karte-bg); border: 1px solid var(--c-karte-border);
  border-radius: var(--rad-md); padding: var(--sp-md); box-shadow: var(--shadow-karte);
}
.feld { margin-bottom: var(--sp-sm); }
.feld label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: .7rem .8rem; font: inherit; color: var(--c-text);
  background: var(--c-bg); border: 1px solid var(--c-border-stark); border-radius: var(--rad-sm);
}
.feld textarea { resize: vertical; min-height: 8rem; }
.feld small { display: block; color: var(--c-text-muted); font-size: .8rem; margin-top: .25rem; }
.formular__recht { color: var(--c-text-muted); margin-top: var(--sp-sm); }
.formular__recht a { color: var(--c-akzent-text); }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hinweis { padding: var(--sp-sm) var(--sp-md); border-radius: var(--rad-sm); border-left: 4px solid; margin-bottom: var(--sp-md); }
.hinweis--ok { border-color: #2f7d32; background: rgba(47,125,50,.1); }
.hinweis--fehler { border-color: #b3261e; background: rgba(179,38,30,.1); }
.hinweis ul { margin: var(--sp-xs) 0 0 1.1rem; }

/* --- Bild-Platzhalter (Design-Phase) ---------------------------------- */
.platzhalter {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  width: 100%; background: repeating-linear-gradient(45deg, var(--c-bg-alt) 0 12px, var(--c-border) 12px 24px);
  border: 2px dashed var(--c-border-stark); border-radius: var(--rad-md);
  color: var(--c-text-muted); font-size: .95rem; font-weight: 700;
}
.platzhalter small { font-weight: 400; font-size: .8rem; }

/* --- Rechtstexte ------------------------------------------------------ */
.recht { padding-block: clamp(2.5rem, 6vw, 4rem); }
.recht__inner { max-width: 46rem; }
.recht h2 { font-size: 1.25rem; margin-top: var(--sp-lg); margin-bottom: var(--sp-xs); }
.recht p { margin-bottom: var(--sp-sm); color: var(--c-text-muted); }
.recht a { color: var(--c-akzent-text); }

/* --- Fuß -------------------------------------------------------------- */
.fuss { background: var(--c-dark); color: var(--c-dark-text); padding-top: var(--sp-xl); margin-top: var(--sp-xl); }
.fuss__inner { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.fuss__firma { margin-bottom: var(--sp-sm); }
.fuss__nap p { margin-bottom: var(--sp-sm); color: var(--c-dark-muted); }
.fuss__nap a { color: var(--c-akzent-dunkel); text-decoration: none; }
.fuss__titel { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; opacity: .6; margin-bottom: var(--sp-sm); }
.fuss__spalte ul { list-style: none; display: grid; gap: .5rem; }
.fuss__spalte a { text-decoration: none; opacity: .85; }
.fuss__spalte a:hover { opacity: 1; color: var(--c-akzent-dunkel); }
.fuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-sm);
  margin-top: var(--sp-lg); padding-block: var(--sp-md);
  border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; opacity: .75;
}
.fuss__recht { display: flex; gap: var(--sp-md); align-items: center; }
.fuss__login { opacity: .6; font-size: .85rem; }
.fuss__login:hover { opacity: 1; }
.fuss__recht a { text-decoration: none; }
.fuss__recht a:hover { color: var(--c-akzent-dunkel); }

/* --- Splash ----------------------------------------------------------- */
.splash-body { min-height: 100vh; display: flex; background: var(--c-splash-bg); color: var(--c-dark-text); }
.splash {
  width: min(100% - 2.5rem, var(--max-w)); margin: auto;
  display: flex; flex-direction: column; gap: var(--sp-lg); padding-block: var(--sp-xl);
}
.splash__kopf { text-align: center; }
.splash__logo { margin: 0 auto var(--sp-sm); height: 54px; width: auto; filter: brightness(0) invert(1); }
.splash__claim { color: var(--c-dark-muted); }
.splash__wege { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.splash__weg {
  display: flex; flex-direction: column; gap: .5rem; text-decoration: none;
  padding: var(--sp-lg); border: 1px solid var(--c-splash-border); border-radius: var(--rad-md);
  background: var(--c-splash-karte); transition: transform .25s, border-color .25s, background .25s;
}
.splash__weg:hover { transform: translateY(-4px); border-color: var(--c-accent); background: var(--c-splash-karte-hover); }
.splash__weg-kicker { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-akzent-dunkel); }
.splash__weg-titel { font-family: var(--ff-head); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; }
.splash__weg-text { color: var(--c-dark-muted); font-size: .95rem; flex: 1; }
.splash__weg-cta { font-weight: 700; color: var(--c-akzent-dunkel); margin-top: var(--sp-sm); }
.splash__fuss { text-align: center; font-size: .85rem; color: var(--c-dark-muted); }
.splash__fuss a { color: inherit; }