/* Gemeinsames Stylesheet aller Aprexa-Seiten. Bis zum Mehrseiten-Umbau steckte
   dieser Block als <style> in jeder Seite einzeln (startseite-3.html hatte die
   volle Fassung, impressum.html/datenschutz.html eine verkuerzte, leicht
   abweichende Kopie). Jetzt gibt es nur noch eine Quelle - Aenderungen an
   Farben, Schrift oder Bausteinen wirken automatisch auf allen Seiten. */

:root{
  --tinte:#00419C;
  --tinte-tief:#002B66;
  --tinte-hell:#004FC3;
  /* Firmenfarben: Blau, Grau, Anthrazit, Weiss - kein Orange mehr. Die
     Variablennamen "akzent*" sind bewusst stehengeblieben (an rund 45
     Stellen im Stylesheet verwendet) - nur die WERTE wechseln von Orange auf
     Anthrazit/Grau, damit nicht jede einzelne Stelle einzeln angefasst werden
     musste. */
  --akzent:#2B2F36;
  --akzent-hell:#5B6572;
  --akzent-blass:#EEF0F2;
  --gruen:#15803D;
  --papier:#FAFAFB;
  --papier-tief:#EFF1F3;
  --linie:#D7DBE0;
  --linie-fein:#E7EAED;
  --text:#1C2126;
  --leise:#6B7280;
  --graublau:#8296A5;
  /* Stahlgrau als Strukturfarbe: Linien und Kanten, nie Text —
     auf Papier nur 2,8:1 Kontrast. */
  --stahl-linie:rgba(130,150,165,.55);
  --breite:1240px;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--text);
  font-family:var(--sans);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.huelle{max-width:var(--breite);margin:0 auto;padding:0 40px}
a{color:inherit}
.marke{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--akzent)}

/* ---------- Einblenden (nur mit JavaScript) ---------- */
.js .zeig{
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.2,1);
}
.js .zeig.da{opacity:1;transform:none}

/* ---------- Kopf, schrumpft beim Scrollen ---------- */
/* Helles Blaugrau-Glas statt reinem Weiss/Creme - Hendriks erste Reaktion:
   "irgendwas anderes als den weissen Balken". Ein erster Versuch mit
   dunklem Glas machte das Logo unlesbar und musste dafuer auf Weiss
   umgefaerbt werden - Hendriks Korrektur: "die Farben beibehalten". Jetzt
   bleibt das Logo unveraendert in seinen echten Farben (navy/orange auf
   transparent) und nur der Untergrund wechselt auf einen kuehleren,
   erkennbar von Creme verschiedenen Blauton statt eines Dunkel-Umbaus. */
header{
  position:sticky;top:0;z-index:40;background:rgba(210,221,232,.78);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
header.fest{background:rgba(198,211,224,.9);border-bottom-color:var(--linie);box-shadow:0 8px 26px -22px rgba(15,66,114,.6)}
.kopf{display:flex;align-items:center;gap:40px;height:92px;transition:height .3s cubic-bezier(.2,.7,.2,1)}
header.fest .kopf{height:70px}
.kopf img{height:34px;width:auto;display:block;transition:height .3s}
header.fest .kopf img{height:28px}
.kopf nav{margin-left:auto;display:flex;gap:30px;align-items:center}
.kopf nav[hidden]{display:none}
.kopf nav a{text-decoration:none;font-size:14px;color:var(--text);position:relative;padding-bottom:4px}
.kopf nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--akzent);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.kopf nav a:hover::after{width:100%}
/* Aktiver Menuepunkt: die Seite setzt <body id="pg-..."> selbst, die Zuordnung
   zum Nav-Link passiert rein ueber CSS - kein Unterschied im HTML zwischen den
   Seiten noetig. */
body#pg-ablauf .kopf nav a[href="ablauf.html"],
body#pg-nachweis .kopf nav a[href="ablauf.html#nachweis"],
body#pg-leistungen .kopf nav a[href="leistungen.html"],
body#pg-ueber-uns .kopf nav a[href="ueber-uns.html"],
body#pg-einkauf .kopf nav a[href="einkauf.html"],
body#pg-kontakt .kopf nav a[href="kontakt.html"]{
  color:var(--akzent);
}
body#pg-ablauf .kopf nav a[href="ablauf.html"]::after,
body#pg-leistungen .kopf nav a[href="leistungen.html"]::after,
body#pg-ueber-uns .kopf nav a[href="ueber-uns.html"]::after,
body#pg-einkauf .kopf nav a[href="einkauf.html"]::after,
body#pg-kontakt .kopf nav a[href="kontakt.html"]::after{
  width:100%;
}

