/* ==========================================================================
   NAZARETH PERSONAL · Design System
   Primär #353E4E · Signal #CC1517 · Text #6D727C · Fläche #FFFFFF

   SCHRIFT
   · Überschriften  Lato  · 900 (h1/h2, Logo) · 700 (h3/h4, Sub-Headlines)
   · Fließtext & UI Inter · 400 / 600 / 800 / 900
   Beide liegen lokal in /fonts als WOFF2 (auf Latin subsettet, ~289 KB
   gesamt). Keine Google-Fonts-Einbindung mehr – spart einen externen
   Request und ist DSGVO-seitig unkritisch.
   Lizenz: beide SIL Open Font License, siehe fonts/OFL-*.txt

   KONTRASTREGELN FÜR ROT – bitte beachten:
   · Rot #CC1517 auf Weiß  = 5,69:1  → WCAG AA für Fließtext ✓
   · Weiß auf Rot #CC1517  = 5,69:1  → WCAG AA ✓  (Standard für Buttons/Flächen)
   · Dunkelblau auf Rot    = 1,89:1  → UNLESBAR ✗ niemals verwenden
   · Rot auf Dunkelblau    = 1,89:1  → UNLESBAR ✗ niemals verwenden
   Konsequenz: Rote Flächen tragen IMMER weiße Schrift.
   Auf dunkelblauen Sektionen wird NICHT Rot als Akzentfarbe eingesetzt,
   sondern Weiß – dort trägt Rot nur gefüllte Flächen (Buttons, Kreise, Badges).

   FORMENSPRACHE (seit 26.10.2026, CI-Manual 4.5 „Ergänzung 26.10.2026“)
   Übernommen aus der Gestaltungsreferenz „Finovate“, zuerst als Entwurf
   index-v2.html, dann für die ganze Website freigegeben:
   · gerahmte Flächen (Hero, Dunkelblau, Hellgrau, Footer) mit Abstand zum
     Fensterrand und großen Radien, weiße Sektionen randlos
   · schwebende Navigation, Kicker als Pille, Buttons ganz rund, runder
     Pfeilknopf (↗), Karten grau gefüllt ohne Rand
   · Hero-Text in Weiß direkt auf dem Foto über dunkler Abschattung
   · N-Ausschnitt: die Bildmarke als Bildmaske (img/n-cutout.svg)
   Das Lichtelement auf roten Flächen ist am selben Tag entfallen.
   ========================================================================== */

/* --- 0. Schriften ------------------------------------------------------- */
/* Lato · Überschriften */
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/lato-700.woff2") format("woff2");
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("fonts/lato-900.woff2") format("woff2");
}
/* Inter · Fließtext, UI, Zahlen */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/inter-800.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("fonts/inter-900.woff2") format("woff2");
}

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  --blau:        #353E4E;
  --blau-800:    #2B333F;
  --blau-600:    #4A5568;
  --rot:         #CC1517;
  --rot-dunkel:  #A81113;
  --rot-hauch:   rgba(204, 21, 23, .08);
  --weiss:       #FFFFFF;
  --grau-text:   #6D727C;   /* seit 30.09.2026, vorher #737882 (verfehlte WCAG AA) */
  --grau-linie:  #E6E6E6;
  --grau-flaeche:#F6F7F8;

  --ff:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-head: 'Lato', 'Trebuchet MS', -apple-system, BlinkMacSystemFont, sans-serif;

  --max:   1200px;
  --max-s: 820px;

  --r:  4px;
  --r-l: 8px;
  --r-flaeche: 55px 55px 10px 55px;   /* große Farbflächen, CI-Manual 4.5 */
  /* Formensprache seit 26.10.2026 (CI-Manual 4.5): gerahmte Flächen stehen
     --rand vom Fensterrand weg und haben --r-rahmen, Karten --r-karte,
     Bilder in Karten --r-bild. */
  --rand: 16px;
  --r-rahmen: 28px;
  --r-karte: 20px;
  --r-bild: 14px;
  /* Abstand der schwebenden Navigation: 16 Rand + 12 Luft + 64 Leiste */
  --kopf: 92px;
  --pfeil-blau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353E4E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --pfeil-weiss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --shadow: 0 2px 12px rgba(53,62,78,.08);
  --shadow-hoch: 0 16px 36px rgba(53,62,78,.13);
}
@media (max-width: 860px) {
  :root { --rand: 8px; --r-rahmen: 22px; }
}

/* --- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top ist Pflicht, nicht Feinschliff: Die Navigation schwebt
   fest über dem Inhalt und reicht rund 92 px tief (--kopf). Ohne diesen Wert
   springt ein Anker-Link die Zielüberschrift exakt unter die Leiste – man
   landet an der richtigen Stelle und sieht sie trotzdem nicht. Der Wert deckt
   die Leiste plus etwas Luft. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--ff);
  font-size: 17px;
  line-height: 1.65;
  /* Lange Wörter und Adressen (Rechtstexte, E-Mail) dürfen auf dem Telefon
     umbrechen, statt die Seite seitlich scrollbar zu machen. */
  overflow-wrap: break-word;
  color: var(--grau-text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul { margin: 0; padding: 0; list-style: none; }
/* Das hidden-Attribut muss staerker sein als jede Komponentenregel.
   Der Browser setzt dafuer nur `[hidden] { display: none }` in seinem eigenen
   Stylesheet – und jede Autorenregel schlaegt das. `.stelle { display: block }`
   hat deshalb dafuer gesorgt, dass der Stellenfilter zwar zaehlte und die URL
   schrieb, aber keine einzige Karte verschwand. Ohne !important muesste jede
   Komponente mit eigenem display die Ausnahme selbst mitbringen. */
[hidden] { display: none !important; }
/* Browser-Default für figure/blockquote ist margin: 1em 40px – im Raster
   schrumpft die Karte dadurch um 80 px und wird unnötig hoch. */
figure, blockquote { margin: 0; }
button { font-family: inherit; }

/* --- 3. Typografie ------------------------------------------------------
   Lato hat kein 800er-Gewicht: h1/h2 laufen auf 900 (Black),
   h3/h4 auf 700 (Bold). Lato Black baut runder und breiter als Inter,
   deshalb ist die Laufweite hier bewusst weniger negativ.              */
h1, h2, h3, h4 {
  font-family: var(--ff-head);
  font-weight: 900;
  color: var(--blau);
  letter-spacing: -.015em;
  line-height: 1.1;
  margin: 0 0 var(--s3);
}
h1 { font-size: clamp(2.35rem, 6.3vw, 4.4rem); letter-spacing: -.025em; line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.9vw, 2.9rem);  letter-spacing: -.02em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.42rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
h4 { font-size: 1.04rem; font-weight: 700; letter-spacing: -.005em; }

/* Weitere Elemente in Headline-Rolle */
.karte__t, .stelle__titel, .prozess__t, .zeit__t, .zeit__j,
.person__name, .siegel__t, .footer__logo, .logo__text {
  font-family: var(--ff-head);
}
p  { margin: 0 0 var(--s3); max-width: 68ch; }
.lead { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.55; color: var(--blau-600); }
strong { color: var(--blau); font-weight: 600; }

/* Kicker als Pille (seit 26.10.2026): umrandet, davor ein roter Punkt, Schrift
   Dunkelblau. Vorher roter Text ohne Rahmen. Auf Dunkelblau und im Hero wird die
   Schrift weiß, der Punkt bleibt eine rote Fläche – roter Text auf Blau wäre
   1,89:1. .kicker--hell bleibt als Klasse stehen, der Kontext regelt es. */
.kicker {
  display: inline-flex; align-items: center; gap: 8px; max-width: none;
  margin: 0 0 var(--s3); padding: 6px 14px 6px 12px;
  border: 1px solid rgba(53,62,78,.16); border-radius: 999px; background: var(--weiss);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; line-height: 1.3;
  text-transform: uppercase; color: var(--blau);
}
.kicker::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--rot); }
.section--grau .kicker { border-color: rgba(53,62,78,.12); }
.section--dark .kicker, .kicker--hell, .hero .kicker {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); color: var(--weiss);
}
/* Auf Rot (CTA-Block, rote Karte): durchsichtig, weiß umrandet, weißer Punkt –
   sonst gewinnt `.cta p` die Schriftfarbe und es steht Weiß auf weißer Pille. */
.cta .kicker {
  background: transparent; border-color: rgba(255,255,255,.55); color: var(--weiss);
}
.cta .kicker::before { background: var(--weiss); }
/* Feine Linie hinter der letzten Headline-Zeile (Referenz), nur dekorativ */
.linie {
  display: inline-block; width: clamp(40px, 7vw, 110px); height: 2px; margin-left: .35em;
  vertical-align: middle; transform: translateY(-.12em); background: rgba(53,62,78,.22);
}
.section--dark .linie, .hero .linie { background: rgba(255,255,255,.45); }

/* Signatur-Element: rote Unterstreichung.
   Wichtig: Der Balken liegt UNTER der Schrift, nicht dahinter –
   dunkelblauer Text auf Rot wäre unlesbar (1,89:1). */
.mark { position: relative; display: inline-block; padding-bottom: .1em; }
.mark::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0; height: .13em;
  background: var(--rot);
  transform: skewX(-14deg);
  border-radius: 1px;
}
.hero .mark::after, .section--dark .mark::after { background: var(--rot); height: .15em; }

/* --- 4. Layout ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--s3); }
.wrap--s { max-width: var(--max-s); }
.section { padding-block: clamp(var(--s6), 9vw, var(--s8)); }
.section--tight { padding-block: clamp(var(--s5), 6vw, var(--s6)); }
.section--dark { background: var(--blau); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--weiss); }
.section--dark p, .section--dark li { color: rgba(255,255,255,.8); }
.section--dark strong { color: var(--weiss); }
.section--grau { background: var(--grau-flaeche); }
.section--rot { background: var(--rot); }
/* Farbige Sektionen sind gerahmt (seit 26.10.2026): Abstand zum Fensterrand,
   große Radien. Weiße Sektionen bleiben randlos. Stoßen zwei gerahmte Flächen
   (oder Hero und Fläche) aneinander, trennt sie ein schmaler weißer Streifen. */
.section--dark, .section--grau, .section--rot {
  position: relative; margin-inline: var(--rand); border-radius: var(--r-rahmen);
}
:is(.hero, .section--dark, .section--grau, .section--rot) + :is(.section--dark, .section--grau, .section--rot) {
  margin-top: clamp(var(--s4), 5vw, var(--s7));
}
/* Zwei weiße Sektionen hintereinander: Der zweiten fehlt sonst nichts, aber der
   Abstand verdoppelt sich. --anschluss nimmt ihr den oberen Innenabstand. */
.section--anschluss { padding-top: 0; }
/* Seiten ohne Hero (Rechtstexte, Wissen-Artikel, 404): Die Navigation schwebt
   über dem Inhalt, der erste Abschnitt rückt um ihre Höhe nach unten. */
main > :first-child:not(.hero) { padding-top: calc(var(--kopf) + clamp(var(--s5), 6vw, var(--s6))); }
main > :first-child:is(.section--dark, .section--grau, .fehler) { margin-top: var(--rand); }
.section--rot h2, .section--rot h3, .section--rot p, .section--rot li { color: var(--weiss); }

.head { max-width: 780px; margin-bottom: var(--s5); }
.head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--s3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
/* Bleibt in einer Zweierreihe eine Karte übrig, nimmt sie die ganze Zeile ein. */
.grid-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s4), 5vw, var(--s6)); align-items: center; }
/* Bild neben Text (seit 15.10.2026): Das Bild nimmt die Höhe der Textspalte an, statt mit
   festem Seitenverhältnis daneben zu stehen. Vorher stand ein 21:9-Bild neben einem fast
   quadratischen Textblock, eine Spalte wirkte leer. Jetzt füllt das Foto die volle Zeile
   (object-fit: cover schneidet zu), der Text steht mittig daneben. min-height verhindert
   ein Streifenbild neben kurzem Text. Inline-aspect-ratio an solchen Bildern entfernen,
   sonst greift diese Regel nicht. Auf dem Telefon untereinander mit festem Format. */
.split:has(> .foto) { align-items: stretch; }
.split:has(> .foto) > :not(.foto) { align-self: center; }
.split > .foto { aspect-ratio: auto; min-height: 380px; }

