/* =====================================================================
   funnel.css - Ergänzung zum Stylesheet der Hauptseite
   ---------------------------------------------------------------------
   style.css (1:1 aus www-vilicus-berlin.de) liefert Tokens, Reset,
   Typografie, .container, .section, .btn, .job-card, .footer, .nav.
   Hier steht AUSSCHLIESSLICH, was die Website nicht kennt:
   Stellenraster, Bewerbungs-Assistent, Benefit-Kacheln, Sticky-CTA.

   Regeln für diese Datei:
   - Keine hartkodierten Farb-/Schrift-/Abstandswerte. Alles über var(--…)
     aus dem :root von style.css (deckungsgleich mit ci-tokens.json v1.3).
   - Schriftgrößen ausschließlich über die Skala --fs-xs … --fs-6xl bzw. die
     mitwachsenden Stufen --fs-h1/--fs-h2/--fs-section/--fs-hero/--fs-quote.
     Sie stehen im :root von style.css und gelten für beide Auftritte.
   - Mobile First: Basis ist die schmale Ansicht, Breakpoints nur additiv.
   - Nichts aus style.css umdefinieren, was dort schon richtig ist.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0a. Fehlende CI-Tokens nachziehen
   style.css deklariert nur Farben, Typografie und Layout. Die Guideline
   (VILICUS_CI-Guideline v1.3, Kapitel Design-Tokens / ci-tokens.json) kennt
   zusätzlich Abstände, Radien, Schatten und Bewegung. Die fehlen dort,
   werden hier mit den EXAKTEN Werten der Guideline ergänzt - damit steht
   jede Angabe in dieser Datei auf einem Token statt auf einer Zahl.
   Sollten die Tokens später in style.css wandern, kann dieser Block
   ersatzlos entfallen (gleiche Namen, gleiche Werte).
   --------------------------------------------------------------------- */
:root {
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --measure:   70ch;

  --radius:    2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(30, 22, 72, .04);
  --shadow-md: 0 4px 12px rgba(30, 22, 72, .08);
  --shadow-lg: 0 12px 28px rgba(30, 22, 72, .12);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 200ms;
  --duration-base: 250ms;

  /* Guideline: Hilfstexte NUR ab 24px - 3,52:1 auf Weiß reicht darunter nicht. */
  --text-mute: #8a8794;
}

/* ---------------------------------------------------------------------
   0. Sicherheitsnetz Scroll-Reveal
   style.css setzt .reveal bedingungslos auf opacity:0 und verlässt sich
   darauf, dass das main.js der Website .visible nachreicht. Dieses Portal
   lädt main.js nicht. Fällt motion.js aus (JS deaktiviert, Fehler, alter
   Browser), bliebe der halbe Funnel unsichtbar - in einer Bewerbungsstrecke
   eine Sackgasse. Deshalb: Hidden-Zustand nur, wenn motion.js ihn über
   html.motion scharf schaltet.
   --------------------------------------------------------------------- */
html:not(.motion) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .sticky-cta, .navk { display: none !important; }
}

/* ---------------------------------------------------------------------
   0b. [hidden] durchsetzen
   Jede Autoren-Regel mit `display` schlägt das `[hidden]{display:none}` des
   Browser-Stylesheets - der Kaskaden-Ursprung "Autor" gewinnt gegen "User Agent".
   Ohne diese Zeile blieben per hidden-Attribut ausgeblendete Blöcke sichtbar
   (betraf die beiden Kontaktweg-Blöcke im Bewerbungsformular vollständig).
   --------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* Reflow-Schutz: kein horizontales Scrollen auf schmalen Geräten. Die Ursache
   gehört behoben (siehe Navigationsleiste), das hier ist die Auffanglinie für
   lange Wörter und eingebettete Inhalte. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, table { max-width: 100%; }

/* ---------------------------------------------------------------------
   1. Utilities
   --------------------------------------------------------------------- */
.center { text-align: center; }
.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }
.muted { color: var(--stone-gray); }
.lead { font-size: var(--fs-lg); line-height: 1.7; }
.ic { display: inline-block; vertical-align: -.15em; flex-shrink: 0; }
.dot { color: var(--bronze-light); }
/* stone-gray statt text-mute: die Guideline erlaubt --text-mute (3,52:1) nur ab 24px,
   "(optional)" steht aber bei 13-15px. */
.opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--stone-gray); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze-dark);
  margin-bottom: 16px;
}
.section--dark .eyebrow,
.hero .eyebrow { color: var(--bronze-light); }