.marke-zeile{display:flex;align-items:center;gap:16px}

/* ---------- Aufmacher: kraeftiger Verlauf statt blasser Flaeche ----------
   Erster Anlauf war ein fast unsichtbares Icon auf cremefarbenem Grund -
   Hendriks Reaktion: "passt nicht zu jung, dynamisch, frisch". Jetzt ein
   satter, schraeger Verlauf durch die ganze Markenpalette (Tinte bis Akzent)
   mit dem grossen "A"-Zeichen als bewusst sichtbare, weiss eingefaerbte
   Flaeche darauf - kein Ghost-Icon mehr, sondern eine Marke, die man sofort
   erkennt. Text in der Sektion wechselt deshalb auf helle Farben (wie in
   .dunkel), sonst waere der Kontrast auf dem dunkleren Verlaufsende zu
   schwach. */
.auf{
  position:relative;padding:96px 0 84px;overflow:hidden;color:var(--papier);
  background:linear-gradient(128deg,var(--tinte-tief) 0%,var(--tinte) 32%,var(--tinte-hell) 54%,var(--akzent-hell) 82%,var(--akzent) 100%);
  background-size:180% 180%;
  animation:verlaufTreiben 18s ease-in-out infinite alternate;
}
@keyframes verlaufTreiben{from{background-position:0% 30%}to{background-position:100% 70%}}
/* Grosses "A", frei ueber der ganzen Seite wandernd statt im Aufmacher
   verankert - Hendriks Wunsch: "Beleg fest, nur das A wandern lassen, aber
   ueber die komplette Seite". position:fixed statt absolute: haengt am
   Bildschirm, nicht an der Aufmacher-Sektion, bleibt beim Scrollen also
   sichtbar unterwegs statt an der Herohöhe zu enden. mix-blend-mode:overlay
   sorgt dafuer, dass es sowohl auf dem dunklen Verlauf als auch ueber hellen
   Abschnitten weiter unten auf der Seite lesbar bleibt, statt auf hellem
   Grund zu verschwinden (waere bei reinem Weiss-Filter + niedriger Opazitaet
   auf cremefarbenem Grund praktisch unsichtbar). */
