@charset "UTF-8";
/* =====================================================================
   GREEN CAREERS · ÖFFENTLICHE STARTSEITE (Entwurf)
   ---------------------------------------------------------------------
   Register BRAND (DESIGN.md), nicht PRODUCT.
   Gestalterische Spur: Arbeitskleidung und Außendienst-Katalog, dazu
   die strenge Rasterlogik einer Schweizer Stellenliste. Erdig,
   fotografisch, mit industriellem Orange als Aktionsfarbe.
   Ausdrücklich NICHT: freundliche Startup-Landingpage in Mintgrün.

   Drei Flächen, mehr nicht:
     hell    --sand       oklch(0.960 0.012 110)   #f2f3ea   L* 95,4
     getönt  --sand-ton   oklch(0.845 0.024 108)   #cdcebc   L* 82,2
     dunkel  --dunkel     oklch(0.26  0.040 155)   #132a1b   (= --sb-base
             --dunkel-tief oklch(0.20 0.035 155)   #071b0f    des Klickdummys)

   Der Abstand hell zu getönt beträgt 13,3 L*-Punkte (1,43:1). Die frühere
   Fassung lag bei 7,1 Punkten und damit unter der Sichtbarkeitsschwelle,
   sieben Bandwechsel hintereinander waren rechnerisch vorhanden und
   optisch nicht da.
   Zweitens trägt jetzt eine Sektion aus der Seitenmitte (Stimmen) die
   dunkle Fläche, damit der Rhythmus nicht allein von zwei nahen
   Sandtönen abhängt. Reihenfolge der Flächen von oben nach unten:
     dunkel · hell · dunkel · hell · getönt · hell · DUNKEL · hell ·
     getönt · hell · getönt · dunkel
   Kein Nachbarpaar teilt sich dieselbe Fläche.

   Reihenfolge der Abschnitte:
     01  Schriften (lokal, kein Google Fonts, kein CDN)
     02  Tokens
     03  Grundlagen und Reset
     04  Hilfsklassen, Bänder, Layout-Hüllen
     05  Baustein: Knopf
     06  Bausteine: Auszeichnung, Schlagwort, Chip, Bildplatzhalter
     07  Baustein: Eingabefeld
     08  Baustein: Wischbereich
     09  Kopf und Navigation
     10  Hero mit Jobsuche
     10b Filter-Popup
     11  Zahlenleiste
     12  Premium-Stellen (dunkles Band)
     13  Kategorien
     14  Vorteile (nummerierte Liste, kein Kartenraster)
     15  Kein Account + Bewerbungsprozess
     16  Stimmen
     17  Vorteilsliste
     18  Arbeitgeber (dunkles Band)
     19  Abschluss
     20  Fragen und Antworten
     21  Fußbereich
     23  Jobbörse (jobs.html), steht vor 22
     24  Job-Detailseite (job.html), steht vor 22
     25  Arbeitgeber-Seite (arbeitgeber.html), steht vor 22
     22  Bewegung reduzieren, Druck   (bleibt bewusst zuletzt)

   Mobil zuerst. Aufgeweitet per min-width bei 640, 900, 1024 und 1200.
   1024 ist neu und gehört allein der Kopfnavigation: bei Fließtextgröße
   passen die sieben Punkte plus Login erst dort nebeneinander.
   ===================================================================== */


/* =====================================================================
   01  SCHRIFTEN
   Poppins (und Fraunces kursiv als Akzent) werden lokal in
   public-brand.css eingebunden; die Rollen unten bindet die Markenebene
   im Seitenscope neu (Design 05, 16.09.2026).
   ===================================================================== */

/* =====================================================================
   02  TOKENS
   Alle Farben in OKLCH, jeder Neutralton Richtung Markenton getönt,
   nirgends reines Weiß oder Schwarz.
   ===================================================================== */
:root {
  /* --- Die drei Flächen ------------------------------------------- */
  --sand:      oklch(0.960 0.012 110);   /* helle Bühne              */
  --sand-ton:  oklch(0.845 0.024 108);   /* getönte Fläche, 13,3 L*  */
  --karte:     oklch(0.988 0.007 110);   /* Kartenfläche auf beidem  */
  --dunkel:      oklch(0.26 0.04 155);   /* = --sb-base  des OS      */
  --dunkel-tief: oklch(0.20 0.035 155);  /* = --sb-deep  des OS      */

  /* --- Linien ------------------------------------------------------
     --linie und --linie-2 trennen nur, dort gilt die 3:1-Regel nicht.
     --linie-2 ist mitgewandert, weil der getönte Sandton dunkler wurde:
     bei 0,760 wäre die Haarlinie darauf mit 1,34:1 verschwunden.
     --rand-ui umreißt Bedienelemente und hält 3:1 gegen alle drei
     hellen Flächen (nachgerechnet: 4,93 gegen Karte, 4,55 gegen Sand,
     3,13 gegen den neuen Sandton).
     Die Namen mit der Endung -hell sind QUELLWERTE, kein Baustein nennt
     sie. Benutzt wird immer die Rolle darunter (--linie, --linie-2,
     --rand-ui); welcher Quellwert dahinter steht, entscheidet die
     Flächenklasse. Siehe Abschnitt 04. ------------------------------ */
  --linie-hell:     oklch(0.855 0.016 108);
  --linie-hell-2:   oklch(0.700 0.026 108);
  --rand-ui-hell:   oklch(0.540 0.020 150);
  --linie-dunkel:   oklch(0.97 0.02 150 / 0.16);
  --linie-dunkel-2: oklch(0.97 0.02 150 / 0.30);
  /* Umrisse von Bedienelementen auf dunklem Grund. 0,30 Deckung ergäbe
     nur 2,55:1, das reicht für einen Knopf nicht, der allein an seiner
     Kontur erkennbar ist. Nachgerechnet: 3,86:1 auf Tiefgrün,
     3,68:1 auf Dunkelgrün. */
  --rand-ui-dunkel: oklch(0.97 0.02 150 / 0.42);
  --füllung-dunkel: oklch(0.97 0.02 150 / 0.07);

  /* --- Texthierarchie, Quellwerte für helle Flächen ---------------- */
  --ink-hell-900: oklch(0.27 0.02 155);
  --ink-hell-800: oklch(0.31 0.02 155);
  --ink-hell-700: oklch(0.37 0.02 155);
  --ink-hell-600: oklch(0.43 0.018 155);
  --ink-hell-500: oklch(0.46 0.016 155);
  --ink-hell-400: oklch(0.49 0.014 155);

  /* --- Text auf dunklen Flächen ------------------------------------ */
  --auf-dunkel:       oklch(0.97 0.02 150);
  --auf-dunkel-leise: oklch(0.86 0.025 150);
  --auf-dunkel-still: oklch(0.74 0.03 150);

  /* --- Aktionsfarbe. Gefülltes Orange = Handlung, konturiertes
         Orange = Auszeichnung. Höchstens 10 Prozent Fläche. --------- */
  --orange:      oklch(0.68 0.17 47);    /* Fläche, Wert aus DESIGN.md */
  --orange-tief: oklch(0.62 0.17 47);    /* Hover der Fläche           */
  /* QUELLWERT, kein Baustein nennt ihn. Die Rolle heißt --orange-text
     und steht in der Rollenbindung weiter unten. Vorher hieß dieser
     Wert selbst --orange-text und war damit Quelle und Rolle in einem:
     auf der dunklen Fläche gab es nichts umzubinden, ohne den Wert zu
     verlieren. Genau dieselbe Trennung tragen --linie-hell,
     --rand-ui-hell und die ink-Stufen. */
  --orange-text-hell: oklch(0.52 0.17 47); /* Orange als Schrift/Marke
                                            auf hellem Grund, hält
                                            5,7:1 auf Karte, 5,3:1 auf
                                            Sand, 4,4:1 auf Sandton    */
  --orange-hell: oklch(0.78 0.15 55);    /* Kontur und Text auf dunkel */

  /* --- Bernstein. EIGENE Rolle, ausdrücklich nicht Orange.
         Die Live-Seite setzt das PREMIUM-Abzeichen bernsteinfarben als
         Fläche ab (NACHTRAG 2 und 4). Orange ist auf dieser Seite die
         Aktionsfarbe und darf nicht auf ein Abzeichen wandern, das
         nichts auslöst. Bernstein liegt bei Farbwinkel 78 statt 47 und
         zwölf Punkte heller, das trennt beide auch bei Farbsehschwäche
         zuverlässig.
         Live steht der Abzeichentext in Weiß. Das ergibt auf diesem Ton
         rund 2:1 und ist damit nicht lesbar. Hier steht er stattdessen
         in --dunkel-tief.
         Im Browser nachgerechnet (OKLCH nach sRGB, WCAG-Formel):
           Abzeichentext auf Bernstein         9,47:1   (nötig 4,5)
           Bernsteinfläche auf Dunkelgrün      8,08:1
           Rand auf der fast weißen Stellenkarte 4,23:1 (nötig 3,0)
         Der Rand ist nötig, weil die Fläche allein auf der Stellenkarte
         nur 1,83:1 hält und das Abzeichen dort sonst keine Kante
         hätte. ------------------------------------------------------ */
  --bernstein:      oklch(0.80 0.135 78);
  --bernstein-rand: oklch(0.58 0.130 75);

  /* --- Grün trägt hier nur noch zwei Rollen: die dunkle Fläche oben
         und den Marker (Haken, Ortssymbol, Balken). Keine acht
         Aufhellungen mehr. ------------------------------------------ */
  --marker:       oklch(0.52 0.15 150);
  --marker-licht: oklch(0.80 0.10 150);  /* derselbe Marker auf dunkel */

  /* --- Fokus. Als outline, nicht als box-shadow, damit ihn keine
         Bauteilregel überschreiben kann. ----------------------------- */
  --fokus-hell:   var(--dunkel-tief);    /* 16,0:1 gegen Sand          */
  --fokus-dunkel: var(--marker-licht);   /*  8,6:1 gegen Dunkelgrün    */

  /* =================================================================
     ROLLENBINDUNG
     Hier und NUR hier steht, welcher Quellwert gerade welche Rolle
     spielt. Die Bausteine weiter unten nennen ausschließlich die Rolle.
     Eine Flächenklasse (.dunkel, .hell-insel, siehe Abschnitt 04) bindet
     dieselben Namen neu, statt in jedem Baustein einzelne
     Eigenschaften zu überschreiben. Damit braucht ein Baustein, der zum
     ersten Mal auf der dunklen Fläche steht, KEINE Ausnahmezeile: er
     benutzt schon die richtigen Namen.
     Das ist der Grund, warum es hier zwei Ebenen gibt und nicht eine.
     ================================================================= */
  --ink-900: var(--ink-hell-900);
  --ink-800: var(--ink-hell-800);
  --ink-700: var(--ink-hell-700);
  --ink-600: var(--ink-hell-600);
  --ink-500: var(--ink-hell-500);
  --ink-400: var(--ink-hell-400);
  --linie:   var(--linie-hell);
  --linie-2: var(--linie-hell-2);
  --rand-ui: var(--rand-ui-hell);
  --fokus:   var(--fokus-hell);
  /* Ruhende Fläche eines Kastens (Kontrollkästchen, Knopf im Hover). */
  --füllung-still: var(--karte);
  /* Kaum sichtbare Tönung (Platzhalter, Vermerk, Chip, Zeilen-Hover). */
  --füllung-leise: oklch(0.27 0.02 155 / 0.04);
  /* Gestrichelte Kante eines Kastens, der NICHT bedienbar ist. Sie
     braucht auf Dunkelgrün mehr Deckung als auf Sand, um gleich schwer
     zu wiegen, deshalb eine eigene Rolle neben --linie-2. */
  --rand-still: var(--linie-hell-2);
  /* Orange im Hover. Auf hellem Grund geht es tiefer, auf dunklem
     heller: in beide Richtungen weg von der Fläche darunter. */
  --orange-hover: var(--orange-tief);
  /* Orange als SCHRIFT oder Zeichen. Auf hellem Grund die abgedunkelte
     Fassung, auf dunklem die aufgehellte. */
  --orange-text:  var(--orange-text-hell);
  /* Der Marker als ZEICHEN auf der Fläche (Ortsnadel, Aufzählungsquadrat,
     Haken). Er kehrt sich mit der Fläche um.
     --marker selbst bleibt ungebunden: dort, wo Grün eine FLÄCHE ist
     (Hero-Balken, Schreibmaschinen-Kasten, gesetztes Kontrollkästchen),
     steht heller Text darauf, und ein aufgehelltes Grün würde diesen
     Kontrast zerstören. Zwei Rollen, zwei Namen. */
  --marker-auf: var(--marker);
  /* Der Haken IM gesetzten Kontrollkästchen. Seine Farbe steckt in
     einer Datenadresse und lässt sich nicht über currentColor lösen,
     deshalb hängt das ganze Zeichen an der Rolle. */
  --haken-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f3ea' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");

  /* --- Typografie --------------------------------------------------- */
  --schrift-display: "Poppins", Arial, sans-serif;
  --schrift-text:    "Poppins", Arial, sans-serif;

  /* Sechs Stufen, Faktor 1,25 auf JEDER Breite, auch am Telefon:
       14 · 17,5 · 22 · 27,5 · 34,4 bis 43 · 43 bis 54 px
     Die frühere Skala begann bei 12,5 px. Diese Stufe trug bei 360 px
     Breite 67 sichtbare Elemente, darunter alle Branchen-Links im Fuß.
     Zielgruppe sind Fachkräfte am Telefon, oft auf der Baustelle, bei
     Sonnenlicht und häufig mit Altersweitsichtigkeit. 12,5 px ist dort
     keine Schriftgröße, sondern eine Fußnote.
     Die beiden oberen Stufen sind fluid. Ihre Faktoren wurden über die
     ganze Spanne nachgerechnet und liegen zwischen 1,25 und 1,26, auch
     bei 360 px. Die alte Fassung fiel dort auf 1,14 und ließ H2 und
     Auszeichnungsziffer gleich groß erscheinen. */
  --fs-xs:   0.875rem;                                       /* 14      */
  --fs-base: 1.09375rem;                                     /* 17,5    */
  --fs-md:   1.375rem;                                       /* 22      */
  --fs-lg:   1.71875rem;                                     /* 27,5    */
  --fs-xl:   clamp(2.1484rem, 1.85rem + 1.30vw, 2.6875rem);  /* 34,4-43 */
  --fs-2xl:  clamp(2.6875rem, 2.30rem + 1.70vw, 3.375rem);   /* 43-54   */

  --lh-display: 1.06;
  --lh-titel:   1.18;
  --lh-text:    1.6;
  --lh-dunkel:  1.68;          /* heller Text auf dunklem Grund       */
  --ls-display: -0.025em;
  --ls-titel:   -0.015em;
  --ls-weit:     0.10em;

  --zeile:        66ch;

  /* --- Abstände ----------------------------------------------------- */
  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-14: 56px; --sp-16: 64px; --sp-20: 80px;

  --band-y:  52px;             /* Grundhöhe eines Bandes              */
  --gutter:  16px;
  --breite:  1200px;

  /* Zwei Abstände, die überall gleich heißen und überall gleich sind. */
  --kopf-abstand: var(--sp-8);              /* Sektionskopf zu Inhalt  */
  --karten-pad:   clamp(18px, 2.4vw, 24px); /* Innenabstand jeder Karte*/

  /* --- Radien. Kartenfamilie einheitlich --r-lg, --r-xl bleibt den
         zwei großen Bühnen vorbehalten (Suchmodul, Arbeitgeber). ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* --- Schatten, weich und grün getönt, nie hartes Schwarz --------- */
  --sh-xs: 0 1px 2px oklch(0.2 0.03 155 / 0.06);
  --sh-md: 0 2px 4px oklch(0.2 0.03 155 / 0.06), 0 8px 20px oklch(0.2 0.03 155 / 0.10);
  --sh-lg: 0 4px 8px oklch(0.2 0.03 155 / 0.07), 0 18px 44px oklch(0.2 0.03 155 / 0.15);
  --sh-orange: 0 2px 6px oklch(0.55 0.16 47 / 0.22), 0 8px 18px oklch(0.55 0.16 47 / 0.22);

  /* --- Bewegung. Ease-out-expo, 150 bis 250 ms, nur transform und
         opacity, niemals Layout-Eigenschaften. --------------------- */
  --ease:      cubic-bezier(0.16, 1, 0.30, 1);
  --t-schnell: 150ms;
  --t-basis:   200ms;
  --t-ruhig:   250ms;

  --kopf-h:       72px;
  --kopf-h-mobil: 60px;
  --tap: 48px;                 /* Mindest-Trefferfläche am Smartphone */
}

@media (min-width: 640px)  { :root { --gutter: 24px; --band-y: 68px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; --band-y: 92px; } }


/* =====================================================================
   03  GRUNDLAGEN UND RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h-mobil) + 12px);
}

body {
  font-family: var(--schrift-text);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-text);
  color: var(--ink-700);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* KEIN overflow-x: hidden. Die Regel verhindert keinen Überstand, sie
     versteckt ihn: der 49px-Überlauf bei 320px war genau deshalb
     unsichtbar, bis scrollWidth gegen clientWidth gemessen wurde. Jeder
     künftige Überstand soll auffallen und an der Ursache behoben werden.
     Nachgemessen bei 320, 360, 375, 414, 900 und 1440px: überall 0. */
}

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  color: var(--ink-900);
  line-height: var(--lh-titel);
  letter-spacing: var(--ls-titel);
}
h1 {
  font-size: var(--fs-2xl); font-weight: 700;
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
}
h2 { font-size: var(--fs-xl); font-weight: 700; }
h3 { font-size: var(--fs-md); font-weight: 600; }
h1, h2, h3 { text-wrap: balance; }
/* Lange deutsche Komposita dürfen nicht aus dem Bildschirm laufen.
   Gemessen: "Bewerbungsprozess" ist bei 320px Fensterbreite 353px breit,
   die Textspalte 288px. Ohne Trennung wird das Wort abgeschnitten, es
   ist die einzige Stelle der Seite, an der Inhalt verloren geht.
   html trägt lang="de", die Trennung greift also mit deutschen Mustern
   und ergibt "Bewerbungs-prozess". Der Wortlaut bleibt unangetastet.

   Die H1 ist BEWUSST ausgenommen. Sie ist eine Versalien-Schlagzeile;
   dort trennte die Regel "BERUFE" zu "BERU-FE", was in Großbuchstaben
   als Fehler gelesen wird. Sie braucht die Trennung auch nicht: ihr
   längstes Wort ist KARRIERE und passt bei 320px, den Umbruch am
   Gedankenstrich hält bereits das geschützte Leerzeichen. */
h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }
h1 { overflow-wrap: break-word; }
p, li { text-wrap: pretty; }
p  { max-width: var(--zeile); }

a { color: inherit; text-decoration: none; }
/* Link mitten im Fließtext. Farbe allein reicht als Merkmal nicht, hier
   trägt die Unterstreichung. --orange-text hält 5,3:1 auf dem hellen
   Sand, unterstrichen ist der Link auch ohne Farbwahrnehmung zu sehen. */
.textlink {
  color: var(--orange-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.textlink:hover { color: var(--ink-900); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
hr { border: none; }

/* Direkte Touch-Rückmeldung ohne die alte Doppeltipp-Verzögerung.
   Der orangefarbene Tap-Hinweis bleibt auf hellen wie dunklen Flächen
   erkennbar und passt zur bestehenden Aktionsfarbe. */
:where(a, button, summary, input, select, textarea) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: oklch(0.68 0.17 47 / 0.2);
}

/* Benannte Überschriften sind häufig direkte Sprungziele. Der feste
   Kopf darf sie nach einer Tastatur- oder Inhaltsnavigation nicht
   verdecken. Seitenspezifisch höhere Abstände bleiben weiterhin stärker. */
:is(h1, h2, h3, h4)[id] {
  scroll-margin-top: calc(var(--kopf-h-mobil) + 16px);
}

/* Fokus als outline. Keine box-shadow-Regel eines Bauteils kann ihn
   mehr abräumen, und kein border-radius verformt hier etwas. */
/* EINE Regel, keine Ausnahmen. Welche Farbe der Ring hat, entscheidet
   die Flächenklasse über die Rolle --fokus (Abschnitt 04):
   .dunkel bindet sie auf den hellen Ring, .hell-insel wieder zurück.
   Maßgeblich ist dabei nicht, worin ein Element liegt, sondern worauf
   sein Ring gezeichnet wird: er sitzt mit 2px Versatz AUSSERHALB des
   Elements. Die Felder der Suchleiste sitzen innen im hellen Formular,
   ihr Ring liegt also auf Hell (17,4:1); die Stellenkarte IST die helle
   Fläche, außen liegt das dunkelgrüne Band, ihr Ring gehört dem Band
   (marker-licht auf --dunkel = 8,52:1). Beides ergibt sich jetzt von
   selbst daraus, wo .hell-insel steht.
   Der einzige Sonderfall bleibt der Branchen-Aufklapp: seine helle
   Fläche entsteht erst ab 1024px, die Rückbindung steht deshalb dort,
   wo die Fläche gesetzt wird (Abschnitt 09). */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}
::selection { background: var(--orange); color: var(--dunkel-tief); }


/* =====================================================================
   04  HILFSKLASSEN, BÄNDER, LAYOUT-HÜLLEN
   ===================================================================== */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 300;
  transform: translateY(-180%);
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 var(--sp-5);
  background: var(--orange); color: var(--dunkel-tief);
  font-weight: 600; border-radius: var(--r-md); box-shadow: var(--sh-md);
  transition: transform var(--t-ruhig) var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
  /* Der Sprunglink liegt über dem dunklen Kopf, dort braucht er den
     hellen Ring, nicht den dunklen. */
  outline-color: var(--sand);
}

.wrap {
  width: 100%; max-width: var(--breite);
  margin-inline: auto; padding-inline: var(--gutter);
}

/* --- Die drei Flächen als Band ------------------------------------
   Abstände variieren bewusst pro Band, damit ein Rhythmus entsteht
   und nicht überall dasselbe Polster liegt. ----------------------- */
.band       { padding-block: var(--band-y); }
.band--eng  { padding-block: calc(var(--band-y) * 0.72); }
.band--weit { padding-block: calc(var(--band-y) * 1.22); }

.band--hell   { background: var(--sand); }
.band--ton    { background: var(--sand-ton); }
.band--dunkel { background: var(--dunkel); }

/* --- Die Farbumkehr, EINMAL --------------------------------------
   .dunkel überschreibt keine Eigenschaften einzelner Bausteine mehr,
   sondern bindet die Rollen aus Abschnitt 02 neu. Ein Baustein, der
   var(--ink-900), var(--linie-2), var(--rand-ui) oder var(--fokus)
   nennt, steht damit auf der dunklen Fläche von selbst richtig, ohne
   eine einzige Ausnahmezeile.
   Vorher lief das über 29 Regeln mit .dunkel-Präfix plus die
   Rückausnahme .dunkel .hell-insel plus eine dritte Ebene bei den
   Platzhaltern. Jede der 23 geplanten Branchenseiten hätte diese Kette
   für jeden neu auf Dunkelgrün gestellten Baustein verlängert, und eine
   vergessene Ausnahme ist fast weißer Text auf fast weißer Karte.
   ------------------------------------------------------------------ */
.dunkel {
  --ink-900: var(--auf-dunkel);
  --ink-800: var(--auf-dunkel-leise);
  --ink-700: var(--auf-dunkel-leise);
  --ink-600: var(--auf-dunkel-still);
  --ink-500: var(--auf-dunkel-still);
  --ink-400: var(--auf-dunkel-still);
  --linie:   var(--linie-dunkel);
  --linie-2: var(--linie-dunkel-2);
  --rand-ui: var(--rand-ui-dunkel);
  --fokus:   var(--fokus-dunkel);
  --füllung-still: var(--füllung-dunkel);
  --füllung-leise: var(--füllung-dunkel);
  --rand-still:    var(--rand-ui-dunkel);
  --orange-hover:  var(--orange-hell);
  /* Orange als SCHRIFT. --orange-text ist für helle Flächen gerechnet
     (oklch 0.52) und hielte auf Dunkelgrün nur 2,2:1, also weniger als
     die Hälfte des Nötigen. Bis zur Arbeitgeber-Seite nannte kein
     Baustein auf dunkler Fläche diesen Namen, deshalb fiel die Lücke
     nicht auf; die Zahlenleiste steht dort jetzt auf Dunkelgrün und
     ihr Plus-Zeichen ist genau so ein Fall. Umbinden statt in jedem
     neuen Baustein eine Ausnahme schreiben. */
  --orange-text:   var(--orange-hell);
  --marker-auf:    var(--marker-licht);
  --haken-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071b0f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  color: var(--ink-700);
  line-height: var(--lh-dunkel);
}
.dunkel h1, .dunkel h2, .dunkel h3, .dunkel h4 { color: var(--ink-900); }
.dunkel p { line-height: var(--lh-dunkel); }