.section--grau { background: var(--warm-white); }
.section-head { max-width: 42rem; margin-bottom: var(--space-xl); }
/* Die Basis-h2 aus style.css (max 36px) ist für die Website richtig, wo jeder
   Abschnitt ein Bild oder eine Zahlenkachel danebenstellt. Im Funnel trägt die
   Überschrift den Abschnitt allein - sie darf und muss größer sein. */
.section-head h2 {
  font-size: var(--fs-section);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: .01em;
}
.section-head p { font-size: var(--fs-lg); max-width: 52ch; }
.section--dark .section-head p { color: rgba(255, 255, 255, .75); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: .6rem; }

.privacy-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--success-ink);
}
.footer .privacy-badge { color: var(--bronze-light); margin-top: var(--space-md); }
.privacy-note {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: var(--fs-sm); color: var(--stone-gray);
  background: var(--off-white); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: .9rem 1rem;
}

/* ---------------------------------------------------------------------
   2. Buttons - Ergänzungen zur .btn-Basis aus style.css
   Die Website-Buttons haben keine Mindesthöhe. Im Funnel wird viel am
   Handy getippt -> 48px Zielgröße. WCAG 2.5.8 (AA) verlangt 24px, 44px ist
   2.5.5 (AAA); 48px liegt bewusst darüber.
   --------------------------------------------------------------------- */
.btn { min-height: 48px; justify-content: center; text-align: center; }
.btn--lg { min-height: 56px; padding: 18px 40px; font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn--ghost {
  background: transparent; color: var(--vilicus-purple);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--vilicus-purple); background: transparent; }
.btn--back {
  background: transparent; color: var(--stone-gray); border-color: transparent;
  padding-inline: 12px; letter-spacing: .08em;
}
.btn--back:hover { color: var(--vilicus-purple); background: transparent; }
.btn--call { flex: none; width: 56px; padding: 0; }

/* ---------------------------------------------------------------------
   3. Portal-Navigation
   .nav/.nav__inner/.nav__logo kommen aus style.css. Das Menü baut hier
   eigene Klassen: style.css blendet .nav__menu und .nav__cta unter 1240px
   aus und ersetzt sie durch ein Hamburger-Overlay, das ohne main.js nie
   aufginge. Zwei Links plus CTA passen auf jede Breite - also sichtbar.
   --------------------------------------------------------------------- */