.wz{
  position:fixed;width:30vw;max-width:360px;min-width:200px;
  filter:brightness(0) invert(1);opacity:.22;mix-blend-mode:overlay;
  pointer-events:none;z-index:1;
  animation:wzWandern 46s ease-in-out infinite;
}
@keyframes wzWandern{
  0%    {top:-4vh;  left:68vw; transform:rotate(-8deg)}
  22%   {top:26vh;  left:8vw;  transform:rotate(4deg)}
  48%   {top:58vh;  left:72vw; transform:rotate(-10deg)}
  74%   {top:88vh;  left:14vw; transform:rotate(6deg)}
  100%  {top:-4vh;  left:68vw; transform:rotate(-8deg)}
}
@media (prefers-reduced-motion:reduce){ .wz{animation:none;top:-4vh;left:68vw} }
.auf-gitter{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.auf .marke{color:#D7DEE5}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,4.7vw,64px);line-height:1.06;letter-spacing:-.02em;
  color:var(--tinte);margin:18px 0 0;
}
/* Weiss nur innerhalb des Verlaufs-Aufmachers - als globale h1-Regel gesetzt,
   war "Impressum" auf hellem Grund unsichtbar (weisse Schrift auf weiss).
   main.recht h1 (Impressum/Datenschutz) braucht die dunkle Grundfarbe. */
.auf h1{color:#fff}
.auf h1 em{font-style:italic;position:relative;white-space:nowrap;color:#C9D6E4;background:none;-webkit-text-fill-color:currentColor}
.js h1 .wisch{display:inline-block;overflow:hidden;vertical-align:bottom}
.js h1 .wisch > span{display:inline-block;animation:hoch .9s cubic-bezier(.2,.8,.2,1) both}
.js h1 .wisch:nth-child(2) > span{animation-delay:.12s}
.js h1 .wisch:nth-child(3) > span{animation-delay:.24s}
@keyframes hoch{from{transform:translateY(102%)}to{transform:none}}
.vorspann{font-size:18.5px;color:#E3EBF3;max-width:46ch;margin:30px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.25)}
.aktionen{display:flex;gap:26px;align-items:center;margin-top:34px;flex-wrap:wrap}
.knopf{
  display:inline-block;text-decoration:none;font-size:15px;font-weight:600;
  background:var(--tinte);color:#fff!important;padding:15px 30px;border:1px solid var(--tinte);
  border-radius:12px;
  position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s,background .25s;
}
.knopf span{position:relative;z-index:1}
.knopf::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#15181C,var(--akzent));transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.knopf:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(20,22,26,.55);border-color:var(--akzent)}
.knopf:hover::before{transform:none}
.knopf:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.knopf[disabled],.knopf:disabled{
  opacity:1;background:#44648F;border-color:#44648F;cursor:progress;transform:none;box-shadow:none;
}
.knopf[disabled]::before,.knopf:disabled::before{transform:translateY(101%)}
/* Auf dem Verlauf braucht der Knopf einen hellen statt dunklen Auftritt,
   sonst verschwindet er im blauen Teil des Hintergrunds. */
.auf .knopf{background:#fff;color:var(--tinte)!important;border-color:#fff}
.auf .knopf::before{background:linear-gradient(100deg,#fff,#fff)}
.auf .knopf:hover{color:var(--akzent)!important}
.textlink{text-decoration:none;font-size:15px;color:var(--tinte);border-bottom:1px solid var(--linie);padding-bottom:2px;transition:border-color .25s,color .25s}
.textlink:hover{border-bottom-color:var(--akzent);color:var(--akzent)}
/* Festnetz und Mobil gestapelt neben dem Knopf (15.09.2026) - zwei Links
   nebeneinander brachen sonst einzeln in die naechste Zeile. */
.anrufen{display:inline-flex;flex-direction:column;gap:8px;align-items:flex-start}
.auf .textlink{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.auf .textlink:hover{color:#C9D6E4;border-bottom-color:#C9D6E4}

/* ---------- Echtes App-Muster im Aufmacher ----------
   Ersetzt die fruehere handgebaute .beleg-Karte (fiktiver "Musterbeleg").
   Echter, anonymisierter Screenshot aus der Kundendemo, gerahmt wie ein
   Browserfenster. */
.muster-rahmen{
  background:#fff;border:1px solid var(--linie);padding:10px;position:relative;
  box-shadow:0 2px 0 var(--linie-fein),0 30px 60px -34px rgba(15,66,114,.55);
  transform:rotate(.6deg);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;
}
/* Der Beleg ist ein Dokument - der bleibt fest stehen. Nur das "A" wandert
   (siehe .wz unten), nicht die Musterkarte selbst - so auf Hendriks Wunsch. */
.muster-rahmen:hover{transform:rotate(0) translateY(-10px);box-shadow:0 2px 0 var(--linie-fein),0 40px 70px -34px rgba(15,66,114,.6)}
.muster-rahmen .leiste{display:flex;gap:6px;padding:0 4px 10px}
.muster-rahmen .leiste i{width:9px;height:9px;border-radius:50%;background:var(--linie)}
.muster-rahmen img{display:block;width:100%;height:auto;border:1px solid var(--linie-fein)}
.muster-bildunterschrift{margin:12px 4px 0;font-size:12px;color:var(--leise);font-family:var(--mono)}

/* ---------- Laufband ----------
   Erster Anlauf (bewegter Verlauf + laufende Diagonalstreifen + laufender
   Text, alle drei unterschiedlich schnell): "sieht schlimm aus" - zu viel
   gleichzeitige Bewegung auf engem Raum wirkt unruhig statt lebendig. Jetzt
   nur noch EINE Bewegung (der Text), auf ruhigem, feststehendem dunklen
   Grund - klarer Kontrast, ohne Flackern. */
.laufband{
  position:relative;overflow:hidden;padding:20px 0;color:#fff;
  background:var(--tinte-tief);
}
.band-inhalt{display:flex;width:max-content}
.band-gruppe{display:flex;flex-shrink:0}
.band-inhalt{animation:laufen 30s linear infinite}
.laufband:hover .band-inhalt{animation-play-state:paused}
@keyframes laufen{to{transform:translateX(-50%)}}
.band-inhalt span{display:flex;align-items:center;gap:26px;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:0 26px 0 0;white-space:nowrap;opacity:.9}
.band-inhalt span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--tinte-hell)}

/* ---------- Kennzahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;border-top:1px solid var(--stahl-linie);border-bottom:1px solid var(--stahl-linie)}
.zahl-feld{padding:40px 24px;border-right:1px solid var(--stahl-linie);text-align:center}
.zahl-feld:last-child{border-right:none}
.zahl-feld b{display:block;font-family:var(--serif);font-size:clamp(46px,5.6vw,68px);line-height:1;color:var(--tinte);letter-spacing:-.02em}
.zahl-feld b i{font-style:normal;color:var(--akzent)}
.zahl-feld span{display:block;margin-top:10px;font-size:14.5px;color:var(--leise)}
.zahl-feld b .einheit{display:inline;margin:0;font-size:clamp(20px,2.2vw,26px);color:var(--tinte);letter-spacing:-.01em}
.zahl-feld b .einheit.gross{font-size:clamp(26px,3vw,34px)}

/* ---------- Abschnitte ---------- */
section{padding:100px 0;position:relative}
.kapitel{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.kapitel .nr{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--akzent);border:1px solid var(--akzent);padding:3px 9px}
.kapitel .strich{height:1px;flex:1;background:var(--graublau);max-width:130px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.2vw,50px);line-height:1.1;letter-spacing:-.018em;color:var(--tinte);margin:0;max-width:20ch}
.einleitung{font-size:18px;color:var(--leise);max-width:52ch;margin:22px 0 0}

/* ---------- Warenprozess, mitlaufend ---------- */
.prozess{background:var(--papier-tief)}
.prozess-gitter{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start;margin-top:56px}
.kleber{position:sticky;top:130px}
.grossbuchstabe{
  font-family:var(--serif);font-size:clamp(140px,18vw,230px);line-height:.85;color:var(--tinte);
  letter-spacing:-.05em;display:block;transition:color .4s;
}
.grossbuchstabe i{font-style:italic;color:var(--akzent)}
.schritt-anzeige{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--graublau);margin-top:14px}
.schritte{display:flex;flex-direction:column;gap:0}
.schritt{
  padding:34px 0 34px 34px;border-left:2px solid var(--stahl-linie);position:relative;
  opacity:.42;transition:opacity .45s,border-color .45s,transform .45s;
}
.schritt.aktiv{opacity:1;border-left-color:var(--akzent)}
.schritt::before{
  content:"";position:absolute;left:-7px;top:44px;width:12px;height:12px;border-radius:50%;
  background:var(--papier-tief);border:2px solid var(--graublau);transition:background .45s,border-color .45s,transform .45s;
}
.schritt.aktiv::before{background:var(--akzent);border-color:var(--akzent);transform:scale(1.25)}
.schritt h3{font-family:var(--serif);font-weight:400;font-size:27px;color:var(--tinte);margin:0 0 8px}
.schritt p{margin:0;font-size:16px;color:var(--leise);max-width:44ch}

/* ---------- Bildplätze ---------- */
.bildplatz{margin:0;position:relative;overflow:hidden;background:var(--tinte);isolation:isolate}
.bildplatz .muster{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    radial-gradient(circle at 72% 24%,rgba(232,133,63,.5),transparent 58%);
  background-size:100% 26px,44px 100%,100% 100%;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.bildplatz:hover .muster{transform:scale(1.06)}
.bildplatz .schild{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(transparent,rgba(8,36,63,.9));
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#D8E4EF;
}
.bildplatz .kamera{position:absolute;top:16px;left:18px;color:rgba(255,255,255,.5)}
.bild-4-3{aspect-ratio:4/3}
.bild-3-2{aspect-ratio:3/2}
.bild-1-1{aspect-ratio:1/1}

.strecke{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px;margin-top:56px}

/* ---------- Leistungen ---------- */
.dunkel{background:var(--tinte);color:var(--papier)}
.dunkel h2{color:var(--papier)}
.dunkel .einleitung{color:#B9CBDD}
.dunkel .kapitel .nr{color:var(--akzent-hell);border-color:var(--akzent-hell)}
.dunkel .kapitel .strich{background:rgba(255,255,255,.22)}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;margin-top:56px}
.karte{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.16);
  padding:0 0 30px;position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s;
}
.karte:hover{transform:translateY(-10px) scale(1.015);border-color:var(--akzent-hell);background:rgba(255,255,255,.08)}
.karte .bildplatz{background:var(--tinte-tief)}
.karte .karte-bild{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:var(--tinte-tief);border-bottom:1px solid rgba(255,255,255,.16);
}
.karte .inhalt{padding:32px 28px 0}
.karte .nr{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--akzent-hell)}
.karte h3{font-family:var(--serif);font-weight:400;font-size:25px;color:var(--papier);margin:10px 0 12px}
.karte p{margin:0;font-size:15.5px;color:#B9CBDD}

/* ---------- Nachweis ---------- */
.punkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:54px;border-top:2px solid var(--tinte)}
.punkt{padding:30px 24px;border-right:1px solid var(--stahl-linie);position:relative;text-align:center}
.punkt::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--akzent);transition:width .55s cubic-bezier(.2,.7,.2,1)}
.punkt:hover::before{width:100%}
.punkt:last-child{border-right:none}
.punkt b{display:block;font-family:var(--serif);font-size:19px;font-weight:400;color:var(--tinte);margin:12px 0 8px}
.punkt p{margin:0;font-size:15px;color:var(--leise)}
.produktname{display:inline-block;margin:0 0 18px;padding:7px 11px;border:1px solid var(--stahl-linie);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte)}
#nachweis .aktionen{margin-top:34px}
.demo-block{
  margin-top:54px;padding:34px 36px;background:#fff;border:1px solid var(--linie);
  display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center;
  box-shadow:0 24px 50px -40px rgba(15,66,114,.5);
}
.demo-block h3{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--tinte);margin:0 0 10px}
.demo-block p{margin:0;font-size:15.5px;color:var(--leise);max-width:56ch}
.demo-block .aktionen{margin-top:0}
@media (max-width:860px){ .demo-block{grid-template-columns:1fr;padding:28px 24px;gap:24px} }