/* Helle Inseln in dunklen Bändern. Sie binden dieselben Namen auf die
   hellen Quellwerte zurück. Maßgeblich ist immer die Fläche, auf der
   etwas liegt, nicht der Abschnitt, in dem es steht: das gilt für die
   Textfarbe genauso wie für Linien, Umrisse und den Fokusring.

   Zwei Wege führen hierher, und beide enden in DERSELBEN Liste:
   1. .hell-insel im Quelltext, dort wo ein Behälter hell wird
      (Suchleiste, Stellenkarte im dunklen Band).
   2. Bausteine, die ihre helle Fläche IMMER selbst mitbringen. Sie
      stehen unten mit im Selektor und brauchen im Quelltext keine
      Klasse. Wer einen solchen Baustein neu baut, trägt ihn hier ein,
      und das ist die einzige Stelle, an der das passieren muss. */
.hell-insel,
.eingabe, .auswahl,
.branchenwahl__feld, .branchenwahl__liste,
.leerzustand, .reiter__band,
.stellenkarte__körper,
.paket__körper {
  --ink-900: var(--ink-hell-900);
  --ink-800: var(--ink-hell-800);
  --ink-700: var(--ink-hell-700);
  --ink-600: var(--ink-hell-600);
  --ink-500: var(--ink-hell-500);
  --ink-400: var(--ink-hell-400);
  --linie:   var(--linie-hell);
  --linie-2: var(--linie-hell-2);
  --rand-ui: var(--rand-ui-hell);
  --fokus:   var(--fokus-hell);
  --füllung-still: var(--karte);
  --füllung-leise: oklch(0.27 0.02 155 / 0.04);
  --rand-still:    var(--linie-hell-2);
  --orange-hover:  var(--orange-tief);
  --orange-text:   var(--orange-text-hell);
  --marker-auf:    var(--marker);
  --haken-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f3ea' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  color: var(--ink-700);
  line-height: var(--lh-text);
}
.hell-insel h1, .hell-insel h2,
.hell-insel h3, .hell-insel h4 { color: var(--ink-900); }
.hell-insel p { line-height: var(--lh-text); }

/* Zahlen mit Tabellenziffern. Ersetzt die Monospace des Klickdummys,
   JetBrains Mono liegt lokal nicht vor. */
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.sektion-kopf { margin-bottom: var(--kopf-abstand); }
.sektion-kopf > p {
  margin-top: var(--sp-4);
  color: var(--ink-600);
  font-size: var(--fs-base);
}


/* =====================================================================
   05  BAUSTEIN: KNOPF
   Drei Stufen, mehr nicht:
     .btn-aktion   gefülltes Orange, genau eine Handlung pro Bildschirm
     .btn-kontur   ruhige Zweitstufe mit tragendem Rand
     .btn          ohne Zusatz die stille Stufe, auf hell wie auf dunkel
   Schriftgröße ist die Grundgröße. Alle Beschriftungen stehen laut
   Vorlage in Versalien, deshalb tragen alle Knöpfe dieselbe Sperrung
   von 0,04em, auch der runde Knopf der Jobsuche. Versalsatz ohne
   Sperrung läuft in der Fließtextschrift sichtbar enger als der gesperrte
   Nachbar, die Knöpfe lasen sich dadurch nicht als eine Familie.
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 0; max-width: 100%;
  min-height: var(--tap); padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  font-family: var(--schrift-text);
  font-weight: 600; font-size: var(--fs-base); line-height: 1.2;
  /* KEIN text-transform hier. Es stand kurzzeitig an dieser Stelle, mit
     der Begründung, die älteren Seiten schrieben ohnehin alles in
     Versalien. Das war falsch, nachgezählt sind es sieben Knöpfe, die
     bewusst gemischt gesetzt sind: „Bewirb dich jetzt" (dreimal auf der
     Job-Detailseite, dort der Hauptknopf), „Jetzt anrufen",
     „E-Mail senden", „Zurück zum Formular" und „Anwenden" im Filter.
     Eine Regel an .btn ändert damit drei fertige Seiten, ohne dass es
     jemand gesehen hätte. Versalien setzt jetzt der Baustein, der sie
     braucht, siehe .paket__aktionen in Abschnitt 25. */
  letter-spacing: 0.04em;
  color: var(--ink-900); background: transparent;
  border: 1px solid var(--rand-ui);
  text-align: center; white-space: normal; overflow-wrap: anywhere;
  transition: background var(--t-basis) var(--ease),
              border-color var(--t-basis) var(--ease),
              color var(--t-basis) var(--ease),
              transform var(--t-schnell) var(--ease);
}
.btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.btn:hover { background: var(--füllung-still); border-color: var(--ink-700); }
.btn:active { transform: translateY(1px); }

.btn-aktion {
  color: var(--dunkel-tief); background: var(--orange);
  border-color: transparent; box-shadow: var(--sh-orange);
}
.btn-aktion:hover { background: var(--orange-hover); border-color: transparent; color: var(--dunkel-tief); }

.btn-kontur { color: var(--ink-900); background: transparent; border-color: var(--rand-ui); }
.btn-kontur:hover { background: var(--füllung-still); border-color: var(--ink-700); color: var(--ink-900); }

.btn-lg { min-height: 56px; padding: 0 var(--sp-8); }

/* Auf dunkler Fläche bleibt genau EINE Abweichung übrig: der orange
   Schimmer trägt dort nichts und legt sich als schmutziger Ring um den
   Knopf. Farbe, Kante und Hover-Füllung kommen aus den Rollen und
   brauchen keine Zeile mehr. */
.dunkel .btn-aktion { box-shadow: none; }


/* =====================================================================
   06  BAUSTEINE: AUSZEICHNUNG, SCHLAGWORT, CHIP
   Die allgemeine Klasse .karte ist entfallen. Sie hatte nur noch einen
   Nutzer, die Kategorien, und dort trug sie nichts: --karte gegen --sand
   sind 1,08:1, der Rahmen --linie 1,38:1, der Schatten 6 Prozent
   Deckung. Auf einem Telefondisplay im Freien war die Karte als Objekt
   nicht zu sehen, und damit zerfiel auch die gestaffelte Anordnung.
   Die Kategorien nutzen jetzt die Bauform, die auf dieser Seite schon
   zweimal trägt: 2px-Oberlinie in --ink-900 (siehe .stimme und
   .abschluss__banner). Eine Kartenvariante weniger.
   Als Fläche bleibt --karte für Stellenkarte, Suchleiste, Eingabefeld
   und Branchen-Aufklapp, dort steht sie jeweils auf Dunkelgrün.
   ===================================================================== */

/* Auszeichnung (PREMIUM), bernsteinfarbene Fläche.
   Die frühere Fassung war konturiert und trug Orange. Beides ist
   ersetzt: die Live-Seite zeigt hier eine bernsteinfarbene FLÄCHE, und
   Orange ist auf dieser Seite als Aktionsfarbe belegt. Bernstein ist
   ein eigenes Token (siehe Abschnitt 02), damit die Trennung
   nachvollziehbar bleibt und nicht als Orange-Variante gelesen wird.
   Weil die Fläche jetzt trägt, entfallen die beiden früheren
   Sonderregeln für dunkle Bänder und helle Inseln ersatzlos: derselbe
   Baustein sieht auf jeder der drei Flächen gleich aus. */
.auszeichnung {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
  color: var(--dunkel-tief); background: var(--bernstein);
  border: 1px solid var(--bernstein-rand);
  white-space: nowrap;
}

/* .schlagwort ist ersatzlos entfallen. Der Baustein hatte genau einen
   Nutzer, die Bereiche der Kategorien, und dort las er falsch: sechzehn
   umrandete Kästchen sehen nach Filterknöpfen aus, keiner davon war
   anklickbar. Die Kategorien setzen die Bereiche jetzt als Textliste,
   siehe Abschnitt 13. Eine Bauform weniger. */

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--füllung-leise); border: 1px solid var(--linie-2);
  color: var(--ink-700);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--ls-weit);
  text-transform: uppercase;
}
.chip svg { width: 15px; height: 15px; }

/* --- Bildplatzhalter ----------------------------------------------
   Sieben Bilddateien der Live-Seite liegen nicht im Download vor
   (drei App-Ansichten, drei Personenfotos, dazu die Logo-Wand aus
   storage/logos). Das Inhaltsdokument ordnet dafür ausdrücklich an:
   „Solange sie fehlen: sichtbar gekennzeichnete Platzhalter verwenden,
   keine stillen Ersatzbilder."
   Deshalb eine bewusst technische Fläche mit gestricheltem Rand und
   dem erwarteten Dateinamen im Klartext. Beim Vorführen ist damit auf
   den ersten Blick zu sehen, was noch offen ist. Der Holbefehl steht
   als Kommentar an der jeweiligen Stelle im HTML.
   ------------------------------------------------------------------ */
.platzhalter {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  width: 100%; padding: var(--sp-5) var(--sp-4);
  /* Der Rand ist BEWUSST neutral, nicht orange. Orange ist auf dieser
     Seite die Aktionsfarbe (DESIGN.md). Die sechs Platzhalter belegen
     zusammen ein Vielfaches der Fläche aller echten Aktionen; in Orange
     würden sie die Farbrolle kippen, und im Vorteil 03 stünde ein
     oranger Rahmen direkt über einem orangen Knopf. Ein Platzhalter ist
     eine Reservierung, keine Handlung. Absicht entsteht hier durch die
     ruhige, gleichmäßige Wiederholung und die Beschriftung. */
  border: 2px dashed var(--rand-still);
  border-radius: var(--r-md);
  background: var(--füllung-leise);
  color: var(--ink-600);
}
/* Hochformat für die drei App-Ansichten. 9/16 ist das Seitenverhältnis
   eines Telefondisplays, mockup-1..3.jpg zeigen laut NACHTRAG 2 genau
   das.
   ABER: Solange die Dateien fehlen, wird das echte Verhältnis NICHT
   erzwungen. Bei 9/16 und 260px Breite rendert jeder Platzhalter 462px
   hoch, das Vorteile-Band wächst auf über 2.000px bei rund 6 Prozent
   Tintendichte und wird damit zum höchsten und leersten Band der Seite.
   Drei große leere Rechtecke würden eine Sektion bestimmen, deren
   Inhalt drei Überschriften, drei Sätze und drei Knöpfe sind.
   Deshalb gedeckelt. Beim Nachliefern von mockup-1..3.jpg hier wieder
   aspect-ratio: 9 / 16 und in .vorteil__medien max-width: 260px setzen. */
.platzhalter--hoch { aspect-ratio: auto; min-height: 300px; max-width: 240px; }
/* Porträtformat für die drei Personenfotos der Stimmen. 4/5 ist eine
   ANNAHME: testimonial-1..3.jpg fehlen im Download, ihr tatsächliches
   Seitenverhältnis ist unbekannt. 9/16 stand vorher hier und ist für
   ein Porträt zu schlank, es gehört dem Telefondisplay. Beim Nachliefern
   der Dateien prüfen und gegebenenfalls hier korrigieren. */
.platzhalter--portrait { aspect-ratio: 4 / 5; max-width: 260px; }
/* Bildebene der Stellenkarten. NACHTRAG 2 nennt drei Ebenen je Karte:
   Job-Foto als Hintergrund, Firmenlogo als weißes Feld darauf, dazu die
   zwei Abzeichen. Foto und Logo fehlen im Download, deshalb dieselbe
   gekennzeichnete Fläche wie bei den App-Ansichten und den Stimmen.
   Bewusst flach gehalten: zehn Karten mal 300px Platzhalter wären am
   Telefon ein Wischbereich aus leeren Rechtecken. 16/9 entspricht dem
   Verhältnis, in dem die Live-Seite das Kartenfoto zeigt, gedeckelt auf
   112px Höhe. */
.platzhalter--stelle {
  aspect-ratio: 16 / 9; max-height: 112px;
  margin-bottom: var(--sp-4);
  gap: 2px;
}
.platzhalter__marke {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-weit); text-transform: uppercase;
  color: var(--ink-900);
}
.platzhalter__datei {
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--ink-700); word-break: break-word;
}
.platzhalter__hinweis {
  font-size: var(--fs-xs); color: var(--ink-600); max-width: none;
}
/* Hier standen fünf Sonderregeln: drei für den Platzhalter auf dunkler
   Fläche und zwei als Rückausnahme für den Platzhalter auf einer hellen
   Insel IN einem dunklen Band. Alle fünf sind ersatzlos entfallen. Der
   Baustein nennt nur noch Rollen (--rand-still, --füllung-leise,
   --ink-600, --ink-700, --ink-900), und welche Werte dahinter stehen,
   entscheidet die Fläche, auf der er liegt. */

/* --- Entwurfsvermerk ----------------------------------------------
   Ein offener Punkt, der nur als HTML-Kommentar existiert, geht beim
   Übergang in die Produktion unter. Dieser Streifen macht ihn sichtbar,
   ohne als Seiteninhalt gelesen zu werden: dieselbe technische Bauform
   wie die Bildplatzhalter (gestrichelte Kante, neutrale Farbe,
   Versalien-Marke), zusätzlich ein senkrechter Balken links, damit er
   auch bei flüchtigem Blick als Randnotiz und nicht als Aussage liest.
   Bewusst NICHT in Orange oder Bernstein: beide Farben sind auf dieser
   Seite belegt (Aktion, Abzeichen). Vor dem Livegang ersatzlos
   entfernen.
   ------------------------------------------------------------------ */
/* Entwurfsvermerke sind an <body class="entwurf"> gebunden, nicht an
   einen HTML-Kommentar. Ein gelöschtes Wort im body-Tag entfernt damit
   ALLE Vermerke auf einmal.
   KEIN border-left als Akzent: DESIGN.md verbietet Seitenstreifen
   ausdrücklich. Die gestrichelte Kante plus die Versalien-Marke tragen
   die Randnotiz allein und eindeutig. */
.vermerk { display: none; }
.entwurf .vermerk {
  display: flex; align-items: baseline; flex-wrap: wrap;
  min-width: 0;
  gap: 6px var(--sp-3);
  margin-top: var(--sp-10);
  padding: var(--sp-4) var(--sp-5);
  max-width: none;
  border: 1px dashed var(--rand-still);
  border-radius: var(--r-sm);
  background: var(--füllung-leise);
}
.vermerk__marke {
  flex: 0 0 auto;
  min-width: 0; max-width: 100%; overflow-wrap: anywhere;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-weit); text-transform: uppercase;
  color: var(--ink-900);
}
.vermerk__text {
  min-width: 0; max-width: 100%;
  font-size: var(--fs-xs); color: var(--ink-700);
  overflow-wrap: anywhere; hyphens: auto;
}


/* =====================================================================
   06b  BAUSTEIN: STELLENKARTE
   EIN Baustein für alle Stellen der Seite, in drei Dichten.

   Vorher gab es ihn zweimal unter zwei Namen: .stelle mit __kopf,
   __titel, __firma, __ort, __ab, __mwd auf der Startseite und
   .stellenkarte mit genau denselben sechs Unterteilen in der Jobbörse.
   Die Werte liefen dabei auseinander (Firma einmal --ink-600 mit
   Ellipse, einmal --ink-700 ohne; Rahmen einmal durchsichtig, einmal
   --linie; Bildfeld einmal auf 112px gedeckelt, einmal auf 150px), und
   auch das Markup war verschieden (article > a gegen li > article).
   Behalten ist die reichere Fassung der Jobbörse: eigener Medienbereich,
   Titel als Link mit ganzflächiger Trefferfläche; der frühere
   Beschreibungs-Aufklapp wurde mit W8 am 11.08.2026 entfernt. Jede der
   23 geplanten Branchenseiten zeigt Stellen und braucht ab hier genau
   diesen einen Baustein.

   Die drei Dichten:
     .stellenkarte             Karte im Raster (Voreinstellung)
     .stellenkarte--kompakt    Karte im Wischbereich (feste Breite)
     .stellenkarte--zeile      Zeile mit Haarlinie, ab 900px

   Auf welcher Fläche die Karte steht, muss sie nicht wissen: sie nennt
   nur Rollen (Abschnitt 04). Auf dem dunkelgrünen Premium-Band der
   Startseite ist sie eine helle Insel, in der Jobbörse steht sie auf
   Sand, und die Zeilenform übernimmt die Fläche, auf der sie liegt.
   ===================================================================== */
.stellenkarte { min-width: 0; display: flex; }
.stellenkarte__körper {
  position: relative;                   /* Anker für die Kartenfläche  */
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  width: 100%; height: 100%;
  padding: var(--karten-pad);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-lg);
  transition: transform var(--t-basis) var(--ease),
              box-shadow var(--t-basis) var(--ease);
}
.stellenkarte__körper:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.stellenkarte__text { display: flex; flex-direction: column; min-width: 0; }

/* --- Betriebsfoto und Firmenzeichen auf der Stellenkarte ---------------
   Die Firmenzeichen kommen aus dem Bestand und sind uneinheitlich: manche
   freigestellt, manche mit weißem Kasten, verschiedene Seitenverhältnisse.
   Deshalb eine feste, quadratische Bühne mit object-fit: contain und
   ruhigem Grund. So steht jedes Zeichen gleich groß und keins wird
   beschnitten. Nur die Karten OHNE Betriebsfoto zeigen das Zeichen groß;
   liegt ein Foto vor, sitzt es klein und überlappend in der Ecke. */
.stellenkarte__medien { position: relative; }
.stellenkarte__logo {
  width: 100%; max-width: 96px; aspect-ratio: 1;
  object-fit: contain; padding: var(--sp-2);
  background: var(--karte); border: 1px solid var(--linie-2);
  border-radius: var(--r-sm);
}
.stellenkarte__foto {
  width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: contain;
  background: var(--füllung-still);
  border-radius: var(--r-md);
}
/* Liegen Foto UND Zeichen vor, rückt das Zeichen auf das Foto. */
.stellenkarte__foto + .stellenkarte__logo {
  position: absolute; left: var(--sp-3); bottom: calc(var(--sp-3) * -1);
  max-width: 64px; box-shadow: var(--sh-xs);
}
.stellenkarte__foto + .stellenkarte__logo ~ * { margin-top: var(--sp-5); }

/* Bildebene, solange Betriebsfotos fehlen. Flach gehalten: zwölf Karten
   mal 300px wären am Telefon eine Wand aus leeren Rechtecken. */
.platzhalter--betrieb { aspect-ratio: 16 / 9; max-height: 150px; }

.stellenkarte__kopf {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
/* Das Abzeichen trägt hier zusätzlich den Stern der Vorlage. Farben
   unverändert aus dem bestehenden Baustein: dunkler Text auf Bernstein,
   9,47:1. Live steht dort Weiß auf #d29700 mit 2,2:1. */
.stellenkarte .auszeichnung { gap: 5px; }
.stellenkarte .auszeichnung svg { width: 12px; height: 12px; flex: 0 0 12px; }
.stellenkarte__ab { font-size: var(--fs-xs); color: var(--ink-500); white-space: nowrap; }

.stellenkarte__titel {
  font-size: var(--fs-md); font-weight: 600; color: var(--ink-900);
  line-height: 1.25;
}
/* Die ganze Karte ist die Trefferfläche des Titellinks, nicht nur die
   Textzeile. Eine Zeile Fließtext misst 27px Höhe und wäre am Telefon
   ein zu kleines Ziel. Trägt eine Karte keinen Link, entsteht auch keine
   Trefferfläche: die Regel hängt am a, nicht an der Karte. */
.stellenkarte__titel a::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border-radius: var(--r-lg);
}
.stellenkarte__titel a:hover { color: var(--orange-text); }
.stellenkarte__mwd {
  font-size: var(--fs-base); font-weight: 400; color: var(--ink-500);
  white-space: nowrap;
}

.stellenkarte__firma {
  margin-top: var(--sp-2);
  font-size: var(--fs-base); color: var(--ink-700);
  max-width: none;
}
.stellenkarte__ort {
  margin-top: var(--sp-2);
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-base); color: var(--ink-600);
  max-width: none;
}
.stellenkarte__ort svg { width: 17px; height: 17px; color: var(--marker-auf); flex: 0 0 17px; }


/* --- BESCHREIBUNGSANRISS -------------------------------------------
   Die Live-Ergebnisliste erzeugt ein schlichtes p.beschreibung__anriss
   mit job.summary; gestaltet wird es in public-supabase.css und
   public-jobs.css. Der früher hier vertagte, unerreichbare
   details/summary-Zweig wurde mit W8 am 11.08.2026 entfernt.
   ------------------------------------------------------------------ */

/* --- DICHTE 2: KOMPAKT, im Wischbereich ----------------------------
   Feste Breite, damit scroll-snap etwas zum Einrasten hat. Unter 900px
   ist das die Form der Premium-Stellen auf der Startseite.
   ------------------------------------------------------------------ */
.stellenkarte--kompakt { flex: 0 0 78vw; max-width: 300px; }
@media (min-width: 640px) { .stellenkarte--kompakt { flex: 0 0 306px; } }
@media (min-width: 900px) {
  .stellenkarte--kompakt { flex: 0 0 auto; max-width: none; }
}


/* --- DICHTE 3: ZEILE -----------------------------------------------
   Ab 900px eine Zeile mit Haarlinie statt einer Karte. Zwei Gründe, und
   beide standen schon vorher im Stylesheet, nur für einen der beiden
   Seiten:
   Erstens verbietet DESIGN.md endlose identische Kartenraster. Zwölf
   formgleiche Karten im Dreierraster sind genau das.
   Zweitens deckten zehn fast weiße Karten rund 42 Prozent des
   dunkelgrünen Bandes ab, das Grün wurde zur 20px-Fuge.
   Die ersten drei Treffer bleiben Karten, alles danach ist Zeile.

   Die Zeile bringt KEINE eigene Fläche mit, sie liegt auf der Fläche
   des Bandes. Deshalb gibt sie die helle Bindung, die sie als Karte
   trägt, mit „inherit" wieder an ihre Umgebung zurück. Auf dem
   dunkelgrünen Band der Startseite steht sie damit hell, in der
   Jobbörse auf Sand dunkel, und das ohne eine einzige Farbangabe.
   ------------------------------------------------------------------ */
@media (min-width: 900px) {
  .stellenkarte--zeile { grid-column: 1 / -1; width: 100%; }
  .stellenkarte--zeile .stellenkarte__körper {
    --ink-900: inherit; --ink-800: inherit; --ink-700: inherit;
    --ink-600: inherit; --ink-500: inherit; --ink-400: inherit;
    --linie: inherit; --linie-2: inherit; --rand-ui: inherit;
    --fokus: inherit; --füllung-still: inherit; --füllung-leise: inherit;
    --rand-still: inherit; --marker-auf: inherit; --haken-zeichen: inherit;
    display: block;
    height: auto; min-height: 0;
    padding: var(--sp-4) var(--sp-2);
    background: transparent;
    border: none; border-bottom: 1px solid var(--linie-2);
    border-radius: 0;
    color: inherit; line-height: var(--lh-text);
  }
  .stellenkarte--zeile .stellenkarte__körper:hover {
    transform: none; box-shadow: none; background: var(--füllung-leise);
  }
  /* Die Zeilenliste zeigt kein Kartenbild. Sieben Platzhalter in einer
     Spalte wären sieben leere Kästchen, die es in der Vorlage nicht
     gibt: dort tragen nur die Karten ein Foto. Der Anriss entfällt aus
     demselben Grund, die Zeile ist ein Verzeichnis und kein Auszug. */
  .stellenkarte--zeile .stellenkarte__medien { display: none; }

  /* ZWEI SPALTEN von 900 bis 1199, VIER erst darüber.
     Nachgemessen bei 900px: vier Spalten ließen für den Titel 118px,
     „Produktmanager" brach dort zu „Produktma-nager" um und der
     Firmenname lief über drei Zeilen. Eine Zeile, die dreizeilig wird,
     ist keine Zeile mehr.
     Deshalb hier: Abzeichen und Datum links, Titel, Firma und Ort
     rechts gestapelt. Ab 1200px ist Platz für die vier Spalten. */
  .stellenkarte--zeile .stellenkarte__text {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: baseline; column-gap: var(--sp-6); row-gap: 4px;
  }
  .stellenkarte--zeile .stellenkarte__kopf {
    grid-column: 1; grid-row: span 3; align-self: start;
    margin-bottom: 0; gap: var(--sp-4); justify-content: flex-start;
    flex-direction: column; align-items: flex-start;
  }
  .stellenkarte--zeile .stellenkarte__titel {
    grid-column: 2;
    font-size: var(--fs-base); font-weight: 600;
  }
  .stellenkarte--zeile .stellenkarte__firma,
  .stellenkarte--zeile .stellenkarte__ort { grid-column: 2; margin-top: 0; }
  /* IN DER ZEILE VERLIERT DAS ABZEICHEN SEINE FLÄCHE.
     Ein Merkmal, das jeder Eintrag trägt, unterscheidet nichts. Zwölf
     bernsteinfarbene Flächen sind zusammen die größte Farbfläche der
     Trefferliste, während Orange dort genau einmal vorkommt: damit wäre
     die Auszeichnung lauter als die Aktion, und die Rangfolge der
     Farbrollen kippt. Zusätzlich liegen Bernstein (Farbwinkel 78) und
     das Orange der Aktion (47) nur 31 Grad auseinander; nebeneinander
     lesen sie als ein Farbfeld mit Streuung statt als zwei Rollen.
     Die Fläche bleibt deshalb den ersten drei Treffern vorbehalten.
     Der Wortlaut PREMIUM bleibt unverändert, nur die Lautstärke sinkt.
     Sobald es Treffer ohne Premium gibt, kann die Fläche zurückkommen. */
  .stellenkarte--zeile .auszeichnung {
    background: transparent;
    border-color: var(--bernstein-rand);
    color: var(--ink-700);
  }
}

