/* concatenated by scripts/build-assets.sh */
/* === tokens.css === */
:root {
  /* Brand — amber */
  --accent: #f6a21c;
  --accent-dark: #dd9219;
  --accent-deep: #b6740f;
  /* Text auf Weiß/#fff3dc braucht ≥4,5:1; #eb8d28 lag bei 2,3–2,5:1. */
  --accent-ink: #9a5a00;

  /* Amber-tinted surfaces & highlights */
  --accent-soft: #fff3dc;
  --accent-faint: #fef6e8;
  --accent-wash: #fdf8f1;
  --accent-surface: #f6e7cf;
  --accent-border-strong: #f3d59c;
  --accent-tan: #d9c7a8;
  --accent-tan-soft: #eadfce;

  /* Neutral surfaces (light → dark) */
  --surface: #ffffff;
  --paper: #fefdf9;
  --paper-soft: #f0eee9;
  --bg-soft: #fafafa;
  --surface-muted: #f4f4f4;
  --surface-warm: #e8e3dd;

  /* Marken-Dunkelblau. Trägt die Wortmarke und alles, was auf dem orangen
     Balken steht (dort 7,79:1 gegen --accent, weiß lag bei 2,08:1). */
  --brand-ink: #0d2235;

  /* Text. Alle Graustufen tragen denselben Farbton wie --brand-ink (208°)
     bei niedriger Sättigung, damit die Abstufungen wie aus einem Guss
     wirken, ohne die Hierarchie einzuebnen. Die Kontraste der bisherigen
     Töne sind dabei erhalten geblieben; auf Weiß von oben nach unten:
     10,4 / 9,2 / 5,2 / 5,4 / 6,1 / 4,8:1.
     Staffelung von hell nach dunkel: --faint, --muted, --muted-strong,
     --muted-deep. --muted-strong hieß bis zur Umstellung --muted-warm,
     das traf auf den früheren Braunton (30°) zu, auf den heutigen nicht
     mehr; --muted-deep und --text-strong beschreiben Dunkelheit statt
     Temperatur und behalten ihre Namen.
     --faint war zuvor #7a736c und verfehlte auf --bg-soft mit 4,47:1
     knapp die 4,5:1 für Fließtext. */
  --text: #3a4147;
  --text-strong: #41494f;
  --muted: #646e77;
  --muted-strong: #616b74;
  --muted-deep: #5a636c;
  --faint: #69737b;

  /* Borders & dividers */
  /* Scrollbars: bewusst neutral-grau statt Akzentfarbe -- sie sind
     Bedienelement, kein Gestaltungselement. Der transparente Track laesst
     die Leiste auf hellen wie auf grauen Flaechen gleich ruhig wirken. */
  --scrollbar-thumb: #d6d6d6;
  --scrollbar-thumb-hover: #bdbdbd;
  --scrollbar-track: transparent;

  --border: #ececec;
  --border-warm: #e9e2d8;
  --border-warm-strong: #d9d2c6;

  /* Dark surfaces */
  --dark: #1d1c1a;
  --dark-soft: #2f2c28;

  /* Shadows */
  --shadow: 0 14px 28px rgba(0, 0, 0, 0.1);

  /* Typography — font family */
  --font-sans: "Montserrat", sans-serif;

  /* Typography — font sizes (static scale) */
  --font-size-2xs: 0.72rem;
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.88rem;
  --font-size-md: 0.95rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.4rem;
  --font-size-3xl: 1.6rem;
  --font-size-4xl: 1.8rem;
  --font-size-5xl: 2rem;

  /* Typography — font sizes (responsive headings/display) */
  --font-size-h1: clamp(1.5rem, 5vw, 3.5rem);
  --font-size-h2: clamp(1.5rem, 3.8vw, 2.2rem);
  --font-size-h3: clamp(1.2rem, 2.6vw, 1.5rem);
  --font-size-h4: clamp(1rem, 2vw, 1.125rem);
  --font-size-hero: clamp(2.2rem, 5vw, 4.5rem);
  --font-size-display: clamp(1.6rem, 4.6vw, 3.1rem);
  --font-size-title: clamp(1.7rem, 3.2vw, 2.5rem);
  --font-size-nav: clamp(0.98rem, 2.8vw, 1.08rem);

  /* Typography — font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Typography — line heights */
  --line-height-none: 0;
  --line-height-tight: 1;
  --line-height-heading: 1.2;
  --line-height-compact: 1.4;
  --line-height-base: 1.5;
  --line-height-reading: 1.6;
}

/* === base.css === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-width: 0;
}

body {
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: var(--line-height-none);
}

.typo-inherit {
    font: inherit;
    color: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

:is(.typo-h1, .typo-h2, .typo-h3, h1, h2, h3, h4) {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
}

:is(.typo-h1, h1) {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
}

:is(.typo-h2, h2) {
    font-size: var(--font-size-h2);
    margin-bottom: 10px;
}

:is(.typo-h3, h3) {
    font-size: var(--font-size-h3);
}

.typo-body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-reading);
    font-weight: var(--font-weight-regular);
}

.typo-body h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.typo-body h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.typo-body p {
    margin-bottom: 0.85rem;
}

.typo-body a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.typo-small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.typo-eyebrow {
    color: var(--accent-ink);
    font-weight: var(--font-weight-bold);
}

.typo-label {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-compact);
}

.typo-quote {
    color: var(--muted);
    font-style: italic;
}

@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/Montserrat-Variable-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html {
    overflow-x: clip;
    max-width: 100vw;
    /* In-Page-Ankerlinks (z. B. Schnellauswahl -> #einordnen) scrollen
       animiert statt zu springen; bindHashScrollFix() (shared/ui.js)
       nutzt scrollIntoView({behavior:"smooth"}) beim hashchange-Event, das
       greift aber nur, wenn der native Sprung des Browsers nicht schon
       vorher instant stattgefunden hat. prefers-reduced-motion überschreibt
       das weiter unten wieder auf "auto". */
    scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    /* Wegen "overflow-x: hidden" auf sowohl <html> als auch <body> wird
       <body> zur eigenen Scroll-Box statt dass sein Overflow auf den
       Viewport propagiert (siehe ausführlicher Kommentar zu
       bindHashScrollFix() in shared/ui.js) -- scroll-behavior:smooth stand
       bisher nur auf <html>, betraf also nicht die tatsächlich scrollende
       Box. Deckt v. a. native, nicht per JS explizit "smooth"/"instant"
       angesteuerte Fragment-Sprünge ab (bindHashScrollFix() selbst übergibt
       scrollIntoView() bereits explizit behavior, das wirkt unabhängig von
       dieser CSS-Property). */
    scroll-behavior: smooth;
}

:root {
    /* Sticky-Offset für Inhalte unter dem Header. Der Header ist aktuell
       126px hoch (Topbar mit der Bildungsmatrix-Wortmarke + Reihe 2 mit
       Förderlogo und Hauptnavigation) — hier mit etwas Puffer, damit
       Sticky-Elemente nicht darunter rutschen. */
    --site-header-height: 132px;
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--surface);
    line-height: var(--line-height-reading);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-base);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-preview-gate,
body.page-analytics-gate {
    padding-top: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(246, 162, 28, 0.18),
            transparent 34%
        ),
        linear-gradient(160deg, var(--accent-wash) 0%, var(--paper-soft) 48%, var(--paper-soft) 100%);
}

p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-reading);
    font-weight: var(--font-weight-regular);
    color: var(--text);
}

input,
button,
select,
textarea {
    font-family: var(--font-sans);
}

h4 {
    font-size: var(--font-size-h4);
}

a {
    text-decoration: none;
    color: inherit;
}

/* Dezente, neutrale Scrollbars in allen scrollbaren Bereichen (Seite,
   Modals, Wizard-Schritte, Sidebars). scrollbar-width/-color vererben sich,
   deshalb genuegt html als Ursprung -- Elemente, die ihre Leiste bewusst
   ausblenden (.card-slider__track, .pill-row mit scrollbar-width:none),
   gewinnen weiterhin ueber die hoehere Spezifitaet ihres Klassenselektors.
   Der 2px-Rahmen in Transparenz plus background-clip laesst den Griff
   schmaler wirken, ohne die Trefferflaeche zu verkleinern. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

img {
    max-width: 100%;
    display: block;
}

hr,
.section-divider,
.lead-line {
    display: none;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 8px 16px;
    background: #000;
    color: var(--surface);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    z-index: 9999;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

:focus-visible {
    outline: 3px solid var(--accent-deep);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Elements that use box-shadow as focus ring — suppress duplicate outline */
.pill:focus-visible,
.hero-search input:focus-visible,
.search-field input:focus-visible,
.site-header .nav-search input:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.search-section,
.accordion.list .accordion-item,
.accordion-item {
    border-top: none;
    border-bottom: none;
}

/* ── Prevent any element from exceeding viewport width on mobile ── */
@media (max-width: 640px) {
    img,
    video,
    iframe,
    table,
    pre {
        max-width: 100%;
    }

    .page {
        overflow-x: hidden;
        max-width: 100vw;
    }
}

/* === layout.css === */
.page {
  width: 100%;
  min-height: 100%;
}

.container {
  width: min(1440px, 100%);
  padding: 0 32px;
  margin: 0 auto;
}

.section {
  padding: 60px 0;
}

.section.slim {
  padding: 60px 0 30px;
}

.section.gray,
.section-gray {
  background: var(--surface-muted);
}

/* Immer abwechselndes Hintergrund-Prinzip: weiß → lightgray (var(--bg-soft)) →
   alt (var(--surface-muted)) → weiß … Beide Nicht-Weiß-Stufen bekommen dieselbe dezente
   Trennlinie (var(--paper-soft)), da die Farbtöne sonst kaum vom Weiß bzw.
   voneinander zu unterscheiden sind. .section.glossary trägt eigene
   Struktur-Styles (siehe organisms.css) und bekommt hier nur die
   lightgray-Farbe als Default — .alt ist absichtlich NACH .glossary
   deklariert, damit ein zusätzliches "alt" (siehe Lexikon-Teaser auf der
   Startseite) bei gleicher Specificity die alt-Farbe gewinnen lässt. */
.section.glossary,
.section.lightgray {
  background: var(--bg-soft);
  border-top: 1px solid var(--paper-soft);
}

.section.alt {
  background: var(--surface-muted);
  border-top: 1px solid var(--paper-soft);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.center {
  text-align: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
}

.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.split.reverse {
  flex-direction: row-reverse;
}

.split > * {
  flex: 1 1 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.card-grid > * {
  height: 100%;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 36px;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.story-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.feature-grid > *,
.story-grid > *,
.profile-grid > * {
  height: 100%;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.tab-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .card-grid.triple {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}

@media (max-width: 960px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .feature-grid,
  .story-grid,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .story-grid.two {
    grid-template-columns: 1fr;
  }

  .split {
    flex-direction: column;
    align-items: stretch;
  }

  .split > * {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 20px;
  }

  .section {
    padding: 40px 0;
  }

  .section.slim {
    padding: 40px 0;
  }

}

/* ── Step flow ─────────────────────────────────────────── */
.steps-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 48px;
}

.step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  background: var(--surface);
  border-radius: 14px;
  padding: 28px 16px;
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--brand-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
}

.step-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  margin: 0;
}

.step-text {
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin: 0;
  line-height: var(--line-height-base);
}

.step-connector {
  flex: 0 0 32px;
  height: 8px;
  background: var(--surface);
  align-self: center;
  border-radius: 4px;
}

/* ── Why-split ─────────────────────────────────────────── */
.why-split {
  display: flex;
  align-items: center;
  gap: 64px;
}

.why-text {
  flex: 1;
}

.why-visual {
  flex: 0 0 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-image {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.why-list {
  list-style: none;
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}

.why-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
  margin-top: 1px;
}

.why-card-icon {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
}

.why-card-icon .feather-icon {
  width: 28px;
  height: 28px;
}

/* ── Section CTA ───────────────────────────────────────── */
.section-cta {
  margin-top: 40px;
  display: flex;
  justify-content: flex-start;
}

.text-link-cta {
  color: var(--accent-ink);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  text-decoration: none;
}

.text-link-cta:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* ── Section gray variant ──────────────────────────────── */
.section-gray {
  background: var(--surface-muted);
}

/* ── Guide steps (Quereinstiegsguide) ─────────────────── */
.guide-steps {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
}

.guide-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 40px;
}

.guide-step-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.guide-step-header .step-number {
  width: 56px;
  height: 56px;
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.guide-step-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text);
  margin: 0;
}

.guide-step-text {
  font-size: var(--font-size-md);
  color: var(--muted);
  line-height: var(--line-height-reading);
  margin-bottom: 24px;
  max-width: 680px;
}

.guide-step-tiles {
  margin-bottom: 8px;
}

.guide-step-cta {
  margin-top: 28px;
}

.guide-step-connector {
  width: 8px;
  height: 32px;
  background: var(--surface);
  margin-left: 64px;
  border-radius: 2px;
  align-self: flex-start;
  flex-shrink: 0;
}

/* ── Card Slider ───────────────────────────────────────── */
.card-slider {
  position: relative;
}

.card-slider__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* overflow-x:auto berechnet overflow-y ebenfalls auf "auto" (kein Wert
     "visible" auf nur einer Achse), schneidet also auch den Hover-Schatten
     der Karten (siehe .card/.story-card:hover) oben/unten hart ab, wenn
     hier kein Platz eingeplant ist. */
  padding: 14px 4px 24px;
  margin: -14px -4px -24px;
  /* Die noch nicht vollständig sichtbare Karte am rechten Rand weich
     ausblenden statt hart abzuschneiden. */
  -webkit-mask-image: linear-gradient(
    to right,
    black calc(100% - 64px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    black calc(100% - 64px),
    transparent 100%
  );
}

.card-slider__track::-webkit-scrollbar {
  display: none;
}

/* Ganz nach rechts gescrollt (siehe bindCardSliders() in shared/ui.js) --
   der Ausblend-Schein am rechten Rand deutet weiteren Inhalt an, der hier
   nicht mehr existiert. */
.card-slider__track.card-slider__track--end {
  -webkit-mask-image: none;
  mask-image: none;
}

.card-slider__track > .card,
.card-slider__track > .story-card,
.card-slider__track > .job-card,
.card-slider__track > .card-slider__cta-slide {
  flex: 0 0 30%;
  scroll-snap-align: start;
  /* Analog zu .story-grid > *, .profile-grid > * (Zeile ~113-117):
     nebeneinanderstehende Karten sollen auch im horizontal scrollenden
     Slider gleich hoch sein. "height: 100%" wirkt hier kontraproduktiv --
     ein expliziter Prozentwert (auch wenn er sich gegen den unbestimmt
     hohen .card-slider__track letztlich wie "auto" verhält) zählt für den
     Flexbox-Stretch-Algorithmus NICHT als "computed cross size: auto" und
     schaltet align-items:stretch damit faktisch ab -- jede Karte fällt auf
     ihre eigene Inhaltshöhe zurück statt sich an der höchsten Karte
     auszurichten (sichtbar z. B. bei den "Trägerrelevante FAQs"-Karten).
     "height: auto" + explizites "align-self: stretch" lässt den Stretch
     wieder zuverlässig greifen. */
  height: auto;
  align-self: stretch;
}

.card-slider__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* Ohne diese Regel überschreibt ".card-slider__footer { display: flex }"
   (gleiche Spezifität, später im Stylesheet) das Standard-[hidden]-Verhalten
   -- die Pfeile/Punkte blieben dann sichtbar, obwohl bindCardSliders()
   (shared/ui.js) footer.hidden bei fehlendem Overflow bereits gesetzt hat.
   Gleiche Falle wie bei .mini-card[hidden] oben in molecules.css. */
.card-slider__footer[hidden] {
  display: none;
}

.card-slider__dots {
  flex: 1;
  display: flex;
  gap: 4px;
  justify-content: center;
}

.card-slider__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-slider__dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-tan);
  transition: background 0.15s, transform 0.15s;
}

.card-slider__dot.is-active::after {
  background: var(--accent);
  transform: scale(1.35);
}

.card-slider__nav {
  display: flex;
  gap: 8px;
}

.card-slider__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  color: var(--text);
  transition: background 0.15s;
  line-height: var(--line-height-tight);
}

.card-slider__btn:hover:not(:disabled) {
  background: var(--accent-wash);
}

.card-slider__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.card-slider__cta-slide {
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 20px;
  gap: 10px;
  text-decoration: none;
  color: var(--accent-ink);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  min-height: 160px;
  transition: background 0.15s, box-shadow 0.15s;
}

.card-slider__cta-slide:hover {
  background: var(--accent-wash);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card-slider__cta-icon {
  font-size: var(--font-size-5xl);
}

/* ── Guide step link list ──────────────────────────────── */
.guide-step-links {
  margin-bottom: 20px;
}

.guide-step-links-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  margin: 0 0 8px;
}

.guide-step-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide-step-links-list a {
  color: var(--accent-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.guide-step-links-list a:hover {
  text-decoration: underline;
}

@media (max-width: 960px) {
  .card-slider__track > .card,
  .card-slider__track > .story-card,
  .card-slider__track > .job-card,
  .card-slider__track > .card-slider__cta-slide {
    flex: 0 0 46%;
  }
}

@media (max-width: 640px) {
  .card-slider__track > .card,
  .card-slider__track > .story-card,
  .card-slider__track > .job-card,
  .card-slider__track > .card-slider__cta-slide {
    flex: 0 0 min(260px, 80vw);
  }
}

/* ── Link cards (inside guide steps) ──────────────────── */
.link-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-tan-soft);
  border-radius: 10px;
  color: var(--accent-ink);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-decoration: none;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s;
}

.link-card:hover {
  background: var(--accent-surface);
  border-color: var(--accent-border-strong);
}

.link-card::after {
  content: "→";
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Lexicon hint ──────────────────────────────────────── */
.lexicon-hint {
  font-size: var(--font-size-sm);
  margin: 0 0 20px;
}

.lexicon-hint a {
  color: var(--accent-ink);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.lexicon-hint a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .guide-step {
    padding: 24px 20px;
  }

  .guide-step-connector {
    margin-left: 39px;
  }

  .guide-step-header .step-number {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-base);
  }
}

@media (max-width: 860px) {
  .steps-flow {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .step-connector {
    width: 2px;
    height: 24px;
    flex: 0 0 24px;
    margin-top: 0;
    align-self: center;
  }

  .step-item {
    width: 100%;
    max-width: 400px;
  }

  .why-split {
    flex-direction: column-reverse;
    gap: 32px;
  }

  .why-visual {
    flex: none;
  }

  .why-image {
    max-width: 200px;
  }
}

/* === atoms.css === */
.accent {
  color: var(--accent);
}

.muted {
  color: var(--muted);
}

.small {
  font-size: var(--font-size-sm);
  color: var(--muted);
}

.btn {
  border-radius: 8px;
  padding: 12px 22px;
  font-weight: var(--font-weight-semibold);
  font-size: inherit;
  line-height: var(--line-height-compact);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  min-width: clamp(170px, 40vw, 260px);
}

.btn-primary {
  background: var(--accent);
  color: var(--brand-ink);
}

.btn-primary:hover {
  background: var(--accent-dark);
  color: var(--brand-ink);
}

.btn-ghost {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-ink);
}

.badge {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-ink);
  width: fit-content;
}

.af-zugang-checks {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 6px;
}

.af-zugang-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--text);
  user-select: none;
}

/* Träger-Wizard "Art der Qualifizierung": Optionen ohne Treffer für das in
   Schritt 1 gewählte Arbeitsfeld (bindWizardCategoryAvailability(),
   modal-wizard.js). */
.af-zugang-check.is-unavailable {
  opacity: 0.4;
  cursor: not-allowed;
}

.af-zugang-check.is-unavailable input {
  cursor: not-allowed;
}

/* Träger-Wizard "Art der Qualifizierung": Checkbox "Alle passenden
   Qualifizierungen anzeigen" (bindWizardShowAllToggle(), modal-wizard.js)
   entwertet die Art-Auswahl optisch, statt sie zu deaktivieren -- die
   tatsächliche Ausnahme aus der Formular-Abfrage passiert erst beim Absenden. */
.af-zugang-checks.is-deemphasized {
  opacity: 0.4;
}

.wizard-show-all-check {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.af-zugang-sub {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--muted-strong);
  margin-top: 1px;
}

.af-zugang-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.5px solid var(--border-warm-strong);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}

.af-zugang-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.af-zugang-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--surface);
  border-bottom: 2px solid var(--surface);
  transform: rotate(-45deg);
}

.af-zugang-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.af-zugang-check input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.5px solid var(--border-warm-strong);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}

.af-zugang-check input[type="radio"]:checked {
  border-color: var(--accent);
}

.af-zugang-check input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.af-zugang-check input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Träger-Wizard-Schritt "Art der Qualifizierung": eine Haupt-Option
   (Studium/Ausbildung, Radio) blendet ihre Verfeinerungs-Checkboxen darunter
   ein, siehe bindWizardExpandableGroups() in modal-wizard.js. */
.wizard-qual-option {
  margin-bottom: 14px;
}

.wizard-qual-option:last-child {
  margin-bottom: 0;
}

.wizard-qual-subgroup[hidden] {
  display: none;
}

.wizard-qual-subgroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0 25px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}

.af-zugang-check--sub {
  font-size: var(--font-size-xs);
  color: var(--muted);
}

.filter-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 11px 40px 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23a09690' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 16px 16px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text);
  cursor: pointer;
}

.filter-select.is-placeholder {
  color: var(--faint);
}

.filter-select option {
  color: var(--text);
}

.filter-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  border-bottom-width: 2px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Aktiver Zustand, sobald ein Wert gewählt wurde — gleiche Optik wie
   .search-field.has-value bei den Schnellsuchen-Feldern. */
.filter-select.has-value {
  border-color: var(--accent);
  background-color: var(--accent-wash);
}

.filter-select-wrap {
  position: relative;
}

.filter-select-wrap .filter-select {
  padding-right: 64px;
}

.filter-select-wrap .filter-select-clear {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
}

/* "Berufsbezeichnung" (Arbeitsfelder-Seite) im selben Look wie der
   "Bereich"-Filter der Matrix-Seite (.search-field--floating, siehe
   molecules.css): führendes Icon + echtes <label> statt des vorherigen
   statischen <span class="pill-label"> darüber. Anders als bei einem
   Text-Input hat ein natives <select> aber nie einen leeren Zustand -- die
   erste Option ("Alle") zeigt immer sichtbaren Text, ein großes,
   platzhalterartiges Label würde also ständig mit diesem Text kollidieren.
   Das Label bleibt deshalb dauerhaft in der kleinen "geflowteten" Position
   am Feldrand, statt zwischen zwei Zuständen zu wechseln. */
.filter-select-wrap--floating .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-strong);
  pointer-events: none;
  display: inline-flex;
}

.filter-select-wrap--floating .filter-select {
  padding-left: 38px;
}

.filter-select-wrap--floating .floating-label {
  position: absolute;
  left: 34px;
  top: 0;
  transform: translateY(-50%);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  color: var(--accent-ink);
  pointer-events: none;
  background: var(--surface);
  padding: 0 4px;
  border-radius: 4px;
  white-space: nowrap;
}

.pill-label {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--faint);
}

.pill {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 6px;
  border: 1px solid var(--surface-warm);
  background: var(--surface);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  color: var(--muted);
  cursor: pointer;
}

.pill .feather-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  flex-shrink: 0;
}

.pill:hover {
  color: var(--text-strong);
  border-color: var(--border-warm-strong);
}

.pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-deep);
}

.pill.is-unavailable,
.pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  /* Kein pointer-events:none -- das würde den nativen title-Tooltip
     verhindern (Hover-Events erreichen das Element sonst gar nicht mehr),
     den deaktivierte Pillen/Toggles zur Begründung ("Keine Treffer mit
     aktueller Auswahl") brauchen. Das native disabled-Attribut verhindert
     Klicks/Tastaturaktivierung bereits zuverlässig ohne pointer-events. */
}


.dot {
  width: 10px;
  height: 10px;
  background: var(--accent);
  display: inline-block;
  border-radius: 50%;
  margin-right: 8px;
}

.tag-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.tab {
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: var(--font-weight-semibold);
  color: var(--muted);
}

.tab.active {
  background: var(--accent-faint);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-ink);
}

.feather-icon {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* === molecules.css === */
.hero-pills {
    display: grid;
    gap: 10px;
}

.card {
    background: var(--surface);
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid var(--border);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition:
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card::before {
    content: "";
    width: 28px;
    height: 6px;
    background: #f7d289;
    border-radius: 999px;
    margin-bottom: 2px;
}

.card-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--paper-soft);
    border: 1px solid var(--border-warm);
}

.card.dark {
    background: var(--dark-soft);
    color: var(--surface);
    border-color: transparent;
}

.card.dark::before {
    background: rgba(255, 255, 255, 0.3);
}

.card > p {
    flex: 1;
}

.card-link {
    color: var(--accent-ink);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-top: auto;
}

.card.dark .card-link {
    color: #f8c15a;
}

.list {
    list-style: none;
    margin-top: 16px;
    display: grid;
    gap: 8px;
}

.list > li {
    display: grid;
    grid-template-columns: 0.7em minmax(0, 1fr);
    align-items: start;
    column-gap: 8px;
}

.list > li::before {
    content: "•";
    color: var(--accent-ink);
}

.media-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 32px auto;
}

.media {
    border-radius: 18px;
    background: var(--paper-soft);
    border: 1px solid var(--border-warm);
    height: 180px;
    display: grid;
    place-items: center;
    color: var(--muted-strong);
    font-weight: var(--font-weight-semibold);
}

.media.large {
    height: 240px;
}

.section-divider {
    height: 1px;
    background: var(--accent-tan-soft);
    width: 55%;
    margin: 20px auto 0;
}

.qual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin-top: 12px;
}

.qual-item {
    background: var(--accent-wash);
    border: 1px solid var(--accent-tan-soft);
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    align-content: start;
    gap: 6px;
}

.qual-label {
    font-size: var(--font-size-2xs);
    color: rgba(140, 110, 74, 0.7);
    font-weight: var(--font-weight-semibold);
}

.qual-value {
    color: var(--text-strong);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.qual-list {
    list-style: none;
    display: grid;
    gap: 4px;
}

.qual-list li::before {
    content: "•";
    color: var(--accent-ink);
    margin-right: 4px;
}

.qual-link {
    color: var(--accent-ink);
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 640px) {
    .qual-grid {
        grid-template-columns: 1fr;
    }
}

.accordion:not(.list) .accordion-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 16px 22px;
    background: var(--surface);
    border: none;
    border-bottom: 1px solid var(--border);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    position: relative;
    padding-left: 46px;
}

.accordion:not(.list) .accordion-item > span:first-child {
    flex: 1;
    text-align: left;
}

.accordion:not(.list) .accordion-item::before {
    content: "";
    position: absolute;
    left: 18px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 2px solid var(--accent-border-strong);
}

.accordion:not(.list) .accordion-item:last-of-type {
    border-bottom: none;
}

.accordion:not(.list) .accordion-panel {
    display: none;
    padding: 18px;
    color: var(--muted);
}

.accordion:not(.list) .accordion-panel.open {
    display: block;
}

.accordion-explorer--glossar .accordion.list .accordion-panel {
    padding: 18px;
}

.accordion:not(.list) .plus {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-soft);
    position: relative;
}

.accordion:not(.list) .plus::before,
.accordion:not(.list) .plus::after {
    content: "";
    position: absolute;
    background: var(--accent-dark);
}

.accordion:not(.list) .plus::before {
    width: 10px;
    height: 2px;
    top: 8px;
    left: 4px;
}

.accordion:not(.list) .plus::after {
    width: 2px;
    height: 10px;
    top: 4px;
    left: 8px;
}

.accordion:not(.list) .accordion-item[aria-expanded="true"] .plus::after {
    display: block;
}

.help-box,
.download-box {
    background: var(--surface);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid var(--border);
}

.contacts {
    margin-top: 20px;
    display: grid;
    gap: 16px;
}

.person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-surface);
    border: 2px solid var(--accent-border-strong);
}

.contact-cards {
    display: grid;
    gap: 16px;
}

