@charset "UTF-8";

@import url("./public-assistant.css?v=f0a1b127de5831df");

/* =====================================================================
   GREEN CAREERS · PUBLIC BRAND LAYER
   ---------------------------------------------------------------------
   Die OS-Tokens bleiben die gemeinsame Marken-DNA. Diese Datei setzt
   darauf eine eigenständige, fotografische Startseiten-Sprache:
   größere Typografie, klare Funnel-Hierarchie und weniger Textbänder.
   Sie wird nur von index.html geladen und verändert die übrigen Seiten
   deshalb nicht.
   ===================================================================== */

.public-home {
  --sand: var(--gc-canvas);
  --sand-ton: var(--gc-canvas-2);
  --karte: var(--gc-surface);
  --dunkel: var(--gc-dark-2);
  --dunkel-tief: var(--gc-dark);
  --marker: var(--gc-green-deep);
  --marker-licht: var(--gc-mint);

  --orange: var(--gc-action);
  --orange-tief: var(--gc-action-hover);
  --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);
  --linie-hell: var(--gc-line);
  --linie-hell-2: var(--gc-line-strong);
  --auf-dunkel: var(--gc-on-dark);
  --auf-dunkel-leise: var(--gc-on-dark-soft);
  --auf-dunkel-still: var(--gc-on-dark-faint);
  /* W26: Kein eigener Wert mehr. W22 hat den Kopf auf allen anderen Seiten
     auf 68 px gesenkt, die Startseite blieb bei 78 und ihr Logo bei 38
     beziehungsweise 46 px. Beim Wechsel von der Startseite auf jede andere
     Seite sprang das Logo dadurch um 12 px. Jetzt gilt hier dasselbe wie
     in public-brand.css. --kopf-h wirkt auf den Hero-Abstand weiter unten
     mit, der Hero rückt deshalb um 10 px nach oben. Das ist gewollt. */
  --breite: 1280px;
  background: var(--sand);
}

/* DER FOKUSRING WECHSELT MIT DER FLÄCHE.
   ---------------------------------------------------------------------
   Nachtrag 1, Abschnitt 5 des Reviews. public-brand.css:404 zeichnet den
   Ring in var(--fokus), und --fokus steht auf dem Waldgrün --gc-green-deep
   (#126440). Auf einem dunklen Band (#173b2b) sind das 1,72:1; der Ring
   ist dort die einzige Auskunft darüber, wo die Tastatur steht, und
   braucht 3:1. Dafür liegt --fokus-dunkel (der Akzent) längst bereit, es
   wurde nur nirgends gesetzt. Gesetzt wird der Wert an der Fläche, nicht
   an der Regel: so erbt ihn jedes Bedienelement darin.

   Die Gegenrichtung braucht dieselbe Sorgfalt: eine helle Insel auf einem
   dunklen Band (.hell-insel, etwa die Belegkarte im Hero oder eine
   Stellenkarte im Favoritenband) trägt wieder den hellen Ring. */
.public-home .dunkel,
.public-home .band--dunkel {
  --fokus: var(--fokus-dunkel);
}

.public-home .hell-insel {
  --fokus: var(--fokus-hell);
}

.public-home h1,
.public-home h2,
.public-home h3 {
  text-wrap: balance;
  hyphens: none;
}

.public-home h2 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

/* FLÄCHEN-KANON (Design 05, D2): drei Flächen statt zwei. Die Referenz
   wechselt zwischen Canvas #f6f8f4 und dem hellen Grünton #edf4e3 und
   setzt Tiefgrün nur für einen Abschnitt. Der Zwischenton ist damit
   wieder eine eigene Sektionsfläche und zeigt nicht mehr auf Sand.
   Tinte hält darauf 13,05:1, Waldgrün als Schrift 6,4:1. */
.public-home .band--hell {
  background: var(--gc-canvas);
}

.public-home .band--ton {
  background: var(--gc-canvas-2);
}

.public-home .band--dunkel {
  background: var(--gc-dark);
}

/* Kopf ---------------------------------------------------------------- */

/* D2: Hier standen fünf Regeln für den alten DUNKLEN Kopf (Fläche
   --gc-dark-deep, Login als helle Kontur, Marke auf Mint). Seit D1 ist der
   Kopf hell (bausteine/kopf.html trägt kopf--hell, Regeln in
   public-brand.css). Weil public-home.css nach public-brand.css lädt und
   beide Selektoren dieselbe Spezifität haben, gewann die alte Fläche und
   die Startseite trug als einzige Seite noch den dunklen Kopf. Die Regeln
   sind ersatzlos entfallen; der Kopf kommt jetzt wie überall aus der
   Markenebene. */

/* D2: Der Abschnitt „Aktuelle Stellenangebote" lag auf Tiefgrün. Design 05
   stellt ihn auf den hellen Grund und lässt die weißen Karten tragen
   (Referenz `fusionJobs`). Die Bandfläche kommt jetzt aus .band--hell;
   diese Regel hält nur noch fest, dass .premium selbst keine eigene
   Fläche mehr mitbringt. */
.public-home .premium {
  background: transparent;
}
/* Grad und Gewicht kommen aus .gc-label; die Fläche für den Daumen
   (48 px) bleibt davon unberührt. */

.public-home .premium .stellenkarte__körper {
  border: 0;
  background: var(--karte);

  box-shadow: var(--gc-shadow-card);
}

/* R1-W1-K5: Datum links, Paket rechts. Der leere Paketplatz hat dieselben
   Maße wie beide Badges, damit auch ein Umbruch die Kopfhöhe nicht ändert.
   Die Zeilenform ab 900px verwendet ebenfalls diese Reihenfolge. */
.public-home .premium .stellenkarte__kopf {
  min-height: 26px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.public-home .premium .stellenkarte__kopf .stellenkarte__ab {
  order: -1;
  flex: 0 0 auto;
}

.public-home .premium .stellenkarte__kopf .auszeichnung,
.public-home .premium .stellenkarte__kopf:not(:has(.auszeichnung))::after {
  flex: 0 0 136px;
  height: 26px;
  margin-inline-start: auto;
}

.public-home .premium .stellenkarte__kopf:not(:has(.auszeichnung))::after {
  content: "";
}

.public-home .premium .stellenkarte__kopf .auszeichnung {
  justify-content: center;
}

/* Gleiche Rechnung wie im Favoriten-Banner der Jobbörse: 16px Zeilenabstand aus
   assets/app.css minus 12px Überhang der Kachel ergibt 4px. 28px stellen die
   gemeinten 16px wieder her. Nur für Karten mit übergehängter Kachel, damit die
   übrigen unverändert bleiben. */
.public-home .premium .stellenkarte__körper:has(.stellenkarte__medien > :is(.stellenkarte__logo, .stellenkarte__monogramm)) {
  row-gap: 28px;
}

.public-home .premium .stellenkarte__foto {
  aspect-ratio: 16 / 9;
  object-fit: cover;

  background: var(--gc-canvas-3);
}

/* Die verbundenen synthetischen Karten bringen noch keine echten
   Betriebsfotos mit. Auf der Startseite nutzt ihre Medienfläche deshalb
   vorhandene, klar illustrative Branchenbilder; der Demo-Hinweis bleibt
   sichtbar und die Kartendaten selbst werden nicht verändert. */
.public-home .premium .demo-medienplatzhalter {
  position: relative;
  isolation: isolate;
  min-height: 150px;
  place-items: end start;
  overflow: hidden;
  padding: 18px;
  background-position: center;
  background-size: cover;
  text-align: left;
}

.public-home .premium .demo-medienplatzhalter::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 25%, oklch(0.14 0.035 153 / 0.82));
  content: "";
}

/* Die Foto-Zuordnung ersetzt die gesamte background-image-Liste des
   Platzhalters und warf damit auch dessen dunklen Schutzverlauf weg: der
   helle Betriebsname lag nackt auf dem Foto, auf der hellen Pflasterszene
   mit 1,2:1. Der Verlauf gehört deshalb hier in jede Liste hinein. */
.public-home .premium .stellenkarte:nth-child(3n + 1) .demo-medienplatzhalter {
  background-image: linear-gradient(180deg, rgb(var(--gc-schleier-anker) / 0.30), rgb(var(--gc-schleier-anker) / 0.82)),
                    url("../img/reserve-heckenschnitt.jpg");
  background-position: center, center 38%;
}

.public-home .premium .stellenkarte:nth-child(3n + 2) .demo-medienplatzhalter {
  background-image: linear-gradient(180deg, rgb(var(--gc-schleier-anker) / 0.30), rgb(var(--gc-schleier-anker) / 0.82)),
                    url("../img/kat-dienstleistung.jpg");
}

.public-home .premium .stellenkarte:nth-child(3n) .demo-medienplatzhalter {
  background-image: linear-gradient(180deg, rgb(var(--gc-schleier-anker) / 0.30), rgb(var(--gc-schleier-anker) / 0.82)),
                    url("../img/kat-kultivierung.jpg");
}

.public-home .premium .demo-medienplatzhalter strong {
  font-size: 1rem;
}

.public-home .premium .demo-medienplatzhalter small {
  color: oklch(0.93 0.02 150);
}

/* W18.3 hebt Stellenkarten beim Überfahren um 4 px an. Hier stand seit dem
   05.08. eine Regel, die genau das wieder abschaltete: transform: none und
   derselbe Schatten wie im Ruhezustand. Beim Überfahren passierte auf der
   Startseite deshalb nichts, während dieselbe Karte auf der Jobbörse sprang.
   Die Regel wird nicht einfach gelöscht: public-home.css lädt nach
   public-brand.css, und .public-home .premium .stellenkarte__körper (Zeile
   2135) setzt den Ruheschatten mit gleicher Spezifität wie die W18.3-Regel.
   Ohne eigene Hover-Regel bliebe der Schatten also unverändert. */