@media (min-width: 1200px) {
  /* Vier Spalten: Abzeichen und Datum, Titel, Firma, Ort. Eine Zeile
     ist hier wirklich eine Zeile. */
  .stellenkarte--zeile .stellenkarte__text {
    grid-template-columns: 15rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-8); row-gap: 0;
  }
  .stellenkarte--zeile .stellenkarte__kopf {
    grid-row: auto; flex-direction: row; align-items: center;
  }
  .stellenkarte--zeile .stellenkarte__firma { grid-column: 3; }
  .stellenkarte--zeile .stellenkarte__ort   { grid-column: 4; }
}


/* =====================================================================
   07  BAUSTEIN: EINGABEFELD
   Höhe 56px, Schriftgröße mindestens 16px. Darunter zoomt iOS Safari
   beim Fokus ins Feld und schiebt den Rest der Seite weg. Genau das
   darf bei einer Suche im ersten Bildschirm nicht passieren.
   Der Rand ist --rand-ui und hält damit 3:1, das Feld bleibt auch bei
   Sonnenlicht auf einem Telefondisplay als Feld erkennbar.
   ===================================================================== */
.eingabe, .auswahl {
  width: 100%; min-height: 56px;
  padding: 12px var(--sp-4);
  font-size: max(16px, var(--fs-base));
  color: var(--ink-900); background: var(--karte);
  border: 1px solid var(--rand-ui); border-radius: var(--r-md);
  transition: border-color var(--t-basis) var(--ease);
}
.eingabe::placeholder { color: var(--ink-400); }
.eingabe:hover, .auswahl:hover { border-color: var(--ink-700); }
/* Kein outline:none. Der globale Ring aus Abschnitt 03 bleibt sichtbar,
   der Randwechsel ist nur die Zugabe. */
.eingabe:focus, .auswahl:focus { border-color: var(--ink-900); }

.auswahl {
  appearance: none;
  color: var(--ink-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23566b5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}

.feld { position: relative; flex: 1 1 auto; min-width: 0; }
.feld__ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--ink-500); pointer-events: none;
}
.feld .eingabe { padding-left: 46px; }


/* =====================================================================
   08  BAUSTEIN: WISCHBEREICH
   Mobil ein reiner CSS-Scrollbereich mit Schnappen, kein Slider-Skript.
   Der Anschnitt bis zum Displayrand ist der sichtbare Hinweis darauf,
   dass man wischen kann.
   ===================================================================== */
.spur {
  display: flex; gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  padding-block: 4px 12px;
  scrollbar-width: none;
}
.spur::-webkit-scrollbar { display: none; }
.spur > * { scroll-snap-align: start; scroll-snap-stop: always; }

.spur__balken {
  height: 3px; border-radius: var(--r-pill);
  background: var(--linie-dunkel);
  overflow: hidden;
  margin-top: var(--sp-3);
}
.spur__balken > i {
  display: block; height: 100%; width: 30%;
  border-radius: var(--r-pill);
  background: var(--marker-licht);
}
.spur__balken[hidden] { display: none; }

/* Die zwei Pfeilknöpfe sind ersatzlos entfallen. Sie waren erst ab
   900px sichtbar, und genau ab 900px ist der Wischbereich jetzt ein
   Raster ohne Scrollstrecke: sie hätten nichts mehr zu scrollen gehabt.
   Unterhalb von 900px wird gewischt, dort standen sie nie. Eine Bauform
   und ein Stück Skript weniger. */


/* =====================================================================
   09  KOPF UND NAVIGATION
   Der Kopf ist durchgehend dunkelgrün, nicht transparent. Damit steht
   das helle Sandton-Logo immer auf tragender Fläche, der Kopf braucht
   kein JavaScript und der Hero verliert seinen Deckel-Effekt.
   Das mobile Menü ist ein natives details/summary und funktioniert
   ohne JavaScript, genau wie der Filter und die FAQ.
   ===================================================================== */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--kopf-h-mobil);
  background: var(--dunkel-tief);
  border-bottom: 1px solid var(--linie-dunkel);
  transition: box-shadow var(--t-basis) var(--ease);
}
.kopf.ist-gescrollt { box-shadow: 0 6px 24px oklch(0.15 0.03 155 / 0.35); }

.kopf__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
}
.kopf__marke {
  display: flex; align-items: center; flex: 0 0 auto;
  min-height: 44px;                    /* Trefferfläche, siehe unten  */
  margin-block: -9px;                  /* Kopfhöhe bleibt unverändert */
  position: relative; z-index: 95;
}
.kopf__logo { height: 26px; width: auto; }

/* --- Mobiles Menü als details/summary ---------------------------- */
.menü { position: static; }

.burger {
  position: relative; z-index: 95;
  width: 44px; height: 44px; margin-right: -8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; border-radius: var(--r-sm);
  list-style: none; cursor: pointer;
}
.burger::-webkit-details-marker { display: none; }
.burger__balken {
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background: var(--auf-dunkel);
  transition: transform var(--t-basis) var(--ease), opacity var(--t-schnell) var(--ease);
}
.menü[open] .burger__balken:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menü[open] .burger__balken:nth-child(2) { opacity: 0; }
.menü[open] .burger__balken:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menü__panel {
  position: fixed; inset: var(--kopf-h-mobil) 0 0 0;
  z-index: 90;
  background: var(--dunkel-tief);
  padding: var(--sp-6) var(--gutter) var(--sp-12);
  overflow-y: auto;
  animation: menü-auf var(--t-basis) var(--ease) both;
}

/* Eine Autorenregel auf dem Panel darf die native Verbergung eines
   geschlossenen details nicht überschreiben. Das verhinderte bei stark
   vergrößerter Schrift unsichtbaren horizontalen Seitenüberstand. */
@media (max-width: 1100px) {
  .menü:not([open]) > .menü__panel { display: none; }
}
@keyframes menü-auf {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.nav__liste { display: flex; flex-direction: column; }
.nav__liste > li { border-bottom: 1px solid var(--linie-dunkel); }

.nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 52px;
  font-size: var(--fs-base); font-weight: 500;
  color: var(--auf-dunkel-leise);
  transition: color var(--t-basis) var(--ease);
}
.nav__link:hover { color: var(--auf-dunkel); }

.nav__summary { list-style: none; cursor: pointer; }
.nav__summary::-webkit-details-marker { display: none; }
.nav__summary svg { width: 18px; height: 18px; transition: transform var(--t-basis) var(--ease); }
.branchen[open] > .nav__summary svg { transform: rotate(180deg); }

.branchen__liste { padding-bottom: var(--sp-4); }
.branchen__liste a {
  display: flex; align-items: center;
  min-height: 44px;
  font-size: var(--fs-base);
  color: var(--auf-dunkel-still);
  transition: color var(--t-basis) var(--ease);
}
.branchen__liste a:hover { color: var(--marker-licht); }

/* Der Login im mobilen Menü nutzt die volle Zeilenhöhe des Menüs,
   nicht die kleine Kopfzeilen-Variante. */
.nav__login { margin-top: var(--sp-8); width: 100%; min-height: 52px; }

@media (min-width: 1101px) {
  html { scroll-padding-top: calc(var(--kopf-h) + 16px); }
  :is(h1, h2, h3, h4)[id] { scroll-margin-top: calc(var(--kopf-h) + 20px); }
  .kopf { height: var(--kopf-h); }
  .kopf__logo { height: 30px; }
  .burger { display: none; }

  /* Ab hier ist das details-Element nur noch eine Hülle. Beide Regeln
     sind nötig: die eine für Browser mit ::details-content, die andere
     für alle übrigen, in denen die Autorenangabe display die
     Browservorgabe schlägt. */
  .menü::details-content { content-visibility: visible; display: contents; }
  .menü { display: flex; align-items: center; flex: 1 1 auto; }

  .menü__panel {
    position: static; inset: auto;
    background: transparent; padding: 0; overflow: visible;
    animation: none;
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--sp-5);
    flex: 1 1 auto;
  }
  .nav__liste { flex-direction: row; align-items: center; gap: var(--sp-4); }
  .nav__liste > li { border-bottom: none; position: relative; }

  .nav__link {
    position: relative;
    min-height: 44px;
    color: var(--auf-dunkel-leise);
    white-space: nowrap;
  }
  /* Unterlinie wächst von null auf volle Breite. Nur transform. */
  .nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 8px;
    height: 2px; border-radius: 2px; background: var(--orange);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-basis) var(--ease);
  }
  .nav__link:hover::after { transform: scaleX(1); }

  .nav__login { margin-top: 0; width: auto; min-height: 44px; padding: 0 var(--sp-4); }

  /* Branchen als Aufklapp-Karte.
     Erst hier wird das Panel zur hellen Insel. Es bindet deshalb hier
     die Rollen auf die hellen Quellwerte zurück, so wie es die Klasse
     .hell-insel an anderer Stelle tut. Unterhalb dieser Breite liegt es
     durchsichtig auf --dunkel-tief und behält die dunkle Bindung.
     Das ersetzt die frühere Einzelausnahme für den Fokusring: nicht nur
     der Ring, auch Text, Linie und Umriss hängen an der Fläche. */
  .branchen__panel {
    --ink-900: var(--ink-hell-900);
    --ink-800: var(--ink-hell-800);
    --ink-700: var(--ink-hell-700);
    --ink-600: var(--ink-hell-600);
    --linie:   var(--linie-hell);
    --linie-2: var(--linie-hell-2);
    --rand-ui: var(--rand-ui-hell);
    --fokus:   var(--fokus-hell);
    position: absolute; top: calc(100% + 14px); right: 0;
    width: 580px; max-width: calc(100vw - 2 * var(--gutter));
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: var(--sp-4);
    z-index: 10;
  }
  .branchen__liste {
    padding-bottom: 0;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-4);
  }
  .branchen__liste a {
    min-height: 44px; color: var(--ink-700); font-size: var(--fs-base);
    padding-inline: var(--sp-2); border-radius: var(--r-sm);
  }
  .branchen__liste a:hover { color: var(--ink-900); background: var(--sand-ton); }
}

@media (min-width: 1200px) {
  .menü__panel { gap: var(--sp-6); }
  .nav__liste { gap: var(--sp-5); }
}


/* =====================================================================
   10  HERO MIT JOBSUCHE
   Foto oben, darunter ein geschlossenes Modul aus dunkelgrüner Tafel
   und heller Suchleiste. Die Tafel ist deckend, nicht durchscheinend:
   damit ist der Textkontrast rechnerisch belegbar (14,1:1 für die H1)
   statt vom Bildinhalt abhängig, und beide Textschatten entfallen.
   Der Hero endet nicht auf der Faltkante, das nächste Band schaut
   rund ein Zehntel der Bildschirmhöhe hervor.
   ===================================================================== */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--kopf-h-mobil) + var(--sp-14));
  padding-bottom: var(--sp-6);
  overflow: hidden;
  isolation: isolate;
  background: var(--dunkel-tief);
}
.hero__bild {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 32%;
}
/* Im Hochkant-Ausschnitt füllt das Bild die Höhe exakt aus, object-position
   greift dort senkrecht nicht mehr. Damit der Gärtner nicht auf Augenhöhe
   von der Texttafel abgeschnitten wird, ragt das Bild oben hinaus. */
@media (max-width: 639px) {
  .hero__bild { bottom: auto; height: 132%; top: -26%; }
}
/* Nur noch ein leichter Schleier von oben, damit die Bildkante unter
   dem Kopf nicht hart abreißt. Er trägt keinen Text mehr. */
.hero__schleier {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    oklch(0.20 0.03 155 / 0.55) 0%,
    oklch(0.20 0.03 155 / 0.18) 34%,
    oklch(0.20 0.03 155 / 0.10) 100%);
}

/* Tafel und Suchleiste sind EIN Baukörper, deshalb hat die Tafel unten
   keinen Radius. Genau deshalb müssen beide auch gleich breit sein.
   Vorher stand hier 1040px, die Leiste dagegen ab 900px auf 720px:
   bei 1440px lief die Unterkante der dunklen Tafel 320px weiter nach
   rechts als die helle Leiste und endete dort als harte 90-Grad-Ecke
   frei über dem Foto. Die Breite steht jetzt an EINER Stelle, am Modul,
   und die Leiste füllt sie aus. */
.hero__modul { width: 100%; max-width: 720px; }

.hero__tafel {
  background: var(--dunkel);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  animation: auftakt var(--t-ruhig) var(--ease) both;
}
/* Kein font-style:italic. Die Kicker-Rolle trägt sich über Größe,
   Gewicht 500, die leisere Farbe und eine leichte Sperrung. Die
   synthetische Neigung leistete nichts, was die Farbe nicht schon
   leistet, und traf ausgerechnet die erste Textzeile der Seite. */
.hero__kicker {
  font-size: var(--fs-base);
  font-weight: 500; letter-spacing: 0.01em;
  /* Die Zeilenhöhe stand auf „normal". Bei 17,5px und einer Zeile, die
     am Telefon über drei Zeilen läuft, entstand daraus ein zerfaserter
     Block direkt über der H1. 1,4 ist bewusst gesetzt: eng genug, damit
     der Kicker als ein Textkörper liest, weit genug für die Umlaute. */
  line-height: 1.4;
  color: var(--auf-dunkel-leise);
  max-width: 44ch;
  margin-bottom: var(--sp-3);
  animation: auftakt var(--t-ruhig) var(--ease) 60ms both;
}
.hero__titel {
  color: var(--auf-dunkel);
  text-transform: uppercase;
  max-width: 17ch;
  /* Ausdrücklich hier, nicht nur über die Sammelregel in Abschnitt 03.
     Zusammen mit dem geschützten Leerzeichen vor dem Halbgeviertstrich
     im HTML verhindert das die Zeile „– BERUFE" bei schmalen
     Bildschirmen. */
  text-wrap: balance;
  animation: auftakt var(--t-ruhig) var(--ease) 120ms both;
}
.hero__balken {
  /* Grün, nicht orange. Zwei Gründe: die Vorlage nennt ausdrücklich
     einen grünen Balken, und Orange ist die Aktionsfarbe. Der Balken
     ist reine Auszeichnung und säße 290px über dem orangen Suchknopf,
     der einzigen echten Handlung im ersten Bildschirm. Zwei
     Bedeutungen in einer Farbe, im wichtigsten Modul der Seite. */
  display: block; width: 120px; height: 5px;
  border-radius: 2px; background: var(--marker);
  margin-top: var(--sp-5);
  transform-origin: left;
  animation: balken var(--t-ruhig) var(--ease) 180ms both;
}

/* --- Schreibmaschinen-Kasten unter der H1 -------------------------
   Markenmoment der Live-Seite (Komponente TypeWriter im Bundle). Der
   Kasten schreibt und löscht zyklisch vier Werte, die im Browser
   abgelesen wurden: „im GaLaBau", „im Pflanzenhandel",
   „in der Kultivierung", „in der Landwirtschaft".
   Zwei Bauregeln:
   1. Die Breite reserviert ein unsichtbares Element mit dem längsten
      Wert. Ohne das springt bei jedem Wechsel das ganze Modul.
   2. Die wechselnde Zeile ist aria-hidden. Daneben steht derselbe
      Inhalt einmal statisch in .sr-only, sonst liest eine Vorlesehilfe
      jeden einzelnen Buchstaben als neue Änderung vor.
   ------------------------------------------------------------------ */
.hero__typo { margin-top: var(--sp-5); max-width: none; }
.hero__typo-kasten {
  position: relative; display: inline-block;
  padding: 7px 14px;
  background: var(--marker);
  border-radius: var(--r-sm);
  font-family: var(--schrift-display);
  font-size: var(--fs-base); font-weight: 600;
  letter-spacing: var(--ls-titel);
  color: var(--auf-dunkel);
  line-height: 1.3;
  animation: auftakt var(--t-ruhig) var(--ease) 200ms both;
}
/* BREITENRESERVE. Der Kasten darf beim Schreiben und Löschen nicht
   atmen, sonst zappelt das ganze Hero-Modul im Sekundentakt.
   Das unsichtbare Geschwisterelement trägt den längsten der vier Werte
   („in der Landwirtschaft") und steht als inline-block im Fluss. Es
   bestimmt die Breite und misst dabei in genau der Schrift, die gerade
   aktiv ist, auch solange die Display-Schrift noch lädt. visibility:hidden, nicht
   display:none, sonst misst es nichts.
   Die 5px rechts sind der Platz für den Schreibstrich (2px breit, 3px
   Abstand), der sonst über die Reserve hinausliefe.
   Eine zusätzliche Untergrenze in ch stünde hier bewusst NICHT: ch ist
   die Breite der Null und damit breiter als der Schnitt der
   Kleinbuchstaben. 21ch reservierten rund 30px mehr, als das längste
   Wort braucht, und der Kasten hätte dauerhaft eine leere rechte
   Flanke. */
.hero__typo-platz {
  display: inline-block;
  visibility: hidden;
  white-space: nowrap;
  padding-right: 5px;
}
.hero__typo-lauf {
  position: absolute; left: 14px; top: 7px; right: 14px;
  white-space: nowrap; text-align: left;
}
.hero__typo-strich {
  display: inline-block; width: 2px; height: 1em;
  margin-left: 3px; vertical-align: -0.12em;
  background: currentColor;
  animation: blinken 1000ms steps(2, jump-none) infinite;
}

@keyframes auftakt {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes blinken {
  from { opacity: 1; }
  to   { opacity: 0.15; }
}
@keyframes balken {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: none; }
}

/* --- Suchleiste, sitzt bündig unter der Tafel --------------------
   EIN Feld und ein runder Knopf, so wie die Live-Seite es zeigt. Die
   frühere Fassung hatte zwei Felder und einen aufklappbaren
   Zusatzfilter in derselben Zeile. Beides ist entfallen: der Ort wird
   laut Vorlage im Filter-Popup abgefragt, und der Aufklapp gab es nie.
   Der runde Knopf sucht nicht, er öffnet den Filter. Er trägt trotzdem
   das gefüllte Orange, weil er die eine wichtigste Handlung des ersten
   Bildschirms ist. Wer nur tippt und Enter drückt, schickt das
   Formular direkt ab, dafür braucht es keinen zweiten Knopf.
   ------------------------------------------------------------------ */
.suche {
  background: var(--karte);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: 12px;
  display: flex; align-items: stretch; gap: 10px;
  width: 100%;
  animation: auftakt var(--t-ruhig) var(--ease) 120ms both;
}
.suche__beruf { flex: 1 1 auto; min-width: 0; }
/* Unter 640px trägt das Feld kein Lupensymbol. Bei 360px Breite bleiben
   sonst 174px für den Text, der Platzhalter „Welchen Job suchst du?"
   braucht 190px und bricht mitten im Satz ab. Ein abgeschnittener
   Platzhalter kostet mehr als ein fehlendes Symbol, zumal daneben schon
   ein Knopf mit Symbol steht. */
@media (max-width: 639px) {
  .suche__beruf .feld__ico { display: none; }
  .suche__beruf .eingabe { padding-left: var(--sp-4); }
}

.suche__knopf {
  flex: 0 0 56px; width: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0;
  border-radius: var(--r-pill);
  background: var(--orange); color: var(--dunkel-tief);
  box-shadow: var(--sh-orange);
  transition: background var(--t-basis) var(--ease), transform var(--t-schnell) var(--ease);
}
.suche__knopf svg { width: 23px; height: 23px; flex: 0 0 23px; }
.suche__knopf:hover { background: var(--orange-tief); }
.suche__knopf:active { transform: translateY(1px); }


@media (min-width: 640px) {
  .hero { min-height: 84svh; max-height: 760px; padding-bottom: var(--sp-8); }
  .hero__tafel { padding: var(--sp-10) var(--sp-8) var(--sp-8); }
  .hero__kicker { max-width: none; }
  .suche { padding: 14px; }
  .hero__typo-kasten { font-size: var(--fs-md); }
}

@media (min-width: 900px) {
  .hero {
    min-height: 86svh; max-height: 820px;
    padding-top: calc(var(--kopf-h) + var(--sp-16));
    padding-bottom: var(--sp-10);
  }
  .hero__tafel { padding: var(--sp-12) var(--sp-12) var(--sp-10); }
  .hero__titel { max-width: 20ch; }
  /* Keine eigene Breite mehr. Die Leiste läuft über die volle
     Modulbreite, sonst bricht der Baukörper rechts auseinander. */
}


/* =====================================================================
   10b  FILTER-POPUP
   Die Vorlage öffnet über den runden Knopf im Hero ein MODALES POPUP
   auf dunkelgrünem Grund, keinen Aufklapp in der Suchzeile. Alle Texte
   darin stehen wörtlich in NACHTRAG 1 des Inhaltsdokuments.
   Gebaut als natives dialog-Element, kein Framework. showModal bringt
   Fokusfalle, Escape und Hintergrundsperre vom Browser mit, dafür
   braucht es kein eigenes Skript.

   RÜCKFALLWEG OHNE JAVASCRIPT (unten im Block „kein-js"):
   showModal selbst braucht Skript, und ein dialog ohne open-Attribut
   ist display:none. Ohne Rückfall wäre der Filter dann unerreichbar.
   Deshalb trägt das html-Element bis zum ersten Skriptlauf die Marke
   „kein-js". Solange sie steht, ist derselbe Dialog ein gewöhnlicher
   Abschnitt mitten in der Seite, und der runde Knopf im Hero ist ein
   Anker darauf. Läuft das Skript, verschwindet die Marke, bevor das
   erste Bild steht, und niemand sieht den Zwischenzustand.
   ===================================================================== */
.filter {
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-height: min(88svh, 780px);
  margin: auto;
  padding: 0; border: none;
  border-radius: var(--r-xl);
  background: var(--dunkel);
  color: var(--auf-dunkel-leise);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.filter[open] { display: flex; flex-direction: column; }
.filter::backdrop { background: oklch(0.15 0.03 155 / 0.66); }

.filter__kopf {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--linie-dunkel-2);
}
.filter__titel { font-size: var(--fs-md); font-weight: 700; }
.filter__schließen {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--marker); color: var(--auf-dunkel);
  transition: background var(--t-basis) var(--ease);
}
.filter__schließen svg { width: 20px; height: 20px; }
.filter__schließen:hover { background: var(--marker-licht); color: var(--dunkel-tief); }