.contact-card {
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.testimonial-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.testimonial-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card.dark .small {
    color: rgba(255, 255, 255, 0.6);
}

.contact {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

@media (max-width: 960px) {
    .feature-grid,
    .story-grid,
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .story-grid.two {
        grid-template-columns: 1fr;
    }

    .explorer-topbar,
    .explorer-filter-stack {
        grid-template-columns: 1fr;
    }
}

/* ---- Filter suggest input ---- */

.explorer-suggest-wrap {
    position: relative;
}

/* Mehrfachauswahl-Pillen unter der Combobox (z. B. "Arbeitsfeld", siehe
   multiselect-Flag in helpers.php/filter_selects und renderArbeitsfeldPills()
   in explorer/index.js) -- immer sichtbar (Desktop + Mobil), da Teil der
   Feld-Bedienung selbst, nicht der allgemeinen (mobil-only)
   Filter-Zusammenfassung. */
.explorer-suggest-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    margin-bottom: 10px;
}

/* Floating Label (Bereich/Arbeitsfeld/Ort-Suggest-Inputs): ein echtes,
   programmatisch verknüpftes <label for="..."> (a11y!) sitzt zunächst wie
   ein Platzhalter im Feld und wandert bei Fokus bzw. sobald ein Wert
   gewählt ist (.has-value, bereits von syncSuggestClear() in
   explorer/index.js getoggelt) nach oben in den Feldrand -- ersetzt das
   vorherige statische <span class="pill-label"> darüber. Die x-Position
   bleibt in beiden Zuständen gleich (rechts vom Icon), damit das Label nie
   mit dem Icon kollidiert. */
.search-field--floating {
    position: relative;
}

.search-field--floating .floating-label {
    position: absolute;
    left: 42px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-md);
    color: var(--muted-strong);
    pointer-events: none;
    transition:
        top 0.15s ease,
        font-size 0.15s ease,
        color 0.15s ease,
        background 0.15s ease;
    background: transparent;
    padding: 0 4px;
    margin: 0 -4px;
    border-radius: 4px;
    white-space: nowrap;
}

.search-field--floating:focus-within .floating-label,
.search-field--floating.has-value .floating-label {
    top: 0;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--accent-ink);
    background: var(--surface);
}

.explorer-suggest-list {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--surface);
    border: 1px solid var(--border-warm);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.explorer-suggest-list:empty,
.explorer-suggest-list[hidden] {
    display: none;
}

.suggest-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--paper-soft);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--text-strong);
}

.suggest-option:last-child {
    border-bottom: none;
}

.suggest-option:hover {
    background: var(--accent-wash);
}

.suggest-option.is-active {
    background: var(--accent-wash);
    color: var(--accent-ink);
    font-weight: var(--font-weight-semibold);
}

/* Suchtreffer-Hervorhebung in der Sidebar-Vorschlagsliste (aktuell nur
   "Ort" -- "Arbeitsfeld" ist reine Klick-/Tastatur-Listbox ohne Tippen/
   Filtern, siehe .explorer-suggest-trigger weiter unten, matcht diese Regel
   dort also nie), buildHighlightedSnippet() in renderSuggestPills(), siehe
   explorer/index.js) -- analog zur orangen Treffer-Hervorhebung in der
   Ergebnisliste (.accordion-title/.accordion-meta mark.autocomplete-match
   oben), statt auf den gelben Browser-Standard für <mark> zurückzufallen. */
.explorer-suggest-list mark.autocomplete-match {
    background: transparent;
    color: var(--accent-ink);
    font-weight: var(--font-weight-bold);
}

.suggest-clear[hidden],
.pill-toggle[hidden] {
    display: none;
}

.pill-toggle {
    text-align: left;
}

/* Höhere Spezifität als organisms.css ".pill { white-space: nowrap }" nötig,
   damit lange Toggle-Labels (z. B. "Ich habe bereits …") umbrechen statt
   abgeschnitten zu werden. */
.quick-filters .pill-toggle {
    white-space: normal;
}

.suggest-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--muted-strong);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.suggest-clear .feather-icon {
    width: 14px;
    height: 14px;
}

.suggest-clear:hover {
    color: var(--text);
}

/* Dropdown-Pfeil, analog zum nativen Dropdown-Pfeil eines <select>. Kommt in
   ZWEI Varianten vor:
   1. Matrix-Seite ("Arbeitsfeld", siehe combobox-Flag in helpers.php/
      filter_selects): rein dekoratives <span> INNERHALB des Trigger-Buttons
      (.explorer-suggest-trigger) -- kein eigener Klick-Handler nötig, der
      gesamte Button (Pfeil inklusive) ist bereits klickbar.
   2. Arbeitsfelder-Seite ("Berufsbezeichnung", siehe arbeitsfelder-content.php):
      eigener <button> NEBEN dem Freitext-Input, der die Vorschlagsliste
      auf-/zuklappt (der Input selbst bleibt tippbar, ein umschließender
      Trigger-Button ist dort also nicht möglich).
   Der Reset unten (appearance/border/background/padding) gilt deshalb der
   Button-Variante: ohne ihn zeichnet der Browser natives Button-Chrome
   (2px outset border + grauer Grund), das zusätzlich das 16px-SVG auf die
   verbleibende Innenbreite von 12px staucht. */
.suggest-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--muted-strong);
    transition: transform 0.15s ease;
}

.suggest-toggle .feather-icon {
    width: 16px;
    height: 16px;
}

/* Aufgeklappt-Zustand: auf der Matrix-Seite trägt der umschließende Trigger
   das aria-expanded, auf der Arbeitsfelder-Seite das Input-Geschwisterelement
   (role="combobox") -- daher zwei Selektoren für dieselbe Drehung. */
.explorer-suggest-trigger[aria-expanded="true"] .suggest-toggle,
.search-field:has([role="combobox"][aria-expanded="true"]) .suggest-toggle {
    transform: rotate(180deg);
    color: var(--accent-ink);
}

/* Reiner Klick-/Tastatur-Listbox-Trigger für "Arbeitsfeld" (kein <input>,
   siehe helpers.php) -- Reset der nativen Button-Optik, damit er optisch
   wie das "Ort"-Textfeld daneben wirkt. Rechtsbündig (justify-content), da
   das Floating-Label (position: absolute, siehe .search-field--floating
   .floating-label oben) den linken Bereich bereits selbst abdeckt und der
   Button hier nur noch den Pfeil (.suggest-toggle) am rechten Rand zeigt. */
.explorer-suggest-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    appearance: none;
    background: none;
    border: none;
    outline: none;
    padding: 0;
    font: inherit;
    color: var(--text);
    cursor: pointer;
}

/* ---- Qualifizierungen desktop 2-column layout ---- */

.accordion-explorer--arbeitsfelder .grid-2,
.accordion-explorer--glossar .grid-2,
.accordion-explorer--faq .grid-2 {
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
}

/* Matrix (qualifizierungen): Sidebar | Inhalt (Liste/Karte-Tabs) */
.accordion-explorer--qualifizierungen .grid-2 {
    grid-template-columns: 312px 1fr;
    gap: 28px;
    align-items: start;
}

.accordion-explorer--qualifizierungen .explorer-sidebar,
.accordion-explorer--arbeitsfelder .explorer-sidebar,
.accordion-explorer--glossar .explorer-sidebar,
.accordion-explorer--faq .explorer-sidebar {
    position: sticky;
    top: calc(var(--site-header-height) + 16px);
}

.accordion-explorer--qualifizierungen .explorer-content {
    min-width: 0;
    position: relative;
    padding-bottom: 40px;
    /* Prevent sticky sidebar from jumping when filtered content is short */
    min-height: 60vh;
}

.accordion-explorer--qualifizierungen [data-list="qualifizierungen"] {
    scroll-margin-top: calc(var(--site-header-height) + 16px);
}

.q-qual-sheet {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: var(--surface);
    padding: 64px 20px 24px;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.q-qual-sheet.is-open {
    transform: translateY(0);
}

.q-qual-sheet-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 21;
    width: 40px;
    height: 40px;
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: var(--surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    color: var(--text-strong);
    cursor: pointer;
}

.q-qual-sheet-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
    padding-right: 56px;
}

.q-qual-sheet-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-strong);
}

.q-qual-sheet-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.q-qual-sheet-top .accordion-bookmark {
    margin-left: auto;
}

.accordion-explorer--qualifizierungen .explorer-search .pill-label,
.accordion-explorer--qualifizierungen .explorer-map .pill-label {
    display: none;
}

.accordion-explorer--qualifizierungen
    .explorer-map[data-mobile-view-panel].is-view-active {
    position: sticky;
    top: calc(var(--site-header-height) + 16px);
}

/* Desktop: geöffnete Qualifizierung wächst mit der Seite statt intern zu scrollen */
@media (min-width: 961px) {
    .accordion-explorer--qualifizierungen
        .explorer-map.has-open-sheet[data-mobile-view-panel].is-view-active {
        position: static;
    }

    .accordion-explorer--qualifizierungen
        .explorer-map.has-open-sheet
        .q-qual-sheet {
        display: flex;
        flex-direction: column;
        position: static;
        inset: auto;
        overflow: visible;
        transform: none;
        transition: none;
        padding-top: 24px;
    }

    .accordion-explorer--qualifizierungen
        .explorer-map.has-open-sheet
        .q-qual-sheet-close {
        position: sticky;
        top: calc(var(--site-header-height) + 16px);
        align-self: flex-end;
        margin-bottom: -40px;
        z-index: 5;
    }

    /* Geöffnete Qualifizierung ersetzt die Karte, statt darunter zu erscheinen */
    .accordion-explorer--qualifizierungen
        .explorer-map.has-open-sheet
        .matrix-map-container {
        display: none;
    }
}

.accordion-explorer--qualifizierungen .explorer-viewtabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-top: 1px solid var(--border-warm);
    border-bottom: 1px solid var(--border-warm);
}

.accordion-explorer--qualifizierungen .explorer-viewtab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-height: 48px;
    padding: 10px 12px;
    border: none;
    border-radius: 0;
    background: var(--surface);
    color: var(--muted-strong);
    font: inherit;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.15s ease;
}

.accordion-explorer--qualifizierungen .explorer-viewtab:not(:last-child) {
    border-right: 1px solid var(--border-warm);
}

/* Zähler-Badge am Merkliste-Reiter. */
.accordion-explorer--qualifizierungen .explorer-viewtab-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-reading);
    text-align: center;
}

.accordion-explorer--qualifizierungen .explorer-viewtab-count[hidden] {
    display: none;
}

.accordion-explorer--qualifizierungen .explorer-viewtab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.accordion-explorer--qualifizierungen .explorer-viewtab.is-active {
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent-soft) 100%);
    color: var(--accent-ink);
    box-shadow: inset 0 0 0 1px rgba(246, 162, 28, 0.08);
}

.accordion-explorer--qualifizierungen .explorer-main[data-mobile-view-panel],
.accordion-explorer--qualifizierungen .explorer-map[data-mobile-view-panel],
.accordion-explorer--qualifizierungen
    .explorer-bookmarks[data-mobile-view-panel] {
    display: none;
}

.accordion-explorer--qualifizierungen
    .explorer-main[data-mobile-view-panel].is-view-active {
    display: block;
}

.accordion-explorer--qualifizierungen
    .explorer-map[data-mobile-view-panel].is-view-active {
    display: block;
}

.accordion-explorer--qualifizierungen
    .explorer-bookmarks[data-mobile-view-panel].is-view-active {
    display: block;
}

.accordion-explorer--qualifizierungen .explorer-map .matrix-map-container {
    height: calc(100vh - var(--site-header-height) - 140px);
    margin-top: 12px;
}

/* Marker-Farbe -> Typ (Studium/Ausbildung/Weiterbildung/Fachkräfte), siehe
   QUAL_MAP_CATEGORY_COLORS/initQualMap() in explorer/index.js -- als
   Leaflet-Control per JS in die Karte eingehängt, hier nur das Aussehen. */
.matrix-map-legend {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    color: var(--text-strong);
    line-height: var(--line-height-compact);
}

.matrix-map-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.matrix-map-legend-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.explorer-mobile-filter-btn {
    display: none;
}

/* Zusammenfassung der aktiven Filter unterhalb der Suche, auch wenn das
   (mobile) Filter-Panel selbst gerade zugeklappt ist -- sichtbar am Desktop
   und mobil; leer = per [hidden] komplett ausgeblendet. */
.explorer-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.explorer-active-filters[hidden] {
    display: none;
}

.active-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent-soft) 100%);
    color: var(--accent-ink);
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.active-filter-pill:hover {
    border-color: var(--accent-dark);
}

/* Lange Chip-Beschriftungen (z. B. "Bereich: Eingliederungshilfe — Teilhabe
   bei Erkrankung und Behinderung") sollen nie zweizeilig umbrechen, sondern
   einzeilig mit "…" auslaufen -- min-width:0 ist nötig, da Flex-Items sonst
   standardmäßig nicht unter ihre Inhaltsbreite schrumpfen (text-overflow
   hätte sonst keine Wirkung). */
.active-filter-pill span {
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.active-filter-pill__x {
    flex: none;
    width: 12px;
    height: 12px;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.active-filter-pill:hover .active-filter-pill__x {
    opacity: 1;
}

.explorer-mobile-panel-close {
    display: none;
}

/* Filter-Überschrift + Zurücksetzen, für alle Explorer-Varianten.
   Die "Filtern nach:"-Überschrift ist entfernt -- die Zeile trägt nur noch
   den Zurücksetzen-Button, der deshalb rechtsbündig steht. */
.explorer-filter-heading-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 6px;
}

.explorer-filter-heading {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-strong);
    margin: 0;
}

.explorer-mobile-apply-btn {
    display: none;
}

/* Top-Padding für Accordion-Explorer-Sections */
.accordion-explorer--qualifizierungen.section,
.accordion-explorer--arbeitsfelder.section {
    padding-top: 90px;
}

.accordion-explorer--glossar.section,
.accordion-explorer--faq.section {
    padding-top: 40px;
}

/* Padding-bottom per variant */
.accordion-explorer--arbeitsfelder.section {
    padding-bottom: 120px;
}

.accordion-explorer--qualifizierungen.section {
    padding-bottom: 0;
}

/* Accordion group headings */
.accordion-group-heading {
    padding: 28px 0 16px;
}

.accordion-group-heading--first {
    padding-top: 0;
}

.accordion-group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--muted-strong);
}

.accordion-group-title__label {
    white-space: nowrap;
}

.accordion-group-title__line {
    flex: 1;
    height: 1px;
    background: var(--surface-warm);
}

/* Accordion explorer runtime fixes */
.accordion-explorer [data-accordion] {
    min-height: 0;
}

.accordion-explorer .search-field {
    margin-bottom: 18px;
}

.accordion-explorer .quick-filters {
    margin-bottom: 18px;
}

.accordion-explorer .pill-row[data-glossar-pills] {
    margin-bottom: 22px;
}

.accordion-explorer--glossar .search-field {
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .accordion-explorer--arbeitsfelder.section,
    .accordion-explorer--qualifizierungen.section {
        padding-top: 40px;
    }

    .accordion-explorer--arbeitsfelder.section {
        padding-bottom: 40px;
    }

    .accordion-explorer--qualifizierungen.section {
        padding-bottom: 0;
    }

    .accordion-explorer--qualifizierungen
        .explorer-filter-group
        .quick-filters {
        gap: 8px;
    }

    .accordion-explorer--qualifizierungen .explorer-filter-group .pill,
    .accordion-explorer--qualifizierungen .explorer-filter-group .tab {
        min-width: 0;
        white-space: normal;
        text-align: center;
    }

    .accordion-explorer--qualifizierungen .accordion.list .accordion-item {
        align-items: flex-start;
        gap: 12px;
    }

    .accordion-explorer--qualifizierungen .accordion-item-main {
        align-items: flex-start;
    }

    .accordion-explorer--qualifizierungen .accordion-toggle {
        margin-top: 2px;
    }

    .explorer-controls-card {
        padding-bottom: 10px;
    }
}

.accordion-explorer--qualifizierungen .explorer-topbar,
.accordion-explorer--arbeitsfelder .explorer-topbar,
.accordion-explorer--glossar .explorer-topbar,
.accordion-explorer--faq .explorer-topbar {
    grid-template-columns: 1fr;
}

.accordion-explorer--arbeitsfelder .explorer-filter-stack {
    margin-top: 20px;
}

/* Sidebar scrollbar -- erst eigenes Scrollen, sobald die Sidebar per
   position:sticky wirklich an der Kopfzeile eingerastet ist (.is-pinned,
   von observeSidebarPin() in explorer/index.js gesetzt). Vorher (Seite ganz
   oben, Sidebar noch im normalen Textfluss und nur teilweise sichtbar) hätte
   max-height/overflow-y:auto sonst Mausrad-Events über ihr sofort ans eigene
   Scrollen der Filterliste umgeleitet, statt die Seite normal weiterscrollen
   zu lassen. overflow-y:scroll + ::-webkit-scrollbar-Breite: klassische
   Leiste mit fester Breite (scrollbar-width/scrollbar-color würden in
   Chromium Overlay-Leisten erzeugen, die beim Hover dicker werden).
   padding-right trennt sie vom Filtertext. */
.accordion-explorer--qualifizierungen .explorer-sidebar.is-pinned,
.accordion-explorer--arbeitsfelder .explorer-sidebar.is-pinned {
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding-right: 20px;
}

/* FAQ-Sidebar: hier overflow-y:auto statt scroll, damit die Leiste nur
   erscheint, wenn das Inhaltsverzeichnis tatsächlich länger ist als der
   sichtbare Bereich. Die Begründung für scroll oben gilt für die per
   .is-pinned umschaltenden Sidebars — diese hier klebt von Anfang an, es
   gibt also keinen Zustand, in dem Mausrad-Events falsch abgefangen
   würden. scrollbar-gutter:stable hält den Platz trotzdem frei, damit
   beim Erscheinen der Leiste nichts umbricht. */
.accordion-explorer--faq .explorer-sidebar {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding-right: 20px;
}

@supports (-moz-appearance: none) {
    .accordion-explorer--qualifizierungen .explorer-sidebar.is-pinned,
    .accordion-explorer--arbeitsfelder .explorer-sidebar.is-pinned,
    .accordion-explorer--faq .explorer-sidebar {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }
}

.accordion-explorer--qualifizierungen .explorer-sidebar.is-pinned {
    max-height: calc(100vh - var(--site-header-height, 64px) - 32px);
}

/* ---- Accordion list styles (from ui-primitives runtime) ---- */

.accordion {
    background: var(--surface);
    border-radius: 0;
    border: 1px solid var(--border);
    overflow: hidden;
}

.accordion.list {
    background: transparent;
    border: none;
    display: block;
    gap: 0;
    /* Die Listen-Variante hat keinen äußeren Rahmen mehr (border: none), das
       overflow: hidden der Basis-.accordion diente nur dessen Rundungen —
       hier stattdessen sichtbar lassen, sonst bricht position: sticky im
       q-group-sticky-header (siehe unten). */
    overflow: visible;
}

.accordion.list .accordion-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition:
        border-radius 0.18s ease,
        margin 0.18s ease;
    scroll-margin-top: calc(var(--site-header-height, 64px) + 16px);
}

.accordion.list .accordion-item:last-of-type {
    border-bottom: 1px solid var(--border);
}

.accordion.list .accordion-item::before,
.accordion.list .accordion-item::after {
    content: none;
}

.accordion-item-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.accordion-item-main > span {
    text-align: left;
}

.accordion-item-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.accordion-leading-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-strong);
    flex: 0 0 auto;
}

.accordion-leading-icon .feather-icon {
    width: 20px;
    height: 20px;
}

.accordion-toggle {
    margin-left: auto;
    /* Dunkler als --muted und mit kräftigerem Strich: die Chevrons waren als
       Auf-/Zuklapp-Hinweis zu unauffällig (Rückmeldung 2026-07-29). */
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.2s ease;
    flex: 0 0 auto;
    stroke-width: 3;
}

/* .feather-icon setzt stroke-width="2" direkt am SVG (atoms.css); das ist
   spezifischer als die geerbte Deklaration oben und muss hier überschrieben
   werden, damit der dickere Strich tatsächlich sichtbar wird. */
.accordion-toggle .feather-icon {
    stroke-width: 3;
}

/* Merkliste-Schalter in der Akkordeon-Kopfzeile. Sitzt im <button
   class="accordion-item">, wird in explorer/index.js capture-seitig
   abgefangen (löst also nicht das Auf-/Zuklappen aus). */
.accordion-bookmark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 8px;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
}

.accordion-bookmark:hover,
.accordion-bookmark:focus-visible {
    color: var(--accent-ink);
    background: var(--accent-wash);
    outline: none;
}

.accordion-bookmark .feather-icon {
    width: 18px;
    height: 18px;
}

.accordion-bookmark.is-active {
    color: var(--accent-ink);
}

/* Aktiver Zustand: das Kontur-Icon wird gefüllt (CSS schlägt das
   fill="none"-Präsentationsattribut des SVGs). */
.accordion-bookmark.is-active .feather-icon {
    fill: var(--accent);
}

.accordion.list .accordion-item[aria-expanded="true"] .accordion-toggle {
    transform: rotate(180deg);
    color: var(--accent-ink);
}

.accordion.list .accordion-item[aria-expanded="true"] {
    margin-bottom: 0;
    border-radius: 0 12px 0 0;
    border-bottom-color: transparent;
    background: var(--paper);
    box-shadow: inset 3px 0 0 var(--accent);
}

.accordion.list .accordion-panel {
    display: none;
    margin: 0 0 20px;
    padding: 0 0 18px;
    background: transparent;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 12px 12px;
}

.accordion.list .accordion-panel.open {
    display: block;
    background: var(--paper);
    margin-top: -1px;
}

.accordion-label {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--accent-ink);
    display: block;
    margin-bottom: 4px;
}

.accordion-title {
    font-weight: var(--font-weight-semibold);
    color: var(--text-strong);
    font-size: var(--font-size-base);
    display: block;
    overflow-wrap: anywhere;
}

/* Suchtreffer-Hervorhebung (buildHighlightedSnippet(), siehe
   highlightQualText() in explorer/index.js) -- Matrix-Schnellsuche zeigt
   Treffer jetzt direkt in Titel/Ort UND Institution (.accordion-meta, z. B.
   Hochschulname) hervorgehoben, statt nur in einem separaten
   Vorschau-Dropdown. */
.accordion-title mark.autocomplete-match,
.accordion-meta mark.autocomplete-match {
    background: transparent;
    color: var(--accent-ink);
    font-weight: var(--font-weight-bold);
}

.accordion-meta {
    display: block;
    color: var(--muted-deep);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-compact);
}

.accordion-panel .highlight {
    border-left: 3px solid var(--accent);
    padding-left: 12px;
    margin: 10px 0;
}

/* Kein zusätzlicher Balken, wenn direkt danach schon eine Abschnitts-
   überschrift (z. B. "DEFINITION" im Glossar) folgt — sonst zwei
   Akzent-Hervorhebungen direkt hintereinander. */
.accordion-panel .highlight:has(+ .rich-content > .rich-section-title:first-child) {
    border-left: none;
    padding-left: 0;
}

.accordion.list .accordion-panel > :first-child {
    margin-top: 0;
}

.accordion[data-list="arbeitsfelder"] .accordion-panel .highlight,
.accordion[data-list="qualifizierungen"] .accordion-panel .highlight {
    border-left-width: 4px;
    font-weight: var(--font-weight-semibold);
    color: var(--accent-ink);
}

.rich-content {
    display: grid;
    gap: 12px;
    color: var(--text-strong);
    line-height: var(--line-height-reading);
}

.rich-section-title,
.rich-subtitle {
    margin: 4px 0 0;
    line-height: var(--line-height-compact);
}

.rich-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--accent-ink);
}

.rich-subtitle {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text);
}

.rich-content p {
    margin: 0;
}

.rich-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 6px;
    list-style: disc;
}

.rich-list li {
    list-style: disc;
}

.rich-link {
    color: var(--accent-ink);
    word-break: break-word;
}

/* ---- Shared primitives ---- */

.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---- Explorer filter / controls card (from ui-primitives runtime) ---- */

.explorer-controls-card {
    padding: 0 0 12px;
    margin-bottom: 12px;
}

/* Filterbereich auf Arbeitsfelder- und Matrix-Seite: einheitlich kompakte
   Typografie — 0.75rem, Font-Weight 500, keine Bold-Auszeichnung. Die
   Basisgröße/-stärke erben alle Nachfahren; Elemente mit eigener
   Schriftgröße oder -stärke werden direkt darunter gezielt überschrieben. */
:is(.accordion-explorer--arbeitsfelder, .accordion-explorer--qualifizierungen)
    .explorer-controls-card {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Einheitliche 0.75rem/500 für alle Texte im Filterbereich — überschreibt
   die Element-Stile, die eigene (größere) Schriftgrößen oder Bold-Gewichte
   setzen (z. B. .explorer-select, .filter-show-more, Pills/Tabs,
   Suchergebnis-Zähler). Das .pill-label fehlt hier bewusst — es hat eine
   eigene Regel (0.75rem, Font-Weight 500, --dark, margin-top 1rem).
   Ebenso fehlen .af-zugang-check/-sub: sie bleiben bei Font-Weight 400
   (Basis-Regel, wird bewusst nicht überschrieben); die Checkbox-Größe
   regelt eine eigene Regel weiter unten. Das Haupt-Suchfeld
   (.search-field input) fehlt ebenfalls: mobil greift dort die 16px-Regel
   gegen den iOS-Zoom (siehe Mobile-Sektion unten), 0.75rem gilt daher nur
   am Desktop (eigene Regel weiter unten). */
:is(.accordion-explorer--arbeitsfelder, .accordion-explorer--qualifizierungen)
    .explorer-controls-card
    :is(
        .explorer-filter-heading,
        .explorer-zugang-sublabel,
        .explorer-results,
        .explorer-results strong,
        .explorer-reset,
        .filter-search-field input,
        .explorer-select,
        .explorer-select-wrap--floating .floating-label,
        .filter-show-more,
        .explorer-filter-group .pill,
        .explorer-filter-group .tab,
        .glossar-suggestions .pill,
        .af-filter-count
    ) {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Haupt-Suchfeld im Filterbereich: 0.75rem/500 nur am Desktop — mobil
   bleibt die 16px-Regel (iOS-Zoom-Schutz, siehe Mobile-Sektion unten)
   wirksam. */
@media (min-width: 961px) {
    :is(.accordion-explorer--arbeitsfelder, .accordion-explorer--qualifizierungen)
        .explorer-controls-card
        .search-field
        input {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
    }
}

.explorer-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    gap: 12px;
    align-items: start;
}

.explorer-search {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.explorer-toolbar {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    margin: 0;
}

.explorer-sort {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-self: start;
}

.explorer-select-wrap {
    position: relative;
    width: 100%;
}

.explorer-sort-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-strong);
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.explorer-sort-icon .feather-icon {
    width: 16px;
    height: 16px;
}

.explorer-select {
    appearance: none;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border-warm);
    border-radius: 14px;
    background: var(--surface);
    padding: 11px 14px 11px 38px;
    font: inherit;
    font-size: var(--font-size-md);
    color: var(--text-strong);
    box-shadow: none;
}

/* Schulabschluss-Icon/-Text an die Ikon-Größe und den Text-Einzug des
   "Arbeitsfeld"-Suchfelds (.search-field: 18px-Icon, 14px Einzug, 10px
   Abstand zum Text) angleichen — nur hier, nicht global (betrifft sonst
   auch das Sortierung-Dropdown, das eine eigene Inline-Größe von 16px hat). */
.explorer-zugang-field .explorer-sort-icon {
    left: 14px;
    width: 18px;
    height: 18px;
}

.explorer-zugang-field .explorer-sort-icon .feather-icon {
    width: 18px;
    height: 18px;
}

.explorer-zugang-field .explorer-select {
    padding-left: 42px;
}

/* Select mit zusätzlichem Dropdown-Pfeil rechts (z. B. Schulabschluss) */
.explorer-select--arrow {
    padding-right: 36px;
}

/* Platzhalter-Optik wie beim "Ort"-Suchfeld (dessen Placeholder-Text
   nativ hellgrau erscheint): solange kein echter Wert gewählt ist, zeigt
   das Select seinen ersten Eintrag ("Schulabschluss wählen" o. ä.) ebenso
   gedämpft statt in der normalen Auswahl-Textfarbe (siehe is-placeholder-
   Toggle in bindFilterSelects(), explorer/index.js). */