.navk { display: flex; align-items: center; gap: var(--space-md); }
.navk__links { display: none; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
/* Optisch an die Hauptseite angeglichen (style.css, .nav__menu > li > a):
   Versalien mit weiter Laufweite, Gewicht 600 und der Bronzebalken beim Hovern.
   Einziger bewusster Unterschied: eine Stufe größer (14px statt 13px) - das
   Portal hat nur zwei Menüpunkte, die dürfen kräftiger auftreten. */
.navk__links a {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px;
  padding-inline: 4px;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
  color: rgba(255, 255, 255, .8);
  transition: color .2s;
}
.navk__links a:hover { color: var(--bronze-light); }
.navk__links a::after {
  content: ''; position: absolute;
  bottom: 6px; left: 4px; right: 4px; height: 2px;
  background: var(--bronze-h);
  transform: scaleX(0); transition: transform .25s ease;
}
.navk__links a:hover::after { transform: scaleX(1); }
/* Die Rufnummer bleibt in Ziffernschreibweise: Versalien bringen dort nichts,
   und die weite Laufweite würde sie unnötig auseinanderziehen. */
.navk__phone {
  display: none; align-items: center; gap: .4rem;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em;
  color: rgba(255, 255, 255, .8);
}
.navk__phone:hover { color: var(--bronze-light); }
.navk__cta { padding: 12px 20px; font-size: var(--fs-xs); min-height: 44px; }

@media (min-width: 600px) { .navk__phone { display: inline-flex; } }
@media (min-width: 900px) { .navk__links { display: flex; } }

/* Schmale Geräte: Die Leiste muss in die Viewportbreite passen, sonst wird der
   BODY so breit wie sein breitestes Kind und die GANZE Seite scrollt horizontal
   (WCAG 1.4.10 Reflow). Gerechnet bei 390px: Logo 3,56:1, bei 38px Höhe = 135px,
   plus Abstand 12px, CTA ~136px, Innenabstand 2x16px = 315px. Passt mit Reserve.
   min-width:0 verhindert, dass Flex-Kinder ihre Inhaltsbreite erzwingen. */
.nav__inner { min-width: 0; }
.nav__logo { min-width: 0; }
.nav__logo img { max-width: 100%; }
@media (max-width: 560px) {
  .nav__inner { padding-inline: 16px; gap: 12px; }
  .nav__logo img { height: 38px; }
  .navk { gap: 10px; }
  .navk__cta { padding: 10px 12px; letter-spacing: .04em; }
}
@media (max-width: 360px) {
  .nav__logo img { height: 32px; }
  .navk__cta { padding: 10px 10px; }
}

/* ---------------------------------------------------------------------
   4. Hero
   .hero aus style.css ist 90vh hoch (Startseiten-Bühne). Für den Funnel
   ist das zu viel Weg bis zur ersten Stelle -> eigener Modifier.
   --------------------------------------------------------------------- */
.hero--funnel { min-height: auto; padding-top: var(--nav-height); }
/* Echtes Teamfoto statt reiner Farbfläche - dasselbe Bild, das die Website für
   ihre Karriereseite nutzt. Ohne Bild wirkte der Funnel neben vilicus-berlin.de
   nüchtern. Overlay-Werte aus .page-hero--image der Website übernommen, damit
   der Text darauf sicher lesbar bleibt. */
.hero--funnel .hero__bg {
  background-image:
    linear-gradient(160deg, rgba(30, 22, 72, .88) 0%, rgba(55, 42, 124, .78) 100%),
    url("../img/header/header-team.jpg");
  background-size: cover;
  background-position: center;
}
/* Dezentes Gitter wie auf der Website - gibt der Fläche Struktur */
.hero--funnel::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(204, 178, 117, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 178, 117, .04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero__inner {
  position: relative; z-index: 1;
  padding-block: clamp(2.5rem, 10vw, 5rem);
}
/* Die Bühne nutzt .hero__title aus style.css (bis 66px, Zeilenhöhe 1.06). Hier
   nur die Zeilenbreite begrenzen - die Basis-h1 bliebe bei 48px und wirkt daneben
   zierlich. Klasse wiederverwendet statt nachgebaut. */
.hero--funnel .hero__title { max-width: 18ch; margin-bottom: var(--space-md); }
.hero--funnel h1 { color: #fff; }
.hero--funnel .lead { color: rgba(255, 255, 255, .85); margin-top: var(--space-md); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--space-xl); }
/* Die drei Zusagen sind Kernargumente, keine Fußnote. Vorher standen sie mit
   14px bei 80 % Deckkraft unter dem Fließtext (18px) - also kleiner und blasser
   als alles darüber und damit leicht zu übersehen. */
.hero__trust {
  display: flex; flex-wrap: wrap; gap: .9rem 1.8rem;
  margin-top: var(--space-xl);
  font-size: var(--fs-base); font-weight: 500;
  color: rgba(255, 255, 255, .95);
}
.hero__trust span { display: inline-flex; align-items: center; gap: .55rem; }
/* Die Icons tragen ihre Größe als Attribut im Markup; CSS überschreibt sie,
   damit sie mit der Schrift mitwachsen. */
.hero__trust .ic { width: 20px; height: 20px; }

@media (min-width: 600px) {
  .hero__trust { font-size: var(--fs-lg); }
  .hero__trust .ic { width: 22px; height: 22px; }
}

/* ---------------------------------------------------------------------
   5. Stellen
   .job-card, .job-card__tag und .job-card__requirements liefert style.css
   (die Website hat bereits eine Karriereseite). Hier nur das Raster und
   die Teile, die der Funnel zusätzlich braucht.
   --------------------------------------------------------------------- */
.jobs-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
/* style.css gibt der Karte nur weißen Grund und einen 1px-Rahmen in --border
   (1,26:1 auf Weiß) - auf einer weißen Sektion hat sie damit praktisch keine
   Kante. Deshalb: Sektion auf warm-white (index.php), Karte mit Ruhe-Schatten,
   kräftigerem Rahmen und einer Bronzekante als Markenanker. */
.job-card {
  display: flex; flex-direction: column; gap: .7rem;
  position: relative; overflow: hidden;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.job-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--bronze-gradient);
}
.job-card::before { transition: width .3s var(--ease); }
.job-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.job-card:hover::before, .job-card:focus-within::before { width: 6px; }
/* Initiativbewerbung bleibt bewusst zurückhaltend - sie ist die Auffanglinie,
   nicht die Hauptaktion. */
.job-card--initiativ { box-shadow: none; }
.job-card--initiativ::before { background: var(--border); }
.job-card__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .2rem; }

