/* ═══════════════════════════════════════════════════════════════
   DK Recruiting Partners — Designsystem
   Kein Build-Step, kein Framework. Eine Schrift, drei Schnitte.

   Vier Entscheidungen tragen die Datei:

   1  Switzer als einzige Schrift, selbst gehostet. Freie Entsprechung
      zu Moderat aus dem Cherry-Bomb-Projekt — Moderat und Macan sind
      pro Domain lizenzpflichtig und dürfen nicht kopiert werden.

   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 das Prinzip.

   3  Eine Ausrichtungsregel. Sektionsköpfe zentriert, Fließtext
      innerhalb eines Bausteins linksbündig.

   4  Keine Fläche trägt eine einzelne Farbe. Grund, Bänder und Karten
      sind Verläufe über acht Blaustufen. „Flach" war die Kritik an der
      Vorgängerfassung.

   Zwei Kontrastfarben: Weiß trägt die Handlung, ein leuchtendes Blau
   die Verweise.

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

/* ── 1  Tokens ───────────────────────────────────────────────── */
:root{
  /* ── Blauleiter ────────────────────────────────────────────
     Blau trägt die Fläche, nicht Weiß. Entscheidend ist, dass
     nirgends eine einzelne Farbe flächig steht: der Grund selbst ist
     ein Verlauf, Bänder und Flächen sind weitere Verläufe. Genau das
     war die Kritik an der Vorgängerfassung — eine Fläche, eine Farbe,
     flach.

     Acht Stufen, davon vier für Flächen und vier für Schrift und
     Verweise. Alle Textwerte gegen die Mitte des Grundverlaufs
     gemessen: Fließtext 13,4:1, Verweise 8,0:1. */
  --blau-950:#101f39;
  --blau-900:#12233f;
  --blau-850:#16294a;
  --blau-800:#1b3055;
  --blau-700:#24406d;
  --blau-400:#5d86c4;
  --blau-300:#8cc2ff;
  --blau-200:#b9d8ff;

  --bg:var(--blau-900);
  --bg-2:var(--blau-850);
  --flaeche:var(--blau-800);
  --bg-rgb:18,35,63;          /* für halbtransparente Leisten */
  --linie:rgba(255,255,255,.12);

  --text:#eef4fc;
  --text-2:#adbdd6;
  --text-3:#8598b6;

  /* Zwei Kontrastfarben: Weiß trägt die Handlung — der Hauptknopf ist
     eine weiße Pille —, ein leuchtendes Blau die Verweise. */
  --akzent:#ffffff;
  --akzent-hell:#e6eefb;
  --akzent-tief:var(--blau-900);   /* Schrift auf gefüllter Fläche */
  --link:var(--blau-300);
  --link-hell:var(--blau-200);
  --fehler:#ff9b9b;

  --font:'Switzer',-apple-system,BlinkMacSystemFont,"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;
}

/* ── 1c  Schrift ─────────────────────────────────────────────── */
/* Switzer, drei Schnitte, selbst gehostet. Ausgewählt als freie
   Entsprechung zu Moderat, der Schrift des Cherry-Bomb-Projekts.

   Warum nicht Moderat selbst: die Dateien dort stammen aus dem
   Webflow-Export von cherrybomb.com.mx. Moderat (Autobahn) und Macan
   (Fontfabric) sind lizenzpflichtig, und zwar pro Domain. Ein
   Kopieren auf dk-recruiting-partners.de wäre eine Lizenzverletzung.

   Switzer steht unter einer freien Lizenz, auch kommerziell. */
@font-face{
  font-family:'Switzer';font-style:normal;font-weight:400;
  font-display:swap;src:url('../fonts/switzer-400.woff2') format('woff2');
}
@font-face{
  font-family:'Switzer';font-style:normal;font-weight:500;
  font-display:swap;src:url('../fonts/switzer-500.woff2') format('woff2');
}
@font-face{
  font-family:'Switzer';font-style:normal;font-weight:600;
  font-display:swap;src:url('../fonts/switzer-600.woff2') format('woff2');
}

/* ── 2  Basis ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--text-2);
  /* Kein flacher Anstrich: der Verlauf läuft über die volle Seite und
     bleibt beim Scrollen stehen, dadurch wandert die Fläche langsam
     durch die Blaustufen. */
  background:var(--blau-900);
  background-image:linear-gradient(180deg,var(--blau-850) 0%,var(--blau-900) 45%,var(--blau-950) 100%);
  background-attachment:fixed;
  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(--blau-900)}

.skip{position:absolute;left:-9999px;top:0;padding:12px 18px;background:#fff;color:#12233f;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,.32);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,.10);
  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,.10);
  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{
  position:relative;min-height:100svh;
  background:linear-gradient(180deg,var(--blau-800) 0%,var(--blau-850) 42%,transparent 82%);
  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.05;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{
  /* Weicher Verlauf statt einer flachen Fläche: oben etwas mehr Blau,
     nach unten ins Weiß auslaufend. Der Unterschied ist klein genug,
     dass man ihn nicht als Verlauf liest — er nimmt der Fläche nur
     die Härte. */
  background:linear-gradient(180deg,var(--blau-850) 0%,var(--blau-800) 50%,var(--blau-850) 100%);
}
.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;
  background:linear-gradient(180deg,var(--blau-800) 0%,var(--blau-850) 58%,transparent 100%);
  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(238,244,252,.16);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:linear-gradient(180deg,var(--blau-800) 0%,var(--blau-850) 100%);
  border:1px solid rgba(255,255,255,.09)}
.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:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.14);
  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:linear-gradient(180deg,var(--blau-800) 0%,var(--blau-850) 100%);
  border:1px solid rgba(255,255,255,.09)}
.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{
  border-top:1px solid rgba(255,255,255,.10);
  padding:clamp(44px,6vh,68px) 0 34px;font-size:var(--fs-tiny);
}

.fuss__oben{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center}
.fuss__logo{height:22px;width:auto;opacity:.6}
.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,.10);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)}
}