.filter__körper {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.filter__auswahlzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.filter__auswahl-titel { font-size: var(--fs-base); font-weight: 600; color: var(--auf-dunkel); }
.filter__reset {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding-inline: 2px;
  font-size: var(--fs-base); font-weight: 500;
  color: var(--marker-licht);
  text-decoration: underline; text-underline-offset: 3px;
}
.filter__reset svg { width: 17px; height: 17px; flex: 0 0 17px; }
.filter__reset:hover { color: var(--auf-dunkel); }
.filter__leer {
  margin-top: calc(var(--sp-4) * -1 + 4px);
  padding: var(--sp-4);
  border: 1px dashed var(--rand-ui-dunkel); border-radius: var(--r-md);
  font-size: var(--fs-base); color: var(--auf-dunkel-still);
  max-width: none;
}
/* Sobald etwas gewählt ist, steht hier kein Leerhinweis mehr, sondern
   Inhalt. Deshalb durchgezogene Kante statt gestrichelter und die volle
   Textfarbe. */
.filter__leer.ist-gefüllt {
  border-style: solid;
  border-color: var(--linie-dunkel-2);
  background: var(--füllung-dunkel);
  color: var(--auf-dunkel);
}

/* --- Branchenauswahl ----------------------------------------------
   Geschlossen ein weißes Feld mit „Wähle hier aus...", genau wie die
   Vorlage es zeigt. Geöffnet 23 Kontrollkästchen. Natives
   details/summary, also ohne Skript vollständig bedienbar, und am
   Telefon deutlich besser zu treffen als ein multiple-select, bei dem
   man mit gedrückter Taste in einer Liste zieht.
   ------------------------------------------------------------------ */
.branchenwahl { min-width: 0; }
.branchenwahl__feld {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: 56px;
  padding: 12px var(--sp-4);
  font-size: max(16px, var(--fs-base));
  color: var(--ink-700); background: var(--karte);
  border: 1px solid var(--rand-ui); border-radius: var(--r-md);
  transition: border-color var(--t-basis) var(--ease);
}
.branchenwahl__feld::-webkit-details-marker { display: none; }
.branchenwahl__feld:hover { border-color: var(--ink-700); }
.branchenwahl__feld svg {
  width: 18px; height: 18px; flex: 0 0 18px; color: var(--ink-500);
  transition: transform var(--t-basis) var(--ease);
}
.branchenwahl[open] > .branchenwahl__feld {
  border-color: var(--ink-900);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.branchenwahl[open] > .branchenwahl__feld svg { transform: rotate(180deg); }
/* Das Feld ist eine helle Insel im dunklen Popup. Der Fokusring liegt
   außen, also auf Dunkelgrün, und bleibt deshalb der helle Ring. */
.branchenwahl__liste {
  max-height: 264px; overflow-y: auto;
  padding: var(--sp-2);
  background: var(--karte);
  border: 1px solid var(--ink-900); border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.haken {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--ink-800); cursor: pointer;
}
.haken:hover { background: var(--füllung-leise); }
.haken input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.haken__kasten {
  flex: 0 0 22px; width: 22px; height: 22px;
  border: 1px solid var(--rand-ui); border-radius: 5px;
  background: var(--füllung-still);
}
.haken__text { font-size: var(--fs-base); line-height: 1.3; }
.haken input:checked + .haken__kasten {
  background: var(--marker-auf) center / 15px 15px no-repeat;
  border-color: var(--marker-auf);
  background-image: var(--haken-zeichen);
}
.haken input:focus-visible + .haken__kasten {
  outline: 3px solid var(--fokus); outline-offset: 2px;
}
/* Fünf sind gesetzt, die übrigen sind vorerst zu. Das Skript schaltet
   sie ab, die Kante bleibt sichtbar, damit erkennbar ist, dass hier
   etwas WÄRE, nur gerade nicht wählbar. */
.haken input:disabled ~ .haken__text { color: var(--ink-400); }
.haken input:disabled + .haken__kasten { border-style: dashed; opacity: 0.55; }
.haken:has(input:disabled) { cursor: default; }
.haken:has(input:disabled):hover { background: transparent; }

.filter__gruppe { border: none; padding: 0; margin: 0; min-width: 0; }
.filter__frage {
  padding: 0; margin-bottom: 6px;
  font-family: var(--schrift-display);
  font-size: var(--fs-base); font-weight: 600;
  color: var(--auf-dunkel);
}
.filter__hinweis {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs); color: var(--auf-dunkel-still);
  max-width: none;
}
.filter__hinweis svg { width: 16px; height: 16px; flex: 0 0 16px; }

.filter__knöpfe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.wahl { position: relative; display: block; }
.wahl input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.wahl span {
  /* Der Haken des gewählten Zustands braucht Platz in der Zeile.
     Deshalb schmaleres Innenpolster und ein knapper Abstand: sonst
     bricht „Saisonarbeit" schon bei 375px in zwei Zeilen, sobald es
     gewählt ist, und das Raster wirkt beim Anklicken unruhig. */
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px; padding: 0 var(--sp-2);
  border: 1px solid var(--rand-ui-dunkel); border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 500;
  color: var(--auf-dunkel); text-align: center;
  transition: background var(--t-basis) var(--ease), border-color var(--t-basis) var(--ease);
}
.wahl input:hover + span { background: var(--füllung-dunkel); }
/* GEWÄHLTER ZUSTAND, dreifach ausgezeichnet.
   Vorher: Fläche in --marker, gemessen 2,97:1 gegen die Popup-Fläche
   (nötig sind 3:1), und Farbe war das einzige Merkmal. Jetzt:
   1. Fläche in --marker-licht, nachgerechnet 8,52:1 gegen --dunkel.
      Der Text darauf steht in --dunkel-tief, 9,98:1.
   2. Ein Haken vor der Beschriftung, also ein Merkmal ohne Farbe.
   3. Gewicht 700 statt 500.
   Die Umkehr hell-auf-dunkel ist zusätzlich das stärkste Signal, das
   ein Knopfraster hergibt, und sie funktioniert auch bei jeder Form von
   Farbsehschwäche. */
.wahl input:checked + span {
  background: var(--marker-licht);
  border-color: var(--marker-licht);
  color: var(--dunkel-tief);
  font-weight: 700;
}
.wahl input:checked + span::before {
  content: ''; flex: 0 0 15px; width: 15px; height: 15px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071b0f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
.wahl input:focus-visible + span { outline: 3px solid var(--fokus-dunkel); outline-offset: 2px; }

.filter__fuß {
  flex: 0 0 auto;
  padding: var(--sp-5);
  border-top: 1px solid var(--linie-dunkel-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.filter__senden { width: 100%; }

/* --- Rückfallweg ohne JavaScript ----------------------------------
   Greift nur, solange die Marke „kein-js" am html-Element steht, also
   genau dann, wenn kein Skript läuft. Der Dialog wird zum normalen
   Abschnitt: er steht im Fluss zwischen Hero und Zahlenleiste, hat
   keine Höhenbegrenzung und keinen eigenen Scrollbereich mehr.
   Das Schließkreuz entfällt dabei. Es ist ein Absendeknopf in einem
   form[method=dialog] und hätte ohne Skript nichts zu schließen, ein
   sichtbarer Knopf ohne Wirkung ist schlechter als keiner.
   scroll-margin-top hält den Sprung vom Hero unter dem festen Kopf. */
.kein-js .filter {
  display: flex; flex-direction: column;
  position: static;
  width: min(560px, calc(100% - 2 * var(--gutter)));
  max-height: none;
  margin: var(--sp-12) auto;
  scroll-margin-top: calc(var(--kopf-h) + var(--sp-4));
}
.kein-js .filter__körper { overflow-y: visible; }
.kein-js .filter__schließen { display: none; }
.kein-js .filter__kopf { justify-content: flex-start; }


/* =====================================================================
   11  ZAHLENLEISTE
   Kein Kennzahlen-Klischee mit riesiger Ziffer und Miniaturlabel,
   sondern zwei Buchungszeilen: Zahl und Text auf einer Grundlinie,
   getrennt durch Haarlinien.
   ===================================================================== */
.zahlen { padding-block: var(--sp-10); }
/* „Unser Karrierenetzwerk umfasst" ist in der Vorlage ein Satz und ein
   echtes H2. Es stand hier als 12,5px-Eyebrow in Versalien und war
   damit kleiner und leiser als der Fließtext, den es einleitet. Jetzt
   die reguläre H2-Behandlung eine Stufe unter --fs-xl, weil der Satz
   eine Leiste einleitet und keine ganze Sektion. */
/* NACHTRAG zur Skala: sechs verschiedene Strukturrollen lagen alle auf
   --fs-md (22px), während --fs-lg (27,5px) keine einzige Überschrift
   trug. Zwischen H2 (43px) und dieser Sammelstufe klaffte Faktor 1,95,
   die Stufe dazwischen war rein dekorativ belegt. Zwei Rollen sind
   deshalb auf --fs-lg gehoben, und zwar die beiden, die ihren Block
   anführen: dieser Satz hier (das H2 der Zahlenleiste) und der
   Spaltentitel der Kategorien. Die übrigen vier bleiben auf --fs-md,
   sie stehen innerhalb eines Blocks und nicht an seiner Spitze. */
.zahlen__titel {
  font-family: var(--schrift-display);
  font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: var(--ls-titel); text-transform: none;
  color: var(--ink-900);
  margin-bottom: var(--sp-5);
}
.zahlen__liste { border-top: 1px solid var(--linie-2); }
.zahl {
  display: flex; align-items: baseline; gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--linie-2);
}
.zahl__wert {
  font-family: var(--schrift-display);
  font-size: var(--fs-xl); font-weight: 700;
  color: var(--ink-900);
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.zahl__plus { color: var(--orange-text); margin-left: 1px; }
.zahl__text {
  font-size: var(--fs-base); color: var(--ink-600);
  max-width: none;
}

@media (min-width: 900px) {
  .zahlen__inner { display: grid; grid-template-columns: 4fr 8fr; gap: var(--sp-10); align-items: start; }
  .zahlen__titel { margin-bottom: 0; padding-top: var(--sp-4); }
  .zahl { padding-block: var(--sp-5); gap: var(--sp-6); }
}


/* =====================================================================
   12  PREMIUM-STELLEN
   Dunkles Band in der oberen Hälfte der Seite. Das ist das Kernangebot
   und zugleich die Farbbrücke zur Sidebar des eingeloggten Bereichs.
   Die Sektion trägt bewusst KEINE Überschrift: die Vorlage hat an
   dieser Stelle keine, und eine erfundene wäre eine Inhaltsentscheidung
   der Gründer.
   ===================================================================== */
/* Der frühere Eyebrow „Premium" über dem Band ist ersatzlos entfallen.
   Das Wort steht in der Vorlage ausschließlich als Abzeichen auf den
   Stellenkarten, nie als Sektionsbeschriftung, und jede der zehn Karten
   trägt es bereits selbst. Der Kopf hält jetzt nur noch die Pfeile und
   die Haarlinie. */
/* Vom Kopf bleibt die Haarlinie. Sie eröffnet die Sektion, die keine
   Überschrift trägt und keine tragen darf. */
.premium__kopf {
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--linie-2);
}

/* Der Baustein selbst steht in Abschnitt 06b. Hier steht nur noch, wie
   das Band ihn anordnet.
   Bis 900px ein Wischbereich aus kompakten Karten, darüber drei Karten
   nebeneinander und der Rest als Zeilenliste direkt auf dem Grün.
   Der Wechsel lag vorher bei 1200px und in der Jobbörse gar nicht. Ein
   Baustein mit zwei Umschaltpunkten ist zwei Bausteine; jetzt ist es
   einer, und er schaltet auf beiden Seiten bei 900px. Auf dem Telefon
   bleibt der Wischbereich, dort gehört er hin. */
@media (min-width: 900px) {
  .premium .spur {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0;
  }
  .premium .spur__balken { display: none; }
  /* Die erste Zeile bekommt oben ihre eigene Haarlinie. nth-child(4),
     weil die drei Karten davor auch article-Elemente sind und
     :first-of-type deshalb auf Karte 1 zeigen würde. */
  .premium .stellenkarte--zeile:nth-child(4) .stellenkarte__körper {
    border-top: 1px solid var(--linie-2);
  }
}


/* =====================================================================
   13  KATEGORIEN
   DREI REINE TEXTSPALTEN, keine Bilder und keine Karten. So steht es in
   NACHTRAG 2 und NACHTRAG 4 des Inhaltsdokuments über die Live-Seite:
   Überschrift plus Aufzählung, mehr nicht.

   Was hier entfallen ist und warum:
   - Die drei Fotos. Sie waren im Entwurf hinzuerfunden und standen
     ausgerechnet unmittelbar hinter den Premium-Stellen, also zwei
     bildgetragene Raster direkt hintereinander.
   - Die Schlagwort-Chips für die Bereiche. Sechzehn umrandete Kästchen
     lasen sich wie Filterknöpfe, obwohl nichts davon anklickbar ist.
     Jetzt eine gesetzte Liste mit Marker, wie die Vorlage sie zeigt.

   Die 2px-Oberlinie in --ink-900 bleibt. Sie ist die Bauform, die auf
   dieser Seite auch die Stimmen und die Abschlusszeile tragen, und sie
   hält die drei Spalten ohne Karte zusammen.
   Die Spaltentitel bleiben in --ink-900 und wechseln NICHT ins Grün der
   Live-Seite. Nachgerechnet hielte --marker auf dem hellen Sand 4,56:1
   und wäre damit sogar für Fließtext zulässig, gegenüber den 13,34:1
   von --ink-900 wäre es trotzdem ein Rückschritt. Der Wechsel ist eine
   reine Geschmacksfrage und steht offen, entschieden ist er nicht.
   ===================================================================== */
/* EIN Textblock, nicht drei.
   Vorher standen Vorspann, H2 und Intro als drei getrennte Blöcke mit
   eigener Trennlinie und doppeltem Blockabstand hintereinander: 385px
   Vorrede vor 276px Nutzinhalt. Die Trennlinie ist ersatzlos entfallen,
   die Abstände sind auf einen Absatzabstand zusammengezogen. Der
   Wortlaut und seine Reihenfolge bleiben unverändert.
   Zweitens: der rechte Satzrand sprang. Vorspann und Intro endeten bei
   66ch, das Raster lief bis 1120px durch. Jetzt binden alle drei
   dieselbe Maßgröße:
     Intro und Raster    66ch bei 17,5px
     Vorspann            52,5ch bei 22px  (66 * 17,5/22, also derselbe
                         Wert in Pixeln, nur in seiner eigenen Schrift
                         gerechnet)
   Damit steht eine einzige Satzkante über den ganzen Abschnitt. */
.kategorien__kopf { max-width: var(--zeile); margin-bottom: var(--kopf-abstand); }
/* Läuft bewusst auf --fs-base, nicht auf --fs-md. Der Absatz sollte die
   Vorrede des Bandes VERKÜRZEN; auf 22px gesetzt wuchs der Kopf von 385
   auf 451px bei 1440px, und bei 320px von 289 auf 495px. Damit scrollt
   man rund 900px Prosa, bevor die erste Kategorie erscheint. Auf
   --fs-base misst der Kopf wieder 385px, und Vorspann, H2, Intro und
   Raster enden alle auf derselben Kante, weil sie sich --zeile teilen.
   Die 52.5ch-Sonderrechnung entfällt damit ersatzlos. */
.kategorien__vorspann {
  line-height: 1.5;
  color: var(--ink-800);
  max-width: var(--zeile);
  margin-bottom: var(--sp-6);
}
.kategorien__kopf > h2 { max-width: var(--zeile); }
.kategorien__intro {
  margin-top: var(--sp-4);
  color: var(--ink-600);
  max-width: var(--zeile);
}

.kategorien__raster { display: grid; gap: var(--sp-8); max-width: var(--zeile); }
.kategorie {
  padding-top: var(--sp-5);
  border-top: 2px solid var(--ink-900);
}
/* Bleibt auf --fs-md. Auf --fs-lg gehoben, brach „Dienstleistung" in der
   194px breiten Spalte als „Dienst-leistung" um: das Wort braucht dort
   202px. Die zweite Rolle auf --fs-lg ist deshalb der Vorteil-Titel,
   siehe Abschnitt 14. */
.kategorie__titel { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-4); }

/* Aufzählung als Textspalte. Der Marker ist ein 6px-Quadrat in
   --marker, also Grafik und nicht Schrift: dort gilt 3:1, gemessen
   4,56:1 auf dem hellen Sand. Der Begriff steht in --ink-800 mit
   11,64:1.
   text-indent plus padding-left hält mehrzeilige Einträge
   („Blumen- und Pflanzengroßhandel" bei 320px) am selben Satzrand wie
   die erste Zeile. */
.kategorie__bereiche { display: flex; flex-direction: column; gap: var(--sp-3); }
.kategorie__bereiche li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--ink-800);
}
.kategorie__bereiche li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--marker-auf);
  border-radius: 1px;
}

@media (min-width: 640px) {
  .kategorien__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
}
@media (min-width: 900px) {
  /* Drei gleich breite Textspalten. Ohne Bilder gibt es nichts mehr zu
     staffeln, und drei Aufzählungen nebeneinander sind genau die
     Bauform der Live-Seite. */
  .kategorien__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-8); }
}


/* =====================================================================
   14  VORTEILE
   Bewusst KEIN zweites Kartenraster hinter den Kategorien, sondern
   eine nummerierte Liste im Satzspiegel einer Stellenliste: große
   Ziffer, Haarlinie, Titel, Text, Aktion. Die Folge 1, 2, 3 läuft auf
   die einzige gefüllte Aktion des Blocks zu.
   ===================================================================== */
.vorteile__liste { border-top: 1px solid var(--linie-2); }
.vorteil {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  align-items: baseline;
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--linie-2);
}
/* Die Ziffern standen in --linie-2 und kamen damit auf 1,58:1 gegen den
   Sandton. Zwei Drittel der Nummerierung waren auf einem Telefondisplay
   bei Tageslicht nicht zu sehen, ausgerechnet in einer Bauform, die
   sich „nummerierte Liste" nennt. Jetzt --ink-500 mit 4,41:1. Die
   Steigerung auf die dritte Zeile läuft über Gewicht, Größe und Farbe,
   nicht mehr über Sichtbarkeit. */
.vorteil__nr {
  font-family: var(--schrift-display);
  font-size: var(--fs-lg); font-weight: 600;
  line-height: 1;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  grid-row: 1 / span 3;
}
/* Zweite Rolle auf --fs-lg, siehe die Notiz zur Skala bei .zahlen__titel.
   Der Vorteil-Titel führt seinen Listeneintrag an und steht neben einer
   Ziffer, die bis --fs-xl geht; auf --fs-md war er die kleinere von
   beiden und die Ziffer damit die eigentliche Überschrift. */
.vorteil__titel { font-size: var(--fs-lg); font-weight: 600; }
.vorteil__text { font-size: var(--fs-base); color: var(--ink-700); grid-column: 2; }
/* Bild und Knopf gehören laut Vorlage zusammen: unter jeder der drei
   App-Ansichten steht ihr eigener Knopf. Die Bilder liegen noch nicht
   vor, deshalb steht hier eine gekennzeichnete Platzhalterfläche. */
.vorteil__medien {
  grid-column: 2; margin-top: var(--sp-5);
  width: 100%; max-width: 200px;
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4);
}
.vorteil__medien .platzhalter { max-width: none; }
/* Die drei App-Ansichten. Quelle ist 423x806, also praktisch 9/16.
   Die Datei trägt width und height, damit beim Laden nichts springt. */
.vorteil__bild {
  width: 100%; height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}

/* Die dritte Zeile ist die Steigerung: kräftigere und größere Ziffer,
   gefüllte Aktion. Keine zweite Fläche, kein Kasten. */
.vorteil--stark .vorteil__nr {
  color: var(--orange-text); font-weight: 700; font-size: var(--fs-xl);
}

@media (min-width: 640px) {
  .vorteil { column-gap: var(--sp-8); padding-block: var(--sp-8); }
  .vorteil__nr { font-size: var(--fs-xl); }
  /* Gedeckelt auf --fs-xl, also gleichauf mit der H2 statt darüber.
     Mit --fs-2xl rendert die Ziffer 03 bei 54px, exakt der H1-Größe,
     während die H2 dieses Bandes bei 43px steht. Eine dekorative
     Listennummer wäre damit die größte Type des Abschnitts und die H1
     verlöre ihre Alleinstellung. Die Steigerung der dritten Zeile
     trägt bereits das Gewicht 700 und der gefüllte Knopf. */
  .vorteil--stark .vorteil__nr { font-size: var(--fs-xl); }
}

@media (min-width: 900px) {
  .vorteil {
    grid-template-columns: 5rem 6fr 4fr;
    align-items: start;
    column-gap: var(--sp-8);
  }
  .vorteil__nr { grid-row: 1 / span 2; }
  .vorteil__titel { grid-column: 2; align-self: center; }
  .vorteil__text { grid-column: 2; }
  .vorteil__medien {
    grid-column: 3; grid-row: 1 / span 2; margin-top: 0;
    width: 100%; max-width: 260px; justify-self: end;
  }
  .vorteil__medien .platzhalter { max-width: none; }
}


/* =====================================================================
   15  KEIN ACCOUNT + BEWERBUNGSPROZESS
   Original-Sektion 5 und 7 in einem Band. Beide beantworten „was muss
   ich tun, um mich zu bewerben". Getrennt entstünden zwei fast
   identisch aussehende Textblöcke mit je einer H2.
   ===================================================================== */
.bewerbung__teil > .bewerbung__text > p { margin-top: var(--sp-5); }
.bewerbung__bild { margin-top: var(--sp-8); }
.bewerbung__bild img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-lg);
}
.bewerbung__linie {
  height: 1px; background: var(--linie-2);
  margin-block: var(--sp-12);
}
.bewerbung__spalte-text > p + p { margin-top: var(--sp-5); }
.bewerbung__spalte-titel { margin-bottom: var(--sp-6); }
.bewerbung__btn { margin-top: var(--sp-8); width: 100%; }

@media (min-width: 900px) {
  .bewerbung__teil {
    display: grid; grid-template-columns: 6fr 6fr;
    gap: var(--sp-12); align-items: center;
  }
  .bewerbung__bild { margin-top: 0; }
  .bewerbung__bild img { aspect-ratio: 4 / 3; border-radius: var(--r-lg); box-shadow: var(--sh-md); }
  .bewerbung__linie { margin-block: var(--sp-16); }
  .bewerbung__teil--prozess { grid-template-columns: 5fr 7fr; align-items: start; }
  .bewerbung__spalte-titel { margin-bottom: 0; }
  .bewerbung__btn { width: auto; }
}

@media (min-width: 1200px) {
  .bewerbung__spalte-titel { position: sticky; top: calc(var(--kopf-h) + 24px); }
}


/* =====================================================================
   16  STIMMEN
   Keine Karten. Drei Spalten unter einer 2px-Oberlinie, das Zitat trägt
   sich selbst. Die Sektion hat wie in der Vorlage keine Überschrift.

   Zwei Änderungen gegenüber der ersten Fassung:
   1. Die Sektion liegt jetzt auf der dunklen Fläche. Sie ist die einzige
      Sektion in der Seitenmitte, die ohne Bildkante und ohne zweite
      Spalte auskommt, also die, die eine tragende Farbe ohne Umbau
      aushält. Damit hat der Band-Rhythmus in der Mitte ein echtes
      Ereignis und nicht nur einen Helligkeitssprung.
   2. Der Wischbereich ist ersatzlos entfallen. Er enthielt keinerlei
      fokussierbares Element und bekam anders als die Premium-Spur auch
      keinen Tabstop, damit waren Zitat zwei und drei am Telefon per
      Tastatur und Vorlesehilfe unerreichbar (WCAG 2.1.1). Drei kurze
      Zitate rechtfertigen keinen Wischbereich. Sie stehen jetzt
      untereinander, die Oberlinie funktioniert gestapelt genauso.
   ===================================================================== */
.stimmen__liste {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-10);
  overflow: visible; scroll-snap-type: none;
  margin-inline: 0; padding-inline: 0;
}
.stimme {
  display: flex; flex-direction: column;
  padding-top: var(--sp-5);
  border-top: 2px solid var(--auf-dunkel);
  background: transparent;
}
.stimme__bild { margin-bottom: var(--sp-5); }
.stimme__bild .platzhalter { max-width: 200px; }
/* Die Personenfotos sind QUERFORMAT 3:2 (Quelle 1920x1280), nicht das
   Hochformat 4:5, das der Platzhalter angenommen hatte. Die Annahme war
   falsch und ist mit dem Eintreffen der Dateien widerlegt.
   object-position etwas oberhalb der Mitte, weil auf allen drei Bildern
   die Person im oberen Drittel steht. */
.stimme__foto {
  width: 100%; max-width: 320px; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%;
  border-radius: var(--r-md);
}
.stimme__zeichen {
  font-family: var(--schrift-display);
  font-size: var(--fs-lg); font-weight: 700; line-height: 0.8;
  color: var(--orange-hell);
  margin-bottom: var(--sp-3);
}
.stimme__zitat p {
  font-size: var(--fs-base); color: var(--auf-dunkel);
  line-height: var(--lh-dunkel); max-width: none;
}

.stimme__person {
  margin-top: auto; padding-top: var(--sp-5);
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
}
.stimme__name { font-size: var(--fs-base); font-weight: 600; color: var(--auf-dunkel); }
.stimme__rolle { font-size: var(--fs-xs); color: var(--auf-dunkel-still); letter-spacing: 0.02em; }

@media (min-width: 900px) {
  .stimmen__liste { grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); }
}


/* =====================================================================
   17  VORTEILSLISTE
   ===================================================================== */
.liste__kopf { margin-bottom: var(--kopf-abstand); }
.liste__kopf > p { margin-top: var(--sp-4); color: var(--ink-600); }

.punkt {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  font-size: var(--fs-base); color: var(--ink-700);
}
.punkt + .punkt { margin-top: var(--sp-5); }
.punkt__haken {
  flex: 0 0 21px; width: 21px; height: 21px;
  margin-top: 4px; color: var(--marker-auf);
}

@media (min-width: 900px) {
  .liste__inner { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-12); align-items: start; }
  .liste__kopf { margin-bottom: 0; }
}
@media (min-width: 1200px) {
  .liste__kopf { position: sticky; top: calc(var(--kopf-h) + 24px); }
}


