/* ═══════════════════════════════════════════════════════════════
   DK Recruiting Partners
   Dunkles Designsystem nach Apple-Vorbild.
   Kein Build-Step, kein Framework, keine Webfonts.

   Drei Entscheidungen tragen die ganze Datei:

   1  Systemschrift. Apple setzt SF Pro. Über die Systemschrift
      bekommen Apple-Geräte genau diese Schrift, ohne dass ein Byte
      geladen wird. Windows fällt auf Segoe UI Variable, Android auf
      Roboto — beide neutrale Grotesken mit derselben Anmutung.

   2  Drei Bausteine, nicht neun. Felder, Reihen, Schritte. Eine
      Seite, die für jeden Abschnitt ein neues Muster erfindet, sieht
      nach Baukasten aus. Wiederholung ist hier keine Faulheit,
      sondern das Gestaltungsprinzip.

   3  Eine Ausrichtungsregel. Sektionsköpfe stehen zentriert,
      Fließtext innerhalb eines Bausteins linksbündig. Zentrierter
      Mehrzeilentext liest sich schlecht — deshalb die Trennung.

   Zwei Kontrastfarben auf tiefem Blau: Weiß trägt die Handlung
   (Knopf, aktiver Schritt), ein helles Himmelblau die Verweise.
   Mehr Farben gibt es nicht.

   Aufbau:
     1  Tokens          7  Zahlen und Scrub-Satz
     2  Basis           8  Formular, Prosa, Notiz
     3  Kopfzeile       9  Footer
     4  Hero           10  Animationen
     5  Sektionen      11  Hover
     6  Bausteine      12  Reduzierte Bewegung
   ═══════════════════════════════════════════════════════════════ */

/* ── 1  Tokens ───────────────────────────────────────────────── */
:root{
  /* ── Farbwelt ──────────────────────────────────────────────
     Tiefes Marineblau statt Schwarz. Schwarz liest sich für eine
     Personalberatung nach Nachtclub; Blau steht für Verlässlichkeit,
     ohne kalt zu wirken. Die Stufen liegen sehr nah beieinander —
     wie bei Schwarz gilt: wenige Stufen, sonst wirkt es schmutzig.

     Ein Palettenwechsel passiert ausschließlich hier. Alle Flächen,
     Linien und Überlagerungen leiten sich aus diesen Werten ab. */
  --bg:#0a1526;
  --bg-2:#0d1b2f;
  --flaeche:#132038;
  --bg-rgb:10,21,38;          /* für halbtransparente Leisten */
  --linie:rgba(255,255,255,.10);

  --text:#f4f7fb;
  --text-2:#a3b1c6;
  --text-3:#6d7f99;

  /* Zwei Kontrastfarben: Weiß trägt die Handlung, ein helles
     Himmelblau die Verweise. */
  --akzent:#ffffff;
  --akzent-hell:#dfe9f7;
  --akzent-tief:#0a1526;      /* Schrift auf gefüllter Fläche */
  --link:#7cb8ff;
  --link-hell:#a9d1ff;
  --fehler:#ff8f8f;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
         "Helvetica Neue","Segoe UI Variable","Segoe UI",Roboto,system-ui,sans-serif;

  /* Typoskala. Die Sprünge sind groß — zwischen Schlagzeile und
     Fließtext steht bewusst nichts Mittleres. */
  --fs-display:clamp(38px,7vw,88px);
  --fs-h1:clamp(32px,4.8vw,64px);
  --fs-h2:clamp(28px,3.8vw,50px);
  --fs-h3:19px;
  --fs-lead:clamp(17px,1.8vw,21px);
  --fs-body:17px;
  --fs-small:14px;
  --fs-tiny:12px;

  --track:-.022em;

  --wrap:980px;
  --wrap-weit:1120px;
  --pad-x:clamp(20px,5vw,60px);
  --sek:clamp(100px,16vh,190px);

  --r-xl:22px; --r-md:12px; --r-pill:999px;

  --ease:cubic-bezier(.28,.11,.32,1);   /* Apples Standardkurve */
  --dur-s:180ms; --dur:320ms; --dur-l:700ms;

  --nav-h:48px;
}

