/* =========================================================================
   Mundwerk GmbH — Demo Design System
   Stil: Accessible & Ethical (hoher Kontrast, große Typo, keine Deko)

   TYPOGRAFIE-HINWEIS — BITTE BEIM WORDPRESS-TRANSFER NICHT ERSETZEN:
   Lexend ist eine funktionale, keine ästhetische Entscheidung. Die Schrift
   wurde entwickelt, um Lesebelastung zu senken und die Lesegeschwindigkeit
   bei Menschen mit Leseschwierigkeiten zu erhöhen. Eine Zielgruppe dieser
   Website sind Teilnehmende der Alphabetisierungskurse. Ein Austausch gegen
   eine "markantere" Schrift verschlechtert die Zugänglichkeit messbar.

   FARBEN stammen pixelgenau aus der Logodatei (Logo Mundwerk 44.png).
   Das Türkis #126b5e aus einem früheren Prototyp gehört NICHT zur Marke.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marke */
  --navy:            #003366;
  --navy-deep:       #002244;
  --navy-light:      #0E5381;
  --charcoal:        #333333;
  --charcoal-soft:   #5A5F66;

  /* Flächen */
  --bg:              #F7F9FC;
  --surface:         #FFFFFF;
  --surface-sunken:  #EEF2F7;
  --border:          #D6DEE8;
  --border-strong:   #A9B8CA;

  /* Status */
  --success:         #0E7A4F;
  --success-bg:      #E6F4EE;
  --warning:         #A15C00;
  --warning-bg:      #FDF3E4;
  --danger:          #B42318;
  --danger-bg:       #FDECEA;
  --info:            #0E5381;
  --info-bg:         #E8F0F7;

  --focus-ring:      #0E5381;

  /* Abstände: 4er-Raster */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  --radius:      8px;
  --radius-sm:   6px;
  --radius-pill: 999px;

  --shadow-card:  0 1px 2px rgba(0,0,0,.06);
  --shadow-float: 0 8px 24px rgba(0,34,68,.12);

  --container: 1200px;

  --font-head: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- 2. Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 17px;          /* bewusst über der Norm — Zielgruppe */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body { font-size: 18px; } }

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy-deep);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.2vw, 3rem);    line-height: 1.15; font-weight: 700; }
h2 { font-size: clamp(1.625rem, 3.4vw, 2.125rem); line-height: 1.25; font-weight: 600; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3;  font-weight: 600; }
p  { margin: 0 0 var(--s-4); max-width: 68ch; }

a { color: var(--navy-light); text-underline-offset: 3px; }
a:hover { color: var(--navy-deep); }

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

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 640px)  { .container { padding-inline: var(--s-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--s-8); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 1000;
  background: var(--navy); color: #fff; padding: var(--s-3) var(--s-6);
  border-radius: 0 0 var(--radius) var(--radius); font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- 3. Kopfzeile & Logo ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  /* Feste Groesse: die Kopfzeile ist Rahmen, kein Inhalt. Sonst skaliert
     sie auf der Seite in einfacher Sprache (20 px) mit und laeuft ueber. */
  font-size: 17px;
}
/* Eigene Bahn statt .container: die Kopfzeile teilte sich die Klasse mit dem
   Seiteninhalt, und jede Seite, die .container umstellt, stellte damit auch die
   Kopfzeile um. Gemessen am 11. September 2026: Deutschkurse 1088 + 32 statt
   1200, Uebersetzungen 1160 + 0 — dieselbe Kopfzeile, drei Breiten. Eine Klasse,
   die niemand sonst benutzt, kann niemand sonst verstellen. */
.header-shell {
  width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-4);
}
.header-inner {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 72px; padding-block: var(--s-3);
}
/* F1, gewaehlt am 11. September 2026: die Kopfzeile bleibt weiss, die Farbe
   der Richtung traegt nur die Unterkante und der aktuelle Punkt. Was sich
   aendert, ist die Hoehe — 88 px waren dem Betreiber zu gedraengt.
   116 px Mindesthoehe ergeben gemessen 124 px Kopfzeile: ein Drittel mehr.
   Das Umbrechen der Navigation in eine zweite Zeile zwischen 1024 und ~1180
   bleibt wie es ist; es ist der Schutz gegen waagerechten Ueberlauf und
   nicht das, was hier zu gross oder zu klein war. */
@media (min-width: 1024px) { .header-inner { min-height: 122px; } }
/* Der aktuelle Punkt etwas ruhiger setzen, damit er in der hoeheren Zeile
   nicht wie ein Fremdkoerper klebt: die Kante sitzt am Text, nicht am
   Polster des Feldes. */