/* =====================================================================
   18  ARBEITGEBER
   Der Anredewechsel von „du" auf „Sie" bekommt drei Signale, damit er
   als Absicht gelesen wird und nicht als Fehler: eigene dunkelgrüne
   Fläche, ein ankündigender Chip und die späte Position nach dem
   abgeschlossenen Bewerberpfad. Genau eine Aktion im Block.
   ===================================================================== */
.arbeitgeber { padding-block: 0; }
.arbeitgeber > .wrap { padding-inline: 0; }

.arbeitgeber__karte {
  background: linear-gradient(165deg, var(--dunkel) 0%, var(--dunkel-tief) 100%);
  padding: var(--sp-12) var(--gutter);
}
.arbeitgeber__chip { margin-bottom: var(--sp-5); }
.arbeitgeber__text > p { margin-top: var(--sp-5); color: var(--auf-dunkel-leise); }
.arbeitgeber__aktionen { margin-top: var(--sp-8); }
.arbeitgeber__bild { display: none; }

@media (min-width: 900px) {
  .arbeitgeber { padding-block: var(--band-y); }
  .arbeitgeber > .wrap { padding-inline: var(--gutter); }
  .arbeitgeber__karte {
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    padding: var(--sp-16) var(--sp-12);
    display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-12);
    align-items: center;
  }
  .arbeitgeber__text > p { max-width: 54ch; }
  .arbeitgeber__bild { display: block; }
  .arbeitgeber__bild img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    object-position: 55% 35%;
    border-radius: var(--r-lg);
    /* Leichter Schleier, damit sich das Foto in die dunkle Fläche
       einfügt statt aus ihr herauszuleuchten. */
    filter: brightness(0.84) saturate(0.92);
  }
}

@media (min-width: 1200px) {
  .arbeitgeber__karte { padding: var(--sp-20) var(--sp-16); }
}


/* =====================================================================
   19  ABSCHLUSS
   ===================================================================== */
.abschluss__inner > p { margin-top: var(--sp-5); }
.abschluss__schluss { font-size: var(--fs-md); font-weight: 500; color: var(--ink-900); }

/* Kein Knopf, sondern eine Auszeichnungszeile: die Zahl in der
   Aktionsfarbe, der Satz daneben, oben und unten eine kräftige Linie. */
.abschluss__banner {
  margin-top: var(--sp-10);
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  padding-block: var(--sp-5);
  border-block: 2px solid var(--ink-900);
  font-family: var(--schrift-display);
  font-size: var(--fs-md); font-weight: 600; color: var(--ink-900);
  max-width: none;
}
.abschluss__banner .num { font-size: var(--fs-lg); color: var(--orange-text); }

/* --- Logo-Wand ----------------------------------------------------
   27 Kundenlogos unter der Zeile „1100+ Arbeitgeber suchen Dich!", so
   wie die Live-Seite sie zeigt.

   Drei Eingriffe, damit die Wand die Sektion nicht auseinanderreißt:
   1. Graustufen. Sieben verschiedene Grüns, zwei Rot und ein Blau
      nebeneinander wären hier lauter als alles andere auf der Seite.
   2. Deckkraft 0,7. Die Wand ist Beleg, nicht Blickfang, sie steht
      hinter der Aussage und nicht davor.
   3. mix-blend-mode: multiply. Die Dateien sind JPG mit weißem Grund.
      Ohne das läge auf dem Sandton ein Raster aus 27 weißen Rechtecken,
      und die Kacheln wären auffälliger als die Zeichen darin. Multiply
      lässt das Weiß verschwinden, sichtbar bleibt nur die Marke.
      Der Rückfall ohne Blendmodus ist ein weißes Kästchen, also
      derselbe Zustand wie ohne die Regel. Nichts bricht.
   4. Feste Spaltenzahl statt auto-fill. auto-fill stellte bei 1280px
      fünf Spalten, und 27 Logos ergaben 5+5+5+5+5+2: eine Schlussreihe,
      die zu 60 Prozent leer war und links angeschlagen stand.
      27 ist 3 hoch 3, es geht also bei 3 und bei 9 Spalten glatt auf.
      Am Telefon stehen deshalb 3 Spalten, das sind genau 9 Reihen.
      Neun Spalten scheiden am Rechner aus: die Sektion ist auf 780px
      begrenzt, neun Logos wären dort 69px breit und damit unlesbar.
      Ab 640px stehen deshalb 6 Spalten, die Schlussreihe aus 3 steht
      über justify-content: center mittig. Flexbox statt Grid, weil nur
      Flexbox eine unvollständige Schlussreihe zentrieren kann.
   Beim Zeigen wird die Deckkraft voll und die Farbe kehrt zurück, das
   ist die einzige Bewegung in diesem Block.
   ------------------------------------------------------------------ */
.logowand {
  margin-top: var(--sp-8);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-6) var(--sp-5);
  max-width: none;
}
/* Die Oberlinie hängt an der STELLE, nicht am Baustein. Auf der
   Startseite schließt die Wand unmittelbar an die Zeile „1100+
   Arbeitgeber suchen Dich!" an und braucht die Trennung; auf der
   Arbeitgeber-Seite steht sie unter einer eigenen H2 und einem
   Entwurfsvermerk, dort wäre eine zweite Linie eine Linie zu viel.
   Solange das im Baustein stand, hätte die zweite Seite es
   zurücknehmen müssen. */
.abschluss .logowand {
  padding-top: var(--sp-8);
  border-top: 1px solid var(--linie-2);
}
/* Drei Spalten: 27 geht in 9 Reihen auf. Die Breite rechnet den
   Spaltenabstand heraus, damit nichts überläuft. */
.logowand > li { flex: 0 0 calc((100% - 2 * var(--sp-5)) / 3); min-width: 0; }
.logowand img {
  width: 100%; height: auto;
  filter: grayscale(1);
  opacity: 0.7;
  mix-blend-mode: multiply;
  transition: opacity var(--t-basis) var(--ease), filter var(--t-basis) var(--ease);
}
.logowand img:hover { opacity: 1; filter: grayscale(0); }

/* Sechs Spalten, Schlussreihe aus drei, zentriert. */
@media (min-width: 640px) {
  .logowand > li { flex: 0 0 calc((100% - 5 * var(--sp-5)) / 6); }
}
@media (min-width: 900px) {
  .abschluss__inner { max-width: 780px; }
  .abschluss__banner { justify-content: flex-start; }
}


/* =====================================================================
   20  FRAGEN UND ANTWORTEN
   Natives details/summary, ohne JavaScript bedienbar. name="faq" macht
   daraus in aktuellen Browsern ein Akkordeon mit nur einem offenen
   Eintrag. Ältere Browser ignorieren das Attribut und öffnen mehrere,
   das ist kein Fehlerbild.
   Bewusst eine eigene Bauform, keine dritte Kartenvariante: nur
   Trennlinien, kein Rahmen, kein Radius.
   ===================================================================== */
.faq__kopf { margin-bottom: var(--kopf-abstand); }
.faq__liste { border-top: 1px solid var(--linie-2); }

.faq-item { border-bottom: 1px solid var(--linie-2); }

.faq-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 60px; padding-block: var(--sp-4);
  font-family: var(--schrift-display);
  font-size: var(--fs-base); font-weight: 600; color: var(--ink-900);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary svg {
  width: 20px; height: 20px; flex: 0 0 20px; color: var(--ink-500);
  transition: transform var(--t-basis) var(--ease);
}
.faq-item[open] > summary svg { transform: rotate(180deg); color: var(--orange-text); }

.faq-item__antwort { padding-bottom: var(--sp-6); }
.faq-item__antwort p { font-size: var(--fs-base); line-height: 1.65; max-width: 68ch; }

@media (min-width: 900px) {
  .faq__inner { display: grid; grid-template-columns: 4fr 8fr; gap: var(--sp-12); align-items: start; }
  .faq__kopf { margin-bottom: 0; }
  .faq-item > summary { font-size: var(--fs-md); min-height: 68px; }
}
@media (min-width: 1200px) {
  .faq__kopf { position: sticky; top: calc(var(--kopf-h) + 24px); }
}


/* =====================================================================
   21  FUSSBEREICH
   Dieselbe Farbe wie Kopf und Arbeitgeber-Karte, also das Sidebar-Grün
   des Klickdummys. Keine zweite dunkle Palette daneben.
   ===================================================================== */
.footer {
  background: var(--dunkel-tief);
  color: var(--auf-dunkel-leise);
  padding-block: var(--sp-14);
}
.footer__logo {
  width: auto;
  height: clamp(48px, 4vw, 64px);
  margin-bottom: var(--sp-5);
}
.footer__claim { font-size: var(--fs-base); font-weight: 500; color: var(--auf-dunkel); }
.footer__satz { margin-top: var(--sp-2); font-size: var(--fs-base); color: var(--auf-dunkel-still); }

.footer__oben { display: grid; gap: var(--sp-10); }
.footer__marke { max-width: 42ch; }

/* Seit dem Rangwechsel sind das Absätze und keine H2 mehr, deshalb die
   max-width-Rücknahme: die Grundregel gibt jedem p 66ch, das schnitte
   „Finde Jobs in den folgenden Bereichen" bei schmalen Spalten um.
   Optisch ändert sich nichts. */
.footer__spalte-titel {
  font-family: var(--schrift-text);
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--ls-weit); text-transform: uppercase;
  color: var(--auf-dunkel-still);
  margin-bottom: var(--sp-2);
  max-width: none;
}
.footer__spalte a {
  display: flex; align-items: center;
  min-height: 44px;
  font-size: var(--fs-base); color: var(--auf-dunkel-leise);
  transition: color var(--t-basis) var(--ease);
}
.footer__spalte a:hover { color: var(--auf-dunkel); }

.footer__linie { height: 1px; background: var(--linie-dunkel); margin-block: var(--sp-10); }

/* Branchen mobil als Chip-Wolke. Als Fließtext-Liste wären das am
   Telefon zu kleine Ziele, deshalb volle 44px Höhe. */
.footer__branchen-liste {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.footer__branchen-liste a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--füllung-dunkel);
  border: 1px solid var(--linie-dunkel);
  font-size: var(--fs-base); color: var(--auf-dunkel-leise);
  transition: background var(--t-basis) var(--ease),
              color var(--t-basis) var(--ease),
              border-color var(--t-basis) var(--ease);
}
.footer__branchen-liste a:hover {
  background: oklch(0.97 0.02 150 / 0.13);
  border-color: var(--linie-dunkel-2);
  color: var(--auf-dunkel);
}

/* Die frühere Schlusszeile „Green Careers · Entwurf, nicht
   veröffentlicht" ist ersatzlos entfallen. Der Fußbereich der Vorlage
   endet mit dem Branchen-Raster, und ein Statushinweis über das Projekt
   gehört nicht in sichtbaren Text, den ein Gründer beim Vorführen
   mitliest. Der Hinweis steht jetzt als Kommentar im HTML. */

@media (min-width: 640px) {
  .footer__oben { grid-template-columns: 1fr 1fr; }
  .footer__marke { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .footer { padding-block: var(--sp-20); }
  .footer__oben { grid-template-columns: 5fr 3fr 4fr; gap: var(--sp-12); }
  .footer__marke { grid-column: auto; }

  /* Ab hier als Spaltensatz statt als Chips: am Rechner sind Chips in
     dieser Menge unruhig, Links in Spalten lesen sich schneller.
     Die Trefferfläche bleibt trotzdem 44px hoch. 900px ist kein
     Mausbeweis: auf einem Touch-Notebook oder einem Tablet im
     Querformat greift dieser Breakpunkt bereits, und 23 direkt
     aneinanderstoßende Ziele von 40px sind dort zu wenig.
     Statt line-height:44px steht hier min-height plus Zentrierung, weil
     lange Namen („Garten- und Landschaftspflege") umbrechen dürfen,
     ohne dass daraus eine 88px hohe Zeile wird. */
  .footer__branchen-liste {
    display: block; columns: 3; column-gap: var(--sp-8);
    margin-top: var(--sp-5);
  }
  .footer__branchen-liste a {
    display: flex; align-items: center;
    min-height: 44px; padding: 6px 0; line-height: 1.3;
    background: transparent; border: none;
    font-size: var(--fs-base);
  }
  .footer__branchen-liste li { break-inside: avoid; }
  .footer__branchen-liste a:hover { background: transparent; color: var(--marker-licht); }
}

@media (min-width: 1200px) { .footer__branchen-liste { columns: 4; } }


/* =====================================================================
   23  JOBBÖRSE (jobs.html)
   Zweite Seite, dieselbe Seite. Es kommt KEIN neues Token dazu außer der
   einen Höhe der klebenden Suchleiste, keine zweite Knopf-Familie, kein
   zweites Popup-Muster: der Assistent benutzt die Klassen des
   Startseiten-Filters (.filter, .filter__kopf, .filter__körper,
   .filter__gruppe, .filter__frage, .filter__hinweis, .filter__knöpfe,
   .wahl, .branchenwahl, .haken, .filter__fuß) und erbt damit auch dessen
   Rückfallweg über die Marke „kein-js" aus Abschnitt 10b.
   Neu sind nur die Bauteile, die es auf der Startseite nicht gibt:
   klebende Suchleiste, Stufen des Assistenten, Ergebnissteuerung und
   Sortierung.

   Reihenfolge:
     23a  Seitengerüst und klebende Suchleiste
     23b  Assistent: Stufen, Symbol, Umkreis, Fortschritt, Navigation
     23c  Treffer-Zähler und Sortierung
     23d  Leerer Zustand
   ===================================================================== */

:root {
  /* Basis- und Fallbackwert für die Sprungabstände von #ergebnisse und
     .kein-js .assistent. Die Jobbörse überschreibt ihn in public-jobs.css
     auf 142px (Desktop) beziehungsweise 190px (mobil); auch die Startseite
     nutzt den Assistenten. */
  --jobkopf-h: 76px;
}


/* --- 23a  SEITENGERÜST UND KLEBENDE SUCHLEISTE ---------------------
   Der Kopf ist wie auf der Startseite position:fixed. Auf der Startseite
   schafft der Hero den nötigen Freiraum über sein padding-top; hier gibt
   es keinen Hero, deshalb trägt der Inhalt selbst den Abstand.
   Die Suchleiste klebt unmittelbar darunter, damit der Filterknopf auf
   jeder Scrollhöhe erreichbar bleibt. Das ist die Anforderung der
   Vorlage („klebende Kopfleiste") und am Telefon der Unterschied
   zwischen einer Suche und einer Liste.
   ------------------------------------------------------------------ */
.jobseite { padding-top: var(--kopf-h-mobil); }

.jobkopf {
  position: sticky;
  top: var(--kopf-h-mobil);
  z-index: 90;                          /* unter dem Kopf (100)        */
  background: var(--dunkel);
  border-bottom: 1px solid var(--linie-dunkel-2);
}
.jobkopf__inner { padding-block: 10px; }

/* Das Suchfeld läuft über die volle Breite der Leiste, so beschreibt es
   die Vorlage. Anders als im Hero der Startseite, wo es unter der
   Texttafel auf 720px begrenzt ist: dort ist es Teil eines Moduls, hier
   ist es die Leiste. */
.jobsuche {
  display: flex; align-items: stretch; gap: 10px;
  width: 100%;
}
.jobsuche__feld { flex: 1 1 auto; min-width: 0; }
/* Unter 640px trägt das Feld kein Lupensymbol, dieselbe Rechnung wie im
   Hero der Startseite: bei 360px blieben sonst 174px für den Text, der
   Platzhalter „Welchen Job suchst du?" braucht 190px und bricht mitten
   im Satz ab. */
@media (max-width: 639px) {
  .jobsuche__feld .feld__ico { display: none; }
  .jobsuche__feld .eingabe { padding-left: var(--sp-4); }
}
/* KEINE Rückausnahme für den Fokusring, anders als bei .suche im Hero.
   Maßgeblich ist, worauf der Ring gezeichnet wird: er sitzt mit 2px
   Versatz AUSSERHALB des Feldes, also auf der dunkelgrünen Leiste. Dort
   gilt .dunkel :focus-visible mit --fokus-dunkel (8,52:1). Der dunkle
   Ring käme hier auf 1,2:1. */

/* Sprungabstand für Anker unter Kopf plus Suchleiste. */
#ergebnisse,
.kein-js .assistent {
  scroll-margin-top: calc(var(--kopf-h-mobil) + var(--jobkopf-h) + 12px);
}

@media (min-width: 1024px) {
  .jobseite { padding-top: var(--kopf-h); }
  .jobkopf { top: var(--kopf-h); }
  #ergebnisse,
  .kein-js .assistent {
    scroll-margin-top: calc(var(--kopf-h) + var(--jobkopf-h) + 12px);
  }
}


/* --- 23b  ASSISTENT ------------------------------------------------
   Vier Stufen im selben Dialog wie der Startseiten-Filter.
   MIT Skript ist genau eine Stufe sichtbar, das steuert die Klasse
   .ist-aktiv. Die Regel hängt an html:not(.kein-js) und damit an
   derselben Merkmalsprüfung, die auch showModal freigibt: gibt es kein
   natives dialog, wird hier nichts weggeblendet und alle vier Stufen
   stehen untereinander in der Seite. Ohne diese Kopplung wäre die Seite
   in einer Umgebung ohne native Dialoge unbedienbar.
   ------------------------------------------------------------------ */
html:not(.kein-js) .assistent__schritt:not(.ist-aktiv) { display: none; }

.assistent__schritt { min-width: 0; }
/* Der Fokus springt beim Stufenwechsel auf die Frage. Sie bekommt dafür
   tabindex="-1" und darf keinen bleibenden Rahmen behalten. */
.assistent__frage:focus { outline: none; }
.assistent__frage:focus-visible { outline: 3px solid var(--fokus-dunkel); outline-offset: 4px; }

/* Grünes, abgerundetes Quadrat mit hellem Symbol, so wie die Vorlage es
   über jeder Stufe zeigt. Es steht in der legend, weil eine legend das
   erste Kind eines fieldset sein muss, um die Gruppe zu benennen.
   Fällt display:flex auf der legend aus (sehr alte Browser), steht das
   Symbol einfach in der Zeile vor der Frage, nichts bricht. */
.assistent__frage {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.assistent__symbol {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--r-md);
  background: var(--marker); color: var(--auf-dunkel);
}
.assistent__symbol svg { width: 23px; height: 23px; }

/* Kopfzeile: nur „Schliessen" plus grünes Kreuz, rechtsbündig. Der
   Assistent hat in der Vorlage keine Überschrift. */
.assistent__kopf { justify-content: flex-end; }
.assistent .assistent__schließen {
  flex: 0 0 auto; width: auto; height: auto;
  gap: 8px; min-height: 44px; padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  background: transparent; color: var(--auf-dunkel);
  font-size: var(--fs-base); font-weight: 500;
}
.assistent .assistent__schließen svg { color: var(--marker-licht); }
.assistent .assistent__schließen:hover { background: var(--füllung-dunkel); color: var(--auf-dunkel); }
/* Ohne Skript gibt es nichts zu schließen. Die Kopfzeile bliebe sonst
   als leerer Streifen stehen. */
.kein-js .assistent__kopf { display: none; }

/* Umkreis-Teil der vierten Stufe. Live klappt er erst nach der
   Ortsauswahl auf, das setzt einen Geocoder voraus und damit eine
   externe Laufzeit-Anfrage. Hier steht er dauerhaft offen. */
.assistent__umkreis { margin-top: var(--sp-5); }
.assistent__zwischentitel {
  font-family: var(--schrift-display);
  font-size: var(--fs-base); font-weight: 600;
  color: var(--auf-dunkel);
  margin-bottom: 6px; max-width: none;
}
/* Anklickbare Beschriftung des Schiebereglers, deshalb volle 44px Höhe. */
.assistent__radiuslabel { min-height: 44px; cursor: pointer; margin-bottom: 0; }
.platzhalter--karte { aspect-ratio: 16 / 9; max-height: 190px; margin-bottom: var(--sp-4); }

/* Schieberegler mit den drei Marken der Vorlage. accent-color färbt Bahn
   und Griff in einem Zug, die Trefferfläche hält 44px über das
   Innenpolster des Elements. */
.regler {
  width: 100%; height: 44px; margin: 0;
  accent-color: var(--marker-licht);
  background: transparent; cursor: pointer;
}
.regler:focus-visible { outline: 3px solid var(--fokus-dunkel); outline-offset: 2px; }
.regler__marken {
  display: flex; justify-content: space-between;
  margin-top: -4px;
  font-size: var(--fs-xs); color: var(--auf-dunkel-still);
}

/* Fuß: Fortschrittsbalken mit Zähler „N | 4", darunter die Navigation. */
.assistent__fuß { align-items: stretch; gap: var(--sp-4); }
.assistent__fortschritt { display: flex; align-items: center; gap: var(--sp-4); }
.assistent__balken {
  flex: 1 1 auto; height: 6px; border-radius: var(--r-pill);
  background: var(--linie-dunkel-2); overflow: hidden;
}
.assistent__balken > i {
  display: block; height: 100%; width: 25%;
  border-radius: var(--r-pill);
  background: var(--marker-licht);
  transition: width var(--t-basis) var(--ease);
}
.assistent__zähler {
  flex: 0 0 auto;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--auf-dunkel-still);
}

.assistent__navigation { display: flex; flex-direction: column; gap: var(--sp-3); }
.assistent__navigation .btn { width: 100%; min-height: 52px; padding-inline: var(--sp-4); }
/* .btn setzt display:inline-flex und schlägt damit die Browservorgabe
   für das hidden-Merkmal. Ohne diese Zeile bliebe ein per Skript
   verstecktes hidden wirkungslos. */
.assistent__navigation .btn[hidden] { display: none; }
/* Ohne Skript gibt es keine Stufen: Balken, Zähler, ZURÜCK und WEITER
   verschwinden, der Absendeknopf bleibt und ist dann der einzige. Ein
   sichtbarer Knopf ohne Wirkung wäre schlechter als keiner. */
.kein-js .assistent__fortschritt,
.kein-js .assistent__zurück,
.kein-js .assistent__weiter { display: none; }
.kein-js .assistent__navigation .assistent__senden[hidden] { display: inline-flex; }

@media (min-width: 640px) {
  .assistent__navigation { flex-direction: row; }
  .assistent__navigation .btn { width: auto; flex: 1 1 auto; }
  .assistent__navigation .assistent__zurück { flex: 0 0 auto; }
}


.ergebnis__titel { margin-bottom: var(--sp-6); }

/* --- Die Aufforderung an die Arbeitgeber, als eigenes dunkles Band ---
   Sie stand vorher links in der Ergebnisleiste, zwischen Überschrift und
   Trefferliste, also mitten im Weg der Bewerberin. Jetzt schließt sie
   die Trefferliste ab: an der Stelle, an der jemand gerade gesehen hat,
   wieviel hier läuft.
   Damit trägt Dunkelgrün auf dieser Seite auch im Inhaltsfluss eine
   Fläche und nicht nur Kopf und Fuß. Der Wortlaut ist unverändert. */
.abschluss-arbeitgeber {
  display: flex; justify-content: center;
  max-width: none;
}
.abschluss-arbeitgeber .btn { width: 100%; }
@media (min-width: 640px) { .abschluss-arbeitgeber .btn { width: auto; } }

/* Die drei Flächen der Ergebnisseite. Vorher lag alles, 600 Zeilen
   Inhalt, in EINEM hellen Band; --sand-ton und --dunkel kamen im
   Inhaltsfluss gar nicht vor. Damit las sich die Seite als
   Funktionsseite neben einer Markenseite, nicht als dieselbe Marke.
   Jetzt: getönt für die Steuerung (Titel, Zähler, Sortierung, aktive
   Filter), hell für die Treffer, dunkelgrün für den Abschluss. */
.ergebnis__steuerung { padding-bottom: calc(var(--band-y) * 0.72); }


/* --- 23c  TREFFER-ZÄHLER UND SORTIERUNG ----------------------------
   Beides fehlt auf der Live-Seite. Sämtliche Beschriftungen sind
   Annahmen und stehen im HTML unter einem sichtbaren Entwurfsvermerk.
   Der Absendeknopf ist dauerhaft sichtbar, weil eine Auswahlliste ohne
   ihn nur mit JavaScript etwas bewirken würde.
   ------------------------------------------------------------------ */
.ergebnis__kopf {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.treffer {
  font-size: var(--fs-base); font-weight: 600; color: var(--ink-700);
  max-width: none;
}
.sortierung {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
}
/* Die Beschriftung ist anklickbar (sie setzt den Fokus in die
   Auswahlliste) und trägt deshalb selbst volle 44px Höhe. */
.sortierung__titel {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--fs-xs); color: var(--ink-600); white-space: nowrap;
  cursor: pointer;
}
.sortierung__feld { width: auto; min-width: 190px; flex: 1 1 auto; }
.sortierung__knopf { flex: 0 0 auto; }