/* ---------- Fakten für den Einkauf ---------- */
.grund{background:var(--papier-tief)}
.fallbeispiel{
  margin-top:44px;padding:28px 30px;background:#fff;border-left:3px solid var(--akzent);
  box-shadow:0 20px 40px -34px rgba(15,66,114,.5);
}
.fallbeispiel p{margin:0;font-size:15.5px;color:var(--text);max-width:70ch}
.fallbeispiel .marke{display:block;margin-bottom:10px}

/* ---------- Gründer ---------- */
.gruender{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start;margin-top:20px}
.gruender > div:last-child{padding-top:14px}
blockquote{margin:0;font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.34;color:var(--tinte);letter-spacing:-.014em;position:relative;padding-left:28px}
blockquote::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:linear-gradient(var(--akzent),var(--akzent-hell))}
.signatur{margin-top:30px;padding-top:20px;border-top:1px solid var(--linie);font-size:15px;color:var(--leise)}
.signatur b{display:block;color:var(--text);font-size:16px}
.stationen{margin-top:34px}
.station{padding:0 0 22px 30px;position:relative}
.station::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;background:var(--akzent);border-radius:50%}
.station::after{content:"";position:absolute;left:4px;top:22px;bottom:0;width:1px;background:var(--stahl-linie)}
.station:last-child::after{display:none}
.station b{display:block;color:var(--tinte);font-family:var(--serif);font-weight:400;font-size:19px}
.station span{font-size:15px;color:var(--leise)}