/* Die Kopfzeile ist ab 1024 px eine starre Flex-Reihe: die Wortmarke darf nicht
   schrumpfen, die Menuepunkte brechen nicht um, und ab 1280 px kommt der CTA dazu.
   Gemessen am 11. September 2026 schob sie die ganze Seite waagerecht auf: 1024 px
   +98, 1400 px +5 — auf JEDER Seite der Praesentationskopie, nicht nur den neuen.
   Der Prueflauf mass 375/768/1440 und sah davon nichts.
   Umbruch statt Ueberlauf: wo es heute passt, aendert sich nichts (es bricht nur,
   wenn es muss); wo es nicht passt, steht die Navigation in einer zweiten Zeile,
   statt die Seite seitlich scrollen zu lassen. */
.header-inner { flex-wrap: wrap; }
.main-nav { min-width: 0; }

/* Logo-Lockup — 3 Stufen, bricht nie um (Fehler der alten Website) */
.brand {
  display: flex; align-items: center; gap: var(--s-3); min-height: 48px;
  text-decoration: none; color: inherit; white-space: nowrap; flex: 0 0 auto;
}
.brand-mark { height: 34px; width: auto; flex: 0 0 auto; }
@media (min-width: 1024px) { .brand-mark { height: 44px; } }

.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem;
  color: var(--charcoal); letter-spacing: .01em;
}
.brand-name em { font-style: normal; color: var(--navy); }
.brand-claim {
  display: none; font-size: .7rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--navy); margin-top: 3px;
}
@media (min-width: 1024px) { .brand-claim { display: block; } }
@media (max-width: 639px)  { .brand-text { display: none; } }   /* nur Bildmarke */

/* ---------- 4. Navigation ---------- */
.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-3);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font: 600 1rem/1 var(--font-body);
  color: var(--navy-deep); cursor: pointer;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.main-nav { display: none; }
.main-nav.is-open { display: block; }
@media (min-width: 1024px) { .main-nav, .main-nav.is-open { display: block; margin-left: auto; } }

.nav-list { list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .nav-list { display: flex; gap: var(--s-1); align-items: center; } }

/* :not(.btn) ist zwingend — sonst überschreibt diese Regel die Button-Textfarbe
   (höhere Spezifität als .btn-primary) und der CTA wird unlesbar. */
.nav-list > li > a:not(.btn) {
  display: flex; align-items: center; min-height: 48px;
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 500; text-decoration: none;
  color: var(--charcoal);
}
.nav-list > li > a:not(.btn):hover { background: var(--surface-sunken); color: var(--navy-deep); }
/* "page" = genau diese Seite, "true" = eine Seite dieser Richtung. Beide
   werden gleich gezeichnet; nur eine von beiden darf "page" sein. */
/* H1 "Ruhig", gewaehlt am 11. September 2026: die Markierung ist eine Kante
   unter dem Wort, kein Balken quer durch das Polster. */
.nav-list > li > a:not(.btn):is([aria-current="page"], [aria-current="true"]) {
  color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); box-shadow: none;
}

/* Untermenü: mobil immer offen (kein verstecktes Tippen), Desktop als Dropdown */
.submenu { list-style: none; margin: 0 0 var(--s-2) var(--s-4); padding: 0; border-left: 2px solid var(--border); }
.submenu a {
  display: flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-3);
  font-size: .95rem; color: var(--charcoal-soft); text-decoration: none;
}
.submenu a:hover { color: var(--navy-deep); background: var(--surface-sunken); }

@media (min-width: 1024px) {
  .has-sub { position: relative; }
  .submenu {
    position: absolute; top: 100%; left: 0; min-width: 290px; margin: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-float);
    padding: var(--s-2); display: none; z-index: 120;
  }
  .has-sub:hover .submenu, .has-sub:focus-within .submenu { display: block; }
  .submenu a { border-radius: var(--radius-sm); }
}

/* Spezifitaet muss ueber .btn liegen — sonst setzt .btn { display:inline-flex }
   das display:none wieder zurueck und der CTA sprengt die Kopfzeile. */
/* .header-cta ist am 11. September 2026 von allen gebauten Seiten entfernt
   worden: jede Richtung traegt ihre eigene Handlung, ein fester Knopf im Kopf
   schoebe eine davon ueber alle anderen. Die Regeln stehen nur noch fuer die
   alten Entwurfsseiten unter uebersetzungen/, die nicht nachgepflegt werden. */