/* --- 5. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px; border: 2px solid transparent;
  font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .16s ease, color .16s ease;
  min-height: 52px;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }

/* Rot + WEISS. Niemals dunkelblauer Text auf Rot. */
.btn--primary { background: var(--rot); color: var(--weiss); }
.btn--primary:hover { background: var(--rot-dunkel); color: var(--weiss); }
.section--dark .btn--primary:focus-visible { outline-color: var(--weiss); }
.section--rot .btn--primary { background: var(--weiss); color: var(--rot); }
.section--rot .btn--primary:hover { background: rgba(255,255,255,.88); }

.btn--ghost { background: transparent; color: var(--blau); border-color: var(--blau); }
.btn--ghost:hover { background: var(--blau); color: var(--weiss); }
/* Auf dunkelblauem Grund wäre der Standard-Ghost (blau auf blau) unsichtbar.
   Seit 26.10.2026 gilt das auch im Hero: Sein Inhalt steht auf dem
   abgeschatteten Foto, nicht mehr auf einer weißen Karte. */
.section--dark .btn--ghost, .hero .btn--ghost { color: var(--weiss); border-color: rgba(255,255,255,.6); }
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover { background: var(--weiss); color: var(--blau); }
.hero .btn:focus-visible { outline-color: var(--weiss); }
.section--rot .btn--ghost { color: var(--weiss); border-color: rgba(255,255,255,.65); }
.section--rot .btn--ghost:hover { background: var(--weiss); color: var(--rot); }

.btn--gross { padding: 20px 36px; font-size: 1.08rem; min-height: 62px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.btn-row--mitte { justify-content: center; }

/* Runder Pfeilknopf (seit 26.10.2026). Dekorativ, der Link liegt auf dem
   Eltern-Element; beim Zeigen dreht er sich um 45°. Linienicon 2 px. */
.pfeil {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--weiss); color: var(--blau);
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.pfeil svg { width: 18px; height: 18px; }

/* Pillen-Knopf mit Pfeil: zwei Formen, ein Link (<a class="pfeil-knopf">
   <span class="pfeil-knopf__text">…</span><span class="pfeil-knopf__pfeil">svg</span></a>).
   Rot mit weißer Schrift; --ghost dunkelblau umrandet. Auf Dunkelblau wird
   --ghost weiß, sonst wäre er unsichtbar. */
.pfeil-knopf {
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  text-decoration: none; font-weight: 800; font-size: 1rem; letter-spacing: -.01em; border-radius: 999px;
}
.pfeil-knopf__text, .pfeil-knopf__pfeil {
  background: var(--rot); color: var(--weiss);
  transition: background-color .16s ease, color .16s ease, transform .2s ease, box-shadow .16s ease;
}
.pfeil-knopf__text {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px;
  line-height: 1.25; text-align: center;
}
/* Telefon: Längere Beschriftungen („Offene Stellen ansehen“) brachen in der roten
   Fläche zweizeilig um. Weniger Innenabstand hier und in .cta hält sie einzeilig. */
@media (max-width: 560px) {
  .pfeil-knopf { max-width: 100%; }
  .pfeil-knopf__text { padding: 8px 18px; font-size: .95rem; }
  .cta { padding: var(--s3); }
}
.pfeil-knopf__pfeil { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; }
.pfeil-knopf__pfeil svg { width: 20px; height: 20px; }
.pfeil-knopf:hover .pfeil-knopf__text, .pfeil-knopf:hover .pfeil-knopf__pfeil { background: var(--rot-dunkel); }
.pfeil-knopf:hover .pfeil-knopf__pfeil { transform: rotate(45deg); }
.pfeil-knopf:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.pfeil-knopf--ghost .pfeil-knopf__text, .pfeil-knopf--ghost .pfeil-knopf__pfeil {
  background: transparent; color: var(--blau); box-shadow: inset 0 0 0 2px var(--blau);
}
.pfeil-knopf--ghost:hover .pfeil-knopf__text, .pfeil-knopf--ghost:hover .pfeil-knopf__pfeil { background: var(--blau); color: var(--weiss); }
.section--dark .pfeil-knopf:focus-visible, .hero .pfeil-knopf:focus-visible { outline-color: var(--weiss); }
.section--dark .pfeil-knopf--ghost .pfeil-knopf__text, .section--dark .pfeil-knopf--ghost .pfeil-knopf__pfeil {
  color: var(--weiss); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
}
.section--dark .pfeil-knopf--ghost:hover .pfeil-knopf__text, .section--dark .pfeil-knopf--ghost:hover .pfeil-knopf__pfeil,
.hero .pfeil-knopf--ghost:hover .pfeil-knopf__text, .hero .pfeil-knopf--ghost:hover .pfeil-knopf__pfeil {
  background: var(--weiss); color: var(--blau);
}
.hero .pfeil-knopf--ghost .pfeil-knopf__text, .hero .pfeil-knopf--ghost .pfeil-knopf__pfeil {
  color: var(--weiss); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
}
/* Auf der roten CTA-Fläche: Haupt-Knopf weiß mit roter Schrift (5,69:1),
   --ghost weiß umrandet. Rot auf Rot wäre unsichtbar. */
.cta .pfeil-knopf .pfeil-knopf__text, .cta .pfeil-knopf .pfeil-knopf__pfeil { background: var(--weiss); color: var(--rot); box-shadow: none; }
.cta .pfeil-knopf:hover .pfeil-knopf__text, .cta .pfeil-knopf:hover .pfeil-knopf__pfeil { background: rgba(255,255,255,.88); color: var(--rot-dunkel); }
.cta .pfeil-knopf--ghost .pfeil-knopf__text, .cta .pfeil-knopf--ghost .pfeil-knopf__pfeil {
  background: transparent; color: var(--weiss); box-shadow: inset 0 0 0 2px rgba(255,255,255,.65);
}
.cta .pfeil-knopf--ghost:hover .pfeil-knopf__text, .cta .pfeil-knopf--ghost:hover .pfeil-knopf__pfeil { background: var(--weiss); color: var(--rot); }
.cta .pfeil-knopf:focus-visible { outline-color: var(--weiss); }

.tel-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; color: var(--rot); text-decoration: none; font-size: 1.02rem;
}
.tel-link:hover { text-decoration: underline; }
.section--dark .tel-link, .hero .tel-link { color: var(--weiss); }   /* Rot auf Blau wäre unlesbar */
.section--rot  .tel-link { color: var(--weiss); }
/* Normale Textlinks auf dunklen Flächen. Ohne diese Regel greift `a`
   aus dem Reset mit --blau: dunkelblauer Link auf dunkelblauem Grund,
   1,17:1. Buttons sind ausgenommen, die bringen ihre Farben selbst mit. */
.section--dark a:not(.btn):not(.tel-link):not(.pfeil-knopf),
.hero__karte a:not(.btn):not(.tel-link):not(.pfeil-knopf) { color: var(--weiss); text-decoration-color: rgba(255,255,255,.5); }

/* --- 6. Header ---------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rot); color: var(--weiss); padding: 12px 20px; font-weight: 800;
}
.skip:focus { left: 0; }

/* Schwebende Navigation (seit 26.10.2026): Der Header ist eine feste,
   unsichtbare Schicht über der Seite; sichtbar ist nur die weiße Leiste darin.
   pointer-events, damit die Fläche neben der Leiste keine Klicks schluckt.
   Weil der Header nichts mehr verdrängt, schiebt `main > :first-child` auf
   Seiten ohne Hero den Inhalt um --kopf nach unten (Abschnitt 4). */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-top: calc(var(--rand) + 12px);
  pointer-events: none;
}
.header__in {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: var(--s3);
  width: calc(100% - 2 * (var(--rand) + 16px)); max-width: calc(var(--max) - 2 * var(--s3));
  min-height: 64px; padding: 8px 8px 8px 22px;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 999px; box-shadow: 0 10px 30px rgba(20,24,32,.16);
}
/* Logo: Bilddatei mit Text-Fallback. Fehlt oder bricht die Grafik,
   entfernt sich das <img> selbst und der Schriftzug übernimmt. */
.logo {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-weight: 900; font-size: 1.34rem; letter-spacing: -.03em;
  color: var(--blau); text-decoration: none; white-space: nowrap;
}
.logo__bild { height: 36px; width: auto; }
.logo__bild + .logo__text { display: none; }   /* Grafik da → Text aus */
.logo__text span { display: block; font-family: var(--ff); font-size: .58rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--grau-text); margin-top: -3px; }

.nav { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
/* :not(.btn) ist Pflicht, nicht Kosmetik: ohne den Ausschluss überschreibt diese
   Regel (0,1,1) die Buttonfarbe .btn--primary (0,1,0) und setzt dunkelblauen Text
   auf die rote Fläche – 1,89:1 und damit unlesbar. Ebenso erbte der Button sonst
   Padding und Unterkante der Textlinks. */
.nav a:not(.btn) {
  font-size: .95rem; font-weight: 600; color: var(--blau);
  text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--rot); }
.nav__sep { width: 1px; height: 24px; background: var(--grau-linie); }
.nav__welt {
  font-size: .88rem !important; font-weight: 700 !important;
  color: var(--grau-text) !important; white-space: nowrap;
}
.nav__welt:hover { color: var(--blau) !important; }
/* Glanz auf „Für Unternehmen“ (seit 26.10.2026): Alle sieben Sekunden huscht ein
   roter Verlauf durch die Schrift, damit Betriebe den Weg in ihre Welt finden.
   Der Verlauf liegt dreifach breit hinter der Schrift (background-clip: text),
   links und rechts grau, in der Mitte rot. In Ruhe steht das rechte Drittel
   dahinter, also reines Grau (4,83:1); der Lauf schiebt die rote Mitte einmal
   durch, am Ende steht wieder Grau. Rot auf Weiß hält 5,69:1, auch der Übergang
   bleibt lesbar. Gilt nur für den Link zu den Unternehmen, nicht für „Für
   Bewerber“ in der Welt „Sie“. Bei „Bewegung reduzieren“ greift die Regel ganz
   unten, die Schrift bleibt grau. */
.nav__welt[href$="unternehmen.html"] {
  background: linear-gradient(105deg,
    var(--grau-text) 0 40%, var(--rot) 47% 53%, var(--grau-text) 60% 100%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glanz 7s ease-in-out 2s infinite;
}
.nav__welt[href$="unternehmen.html"]:hover { -webkit-text-fill-color: var(--blau); }
@keyframes glanz {
  0%, 78% { background-position: 100% 0; }
  96%, 100% { background-position: 0 0; }
}
@media (forced-colors: active) {
  .nav__welt[href$="unternehmen.html"] { -webkit-text-fill-color: currentColor; background: none; }
}

.burger {
  display: none; margin-left: auto; background: none; border: 0;
  padding: 10px; cursor: pointer; color: var(--blau);
}

/* --- 7. Hero ------------------------------------------------------------
   Seit 26.10.2026 (CI-Manual 4.5): Das Foto steht in einem gerahmten Feld,
   die Navigation schwebt darüber, der Inhalt steht in WEISS direkt auf dem
   Foto. Lesbar macht ihn die dunkelblaue Abschattung (::after) – links für
   den Text, unten für Kacheln. Bis 25.10.2026 stand der Inhalt auf einer
   weißen, halbtransparenten Karte. .hero__karte heißt noch so, weil 90
   Seiten und zwei Generatoren das Markup tragen; sie ist nur noch die
   Textspalte.

   Die Abschattung hängt an der Textspalte, nicht an festen Prozenten: Bis zu
   ihrer rechten Kante (max(560px, 50 % − 20px)) bleibt sie dunkel, danach läuft
   sie über rund 420 px aus. So steht der Text auf jedem Bildschirm auf dem
   dunklen Teil, und rechts bleibt das Foto frei.

   ACHTUNG KONTRAST: Die Lesbarkeit hängt am Foto. Nach jedem Bildtausch und
   jeder Änderung an der Abschattung messen: hero-kontrast.js einbinden und
   pruefeAlleHeros() aufrufen (rechnet die Bildpixel mit ein). */
.hero {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  margin: var(--rand) var(--rand) 0; border-radius: var(--r-rahmen); overflow: hidden;
  min-height: clamp(560px, 82vh, 820px); background: var(--blau);
}
.hero__bild { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
/* opacity statt display:none – siehe Kommentar bei .foto img (Lazy Loading) */
.hero__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
  opacity: 0; transition: opacity .3s ease;
}
.hero__bild.is-bild img { opacity: 1; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(43,51,63,.94) 0,
      rgba(43,51,63,.86) max(560px, calc(50% - 20px)),
      rgba(43,51,63,.25) max(800px, calc(50% + 220px)),
      rgba(43,51,63,0)   max(980px, calc(50% + 400px))),
    linear-gradient(0deg, rgba(43,51,63,.8) 0, rgba(43,51,63,0) 32%);
}
.hero__in {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(32px, 6vw, 72px);
  padding-block: calc(var(--kopf) + var(--s6)) var(--s5);
}
.hero__karte { max-width: 620px; }
.hero h1 { color: var(--weiss); max-width: 18ch; }
.hero p { color: rgba(255,255,255,.92); }
.hero strong { color: var(--weiss); }
/* Im Hero trägt die H1 die Wirkung. Der Text darunter läuft in normaler
   Textkörpergröße statt in Lead-Größe – sonst konkurrieren beide. */