/* --- AKTIVE SUCHE, entfernbare Marken -----------------------------
   Der Suchzustand ging vorher vollständig verloren: kein Skript las die
   Adresszeile, nach vier Assistentenstufen und vier Klicks war weder
   ein Kästchen gesetzt noch ein Feld gefüllt. Jetzt spiegelt das Skript
   den Zustand zurück und zeigt ihn hier.
   Jede Marke ist ein echter Link auf dieselbe Seite OHNE diesen einen
   Parameter. Entfernen ist damit eine Navigation und kein Skriptzustand;
   Zurück-Taste, Lesezeichen und Teilen funktionieren.
   Ohne Skript steht hier nichts, und das ist ehrlich: ohne Skript gibt
   es auch keinen zurückgespiegelten Zustand.
   Kein sichtbarer Aufmacher darüber: „Aktive Filter" wäre erfundener
   Wortlaut. Der Bereich trägt statt dessen einen aria-label. */
.aktivfilter {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.aktivfilter[hidden] { display: none; }
.marke {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 var(--sp-3) 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--rand-ui);
  background: var(--füllung-still);
  color: var(--ink-900);
  font-size: var(--fs-xs); font-weight: 500;
  transition: border-color var(--t-basis) var(--ease);
}
.marke:hover { border-color: var(--ink-900); }
.marke svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--ink-600); }

/* Am Telefon steht die Beschriftung über einer Zeile aus Auswahlliste und
   Knopf. Nebeneinander bräuchten die drei zusammen 414px, verfügbar sind
   bei 390px Displaybreite 358px; sie brächen dann in drei Zeilen um und
   der Block wäre höher als die erste Stellenkarte. */
@media (max-width: 639px) {
  .sortierung { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .sortierung__titel { grid-column: 1 / -1; }
  .sortierung__feld { min-width: 0; }
}


/* --- 23d  LEERER ZUSTAND -------------------------------------------
   Wird gebraucht, wenn eine Suche nichts findet. Texte wörtlich aus der
   Vorlage. Im Entwurf ausgeblendet, weil die Liste von Anfang an Stellen
   zeigt.
   .leerzustand setzt display:flex und schlägt damit die Browservorgabe
   für hidden, deshalb die ausdrückliche Rücknahme.
   ------------------------------------------------------------------ */
.leerzustand {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--sp-4);
  margin-top: var(--sp-10);
  padding: var(--sp-12) var(--sp-5);
  border: 1px solid var(--linie-2); border-radius: var(--r-lg);
  background: var(--karte);
}
.leerzustand[hidden] { display: none; }
.leerzustand__titel { font-size: var(--fs-lg); }
.leerzustand__text { color: var(--ink-600); }




/* =====================================================================
   24  JOB-DETAILSEITE (job.html), steht vor 22
   Dritte Seite, dieselbe Seite. Es kommt KEIN neues Farb-, Schrift-,
   Abstands- oder Radius-Token dazu, keine zweite Knopf-Familie und kein
   drittes Popup-Muster: das Bewerbungsformular benutzt die Klassen des
   Startseiten-Filters (.filter, .filter__kopf, .filter__körper,
   .filter__gruppe, .filter__frage, .filter__hinweis, .haken, .filter__fuß)
   und erbt damit auch dessen Rückfallweg über die Marke „kein-js" aus
   Abschnitt 10b. Kopf, Fuß, Platzhalter, Vermerk und Eingabefeld sind
   unverändert übernommen.
   Neu sind nur die Bauteile, die es auf den ersten beiden Seiten nicht
   gibt: Brotkrume, Betriebszeile, Reiterband, Eckdaten, Punktliste,
   Ansprechpartner, Benefits, Betriebszahlen, Galerie, klebende
   Bewerbungsleiste und die Formularteile des Popups.

   Reihenfolge:
     24a  Seitengerüst
     24b  Brotkrume und Betriebszeile
     24c  Reiterband und die drei Bereiche
     24d  Eckdaten, Titel, Fließtext, Punktlisten
     24e  Ansprechpartner
     24f  Benefits
     24g  Über Uns: Betriebszahlen, Karte, Galerie
     24h  Klebende Bewerbungsleiste
     24i  Bewerbungs-Popup
   ===================================================================== */

/* --- 24a  SEITENGERÜST ---------------------------------------------
   Kein zweiter Hero und keine klebende Suchleiste: diese Seite beginnt
   direkt mit dem Inhalt. Die Klasse .jobseite aus Abschnitt 23a hält den
   Freiraum unter dem festen Kopf, sie wird hier ohne Änderung
   mitbenutzt.
   Die Textspalte ist auf 820px begrenzt. Über die vollen 1200px gesetzt
   liefe eine Stellenbeschreibung bei 17,5px auf rund 130 Zeichen je
   Zeile, also das Doppelte der Leseregel aus DESIGN.md (--zeile, 66ch).
   Die Begrenzung sitzt bewusst am Container und nicht an den Absätzen,
   damit Reiterband, Listen und Platzhalter dieselbe Satzkante halten.
   ------------------------------------------------------------------ */
.stellenseite { max-width: 820px; }

/* Platz für die klebende Bewerbungsleiste am unteren Rand. Ohne das
   verdeckt sie die letzte Zeile des Fußbereichs. Die Leiste misst
   10 + 48 + 10 = 68px, dazu Luft und der sichere Bereich am Displayrand.
   Der Zuschlag liegt BEWUSST am Fußbereich und nicht am body: am body
   stünden unter dem dunkelgrünen Fuß 84px heller Sand, und die Leiste
   deckt davon nur die unteren 68px ab. Am Fuß wächst statt dessen seine
   eigene dunkle Fläche mit. */
.jobdetail .footer {
  padding-bottom: calc(var(--sp-14) + 84px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) {
  .jobdetail .footer { padding-bottom: var(--sp-20); }
}


/* --- 24b  BROTKRUME UND BETRIEBSZEILE ------------------------------
   Die Brotkrume ist die einzige Rückwegs-Navigation dieser Seite: wer
   aus der Suche kommt, landet hier ohne Kontext. Sie trägt dieselben
   Namen wie der BreadcrumbList im Quelltext.
   Trennzeichen ist ein Schrägstrich als ::before, also Zierde und kein
   Text: eine Vorlesehilfe liest sonst zwischen jedem Eintrag ein
   Sonderzeichen mit.
   Kontraste: Links --ink-600 auf --sand 7,17:1, der aktuelle Eintrag
   --ink-900 13,34:1, das Trennzeichen --ink-400 5,55:1.
   ------------------------------------------------------------------ */
.brotkrume { margin-bottom: var(--sp-6); }
.brotkrume__liste {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 var(--sp-2);
  font-size: var(--fs-xs);
}
.brotkrume__liste li { display: flex; align-items: center; gap: var(--sp-2); }
.brotkrume__liste li + li::before {
  content: '/';
  color: var(--ink-400);
}
.brotkrume__liste a {
  display: inline-flex; align-items: center;
  /* 44px Trefferfläche, ohne die Zeile auf 44px aufzublasen: das
     Innenpolster liegt senkrecht, die Zeilenhöhe bleibt eng. */
  min-height: 44px; padding-block: 2px;
  color: var(--ink-600);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-basis) var(--ease);
}
.brotkrume__liste a:hover { color: var(--ink-900); }
.brotkrume__liste [aria-current] {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-900); font-weight: 600;
}

/* Betriebszeile: Logo, Firmenname, darunter der Ort. Bewusst KEINE
   Überschrift, die einzige H1 der Seite ist der Stellentitel. */
.betrieb {
  display: flex; align-items: center; gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--linie-2);
}
.betrieb__medien { flex: 0 0 72px; width: 72px; }
.platzhalter--logo {
  aspect-ratio: 1 / 1; padding: 6px; gap: 0;
  border-radius: var(--r-sm);
}
/* In dieser Größe trägt nur die Marke, der Dateiname passt nicht mehr
   hinein. Er bleibt für Vorlesehilfen erhalten. */
.platzhalter--logo .platzhalter__marke { font-size: 11px; letter-spacing: 0.04em; }
.platzhalter--logo .platzhalter__datei {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.betrieb__text { min-width: 0; }
.betrieb__name {
  font-family: var(--schrift-display);
  font-size: var(--fs-md); font-weight: 600;
  color: var(--ink-900);
  line-height: 1.25; max-width: none;
}
.betrieb__ort {
  margin-top: 4px;
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-base); color: var(--ink-600);
  max-width: none;
}
.betrieb__ort svg { width: 17px; height: 17px; color: var(--marker-auf); flex: 0 0 17px; }

@media (min-width: 640px) {
  .betrieb__medien { flex: 0 0 88px; width: 88px; }
}


/* --- 24c  REITERBAND UND DIE DREI BEREICHE -------------------------
   ECHTE REITER, kein Aufklapp und keine Sprungmarken-Liste: drei
   versteckte Optionsfelder, das CSS blendet über :checked den passenden
   Bereich ein. Ohne eine Zeile JavaScript, und die Pfeiltastenbedienung
   bringt eine Optionsfeld-Gruppe von Haus aus mit.
   Die Regeln greifen über den Geschwister-Kombinator von den Feldern aus.
   Bewusst NICHT mit :has(): fiele :has() aus, wären alle drei Reiter
   tote Knöpfe.

   Am Telefon bricht das Band um, statt zu scrollen. Gerechnet bei 320px
   Fensterbreite: innen bleiben 278px, die drei Beschriftungen brauchen
   mit Polster zusammen 327px plus Fugen. Ein Wischband hätte den dritten
   Reiter aus dem Bild geschoben, umgebrochen stehen alle drei sichtbar
   untereinander beziehungsweise nebeneinander.

   Kontraste: aktiver Reiter --sand auf --dunkel 13,66:1, ruhender
   --ink-700 auf --karte 9,99:1, Umriss des Bandes --rand-ui auf --sand
   4,47:1 (nötig 3:1).
   ------------------------------------------------------------------ */
.reiter__band {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px;
  background: var(--karte);
  border: 1px solid var(--rand-ui);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-8);
}
.reiter__knopf {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  font-family: var(--schrift-text);
  font-size: var(--fs-base); font-weight: 600;
  color: var(--ink-700); text-align: center;
  cursor: pointer;
  transition: background var(--t-basis) var(--ease),
              color var(--t-basis) var(--ease);
}
.reiter__knopf:hover { background: var(--sand-ton); color: var(--ink-900); }

/* GEWÄHLTER ZUSTAND, zweifach ausgezeichnet: Umkehr hell auf dunkel plus
   das Gewicht der Fläche. Farbe allein trägt nicht, weil alle drei
   Reiter dieselbe Schriftgröße und dasselbe Gewicht haben.
   Dieselbe Lösung wie beim Ansichtsumschalter der Jobbörse. */
#reiter-job:checked      ~ .reiter__band .reiter__knopf[for="reiter-job"],
#reiter-benefits:checked ~ .reiter__band .reiter__knopf[for="reiter-benefits"],
#reiter-über:checked    ~ .reiter__band .reiter__knopf[for="reiter-über"] {
  background: var(--dunkel); color: var(--sand);
}
/* Die Optionsfelder selbst sind unsichtbar. Der Fokusring muss deshalb
   auf ihrer Beschriftung erscheinen, sonst führt die Tabulatortaste ins
   Nichts. Gleiche Lösung wie bei den Kontrollkästchen der
   Branchenauswahl und beim Ansichtsumschalter. */
#reiter-job:focus-visible      ~ .reiter__band .reiter__knopf[for="reiter-job"],
#reiter-benefits:focus-visible ~ .reiter__band .reiter__knopf[for="reiter-benefits"],
#reiter-über:focus-visible    ~ .reiter__band .reiter__knopf[for="reiter-über"] {
  outline: 3px solid var(--fokus); outline-offset: 2px;
}

/* Die zwei ruhenden Bereiche sind display:none und stehen damit auch
   nicht im Barrierebaum. Für Suchmaschinen bleiben sie im Quelltext:
   der Text ist ausgeliefert, nur nicht sichtbar. Das ist der Grund,
   warum die Beschreibung zusätzlich vollständig im JobPosting-Markup
   steht und nicht nur hier. */
.reiter__bereich { display: none; }
#reiter-job:checked      ~ #bereich-job,
#reiter-benefits:checked ~ #bereich-benefits,
#reiter-über:checked    ~ #bereich-über { display: block; }


/* --- 24d  ECKDATEN, TITEL, FLIESSTEXT, PUNKTLISTEN -----------------
   Der Eckdaten-Block ist eine Definitionsliste: drei Begriffe, drei
   Werte. Keine Tabelle (es gibt keine zweite Dimension) und keine
   Karten (drei Kästchen für drei Wörter wären genau das Kartenraster,
   das DESIGN.md verbietet).
   Am Telefon untereinander mit Haarlinien wie die Zahlenleiste der
   Startseite, ab 640px nebeneinander.
   ------------------------------------------------------------------ */
.bewerben-oben { margin-bottom: var(--sp-6); max-width: none; }
.bewerben-unten { margin-top: var(--sp-10); max-width: none; }
.bewerben__knopf { width: 100%; }

.eckdaten {
  border-top: 1px solid var(--linie-2);
  margin-bottom: var(--sp-8);
}
.eckdaten__paar {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--linie-2);
}
.eckdaten dt {
  flex: 0 0 auto;
  font-size: var(--fs-base); font-weight: 500;
  color: var(--ink-600);
}
.eckdaten dd {
  font-family: var(--schrift-display);
  font-size: var(--fs-base); font-weight: 600;
  color: var(--ink-900);
}

.stellen__titel { margin-bottom: var(--sp-6); }
/* Das Kürzel ist keine eigene Aussage, es gehört zum Titel. Deshalb
   kleiner und leiser, aber in derselben Zeile. --ink-600 auf --sand
   hält 7,17:1. Kein Umbruch: „(m/w/" allein am Zeilenende wäre grob. */
.stellen__mwd {
  font-size: var(--fs-lg); font-weight: 400;
  color: var(--ink-600);
  white-space: nowrap;
  letter-spacing: 0;
}

.stellen__text > p + p { margin-top: var(--sp-5); }

.stellen__block { margin-top: var(--sp-10); }
.stellen__block > h2 { margin-bottom: var(--sp-5); }

/* Aufzählung als Textspalte, dieselbe Bauform wie die Bereiche der
   Kategorien auf der Startseite: 6px-Quadrat in --marker, also Grafik
   und nicht Schrift, dort gilt 3:1 und gemessen sind 4,56:1 auf dem
   hellen Sand. Der Text steht in --ink-800 mit 11,64:1.
   text-indent über padding-left hält mehrzeilige Einträge am selben
   Satzrand wie die erste Zeile. */
.punktliste { display: flex; flex-direction: column; gap: var(--sp-3); }
.punktliste li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink-800);
  max-width: var(--zeile);
}
.punktliste li::before {
  content: '';
  position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px;
  background: var(--marker-auf);
  border-radius: 1px;
}

@media (min-width: 640px) {
  .bewerben__knopf { width: auto; }
  .eckdaten {
    display: flex; flex-wrap: wrap;
    gap: 0 var(--sp-10);
    border-bottom: 1px solid var(--linie-2);
  }
  .eckdaten__paar { border-bottom: none; padding-block: var(--sp-4); }
  .punktliste { gap: var(--sp-2); }
}


/* --- 24e  ANSPRECHPARTNER ------------------------------------------
   Tragende dunkelgrüne Fläche im Textfluss, nicht als Band über die
   volle Breite: die drei Reiterbereiche hängen am
   Geschwister-Kombinator der Optionsfelder, ein Band würde sie
   auseinanderreißen. Dieselbe Bauform wie die Arbeitgeber-Karte der
   Startseite.
   Die Klasse .dunkel am Block genügt. Es steht hier keine einzige
   Farbangabe: Überschriften, Fließtext, Knopfkontur, Fokusring und der
   gestrichelte Vermerk kommen aus den Rollen und kehren sich mit der
   Fläche um (Abschnitt 04). Genau dafür ist die Umbindung da.
   ------------------------------------------------------------------ */
.ansprech {
  padding: var(--karten-pad);
  border-radius: var(--r-lg);
  background: var(--dunkel);
}
@media (min-width: 640px) {
  .ansprech { padding: var(--sp-10) var(--sp-8); }
}
.ansprech > h2 { margin-bottom: 0; }
.ansprech__titel { margin-top: var(--sp-5); font-size: var(--fs-md); }
.ansprech__person {
  margin-top: var(--sp-2);
  font-size: var(--fs-base); color: var(--ink-800);
}
.ansprech__aktionen {
  margin-top: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.ansprech__aktionen .btn { width: 100%; }
/* Die Nummer steht zusätzlich im Klartext. Am Rechner ist ein
   tel:-Verweis oft wirkungslos, dort will man sie ablesen können. */
.ansprech__nummer {
  margin-top: var(--sp-3);
  font-size: var(--fs-base); color: var(--ink-600);
}

@media (min-width: 640px) {
  .ansprech__aktionen { flex-direction: row; flex-wrap: wrap; }
  .ansprech__aktionen .btn { width: auto; }
}


/* --- 24f  BENEFITS -------------------------------------------------- */
.bereich__titel { margin-bottom: var(--sp-4); }
.bereich__intro { color: var(--ink-600); margin-bottom: var(--sp-6); }

/* Neunzehn kurze Einträge. Als einspaltige Liste wären das am Rechner
   neunzehn fast leere Zeilen über 820px Breite, deshalb ab 640px zwei
   und ab 900px drei Spalten. Der Haken ist Grafik in --marker
   (4,56:1 auf --sand), der Text steht in --ink-800 (11,64:1). */
.benefits {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-6);
}
.benefits li {
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-base); line-height: 1.45;
  color: var(--ink-800);
  max-width: none;
}
.benefits li::before {
  content: '';
  position: absolute; left: 0; top: 0.15em;
  width: 20px; height: 20px;
  background: center / 20px 20px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007f35' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

@media (min-width: 640px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* --- 24g  ÜBER UNS -------------------------------------------------
   Die zwei Kennzahlen als Buchungszeilen, dieselbe Bauform wie die
   Zahlenleiste der Startseite. Kein Kennzahlen-Klischee mit riesiger
   Ziffer und Miniaturlabel.
   ------------------------------------------------------------------ */
.betriebszahlen {
  border-top: 1px solid var(--linie-2);
  margin-bottom: var(--sp-8);
}
.betriebszahl {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--linie-2);
}
.betriebszahl__wert {
  flex: 0 0 auto;
  font-family: var(--schrift-display);
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--ink-900);
  line-height: 1; letter-spacing: -0.02em;
}
.betriebszahl__text { font-size: var(--fs-base); color: var(--ink-600); max-width: none; }

.über__aktion { margin-top: var(--sp-6); max-width: none; }
.über__karte { margin-top: var(--sp-10); }
.über__karte > h3 { font-size: var(--fs-md); margin-bottom: var(--sp-5); }
.über__anschrift { margin-top: var(--sp-4); color: var(--ink-700); }

.über__galerie { margin-top: var(--sp-10); }
/* Ein Banner über die volle Breite, darunter zwei Fotos. Die Bauform
   steht schon fest, damit beim Nachliefern der Dateien nur noch die
   Platzhalter durch img ersetzt werden.
   Gedeckelte Höhe, wie bei allen Platzhaltern dieser Seite: drei leere
   Rechtecke in Originalhöhe wären am Telefon der längste Abschnitt der
   ganzen Anzeige. */
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.platzhalter--galerie { aspect-ratio: 4 / 3; max-height: 160px; }
.platzhalter--galerie-breit { grid-column: 1 / -1; aspect-ratio: 16 / 6; max-height: 140px; }


/* --- 24h  KLEBENDE BEWERBUNGSLEISTE --------------------------------
   Nur am Telefon. Die Anzeige ist lang, und je nach Reiter steht der
   nächste „Bewirb dich jetzt" mehrere Bildschirmhöhen entfernt oder in
   einem Bereich, der gerade gar nicht sichtbar ist. Ab 900px
   verschwindet die Leiste, dort ist der Knopf im Bild.
   z-index 95 liegt unter dem Kopf (100) und über dem Inhalt.
   Kontraste auf --dunkel-tief: Stellentitel --auf-dunkel 16,57:1, Ort
   --auf-dunkel-still 7,88:1, Knopf Orange auf Tiefgrün 5,86:1 mit
   Beschriftung in --dunkel-tief.
   ------------------------------------------------------------------ */
.bewerbleiste {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 95;
  background: var(--dunkel-tief);
  border-top: 1px solid var(--linie-dunkel-2);
  box-shadow: 0 -6px 24px oklch(0.15 0.03 155 / 0.35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bewerbleiste__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  padding-block: 10px;
}
.bewerbleiste__text {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  line-height: 1.25; max-width: none;
}
.bewerbleiste__stelle {
  font-size: var(--fs-xs); font-weight: 600; color: var(--auf-dunkel);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bewerbleiste__ort { font-size: var(--fs-xs); color: var(--auf-dunkel-still); }
/* width:auto nimmt die Vollbreite zurück, die .bewerben__knopf unterhalb
   von 640px im Fließtext trägt. In der Leiste steht neben dem Knopf der
   Stellentitel, dort darf er die Zeile nicht allein füllen. */
.bewerbleiste .btn { flex: 0 0 auto; width: auto; min-height: 48px; padding-inline: var(--sp-4); }
/* Unter 340px braucht der Knopf die Zeile für sich. Darüber bleibt der
   Stellentitel stehen und wird bei Bedarf mit Auslassungspunkten
   gekürzt: er ist der Beleg, wofür man sich gerade bewirbt, und genau
   der geht verloren, wenn man beim Scrollen nur noch einen orangen
   Balken sieht. Gemessen bei 375px: 343px innen, Knopf 170px, Fuge 16px,
   für den Titel bleiben 157px. */
@media (max-width: 339px) {
  .bewerbleiste__text { display: none; }
  .bewerbleiste .btn { width: 100%; }
}
@media (min-width: 900px) { .bewerbleiste { display: none; } }


/* --- 24i  BEWERBUNGS-POPUP -----------------------------------------
   Nutzt vollständig die Bauform des Startseiten-Filters. Hier stehen nur
   die Teile, die ein Formular braucht und ein Filter nicht.
   ------------------------------------------------------------------ */
.bewerbung__kopf { align-items: flex-start; }
.bewerbung__kopftext { min-width: 0; }
.bewerbung__unterzeile {
  margin-top: 4px;
  font-size: var(--fs-xs); color: var(--auf-dunkel-still);
  max-width: none;
}
/* Die Beschriftung trägt zusätzlich die Kennzeichnung als Pflicht- oder
   Freiwilligenfeld. Deshalb hier flex statt Blocksatz. */
.bewerbung__körper .filter__frage {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px var(--sp-3);
  cursor: pointer;
}
/* SICHTBARE Kennzeichnung im Klartext, nicht nur ein Sternchen. Ein
   Sternchen ist ein Zeichen, dessen Bedeutung man kennen muss.
   --auf-dunkel auf --dunkel 14,14:1, die Kante --rand-ui-dunkel 3,68:1. */
.pflicht, .freiwillig {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rand-ui-dunkel);
  font-family: var(--schrift-text);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.04em;
}
.pflicht { color: var(--auf-dunkel); background: var(--füllung-dunkel); }
/* Leiser, weil es die schwächere Aussage ist: 6,73:1 auf --dunkel. */
.freiwillig { color: var(--auf-dunkel-still); background: transparent; font-weight: 500; }

.telfeld { display: flex; align-items: stretch; gap: 8px; }
.telfeld__vorwahl {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 56px; padding-inline: var(--sp-4);
  border: 1px solid var(--rand-ui-dunkel); border-radius: var(--r-md);
  background: var(--füllung-dunkel);
  font-size: max(16px, var(--fs-base)); font-weight: 600;
  color: var(--auf-dunkel);
}
.telfeld__eingabe { min-width: 0; }

.bewerbung__feld {
  min-height: 150px; line-height: 1.5;
  resize: vertical;
}

/* Das Kontrollkästchen der AGB liegt anders als die Branchenauswahl
   NICHT auf einer hellen Insel, sondern direkt auf dem dunkelgrünen
   Popup. Der ZWILLING .haken--dunkel neben .haken ist entfallen: Farbe,
   Kante, Füllung, gesetzter Zustand und Fokusring kommen jetzt aus den
   Rollen und kehren sich mit der Fläche von selbst um (Abschnitt 04).
   Übrig bleibt, was wirklich anders ist, und das ist reine Geometrie:
   ein langer Rechtstext neben dem Kästchen statt eines Stichworts.
   Kontraste unverändert: Text --auf-dunkel-leise auf --dunkel 10,10:1,
   Kante des Kästchens --rand-ui-dunkel 3,68:1, gesetzter Zustand Fläche
   --marker-licht 8,52:1 mit dem Haken in --dunkel-tief darauf 9,98:1. */
.haken--lang {
  align-items: flex-start;
  padding: var(--sp-2);
}
.haken--lang .haken__kasten { margin-top: 2px; }
.haken--lang .haken__text { font-size: var(--fs-xs); line-height: 1.5; }

/* Das Eingabefeld bleibt eine helle Insel im dunklen Popup. Der
   Fokusring sitzt mit 2px Versatz AUSSERHALB des Feldes, also auf
   Dunkelgrün, und bleibt deshalb der helle Ring. Dieselbe Prüfung wie
   bei .branchenwahl__feld: maßgeblich ist, worauf der Ring gezeichnet
   wird, nicht worin das Element liegt. */

/* --- Quittung des Bewerbungsformulars -----------------------------
   Sie ersetzt den Dialoginhalt, sobald abgeschickt wird, und sagt, was
   im Entwurf wirklich passiert: nichts. Vorher endete derselbe Klick
   auf einer nackten Fehlerseite (501 beziehungsweise 405), mit dem
   Dialog waren alle Eingaben weg.
   role="status" meldet den Wechsel, tabindex="-1" nimmt den Fokus auf.
   ------------------------------------------------------------------ */
.bewerbung__quittung {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--karten-pad) var(--sp-6) var(--sp-10);
}
.bewerbung__quittung[hidden] { display: none; }
.bewerbung__quittung-titel { font-size: var(--fs-lg); }
.bewerbung__quittung-text { color: var(--ink-700); }