/* ---------- Gebiet ---------- */
.warm{background:var(--akzent-blass)}
.laender{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:44px;border-top:1px solid rgba(43,47,54,.25)}
.land{padding:20px 0;border-bottom:1px solid rgba(43,47,54,.16);font-family:var(--serif);font-size:22px;color:var(--tinte);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.land:hover{transform:translateX(8px)}
.land small{display:block;font-family:var(--mono);font-size:11px;color:var(--akzent);letter-spacing:.14em;margin-top:2px}

/* ---------- Kontakt ---------- */
.kontakt{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:start}
.karte-daten{background:#fff;border:1px solid var(--linie);padding:30px;box-shadow:0 24px 50px -36px rgba(15,66,114,.5)}
.karte-daten .zeile:last-child{border-bottom:none}
.luecke{background:#FEF3C7;border-bottom:1px dashed #B45309;color:#92400E;padding:0 5px}
.zeile{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dotted var(--linie)}
.zeile dt{font-size:13.5px;color:var(--leise);margin:0}
.zeile dd{font-family:var(--mono);font-size:13.5px;color:var(--text);margin:0;text-align:right}

/* ---------- Zwei Anfragewege (Markt-Schnellanfrage / Zentraleinkauf) ---------- */
.wege{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:34px;border:1px solid var(--linie);background:#fff}
.weg-knopf{
  font:inherit;font-size:15px;font-weight:600;color:var(--leise);background:transparent;
  border:none;padding:18px 16px;cursor:pointer;border-bottom:3px solid transparent;transition:color .2s,border-color .2s,background .2s;
}
.weg-knopf:first-child{border-right:1px solid var(--linie)}
.weg-knopf[aria-selected="true"]{color:var(--tinte);border-bottom-color:var(--akzent);background:var(--papier-tief)}
.weg-knopf:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px}
.weg-erklaerung{margin:0 0 26px;font-size:15px;color:var(--leise)}
.formular[hidden]{display:none}

footer{background:var(--tinte-tief);color:#9FB3C8;padding:38px 0;font-size:13.5px}
.fuss{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.fuss a{text-decoration:none;color:#C6D4E2;border-bottom:1px solid transparent;transition:border-color .25s}
.fuss a:hover{border-bottom-color:var(--akzent-hell)}

/* ---------- Portal-Login und Mobilmenü ---------- */
.portal-link{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:13.5px;color:var(--leise);border:1px solid var(--linie);
  padding:8px 13px;background:#fff;
  transition:color .25s,border-color .25s,background .25s;
}
.portal-link:hover{color:var(--tinte);border-color:var(--stahl-linie);background:var(--papier-tief)}
.portal-link svg{flex:none}
.kopf nav a.portal-link::after{display:none}
/* Der Portal-Knopf ist eine blickdichte weisse Pille, keine transparente
   Glas-Flaeche wie der Rest der Kopfleiste - braucht deshalb weiterhin
   dunklen statt den neuen weissen Navigationstext. ".kopf nav a" ist
   spezifischer als ".portal-link" allein, ohne diese Regel waere der
   Knopftext auf seinem eigenen weissen Grund unsichtbar. */
.kopf nav a.portal-link{color:var(--leise)}
.kopf nav a.portal-link:hover{color:var(--tinte)}

.menue-knopf{
  display:none;margin-left:auto;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--linie);color:var(--text);
  font:inherit;font-size:14px;padding:9px 14px;cursor:pointer;
}
.menue-knopf .balken{display:block;width:18px;height:11px;position:relative}
.menue-knopf .balken::before,.menue-knopf .balken::after,.menue-knopf .balken i{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s;
}
.menue-knopf .balken::before{top:0}
.menue-knopf .balken i{top:5px}
.menue-knopf .balken::after{bottom:0}
.menue-knopf[aria-expanded="true"] .balken::before{transform:translateY(5px) rotate(45deg)}
.menue-knopf[aria-expanded="true"] .balken i{opacity:0}
.menue-knopf[aria-expanded="true"] .balken::after{transform:translateY(-5px) rotate(-45deg)}

/* ---------- Bildhinweis: KI-Motive kennzeichnen ---------- */
.karte figure{margin:0;position:relative}
.bild-hinweis{
  position:absolute;right:10px;bottom:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#EAF1F8;background:rgba(0,43,102,.78);border:1px solid rgba(255,255,255,.28);
  padding:4px 8px;backdrop-filter:blur(3px);
}

/* ---------- Stichpunkte in den Leistungskarten ---------- */
.karte ul{margin:14px 0 0;padding:0;list-style:none}
.karte ul li{position:relative;padding-left:18px;font-size:14.5px;color:#B9CBDD;margin-top:7px}
.karte ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1.5px;background:var(--akzent-hell)}
.karte .zusatz{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;color:#9FB6CC}

/* ---------- Zwei Zielgruppen ---------- */
.paare{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:52px}
.paar{background:#fff;border:1px solid var(--linie);padding:34px 32px;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.paar:hover{transform:translateY(-8px);box-shadow:0 26px 46px -30px rgba(15,66,114,.4)}
.paar h3{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--tinte);margin:12px 0 10px}
.paar > p{margin:0;font-size:16px;color:var(--leise)}
.paar ul{margin:18px 0 26px;padding:0;list-style:none}
.paar ul li{position:relative;padding-left:20px;font-size:15px;color:var(--text);margin-top:9px}
.paar ul li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:1.5px;background:var(--akzent)}
.paar .knopf{margin-top:auto;align-self:flex-start}

/* ---------- Aufklappbereiche (Einkauf, FAQ) ---------- */
.klapper{margin-top:44px;border-top:1px solid var(--stahl-linie)}
.klapp{border-bottom:1px solid var(--stahl-linie)}
.klapp summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--serif);font-size:19px;color:var(--tinte);
}
.klapp summary::-webkit-details-marker{display:none}
.klapp summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--akzent);border-bottom:1.5px solid var(--akzent);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.klapp[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.klapp summary:hover{color:var(--akzent)}
.klapp summary:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.klapp .antwort{padding:0 0 22px;margin:0;font-size:15.5px;color:var(--leise);max-width:78ch}
.klapper.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}

/* ---------- Fakten für den Einkauf, immer sichtbar (kein Akkordeon) ----------
   Fuer Beschaffungs-Entscheider sind das die Belege, nicht Nebensaetze -
   deshalb offen statt eingeklappt, anders als die FAQ weiter unten. */
.fakten{margin-top:44px;border-top:1px solid var(--stahl-linie)}
.fakt{border-bottom:1px solid var(--stahl-linie);padding:22px 0}
.fakt h3{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--tinte);margin:0 0 8px}
.fakt p{margin:0;font-size:15.5px;color:var(--leise);max-width:78ch}
.fakten.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}