/* Hierarchie in der Kachel: Der Stellentitel ist die eigentliche Botschaft.
   Die Größe kommt seit der Skala aus style.css (--fs-3xl, 28px) und steht
   damit auf demselben Wert wie die Stellenkachel der Website. Vorher trug
   diese Datei ein eigenes clamp(1.5rem, 2.4vw, 2rem) - auf 390px waren das
   24px und damit optisch nur Faktor 1,11 über dem Kacheltext daneben. */
.job-card h3 {
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
  margin: 0;
}
.job-card h3 a { display: block; }
.job-card h3 a:hover { color: var(--bronze-dark); }
.tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--vilicus-purple); background: rgba(55, 42, 124, .06);
  padding: 5px 12px; border-radius: var(--radius);
}
/* Name folgt der Funktion, nicht der Farbe (Umbenennung aus .tag--rot). */
.tag--stark { color: #fff; background: var(--vilicus-purple); }
.job-card__meta {
  display: flex; align-items: center; gap: .4rem;
  color: var(--stone-gray); font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase;
}
.job-card__foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding-top: var(--space-md);
}
.job-card__apply {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  font-size: var(--fs-xs); color: var(--vilicus-purple);
}
.job-card__apply::after { content: "\2192"; transition: transform .2s var(--ease); }
.job-card:hover .job-card__apply::after { transform: translateX(3px); }
.job-card p { color: var(--stone-gray); line-height: 1.65; margin: 0; }
.job-card--initiativ { background: var(--off-white); border-style: dashed; }

.stelle-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); color: var(--stone-gray);
}

/* ---------------------------------------------------------------------
   6. Benefits
   --------------------------------------------------------------------- */
.benefit-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.benefit {
  display: flex; gap: .75rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: .95rem 1rem;
  transition: box-shadow .3s var(--ease);
}
.benefit { box-shadow: var(--shadow-sm); }
.benefit:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.section--dark .benefit { box-shadow: none; }
/* Ohne Kachel: das Icon steht frei, die Bronze trägt den Akzent. Eine getönte
   Fläche darunter wirkte wie ein zweiter Rahmen in der ohnehin gerahmten Kachel. */
.benefit .ic {
  flex: none; width: 28px; height: 28px;
  color: var(--bronze-dark);
  display: grid; place-items: center;
  margin-top: .1rem;
}
/* Größen gegen den Text IN der jeweiligen Karte gerechnet, nicht gegen den
   allgemeinen Fließtext der Seite - das war der Fehler im ersten Anlauf am
   08.09.2026 und führte zu deutlich zu großen Werten (24-32px).
   Der Kartentext hat 14px, optisch 7,29. Bei 20px liegt die Überschrift damit
   bei Faktor 1,43.
   Wichtig zur Einordnung: .benefit h3 steht in Raleway halbfett, die
   Stellenüberschrift daneben in Cormorant normal. Bei gleicher Pixelgröße wirkt
   die Raleway-Zeile rund 35 % größer - Pixelwerte sind hier nicht vergleichbar,
   die Karten müssen nebeneinander betrachtet werden. */
.benefit h3 { font-family: var(--font-body); font-size: var(--fs-xl); font-weight: 600; line-height: 1.3; margin: 0; }
/* margin-bottom explizit auf 0: style.css gibt jedem p 1.2em Abstand nach unten,
   was in einer Kachel als überschüssiger Leerraum unter dem Text stehen bleibt. */