/* --- LL2: der freiwillige Lebenslauf -------------------------------
   Die Gruppe steht per hidden im HTML und wird erst sichtbar, wenn der
   Upload-Weg wirklich gangbar ist. Keine der beiden Klassen setzt
   display, deshalb greift hidden hier ohne Gegenwehr; das ist geprüft
   und keine Annahme.
   Farben kommen ausschließlich aus vorhandenen Tokens, damit die
   Farbleiter unberührt bleibt.
   ------------------------------------------------------------------ */
.bewerbung__datei {
  padding: var(--sp-3) var(--sp-4);
  font-size: max(16px, var(--fs-base));
  line-height: 1.4;
  cursor: pointer;
}
/* Befund aus dem Endnutzer-Durchgang vom 28.08.2026, nachgerechnet:
   Die erste Fassung nahm --auf-dunkel und --auf-dunkel-still. Die Klasse
   .hell-insel bindet die ink-Namen neu, die dunkel-Namen aber NICHT. Auf der
   hellen Insel des Bewerbungsdialogs ergab das 1,04:1 beim Knopf und 2,02:1
   beim Bestätigungstext. WCAG verlangt 4,5:1. Mit --ink-700 sind es 9,16:1.
   Genau davor warnt Abschnitt 04 dieser Datei: ein Baustein benutzt die
   Namen, die die Flächenklasse neu bindet, dann braucht er keine Ausnahme. */
.bewerbung__datei::file-selector-button {
  margin-inline-end: var(--sp-3);
  padding: 6px 12px;
  border: 1px solid var(--rand-ui);
  border-radius: var(--r-sm);
  background: var(--füllung-still);
  color: var(--ink-800);
  font-family: var(--schrift-text);
  font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
}
.bewerbung__datei-zeile {
  display: flex; align-items: baseline;
  flex-wrap: wrap; gap: var(--sp-2);
  margin-top: 6px;
}
.bewerbung__datei-zeile[hidden] { display: none; }
.bewerbung__datei-gewaehlt {
  margin: 0;
  color: var(--ink-700);
  font-size: var(--fs-xs);
}
/* Auswählen, ersetzen UND entfernen. Alle drei müssen gehen; im ersten Bau
   fehlte das Entfernen, gefunden im Endnutzer-Durchgang. */
.bewerbung__datei-entfernen {
  flex: 0 0 auto;
  padding: 0;
  border: 0; background: none;
  color: var(--ink-700);
  font-family: var(--schrift-text);
  font-size: var(--fs-xs); font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bewerbung__datei-entfernen:hover { color: var(--ink-900); }
/* Das Merkmal steht auf der hellen Insel und braucht deshalb ihre Farben.
   Die Grundfassung von .freiwillig ist für die dunkle Fläche gebaut und
   bleibt unangetastet. */
.hell-insel .freiwillig {
  color: var(--ink-700);
  border-color: var(--rand-ui);
}
/* Turnstile bringt seinen eigenen Rahmen mit. Er bekommt nur Abstand,
   keine Farbe: alles andere käme aus einem fremden Dokument. */
.bewerbung__turnstile:not(:empty) { margin-top: var(--sp-3); }
/* Die zweite Aussage der Quittung. Sie ist bewusst eine eigene Zeile und
   nicht Teil des Bewerbungssatzes: zwei Ereignisse, zwei Sätze. */
.bewerbung__quittung-datei {
  color: var(--ink-700);
}
.bewerbung__quittung-datei[hidden] { display: none; }
/* Ohne Skript endete der Absendeknopf wieder auf der Fehlerseite.
   Dann steht er lieber gar nicht da; der Entwurfsvermerk im Formular
   sagt es im Klartext. */
.kein-js .bewerbung__senden { display: none; }

/* --- T-P21-E3: gebundener Bewerbungsfragebogen ---------------------
   Die Fachfragen werden aus einer servergebundenen Fassung gerendert. Die
   Gestaltung bleibt bewusst Teil des vorhandenen Formularsystems: große
   Tippflächen, helle Eingaben auf der dunklen Dialogfläche und derselbe
   sichtbare Fokus. */
.bewerbung-v2 {
  padding: var(--karten-pad) var(--sp-6) var(--sp-8);
}
.bewerbung-v2[hidden] { display: none; }
.bewerbung-v2 .btn[hidden] { display: none; }
.bewerbung-v2__form { display: grid; gap: var(--sp-6); }
.bewerbung-v2__form[hidden] { display: none; }
.bewerbung-v2__fortschritt {
  margin: 0;
  color: var(--ink-700);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.bewerbung-v2__status {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--rand-ui);
  border-radius: var(--r-md);
  color: var(--ink-800);
  background: var(--füllung-still);
}
.bewerbung-v2__status[hidden] { display: none; }
.bewerbung-v2__status--fehler {
  color: var(--ink-900);
  border-color: var(--orange-text);
  background: color-mix(in srgb, var(--orange) 14%, var(--karte));
}
.bewerbung-v2__gruppen { display: grid; gap: var(--sp-6); }
.bewerbung-v2__gruppe,
.bewerbung-v2__erklaerungen {
  display: grid;
  gap: var(--sp-5);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.bewerbung-v2__gruppe[hidden],
.bewerbung-v2__frage[hidden],
.bewerbung-v2__pruefen[hidden] { display: none; }
.bewerbung-v2__legend {
  padding: 0;
  color: var(--ink-900);
  font-family: var(--schrift-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.1;
}
.bewerbung-v2__frage {
  display: grid;
  gap: var(--sp-3);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.bewerbung-v2 .filter__frage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px var(--sp-3);
  padding: 0;
  color: var(--ink-900);
}
.bewerbung-v2 .filter__hinweis { color: var(--ink-700); }
.bewerbung-v2 .pflicht {
  color: var(--ink-800);
  border-color: var(--rand-ui);
  background: var(--füllung-still);
}
.bewerbung-v2 .freiwillig {
  color: var(--ink-700);
  border-color: var(--rand-ui);
}
.bewerbung-v2__optionen {
  display: grid;
  gap: 6px;
}
.bewerbung-v2 .haken {
  padding: var(--sp-3);
  border: 1px solid var(--rand-ui);
  border-radius: var(--r-md);
  background: var(--karte);
}
.bewerbung-v2 .haken:hover { border-color: var(--ink-700); background: var(--füllung-still); }
.bewerbung-v2 .haken:has(input:checked) {
  border-color: var(--marker-auf);
  background: color-mix(in srgb, var(--marker-auf) 12%, var(--karte));
}
.bewerbung-v2__kontaktfeld { display: grid; gap: 6px; }
.bewerbung-v2__zahl { display: grid; gap: var(--sp-3); }
.bewerbung-v2__regler { width: 100%; min-height: 44px; accent-color: var(--marker-auf); }
.bewerbung-v2__ortsliste {
  display: grid;
  gap: 2px;
  max-height: 240px;
  margin: 0;
  padding: var(--sp-2);
  overflow: auto;
  list-style: none;
  border: 1px solid var(--rand-ui);
  border-radius: var(--r-md);
  background: var(--karte);
}
.bewerbung-v2__ortsliste[hidden] { display: none; }
.bewerbung-v2__ortoption {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--ink-800);
  cursor: pointer;
}
.bewerbung-v2__ortoption:hover,
.bewerbung-v2__ortoption[aria-selected="true"] { background: var(--füllung-still); }
.bewerbung-v2__navigation { display: flex; flex-direction: column-reverse; gap: var(--sp-3); }
.bewerbung-v2__navigation .btn { width: 100%; min-height: 48px; }
.bewerbung-v2__pruefen { display: grid; gap: var(--sp-6); }
.bewerbung-v2__pruefen-titel,
.bewerbung-v2__quittung-titel,
.bewerbung-v2__fehler-titel { margin: 0; font-size: var(--fs-lg); }
.bewerbung-v2__zusammenfassung { display: grid; gap: var(--sp-3); margin: 0; }
.bewerbung-v2__zusammenfassungspaar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--rand-ui);
}
.bewerbung-v2__zusammenfassungspaar dt { grid-column: 1; color: var(--ink-700); font-size: var(--fs-xs); }
.bewerbung-v2__zusammenfassungspaar dd { grid-column: 1; margin: 0; color: var(--ink-900); overflow-wrap: anywhere; }
.bewerbung-v2__aendern {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 0;
  border: 0;
  color: var(--ink-800);
  background: transparent;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bewerbung-v2__erklaerungen {
  position: relative;
  padding-top: var(--sp-5);
}
.bewerbung-v2__erklaerungen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--rand-ui);
}
.bewerbung-v2__quittung { display: grid; gap: var(--sp-4); }
.bewerbung-v2__quittung[hidden] { display: none; }
.bewerbung-v2__quittung-text,
.bewerbung-v2__quittung-datei,
.bewerbung-v2__quittung-referenz,
.bewerbung-v2__fehler { margin: 0; color: var(--ink-700); }
.bewerbung-v2__fehler { margin-top: var(--sp-3); }
/* Die Markenregel für dunkle Dialoge ist spezifischer als .btn-kontur.
   Die V2-Quittung liegt jedoch auf ihrer hellen Insel und bindet deshalb
   ausdrücklich wieder die dort gültigen Rollen. */
.bewerbung-v2.hell-insel .bewerbung-v2__quittung .btn-kontur {
  color: var(--ink-900);
  border-color: var(--rand-ui);
  background: transparent;
}
@media (min-width: 768px) {
  .bewerbung-v2 { padding: var(--sp-8); }
  .bewerbung-v2__kontaktfeld { grid-template-columns: minmax(0, 1fr); }
  .bewerbung-v2__navigation { flex-direction: row; justify-content: space-between; }
  .bewerbung-v2__navigation .btn { width: auto; min-width: 160px; }
  .bewerbung-v2__optionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bewerbung-v2__frage[data-question="b3_benefits"] .bewerbung-v2__optionen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* =====================================================================
   25  ARBEITGEBER-SEITE (arbeitgeber.html)

   Die Seite siezt durchgehend, anders als Startseite und Jobbörse. Das
   ist kein Ausrutscher, das ist die andere Zielgruppe, und es ist
   dieselbe Trennung, die auf der Startseite die Sektion .arbeitgeber
   ankündigt.

   Was hier NEU ist, sind genau vier Bausteine: .grund, .partner, .paket
   und .kontakt. Hero, Logo-Wand, Zahlenleiste, Punktliste, Knöpfe,
   Vermerke und beide Flächenklassen kommen unverändert von den drei
   bestehenden Seiten. Ein fünfter wäre .stimme gewesen: dort stehen drei
   kurze Bewerberzitate ohne Firmenzeichen auf dunkler Fläche, hier vier
   Betriebsreferenzen mit Logo, Foto und bis zu drei Absätzen auf heller.
   Zwei Inhalte, zwei Bauformen.

   Bandfolge der Seite, kein Nachbarpaar teilt sich eine Fläche:
     dunkel · hell · DUNKEL · hell · getönt · hell · DUNKEL · getönt
     (+ dunkler Fußbereich)
   Der Sandton der letzten Sektion ist mobil ein schmaler Rahmen um die
   dunkle Kontaktkarte, kein volles Band. Mit padding-block: 0 war er
   unter 900 px zu hundert Prozent verdeckt: Paketband, Karte und
   Fußbereich liefen dort über rund 6.100 px in einem einzigen
   Dunkelgrün durch. Siehe .kontakt weiter unten.
   ===================================================================== */

/* --- 25a  Hero ohne Suchleiste -------------------------------------
   Drei Abweichungen vom Hero der Startseite, alle inhaltlich begründet.
   ------------------------------------------------------------------ */
/* Die Tafel ist hier ein geschlossener Körper: unter ihr steht keine
   helle Suchleiste mehr, mit der sie eine Unterkante teilen müsste.
   Also Radius rundum. */
.hero--ag .hero__tafel { border-radius: var(--r-xl); }
/* Groß- und Kleinschreibung statt Versalien. „DAS KARRIERENETZWERK FÜR
   DIE GRÜNE BRANCHE." wären 44 Großbuchstaben über drei Zeilen. Die H1
   der Startseite ist ein Schlagwort aus 34 Zeichen, diese hier ist ein
   Satz mit Punkt, und Versalsatz macht aus Sätzen Geschrei.
   Entsprechend weiter im Zeilenmaß: 17ch brächen den Satz in fünf
   Zeilen. */
.hero--ag .hero__titel { text-transform: none; max-width: 22ch; }
/* Eigener Bildausschnitt. .hero__bild steht auf 62% 32%, das ist für
   das Startseiten-Foto gerechnet. Hier steht rechts neben der Tafel ein
   Mann mit Tablet, und bei 32% schnitt die Oberkante ihm den Kopf ab.
   Weiter nach oben und nach rechts: die Person steht frei, die Frau
   links liegt ohnehin hinter der Tafel. */
.hero--ag .hero__bild { object-position: 68% 20%; }
/* Die zwei Knöpfe der Vorlage stehen an der Stelle, an der auf der
   Startseite die Suchleiste sitzt, nur eben INNERHALB der Tafel.
   Am Telefon volle Breite und untereinander: „BERATUNGSGESPRÄCH
   VEREINBAREN" ist 29 Zeichen lang und passt bei 320px in keine halbe
   Zeile. */
.hero__aktionen {
  margin-top: var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.hero__aktionen .btn { width: 100%; }
@media (min-width: 640px) {
  .hero__aktionen { flex-direction: row; flex-wrap: wrap; }
  .hero__aktionen .btn { width: auto; }
}


/* --- 25b  Zahlenleiste auf voller Fläche ---------------------------
   .zahlen bringt sein eigenes, knappes Polster mit (--sp-10). Auf der
   Startseite ist das richtig: die Leiste liegt dort als schmales
   Zwischenstück zwischen zwei hellen Bändern. Hier trägt sie eine
   eigene dunkle Fläche und braucht die volle Bandhöhe.
   ------------------------------------------------------------------ */
.zahlen--drei { padding-block: var(--band-y); }


/* --- 25c  Erklärvideo ----------------------------------------------
   Im Entwurf steht nur das Standbild, die Videodatei liegt nicht vor.
   Deshalb bewusst KEIN video-Element mit toter Quelle: ein Bedienfeld,
   das beim Klick nichts tut, ist schlechter als ein ehrliches Bild mit
   Vermerk.
   ------------------------------------------------------------------ */
.erklaervideo__inner { max-width: 860px; margin-inline: auto; }
.erklaervideo__rahmen { margin: 0; }
.erklaervideo__bild {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  background: var(--dunkel);
}
.erklaervideo__aktion { margin-top: var(--sp-10); text-align: center; }
.erklaervideo__aktion .btn { width: 100%; }
@media (min-width: 640px) {
  .erklaervideo__aktion .btn { width: auto; }
}
/* Der Vermerk unter dem Standbild ist eine figcaption und damit kein
   Absatz. .vermerk setzt display:flex erst über .entwurf; das gilt hier
   genauso, nur der obere Abstand ist kleiner, weil er unmittelbar am
   Bild hängt statt einen Block einzuleiten. */
.entwurf .vermerk--breit { margin-top: var(--sp-4); }


/* --- 25d  Die drei Gründe ------------------------------------------
   Live tragen „1.", „2." und „3." den Rang H1. Drei weitere H1 auf einer
   Seite, die schon eine hat, und ihr Inhalt ist eine Ziffer: für eine
   Vorlesehilfe steht dort dreimal die Hauptüberschrift „1."
   Hier steckt die Reihenfolge in ol/li, die sichtbare Ziffer ist reine
   Auszeichnung und aria-hidden, und der Titel darüber ist ein H3.
   Bauform wie .vorteil auf der Startseite: Ziffer, Haarlinie, Titel,
   Text. Kein Kasten, kein Verlauf.
   ------------------------------------------------------------------ */
.gruende__liste { list-style: none; border-top: 1px solid var(--linie-2); }
.grund {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  align-items: baseline;
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--linie-2);
}
.grund__nr {
  font-family: var(--schrift-display);
  font-size: var(--fs-lg); font-weight: 600;
  line-height: 1;
  color: var(--ink-500);
  grid-row: 1 / span 2;
}
.grund__titel { font-size: var(--fs-lg); font-weight: 600; }
.grund__text { font-size: var(--fs-base); color: var(--ink-700); grid-column: 2; max-width: 62ch; }

@media (min-width: 640px) {
  .grund { column-gap: var(--sp-8); padding-block: var(--sp-8); }
  .grund__nr { font-size: var(--fs-xl); }
}
@media (min-width: 900px) {
  .grund { grid-template-columns: 4.5rem 5fr 7fr; align-items: start; }
  .grund__titel { grid-column: 2; }
  .grund__text  { grid-column: 3; margin-top: 0; }
  .grund__nr { grid-row: 1; }
}


/* --- 25e  Partnerstimmen -------------------------------------------
   Vier Betriebsreferenzen. Dieselbe 2px-Oberlinie, die auf dieser Seite
   auch Kategorien, Stimmen und Abschlusszeile tragen, also keine fünfte
   Kartenvariante.

   Die Fotos haben vier verschiedene Seitenverhältnisse (800x1198,
   503x466, 1000x667, 1000x749). Ein festes 4:3 mit object-fit:cover
   bringt sie auf eine Kante, ohne dass eines verzerrt. object-position
   liegt bei 50% 30%: auf allen vier Bildern stehen die Personen im
   oberen Drittel.

   Die Firmenzeichen bleiben FARBIG und ungetönt, anders als in der
   Logo-Wand. Dort sind es 27 Belege in einer Reihe, hier ist es je ein
   Absender über einer namentlichen Aussage.
   ------------------------------------------------------------------ */
.partner__liste { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); }

.partner__karte {
  display: flex; flex-direction: column;
  padding-top: var(--sp-5);
  border-top: 2px solid var(--ink-900);
}
/* Zeichen und Foto stehen NEBENEINANDER, nicht übereinander. Das
   Firmenzeichen ist die Absenderzeile der Referenz und gehört auf eine
   Höhe mit dem Betriebsfoto; gestapelt wüchse der Bildteil jeder Karte
   um die volle Zeichenhöhe, bevor das erste Wort des Zitats kommt. */
.partner__medien {
  margin-bottom: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-5);
}
/* Die vier Dateien sind JPG und PNG mit weißem Grund. Ohne multiply
   stünde je ein weißes Rechteck auf dem Sandton, und das Kästchen wäre
   auffälliger als die Marke darin. Anders als in der Logo-Wand bleibt
   die FARBE hier erhalten: dort sind es 27 Belege in einer Reihe, hier
   ist es je ein Absender über einer namentlichen Aussage. */
/* FESTES Kästchen, nicht auto-Maße. Zwei Gründe:
   1. Die vier Dateien haben vier Seitenverhältnisse, von 4,9:1
      (Schmitt-Steul) bis 0,97:1 (Huben). Mit max-width plus max-height
      säße jedes Zeichen anders im Satz, und die vier Karten hätten
      keine gemeinsame Oberkante.
   2. Die Bilder laden verzögert. Mit width:auto und height:auto ist ein
      noch nicht geladenes Bild 0 mal 0 Pixel groß, gemessen: die
      Medienzeile sprang beim Nachladen. Ein festes Kästchen reserviert
      den Platz von Anfang an. */
.partner__logo {
  flex: 0 0 130px;
  width: 130px; height: 52px;
  object-fit: contain; object-position: left center;
  mix-blend-mode: multiply;
}
/* Gedeckelt, nicht auf Spaltenbreite. Bei 1280px ist eine Spalte 545px
   breit; ein Foto in 4:3 wäre dort 409px hoch und die Karte begänne mit
   einem halben Bildschirm Bild vor dem ersten Wort. */
.partner__foto {
  flex: 1 1 auto; min-width: 0;
  width: 100%; max-width: 260px; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--r-md);
}
.partner__zeichen {
  display: block;
  font-family: var(--schrift-display);
  font-size: var(--fs-lg); font-weight: 700; line-height: 0.8;
  color: var(--orange-text);
  margin-bottom: var(--sp-3);
}
.partner__zitat p { font-size: var(--fs-base); color: var(--ink-800); max-width: 62ch; }
.partner__zitat p + p { margin-top: var(--sp-4); }

.partner__person {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--linie-2);
  display: flex; flex-direction: column; gap: 2px;
}
.partner__name { font-size: var(--fs-base); font-weight: 600; color: var(--ink-900); }
.partner__rolle { font-size: var(--fs-xs); color: var(--ink-500); letter-spacing: 0.02em; }

@media (min-width: 900px) {
  /* Zwei Spalten. Bei vier Referenzen geht das glatt auf, bei drei
     Spalten bliebe eine Schlussreihe mit einem einzelnen Eintrag und
     zwei Dritteln Leerfläche.

     align-items steht hier NICHT. Es stand hier, auf start, mit einer
     Begründung über ein margin-top: auto in .partner__person, das es zu
     dem Zeitpunkt schon nicht mehr gab. Nachgemessen bei 1280 px: start
     und stretch ergeben für alle vier Namenszeilen dieselben
     Positionen, die Regel war wirkungslos. Die Namenszeile steht ohnehin
     unmittelbar unter ihrem Zitat, weil in .partner__karte nichts sie
     nach unten drückt. */
  .partner__liste {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-12) var(--sp-10);
  }
}


/* --- 25f  Pakete ---------------------------------------------------
   Drei helle Karten auf dunkler Fläche. Über .hell-insel binden sie die
   Farbrollen zurück, sie brauchen deshalb keine einzige Ausnahmezeile
   für Text, Linien, Umrisse oder Fokusring.

   DIE STAFFEL OHNE JAVASCRIPT
   Jede Karte trägt alle vier Preise im Quelltext, sichtbar ist immer
   genau einer. Welcher, entscheidet das gewählte Kontrollfeld, und das
   liest :has() direkt aus dem DOM. Kein Skript, keine Ladezeit, kein
   Zustand, der verloren gehen kann.
   Live liegen die neun Staffelpreise hinter einem Auswahlfeld, das ein
   Svelte-Bundle nachlädt. Wer nicht daraufklickt, erfährt nie, dass es
   sie gibt.

   RÜCKFALL OHNE :has()
   Dann greift keine der Umschaltregeln, es bleibt der Preis für eine
   Stelle stehen, und der @supports-Block darunter blendet die
   Mengenwahl aus, statt vier Knöpfe stehen zu lassen, die nichts tun.
   Der Nutzer sieht dann genau das, was die Live-Seite jedem zeigt.
   ------------------------------------------------------------------ */
/* Der obere Abstand hängt an .pakete und nicht am Vermerk darüber: im
   Livegang fallen die Vermerke weg, dann muss das Raster trotzdem
   Abstand zur Überschrift halten. */
.pakete { margin-top: var(--sp-10); display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }

/* KEIN overflow: hidden. Es stand hier, um den Radius über den dunklen
   Kopf zu ziehen, und schnitt dabei den Preis ab: bei einer
   Grundschriftgröße von 20 px rechnet --fs-2xl auf 61,3 px, „15.372 €"
   belegt dann 263 px in einem 225 px breiten Feld, und die letzten
   Zeichen samt Währungszeichen verschwanden lautlos hinter der
   Kartenkante. Ein zu langer Preis muss sichtbar überstehen, nicht
   still verschwinden (WCAG 1.4.4).
   Den Radius tragen jetzt Kopf und Körper einzeln. */