.nav-list .header-cta { display: none; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6);
  font-family: var(--font-head); font-size: 1rem; font-weight: 600;
  border-radius: var(--radius-sm); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  white-space: nowrap; flex-shrink: 0;
}
.btn-primary   { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover   { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }

/* Übersetzungen bekommen bewusst eine andere Farbe — andere Zielgruppe, andere Route */
.btn-translate { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.btn-translate:hover { background: #1E2226; border-color: #1E2226; color: #fff; }

.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: #fff; }

.btn-ghost { background: transparent; color: var(--navy-light); border-color: transparent; padding-inline: var(--s-2); text-decoration: underline; }
.btn-ghost:hover { color: var(--navy-deep); }

.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ---------- 6. Sektionen ---------- */
section[data-block] { padding-block: var(--s-12); }
@media (min-width: 768px) { section[data-block] { padding-block: var(--s-16); } }
.section-alt { background: var(--surface-sunken); }
.section-head { max-width: 62ch; margin-bottom: var(--s-8); }
.section-head p { color: var(--charcoal-soft); font-size: 1.0625rem; margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-head); font-size: .8125rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--navy-light);
  margin: 0 0 var(--s-2);
}

/* ---------- 7. Hero ---------- */
.hero { padding-block: var(--s-8) var(--s-12); background: linear-gradient(180deg, #EDF2F8 0%, var(--bg) 100%); }
@media (min-width: 768px) { .hero { padding-block: var(--s-12) var(--s-16); } }
.hero h1 { margin-bottom: var(--s-3); }
.hero .lead { font-size: 1.125rem; color: var(--charcoal); max-width: 46ch; margin-bottom: var(--s-8); }
@media (min-width: 768px) { .hero .lead { font-size: 1.25rem; } }

/* Zwei Routen — der wichtigste Block der Startseite */
.routes { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .routes { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }

.route {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius); padding: var(--s-6);
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.route:hover { border-color: var(--navy); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .route { transition: none; } .route:hover { transform: none; } }
.route-icon { width: 44px; height: 44px; color: var(--navy); }
.route h2, .route h3 { font-size: 1.375rem; margin: 0; }
.route p { margin: 0; color: var(--charcoal-soft); font-size: 1rem; }
.route .fake-btn {
  margin-top: auto; display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-head); font-weight: 600; color: var(--navy);
}
.route--translate .route-icon { color: var(--charcoal); }
.route--translate .fake-btn  { color: var(--charcoal); }

/* ---------- 8. Karten & Raster ---------- */
.grid { display: grid; gap: var(--s-4); }
@media (min-width: 640px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid { gap: var(--s-6); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s-6);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.card h3 { margin: 0; }
.card p  { margin: 0; }

/* Piktogramm-Kachel — der Ort, an dem die Seite Farbe bekommen darf.
   Bewusst eine klar begrenzte Flaeche: eine 56-px-Kachel liest niemand
   als Kategorie, sondern als Bild. Deshalb ist hier die volle Palette
   erlaubt, waehrend Text und Bedienelemente ruhig bleiben.
   Die Farbzuweisung steht im Theme, nicht hier. */
.card-icon {
  flex: 0 0 auto; width: 56px; height: 56px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); color: var(--navy);
}
.card-icon svg { width: 28px; height: 28px; }

/* Situationskarten — Hauptnavigationselement der Kursseite */
.situation {
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius); padding: var(--s-4) var(--s-5, 20px);
  min-height: 88px; text-decoration: none; color: var(--charcoal);
  font-family: var(--font-head); font-weight: 500; font-size: 1.0625rem;
  transition: border-color .18s ease, background-color .18s ease;
}
.situation:hover { border-color: var(--navy); background: var(--surface); color: var(--navy-deep); }
.situation svg { flex: 0 0 auto; width: 26px; height: 26px; color: var(--navy); margin-top: 2px; }

/* Kurskarte */
.course-card { position: relative; }
.course-card .course-goal {
  font-size: .9375rem; font-weight: 600; color: var(--navy-light);
  font-family: var(--font-head);
}
.course-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: 1rem; }
.course-meta li { display: flex; gap: var(--s-2); align-items: flex-start; }
.course-meta svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--charcoal-soft); margin-top: 3px; }
.course-meta strong { font-weight: 600; }
.course-card .btn { margin-top: var(--s-2); }

/* Statusbadge — Farbe NIE allein, immer mit Text */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px var(--s-3); border-radius: var(--radius-pill);
  font-family: var(--font-head); font-size: .8125rem; font-weight: 600;
  border: 1px solid transparent; align-self: flex-start;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-bg); color: var(--success); border-color: #BFE3D3; }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: #EDD5AE; }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: #F2C7C2; }
.badge-info    { background: var(--info-bg);    color: var(--info);    border-color: #C3D7E8; }

/* Veranstaltungsliste — Termine innerhalb einer Monatskarte.
   Eigene Regel statt .timeline: Termine sind keine Schrittfolge, und eine
   nummerierte Liste wuerde eine Reihenfolge behaupten, die es nicht gibt.
   Die Uhrzeit steht neben dem Datum in der Eyebrow-Zeile; fehlt sie, faellt
   sie ersatzlos weg — "Uhrzeit nicht angegeben" gehoert ins CMS, nicht auf
   die Seite. */
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list .event { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.event-list .event:first-child { padding-top: 0; }
.event-list .event:last-child  { padding-bottom: 0; border-bottom: 0; }
.event-list .event > b { font-family: var(--font-head); font-size: 1.0625rem; color: var(--navy); }
.event-list .time { color: var(--charcoal-soft); letter-spacing: 0; text-transform: none; }
.event-list .time::before { content: "· "; }

/* Fördermarker */
.funding-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; font-weight: 600; color: var(--navy-deep);
  background: var(--info-bg); border-radius: var(--radius-sm);
  padding: 4px var(--s-2); align-self: flex-start;
}

/* ---------- 9. Gruppenliste (Termine) ---------- */
.group-list { display: grid; gap: var(--s-3); }
.group-row {
  display: grid; gap: var(--s-3); align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s-4); box-shadow: var(--shadow-card);
}
@media (min-width: 900px) {
  .group-row { grid-template-columns: 1.4fr 1fr 1fr .8fr auto; gap: var(--s-4); }
}
.group-row .g-course { font-family: var(--font-head); font-weight: 600; color: var(--navy-deep); }
.group-row .g-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--charcoal-soft); font-weight: 600; }
.group-row .g-value { font-variant-numeric: tabular-nums; }