.benefit p { font-size: var(--fs-sm); margin: .2rem 0 0; color: var(--stone-gray); }
.section--dark .benefit { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.section--dark .benefit h3 { color: #fff; }
.section--dark .benefit p { color: rgba(255, 255, 255, .72); }
.section--dark .benefit .ic { color: var(--bronze-light); }

/* ---------------------------------------------------------------------
   7. Vertrauen / Ansprechpartner / Standort
   --------------------------------------------------------------------- */
.trust { display: grid; gap: var(--space-lg); }
.trust__foto {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.trust__foto img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.trust__seite { display: grid; gap: var(--space-md); align-content: center; }
.trust__person {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-sm);
}
.trust__avatar {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  color: var(--bronze-dark);
}
.trust__person h3 { font-size: var(--fs-2xl); margin-bottom: .1rem; }
.trust__person .role { color: var(--stone-gray); font-size: var(--fs-sm); }
.trust__person .phone {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .4rem; font-weight: 600; color: var(--vilicus-purple);
}
/* CI-Farben statt Success-Gruen: der gruene Kasten war die einzige gruene Flaeche
   der Seite und stand neben Purpur und Bronze als Fremdkoerper. Die Aussage ist
   ein Versprechen, keine Systemmeldung - Gruen ist hier auch semantisch falsch. */
.trust__promise {
  display: flex; align-items: center; gap: .75rem;
  background: var(--purple-deep); color: #fff;
  border: 0; border-left: 3px solid var(--bronze-mid);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
  font-family: var(--font-heading); font-size: var(--fs-lg); line-height: 1.3;
}
.trust__promise .ic { color: var(--bronze-light); }

.feature-row { display: grid; gap: var(--space-lg); }
.location-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.3rem;
  box-shadow: var(--shadow-sm);
}
.location-card h3 { font-size: var(--fs-2xl); margin-bottom: .3rem; }
.addr { color: var(--stone-gray); font-size: var(--fs-md); }
/* Gleicher Grund wie bei .benefit p: style.css hängt jedem Absatz 1.2em an. */
.location-card p:last-child, .trust__person p:last-child, .apply-card p:last-child { margin-bottom: 0; }

.contact-card {
  background: var(--off-white); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 1.2rem;
}
/* Block, nicht flex: der Container umschließt ein .field UND ein fieldset. Als
   Flex-Zeile wurden Telefonfeld und Zeitfenster-Chips auf 390px nebeneinander
   gequetscht (183px / 227px). Die Flex-Regel stammte aus der Kontaktzeile weiter oben. */
.contact-detail { display: block; }
.contact-detail > .field { margin-bottom: var(--space-md); }
.contact-choice { display: grid; gap: .6rem; }
.contact-card { display: block; padding: 0; }
.contact-card input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.contact-card label {
  display: block; cursor: pointer;
  padding: .9rem 1rem; min-height: 56px;
  background: #fff; border: 1px solid var(--stone-gray);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.contact-card label:hover { border-color: var(--vilicus-purple); }
.contact-card .t {
  display: flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--text-dark);
}
.contact-card .d {
  display: block; margin-top: .2rem;
  font-size: var(--fs-sm); color: var(--stone-gray);
}
/* Auswahl muss sichtbar sein - vorher sah die gewählte Karte aus wie die andere. */
.contact-card input:checked + label {
  border-color: var(--vilicus-purple); border-width: 2px;
  background: rgba(55, 42, 124, .04);
  padding: calc(.9rem - 1px) calc(1rem - 1px);
}
.contact-card input:focus-visible + label {
  outline: 3px solid var(--vilicus-purple); outline-offset: 2px;
}
.reaction-line { font-size: var(--fs-md); color: var(--stone-gray); }

/* ---------------------------------------------------------------------
   8. Bewerbungs-Assistent
   --------------------------------------------------------------------- */
.apply-top {
  position: relative; overflow: hidden;
  background: var(--purple-deep); color: #fff;
  padding-top: var(--nav-height);
}
/* Derselbe Verlauf wie die Bühne der Startseite: die flache Fläche wirkte
   neben dem Rest der Seite nüchtern. Kein zweites Bild, nur CSS. */
.apply-top__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(160deg, rgba(30, 22, 72, .93) 0%, rgba(55, 42, 124, .86) 100%),
    url("../img/header/header-team.jpg");
  background-size: cover;
  background-position: center 35%;
}
/* Bronzekante als Abschluss zum hellen Bereich */
.apply-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--bronze-h); z-index: 2;
}
.apply-top__inner {
  position: relative; z-index: 1;
  padding-block: clamp(1.25rem, 5vw, 2.5rem) clamp(2.5rem, 8vw, 4rem);
}
.apply-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bronze-light); margin-bottom: .6rem;
}
.apply-top .apply-lead { color: rgba(255, 255, 255, .72); font-size: var(--fs-md); margin-top: .75rem; }
.apply-sep { padding: 0 .5rem; opacity: .5; }
/* Kopf der Bewerbungsstrecke: deutlich über der Basis-h1, aber unter der
   Startseiten-Bühne - der Assistent soll die Aufmerksamkeit aufs Formular lenken. */
.apply-top h1 {
  color: #fff;
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: .02em;
}
.apply-top p { color: rgba(255, 255, 255, .82); }
.apply-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-sm); color: rgba(255, 255, 255, .78);
  padding-block: .5rem;
}
.apply-back:hover { color: var(--bronze-light); }

/* Nur Innenabstand. Die Fläche liegt auf der <section> (.section--grau), sonst stand
   der Streifen oberhalb 1280px als eingerückter Kasten mit weißen Rändern. */