/* ── 2  Basis ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text-2);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.47;
  letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--link);color:var(--akzent-tief)}

.skip{position:absolute;left:-9999px;top:0;padding:12px 18px;background:#fff;color:#000;z-index:210}
.skip:focus{left:0;top:0}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:6px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;color:var(--text)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad-x)}
.wrap--weit{max-width:var(--wrap-weit)}

.h1{font-size:var(--fs-h1);font-weight:600;line-height:1.07;letter-spacing:var(--track);color:var(--text);margin:0}
.h2{font-size:var(--fs-h2);font-weight:600;line-height:1.1;letter-spacing:var(--track);color:var(--text);margin:0}

/* Textlink mit Chevron — Apples Standardlink */
.alink{
  display:inline-flex;align-items:center;gap:5px;
  font-size:clamp(16px,1.3vw,19px);color:var(--link);
  transition:color var(--dur) var(--ease);
}
.alink::after{
  content:"›";font-size:1.3em;line-height:1;transform:translateY(-.06em);
  transition:transform var(--dur) var(--ease);
}

/* Genau zwei Knöpfe, beide Pille. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 24px;border-radius:var(--r-pill);
  font-size:var(--fs-body);font-weight:500;letter-spacing:-.01em;
  border:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             transform var(--dur-s) var(--ease);
}
.btn--voll{background:var(--akzent);color:var(--akzent-tief)}
.btn--umriss{border-color:rgba(255,255,255,.26);color:var(--text)}
.btn:active{transform:scale(.97)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── 3  Kopfzeile ────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;height:var(--nav-h);
  background:rgba(var(--bg-rgb),.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
          backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:transform var(--dur-l) var(--ease);
}
.nav.is-weg{transform:translateY(-100%)}
.nav__inner{
  max-width:var(--wrap-weit);height:100%;margin:0 auto;
  padding-inline:var(--pad-x);
  display:flex;align-items:center;gap:clamp(16px,2.6vw,32px);
}
.wortmarke{display:flex;align-items:center;flex:0 0 auto}
.wortmarke img{height:22px;width:auto}
.nav__links{
  display:flex;gap:clamp(16px,2.4vw,30px);margin-inline:auto;
  font-size:var(--fs-tiny);color:var(--text-2);
}
.nav__links a{transition:color var(--dur) var(--ease)}
.nav__links a.is-current{color:var(--text)}
.nav__cta{
  flex:0 0 auto;font-size:var(--fs-tiny);color:var(--link);
  transition:color var(--dur) var(--ease);
}
.burger{display:none;flex:0 0 auto;width:34px;height:34px;margin-right:-6px;position:relative}
.burger span{
  position:absolute;left:8px;width:18px;height:1px;background:var(--text);
  transition:transform var(--dur) var(--ease);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .burger{display:block;margin-left:auto}
}

.menu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:89;
  background:rgba(var(--bg-rgb),.96);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  padding:clamp(20px,4vh,40px) var(--pad-x);
  opacity:0;transition:opacity var(--dur) var(--ease);
  overflow-y:auto;
}
.menu.is-offen{opacity:1}
.menu__liste{display:flex;flex-direction:column}
.menu__liste a{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 0;border-bottom:1px solid rgba(255,255,255,.05);
  font-size:clamp(22px,4.6vw,28px);font-weight:600;
  letter-spacing:var(--track);color:var(--text);
  opacity:0;transform:translateY(12px);
  transition:color var(--dur) var(--ease);
}
.menu.is-offen .menu__liste a{
  animation:menuIn .45s var(--ease) forwards;
  animation-delay:calc(var(--i) * 40ms);
}
.menu__liste a::after{content:"›";color:var(--text-3);font-weight:400}
@keyframes menuIn{to{opacity:1;transform:none}}

/* ── 4  Hero ─────────────────────────────────────────────────── */
/* Eine Bildschirmhöhe, ein Textblock, sonst nichts. Kein Signet:
   die Marke steht in der Kopfzeile und im Footer — im Inhalt hätte
   sie nur den Platz der Aussage belegt. */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + clamp(52px,10vh,104px)) var(--pad-x) clamp(76px,15vh,150px);
  text-align:center;
}
/* Im Hero steht die Bildmarke statt des Firmennamens als Text.
   Die Höhe wächst mit dem Fenster, die Breite ergibt sich — so passt
   jedes Seitenverhältnis, auch wenn das endgültige Logo quadratischer
   ausfällt als der Platzhalter. */
.hero__logo{
  height:clamp(32px,3.4vw,50px);width:auto;
  margin:0 auto clamp(20px,2.6vh,30px);
}
.hero__h1{
  margin:0;font-size:var(--fs-display);font-weight:600;
  line-height:1.04;letter-spacing:var(--track);color:var(--text);
  text-wrap:balance;
}

.hero__sub{
  margin:clamp(20px,3vh,32px) 0 0;max-width:36ch;
  font-size:var(--fs-lead);line-height:1.42;color:var(--text-2);
}
.hero__links{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(20px,3vw,38px);margin-top:clamp(24px,3.4vh,38px);
}