.explorer-select.is-placeholder {
    color: var(--faint);
}

/* Floating Label für echte <select>-Filter (dropdown_filters/
   data-filter-select-name): analog zum Suggest-Input-Muster oben
   (.search-field--floating) -- native Selects haben aber keinen echten
   Platzhalter, deshalb hier über die bereits vorhandene is-placeholder-
   Klasse erkannt (kein Wert gewählt = "Platzhalter"-Zustand = Label unten,
   sonst oben im Feldrand). */
.explorer-select-wrap--floating .floating-label {
    position: absolute;
    left: 38px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-md);
    color: var(--faint);
    pointer-events: none;
    transition:
        top 0.15s ease,
        font-size 0.15s ease,
        color 0.15s ease,
        background 0.15s ease;
    background: transparent;
    padding: 0 4px;
    margin: 0 -4px;
    border-radius: 4px;
    white-space: nowrap;
}

.explorer-select-wrap--floating:has(.explorer-select:focus) .floating-label,
.explorer-select-wrap--floating:has(.explorer-select:not(.is-placeholder)) .floating-label {
    top: 0;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--accent-ink);
    background: var(--surface);
}

.explorer-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-strong);
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.explorer-select-arrow .feather-icon {
    width: 16px;
    height: 16px;
}

/* Schulabschluss-Select im Qualifizierungs-Wizard (Schritt 1): statt des
   generischen Rundum-Fokusrings (siehe :focus-visible, base.css) nur eine
   Unterstreichung in Akzentfarbe — die unteren Ecken werden dafür eckig. */
.wizard-step[data-wizard-step="1"] .explorer-select:focus-visible {
    outline: none;
    border-radius: 14px 14px 0 0;
    border-bottom: 2px solid var(--accent);
}

/* "Zugangsvoraussetzungen"-Karte: Schulabschluss-Dropdown und die
   "Ich habe bereits …"-Checkboxen als eine gemeinsame Einheit unter
   einer Überschrift (siehe $zugangClusterHtml in app/view/helpers.php). */
.explorer-zugang-cluster {
    gap: 32px;
}

/* Arbeitsfeld-/Qualifizierungs-Picker (Quereinstiegsguide): natives
   GET-Formular außerhalb der Explorer-Sidebar — nutzt dieselben
   Select-/Checkbox-Bausteine, braucht aber eigenes Layout. */
.picker-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 420px;
    margin-top: 16px;
}

.picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Modal + Wizard (quereinstieg.php Schnellauswahl: Karten "Arbeitsfeld
   finden" / "Qualifizierung finden" öffnen ein Modal statt eines
   Inline-Accordions, siehe components/modal-wizard.js). */
body.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal[hidden] {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(38, 32, 24, 0.55);
}

.modal-dialog {
    position: relative;
    background: var(--surface);
    border-radius: 16px;
    padding: 32px;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
}

@media (min-width: 720px) {
    .modal-dialog {
        max-width: 700px;
    }
}

/* Arbeitsfeld-Modal: nur die Berufsbezeichnungs-Minicards sollen intern
   scrollen, nicht der ganze Dialog (Titel/Text/Buttons bleiben fix). */
.modal-dialog--fixed-frame {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-dialog--fixed-frame .picker-form--modal {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.modal-dialog--fixed-frame .mini-card-grid {
    flex: 1;
    min-height: 0;
    max-height: none;
    /* Ohne "contain" scrollt der Mausrad/Trackpad-Scroll, sobald das Grid
       sein eigenes Ende erreicht, in den äußeren .modal-dialog--fixed-frame
       weiter -- der hat zwar "overflow: hidden", lässt sich aber (Chrome/
       Firefox-Eigenheit) trotzdem per Wheel-Event scrollen. Titel/Suchfeld/
       Buttons rutschen dadurch aus dem sichtbaren Bereich, bis nur noch
       ein leerer Dialog übrig bleibt. */
    overscroll-behavior: contain;
}

/* Qualifizierungs-Wizard: gleiches Prinzip wie beim Arbeitsfeld-Modal, aber
   pro Schritt — nur der jeweils aktive Schritt (bzw. dessen scrollbarer
   Inhaltsbereich, z. B. die Interessen-Minicards in Schritt 3) wächst,
   Kopf/Fußzeile (Titel, Hinweistext, Weiter/Zurück-Buttons) bleiben fix. */
.modal-dialog--fixed-frame .wizard {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.modal-dialog--fixed-frame .wizard-progress {
    flex-shrink: 0;
}

.modal-dialog--fixed-frame .wizard-step:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.modal-dialog--fixed-frame .wizard-step-title,
.modal-dialog--fixed-frame .wizard-step-text,
.modal-dialog--fixed-frame .wizard-actions {
    flex-shrink: 0;
}

/* Header-Zeile: Zurück-Pfeil (falls vorhanden) | Titel | Schließen-X, alle
   vertikal zentriert über align-items statt einzeln gesetzter top-Werte. */
.modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-close,
.modal-back {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}

.modal-close:hover,
.modal-back:hover {
    background: var(--paper-soft);
    color: var(--text);
}

.modal-back[hidden] {
    display: none;
}

.modal-title {
    flex: 1;
    font-size: var(--font-size-xl);
}

.modal-lead {
    color: var(--muted);
    margin-top: 10px;
    font-size: var(--font-size-md);
    line-height: var(--line-height-reading);
}

/* Video-Modal (render_video_modal_php + bindVideoCards()): breiter als die
   ueblichen Dialoge, damit der Player deutlich groesser ist als die Karte,
   von der aus er geoeffnet wurde. 1000px entspricht bei 16:9 einer Hoehe von
   563px — zusammen mit Kopfzeile und Text passt das auf einen 720p-Screen
   noch in die 85vh von .modal-dialog. */
.video-modal .modal-dialog--video {
    max-width: 1000px;
}

@media (min-width: 720px) {
    .video-modal .modal-dialog--video {
        max-width: 1000px;
    }
}

.video-modal__player {
    margin-top: 20px;
}

/* Dieselbe Folge als Podcast, direkt unter dem Player. Nebeneinander als
   Pillen statt untereinander wie die weiterfuehrenden Links: es sind kurze
   Plattformnamen, eine eigene Zeile je Name waere verschenkter Platz an der
   prominentesten Stelle des Modals. */
.video-modal__podcast {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.video-modal__podcast-intro {
    color: var(--text-strong);
    font-weight: var(--font-weight-semibold);
}

.video-modal__podcast-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--border-warm);
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--accent-ink);
    text-decoration: none;
    white-space: nowrap;
}

/* Das Logo behaelt seine Markenfarbe (fill steckt am <svg>), auch wenn die
   Pille beim Hover die Farbe wechselt. */
.video-modal__podcast-mark {
    flex: none;
}

.video-modal__podcast-link:hover,
.video-modal__podcast-link:focus-visible {
    border-color: var(--accent);
    background: var(--accent-faint);
}

/* Gleiche Rollenverteilung wie auf der Karte: Name klein und zurueckgenommen
   ueber dem Begleittext, der Titel steht schon in der .modal-header-Zeile. */
.video-modal__name {
    display: block;
    margin-top: 16px;
    font-size: var(--font-size-xs);
    color: var(--muted);
}

/* Bewusst ohne das line-clamp der Karte (.story-card > p): der vollstaendige
   Text zu sehen ist der halbe Grund fuer das Modal. */
/* Kopfzeile des Beitrags ueber dem Begleittext — Gegenstueck zur
   .story-card__headline auf der Karte. */
.video-modal__headline {
    margin-top: 14px;
    color: var(--text-strong);
    font-weight: var(--font-weight-semibold);
}

.video-modal__text {
    margin-top: 6px;
}

/* "Themen der Folge": Zwischenueberschrift plus Stichpunktliste unter dem
   Begleittext. */
.video-modal__topics {
    margin-top: 16px;
}

.video-modal__topics-intro,
.video-modal__links-intro {
    display: block;
    margin-bottom: 4px;
    color: var(--text-strong);
    font-weight: var(--font-weight-semibold);
}

.video-modal__topics ul {
    margin: 0;
    padding-left: 1.25em;
    color: var(--muted);
}

.video-modal__topics li {
    margin-top: 2px;
}

/* Weiterfuehrende Links unter dem Begleittext. Nicht "muted" wie der Text
   darueber, damit die Links als anklickbar erkennbar bleiben. */
.video-modal__links {
    margin-top: 12px;
}

.video-modal__links a {
    display: block;
    margin-top: 4px;
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Verweis auf einen anderen Teil desselben Gespraechs. Sieht aus wie die
   Links darueber, ist aber ein <button> (er wechselt nur den Modal-Inhalt) —
   deshalb die Button-Voreinstellungen zuruecksetzen. */
.video-modal__related {
    margin-top: 12px;
}

.video-modal__related-intro {
    display: block;
    margin-bottom: 4px;
    color: var(--text-strong);
    font-weight: var(--font-weight-semibold);
}

.video-modal__related-link {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.picker-form--modal {
    max-width: none;
    margin-top: 20px;
}

.picker-form--modal .picker-actions {
    align-items: stretch;
}

.picker-form--modal .picker-actions .btn {
    flex: 1;
    min-width: 200px;
}

.mini-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 2px;
}

.mini-card-grid--compact {
    max-height: none;
}

/* Schnellsuche im Träger-Wizard (bindMiniCardSearch(), modal-wizard.js)
   blendet einzelne Karten per [hidden] aus -- ohne diese Regel würde
   ".mini-card { display: flex }" (gleiche Spezifität, später im Stylesheet)
   das Standard-[hidden]-Verhalten überschreiben, siehe dieselbe Falle bei
   .wizard-qual-subgroup weiter oben in atoms.css. */
.mini-card[hidden] {
    display: none;
}

.mini-card {
    /* Ohne "position: relative" positioniert sich ".mini-card input"
       (position: absolute, siehe unten) relativ zum nächsten positionierten
       Vorfahren -- das ist .modal-dialog (position: relative), nicht die
       eigene Karte. Beim Fokussieren des (unsichtbaren) Inputs scrollt der
       Browser dann den ganzen .modal-dialog wild an dessen berechnete
       Position, statt gar nicht zu scrollen -- sichtbar als Sprung/leeres
       Modal beim Klick auf eine Karte in einer langen, intern scrollenden
       Mini-Card-Grid (z. B. Träger-Wizard-Schritt "Arbeitsfeld"). */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 14px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-compact);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.mini-card:hover {
    border-color: var(--accent);
}

.mini-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mini-card.selected {
    border-color: var(--accent);
    background: var(--accent-wash);
}

.mini-card-emoji {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
    /* Überschreibt die globale .feather-icon-Größe (width/height: 100%),
       die sonst die Wizard-Minicard-Icons auf volle Kartengröße aufbläht. */
    width: 28px;
    height: 28px;
}

.mini-card-label {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
}

.wizard-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    font-size: var(--font-size-sm);
    color: var(--accent-ink);
    font-weight: var(--font-weight-semibold);
}

.wizard-progress-divider {
    flex: 1;
    height: 2px;
    background: var(--accent);
}

.wizard-dots {
    display: flex;
    gap: 6px;
}

.wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--border);
}

.wizard-dot.active {
    background: var(--accent);
}

.wizard-step-title {
    font-size: var(--font-size-lg);
    margin-top: 20px;
}

.wizard-step-text {
    color: var(--muted);
    font-size: var(--font-size-sm);
    margin-top: 6px;
    margin-bottom: 16px;
}

.wizard-step-hint {
    color: var(--muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    margin-top: 14px;
}

.wizard-step-hint a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.wizard-actions-main {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Mobil: der oben fixierte Kopfbereich (Titel/Hinweistext) nahm auf kleinen
   Screens zu viel Platz weg, wodurch der scrollbare Bereich (Mini-Card-Grid
   bzw. aktiver Wizard-Schritt) zu klein wurde. Betrifft sowohl das
   Arbeitsfeld-Einzelmodal (render_arbeitsfeld_modal_php()) als auch den
   mehrstufigen Wizard (render_qualifizierung_wizard_modal_php()/
   render_qualifizierung_wizard_traeger_modal_php()) -- beide teilen sich
   .modal-dialog--fixed-frame, eine gemeinsame Anpassung reicht für beide.
   Prinzip: Dialog wird vollflächig und scrollt komplett normal (Titel/Text
   sind jetzt Teil des scrollenden Inhalts statt fixiert) -- nur die Buttons
   (.wizard-actions/.picker-actions) bleiben per position:sticky unten fix,
   Schließen (und beim Wizard: Zurück) bleiben als eigene fixe Icons erreichbar,
   unabhängig vom mitscrollenden Titel.
   WICHTIG: dieser Block muss NACH der .modal-close/.modal-back-Basisregel
   (oben, "all: unset") im Stylesheet stehen -- sonst gewinnt bei gleicher
   Spezifität die spätere "all: unset"-Regel und setzt position:fixed wieder
   auf static zurück, unabhängig von der Media Query. */
@media (max-width: 640px) {
    .modal-dialog {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .modal-dialog--fixed-frame {
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Platz für die jetzt fixe, untereinander gestapelte Button-Leiste
           am unteren Bildschirmrand (siehe .wizard-actions/.picker-actions
           weiter unten) -- sonst würde der letzte Content dahinter
           verschwinden. Grob an zwei gestapelte kompakte Buttons + Leiste-
           Padding + Sicherheitsabstand angepasst. */
        padding-bottom: 165px;
    }

    .modal-dialog--fixed-frame .picker-form--modal,
    .modal-dialog--fixed-frame .wizard,
    .modal-dialog--fixed-frame .wizard-step:not([hidden]) {
        display: block;
        flex: none;
        min-height: 0;
    }

    .modal-dialog--fixed-frame .mini-card-grid {
        flex: none;
        max-height: none;
        overflow-y: visible;
    }

    .wizard-step-title {
        font-size: var(--font-size-md);
    }

    .wizard-step-text {
        font-size: var(--font-size-xs);
    }

    /* Eigene, fixe Icons statt im (jetzt scrollenden) .modal-header --
       [hidden] auf .modal-back (Schritt 1) bleibt unverändert wirksam. */
    .modal-close,
    .modal-back {
        position: fixed;
        top: 14px;
        z-index: 5;
        width: 36px;
        height: 36px;
        background: var(--surface);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }

    .modal-close {
        right: 14px;
    }

    .modal-back {
        left: 14px;
    }

    /* Platz für das jetzt überlagernde, fixe Schließen-Icon reservieren,
       damit der (mitscrollende) Titel nicht darunter verschwindet. Beim
       Wizard zusätzlich links, für das Zurück-Icon -- unabhängig davon, ob
       es im aktuellen Schritt gerade sichtbar ist (sonst würde der Titel
       beim Schrittwechsel horizontal springen). */
    .modal-header {
        padding-right: 44px;
    }

    .modal-dialog--wizard .modal-header {
        padding-left: 44px;
    }

    /* Buttons IMMER am unteren Bildschirmrand, unabhängig von der
       Inhaltslänge -- deshalb position:fixed statt sticky: ein sticky
       Element steht bei kurzem Inhalt (der die Karte/den Schritt nicht
       füllt) nur direkt hinter dem Content statt am Bildschirmrand, mit
       sichtbarem Rest-Abstand darunter. Als eigenständige, vom Scroll-
       Container unabhängige Overlay-Leiste sitzt sie stattdessen immer
       lückenlos ganz unten (Scroll-Container bekommt dafür oben
       .modal-dialog--fixed-frame's padding-bottom als Ausgleich). Kompakter
       als am Desktop (kleineres Padding/Schrift, kein erzwungener
       Mindestbreite) und untereinander statt nebeneinander gestapelt --
       leichter zu treffen, kein Umbruch bei langen Button-Texten. */
    .wizard-actions,
    .picker-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        margin: 0;
        align-items: stretch;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
        box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
    }

    .wizard-actions-main,
    .picker-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .wizard-actions .btn,
    .picker-actions .btn {
        padding: 10px 16px;
        font-size: var(--font-size-sm);
        min-width: 0;
        width: 100%;
        flex: none;
    }
}

/* Zusätzlicher Abstand vor der "Typ"-Pillengruppe, über den normalen
   Grid-Row-Gap (.explorer-filter-stack) hinaus — trennt sie sichtbar von
   der "Zugangsvoraussetzungen"-Karte darüber. */
.explorer-filter-group:has([data-filter-name="category"]) {
    margin-top: 14px;
}

.explorer-zugang-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.explorer-zugang-sublabel {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--muted);
}

.explorer-controls-card .search-field {
    min-height: 48px;
    border-radius: 14px;
    padding: 12px 14px;
    border-color: var(--border-warm);
    box-shadow: none;
}

.explorer-filter-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 18px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* "Erweiterte Filter": auf der Matrix-Seite eingeklappter Bereich unter
   "Ort" und "Typ". Der Bereich ist ein einzelnes, über die volle Breite
   laufendes Grid-Item; die enthaltenen Filter liegen in einem eigenen Grid
   mit derselben Spaltenlogik wie .explorer-filter-stack. */
.explorer-advanced-filters {
    grid-column: 1 / -1;
}

/* Der Toggle sieht aus wie die übrigen Filtergruppen-Labels
   (.explorer-filter-group-header .pill-label): Text + Trennlinie, hier zusätzlich
   ein Chevron am rechten Ende statt eines Buttons im Pillen-Stil. */
.explorer-advanced-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    font-weight: var(--font-weight-medium);
    color: var(--dark);
    text-align: left;
    cursor: pointer;
}

.explorer-advanced-toggle > span {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.explorer-advanced-toggle > span::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 10px;
    background: var(--border);
}

.explorer-advanced-toggle svg {
    display: block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    color: var(--muted-strong);
    transition: transform 0.18s ease;
}

.explorer-advanced-toggle:hover {
    color: var(--accent-ink);
}

.explorer-advanced-toggle:hover svg {
    color: var(--accent-ink);
}

.explorer-advanced-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.explorer-advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 18px;
    margin-top: 10px;
}

/* Wohnort-Suche (Matrix-Seite): Eingabefeld + Umkreis-Regler statt der
   früheren "Ort"-Checkboxliste. Aufbau analog zum "Filter finden"-Feld
   (.filter-search-field), plus Slider darunter. */
.location-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.location-search-field .location-search-icon {
    position: absolute;
    left: 10px;
    display: inline-flex;
    align-items: center;
    color: var(--muted-strong);
    pointer-events: none;
}

.location-search-field .location-search-icon svg {
    width: 14px;
    height: 14px;
}

.location-search-field input {
    width: 100%;
    min-height: 40px;
    padding: 8px 32px 8px 32px;
    border: 1px solid var(--border-warm);
    border-radius: 10px;
    background: var(--surface);
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--text);
}

.location-search-field input::placeholder {
    color: var(--faint);
}

.location-search-field input:focus-visible {
    outline: none;
    border-color: var(--accent);
    background: var(--accent-wash);
}

.location-search-clear {
    position: absolute;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--muted-strong);
    cursor: pointer;
}

.location-search-clear:hover {
    color: var(--accent-ink);
    background: var(--paper-soft);
}

.location-search-clear svg {
    width: 12px;
    height: 12px;
}

/* Autocomplete-Dropdown der Ortssuche. */
.location-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border-warm);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.location-suggest[hidden] {
    display: none;
}

.location-suggest-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.location-suggest-option:hover,
.location-suggest-option.is-active {
    background: var(--accent-wash);
    color: var(--accent-ink);
}

.location-radius {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

/* Umkreis-Kopf, Kurve und Regler nur zeigen, sobald ein Wohnort gewählt ist.
   Der Online-Schalter bleibt unabhängig davon sichtbar. */
.location-radius-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.location-radius-control[hidden] {
    display: none;
}

.location-radius-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--font-size-xs);
}

.location-radius-label {
    color: var(--muted-strong);
}

.location-radius-value {
    color: var(--dark);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

/* Minimalistische Ergebnis-Kurve über dem Umkreis-Regler (nur Linie +
   Flächen-Gradient). */
.location-radius-graph {
    height: 30px;
    margin-top: 2px;
}

.location-radius-graph[hidden] {
    display: none;
}

.location-radius-graph svg {
    display: block;
    width: 100%;
    height: 100%;
}

.location-radius input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.location-radius input[type="range"]:focus-visible {
    outline: none;
}

.location-radius input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: var(--border-warm-strong);
}

.location-radius input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--border-warm-strong);
}

.location-radius input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 4px rgba(246, 162, 28, 0.4);
}

.location-radius input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 4px rgba(246, 162, 28, 0.4);
}

/* Checkbox "Online-Angebote einbeziehen" unter dem Umkreis-Regler. Größe und
   Stil kommen von .af-zugang-check (identisch zu den übrigen Filter-Checkboxen,
   siehe .explorer-filter-group .af-zugang-check); hier nur der Abstand. */
.location-online-toggle {
    margin-top: 6px;
}

.location-status {
    margin: 2px 0 0;
    min-height: 0;
    font-size: var(--font-size-xs);
    color: var(--muted-strong);
}

.location-status:empty {
    display: none;
}

.location-status.is-error {
    color: #b3261e;
}

/* Während der Geokodierung das Eingabefeld leicht abdimmen. */
.explorer-location-filter.is-loading .location-search-field {
    opacity: 0.7;
}

/* Arbeitsfeld/Ort (filter_selects) enger zusammen als der normale
   Row-Gap des Stacks (10px) zu den nachfolgenden Filterblöcken -- ein
   gemeinsamer Wrapper ist ein einzelnes Grid-Item in .explorer-filter-stack,
   der eigene, kleinere Innenabstand gilt nur zwischen diesen beiden Gruppen. */
.explorer-checkbox-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Gemeinsame Checkbox-Filterliste (Arbeitsfelder- und Matrix-Seite, siehe
   render_accordion_explorer_php()/render_arbeitsfelder_content_php()):
   bewusst OHNE Scrollen — lange Listen kappen die ersten Optionen per
   "Mehr anzeigen"-Button (applyShowMoreCheckboxList() in shared/ui.js). */

/* Live-deaktivierte Filteroptionen (0 Treffer mit aktueller Auswahl):
   native disabled-Optik für die Custom-Checkboxen, konsistent mit
   .is-unavailable auf dem Label (siehe explorer/index.js /
   arbeitsfelder/index.js) — die Optik (Opacity) übernimmt .is-unavailable,
   hier nur Cursor + Klick-Blockierung. */
.af-zugang-check input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

/* Runde, dezent animierte Checkboxen für ALLE Filtergruppen (Arbeitsfelder-
   und Matrix-Seite). Abweichend vom globalen .af-zugang-check-Stil (quadra-
   tisch, für die Wizard-Modals): Kreis + sanfter Farbübergang + leichtes
   Aufpoppen des Häkchens beim Anhaken. Nur in der Explorer-Filter-Sidebar
   (.explorer-filter-group), die Wizard-Modals bleiben unverändert. */
.explorer-filter-group .af-zugang-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border-width: 1.5px;
    border-color: var(--border-warm-strong);
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}

.explorer-filter-group .af-zugang-check input[type="checkbox"]:hover:not(:disabled) {
    border-color: var(--accent);
}

.explorer-filter-group .af-zugang-check input[type="checkbox"]:active:not(:disabled) {
    transform: scale(0.88);
}

.explorer-filter-group .af-zugang-check input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 1px 4px rgba(246, 162, 28, 0.35);
}

.explorer-filter-group .af-zugang-check input[type="checkbox"]:checked::after {
    left: 4px;
    top: 2px;
    width: 8px;
    height: 4.5px;
    border-left: 2px solid var(--surface);
    border-bottom: 2px solid var(--surface);
    transform: rotate(-45deg);
    animation: filter-check-pop 0.22s ease-out;
}

@keyframes filter-check-pop {
    from {
        transform: rotate(-45deg) scale(0.3);
        opacity: 0;
    }
    to {
        transform: rotate(-45deg) scale(1);
        opacity: 1;
    }
}

/* Zähler "(N)" hinter den Filteroptionen (Arbeitsfelder- & Matrix-Seite):
   serverseitig berechnet bzw. aus der API übernommen (siehe
   qual-filter-service.php / arbeitsfelder-content.php). */
.af-zugang-check .filter-count {
    color: var(--muted-strong);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
    padding-left: 4px;
}

/* "Mehr anzeigen"/"Weniger anzeigen"-Button am Ende einer langen
   Checkbox-Filterliste — als dezent farbiger Text-Link ohne Unterstreichung
   mit Chevron (runter = aufklappen, rauf = einklappen), kein Scrollen. */
.filter-show-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    border: none;
    background: none;
    padding: 2px 0 0;
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--accent-ink);
    cursor: pointer;
}

.filter-show-more span {
    text-decoration: none;
}

.filter-show-more app-icon {
    display: inline-flex;
    color: currentColor;
}

.filter-show-more:hover {
    color: var(--accent-ink);
}

/* "Filter finden"-Suchfeld am Anfang der Filtergruppen (beide Seiten):
   kompaktes Eingabefeld, das die Checkbox-Optionen live nach Label filtert
   (siehe bindFilterSearch() in shared/ui.js). */
.filter-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-search-field .filter-search-icon {
    position: absolute;
    left: 10px;
    display: inline-flex;
    align-items: center;
    color: var(--muted-strong);
    pointer-events: none;
}

.filter-search-field input {
    width: 100%;
    min-height: 40px;
    padding: 8px 32px 8px 32px;
    border: 1px solid var(--border-warm);
    border-radius: 10px;
    background: var(--surface);
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--text);
}

.filter-search-field input::placeholder {
    color: var(--faint);
}

.filter-search-field input:focus-visible {
    outline: none;
    border-color: var(--accent);
    background: var(--accent-wash);
}

.filter-search-clear {
    position: absolute;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--muted-strong);
    cursor: pointer;
}

.filter-search-clear:hover {
    color: var(--accent-ink);
    background: var(--paper-soft);
}

.explorer-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Checkbox-Filteroptionen unter dem Gruppentitel (z. B. "Typ", "Ort",
   "Berufsbezeichnung") bündig am linken Rand des Gruppentitels, ohne
   Einrückung. Nur in der Explorer-Filter-Sidebar (.explorer-filter-
   group, beide Seiten); die Wizard-Modals nutzen .af-zugang-checks ohne
   diesen Wrapper und bleiben unverändert. */
.explorer-filter-group .af-zugang-checks {
    padding-left: 0;
}

.explorer-controls-card .pill-label {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    font-weight: var(--font-weight-medium);
    color: var(--dark);
    margin-top: 1rem;
}

/* Trennlinie rechts neben dem Label-Text, auf gleicher Höhe (gleiches
   Muster wie bei den Accordion-Gruppentiteln, .accordion-group-title__line). */
.explorer-controls-card .pill-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Filtergruppen-Überschrift: Label + Trennlinie + (optional) Mülleimer-Button
   am rechten Ende der Trennlinie. Der Wrapper übernimmt den Abstand nach oben,
   den sonst .pill-label trägt (siehe unten). */
.explorer-filter-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
    min-width: 0;
}

/* Höhere Spezifität als die von ui-primitives.js injizierte
   ".explorer-controls-card .pill-label"-Kopie (setzt margin-top:1rem): im
   Wrapper darf das Label selbst keinen zusätzlichen Abstand mehr erzeugen. */
.explorer-controls-card .explorer-filter-group-header .pill-label {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

/* Mülleimer-Button zum Zurücksetzen einer einzelnen Filtergruppe. */
.explorer-filter-group-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    padding: 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.explorer-filter-group-reset:hover {
    color: var(--accent-ink);
    background: var(--paper-soft);
}

.explorer-filter-group-reset[hidden] {
    display: none;
}

/* Checkbox-Optionen im Filterbereich: nur die Schriftgröße anpassen —
   Font-Weight 400 kommt aus der Basis-Regel (.af-zugang-check in
   atoms.css) und wird bewusst nicht überschrieben. */
:is(.accordion-explorer--arbeitsfelder, .accordion-explorer--qualifizierungen)
    .explorer-controls-card
    .af-zugang-check {
    font-size: var(--font-size-xs);
}

.explorer-filter-group .quick-filters,
.explorer-filter-group .tab-row,
.explorer-filter-group .pill-row {
    margin-bottom: 0;
}

.explorer-filter-group .pill,
.explorer-filter-group .tab {
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 12px;
    border-color: var(--border-warm);
    color: var(--muted);
    background: var(--surface);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
}

.explorer-filter-group .pill:hover,
.explorer-filter-group .tab:hover {
    border-color: var(--accent-tan);
    color: var(--text-strong);
}

.quick-filters .pill.is-active,
.pill.pill-toggle.is-active,
.pill-row .pill.is-active,
.quick-filters .pill.active,
.explorer-filter-group .tab.active {
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent-soft) 100%);
    border-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: inset 0 0 0 1px rgba(246, 162, 28, 0.08);
}