.hero .lead {
  max-width: 52ch; margin-bottom: var(--s4);
  font-size: inherit; line-height: 1.6;   /* inherit = exakt Textkörpergröße */
}
/* Buttons bleiben ab 700 px in einer Zeile, sonst brechen zwei Buttons in
   Großform in der Textspalte um. */
@media (min-width: 700px) {
  .hero__karte .btn-row { flex-wrap: nowrap; }
  .hero__karte .btn--gross { padding-inline: var(--s3); }
}
/* Kurzangaben als dunkle Glas-Pillen über der H1. Nie weiß: Sie sollen nicht
   mit Suche oder CTA konkurrieren (Festlegung 26.10.2026). 55 % Dunkelblau
   unter weißer Schrift halten auch über hellen Bildstellen den Kontrast. */
.hero__zeile { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s4); max-width: none; }
.hero__zeile span, .hero__kacheln li {
  padding: 8px 14px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase;
  color: var(--weiss); background: rgba(43,51,63,.55); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* Startseite: höher, die Kurzangaben stehen als drei Kacheln unten im Bild,
   in der Textspalte die Stellensuche. */
.hero--start { min-height: clamp(640px, 94vh, 900px); }
.hero--start h1 { max-width: 14ch; }
.hero__kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.hero__kacheln li { padding: 15px 20px; border-radius: 14px; font-size: .74rem; }

/* Stellensuche im Hero der Startseite (seit 26.10.2026): runde weiße Leiste mit
   „Was?“, „Wo?“ und rotem Knopf. Die Felder tragen keinen eigenen Rahmen; der
   Fokus legt einen weißen Ring um die ganze Leiste. Die Labels stehen sichtbar
   im Feld statt nur als Platzhalter. Logik in jobsuche.js. */
.jobsuche {
  display: grid; grid-template-columns: 1.15fr 1fr auto; align-items: stretch; gap: 6px;
  max-width: 640px; margin: 0; padding: 8px 8px 8px 14px;
  background: var(--weiss); border-radius: 999px;
  box-shadow: 0 14px 40px rgba(20,24,32,.28);
  transition: box-shadow .16s ease;
}
.jobsuche:focus-within { box-shadow: 0 0 0 3px var(--weiss), 0 14px 40px rgba(20,24,32,.28); }
.jobsuche__feld { display: grid; align-content: center; min-width: 0; padding: 4px 12px; }
.jobsuche__feld + .jobsuche__feld { border-left: 1px solid var(--grau-linie); }
.jobsuche__feld label {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blau); line-height: 1.2;
}
.jobsuche__feld input {
  font: inherit; font-size: 1rem; color: var(--blau); background: transparent;
  border: 0; padding: 2px 0 0; min-width: 0; width: 100%; min-height: 30px;
}
.jobsuche__feld input:focus { outline: none; }
.jobsuche__feld input::placeholder { color: var(--grau-text); opacity: 1; }
.jobsuche .btn { white-space: nowrap; min-height: 56px; padding-inline: 26px; }

@media (max-width: 700px) {
  .jobsuche { grid-template-columns: 1fr; border-radius: 22px; padding: 8px; }
  .jobsuche__feld { padding-block: 8px; }
  .jobsuche__feld + .jobsuche__feld { border-left: 0; border-top: 1px solid var(--grau-linie); }
  .hero__kacheln { display: flex; flex-wrap: wrap; gap: 8px; }
  .hero__kacheln li { padding: 10px 14px; font-size: .68rem; border-radius: 999px; }
}
/* Telefon und Tablet hochkant: Das Querformat würde auf die hohe, schmale
   Fläche gezoomt und unter der Abschattung verschwinden. Deshalb steht das Foto
   oben und läuft nach unten ins Dunkelblau aus; der Text beginnt im Auslauf. */
@media (max-width: 860px) {
  .hero, .hero--start { min-height: 0; }
  .hero__bild { bottom: auto; height: 360px; }
  .hero::after {
    background: linear-gradient(180deg, rgba(43,51,63,.1) 0, rgba(43,51,63,.25) 150px, var(--blau) 360px);
  }
  .hero__in { padding-top: 250px; }
}

/* --- 8. Beweisleiste / Kennzahlen -------------------------------------- */
/* Seit 26.10.2026 wie in der Referenz: feine Trennlinie links, die Zahl auf
   einer kleinen roten Kachel in Weiß (CI-Manual 4.5, Zahlen-Kachel), darunter
   Bezeichnung und Quelle. --outline: Kachel nur umrandet, Zahl rot – auf
   Dunkelblau und im Hero weiß, weil Rot auf Blau 1,89:1 hätte. */
.beweise { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.beweise--drei { grid-template-columns: repeat(3, 1fr); max-width: 960px; margin-inline: auto; }
.stat {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 4px 0 4px var(--s3); border-left: 1px solid rgba(53,62,78,.16);
}
.stat__zahl {
  align-self: flex-start; padding: 8px 14px; border-radius: 12px;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: -.04em; line-height: 1;
  color: var(--weiss); background: var(--rot);
}
.stat__label {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; line-height: 1.4;
  text-transform: uppercase; color: var(--blau);
}
.stat__quelle { font-size: .8rem; line-height: 1.45; color: var(--grau-text); }
.stat--outline .stat__zahl { background: transparent; color: var(--rot); box-shadow: inset 0 0 0 2px rgba(204,21,23,.45); }
.section--dark .stat, .hero .stat { border-left-color: rgba(255,255,255,.28); }
.section--dark .stat__label, .hero .stat__label { color: var(--weiss); }
.section--dark .stat__quelle, .hero .stat__quelle { color: rgba(255,255,255,.82); }
.section--dark .stat--outline .stat__zahl, .hero .stat--outline .stat__zahl { color: var(--weiss); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }

/* --- 9. Karten ---------------------------------------------------------- */
/* Karten seit 26.10.2026: grau gefüllt ohne Rand, auf grauen Flächen weiß
   (CI-Manual 4.5). Gilt für .card, .versprechen, .stelle, .stimme, .siegel__item,
   .weg und weitere unten. Grauer Text auf --grau-flaeche hält 4,50:1. */
.card {
  background: var(--grau-flaeche); border: 0;
  border-radius: var(--r-karte); padding: var(--s4);
}
.section--grau :is(.card, .versprechen, .stelle, .stimme, .siegel__item, .weg, .person, .eckdaten > div, .sprung, .hinweis, .faq details) {
  background: var(--weiss);
}
/* Auf Dunkelblau: helle Kante statt grauer Fläche. Ohne das standen die
   Siegel auf „Über uns“ weiß auf Hellgrau (1,07:1, gefunden 26.10.2026). */
.section--dark :is(.siegel__item, .stimme, .weg, .hinweis, .faq details, .stelle, .eckdaten > div, .sprung) {
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.card h3 { margin-bottom: var(--s1); }
.card p:last-child { margin-bottom: 0; }
.card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--rot); color: var(--weiss);
  font-weight: 900; font-size: 1rem; margin-bottom: var(--s3);
}
.section--dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
/* Logofläche in Karten: weißer Grund, weil Partnerlogos ihre eigenen Farben
   mitbringen und auf Dunkelblau untergehen. Höhe fix, Breite frei – so stehen
   unterschiedlich proportionierte Wortmarken auf einer Linie. */
.card__logo {
  height: 52px; margin-bottom: var(--s3);
  background: var(--weiss); border-radius: 12px;
  padding: 8px 12px; display: inline-flex; align-items: center;
}
/* height statt max-height, damit alle Wortmarken gleich hoch stehen.
   Die <img> tragen width/height-Attribute – ohne sie kollabiert ein SVG,
   das nur eine viewBox und keine intrinsische Größe hat (z. B. SH.svg),
   bei width:auto auf Breite 0. */
.card__logo img { height: 100%; width: auto; object-fit: contain; }

/* Schmerz-Karten. Seit 26.10.2026 als Kacheln mit heller Kante und rotem Punkt
   (Referenz: „Our Philosophy“); stehen nur auf Dunkelblau. */