/* ---------- 10. Niveauskala (KEIN Produktkatalog) ---------- */
.levels { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .levels { grid-template-columns: repeat(4, 1fr); } }
.level {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s-4);
}
.level b { font-family: var(--font-head); font-size: 1.125rem; color: var(--navy); display: block; margin-bottom: 4px; }
.level span { font-size: .9375rem; color: var(--charcoal-soft); }
.level-note {
  margin-top: var(--s-4); padding: var(--s-4);
  background: var(--info-bg); border-left: 4px solid var(--navy-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.level-note p { margin: 0; }

/* ---------- 11. Schritte ---------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4); }
.steps li::before {
  content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff;
  font-family: var(--font-head); font-weight: 700; margin-bottom: var(--s-3);
}
.steps b { display: block; font-family: var(--font-head); margin-bottom: 4px; }
.steps span { font-size: .9375rem; color: var(--charcoal-soft); }

/* ---------- 12. Begriffe / Glossar ---------- */
.glossary { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .glossary { grid-template-columns: repeat(3, 1fr); } }
.term { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4); }
.term dt { font-family: var(--font-head); font-weight: 600; color: var(--navy-deep); margin-bottom: 4px; }
.term dd { margin: 0; font-size: .9375rem; color: var(--charcoal-soft); }

/* ---------- 13. FAQ (nativ, kein JS) ---------- */
.faq { display: grid; gap: var(--s-2); max-width: 76ch; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-4);
  min-height: 56px; display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-head); font-weight: 600; color: var(--navy-deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; width: 12px; height: 12px; flex: 0 0 auto;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
.faq .faq-body { padding: 0 var(--s-4) var(--s-4); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- 14. Vertrauen & Kontakt ---------- */
.trust { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .trust { grid-template-columns: repeat(3, 1fr); } }
.trust-item { display: flex; gap: var(--s-3); align-items: flex-start; }
.trust-item svg { width: 28px; height: 28px; color: var(--navy); flex: 0 0 auto; }
.trust-item b { display: block; font-family: var(--font-head); margin-bottom: 2px; }
.trust-item span { font-size: .9375rem; color: var(--charcoal-soft); }

.contact-panel {
  background: var(--navy-deep); color: #fff;
  border-radius: var(--radius); padding: var(--s-8);
  display: grid; gap: var(--s-6);
}
@media (min-width: 900px) { .contact-panel { grid-template-columns: 1.1fr 1fr; gap: var(--s-12); } }
.contact-panel h2 { color: #fff; }
.contact-panel p { color: #D5DFEA; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.contact-list a, .contact-list span {
  display: flex; align-items: center; gap: var(--s-3); min-height: 48px;
  color: #fff; text-decoration: none; font-size: 1.0625rem;
}
.contact-list a:hover { color: #fff; text-decoration: underline; }
.contact-list svg { width: 22px; height: 22px; flex: 0 0 auto; color: #9FC0DC; }
.contact-langs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.lang-chip {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-pill); padding: 4px var(--s-3); font-size: .875rem; color: #fff;
}

/* ---------- 15. Fußzeile ---------- */
.site-footer { background: var(--charcoal); color: #D9DDE1; padding-block: var(--s-12) var(--s-6); margin-top: var(--s-16); }
.footer-grid { display: grid; gap: var(--s-8); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: var(--s-3); }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.footer-list a { color: #D9DDE1; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; font-size: .9375rem; }
.footer-list a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: .875rem; color: #AEB5BB;
}

/* ---------- 16. Demo-Platzhalter ---------- */
/* Demo-Leiste bleibt schmal — sie darf den ersten Screen nicht auffressen.
   Genau dieser Fehler wurde auf der alten Website beanstandet. */
.demo-bar {
  background: var(--navy-deep); color: #fff; font-size: .8125rem;
  padding: var(--s-1) 0;
}
.demo-bar .container {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 44px; flex-wrap: nowrap;
}
.demo-bar p {
  margin: 0; color: #D5DFEA; max-width: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo-bar .demo-long { display: none; }
@media (min-width: 768px) { .demo-bar .demo-long { display: inline; } }

.demo-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s-3); cursor: pointer; flex: 0 0 auto;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-sm); color: #fff; font: 600 .8125rem/1 var(--font-body);
}
.demo-toggle:hover { background: rgba(255,255,255,.2); }

body.show-placeholders [data-placeholder="true"] {
  background: #FFF3BF !important; outline: 2px dashed #A15C00; outline-offset: 1px;
  border-radius: 3px; color: #3B2C00 !important;
}

/* ---------- 17. Hilfsklassen ---------- */
.stack-sm > * + * { margin-top: var(--s-3); }
.muted { color: var(--charcoal-soft); }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }

/* =========================================================================
   TEIL B — Komponenten der Unterseiten
   (Service Page, Einfache Sprache, Kursfinder, Förderung, Übersetzung)
   ========================================================================= */

/* ---------- 18. Brotkrumen ---------- */
.crumbs { font-size: .875rem; margin-bottom: var(--s-4); color: var(--charcoal-soft); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.crumbs li::after { content: "\203A"; margin-left: var(--s-2); color: var(--border-strong); }
.crumbs li:last-child::after { content: ""; }
/* Brotkrumen-Links bekommen volle Trefferflaeche (44 px). Sie sind
   Navigation, keine Fliesstext-Links — die Inline-Ausnahme aus WCAG 2.5.8
   gilt hier nicht, und auf dieser Zielgruppe zaehlt Treffsicherheit. */
.crumbs a, .crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a { color: var(--navy-light); }
.crumbs [aria-current] { color: var(--charcoal-soft); }

/* ---------- 19. Faktenleiste im Hero (Service Page) ---------- */
.facts {
  display: grid; gap: var(--s-1); margin-top: var(--s-8);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s-4); box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .facts { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); padding: var(--s-6); } }
.fact { display: flex; flex-direction: column; gap: 2px; padding-block: var(--s-2); }
@media (max-width: 767px) { .fact + .fact { border-top: 1px solid var(--border); } }
.fact dt { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--charcoal-soft); }
.fact dd { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; color: var(--navy-deep); }