/* "Typ"-Pillen (Studium/Ausbildung/Weiterbildung/Fachkräfte) farblich an die
   Kartenmarker angleichen (siehe .matrix-map-legend-dot/
   QUAL_MAP_CATEGORY_COLORS in explorer/index.js) -- kleiner Punkt vor dem
   Label statt vollflächiger Farbe, damit der aktive Zustand (oben) weiter
   klar erkennbar bleibt. */
.accordion-explorer--qualifizierungen
    .quick-filters
    .pill[data-filter-name="category"][data-filter-value]:not(
        [data-filter-value=""]
    )::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.accordion-explorer--qualifizierungen
    .quick-filters
    .pill[data-filter-value="Studium"]::before {
    background: var(--accent);
}

.accordion-explorer--qualifizierungen
    .quick-filters
    .pill[data-filter-value="Ausbildung"]::before {
    background: var(--dark);
}

.accordion-explorer--qualifizierungen
    .quick-filters
    .pill[data-filter-value="Weiterbildung"]::before {
    background: #8c4a2b;
}

.accordion-explorer--qualifizierungen
    .quick-filters
    .pill[data-filter-value="Fachkräfte mit ausländ. Abschluss"]::before {
    background: #2f6f6a;
}

.explorer-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 6px;
}

/* Beim Suchen bleibt die bisherige Ergebnisliste stehen (non-blocking) und
   wird nur leicht abgedunkelt, solange der Request läuft — kein Ausleeren/
   Spinner mehr, der den Filter- und Ergebnisbereich blockiert (siehe
   load() in explorer/index.js). */
.accordion.list[aria-busy="true"] {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.explorer-results {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--muted-deep);
    font-size: var(--font-size-md);
}

.explorer-results strong {
    color: var(--dark-soft);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
}

.explorer-reset {
    border: 1px solid var(--border-warm);
    background: transparent;
    color: var(--muted);
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    white-space: nowrap;
}

.explorer-reset.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

/* Höhere Spezifität als die von ui-primitives.js injizierte Kopie
   (".explorer-reset.is-hidden" mit visibility:hidden): ohne "Filtern nach:"-
   Überschrift soll die leere Kopfzeile nicht weiter Platz belegen, also
   den Button im versteckten Zustand vollständig ausblenden statt nur
   unsichtbar zu machen. */
.explorer-controls-card .explorer-reset.is-hidden {
    display: none;
}

.explorer-reset:hover {
    border-color: var(--accent-tan);
    color: var(--text);
    background: var(--accent-wash);
}

.accordion-explorer--qualifizierungen .explorer-sidebar.is-pinned::-webkit-scrollbar,
.accordion-explorer--arbeitsfelder .explorer-sidebar.is-pinned::-webkit-scrollbar,
.accordion-explorer--faq .explorer-sidebar::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
    background: var(--scrollbar-track);
}

.accordion-explorer--qualifizierungen .explorer-sidebar.is-pinned::-webkit-scrollbar-track,
.accordion-explorer--arbeitsfelder .explorer-sidebar.is-pinned::-webkit-scrollbar-track,
.accordion-explorer--faq .explorer-sidebar::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

.accordion-explorer--qualifizierungen .explorer-sidebar.is-pinned::-webkit-scrollbar-thumb,
.accordion-explorer--arbeitsfelder .explorer-sidebar.is-pinned::-webkit-scrollbar-thumb,
.accordion-explorer--faq .explorer-sidebar::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

/* Sidebar-Höhe Arbeitsfelder -- Scrollbar-Verhalten steht oben bei der
   gemeinsamen .is-pinned-Regel (qualifizierungen + arbeitsfelder). */
.accordion-explorer--arbeitsfelder .explorer-sidebar.is-pinned {
    max-height: calc(100vh - var(--site-header-height, 64px) - 48px);
}

.af-filter-count {
    display: none;
    background: var(--accent);
    color: var(--dark);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-reading);
}

.af-filter-count.has-filters {
    display: inline-block;
}

/* ── Mobile Layout ── */
@media (max-width: 960px) {
    .accordion-explorer--arbeitsfelder .explorer-sidebar {
        max-height: none;
        overflow-y: visible;
    }

    .accordion-explorer--arbeitsfelder .explorer-controls-card {
        background: var(--surface);
        border-radius: 12px;
        padding: 14px 16px 16px;
        margin-bottom: 20px;
    }

    /* Suche + Filter-Icon in einer Zeile, wie bei der Matrix-Seite (siehe
       .accordion-explorer--qualifizierungen .explorer-topbar weiter unten
       -- eigene Regel statt gemeinsamer Selektor, da hier zusätzlich noch
       gap:10px statt 8px gilt). */
    .accordion-explorer--arbeitsfelder .explorer-topbar {
        display: flex;
        gap: 10px;
    }

    .accordion-explorer--arbeitsfelder .explorer-topbar .explorer-search {
        flex: 1;
        min-width: 0;
    }

    .accordion-explorer--arbeitsfelder .explorer-filter-stack {
        margin-top: 12px;
    }

    /* Merkmal-Pillen mobil untereinander (vertikal gestapelt) statt
       horizontal scrollend -- vorher per flex-wrap:nowrap/overflow-x:auto
       gebaut, alle Optionen sind so aber erst nach seitlichem Scrollen
       sichtbar/erkennbar gewesen. */
    .accordion-explorer--arbeitsfelder .quick-filters {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 960px) {
    .accordion-explorer--qualifizierungen .grid-2,
    .accordion-explorer--arbeitsfelder .grid-2,
    .accordion-explorer--glossar .grid-2,
    .accordion-explorer--faq .grid-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .accordion-explorer--qualifizierungen .explorer-sidebar,
    .accordion-explorer--arbeitsfelder .explorer-sidebar,
    .accordion-explorer--glossar .explorer-sidebar,
    .accordion-explorer--faq .explorer-sidebar {
        position: static;
    }

    .accordion-explorer--qualifizierungen .explorer-content {
        position: static;
    }

    /* Sorgt dafür, dass der Schließen-Button des Qualifikations-Sheets über der mobilen Kopfzeile liegt */
    .accordion-explorer--qualifizierungen
        .explorer-map[data-mobile-view-panel].is-view-active {
        z-index: 150;
    }

    /* Suche + Filter-Icon in einer Zeile */
    .accordion-explorer--qualifizierungen .explorer-topbar {
        display: flex;
        gap: 8px;
    }

    .accordion-explorer--qualifizierungen .explorer-search {
        flex: 1;
        min-width: 0;
    }

    .accordion-explorer--qualifizierungen .explorer-search .search-field {
        margin-bottom: 6px;
    }

    /* Im geöffneten (mobilen) Filter-Panel sind die aktiven Filter bereits
       als markierte Pillen/Optionen sichtbar — die Zusammenfassung darüber
       wäre redundant. Nur mobil relevant, da der Filter-Button/das Panel
       (explorer-mobile-filter-btn) am Desktop unsichtbar bleibt und
       q-filter-open dort nie gesetzt wird. */
    body.q-filter-open .explorer-active-filters {
        display: none !important;
    }

    /* Bug-Fix: Das Vorschlags-Dropdown der Suche (autocomplete-panel,
       frontend/js/components/autocomplete-panel.js) wird per
       document.body.appendChild() direkt an <body> gehängt (nicht ins
       Filter-Panel selbst) und traegt dort nur z-index: 120 -- lag damit
       hinter dem Vollbild-Filter-Panel-Overlay (z-index 1000/1001), wenn
       die Suche beim Öffnen des Panels dort hinein verschoben wird (siehe
       mobileSearchWrap in explorer/index.js bzw. arbeitsfelder/index.js).
       Der Basis-Wert bleibt bewusst unangetastet (autocomplete-panel läuft
       auch außerhalb dieses Kontexts, z. B. Header-Suche) -- body.q-filter-
       open ist schon vorhanden (s.o.) und wird gesetzt, sobald das Panel
       offen ist, daher hier als Hook wiederverwendet. 1010 statt z. B. 1002:
       bewusst über .q-qual-sheet/-close (1002/1003), falls beide Overlays
       gleichzeitig offen sein sollten, soll die aktiv fokussierte Eingabe
       nicht darunter verschwinden. */
    body.q-filter-open autocomplete-panel {
        z-index: 1010;
    }

    /* Verhindert, dass iOS beim Fokussieren des Ort-/Suchfelds automatisch
       hineinzoomt (passiert bei Eingabefeldern mit font-size < 16px). Gilt
       auch für die Arbeitsfelder-Seite (eigenes Rendering/JS, siehe
       render_arbeitsfelder_content_php() bzw. frontend/js/features/
       arbeitsfelder/index.js, aber dieselbe .explorer-controls-card-/
       .search-field-Struktur). */
    .accordion-explorer--qualifizierungen
        .explorer-controls-card
        .search-field
        input,
    .accordion-explorer--arbeitsfelder
        .explorer-controls-card
        .search-field
        input {
        font-size: var(--font-size-base);
    }

    .accordion-explorer--qualifizierungen .explorer-mobile-filter-btn,
    .accordion-explorer--arbeitsfelder .explorer-mobile-filter-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-shrink: 0;
        width: 46px;
        height: 46px;
        padding: 7px;
        border-radius: 10px;
        border: 1px solid var(--border-warm);
        background: var(--surface);
        color: var(--muted);
        cursor: pointer;
    }

    .accordion-explorer--qualifizierungen .explorer-mobile-filter-btn:hover,
    .accordion-explorer--arbeitsfelder .explorer-mobile-filter-btn:hover {
        background: var(--bg-soft);
    }

    /* Aktive-Filter-Zähler-Badge (.af-filter-count, siehe atoms weiter oben)
       oben rechts auf dem Filter-Icon-Button statt inline im Fließtext. */
    .accordion-explorer--arbeitsfelder .explorer-mobile-filter-btn .af-filter-count,
    .accordion-explorer--qualifizierungen .explorer-mobile-filter-btn .af-filter-count {
        position: absolute;
        top: -6px;
        right: -6px;
    }

    /* Liste/Karte Ansichts-Tabs: vollflächiger Tabreiter, kein Abstand nach außen */
    .accordion-explorer--qualifizierungen .explorer-viewtabs {
        gap: 0;
        margin: 12px calc(-1 * (50vw - 50%)) 0;
        width: 100vw;
        border-top: 1px solid var(--border-warm);
        border-bottom-width: 1px;
    }

    .accordion-explorer--qualifizierungen .explorer-viewtab {
        justify-content: center;
        flex: 1;
        min-height: 48px;
        padding: 10px 12px;
        border-bottom: none;
        border-radius: 0;
        background: var(--surface);
        font-size: var(--font-size-sm);
        white-space: nowrap;
        transition: all 0.15s ease;
    }

    .accordion-explorer--qualifizierungen .explorer-viewtab:not(:last-child) {
        border-right: 1px solid var(--border-warm);
    }

    .accordion-explorer--qualifizierungen .explorer-viewtab.is-active {
        background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent-soft) 100%);
        color: var(--accent-ink);
        box-shadow: inset 0 0 0 1px rgba(246, 162, 28, 0.08);
        border-bottom: none;
    }

    .accordion-explorer--qualifizierungen .explorer-viewtab svg {
        width: 7%;
        height: auto;
        flex-shrink: 0;
    }

    /* Filter bleibt Vollbild-Overlay -- gilt auch für die Arbeitsfelder-Seite
       (eigenes JS in frontend/js/features/arbeitsfelder/index.js, dieselbe
       Overlay-Mechanik/Klassen wie bei der Matrix-Seite). */
    .accordion-explorer--qualifizierungen .explorer-mobile-panel-close,
    .accordion-explorer--arbeitsfelder .explorer-mobile-panel-close {
        display: none;
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 1001;
        width: 40px;
        height: 40px;
        padding: 7px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: none;
        background: var(--surface);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        color: var(--text-strong);
        cursor: pointer;
    }

    .accordion-explorer--qualifizierungen
        .explorer-mobile-panel-close.is-visible,
    .accordion-explorer--arbeitsfelder
        .explorer-mobile-panel-close.is-visible {
        display: flex;
    }

    .accordion-explorer--qualifizierungen
        .explorer-filter-stack[data-mobile-panel],
    .accordion-explorer--arbeitsfelder
        .explorer-filter-stack[data-mobile-panel] {
        display: none;
    }

    .accordion-explorer--qualifizierungen
        .explorer-filter-stack[data-mobile-panel].is-mobile-open,
    .accordion-explorer--arbeitsfelder
        .explorer-filter-stack[data-mobile-panel].is-mobile-open {
        display: grid;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: var(--surface);
        padding: 76px 20px 24px;
        margin: 0;
        overflow-y: auto;
        overflow-x: hidden;
        align-content: start;
    }

    /* Suche wird beim Öffnen per JS an den Anfang des Filter-Panels
       verschoben, damit sie trotz des Vollbild-Overlays sichtbar bleibt. */
    .accordion-explorer--qualifizierungen .explorer-filter-stack[data-mobile-panel] .explorer-search,
    .accordion-explorer--arbeitsfelder .explorer-filter-stack[data-mobile-panel] .explorer-search {
        grid-column: 1 / -1;
        order: -1;
        margin-bottom: 8px;
    }

    .accordion-explorer--qualifizierungen .explorer-mobile-apply-btn,
    .accordion-explorer--arbeitsfelder .explorer-mobile-apply-btn {
        display: block;
        grid-column: 1 / -1;
        order: 1000;
        position: sticky;
        bottom: 0;
        margin: 20px 0 0;
        padding: 16px 20px;
        border: none;
        border-radius: 12px;
        background: var(--accent);
        color: var(--dark);
        font: inherit;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }

    /* Liste/Karte: echte Ansichts-Umschaltung, kein Overlay */
    .accordion-explorer--qualifizierungen
        .explorer-main[data-mobile-view-panel],
    .accordion-explorer--qualifizierungen
        .explorer-map[data-mobile-view-panel] {
        display: none;
    }

    .accordion-explorer--qualifizierungen
        .explorer-main[data-mobile-view-panel].is-view-active {
        display: block;
    }

    .accordion-explorer--qualifizierungen
        .explorer-map[data-mobile-view-panel].is-view-active {
        display: flex;
        flex-direction: column;
        width: 100vw;
        margin-left: calc(-1 * (50vw - 50%));
        margin-right: calc(-1 * (50vw - 50%));
    }

    /* .explorer-map ist normalerweise "position: sticky" (siehe Basisregel
       weiter oben, ohne Media Query). Bei geöffnetem Standort-Sheet (siehe
       .q-qual-sheet/-close unten, beide position:fixed) auf "static"
       zurücksetzen -- rein spekulativ, aber auf manchen mobilen WebKit-
       Versionen gilt ein "position: sticky"-Vorfahre fälschlich als
       Containing Block für seine fixed-position-Nachfahren (analog zum
       bereits behobenen transform-Problem bei .q-qual-sheet selbst). Damit
       bleiben Sheet und Schließen-Button unter GARANTIERT keinem
       positionierten Vorfahren mehr hängen, der sie am echten Viewport
       vorbei verankern könnte. Analog zur Desktop-Regel oben (@media
       (min-width: 961px) .explorer-map.has-open-sheet), dort aber aus
       Layout- statt Containing-Block-Gründen. */
    .accordion-explorer--qualifizierungen
        .explorer-map.has-open-sheet[data-mobile-view-panel].is-view-active {
        position: static;
    }

    .accordion-explorer--qualifizierungen .explorer-map .matrix-map-container {
        height: 70vh;
        margin-top: 0;
        border-radius: 0;
    }

    .accordion-explorer--qualifizierungen.section {
        padding-bottom: 0;
    }

    .q-qual-sheet {
        position: fixed;
        inset: 0;
        z-index: 1002;
        /* Mobil bewusst KEIN transform mehr für die Auf/Zu-Animation (siehe
           unten) -- ein aktives transform auf diesem Element spannt für
           seine position:fixed-Kinder (u. a. den Schließen-Button) einen
           eigenen Containing Block auf. Der Button wird dann relativ zu
           diesem (während der 0.3s-Slide-Transition bewegten) Container
           positioniert statt zum Viewport und landet dadurch zeitweise
           hinter dem Sticky-Header bzw. bleibt dort hängen, falls der
           Browser das Zurücksetzen des Containing Block nach Transitionsende
           nicht sauber nachzieht (bekannte WebKit-Eigenheit). Auf/Zu läuft
           mobil stattdessen rein über opacity/visibility, die keinen eigenen
           Containing Block erzeugen.
           WICHTIG: nur innerhalb dieser Mobile-Media-Query -- Desktop nutzt
           weiterhin transform (siehe @media (min-width: 961px) oben), dort
           ist das Verhalten bereits korrekt. */
        transform: none !important;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.2s ease,
            visibility 0s linear 0.2s;
    }

    .q-qual-sheet.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease;
    }

    .q-qual-sheet-close {
        position: fixed;
        z-index: 1003;
    }
}

/* ---- Qualifizierungen accordion panel overrides ---- */

.accordion-explorer--qualifizierungen .accordion.list .accordion-item {
    background: var(--surface);
}

.accordion-title-ort {
    font-weight: var(--font-weight-regular);
}

.accordion-explorer--qualifizierungen .accordion.list .accordion-panel {
    padding: 0;
    background: var(--surface);
}

/* Beim Scrollen durch eine lange Orte-Liste (viele q-sub-accordion-item)
   bleibt sichtbar, zu welcher Qualifizierung sie gehören — ein Klick klappt
   die ganze Gruppe wieder zu, ohne dass man erst nach oben scrollen muss. */
.q-group-sticky-header[hidden] {
    display: none;
}

.q-group-sticky-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* position: fixed statt sticky — Safari/WebKit verdoppelt bei diesem
       DOM-Aufbau nachweislich den "top"-Wert bei position: sticky (vermutlich
       durch das Zusammenspiel mit "body" als eigentlichem Scroll-Container,
       siehe overflow-x: hidden auf body in base.css). Breite/Position werden
       deshalb per JS synchronisiert (siehe explorer/index.js). */
    position: fixed;
    top: var(--group-sticky-header-top, 64px);
    left: var(--group-sticky-header-left, 0px);
    width: var(--group-sticky-header-width, 100%);
    z-index: 4;
    /* Optisch identisch zum aufgeklappten Gruppen-Titel darüber: cremefarbener
       Hintergrund + orangener Balken links (siehe .accordion-item[aria-expanded="true"]). */
    background: var(--paper);
    box-shadow: inset 3px 0 0 var(--accent);
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 16px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.q-group-sticky-header__icon {
    /* Gleiche Icon-Größe wie .accordion-toggle, damit die Chevrons bündig
       mit denen der übrigen (Sub-)Akkordien sind. */
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--accent-ink);
    transform: rotate(180deg);
}

/* Nested sub-accordions for grouped entries */
.q-grouped-panel {
    display: flex;
    flex-direction: column;
}

.q-sub-accordion-item {
    background: var(--surface) !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    padding-left: 28px !important;
    margin-bottom: 0 !important;
    scroll-margin-top: calc(var(--site-header-height, 64px) + 16px);
}

.q-sub-accordion-item::before {
    display: none !important;
}

.accordion-explorer--qualifizierungen .accordion-toggle {
    width: 16px;
    height: 16px;
}

.q-sub-accordion-item:first-child {
    border-top: none !important;
}

.q-sub-accordion-item + .accordion-panel {
    background: var(--surface);
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.q-sub-accordion-item[aria-expanded="true"] {
    border-radius: 0 !important;
    border-bottom-color: var(--border) !important;
    background: var(--paper) !important;
    /* inset box-shadow statt border-left: verschiebt Titel/Chevron beim
       Öffnen nicht (kein zusätzlicher Platzbedarf wie bei einer echten Border) */
    box-shadow: inset 3px 0 0 var(--accent) !important;
}

.q-sub-accordion-item[aria-expanded="true"] + .accordion-panel {
    background: var(--paper);
}

/* Studium: dritte Verschachtelungsebene (Gruppe → Format → Angebot),
   gerendert von renderStudiumTree() (frontend/js/features/explorer/index.js)
   bzw. _ssr_render_studium_tree() (app/view/accordion-ssr.php). Die Angebote
   bekommen bewusst KEINE eigene Einrückung über die von
   .q-sub-accordion-item hinaus. */
.accordion-item--studium-gruppe .accordion-title {
    font-weight: var(--font-weight-semibold);
}

.q-studium-format .accordion-title {
    font-weight: var(--font-weight-medium, 500);
}

/* Icon vor der Format-Überschrift ("Präsenz/Vollzeit",
   "Berufsbegleitend/dual/online") -- nur die vertikale Ausrichtung, das
   Aussehen der Zeile selbst bleibt das der übrigen Akkordeon-Kopfzeilen. */
.q-studium-format-icon {
    display: inline-flex;
    vertical-align: -0.15em;
    margin-right: 8px;
    color: var(--muted-strong);
}

.q-panel {
    display: flex;
    flex-direction: column;
}

/* Sub-tabs (native details/summary) */
.q-subtab {
    border-bottom: 1px solid var(--border);
}

.q-subtab:last-child {
    border-bottom: none;
}

.q-subtab-summary {
    display: flex;
    /* "center" (statt flex-start) hätte bei besonders langen, auf schmalen
       Viewports umbrechenden Reiter-Titeln (z. B. "Anerkennungs- und
       Anrechnungsoptionen vorheriger Qualifikationen") das Emoji gegen die
       Höhe des GESAMTEN mehrzeiligen Textblocks zentriert -- es landet dann
       optisch zwischen den Zeilen statt neben der ersten, wodurch der Abstand
       zur ersten Zeile größer wirkt als bei kürzeren, einzeiligen Titeln
       (bestätigt an einem 375px-Viewport, siehe Rückmeldung). "flex-start"
       richtet Emoji und Chevron stattdessen an der ersten Zeile aus, bei
       einzeiligen Titeln optisch identisch zu vorher.
       Kleiner margin-top gleicht aus, dass Emoji-Glyphen i. d. R. kleiner als
       die Zeilenhöhe sind und sonst leicht zu hoch säßen. */
    align-items: flex-start;
    gap: 8px;
    /* Rechtes Padding an die Akkordion-Zeilen angeglichen (16px), damit das
       Chevron-Icon bündig mit dem der übergeordneten Akkordion-Einträge steht. */
    padding: 17px 16px 17px 28px;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--dark);
    list-style: none;
    user-select: none;
    position: relative;
}

.q-subtab-summary > span[aria-hidden],
.q-subtab-summary > app-icon {
    margin-top: 0.1em;
}

.q-subtab-summary::-webkit-details-marker {
    display: none;
}

/* Gleiches Chevron-Icon wie beim Akkordion-Titel, statt eines abweichenden
   Zeichens — bündig am rechten Rand über margin-left: auto (siehe .accordion-toggle). */
.q-subtab-summary .accordion-toggle {
    width: 16px;
    height: 16px;
    /* Passend zu "align-items: flex-start" oben am ersten Zeile ausrichten
       statt gegen die volle Höhe eines umbrechenden Titels zu zentrieren
       (gleiches Muster wie ".accordion-explorer--qualifizierungen
       .accordion-toggle" für die übergeordneten Akkordion-Titel). */
    margin-top: 2px;
}

.q-subtab[open] > .q-subtab-summary .accordion-toggle {
    transform: rotate(180deg);
    color: var(--accent-ink);
}

.q-subtab[open] {
    background: var(--paper);
}

.q-subtab[open] > .q-subtab-summary {
    border-left: 3px solid var(--accent);
    padding-left: 25px;
}

.q-subtab-content {
    padding: 4px 28px 20px;
}

/* KV grid (dl) */
.q-kv-grid {
    display: grid;
    gap: 0;
}

.q-kv-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px 22px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    align-items: start;
}

.q-kv-row:last-child {
    border-bottom: none;
}

.q-kv-label {
    font-size: var(--font-size-xs);
    color: var(--muted);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-base);
}

.q-kv-value {
    font-size: var(--font-size-sm);
    color: var(--text);
    line-height: var(--line-height-base);
}

.q-kv-value--full {
    grid-column: 1 / -1;
    font-size: var(--font-size-sm);
    color: var(--muted);
}

/* Ja/Nein pills */
.q-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-reading);
    vertical-align: middle;
}

.q-pill--ja {
    background: #e6f6ec;
    color: #1a6b38;
}

.q-pill--nein {
    background: #fbe8e8;
    color: #a01c1c;
}

.q-pill--na {
    background: var(--surface-muted);
    color: #666;
}

.q-pill-note {
    font-size: var(--font-size-sm);
    color: var(--muted);
    vertical-align: middle;
}

/* Gleiche Farbe wie der umgebende Text (kein eigener Akzent), unterstrichen,
   normales Gewicht -- dezent statt auffällig orange/fett. Einheitlicher Stil
   für alle externen/internen Links innerhalb der Qualifizierungs-Reiter
   (Zugangsvoraussetzungen, Förderung, Kosten, ...). */
.wiki-link {
    color: inherit;
    font-weight: var(--font-weight-regular);
    text-decoration: underline;
}

/* URL footnotes */
.q-footnote {
    font-size: var(--font-size-sm);
    color: var(--muted);
    margin-top: 8px;
    line-height: var(--line-height-base);
    word-break: break-all;
}

.q-kv-multiline {
    margin: 0 0 6px;
    font-size: inherit;
}
.q-kv-multiline:last-child {
    margin-bottom: 0;
}

.q-extrotext-section {
    margin-top: 10px;
    padding-left: 22px;
    font-size: var(--font-size-xs);
    color: var(--muted);
    opacity: 0.85;
    line-height: var(--line-height-reading);
}

.q-bb-info {
    margin: 0 0 20px;
    color: var(--muted);
    line-height: var(--line-height-reading);
}

.q-bb-info a {
    color: var(--accent-ink);
    font-weight: var(--font-weight-semibold);
}

.q-zv-info {
    margin: 0 0 20px;
    color: var(--muted);
    line-height: var(--line-height-reading);
}

.q-zv-info a {
    color: var(--accent-ink);
    font-weight: var(--font-weight-semibold);
}

/* Formate table */
.q-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.q-table th {
    text-align: left;
    font-size: var(--font-size-2xs);
    color: var(--muted);
    font-weight: var(--font-weight-bold);
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--border);
}

.q-table td {
    padding: 9px 8px 9px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: top;
}

.q-table tbody tr:last-child td {
    border-bottom: none;
}

.q-table-format {
    color: var(--muted);
    font-weight: var(--font-weight-semibold);
    min-width: 140px;
}

/* Zugangsvoraussetzungen vertical list */
.q-zulassung-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--muted);
    margin: 0 0 6px;
}

.q-zulassung-list {
    margin-bottom: 12px;
}

.q-zulassung-entry {
    padding: 4px 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--dark);
    line-height: var(--line-height-compact);
}

.q-zulassung-hint {
    margin: 8px 0 0;
    font-size: var(--font-size-sm);
    color: var(--muted);
    line-height: var(--line-height-base);
}

.q-oder-divider {
    padding: 3px 0 0;
    font-size: var(--font-size-2xs);
    color: var(--muted);
    font-weight: var(--font-weight-bold);
}

.q-qual-extra {
    font-weight: var(--font-weight-medium);
    color: var(--muted);
}

.q-qual-star {
    color: var(--accent-ink);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-2xs);
    vertical-align: super;
    line-height: var(--line-height-none);
}

/* Separator between Schulabschlüsse list and other Zulassung rows */
.q-zulassung-separator {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 0;
}

/* Compact KV row (Sprachnachweis) */
.q-kv-row--compact {
    grid-template-columns: auto 1fr;
    gap: 8px 10px;
}

/* CTA button */
.q-cta-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 28px;
    border-top: 1px solid var(--border);
}