@media (hover: hover) and (pointer: fine) {
  .public-home .premium .stellenkarte__körper:hover {
    transform: translateY(-4px);
    box-shadow: var(--gc-shadow-card-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-home .premium .stellenkarte__körper:hover {
    transform: none;
  }
}

.public-home .premium .stellenkarte__medien:has(.platzhalter--betrieb) {
  display: block;
  min-height: 172px;
  background-position: center;
  background-size: cover;
  border-radius: 12px;
  background-color: var(--gc-canvas-3);
}

.public-home .premium .stellenkarte:nth-child(3n + 1) .stellenkarte__medien:has(.platzhalter--betrieb) {
  background-image: linear-gradient(oklch(0.12 0.03 153 / 0.08), oklch(0.12 0.03 153 / 0.08)),
                    url("../img/reserve-heckenschnitt.jpg");
}

.public-home .premium .stellenkarte:nth-child(3n + 2) .stellenkarte__medien:has(.platzhalter--betrieb) {
  background-image: linear-gradient(oklch(0.12 0.03 153 / 0.08), oklch(0.12 0.03 153 / 0.08)),
                    url("../img/kat-kultivierung.jpg");
}

.public-home .premium .stellenkarte:nth-child(3n) .stellenkarte__medien:has(.platzhalter--betrieb) {
  background-image: linear-gradient(oklch(0.12 0.03 153 / 0.08), oklch(0.12 0.03 153 / 0.08)),
                    url("../img/kat-dienstleistung.jpg");
}

.public-home .premium .stellenkarte__medien .platzhalter--betrieb {
  display: none;
}

.public-home .premium .stellenkarte__medien:has(.platzhalter--betrieb) .stellenkarte__logo,
.public-home .premium .demo-medienplatzhalter + .stellenkarte__logo {
  position: absolute;
  bottom: -12px;
  left: 12px;
  width: 64px;
  margin: 0;
  background: var(--karte);
  box-shadow: 0 4px 12px oklch(0.12 0.03 153 / 0.16);
}

.public-home .premium .stellenkarte__medien:has(.platzhalter--betrieb) + .stellenkarte__text {
  padding-top: 4px;
}

.public-home .premium .stellenkarte__titel {
  letter-spacing: -0.02em;
}

.public-home .jobs__weitere {
  width: fit-content;
  margin: 24px auto 0;
}

/* W-LOOM-P2 #6: Bei leerer Paketauswahl bleibt nur der untere Jobknopf.
   Die Leere gilt auch für den statischen Stand ohne JavaScript. */
.public-home .jobs__spur[hidden],
.public-home .jobs__spur[hidden] ~ .spur__balken,
.public-home .jobs__spur[hidden] ~ .premium__navigation,
.public-home .jobs:has(.jobs__spur[hidden]) .abschnittskopf {
  /* hidden gewinnt auch gegen die spätere Mobilregel display:grid. */
  display: none !important;
}

@media (min-width: 900px) {

  .public-home .premium .spur {
    gap: 24px;
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__medien {
    display: none;
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__körper {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--linie-hell-2);

    border-radius: 0;
    box-shadow: none;
    /* D2: Die Zeile lag auf Tiefgrün und band deshalb helle Tinte. Der
       Abschnitt steht jetzt auf Canvas, die Zeile bleibt transparent und
       behält die hellen Ink-Rollen aus .stellenkarte__körper. Nur die
       Trennlinien wechseln auf die helle Leiter. */
    --linie: var(--linie-hell);
    --linie-2: var(--linie-hell-2);
  }

  .public-home .premium .stellenkarte--zeile:nth-child(4) .stellenkarte__körper {
    border-top: 1px solid var(--linie-hell-2);
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__körper:hover {
    background: transparent;
    box-shadow: none;
  }
}

/* D2: Hier lagen drei Regeln, die den Fuß NUR auf der Startseite unter
   640 px umbauten und die Branchenkacheln dort ganz ausblendeten. Seit D1
   kommt der reiche Fuß aus bausteine/fuss.html und der Markenebene und
   sieht auf allen 27 Seiten gleich aus. Die drei Regeln sind entfallen. */

/* R0: Der Fuß trägt den Rahmenton, nicht die Bandfarbe. */
.public-home .footer {
  background: var(--gc-dark-deep);
}
/* Die Trennlinie im dunklen Band hielt als dekorative Hairline nur 1,41:1
   und war praktisch unsichtbar. Als CI-Linie liegt sie bei 3,27:1. */

.public-home .premium .stellenkarte__körper {
  border-radius: var(--gc-radius-card);
  /* Der kleine Schatten war für Listenzeilen gedacht, nicht für die
     tragende Jobkarte. */
  box-shadow: var(--gc-shadow-card);
}

.public-home .premium .stellenkarte__medien,
.public-home .premium .demo-medienplatzhalter,
.public-home .premium .stellenkarte__foto {
  aspect-ratio: 3 / 2;
  min-height: 0;
}

/* W7: deterministische Zeichen für die verbundenen Stellenkarten. */
.public-home .premium .stellenkarte__monogramm {
  position: absolute;
  z-index: 1;
  left: 12px;
  bottom: -12px;
  display: grid;
  width: 64px;
  max-width: 64px;
  height: 64px;
  padding: 8px;
  place-items: center;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-small);
  color: var(--gc-dark-card);
  font-family: var(--gc-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.public-home .premium .stellenkarte__logo {
  pointer-events: none;
}

.public-home .premium .demo-medienplatzhalter {
  padding-left: 88px;
  overflow: hidden;
}

.public-home .premium .demo-medienplatzhalter strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.public-home .premium .demo-medienplatzhalter small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

/* Die Zitatkarte lag dunkler als ihr Band und hing an einem schwarzen
   Schatten auf dunklem Grund, der optisch nichts leistet. Sie steigt auf
   R2, liegt damit heller UND grüner als das Band (1,53:1) und trägt sich
   über die Fläche selbst. Die 11-px-Rolle darin fängt die Guard-Regel ab. */

@media (min-width: 900px) {

/* V3: Der Hero folgt der Komposition der Referenz. Die Schlagzeile stand
     bisher in einer 1.08fr-Spalte neben der Suchkarte und hatte damit knapp
     die halbe Breite; gemessen 435 px gegen 920 px bei Frederik. Sie bekommt
     jetzt die volle Zeile, die Suchkarte rückt darunter. */

  .public-home .premium .spur {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__körper {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__medien {
    display: block;
    width: 96px;
    height: 60px;
    min-height: 0;
    max-height: 60px;
    aspect-ratio: auto;
  }

  .public-home .premium .stellenkarte--zeile .demo-medienplatzhalter {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 60px;
    padding: 0;
    overflow: hidden;
    aspect-ratio: auto;
  }

  .public-home .premium .stellenkarte--zeile .demo-medienplatzhalter > span {
    display: none;
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__foto {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 60px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: var(--media-focus, 50% 50%);
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__medien > :is(.stellenkarte__logo, .stellenkarte__monogramm) {
    position: absolute;
    z-index: 1;
    left: 8px;
    bottom: -8px;
    width: 32px;
    max-width: 32px;
    height: 32px;
    padding: 4px;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__medien + .stellenkarte__text {
    padding-top: 0;
  }
}

/* R5-W-FEEDBACK1: Gemeinsamer Beginn trotz unterschiedlicher Titellängen. */
.public-home .premium .stellenkarte__körper {
  grid-template-rows: auto 1fr;
  align-content: start;
}

.public-home .premium .stellenkarte__titel {
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  .public-home .premium .stellenkarte:not(.stellenkarte--zeile) .stellenkarte__titel {
    font-size: 1.5rem;
  }

  .public-home .premium .stellenkarte:not(.stellenkarte--zeile) .stellenkarte__titel--lang {
    font-size: 1.25rem;
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__körper {
    grid-template-rows: auto;
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__kopf {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__kopf :is(.auszeichnung),
  .public-home .premium .stellenkarte--zeile .stellenkarte__kopf:not(:has(.auszeichnung))::after {
    flex: 0 0 auto;
    margin-inline-start: 0;
    width: 136px;
  }

  .public-home .premium .stellenkarte--zeile .stellenkarte__firma {
    font-size: 1rem;
  }
}

@media (max-width: 899px) {
  .public-home .premium .spur {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gc-gutter);
    padding-inline: var(--gc-gutter);
    padding-bottom: 16px;
  }

  .public-home .premium .spur > .stellenkarte {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .public-home .premium .stellenkarte__titel {
    font-size: 1.25rem;
  }

  .public-home .premium .stellenkarte__titel--lang {
    font-size: 1.125rem;
  }

  .public-home .premium .stellenkarte__kopf {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .public-home .premium .stellenkarte__kopf .auszeichnung,
  .public-home .premium .stellenkarte__kopf:not(:has(.auszeichnung))::after {
    flex: 0 0 auto;
    margin-inline-start: 0;
    width: 136px;
  }
}

/* =====================================================================
   D2 · DESIGN 05 „ZUSAMMEN WACHSEN", ARBEITNEHMER-STARTSEITE
   ---------------------------------------------------------------------
   Gemessen an der Referenz 05-zusammen-wachsen.html?design=e&ansicht=
   arbeitnehmer (fusion.js: fusionHero, fusionJobs, fusionWorlds,
   fusionMatch, fusionSteps, fusionEmployerBanner; refinement.js:
   refinedFaq). Werte und Rollen kommen aus public-brand.css, Farben
   ausschließlich als Token. Schriftgewichte nur 400, 500, 600, 700,
   kein Text unter 12 px.
   ===================================================================== */

/* ---- Gemeinsamer Abschnittskopf ------------------------------------
   Kicker, Überschrift, Lead links, eine Nebenaktion rechts. Die
   Referenz setzt die Nebenaktion ab 900 px auf dieselbe Grundlinie wie
   die Überschrift. */
.public-home .abschnittskopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

.public-home .abschnittskopf__text > .gc-label {
  margin-bottom: 14px;
}

.public-home .abschnittskopf__text h2 {
  max-width: 18ch;
}

.public-home .abschnittskopf__lead {
  margin-top: 14px;
  max-width: 54ch;
  color: var(--ink-600);
  font-size: 1.0625rem;
}

.public-home .abschnittskopf__hinweis {
  color: var(--ink-600);
  font-size: 0.9375rem;
  font-weight: 500;
}

.public-home .dunkel .abschnittskopf__lead,
.public-home .dunkel .abschnittskopf__hinweis {
  color: var(--auf-dunkel-leise);
}

@media (min-width: 900px) {
  .public-home .abschnittskopf {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }

  .public-home .abschnittskopf__text {
    flex: 1 1 auto;
  }
}

/* =====================================================================
   HERO „Dein neuer Job. In der grünen Branche."
   Links die Bildbühne, rechts die weiße Suchkarte, darunter vier
   Kurzwege. Unter 1000 px stapeln beide Teile; die Suchkarte schiebt
   sich dabei wie in der Referenz über die Unterkante des Bildes.
   ===================================================================== */

/* Der Kopf ist fest (position: fixed) und belegt die oberen 72
   beziehungsweise 86 px. Der erste Abschnitt trägt deshalb den Ausgleich,
   so wie .jobseite ihn in assets/app.css:2472 trägt und wie ihn die
   übrigen 26 Seiten über ihre Seitenschicht bekommen. Ohne ihn stand die
   Vorzeile beim Aufruf vollständig unter dem Kopf, und Scrollen half
   nicht: am Seitenanfang steht der Kopf immer darüber (Nachtrag 1, B1).
   Der Umschaltpunkt 1024 px ist derselbe wie in public-brand.css:1476. */
.public-home .start {
  padding-block: calc(var(--kopf-h-mobil) + clamp(20px, 2.5vw, 36px)) clamp(36px, 4.5vw, 64px);
  background: var(--gc-canvas);
}

@media (min-width: 1024px) {
  .public-home .start {
    padding-block-start: calc(var(--kopf-h) + clamp(20px, 2.5vw, 36px));
  }
}

.public-home .start__vorzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: none;
  margin: 0 0 clamp(14px, 2vw, 22px);
}

.public-home .start__marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.public-home .start__marke i {
  width: 8px;
  height: 8px;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-action);
}

.public-home .start__zusatz {
  color: var(--ink-600);
  font-size: 0.9375rem;
}

/* D6 Punkt 1, 18.09.2026: Die Hero-Spur nutzt jetzt denselben breiten
   Container wie Kopf und Fuß (--gc-container-wide, public-brand.css:198),
   statt des schmaleren --gc-container. Entwurf hat bei 1440 px eine
   Innenbreite von 1320 px (Codex-Auftraege/145_DESIGNABGLEICH_BERICHT);
   --gc-container-wide ist exakt 1320px und lag schon vorher im Tokensatz,
   nur ungenutzt (BERICHT.md Abschnitt 2, letzter Absatz). Kein neuer Wert,
   nur der vorhandene Token an der richtigen Stelle. Betrifft NUR die
   Hero-Spur dieser Seite (.start__inner), nicht die übrigen .wrap der
   Seite und keine andere Seite. */
.public-home .start__inner {
  max-width: calc(var(--gc-container-wide) + 2 * var(--gc-gutter));
}

/* D6 Punkt 6, 18.09.2026: Abschnittsabstand auf Entwurfsmaß (78px,
   fusion.css ".section{padding:78px 0}", gemessen bei 1440 UND 1280 px,
   die Referenz skaliert dort nicht mit vw). --gc-section-y bleibt als
   geteilter Token unverändert (public-brand.css, wirkt auch auf
   public-about.css/public-content.css/public-employer.css); diese Regel
   überschreibt padding-block NUR für .band auf dieser Seite, ab 1000 px
   (demselben Bruchpunkt wie das Hero-Raster). Unter 1000 px bleibt der
   bestehende, bereits geprüfte Wert (clamp-Untergrenze 72px). */
@media (min-width: 1000px) {
  .public-home .band {
    padding-block: 78px;
  }
}

/* D6 Punkt 6: Fuß oben auf Entwurfsmaß (62px statt 72px). Der Fuß ist
   ein geteilter Baustein (bausteine/fuss.html, public-brand.css:1162);
   diese Regel überschreibt padding-block NUR auf dieser Seite (dieselbe
   Kettenlogik wie .start__inner oben), die 25 übrigen Seiten behalten
   72px. Nur der obere Wert ändert sich (72 -> 62), Formel und
   Untergrenze (48px, 6vw) bleiben gleich.
   D6-N2 Punkt 4, 18.09.2026: dieselbe Berichtigung wie public-brand.css
   (die clamp-Untergrenze fiel bei 390px auf 48px). Wirkungsgleich mit
   dem jetzt berichtigten globalen Wert, bleibt als seitenscoped Override
   stehen (kein Bruch für spätere Diffs). */
.public-home .footer.footer--reich {
  padding-block: 42px 0;
}

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

.public-home .start__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
}

/* ---- Bildbühne ---------------------------------------------------- */
.public-home .start__buehne {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  overflow: hidden;
  min-height: clamp(520px, 62vw, 620px);
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--gc-radius-feature);
  background: var(--gc-dark);
}

.public-home .start__buehne picture {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
}

.public-home .buehne__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}

/* DER SCHLEIER TRÄGT DEN TEXT, NICHT NUR DIE LINKE KANTE.
   ---------------------------------------------------------------------
   Nachtrag 1, Befund B3. Bis dahin fiel der Schleier von 86 Prozent bei
   34 Prozent Breite auf 42 Prozent bei 68 Prozent Breite ab. Der Lead
   läuft aber bis 71 Prozent der Bühnenbreite (1280 px) beziehungsweise
   bis 94 Prozent (390 und 320 px) und lag dort über der hellen Hecke.
   Glyphengenau gemessen: 4,22:1 bei 1280, 2,57:1 bei 390, 2,66:1 bei 320.

   Zwei Änderungen zusammen:
   1. Der Lead und der Kicker stehen jetzt in --auf-dunkel statt in der
      halbdurchsichtigen Stufe. Über einem weißen Extremfoto braucht die
      halbdurchsichtige Stufe 84 Prozent Deckung für 4,5:1, die volle nur
      72 Prozent. Die Referenz macht es genauso: dort ist die Leadfarbe
      #dce9df, ein DECKENDER heller Ton (fusion.css, .fusion-headline>p).
   2. Der Schleier bleibt bis 74 Prozent Breite bei mindestens 80 Prozent
      Deckung; erst rechts davon, wo kein Text steht, dünnt er aus.

   Unter 1000 px steht der Text von 16 bis 97 Prozent der Bühnenhöhe über
   fast der ganzen Breite. Ein waagerechter Verlauf kann dort nichts mehr
   freilassen; deshalb läuft der Schleier dort senkrecht und lässt das
   Foto im oberen Sechstel frei, wo nur das Akzentschild liegt.

   Gerechnet gegen ein weißes UND ein schwarzes Extremfoto in
   werkzeug/farbleiter-pruefung.py, Gruppe 4; glyphengenau am gerenderten
   Bild in werkzeug/design05-start-browser.mjs. */
/* D6 Punkt 5, 18.09.2026: Erster Versuch einer leichteren Fassung, dem
   Entwurf nachempfunden (fusion.css, .fusion-tint: 100deg-Verlauf 0,95
   auf 0,081, dazu ein senkrechter Verlauf). Die harte Grenze bleibt
   4,5:1 für Kicker/H1/Lead und 3:1 für Kicker/Knöpfe (glyphengenau,
   werkzeug/design05-start-browser.mjs); diese Fassung ist ein
   MESSVERSUCH, kein fertiger Wert - siehe LIEFERUNG.md für das
   tatsächlich gemessene Ergebnis. Die Textspalte ist inzwischen (Punkt 1)
   ein kleinerer Anteil der jetzt breiteren Bühne (34rem von 782,9px statt
   von vorher 662,3px), die 80-Prozent-Zone der Vorfassung hat also mehr
   Reserve als am 17.09. gemessen. */
.public-home .buehne__schleier {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgb(var(--gc-schleier-anker) / 0.97) 0%,
      rgb(var(--gc-schleier-anker) / 0.90) 40%,
      rgb(var(--gc-schleier-anker) / 0.62) 68%,
      rgb(var(--gc-schleier-anker) / 0.32) 90%,
      rgb(var(--gc-schleier-anker) / 0.16) 100%
    ),
    linear-gradient(
      180deg,
      rgb(var(--gc-schleier-tief) / 0.20) 0%,
      rgb(var(--gc-schleier-tief) / 0.12) 42%,
      rgb(var(--gc-schleier-tief) / 0.62) 100%
    );
}

@media (max-width: 999px) {
  /* D6 Punkt 5: leichtere Fassung, MESSVERSUCH wie oben. Kicker/H1/Lead
     liegen mobil jetzt in einem kleineren Ausschnitt der Bühnenhöhe als
     am 17.09. gemessen (Punkt 3 hat den Beleg abgelöst, den Bildlink
     entfernt), die 16-bis-78-Prozent-Zone hat also ebenfalls mehr
     Reserve als die alte Messung. */
  .public-home .buehne__schleier {
    background:
      linear-gradient(
        180deg,
        rgb(var(--gc-schleier-tief) / 0.24) 0%,
        rgb(var(--gc-schleier-anker) / 0.50) 9%,
        rgb(var(--gc-schleier-anker) / 0.75) 16%,
        rgb(var(--gc-schleier-anker) / 0.77) 78%,
        rgb(var(--gc-schleier-anker) / 0.87) 100%
      );
  }
}

.public-home .buehne__text,
.public-home .buehne__beleg,
.public-home .buehne__schild,
.public-home .buehne__bildzeile {
  position: relative;
  z-index: 2;
}

.public-home .buehne__schild {
  position: absolute;
  top: clamp(16px, 2.5vw, 34px);
  right: clamp(-6px, 0.5vw, 10px);
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  max-width: 62%;
  padding: 12px 18px;
  transform: rotate(-4deg);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-accent);
  color: var(--gc-accent-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: var(--gc-shadow-float);
}

.public-home .buehne__schild:focus-visible {
  /* R3: Der Ring liegt vollständig auf dem hellen Sticker, unabhängig
     vom Foto daneben. Auch die 6-px-Nachbarprobe bleibt auf dem Akzent. */
  outline: 3px solid var(--fokus-hell);
  outline-offset: -10px;
}

.public-home .buehne__schild svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* Das Maß steht in rem, nicht in ch: ch rechnet mit der Schriftgröße
   DES ELEMENTS, und die ist hier 16 px. 24ch waren damit 161 px breit,
   und die Schlagzeile brach mitten im Wort um (h1 trägt in app.css
   overflow-wrap: break-word). */
.public-home .buehne__text {
  max-width: 30rem;
}

/* Deckende Farbe, siehe die Begründung am Schleier (Nachtrag 1, B3). */
.public-home .buehne__kicker {
  margin-bottom: 14px;
  color: var(--auf-dunkel);
}

/* Die Referenz setzt die Schlagzeile auf clamp(46px, 5,2vw, 78px) bei
   einer rund 770 px breiten Bühne. Unsere Bühne ist bei 1280 px rund
   660 px breit; der Grad ist deshalb auf das Verhältnis der Bühnenbreiten
   gerechnet: 56 px bei 1280, unten 36 px wie in der Referenz.
   Nachtrag 1: Der Satz ist jetzt derselbe wie in der Referenz („Dein
   neuer Job. In der grünen Branche.", fusion.js, fusionHero). Vorher
   stand hier die Überschrift des Quiz-Dialogs, und die steht auf dieser
   Seite als Frage von Schritt 1 ein zweites Mal. */
/* D6 Punkt 4, 18.09.2026: Grad und Zeilenhöhe auf die Entwurfsformel
   (fusion.css, .fusion-headline h1, Theme e): font-size clamp(48px,
   4.75vw, 70px), line-height 1.04 (unitless, damit sie mit dem Grad
   mitskaliert). Bei 1440 px ergibt das 68,4 / 71,136 px (Entwurfsmaß,
   BERICHT.md Punkt 4), vorher 56 / 59,36. Mobil siehe die Regel unter
   max-width: 639px (37 / 38,11 px, derselbe Bruchpunkt wie die
   <picture>-Quelle in index.html). */
.public-home .buehne__titel {
  margin: 0;
  font-family: var(--gc-font-display);
  font-size: clamp(48px, 4.75vw, 70px);
  font-weight: var(--gc-fw-title);
  line-height: 1.04;
  letter-spacing: var(--gc-ls-hero);
}

@media (max-width: 639px) {
  .public-home .buehne__titel {
    font-size: 37px;
    line-height: 1.03;
  }
}

.public-home .buehne__lead {
  max-width: 27rem;
  margin-top: 18px;
  color: var(--auf-dunkel);
  font-size: var(--gc-fs-lead);
}

.public-home .buehne__bildlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 20px;
  padding-right: 4px;
  border-bottom: 1px solid var(--gc-line-dark-ui);
  color: var(--auf-dunkel);
  font-size: 0.9375rem;
  font-weight: 500;
}

.public-home .buehne__bildlink svg {
  width: 18px;
  height: 18px;
  transition: transform var(--t-basis) var(--ease);
}

.public-home .buehne__bildlink:hover svg {
  transform: translateX(4px);
}

.public-home .buehne__beleg {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--gc-radius-sm);
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-float);
}

.public-home .buehne__haken {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-canvas-3);
  color: var(--gc-action);
}

.public-home .buehne__haken svg {
  width: 18px;
  height: 18px;
}

/* Die beiden Zeilen stehen auf der WEISSEN Karte, nicht auf dem
   Schleier. Die Fläche steht deshalb ausdrücklich an der Regel: so
   rechnet Gruppe 2 der Farbleiter-Prüfung das echte Paar (Tinte auf
   Weiß 14,69:1, gedämpft auf Weiß 6,26:1) und Gruppe 4 zählt die
   Schrift nicht dem Schleier darunter zu. */
.public-home .buehne__beleg strong {
  display: block;
  background: var(--gc-surface);
  color: var(--gc-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.public-home .buehne__beleg small {
  display: block;
  margin-top: 2px;
  background: var(--gc-surface);
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
}

.public-home .buehne__bildzeile {
  align-self: flex-end;
  color: var(--auf-dunkel-leise);
  font-size: 0.75rem;
}

/* D6 Punkt 3, 18.09.2026: Bildbühne mobil auf Entwurfsmaß (343 x 370,6,
   BERICHT.md Punkt 3), vorher 343 x 607,9 mit der Suche erst bei y
   815,7. Zwei Änderungen, beide nach dem Vorbild der Referenz (fusion.css,
   mobiler Bruchpunkt): .fusion-image-link ist dort unter 812 px
   ausgeblendet (kein Erklärtext im ersten Bildschirm nötig), .fusion-proof
   (unser buehne__beleg) steht dort absolut über dem Foto statt im
   Textfluss. Beide Handgriffe sind keine neue Gestaltung, sondern
   dieselbe Technik wie im Entwurf, nur auf unsere Bausteine angewandt.
   Kein Text geändert, kein Element entfernt: der Beleg bleibt lesbar,
   er liegt nur nicht mehr in der Stapelreihenfolge. .buehne__schild
   bleibt bei seiner eigenen, bereits geprüften <399px-Regel (D2
   Nachtrag 1: sonst deckt es Kicker und Schlagzeile zu). */
@media (max-width: 639px) {
  .public-home .buehne__bildlink {
    display: none;
  }

  /* justify-content: flex-start statt des geerbten flex-end
     (.start__buehne, Basisregel): der Beleg trägt jetzt keine
     Flussheight mehr bei, flex-end schöbe Kicker/H1/Lead sonst an den
     unteren Rand, genau unter die abgelöste Beleg-Karte (gemessene
     Überlappung). Schild und Text stehen jetzt oben, wie im Entwurf
     (.fusion-headline, padding-top statt margin-top: auto). */
  .public-home .start__buehne {
    justify-content: flex-start;
    min-height: 0;
  }

  /* Reserviert den Platz für die jetzt absolut gelegte Beleg-Karte
     darunter. 170px deckt auch 320 px ab, wo die Karte durch den
     Zeilenumbruch bis zu 124px hoch wird (gemessen). */
  .public-home .buehne__text {
    margin-bottom: 170px;
  }

  .public-home .buehne__beleg {
    position: absolute;
    right: clamp(16px, 4vw, 28px);
    bottom: clamp(16px, 4vw, 28px);
    left: clamp(16px, 4vw, 28px);
    max-width: none;
  }

  /* Die Bildzeile ist reine Bildunterschrift (Marke steht bereits im
     Kopf); wie die Referenz Erklärlinks unter 812 px ausblendet
     (.fusion-image-link), blendet sie hier aus. Ohne das läge sie,
     einmal von der Beleg-Karte gelöst, ohne verlässliche eigene Höhe
     über der Karte (bei 320 px zwei Zeilen, bei 390 px eine). */
  .public-home .buehne__bildzeile {
    display: none;
  }
}

/* ---- Suchkarte ----------------------------------------------------- */
.public-home .suchkarte {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--gc-radius-feature);
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-card);
}

.public-home .suchkarte__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}

.public-home .suchkarte__symbol {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--gc-radius-sm);
  background: var(--gc-canvas-3);
  color: var(--gc-action);
}

.public-home .suchkarte__symbol svg {
  width: 19px;
  height: 19px;
}

/* Die Suchfrage bleibt auf Desktop in einer Zeile. Die kleinere
   Klammer lässt dabei auch mittlere Desktopbreiten frei von Überlauf. */
.public-home .suchkarte__titel {
  max-width: none;
  margin: 0;
  font-size: clamp(1.625rem, 1.15rem + 1.35vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.public-home .suchkarte__lead {
  margin: 12px 0 22px;
  color: var(--gc-ink-muted);
  font-size: 1rem;
}

.public-home .suchkarte__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.public-home .suchfeld {
  display: block;
  padding: 10px 16px 6px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
}

/* Punkt 7 (Nachtrag 18.09.2026, D6-N3): Ein Tab auf .eingabe zeichnete
   zwei Formen. Grund: die allgemeine Regel :focus-visible (app.css:388,
   bleibt unangetastet) legt ihr outline direkt auf das fokussierte
   Element, hier .eingabe mit border-radius:0 (Zeile unten), darum ein
   scharfkantiges Rechteck; gleichzeitig färbte diese Regel den runden
   11-px-Rand der Hülle. Jetzt EIN Ring: das Feld unterdrückt sein
   eigenes outline (weiter unten), die Hülle bekommt stattdessen
   denselben Ring (3px, var(--fokus), wie überall auf der Seite) und
   folgt damit ihrem eigenen Radius. Waldgrün auf der weißen Hülle hält
   7,19:1, weit über der 3:1-Grenze aus D5a. */
.public-home .suchfeld:focus-within {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.public-home .suchfeld__label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--gc-ink-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.public-home .suchfeld__label svg {
  width: 15px;
  height: 15px;
}

.public-home .suchkarte__form .eingabe {
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.0625rem;
}

.public-home .suchkarte__form .eingabe:hover,
.public-home .suchkarte__form .eingabe:focus {
  border-color: transparent;
}

/* Punkt 7: das eigene outline entfällt, .suchfeld:focus-within (oben)
   zeichnet den einen verbleibenden Ring. Kein ersatzloses outline:none,
   der Fokus bleibt an der Hülle sichtbar, nur nicht mehr doppelt. */
.public-home .suchkarte__form .eingabe:focus-visible {
  outline: none;
}

.public-home .suchkarte__senden {
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
}

.public-home .suchkarte__hinweis {
  margin: 14px 0 0;
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.public-home .suchkarte__assistent {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gc-line);
  color: var(--gc-link);
  font-size: 0.9375rem;
  font-weight: 500;
}

.public-home .suchkarte__assistent svg {
  width: 18px;
  height: 18px;
}

.public-home .suchkarte__belege {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--gc-line);
  list-style: none;
}

.public-home .suchkarte__belege li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.public-home .suchkarte__belege strong {
  color: var(--gc-green-deep);
  font-size: 1.125rem;
  font-weight: 600;
}

.public-home .suchkarte__belege span {
  color: var(--gc-ink-muted);
  font-size: 0.875rem;
}

/* ---- Kurzwege ------------------------------------------------------ */
.public-home .start__kurzwege {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(16px, 2vw, 24px);
}

.public-home .start__kurzwege-titel {
  grid-column: 1 / -1;
  align-self: center;
  color: var(--gc-ink-muted);
}

.public-home .start__kurzwege a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
  color: var(--gc-ink);
  font-size: 0.9375rem;
  font-weight: 500;
}

.public-home .start__kurzwege a:hover {
  border-color: var(--gc-action);
  color: var(--gc-green-deep);
}

.public-home .start__kurzwege svg {
  width: 16px;
  height: 16px;
  color: var(--gc-ink-muted);
}

/* Unter 400 px steht das gedrehte Schild nicht mehr über dem Bild,
   sondern oben in der Spalte: sonst deckt es Kicker und Schlagzeile zu
   (gemessen bei 320 px). Die Drehung bleibt, sie ist das Motiv aus der
   Referenz. */
@media (max-width: 399px) {
  .public-home .buehne__schild {
    position: static;
    align-self: flex-start;
    max-width: 100%;
    margin-bottom: auto;
    transform: rotate(-2deg);
  }
}

/* Bei 320 px bleiben je Kurzweg 139 px. „Baumschule" plus Pfeil brauchte
   bei 15 px Schrift 148 px, der Pfeil wurde abgeschnitten. */
@media (max-width: 399px) {
  .public-home .start__kurzwege a {
    padding-inline: 12px;
    font-size: 0.875rem;
  }

  .public-home .start__kurzwege svg {
    width: 14px;
    height: 14px;
  }
}

@media (min-width: 640px) {
  .public-home .start__kurzwege {
    grid-template-columns: auto repeat(4, minmax(0, 1fr));
  }

  .public-home .start__kurzwege-titel {
    grid-column: auto;
  }
}

@media (min-width: 1000px) {
  .public-home .start__raster {
    grid-template-columns: minmax(0, 1.52fr) minmax(360px, 1fr);
    align-items: stretch;
  }

  /* D6 Punkt 2, 18.09.2026: Die feste min-height (660px) ergab bei der
     schmaleren Spalte ein zu hohes, zu schmales Bild (Ist 662,3 x 740,5,
     Verhältnis 0,89:1). Entwurf misst 859,3 x 663,9 (Verhältnis 1,294:1,
     BERICHT.md Punkt 2). Die absolute Breite folgt aus Punkt 1 (die neue
     1.52fr-Spalte innerhalb der jetzt 1320 px breiten Spur), hier wird
     nur noch das SEITENVERHÄLTNIS des Entwurfs übernommen. */
  /* D6-N2 Punkt 1, 18.09.2026: align-self: start plus aspect-ratio (D6-
     Fassung) hielt zwar das Entwurfsverhältnis, aber Bühne und Suchkarte
     endeten dadurch 108,4 px auseinander (Bühne 604,9 px aus dem festen
     Verhältnis, Suchkarte 713,3 px aus ihrem eigenen Inhalt). Patric hat
     genau das zuerst gesehen; Punkt 1 hat laut Auftrag Vorrang vor dem
     absoluten Spaltenmass aus Punkt 6. Jetzt bestimmt wieder der
     geerbte stretch (.start__raster, align-items: stretch) die Höhe:
     die Bühne füllt IMMER dieselbe Zeilenhöhe wie die Suchkarte, ganz
     ohne Aspect-Ratio-Magie und ohne dass ein künftiger Textzuwachs auf
     einer Seite die Lücke wieder öffnen kann. min-height bleibt die
     Basisregel (clamp(520px, 62vw, 620px) oben, unverändert) als
     Bodenschutz, falls die Suchkarte einmal kürzer wird als 620px. */
  .public-home .start__buehne {
    align-self: stretch;
    min-width: 0;
  }

  .public-home .buehne__text {
    max-width: 34rem;
  }
}

/* =====================================================================
   JOBS (Auszug)
   Die Karten selbst bleiben der geprüfte S8-Baustein (.stellenkarte),
   nur Fläche und Kopf des Abschnitts folgen Design 05.
   ===================================================================== */
.public-home .jobs__punkt {
  color: var(--gc-green-deep);
}

.public-home .jobs__alle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.public-home .jobs__alle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t-basis) var(--ease);
}

.public-home .jobs__alle:hover svg {
  transform: translate(3px, -3px);
}

/* DIE BLÄTTERKNÖPFE DER JOBSPUR STEHEN JETZT AUF EINEM HELLEN BAND.
   ---------------------------------------------------------------------
   Nachtrag 1, Befund B4. Die gemeinsame Regel in public-brand.css:1544
   heißt „Slider-Bedienung auf dunklen Bändern" und gibt den Knöpfen helle
   Zeichen auf durchsichtiger Fläche. Bis D1 trug der Abschnitt
   band--dunkel, D2 macht daraus band--hell; damit standen die Knöpfe mit
   1,06:1 (Zeichen) und 1,03:1 (Rand) auf hellem Grund, also praktisch
   unsichtbar. Sie erscheinen nur unter 900 px, ab da ist die Spur ein
   Raster. Hier steht deshalb die helle Fassung derselben Bedienung.
   Zeichen und Rand sind Bedienelemente und brauchen 3:1 (WCAG 1.4.11);
   gemessen wird das in werkzeug/design05-start-browser.mjs. */
@media (max-width: 899px) {
  .public-home .band--hell .premium__pfeil {
    border-color: var(--gc-line-ui);
    color: var(--gc-ink);
  }

  .public-home .band--hell .premium__pfeil:enabled:is(:hover, :active) {
    background: var(--gc-canvas-2);
  }

  /* NACHTRAG 2, PUNKT 1: DER RING FEHLTE IN DERSELBEN KORREKTUR.
     -------------------------------------------------------------------
     public-brand.css:1584-1587 verdrahtet für dieselben Knöpfe
     `outline: 3px solid var(--gc-accent)` fest und liest --fokus gar
     nicht. Auf dem hellen Band sind das 1,21:1 (Ring rgb(198 241 123)
     gegen rgb(246 248 244)), verlangt sind 3:1 nach WCAG 1.4.11. Die
     Korrektur zu B4 oben hat Rand und Zeichen geholt und den Ring
     stehen lassen: derselbe Fehlermechanismus, nur an einer anderen
     Eigenschaft. public-brand.css bleibt unangetastet, sie gehört D1;
     diese Regel steht in einer D2-Datei, lädt später und ist mit vier
     Klassen spezifischer als die dortige. */
  .public-home .band--hell .premium__pfeil:focus-visible {
    outline-color: var(--fokus-hell);
  }
}

/* Der Fortschrittsbalken der Spur ist Dekoration (aria-hidden), muss auf
   dem hellen Band aber sichtbar bleiben. */
.public-home .band--hell .spur__balken {
  background: var(--gc-line);
}

.public-home .band--hell .spur__balken i {
  background: var(--gc-ink-muted);
}

/* =====================================================================
   BRANCHEN (vier fotografische Kacheln)
   ===================================================================== */
.public-home .branchen__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-home .branchenkachel a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: 300px;
  padding: 20px;
  border-radius: var(--gc-radius-card);
  background: var(--gc-dark);
  color: var(--gc-on-dark);
  box-shadow: var(--gc-shadow-card);
}