/* ---------- Einstieg in die Zusammenarbeit ---------- */
.einstieg{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0 0 56px}
.einstieg div{padding-top:18px;border-top:2px solid var(--tinte)}
.einstieg b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--tinte);margin:8px 0 6px}
.einstieg p{margin:0;font-size:15px;color:var(--leise)}

/* ---------- Formular ---------- */
.formular{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:34px}
.feld{display:flex;flex-direction:column;gap:6px}
.feld.weit{grid-column:1/-1}
.feld label{font-size:13.5px;color:var(--text);font-weight:600}
.feld label .opt{font-weight:400;color:var(--leise)}
.feld input,.feld select,.feld textarea{
  font:inherit;font-size:15px;color:var(--text);background:#fff;
  border:1px solid var(--linie);padding:12px 13px;width:100%;border-radius:0;
  transition:border-color .25s,box-shadow .25s;
}
.feld textarea{min-height:120px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px rgba(43,47,54,.14);
}
.feld input[aria-invalid="true"],.feld select[aria-invalid="true"],.feld textarea[aria-invalid="true"]{
  border-color:#B91C1C;box-shadow:0 0 0 3px rgba(185,28,28,.12);
}
.feld .fehler{font-size:13px;color:#B91C1C;min-height:0}
.zustimmung{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--leise)}
.zustimmung input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--akzent)}
.zustimmung a{color:var(--tinte)}
.formular-fuss{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:6px}
.formular button.knopf{font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.hinweis-versand{
  grid-column:1/-1;margin:0;padding:14px 16px;border-left:3px solid var(--akzent);
  background:var(--akzent-blass);font-size:14.5px;color:var(--text);
}
.hinweis-versand[hidden]{display:none}

/* ---------- Vertrauenszeile im Aufmacher ---------- */
.vertrauen{
  margin:26px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;
  color:var(--leise);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
}
.vertrauen span::after{content:" ·";color:var(--akzent)}
.vertrauen span:last-child::after{content:""}

/* ---------- Kleiner Unterseiten-Aufmacher ----------
   Fuer ablauf/leistungen/ueber-uns/einkauf/kontakt: kuerzer als der
   Home-Hero. Das "A" braucht hier keine eigene Position mehr - es wandert
   jetzt fest (position:fixed) unabhaengig von der Sektion ueber die ganze
   Seite, siehe .wz weiter oben. */
.auf.klein{padding:64px 0 56px}
.auf.klein .auf-gitter{grid-template-columns:1fr;gap:0;max-width:74ch}
.auf.klein h1{font-size:clamp(30px,4vw,46px)}

/* ---------- Tastaturfokus, durchgehend sichtbar ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--akzent);outline-offset:2px;
}
.sprungmarke{
  position:absolute;left:-9999px;top:0;z-index:60;background:var(--tinte);color:#fff;
  padding:12px 18px;text-decoration:none;font-size:14px;
}
.sprungmarke:focus{left:12px;top:12px}

@media (max-width:960px){
  .paare,.klapper.zwei,.fakten.zwei,.einstieg,.formular,.wege{grid-template-columns:1fr}
  .einstieg{gap:20px}
  .weg-knopf:first-child{border-right:none;border-bottom:1px solid var(--linie)}
}

@media (prefers-reduced-motion:reduce){
  .js .zeig{opacity:1;transform:none;filter:none;transition:none}
  .band-inhalt,.js h1 .wisch > span{animation:none!important}
  .js h1 .wisch > span{transform:none}
  html{scroll-behavior:auto}
}
@media (max-width:960px){
  .auf-gitter,.gruender,.kontakt,.prozess-gitter{grid-template-columns:1fr;gap:44px}
  .kleber{position:static}
  .grossbuchstabe{font-size:110px}
  .strecke{grid-template-columns:1fr 1fr}
    .punkt{border-right:none;border-bottom:1px solid var(--linie);padding:28px 0}
  .punkt:last-child{border-bottom:none}
  .zahl-feld{border-right:none;border-bottom:1px solid var(--linie);padding:28px 0}
  .zahl-feld:last-child{border-bottom:none}
}
@media (max-width:860px){
  .menue-knopf{display:inline-flex}
  .kopf nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;margin-left:0;
    background:var(--papier);border-bottom:1px solid var(--linie);
    padding:6px 22px 22px;box-shadow:0 20px 34px -26px rgba(15,66,114,.75);
  }
  /* Das aufklappende Mobilmenue ist ein helles, blickdichtes Feld (siehe
     background oben) - anders als die dunkle Glas-Kopfleiste braucht es
     deshalb wieder dunklen statt weissen Navigationstext. */
  .kopf nav a{padding:15px 2px;border-bottom:1px solid var(--linie-fein);font-size:16px;color:var(--text)}
  .kopf nav a::after{display:none}
  .kopf nav a.knopf{margin-top:18px;text-align:center;border-bottom:1px solid var(--tinte);padding:14px 20px!important}
  .kopf nav a.portal-link{margin-top:14px;justify-content:center;border-bottom:1px solid var(--linie)}
  /* Ueberschreibt die helle Aktiv-Farbe aus der Desktop-Kopfleiste (dort auf
     dunklem Glas gedacht) - im hellen Mobilmenue sonst kaum lesbar. */
  body#pg-ablauf .kopf nav a[href="ablauf.html"],
  body#pg-leistungen .kopf nav a[href="leistungen.html"],
  body#pg-ueber-uns .kopf nav a[href="ueber-uns.html"],
  body#pg-einkauf .kopf nav a[href="einkauf.html"],
  body#pg-kontakt .kopf nav a[href="kontakt.html"]{
    color:var(--akzent);
  }
}
@media (max-width:720px){
  .huelle{padding:0 22px}
  .auf{padding:56px 0 48px}
  section{padding:62px 0}
  .muster-rahmen{transform:none}
  .strecke{grid-template-columns:1fr}
  .laufband{display:none}
}
@media (max-width:380px){
  .huelle{padding:0 16px}
  .zahl-feld{padding:24px 0}
  .karte .inhalt{padding:26px 20px 0}
  .paar{padding:26px 20px}
}