/* ---------- 20. Modulleiter (Integrationskurs) ---------- */
/* Zeigt die Modulfolge EINES Produkts. Bewusst keine Kachelgalerie —
   A1 bis B1 duerfen nicht wie einzeln buchbare Kurse aussehen. */
.ladder { position: relative; display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.ladder::before {
  content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px;
  width: 3px; background: linear-gradient(180deg, var(--navy-light), var(--navy-deep)); border-radius: 2px;
}
@media (min-width: 900px) {
  .ladder { grid-template-columns: repeat(7, 1fr); gap: var(--s-2); align-items: stretch; }
  .ladder::before { left: 24px; right: 24px; top: 21px; bottom: auto; width: auto; height: 3px;
    background: linear-gradient(90deg, var(--navy-light), var(--navy-deep)); }
}
.rung {
  position: relative; display: flex; gap: var(--s-4); align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s-4); z-index: 1;
}
@media (min-width: 900px) { .rung { flex-direction: column; gap: var(--s-2); padding: var(--s-3); } }
.rung-dot {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .9375rem;
  border: 3px solid var(--surface);
}
.rung--final .rung-dot { background: var(--success); }
.rung b { display: block; font-family: var(--font-head); font-size: 1rem; color: var(--navy-deep); }
.rung span.rung-desc { display: block; font-size: .875rem; color: var(--charcoal-soft); }
.rung .rung-level {
  display: inline-block; margin-top: var(--s-1); font-family: var(--font-head);
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  background: var(--info-bg); color: var(--navy-deep);
  border-radius: var(--radius-pill); padding: 2px var(--s-2);
}
.ladder-legend { margin-top: var(--s-4); font-size: .9375rem; color: var(--charcoal-soft); }

/* ---------- 21. Szenarien / Finanzierungsauswahl ---------- */
.scenarios { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .scenarios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .scenarios { grid-template-columns: repeat(4, 1fr); } }
.scenario {
  background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--navy);
  border-radius: var(--radius); padding: 20px var(--s-4) var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.scenario h3 { font-size: 1.125rem; margin: 0; }
.scenario .who { font-size: .9375rem; color: var(--charcoal-soft); margin: 0; }
.scenario .cost {
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--navy-deep);
  padding: var(--s-2) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.scenario .cost small { display: block; font-size: .8125rem; font-weight: 400; color: var(--charcoal-soft); }

/* ---------- 22. Checklisten ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
/* Der Punkt war frueher display:flex. Damit wurde jedes <b> oder <em> im
   Satz zu einem eigenen Flex-Element und bekam die 12 px Luecke davor und
   dahinter — der Satz riss sichtbar auseinander. Mit position:relative
   bleibt der Text normaler Fliesstext und darf ausgezeichnet werden.
   Optisch identisch: 22 px Kasten + 12 px Abstand = 34 px Einzug. */