.public-home .branchenkachel img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gleiche Rechnung wie beim Hero (Nachtrag 1, B3 und Abschnitt 5 des
   Reviews). Der Schleier stieg bisher gleichmäßig von 24 Prozent oben auf
   88 Prozent unten. Text steht aber an DREI Höhen: die Nummer bei 5 bis
   13 Prozent, die Einordnung bei 47 bis 62, die Schlagzeile bei 57 bis 79.
   Über hellen Motiven (gemessen: reines Weiß in Kachel 2 und 3) hielt die
   Nummer 1,38:1 und die Einordnung 2,97:1.

   Der Schleier trägt deshalb oben ein eigenes Band, dünnt in der Mitte
   aus, wo das Motiv zu sehen sein soll, und schließt unten dicht. Nummer
   und Einordnung stehen dazu in der deckenden Farbe: halbdurchsichtig
   bräuchten sie 84 Prozent Deckung statt 72. */
.public-home .branchenkachel a::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(var(--gc-schleier-anker) / 0.80) 0%,
    rgb(var(--gc-schleier-anker) / 0.76) 15%,
    rgb(var(--gc-schleier-anker) / 0.56) 30%,
    rgb(var(--gc-schleier-anker) / 0.76) 46%,
    rgb(var(--gc-schleier-anker) / 0.88) 64%,
    rgb(var(--gc-schleier-anker) / 0.94) 100%
  );
  content: "";
  transition: opacity var(--t-basis) var(--ease);
}