.schmerz { padding: var(--s4) var(--s3); border-radius: 18px; background: var(--grau-flaeche); }
.schmerz h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--blau); }
.schmerz h3::before {
  content: ""; display: block; width: 10px; height: 10px; margin-bottom: var(--s3);
  border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 6px rgba(204,21,23,.25);
}
.schmerz p { font-size: .97rem; margin: 0; }
.section--dark .schmerz { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
/* Zwingend: `.schmerz h3` (0,1,1) steht in dieser Datei nach
   `.section--dark h3` (0,1,1) und gewinnt bei Spezifitätsgleichstand.
   Ohne diesen Override sind die sechs Schmerz-Überschriften auf der
   Startseite dunkelblau auf Dunkelblau – also unsichtbar. */
.section--dark .schmerz h3 { color: var(--weiss); }

/* Versprechen-Karten mit Beleg */
.versprechen {
  background: var(--grau-flaeche); border-radius: var(--r-karte); padding: var(--s4); border: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.versprechen:hover { transform: translateY(-4px); box-shadow: var(--shadow-hoch); }
.versprechen h3 { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); font-size: 1.1rem; }
.versprechen h3::before { content: "✓"; color: var(--weiss); background: var(--rot);
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 1rem; font-weight: 900; }
.versprechen p { font-size: .97rem; margin-bottom: var(--s2); }
/* Auf dunkler Sektion sind die Grundstile unbrauchbar: Die Karte ist weiß
   gedacht, Titel dunkelblau und Text grau. Ohne diese Overrides steht blauer
   Text auf blauem Grund – unsichtbar (derselbe Fehler wie bei .schmerz h3
   und der Vergleichstabelle). */
.section--dark .versprechen { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.section--dark .versprechen h3 { color: var(--weiss); }
.section--dark .versprechen p { color: rgba(255,255,255,.82); }
/* Belege (seit 08.10.2026 auf allen Seiten gleich):
   Der Beleg steht zunächst grau und wird erst rot, wenn man auf seine Karte
   zeigt. Sechs rote Flächen auf einmal schreien, eine rote beim Lesen führt.
   Die Karte ist eine Flex-Spalte, der Beleg sitzt mit margin-top:auto bündig
   unten. So stehen alle Belege einer Reihe auf einer Linie, egal wie lang der
   Text darüber ist. In .card steckt der Beleg in einem <p class="mb0">, deshalb
   wird dort das <p> nach unten geschoben.
   Grau auf --grau-flaeche = 4,50:1 und damit AA. Der Rahmen ist im Ruhezustand
   schon da, damit der Wechsel auf Rot nichts verschiebt. Auf dem Telefon gibt es
   kein Hover, dort bleibt der Beleg grau.
   Einzeilig (nowrap): Belegtexte in Dreierreihen höchstens ~185 px breit (etwa
   „95 % Übernahmequote"), sonst ragen sie bei 861 px, der schmalsten
   Dreierreihe, über die Karte. Zweierreihen vertragen mehr. */
/* Seit 26.10.2026 als Pille auf Weiß (die Karten sind jetzt grau): Grau auf
   Weiß = 4,83:1. */
.beleg {
  display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--grau-text); background: var(--weiss);
  border: 1px solid var(--grau-linie); padding: 5px 12px; border-radius: 999px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.versprechen, .card:has(.beleg) { display: flex; flex-direction: column; }
.versprechen > .beleg { margin-top: auto; align-self: flex-start; }
.card > p:has(> .beleg) { margin-top: auto; }
.versprechen:hover .beleg, .versprechen:focus-within .beleg,
.card:hover .beleg, .card:focus-within .beleg {
  color: var(--weiss); background: var(--rot); border-color: var(--rot);
}
/* Auf Dunkelblau: dieselbe Ruhe, nur hell statt grau. */
.section--dark .beleg {
  color: rgba(255,255,255,.78); background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.section--dark .versprechen:hover .beleg, .section--dark .versprechen:focus-within .beleg,
.section--dark .card:hover .beleg, .section--dark .card:focus-within .beleg {
  color: var(--weiss); background: var(--rot); border-color: var(--rot);
}

/* --- 10. Bilder & Platzhalter ------------------------------------------
   Jede Bildfläche ist ein .foto mit data-bild="<schlüssel>".
   Die URL wird zentral in bilder.js gepflegt. Ist keine hinterlegt oder
   lädt das Bild nicht, bleibt der gestrichelte Platzhalter mit der
   Bildbeschreibung sichtbar – die Seite bricht nie.                       */
.foto {
  position: relative; overflow: hidden;
  background: var(--grau-flaeche); border: 2px dashed #C9CDD3;
  border-radius: var(--r-karte); display: grid; place-items: center; text-align: center;
  padding: var(--s4); min-height: 220px; color: var(--grau-text);
}
/* Das Bild wird per opacity aus- und eingeblendet, NICHT per display:none.
   Grund: Die <img> tragen loading="lazy". Ein Element mit display:none hat
   keine Layout-Box, gilt dem Browser deshalb nie als „nahe am Viewport" und
   wird nie geladen – das load-Event bliebe aus, bilder.js würde .is-bild
   niemals setzen und jedes Bild bliebe unsichtbar. Mit opacity bleibt das
   Bild im Layout, lazy loading funktioniert, und der Platzhalter darunter
   ist verdeckt, sobald das Bild da ist. */
/* border-radius: inherit und der durchsichtige Grund bei .is-bild (seit 26.10.2026):
   Vorher lag unter dem Bild Dunkelblau, das an den gerundeten Ecken als dunkler
   Saum durch die Kantenglättung schien (gemeldet bei den Teamfotos). */
.foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;   /* Gesichter nicht anschneiden */
  opacity: 0; pointer-events: none; border-radius: inherit;
}
.foto.is-bild { border: 0; padding: 0; background: transparent; }
.foto.is-bild img { opacity: 1; pointer-events: auto; }
.foto.is-bild > span { display: none; }
.foto span { font-size: .82rem; line-height: 1.5; max-width: 32ch; }
.foto strong { display: block; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 6px; color: var(--rot); }
.foto--hoch  { aspect-ratio: 4/5; min-height: 0; }
/* Wegweiser im Gebäude (Standort Kiel, seit 12.10.2026): fünf Fotos vom Haus
   bis zur Bürotür, nummeriert über einen Zähler. Die Zahl steht weiß auf Rot,
   wie überall, wo Rot eine Fläche ist. */
.wegweiser { list-style: none; margin: var(--s3) 0 0; padding: 0; counter-reset: weg;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); }
.wegweiser li { counter-increment: weg; }
.wegweiser p { margin: var(--s2) 0 0; font-size: .95rem; }
.wegweiser p::before {
  content: counter(weg); display: inline-grid; place-items: center;
  width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; vertical-align: 1px;
  background: var(--rot); color: var(--weiss); font-weight: 900; font-size: .8rem;
}
@media (max-width: 1000px) { .wegweiser { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .wegweiser { grid-template-columns: 1fr 1fr; gap: var(--s2); } }
.foto--quad  { aspect-ratio: 1;   min-height: 0; }
.foto--breit { aspect-ratio: 16/9; min-height: 0; }
.section--dark .foto { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.6); }
.section--dark .foto strong { color: var(--weiss); }

/* --- 11. Team ----------------------------------------------------------- */
/* Seit 26.10.2026 als Karte: grau gefüllt, Foto mit kleinerem Radius darin. */
.person { text-align: left; padding: 10px 10px var(--s3); border-radius: var(--r-karte); background: var(--grau-flaeche); }
.person > .foto { border-radius: var(--r-bild); }
.person > :not(.foto) { margin-inline: 6px; }
.person__rolle { hyphens: auto; -webkit-hyphens: auto; }
.section--dark .person { background: rgba(255,255,255,.06); }
.person__name { font-weight: 700; color: var(--blau); font-size: 1.05rem; margin: var(--s2) 0 2px; }
.person__rolle { font-size: .88rem; margin-bottom: 8px; }
.person__tel { font-size: .9rem; font-weight: 700; color: var(--rot); text-decoration: none; }
.person__tel:hover { text-decoration: underline; }
.section--dark .person__tel, .section--grau .person__tel { color: var(--rot); }
.section--dark .person__tel { color: var(--weiss); }

/* LinkedIn-Verweis in der Teamkarte – dezent, unter der Durchwahl */
.person__in {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: .84rem; font-weight: 600; color: var(--grau-text); text-decoration: none;
}
.person__in svg { width: 15px; height: 15px; flex: 0 0 15px; }
.person__in:hover { color: var(--rot); }
.section--dark .person__in { color: rgba(255,255,255,.7); }
.section--dark .person__in:hover { color: var(--weiss); }

/* LinkedIn-Hinweis im Haltungs-Abschnitt – eigenständiger Block mit Nutzenversprechen */
.in-block {
  display: flex; gap: var(--s3); align-items: flex-start;
  border-left: 3px solid var(--rot); padding: var(--s3) 0 var(--s3) var(--s3);
  margin-bottom: var(--s3);
}
.in-block__icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--rot); color: var(--weiss); display: grid; place-items: center;
}
.in-block__icon svg { width: 22px; height: 22px; }
.in-block p { margin: 0 0 10px; font-size: .96rem; }
.in-block a { font-weight: 700; color: var(--rot); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; }
.in-block a:hover { text-decoration: underline; }
.section--dark .in-block { border-left-color: var(--weiss); }
.section--dark .in-block a { color: var(--weiss); }
.section--dark .in-block__icon { background: var(--weiss); color: var(--blau); }

.kontaktperson {
  display: grid; grid-template-columns: 170px 1fr; gap: var(--s4);
  align-items: center; background: var(--grau-flaeche);
  border-radius: var(--r-karte); padding: var(--s4);
}
.kontaktperson > .foto { border-radius: var(--r-bild); }
.section--grau .kontaktperson { background: var(--weiss); }
.section--dark .kontaktperson { background: rgba(255,255,255,.05); }

/* --- 12. Stellen -------------------------------------------------------- */
/* Stellenkarte seit 26.10.2026: grau gefüllt, oben rechts ein runder Pfeil, der
   beim Zeigen rot wird und sich dreht. Der Pfeil ist ein ::after, damit die
   generierten Seiten (build.mjs) kein neues Markup brauchen. */
.stelle {
  position: relative; display: block; text-decoration: none; background: var(--grau-flaeche);
  border: 0; border-radius: var(--r-karte);
  padding: var(--s3); transition: transform .14s, box-shadow .16s;
}
.stelle::after {
  content: ""; position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--weiss) var(--pfeil-blau) center / 18px no-repeat;
  transition: transform .2s ease, background-color .2s ease;
}
.stelle:hover { transform: translateY(-3px); box-shadow: var(--shadow-hoch); }
.stelle:hover::after { background-color: var(--rot); background-image: var(--pfeil-weiss); transform: rotate(45deg); }
.stelle__tag {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--weiss); background: var(--rot);
  padding: 5px 12px; border-radius: 999px; margin: 0 52px var(--s2) 0;
}
.stelle__titel { font-weight: 700; font-size: 1.14rem; color: var(--blau); letter-spacing: -.02em; margin-bottom: 6px; }
.stelle__meta { font-size: .88rem; color: var(--grau-text); }
.stelle__geld { font-weight: 800; color: var(--rot); }
/* Artikelkarte im Wissen-Hub: dieselbe Karte wie die Stellenkarte,
   ergänzt um einen Teaser zwischen Titel und Metazeile. */
.stelle__teaser { font-size: .95rem; line-height: 1.55; margin: 0 0 10px; }

/* Ansprechpartner-Zeile in der Stellenkarte: Gesicht schon in der Liste,
   nicht erst auf der Detailseite (CI-Manual 1.8 – Angst wegnehmen). */
.stelle__wer {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid rgba(53,62,78,.1);
  font-size: .88rem; color: var(--grau-text);
}
.stelle__wer .foto { flex: 0 0 36px; width: 36px; height: 36px; min-height: 0; border-radius: 50%; }
.stelle__wer .foto > span { display: none; }        /* Platzhaltertext ist hier zu klein */

/* Filterleiste der Stellenbörse, seit 26.10.2026 auf einer grauen Karte */
.filter {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
  padding: var(--s3); border-radius: var(--r-karte); background: var(--grau-flaeche);
}
.filter__stand {
  margin: var(--s4) 0 var(--s3); font-weight: 700; color: var(--blau);
}
.filter__leer { display: none; }
.filter__leer.is-sichtbar { display: block; }

/* --- 13. Stimmen -------------------------------------------------------- */
.stimme { background: var(--grau-flaeche); border: 0; border-radius: var(--r-karte); padding: var(--s4); }
.sterne { color: var(--rot); letter-spacing: 3px; font-size: 1.05rem; margin-bottom: var(--s2); }
.stimme blockquote { margin: 0 0 var(--s3); font-size: .98rem; color: var(--blau-600); line-height: 1.6; }
.stimme figcaption { font-size: .85rem; font-weight: 700; color: var(--blau); }
.stimme figcaption span { font-weight: 400; color: var(--grau-text); }
/* Quelle sichtbar machen (seit 08.10.2026): Google-„G" oben rechts in jeder
   Karte, über den Karten die Google-Wortmarke mit Gesamtwertung. Ein Zitat
   ohne erkennbare Quelle liest sich wie Eigenlob. */
.stimme__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.stimme__kopf .sterne { margin: 0; }
.stimme__quelle { width: 22px; height: 22px; flex: 0 0 22px; }
.google-schnitt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: var(--s2) 0 0; font-size: .95rem; }
.google-schnitt img { height: 24px; width: auto; }
/* In zentrierten Köpfen als weiße Pille (seit 26.10.2026) */
.head--center .google-schnitt {
  display: inline-flex; justify-content: center; padding: 10px 20px; border-radius: 999px;
  background: var(--weiss); box-shadow: 0 6px 20px rgba(53,62,78,.08);
}
/* Stimmen-Wand (Startseite, seit 08.10.2026): Zitate sehr unterschiedlicher
   Länge in Spalten statt Raster. Im Raster würde jede Reihe so hoch wie ihr
   längstes Zitat, unter den kurzen bliebe weiße Fläche stehen. */
.stimmen-wand { columns: 3; column-gap: var(--s3); margin-bottom: calc(-1 * var(--s3)); }
.stimmen-wand .stimme { break-inside: avoid; margin: 0 0 var(--s3); }
@media (max-width: 1000px) { .stimmen-wand { columns: 2; } }
@media (max-width: 560px)  { .stimmen-wand { columns: 1; } }
/* Mit stimmen.js (seit 15.10.2026): eigene Spalten, angeschnitten mit Auslauf, Knopf
   für weitere. Der Verlauf endet in der Sektionsfarbe (--stimmen-grund), CI-Manual 4.5. */
.stimmen { --stimmen-grund: var(--grau-flaeche); }
.stimmen-wand--js { columns: auto; display: flex; align-items: flex-start; gap: var(--s3);
  margin-bottom: 0; overflow: hidden; position: relative; }
.stimmen-wand__spalte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.stimmen-wand--js .stimme { margin: 0; }
.stimmen.ist-gekuerzt .stimmen-wand::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(246, 247, 248, 0), var(--stimmen-grund) 80%);
}
.stimmen__mehr-zeile { text-align: center; margin: var(--s3) 0 0; max-width: none; }

/* --- 13b. Logo-Karten (seit 26.10.2026) -------------------------------- */
/* Großes weißes Logofeld mit viel Weißraum, daneben (quer) oder darüber (--hoch)
   Titel und Text. Ersetzt die kleinen Logo-Kacheln auf den Netzwerk- und
   Belegsektionen, die bei unterschiedlich langen Texten ungleich wirkten. Im
   Logofeld kann statt eines Logos auch eine Zahl stehen (.logo-karte__zahl).
   Logos brauchen width/height am <img> (SH.svg hat nur eine viewBox). */