.checklist li { position: relative; padding-left: 34px; font-size: 1rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--info-bg); border: 1px solid #C3D7E8;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003366' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L20 7'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 15px;
}
.checklist.optional li::before {
  background-color: var(--surface-sunken); border-color: var(--border-strong);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5F66' stroke-width='3' stroke-linecap='round'><path d='M6 12h12'/></svg>");
}

/* ---------- 23. Ablauf als Zeitstrahl ---------- */
.timeline { list-style: none; counter-reset: tl; margin: 0; padding: 0; position: relative; display: grid; gap: var(--s-4); }
.timeline::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--border-strong); }
.timeline li { counter-increment: tl; position: relative; padding-left: 60px; }
.timeline li::before {
  content: counter(tl); position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 700;
  border: 3px solid var(--bg);
}
.section-alt .timeline li::before { border-color: var(--surface-sunken); }
.timeline b { display: block; font-family: var(--font-head); font-size: 1.0625rem; color: var(--navy-deep); margin-bottom: 2px; }
.timeline p { margin: 0; font-size: .9375rem; color: var(--charcoal-soft); }

/* ---------- 24. Ansprechperson ---------- */
.person {
  display: flex; gap: var(--s-4); align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s-6); box-shadow: var(--shadow-card);
}
.person-avatar {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
  background: var(--info-bg); color: var(--navy); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem;
}
.person b { display: block; font-family: var(--font-head); font-size: 1.125rem; color: var(--navy-deep); }
.person .role { font-size: .9375rem; color: var(--charcoal-soft); margin-bottom: var(--s-3); }

/* ---------- 25. Hinweisbox ---------- */
.note {
  border-left: 4px solid var(--navy-light); background: var(--info-bg);
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s-4) 20px;
  margin-top: var(--s-6); margin-bottom: var(--s-6);
}
.note p:last-child { margin-bottom: 0; }
.note--warn { border-left-color: var(--warning); background: var(--warning-bg); }
.note--legal { border-left-color: var(--charcoal-soft); background: var(--surface-sunken); }
.note b { font-family: var(--font-head); }

/* ---------- 26. Tabelle ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; min-width: 520px; }
table.data th, table.data td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--border); }
table.data th { font-family: var(--font-head); font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--charcoal-soft); background: var(--surface-sunken); }
table.data td { font-size: 1rem; }
table.data tr:last-child td { border-bottom: 0; }
table.data .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 27. Sticky-CTA (Service Page) ---------- */
.sticky-cta {
  position: sticky; bottom: 0; z-index: 90;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0,34,68,.10);
  padding: var(--s-3) 0;
}
.sticky-cta .container { display: flex; align-items: center; gap: var(--s-4); }
.sticky-cta .sc-info { display: none; font-size: .875rem; color: var(--charcoal-soft); }
@media (min-width: 640px) { .sticky-cta .sc-info { display: block; } }
.sticky-cta .btn { margin-left: auto; }
@media (max-width: 639px) { .sticky-cta .btn { width: 100%; margin-left: 0; } }

/* ---------- 28. Kursfinder ---------- */
.finder { display: grid; gap: var(--s-6); }
.finder fieldset { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: var(--s-6); margin: 0; }
.finder legend {
  font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; color: var(--navy-deep);
  padding-left: var(--s-2); padding-right: var(--s-2);
}
.choices { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
@media (min-width: 640px) { .choices { grid-template-columns: repeat(2, 1fr); } }
.choice {
  display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer;
  min-height: 56px; padding: var(--s-3) var(--s-4);
  border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface);
  font-size: 1rem; transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--border-strong); }
.choice input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--navy); flex: 0 0 auto; }
.choice:has(input:checked) { border-color: var(--navy); background: var(--info-bg); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .choice { transition: none; } }

.result {
  border: 2px solid var(--navy); border-radius: var(--radius);
  background: var(--surface); padding: var(--s-6); box-shadow: var(--shadow-float);
}
.result .eyebrow { color: var(--success); }
.result h3 { margin-top: 0; }

/* ---------- 29. Upload / Angebotsanfrage (Uebersetzungen) ---------- */
.upload {
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface); padding: var(--s-8) var(--s-6); text-align: center;
}
.upload svg { width: 44px; height: 44px; color: var(--charcoal-soft); margin: 0 auto var(--s-3); }
.upload b { display: block; font-family: var(--font-head); font-size: 1.125rem; color: var(--navy-deep); margin-bottom: var(--s-2); }
.upload p { margin: 0 auto var(--s-4); max-width: 46ch; font-size: .9375rem; color: var(--charcoal-soft); }

.factors { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .factors { grid-template-columns: repeat(2, 1fr); } }
.factor { display: flex; gap: var(--s-3); align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4); }
.factor svg { width: 24px; height: 24px; color: var(--navy); flex: 0 0 auto; margin-top: 2px; }
.factor b { display: block; font-family: var(--font-head); margin-bottom: 2px; }
.factor span { font-size: .9375rem; color: var(--charcoal-soft); }