/* Die Karte greift in den dunklen Kopf hinein. Vorher standen 84px leere
   Fläche zwischen Kopfband und Karte - der Bruch wirkte wie ein Fehler. */
.apply-wrap { padding-block: 0 clamp(1.5rem, 6vw, 3rem); margin-top: clamp(-2.5rem, -6vw, -1.5rem); }
.apply-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: clamp(1.2rem, 4vw, 2.2rem);
  max-width: 46rem; margin-inline: auto;
}

/* Fortschritt */
.progress { margin-bottom: var(--space-lg); }
/* Die Karte ueberlappt den Kopf - der Balken braucht oben Luft, sonst klebt er
   an der Kartenkante. */
.apply-card > .progress:first-child { margin-top: .25rem; }
.progress__bar { height: 3px; background: var(--border-soft); border-radius: 2px; overflow: hidden; }
.progress__fill {
  height: 100%; width: 33%;
  background: var(--bronze-h);
  transition: width .35s var(--ease);
}
.progress__label {
  margin-top: .5rem; font-size: var(--fs-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--stone-gray);
}

/* Ohne JS steht das gesamte Formular auf einer Seite. Dann sind die
   Schritt-Buttons tote Klickflächen (type="button", ohne Handler) und die
   Fortschrittsanzeige eine Falschaussage ("Schritt 1 von 3") - beides ausblenden. */
html:not(.js) .progress,
html:not(.js) [data-next],
html:not(.js) [data-prev] { display: none; }

/* Schritte: ohne JS sind alle sichtbar (kein Sackgassen-Risiko),
   mit JS blendet form.js über .is-active um. */
.step + .step { margin-top: var(--space-2xl); }
html.js .step { display: none; }
html.js .step.is-active { display: block; }
.step__title { font-size: var(--fs-3xl); font-weight: 400; line-height: 1.15; margin-bottom: .4rem; }
.step__hint { color: var(--stone-gray); margin-bottom: var(--space-lg); }

/* Felder. ACHTUNG: style.css definiert .form-group label sehr spezifisch -
   hier greifen eigene Klassen (.field/.input), damit sich beide nicht in
   die Quere kommen. */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-md); }
.field label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stone-gray);
}
.input {
  width: 100%; min-height: 48px;
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--text-dark);
  background: #fff; border: 1px solid var(--stone-gray);
  border-radius: var(--radius); padding: 12px 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea.input { min-height: 120px; resize: vertical; }
.input:focus { border-color: var(--vilicus-purple); }
/* Sichtbarer Tastatur-Fokus. Zuvor stand hier outline:none mit einem 12%-Schatten
   (~1,15:1 auf Weiß) - der globale Ring aus style.css wurde damit geschlagen und
   nichts Gleichwertiges gesetzt. */
.input:focus-visible {
  outline: 3px solid var(--vilicus-purple);
  outline-offset: 2px;
}
/* Klassenname folgt dem Markup (bewerben.php + form.js setzen .field--error).
   Vorher stand hier .field.has-error - die Regel griff nie, kein Feld wurde je rot. */
.field--error .input { border-color: var(--danger); border-width: 2px; }
.error-msg { font-size: var(--fs-sm); color: var(--danger); }
.form-error-box {
  background: var(--danger-bg); border: 1px solid var(--danger-border);
  color: var(--danger); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: var(--space-lg);
}

fieldset { border: 0; padding: 0; margin: 0 0 var(--space-lg); }
legend {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stone-gray);
  padding: 0; margin-bottom: 10px;
}

/* Auswahl-Chips: das Radio bleibt bedienbar (nur optisch versteckt),
   Fokus wird auf das Label gespiegelt - sonst wäre die Tastaturnutzung blind. */
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.chip label {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 48px; padding: 10px 18px; cursor: pointer;
  font-size: var(--fs-md); color: var(--text-dark);
  background: #fff; border: 1px solid var(--stone-gray);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), background .2s var(--ease),
              color .2s var(--ease), box-shadow .2s var(--ease);
}
.chip label:hover {
  border-color: var(--vilicus-purple);
  box-shadow: var(--shadow-sm);
}
/* Gewählte Auswahl trägt ein Häkchen: die Zustände sollen sich nicht nur
   in der Farbe unterscheiden (Verlass auf Farbe allein ist nicht barrierefrei). */