/* Dezenter Ghost-Link zur Arbeitsfelder-Seite, links neben "zum Anbieter" */
.q-af-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border-warm);
    border-radius: 8px;
    color: var(--muted-deep);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    padding: 9px 16px;
    text-decoration: none;
    line-height: var(--line-height-compact);
    transition:
        color 0.15s,
        border-color 0.15s;
}

.q-af-link-btn:hover {
    color: var(--accent-ink);
    border-color: var(--accent-tan);
}

.q-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--brand-ink);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s;
    line-height: var(--line-height-compact);
}

.q-cta-btn:hover {
    background: var(--accent-dark);
    color: var(--brand-ink);
}

/* Mobile ≤620px */
@media (max-width: 620px) {
    .q-subtab-summary {
        padding: 14px 16px;
        font-size: var(--font-size-xs);
    }

    .q-subtab-content {
        padding: 4px 16px 16px;
    }

    .q-kv-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 8px 0;
    }

    .q-kv-label {
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-bold);
        color: var(--faint);
    }

    .q-cta-row {
        padding: 12px 16px;
    }
}

/* ---- Arbeitsfelder static content ---- */

/* Sticky-Gruppenkopf beim Aufklappen eines Arbeitsfelds (siehe
   bindStickyGroupHeaders() in shared/ui.js, aufgerufen aus
   arbeitsfelder/index.js) -- hält Emoji + Titel sichtbar, solange man durch
   den (teils langen) Panel-Inhalt scrollt, analog zum gleichnamigen Muster
   der Qualifizierungs-Gruppen auf der Matrix-Seite (.q-group-sticky-header). */
.af-sticky-header[hidden] {
    display: none;
}

.af-sticky-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* position: fixed statt sticky -- siehe Begründung bei
       .q-group-sticky-header weiter oben (Safari/WebKit-Bug mit body als
       Scroll-Container); Breite/Position werden per JS synchronisiert. */
    position: fixed;
    top: var(--af-sticky-header-top, 64px);
    left: var(--af-sticky-header-left, 0px);
    width: var(--af-sticky-header-width, 100%);
    z-index: 4;
    background: var(--paper);
    box-shadow: inset 3px 0 0 var(--accent);
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 16px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.af-sticky-header__copy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.af-sticky-header__copy .accordion-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.af-sticky-header__icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--accent-ink);
    transform: rotate(180deg);
}

.af-qual-info {
    margin: 0 0 28px;
    color: var(--muted);
    line-height: var(--line-height-reading);
    scroll-margin-top: calc(var(--site-header-height, 64px) + 16px);
}

/* Nimmt auf schmalen Viewports proportional mehr Platz ein als am Desktop
   (Standard-Fließtextgröße bei voller Breite) -- etwas kleiner, analog zu
   .typo-small (0.85rem), reduziert das ohne den Kontrast/die Lesbarkeit zu
   stark zu verringern. */
@media (max-width: 640px) {
    .af-qual-info {
        font-size: var(--font-size-sm);
    }
}

.af-qual-info a {
    color: var(--accent-ink);
    font-weight: var(--font-weight-semibold);
}

.af-qual-footer {
    margin: 28px 0 0;
    padding: 20px 22px;
    border-top: 1px solid var(--border);
}

.af-qual-footer p {
    margin: 0 0 6px;
    color: var(--muted);
    line-height: var(--line-height-reading);
}

.af-qual-footer p.af-qual-footer-question {
    margin: 0 0 14px;
    color: inherit;
    font-weight: var(--font-weight-bold);
}

.af-qual-footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.af-qual-footer-reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    background: var(--accent);
    color: var(--dark);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    line-height: var(--line-height-compact);
}

.af-qual-footer-reset:hover {
    background: var(--accent-dark);
}

.af-qual-footer-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--accent-ink);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    padding: 10px 22px;
    border: 1.5px solid var(--accent-dark);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: var(--line-height-compact);
    text-decoration: none;
}

.af-qual-footer-contact:hover {
    background: var(--accent-dark);
    color: var(--dark);
}

.af-content .accordion-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 16px 22px;
    background: var(--surface);
    border: none;
    cursor: pointer;
    font: inherit;
    gap: 16px;
}

.af-content .accordion-item::before {
    content: none;
}

.af-content .accordion-item-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.af-content .accordion-item-copy {
    flex: 1;
    min-width: 0;
}

.af-emoji {
    font-size: var(--font-size-xl);
    flex: 0 0 auto;
    line-height: var(--line-height-tight);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.af-content .accordion-toggle {
    flex: 0 0 auto;
    color: var(--text);
    transition: transform 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    stroke-width: 3;
}

.af-content .accordion-item[aria-expanded="true"] .accordion-toggle {
    transform: rotate(180deg);
    color: var(--accent-ink);
    stroke-width: 2.5;
}

.af-content .accordion-item[aria-expanded="true"] {
    border-left: 3px solid var(--accent) !important;
    padding-left: 19px;
    background: var(--paper) !important;
}

.af-content .accordion-panel.open {
    background: var(--paper) !important;
}

.af-category {
    margin-bottom: 24px;
}

.af-category-heading {
    margin-bottom: 16px;
}

.af-category-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--muted-strong);
    margin: 0;
}

.af-category-title__label {
    white-space: nowrap;
}

.af-category-title__line {
    flex: 1;
    height: 1px;
    background: var(--surface-warm);
}

.af-category-teaser {
    margin-bottom: 20px;
    color: var(--muted);
    line-height: var(--line-height-reading);
}

.af-category-teaser p {
    margin: 0 0 10px;
}

.af-content .accordion.list .accordion-item {
    background: var(--surface);
}

.af-subcat-item,
.af-subcat-heading,
.af-standalone .accordion-item {
    background: var(--surface) !important;
}

.af-subcat-item[aria-expanded="true"],
.af-standalone .accordion-item[aria-expanded="true"] {
    background: var(--paper) !important;
}

.af-groups-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.af-subcat-body .accordion.list {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.af-subcat-body .accordion.list .accordion-item .accordion-leading-icon {
    display: none;
}

.af-subcat-body .accordion.list .accordion-item {
    border-radius: 0;
    margin-bottom: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--border);
    position: relative;
    padding-left: calc(3rem + 36px);
    padding-right: 22px;
}

.af-subcat-body .accordion.list .accordion-item::before {
    content: "→";
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    color: var(--faint);
    line-height: var(--line-height-tight);
}

.af-subcat-body .accordion.list .accordion-item[aria-expanded="true"] {
    border-radius: 0;
    border-bottom-color: transparent;
    background: var(--surface);
    padding-left: calc(3rem + 33px) !important;
}

.af-subcat-body .accordion.list .accordion-item[aria-expanded="true"]::before {
    left: 19px;
    color: var(--accent-ink);
}

.af-subcat-body .accordion.list .accordion-panel {
    border-radius: 0;
    margin-bottom: 0;
    border-left: none;
    border-right: none;
    padding-top: 0;
    padding-left: 17px;
    padding-right: 17px;
}

.af-subcat-body .accordion.list .accordion-panel.open {
    padding-top: 0;
    background: var(--paper);
    padding-left: calc(3rem + 33px);
}

.af-subcat-body .accordion.list .accordion-panel .af-section {
    padding-left: 0;
    padding-right: 0;
}

.af-standalone .accordion-panel.open {
    padding-top: 0;
    background: var(--bg-soft);
}

.af-subcat-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 10px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}

.af-subcat-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--dark);
}

.af-subcat-item .accordion-title,
.af-standalone .accordion-item .accordion-title {
    font-weight: var(--font-weight-bold);
}

.af-subcat-body .accordion-title {
    font-weight: var(--font-weight-regular);
}

.af-subcat-body .accordion-item[aria-expanded="true"] .accordion-title {
    font-weight: var(--font-weight-semibold);
}

.af-subcat-preview {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--muted);
    line-height: var(--line-height-base);
    margin-top: 2px;
}

/* af-group and af-standalone handle the outer border — inner elements have no own border */
.af-group {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.af-standalone {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.af-group .af-subcat-item {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.af-subcat-item--static {
    cursor: default;
}

.af-group .af-group-header .accordion-panel {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.af-group .af-group-header .accordion-panel.open {
    padding: 0 24px 24px !important;
    background: var(--paper) !important;
}

.af-standalone .accordion-item {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.af-standalone .accordion-panel {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 22px 0 calc(3rem + 36px) !important;
}

.af-standalone .accordion-panel.open {
    background: var(--paper) !important;
    padding-left: 24px !important;
}

.af-subcat-teaser {
    color: var(--muted);
    line-height: var(--line-height-reading);
}

.af-subcat-teaser p {
    margin: 0 0 8px;
    font-size: var(--font-size-sm);
    max-width: 90ch;
}

.af-subcat-teaser p:last-child {
    margin-bottom: 0;
}

.af-panel-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 12px;
    padding-bottom: 6px;
}

.af-panel-appetizer {
    font-size: var(--font-size-sm);
    color: var(--muted);
    line-height: var(--line-height-reading);
    padding-bottom: 10px;
    max-width: 90ch;
}

.af-item-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

.af-item-action {
    min-width: 0;
    padding: 10px 20px;
    font-size: var(--font-size-sm);
}

.af-section {
    padding: 0 0 6px;
}

.af-section + .af-section {
    margin-top: 12px;
    padding-top: 0;
}

.af-section-label {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--accent-ink);
    margin: 0 0 10px;
}

.af-section p {
    margin: 0 0 10px;
    color: var(--muted);
    line-height: var(--line-height-reading);
    font-size: var(--font-size-sm);
    max-width: 90ch;
}

.af-section p:last-child {
    margin-bottom: 0;
}

.af-quote {
    border-left: 3px solid var(--accent);
    margin: 12px 0;
    padding: 8px 14px;
    color: var(--muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-reading);
    font-style: italic;
}

.af-source {
    font-size: var(--font-size-xs);
    color: var(--muted-strong);
    margin-top: 8px !important;
    font-style: italic;
}

.af-list {
    margin: 6px 0 10px 0;
    padding-left: 20px;
    color: var(--muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-reading);
}

.af-list li {
    margin-bottom: 4px;
}

.af-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
    margin-top: 10px;
    color: var(--muted);
}

.af-table th {
    background: var(--paper-soft);
    font-weight: var(--font-weight-bold);
    padding: 8px 12px;
    text-align: left;
    border: 1px solid var(--border);
    color: var(--dark);
}

.af-table td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    vertical-align: top;
    line-height: var(--line-height-base);
}

.af-table tr:nth-child(even) td {
    background: var(--paper);
}

.af-notes {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 2px solid var(--border);
    color: var(--muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-reading);
}

.af-notes-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--dark);
    margin: 0 0 12px;
}

.af-notes p,
.af-notes ul {
    margin-bottom: 10px;
}

@media (max-width: 640px) {
    .af-table {
        display: block;
        overflow-x: auto;
    }

    .af-category-title {
        font-size: var(--font-size-lg);
    }
}

.af-merkmale-text {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--accent-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: var(--line-height-compact);
    margin-bottom: 2px;
}

.accordion-explorer--arbeitsfelder .af-merkmale-text {
    display: none;
}

.accordion-explorer--arbeitsfelder .accordion-item[aria-expanded="true"] .af-merkmale-text {
    display: block;
}

.af-subcat-body {
    border-top: 1px solid var(--border);
    overflow: hidden;
}

.af-appetizer {
    padding: 12px 4px 4px;
}

.af-appetizer p {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-reading);
    font-style: italic;
}

[data-af-hidden] {
    display: none !important;
}

/* ── Gut zu wissen: filter ─────────────────────────────── */
.pill.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--dark);
}

.pill.is-active:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* ── Gut zu wissen: overview blocks ───────────────────── */

.accordion-explorer--faq .explorer-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-height: 60vh;
}

/* Prevent sticky sidebar from jumping when accordion content shrinks */
.accordion-explorer--arbeitsfelder .explorer-main,
.accordion-explorer--glossar .explorer-main,
.accordion-explorer .explorer-main:not([data-mobile-view-panel]) {
    min-height: 60vh;
}

.faq-block {
    margin-top: 0;
    /* Sprungziel des Bereichs-Inhaltsverzeichnisses: hält die Bereichs-
       überschrift unterhalb des fixierten Site-Headers. */
    scroll-margin-top: calc(var(--site-header-height) + 24px);
}

/* Bereichs-Inhaltsverzeichnis der FAQ-Übersicht. Erbt Typografie und
   Aktiv-Zustand von .faq-article-toc; anders als dort klebt hier bereits
   .explorer-sidebar, ein zweites sticky würde sich damit überlagern. */
.accordion-explorer--faq .explorer-sidebar {
    max-height: calc(100vh - var(--site-header-height, 64px) - 32px);
}

.explorer-sidebar .faq-overview-toc {
    position: static;
    margin-top: 12px;
}

.faq-block-heading {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--faint);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.faq-block-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.faq-block-sub {
    display: none;
}

/* Vorschautexte der FAQ-Karten auf drei Zeilen begrenzen, damit die Karten
   im Raster gleich hoch bleiben. Die Vorspänne kommen unverändert aus den
   Quelldokumenten und sind unterschiedlich lang, teils über vier Sätze. */
.faq-content .card > p.typo-small {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.faq-content .card {
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.faq-content .card:hover {
    background: var(--bg-soft);
}

.faq-content .card-link {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.faq-content .card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* "Für Träger" + Startseite: FAQ-Karten komplett klickbar (nicht nur der
   "Mehr erfahren"-Link) — gleiche Stretched-Link-Technik wie
   .faq-content .card-link oben. */
.traeger-faq-cards .story-card,
.home-faq-cards .story-card {
    position: relative;
    cursor: pointer;
}

.traeger-faq-cards .card-link::after,
.home-faq-cards .card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* ── Gut zu wissen: article page ───────────────────────── */
.faq-article-header-wrap {
    background: var(--accent-faint);
    border-bottom: 1px solid var(--accent-border-strong);
    padding: 40px 0 56px;
}

main > .faq-article-header-wrap:first-child {
    padding-top: 40px;
}

/* grid-template-columns behält die ursprüngliche 300px-Spalte bei (auch ohne
   den entfernten "Zur Übersicht"-Link), damit Headline/Introtext an
   derselben Position und mit demselben Zeilenumbruch sitzen wie zuvor. */
.faq-article-hero-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 56px;
    max-width: 1060px;
}

.faq-article-header {
    min-width: 0;
    /* Einzig verbliebenes Grid-Kind landet ohne den entfernten
       "Zur Übersicht"-Link sonst automatisch in Spalte 1 (300px) statt 2. */
    grid-column: 2;
}

.faq-article-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.faq-article-title {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--dark);
    margin-bottom: 18px;
}

.faq-article-lead {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-reading);
    color: var(--muted);
    max-width: 58ch;
}

.faq-article-page {
    padding-top: 60px;
    padding-bottom: 80px;
}

.faq-article {
    max-width: 1060px;
}

.faq-article-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 56px;
    align-items: start;
}

.faq-article-toc {
    position: sticky;
    top: calc(var(--site-header-height) + 28px);
}

.faq-toc-label {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--muted);
    margin-bottom: 24px;
}

.faq-toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.faq-toc-list a {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--muted);
    padding: 6px 0 6px 12px;
    border-left: 2px solid var(--border);
    transition:
        color 0.15s,
        border-color 0.15s;
    line-height: var(--line-height-compact);
}

.faq-toc-list a:hover,
.faq-toc-list a.is-active {
    color: var(--text);
    border-color: var(--accent);
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 800px) {
    .faq-article-hero-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .faq-article-header {
        grid-column: 1;
    }

    .faq-article-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .faq-article-toc {
        position: static;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 16px 20px;
        background: var(--bg-soft);
    }

    .faq-article-header-wrap {
        padding: 24px 0 36px;
    }

    main > .faq-article-header-wrap:first-child {
        padding-top: 24px;
    }

    .faq-article-page {
        padding-top: 32px;
        padding-bottom: 48px;
    }
}

.faq-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.faq-article-tag {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--accent-ink);
    background: var(--accent-faint);
    border: 1px solid var(--accent-border-strong);
    border-radius: 4px;
    padding: 3px 9px;
}

.faq-article-tag.muted {
    color: var(--muted);
    background: var(--bg-soft);
    border-color: var(--border);
}

.faq-article-body {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.faq-article-section h2 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--dark);
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
}

/* Numbered sub-subsections innerhalb eines h2-Abschnitts (z. B. "1.1 Grundgesetz"
   in rechte-ordnungen-erlasse.php) — ohne diese Regel fällt ein rohes <h3> auf
   den Browser-Default zurück (zu groß, zu wenig/inkonsistenter Abstand). Bewusst
   kleiner und leiser als h2 (kein border-bottom), damit die Hierarchie sichtbar
   bleibt; erstes h3 direkt nach dem h2 braucht keinen zusätzlichen Abstand nach
   oben, deshalb der Reset für :first-child. */
.faq-article-section h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--dark);
    margin-top: 24px;
    margin-bottom: 10px;
}

.faq-article-section h3:first-child {
    margin-top: 0;
}

.faq-article-section a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-article-section p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-reading);
    color: var(--text);
    max-width: 72ch;
}

.faq-check-list,
.faq-cross-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.faq-check-list li,
.faq-cross-list li {
    padding-left: 1.6em;
    position: relative;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.faq-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 0.85em;
    height: 0.85em;
    color: #2ebd70;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'20%206%209%2017%204%2012'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
}

.faq-cross-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 0.85em;
    height: 0.85em;
    color: #e05252;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cline%20x1%3D'18'%20y1%3D'6'%20x2%3D'6'%20y2%3D'18'%3E%3C/line%3E%3Cline%20x1%3D'6'%20y1%3D'6'%20x2%3D'18'%20y2%3D'18'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
}

.faq-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
}

.faq-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.faq-step-number {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--brand-ink);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.faq-step-body {
    flex: 1;
}

.faq-step-body h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin-bottom: 6px;
    color: var(--dark);
}

.faq-step-body ul {
    margin-top: 6px;
    padding-left: 1em;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: var(--font-size-base);
    color: var(--muted);
}

.faq-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

@media (max-width: 640px) {
    .faq-results-grid {
        grid-template-columns: 1fr;
    }
}

.faq-result-box {
    border-radius: 10px;
    padding: 16px 18px;
}

.faq-result-box.positive {
    background: #f1fbf5;
    border: 1px solid #b2e0c3;
}

.faq-result-box.negative {
    background: #fdf3f3;
    border: 1px solid #f0c0c0;
}

.faq-result-box h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: 10px;
}

.faq-result-box.positive h4 {
    color: #1e8045;
}

.faq-result-box.negative h4 {
    color: #b93333;
}

.faq-result-box h4::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: -0.15em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.faq-result-box.positive h4::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'20%206%209%2017%204%2012'%3E%3C/polyline%3E%3C/svg%3E");
}

.faq-result-box.negative h4::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cline%20x1%3D'18'%20y1%3D'6'%20x2%3D'6'%20y2%3D'18'%3E%3C/line%3E%3Cline%20x1%3D'6'%20y1%3D'6'%20x2%3D'18'%20y2%3D'18'%3E%3C/line%3E%3C/svg%3E");
}

.faq-two-col-wrap {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--surface-muted);
    padding: 36px max(32px, calc(50vw - 350px));
    margin-top: 8px;
    margin-bottom: 8px;
}

.faq-two-col {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .faq-two-col {
        grid-template-columns: 1fr;
    }
}

.faq-info-box {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
}

.faq-info-box.accent {
    background: var(--accent-faint);
    border-color: var(--accent-border-strong);
    /* .accent (atoms.css) setzt color: var(--accent) — soll hier nur den
       Kasten hervorheben, nicht den enthaltenen Fließtext orange einfärben. */
    color: var(--text);
}

.faq-info-box h3 {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--accent-ink);
    margin-bottom: 12px;
}

.faq-info-box ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    list-style: none;
}

.faq-info-box li {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    padding-left: 1.1em;
    position: relative;
}

.faq-info-box li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--muted);
}

.faq-info-box a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

.faq-info-meta {
    margin-top: 10px;
    font-size: var(--font-size-xs);
    color: var(--muted);
}

.faq-info-meta p {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    margin-bottom: 4px;
}

.faq-info-meta li {
    font-size: var(--font-size-xs);
}

/* Auffällige Status-/Vorbehalts-Hinweisbox für FAQ-Artikel, deren Inhalt
   (noch) nicht auf geltendem Recht beruht, sondern z. B. auf einem noch
   nicht beschlossenen Eckpunktepapier (Fachkraft-I/II-Unterscheidung,
   Verordnung erst für Herbst 2026 erwartet). Bewusst eine eigene,
   deutlichere Komponente statt .faq-info-box -- die ist für neutrale
   Vergleichsinhalte gedacht, kein Vorbehalt/Warnhinweis. */
.faq-draft-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--accent-wash);
    border: 1px solid #f0c869;
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 28px;
}

.faq-draft-notice__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--accent-ink);
}

.faq-draft-notice p {
    font-size: var(--font-size-md);
    line-height: var(--line-height-reading);
    color: var(--text);
    margin: 0;
    max-width: none;
}

.faq-draft-notice strong {
    color: var(--accent-ink);
}

.faq-sources {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    margin-top: 8px;
}

.faq-sources h3 {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--muted);
    margin-bottom: 10px;
}

.faq-sources ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.faq-sources li {
    font-size: var(--font-size-xs);
    color: var(--muted);
}

.faq-sources a {
    color: var(--muted);
    text-decoration: underline;
    word-break: break-all;
}

[data-faq-card][hidden] {
    display: none !important;
}

/* ── Arbeitsfelder accordion mobile ── */
@media (max-width: 640px) {
    /* Weniger Padding in den Items */
    .af-content .accordion-item {
        padding: 12px 14px;
        gap: 10px;
    }

    /* Emoji kleiner */
    .af-emoji {
        width: 2.2rem;
        height: 2.2rem;
        font-size: var(--font-size-base);
        flex-shrink: 0;
    }

    /* Subcat-Item-Padding reduzieren */
    .af-subcat-body .accordion.list .accordion-item {
        padding-left: calc(2.2rem + 24px);
        padding-right: 14px;
    }

    .af-subcat-body .accordion.list .accordion-item::before {
        left: 14px;
        width: 2.2rem;
    }

    .af-subcat-body .accordion.list .accordion-item[aria-expanded="true"] {
        padding-left: calc(2.2rem + 21px) !important;
    }

    .af-subcat-body
        .accordion.list
        .accordion-item[aria-expanded="true"]::before {
        left: 11px;
    }

    /* Panel-Padding anpassen — kein Einzug auf Mobile */
    .af-standalone .accordion-panel {
        padding: 0 14px !important;
    }

    .af-standalone .accordion-panel.open {
        padding: 0 14px 14px !important;
    }

    .af-group .af-group-header .accordion-panel.open {
        padding: 0 14px 14px !important;
    }

    .af-subcat-body .accordion.list .accordion-panel.open {
        padding-left: 14px;
    }

    /* Merkmal-Text kleiner, Vorschau-Text ausblenden */
    .af-merkmale-text {
        font-size: var(--font-size-2xs);
    }

    .af-subcat-preview {
        display: none;
    }

    /* Zugang-Filter Dropdown vollbreite */
    .filter-select {
        font-size: var(--font-size-sm);
    }

    /* Section Padding */
    .accordion-explorer--arbeitsfelder.section {
        padding: 24px 0 40px;
    }
}

/* === organisms.css === */
.search-section {
    border-top: 1px solid var(--paper-soft);
    background: var(--bg-soft);
    padding-top: 50px;
}

.preview-gate {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.preview-gate__backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.preview-gate__glow {
    position: absolute;
    width: min(42vw, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(12px);
    opacity: 0.8;
}

.preview-gate__glow--left {
    left: -8%;
    top: 6%;
    background: rgba(246, 162, 28, 0.22);
}

.preview-gate__glow--right {
    right: -10%;
    bottom: 2%;
    background: rgba(255, 255, 255, 0.9);
}

.preview-gate__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.36), transparent 78%);
}

.preview-gate__shell {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 56px;
    padding-bottom: 56px;
}

.preview-gate__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: clamp(28px, 5vw, 64px);
    padding: clamp(28px, 5vw, 56px);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.92),
            rgba(255, 248, 235, 0.78)
        ),
        rgba(255, 255, 255, 0.76);
    box-shadow:
        0 26px 80px rgba(87, 67, 35, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
}

.preview-gate__intro {
    display: grid;
    align-content: start;
    gap: 18px;
    max-width: 620px;
}

.preview-gate__eyebrow {
    color: rgba(131, 97, 41, 0.78);
}

.preview-gate__intro h1 {
    font-size: var(--font-size-hero);
    line-height: var(--line-height-tight);
    max-width: 10ch;
}

.preview-gate__copy {
    max-width: 54ch;
    font-size: var(--font-size-base);
    color: var(--text-strong);
}

.preview-gate__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.preview-gate__chips span {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(230, 217, 196, 0.92);
    color: var(--muted-deep);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.preview-gate__form {
    align-self: center;
    display: grid;
    gap: 14px;
    padding: 26px;
    border-radius: 24px;
    background: rgba(37, 31, 24, 0.92);
    color: var(--surface);
    box-shadow: 0 22px 52px rgba(29, 23, 17, 0.28);
}

.preview-gate__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: rgba(255, 255, 255, 0.74);
}

.preview-gate__input-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 10px 10px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.preview-gate__input-wrap:focus-within {
    border-color: rgba(246, 162, 28, 0.78);
    box-shadow: 0 0 0 4px rgba(246, 162, 28, 0.18);
}

.preview-gate__input {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--surface);
    font-size: var(--font-size-base);
    outline: none;
}

.preview-gate__input::placeholder {
    color: rgba(255, 255, 255, 0.52);
}

.preview-gate__toggle {
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--surface);
    border-radius: 999px;
    padding: 10px 14px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

.preview-gate__hint,
.preview-gate__error {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.preview-gate__hint {
    color: rgba(255, 255, 255, 0.68);
}

.preview-gate__error {
    color: #ffd0b8;
}

.preview-gate__submit {
    width: 100%;
    min-width: 0;
    margin-top: 6px;
}

.analytics-login {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background: #faf9f7;
    color: #25231f;
}

.analytics-login__panel {
    width: 100%;
    max-width: 380px;
}

.analytics-login__brand {
    display: inline-block;
    margin-bottom: 40px;
    color: #726d64;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.analytics-login__intro h1 {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.analytics-login__intro p {
    margin: 0;
    color: #726d64;
    font-size: 15px;
}

.analytics-login__form {
    display: grid;
    gap: 10px;
    margin-top: 32px;
}

.analytics-login__label {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
}

.analytics-login__input-wrap {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 6px 0 14px;
    border: 1px solid #d9d5cf;
    border-radius: 8px;
    background: #fff;
}

.analytics-login__input-wrap:focus-within {
    border-color: #9b6a1a;
    box-shadow: 0 0 0 3px rgba(246, 162, 28, 0.14);
}

.analytics-login__input {
    width: 100%;
    min-width: 0;
    padding: 12px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 16px;
}

.analytics-login__input::placeholder {
    color: #89837b;
}

.analytics-login__toggle {
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #726d64;
    font-size: 12px;
    cursor: pointer;
}

.analytics-login__message {
    margin: 0;
    color: #726d64;
    font-size: 12px;
    line-height: 1.6;
}

.analytics-login__message--error {
    color: #b42318;
}

.analytics-login__submit {
    min-height: 48px;
    margin-top: 12px;
    padding: 12px 20px;
    border: 1px solid #25231f;
    border-radius: 8px;
    background: #25231f;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.analytics-login__submit:hover {
    background: #454038;
}

.analytics-login__toggle:hover,
.analytics-login__brand:hover {
    color: #25231f;
}

.analytics-login__brand:focus-visible,
.analytics-login__toggle:focus-visible,
.analytics-login__submit:focus-visible {
    outline: 2px solid #9b6a1a;
    outline-offset: 3px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface);
}

/* ── Row 1: orange top bar ────────────────────────────── */
.nav-topbar {
    background: var(--accent);
    width: 100%;
}

.nav-topbar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Nur vertikal polstern — links und rechts kommt der Einzug aus
       .container (32px, ab 640px 20px), damit die Navigation exakt auf der
       Kante von Hero und Seiteninhalt sitzt. */
    padding-block: 10px;
    position: relative;
    container-type: inline-size;
    container-name: site-nav;
}