.logo-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
/* Vier pro Reihe, eine unvollständige letzte Reihe steht mittig (z. B. sieben Belege). */
.logo-raster--vier { display: flex; flex-wrap: wrap; justify-content: center; }
.logo-raster--vier > * { flex: 0 1 calc((100% - 3 * var(--s3)) / 4); }
.logo-karte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s4); align-items: center;
  padding: var(--s3); border-radius: var(--r-karte); background: var(--grau-flaeche);
}
.logo-karte--hoch { grid-template-columns: 1fr; align-items: start; align-content: start; gap: var(--s3); }
.logo-karte--hoch .logo-karte__marke { align-self: start; }
/* Feste Höhe statt Streckung: Bei langen Texten wurde das Logofeld sonst ein
   hoher, schmaler Streifen. */
.logo-karte__marke {
  display: grid; place-items: center; align-self: center; height: 190px;
  padding: var(--s4) var(--s3); border-radius: var(--r-bild); background: var(--weiss);
}
.logo-karte--hoch .logo-karte__marke { height: 150px; }
.logo-karte__marke img { width: 100%; max-width: 85%; height: auto; max-height: 84px; object-fit: contain; }
.logo-karte__marke img.logo-karte__signet { max-height: 84px; max-width: 84px; }
.logo-karte__zahl {
  font-weight: 900; font-size: clamp(2.4rem, 4vw, 3.2rem); letter-spacing: -.04em; line-height: 1; color: var(--rot);
}
.logo-karte__t { font-family: var(--ff-head); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: var(--blau); margin: 0 0 8px; }
.logo-karte__s { font-size: .95rem; margin: 0; }
.section--grau .logo-karte { background: var(--weiss); }
.section--grau .logo-karte__marke { box-shadow: inset 0 0 0 1px var(--grau-linie); }
.section--dark .logo-karte { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.section--dark .logo-karte__t { color: var(--weiss); }
.section--dark .logo-karte__s { color: rgba(255,255,255,.8); }
.section--dark .logo-karte__s strong { color: var(--weiss); }
@media (max-width: 1000px) { .logo-raster--vier > * { flex-basis: calc((100% - var(--s3)) / 2); } }
/* Unter 1100 px wäre die Textspalte neben dem Logofeld zu schmal: eine Karte pro Zeile. */
@media (max-width: 1100px) { .logo-raster { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .logo-raster--vier > * { flex-basis: 100%; }
  .logo-karte { grid-template-columns: 1fr; gap: var(--s3); }
  .logo-karte__marke { height: 140px; }
}

/* --- 14. Siegel --------------------------------------------------------- */
.siegel { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.siegel__item {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4) var(--s3); border: 0; border-radius: var(--r-karte); background: var(--grau-flaeche);
}
.siegel__icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--rot); display: grid; place-items: center;
  font-weight: 900; color: var(--weiss); font-size: .9rem;
}
/* Logo-Variante: echte Partner- und Siegellogos statt Textkürzel.
   Weiße Fläche, weil die Logos ihre eigenen Farben mitbringen und auf
   Dunkelblau oder Rot nicht lesbar wären. Eckig statt rund, damit breite
   Wortmarken nicht beschnitten wirken. */
.siegel__icon--logo {
  flex: 0 0 68px; width: 68px; height: 68px;
  background: var(--weiss); border-radius: var(--r); padding: 9px;
}
.siegel__icon--logo img { width: 100%; height: 100%; object-fit: contain; }
/* Marken-Variante (Startseite, seit 08.10.2026): rundes Icon wie die
   Zahlen-Icons, darin nur das Bildzeichen – Google-„G", GVP-Signet.
   Breite Wortmarken wären in 44 px unlesbar, dafür gibt es --logo. */
.siegel__icon--marke {
  background: var(--weiss); border: 1px solid var(--grau-linie); padding: 7px;
}
.siegel__icon--marke img { width: 100%; height: 100%; object-fit: contain; }
.siegel__t { font-weight: 700; color: var(--blau); font-size: 1rem; line-height: 1.25; margin-bottom: 4px; }
.siegel__s { font-size: .85rem; margin: 0; }
.section--dark .siegel__item { border-color: rgba(255,255,255,.16); }
.section--dark .siegel__t { color: var(--weiss); }

/* --- 15. Prozess -------------------------------------------------------- */
/* Seit 26.10.2026 jeder Schritt als graue Karte statt Linienliste (auf Grau weiß). */
.prozess { counter-reset: schritt; display: grid; gap: 12px; }
.prozess__s {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); align-items: start;
  padding: var(--s3); border-radius: var(--r-karte); background: var(--grau-flaeche);
}
.section--grau .prozess__s { background: var(--weiss); }
.prozess__n {
  counter-increment: schritt; width: 56px; height: 56px; border-radius: 50%;
  background: var(--rot); color: var(--weiss); display: grid; place-items: center;
  font-weight: 900; font-size: 1.35rem;
}
.prozess__n::before { content: counter(schritt); }
.prozess__t { font-weight: 700; color: var(--blau); font-size: 1.12rem; margin-bottom: 4px; }
.prozess__zeit {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rot); margin-left: 10px;
}
.prozess__d { font-size: .97rem; margin: 0; }
.section--dark .prozess__s { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.section--dark .prozess__t { color: var(--weiss); }
.section--dark .prozess__zeit { color: rgba(255,255,255,.75); }

/* --- 16. Vergleichstabelle --------------------------------------------- */
/* Seit 26.10.2026: Die eigene Spalte ist eine weiße Säule mit rotem Haken, die
   andere Spalte steht zurückgenommen daneben. Vorher rot getönte Zellen, auf
   Dunkelblau ein trübes Weinrot. Die Tabelle bleibt eine <table>, damit
   Screenreader Zeilen und Spalten zuordnen können. */
.vgl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .97rem; }
.vgl th, .vgl td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--grau-linie); }
.vgl thead th { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-text); font-weight: 800; border-bottom: 0; }
.vgl tbody th { font-weight: 700; color: var(--blau); width: 24%; }
.vgl td:last-child, .vgl thead th:last-child { background: var(--weiss); color: var(--blau); }
.vgl thead th:last-child { border-radius: var(--r-karte) var(--r-karte) 0 0; color: var(--rot); padding-top: 22px; }
.vgl tbody tr:last-child td:last-child { border-radius: 0 0 var(--r-karte) var(--r-karte); border-bottom: 0; }
.vgl td:last-child {
  font-weight: 600; padding-left: 54px;
  background: var(--weiss) no-repeat 20px 19px / 22px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23CC1517'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.vgl-rahmen { position: relative; }
.vgl-rahmen .vgl { box-shadow: none; }
/* Auf Dunkelblau: Thema weiß, Spalte der Kette zurückgenommen, Linien hell. */
.section--dark .vgl th, .section--dark .vgl td { border-bottom-color: rgba(255,255,255,.14); }
.section--dark .vgl thead th { color: rgba(255,255,255,.7); }
.section--dark .vgl thead th:last-child { color: var(--rot); }
.section--dark .vgl tbody th { color: var(--weiss); }
.section--dark .vgl td { color: rgba(255,255,255,.78); }
.section--dark .vgl td:last-child { color: var(--blau); border-bottom-color: var(--grau-linie); }

/* --- 17. Zeitstrahl ----------------------------------------------------- */
/* Seit 26.10.2026 jede Station als Karte, das Jahr auf einer roten Kachel in Weiß
   (wie die Kennzahlen). Vorher Linie mit Punkten. */
.zeit { display: grid; gap: 12px; }
.zeit__i {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--s3); align-items: start;
  padding: var(--s3); border-radius: var(--r-karte); background: var(--grau-flaeche);
}
.section--grau .zeit__i { background: var(--weiss); }
.zeit__j {
  justify-self: start; padding: 6px 12px; border-radius: 10px;
  font-family: var(--ff); font-weight: 900; font-size: 1.05rem; letter-spacing: -.02em; line-height: 1.3;
  color: var(--weiss); background: var(--rot);
}
.zeit__t { font-weight: 700; color: var(--blau); margin-bottom: 4px; }
.zeit__d { font-size: .96rem; margin: 0; }

/* --- 18. FAQ ------------------------------------------------------------ */
/* Seit 26.10.2026 als einzelne graue Karten mit rundem Plus-Knopf rechts. */
/* minmax(0, 1fr) statt der Vorgabe 1fr (Audit 27.10.2026): Sonst wird die Spalte so breit
   wie die längste Frage und schob „Unternehmen“ bei 320 px um 22 px über den Rand. */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.faq details { border-radius: 16px; background: var(--grau-flaeche); }
.faq summary {
  cursor: pointer; padding: 20px 72px 20px var(--s3); position: relative;
  font-weight: 700; color: var(--blau); list-style: none; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--weiss); font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--rot);
}
.section--grau .faq summary::after { background: var(--grau-flaeche); }
.faq details[open] summary::after { content: "–"; background: var(--rot); color: var(--weiss); }
.faq summary:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; border-radius: 16px; }
.faq details > div { padding: 0 var(--s3) var(--s3); }
.faq details > div p:last-child { margin-bottom: 0; }

/* --- 19. Formular ------------------------------------------------------- */
/* min-width: 0 ist kein Feinschliff: Grid-Elemente schrumpfen sonst nicht unter
   ihre Inhaltsbreite. Datei-Feld (378 px) und Auswahlliste mit langen Optionen
   drückten Formulare auf dem Telefon über den Rand – seitliches Scrollen auf
   Startseite, Bewerben und Intern arbeiten. Behoben 05.10.2026. */
.form { display: grid; gap: var(--s3); max-width: 540px; min-width: 0; }
.split > *, .grid > *, .siegel > *, .beweise > * { min-width: 0; }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 700; font-size: .92rem; color: var(--blau); }
.feld input, .feld select, .feld textarea {
  font-family: inherit; font-size: 1rem; padding: 14px 16px;
  border: 2px solid var(--grau-linie); border-radius: 12px;
  background: var(--weiss); color: var(--blau); min-height: 52px;
  min-width: 0; max-width: 100%;
}
.feld input[type="file"] { width: 100%; }
.feld textarea { min-height: 100px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--blau); }
.feld--fehler input { border-color: var(--rot); }
.feld__fehler { font-size: .84rem; font-weight: 700; color: var(--rot); }
.feld__hinweis { font-size: .82rem; color: var(--grau-text); }
.form__fuss { font-size: .82rem; color: var(--grau-text); }
.section--dark .feld label { color: var(--weiss); }
.section--dark .feld input, .section--dark .feld select, .section--dark .feld textarea {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); color: var(--weiss);
}
.section--dark .feld input::placeholder { color: rgba(255,255,255,.45); }
.section--dark .form__fuss { color: rgba(255,255,255,.6); }
/* Formular im roten CTA-Block */
.cta .feld label { color: var(--weiss); }
.cta .feld input, .cta .feld select, .cta .feld textarea {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: var(--weiss);
}
.cta .feld input::placeholder, .cta .feld textarea::placeholder { color: rgba(255,255,255,.55); }
.cta .feld input:focus, .cta .feld select:focus, .cta .feld textarea:focus { border-color: var(--weiss); }
.cta .feld option { color: var(--blau); }
.cta .feld__hinweis, .cta .form__fuss { color: rgba(255,255,255,.75); }
.cta .form__fuss a { color: var(--weiss); }

/* --- 20. CTA-Block ------------------------------------------------------ */
/* Eckform (seit 15.10.2026, CI-Manual 4.5): drei große Ecken, unten rechts eine
   kleine, wie auf der bisherigen Website (55/55/10/55). Das Lichtelement oben links
   (img/red-section-light-element.svg) ist am 26.10.2026 entfallen, die Fläche ist
   wieder einfarbig: Weiß auf Rot 5,69:1. */
.cta {
  background: var(--rot);
  border-radius: var(--r-flaeche); padding: clamp(var(--s4), 5vw, var(--s6));
}
@media (max-width: 560px) {
  :root { --r-flaeche: 32px 32px 8px 32px; }
}
.cta h2 { color: var(--weiss); margin-bottom: var(--s2); }
.cta p, .cta .lead { color: rgba(255,255,255,.9); }
.cta strong { color: var(--weiss); }
.cta a { color: var(--weiss); }
.cta .btn--ghost { color: var(--weiss); border-color: rgba(255,255,255,.65); }
.cta .btn--ghost:hover { background: var(--weiss); color: var(--rot); }
.cta .tel-link { color: var(--weiss); }

/* --- 21. Footer --------------------------------------------------------- */
/* Footer als gerahmte Fläche (seit 26.10.2026) */
.footer {
  margin: var(--rand); border-radius: var(--r-rahmen);
  background: var(--blau-800); color: rgba(255,255,255,.72); padding-block: var(--s6) var(--s4); font-size: .93rem;
}
/* Spaltenköpfe sind h2 (seit 27.10.2026, vorher h4 - nach der letzten h2 im Inhalt
   übersprang das zwei Ebenen). Aussehen unverändert: klein, versal, Bold statt Black. */