.paket {
  display: flex; flex-direction: column;
  background: var(--karte);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  container-type: inline-size;
}
/* Die Karte ist ZWEIFARBIG, und deshalb steht keine Flächenklasse an
   .paket, sondern nur an ihrem unteren Teil:
     .paket__kopf   bleibt dunkel und erbt die Rollen des Bandes
     .paket__körper ist eine helle Insel und bindet sie zurück
   .paket__körper steht dafür oben in Abschnitt 04 in der Liste der
   Bausteine, die ihre helle Fläche selbst mitbringen. Im Quelltext
   braucht die Karte damit keine einzige Farbklasse. */

.paket__kopf {
  background: linear-gradient(165deg, var(--dunkel) 0%, var(--dunkel-tief) 100%);
  /* Die beiden Rollen statt --auf-dunkel/--auf-dunkel-leise unmittelbar.
     Nur so greift die Rückbindung im Druck-Block (Abschnitt 22): sonst
     bleibt hier fast weiße Schrift stehen, während der Verlauf auf
     Papier wegfällt, und alle drei Preise sind auf dem Ausdruck weg. */
  color: var(--auf-dunkel);
  --ink-900: var(--auf-dunkel);
  --ink-800: var(--auf-dunkel-leise);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--sp-6) var(--karten-pad) var(--sp-5);
  text-align: center;
}
/* .dunkel h3 (Spezifität 0-1-1) schlägt eine reine Klasse. Deshalb der
   zusammengesetzte Selektor: die frühere Zeile war eine tote
   Deklaration, gerendert wurde derselbe Ton wie beim Preis, und der
   farbliche Unterschied zwischen Name und Preis existierte nicht.
   Nachgerechnet: --marker-licht auf --dunkel hält 8,52:1. */
.dunkel .paket__name,
.paket__name {
  font-size: var(--fs-md); font-weight: 600;
  letter-spacing: var(--ls-weit); text-transform: uppercase;
  color: var(--marker-licht);
}
/* Alle vier Preiszeilen liegen im Quelltext, sichtbar ist der der
   gewählten Menge. Ohne :has() bleibt es bei „1". */
.paket__preiszeile { display: none; }
.paket__preiszeile[data-menge="1"] { display: block; }
/* Die Größe hängt an der KARTENBREITE, nicht am Fenster. Bei 20 px
   Grundschrift rechnete --fs-2xl auf 53,8 px, und „15.372 €" war damit
   breiter als sein Feld; die Karte ist aber immer nur ein Drittel des
   Bandes breit, egal wie groß der Nutzer die Schrift stellt.

   19cqw ist nachgemessen, nicht geschätzt: bei 900 px Fensterbreite ist
   die Exzellenz-Karte 268 px breit, das Textfeld darin 225 px, und der
   längste der zwölf Preise („15.372 €") braucht bei 56,3 px genau
   242 px. 19 Prozent der Kartenbreite ergeben 50,9 px und damit 219 px
   Text, also 6 px Reserve. Bei 21cqw blieben 17 px Überlauf stehen.

   ZWEI Deklarationen, das ist Absicht: cqw braucht Container-Queries.
   Kennt ein Browser sie nicht, ist die zweite Zeile ungültig und wird
   verworfen, dann trägt die erste. Ohne sie erbte der Preis einfach die
   Fließtextgröße. */
.paket__preis {
  display: block;
  font-family: var(--schrift-display);
  font-size: var(--fs-2xl);
  font-size: min(var(--fs-2xl), 19cqw);
  font-weight: 700;
  line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink-900);
  margin-top: var(--sp-2);
}
.paket__rabatt {
  display: inline-block; margin-top: var(--sp-2);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--bernstein);
  color: var(--dunkel-tief);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.02em;
}
/* Platzhalter für Menge 1, die als einzige keinen Rabatt trägt. Ohne ihn
   ist der Kopf dort 38 px niedriger, und der erste Antippen schiebt die
   Knopfreihe unter dem Finger weg: ein sofort folgender zweiter Tipp
   landet auf der Beschriftung statt auf dem Knopf. Gemessen bei 375 px.
   visibility statt display, damit die Zeile ihren Platz behält. */
.paket__rabatt--leer { visibility: hidden; }
.paket__rabatt--leer::before { content: "\00a0"; }
.paket__laufzeit {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--ink-800);
}

.paket__körper {
  display: flex; flex-direction: column; flex: 1;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: var(--karten-pad);
}

/* Mengenwahl als Segmentschalter, nicht als Auswahlfeld. Vier Zahlen
   nebeneinander zeigen von selbst, dass es mehr als eine Stelle gibt;
   ein zugeklapptes Auswahlfeld zeigt genau das nicht. */
.menge { border: 0; padding: 0; margin: 0 0 var(--sp-6); min-width: 0; }
.menge__titel {
  padding: 0; margin-bottom: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink-600);
}
.menge__wahl { display: flex; gap: var(--sp-2); }
.menge__knopf {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  border: 1px solid var(--rand-ui);
  border-radius: var(--r-sm);
  font-family: var(--schrift-display);
  font-size: var(--fs-base); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-800);
  cursor: pointer;
  transition: background var(--t-basis) var(--ease),
              border-color var(--t-basis) var(--ease),
              color var(--t-basis) var(--ease);
}
.menge__knopf:hover { background: var(--füllung-leise); border-color: var(--ink-700); }
/* Das Kontrollfeld selbst ist unsichtbar, aber NICHT display:none: es
   muss fokussierbar bleiben, sonst ist der Schalter per Tastatur tot.
   Pfeiltasten wechseln in einer Radiogruppe von sich aus. */
.menge__knopf input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.menge__knopf:has(input:checked) {
  background: var(--dunkel);
  border-color: var(--dunkel);
  color: var(--auf-dunkel);
}
/* Der Fokusring gehört an das Label, weil das Kontrollfeld selbst
   keine sichtbare Fläche hat. */
.menge__knopf:has(input:focus-visible) {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* DIE UMSCHALTUNG. Neun Regeln, eine je Menge und Karte. */
.paket:has(input[value="2"]:checked) .paket__preiszeile[data-menge="1"],
.paket:has(input[value="3"]:checked) .paket__preiszeile[data-menge="1"],
.paket:has(input[value="4"]:checked) .paket__preiszeile[data-menge="1"] { display: none; }
.paket:has(input[value="2"]:checked) .paket__preiszeile[data-menge="2"],
.paket:has(input[value="3"]:checked) .paket__preiszeile[data-menge="3"],
.paket:has(input[value="4"]:checked) .paket__preiszeile[data-menge="4"] { display: block; }

/* Ohne :has() schaltet nichts um. Dann steht die Mengenwahl auch nicht
   da: vier Knöpfe, die nichts bewirken, sind schlechter als keine.

   Die Abfrage ist BEWUSST positiv formuliert, mit der Ausblendung als
   Grundzustand. Die frühere Fassung stand umgekehrt
   (@supports not selector(:has(*)) { .menge { display: none } }) und
   ging genau in dem Fall schief, für den sie gedacht war: ein Browser,
   der die Abfrageform selector() gar nicht kennt, verwirft die ganze
   Regel als ungültig. Dann blieb die Ausblendung aus UND :has() fehlte,
   also standen vier bedienbar wirkende Knöpfe da, die nichts taten.
   Herum wie jetzt entscheidet der Zweifelsfall immer zugunsten des
   sicheren Zustands. */
.menge { display: none; }
@supports selector(:has(*)) {
  .menge { display: block; }
}

/* Erzwungene Farben (Windows-Kontrastmodus). Der gewählte Knopf war nur
   über Fläche, Rand und Schriftfarbe erkennbar, also über genau die drei
   Eigenschaften, die dieser Modus systemweit ersetzt. Ergebnis: vier
   gleich aussehende Kästchen, während der Preis darüber einer bestimmten
   Menge folgt. Das Kontrollfeld selbst kann nicht einspringen, es ist
   unsichtbar gesetzt. Deshalb ein Umriss in einer Systemfarbe, die der
   Modus stehen lässt. */
@media (forced-colors: active) {
  .menge__knopf:has(input:checked) {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
}

.paket__vorspann {
  font-size: var(--fs-base); font-weight: 600; color: var(--ink-900);
  margin-bottom: var(--sp-4);
}
.paket__leistungen { margin-bottom: var(--sp-8); }
/* Die Leistungspunkte tragen die längsten Wörter des Angebots:
   „Premium-Karrierenetzwerken", „Bewerberansprache", „branchenrelevanten",
   „Vorqualifizierung". In der schmalsten Aufstellung, drei Spalten bei
   900 px, ist die Textspalte 225 px breit, und bei vergrößerter Schrift
   standen drei dieser Wörter über der Kartenkante.

   overflow-wrap greift IMMER: es bricht nur dann, wenn ein Wort sonst
   überliefe, und ist damit reine Notbremse.
   Die Silbentrennung dagegen hängt an der KARTENBREITE, nicht am Fenster.
   Ab 300 px Karte ist sie aus: bei 1280 px sind die Karten 373 px breit,
   dort trennte sie viermal je Karte, ohne dass es nötig wäre, und ein
   Flattersatz mit vier Trennstrichen liest unruhiger als einer ohne.
   Darunter ist sie an, weil dann jeder Trennstrich einen Überlauf
   verhindert. Der Container steht schon, .paket trägt ihn für die
   Preisgröße. Die Sprache kommt vom html-Element, es wird also nach
   deutschen Regeln getrennt. */
.paket__leistungen .punkt {
  font-size: var(--fs-base);
  overflow-wrap: break-word;
}
@container (max-width: 300px) {
  .paket__leistungen .punkt { hyphens: auto; }
}
.paket__leistungen .punkt + .punkt { margin-top: var(--sp-4); }

.paket__aktionen {
  margin-top: auto;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
/* Versalien NUR hier, nicht global an .btn. Im Quelltext steht der
   Wortlaut der Vorlage in normaler Schreibweise („Jetzt starten"), damit
   eine Vorlesehilfe ihn als Wort liest und ein kopierter Knopftext
   lesbar bleibt. Sichtbar stehen sie in Versalien, weil auf derselben
   Seite Hero und Videoband dieselbe Beschriftung schon so zeigen. */
.paket__aktionen .btn { width: 100%; text-transform: uppercase; }
/* Leer und damit ohne Rahmen, bis das Skript etwas hineinschreibt.
   role="status" steht im Quelltext, der Bereich ist also von Anfang an
   da und die Meldung wird auch vorgelesen. */
.paket__quittung {
  font-size: var(--fs-xs); color: var(--ink-700);
  line-height: 1.5;
}
.paket__quittung--sichtbar {
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--rand-still);
  border-radius: var(--r-sm);
  background: var(--füllung-leise);
}

/* Einmal für alle drei Pakete. Live hängen dieselben fünf Zeichen unter
   jedem Knopfpaar, also 15 Bilder für eine Aussage, die für jedes Paket
   gleich gilt. */
.zahlarten {
  margin-top: var(--sp-10);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-4);
  justify-content: center;
}
.zahlarten__titel {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-weit); text-transform: uppercase;
  color: var(--ink-600);
}
.zahlarten__liste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* Kein Rand. Er stand hier in --linie-2, und diese Rolle ist im dunklen
   Band auf die HELLE Linie gebunden, für dunklen Grund gedacht. Das Bild
   bringt seine eigene helle Fläche mit, gemessen kam der Rand dort auf
   1,00:1 gegen die Fläche darunter: er war auf keinem Bildschirm zu
   sehen. Die Fläche --sand hält gegen das dunkle Band 13,66:1, das
   Kästchen ist auch ohne Kante deutlich. */
.zahlarten__liste img {
  width: 40px; height: auto;
  background: var(--sand);
  border-radius: var(--r-sm);
  padding: 3px;
}
.zahlarten__wort {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-800);
  padding: 5px 10px;
  border: 1px solid var(--rand-ui);
  border-radius: var(--r-sm);
}

/* Der Umbruchpunkt steht in em, nicht in px, und ist damit der einzige
   im ganzen Stylesheet, der das tut. 56,25em sind bei der Voreinstellung
   von 16 px genau dieselben 900 px wie überall sonst, wachsen aber mit,
   sobald der Nutzer die Grundschrift seines Browsers hochstellt. Bei
   doppelter Schriftgröße greifen die drei Spalten dann erst ab 1800 px,
   davor stehen die Karten untereinander und haben die volle Breite.

   NICHT VON MIR NACHGEMESSEN, und das lässt sich auch nicht nachholen:
   em in einer Media Query bezieht sich auf die BROWSER-Voreinstellung,
   nicht auf html { font-size }. Ein Skript, das die Schriftgröße am
   html-Element hochsetzt, lässt diese Abfrage unberührt, die Prüfung
   braucht also einen echten Browser mit umgestellter Grundschrift.
   Belegt gemessen ist dagegen der zweite Eingriff derselben Baustelle,
   die Silbentrennung in .paket__leistungen: mit ihr steht bei 150
   Prozent Schriftgröße kein Wort mehr über der Kartenkante.

   Drei gleich hohe Spalten: die Karten sind Flex-Spalten, deshalb stehen
   die Knopfpaare über margin-top:auto auf einer Linie, auch wenn
   Exzellenz einen Leistungspunkt weniger hat als Smart. */
@media (min-width: 56.25em) {
  .pakete { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: stretch; }
}
@media (min-width: 900px) {
  .zahlarten { justify-content: flex-start; }
}
@media (min-width: 1200px) {
  .pakete { gap: var(--sp-8); }
  /* Hier standen drei Zeilen, die die Knöpfe auf flex-direction: row
     stellten und jedem Kind flex-basis 100 Prozent gaben. Bei umbrechendem
     Flexlayout bekommt damit jedes Kind seine eigene Zeile, also genau das
     Ergebnis von flex-direction: column eine Deklaration weiter oben.
     Ersatzlos entfallen: drei Zeilen, die aussahen, als täten sie etwas. */
}


/* --- 25g  Ansprechpartner ------------------------------------------
   Dieselbe Bauform wie der Arbeitgeber-Block der Startseite: eine
   dunkle Karte auf getönter Fläche, Text und Bild nebeneinander. Sie
   schließt die Seite genauso ab, wie jene die Startseite abschließt.
   Live steht dahinter ein Formular-Popup mit Turnstile-Prüfung. Im
   Entwurf nimmt nichts eine Eingabe entgegen, deshalb die zwei Wege,
   die wirklich funktionieren: Anruf und Mail.
   ------------------------------------------------------------------ */
/* Das Polster fällt mobil NICHT ganz weg. Bei padding-block: 0 füllte die
   dunkle Karte das getönte Band zu hundert Prozent aus, und unter 900 px
   liefen dunkles Paketband, dunkle Karte und dunkler Fußbereich über rund
   6.100 px ohne einen einzigen Flächenwechsel durch. Der Sandton dieser
   Sektion kam am Telefon nie vor, obwohl der Bandrhythmus ihn vorsieht.
   Ein Rest von 32 px lässt ihn oben und unten als Rahmen stehen. */
.kontakt { padding-block: var(--sp-8); }
.kontakt > .wrap { padding-inline: 0; }

.kontakt__karte {
  background: linear-gradient(165deg, var(--dunkel) 0%, var(--dunkel-tief) 100%);
  /* Dieselben Rollen wie im Paketkopf, damit der Druck-Block greift:
     ohne sie steht die Telefonnummer auf Papier fast weiß auf weiß. */
  --ink-900: var(--auf-dunkel);
  --ink-800: var(--auf-dunkel-leise);
  --ink-600: var(--auf-dunkel-still);
  padding: var(--sp-12) var(--gutter);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-6);
}
.kontakt__bild img {
  width: 112px; height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--auf-dunkel);
}
.kontakt__rolle { margin-top: var(--sp-5); font-size: var(--fs-base); color: var(--ink-800); }
.kontakt__person {
  font-family: var(--schrift-display);
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--ink-900);
  letter-spacing: var(--ls-titel);
}
.kontakt__funktion { font-size: var(--fs-xs); color: var(--ink-600); letter-spacing: 0.02em; }
.kontakt__aktionen {
  margin-top: var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.kontakt__aktionen .btn { width: 100%; }
/* Die Nummer steht zusätzlich im Klartext. Am Rechner ist ein tel:-Link
   oft wirkungslos, dort will man die Ziffern lesen und wählen können. */
.kontakt__nummer {
  margin-top: var(--sp-4);
  font-size: var(--fs-base); color: var(--ink-800);
}

@media (min-width: 640px) {
  .kontakt__aktionen { flex-direction: row; flex-wrap: wrap; }
  .kontakt__aktionen .btn { width: auto; }
}
@media (min-width: 900px) {
  .kontakt { padding-block: var(--band-y); }
  .kontakt > .wrap { padding-inline: var(--gutter); }
  .kontakt__karte {
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    padding: var(--sp-16) var(--sp-12);
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-12);
    align-items: center;
  }
  .kontakt__bild img { width: 180px; height: 180px; }
}
@media (min-width: 1200px) {
  .kontakt__karte { padding: var(--sp-20) var(--sp-16); }
  .kontakt__bild img { width: 220px; height: 220px; }
}


/* =====================================================================
   22  BEWEGUNG REDUZIEREN UND DRUCK
   scroll-snap bleibt bewusst aktiv, es ist keine Animation.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Der Schreibmaschinen-Kasten steht dann still. Das Skript schaltet
     die Rotation ab und lässt einen festen Wert stehen, hier fällt
     zusätzlich der blinkende Strich weg. */
  .hero__typo-strich { display: none; }
}

/* =====================================================================
   22a SUBTILE SEITENBEWEGUNG
   Progressive Enhancement: Inhalte sind im Ausgangszustand sichtbar.
   JavaScript loest lediglich eine einmalige, kurze Einblendung aus und
   dupliziert Logo-Walls fuer einen nahtlosen, langsamen Lauf.
   ===================================================================== */
/* V3: Startwert war 0.9 bei 8 px Versatz, also faktisch unsichtbar. Die
   Einblendung ist der einzige Bewegungsmoment der Referenz und darf man
   sehen. Ohne JavaScript laeuft sie gar nicht, der Ausgangszustand bleibt
   also sichtbar. */
@keyframes gc-inhalt-ein {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes gc-logos-lauf {
  to {
    transform: translate3d(calc(-1 * var(--logo-lauf-strecke)), 0, 0);
  }
}

.gc-motion-in {
  /* Kein fill-mode: Nach 420 ms bleibt kein transformierter
     Stacking-Context zurueck, der spaeter sticky/fixed UI beeinflusst. */
  animation: gc-inhalt-ein 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-home .abschluss .logowand.logowand--lauf,
.public-page .partnerwand .logowand.logowand--lauf,
.public-page.public-about .about-logos .about-logos__rail.about-logos__rail--lauf {
  --logo-lauf-strecke: 0px;
  --logo-lauf-dauer: 48s;
  display: flex;
  grid-template-columns: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0 22px;
  overflow: hidden;
  contain: paint;
}

.public-home .abschluss .logowand.logowand--lauf > li,
.public-page .partnerwand .logowand.logowand--lauf > li,
.public-page.public-about .about-logos .about-logos__rail.about-logos__rail--lauf > li {
  display: grid;
  flex: 0 0 clamp(116px, 11vw, 148px);
  width: auto;
  min-width: 0;
  padding: 10px 12px;
  place-items: center;
  animation: gc-logos-lauf var(--logo-lauf-dauer) linear infinite;
}

.logowand.logowand--lauf:focus-visible,
.about-logos__rail.about-logos__rail--lauf:focus-visible {
  outline: 3px solid var(--marker);
  outline-offset: 4px;
}

.public-page.public-about .about-logos__rail.about-logos__rail--lauf:focus-visible {
  outline-color: var(--marker-licht);
}

.public-home .abschluss .logowand.logowand--lauf:hover > li,
.public-home .abschluss .logowand.logowand--lauf:focus-within > li,
.public-page .partnerwand .logowand.logowand--lauf:hover > li,
.public-page .partnerwand .logowand.logowand--lauf:focus-within > li,
.public-page.public-about .about-logos__rail.about-logos__rail--lauf:hover > li,
.public-page.public-about .about-logos__rail.about-logos__rail--lauf:focus-within > li,
.gc-motion-paused .logowand.logowand--lauf > li,
.gc-motion-paused .about-logos__rail.about-logos__rail--lauf > li {
  animation-play-state: paused;
}

.public-page.public-about .about-logos .about-logos__rail.about-logos__rail--lauf {
  margin-inline: 0;
  padding-inline: 0;
  padding-bottom: 0;
  overflow: hidden;
  scroll-snap-type: none;
}

.public-page.public-about .about-logos .about-logos__rail.about-logos__rail--lauf > li {
  flex-basis: clamp(138px, 14vw, 164px);
  padding: 0;
  scroll-snap-align: none;
}

@media (max-width: 639px) {
  .public-home .abschluss .logowand.logowand--lauf,
  .public-page .partnerwand .logowand.logowand--lauf,
  .public-page.public-about .about-logos .about-logos__rail.about-logos__rail--lauf {
    gap: 0 14px;
  }

  .public-home .abschluss .logowand.logowand--lauf > li,
  .public-page .partnerwand .logowand.logowand--lauf > li {
    flex-basis: 112px;
  }

  .public-page.public-about .about-logos .about-logos__rail.about-logos__rail--lauf > li {
    flex-basis: 138px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gc-motion-in,
  .logowand.logowand--lauf > li,
  .about-logos__rail.about-logos__rail--lauf > li {
    animation: none !important;
    transform: none !important;
  }
}

@media print {
  .kopf, .burger, .menü, .skip-link, .premium__pfeile,
  .spur__balken, .bewerbleiste, .reiter__band { display: none !important; }
  /* Auf Papier gibt es keine Reiter. Alle drei Bereiche stehen
     untereinander, sonst druckte man ein Drittel der Anzeige. */
  .reiter__bereich { display: block !important; }
  .jobdetail { padding-bottom: 0 !important; }
  .hero { min-height: auto; padding-top: var(--sp-8); }
  .spur { display: block !important; overflow: visible !important; }
  .band--dunkel, .arbeitgeber__karte, .footer,
  /* Beide neu, beide tragen einen eigenen Verlauf statt der Bandfläche.
     Ohne sie blieb der Verlauf stehen, sobald der Nutzer Hintergrundgrafiken
     einschaltet, und die Rückbindung darunter setzte die Überschriften auf
     Dunkel: „Smart", „Premium", „Exzellenz" und „Haben Sie noch Fragen?"
     wären mit 1,02:1 verschwunden. Bei ausgeschalteten Hintergrundgrafiken,
     der Voreinstellung, kippte es andersherum, dann standen alle drei
     Preise und die Telefonnummer fast weiß auf weißem Papier. */
  .paket__kopf, .kontakt__karte { background: none !important; }
  /* Auf Papier gibt es keine dunkle Fläche mehr, also darf auch die
     dunkle Rollenbindung nicht stehen bleiben: sonst druckte die Seite
     fast weiße Schrift auf weißes Papier. Statt Farben zu
     überschreiben, wird hier dieselbe Umbindung zurückgedreht, die
     .dunkel im Bildschirmfall vornimmt. */
  .dunkel {
    --ink-900: var(--ink-hell-900);
    --ink-800: var(--ink-hell-800);
    --ink-700: var(--ink-hell-700);
    --ink-600: var(--ink-hell-600);
    --ink-500: var(--ink-hell-500);
    --ink-400: var(--ink-hell-400);
    --linie:   var(--linie-hell);
    --linie-2: var(--linie-hell-2);
    --rand-ui: var(--rand-ui-hell);
    --rand-still:    var(--linie-hell-2);
    --füllung-still: transparent;
    --füllung-leise: transparent;
    --marker-auf:    var(--marker);
    --orange-text:   var(--orange-text-hell);
    color: var(--ink-hell-700) !important;
  }
  .dunkel h1, .dunkel h2, .dunkel h3, .dunkel h4 { color: var(--ink-hell-900) !important; }
  /* Zwei Bausteine binden die Rollen SELBST auf helle Schrift um, weil
     sie ihre dunkle Fläche mitbringen statt sie vom Band zu erben. Diese
     lokale Bindung steht tiefer im Baum und schlägt die Rückbindung an
     .dunkel. Also hier ein zweites Mal zurückdrehen, sonst drucken
     ausgerechnet die drei Preise und die Telefonnummer weiß auf weiß:
     genau die zwei Angaben, wegen derer man diese Seite ausdruckt. */
  .paket__kopf, .kontakt__karte {
    --ink-900: var(--ink-hell-900);
    --ink-800: var(--ink-hell-800);
    --ink-600: var(--ink-hell-600);
    color: var(--ink-hell-700) !important;
  }
  .paket__kopf .paket__preis,
  .paket__name, .kontakt__person { color: var(--ink-hell-900) !important; }
  /* Der Fußbereich nennt --auf-dunkel unmittelbar und kennt keine Rolle.
     Er trägt den Text der Seite ein zweites Mal, deshalb genügt hier eine
     pauschale Farbe. */
  .footer, .footer * { color: var(--ink-hell-700) !important; }
  body { background: none; }
}