.nav-topbar-links {
    display: flex;
    gap: 6px;
    margin-left: auto;
    font-size: var(--font-size-sm);
}

.nav-topbar-links a {
    color: var(--brand-ink);
    font-weight: var(--font-weight-medium);
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.15s;
}

.nav-topbar-links a:hover,
.nav-topbar-links a.active {
    background: rgba(255, 255, 255, 0.18);
    color: var(--brand-ink);
}

/* ── Row 2: main nav bar ──────────────────────────────── */
.nav-mainbar {
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(232, 227, 221, 0.92);
    width: 100%;
}

.nav-mainbar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Einzug wie oben aus .container, vertikal bestimmt das Förderlogo
       die Höhe. */
    padding-block: 0;
    position: relative;
}

.site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: var(--font-weight-semibold);
}

.brand-logo {
    display: block;
    height: auto;
    max-height: 100%;
}

/* Brand-Logos: Hawk + ZZHH-Partnerlogo stehen jetzt im Footer, das
   Förderlogo des Nds. Ministeriums in der Topbar. Das ZZHH-Logo braucht
   keine eigenen Eigenschaften über .brand-logo hinaus. */
.brand-logo--hawk {
    margin-right: 2px;
    width: 240px;
    max-width: 100%;
    height: auto;
}

/* Förderlogo (Nds. Ministerium für Soziales, Arbeit, Gesundheit und
   Gleichstellung). Das JPG bringt seinen weißen Hintergrund und einen
   eigenen Innenabstand mit — deshalb hier ohne Platte/Padding direkt auf
   dem orangen Balken. Die Höhe der Topbar richtet sich nach diesem Logo,
   --site-header-height in base.css ist darauf abgestimmt. */
.brand-logo--ms {
    width: 150px;
    height: auto;
    max-height: none;
}

/* Bildungsmatrix-Wortmarke in der Topbar, ohne Platte direkt auf dem
   orangen Balken. "Pos"-Fassung mit dunkelblauer Wortmarke: 7,79:1 gegen
   den Balken, die weiße "Neg"-Fassung läge bei 2,08:1. Das Orange im
   Signet (#f6992e) ist in beiden Fassungen gleich und liegt dicht am
   Balken (--accent: #f6a21c), diese Teile zeichnen sich kaum ab. */
.brand-logo--bmx {
    width: 160px;
    height: auto;
    max-height: none;
}

/* Förderlogo in Reihe 2. Steht außerhalb von #primary-nav, damit es auf
   mobil sichtbar bleibt, während nur die Navigation einklappt. */
.nav-mainbar-funding {
    display: block;
    width: 168px;
    height: auto;
    flex: none;
}

/* Bildmarke der Bildungsmatrix, steht links neben dem Förderlogo. Quadratisch
   (viewBox 566x566), Höhe an der Bildhöhe des Förderlogos ausgerichtet. */
.brand-logo--mark {
    width: 44px;
    height: 44px;
    flex: none;
}

.site-header .nav-links {
    display: flex;
    gap: 4px;
    font-size: var(--font-size-sm);
    margin-left: auto;
}

.site-header .nav-links a {
    color: var(--muted);
    font-weight: var(--font-weight-medium);
    padding: 8px 10px;
    border-radius: 10px;
    white-space: nowrap;
    min-width: max-content;
}

.site-header .nav-links a:focus-visible,
.site-header .nav-links a:hover {
    background: var(--accent-surface);
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active {
    color: var(--text);
}

.site-header .nav-links a.active {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.site-header .nav-toggle {
    display: none;
    border: none;
    background: var(--accent);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.site-header .nav-toggle-icon {
    width: 18px;
    height: 12px;
    position: relative;
    display: inline-block;
}

.site-header .nav-toggle-icon::before,
.site-header .nav-toggle-icon::after,
.site-header .nav-toggle-icon span {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--brand-ink);
    border-radius: 999px;
}

.site-header .nav-toggle-icon::before {
    top: 0;
}

.site-header .nav-toggle-icon::after {
    bottom: 0;
}

.site-header .nav-toggle-icon span {
    top: 5px;
}

.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
    top: 5px;
    transform: rotate(45deg);
}

.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
    bottom: 5px;
    transform: rotate(-45deg);
}

.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-icon span {
    opacity: 0;
}

/* ── Nav search ───────────────────────────────────────── */
.site-header .nav-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--accent-soft);
    border: none;
    border-radius: 999px;
    padding: 0;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: none;
    margin-left: auto;
    transition:
        width 0.25s ease,
        border-radius 0.25s ease,
        padding 0.25s ease,
        background 0.15s,
        gap 0.25s ease;
}

/* Always open in the orange topbar, styled like active state */
.nav-topbar-inner .nav-search {
    width: 260px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border);
    border-bottom: 2px solid transparent;
    padding: 0 16px;
    gap: 8px;
    justify-content: flex-start;
    background: var(--surface);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-left: 0;
    flex-shrink: 0;
}

.site-header .nav-topbar-inner .nav-search:focus-within {
    height: 38px;
    border-bottom-color: var(--accent);
    border-radius: 8px 8px 0 0;
    flex: 1 1 260px;
    max-width: 480px;
    margin-left: 0;
}

/* Höhere Specificity als .site-header .nav-search input (Zeile weiter unten,
   kollabiert auf width:0/opacity:0) nötig, sonst gewinnt bei gleicher
   Specificity nur die Quellreihenfolge — Placeholder war dadurch erst ab
   :focus-within sichtbar statt "always open" wie im Kommentar oben gemeint. */
.site-header .nav-topbar-inner .nav-search input {
    flex: 1;
    width: auto;
    opacity: 1;
    cursor: text;
    color: var(--text);
}

.nav-topbar-inner .nav-search input::placeholder {
    color: var(--faint);
}

.nav-topbar-inner .nav-search .search-icon {
    color: var(--accent-ink);
}

.site-header .nav-search:focus-within {
    width: 400px;
    flex-shrink: 0;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 0 20px;
    gap: 8px;
    justify-content: flex-start;
    background: var(--surface);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.site-header .nav-search:has(input:focus-visible) {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border-bottom-color: var(--accent);
    border-bottom-width: 2px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.site-header .nav-search input {
    border: none;
    outline: none;
    background: transparent;
    width: 0;
    min-width: 0;
    opacity: 0;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--text);
    transition:
        width 0.25s ease,
        opacity 0.2s ease;
    cursor: pointer;
}

.site-header .nav-search:focus-within input {
    flex: 1;
    width: auto;
    opacity: 1;
    cursor: text;
}

.site-header .nav-search input::placeholder {
    color: var(--faint);
}

.site-header .nav-search .search-icon {
    color: var(--accent-ink);
    flex-shrink: 0;
}

.site-header .nav-search-close {
    display: none;
    border: none;
    background: transparent;
    padding: 0;
    margin-left: auto;
    cursor: pointer;
    color: var(--text-strong);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    line-height: var(--line-height-tight);
    /* Explizite Größe statt auto + SVG width/height:100% (.feather-icon):
       Letzteres kann je nach Browser (z. B. Safari) auf die Standardgröße
       des SVGs aufblasen, wenn der Button keine feste Dimension hat. */
    width: 16px;
    height: 16px;
}

.site-header .nav-search-close .feather-icon {
    width: 16px;
    height: 16px;
}

.site-header .nav-search-close:hover {
    color: var(--text);
}

.site-header .nav-search:focus-within .nav-search-close {
    display: flex;
}

/* Das Menü-Icon (Burger) wird bewusst nur innerhalb des schmalen
   @media (max-width: 720px)-Blocks weiter unten versteckt, wenn die Suche
   den ganzen Topbar-Platz braucht. Ohne Breitenbegrenzung hier würde das
   Icon auch auf breiteren Tablet-Breiten (721–860px) beim Fokussieren der
   Suche verschwinden, obwohl dort genug Platz für beides ist. */

.site-header:has(.nav-search:focus-within) .nav-search {
    margin-left: 0;
}

.site-header:has(.nav-search:focus-within) .nav-mainbar-inner .nav-links {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

/* ── Nav overflow / priority nav ──────────────────────── */
.site-header .nav-more {
    position: relative;
    display: none;
    align-items: center;
    flex-shrink: 0;
}

.site-header .nav-links[data-overflowing] {
    -webkit-mask-image: linear-gradient(
        to right,
        black calc(100% - 48px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        black calc(100% - 48px),
        transparent 100%
    );
}

.site-header .nav-more__toggle {
    border: none;
    background: transparent;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--muted);
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    line-height: var(--line-height-tight);
}

.site-header .nav-more__toggle:hover,
.site-header .nav-more[data-open] .nav-more__toggle {
    background: var(--accent-soft);
    color: var(--text);
}

.site-header .nav-more__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border-warm);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(48, 42, 35, 0.1);
    flex-direction: column;
    min-width: 180px;
    z-index: 30;
    overflow: hidden;
}

.site-header .nav-more[data-open] .nav-more__dropdown {
    display: flex;
}

.site-header .nav-more__dropdown a {
    padding: 12px 18px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--muted);
    border-bottom: 1px solid var(--paper-soft);
    white-space: nowrap;
}

.site-header .nav-more__dropdown a:last-child {
    border-bottom: none;
}

.site-header .nav-more__dropdown a:hover,
.site-header .nav-more__dropdown a.active {
    background: var(--accent-wash);
    color: var(--text);
}

.site-footer {
    /* Marken-Dunkelblau statt des neutralen --dark. Kontraste auf diesem
       Grund: Fließtext 14,72:1, die halbtransparenten Sekundärstufen
       (weiß 52 % / 50 %) 5,31 bzw. 4,99:1. */
    background: var(--brand-ink);
    color: var(--surface-muted);
    padding: 70px 0 40px;
    position: relative;
}

/* Footer-Markenspalte: HAWK, ZZHH, Fließtext, Förderlogo — jeweils
   in eigener Zeile untereinander. */
.site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    font-weight: var(--font-weight-semibold);
}

.site-footer .footer-brand .brand-logo {
    height: auto;
}

/* Zeile 2 der Markenspalte: ZZHH + HAWK Fakultät Gestaltung nebeneinander. */
.site-footer .footer-brand__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.funding-logo {
    display: block;
    width: 320px;
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

/* Förderlogo im Footer — wie in der Topbar ohne Platte, Rundung und
   Padding; das JPG bringt weißen Grund und Innenabstand selbst mit. */
.site-footer .footer-funding-logo {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
}

.site-footer__intro {
    max-width: 320px;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.52);
}

/* Instagram-Link unter dem Intro. Gleiche Zurueckhaltung wie der uebrige
   Footer-Text, beim Hover volle Deckkraft statt Farbwechsel -- der Footer
   traegt sonst keine Akzentfarbe. */
.footer-social {
    margin: 14px 0 18px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.52);
    transition: color 0.16s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    color: #fff;
}

/* Explizite Masse noetig: .feather-icon setzt global width/height auf 100%
   (atoms.css), das Icon fuellt sonst die ganze Linkbreite und quetscht den
   Text auf null. Groesse gehoert hier wie ueberall an das Elternelement. */
.footer-social .feather-icon {
    flex: none;
    width: 18px;
    height: 18px;
}

.site-footer .footer-bottom {
    margin-top: 32px;
    color: rgba(255, 255, 255, 0.52);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
}

.site-footer h2 {
    margin-bottom: 14px;
    font-size: var(--font-size-2xs);
    color: rgba(255, 255, 255, 0.5);
}

.site-footer ul {
    list-style: none;
    display: grid;
    gap: 8px;
}

.hero {
    background: var(--accent-faint);
    padding: 72px 0 40px;
    position: relative;
    overflow: hidden;
}

main > .hero:first-child {
    padding-top: 42px;
}

.hero::after {
    content: "";
    position: absolute;
    right: -10%;
    top: -24%;
    width: 60%;
    height: 170%;
    background: var(--accent-faint);
    transform: rotate(-12deg);
    z-index: 0;
}

.hero::before {
    content: "";
    position: absolute;
    left: -14%;
    bottom: -40%;
    width: 68%;
    height: 60%;
    background: var(--accent-faint);
    clip-path: polygon(0 70%, 80% 50%, 100% 100%, 0 100%);
    z-index: 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    gap: clamp(44px, 6vw, 84px);
    align-items: end;
    position: relative;
    z-index: 1;
}

.hero-copy {
    max-width: 640px;
    min-width: 0;
}

.hero-back-wrap {
    position: absolute;
    top: -7px;
    left: 32px;
}

.hero-back-wrap:empty {
    display: none;
}

.hero-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: 20px;
    background: var(--surface);
    border: none;
    color: var(--accent-ink);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.hero-back .feather-icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.hero-back__label {
    color: var(--muted);
}

.hero-copy h1,
.hero-copy .typo-h1 {
    font-size: var(--font-size-display);
    margin: 10px 0 14px;
    line-height: var(--line-height-tight);
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    /* manual statt auto: verhindert, dass der Browser mitten in einem Wort
       an eigenen Silbentrennungs-Punkten umbricht und damit ein bewusst
       gesetztes <wbr> (z. B. "Weiterbildungs<wbr>angebote") ignoriert bzw.
       an der falschen Stelle trennt. */
    hyphens: manual;
    text-wrap: balance;
}

/* Lange deutsche Komposita im Hero (z. B. "Weiterbildungsangebote"): etwas
   enger gesetzt, damit die Zeile haeufiger ungetrennt passt. Muss sie doch
   brechen, sorgt das &shy; im Titel zusammen mit hyphens:manual fuer einen
   echten Bindestrich statt eines wortlosen Umbruchs. */
.hero-copy .hero-title--tight {
    letter-spacing: -0.02em;
}

.hero-copy .hero-title-line {
    display: block;
}

.hero-copy .hero-title-line + .hero-title-line {
    margin-top: 0.08em;
}

.eyebrow {
    margin-top: 0;
}

.hero-subheadline {
    margin-top: 8px;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--accent-ink);
}

.hero-lead {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 18px;
}

.hero-lead p {
    flex: 1;
}

.lead-line {
    width: 6px;
    background: var(--accent);
    border-radius: 999px;
    flex: 0 0 auto;
    align-self: stretch;
    display: block;
}

.hero:has(.hero-back) .lead-line {
    display: none;
}

.hero-actions {
    margin-top: 22px;
    display: grid;
    gap: 14px;
}

/* .hero-actions ist ein Grid-Container -- direkte .btn-Kinder (z. B. "Zu den
   Stellenbörsen" auf der Jobbörse-Seite) wuerden vom Grid-Default
   justify-items:stretch sonst auf die volle Breite der Hero-Spalte
   gestreckt statt sich an ihrem Inhalt zu orientieren. Betrifft bewusst nur
   echte .btn-Elemente, nicht z. B. .pill-row (Startseite-Hero), die ihre
   eigene, absichtlich volle Breite behalten soll. */
.hero-actions > .btn {
    justify-self: start;
}

.hero-actions:empty {
    display: none;
}

/* Jobbörse-Hero: mehr Abstand über dem "Zu den Stellenbörsen"-Button --
   gezielt nur für diese Seite über body.page-jobboerse (siehe bodyClass in
   app/config/routes.php), NICHT an der Basis-Regel oben, da .hero-actions
   auch auf anderen Hero-Seiten verwendet wird (z. B. Startseite mit
   Pill-Row) und dort bereits passend aussieht. */
body.page-jobboerse .hero-actions {
    margin-top: 40px;
}

/* Startseite: Hinweis-Banner direkt unter dem Hero (Start der persönlichen
   Beratungsstelle). Zeitlich begrenzt, daher bewusst eigene Klasse statt
   einer generischen Komponente, damit er später rückstandsfrei entfernt
   werden kann (Markup in app/view/pages/home.php, Abschnitt 1b). */
.home-announcement {
    padding: 28px 0 0;
}

.home-announcement__box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 24px;
    /* Optik wie .faq-info-box.accent (molecules.css). */
    background: var(--accent-faint);
    border: 1px solid var(--accent-border-strong);
    border-radius: 12px;
    padding: 20px 24px;
}

/* Uhr-Symbol als Lasche, die oben rechts an der Oberkante der Box
   hängt (nur die unteren Ecken abgerundet). */
.home-announcement__badge {
    position: absolute;
    top: 0;
    right: 24px;
    display: flex;
    padding: 8px 10px 10px;
    background: var(--bg-soft);
    border: 1px solid var(--accent-border-strong);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    color: var(--text);
}

.home-announcement__badge .feather-icon {
    width: 20px;
    height: 20px;
}

.home-announcement__body {
    padding-right: 48px;
}

.home-announcement__eyebrow {
    margin: 0 0 4px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--accent-ink);
}

.home-announcement__title {
    margin: 0 0 8px;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--brand-ink);
}

.home-announcement__text {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--text);
    max-width: 62ch;
}

.home-announcement__contacts {
    display: grid;
    gap: 8px;
    /* Unten ausrichten, damit die Kontakte nicht an die Uhr-Lasche stoßen. */
    align-self: end;
}

.home-announcement__contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.home-announcement__contact .feather-icon {
    flex: none;
    width: 16px;
    height: 16px;
}

@media (max-width: 860px) {
    .home-announcement__box {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .home-announcement__body {
        padding-right: 0;
    }

    .home-announcement__contact {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.hero-meta {
    margin-top: 14px;
    color: var(--muted-deep);
    font-size: var(--font-size-base);
    max-width: 460px;
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px;
    margin-left: -4px;
}

.pill-row::-webkit-scrollbar {
    display: none;
}

.pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text);
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.hero-visual {
    display: grid;
    gap: 18px;
    justify-items: end;
    align-content: end;
    align-self: end;
}

.hero-illustration {
    width: 100%;
    max-width: 620px;
    height: auto;
    display: block;
}

.hero.hero--compact {
    padding-bottom: 40px;
}

.stacked-card-visual {
    position: relative;
    width: 440px;
    height: 440px;
    transform: translate(26px, 6px);
}

.stacked-card-visual__shadow {
    position: absolute;
    width: 320px;
    height: 320px;
    background: var(--accent-surface);
    border-radius: 20px;
    right: 32px;
    top: 84px;
    transform: rotate(-6deg);
}

.stacked-card-visual__back {
    position: absolute;
    width: 348px;
    height: 348px;
    background: var(--surface);
    border-radius: 20px;
    right: 10px;
    top: 74px;
    transform: rotate(-6deg);
}

.stacked-card-visual__front {
    position: absolute;
    width: 418px;
    height: 418px;
    background: var(--accent);
    border-radius: 20px;
    right: 6px;
    top: 10px;
    transform: rotate(8deg);
    display: grid;
    place-items: center;
}

.stacked-card-visual__icon {
    color: var(--dark);
}

.stacked-card-visual__icon.feather-icon {
    width: 54px;
    height: 54px;
    stroke-width: 1.9;
}

.stacked-card-visual__label {
    color: var(--dark);
    font-size: var(--font-size-2xs);
    position: absolute;
    bottom: 92px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.stacked-card-visual--compact .stacked-card-visual__label {
    display: none;
}

.hero-search,
.search-field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
}

.hero-search {
    gap: 12px;
    border-radius: 10px;
    padding: 16px 20px;
    width: min(480px, 96%);
}

.hero-search input,
.search-field input {
    border: none;
    outline: none;
    flex: 1;
    color: var(--text);
    font-family: inherit;
}

.hero-search:has(input:focus-visible),
.search-field:has(input:focus-visible),
.search-field:has(.explorer-suggest-trigger:focus-visible) {
    border-bottom-color: var(--accent);
    border-bottom-width: 2px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Aktiver Suchbegriff deutlich kennzeichnen (gleiche Optik wie der Fokus-
   Zustand, bleibt aber auch ohne Fokus bestehen) — .has-value wird bereits
   von attachSearchPreview() (shared/search-preview.js) getoggelt, war bisher
   aber ungestylt. */
.hero-search.has-value,
.search-field.has-value {
    border-bottom-color: var(--accent);
    border-bottom-width: 2px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.hero-search.has-value .suggest-clear,
.search-field.has-value .suggest-clear {
    color: var(--accent-ink);
}

.hero-search input {
    font-size: var(--font-size-sm);
}

.hero-search.small {
    width: min(460px, 100%);
    margin: 20px auto 16px;
}

.search-field {
    gap: 10px;
    border-radius: 8px;
    padding: 12px 14px;
    width: 100%;
}

.search-field input {
    font-size: var(--font-size-md);
}

.search-field.small {
    max-width: 320px;
}

/* iOS Safari zoomt beim Fokussieren automatisch in JEDES Textfeld mit
   Schriftgröße unter 16px hinein -- bei 0.92rem (~14.7px) betraf das auch
   die Suchfelder. 16px hebt das auf, ohne die Desktop-Optik zu ändern.
   Erfasst auch .nav-search input (Kopfzeilen-Suche, 0.86rem, Zeile ~468) --
   die ist auf JEDER Seite sichtbar (auch Arbeitsfelder) und war bisher nicht
   mit abgedeckt, obwohl sie denselben Zoom-Effekt auslöste. */
@media (max-width: 640px) {
    .hero-search input,
    .search-field input,
    .site-header .nav-search input {
        font-size: var(--font-size-base);
    }
}

.search-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-ink);
}

.section-heading__inner {
    display: grid;
    gap: 10px;
    max-width: 760px;
    margin-bottom: 28px;
}

/* Eigenständige Section-Überschriften außerhalb von render_section_heading()
   (z. B. Jobbörse: "Freie Träger der Kinder- und Jugendhilfe, ...") — gleiche
   Breitenbegrenzung wie .section-heading__inner, sonst laufen lange
   Überschriften über die volle Containerbreite und werden schwer lesbar.
   margin-bottom ebenfalls ergänzt: h3 hat sonst (globaler "* { margin: 0 }"-
   Reset, siehe base.css) keinerlei Abstand zum direkt folgenden Content
   (card-slider). */
.section-heading {
    max-width: 760px;
    margin-bottom: 20px;
}

.section-heading__inner--center {
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
    text-align: center;
}

.feature-card {
    text-decoration: none;
    color: inherit;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

/* Ein Teil der Karten ist <button> statt <a> (Karten, die ein Modal öffnen,
   siehe data-modal-trigger in quereinstieg.php/traeger.php). Frühere Version
   setzte .card-surface (display:flex, siehe card-primitives.js) direkt auf
   dieses <button> -- auf echtem iOS Safari (per iOS-Simulator o.ä. zu
   verifizieren, in Chromium/Devtools-Emulation nicht reproduzierbar) rendert
   ein natives Formularelement als Flex-Container seine Kinder teils
   nicht/verschoben, wodurch das per background-image gesetzte Bild in
   .feature-image (Kind-Element) nicht erschien. appearance:none allein löste
   das nicht zuverlässig. Robuster Fix: .card-surface liegt jetzt auf einem
   inneren <div> (siehe quereinstieg.php/traeger.php), das <button> selbst
   trägt nur noch .feature-card und wird hier auf einen unsichtbaren,
   layoutlosen Rahmen zurückgesetzt -- kein Flex-Container mehr auf einem
   nativen Formularelement. */
button.feature-card {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
}

.feature-image {
    background: var(--accent-faint);
    border-radius: 8px;
    border: 1px solid var(--accent-faint);
    height: 220px;
    margin-bottom: 6px;
    position: relative;
    overflow: hidden;
}

.feature-image::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--accent-soft);
    pointer-events: none;
}

.feature-image::after {
    content: "";
    position: absolute;
    bottom: -52px;
    right: -52px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--accent-soft);
    pointer-events: none;
}

.media-figure__frame {
    background: var(--surface-muted);
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    display: grid;
    grid-template-rows: 100%;
    align-items: stretch;
    justify-items: stretch;
    color: var(--faint);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-2xs);
    position: relative;
}

.media-figure__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.media-figure__frame--contain {
    background: transparent;
    border-color: transparent;
}

.media-figure__frame--contain img {
    object-fit: contain;
    padding: 20px;
}

.section-split__media {
    flex: 1 1 0;
    min-width: 0;
}

.section-split__content {
    flex: 1 1 0;
    min-width: 0;
}

.section-split__content--centered {
    max-width: 640px;
    margin: 0 auto;
}

.section-split__content--centered .btn {
    margin-top: 20px;
}

.cta-teaser-stack__row--centered {
    justify-content: center;
}

.cta-teaser-stack__row--centered .cta-teaser-stack__content {
    flex: 0 1 640px;
}

.section-split__content .badge {
    margin-bottom: 14px;
}

.cta-teaser-stack__content .badge {
    /* .badge ist ein <span> ohne eigenes "display" (default: inline) --
       vertikale Margins wirken auf Inline-Elemente per Spezifikation gar
       nicht, "margin-bottom" allein haette hier also keinen sichtbaren
       Effekt. */
    display: inline-block;
    margin-bottom: 14px;
}

.home-jobs-cta .btn {
    min-width: clamp(140px, 20vw, 180px);
}

.section-split__content .btn {
    margin-top: 20px;
}

.intro .section-split__layout {
    gap: 72px;
}

.intro-split {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-areas:
        "top media"
        "bottom media";
    align-items: center;
}

.intro-split .section-split__content-top {
    grid-area: top;
}

.intro-split .section-split__content-bottom {
    grid-area: bottom;
}

.intro-split .section-split__media {
    grid-area: media;
}

.intro .section-split__content h2,
.intro .section-split__content-top h2 {
    max-width: 520px;
}

.section-gray .section-split__layout,
.overview .section-split__layout {
    gap: 48px;
}

.search-section .muted {
    max-width: 760px;
}

.glossary .muted {
    max-width: 720px;
    margin: 0 auto;
}

.glossary-teaser__icon {
    display: block;
    width: 400px;
    height: 400px;
    object-fit: contain;
    margin: -16px auto -24px;
}

.glossary.section {
    padding-top: 40px;
}

.glossary .glossary-teaser__suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.contact-section {
    border-top: none;
    /* "Kontakt" in der Navigation verlinkt auf "/#kontakt" (siehe
       bindHashScrollFix() in shared/ui.js) -- ohne das würde der Abschnitt
       direkt unter dem Sticky-Header landen und teilweise verdeckt sein. */
    scroll-margin-top: calc(var(--site-header-height, 64px) + 16px);
}

.contact-section .split {
    gap: 52px;
}

.contact-actions {
    margin-top: 24px;
}

.contact-methods {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.contact-method {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--surface-muted);
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: var(--font-weight-medium);
    color: var(--muted);
    min-width: 210px;
    justify-content: center;
}

.contact-method--start {
    justify-content: flex-start;
}

.contact-method .feather-icon,
.profile-row .feather-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--accent-ink);
}

.profile-card {
    padding: 24px 18px;
    text-align: center;
}

.profile-card .profile-row {
    justify-content: center;
}

.profile-card .profile-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.profile-card .profile-role {
    font-size: var(--font-size-sm);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent-surface);
    margin: 0 auto 6px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar .feather-icon {
    width: 36px;
    height: 36px;
    color: var(--accent-ink);
}

/* ── Jobbörse ─────────────────────────────────────────────────────────────── */

.jobboerse-teaser__footer {
    margin-top: 32px;
    text-align: center;
}

.jobboerse-filters {
    margin-bottom: 32px;
}

.jobboerse-filters__fields {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.jobboerse-filters__label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 200px;
}

.job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.job-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    border-radius: 16px;
    text-decoration: none;
    color: var(--text);
    transition:
        box-shadow 0.18s,
        transform 0.18s;
}

.job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.job-card__title {
    font-size: var(--font-size-lg);
    margin: 4px 0 2px;
    line-height: var(--line-height-compact);
}

.job-card__employer {
    font-size: var(--font-size-sm);
}

.job-card__meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.job-card__location::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.35em;
    vertical-align: -0.15em;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z'%3E%3C/path%3E%3Ccircle%20cx%3D'12'%20cy%3D'10'%20r%3D'3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
}

.job-card__date {
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.job-card__cta {
    margin-top: auto;
    padding-top: 12px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--accent-ink);
}

.job-grid__loading {
    display: contents;
}

.job-skeleton {
    display: block;
    height: 160px;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--surface-muted) 25%, var(--border) 50%, var(--surface-muted) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.jobboerse-pagination {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
}

.jobboerse-source {
    margin-top: 24px;
    text-align: center;
}

.jobboerse-source a {
    color: var(--accent-ink);
}

