@charset "UTF-8";

/* =====================================================================
   GREEN CAREERS · PUBLIC BRAND V3 (Design 05 „Zusammen wachsen“)
   ---------------------------------------------------------------------
   Gemeinsame Markenebene für alle öffentlichen Seiten. Sie liegt
   bewusst zwischen Funktionsfundament und Seitenschicht. Bestehende
   IDs, Form-Verträge und JS-Hooks werden hier nicht berührt.

   D1 Fundament, 16.09.2026 (Plan PLAN_UMSETZUNG_DESIGN05_2026-09-16,
   Freigabe Option A): EIN Tokensatz, gemessen an der gerenderten
   Referenz 05-zusammen-wachsen.html (Theme e, Computed Styles bei
   1280 px und 390 px), nicht aus dem Quelltext abgeschrieben. Schrift
   Poppins 400 bis 700 lokal (OFL), Fraunces nur als kursiver Akzent.
   Die Rollen (Namen) bleiben, damit die Seitenschichten weiterlaufen;
   die Werte sind neu. Kontraste: werkzeug/farbleiter-pruefung.py,
   Lizenzen und Herkunft: docs/DESIGN05-LIZENZINVENTAR.md.
   ===================================================================== */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-400-e881c7287eac3323.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-500-6b09e2274d65d7da.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-600-a138416a919db028.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-700-63382e3811138b71.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/fraunces-var-fd69f0f0cd8401d6.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* D5a, 17.09.2026: Der kursive Schnitt (SemiBold Italic, Frederiks Design-05-
   Lieferung, vormals hier als @font-face gebunden und über .akzent in
   Überschriften-Akzentwörtern eingesetzt) ist entfernt (E2 und CI-Regel: keine
   Fraunces-Kursive, AUFTRAG_D5.md D5a Punkt 2). Referenzentwurf 05 selbst
   verwendet dafür ohnehin kein Kursiv, sondern aufrechten Text in Akzentfarbe
   (docs/DESIGN05-LIZENZINVENTAR.md, Abschnitt „Fraunces auf den D2-Seiten:
   nicht in Gebrauch"); .akzent ist deshalb ebenfalls entfernt, alle
   Akzentwörter laufen jetzt einheitlich über die klassenlose em-Regel unten.
   Die Schriftdatei fraunces-italic-a39f86f2c3b4c343.woff2 ist gelöscht. */

:is(.public-home, .public-page) {
  /* ===== FLÄCHEN =======================================================
     Gemessen an der Referenz: body #f6f8f4, Karten Weiß, der helle
     Grünton #edf4e3 trägt den Umschalter im Kopf, #dfede2 den Nebenknopf.
     Alle vier tragen Tinte (12,1:1 bis 14,7:1) und Grün als Schrift
     (5,9:1 bis 7,2:1). Die frühere Sperre „Ruhefläche textfrei“ ist damit
     überholt und aus farbleiter-pruefung.py genommen. */
  --gc-canvas: #f6f8f4;
  --gc-canvas-2: #edf4e3;
  --gc-surface: #ffffff;
  --gc-canvas-3: #dfede2;

  /* ===== TINTE =========================================================
     Eine Tinte (#142d23, Referenz --ink nach refinement.css, das zuletzt
     lädt und gewinnt), dazu der Umschalter-Ton #244126 als weiche Stufe
     (10,6:1 auf Canvas) und #56654d als gedämpfter Text (5,8:1 auf
     Canvas, 5,2:1 auf #dfede2). Eine noch leisere Stufe gibt es nicht
     mehr: --gc-ink-faint zeigt auf den gedämpften Ton, damit jeder
     Grad 4,5:1 hält. */
  --gc-ink: #142d23;
  --gc-ink-strong: #142d23;
  --gc-ink-soft: #244126;
  --gc-ink-muted: #56654d;
  --gc-ink-faint: #56654d;

  /* ===== DIE DUNKLE LEITER ============================================
     Drei Sprossen aus der Referenz: R0 #142d1d ist der Fuß, R1 #173b2b
     die Hero-Bühne und jede dunkle Karte auf hell, R2 #1f4a35 die
     gehobene Fläche AUF dunklem Grund (Hover, Chip, Kartenkopf).
     Helle Schrift #eaf5dc: R0 13,1:1 · R1 11,0:1 · R2 8,9:1.
     Gedämpft (76 %): R0 8,2 · R1 7,1 · R2 5,9. Leise (62 %): R0 5,9 ·
     R1 5,3 · R2 4,5 (nur 0,02 Luft, R2 nie aufhellen). Alle drei
     Sprossen tragen damit jeden Grad; Werte aus farbleiter-pruefung.py
     --einzeln, nicht aus dem Kopf. */
  --gc-dark-deep: #142d1d;
  --gc-dark: #173b2b;
  --gc-dark-2: var(--gc-dark);
  --gc-dark-card: #1f4a35;

  --gc-on-dark: #eaf5dc;
  --gc-on-dark-soft: rgb(234 245 220 / 0.76);
  --gc-on-dark-faint: rgb(234 245 220 / 0.62);

  /* ===== HAUPTAKTION ===================================================
     Design 05 kennt kein Signalgrün mehr. Die Hauptaktion ist das
     Waldgrün #126440 mit weißer Schrift (7,2:1, Hover 8,7:1). Die Rolle
     --gc-action bleibt als Name, damit Suche, Kauf und Bewerbung ohne
     Umbau folgen. */
  --gc-action: #126440;
  --gc-action-hover: #0f5636;
  --gc-action-ink: #ffffff;

  /* ===== AKZENT ========================================================
     Das Lindgrün #c6f17b der Referenz. NUR als Fläche mit dunkler Tinte
     (11,4:1) oder als Schrift auf der dunklen Leiter (R0 11,4 · R1 9,6 ·
     R2 7,8). GESPERRT als Schrift auf hell (1,2:1) und als Fläche mit
     heller Schrift. Die Sperre steht ausführbar in farbleiter-pruefung.py. */
  --gc-accent: #c6f17b;
  --gc-accent-hover: #d6f6a1;
  --gc-accent-ink: #142d1d;

  /* ===== GRÜN, NACH ERLAUBNIS GEORDNET ================================
     Ein Grün für alles auf hell: Fläche (Sand 6,7 · Weiß 7,2 · #edf4e3
     6,4 · #dfede2 5,9), Schrift jeden Grades, Fokusring, Kappe.
     GESPERRT als Fläche auf der dunklen Leiter (R0 2,1 · R1 1,7 · R2 1,4);
     dort übernimmt der Akzent. */
  --gc-green: #126440;
  --gc-green-ink: #ffffff;   /* Weiß auf Waldgrün 7,2:1 */
  --gc-green-hover: #0f5636;
  --gc-green-deep: #126440;
  --gc-link: #126440;

  /* Bestandsname für „helles Grün auf Dunkel“: zeigt auf den Akzent. */
  --gc-mint: var(--gc-accent);

  --gc-line: #dce3d3;
  --gc-line-strong: #c9dece;
  --gc-line-dark: rgb(234 245 220 / 0.12);
  --gc-line-dark-strong: rgb(234 245 220 / 0.24);
  /* Bedienelement-Ränder (WCAG 1.4.11, 3:1): #5f7566 hält 5,0:1 auf Weiß,
     4,7:1 auf Canvas, 4,1:1 auf #dfede2. Auf Dunkel 54 % Deckung: R0 4,9 ·
     R1 4,4 · R2 3,8. Die dekorativen Linien der Referenz (#dbe7dd, 1,4:1)
     bleiben Dekor und dürfen an kein Bedienelement. */
  --gc-line-ui: #5f7566;
  --gc-line-dark-ui: rgb(234 245 220 / 0.54);
  --gc-star: #f4a524;
  /* Werte von Patric am 11.09.2026 an der laufenden alten Website
     abgelesen (Premium #D29800, Exzellenz #FF1614). Schrift dort schwarz. */
  --gc-badge-premium: #d29800;
  --gc-badge-exzellenz: #ff1614;

  /* Kanaltripel der beiden Bandflächen für die Fotoschleier. */
  --gc-schleier-tief: 20 45 29;   /* = --gc-dark-deep */
  --gc-schleier-anker: 23 59 43;  /* = --gc-dark */

  /* Deckende Fläche der Sticky-Leiste (W22): Design 05 legt den Kopf hell
     auf Weiß. Genau dieser Wert steht in den vier W22-Zusicherungen. */
  --gc-kopf-flaeche: var(--gc-surface);

  /* ===== SCHRIFT =======================================================
     Poppins für alles, Überschriften 600 mit enger Laufweite wie in der
     Referenz (h1 bis h3 -0,055em, h3 -0,035em). Akzentwörter stehen aufrecht
     in Akzentfarbe, kein Kursiv (D5a, 17.09.2026: Fraunces-Kursive entfernt,
     AUFTRAG_D5.md D5a Punkt 2). Grade: Proportionen der Referenz (h1 46 bis
     78 px, h2 32 bis 49 px, h3 23 px), Mindestgrade der Website bleiben
     (kein Text unter 12 px, Fließtext 16 px). */
  --gc-font-display: "Poppins", Arial, sans-serif;
  --gc-font-body: "Poppins", Arial, sans-serif;
  --gc-fw-title: 600;
  --gc-nav-font-size: 0.875rem;
  --gc-nav-font-weight: 500;
  --gc-nav-line-height: 1.6;
  --gc-fs-hero: clamp(2.875rem, 5.2vw, 4.875rem);
  --gc-fs-page: clamp(2.25rem, 4vw, 3.75rem);
  --gc-fs-section: clamp(2rem, 3.3vw, 3.0625rem);
  --gc-fs-h3: clamp(1.3125rem, 1.2rem + 0.5vw, 1.4375rem);
  --gc-fs-lead: clamp(1.0625rem, 0.98rem + 0.45vw, 1.1875rem);
  --gc-fs-body: 1rem;
  --gc-fs-small: 0.875rem;
  --gc-lh-hero: 1.06;
  --gc-lh-title: 1.13;
  --gc-lh-body: 1.7;
  --gc-ls-hero: -0.055em;
  --gc-ls-section: -0.055em;
  --gc-ls-title: -0.035em;

  /* Raum und Form: Container 1320 px wie die Referenz, Knöpfe 11 px
     Radius (keine Pille mehr), Chips 8 px, Karten 18 px. */
  --gc-container-wide: 1320px;
  --gc-container: 1120px;
  --gc-container-read: 760px;
  --gc-gutter: clamp(16px, 4vw, 48px);
  --gc-section-y: clamp(72px, 8vw, 128px);
  --gc-section-y-tight: clamp(56px, 5.5vw, 92px);
  --gc-section-y-wide: clamp(88px, 9.5vw, 144px);
  --gc-radius-sm: 8px;
  --gc-radius-control: 11px;
  --gc-radius-card: 18px;
  --gc-radius-chip: 8px;
  --gc-radius-feature: 22px;
  --gc-radius-pill: 999px;
  --gc-shadow-float: 0 18px 44px rgb(20 45 29 / 0.14);
  --gc-shadow-dialog: 0 28px 70px rgb(20 45 29 / 0.24);
  --gc-shadow-small: 0 2px 8px rgb(20 45 29 / 0.08);
  --gc-shadow-card: 0 30px 70px rgb(20 45 29 / 0.08);
  --gc-shadow-card-strong: 0 30px 80px rgb(20 45 29 / 0.16);
  --gc-shadow-frame-dark: 0 24px 60px -18px rgb(0 0 0 / 0.55);
  --gc-shadow-action: 0 18px 50px rgb(18 100 64 / 0.22);
  --gc-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Kompatibilität mit dem stabilen Funktionsfundament (app.css). Die
     Rollen dort werden hier im body-gescopten Block noch einmal gesetzt,
     weil app.css sie auf :root bereits aufgelöst vererbt. */
  --schrift-display: var(--gc-font-display);
  --schrift-text: var(--gc-font-body);
  --sand: var(--gc-canvas);
  --sand-ton: var(--gc-canvas-2);
  --karte: var(--gc-surface);
  --dunkel-tief: var(--gc-dark);
  --dunkel: var(--gc-dark-2);
  --marker: var(--gc-green-deep);
  --marker-licht: var(--gc-accent);
  --marker-auf: var(--gc-green-deep);
  --orange: var(--gc-action);
  --orange-tief: var(--gc-action-hover);
  --orange-hell: var(--gc-accent);
  --füllung-dunkel: rgb(234 245 220 / 0.08);
  --auf-dunkel: var(--gc-on-dark);
  --auf-dunkel-leise: var(--gc-on-dark-soft);
  --auf-dunkel-still: var(--gc-on-dark-faint);
  --linie-hell: var(--gc-line);
  --linie-hell-2: var(--gc-line-strong);
  --linie-dunkel: var(--gc-line-dark);
  --linie-dunkel-2: var(--gc-line-dark-strong);
  --rand-ui-hell: var(--gc-line-ui);
  --rand-ui-dunkel: var(--gc-line-dark-ui);
  --linie: var(--gc-line);
  --linie-2: var(--gc-line-strong);
  --rand-ui: var(--gc-line-ui);
  --rand-still: var(--gc-line-strong);
  --füllung-still: var(--gc-surface);
  --orange-text-hell: var(--gc-link);
  --orange-text: var(--gc-link);
  --orange-hover: var(--gc-action-hover);
  --fokus-hell: var(--gc-green-deep);
  --fokus-dunkel: var(--gc-accent);
  --fokus: var(--gc-green-deep);
  --ink-hell-900: var(--gc-ink);
  --ink-hell-800: var(--gc-ink-strong);
  --ink-hell-700: var(--gc-ink-soft);
  --ink-hell-600: var(--gc-ink-muted);
  --ink-hell-500: var(--gc-ink-faint);
  --ink-hell-400: var(--gc-ink-faint);
  --ink-900: var(--gc-ink);
  --ink-800: var(--gc-ink-strong);
  --ink-700: var(--gc-ink-soft);
  --ink-600: var(--gc-ink-muted);
  --ink-500: var(--gc-ink-faint);
  --ink-400: var(--gc-ink-faint);
  --r-sm: var(--gc-radius-sm);
  --r-md: var(--gc-radius-control);
  --r-lg: var(--gc-radius-card);
  --r-xl: var(--gc-radius-feature);
  --r-pill: var(--gc-radius-pill);
  --public-radius-control: var(--gc-radius-control);
  --public-radius-panel: var(--gc-radius-feature);
  --public-control: var(--gc-surface);
  --public-control-hover: var(--gc-canvas-2);
  --public-focus: var(--gc-green-deep);
  --public-ease: var(--gc-ease);
  /* Kopfhöhen der Referenz: 86 px am Rechner, 69 px mobil (hier 72 für
     die 44-px-Trefferflächen). */
  --kopf-h-mobil: 72px;
  --kopf-h: 86px;
  --gutter: var(--gc-gutter);
  --band-y: var(--gc-section-y);
  --breite: calc(var(--gc-container) + 2 * var(--gc-gutter));

  color: var(--gc-ink-soft);
  background: var(--gc-canvas);
  font-family: var(--gc-font-body);
  font-size: var(--gc-fs-body);
  line-height: var(--gc-lh-body);
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

:is(.public-home, .public-page) :is(h1, h2, h3) {
  /* V3: Nicht --gc-ink direkt. app.css bindet auf dunklen Flächen (.dunkel)
     die Rolle --ink-900 auf die helle Schrift um; ein harter Farbwert hier
     schlug diese Bindung und setzte dunkle Titel auf dunkle Karten
     (Arbeitgeber-Block, Premium-Zeilen). Die Rolle ist im Scope oben ohnehin
     auf --gc-ink gebunden, hell bleibt also identisch. */
  color: var(--ink-900);
  font-family: var(--gc-font-display);
  font-optical-sizing: auto;
  font-weight: var(--gc-fw-title);
  line-height: var(--gc-lh-title);
  letter-spacing: var(--gc-ls-title);
  text-wrap: balance;
}

/* Zeilenhöhe und Laufweite je Grad, nicht pauschal. Eine Schlagzeile ist ein
   Block und läuft auf 1.00, eine Zwischenüberschrift atmet bei 1.05, eine
   Unterüberschrift muss mit 1.18 noch als Fließtext lesbar bleiben. */
:is(.public-home, .public-page) h1 {
  font-size: var(--gc-fs-page);
  line-height: var(--gc-lh-hero);
  letter-spacing: var(--gc-ls-hero);
}

:is(.public-home, .public-page) h2 {
  font-size: var(--gc-fs-section);
  line-height: var(--gc-lh-title);
  letter-spacing: var(--gc-ls-section);
}

:is(.public-home, .public-page) h3 {
  font-size: var(--gc-fs-h3);
  line-height: 1.25;
}

:is(.public-home, .public-page) h4 {
  font-family: var(--gc-font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Akzentwort in Überschriften (Design 05): das em steht aufrecht im Grün, auf
   dunklen Flächen im Akzent. So arbeitet der Referenzentwurf 05 selbst
   (docs/DESIGN05-LIZENZINVENTAR.md, Abschnitt „Fraunces auf den D2-Seiten:
   nicht in Gebrauch"); index.html, jobs.html und job.html setzten deshalb nie
   eine eigene Klasse. arbeitgeber.html trug bis D5a zusätzlich die Klasse
   .akzent mit Fraunces-Kursive; die ist jetzt entfernt (E2 und CI-Regel: keine
   Fraunces-Kursive, AUFTRAG_D5.md D5a Punkt 2), alle Seiten laufen jetzt
   einheitlich über diese eine, klassenlose Regel. */
:is(.public-home, .public-page) :is(h1, h2, h3) em {
  font-style: normal;
  color: var(--gc-green);
}

:is(.public-home, .public-page) .dunkel :is(h1, h2, h3) em {
  color: var(--gc-accent);
}

:is(.public-home, .public-page) :is(p, li) {
  text-wrap: pretty;
}

:is(.public-home, .public-page) p {
  max-width: 62ch;
}

/* W1, 19.09.2026, Entscheidung Patric: Bänder auf dieselbe Rail wie Kopf,
   Fuß und Hero. Was war: max-width rechnete mit --gc-container (1120px),
   die Bänder lagen dadurch bei 1120px Innenbreite, während Kopf, Fuß
   und Hero (Regel direkt darunter, :is(.kopf__inner, .footer > .wrap),
   sowie .start__inner und .ag-hero > .wrap auf den Seiten selbst) schon
   seit D6 auf --gc-container-wide (1320px) standen. Frederiks Entwurf
   (05-zusammen-wachsen.html, lokal ausgeliefert und im echten Browser
   gemessen) nutzt für Hero UND alle folgenden Abschnitte dieselbe Klasse
   .container mit identischen Kanten: 1320px bei 1440px Fensterbreite,
   1184px bei 1280px. Was jetzt ist: max-width rechnet mit
   --gc-container-wide, die Bänder liegen damit auf derselben Kante wie
   Kopf, Fuß und Hero und treffen den Entwurf.
   Wichtig, damit die nächste Änderung nicht denselben Fehler macht:
   Der eigentliche Hebel für die Bänder ist DIESE Regel, nicht die
   --breite-Zeile weiter oben (public-brand.css, vormals Zeile 286,
   --breite: calc(var(--gc-container) + 2 * var(--gc-gutter))). Gemessen
   im echten Chrome: ein erzwungener Wert --breite: 9999px ändert die
   gerenderte .wrap-Breite auf keiner der fünf geprüften Seiten
   (index, jobs, arbeitgeber, impressum, faq). Diese Regel hier gewinnt,
   weil sie zwei Klassen Spezifität trägt (app.css:420 .wrap hat nur
   eine) und --gc-container direkt liest, nicht über --breite. Die
   --breite-Zeile bleibt deshalb unverändert stehen, sie ist für die
   Bänder tot und soll es bleiben (Anweisung Patric, 19.09.2026,
   nach eigener Prüfung des Befunds). Vollständige Beweiskette und
   Messwerte: Doku/05_Website-Reviews/W1_RAIL_1320/LIEFERUNG.md,
   Abschnitt "Die Kette, wie im echten Browser gemessen". */
:is(.public-home, .public-page) .wrap {
  max-width: calc(var(--gc-container-wide) + 2 * var(--gc-gutter));
  padding-inline: var(--gc-gutter);
}

:is(.public-home, .public-page) :is(.kopf__inner, .footer > .wrap) {
  max-width: calc(var(--gc-container-wide) + 2 * var(--gc-gutter));
}

:is(.public-home, .public-page) :is(.band, .footer) {
  text-rendering: optimizeLegibility;
}

:is(.public-home, .public-page) .band {
  padding-block: var(--gc-section-y);
}

:is(.public-home, .public-page) .band--eng {
  padding-block: var(--gc-section-y-tight);
}

:is(.public-home, .public-page) .band--weit {
  padding-block: var(--gc-section-y-wide);
}

:is(.public-home, .public-page) .textlink {
  color: var(--gc-link);
  text-decoration-color: color-mix(in srgb, var(--gc-link) 48%, transparent);
}

:is(.public-home, .public-page) .textlink:hover {
  color: var(--gc-ink);
  text-decoration-color: currentColor;
}

:is(.public-home, .public-page) :focus-visible {
  outline-width: 3px;
  outline-color: var(--fokus);
  outline-offset: 3px;
}

:is(.public-home, .public-page) ::selection {
  background: var(--gc-action);
  color: var(--gc-action-ink);
}

:is(.public-home, .public-page) :is(a, button, summary, input, select, textarea) {
  -webkit-tap-highlight-color: rgb(198 241 123 / 0.35);
}

/* Header ------------------------------------------------------------- */

/* Design 05: Der Kopf ist hell und deckend (Weiß mit feiner Linie),
   Logo in Tinte, Navigation in Tinte, rechts Merkliste, Arbeitgeber-Login
   und der Zielgruppen-Umschalter als heller grüner Knopf.
   Der Baustein trägt die Klasse kopf--hell. Ihre Regeln liegen eine
   Spezifitätsstufe über den dunklen Kopfregeln der Seitenschichten
   (public-home, public-base, public-job), die D2 bis D5 abräumen.
   W22 bleibt: die Sticky-Leiste ist in jedem Zustand deckend und ohne
   Backdrop-Filter, damit das feste mobile Menü seinen Bezugsrahmen
   behält. Die deckende Fläche heißt --gc-kopf-flaeche. */
:is(.public-home, .public-page) .kopf {
  height: var(--kopf-h-mobil);
  border-bottom-color: var(--gc-line);
  background: var(--gc-kopf-flaeche);
  box-shadow: none;
  transition:
    background-color 180ms var(--gc-ease),
    box-shadow 180ms var(--gc-ease),
    border-color 180ms var(--gc-ease);
}

:is(.public-home, .public-page) .kopf.kopf--hell {
  border-bottom-color: var(--gc-line);
  background: var(--gc-kopf-flaeche);
  color: var(--gc-ink);
}

:is(.public-home, .public-page) .kopf.ist-gescrollt {
  border-bottom-color: var(--gc-line);
  background: var(--gc-kopf-flaeche);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 8px 28px rgb(20 45 29 / 0.10);
}

/* Die gesamte Sticky-Leiste bleibt auch nach dem Scrollen deckend.
   Ohne Backdrop-Filter behält das feste mobile Menü seinen Bezugsrahmen;
   Logo, Außenbereich und Menüpanel tragen dieselbe helle Fläche. */
@media (max-width: 1100px) {
  @supports selector(:has(*)) {
    :is(.public-home, .public-page) .kopf.ist-gescrollt {
      background: var(--gc-kopf-flaeche);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    :is(.public-home, .public-page) .kopf.ist-gescrollt:has(.menü[open]) {
      background: var(--gc-kopf-flaeche);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

:is(.public-home, .public-page) .kopf__marke {
  min-width: 82px;
  min-height: 52px;
}

:is(.public-home, .public-page) .kopf--hell .kopf__logo {
  width: auto;
  height: 40px;
}

:is(.public-home, .public-page) .burger {
  width: 48px;
  height: 48px;
  border-radius: var(--gc-radius-control);
}

:is(.public-home, .public-page) .kopf--hell .burger__balken {
  background: var(--gc-ink);
}

:is(.public-home, .public-page) .kopf--hell .burger:hover {
  background: var(--gc-canvas-2);
}

:is(.public-home, .public-page) .menü__panel {
  inset-block-start: var(--kopf-h-mobil);
  padding-inline: var(--gc-gutter);
}

/* Klappt aus der Kopfleiste aus und trägt deshalb dieselbe Fläche. */
:is(.public-home, .public-page) .kopf--hell .menü__panel {
  background: var(--gc-kopf-flaeche);
  color: var(--gc-ink);
}

:is(.public-home, .public-page) .kopf--hell .nav__liste > li {
  border-bottom-color: var(--gc-line);
}

:is(.public-home, .public-page) .kopf--hell .nav__link {
  min-height: 52px;
  color: var(--gc-ink-soft);
  font-family: var(--gc-font-body);
  font-size: var(--gc-nav-font-size);
  font-weight: var(--gc-nav-font-weight);
  line-height: var(--gc-nav-line-height);
  letter-spacing: 0;
}

:is(.public-home, .public-page) .kopf--hell .nav__link:hover,
:is(.public-home, .public-page) .kopf--hell .nav__link[aria-current="page"] {
  color: var(--gc-ink);
}

:is(.public-home, .public-page) .kopf--hell .nav__link::after {
  background: var(--gc-green);
}

:is(.public-home, .public-page) .kopf--hell .nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Rechte Seite: Merkliste als Textlink mit Zähler, Login als Kontur
   (Bedienelement, deshalb --gc-line-ui mit 5,0:1), Umschalter als
   heller grüner Knopf ohne Rand (Referenz: #edf4e3 mit Tinte, 10,0:1). */
:is(.public-home, .public-page) .kopf__aktionen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 24px;
}

:is(.public-home, .public-page) .kopf--hell .nav__merkliste {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--gc-ink);
  font-size: var(--gc-nav-font-size);
  font-weight: 600;
}

:is(.public-home, .public-page) .kopf--hell .nav__merkliste:hover {
  color: var(--gc-green);
}

@media (max-width: 1100px) {
  /* Die Merkliste ist im mobilen Menü eine eigene, ruhige Aktion. Der
     Zähler bleibt ein klarer Status, ohne mit den Navigationslinks zu
     verschmelzen. */
  :is(.public-home, .public-page) .menü__panel .kopf__aktionen .nav__merkliste {
    justify-content: space-between;
    min-height: 48px;
    padding-inline: 14px;
    border: 1px solid var(--gc-line-ui);
    border-radius: var(--gc-radius-control);
    background: var(--gc-canvas-2);
  }

  :is(.public-home, .public-page) .menü__panel .nav__merkliste-zahl {
    min-width: 24px;
    height: 24px;
  }
}

:is(.public-home, .public-page) .nav__merkliste-zahl {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-green);
  color: var(--gc-green-ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

:is(.public-home, .public-page) .nav__merkliste-zahl[hidden],
:is(.public-home, .public-page) .nav__merkliste[hidden] {
  display: none;
}

:is(.public-home, .public-page) .kopf--hell .nav__login {
  margin-top: 0;
  width: auto;
  min-height: 46px;
  border-color: var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  color: var(--gc-ink);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

:is(.public-home, .public-page) .kopf--hell .nav__login:hover {
  border-color: var(--gc-green);
  color: var(--gc-ink);
  background: var(--gc-canvas-2);
}

:is(.public-home, .public-page) .kopf--hell .nav__login svg {
  width: 15px;
  height: 15px;
}

:is(.public-home, .public-page) .kopf--hell .umschalter {
  min-height: 46px;
  padding-inline: 16px;
  gap: 10px;
  border-color: transparent;
  border-radius: var(--gc-radius-control);
  background: var(--gc-canvas-2);
  color: var(--gc-ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
}

:is(.public-home, .public-page) .kopf--hell .umschalter:hover {
  border-color: transparent;
  background: var(--gc-canvas-3);
  color: var(--gc-ink);
}

:is(.public-home, .public-page) .kopf--hell .umschalter svg {
  width: 15px;
  height: 15px;
}

:is(.public-home, .public-page) .kopf--hell .branchen__panel {
  border-color: var(--gc-line);
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-float);
}

/* Das Panel hängt am Listenpunkt (position: relative in app.css). Seit
   „Branchen“ der zweite Punkt ist, liefe es rechtsbündig (right: 0) bei
   1101 bis 1394 px links aus dem Fenster. Deshalb linksbündig und auf
   die Fensterbreite geklammert. */
@media (min-width: 1101px) {
  :is(.public-home, .public-page) .kopf--hell .branchen__panel {
    right: auto;
    left: 0;
    max-width: calc(100vw - 2 * var(--gc-gutter));
  }

  /* W2 (19.09.2026, Patric): app.css:1247 setzt hier --fs-base (17,5px)
     fest; auf die Hauptnavigation angeglichen (--gc-nav-font-size,
     14px). Zeilenhöhe und Klickfläche (min-height:44px, app.css:1247)
     bleiben unverändert, nur die Schriftgröße wechselt. */
  :is(.public-home, .public-page) .kopf--hell .branchen__liste a {
    font-size: var(--gc-nav-font-size);
  }
}

:is(.public-home, .public-page) .kopf--hell .branchen__liste a {
  color: var(--gc-ink-soft);
}

:is(.public-home, .public-page) .kopf--hell .branchen__liste a:hover {
  color: var(--gc-ink);
  background: var(--gc-canvas-2);
}

/* Mobil gehört die Branchenliste zur hellen Menüfläche. */
@media (max-width: 1100px) {
  :is(.public-home, .public-page) .kopf--hell .branchen__panel {
    background: var(--gc-kopf-flaeche);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  :is(.public-home, .public-page) .kopf--hell .branchen__liste a {
    min-height: 52px;
    font-family: var(--gc-font-body);
    font-size: var(--gc-nav-font-size);
    font-weight: var(--gc-nav-font-weight);
    line-height: var(--gc-nav-line-height);
    padding: 12px 0;
    color: var(--gc-ink-soft);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  :is(.public-home, .public-page) .kopf--hell .branchen__liste a:is(:hover, :focus-visible, :active, [aria-current="page"]) {
    color: var(--gc-ink);
    background: var(--gc-canvas-2);
  }

  :is(.public-home, .public-page) .kopf--hell .branchen__liste a:focus-visible {
    outline: 3px solid var(--gc-green-deep);
    outline-offset: -3px;
  }
}

/* Buttons und Felder ------------------------------------------------- */

/* Design 05: Knöpfe sind abgerundete Rechtecke (11 px), keine Pillen.
   Haupt- und Nebenaktion unterscheiden sich über Fläche (Waldgrün mit
   Weiß gegen hellgrüne Fläche mit Tinte) und Höhe. Pfeil-Icons laufen
   beim Überfahren 4 px nach rechts (siehe .btn svg). */
:is(.public-home, .public-page) .btn {
  min-height: 48px;
  padding-inline: 22px;
  border-radius: var(--gc-radius-control);
  font-family: var(--gc-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  transition:
    color 180ms var(--gc-ease),
    background-color 180ms var(--gc-ease),
    border-color 180ms var(--gc-ease),
    transform 180ms var(--gc-ease);
}

:is(.public-home, .public-page) .btn:hover {
  transform: translateY(-1px);
}

:is(.public-home, .public-page) .btn svg {
  transition: transform 250ms var(--gc-ease);
}

:is(.public-home, .public-page) .btn:hover svg:last-child {
  transform: translateX(4px);
}

:is(.public-home, .public-page) .btn:active {
  transform: translateY(1px);
}

:is(.public-home, .public-page) .btn:disabled,
:is(.public-home, .public-page) .btn[aria-disabled="true"] {
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

:is(.public-home, .public-page) .btn:disabled:hover,
:is(.public-home, .public-page) .btn[aria-disabled="true"]:hover {
  border-color: var(--gc-line-ui);
  background: transparent;
  color: var(--gc-ink-muted);
  transform: none;
}

:is(.public-home, .public-page) .btn-aktion {
  min-height: 54px;
  padding-inline: 24px;
  border-color: transparent;
  background: var(--gc-action);
  color: var(--gc-action-ink);
  font-weight: 600;
  box-shadow: var(--gc-shadow-action);
}

:is(.public-home, .public-page) .btn-aktion:hover {
  border-color: transparent;
  background: var(--gc-action-hover);
  color: var(--gc-action-ink);
  box-shadow: var(--gc-shadow-action);
}

/* Die Schrift der Hauptaktion kommt immer aus --gc-action-ink (Weiß auf
   Waldgrün 7,19:1). Einzelne Knöpfe (Assistent, Suche) setzten die Farbe
   lokal; diese Regel holt sie auf die Rolle zurück. */
:is(.public-home, .public-page) :is(.btn-aktion, .btn-aktion:visited, .btn-aktion:focus) {
  color: var(--gc-action-ink);
}

:is(.public-home, .public-page) .btn-aktion:disabled,
:is(.public-home, .public-page) .btn-aktion[aria-disabled="true"] {
  opacity: 1;
  background: #a8c7b1;
  color: #304338;
  cursor: not-allowed;
  transform: none;
}

/* Dunkle Nebenrolle (R1 mit heller Schrift, 11,0:1). Maße bleiben für die
   Seitenschicht überschreibbar. */
:is(.public-home, .public-page) .btn-dunkel {
  min-height: 54px;
  padding-inline: 24px;
  border-color: transparent;
  font-weight: 600;
}

/* Nur die Farben stehen über den lokalen Suchknopfregeln. R1 auf Sand
   hält 11,58:1, die Schrift --gc-on-dark auf R1 hält 10,96:1. */
:is(.public-home, .public-page) .btn.btn-dunkel {
  background: var(--gc-dark);
  color: var(--gc-on-dark);
}

:is(.public-home, .public-page) .btn.btn-dunkel:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--gc-dark-card);
  color: var(--gc-on-dark);
}

/* Bei globaler Deckkraft 0,7 hält R0 mit heller Schrift auf Weiß 5,14:1.
   Die Farben bleiben auch beim Überfahren gesperrter Knöpfe erhalten. */
:is(.public-home, .public-page) .btn.btn-dunkel:is(:disabled, [aria-disabled="true"]) {
  border-color: transparent;
  background: var(--gc-dark-deep);
  color: var(--gc-on-dark);
}

:is(.public-home, .public-page) .btn-kontur {
  border-color: var(--gc-line-ui);
  background: transparent;
  color: var(--gc-ink);
}

:is(.public-home, .public-page) .btn-kontur:hover {
  border-color: var(--gc-green-deep);
  background: var(--gc-surface);
  color: var(--gc-ink);
}

/* Nebenknopf auf dunklem Grund: Rand aus --gc-line-dark-ui (R0 4,9:1,
   R1 4,4:1), Beschriftung hell. Das Waldgrün trägt auf Dunkel nicht
   (1,7:1 bis 2,1:1) und ist dort als Kante gesperrt. */
:is(.public-home, .public-page) .dunkel .btn-kontur,
:is(.public-home, .public-page).dunkel .btn-kontur {
  border-color: var(--gc-line-dark-ui);
  background: transparent;
  color: var(--gc-on-dark);
}

:is(.public-home, .public-page) .dunkel .btn-kontur:hover,
:is(.public-home, .public-page).dunkel .btn-kontur:hover {
  border-color: var(--gc-accent);
  background: var(--gc-dark-card);
  color: var(--gc-on-dark);
}

/* Akzentknopf (Design 05): Lindgrün mit dunkler Tinte, 11,4:1. Gehört auf
   die dunkle Leiter (Fuß-Auftakt, Hero-Bühne). Auf hellen Flächen bleibt
   die Hauptaktion das Waldgrün. */
:is(.public-home, .public-page) .btn-akzent {
  min-height: 52px;
  padding-inline: 22px;
  gap: 24px;
  border-color: transparent;
  background: var(--gc-accent);
  color: var(--gc-accent-ink);
  font-weight: 600;
}

:is(.public-home, .public-page) .btn-akzent:hover {
  border-color: transparent;
  background: var(--gc-accent-hover);
  color: var(--gc-accent-ink);
}

/* Nebenknopf auf hell (Design 05 .btn.secondary): #dfede2 mit Tinte,
   12,1:1, ohne Rand. */
:is(.public-home, .public-page) .btn-nebenrolle {
  border-color: transparent;
  background: var(--gc-canvas-3);
  color: var(--gc-ink);
}

:is(.public-home, .public-page) .btn-nebenrolle:hover {
  border-color: transparent;
  background: var(--gc-canvas-2);
  color: var(--gc-ink);
}

:is(.public-home, .public-page) :is(.eingabe, .auswahl, select, textarea) {
  min-height: 52px;
  border-color: var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  /* W18.6: background-color, nicht background. Die Kurzform loeschte das
     Aufklapp-Zeichen mit, das app.css für .auswahl als background-image
     setzt; die Auswahlfelder standen dadurch ohne Pfeil da. */
  background-color: var(--gc-surface);
  color: var(--gc-ink);
  font-family: var(--gc-font-body);
  font-size: 1rem;
}

:is(.public-home, .public-page) :is(.eingabe, .auswahl, select, textarea)::placeholder {
  color: var(--gc-ink-muted);
  opacity: 1;
}

/* Hielt als harter Wert nur 2,51:1 gegen Weiß und war damit im Hover
   schwächer als im Ruhezustand (dort 4,81:1). Jetzt sichtbar dunkler. */
:is(.public-home, .public-page) :is(.eingabe, .auswahl, select, textarea):hover,
/* W19: Über dem Auswahlfeld liegt ein durchsichtiger Knopf. Der Zeiger steht
   damit nie über dem Feld selbst, und dessen eigenes :hover greift nicht mehr.
   Die Hülle nimmt die Zustände deshalb stellvertretend entgegen. */
:is(.public-home, .public-page) .auswahlfeld:hover > :is(.auswahl, select) {
  border-color: var(--gc-ink-muted);
}

:is(.public-home, .public-page) :is(.eingabe, .auswahl, select, textarea):focus,
:is(.public-home, .public-page) .auswahlfeld:focus-within > :is(.auswahl, select) {
  border-color: var(--gc-green-deep);
}

/* Eigenes Aufklappfeld (W19) ----------------------------------------
   Aufbau und Begründung stehen im Kopf von assets/js/auswahlfeld.js.
   Kurz: Das <select> bleibt sichtbar und zeichnet Rahmen, Fläche und Pfeil
   weiter. Hier steht nur, was dazukommt: der durchsichtige Knopf darüber und
   die selbst gezeichnete Liste. */

.auswahlfeld {
  position: relative;
  display: block;
}

.auswahlfeld__knopf {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Fest positioniert am <body>, nicht im Feld: die Filterzeile der Jobbörse
   trägt overflow: auto und würde die Liste sonst abschneiden. */
.auswahlfeld__liste {
  position: fixed;
  z-index: 310;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-dialog);
  color: var(--gc-ink);
  font-family: var(--gc-font-body);
  font-size: 1rem;
  line-height: var(--gc-lh-body);
  list-style: none;
}

.auswahlfeld__liste[hidden] {
  display: none;
}

.auswahlfeld__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--gc-radius-sm);
  cursor: pointer;
}

.auswahlfeld__zeile.ist-aktiv {
  background: var(--gc-canvas-2);
}

.auswahlfeld__zeile[aria-selected="true"] {
  font-weight: 600;
}

/* Das Häkchen sagt, welcher Eintrag gilt; die Fläche sagt, welcher gerade
   unter Zeiger oder Pfeiltaste liegt. Zwei Aussagen, zwei Mittel. */
.auswahlfeld__zeile[aria-selected="true"]::after {
  color: var(--gc-green-deep);
  content: "✓";
}

.auswahlfeld__zeile[aria-disabled="true"] {
  color: var(--gc-ink-faint);
  cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
  .auswahlfeld__zeile {
    transition: background-color 120ms var(--gc-ease);
  }
}

/* Ortsvorschläge (W19) ----------------------------------------------
   Dieselbe Liste, andere Zeilen: hier steht links "01067 Dresden" und
   rechts das Bundesland. Kein Häkchen, denn es ist nichts ausgewählt;
   die Zeile unter Zeiger oder Pfeiltaste trägt nur die Fläche. */

.ortsliste .auswahlfeld__zeile[aria-selected="true"] {
  font-weight: 400;
}

.ortsliste .auswahlfeld__zeile[aria-selected="true"]::after {
  content: none;
}

.ortsliste__ort {
  font-weight: 600;
}

.ortsliste__land {
  flex: 0 0 auto;
  color: var(--gc-ink-faint);
  font-size: var(--gc-fs-small);
}

/* Dunkle Fassung (W20) ------------------------------------------------
   Auf der grünen Suchleiste steht eine cremeweiße Liste wie ein Fremdkörper.
   Die Klasse setzt das Skript, weil die Liste am Seitenkörper hängt und von
   der Leiste nichts erbt. */

.auswahlfeld__liste--dunkel {
  border-color: rgb(244 241 232 / 0.16);
  background: var(--gc-dark-deep);
  color: var(--gc-on-dark);
}

.auswahlfeld__liste--dunkel .auswahlfeld__zeile.ist-aktiv {
  background: rgb(255 255 255 / 0.09);
}

.auswahlfeld__liste--dunkel .auswahlfeld__zeile[aria-selected="true"]::after {
  color: var(--gc-accent);
}

.auswahlfeld__liste--dunkel .auswahlfeld__zeile[aria-disabled="true"] {
  color: rgb(244 241 232 / 0.5);
}

.auswahlfeld__liste--dunkel .ortsliste__land {
  color: rgb(244 241 232 / 0.6);
}

/* Geteilte Karten- und Statussprache -------------------------------- */

:is(.public-home, .public-page) :is(.stellenkarte__körper, .leerzustand, .paket) {
  border-color: var(--gc-line);
  border-radius: var(--gc-radius-card);
}

:is(.public-home, .public-page) .stellenkarte__körper {
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-card);
}

/* W18.3: Die Stellenkarte hebt sich beim Überfahren um 4 px und wechselt
   dabei die Rahmenfarbe, wie die Karten auf abo.green-careers.de. Nur für
   Geraete mit echtem Mauszeiger, damit am Telefon nichts zappelt.
   --gc-green-deep als Rand auf hell ist in der Farbleiter gedeckt. */
:is(.public-home, .public-page) .stellenkarte__körper {
  transition:
    transform 350ms var(--gc-ease),
    box-shadow 350ms var(--gc-ease),
    border-color 350ms var(--gc-ease);
}

@media (hover: hover) and (pointer: fine) {
  :is(.public-home, .public-page) .stellenkarte__körper:hover {
    transform: translateY(-4px);
    border-color: var(--gc-green-deep);
    box-shadow: var(--gc-shadow-card-strong);
  }
}

/* Ohne Mauszeiger bleibt die alte, ruhige Rueckmeldung. */
@media not all and (hover: hover) {
  :is(.public-home, .public-page) .stellenkarte__körper:hover {
    box-shadow: var(--gc-shadow-card-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.public-home, .public-page) .stellenkarte__körper {
    transition: box-shadow 350ms var(--gc-ease);
  }

  :is(.public-home, .public-page) .stellenkarte__körper:hover {
    transform: none;
  }
}

:is(.public-home, .public-page) :is(.stellenkarte__foto, .stellenkopf__bildmotiv) {
  object-fit: cover;
  object-position: var(--media-focus, 50% 50%);
}

/* Eigene Kartenbilder: Die vorhandene Foto-Geometrie bleibt am Rahmen.
   Ersatzmotive behalten ihre bisherige einzelne Bildebene. */
:is(.public-home, .public-page) .stellenkarte__bildbuehne {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Stärker als die Abdeckfläche in public-jobs.css (wird später geladen). */
:is(.public-home, .public-page) .stellenkarte__medien > .stellenkarte__foto.stellenkarte__bildbuehne::after {
  content: none;
}

:is(.public-home, .public-page) .stellenkarte__bildbuehne > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
}

:is(.public-home, .public-page) .stellenkarte__bildbuehne > img[data-titelbild-ebene="hinten"] {
  object-fit: cover;
  filter: blur(24px);
  transform: scale(1.1);
}

:is(.public-home, .public-page) .stellenkarte__bildbuehne > img[data-titelbild-ebene="vorn"] {
  object-fit: contain;
}

:is(.public-home, .public-page) .stellenkarte__logo {
  object-fit: contain;
  object-position: center;
}

:is(.public-home, .public-page) .auszeichnung {
  border-color: color-mix(in srgb, var(--gc-star) 48%, var(--gc-line));
  background: #fff8e8;
  color: #70500b;
}

:is(.public-home, .public-page) .auszeichnung svg {
  color: var(--gc-star);
}

/* Zwei Paketfarben auf allen dynamischen Stellenkarten und Spuren.
   Schwarz hält auch auf dem reinen Altseiten-Rot mindestens 4,5:1. */
:is(.public-home, .public-page) .stellenkarte[data-package="premium"] .auszeichnung {
  background: var(--gc-badge-premium);
  border-color: var(--gc-badge-premium);
  color: #000000;
}

:is(.public-home, .public-page) .stellenkarte[data-package="exzellenz"] .auszeichnung {
  background: var(--gc-badge-exzellenz);
  border-color: var(--gc-badge-exzellenz);
  color: #000000;
}

:is(.public-home, .public-page) .stellenkarte:is([data-package="premium"], [data-package="exzellenz"]) .auszeichnung svg {
  color: currentColor;
}

/* Radienhierarchie wie in der Referenz: die große Fläche ist runder als das
   kleine Element. V2 hatte sie umgekehrt (Karte 16px, Chip 999px), dadurch
   wirkten die Chips wie die Hauptaktion und die Karten wie Kästen. */
:is(.public-home, .public-page) :is(.chip, .pflicht, .marke) {
  border-radius: var(--gc-radius-chip);
}

/* Die Label-Ebene der Referenz: dort tragen rund 36 solcher Zeilen je Seite
   den redaktionellen Rhythmus. V2 hatte über alle Leitseiten zusammen sechs.
   Die Klasse steht bereitgestellt; angewendet wird sie an den vorhandenen
   Kicker-Elementen, nicht durch neue Textbausteine. */
:is(.public-home, .public-page) .gc-label {
  display: inline-block;
  font-family: var(--gc-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Kicker (Design 05 .eyebrow): 600, Laufweite 0,14em, auf hell im
     Waldgrün (Canvas 6,7:1), auf dunkel im Akzent. */
  color: var(--gc-link);
}

/* D5a, 17.09.2026: Die Absenkung unter 340 px auf 11 px entfällt (AUFTRAG_D5.md,
   D5a Punkt 1). Sie machte den Hero-Kicker bei 320 px zwar einzeilig (Kommentar
   vom 06.09.2026), unterschritt damit aber den Mindestgrad von 12 px. .gc-label
   bleibt jetzt ohne Ausnahme bei 12 px; die seitenweisen Rückholregeln aus D2,
   D3, D4 und D5b, die genau das schon erzwangen, sind damit wirkungslos
   geworden und entfernt (gemessen: Computed Style bei 320 px auf allen 27
   Seiten, kein sichtbarer Text unter 12 px). */

:is(.public-home, .public-page) :is(.dunkel, .band--dunkel) .gc-label {
  color: var(--gc-mint);
}

/* Trägt ein Chip das Label-Rezept, muss die 11-px-Zeile in der Pillenhöhe
   zentriert stehen; als inline-block hing sie an der Oberkante. */
:is(.public-home, .public-page) .chip.gc-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Footer ------------------------------------------------------------- */

/* Design 05: vier Teile auf R0. Auftakt (Kicker, große Zeile mit
   Akzentwort, Satz, Akzentknopf), Navigation (Marke plus drei Spalten),
   Branchen als Kacheln, Schlusszeile. Alle Schriftgrade bleiben über
   13 px; die 9-px-Zeilen der Referenz sind bewusst nicht übernommen. */
/* D6-N1 Punkt 7: Fuß-Oberabstand für ALLE 27 Seiten vereinheitlicht.
   D6 hatte den oberen Wert nur auf index.html/arbeitgeber.html seitenscoped
   von 72 auf 62px gezogen (siehe die weiterhin bestehenden, jetzt
   redundanten Overrides in public-home.css und public-employer.css); die
   übrigen 25 Seiten blieben bei 72px. Der Fuß ist ein geteilter Baustein,
   der Bruch fiel beim Seitenwechsel auf. Jetzt gilt für alle Seiten
   derselbe Wert (62px), die zwei seitenscoped Regeln überschreiben ab
   jetzt denselben Wert erneut (kein Bruch, aber auch keine Änderung
   mehr an D6s Zeilen nötig). */
/* D6-N2 Punkt 4, 18.09.2026: clamp(48px, 6vw, 62px) war als "62px auf
   allen Breiten" gedacht, rechnet bei 390px aber 6vw = 23,4px, unter der
   48px-Untergrenze, und liefert dort nur 48px statt 62px (Codex-Bericht
   148, Zusatzprüfung; MESSWERTE.json additional.footer). Am Entwurf
   nachgemessen (refinement.css, footer.rich-footer, per Playwright gegen
   /Users/patricmartel/Documents/gc-design-vergleich/frederik/): 62px
   oberhalb 720px, aber 42px bei und unter 720px (max-width:720px greift
   dort selbst), der Entwurf hält nicht einheitlich 62px, er hat einen
   eigenen mobilen Wert. Laut Auftrag gilt dann: "nimm den Entwurfswert".
   Jetzt ein fester Wert je Bruchpunkt, keine vw-Untergrenze mehr, die
   sich mit der Fensterbreite verschieben kann. */
:is(.public-home, .public-page) .footer,
:is(.public-home, .public-page) .footer.footer--reich {
  padding-block: 42px 0;
  border-top: 0;
  background: var(--gc-dark-deep);
  color: var(--gc-on-dark-soft);
}

@media (min-width: 721px) {
  :is(.public-home, .public-page) .footer,
  :is(.public-home, .public-page) .footer.footer--reich {
    padding-block: 62px 0;
  }
}

:is(.public-home, .public-page) .footer__auftakt {
  display: grid;
  gap: 28px;
  padding-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--gc-line-dark-strong);
}

:is(.public-home, .public-page) .footer__kicker {
  margin-bottom: 18px;
  color: var(--gc-accent);
}

:is(.public-home, .public-page) .footer__titel {
  margin: 0;
  max-width: 14ch;
  color: var(--gc-on-dark);
  /* W2 (19.09.2026, Patric): etwas kleiner, vorher clamp(2.75rem, 6vw,
     5.375rem), bei 1440px 86px, das dominierte den Fuß. Jetzt 64px im
     Maximum (rund ein Viertel kleiner), bleibt als Footer-CTA klar die
     größte Schrift im Fuß (--gc-fs-h3 und .footer__spalte-titel sind
     beide deutlich kleiner, siehe die Regeln unten). */
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.06em;
}

:is(.public-home, .public-page) .footer__titel em {
  font-style: normal;
  color: var(--gc-accent);
}

:is(.public-home, .public-page) .footer__auftakt-aktion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

:is(.public-home, .public-page) .footer__satz {
  margin: 0;
  max-width: 44ch;
  color: var(--gc-on-dark-soft);
  font-size: 0.9375rem;
  line-height: 1.8;
}

:is(.public-home, .public-page) .footer__navigation {
  display: grid;
  gap: 32px 24px;
  padding-block: clamp(32px, 4vw, 45px) clamp(24px, 3vw, 36px);
}

:is(.public-home, .public-page) .footer__marke {
  max-width: 34ch;
}

:is(.public-home, .public-page) .footer__logo {
  width: auto;
  height: 58px;
  margin-bottom: 16px;
}

:is(.public-home, .public-page) .footer__claim {
  margin: 0 0 8px;
  color: var(--gc-on-dark);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.7;
}

:is(.public-home, .public-page) .footer__nebensatz {
  margin: 0;
  color: var(--gc-on-dark-faint);
  font-size: 0.875rem;
  line-height: 1.7;
}

:is(.public-home, .public-page) .footer__spalte ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Spaltentitel wie in der Referenz gemischt gesetzt, nicht als Versalien;
   die Kicker-Sprache gehört dem Auftakt. */
:is(.public-home, .public-page) .footer__spalte-titel {
  margin: 0 0 10px;
  max-width: none;
  color: var(--gc-on-dark);
  font-family: var(--gc-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

:is(.public-home, .public-page) .footer__spalte a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--gc-on-dark-soft);
  font-size: 0.875rem;
  line-height: 1.7;
}

:is(.public-home, .public-page) .footer__spalte a:hover,
:is(.public-home, .public-page) .footer__spalte a[aria-current="page"] {
  color: var(--gc-accent);
}

:is(.public-home, .public-page) .footer__branchen {
  padding-block: clamp(24px, 3vw, 30px) 20px;
  border-top: 1px solid var(--gc-line-dark);
}

/* Der Baustein trägt footer--reich; die Regeln liegen damit eine Stufe über
   den Spaltenregeln von app.css (columns ab 900 px) und den Fußregeln der
   Seitenschichten. Die Kacheln bleiben in jeder Breite eine Chip-Wolke. */
:is(.public-home, .public-page) .footer--reich .footer__branchen-liste {
  display: flex;
  flex-wrap: wrap;
  columns: auto;
  gap: 8px 10px;
  margin-top: 0;
}

:is(.public-home, .public-page) .footer--reich .footer__branchen-liste li {
  display: block;
}

/* Kacheln wie in der Referenz. Bedienelement, deshalb der UI-Randton
   (4,9:1 auf R0), nicht das dekorative #425d33 der Vorlage (2,0:1). */
:is(.public-home, .public-page) .footer--reich .footer__branchen-liste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--gc-line-dark-ui);
  border-radius: var(--gc-radius-sm);
  background: transparent;
  color: var(--gc-on-dark-soft);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-decoration: none;
}

:is(.public-home, .public-page) .footer--reich .footer__branchen-liste a:hover {
  border-color: var(--gc-accent);
  background: var(--gc-dark-card);
  color: var(--gc-on-dark);
  text-decoration: none;
}

:is(.public-home, .public-page) .footer__schluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 18px 16px;
  border-top: 1px solid var(--gc-line-dark);
}

:is(.public-home, .public-page) .footer__copyright {
  margin: 0;
  color: var(--gc-on-dark-faint);
  font-size: 0.8125rem;
}

:is(.public-home, .public-page) .footer__rechtliches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.public-home, .public-page) .footer__rechtliches a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  /* 01.10.2026: Auch ein kurzer Link wie „AGB“ bekommt 44 px Breite. */
  min-width: 44px;
  color: var(--gc-on-dark-soft);
  font-size: 0.8125rem;
}

:is(.public-home, .public-page) .footer__rechtliches a:hover {
  color: var(--gc-accent);
}

:is(.public-home, .public-page) .footer__nach-oben svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 720px) {
  :is(.public-home, .public-page) .footer__auftakt {
    grid-template-columns: 1.3fr 1fr;
    align-items: end;
    gap: 48px;
  }

  :is(.public-home, .public-page) .footer__navigation {
    grid-template-columns: 1fr 1fr;
    gap: 36px 48px;
  }

  :is(.public-home, .public-page) .footer__marke {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  :is(.public-home, .public-page) .footer__navigation {
    grid-template-columns: 1.35fr 1fr 1.15fr 1fr;
    gap: 45px;
  }

  :is(.public-home, .public-page) .footer__marke {
    grid-column: auto;
  }
}

:is(.public-home, .public-page) .skip-link {
  border-radius: var(--gc-radius-control);
  background: var(--gc-action);
  color: var(--gc-action-ink);
  box-shadow: var(--gc-shadow-small);
}

/* Der Sprunglink ist selbst waldgrün; ein waldgrüner Ring darauf wäre
   unsichtbar. Tinte hält auf Canvas 13,8:1. */
:is(.public-home, .public-page) .skip-link:focus-visible {
  outline-color: var(--gc-ink);
  outline-offset: 3px;
}

/* =====================================================================
   GUARD FÜR DIE KARTENSTUFE R2
   ---------------------------------------------------------------------
   app.css bindet auf .dunkel die Ink-Rollen pauschal auf --auf-dunkel,
   --auf-dunkel-leise und --auf-dunkel-still um. Wer eine dunkle Fläche
   AUFHELLT, schwächt damit jede geerbte Textrolle, ohne dass eine Regel
   sichtbar bricht. Genau das ist beim vorigen Stand passiert, weshalb
   dort drei Weiß-Ausnahmen einzeln nachgetragen werden mussten.
   Auf R2 hält die 62-Prozent-Stufe nur 4,52:1 (0,02 Luft); diese Regel hebt sie an
   und macht aus den Ausnahmen eine Systemregel.
   ===================================================================== */
:is(.public-home, .public-page)
  :is(.stimme, .grund__nr, .paket__kopf,
      .arbeitgeber__chip, .hero__typo-kasten) {
  --auf-dunkel-still: var(--gc-on-dark-soft);  /* 4,52 auf 5,92 */
  --ink-500: var(--gc-on-dark-soft);
  --ink-400: var(--gc-on-dark-soft);
}

/* Der Akzent trägt auch auf R2 jeden Grad (7,8:1); die Regel bleibt als
   Systemregel, damit ein Kartenkopf nie leiser wird als sein Band.
   Der zweite Selektor ist nicht redundant: Der Chip TRÄGT .gc-label selbst
   und ist damit kein Nachfahre, ein reiner Nachfahren-Selektor lässt ihn
   auf Signalgrün stehen. */
:is(.public-home, .public-page)
  :is(.stimme, .grund__nr, .paket__kopf,
      .arbeitgeber__chip, .hero__typo-kasten) .gc-label,
:is(.public-home, .public-page)
  :is(.arbeitgeber__chip, .grund__nr, .paket__kopf).gc-label {
  color: var(--gc-on-dark);
}

/* =====================================================================
   DIE KAPPE
   ---------------------------------------------------------------------
   4 px an der Oberkante: auf dunklen Flächen der Akzent (R0 11,4 ·
   R1 9,6 · R2 7,8), auf hellen Karten das Waldgrün (Weiß 7,2 · Sand 6,7).
   Bewusst als inset-Schatten und nicht als Pseudo-Element: So folgt sie
   dem border-radius von selbst und braucht weder overflow noch Teilradien.
   ===================================================================== */
:is(.public-home, .public-page)
  :is(.premium, .vorteile, .stimmen, .zahlen--drei, .gruende, .optionen) {
  box-shadow: inset 0 4px 0 var(--gc-accent);
}

:is(.public-home, .public-page)
  :is(.kategorie, .kontakt__karte, .erklaervideo__poster) {
  box-shadow: inset 0 4px 0 var(--gc-green), var(--gc-shadow-card);
}

:is(.public-home, .public-page) .arbeitgeber__karte {
  box-shadow: inset 0 4px 0 var(--gc-accent);
}

:is(.public-home, .public-page) .suche {
  box-shadow: inset 0 4px 0 var(--gc-accent), var(--gc-shadow-float);
}

@media (max-width: 639px) {
  :is(.public-home, .public-page) .footer__branchen {
    display: none;
  }

  :is(.public-home, .public-page) :is(input, select, textarea, button) {
    font-size: max(1rem, 16px);
  }
}

@media (min-width: 1101px) {
  :is(.public-home, .public-page) .kopf {
    height: var(--kopf-h);
  }

  :is(.public-home, .public-page) .kopf.ist-gescrollt {
    background: var(--gc-kopf-flaeche);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :is(.public-home, .public-page) .kopf--hell .kopf__logo {
    height: 54px;
  }

  :is(.public-home, .public-page) .kopf--hell .nav__liste > li {
    border-bottom: 0;
  }

  :is(.public-home, .public-page) .kopf--hell .nav__link {
    font-size: var(--gc-nav-font-size);
    font-weight: var(--gc-nav-font-weight);
  }

  :is(.public-home, .public-page) .nav__liste > li > a.nav__link {
    min-width: 44px;
    justify-content: center;
  }

  :is(.public-home, .public-page) .kopf__aktionen {
    flex-direction: row;
    align-items: center;
    gap: clamp(12px, 1.4vw, 22px);
    margin-top: 0;
  }

  :is(.public-home, .public-page) .kopf--hell .nav__login {
    min-height: 44px;
    padding-inline: 16px;
    font-size: 0.8125rem;
  }

  :is(.public-home, .public-page) .kopf--hell .umschalter {
    min-height: 44px;
    font-size: 0.8125rem;
  }

  :is(.public-home, .public-page) .nav__liste {
    gap: clamp(14px, 1.35vw, 22px);
  }

  :is(.public-home, .public-page) .menü__panel {
    gap: clamp(16px, 1.6vw, 26px);
  }

  /* Knopftexte im Kopf brechen nie mitten im Wort um ("Lo gin"). */
  :is(.public-home, .public-page) .kopf--hell .nav__login,
  :is(.public-home, .public-page) .kopf--hell .umschalter {
    white-space: nowrap;
  }
}

/* Knappes Desktopband: Abstände und Pfeile im Kopf sparen, damit
   Login und Seitenwechsel neben Navigation und Merkliste Platz haben. */
@media (min-width: 1101px) and (max-width: 1199px) {
  :is(.public-home, .public-page) .nav__liste {
    gap: 10px;
  }

  :is(.public-home, .public-page) .kopf__aktionen {
    gap: 10px;
  }

  :is(.public-home, .public-page) .kopf--hell .nav__login,
  :is(.public-home, .public-page) .kopf--hell .umschalter {
    padding-inline: 12px;
  }

  :is(.public-home, .public-page) .kopf--hell .nav__login svg,
  :is(.public-home, .public-page) .kopf--hell .umschalter svg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.public-home, .public-page) .btn:hover {
    transform: none;
  }
}

@media print {
  :is(.public-home, .public-page) {
    --gc-canvas: #ffffff;
    --gc-canvas-2: #ffffff;
  }
}

@media (max-width: 360px) {
  :is(.public-home, .public-page) .footer,
  :is(.public-home, .public-page) .footer.footer--reich {
    padding-top: 34px;
  }

  :is(.public-home, .public-page) .footer__auftakt {
    gap: 12px;
  }

  :is(.public-home, .public-page) .footer__titel {
    font-size: 2rem;
  }

  :is(.public-home, .public-page) .footer__navigation {
    gap-block: 10px;
  }
}

/* R5-W-FEEDBACK2: Gemeinsame Slider-Bedienung auf dunklen Bändern. */
:is(.public-home, .public-employer) .premium__navigation {
  display: none;
}

@media (max-width: 899px) {
  :is(.public-home, .public-employer) .premium__navigation:not([hidden]) {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
  }

  :is(.public-home, .public-employer) .premium__pfeil {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--gc-line-dark-ui);
    border-radius: var(--gc-radius-pill);
    color: var(--gc-on-dark);
    background: transparent;
    cursor: pointer;
  }

  :is(.public-home, .public-employer) .premium__pfeil svg {
    width: 22px;
    height: 22px;
  }

  :is(.public-home, .public-employer) .premium__pfeil:enabled:is(:hover, :active) {
    background: var(--gc-line-dark);
  }

  :is(.public-home, .public-employer) .premium__pfeil:disabled {
    opacity: 0.4;
    cursor: default;
  }

  :is(.public-home, .public-employer) .premium__pfeil:focus-visible {
    outline: 3px solid var(--gc-accent);
    outline-offset: 3px;
  }
}

/* D8, 19.09.2026: eigenständiger Handykopf und feste Schnellnavigation.
   Der Bruch liegt absichtlich bei 768 px. Zwischen 768 und 899 px bleibt
   der bisherige Kopf mit Menüknopf erhalten. */
:is(.public-home, .public-page) .umschalter--mobil,
:is(.public-home, .public-page) .mobil-leiste {
  display: none;
}

/* Die mobile Leiste wird zentral erst nach dem ersten Scrollen eingeblendet.
   Das HTML-Attribut muss dabei auch gegen die spätere mobile Grid-Regel
   gewinnen, etwa auf den Checkout-Statusseiten ohne public-shell.js. */
:is(.public-home, .public-page) .mobil-leiste[hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  :is(.public-home, .public-page):has(.mobil-leiste) {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* Nur auf der Startseite erscheint die Schnellnavigation erst nach
     einer kurzen Abwärtsbewegung. Bis dahin bleibt sie auch aus der
     Tastaturreihenfolge entfernt. */
  .public-home:has(.mobil-leiste[data-start-versteckt]) {
    padding-bottom: 0;
  }

  .public-home.hat-mobil-leiste {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  :is(.public-home, .public-page) .kopf {
    height: 69px;
  }

  :is(.public-home, .public-page) .kopf__inner {
    gap: 12px;
    padding-inline: 18px;
  }

  :is(.public-home, .public-page) .kopf__marke {
    min-width: 76px;
    min-height: 44px;
  }

  :is(.public-home, .public-page) .kopf--hell .kopf__logo {
    height: 45px;
  }

  /* WEB-033: Das vorhandene native Menü bleibt neben dem Zielgruppen-
     Umschalter erreichbar. Sein Panel, Escape-, Fokus- und Inert-Vertrag
     stammen unverändert aus public-shell.js. */
  :is(.public-home, .public-page) .menü {
    display: block;
    flex: 0 0 auto;
  }

  :is(.public-home, .public-page) .kopf--hell .umschalter--mobil {
    display: none;
  }

  :is(.public-home, .public-page) .mobil-leiste {
    position: fixed;
    z-index: 220;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(var(--mobil-leiste-spalten, 3), minmax(0, 1fr));
    min-height: calc(80px + env(safe-area-inset-bottom));
    padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid var(--gc-action);
    background: var(--gc-action);
    box-shadow: 0 -5px 25px rgb(20 79 53 / 0.07);
  }

  :is(.public-home, .public-page) .mobil-leiste[data-start-versteckt] {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  :is(.public-home, .public-page) .mobil-leiste[data-start-versteckt].ist-sichtbar {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.public-home, .public-page) .mobil-leiste[data-start-versteckt] {
      transition: none;
    }
  }

  :is(.public-home, .public-page) .mobil-leiste:has(a:nth-child(4)) {
    --mobil-leiste-spalten: 4;
  }

  :is(.public-home, .public-page) .mobil-leiste a {
    display: flex;
    min-width: 0;
    min-height: 65px;
    padding: 3px 2px;
    border-radius: var(--gc-radius-control);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--gc-action-ink);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
  }

  :is(.public-home, .public-page) .mobil-leiste a[aria-current="page"] {
    background: var(--gc-canvas-2);
    color: var(--gc-ink-soft);
  }

  :is(.public-home, .public-page) .mobil-leiste a:is(:hover, :active) {
    background: var(--gc-canvas-3);
    color: var(--gc-ink);
  }

  :is(.public-home, .public-page) .mobil-leiste a:focus-visible {
    /* R3: Heller Ring auf der grünen Leiste. Der Versatz hält auch die
       Nachbarfarbe auf derselben Fläche (wie an der Blog-Archivkachel). */
    outline: 3px solid var(--fokus-dunkel);
    outline-offset: -10px;
  }

  :is(.public-home, .public-page) .mobil-leiste a:is([aria-current="page"], :hover, :active):focus-visible {
    outline-color: var(--fokus-hell);
  }

  :is(.public-home, .public-page) .mobil-leiste svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  :is(.public-home, .public-page) .mobil-leiste span {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }

  :is(.public-home, .public-page) .footer__auftakt {
    gap: 18px;
    padding-bottom: 25px;
  }

  :is(.public-home, .public-page) .footer__kicker {
    margin-bottom: 12px;
  }

  :is(.public-home, .public-page) .footer__titel {
    font-size: 2.25rem;
  }

  :is(.public-home, .public-page) .footer__navigation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 8px;
    padding-block: 25px 18px;
  }

  :is(.public-home, .public-page) .footer__marke {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }

  :is(.public-home, .public-page) .footer__logo {
    height: 48px;
    margin-bottom: 10px;
  }

  :is(.public-home, .public-page) .footer__spalte-titel {
    font-size: 0.75rem;
  }

  :is(.public-home, .public-page) .footer__spalte a {
    min-height: 44px;
    font-size: 0.75rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  :is(.public-home, .public-page) .footer__schluss {
    padding-block: 14px 12px;
  }
}

@media print {
  :is(.public-home, .public-page):has(.mobil-leiste) {
    padding-bottom: 0;
  }

  :is(.public-home, .public-page) .mobil-leiste {
    display: none;
  }
}

/* R3-02/R3-03: Der gemeinsame Fuß behält die Desktopspalten. Auf dem
   Handy werden die Gruppen als native Details aufgeklappt, Rechtliches
   und Copyright bleiben außerhalb und damit direkt erreichbar. */
:is(.public-home, .public-page) .footer__gruppe > summary {
  cursor: pointer;
  list-style: none;
}

:is(.public-home, .public-page) .footer__gruppe > summary::-webkit-details-marker {
  display: none;
}

:is(.public-home, .public-page) .footer__gruppe > summary::marker {
  content: "";
}

@media (max-width: 767px) {
  :is(.public-home, .public-page) .footer__navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: 25px 18px;
  }

  :is(.public-home, .public-page) .footer__gruppe {
    border-top: 1px solid var(--gc-line-dark);
  }

  :is(.public-home, .public-page) .footer__gruppe > .footer__spalte-titel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    margin: 0;
    font-size: 0.9375rem;
  }

  :is(.public-home, .public-page) .footer__gruppe > .footer__spalte-titel::after {
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg) translateY(-3px);
    transition: transform 160ms var(--gc-ease);
  }

  :is(.public-home, .public-page) .footer__gruppe[open] > .footer__spalte-titel::after {
    transform: rotate(225deg) translate(-3px, -3px);
  }

  :is(.public-home, .public-page) .footer__gruppe > ul {
    padding-bottom: 14px;
  }

  :is(.public-home, .public-page) .footer__spalte a {
    /* 01.10.2026: Tap-Fläche mindestens 44 px (Apple HIG). */
    min-height: 44px;
    font-size: 0.875rem;
  }

  :is(.public-home, .public-page) .footer__branchen {
    padding-block: 0;
  }

  :is(.public-home, .public-page) .footer__schluss {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

/* R3-05: Die Merkliste ist ein globaler, nativer Dialog. Der Browser
   begrenzt den Fokus; die Inhalte bleiben im lokalen Speicher. */
.merkliste-dialog {
  width: min(720px, calc(100% - 32px));
  max-height: min(760px, calc(100dvh - 48px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--gc-radius-feature);
  background: var(--gc-surface);
  color: var(--gc-ink);
  box-shadow: var(--gc-shadow-dialog);
}

.merkliste-dialog::backdrop {
  background: rgb(20 45 29 / 0.58);
}

.merkliste-dialog__inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: inherit;
}

.merkliste-dialog__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--gc-line);
}

.merkliste-dialog__titel { margin: 6px 0 0; font-family: var(--gc-font-display); font-size: var(--gc-fs-h3); font-weight: 600; line-height: var(--gc-lh-title); }
.merkliste-dialog__anzahl { margin: 6px 0 0; color: var(--gc-ink-muted); font-size: 0.9375rem; }
.merkliste-dialog__schließen { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--gc-line-ui); border-radius: var(--gc-radius-pill); background: var(--gc-surface); color: var(--gc-ink); font: 2rem/1 var(--gc-font-body); cursor: pointer; }
.merkliste-dialog__inhalt { overflow: auto; padding: 24px 28px 28px; }
.merkliste-dialog__leer { margin: 0; color: var(--gc-ink-muted); }
.merkliste-dialog__liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.merkliste-dialog__liste[hidden] { display: none; }
.merkliste-dialog .merkzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; border: 1px solid var(--gc-line-strong); border-radius: var(--gc-radius-card); background: var(--gc-canvas); }
.merkliste-dialog .merkzeile__text { flex: 1 1 240px; min-width: 0; }
.merkliste-dialog .merkzeile__titel { margin: 0; color: var(--gc-ink); font-family: var(--gc-font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.merkliste-dialog .merkzeile__titel a { color: inherit; }
.merkliste-dialog .merkzeile__meta { margin: 4px 0 0; color: var(--gc-ink-muted); font-size: 0.875rem; }
.merkliste-dialog .merkzeile__weg { flex: 0 0 auto; min-height: 44px; padding-inline: 18px; border: 1px solid var(--gc-line-ui); border-radius: var(--gc-radius-control); background: var(--gc-surface); color: var(--gc-ink); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.merkliste-dialog__meldung { margin: 0; }

@media (max-width: 767px) {
  .merkliste-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .merkliste-dialog__kopf { padding: 22px 20px 16px; }
  .merkliste-dialog__inhalt { padding: 18px 20px 24px; }
  .merkliste-dialog .merkzeile { padding: 14px; }
}

/* Stellentitel: gemeinsame Combobox, mobil im Fluss statt über dem Suchknopf. */
.berufsvorschlag { position: relative; }
.berufsvorschlag .berufsliste {
  position: absolute;
  inset: calc(100% + 4px) 0 auto;
  max-height: 20rem;
  color: var(--gc-ink);
  font-size: 1rem;
  line-height: 1.5;
}
.berufsliste .auswahlfeld__zeile {
  min-height: 44px;
  overflow-wrap: anywhere;
}
.berufsliste .auswahlfeld__zeile[aria-selected="true"]::after { content: none; }
@media (max-width: 767px) {
  .berufsvorschlag .berufsliste {
    position: static;
    width: 100%;
    margin-top: 8px;
    max-height: 18rem;
  }
  .public-home .suchkarte__form .berufsvorschlag .eingabe { min-height: 44px; }
  .public-jobs .jobsuche__feld.berufsvorschlag .feld__ico { top: 29px; }
}

/* BLACKMONTH-W: Tinte auf den bestehenden hellen Preisflächen, keine neue Farbe. */
.preis-liste { display: block; color: var(--gc-ink); font-size: .875rem; font-weight: 400; line-height: 1.5; letter-spacing: normal; white-space: nowrap; }
.preis-aktion { margin: 8px 0; color: var(--gc-ink); font-size: .875rem; line-height: 1.5; }
.public-employer .paket--premium .preis-liste,
.public-employer .paket--premium .preis-aktion { color: var(--gc-on-dark); }