.chip label::before {
  content: ""; display: none;
  width: 15px; height: 9px; margin-top: -4px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.chip input:checked + label {
  background: var(--vilicus-purple); border-color: var(--vilicus-purple); color: #fff;
  box-shadow: var(--shadow-md);
}
.chip input:checked + label::before { display: block; }
.chip input:focus-visible + label {
  outline: 3px solid var(--vilicus-purple); outline-offset: 2px;
}

/* Einwilligung */
.consent {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: var(--fs-md); line-height: 1.6;
  background: var(--off-white); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  margin-bottom: var(--space-md);
}
.consent input[type="checkbox"] { width: 22px; height: 22px; margin-top: .1rem; flex: none; accent-color: var(--vilicus-purple); }
.consent a { text-decoration: underline; color: var(--vilicus-purple); }

/* Upload */
.upload-toggle { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--space-md); }
.upload-area {
  border: 1px dashed var(--stone-gray); border-radius: var(--radius);
  background: var(--off-white); padding: 1.2rem; text-align: center;
}
.upload-area:focus-within { border-color: var(--vilicus-purple); }
.upload-area .ic { display: inline-block; color: var(--bronze-dark); margin-bottom: .4rem; }
/* Das native Dateifeld ist nur ~21px hoch und damit unter dem Mindest-Zielmaß
   (WCAG 2.5.8: 24px). Der Auswahl-Knopf wird deshalb selbst gestaltet und auf
   44px gebracht; das Feld bleibt ein echtes input[type=file], damit die
   Bedienung mit Tastatur und Screenreader unveraendert funktioniert. */
.upload-area input[type="file"] {
  display: block; width: 100%; margin: 0 auto;
  font-size: var(--fs-sm); color: var(--stone-gray);
}
.upload-area input[type="file"]::file-selector-button {
  appearance: none;
  min-height: 44px; padding: 10px 18px; margin-right: .75rem;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--vilicus-purple);
  border: 0; border-radius: var(--radius); cursor: pointer;
  transition: background .2s var(--ease);
}
.upload-area input[type="file"]::file-selector-button:hover { background: var(--purple-dark); }
.upload-area input[type="file"]:focus-visible {
  outline: 3px solid var(--vilicus-purple); outline-offset: 2px;
}
.upload-hint { font-size: var(--fs-xs); color: var(--stone-gray); margin-top: .6rem; }

/* Schritt-Navigation */
.form-nav {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: var(--space-xl);
  align-items: center; justify-content: space-between;
}
.form-nav .btn { flex: 1 1 auto; }
.form-nav .btn--back { flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   8b. FAQ
   style.css gestaltet das Website-Akkordeon über .faq-item__frage/-__antwort
   (Buttons). Hier steht natives details/summary - ohne eigene Regeln bliebe das
   Browser-Dreieck bei 29px Höhe und Normalschrift stehen, sichtbar off-brand.
   --------------------------------------------------------------------- */
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer; list-style: none;
  padding: 20px 0; min-height: 44px;
  font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: 600;
  color: var(--vilicus-purple);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--bronze-dark);
  border-bottom: 2px solid var(--bronze-dark);
  transform: rotate(45deg); margin-top: -4px;
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.faq-item summary:focus-visible { outline: 3px solid var(--vilicus-purple); outline-offset: 2px; }
.faq-item p { padding-bottom: 20px; margin: 0; }

/* ---------------------------------------------------------------------
   8b2. Abschluss-CTA (im FAQ-Abschnitt)
   Bewusst helle Flaeche: als eigene .section--dark stand der Block direkt
   über dem Footer, und purple-dark gegen purple-deep sind 1,17:1 - beides
   verschmolz. Jetzt trennt der dunkle Footer sich klar vom hellen Abschluss.
   --------------------------------------------------------------------- */
.final-cta {
  margin-top: var(--space-2xl);
  padding: var(--space-xl) var(--space-lg);
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--bronze-mid);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.final-cta h2 {
  font-size: var(--fs-h2);
  font-weight: 300; line-height: 1.1; margin-bottom: .5rem;
}
.final-cta p { color: var(--stone-gray); margin-bottom: var(--space-lg); }
.final-cta .btn { margin: 0 auto; }

/* ---------------------------------------------------------------------
   8c. Footer kompakt
   style.css baut den Fuß für vier Spalten mit viel Inhalt (5rem Polster,
   4rem Rasterabstand, 60px-Logo). Das Portal hat drei knappe Spalten - in
   der Website-Größe wirkt der Fuß dadurch leer und unverhältnismäßig hoch.
   --------------------------------------------------------------------- */