.public-home .branchenkachel__nr {
  position: absolute;
  top: 18px;
  left: 20px;
  color: var(--auf-dunkel);
  font-size: 0.8125rem;
  font-weight: 500;
}

.public-home .branchenkachel__text small {
  display: block;
  margin-bottom: 8px;
  color: var(--auf-dunkel);
  font-size: 0.8125rem;
}

.public-home .branchenkachel__text strong {
  display: block;
  font-family: var(--gc-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--gc-ls-title);
}

.public-home .branchenkachel__mehr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gc-line-dark-ui);
  font-size: 0.875rem;
  font-weight: 500;
}

.public-home .branchenkachel__mehr svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t-basis) var(--ease);
}

.public-home .branchenkachel a:hover .branchenkachel__mehr svg {
  transform: translate(3px, -3px);
}

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

@media (min-width: 1000px) {
  .public-home .branchen__raster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .public-home .branchenkachel a {
    min-height: 360px;
  }
}

/* =====================================================================
   QUIZ „Welche Richtung?"
   Ohne JavaScript stehen alle drei Schritte untereinander. Mit
   assets/js/quiz.js wird daraus eine Schrittfolge; die Klassen bleiben
   dieselben, nur [hidden] wandert.
   ===================================================================== */
.public-home .quiz__inner {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
}