/* ---------- 30. Einfache Sprache (Seitenmodus) ---------- */
/* Wird auf <body class="page-simple"> gesetzt. Groessere Schrift, mehr Luft,
   kuerzere Zeilen. Zielgruppe: Teilnehmende der Alphabetisierungskurse. */
body.page-simple { font-size: 19px; line-height: 1.75; }
@media (min-width: 768px) { body.page-simple { font-size: 20px; } }
body.page-simple p { max-width: 52ch; margin-bottom: var(--s-6); }
body.page-simple h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-bottom: var(--s-6); }
body.page-simple h3 { font-size: clamp(1.375rem, 2.4vw, 1.625rem); }
body.page-simple .btn { min-height: 60px; font-size: 1.125rem; padding-left: var(--s-8); padding-right: var(--s-8); }
body.page-simple .card { padding: var(--s-8); gap: var(--s-4); }
body.page-simple .checklist li { font-size: 1.0625rem; }
body.page-simple .timeline li { padding-left: 72px; }
body.page-simple .timeline li::before { width: 48px; height: 48px; font-size: 1.125rem; }
body.page-simple .timeline::before { left: 23px; }

.simple-hint {
  display: flex; gap: var(--s-3); align-items: center;
  background: var(--info-bg); border: 1px solid #C3D7E8; border-radius: var(--radius);
  padding: var(--s-3) var(--s-4); font-size: .9375rem; color: var(--navy-deep);
  margin-bottom: var(--s-6);
}
.simple-hint svg { width: 24px; height: 24px; flex: 0 0 auto; }

/* Bildkarten mit grossem Piktogramm — Orientierung ohne viel Text */
.pictos { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .pictos { grid-template-columns: repeat(3, 1fr); } }
.picto { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-8) var(--s-4); }
.picto svg { width: 56px; height: 56px; color: var(--navy); margin: 0 auto var(--s-4); }
.picto b { display: block; font-family: var(--font-head); font-size: 1.125rem; color: var(--navy-deep); margin-bottom: var(--s-2); }
.picto span { font-size: 1rem; color: var(--charcoal); }

/* =========================================================================
   TEIL C — Dritter Geschaeftsbereich: Arbeit & Orientierung (MyChance)
   ========================================================================= */

/* ---------- 31. Drei Routen auf der Startseite ---------- */
/* auto-fit statt fester Spaltenzahl: funktioniert mit 2 und mit 3 Karten,
   ohne dass beim naechsten Angebot das Grid angefasst werden muss. */
.routes { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Dritter Bereich bekommt eine eigene Farbe. Kurse = navy,
   Arbeit = navy-light, Uebersetzungen = charcoal. So bleibt jede
   Route und jeder CTA optisch einer Zielgruppe zugeordnet. */
.route--work .route-icon { color: var(--navy-light); }
.route--work .fake-btn   { color: var(--navy-light); }
.route--work:hover       { border-color: var(--navy-light); }

.btn-work { background: var(--navy-light); color: #fff; border-color: var(--navy-light); }
.btn-work:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }

/* ---------- 32. Navigationshinweis (nur mobil) ---------- */
/* Der Menuepunkt "Arbeit & Orientierung" sagt allein noch nicht,
   was dahinter steckt. Auf dem Handy ist Platz fuer eine Zeile. */
/* Nur mobil: unter dem Menuepunkt steht eine erklaerende Zeile.
   Auf dem Desktop muss der Punkt einzeilig bleiben — sonst waechst
   die Kopfzeile und die Punkte stehen ungleich hoch. */
@media (max-width: 1023px) {
  .nav-hint {
    display: block; font-family: var(--font-body); font-weight: 400;
    font-size: .8125rem; line-height: 1.3; color: var(--charcoal-soft);
    margin-top: 2px;
  }
  .nav-list > li > a:not(.btn) { flex-wrap: wrap; align-items: flex-start; padding-block: var(--s-3); }
  .nav-list > li > a:not(.btn) > span:first-child { width: 100%; }
}
@media (min-width: 1024px) {
  .nav-hint { display: none; }
  .nav-list > li > a:not(.btn) { white-space: nowrap; }
}

/* ---------- 33. Ergebnis-Chips (moegliche naechste Schritte) ---------- */
.outcomes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.outcome {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-2) 20px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 500; font-size: 1rem; color: var(--navy-deep);
}
.outcome svg { width: 20px; height: 20px; color: var(--navy-light); flex: 0 0 auto; }