.jobboerse-error,
.jobboerse-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px 0;
}

.jobboerse-link-card {
    color: var(--text);
    cursor: pointer;
    transition:
        box-shadow 0.18s,
        transform 0.18s;
}

.jobboerse-link-card strong {
    font-weight: var(--font-weight-semibold);
}

.jobboerse-link-card::before {
    display: none;
}

.jobboerse-link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.jobboerse-link-card:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.jobboerse-link-card__preview {
    position: relative;
    margin: -18px -20px 4px;
    border-radius: 13px 13px 0 0;
    overflow: hidden;
    height: 200px;
    background: var(--paper-soft);
}

.jobboerse-link-card__ext-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--surface);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--line-height-none);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.jobboerse-link-card__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.jobboerse-link-card__preview--placeholder {
    background: var(--bg-soft);
    display: grid;
    place-items: center;
}

.jobboerse-link-card__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--surface-warm);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-strong);
}

.jobboerse-link-card .card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── /Jobbörse ────────────────────────────────────────────────────────────── */

.profile-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: var(--font-size-xs);
    color: var(--muted-deep);
}

/* ── Contact section layout ────────────────────────────── */
.contact-section__header {
    max-width: 760px;
    margin-bottom: 40px;
}

.contact-section__header .badge {
    display: block;
    margin-bottom: 16px;
}

.contact-section__layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: stretch;
}

.contact-section__persons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form-wrap {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--paper-soft);
    border-radius: 16px;
    padding: 32px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 16px;
}

.contact-form__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-form__row:last-of-type {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-form__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--muted);
}

.contact-form__input {
    border: 1px solid var(--border-warm);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: var(--font-size-md);
    color: var(--text);
    background: var(--bg-soft);
    outline: none;
    transition: border-color 0.15s;
}

.contact-form__input:focus {
    border-color: var(--accent);
    background: var(--surface);
}

.contact-form__textarea {
    resize: vertical;
    flex: 1;
    min-height: 120px;
}

.contact-form__submit {
    align-self: flex-start;
    margin-top: 8px;
}

/* Contact form status messages (AJAX) */
.contact-form__status {
    display: none;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.contact-form[data-contact-state="sending"] .contact-form__submit {
    opacity: 0.6;
    pointer-events: none;
}

.contact-form[data-contact-state="sending"] .contact-form__status {
    display: block;
    color: var(--muted);
    font-style: italic;
}

.contact-form[data-contact-state="sending"] .contact-form__status::before {
    content: "Senden…";
}

.contact-form[data-contact-state="success"] .contact-form__status {
    display: block;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.contact-form[data-contact-state="error"] .contact-form__status {
    display: block;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.feedback-page {
    max-width: 640px;
}

.feedback-page .section-heading__inner {
    margin-bottom: 32px;
}

.feedback-page .contact-form-wrap {
    padding: 32px;
}

.contact-form__privacy {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--muted);
    line-height: var(--line-height-base);
}

.contact-form__privacy a,
.contact-form__consent a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.contact-form__privacy a:hover {
    color: var(--text);
}

@media (max-width: 640px) {
    .feedback-page .contact-form-wrap {
        padding: 20px;
    }
}

.quereinstieg-intro {
    padding-bottom: 0;
}

.info-highlight-section {
    padding-top: 0;
}

.info-highlight {
    align-items: stretch;
    margin-top: 36px;
}

.info-highlight__card {
    flex: 1.2 1 0;
    min-width: 0;
    padding: 28px;
    background: var(--accent-wash);
    border: 1px solid #f6dca8;
    border-radius: 16px;
}

.info-highlight__list {
    flex: 0.8 1 0;
    min-width: 0;
}

.info-highlight__list ol {
    margin: 12px 0 0 18px;
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: var(--font-size-md);
}

.cta-teaser-stack__rows {
    display: grid;
    gap: 32px;
}

.cta-teaser-stack__row {
    display: flex;
    gap: 32px;
    align-items: center;
}

.cta-teaser-stack__row > * {
    flex: 1 1 0;
}

.cta-teaser-stack__content .btn {
    margin-top: 20px;
}

.stories {
    border-top: 1px solid var(--paper-soft);
}

/* Helleres Grau als die direkt folgende .contact-section (var(--surface-muted)) — sonst
   sind beide Sections im Übergang kaum zu unterscheiden. */
.stories.section-gray {
    background: var(--bg-soft);
}

.stories .section-heading__inner {
    margin-bottom: 40px;
}

.story-media {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #3f3f3f;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
}

.play-btn {
    width: 56px;
    height: 56px;
    background: var(--surface);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--accent);
}

.play-btn .feather-icon {
    width: 24px;
    height: 24px;
    margin-left: 2px;
    stroke: none;
    fill: currentColor;
}

/* Arbeitsfelder-Accordion "Video"-Sektion (arbeitsfelder-content.php,
   $videoSection): Klick-zum-Laden-Facade statt eager <iframe>, gleicher
   16:9-Dunkelflächen-/Play-Button-Look wie .story-media/.play-btn oben,
   damit Video-Vorschauen sitenweit gleich aussehen. Der echte Player wird
   erst per Klick nachgeladen, siehe .af-video-facade-Handler in
   frontend/js/features/arbeitsfelder/index.js. */
.af-video-wrap {
    max-width: 480px;
}

.af-video-facade,
.video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: #3f3f3f;
    cursor: pointer;
}

.af-video-facade img,
.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Thumbnails sind nicht immer randscharf 16:9 -- leicht abgedunkelt,
       damit der weiße Play-Button auch auf hellen Standbildern lesbar bleibt. */
    filter: brightness(0.85);
}

.af-video-facade .play-btn,
.video-facade .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform 0.15s ease;
}

.af-video-facade:hover .play-btn,
.af-video-facade:focus-visible .play-btn,
.video-facade:hover .play-btn,
.video-facade:focus-visible .play-btn {
    transform: translate(-50%, -50%) scale(1.08);
}

/* Bild-Karte in render_video_grid_php ("image" statt "video"): dieselbe
   16:9-Flaeche wie die Video-Facade, aber ohne Play-Button. Bewusst NICHT
   .video-facade wiederverwendet — deren brightness(0.85) dunkelt das Bild
   ab, damit der weisse Play-Button lesbar bleibt; ohne Button waere das
   nur ein grundloses Abdunkeln. overflow:hidden, damit das Bild den
   border-radius von .story-media mitnimmt. */
.story-media--image {
    overflow: hidden;
}

.story-media--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* .video-facade setzt margin: 0 — der Abstand zum Karten-Titel aus
   .story-media muss deshalb erneut gesetzt werden. */
.story-media.video-facade {
    margin-bottom: 8px;
}

/* Player im Video-Modal (bindVideoCards() in frontend/js/shared/ui.js
   erzeugt dieses <iframe> beim Oeffnen und entfernt es beim Schliessen). */
.video-embed {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 10px;
}

.af-video-wrap iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 10px;
}

.story-card .quote {
    color: var(--muted);
    font-style: italic;
}

.story-card {
    transition: box-shadow 0.18s ease;
}

.story-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Name der porträtierten Person, klein über der Zitat-Headline
   (render_video_grid_php()). */
.story-card-name {
    display: block;
    /* .card-surface setzt bereits "gap: 10px" zwischen allen Kind-Elementen
       -- ohne einen negativen Margin hier käme zum Gap noch ein eigener
       Abstand oben drauf und der Name stünde zu weit von der Headline weg. */
    margin-bottom: -6px;
    font-size: var(--font-size-xs);
    color: var(--muted);
}

/* Karten mit hinterlegtem Video oeffnen als Ganzes das Video-Modal
   (bindVideoCards()), nicht nur der Play-Button — deshalb auch auf der
   ganzen Karte der Zeiger. */
.story-card--video {
    cursor: pointer;
}

/* Artikel-Karte in render_video_grid_php ("href" statt "video", z. B. die
   Gastbeitraege in "Gute Gruende" auf der Startseite): komplett klickbar,
   nicht nur der "Mehr erfahren"-Link — gleiche Stretched-Link-Technik wie
   .home-faq-cards in molecules.css. Der Link bleibt das fokussierbare
   Element, das ::after legt nur die Klickflaeche darueber. */
.story-card--article {
    position: relative;
    cursor: pointer;
}

.story-card--article .card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Videocards (render_video_grid_php): Fließtext auf 16px statt der
   Standard-.typo-small-Größe, nach 3 Zeilen mit "…" abschneiden statt
   unterschiedlich lange Karten nebeneinander stehen zu lassen — dadurch
   werden nebeneinanderstehende Karten auch ohne manuelle Höhenangleichung
   gleich hoch. */
.story-card > p {
    font-size: var(--font-size-base);
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Nur die Artikelkarte in "Gute Gründe": echter Button statt Textlink. */
.story-card .story-card__cta {
    min-width: 0;
    width: fit-content;
    margin-top: auto;
    align-self: flex-start;
    padding: 10px 18px;
    font-size: var(--font-size-sm);
}

/* "Silber"-Karten (gleicher Grauton wie .section-gray/.section.gray) statt
   des weißen .card-surface-Standards — auf der etwas helleren .stories-
   Section-Fläche (var(--bg-soft)) heben sich die Karten so sichtbar ab.
   Compound-Selektor nötig, damit dies IMMER vor .card-surface (per JS zur
   Laufzeit nachträglich injiziert, siehe card-primitives.js) gewinnt —
   bei gleicher Specificity (0,1,0) entscheidet sonst nur die Einfüge-
   reihenfolge im DOM, die für spät injizierte <style>-Tags nicht
   garantiert vor den statischen Stylesheets liegt. */
.story-card.story-card--silver {
    background: var(--surface-muted);
    border-color: var(--border);
}

/* Vorschau-Kacheln (z. B. Träger-Seite "Trägerrelevante FAQs"): silberner
   Farbton wie oben, aber bewusst ohne Kasten-Optik (kein Rahmen/Schatten) —
   gleicher Compound-Selektor-Grund wie .story-card--silver. */
.story-card.story-card--flat {
    border: none;
    box-shadow: none;
}

.loading-state {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--paper-soft);
    color: var(--muted);
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--paper-soft);
}

.loading-state .spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid var(--border-warm-strong);
    border-top-color: var(--accent);
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.metric-label {
    font-size: var(--font-size-2xs);
    color: rgba(24, 23, 22, 0.45);
}

.glossar-term {
    border-bottom: 1px dashed var(--accent);
    cursor: pointer;
    background: var(--accent-faint);
    padding: 0 2px;
    border-radius: 2px;
}

.glossar-tooltip {
    position: absolute;
    width: min(700px, calc(100vw - 24px));
    background: var(--bg-soft);
    color: var(--text-strong);
    border: 1px solid var(--border-warm);
    padding: 20px 24px 24px;
    border-radius: 14px;
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
    z-index: 120;
}

.glossar-tooltip.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.glossar-tooltip::after {
    content: none;
}

.glossar-tooltip p {
    margin: 0;
}

.glossar-tooltip-text {
    padding-right: 40px;
}

.glossar-tooltip p strong {
    color: var(--text);
}

.glossar-tooltip-source {
    margin-top: 10px !important;
    font-size: var(--font-size-xs);
    color: var(--muted-strong);
    padding-right: 40px;
}

.glossar-tooltip-source:empty {
    display: none;
}

.glossar-tooltip-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.glossar-tooltip-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: var(--accent-ink);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.glossar-tooltip-link:hover,
.glossar-tooltip-link:focus-visible {
    text-decoration: underline;
}

@media (max-width: 960px) {
    .glossar-tooltip {
        width: min(560px, calc(100vw - 24px));
        padding: 18px 18px 20px;
        font-size: var(--font-size-md);
    }
}

@media (max-width: 640px) {
    .glossar-tooltip {
        width: calc(100vw - 24px);
        font-size: var(--font-size-base);
    }

    .glossar-tooltip-text {
        padding-right: 44px;
    }
}

@container site-nav (max-width: 720px) {
    .site-header:has(.nav-search:focus-within) .nav-search,
    .site-header .nav-search:focus-within {
        flex: 1;
        width: 100%;
        max-width: none;
    }

    /* Überschreibt die immer aktive .nav-topbar-inner .nav-search:focus-within
       (Zeile ~410, feste 260px) — auf schmalen Viewports soll das Suchfeld
       beim Öffnen die volle Breite einnehmen statt auf 260px begrenzt zu
       bleiben. */
    .site-header .nav-topbar-inner .nav-search:focus-within {
        flex: 1;
        width: 100%;
        max-width: none;
    }

    .site-header .nav-links[data-overflowing] {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .nav-mainbar {
        position: relative;
    }

    .nav-mainbar-inner {
        position: static;
    }

    .site-header .nav-links {
        position: absolute;
        top: 100%;
        /* Bezug ist .nav-mainbar, nicht der eingerückte Container — dadurch
           reicht das Menü bis an den Rand und der Einzug kommt allein aus
           dem Padding der Einträge (20px, wie .container hier). */
        left: 0;
        right: 0;
        background: var(--surface);
        padding: 10px 0 0;
        flex-direction: column;
        gap: 0;
        display: none;
        margin: 0;
        z-index: 20;
        box-shadow: 0 18px 40px rgba(48, 42, 35, 0.08);
        overflow-y: auto;
    }

    .site-header .nav-links.open {
        display: flex;
    }

    .site-header .nav-toggle {
        display: inline-flex;
    }

    .site-header .nav-links a {
        width: 100%;
        padding: 18px 20px;
        border-radius: 0;
        border-bottom: 1px solid var(--border-warm);
        font-size: var(--font-size-nav);
        font-weight: var(--font-weight-medium);
        color: var(--muted);
        white-space: normal;
    }

    .site-header .nav-links a:last-child {
        border-bottom: 0;
    }

    .site-header .nav-links a:hover,
    .site-header .nav-links a:focus-visible,
    .site-header .nav-links a.active {
        background: var(--accent-wash);
        color: var(--text-strong);
        border-bottom-color: var(--border-warm);
        padding-bottom: 18px;
    }
}

@media (max-width: 720px) {
    .site-header:has(.nav-search:focus-within) .nav-topbar-inner {
        gap: 0;
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-header:has(.nav-search:focus-within) .brand,
    .site-header:has(.nav-search:focus-within) .nav-toggle,
    .site-header:has(.nav-search:focus-within) .nav-links,
    .site-header:has(.nav-search:focus-within) .nav-more {
        visibility: hidden;
        width: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        flex-shrink: 1;
        min-width: 0;
    }
}

@container site-nav (max-width: 640px) {
    .site-header .nav-links {
        left: 0;
        right: 0;
        top: 100%;
    }

    .site-header .nav-links a {
        padding: 16px 18px;
        font-size: var(--font-size-md);
    }

    .site-header .nav-links a:hover,
    .site-header .nav-links a:focus-visible,
    .site-header .nav-links a.active {
        padding-bottom: 16px;
    }
}

/* Mobile-only burger menu extras (hidden on desktop) */
.nav-mobile-extra {
    display: none;
}

/* ── Two-row nav: mobile burger ────────────────────────── */
@media (max-width: 860px) {
    /* Mobil klebt nur die Topbar (68px), Reihe 2 scrollt weg. Der Wert
       steuert die Sticky-Offsets und scroll-margin der Unterseiten und
       darf deshalb nur den fixierten Teil abdecken. */
    :root {
        --site-header-height: 72px;
    }

    /* Der Burger bekommt dieselbe Fläche wie das Suchfeld daneben: weiß,
       gleiche Höhe, gleicher Rand und Innenschatten. Die Grundregel setzt
       var(--accent) als Hintergrund — das war auf dem gleichfarbigen Balken
       unsichtbar und trug nur, solange das Icon weiß war. Seit das Icon in
       --brand-ink steht, braucht es die helle Fläche (16,19:1). */
    .site-header .nav-toggle {
        display: inline-flex;
        width: 38px;
        height: 38px;
        background: var(--surface);
        border: 1px solid var(--border);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    /* Hide topbar links — moved into burger menu */
    .nav-topbar-links {
        display: none;
    }

    /* Show Lexikon + Kontakt inside burger */
    .nav-mobile-extra {
        display: flex;
    }

    /* Gleiche Optik wie die Desktop-Suche (Zeile ~395) — nur schmaler, weil
       im Topbar auf mobil/Tablet weniger Platz zur Verfügung steht. */
    .nav-topbar-inner .nav-search {
        width: 180px;
        height: 38px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--surface);
        padding: 0 14px;
        gap: 8px;
        justify-content: flex-start;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
        margin-left: auto;
    }

    .nav-topbar-inner .nav-search input {
        width: auto;
        flex: 1;
        opacity: 1;
        cursor: text;
        color: var(--text);
    }

    .nav-topbar-inner .nav-search input::placeholder {
        color: var(--faint);
    }

    .nav-topbar-inner .nav-search .search-icon {
        color: var(--accent-ink);
    }

    /* Mobil klebt nur die Topbar. Reihe 2 mit dem Förderlogo scrollt mit
       dem Inhalt weg — deshalb hier ein deckendes Weiß statt der sonst
       leicht transparenten Fläche, sonst schiene der Inhalt hindurch. */
    .site-header {
        position: static;
    }

    .nav-topbar {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .nav-mainbar {
        background: var(--surface);
        border-bottom: 1px solid rgba(232, 227, 221, 0.92);
    }

    .nav-mainbar-inner {
        flex-direction: column;
        padding-block: 0;
        align-items: stretch;
        gap: 0;
    }

    .nav-mainbar-funding {
        width: 148px;
        align-self: flex-start;
    }

    /* Navigation einklappen. Denselben Mechanismus verwendet der 640er-
       Block bereits für das Dropdown; hier wiederholt, damit er auch im
       Bereich 641-860px greift. Früher klappte stattdessen die ganze
       Reihe 2 zusammen — das geht nicht mehr, seit dort das Förderlogo
       dauerhaft stehen bleibt. */
    .site-header .nav-links {
        display: none;
    }

    .site-header .nav-links.open {
        display: flex;
        /* Rest-Viewport unter der klebenden Topbar, Inhalt scrollt —
           sonst ragten die letzten Einträge unter dem sichtbaren Rand. */
        max-height: calc(100vh - var(--site-header-height));
        max-height: calc(100dvh - var(--site-header-height));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .site-header .nav-links {
        flex-direction: column;
        width: 100%;
        margin: 0;
        gap: 0;
    }

    /* Das Aufklappmenü läuft über die volle Leistenbreite, den Einzug
       bringen die Einträge selbst mit. So sitzt der Menütext auf derselben
       Kante wie Logo und Seiteninhalt, während Trennlinien und Hover-Fläche
       bis zum Rand reichen. Die negativen Ränder heben den Einzug von
       .container wieder auf und müssen deshalb zu ihm passen: 32px hier,
       20px ab 640px abwärts.

       Achtung: Weiter oben in dieser Datei steht ab Zeile ~2200 ein
       @container site-nav (max-width: 720px) mit einem vollständigen Satz
       Mobil-Regeln für .nav-links. Der Container ist .nav-topbar-inner,
       das Menü liegt aber in .nav-mainbar-inner — jene Regeln greifen
       also nie. Die hier sind die wirksamen. */
    .site-header .nav-links {
        margin-inline: -32px;
        width: calc(100% + 64px);
    }

    .site-header .nav-links a {
        width: 100%;
        padding: 16px 32px;
        border-radius: 0;
        border-bottom: 1px solid var(--border-warm);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        color: var(--muted);
        white-space: normal;
    }

    .site-header .nav-links a:last-child {
        border-bottom: none;
    }

    .site-header .nav-links a:hover,
    .site-header .nav-links a.active {
        background: var(--accent-wash);
        color: var(--text-strong);
    }

    /* Unterhalb von 640px polstert .container mit 20px statt 32px. */
    @media (max-width: 640px) {
        .site-header .nav-links {
            margin-inline: -20px;
            width: calc(100% + 40px);
        }

        .site-header .nav-links a {
            padding: 16px 20px;
        }
    }
}

@media (max-width: 420px) {
    .nav-topbar-inner .nav-search {
        width: 38px;
        padding: 0;
        gap: 0;
        border-radius: 999px;
        justify-content: center;
    }

    /* Höhere Specificity als die immer aktive
       .site-header .nav-topbar-inner .nav-search input (Zeile ~424, setzt
       unconditional opacity:1) nötig, sonst gewinnt die dort per Specificity
       und wird das Icon-only-Collapse hier wirkungslos. */
    .site-header .nav-topbar-inner .nav-search:not(:focus-within) input {
        width: 0;
        flex: 0;
        opacity: 0;
    }

    /* Nach dem Antippen: Icon-only-Kreis wieder zum normalen Suchfeld
       aufklappen (Breite kommt bereits aus der Container-Query oben). */
    .site-header .nav-topbar-inner .nav-search:focus-within {
        border-radius: 8px 8px 0 0;
        justify-content: flex-start;
        gap: 8px;
        padding: 0 16px;
    }
}

@media (max-width: 960px) and (min-width: 861px) {
    :root {
        --site-header-height: 116px;
    }
}

@media (max-width: 960px) {
    .cta-teaser-stack__row {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-teaser-stack__row .media-figure__frame {
        flex: 0 0 auto;
        width: min(100%, 320px);
        margin: 0 auto;
    }

    .contact-method {
        width: 100%;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .site-footer {
        text-align: left;
    }

    .site-footer ul {
        justify-items: start;
    }

    .site-footer .footer-brand {
        align-items: flex-start;
    }
}

.overview {
    background: var(--surface);
}

@media (max-width: 640px) {
    .glossary .container.center {
        text-align: left;
    }

    .glossary .muted {
        margin: 0;
    }

    .glossary .glossary-teaser__suggestions {
        width: 100%;
        justify-content: flex-start;
    }
}

.scroll-top {
    display: none;
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: var(--accent);
    font-weight: var(--font-weight-semibold);
    font-size: 0;
    color: var(--brand-ink);
}

.scroll-top.show {
    display: grid;
    place-items: center;
}

.scroll-top::before {
    content: none;
}

.scroll-top .feather-icon {
    width: 18px;
    height: 18px;
    display: block;
}

@media (max-width: 900px) {
}

@media (max-width: 960px) {
    .preview-gate__panel {
        grid-template-columns: 1fr;
    }

    .preview-gate__intro h1 {
        max-width: 12ch;
    }

    .contact-section .split {
        grid-template-columns: 1fr;
    }

    .contact-section__layout {
        grid-template-columns: 1fr;
    }

    .intro-split {
        grid-template-columns: 1fr;
        grid-template-areas:
            "top"
            "media"
            "bottom";
        gap: 24px;
    }
}

@media (max-width: 1000px) {
    .section-split__layout {
        flex-direction: column;
    }

    .section-split__media,
    .section-split__content {
        width: 100%;
    }
}

/* Zwischen dem gestapelten Layout (<=820px) und breiten Viewports teilt sich
   der Hero sonst in zwei fast gleich breite Spalten -- die Textspalte wird
   dabei so schmal, dass lange Komposita im Titel (z. B.
   "Weiterbildungsangebote") auf drei Zeilen laufen. Hier bekommt der Text
   mehr Gewicht, die Illustration darf entsprechend schmaler werden. */
@media (min-width: 821px) and (max-width: 1100px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(230px, 1fr);
        gap: clamp(24px, 3.5vw, 48px);
    }
}

@media (max-width: 820px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        order: -1;
        justify-items: center;
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (min-width: 641px) and (max-width: 820px) {
    .hero-visual {
        max-width: 640px;
    }

    .hero-grid::before {
        content: "";
        position: absolute;
        left: -160px;
        top: -160px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: var(--accent-soft);
        pointer-events: none;
        z-index: -1;
    }

    .hero-grid::after {
        content: "";
        position: absolute;
        right: -180px;
        top: 50%;
        transform: translateY(-50%);
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: var(--accent-soft);
        pointer-events: none;
        z-index: -1;
    }
}

@media (min-width: 821px) and (max-width: 920px) {
    .hero-grid::after {
        content: "";
        position: absolute;
        right: -80px;
        top: -120px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: var(--accent-soft);
        pointer-events: none;
        z-index: -1;
    }
}

@media (max-width: 640px) {
    .hero-copy h1,
    .hero-copy .typo-h1 {
        margin-bottom: 6px;
    }

    .hero-actions {
        margin-top: 10px;
    }

    body.page-jobboerse .hero-actions {
        margin-top: 24px;
    }

    .preview-gate__shell {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .preview-gate__panel {
        padding: 22px;
        border-radius: 24px;
    }

    .preview-gate__form {
        padding: 20px;
        border-radius: 20px;
    }

    .preview-gate__input-wrap {
        grid-template-columns: 1fr;
    }

    .preview-gate__toggle {
        width: 100%;
    }

    .hero-back-wrap {
        top: 12px;
        left: 20px;
    }

    .hero.hero--compact {
        padding-bottom: 40px;
    }

    .hero {
        padding: 24px 0 40px;
    }

    .hero-visual {
        max-width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: -154px;
        transform: none;
    }

    .hero-visual--image {
        margin-bottom: 0;
        max-width: 100%;
    }

    .hero--with-image {
        padding-bottom: 24px;
    }

    .hero--with-image .hero-grid {
        gap: 16px;
    }

    .hero-visual .stacked-card-visual {
        width: 286px;
        height: 286px;
        transform: none;
    }

    .hero-visual .stacked-card-visual .stacked-card-visual__shadow,
    .hero-visual .stacked-card-visual .stacked-card-visual__back,
    .hero-visual .stacked-card-visual .stacked-card-visual__front {
        width: 186px;
        height: 186px;
    }

    .hero-illustration {
        width: 100%;
        max-width: none;
    }

    .hero-lead {
        font-size: var(--font-size-md);
    }

    .glossary .hero-search.small {
        margin-left: 0;
        margin-right: 0;
    }

    .intro .section-split__layout {
        gap: 18px;
    }

    .glossary .section-heading__inner--center,
    .stories .section-heading__inner--center {
        margin-left: 0;
        margin-right: 0;
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .lead-line {
        height: 24px;
    }

    .stories .container.center {
        text-align: left;
    }

    .site-footer {
        text-align: left;
    }

    .site-footer ul {
        justify-items: start;
    }

    .site-footer .footer-brand {
        align-items: flex-start;
    }
}

/* === utilities.css === */
.intro .muted {
  max-width: 520px;
}

/* === features/map.css === */
.section-map {
  padding: 0;
  height: calc(100vh - var(--site-header-height));
  background: var(--bg-soft);
  overflow: hidden;
}

.matrix-map-container {
  width: 100%;
  height: 480px;
  margin-top: 20px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-muted);
  position: relative;
  z-index: 1;
}

.map-layout {
  display: flex;
  height: 100%;
  position: relative;
}

.map-sidebar {
  width: 380px;
  min-width: 320px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.map-sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.map-sidebar-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  margin: 0 0 12px;
}

.map-search-wrap {
  margin-bottom: 12px;
}

.map-search-wrap .search-field {
  width: 100%;
}

.map-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--dark);
}

.map-sidebar-results {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.map-result-count {
  padding: 12px 20px;
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.map-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.map-sidebar-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease;
}

.map-sidebar-item:hover {
  background: var(--bg-soft);
}

.map-sidebar-item.is-highlighted {
  background: var(--accent-wash);
}

.map-sidebar-item-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
  margin-top: 2px;
}

.map-sidebar-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.map-sidebar-item-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--text);
  line-height: var(--line-height-compact);
}

.map-sidebar-item-cat {
  font-size: var(--font-size-xs);
  color: var(--accent-ink);
  font-weight: var(--font-weight-medium);
}

.map-sidebar-item-location {
  font-size: var(--font-size-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

.map-sidebar-hint {
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin: 0;
  line-height: var(--line-height-compact);
}

.map-main {
  flex: 1;
  position: relative;
  min-width: 0;
}

.map-container {
  width: 100%;
  height: 100%;
  background: var(--surface-muted);
}

.map-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.15s ease;
}

.map-btn:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.map-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.map-btn svg {
  flex-shrink: 0;
}

.map-loading {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.map-loading p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text);
}

.map-no-results {
  padding: 24px;
  text-align: center;
  margin: 0;
}

.map-marker-icon {
  background: none !important;
  border: none !important;
}

.map-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  transition: all 0.2s ease;
  cursor: pointer;
}

.map-marker svg {
  transform: rotate(45deg);
}

.map-user-icon {
  background: none !important;
  border: none !important;
}

.map-user-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  border: 3px solid white;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3);
  animation: map-user-pulse 2s ease-in-out infinite;
}