.footer { padding: 3rem 0 1.5rem; }
.footer__grid {
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: .5rem; font-size: var(--fs-sm); line-height: 1.55; max-width: 42ch; }
.footer-tagline { font-size: var(--fs-sm); margin-top: .4rem; }
/* Das Label der Website bringt 16px Abstand mit - im knappen Portal-Fuss zu viel. */
.footer__col .label { margin-bottom: .5rem; }
.footer .privacy-badge { margin-top: .6rem; font-size: var(--fs-xs); }
.footer__col p { margin: 0; font-size: var(--fs-md); }
/* Touch-Ziel je Fußzeilen-Link (WCAG 2.5.8) */
.footer__col p a { display: inline-block; min-height: 24px; padding-block: .25rem; }
/* Auch der Credit-Link im Fussbereich braucht das Mindestziel (WCAG 2.5.8). */
.footer__made-by a { display: inline-block; min-height: 24px; padding-block: .25rem; }
.footer__bottom {
  margin-top: var(--space-lg); padding-top: var(--space-md);
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs);
}
@media (min-width: 700px) {
  .footer__grid { grid-template-columns: 1.7fr 1fr 1fr; gap: var(--space-xl); }
}

/* ---------------------------------------------------------------------
   9. Sticky-CTA (mobil)
   --------------------------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: .6rem; padding: .7rem .9rem;
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(30, 22, 72, .08);
}
.sticky-cta .btn { flex: 1; }
/* Platz nur reservieren, wenn die Leiste auch da ist. body.has-sticky kommt
   serverseitig aus layout_top ($hideSticky) und funktioniert damit auch ohne
   :has()-Unterstützung; :has() bleibt als zweite Absicherung. */
/* Die Leiste ist .7rem + Button 48px + .7rem + Safe-Area hoch. Ohne die Safe-Area
   im Platzhalter verschwanden auf Geräten mit Home-Indicator ~24px Inhalt darunter. */
body.has-sticky, body:has(.sticky-cta) {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------------
   10. Fokus-Sichtbarkeit auf dunklen Flächen
   --------------------------------------------------------------------- */
:where(.hero, .section--dark, .footer, .apply-top, .nav) :where(a, .btn, button):focus-visible {
  outline: 3px solid var(--bronze-light);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   11. Breakpoints (additiv)
   --------------------------------------------------------------------- */
/* Benefit-Kacheln fruehr zweispaltig: 18 Eintraege einspaltig ergeben auf dem
   Handy einen sehr langen Block vor FAQ und Abschluss-CTA. */
@media (min-width: 480px) {
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 600px) {
  .jobs-grid    { grid-template-columns: repeat(2, 1fr); }
  .hero__cta .btn { min-width: 220px; }
  .form-nav .btn { flex: 0 0 auto; min-width: 180px; }
}
@media (min-width: 900px) {
  .jobs-grid    { grid-template-columns: repeat(3, 1fr); }
  .benefit-grid { grid-template-columns: repeat(3, 1fr); }
  .trust        { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .feature-row  { grid-template-columns: repeat(2, 1fr); }
  .sticky-cta   { display: none; }
  body.has-sticky, body:has(.sticky-cta) { padding-bottom: 0; }
}

/* Schmale Geraete: Das Breitbild (1920x640) wird bei 390px Viewport stark
   hineingezoomt, einzelne Gesichter landen direkt hinter dem Text. Dichteres
   Overlay und tieferer Bildausschnitt beruhigen das, ohne das Foto aufzugeben. */
@media (max-width: 700px) {
  .hero--funnel .hero__bg {
    background-image:
      linear-gradient(165deg, rgba(30, 22, 72, .94) 0%, rgba(42, 32, 96, .90) 55%, rgba(55, 42, 124, .86) 100%),
      url("../img/header/header-team.jpg");
    background-position: 62% 30%;
  }
  .apply-top__bg { background-position: 62% 30%; }
}


/* --- Sofort sichtbar, ohne Einblendung -----------------------------------
   motion.js setzt .reveal--instant auf alles, was beim Laden schon im Bild ist.
   Ohne diese Regel hatte die Klasse keine Wirkung: Der Inhalt oben auf der Seite
   blendete sich trotzdem ein - also genau dort, wo der Besucher schon hinschaut
   und die Bewegung nur stört. */
.reveal--instant { transition: none !important; }

/* --- Sprungziele nicht unter der Navigationsleiste --------------------------
   Die Leiste ist fixiert (88 px). Ohne scroll-margin-top landet ein Anker wie
   #stellen zwar richtig, die Überschrift liegt aber verdeckt darunter - der
   Sprung wirkt, als sei nichts passiert. */
:target,
[id] { scroll-margin-top: 96px; }