.footer .footer__t { color: var(--weiss); font-size: .76rem; font-weight: 700; line-height: 1.1; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s3); }
.footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer a:hover { color: var(--weiss); text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s4); margin-bottom: var(--s5); }
.footer__grid ul li { margin-bottom: 10px; }
.footer__logo { font-weight: 900; font-size: 1.3rem; color: var(--weiss); letter-spacing: -.04em; margin-bottom: var(--s2); }
/* Weißes Logo-SVG auf dunklem Footer. Fehlt die Datei, zeigt der Browser den
   alt-Text – deshalb trägt .footer__logo weiterhin die Textstile. */
.footer__logo img { height: 46px; width: auto; }
.footer__unten {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between;
  font-size: .85rem; color: rgba(255,255,255,.5);
}

/* --- 22. Mobile Aktionsleiste ------------------------------------------ */
.mobilbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--weiss); border-top: 1px solid var(--grau-linie);
  box-shadow: 0 -2px 14px rgba(53,62,78,.1);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.mobilbar a {
  display: grid; place-items: center; gap: 2px; padding: 9px 4px;
  font-size: .74rem; font-weight: 800; text-decoration: none; color: var(--blau);
  border-radius: 14px; min-height: 50px;
}
.mobilbar a.is-primary { background: var(--rot); color: var(--weiss); }
.mobilbar svg { width: 19px; height: 19px; }

/* --- 23. Hilfsklassen --------------------------------------------------- */
.mb0 { margin-bottom: 0 !important; }
/* KI-Vermerk am Bild (gesetzt von bilder.js). Bewusst klein und zurückhaltend,
   aber am Bild selbst: Die Kennzeichnung soll beim Ansehen erkennbar sein. */
.foto.is-bild[data-ki]::after {
  content: attr(data-ki); position: absolute; right: 8px; bottom: 8px; z-index: 1;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; line-height: 1;
  color: #fff; background: rgba(20, 24, 32, .5); padding: 4px 6px; border-radius: 4px;
  pointer-events: none;
}

/* Formulare: Rueckmeldung nach dem Absenden und Honigtopf gegen Bots. */
.form__meldung { margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r);
  font-weight: 700; font-size: .95rem; }
.form__meldung--ok { background: #E7F4EA; color: #1E5B2C; }
.form__meldung--fehler { background: var(--rot-hauch); color: #8C0F10; }
/* Auf der roten .cta-Fläche (dort stehen alle vier Formulare): Die Meldung ist
   ein <p>, und `.cta p` (0,1,1) schlägt `.form__meldung--ok` (0,1,0). Ergebnis
   war Weiß auf Hellgrün, unlesbar (gemeldet 08.10.2026). Deshalb hier mit
   höherer Spezifität und weißer Fläche: Die Fehlerfläche aus 8 % Rot wäre auf
   Rot ohnehin unsichtbar. Der farbige Rand zeigt Erfolg oder Fehler auch ohne
   Lesen. Kontrast auf Weiß: Grün 8,1:1, Dunkelrot 9,6:1 (vorher 1,13:1). */
.cta .form__meldung { background: var(--weiss); border-left: 6px solid; }
.cta .form__meldung.form__meldung--ok { color: #1E5B2C; border-left-color: #2E8B45; }
.cta .form__meldung.form__meldung--fehler { color: #8C0F10; border-left-color: #8C0F10; }
.form [aria-invalid="true"] { border-color: var(--rot); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Unsichtbar, aber die Kontrastprüfung liest es mit – auf roter .cta-Fläche
   sonst grau auf rot gemeldet. Weiß hält die Prüfung sauber. */
.cta .hp label { color: var(--weiss); }

/* Metazeile der Wissen-Artikel: Datum, Lesezeit, Herausgeber. */
.artikel__meta { font-size: .86rem; color: var(--grau-text); margin: 0 0 var(--s4); }
.mt3 { margin-top: var(--s3); }
.mt4 { margin-top: var(--s4); }   /* war in HTML schon im Einsatz, aber nie definiert */
.mt5 { margin-top: var(--s5); }
.center { text-align: center; }
/* In zentrierten Blöcken müssen die Absätze auch als Box zentriert werden.
   Sonst greift text-align:center nur innerhalb der 68ch-Box aus der
   Typografie-Regel – und die klebt mit margin:0 am linken Rand, wodurch der
   Text sichtbar links der Mitte steht. */
/* `p.center` gehoert dazu: text-align zentriert nur die Zeilen INNERHALB des
   Absatzes. Der Absatz selbst ist in der Lesebreite begrenzt und bliebe sonst
   linksbuendig stehen - der Text stand dadurch sichtbar links der Mitte. */
.cta.center p, .head--center p, p.center { margin-inline: auto; }
/* Seit 26.10.2026 als graue Karte mit rotem Punkt statt roter Kante links. */
.hinweis {
  position: relative; background: var(--grau-flaeche);
  padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 14px); font-size: .93rem; border-radius: var(--r-karte);
}
.hinweis::before {
  content: ""; position: absolute; left: var(--s3); top: calc(var(--s3) + .55em);
  width: 8px; height: 8px; border-radius: 50%; background: var(--rot);
}
.hinweis p:last-child { margin-bottom: 0; }
.redaktion {
  border: 2px dashed var(--rot); background: var(--rot-hauch);
  padding: var(--s3); border-radius: var(--r); font-size: .86rem; color: var(--blau);
}
/* Nur das direkte Kind ist die Kastenueberschrift. Ohne den `>` traf die
   Regel jedes <strong> im Kasten: Hervorhebungen mitten im Satz wurden zu
   roten Grossbuchstaben auf eigener Zeile, und der Satz brach auseinander
   („ZWEI PUNKTE SIND ZU KLAEREN“ / „, beide in Abschnitt 10 …“).
   Alle 19 Kaesten im Prototyp tragen ihre Ueberschrift als direktes Kind. */
.redaktion > strong { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 6px; color: var(--rot); }
.redaktion p:last-child { margin-bottom: 0; }
.section--dark .redaktion { background: rgba(204,21,23,.22); color: var(--weiss); }
.section--dark .redaktion > strong { color: var(--weiss); }
/* Aufzählungen im Vertragstext der AGB. Die Buchstaben („a)", „b)" …) stehen
   im Text, nicht im Listenmarker – so kommt der Punkt aus dem Vertragstext
   genau so heraus, wie er geliefert wurde. Der hängende Einzug sorgt dafür,
   dass mehrzeilige Einträge unter dem ersten Wort ausgerichtet bleiben und
   nicht unter dem Buchstaben. */
.liste-vertrag {
  list-style: none; padding-left: 1.7em;
  margin: 0 0 var(--s3); color: var(--grau-text);
}
.liste-vertrag li {
  margin-bottom: var(--s2); line-height: 1.7;
  text-indent: -1.7em;
}
.liste-vertrag li:last-child { margin-bottom: 0; }

.liste-check li { position: relative; padding-left: 30px; margin-bottom: var(--s2); }
.liste-check li::before {
  content: "✓"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
  background: var(--rot); color: var(--weiss); border-radius: 50%;
  display: grid; place-items: center; font-size: .68rem; font-weight: 900;
}

/* --- 24. Stellen aus zvoove -------------------------------------------
   Die Stellenseiten werden aus der zvoove-Recruit-API erzeugt
   (../zvoove-stellen/build.mjs). Alles, was dort an Markup entsteht,
   benutzt die Klassen dieses Stylesheets. Nur drei Dinge kommen hinzu,
   weil es sie vorher nicht gab.                                        */

/* Gehalt, das der Betrieb nicht freigegeben hat. Grau statt Rot: Die rote
   Auszeichnung gehört der echten Zahl. Eine graue Zeile sagt ehrlich, dass
   hier eine Angabe fehlt, statt die Lücke zu kaschieren. */
.stelle__geld--offen { color: var(--grau-text); font-weight: 700; }

/* Eckdaten einer Stelle (Ort, Vertragsart, Beginn …). Bewusst keine
   .beweise-Kacheln: Das sind Fakten, keine Kennzahlen, und sie stehen in
   wechselnder Anzahl – zwischen zwei und neun. */
/* Stellentitel sind Komposita – "Zerspanungsmechaniker", "Personalsach-
   bearbeiter" – und damit länger als jede handgeschriebene H1. Weiche
   Trennzeichen von Hand (siehe ../README.md) scheiden aus, weil die Titel aus
   zvoove kommen; automatische Trennung übernimmt das für lang="de". */
/* Seit 20.10.2026: Stellentitel kleiner als die Hub-H1 und in einer etwas breiteren
   Karte, ohne 18-Zeichen-Grenze und ohne automatische Trennung. Vorher brach fast
   jeder Titel mitten im Wort um („Zerspanungs-mechaniker“). Getrennt wird nur noch
   auf dem Telefon, wo ein langes Kompositum sonst über den Rand liefe. */
.hero--stelle .hero__karte { max-width: 760px; }
/* Die breitere Textspalte reicht weiter nach rechts als die Abschattung der
   übrigen Seiten: Die zweite Kennzahl stand im Auslauf (3,9:1, gemessen
   26.10.2026 mit hero-kontrast.js). Deshalb bleibt es hier 140 px länger dunkel. */
@media (min-width: 861px) {
  .hero--stelle::after {
    background:
      linear-gradient(90deg,
        rgba(43,51,63,.94) 0,
        rgba(43,51,63,.86) max(700px, calc(50% + 120px)),
        rgba(43,51,63,.25) max(940px, calc(50% + 360px)),
        rgba(43,51,63,0)   max(1120px, calc(50% + 540px))),
      linear-gradient(0deg, rgba(43,51,63,.8) 0, rgba(43,51,63,0) 32%);
  }
}
.hero--stelle h1.h1--stelle {
  max-width: none; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.12;
  hyphens: manual; overflow-wrap: normal;
}
@media (max-width: 560px) {
  .hero--stelle h1.h1--stelle { font-size: 1.7rem; hyphens: auto; overflow-wrap: break-word; }
}

.eckdaten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s2); margin: 0;
}
.eckdaten > div {
  border: 0; border-radius: var(--r-karte); padding: var(--s3); background: var(--grau-flaeche);
}
.eckdaten dt {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grau-text); margin-bottom: 4px;
}
.eckdaten dd { margin: 0; font-family: var(--ff-head); font-weight: 700; color: var(--blau); }

/* Redaktionstext aus zvoove. Der Generator wirft die Editor-Formatierungen
   raus (font-family, font-size, color) – übrig bleiben Absätze, Listen,
   Fettung, Links. Die sollen die Typografie dieser Website übernehmen.
   Die Listenpunkte müssen hier zurückgeholt werden, weil global
   `ul { list-style: none }` gilt: Ohne das stehen Aufgaben und Profil als
   Textblock ohne jede Gliederung – genau das, was sie nicht sein sollen. */
.rte > :first-child { margin-top: 0; }
.rte > :last-child  { margin-bottom: 0; }
.rte ul { list-style: disc; padding-left: 1.3em; margin: 0 0 var(--s3); }
.rte ol { list-style: decimal; padding-left: 1.3em; margin: 0 0 var(--s3); }
.rte li { margin-bottom: 8px; max-width: 68ch; }
.rte li::marker { color: var(--rot); }
.rte h1, .rte h2, .rte h3, .rte h4 { font-size: 1.12rem; margin: var(--s3) 0 var(--s1); }
.rte a { color: var(--rot); }
.rte img { max-width: 100%; height: auto; border-radius: var(--r); margin-bottom: var(--s2); }
.rte pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0 0 var(--s3); }
.rte table {
  width: 100%; max-width: 100%; border-collapse: collapse;
  margin-bottom: var(--s3); display: block; overflow-x: auto;
}
.rte td, .rte th { border: 1px solid var(--grau-linie); padding: 8px 10px; text-align: left; }

/* --- 24b. Erklärvideos --------------------------------------------------
   Stumme 4-Sekunden-Schleife als Vorschau, Klick spielt das ganze Video an
   derselben Stelle. Geladen wird erst beim Heranscrollen (video.js), die
   Fläche ist über aspect-ratio vorab reserviert – ohne das springt die
   Seite, sobald das Standbild eintrifft (schlechter CLS-Wert bei Google).
   Der Abspielknopf sitzt unten links statt mittig: Die Schleife besteht
   überwiegend aus mittig gesetzten Textzeilen, ein zentraler Kreis würde
   genau die verdecken. Rote Fläche = weiße Schrift, wie überall.
   ------------------------------------------------------------------------ */