.public-home .quiz__intro h2 {
  margin: 14px 0 0;
  max-width: 14ch;
}

.public-home .quiz__intro p {
  margin-top: 16px;
  color: var(--ink-600);
  font-size: 1.0625rem;
}

.public-home .quiz__form {
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: var(--gc-radius-feature);
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-card);
}

.public-home .quiz__fortschritt {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
}

.public-home .quiz__fortschritt-text {
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.public-home .quiz__fortschritt-balken {
  flex: 1 1 auto;
  height: 4px;
  overflow: hidden;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-canvas-3);
}

.public-home .quiz__fortschritt-balken > i {
  display: block;
  width: 33%;
  height: 100%;
  border-radius: inherit;
  background: var(--gc-action);
  transition: width var(--t-basis) var(--ease);
}

.public-home .quiz__schritt {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}

.public-home .quiz__schritt:last-of-type {
  margin-bottom: 20px;
}

.public-home .quiz__frage {
  padding: 0;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: var(--gc-fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--gc-ls-title);
}

.public-home .quiz__wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.public-home .quizmarke {
  position: relative;
  display: inline-flex;
}

.public-home .quizmarke input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.public-home .quizmarke span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
  color: var(--gc-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

.public-home .quizmarke input:checked + span {
  border-color: transparent;
  background: var(--gc-accent);
  color: var(--gc-accent-ink);
  font-weight: 600;
}

.public-home .quizmarke input:focus-visible + span {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.public-home .quiz__feld {
  margin-top: 16px;
  padding: 10px 16px 6px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
}

/* Punkt 7 (Nachtrag 18.09.2026, D6-N3): dieselbe Doppelform wie bei
   .suchfeld (siehe dort), hier am Freitextfeld von Quiz-Schritt 3.
   Exakt derselbe Aufbau (Hülle radius 11, Feld radius 0), also derselbe
   Fix. */
.public-home .quiz__feld:focus-within {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.public-home .quiz__feld .eingabe {
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.0625rem;
}

.public-home .quiz__feld .eingabe:focus-visible {
  outline: none;
}

.public-home .quiz__hinweis {
  margin: 12px 0 0;
  color: var(--gc-ink-muted);
  font-size: 0.875rem;
}

.public-home .quiz__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--gc-line);
}

.public-home .quiz__senden {
  justify-content: space-between;
  flex: 1 1 220px;
}

@media (min-width: 900px) {
  .public-home .quiz__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(32px, 4vw, 72px);
  }
}