/* ── 5  Sektionen ────────────────────────────────────────────── */
.sek{padding:var(--sek) 0}
.sek--band{background:var(--bg-2)}
.sek--eng{padding-block:calc(var(--sek) * .58)}

/* Der Sektionskopf. Zentriert, kurz, immer gleich gebaut.
   Die Breite steht in Pixeln, nicht in ch: ch rechnet mit der
   Schriftgröße des Elements, auf dem es steht. Auf dem Container mit
   17 px wären 26ch rund 220 px — die 50-px-Überschrift bräche dann in
   drei Zeilen. */
.kopf{max-width:min(100%,720px);margin:0 auto clamp(44px,6vh,80px);text-align:center}
.kopf .h2{margin-inline:auto;text-wrap:balance}
.kopf p{margin:18px auto 0;max-width:42ch;font-size:var(--fs-lead);color:var(--text-2)}
.kopf--breit{max-width:min(100%,860px)}

/* Seitenkopf der Unterseiten — dieselbe Anmutung wie der Hero,
   nur kleiner. */
.seitenkopf{
  text-align:center;
  padding:calc(var(--nav-h) + clamp(88px,16vh,180px)) var(--pad-x) clamp(20px,4vh,44px);
}
.seitenkopf h1{
  margin:0 auto;max-width:min(100%,780px);font-size:var(--fs-h1);font-weight:600;
  text-wrap:balance;
  line-height:1.07;letter-spacing:var(--track);color:var(--text);
}
.seitenkopf p{margin:20px auto 0;max-width:44ch;font-size:var(--fs-lead);color:var(--text-2)}
.seitenkopf p a,.notiz a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* ── 6  Bausteine ────────────────────────────────────────────── */
/* Baustein A — Fachbereiche als typografischer Index.

   Vorher standen hier drei gleich große Karten mit Titel, zwei Zeilen
   Text und einem Link. Das ist die generischste Anordnung im Web, und
   ohne Bild darin bleibt eine Karte ein leerer Kasten mit runden
   Ecken. Apple setzt Kacheln nur, wenn ein Produkt darin liegt.

   Ohne Bildmaterial trägt die Schrift: der Name wird so groß, dass er
   selbst die Überschrift ist. Die ganze Zeile ist anklickbar, nicht
   nur ein kleiner Link am Fuß. */
.felder{border-top:1px solid var(--linie)}
.feldzeile{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 24px;
  align-items:baseline;gap:clamp(10px,4vw,56px);
  padding:clamp(26px,4vw,54px) 0;
  border-bottom:1px solid var(--linie);
}
.feldzeile__name{
  font-size:clamp(36px,5.8vw,74px);font-weight:600;line-height:1;
  letter-spacing:var(--track);color:var(--text);
  transition:color var(--dur) var(--ease);
}
.feldzeile__text{font-size:var(--fs-small);color:var(--text-2);max-width:34ch}
.feldzeile__pfeil{
  justify-self:end;align-self:center;
  font-size:26px;line-height:1;color:var(--text-3);
  transition:transform var(--dur) var(--ease),color var(--dur) var(--ease);
}
@media (max-width:760px){
  .feldzeile{grid-template-columns:minmax(0,1fr) 24px;gap:12px 16px}
  .feldzeile__text{grid-column:1;max-width:none}
  .feldzeile__pfeil{grid-row:1;grid-column:2}
}

/* Baustein B — Reihen. Begriff und Erklärung, durch Haarlinien
   getrennt. Ersetzt vier frühere Muster. */
.reihen{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.reihen li{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(10px,2.4vw,40px);
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--linie);
}
.reihen b{font-weight:600;font-size:var(--fs-h3);letter-spacing:-.015em;color:var(--text)}
.reihen span{font-size:var(--fs-small);color:var(--text-2)}
@media (max-width:700px){ .reihen li{grid-template-columns:1fr;gap:6px} }

/* Baustein C — Schritte. Nur hier gibt es Nummern, weil hier die
   Reihenfolge etwas bedeutet. Die Linie füllt sich mit dem
   Scrollstand, der erreichte Schritt bekommt einen grünen Punkt. */