.video-teaser__buehne {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 0; border-radius: var(--r-karte); overflow: hidden;
  background: var(--blau); box-shadow: 0 20px 50px rgba(53,62,78,.18); cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.video-teaser__buehne video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: var(--blau);
}
.video-teaser__buehne.is-voll { cursor: auto; }
.video-teaser__buehne.is-voll video { object-fit: contain; }
.video-teaser__buehne:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.section--dark .video-teaser__buehne:focus-visible { outline-color: var(--weiss); }
.video-teaser__play {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 10px; border-radius: 999px;
  background: var(--rot); color: var(--weiss);
  font-weight: 800; font-size: .95rem; line-height: 1.1;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  transition: background .2s, transform .2s;
}
.video-teaser__play svg { width: 30px; height: 30px; flex: none; }
.video-teaser__play small { display: block; font-weight: 600; font-size: .75rem; opacity: .9; }
.video-teaser__buehne:hover .video-teaser__play { background: var(--rot-dunkel); transform: translateY(-2px); }
.video-teaser figcaption { margin-top: var(--s2); font-size: .9rem; color: var(--grau-text); }

/* --- 24b. Kontakt ------------------------------------------------------ */
/* Vier Kontaktwege auf kontakt.html. Steht im .grid-4 und bricht mit ihm um. */
.weg {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--grau-flaeche); border: 0;
  border-radius: var(--r-karte); padding: var(--s4) var(--s3);
}
.weg__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--rot); color: var(--weiss); margin-bottom: var(--s2);
}
.weg__icon svg { width: 24px; height: 24px; }
.weg__t { font-size: 1.2rem; margin-bottom: 6px; }
.weg__wert, .weg__adresse {
  font-weight: 800; color: var(--rot); font-size: 1.04rem; line-height: 1.35;
  text-decoration: none; overflow-wrap: anywhere; margin: 0;
}
.weg__adresse { color: var(--blau); }
a.weg__wert:hover { text-decoration: underline; }
.weg p:not(.weg__adresse) { font-size: .93rem; margin: var(--s2) 0 0; }

/* Firmenangaben als Definitionsliste: Bezeichnung links, Wert rechts */
.daten {
  display: grid; grid-template-columns: max-content 1fr; gap: 10px var(--s4);
  margin: 0; align-self: center;
}
.daten dt { font-weight: 800; color: var(--blau); }
.daten dd { margin: 0; overflow-wrap: anywhere; }

/* --- 24c. 404 ---------------------------------------------------------- */
.fehler { background: var(--grau-flaeche); margin-inline: var(--rand); border-radius: var(--r-rahmen); }
.fehler__in {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s5); align-items: center;
}
.fehler__text h1 { max-width: 18ch; }
/* Dekorative Zahl. aria-hidden im HTML; die Information steht im Kicker. */
.fehler__zahl {
  margin: 0; text-align: center; font-family: var(--ff-head); font-weight: 900;
  font-size: clamp(6rem, 16vw, 13rem); line-height: .9; letter-spacing: -.04em;
  color: var(--blau); user-select: none;
}
.fehler__zahl span { color: var(--rot); }
.fehler__suche { margin: var(--s4) 0 var(--s3); max-width: 560px; }
.fehler__suche label { display: block; font-weight: 800; color: var(--blau); margin-bottom: var(--s1); }
.fehler__feld { display: flex; gap: var(--s1); }
.fehler__feld input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--s2);
  font: inherit; color: var(--blau); background: var(--weiss);
  border: 2px solid var(--grau-linie); border-radius: 999px; padding-inline: 20px;
}
.fehler__feld input:focus { outline: none; border-color: var(--blau); }
.fehler__feld .btn { flex: none; }
.fehler__nummern { list-style: none; padding: 0; margin: 0 0 var(--s2); }
.fehler__nummern li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 4px var(--s2); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.3);
}
.fehler__nummern span { font-size: .95rem; color: var(--weiss); }

/* Sprungziele: Übersicht aller Seiten in drei Spalten */
.sprungziele__t { font-size: 1.1rem; margin-bottom: var(--s2); }
.sprung {
  display: block; text-decoration: none; padding: 12px var(--s5) 12px var(--s3);
  border: 0; background: var(--grau-flaeche); border-radius: 16px; margin-bottom: 10px;
  position: relative; transition: background-color .16s, transform .14s;
}
.sprung::after {
  content: "\2192"; position: absolute; right: var(--s2); top: 50%;
  transform: translateY(-50%); color: var(--rot); font-weight: 900;
}
.sprung:hover { transform: translateX(3px); }
.sprung strong { display: block; color: var(--blau); }
.sprung span { display: block; font-size: .88rem; color: var(--grau-text); line-height: 1.4; }

/* --- 24d. Bausteine der Formensprache (seit 26.10.2026) -----------------
   Zuerst als Entwurf in index-v2.html/v2.css gebaut, dann für die ganze Website
   freigegeben (CI-Manual 4.5). */

/* Kartenreihe: drei Karten, die mittlere rot mit Foto im N-Ausschnitt.
   Seitliche Karten: Pille und Pfeil oben, Titel, Text, Foto unten. Die ganze
   Karte ist ein Link (<a class="karte">). Die rote Karte ist ein <article> mit
   eigener Überschrift; ihr Link (.karte__link) deckt per ::after die Fläche ab. */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.karte {
  position: relative; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; min-height: 480px;
  padding: var(--s3); border-radius: var(--r-karte); overflow: hidden;
  background: var(--grau-flaeche); color: var(--grau-text); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.karte:hover, .karte:has(.karte__link:hover) { transform: translateY(-4px); box-shadow: var(--shadow-hoch); }
a.karte:hover .pfeil, .karte__link:hover .pfeil { transform: rotate(45deg); background: var(--rot); color: var(--weiss); }
a.karte:focus-visible, .karte__link:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.karte__kopf .kicker { margin: 0; }
.karte__t {
  display: block; margin: 0; font-weight: 900;
  font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.15; letter-spacing: -.015em; color: var(--blau);
}
.karte__s { display: block; font-size: .95rem; line-height: 1.5; color: var(--blau-600); }
.karte__bild { display: grid; margin-top: auto; aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--r-bild); }
.section--grau .karte:not(.karte--rot) { background: var(--weiss); }
/* Logo statt Foto unten in der Karte (z. B. Google und kununu auf „Auszeichnungen“) */
.karte__bild--logo {
  display: grid; place-items: center; margin-top: auto; aspect-ratio: 16 / 9;
  padding: var(--s4); border-radius: var(--r-bild); background: var(--weiss);
}
.karte__bild--logo img { width: auto; max-width: 70%; height: auto; max-height: 72px; object-fit: contain; }
.section--grau .karte__bild--logo { box-shadow: inset 0 0 0 1px var(--grau-linie); }
/* Karte ohne Link (z. B. Branchen auf „Unternehmen“): kein Mindestmaß, Foto unten */
.karte--still { min-height: 0; }
.karte--still h3 { margin: 0; }
/* Porträt, das den Rest der Karte füllt, statt unten mit Lücke darüber zu stehen
   (Jamie und Lena neben der roten Karte auf „So läuft das“ und „Bewerben“, seit 26.10.2026) */
.karte__bild--fuellen { flex: 1 1 auto; aspect-ratio: auto; min-height: 280px; }

.karte--rot { background: var(--rot); color: var(--weiss); padding-top: 0; cursor: pointer; }
.karte--rot .karte__t { color: var(--weiss); max-width: 16ch; padding-right: 56px; }
.karte--rot .karte__kopf { margin-top: auto; }
.karte--rot .kicker { background: transparent; border-color: rgba(255,255,255,.55); color: var(--weiss); }
.karte--rot .kicker::before { background: var(--weiss); }
.karte--rot .pfeil { color: var(--rot); }
.karte--rot .karte__link:hover .pfeil { background: var(--weiss); color: var(--rot); }
/* Inhalte auf der roten Karte: Text weiß, Kreise weiß mit roter Ziffer bzw. Haken */
.karte--rot p, .karte--rot li { color: rgba(255,255,255,.92); }
.karte--rot strong { color: var(--weiss); }
.karte--rot a:not(.karte__link) { color: var(--weiss); }
.karte--rot .card__num, .karte--rot .liste-check li::before { background: var(--weiss); color: var(--rot); }
.karte--rot:not(:has(.karte__link)) { cursor: auto; }
.karte--rot:not(:has(.karte__link)) .karte__t { padding-right: 0; }
/* Datum und Lesezeit in Artikelkarten (Wissen) */
.karte__meta { font-size: .82rem; color: var(--grau-text); }
.karte--rot .karte__meta { color: rgba(255,255,255,.92); }   /* .85 läge auf Rot unter 4,5:1 */
/* Telefonnummer in Personenkarten der Kartenreihe */
.karte .tel-link { font-size: .98rem; }
/* Karte mit Ziffer statt Pille (z. B. die drei Wege auf „Unternehmen“) */
.karte .card__num { margin: 0; }
.karte .liste-check { margin: 0; font-size: .95rem; }
.karte .liste-check li { margin-bottom: 8px; }
/* Foto im N-Ausschnitt oben in der roten Karte. Die Maske ist breiter als die
   Karte und unten verankert, wie die Zacken des Sterns in der Referenz. */
.cutout {
  position: relative; display: block; flex: none; margin: 0 calc(-1 * var(--s3)) var(--s1);
  aspect-ratio: 1 / .9;
  -webkit-mask: url("img/n-cutout.svg") no-repeat 50% 100% / 124% auto;
          mask: url("img/n-cutout.svg") no-repeat 50% 100% / 124% auto;
}
/* Welcher Teil des Fotos im Bogen steht, regelt --cut (Telefon: --cut-m) am img.
   Die Gesichter gehören in den Bogen oder ins N, nicht in sein rotes Inneres.
   Getestet 26.10.2026: team-trio 50% 18% (Standard), Jamie am Telefon 50% 58%
   (Telefon 50% 55%). Das Duo Oliver/Kay braucht mehr Zoom: .cutout__zoom (img
   145 % hoch, Telefon 152 %, unten verankert). Einzelporträts mit kleinem Gesicht
   (Lena am Schreibtisch) taugen nicht: Das Gesicht ist höher als der Bogen. */
.cutout img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--cut, 50% 18%);
  opacity: 0; transition: opacity .3s ease, transform .6s ease;
}
.cutout img.cutout__zoom { top: auto; height: 145%; object-position: 50% 0; }
.cutout.is-bild img { opacity: 1; }
.karte--rot:hover .cutout img { transform: scale(1.04); }
/* color: Der Linktext ist nur für Screenreader da, die Kontrastprüfung liest ihn
   aber mit und meldet sonst Dunkelblau auf Rot (wie .cta .hp label). */
.karte__link { position: absolute; right: var(--s3); bottom: var(--s3); border-radius: 50%; color: var(--weiss); }
.karte__link::after { content: ""; position: absolute; inset: -2000px; }

/* Großer, zentrierter Satz ohne eigene Überschrift (Startseite, unter dem Trio) */
.statement { max-width: 880px; margin: var(--s7) auto 0; text-align: center; }
.statement p { margin-inline: auto; }
.statement__lead {
  font-family: var(--ff-head); font-weight: 700; color: var(--blau);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.35; letter-spacing: -.01em; max-width: 40ch;
}
.statement .pfeil-knopf { margin-top: var(--s2); }
/* Direkt unter einem zentrierten Kopf (z. B. Purpose auf „Über uns“) */
.statement--direkt { margin-top: 0; }
.statement .hinweis { text-align: left; max-width: 640px; margin: var(--s4) auto 0; }

/* Sprechblasen-Spitze unten links an einer dunkelblauen Fläche, wenn direkt
   darauf die Antwort folgt (CI-Manual 4.5). */