/* ---------- Rechtstexte (impressum.html, datenschutz.html) ----------
   Vorher eigenes, verkuerztes Stylesheet mit fast denselben Werten - jetzt an
   dieselben Tokens angeschlossen statt einer zweiten, abweichenden Kopie. */
.recht-huelle{max-width:760px;margin:0 auto;padding:0 24px}
main.recht{padding:64px 0 20px}
main.recht h1{margin:14px 0 0}
main.recht .stand{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--linie-fein);font-size:15px;color:var(--leise)}
main.recht h2{font-size:25px;margin:52px 0 14px;letter-spacing:-.01em;max-width:none}
main.recht p{margin:0 0 14px;line-height:1.7}
main.recht .anschrift{font-style:normal;margin:0 0 14px}
main.recht dl{margin:0;border-top:1px solid var(--linie)}
main.recht .hinweis{font-size:15px;color:var(--leise)}
main.recht h3{font-family:var(--sans);font-size:16px;color:var(--text);margin:26px 0 8px}
main.recht ul{margin:0 0 14px;padding-left:20px}
main.recht li{margin:0 0 6px}
main.recht .kasten{background:#fff;border:1px solid var(--linie);padding:22px 24px;margin:0 0 14px}
main.recht .kasten p:last-child{margin-bottom:0}
main.recht .rechtsgrundlage{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--graublau);display:block;margin-top:-6px;margin-bottom:14px}