/* =====================================================================
   ES MUSS AUCH MENSCHLICH PASSEN (Design 05 `fusionMatch`)
   ---------------------------------------------------------------------
   Links Einordnung und Themenwahl, rechts die Antwortkarte. Die Karte
   wechselt ohne JavaScript: drei Radioknöpfe, drei Antworten, und
   `:checked ~` schaltet zwischen ihnen um. Die Radios stehen im
   Quelltext VOR den Antworten, weil der Geschwisterwähler nur nach
   vorne schaut.

   Alle drei Antworten stehen im Quelltext, nur eine ist sichtbar. Das
   ist Absicht: so findet die Seitensuche des Browsers sie, und ohne
   Stylesheet stehen sie schlicht untereinander.
   ===================================================================== */
.public-home .menschlich__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

.public-home .menschlich__lead {
  margin-top: 14px;
  max-width: 34rem;
  color: var(--ink-600);
  font-size: 1.0625rem;
}

.public-home .menschlich__weg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.public-home .menschlich__weg svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t-basis) var(--ease);
}

.public-home .menschlich__weg:hover svg {
  transform: translate(3px, -3px);
}

/* Das fieldset bringt eigene Ränder und Abstände mit. Hier trägt es nur
   die Gruppe, nicht die Optik. */
.public-home .menschlich__wahlraum {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Sichtbar nicht da, für die Tastatur sehr wohl: dieselbe Technik wie
   bei .quizmarke input. */
.public-home .menschlich__eingabe {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.public-home .menschlich__wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.public-home .menschlich__thema span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
  color: var(--gc-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

.public-home #menschlich-team:checked ~ .menschlich__wahl [for="menschlich-team"] span,
.public-home #menschlich-alltag:checked ~ .menschlich__wahl [for="menschlich-alltag"] span,
.public-home #menschlich-perspektive:checked ~ .menschlich__wahl [for="menschlich-perspektive"] span {
  border-color: transparent;
  background: var(--gc-accent);
  color: var(--gc-accent-ink);
  font-weight: 600;
}

.public-home #menschlich-team:focus-visible ~ .menschlich__wahl [for="menschlich-team"] span,
.public-home #menschlich-alltag:focus-visible ~ .menschlich__wahl [for="menschlich-alltag"] span,
.public-home #menschlich-perspektive:focus-visible ~ .menschlich__wahl [for="menschlich-perspektive"] span {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.public-home .menschlich__antworten {
  margin-top: 18px;
}

.public-home .menschlich__antwort {
  display: none;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-feature);
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-card);
}

.public-home #menschlich-team:checked ~ .menschlich__antworten [data-menschlich="team"],
.public-home #menschlich-alltag:checked ~ .menschlich__antworten [data-menschlich="alltag"],
.public-home #menschlich-perspektive:checked ~ .menschlich__antworten [data-menschlich="perspektive"] {
  display: block;
}

.public-home .menschlich__marke {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-canvas-3);
  color: var(--gc-green-deep);
}

.public-home .menschlich__marke svg {
  width: 22px;
  height: 22px;
}

.public-home .menschlich__auftakt {
  margin: 16px 0 0;
  color: var(--ink-600);
}

.public-home .menschlich__antwort h3 {
  margin: 8px 0 0;
  font-family: var(--gc-font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: var(--gc-ls-title);
}

.public-home .menschlich__antwort p:last-child {
  margin: 12px 0 0;
  color: var(--ink-600);
  font-size: 1rem;
}

@media (min-width: 900px) {
  .public-home .menschlich__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
  }
}

/* =====================================================================
   SO GEHT'S (drei Schritte)
   ===================================================================== */
.public-home .schritte__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-home .schritt__nr {
  display: inline-grid;
  width: 44px;
  height: 36px;
  place-items: center;
  border-radius: var(--gc-radius-sm);
  background: var(--gc-canvas-3);
  color: var(--gc-green-deep);
  font-size: 0.875rem;
  font-weight: 600;
}

.public-home .schritt h3 {
  margin: 16px 0 0;
  font-size: var(--gc-fs-h3);
  font-weight: 600;
  letter-spacing: var(--gc-ls-title);
}

.public-home .schritt p {
  margin-top: 10px;
  max-width: 40ch;
  color: var(--ink-600);
}

.public-home .schritte__quiz {
  flex: 0 0 auto;
}

@media (min-width: 800px) {
  .public-home .schritte__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* =====================================================================
   STIMMEN (Bestandsinhalt in der Kartenform von Design 05)
   ===================================================================== */
.public-home .stimmen__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-home .stimme figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  height: 100%;
  margin: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-card);
}

.public-home .stimme blockquote {
  margin: 0;
}

.public-home .stimme blockquote p {
  margin: 0;
  color: var(--gc-ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}

.public-home .stimme__person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--gc-line);
}

.public-home .stimme__foto {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--gc-radius-pill);
  object-fit: cover;
  background: var(--gc-canvas-3);
}

.public-home .stimme__person strong {
  display: block;
  color: var(--gc-ink);
  font-size: 1rem;
  font-weight: 600;
}

.public-home .stimme__person small {
  display: block;
  margin-top: 2px;
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
}

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

/* =====================================================================
   FÜR ARBEITGEBER (Anrede „Sie")
   ===================================================================== */
.public-home .arbeitgeber__karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: var(--gc-radius-feature);
  background: var(--gc-canvas-2);
  box-shadow: none;
}

.public-home .arbeitgeber__text {
  padding: clamp(32px, 3.3vw, 48px);
}

.public-home .arbeitgeber__text h2 {
  margin: 14px 0 0;
  max-width: 14ch;
}

.public-home .arbeitgeber__text .gc-label {
  margin: 0 0 16px;
}

.public-home .arbeitgeber__text p {
  margin: 18px 0 26px;
  max-width: 46ch;
  color: var(--gc-ink-soft);
}

.public-home .arbeitgeber__bild {
  position: relative;
  margin: 0;
  min-height: 260px;
  background: var(--gc-dark);
}

.public-home .arbeitgeber__bild picture {
  display: block;
  width: 100%;
  height: 100%;
}

.public-home .arbeitgeber__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .public-home .arbeitgeber__karte {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: 376px;
  }

  .public-home .arbeitgeber__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 47px;
  }

  .public-home .arbeitgeber__text h2 {
    margin: 0 0 18px;
    font-size: 2.5rem;
    line-height: 1.13;
  }

  .public-home .arbeitgeber__text > p:not(.gc-label) {
    max-width: 330px;
    margin: 0 0 25px;
    font-size: 0.8125rem;
    line-height: 1.57;
  }

  .public-home .arbeitgeber__text .btn {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
  }

  .public-home .arbeitgeber__bild {
    min-height: 0;
    height: 100%;
  }

  .public-home .arbeitgeber__bild picture {
    position: absolute;
    inset: 0;
  }

  .public-home .arbeitgeber__bild img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
    filter: none;
    object-position: 55% 35%;
  }
}

/* =====================================================================
   FAQ
   Links Einordnung und Kontaktweg, rechts die Fragen als natives
   details/summary (Referenz `refinedFaq`).
   ===================================================================== */
.public-home .faq__inner {
  display: grid;
  gap: clamp(28px, 3.5vw, 56px);
}

.public-home .faq__zeichen {
  display: grid;
  width: 60px;
  height: 60px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: var(--gc-radius-card);
  background: var(--gc-accent);
  color: var(--gc-accent-ink);
  font-family: var(--gc-font-display);
  font-size: 1.75rem;
  font-weight: 600;
}

.public-home .faq__intro h2 {
  margin: 14px 0 0;
  max-width: 13ch;
}