.sprechblase { margin-bottom: 28px; }
.sprechblase::after {
  content: ""; position: absolute; left: clamp(40px, 9%, 120px); bottom: -26px;
  width: 64px; height: 27px; background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Kopfzeile mit Überschrift links und Knopf rechts (z. B. „Alle Stellen ansehen“) */
.kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.kopfzeile > div { max-width: 640px; }

/* Liste mit Trennlinien und rotem Haken im Kreis (auf Dunkelblau) */
.liste-linien { align-self: center; border-top: 1px solid rgba(53,62,78,.12); }
.liste-linien li { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid rgba(53,62,78,.12); }
.liste-linien li::before {
  content: "✓"; flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rot); color: var(--weiss); font-size: .8rem; font-weight: 900;
}
.liste-linien li > span { padding-top: 4px; }
.section--dark .liste-linien, .section--dark .liste-linien li { border-color: rgba(255,255,255,.14); }
/* Gegenliste („Wofür wir nicht die Richtigen sind“ auf „Bei uns arbeiten“): Strich statt Haken,
   ein roter Haken läse sich dort wie ein Pluspunkt */
.liste-linien--minus li::before { content: "–"; background: transparent; border: 1px solid currentColor; color: inherit; font-size: 1rem; }

/* Kicker mittig auf einer feinen Linie */
.trenner { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: var(--grau-linie); }
.trenner .kicker { margin: 0; }
.h2-mitte { margin: 0 auto var(--s5); max-width: 24ch; text-align: center; }

/* Erklärvideo als breites Bild unter einem zentrierten Kopf */
.video-breit { max-width: 1040px; margin: var(--s5) auto 0; }
.video-breit .video-teaser__buehne { border-radius: var(--r-rahmen); }
.video-breit .video-teaser__play { left: 20px; bottom: 20px; padding: 10px 18px 10px 10px; }
.video-breit figcaption { text-align: center; }

/* Foto-CTA: rote .cta-Fläche links (Text und Knöpfe oder ein Formular), Foto
   rechts mit der Telefonnummer auf einer dunklen Pille. Seit 26.10.2026 auf allen
   Seiten am Ende, auf „Bewerben“ auch für das Formular in der Mitte.
   --unterlappt: steht direkt vor dem Footer und ragt 180 px in ihn hinein, dessen
   oberer Teil wird dadurch zum dunklen Band. Der Footer trägt dann
   .footer--unterlappt und rückt seinen Inhalt entsprechend nach unten.
   Formularfelder mit .feld--halb stehen zu zweit nebeneinander. */
.kontakt-cta { position: relative; z-index: 2; padding-bottom: clamp(var(--s6), 9vw, var(--s8)); }
:is(.section--dark, .section--grau) + .kontakt-cta { padding-top: clamp(var(--s5), 6vw, var(--s7)); }
.kontakt-cta--unterlappt { margin-bottom: -180px; padding-bottom: 0; }
.footer--unterlappt { padding-top: calc(180px + var(--s6)); }
.kontakt-cta__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-auto-rows: minmax(420px, auto); align-items: stretch; }
.kontakt-cta .cta { position: relative; z-index: 1; margin-right: -32px; box-shadow: 0 24px 60px rgba(20,24,32,.22); }
.kontakt-cta .cta .lead { font-size: 1.02rem; margin-bottom: var(--s2); }
.kontakt-cta .cta p { font-size: .95rem; }
.kontakt-cta .form { grid-template-columns: 1fr 1fr; gap: var(--s2); max-width: none; margin-top: var(--s3); }
.kontakt-cta .form > * { grid-column: 1 / -1; }
.kontakt-cta .form > .feld--halb { grid-column: auto; align-self: start; }
.kontakt-cta .cta .btn-row { margin-top: var(--s4); }
.kontakt-cta .form .btn { justify-self: start; }
.kontakt-cta__bild { position: relative; }   /* Mindesthöhe 420 px steht an der Rasterzeile, siehe unten */
.kontakt-cta__bild .foto { position: absolute; inset: 0; min-height: 0; border-radius: 0 var(--r-rahmen) var(--r-rahmen) 0; }
/* Kopf mittig in der freien Fläche (seit 26.10.2026). Frei ist das Foto ohne die
   32 px links unter der roten Karte und ohne die Telefon-Pille unten (gemessen
   111–148 px hoch, gerechnet mit 120). object-position reicht dafür nicht: Wo die
   freie Mitte liegt, hängt von der Höhe der CTA ab (mit Formular oder nur Knöpfen).
   Deshalb rechnet das Bild selbst, mit dem Kasten als Container:
   --b = Bildbreite wie bei cover, --r = Höhe durch Breite des Fotos,
   --fx/--fy = Lage des Gesichts im Foto (0 bis 1), --z = Zoom über cover hinaus,
   damit bei fast quadratischen oder Querformat-Fotos Spielraum zum Verschieben
   bleibt. clamp() hält das Bild deckend, wenn das Gesicht zu nah am Rand liegt.
   Die Mindesthöhe steht als grid-auto-rows am Raster, nicht als min-height am
   Kasten: Kam die Höhe nur aus min-height, rechnete Chrome 100cqh als 0.
   Neues CTA-Foto: Format 2:3 (1000 × 1500) und Gesichtslage unten eintragen. */
.kontakt-cta__bild { container-type: size; --frei-links: 32px; --frei-unten: calc(120px + var(--s3)); }
.kontakt-cta__bild .foto { --r: 1.5; --fx: .5; --fy: .35; --z: 1; }
.kontakt-cta__bild .foto[data-bild="cta-schreibtisch"] { --fx: .48; --fy: .39; }  /* Lena */
.kontakt-cta__bild .foto[data-bild="cta-telefon"]      { --fx: .5;  --fy: .355; } /* Jamie */
.kontakt-cta__bild .foto[data-bild="team-gf-duo"]      { --r: .998;  --fx: .5; --fy: .47; --z: 1.3; }
.kontakt-cta__bild .foto[data-bild="hero-kontakt"]     { --r: .6667; --fx: .6; --fy: .26; --z: 1.3; }
.kontakt-cta__bild .foto img {
  --b: calc(max(100cqw, 100cqh / var(--r)) * var(--z));
  inset: auto; width: var(--b); height: calc(var(--b) * var(--r)); max-width: none;
  left: clamp(100cqw - var(--b), (100cqw + var(--frei-links)) / 2 - var(--fx) * var(--b), 0px);
  top: clamp(100cqh - var(--b) * var(--r), (100cqh - var(--frei-unten)) / 2 - var(--fy) * var(--b) * var(--r), 0px);
}
/* Telefonnummer auf dem Foto: dunkle, halbtransparente Fläche zur Lesbarkeit.
   82 %, gemessen über die Bildpixel (heller Fleck der Bürowand): Nummer 7,2:1,
   Zeiten-Zeile 6,2:1. Bei zuerst gesetzten 72 % kam die Zeile auf 4,2:1. */
.kontakt-cta__anruf {
  position: absolute; left: calc(32px + var(--s3)); right: var(--s3); bottom: var(--s3); z-index: 1;
  display: flex; align-items: center; gap: var(--s2);
  padding: 14px 18px 14px 14px; border-radius: 22px;
  background: rgba(43,51,63,.82); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: rgba(255,255,255,.88);
}
.kontakt-cta__anruf p { color: rgba(255,255,255,.9); }
.kontakt-cta__anruf strong { color: var(--weiss); display: block; }
.kontakt-cta__anruf a { color: var(--weiss); font-weight: 800; font-size: 1.15rem; text-decoration: none; }
.kontakt-cta__anruf a:hover { text-decoration: underline; }
.kontakt-cta__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rot); color: var(--weiss); }
.kontakt-cta__zeiten { margin: 4px 0 0; font-size: .8rem; line-height: 1.45; }

@media (max-width: 1000px) {
  .karte { min-height: 420px; }
}
@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr; }
  .karte { min-height: 0; }
  .karte__bild { aspect-ratio: 16 / 9; }
  .karte__bild--fuellen { flex: none; aspect-ratio: 1; min-height: 0; }
  .karte--rot .cutout { aspect-ratio: 1 / .78; -webkit-mask-size: 100% auto; mask-size: 100% auto; }
  .karte--rot .cutout img { object-position: var(--cut-m, 50% 6%); }   /* Gesichter in den Bogen */
  .karte--rot .cutout img.cutout__zoom { object-position: 50% 0; height: 152%; }
  .statement { margin-top: var(--s6); }
  .kontakt-cta, .kontakt-cta--unterlappt { margin-bottom: 0; padding-bottom: var(--s6); }
  .footer--unterlappt { padding-top: var(--s6); }
  .kontakt-cta__raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }   /* 1fr schob die Stellenseiten bei 320 px um 16 px über den Rand */
  .kontakt-cta .cta { margin-right: 0; }
  .kontakt-cta__bild { min-height: 0; aspect-ratio: 4 / 3; margin-top: var(--s3); --frei-links: 0px; --frei-unten: calc(130px + var(--s2)); }
  .kontakt-cta__bild .foto[data-bild="team-gf-duo"] { --z: 1.5; }   /* schmaler Kasten: mehr Zoom, sonst kein Spielraum */
  .kontakt-cta__bild .foto { border-radius: var(--r-rahmen); }
  .kontakt-cta__anruf { left: var(--s2); right: var(--s2); bottom: var(--s2); }
}
@media (max-width: 560px) {
  .statement { text-align: left; }
  .kontakt-cta .form { grid-template-columns: 1fr; }
  .kontakt-cta .form > .feld--halb { grid-column: 1 / -1; }
  .kontakt-cta__bild { aspect-ratio: 4 / 5; }
}

/* --- 25. Responsive ----------------------------------------------------- */
@media (max-width: 1000px) {
  .grid-4, .beweise { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .siegel { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
/* Navigation: fünf Punkte, Welt-Umschalter und CTA brauchen rund 1000 px.
   Darunter Burger-Menü – unabhängig von den übrigen Tablet-Regeln bei 860 px,
   damit zwischen 861 und 1000 px nichts in zwei Zeilen umbricht. */
@media (max-width: 1180px) {
  .nav { gap: var(--s2); }
  .nav a { white-space: nowrap; }
  .nav .btn { padding-inline: var(--s2); }
}
@media (max-width: 1000px) {
  .nav { display: none; }
  .burger { display: block; }
  /* Aufgeklapptes Menü als eigene Karte unter der Leiste */
  .nav.is-offen {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--weiss); border-radius: 24px; box-shadow: 0 16px 40px rgba(20,24,32,.18);
    padding: var(--s4) var(--s3); margin: 0;
  }
  .nav.is-offen .nav__sep { display: none; }
  .nav.is-offen .btn { width: 100%; }
  .header__in { padding: 6px 6px 6px 20px; }
}
@media (max-width: 860px) {
  .grid-2, .grid-3, .split { grid-template-columns: 1fr; }
  .split > .foto { aspect-ratio: 4/3; min-height: 0; }
  .split > .foto--hoch { aspect-ratio: 4/5; }
  .kontaktperson { grid-template-columns: 1fr; }
  .kontaktperson .foto { max-width: 190px; }
  .mobilbar { display: grid; }
  body { padding-bottom: 74px; }
  /* Telefon: jede Zeile eine Karte, die eigene Antwort in der weißen Fläche */
  .vgl thead { display: none; }
  .vgl tbody th, .vgl td { display: block; width: auto; border-bottom: 0; padding: 4px 0; }
  .vgl tbody tr { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--grau-linie); }
  .vgl td::before { content: attr(data-label); display: block; font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--grau-text); font-weight: 800; margin-bottom: 2px; }
  .vgl td:last-child, .vgl tbody tr:last-child td:last-child {
    padding: var(--s2) var(--s2) var(--s2) 50px; border-radius: 14px; margin-top: 8px; background-position: 16px 18px; }
  .section--dark .vgl tbody tr { border-bottom-color: rgba(255,255,255,.14); }
  .section--dark .vgl td::before { color: rgba(255,255,255,.7); }
  .section--dark .vgl td:last-child::before { color: var(--grau-text); }
  .zeit__i { grid-template-columns: 1fr; gap: 12px; }
  .fehler__in { grid-template-columns: 1fr; gap: 0; }
  .fehler__zahl { display: none; }
}
@media (max-width: 560px) {
  .grid-4, .grid-6, .beweise { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .daten { grid-template-columns: 1fr; gap: 0; }
  .daten dd { margin-bottom: 10px; }
  .fehler__feld { flex-direction: column; }
  .prozess__s { grid-template-columns: 44px 1fr; }
  .prozess__n { width: 44px; height: 44px; font-size: 1.1rem; }
  .video-teaser__play { left: 10px; bottom: 10px; padding: 6px 12px 6px 7px; font-size: .85rem; gap: 8px; }
  .video-teaser__play svg { width: 24px; height: 24px; }
  .video-teaser__play small { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .header, .mobilbar, .footer { display: none; }
  body { padding: 0; }
}