.schritte{position:relative;list-style:none;margin:0;padding:0 0 0 clamp(28px,4vw,52px)}
.schritte::before{content:"";position:absolute;left:5px;top:9px;bottom:9px;width:1px;background:var(--linie)}
.schritte__fuellung{
  position:absolute;left:5px;top:9px;width:1px;height:0;background:var(--akzent);
  will-change:height;
}
.schritt{position:relative;padding-bottom:clamp(28px,3.6vw,46px)}
.schritt:last-child{padding-bottom:0}
.schritt::before{
  content:"";position:absolute;left:calc(-1 * clamp(28px,4vw,52px));top:8px;
  width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1px solid var(--linie);
  transition:background var(--dur-l) var(--ease),border-color var(--dur-l) var(--ease);
}
.schritt.is-aktiv::before{background:var(--akzent);border-color:var(--akzent)}
.schritt__no{
  display:block;margin:0 0 7px;font-size:var(--fs-tiny);font-weight:600;
  color:var(--text-3);font-variant-numeric:tabular-nums;
}
.schritt h3{margin:0 0 8px;font-size:var(--fs-h3);font-weight:600;letter-spacing:-.015em;color:var(--text)}
.schritt p{margin:0;font-size:var(--fs-small);color:var(--text-2);max-width:54ch}

/* ── 7  Zahlen und Scrub-Satz ────────────────────────────────── */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px);text-align:center}
.zahl__wert{
  display:block;font-size:clamp(44px,6.4vw,80px);font-weight:600;line-height:1;
  letter-spacing:var(--track);color:var(--text);font-variant-numeric:tabular-nums;
}
.zahl__label{display:block;margin-top:14px;font-size:var(--fs-small);color:var(--text-3)}
@media (max-width:640px){ .zahlen{grid-template-columns:1fr;gap:36px} }

/* Ein Satz, der sich beim Scrollen Wort für Wort aufhellt. Genau
   einer auf der ganzen Website — der Effekt trägt sich nicht zweimal. */
.scrub{position:relative;height:160vh}
.scrub__klebt{
  position:sticky;top:0;height:100svh;
  display:grid;place-items:center;padding:var(--nav-h) var(--pad-x) 0;
}
.scrub__satz{
  /* Breit genug, dass der erste Satz auf dem Desktop in eine Zeile
     passt. Der Umbruch dazwischen kommt aus dem senkrechten Strich
     im Quelltext, nicht aus dem Zufall des Zeilenfalls. */
  margin:0;max-width:min(100%,1180px);text-align:center;
  font-size:clamp(30px,4.8vw,64px);font-weight:600;line-height:1.12;
  letter-spacing:var(--track);text-wrap:pretty;
}
.scrub__satz .w{color:rgba(245,245,247,.14);transition:color 140ms linear}
.scrub__satz .w.is-hell{color:var(--text)}

/* ── 8  Formular, Prosa, Notiz ───────────────────────────────── */
.kontaktgitter{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(24px,4vw,56px);align-items:start;text-align:left;
}
@media (max-width:860px){ .kontaktgitter{grid-template-columns:1fr} }

.formular{position:relative;padding:clamp(26px,3vw,40px);border-radius:var(--r-xl);background:var(--flaeche)}
.feldgitter{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feld{display:flex;flex-direction:column;gap:7px}
.feld--voll{grid-column:1 / -1}
.feld label{font-size:var(--fs-tiny);color:var(--text-2)}
.feld input,.feld select,.feld textarea{
  width:100%;padding:13px 15px;border-radius:var(--r-md);
  background:var(--bg);border:1px solid var(--linie);
  color:var(--text);font:inherit;font-size:var(--fs-body);
  transition:border-color var(--dur) var(--ease);
}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--akzent)}
.feld.is-falsch input,.feld.is-falsch select,.feld.is-falsch textarea{border-color:var(--fehler)}
.pruef{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-small);color:var(--text-2)}
.pruef input{flex:0 0 auto;width:19px;height:19px;margin-top:2px;accent-color:var(--akzent)}
.pruef a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.fehler{display:none;margin:0;font-size:var(--fs-tiny);color:var(--fehler)}
.feld.is-falsch .fehler{display:block}
.hinweis{margin:8px 0 0;font-size:var(--fs-tiny);color:var(--text-3);line-height:1.55}
.formstatus{display:none;margin:16px 0 0;font-size:var(--fs-small);color:var(--link)}
.formstatus.is-da{display:block}
/* Honigtopf: für Menschen unsichtbar, fängt einfache Bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){ .feldgitter{grid-template-columns:1fr} }

.infokarte{padding:clamp(22px,2.4vw,30px);border-radius:var(--r-xl);background:var(--flaeche)}
.infokarte + .infokarte{margin-top:14px}
.infokarte h3{margin:0 0 18px;font-size:var(--fs-small);font-weight:600;color:var(--text)}
.infoliste{list-style:none;margin:0;padding:0;display:grid;gap:16px;font-size:var(--fs-small)}
.infoliste li{display:grid;gap:3px}
.infoliste .mono{font-size:var(--fs-tiny);color:var(--text-3)}
.infoliste a{transition:color var(--dur) var(--ease)}

.prosa{max-width:66ch;margin-inline:auto;text-align:left}
.prosa h2{margin:46px 0 14px;font-size:var(--fs-h3);font-weight:600;letter-spacing:-.015em;color:var(--text)}
.prosa h2:first-child{margin-top:0}
.prosa p{margin:0 0 16px;color:var(--text-2)}
.prosa strong{color:var(--text);font-weight:600}
.prosa a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* Redaktionsnotiz. Bewusst kein Teil der Gestaltung: gestrichelt,
   klein, grau. Sie soll auffallen, ohne die Seite zu prägen — und
   sie muss vor dem Livegang restlos verschwinden. */