@keyframes map-user-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.1); }
}

.leaflet-popup-content,
.leaflet-tooltip {
  font-family: var(--font-sans) !important;
}

body.q-filter-open .leaflet-control-zoom {
  display: none;
}

.map-popup {
  font-family: var(--font-sans);
  max-height: 280px;
  overflow-y: auto;
}

.map-popup-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.map-popup-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.map-popup-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.map-popup-item:last-child {
  border-bottom: 0;
}

.map-popup-item--clickable {
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.map-popup-item--clickable:hover {
  background: var(--bg-soft);
}

.map-popup-icon {
  font-size: var(--font-size-sm);
  flex-shrink: 0;
  margin-top: 1px;
}

.map-popup-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.map-popup-text strong {
  font-size: var(--font-size-sm);
  color: var(--text);
  display: block;
  line-height: var(--line-height-compact);
}

.map-popup-cat {
  font-size: var(--font-size-2xs);
  color: var(--accent-ink);
  font-weight: var(--font-weight-medium);
}

.map-popup-inst {
  font-size: var(--font-size-2xs);
  color: var(--muted);
}

.leaflet-popup-content-wrapper {
  border-radius: 10px;
}

.leaflet-popup-content {
  margin: 12px 16px;
  font-family: inherit;
  line-height: var(--line-height-compact);
}

@media (max-width: 900px) {
  .map-layout {
    flex-direction: column;
    height: auto;
  }

  .map-sidebar {
    width: 100%;
    min-width: 0;
    max-height: 400px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .map-main {
    height: 500px;
  }

  .map-controls {
    top: 10px;
    right: 10px;
  }

  .map-btn {
    padding: 5px 10px;
    font-size: var(--font-size-xs);
    gap: 4px;
  }
}

/* === features/booking.css === */
/* Beratungstermin-Buchung (app/view/pages/beratungstermin.php +
   frontend/js/features/booking/index.js). Baut auf den Kontaktformular-
   Bausteinen (.contact-form*) auf und ergänzt nur die Kalender-/
   Slot-Auswahl. */

.booking {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 36px;
}

.booking__calendar {
  background: var(--surface);
  border: 1px solid var(--paper-soft);
  border-radius: 16px;
  padding: 28px;
}

.booking__loading {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.booking__error {
  padding: 12px 16px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.booking__days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.booking-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.booking-day:hover {
  border-color: var(--accent);
}

.booking-day.is-active {
  border-color: var(--accent);
  background: var(--accent-faint);
}

.booking-day__weekday {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.booking-day__date {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.booking__slots-wrap {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.booking__slots-title {
  margin: 0 0 14px;
}

.booking__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.booking-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 15px;
  border: 1px solid var(--surface-warm);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.booking-slot__type {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-regular);
  opacity: 0.85;
}

.booking-slot:hover {
  border-color: var(--accent);
}

.booking-slot.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--brand-ink);
}

.booking__form-wrap {
  gap: 0;
}

.booking__selection {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.booking__optional {
  font-weight: var(--font-weight-regular);
  color: var(--faint);
}

.booking__consent {
  margin-top: 4px;
}

.booking__consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Honeypot – für Menschen unsichtbar, für Bots ein verlockendes Feld. */
.booking__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-section__booking {
  margin: 20px 0 0;
}

@media (max-width: 900px) {
  .booking {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .booking__calendar,
  .booking__form-wrap {
    padding: 20px;
  }
}

/* === features/insights.css === */
/* ── Analytics Dashboard ──────────────────────────────────── */

.analytics-shell {
    padding-bottom: 80px;
    background: var(--paper);
    min-height: 100vh;
}

.analytics-content.section {
    padding-top: 40px;
    padding-bottom: 80px;
}

.analytics-toolbar {
    --analytics-control-h: 32px;
    --analytics-control-radius: 6px;
    --analytics-control-pad: 12px;
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.analytics-toolbar-range {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px 12px;
    width: 100%;
    min-width: 0;
}

.analytics-toolbar .tab-row {
    margin-bottom: 0;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
}

.analytics-toolbar .tab {
    height: var(--analytics-control-h);
    padding: 0 var(--analytics-control-pad);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--analytics-control-radius);
    box-sizing: border-box;
    font-size: var(--font-size-xs);
}

.analytics-range-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    height: var(--analytics-control-h);
    padding-right: 16px;
}

.analytics-range-slider .analytics-chart-slider-window {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: var(--font-size-xs);
}

.analytics-range-slider .analytics-chart-slider-control {
    flex: 1 1 auto;
    min-width: 100px;
}

.analytics-keyword-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.analytics-keyword-form {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.analytics-keyword-form .btn {
    min-width: 0;
    height: var(--analytics-control-h);
    padding: 0 var(--analytics-control-pad);
    border-radius: var(--analytics-control-radius);
    font-size: var(--font-size-xs);
}

.analytics-keyword-input {
    width: 180px;
    min-width: 140px;
    height: var(--analytics-control-h);
    padding: 0 var(--analytics-control-pad);
    border: 1px solid var(--border);
    border-radius: var(--analytics-control-radius);
    background: var(--surface);
    font: inherit;
    font-size: var(--font-size-xs);
    color: var(--text);
}

.analytics-keyword-input:focus {
    outline: none;
    border-color: var(--accent);
}

.analytics-keyword-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
    flex: 0 1 auto;
}

.analytics-keyword-chips:empty {
    display: none;
}

.analytics-keyword-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--analytics-control-h);
    padding: 0 10px 0 var(--analytics-control-pad);
    border-radius: var(--analytics-control-radius);
    border: 1px solid var(--filter-color, var(--accent));
    background: color-mix(in srgb, var(--filter-color, var(--accent)) 12%, white);
    color: var(--filter-color, var(--accent-ink));
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    box-sizing: border-box;
    cursor: pointer;
}

.analytics-keyword-chip span:last-child {
    font-size: 12px;
    line-height: 1;
    opacity: 0.7;
}

.analytics-loading-indicator {
    position: sticky;
    top: calc(var(--site-header-height, 0px) + 8px);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: -24px 0 24px;
    padding: 9px 14px;
    border: 1px solid var(--border-warm);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(13, 34, 53, 0.12);
    color: var(--muted-deep);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.analytics-loading-indicator[hidden] {
    display: none;
}

.analytics-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-warm);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: analytics-spin 0.75s linear infinite;
}

@keyframes analytics-spin {
    to {
        transform: rotate(360deg);
    }
}

.analytics-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.analytics-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--filter-color, var(--accent)) 16%, white);
    color: var(--filter-color, var(--accent-ink));
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.analytics-metric-compare {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}

.analytics-metric-compare:empty {
    display: none;
    margin: 0;
}

.analytics-metric-compare-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--muted-deep);
}

.analytics-metric-compare-row strong {
    color: var(--filter-color, var(--text-strong));
    font-weight: var(--font-weight-semibold);
}

.analytics-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 12px;
}

.analytics-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--muted-deep);
}

.analytics-legend-item i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.analytics-last-updated {
    font-size: var(--font-size-xs);
    color: var(--faint);
    margin-left: auto;
    flex: 0 0 auto;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Metric cards ────────────────────────────────────────── */

.analytics-metrics {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 28px 32px;
    margin-bottom: 56px;
}

.analytics-metric-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 12px 12px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.analytics-metric-card .metric-label {
    color: var(--muted-strong);
    font-size: var(--font-size-2xs);
}

.analytics-metric-card .metric-icon {
    position: absolute;
    right: 14px;
    top: 14px;
    font-size: var(--font-size-lg);
    opacity: 0.3;
}

.analytics-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--dark-soft);
    line-height: var(--line-height-tight);
}

.analytics-trend {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.analytics-trend--up {
    color: #5b9e5b;
}
.analytics-trend--down {
    color: #e07b6c;
}

/* ── Card grid ───────────────────────────────────────────── */

.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
    margin-bottom: 24px;
}

.analytics-grid--triple {
    grid-template-columns: 1fr 1fr 1fr;
}

.analytics-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 16px 0 56px;
    margin-bottom: 8px;
}

.analytics-card .section-heading__inner {
    gap: 6px;
    margin-bottom: 20px;
}

.analytics-card .section-heading__inner .typo-h2 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    margin-bottom: 0;
}

.analytics-card .section-heading__inner .typo-body {
    font-size: var(--font-size-sm);
}

.analytics-collapse-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    text-align: left;
    cursor: pointer;
}

.analytics-card--collapsed {
    padding-bottom: 12px;
}

.analytics-card--collapsed .section-heading__inner {
    margin-bottom: 0;
}

.analytics-card--collapsed .analytics-collapsible-body {
    display: none;
}

.analytics-card--collapsed .analytics-collapse-toggle span:last-child {
    transform: rotate(-90deg);
}

.analytics-card .section-head {
    margin-bottom: 24px;
}

/* ── Tables ──────────────────────────────────────────────── */

.analytics-table-wrap {
    overflow-x: auto;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.analytics-table th {
    text-align: left;
    padding: 12px 14px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--muted-strong);
    border-bottom: 1px solid var(--border-warm);
    background: var(--paper);
}

.analytics-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--paper-soft);
    color: var(--text);
}

.analytics-flow-arrow {
    color: var(--accent-ink);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    padding: 0 4px;
    width: 20px;
    text-align: center;
}

.analytics-table tbody tr:hover {
    background: var(--accent-surface);
}

.analytics-table--recent td:first-child {
    font-size: var(--font-size-xs);
    color: var(--muted-deep);
    white-space: nowrap;
}

/* ── Journey timeline cards ──────────────────────────── */

.analytics-journeys {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.journey-card {
    background: var(--paper);
    border: 1px solid var(--border-warm);
    border-radius: 12px;
    padding: 18px 20px;
}

.journey-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.journey-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-warm);
}

.journey-index {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--accent-ink);
    background: var(--accent-wash);
    padding: 2px 10px;
    border-radius: 20px;
}

.journey-pages-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: #6384c6;
    background: #f0f4fb;
    padding: 2px 10px;
    border-radius: 20px;
}

.journey-total-dwell {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--muted-deep);
    font-weight: var(--font-weight-medium);
}

.journey-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 18px;
    position: relative;
}

.journey-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    min-height: 36px;
}

.journey-step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xs);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    margin-top: 2px;
}

.journey-step-dot--entry {
    background: #e8f5e9;
    border: 2px solid #5b9e5b;
}

.journey-step-dot--exit {
    background: #fdecea;
    border: 2px solid #e07b6c;
}

.journey-step-body {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0 12px;
}

.journey-step-page {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    color: var(--text);
    padding: 2px 8px;
    background: var(--paper);
    border-radius: 5px;
}

.journey-step-dwell {
    font-size: var(--font-size-xs);
    color: var(--muted-deep);
    white-space: nowrap;
}

.journey-step-connector {
    position: absolute;
    left: 10px;
    top: 24px;
    width: 2px;
    height: calc(100% - 12px);
    background: var(--surface-warm);
    z-index: 1;
}

/* ── Bar visualization ───────────────────────────────────── */

.analytics-bar-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.analytics-bar-track {
    flex: 1;
    height: 6px;
    background: var(--paper-soft);
    border-radius: 3px;
    overflow: hidden;
    min-width: 50px;
}

.analytics-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #f0b84d);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.analytics-bar-value {
    font-weight: var(--font-weight-semibold);
    color: var(--text);
    min-width: 32px;
    text-align: right;
    font-size: var(--font-size-xs);
}

/* ── Chart ───────────────────────────────────────────────── */

.analytics-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 200px;
}

.analytics-chart-wrap canvas {
    width: 100% !important;
    height: auto !important;
    display: block;
    cursor: crosshair;
}

.analytics-chart-tooltip {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, calc(-100% - 14px));
    min-width: 132px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--brand-ink);
    color: #fff;
    box-shadow: var(--shadow);
    pointer-events: none;
    white-space: nowrap;
}

.analytics-chart-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    border: 6px solid transparent;
    border-top-color: var(--brand-ink);
    border-bottom-width: 0;
    transform: translateX(-50%);
}

.analytics-chart-tooltip[data-edge="left"] {
    transform: translate(0, calc(-100% - 14px));
}

.analytics-chart-tooltip[data-edge="left"]::after {
    left: 16px;
    transform: none;
}

.analytics-chart-tooltip[data-edge="right"] {
    transform: translate(-100%, calc(-100% - 14px));
}

.analytics-chart-tooltip[data-edge="right"]::after {
    left: auto;
    right: 16px;
    transform: none;
}

.analytics-chart-tooltip strong {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 2px;
}

.analytics-chart-tooltip span {
    display: block;
    font-size: var(--font-size-2xs);
    opacity: 0.85;
}

.analytics-chart-slider {
    margin-top: 8px;
}

.analytics-chart-slider-window {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-strong);
}

.analytics-chart-slider-control {
    position: relative;
    height: 28px;
}

.analytics-chart-slider-rail {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 6px;
    border-radius: 999px;
    background: var(--paper-soft);
    transform: translateY(-50%);
    pointer-events: none;
}

.analytics-chart-slider-span {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0.55;
}

.analytics-chart-slider-control input[type="range"] {
    position: absolute;
    inset: 0 8px;
    width: auto;
    margin: 0;
    background: transparent;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.analytics-chart-slider-control input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.analytics-chart-slider-control input[type="range"]::-moz-range-track {
    height: 6px;
    background: transparent;
    border: none;
}

.analytics-chart-slider-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 1px 4px rgba(13, 34, 53, 0.25);
    cursor: grab;
}

.analytics-chart-slider-control input[type="range"]::-moz-range-thumb {
    pointer-events: all;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 1px 4px rgba(13, 34, 53, 0.25);
    cursor: grab;
}

.analytics-chart-slider-control input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--accent-ink);
    outline-offset: 2px;
}

.analytics-chart-slider-control input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--accent-ink);
    outline-offset: 2px;
}

/* ── Heatmap legend ─────────────────────────────────────── */

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    font-size: var(--font-size-xs);
    color: var(--muted-deep);
}

.heatmap-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.heatmap-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.heatmap-legend-swatch--hover {
    background: rgba(246, 162, 28, 0.7);
}
.heatmap-legend-swatch--click {
    background: rgba(220, 80, 60, 0.8);
}

/* ── Page path badge ─────────────────────────────────────── */

.analytics-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: var(--paper);
    border-radius: 5px;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    color: var(--text-strong);
}

/* ── Empty state ─────────────────────────────────────────── */

.analytics-empty {
    padding: 36px 0;
    text-align: center;
}

.analytics-empty p {
    margin: 0;
    color: var(--faint);
}

/* ── Loading skeleton ────────────────────────────────────── */

.analytics-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
}

.analytics-skeleton__row {
    height: 14px;
    background: linear-gradient(90deg, var(--paper-soft) 25%, var(--paper) 50%, var(--paper-soft) 75%);
    background-size: 200% 100%;
    animation: analytics-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes analytics-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1200px) {
    .analytics-metrics {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 960px) {
    .analytics-metrics {
        grid-template-columns: repeat(3, 1fr);
    }
    .analytics-grid,
    .analytics-grid--triple {
        grid-template-columns: 1fr;
    }
    .analytics-toolbar-range,
    .analytics-keyword-bar,
    .analytics-keyword-form {
        flex-wrap: wrap;
        min-width: 0;
    }
    .analytics-last-updated {
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .analytics-content.section {
        padding-top: 20px;
        padding-bottom: 48px;
    }
    .analytics-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 20px 24px;
    }
    .analytics-value {
        font-size: var(--font-size-2xl);
    }
    .analytics-table th,
    .analytics-table td {
        padding: 7px 8px;
    }
}

/* === features/admin.css === */
/* Shared admin navigation; booking views use their own scoped workspace. */
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 2rem; }
.admin-nav a, .admin-nav button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .65rem 1rem; border: 1px solid #dce3e1; border-radius: 10px; font: inherit; font-size: .875rem; font-weight: 600; text-decoration: none; background: #fff; color: #455b56; cursor: pointer; }
.admin-nav a:hover, .admin-nav button:hover { background: #edf4f0; color: #193e33; }
.admin-nav a[aria-current="page"] { background: #214e40; border-color: #214e40; color: #fff; }
.admin-nav form { margin: 0 0 0 auto; }
.admin-navigation { padding-bottom: 1.5rem; border-bottom: 1px solid #dce3e1; }
.admin-navigation .admin-brand { gap: .7rem; justify-content: start; margin-right: auto; padding: 0; border: 0; background: transparent; color: #203f35; font-size: 1rem; line-height: 1.3; }
.admin-brand small { display: block; margin-top: .2rem; color: #65776f; font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.admin-brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #214e40; color: #fff; font-size: 1.7rem; font-weight: 700; }
.admin-shell { --admin-ink: #203c33; --admin-muted: #60736c; --admin-line: #dce5df; background: #f3f6f2; color: var(--admin-ink); }
.admin-shell .container { max-width: 1320px; }
.admin-shell .analytics-content.section { padding-top: 28px; }
.admin-shell .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.admin-shell :is(input, select, textarea, button, a, summary):focus-visible, .admin-day-toggle:has(input:focus-visible) .admin-switch { outline: 3px solid #397b65; outline-offset: 4px; }
.admin-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 2.5rem 0 2rem; }
.admin-eyebrow { margin: 0 0 .6rem; color: #52715f; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.admin-page-heading h1 { margin: 0; color: var(--admin-ink); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.12; letter-spacing: -.045em; }
.admin-page-heading p:not(.admin-eyebrow) { margin: .85rem 0 0; color: var(--admin-muted); }
.admin-shell .admin-button { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 46px; padding: .75rem 1.15rem; border: 1px solid #214e40; border-radius: 10px; background: #214e40; color: #fff; font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; }
.admin-shell .admin-button:hover { background: #163b30; border-color: #163b30; }
.admin-shell .admin-button-secondary { background: #fff; border-color: #cad8ce; color: #214e40; }
.admin-shell .admin-button-secondary:hover { background: #eaf2eb; }
.admin-bookings-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; padding: 1.3rem; margin: 0 0 2rem; border: 1px solid var(--admin-line); border-radius: 16px; background: #fff; }
.admin-bookings-filters label { display: grid; gap: .5rem; font-size: .8rem; font-weight: 600; }
.admin-bookings-filters label:first-child { flex: 1 1 300px; }
.admin-shell :is(input:not([type="checkbox"]), select, textarea) { width: 100%; min-width: 0; max-width: 100%; min-height: 46px; padding: .7rem .85rem; border: 1px solid #cbd7cf; border-radius: 8px; background: #fcfdfb; color: var(--admin-ink); font: inherit; font-size: .9rem; }
.admin-shell input::placeholder, .admin-shell textarea::placeholder { color: #718078; }
.admin-reset { padding: .8rem .3rem; color: var(--admin-muted); font-size: .85rem; }
.admin-results-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.admin-results-heading h2 { display: flex; align-items: center; gap: .7rem; margin: 0; font-size: 1.1rem; }
.admin-results-heading p { margin: 0; color: var(--admin-muted); font-size: .8rem; }
.admin-count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 .4rem; border-radius: 8px; background: #e2ebdf; color: #35593c; font-size: .8rem; }
.admin-booking-group { margin: 0 0 1.5rem; border: 1px solid var(--admin-line); border-radius: 18px; background: #fff; box-shadow: 0 4px 18px #203c3305; overflow: hidden; }
.admin-contact-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 1rem; }
.admin-contact-identity { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.admin-contact-identity > div { min-width: 0; }
.admin-avatar { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 14px; background: #edf1e3; color: #536240; font-size: 1.4rem; font-weight: 600; text-transform: uppercase; }
.admin-contact-identity h2 { margin: 0 0 .2rem; font-size: 1.15rem; letter-spacing: -.02em; }
.admin-contact-identity a { color: var(--admin-muted); font-size: .875rem; overflow-wrap: anywhere; text-underline-offset: 3px; }
.admin-contact-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 0 1.5rem 1.25rem; color: var(--admin-muted); font-size: .75rem; }
.admin-appointment-table-wrap { overflow-x: auto; }
.admin-appointment-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.admin-appointment-table th { padding: .7rem 1.5rem; border-top: 1px solid #e6ece6; border-bottom: 1px solid #e6ece6; background: #f6f8f3; color: var(--admin-muted); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.admin-appointment-table td { padding: .65rem 1.5rem; border-bottom: 1px solid #e6ece6; vertical-align: top; }
.admin-appointment-table tbody tr:last-child td { border-bottom: 0; }
.admin-appointment-table tbody tr:hover { background: #fafcf7; }
.admin-appointment-when { white-space: nowrap; }
.admin-appointment-when strong { display: block; font-weight: 600; }
.admin-appointment-when span { display: block; color: var(--admin-muted); font-size: .78rem; }
.admin-appointment-table .admin-topic { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.admin-appointment-contact { color: var(--admin-muted); font-size: .78rem; line-height: 1.5; }
.admin-appointment-contact a { color: inherit; }
.admin-appointment-created { color: var(--admin-muted); font-size: .78rem; line-height: 1.6; white-space: nowrap; }
.admin-appointment-created span { display: block; }
.admin-appointment-past td { color: #69756b; }
.admin-badge { display: inline-flex; align-items: center; align-self: start; padding: .3rem .55rem; border-radius: 6px; background: #e6f2e7; color: #315d3c; font-size: .68rem; font-weight: 600; white-space: nowrap; }
.admin-badge-muted { background: #eef1ed; color: #637269; }
.admin-message { margin-top: .8rem; font-size: .8rem; }
.admin-message summary, .admin-note-panel summary { cursor: pointer; color: #365e4a; }
.admin-booking-message { margin-bottom: 0; padding: 1rem; border-radius: 8px; background: #f5f7f2; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-note-panel { border-top: 1px solid var(--admin-line); background: #fafbf7; }
.admin-note-panel > summary { padding: 1rem 1.5rem; font-size: .85rem; font-weight: 600; }
.admin-note-panel > summary span { float: right; font-size: .75rem; font-weight: 400; color: var(--admin-muted); }
.admin-booking-note { display: grid; gap: .8rem; padding: 0 1.5rem 1.25rem; }
.admin-booking-note label { display: grid; gap: .5rem; font-size: .8rem; }
.admin-booking-note textarea { resize: vertical; min-height: 90px; }
.admin-note-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; }
.admin-note-footer small { color: var(--admin-muted); font-size: .75rem; }
.admin-notice { padding: 1rem 1.25rem; border: 1px solid #bdd5c2; border-radius: 10px; background: #edf7ed; color: #28563a; }
.admin-notice-error { background: #fff1ec; border-color: #ebc8bb; color: #873b28; }
.admin-empty { padding: 3.5rem 1.5rem; text-align: center; border: 1px dashed #c4d3c4; border-radius: 16px; background: #fafcf7; }
.admin-empty > span { color: #759265; font-size: 3rem; }
.admin-empty h2 { font-size: 1.3rem; }
.admin-empty p, .admin-muted { color: var(--admin-muted); }
.admin-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
.admin-panel { min-width: 0; border: 1px solid var(--admin-line); border-radius: 16px; background: #fff; overflow: hidden; }
.admin-panel-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: .75rem; padding: 1.5rem; }
.admin-panel-heading h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.admin-panel-heading p:not(.admin-eyebrow) { margin: .5rem 0 0; color: var(--admin-muted); font-size: .8rem; }
.admin-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem; align-items: center; min-width: 0; margin: 0; padding: 1rem 1.5rem; border: 0; border-top: 1px solid #e6ece6; }
.admin-day-toggle { position: relative; display: flex; align-items: center; gap: .7rem; cursor: pointer; font-size: .85rem; font-weight: 600; }
.admin-day-toggle input { position: absolute; opacity: 0; width: 40px; height: 24px; }
.admin-switch { position: relative; flex: 0 0 36px; height: 22px; border: 1px solid #adbab0; border-radius: 20px; background: #dce3dc; pointer-events: none; }
.admin-switch::after { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0002; }
.admin-day-toggle input:checked + .admin-switch { background: #345f47; border-color: #345f47; }
.admin-day-toggle input:checked + .admin-switch::after { transform: translateX(14px); }
.admin-day-toggle small { display: block; margin-top: .25rem; font-size: .65rem; font-weight: 400; color: var(--admin-muted); }
.admin-day-on { display: none !important; }
.admin-day:has(input:checked) .admin-day-on { display: block !important; }
.admin-day:has(input:checked) .admin-day-off { display: none; }
.admin-day:not(:has(input:checked)) { background: #f8f9f6; }
.admin-day:not(:has(input:checked)) .admin-day-windows { opacity: .65; }
.admin-day-windows { display: grid; gap: .7rem; }
.admin-window { display: grid; gap: .6rem; padding: .8rem; border: 1px solid #e6ece6; border-radius: 10px; background: #fbfcf9; }
.admin-window-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.admin-window-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.admin-window-times label, .admin-window-meta label { display: grid; gap: .4rem; color: var(--admin-muted); font-size: .65rem; }
.admin-window-monthly[hidden] { display: none; }
.admin-shell .admin-window input, .admin-shell .admin-window select { padding: .5rem .35rem; font-size: .8rem; min-height: 42px; }
.admin-window-remove, .admin-window-add { justify-self: start; padding: .45rem .8rem; border: 1px solid #cbd7cf; border-radius: 8px; background: #fff; color: #44584b; font: inherit; font-size: .72rem; cursor: pointer; }
.admin-window-remove { color: #8a4b3a; border-color: #e2cdc4; }
.admin-window-remove:disabled { opacity: .45; cursor: not-allowed; }
.admin-window-add { border-style: dashed; }
.admin-window-remove:hover:not(:disabled), .admin-window-add:hover { border-color: #214e40; }
.admin-panel-footnote { padding: 1rem 1.5rem; margin: 0; border-top: 1px solid var(--admin-line); color: var(--admin-muted); font-size: .75rem; line-height: 1.6; }
.admin-rules { display: grid; gap: 1.5rem; padding: 0 1.5rem 1.5rem; }
.admin-rules label { display: grid; gap: .5rem; font-size: .85rem; font-weight: 600; }
.admin-rules small { font-size: .72rem; font-weight: 400; color: var(--admin-muted); }
.admin-unit-input { display: flex; align-items: center; border: 1px solid #cbd7cf; border-radius: 8px; background: #fcfdfb; }
.admin-shell .admin-unit-input input { border: 0; background: transparent; }
.admin-unit-input > span { flex-shrink: 0; padding-right: .8rem; color: var(--admin-muted); font-size: .75rem; font-weight: 400; white-space: nowrap; }
.admin-info { margin-top: 1rem; padding: 1.3rem; border-radius: 14px; background: #e8eedf; font-size: .8rem; line-height: 1.7; }
.admin-info p { margin: .5rem 0 0; color: #526349; }
.admin-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; margin-top: 1.5rem; border: 1px solid var(--admin-line); border-radius: 14px; background: #fff; }
.admin-save-bar p { margin: 0; font-size: .9rem; }
.admin-save-bar p span { display: block; margin-top: .3rem; color: var(--admin-muted); font-size: .75rem; }
@media (max-width: 1100px) {
  .admin-settings-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-settings-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .admin-info { margin-top: 0; align-self: start; }
}
@media (max-width: 700px) {
  .admin-navigation .admin-brand { flex-basis: 100%; margin-bottom: .5rem; }
  .admin-nav a, .admin-nav button { padding: .6rem .7rem; font-size: .75rem; }
  .admin-page-heading { align-items: start; flex-direction: column; margin-top: 2rem; }
  .admin-bookings-filters { gap: .8rem; padding: 1rem; }
  .admin-bookings-filters label { flex: 1 1 100%; }
  .admin-contact-header { align-items: start; flex-direction: column; padding: 1.2rem 1rem .8rem; }
  .admin-contact-meta { padding: 0 1rem 1rem; }
  .admin-appointment-table th, .admin-appointment-table td { padding: .6rem 1rem; }
  .admin-note-panel > summary { padding: 1rem; }
  .admin-booking-note { padding: 0 1rem 1rem; }
  .admin-settings-aside { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .admin-day { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .admin-window-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-panel-heading { padding: 1.2rem 1rem; }
  .admin-save-bar { flex-direction: column; align-items: stretch; padding: 1rem; }
}