.public-home .faq__intro > p {
  margin-top: 18px;
  max-width: 40ch;
  color: var(--ink-600);
}

.public-home .faq__kontakt {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
  color: var(--gc-ink);
}

.public-home .faq__kontakt:hover {
  border-color: var(--gc-action);
}

.public-home .faq__kontakt-symbol {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-canvas-3);
  color: var(--gc-action);
}

.public-home .faq__kontakt-symbol svg {
  width: 20px;
  height: 20px;
}

.public-home .faq__kontakt strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

.public-home .faq__kontakt small {
  display: block;
  margin-top: 2px;
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
}

.public-home .faq__kontakt-pfeil {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--gc-ink-muted);
}

.public-home .faq__liste {
  display: grid;
  gap: 12px;
  border-top: 0;
}

.public-home .faq-item {
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
}

.public-home .faq-item[open] {
  border-color: transparent;
  background: var(--gc-canvas-2);
}

.public-home .faq-item > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}

.public-home .faq-item > summary::-webkit-details-marker {
  display: none;
}

.public-home .faq-item__nr {
  flex: 0 0 auto;
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.public-home .faq-item__text {
  flex: 1 1 auto;
  min-width: 0;
}

.public-home .faq-item__marke {
  display: block;
  margin-bottom: 6px;
  color: var(--gc-ink-muted);
}

.public-home .faq-item__frage {
  display: block;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.public-home .faq-item__zeichen {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-canvas-3);
  color: var(--gc-action);
  transition: transform var(--t-basis) var(--ease);
}

.public-home .faq-item__zeichen svg {
  width: 17px;
  height: 17px;
}

.public-home .faq-item[open] .faq-item__zeichen {
  transform: rotate(45deg);
}

.public-home .faq-item__antwort {
  padding: 0 22px 22px 70px;
}

.public-home .faq-item__antwort p {
  margin: 0;
  color: var(--gc-ink-soft);
}

@media (max-width: 559px) {
  .public-home .faq-item__antwort {
    padding-left: 22px;
  }
}

@media (min-width: 900px) {
  .public-home .faq__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

/* =====================================================================
   ARBEITGEBER IM NETZWERK (Logo-Wand)
   Bestehender Abschnitt, in Design 05 übersetzt: Kicker, Überschrift,
   ein Satz, darunter die 27 Zeichen aus bausteine/logos.json. Die
   Grundform der Wand steht in assets/app.css (.logowand).
   ===================================================================== */
.public-home .abschluss__inner {
  max-width: calc(var(--gc-container-wide) + 2 * var(--gc-gutter));
  text-align: center;
}

.public-home .abschluss__inner h2 {
  max-width: 18ch;
  margin: 14px auto 0;
}

.public-home .abschluss__inner > p {
  max-width: 54ch;
  margin: 18px auto 0;
  color: var(--gc-ink-muted);
}

.public-home .abschluss .logowand {
  margin-top: clamp(28px, 3.5vw, 48px);
  padding-top: clamp(24px, 3vw, 40px);
  gap: 18px 22px;
  border-top-color: var(--gc-line);
}

.public-home .logowand > li {
  flex-basis: calc((100% - 2 * 22px) / 3);
}

/* Ohne JavaScript steht die Wand als Raster; zwölf Zeichen reichen dort
   als Beleg, die vollständige Wand steht auf der Arbeitgeberseite. Mit
   JavaScript macht assets/js/public-motion.js daraus eine laufende,
   pausierbare Reihe (Klasse logowand--lauf) und verdoppelt die Einträge;
   dort gilt die Begrenzung nicht, sonst fehlte der Reihe die Hälfte. */
.public-home .logowand:not(.logowand--lauf) > li:nth-child(n + 13) {
  display: none;
}

.public-home .logowand img {
  max-height: 58px;
  object-fit: contain;
  opacity: 0.66;
}

@media (min-width: 640px) {
  .public-home .logowand > li {
    flex-basis: calc((100% - 5 * 22px) / 6);
  }
}

/* =====================================================================
   [hidden] AN BAUSTEINEN MIT EIGENEM display
   ---------------------------------------------------------------------
   [hidden] setzt display: none nur mit der schwächsten Spezifität. Jede
   Regel, die an derselben Klasse ein eigenes display nennt (flex, grid,
   inline-flex), gewinnt und das Element bleibt sichtbar. Gemessen am
   17.09.2026: „Zurück" und „Passende Jobs zeigen" standen im Quiz schon
   in Schritt 1, und die Blätter-Steuerung des Instagram-Abschnitts stand
   bei 1280 px, wo das Raster gar nicht scrollt.
   ===================================================================== */
.public-home .quiz__aktionen .btn[hidden],
.public-home .quiz__fortschritt[hidden],
.public-home .quiz__schritt[hidden] {
  display: none;
}

/* =====================================================================
   D8 HANDYANSICHT NACH DEM MOBIL-ENTWURF
   Wirkt ausschließlich unter 768 px. Inhalte bleiben im Dokument; die
   vier im Auftrag benannten Desktop-Abschnitte werden nur hier verborgen.
   ===================================================================== */
@media (max-width: 767px) {
  .public-home main {
    padding-top: 69px;
  }

  .public-home .start {
    padding-block: 15px 4px;
  }

  .public-home .start__vorzeile {
    margin-bottom: 14px;
  }

  .public-home .start__marke {
    gap: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
  }

  .public-home .start__marke i {
    width: 6px;
    height: 6px;
  }

  .public-home .start__zusatz,
  .public-home .start__kurzwege-titel,
  .public-home .suchkarte__kopf > .gc-label,
  .public-home .suchkarte__assistent,
  .public-home .suchkarte__belege {
    display: none;
  }

  .public-home .start__raster {
    gap: 0;
  }

  /* Feste 365 px reichten nur für den kürzeren Entwurfstitel „Dein Job.“.
     Mit „Dein neuer Job.“ verdeckte die Plakette unten bei 360 px die
     letzte Textzeile (Claude, 19.09.2026). Die Bühne wächst jetzt mit dem
     Text, der untere Innenabstand hält Platz für die Plakette frei. */
  .public-home .start__buehne {
    height: auto;
    min-height: 365px;
    padding: 29px 22px 116px;
    border-radius: 17px;
  }

  .public-home .buehne__foto {
    object-position: 30% 50%;
  }

  /* Der mobile Kicker liegt höher als im Desktopbild und stand deshalb
     noch im hellen Beginn des bisherigen Schleiers. Der durchgehend
     dunkle Markenverlauf trägt Kicker, Überschrift und Beleg auch auf
     den hellsten Bildstellen mit ausreichendem Kontrast. */
  .public-home .buehne__schleier {
    background: linear-gradient(
      180deg,
      rgb(var(--gc-schleier-anker) / 0.86) 0%,
      rgb(var(--gc-schleier-anker) / 0.88) 18%,
      rgb(var(--gc-schleier-anker) / 0.84) 70%,
      rgb(var(--gc-schleier-anker) / 0.92) 100%
    );
  }

  .public-home .buehne__schild {
    position: absolute;
    top: 15px;
    right: 10px;
    max-width: 48%;
    margin: 0;
    padding: 9px 10px;
    gap: 6px;
    transform: rotate(4deg);
    font-size: 0.75rem;
  }

  .public-home .buehne__text {
    max-width: 17.5rem;
    margin: 0;
  }

  .public-home .buehne__kicker {
    max-width: 10rem;
    margin-bottom: 16px;
  }

  .public-home .buehne__titel {
    font-size: 37px;
  }

  .public-home .buehne__lead {
    max-width: 13rem;
    margin-top: 14px;
    font-size: 0.75rem;
    line-height: 1.7;
  }

  .public-home .buehne__beleg {
    right: 16px;
    bottom: 24px;
    left: auto;
    max-width: 15rem;
    padding: 11px 13px;
    gap: 9px;
  }

  .public-home .buehne__haken {
    width: 29px;
    height: 29px;
  }

  .public-home .buehne__beleg strong {
    font-size: 0.75rem;
  }

  .public-home .buehne__beleg small {
    font-size: 0.75rem;
  }

  /* Die Kachel nutzt die ganze verfügbare Bildbreite. Die zweite Zeile
     bleibt auf üblichen Handys geschlossen, sehr schmale Ansichten dürfen
     weiterhin umbrechen statt Text oder den Hero zu überdecken. */
  .public-home .buehne__beleg {
    right: 16px;
    bottom: 30px;
    left: 16px;
    max-width: none;
  }

  .public-home .buehne__beleg small {
    white-space: nowrap;
  }

  @media (max-width: 339px) {
    .public-home .buehne__beleg small {
      white-space: normal;
    }
  }

  .public-home .suchkarte {
    position: relative;
    z-index: 3;
    display: block;
    margin: -13px 7px 0;
    padding: 20px 18px 16px;
    border-radius: 16px;
    box-shadow: var(--gc-shadow-float);
  }

  .public-home .suchkarte__kopf {
    position: absolute;
    top: 20px;
    right: 18px;
    margin: 0;
  }

  .public-home .suchkarte__symbol {
    width: 32px;
    height: 32px;
  }

  .public-home .suchkarte__titel {
    max-width: none;
    padding-right: 38px;
    font-size: 23px;
    line-height: 1.2;
    white-space: normal;
  }

  .public-home .suchkarte__lead {
    margin: 6px 0 16px;
    font-size: 0.75rem;
  }

  .public-home .suchkarte__form {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: 9px;
    row-gap: 16px;
  }

  .public-home .suchfeld {
    min-width: 0;
    padding: 9px 10px 5px;
    border-radius: 9px;
    background: var(--gc-canvas);
  }

  .public-home .suchfeld__label {
    gap: 5px;
    font-size: 0.75rem;
  }

  .public-home .suchkarte__form .eingabe {
    min-width: 0;
    min-height: 32px;
    font-size: 1rem;
  }

  .public-home .suchkarte__form .eingabe::placeholder {
    font-size: 0.75rem;
  }

  .public-home .suchkarte__senden {
    grid-column: 1 / -1;
    min-height: 50px;
    margin-top: 0;
  }

  .public-home .suchkarte__hinweis {
    margin-top: 10px;
    font-size: 0.75rem;
  }

  /* Der Titelring dynamisch geladener Stellen darf die goldene
     Paketmarke nicht als unmittelbaren Grund berühren. Der tiefste
     Markenton hält sowohl auf Weiß als auch auf Gold deutlich über 3:1. */
  .public-home .premium .stellenkarte__titel a:focus-visible {
    outline-color: var(--gc-dark-deep);
  }

  .public-home .start__kurzwege {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 17px;
  }

  .public-home .start__kurzwege a {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .public-home .band {
    padding-block: 44px;
  }

  .public-home :is(.quiz, #netzwerk, #netzwerk-belege, .stimmen) {
    display: none;
  }

  .public-home .abschnittskopf {
    gap: 12px;
    margin-bottom: 24px;
  }

  .public-home .abschnittskopf h2,
  .public-home main .branchen h2,
  .public-home .menschlich h2,
  .public-home .schritte h2,
  .public-home .arbeitgeber h2,
  .public-home .faq h2 {
    font-size: 31px;
    line-height: 1.12;
  }

  .public-home .premium .jobs__spur {
    display: grid;
    grid-template-rows: auto;
    grid-auto-columns: 87%;
    grid-auto-flow: column;
    gap: 13px;
    /* Der ruhende Kartenschatten läuft unten weit aus. Diese Reserve
       endet erst nach seinem sichtbaren Verlauf, ohne die Kartenbreite
       oder das native Wischen zu verändern. */
    padding-block: 16px 80px;
    overflow-x: auto;
    contain: paint;
    scroll-snap-type: x mandatory;
  }

  .public-home .jobs__spur > .stellenkarte {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
  }

  .public-home .jobs {
    padding-bottom: 44px;
  }

  .public-home .jobs__weitere {
    display: inline-flex;
  }

  .public-home .jobs .premium__navigation {
    display: none;
  }

  .public-home main .branchen {
    overflow: hidden;
    padding-block: 44px;
  }

  .public-home .branchen__raster {
    display: flex;
    gap: 12px;
    margin-inline: 0;
    padding: 0 0 12px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    contain: paint;
    scroll-snap-type: x mandatory;
  }

  .public-home .branchen__raster::-webkit-scrollbar {
    display: none;
  }

  .public-home .branchenkachel {
    flex: 0 0 min(86%, 340px);
    scroll-snap-align: start;
  }

  .public-home .branchenkachel a {
    min-height: 325px;
    box-shadow: none;
  }

  .public-home main .branchen .premium__navigation:not([hidden]) {
    margin-top: 4px;
  }

  .public-home main .branchen .premium__pfeil {
    border-color: var(--gc-line-ui);
    color: var(--gc-ink);
  }

  .public-home main .branchen .premium__pfeil:enabled:is(:hover, :active) {
    background: var(--gc-canvas-2);
  }

  .public-home main .branchen .premium__pfeil:focus-visible {
    outline-color: var(--fokus-hell);
  }

  /* Bei schmalem Bildausschnitt liegt die Einordnung der zweiten Kachel
     auf einer besonders hellen Blattfläche. Die stärkere untere Zone
     sichert den kleinen Text, ohne das Motiv im oberen Drittel zu nehmen. */
  .public-home .branchenkachel a::before {
    background: linear-gradient(
      180deg,
      rgb(var(--gc-schleier-anker) / 0.82) 0%,
      rgb(var(--gc-schleier-anker) / 0.80) 15%,
      rgb(var(--gc-schleier-anker) / 0.68) 30%,
      rgb(var(--gc-schleier-anker) / 0.90) 46%,
      rgb(var(--gc-schleier-anker) / 0.94) 64%,
      rgb(var(--gc-schleier-anker) / 0.97) 100%
    );
  }

  .public-home .menschlich__raster {
    gap: 25px;
  }

  .public-home .menschlich {
    padding-block: 72px;
  }

  .public-home .menschlich__lead,
  .public-home .menschlich__antwort p:last-child {
    font-size: 0.875rem;
  }

  .public-home .menschlich__thema span {
    min-height: 44px;
    padding: 9px 12px;
    font-size: 0.75rem;
  }

  .public-home .menschlich__antwort {
    padding: 25px;
  }

  .public-home .schritte__liste {
    gap: 0;
    margin-top: 28px;
  }

  .public-home .schritte {
    min-height: 522px;
    padding-bottom: 20px;
  }

  .public-home .schritte__quiz {
    display: none;
  }

  .public-home .schritt {
    position: relative;
    display: grid;
    grid-template-columns: 39px minmax(0, 1fr);
    gap: 16px;
    padding-bottom: 27px;
  }

  .public-home .schritt:last-child {
    padding-bottom: 12px;
  }

  .public-home .schritt:not(:last-child)::before {
    position: absolute;
    top: 43px;
    bottom: 6px;
    left: 18px;
    width: 1px;
    background: var(--gc-line-strong);
    content: "";
  }

  .public-home .schritt__nr {
    width: 37px;
    height: 37px;
    grid-row: 1 / span 2;
  }

  .public-home .schritt h3 {
    grid-column: 2;
    margin: 0 0 8px;
    font-size: 1.0625rem;
  }

  .public-home .schritt p {
    grid-column: 2;
    margin: 0;
    font-size: 0.8125rem;
  }

  .public-home .arbeitgeber {
    padding: 15px 0 23px;
  }

  .public-home .arbeitgeber__text {
    padding: 29px 25px;
  }

  .public-home .arbeitgeber__text p {
    margin: 14px 0 20px;
    font-size: 0.875rem;
  }

  .public-home .arbeitgeber__bild {
    min-height: 230px;
  }

  .public-home .start__kurzwege {
    margin-bottom: 24px;
  }

  .public-home .faq__zeichen,
  .public-home .faq-item__marke {
    display: none;
  }

  .public-home .faq__inner {
    gap: 22px;
  }

  .public-home .faq {
    padding-block: 73px;
  }

  .public-home .faq__intro h2 {
    margin-top: 8px;
  }

  .public-home .faq__intro > p {
    margin-top: 12px;
    font-size: 0.875rem;
  }

  .public-home .faq__kontakt {
    margin-top: 16px;
    padding: 12px 14px;
  }

  .public-home .faq-item > summary {
    min-height: 78px;
    padding: 16px;
    gap: 10px;
  }

  .public-home .faq-item__frage {
    font-size: 0.875rem;
  }
}

@media (max-width: 360px) {
  .public-home .start {
    padding-top: 0;
  }

  .public-home .start__inner {
    padding-inline: 12px;
  }

  .public-home .start__vorzeile {
    margin-bottom: 7px;
  }

  .public-home .start__buehne {
    height: auto;
    min-height: 349px;
  }

  /* Die schmalere Textspur hält den Kicker vollständig links von der
     gedrehten Plakette. So liegt keine Glyphe auf deren Akzentfläche. */
  .public-home .buehne__kicker {
    max-width: 8.5rem;
  }

  .public-home .suchkarte {
    margin-inline: 5px;
    padding: 16px 14px 12px;
  }

  .public-home .buehne__titel {
    font-size: 34px;
  }

  .public-home .suchkarte__lead {
    margin: 2px 0 8px;
  }

  .public-home .suchkarte__form {
    column-gap: 7px;
    row-gap: 16px;
  }

  .public-home .suchkarte__hinweis {
    margin-top: 5px;
  }

  .public-home .jobs {
    padding-bottom: 12px;
  }

  .public-home main .branchen {
    padding-block: 15px;
  }

  .public-home .menschlich {
    padding-block: 53px;
  }

  .public-home .schritte {
    min-height: 515px;
    padding-block: 32px;
    padding-bottom: 20px;
  }

  .public-home .schritte__liste {
    margin-top: 23px;
  }

  .public-home .schritt {
    padding-bottom: 23px;
  }

  .public-home .instagram {
    padding-block: 30px;
  }
}

/* =====================================================================
   D5a, 17.09.2026 · Rückholregel entfernt, wirkungslos geworden
   ---------------------------------------------------------------------
   public-brand.css senkt .gc-label unter 340 px nicht mehr auf 11 px, sondern
   hält 12 px global (AUFTRAG_D5.md, D5a Punkt 1). Die fünf Zeilen der
   Startseite (Vorzeile, Hero-Kicker, Suchkarte, Kurzwege, Jobs), die diese
   Regel hier auffing, stehen jetzt schon durch die Markenebene bei 12 px.
   ===================================================================== */

/* R3-04: Die großen Berufswelten bleiben nativ scrollbar. Mobil zeigt
   allein ihre Spur einen schlanken Fortschritt statt Pfeiltasten. */
@media (max-width: 767px) {
  .public-home .branchen__raster + .spur__balken {
    display: block;
    height: 4px;
    margin: 16px 0 0;
    overflow: hidden;
    border-radius: var(--gc-radius-pill);
    background: color-mix(in srgb, var(--gc-accent) 42%, var(--gc-canvas));
  }

  .public-home .branchen__raster + .spur__balken i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--gc-green-deep);
    transition: transform 160ms var(--gc-ease), width 160ms var(--gc-ease);
  }

  .public-home main .branchen .premium__navigation {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-home .branchen__raster + .spur__balken i { transition: none; }
}

/* 01.10.2026, A11y-Durchgang: Die Suchfelder der Startseite sind am Handy
   44 statt 34 px hoch. Rahmen, Label und Schrift bleiben gleich. */
@media (max-width: 767.98px) {
  .public-home .suchkarte__form .eingabe {
    min-height: 44px;
  }
}

.public-home .start__suchweg { display: none; }
.public-home .faq__alle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: 8px 16px;
}
@media (max-width: 767px) {
  .public-home .start__suchweg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 8px;
  }

  /* Der äußere Standardring berührt den grünen Suchknopf darüber.
     Innen liegt der Ring vollständig auf der hellen Suchkarte. */
  .public-home .start__suchweg:focus-visible {
    outline: 3px solid var(--fokus-hell);
    outline-offset: -5px;
  }
}