.notiz{
  max-width:62ch;margin-inline:auto;padding:20px 22px;
  border:1px dashed rgba(255,255,255,.18);border-radius:var(--r-md);
  text-align:left;
}
.notiz::before{
  content:"Redaktionsnotiz";display:block;margin-bottom:10px;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);
}
.notiz p{margin:0 0 9px;font-size:var(--fs-small);color:var(--text-3)}
.notiz p:last-child{margin-bottom:0}
.notiz strong{color:var(--text-2)}

/* Abschluss */
.abschluss{text-align:center}
.abschluss p{margin:18px auto 0;max-width:42ch;color:var(--text-2)}
.abschluss .knopfreihe{margin-top:34px}

/* ── 9  Footer ───────────────────────────────────────────────── */
.fuss{
  position:relative;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.05);
  padding:clamp(44px,6vh,68px) 0 34px;font-size:var(--fs-tiny);
}
/* Der einzige Lichtschein auf der Seite. Sehr leise, neutral, von
   unten — er schließt die Seite ab, statt sie ins Nichts laufen zu
   lassen. Alles andere an Beleuchtung wurde wieder entfernt: farbige
   Verläufe über der Fläche lesen sich als Filter, nicht als Licht. */
.fuss::before{
  content:"";position:absolute;inset:auto 0 -60% 0;height:150%;
  pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.055) 0%,rgba(255,255,255,.02) 38%,transparent 66%);
}
.fuss > *{position:relative}
.fuss__oben{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center}
.fuss__logo{height:22px;width:auto;opacity:.7}
.fuss__nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin-left:auto}
.fuss a{color:var(--text-3);transition:color var(--dur) var(--ease)}
.fuss__unten{
  display:flex;flex-wrap:wrap;gap:8px 24px;
  margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.05);color:var(--text-3);
}
.fuss__unten nav{display:flex;gap:20px;margin-left:auto}
@media (max-width:700px){
  .fuss__nav,.fuss__unten nav{margin-left:0}
}

/* ── 10  Animationen ─────────────────────────────────────────── */
/* Versteckt wird erst, wenn ein Skript js-anim auf <html> gesetzt
   hat — ohne JavaScript bleibt alles sichtbar. */
.js-anim [data-anim]{opacity:0;transform:translateY(20px);will-change:transform,opacity}
[data-anim].is-da{
  opacity:1;transform:none;
  transition:opacity var(--dur-l) var(--ease),transform var(--dur-l) var(--ease);
  transition-delay:calc(var(--i,0) * 65ms);
}

/* ── 11  Zeigegeräte mit echtem Hover ────────────────────────── */
/* Alle Hover-Regeln stehen hier. Auf dem Handy bliebe der Zustand
   sonst nach einem Tipp hängen. */
@media (hover:hover) and (pointer:fine){
  .nav__links a:hover,.nav__cta:hover{color:var(--text)}
  .nav__cta:hover{color:var(--link-hell)}
  .alink:hover{color:var(--link-hell)}
  .alink:hover::after{transform:translate(4px,-.06em)}
  .btn--voll:hover{background:var(--akzent-hell)}
  .btn--umriss:hover{border-color:var(--text)}
  .feldzeile:hover .feldzeile__name{color:var(--link)}
  .feldzeile:hover .feldzeile__pfeil{color:var(--link);transform:translateX(5px)}
  .menu__liste a:hover{color:var(--link)}
  .fuss a:hover{color:var(--text)}
  .infoliste a:hover{color:var(--link)}
}

/* ── 12  Reduzierte Bewegung ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-anim [data-anim]{opacity:1 !important;transform:none !important}
  .scrub{height:auto}
  .scrub__klebt{position:static;height:auto;padding-block:var(--sek)}
  .scrub__satz .w{color:var(--text)}
}