/* ---------- 34. Foerderlogos ---------- */
.funders { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 640px)  { .funders { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .funders { grid-template-columns: repeat(5, 1fr); } }
.funder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 84px; padding: var(--s-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .8125rem; font-weight: 600; color: var(--charcoal-soft); line-height: 1.35;
}

/* ---------- 35. Kontaktzeile mit mehreren Aktionen ---------- */
.action-row { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
@media (min-width: 640px) { .action-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .action-row { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 36. Fussbereich mit fuenf Spalten ---------- */
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.3fr repeat(4, 1fr); } }
@media (min-width: 768px) and (max-width: 1023px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 37. Marker fuer echte, aber noch ungeprüfte Daten ---------- */
/* data-placeholder = erfunden.  data-verify = echt, aber vor dem Livegang
   technisch zu bestaetigen. Die Unterscheidung ist wichtig: Platzhalter
   muessen ersetzt, verify-Daten nur geprueft werden. */
body.show-placeholders [data-verify="true"] {
  background: #E4F0FA !important; outline: 2px dashed #0E5381; outline-offset: 1px;
  border-radius: 3px; color: #002244 !important;
}

/* =========================================================================
   Nachtrag aus dem Audit nach den Web Interface Guidelines, 11. September 2026
   ========================================================================= */

/* 1 — Ankerlinks landeten unter der klebenden Kopfzeile.
   Gemessen auf /kontakt/: nach dem Sprung auf #formular lag die Ueberschrift
   15 px UEBER der Unterkante des Kopfes, bei #anfahrt 2 px. Man springt also
   an den Anfang eines Abschnitts und sieht ihn nicht.
   Die Kopfzeile ist nicht gleich hoch: 75 px bis 1023, dann 139 px, weil die
   Navigation in eine zweite Zeile umbricht, und ab ~1180 px wieder 91 px.
   Der Umbruchpunkt liegt gemessen zwischen 1100 und 1180. Jede Stufe bekommt
   deshalb ihren eigenen Abstand plus 16 px Luft. */
main [id] { scroll-margin-top: 92px; }
@media (min-width: 1024px) { main [id] { scroll-margin-top: 156px; } }
/* 119 px + 16 px Luft: die Kopfzeile ist mit F1 von 91 auf 119 px gewachsen,
   und dieser Wert haengt direkt an ihr. Wer die Kopfhoehe wieder aendert,
   aendert hier mit — sonst landen die Ankerlinks wieder darunter. */
@media (min-width: 1180px) { main [id] { scroll-margin-top: 136px; } }

/* 2 — 300 ms Verzoegerung beim Antippen, weil der Browser auf einen
   Doppeltipp zum Zoomen wartet. Auf einer Seite, die zum grossen Teil vom
   Telefon gelesen wird, ist das bei jedem Menuepunkt spuerbar. */
a, button, label, summary, input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
}

/* =========================================================================
   H1 "Ruhig" — die Menuepunkte selbst
   Dieser Block stand zuerst weiter oben und wurde von der Grundregel in
   Abschnitt 9 ueberschrieben: gleiche Spezifitaet, spaeter im Dokument
   gewinnt. Gemessen fiel es auf, weil Polster und Radius die alten Werte
   behielten (12 px statt 18, 6 px statt 8). Deshalb steht er jetzt am Ende.
   ========================================================================= */
@media (min-width: 1024px) {
  .nav-list { gap: 6px; }
  .nav-list > li > a:not(.btn) {
    min-height: 52px;
    padding-inline: 18px;
    border-radius: 8px 8px 0 0;
    /* Alle Punkte tragen die Kante durchsichtig — sonst springt der aktuelle
       beim Wechsel um 2 px nach oben. */
    border-bottom: 2px solid transparent;
  }
}

/* =========================================================================
   Global button motion — one contract on every built page (D-90)
   ========================================================================= */
:root {
  --mw-button-ease: cubic-bezier(.23, 1, .32, 1);
  --mw-button-hover: 140ms;
  --mw-button-press: 90ms;
}

:where(button, .btn, .mw-btn, .mc-btn, .mw-mini) {
  transition-property: transform, background-color, border-color, color !important;
  transition-duration: var(--mw-button-hover) !important;
  transition-timing-function: var(--mw-button-ease) !important;
}

@media (hover: hover) and (pointer: fine) {
  :where(button, .btn, .mw-btn, .mc-btn, .mw-mini):not(:disabled):hover {
    transform: translateY(-1px) !important;
  }
  :where(button, .btn, .mw-btn, .mc-btn, .mw-mini):not(:disabled):active {
    transform: translateY(-1px) !important;
  }
}

:where(button, .btn, .mw-btn, .mc-btn, .mw-mini):not(:disabled):active {
  transform: none !important;
  scale: .96 !important;
  transition-duration: var(--mw-button-press) !important;
}

.mw-tactile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  min-width: 0;
  pointer-events: none;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  :where(button, .btn, .mw-btn, .mc-btn, .mw-mini),
  :where(button, .btn, .mw-btn, .mc-btn, .mw-mini):not(:disabled):hover,
  :where(button, .btn, .mw-btn, .mc-btn, .mw-mini):not(:disabled):active {
    transform: none !important;
    scale: 1 !important;
    transition: none !important;
  }
  .mw-tactile { transform: none !important; }
}