/*
 * BIcon – Berufliche Inklusion connected – Stylesheet (Redesign 01.10.2026, Vorlage: Claude Design).
 *
 * Aufbau: Schrift → Tokens (hell / dunkel / kontrast) → Grundlagen → Shell → Komponenten → Seiten.
 * Barrierefreiheit: WCAG 2.2 AA. Alle Größen in rem; Breakpoints als Container Queries in em am <body>,
 * damit sie bei größerer Schrift (A+ / A++ setzt font-size am <html>) früher greifen – Media Queries täten das nicht.
 * Keine Inline-Styles (CSP), keine externen Ressourcen.
 *
 * Breakpoints (Container „seite“): < 37.5em Handy · 37.5–56.25em Tablet hoch · 56.25–80em Tablet quer/Laptop · ≥ 80em Desktop.
 */

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../fonts/AtkinsonHyperlegibleNext-wght.woff2") format("woff2"), url("../fonts/AtkinsonHyperlegibleNext-wght.ttf") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src: url("../fonts/AtkinsonHyperlegibleMono-wght.woff2") format("woff2"), url("../fonts/AtkinsonHyperlegibleMono-wght.ttf") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
    color-scheme: light;
    --bg: #f3f5f7;
    --surface: #ffffff;
    --surface-2: #eef1f4;
    --header: #ffffff;
    --border: #e1e5ea;
    --border-strong: #7b8594;
    --text: #111827;
    --text-2: #374151;
    --muted: #4b5563;
    --accent: #5e798a; /* Metallblau; Weiß darauf 4,6:1 – nie als Textfarbe auf Weiß, dafür --accent-ink */
    --accent-ink: #3f5868;
    --accent-tint: #e3eaef;
    --on-accent: #ffffff;
    --chart-accent: #5e798a;
    --blue: #2f5f8a;
    --blue-tint: #e7eef6;
    --violet: #6a4c93;
    --violet-tint: #efeaf6;
    --orange: #a8460b;
    --orange-chart: #c9601c; /* ≥ 3:1 auf weiß (1.4.11) */
    --orange-tint: #fdeadb;
    --danger: #b4232a;
    --danger-tint: #fbe9e9;
    --success: #13703a;
    --success-tint: #e6f4ea;
    --track: #e5eaee;
    --focus: #1d4ed8;
    --fokus-feld: #d6e4ef; /* Hintergrund eines Eingabefelds mit Fokus */
    --q-jobwein: #7b3a4b;
    --q-stadtwien: #17695a;
    --q-stadtwien-tint: #dcf3ec;
    --q-stadtwerke: #8c2f62;
    --q-stadtwerke-tint: #f8e6ef;
    --q-wienerjobs: #4f6420;
    --q-wienerjobs-tint: #eef3df;
    --q-noelga: #43479a;
    --q-noelga-tint: #ebebf8;
    --q-lehrlingsportal: #0f5f73;
    --q-lehrlingsportal-tint: #ddeff3;
    --q-anbieter: #2f6166;
    --q-andere: #4d5563;
    --q-text: #ffffff;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-panel: 0 12px 32px rgba(16, 24, 40, 0.18);
    --fokus-breite: 3px;
    --schrift: "Atkinson Hyperlegible Next", -apple-system, "Segoe UI", Roboto, sans-serif;
    --schrift-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --r-chip: 6px;
    --r-feld: 8px;
    --r-kachel: 10px;
    --r-karte: 12px;
}
/* Dunkel: Systemeinstellung, solange nichts gewählt ist … */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --bg: #0f1623;
        --surface: #172131;
        --surface-2: #1f2b3d;
        --header: #131c2a;
        --border: #2c3a4f;
        --border-strong: #7586a0;
        --text: #eef2f7;
        --text-2: #cdd6e2;
        --muted: #a9b6c7;
        --accent: #5e798a;
        --accent-ink: #a9c0ce;
        --accent-tint: #24384a;
        --chart-accent: #8aa4b4;
        --blue: #8cbcec;
        --blue-tint: #1a2d45;
        --violet: #c0aae6;
        --violet-tint: #2a2540;
        --orange: #f3a368;
        --orange-chart: #f08a4b;
        --orange-tint: #3b2a22;
        --danger: #ff9c9c;
        --danger-tint: #3b2027;
        --success: #72d69d;
        --success-tint: #163427;
        --track: #2a374a;
        --focus: #9ec5ff;
        --fokus-feld: #2c4560;
        --q-jobwein: #deaab8;
        --q-stadtwien: #8fdcc6;
        --q-stadtwien-tint: #173a33;
        --q-stadtwerke: #f2a7cd;
        --q-stadtwerke-tint: #3a1d2c;
        --q-wienerjobs: #c3d98a;
        --q-wienerjobs-tint: #2a3317;
        --q-noelga: #b8bcf5;
        --q-noelga-tint: #23264a;
        --q-lehrlingsportal: #8fd3e3;
        --q-lehrlingsportal-tint: #15333b;
        --q-anbieter: #98cccf;
        --q-andere: #b8bfca;
        --q-text: #172131;
        --shadow: none;
        --shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.5);
    }
}

/* … oder ausdrücklich gewählt. */
:root[data-theme="dunkel"] {
    color-scheme: dark;
    --bg: #0f1623;
    --surface: #172131;
    --surface-2: #1f2b3d;
    --header: #131c2a;
    --border: #2c3a4f;
    --border-strong: #7586a0;
    --text: #eef2f7;
    --text-2: #cdd6e2;
    --muted: #a9b6c7;
    --accent: #5e798a;
    --accent-ink: #a9c0ce;
    --accent-tint: #24384a;
    --chart-accent: #8aa4b4;
    --blue: #8cbcec;
    --blue-tint: #1a2d45;
    --violet: #c0aae6;
    --violet-tint: #2a2540;
    --orange: #f3a368;
    --orange-chart: #f08a4b;
    --orange-tint: #3b2a22;
    --danger: #ff9c9c;
    --danger-tint: #3b2027;
    --success: #72d69d;
    --success-tint: #163427;
    --track: #2a374a;
    --focus: #9ec5ff;
    --fokus-feld: #2c4560;
    --q-jobwein: #deaab8;
    --q-stadtwien: #8fdcc6;
    --q-stadtwien-tint: #173a33;
    --q-stadtwerke: #f2a7cd;
    --q-stadtwerke-tint: #3a1d2c;
    --q-wienerjobs: #c3d98a;
    --q-wienerjobs-tint: #2a3317;
    --q-noelga: #b8bcf5;
    --q-noelga-tint: #23264a;
    --q-lehrlingsportal: #8fd3e3;
    --q-lehrlingsportal-tint: #15333b;
    --q-anbieter: #98cccf;
    --q-andere: #b8bfca;
    --q-text: #172131;
    --shadow: none;
    --shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Kontrast: gewählt oder „Mehr Kontrast“ im System. */
@media (prefers-contrast: more) {
    :root:not([data-theme]) {
        color-scheme: light;
        --bg: #ffffff;
        --surface: #ffffff;
        --surface-2: #f2f2f2;
        --header: #ffffff;
        --border: #000000;
        --border-strong: #000000;
        --text: #000000;
        --text-2: #000000;
        --muted: #1a1a1a;
        --accent: #2c4250;
        --accent-ink: #1f3340;
        --accent-tint: #dfe8ee;
        --chart-accent: #1f3340;
        --blue: #002f6c;
        --blue-tint: #dde8f7;
        --violet: #3d1a78;
        --violet-tint: #ece4f8;
        --orange: #7a2e00;
        --orange-chart: #b84d0c;
        --orange-tint: #fde3cf;
        --danger: #8f0000;
        --danger-tint: #ffe0e0;
        --success: #004d1a;
        --success-tint: #dcf2e3;
        --track: #d0d0d0;
        --focus: #c2006b;
        --fokus-feld: #fff09a;
        --q-jobwein: #561d2d;
        --q-stadtwien: #0b4237;
        --q-stadtwien-tint: #dcf3ec;
        --q-stadtwerke: #5c1240;
        --q-stadtwerke-tint: #f8e6ef;
        --q-wienerjobs: #2f3d0f;
        --q-wienerjobs-tint: #eef3df;
        --q-noelga: #262a6e;
        --q-noelga-tint: #ebebf8;
        --q-lehrlingsportal: #08404e;
        --q-lehrlingsportal-tint: #ddeff3;
        --q-anbieter: #113f43;
        --q-andere: #2a303a;
        --q-text: #ffffff;
        --shadow: none;
        --fokus-breite: 4px;
    }
}

:root[data-theme="kontrast"] {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f2f2f2;
    --header: #ffffff;
    --border: #000000;
    --border-strong: #000000;
    --text: #000000;
    --text-2: #000000;
    --muted: #1a1a1a;
    --accent: #2c4250;
    --accent-ink: #1f3340;
    --accent-tint: #dfe8ee;
    --chart-accent: #1f3340;
    --blue: #002f6c;
    --blue-tint: #dde8f7;
    --violet: #3d1a78;
    --violet-tint: #ece4f8;
    --orange: #7a2e00;
    --orange-chart: #b84d0c;
    --orange-tint: #fde3cf;
    --danger: #8f0000;
    --danger-tint: #ffe0e0;
    --success: #004d1a;
    --success-tint: #dcf2e3;
    --track: #d0d0d0;
    --focus: #c2006b;
    --fokus-feld: #fff09a;
    --q-jobwein: #561d2d;
    --q-stadtwien: #0b4237;
    --q-stadtwien-tint: #dcf3ec;
    --q-stadtwerke: #5c1240;
    --q-stadtwerke-tint: #f8e6ef;
    --q-wienerjobs: #2f3d0f;
    --q-wienerjobs-tint: #eef3df;
    --q-noelga: #262a6e;
    --q-noelga-tint: #ebebf8;
    --q-lehrlingsportal: #08404e;
    --q-lehrlingsportal-tint: #ddeff3;
    --q-anbieter: #113f43;
    --q-andere: #2a303a;
    --q-text: #ffffff;
    --shadow: none;
    --fokus-breite: 4px;
}

:root[data-theme="kontrast"] a,
:root[data-theme="kontrast"] .rang-name,
:root[data-theme="kontrast"] .stelle-link {
    text-decoration: underline;
}

/* Systemeinstellung „Mehr Kontrast“ ohne eigene Wahl: Links ebenfalls unterstrichen */
@media (prefers-contrast: more) {
    :root:not([data-theme]) a,
    :root:not([data-theme]) .rang-name,
    :root:not([data-theme]) .stelle-link {
        text-decoration: underline;
    }
}

/* Schriftgröße A / A+ / A++ – alles in rem, die ganze Oberfläche wächst mit. Große Bildschirme bekommen zusätzlich eine
   größere Grundschrift (Wunsch der Nutzerin, 09.10.2026: am 4K-Monitor war alles zu klein); Handy und Tablet bleiben gleich. */
:root { --schrift-basis: 1; }
@media (min-width: 1280px) { :root { --schrift-basis: 1.0625; } }
@media (min-width: 1800px) { :root { --schrift-basis: 1.125; } }
@media (min-width: 2400px) { :root { --schrift-basis: 1.25; } }
:root[data-schrift="125"] { font-size: calc(125% * var(--schrift-basis)); }
:root[data-schrift="150"] { font-size: calc(150% * var(--schrift-basis)); }

/* ---------- Grundlagen ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: calc(100% * var(--schrift-basis));
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
    /* 2.4.11: Fokus nie unter der klebenden Kopfzeile bzw. der Navigation unten. --kopf-hoehe misst app.js
       (die Kopfzeile wächst bei A++ und umbrechender Navigation), ohne JS gilt der Schätzwert. */
    scroll-padding-top: calc(var(--kopf-hoehe, 8.5rem) + 1rem);
    scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    min-height: 100dvh; /* Handy: ohne Sprung durch ein- und ausfahrende Adressleiste */
    container: seite / inline-size;
}

[hidden] {
    display: none !important;
}

img,
svg {
    max-width: 100%;
}

svg.icon {
    flex: none;
}

h1,
h2,
h3 {
    line-height: 1.25;
    margin: 0 0 0.75rem;
    font-weight: 700;
}

h1 {
    font-size: 1.875rem;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1.0625rem;
}

p,
ul,
ol,
dl {
    margin: 0 0 1rem;
}

a {
    color: var(--accent-ink);
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration-thickness: 2px;
}

strong,
b {
    font-weight: 700;
}

code,
pre,
textarea.code {
    font-family: var(--schrift-mono);
    font-size: 0.875rem;
}

textarea.code {
    font-size: 1rem; /* bearbeitbar – unter 16 px zoomt iOS beim Tippen */
}

.zahl,
time {
    font-variant-numeric: tabular-nums;
}

/* Fokus: immer sichtbar, 3 px (Kontrast 4 px) */
:focus-visible {
    outline: var(--fokus-breite) solid var(--focus);
    outline-offset: 2px;
}

main:focus,
[tabindex="-1"]:focus {
    outline: none;
}

.fehler-zusammenfassung:focus-visible,
.fehler-zusammenfassung:focus,
.hinweisbox[role="alert"]:focus {
    outline: var(--fokus-breite) solid var(--focus);
    outline-offset: 2px;
}

/* Trefferkarten füllen die Liste bis zum Rand (overflow: hidden) – Ring nach innen, sonst abgeschnitten */
.treffer-link:focus-visible {
    outline-offset: -5px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--focus);
    border-radius: var(--r-feld);
    font-weight: 700;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

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

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

.text-breite {
    max-width: 75ch;
}

/* ---------- Shell (Design V2): Kopfzeile mit Navigation, keine Seitenleiste ---------- */
/*
 * Breakpoints als Container Queries in em am <body> (A+ / A++ verschiebt sie):
 *   < 37.5em  Handy: Logo ohne Unterzeile, Suche in eigener Zeile, Navigation als feste Leiste unten
 *   37.5–64em Tablet hoch: „Darstellung“ nur als Symbol, „Stelle anlegen“ im Seitenkopf der Lehrstellen
 *   64–72em   Tablet quer: Konto nur als Kürzel-Symbol, keine Statuszeile
 *   ≥ 72em    alles sichtbar
 */

.kopf {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--header);
    border-bottom: 1px solid var(--border);
    padding-top: 0.75rem; /* Wunsch der Nutzerin: Kopf ~3 mm vom oberen Rand abrücken */
}

.kopf-innen {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
    position: relative; /* Bezug für das Menü „Darstellung“ am Handy */
}

.kopf-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-height: 4rem;
    padding: 0.5rem 0;
    min-width: 0;
}

.marke {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--text);
    text-decoration: none;
    min-height: 2.75rem;
    flex: none;
    border-radius: var(--r-feld);
}

.marke .logo {
    flex: none;
    /* Handy: so breit, wie neben den drei Knöpfen (je 2.75rem + Abstände + Rand ≈ 12rem) Platz ist, höchstens 2.75rem hoch –
       das breite Seitenlogo (02_logo_hell) würde sonst bei 320 px oder A++ die Kopfzeile umbrechen; ab Tablet 62 px hoch */
    width: max(6.55rem, min(7.64rem, calc(100vw - 12.25rem))); /* 04.10.2026: −15 %, −10 %, −3 % (ursprünglich 10.25rem) */ /* sehr eng (A++ auf 320 px): eigene Zeile statt Briefmarke */
    height: auto;
}

@container seite (min-width: 37.5em) {
    .marke .logo {
        width: auto;
        height: 2.88rem; /* 04.10.2026: −15 %, −10 %, −3 % (ursprünglich 3.875rem = 62 px, jetzt 46 px) */
    }
}

/* Schriftzug „bi | con“: „bi“ und Strich Metallblau, „con“ in Textfarbe */
.logo-akzent {
    fill: var(--accent);
}

.logo-text {
    fill: currentColor;
}

/* Seitenlogo 03_logo_hell: Kachel metallblau mit weißem Zeichen – in allen Farbschemata gleich; „BIcon“ und Zusatz in
   Textfarbe (hell fast schwarz, dunkel hell) */
.logo-kachel {
    fill: #5e798a;
}

.logo-zeichen {
    fill: #ffffff;
}

/* Anmeldeseite 02_logo_dunkel auf Metallblau: „BI“ weiß, Rest dunkelgrau, Kachel metallblau mit dunklem Rand */
.logo-l-hell {
    fill: #ffffff;
}

.logo-l-dunkel {
    fill: #2b2d2d;
}

.logo-l-kachel {
    fill: #5e798a;
    stroke: #2b2d2d;
    stroke-width: 6.25px;
}

/* Kontrast-Schema: Fläche ist dort dunkles Blau – dunkelgraue Teile würden verschwinden, daher weiß */
:root[data-theme="kontrast"] .logo-l-dunkel {
    fill: #ffffff;
}

:root[data-theme="kontrast"] .logo-l-kachel {
    stroke: #ffffff;
}

/* Bildmarke: Quadrat immer im Original-Metallblau, Ring und Punkt weiß – in allen Farbschemata */
.logo-quadrat {
    fill: #5e798a;
}

.logo-innen {
    fill: #ffffff;
}

/* Anmeldeseite (bi_n4): Quadrat hellblau mit graublauem Ring und Punkt, „bi“ hellblau, Rest Weiß – auf Metallblau */
.logo-login .logo-quadrat {
    fill: #cbe1ef;
}

.logo-login .logo-innen {
    fill: #748d9d;
}

.logo-login .logo-akzent,
:root[data-theme="dunkel"] .logo-login .logo-akzent {
    fill: #cbe1ef;
}

.logo-login .logo-strich,
.logo-login .logo-text,
:root[data-theme="dunkel"] .logo-login .logo-strich {
    fill: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .logo-login .logo-akzent {
        fill: #cbe1ef;
    }

    :root:not([data-theme]) .logo-login .logo-strich {
        fill: #ffffff;
    }
}

.login-marke .logo {
    max-width: 100%;
    height: auto;
}

/* bi03: ganz in Weiß auf der Metallblau-Fläche der Anmeldeseite */
.logo-weiss .logo-akzent,
.logo-weiss .logo-text,
:root[data-theme="dunkel"] .logo-weiss .logo-akzent {
    fill: #ffffff;
}

:root[data-theme="dunkel"] .logo-akzent {
    fill: var(--accent-ink);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .logo-akzent {
        fill: var(--accent-ink);
    }

    :root:not([data-theme]) .logo-weiss .logo-akzent {
        fill: #ffffff;
    }
}

.globale-suche {
    position: relative;
    display: flex;
    align-items: center;
    order: -1; /* Handy: Suche als erste Zeile – sie scrollt weg, Logo und Menü bleiben kleben (siehe --kopf-versatz) */
    flex: 1 0 100%;
    min-width: 0;
}

.globale-suche .icon {
    position: absolute;
    left: 0.875rem;
    color: var(--muted);
    pointer-events: none;
}

.globale-suche input[type="search"] {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0 0.875rem 0 2.5rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-feld);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
}

.kopf-rechts {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    flex: none;
    min-width: 0;
}

/* Menü „Darstellung“: <details> funktioniert ohne JavaScript; app.js schließt es mit Esc und beim Klick daneben */
.darstellung-menue {
    position: relative;
}

.darstellung-knopf {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 0.75rem;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: var(--r-feld);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.darstellung-knopf::-webkit-details-marker {
    display: none;
}

.darstellung-knopf:hover,
.darstellung-menue[open] > .darstellung-knopf {
    background: var(--accent-tint);
}

/* Handy und Tablet hoch: nur Symbol, der Text bleibt für Screenreader */
.darstellung-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.darstellung-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 40;
    width: 17rem;
    max-width: calc(100vw - 2rem);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-karte);
    padding: 1rem;
    box-shadow: var(--shadow-panel);
}

.darstellung-formular {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.darstellung-gruppe {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.darstellung-titel {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-2);
}

.segmente-voll {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmente-voll button {
    min-height: 2.75rem;
    white-space: normal;
}

.kopf .knopf-anlegen {
    display: none;
}

.konto-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.25rem;
    border-radius: var(--r-kachel);
    color: var(--text);
    text-decoration: none;
}

.konto-link:hover,
.konto-link[aria-current="page"] {
    background: var(--surface-2);
}

.avatar {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent-ink);
    display: grid;
    place-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

/* Name und Rolle erst ab 72em sichtbar; darunter nur für Screenreader */
.konto-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.konto-name {
    font-size: 0.875rem;
    font-weight: 700;
}

.konto-rolle {
    font-size: 0.75rem;
    color: var(--muted);
}

.abmelden-formular {
    margin: 0;
}

.knopf-abmelden {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    justify-content: center;
    padding: 0 0.625rem;
    border: 1.5px solid transparent;
    border-radius: var(--r-feld);
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
}

.knopf-abmelden:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

/* Handy: nur Symbol, Text für Screenreader */
.abmelden-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Navigationszeile; am Handy als feste Leiste unten (Daumenreichweite) */
.nav-zeile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hauptnavigation {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--header);
    border-top: 1px solid var(--border);
    padding: 0.25rem max(0.25rem, env(safe-area-inset-right)) calc(0.25rem + env(safe-area-inset-bottom)) max(0.25rem, env(safe-area-inset-left));
}

.hauptnavigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    /* Spalten mindestens so breit wie ihr Wort („Kund*innen“ ist länger als „Start“), den Rest gleich verteilt */
    grid-auto-columns: minmax(max-content, 1fr);
    gap: 0;
}

.hauptnavigation a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 3.25rem;
    padding: 0.25rem 0.125rem; /* schmal: jede Spalte braucht die Breite fürs Label */
    border-radius: var(--r-kachel);
    color: var(--text-2);
    text-decoration: none;
    font-size: 0.75rem;
    text-align: center;
}

.hauptnavigation a .icon {
    width: 1.375rem;
    height: 1.375rem;
}

/* Nur mit Maus: am Touch-Gerät bliebe die Farbe nach dem Tippen stehen (Audit 08.10.2026) */
@media (hover: hover) {
    .hauptnavigation a:hover {
        background: var(--surface-2);
        color: var(--text);
    }
}

.hauptnavigation a[aria-current="page"] {
    background: var(--accent-tint);
    color: var(--text);
    font-weight: 700;
}

/* Handy: nur das Kurzlabel – sichtbarer Text = zugänglicher Name (WCAG 2.5.3, Sprachsteuerung „Klick Start“) */
.nav-lang {
    display: none;
}

.nav-zahl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Bei A++ auf 320–360 px passt „Stellen“ nicht in eine Spalte: Schrift an die Breite koppeln (bewusster Kompromiss:
   nur bei 320–360 px wird das Label auf 12,8–14,4 px gedeckelt, ab 390 px wirkt A+/A++ voll), sonst sauber trennen */
.nav-kurz {
    display: block;
    font-size: min(0.75rem, 4vw);
    hyphens: auto;
    overflow-wrap: anywhere;
}

.nav-zahl {
    font-family: var(--schrift-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--muted);
}

.daten-stand {
    display: none;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0 auto;
    font-size: 0.8125rem;
    color: var(--muted);
    white-space: nowrap;
}

.daten-stand .icon {
    color: var(--success);
}

.daten-stand-alt .icon {
    color: var(--orange);
}

.daten-stand b {
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.inhalt {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    min-width: 0;
    padding: 1.25rem max(1rem, env(safe-area-inset-right)) 6rem max(1rem, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    container: inhalt / inline-size;
}

.inhalt > * {
    margin-bottom: 0;
}

.fuss {
    max-width: 90rem;
    margin: 0 auto;
    color: var(--muted);
    font-size: 0.8125rem;
    padding: 0 max(1rem, env(safe-area-inset-right)) 6rem max(1rem, env(safe-area-inset-left));
}

.mit-shell .fuss {
    width: 100%;
}

.fuss p {
    margin: 0;
    max-width: 50rem;
}

.mit-shell .inhalt {
    padding-bottom: 2rem;
}

.mit-shell {
    /* Platz für die Navigation unten (Handy) samt Home-Balken am iPhone, damit nichts verdeckt wird (2.4.11) */
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

.mit-shell .fuss {
    padding-bottom: 1.5rem;
}

/* „Stelle anlegen“ im Seitenkopf der Lehrstellen: nur, solange er nicht in der Kopfzeile steht */
.knopf.knopf-anlegen-seite {
    display: inline-flex;
}

@container seite (min-width: 37.5em) {
    .mit-shell {
        padding-bottom: 0;
    }

    .kopf-innen,
    .inhalt,
    .fuss {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .inhalt {
        padding-top: 1.5rem;
    }

    .kopf-zeile {
        flex-wrap: nowrap;
        gap: 1rem;
        padding-bottom: 1.25rem; /* Wunsch der Nutzerin: ~3 mm mehr Luft zwischen Logo/Suche und Menüleiste */
    }

    .globale-suche {
        order: 0;
        flex: 1 1 auto;
        max-width: 30rem;
        margin-left: 2.5rem; /* Wunsch der Nutzerin: Suche mit Abstand zum Logo */
    }

    .globale-suche input[type="search"] {
        font-size: 1rem; /* unter 16 px zoomt iOS beim Tippen */
    }

    .abmelden-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .nav-zeile {
        border-top: 1px solid var(--border);
        min-height: 3.25rem;
    }

    .hauptnavigation {
        position: static;
        flex: 1;
        min-width: 0;
        border-top: 0;
        padding: 0.375rem 0;
        background: transparent;
    }

    .hauptnavigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .hauptnavigation a {
        flex-direction: row;
        gap: 0.5rem;
        min-height: 2.75rem;
        padding: 0 0.875rem;
        border-radius: var(--r-feld);
        font-size: 0.9375rem;
        white-space: nowrap;
    }

    .hauptnavigation a .icon {
        width: 1.125rem;
        height: 1.125rem;
    }

    .nav-lang {
        display: inline;
    }

    .nav-zahl {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .nav-kurz {
        display: none;
    }
}

@container seite (min-width: 64em) {
    .darstellung-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .darstellung-knopf {
        padding: 0 0.875rem;
    }

    .kopf .knopf-anlegen {
        display: inline-flex;
        white-space: nowrap;
    }

    .knopf.knopf-anlegen-seite {
        display: none;
    }
}

@container seite (min-width: 72em) {
    .konto-link {
        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    }

    .konto-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        display: flex;
        flex-direction: column;
        line-height: 1.15;
        white-space: nowrap;
    }

    .daten-stand {
        display: flex;
    }
}

/* Abgemeldet (Fehlerseiten, Passwort setzen): schlichter Rahmen */
.einfach {
    max-width: 90rem;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.einfach-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.einfach .inhalt {
    max-width: 48rem;
    padding-bottom: 3rem;
}

.einfach .fuss {
    padding-bottom: 1.5rem;
}

/* ---------- Umschalter (Darstellung, Schrift, Standort) ---------- */

.umschalter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin: 0;
}

.segmente {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    white-space: nowrap;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-kachel);
    padding: 3px;
    gap: 2px;
}

.segmente button,
.segmente a {
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    min-height: 2.75rem;
    min-width: 2.5rem;
    padding: 0 0.75rem;
    border-radius: var(--r-feld);
    background: transparent;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    text-decoration: none;
}

.segmente button:hover {
    background: var(--surface);
    color: var(--text);
}

.segmente [aria-pressed="true"],
.segmente [aria-current="true"] {
    background: var(--accent);
    color: var(--on-accent);
}

.segmente [aria-pressed="true"]:hover {
    background: var(--accent);
    color: var(--on-accent);
}

.segmente-schrift button {
    padding: 0 0.5rem;
}

.segmente .schrift-125 {
    font-size: 1rem;
}

.segmente .schrift-150 {
    font-size: 1.125rem;
}

/* ---------- Knöpfe ---------- */

.knopf,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 1.125rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--on-accent);
    background: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: var(--r-feld);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.knopf:hover,
button:hover {
    color: var(--on-accent);
    background: var(--accent-ink);
    border-color: var(--accent-ink);
    text-decoration: none;
}

:root[data-theme="dunkel"] .knopf:not(.knopf-zweitrangig):not(.knopf-gefahr):not(.knopf-text):hover,
:root[data-theme="dunkel"] button:not(.knopf-zweitrangig):not(.knopf-gefahr):not(.knopf-text):not(.knopf-icon):hover {
    background: #4b6474;
    border-color: #4b6474;
}

.knopf-zweitrangig {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

.knopf-zweitrangig:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--accent);
}

.knopf-gefahr {
    background: var(--surface);
    color: var(--danger);
    border-color: var(--danger);
}

.knopf-gefahr:hover {
    background: var(--danger-tint);
    color: var(--danger);
    border-color: var(--danger);
}

.knopf-text {
    background: none;
    border-color: transparent;
    color: var(--accent-ink);
    padding: 0 0.375rem;
}

.knopf-text:hover {
    background: none;
    border-color: transparent;
    color: var(--accent-ink);
    text-decoration: underline;
}

.knopf-icon {
    background: none;
    border: 0;
    color: var(--muted);
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
}

.knopf-icon:hover {
    background: var(--surface-2);
    color: var(--text);
}

.knopf-klein {
    min-height: 2.75rem;
    padding: 0 0.875rem;
    font-size: 0.875rem;
}

.knopf-gross {
    min-height: 3rem;
    font-size: 1rem;
}

.knopfzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
}

.inline-form {
    display: inline;
    margin: 0;
}

button:disabled,
button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- Seitenkopf ---------- */

.seitenkopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.seitenkopf h1 {
    margin: 0;
}

.seitenkopf-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.seitenkopf-zusatz {
    font-size: 0.9375rem;
    color: var(--muted);
    margin: 0;
}

.dachzeile {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--accent-ink);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
}

.zurueck-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    align-self: flex-start;
}

.zurueck-link:hover {
    text-decoration: underline;
}

.aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Alte Kopfzeile (Unterseiten) */
.kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.kopfzeile h1 {
    margin: 0;
}

/* Reiter (Seitenbereiche als Links, aktueller mit aria-current) */
.reiter {
    margin-top: 1rem;
    border-bottom: 1px solid var(--border);
}

.reiter ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reiter li {
    min-width: 0;
    max-width: 100%;
}

.reiter a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0 1rem;
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
    border-radius: var(--r-feld);
    color: var(--text-2);
    text-decoration: none;
}

.reiter a:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* Aktiver Reiter wie die aktive Navigation: Fläche + fett, kein Unterstrich (Design V2) */
.reiter a[aria-current="page"] {
    background: var(--accent-tint);
    color: var(--text);
    font-weight: 700;
}

/* Kopf einer Kunden-Seite: direkt auf dem Hintergrund (keine Karte) */
.kunde-kopf {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kunde-kopf .reiter {
    margin-top: 0;
}

/* ---------- Karten / Flächen ---------- */

.flaeche,
.karte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-karte);
    box-shadow: var(--shadow);
    padding: 1.375rem 1.5rem;
    min-width: 0;
}

.flaeche > :last-child,
.karte > :last-child {
    margin-bottom: 0;
}

.flaeche h2,
.karte h2 {
    font-size: 1.0625rem;
    margin-bottom: 0.25rem;
}

.flaeche-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.875rem;
}

.flaeche-kopf h2 {
    margin: 0;
}

.untertitel {
    font-size: 0.875rem;
    color: var(--muted);
    margin: 0;
}

.karten {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.karte h3 {
    margin: 0 0 0.25rem;
}

.karte dl,
.dl-raster {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
}

.karte dt,
.dl-raster dt {
    color: var(--muted);
}

.karte dd,
.dl-raster dd {
    margin: 0;
}

.raster {
    display: grid;
    gap: 1rem;
}

.raster-kpi {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.raster-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.raster-kacheln {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* ---------- Meldungen ---------- */

.meldungen {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.meldungen:empty,
.meldungen:not(:has(.meldung)) {
    display: none;
}

.meldung {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.875rem 1rem;
    border-radius: var(--r-kachel);
    border: 1px solid;
    font-size: 0.9375rem;
    max-width: 75ch;
}

.meldung .icon {
    margin-top: 0.05rem;
}

.meldung {
    flex-wrap: wrap;
}

.meldung .meldung-aktion {
    margin-inline-start: auto;
    flex: 0 0 auto;
}

.meldung-erfolg {
    background: var(--success-tint);
    border-color: var(--success);
    color: var(--text);
}

.meldung-erfolg .icon {
    color: var(--success);
}

.meldung-fehler {
    background: var(--danger-tint);
    border-color: var(--danger);
    color: var(--text);
}

.meldung-fehler .icon {
    color: var(--danger);
}

.hinweisbox,
.meldung-hinweis {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--orange-tint);
    border: 1px solid var(--orange);
    border-radius: var(--r-kachel);
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    max-width: 75ch;
    margin: 0 0 1rem;
}

.hinweisbox-block {
    display: block;
}

.hinweisbox-block h3 {
    margin: 0 0 0.375rem;
}

.hinweisbox-block ul {
    margin: 0 0 0.5rem;
}

.hinweisbox > .icon {
    color: var(--orange);
    margin-top: 0.1rem;
}

.infobox {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--surface-2);
    border-radius: var(--r-kachel);
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    color: var(--text-2);
    max-width: 75ch;
    margin: 0 0 1rem;
}

.infobox > .icon {
    margin-top: 0.15rem;
}

.hinweisbox p,
.infobox p {
    margin: 0 0 0.375rem;
}

.hinweisbox p:last-child,
.infobox p:last-child {
    margin-bottom: 0;
}

.fehler-zusammenfassung {
    display: flex;
    gap: 0.75rem;
    border: 2px solid var(--danger);
    background: var(--danger-tint);
    border-radius: 12px;
    padding: 1rem 1.125rem;
    margin: 0 0 1.25rem;
    max-width: 75ch;
}

.fehler-zusammenfassung > .icon {
    color: var(--danger);
    margin-top: 0.1rem;
}

.fehler-zusammenfassung h2 {
    font-size: 1rem;
    margin: 0 0 0.375rem;
}

.fehler-zusammenfassung ul {
    margin: 0;
    padding-left: 1.125rem;
}

.fehler-zusammenfassung a {
    color: var(--danger);
    font-weight: 700;
    text-decoration: underline;
}

/* ---------- Formulare ---------- */

.formular {
    max-width: 40rem;
}

.formular-flaeche {
    max-width: 44rem;
}

.feld {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.feld label {
    font-size: 0.9375rem;
    font-weight: 700;
}

.pflicht {
    font-weight: 400;
    color: var(--muted);
}

/* Kürzel werden immer in Großbuchstaben gespeichert – schon beim Tippen so anzeigen */
.eingabe-kuerzel {
    text-transform: uppercase;
}

.hinweis {
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.fehlertext {
    margin: 0;
    color: var(--danger);
    font-weight: 700;
    font-size: 0.9375rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="number"],
select,
textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-feld);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
}

textarea {
    min-height: 6rem;
    resize: vertical;
}

select {
    cursor: pointer;
}

/* Fokus in Eingabefeldern: eingefärbter Hintergrund (Wunsch der Nutzerin, 03.10.2026; --fokus-feld, Text darauf
   ≥ 8,7:1) und – seit dem Audit 03.10.2026 – zusätzlich ein 2 px starker Feldrahmen in --focus (≥ 3:1 gegen die
   Fläche, WCAG 2.4.7/1.4.11). Der Farbton allein unterschied sich nur mit 1,15–1,64:1. Kein Außenrahmen. */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="url"]:focus-visible,
input[type="search"]:focus-visible,
input[type="date"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    background: var(--fokus-feld);
    border-color: var(--focus);
    box-shadow: inset 0 0 0 1px var(--focus);
}

/* Windows-Kontrastdesign ersetzt Hintergrundfarben – dort bleibt der Fokusrahmen */
@media (forced-colors: active) {
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    .filter-panel-suche label:focus-within {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    .filter-panel-suche input[type="search"]:focus-visible {
        outline: none;
    }

    /* Gewählte Zustände sind sonst nur Hintergrund/Schatten und verschwinden im Kontrastdesign */
    [aria-pressed="true"],
    [aria-current="page"],
    [aria-selected="true"],
    .ist-ausgewaehlt,
    .filter-zaehler-aktiv {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }

    .sitzung-hinweis {
        border: 2px solid CanvasText;
    }
}

/* Hinweis vor dem Sitzungsende (app.js, WCAG 2.2.1) */
.sitzung-hinweis {
    position: fixed;
    z-index: 60;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    margin: 0 auto;
    max-width: 32rem;
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--focus);
    border-radius: var(--r-kachel);
    box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.3);
    padding: 1rem 1.25rem;
}

.sitzung-hinweis h2 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}

.sitzung-hinweis p {
    margin: 0 0 1rem;
}

/* Niedrige Bildschirme (Handy quer, 400 % Zoom, A++ im Querformat): Kopfzeile und Navigation nicht fixieren,
   sonst bleibt kaum Platz für den Inhalt (1.4.10 Reflow, 2.4.11 Fokus nicht verdeckt) */
@media (max-height: 40em) {
    .kopf,
    .hauptnavigation {
        position: static;
    }

    .mit-shell {
        padding-bottom: 0;
    }

    html {
        scroll-padding-top: 0;
        scroll-padding-bottom: 0;
    }

    .split .stellen-detail {
        position: static;
        max-height: none;
    }

    .sitzung-hinweis {
        position: absolute;
    }
}

.feld-fehler input,
.feld-fehler select,
.feld-fehler textarea,
[aria-invalid="true"] {
    border: 2px solid var(--danger);
}

.feld-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem; /* 44 px Touch-Ziel für Häkchen samt Beschriftung */
}

.feld-checkbox label {
    font-weight: 400;
    min-height: 1.5rem;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.5rem; /* 24 px Zielgröße (2.5.8) */
    height: 1.5rem;
    margin: 0.125rem 0 0;
    flex: none;
    accent-color: var(--accent);
    cursor: pointer;
}

fieldset {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.875rem 1rem 0.25rem;
    margin: 0 0 1.25rem;
    min-width: 0;
}

legend {
    font-weight: 700;
    padding: 0 0.25rem;
}

/* Kürzel werden immer in Großbuchstaben gespeichert – schon beim Tippen so anzeigen */
fieldset > .eingabe-kuerzel {
    text-transform: uppercase;
}

.hinweis {
    margin-bottom: 0.75rem;
}

.formular-flaeche > h2,
.flaeche > h2:first-child {
    margin-bottom: 1rem;
}

.feldgruppe {
    display: grid;
    gap: 0 1rem;
}

@container inhalt (min-width: 36rem) {
    .feldgruppe-2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Tabellen ---------- */

.tabelle-flaeche {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-karte);
    overflow: hidden;
}

.tabelle-scroll {
    overflow-x: auto;
    max-width: 100%;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9375rem;
}

caption {
    text-align: left;
    font-weight: 700;
    font-size: 1.0625rem;
    padding: 0 0 0.5rem;
}

th,
td {
    text-align: left;
    vertical-align: top;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

thead th {
    background: var(--surface-2);
    border-bottom: 1.5px solid var(--border-strong);
    white-space: nowrap;
    font-weight: 700;
}

tbody th {
    font-weight: 400;
}

tbody tr:last-child th,
tbody tr:last-child td {
    border-bottom: 0;
}

th:first-child,
td:first-child {
    padding-left: 1.25rem;
}

td.zahl,
th.zahl {
    text-align: right;
}

/* Tabelle ↔ Karten: unter ~44rem Inhaltsbreite Karten mit <dl> */
.nur-breit {
    display: none !important;
}

@container inhalt (min-width: 44rem) {
    .nur-schmal {
        display: none !important;
    }

    .nur-breit {
        display: block !important;
    }
}

/* ---------- Status und Typ-Etiketten: immer Symbol + Text ---------- */

.status,
.typ,
.markierung,
.etikett {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.0625rem 0.5rem;
    border-radius: var(--r-chip);
    line-height: 1.5;
}

.status-aktiv {
    background: var(--success-tint);
    color: var(--success);
}

.status-nicht_online {
    background: var(--orange-tint);
    color: var(--orange);
}

.status-geschlossen {
    background: var(--danger-tint);
    color: var(--danger);
}

.typ {
    background: var(--surface-2);
    color: var(--text-2);
    /* lange Typen („Vorstellungsgespräch“) dürfen bei großer Schrift umbrechen */
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.typ-blau { background: var(--blue-tint); color: var(--blue); }
.typ-violett { background: var(--violet-tint); color: var(--violet); }
.typ-tuerkis { background: var(--accent-tint); color: var(--accent-ink); }
.typ-gruen { background: var(--success-tint); color: var(--success); }
.typ-rot { background: var(--danger-tint); color: var(--danger); }
.typ-grau,
.typ-neutral { background: var(--surface-2); color: var(--text-2); }

.markierung {
    border: 1px solid var(--border-strong);
    color: var(--text);
    background: var(--surface);
}

.etikett {
    background: var(--surface-2);
    color: var(--muted);
}

/* ---------- Blättern ---------- */

.blaettern ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.blaettern a,
.blaettern span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-feld);
    text-decoration: none;
    font-weight: 700;
    background: var(--surface);
}

.blaettern [aria-current="page"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* ---------- Übersicht ---------- */

.quellenkasten {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
}

.quellenkasten-quelle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.icon-kachel {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-kachel);
    display: grid;
    place-items: center;
    flex: none;
    background: var(--accent-tint);
    color: var(--accent-ink);
}

.icon-kachel-klein {
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-feld);
}

.icon-kachel-blau { background: var(--blue-tint); color: var(--blue); }
.icon-kachel-violett { background: var(--violet-tint); color: var(--violet); }
.icon-kachel-orange { background: var(--orange-tint); color: var(--orange); }
.icon-kachel-grau { background: var(--surface-2); color: var(--text-2); }

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

.quellenkasten-link {
    margin-left: auto;
    font-size: 0.875rem;
    font-weight: 700;
    white-space: normal;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}

.standort {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.standort form {
    margin: 0;
}

.standort-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--muted);
    margin: 0;
}

.standort .segmente button {
    padding: 0 0.875rem;
}

.kpi {
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-karte);
    padding: 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    box-shadow: var(--shadow);
}

@media (hover: hover) {
    .kpi:hover {
        border-color: var(--accent);
        text-decoration: none;
        color: inherit;
    }
}

.kpi-kopf {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-2);
}

.kpi-fuss {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.625rem;
}

.kpi-werte {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.kpi-zahl {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.kpi-notiz {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--muted);
}

.kpi-notiz-gut { color: var(--success); }
.kpi-notiz-orange { color: var(--orange); }

/* Diagramme: Farbe über Klassen, die Werte stehen zusätzlich als Text/Tabelle */
.sparkline {
    flex: none;
}

.sparkline-flaeche { fill: var(--accent-tint); }
.sparkline-linie { fill: none; stroke: var(--chart-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sparkline-blau .sparkline-flaeche { fill: var(--blue-tint); }
.sparkline-blau .sparkline-linie { stroke: var(--blue); }
.sparkline-violett .sparkline-flaeche { fill: var(--violet-tint); }
.sparkline-violett .sparkline-linie { stroke: var(--violet); }
.sparkline-orange .sparkline-flaeche { fill: var(--orange-tint); }
.sparkline-orange .sparkline-linie { stroke: var(--orange); }

.raster-diagramme {
    grid-template-columns: minmax(0, 1fr);
}

@container inhalt (min-width: 56rem) {
    .raster-diagramme {
        grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    }
}

.woche-diagramm {
    position: relative;
    height: 12.5rem;
    margin-bottom: 0.875rem;
}

.woche-diagramm svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.woche-raster line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
.woche-raster line.basis { stroke: var(--border-strong); stroke-dasharray: none; stroke-width: 1.5; }
.woche-flaeche { fill: var(--chart-accent); fill-opacity: 0.14; }
.woche-linie { fill: none; stroke: var(--chart-accent); stroke-width: 2.5; stroke-linejoin: round; }

.woche-tabelle {
    width: 100%;
    table-layout: fixed;
    text-align: center;
    font-size: 0.9375rem;
}

.woche-tabelle th,
.woche-tabelle td {
    padding: 0;
    border: 0;
    text-align: center;
}

.woche-tabelle td {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.woche-tabelle th {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--muted);
    background: none;
}

.stand {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ring {
    position: relative;
    width: 9.375rem;
    height: 9.375rem;
    flex: none;
}

.ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring-spur { fill: none; stroke: var(--track); stroke-width: 18; }
.ring-bew { fill: none; stroke: var(--chart-accent); stroke-width: 18; }

.ring-mitte {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ring-zahl {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.ring-text {
    font-size: 0.8125rem;
    color: var(--muted);
}

.legende {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 11rem;
}

.legende li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
}

.legende-text {
    flex: 1;
}

.legende-farbe {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
    flex: none;
}

.legende-bew { background: var(--chart-accent); }
.legende-ohne { background: var(--track); border: 1px solid var(--border-strong); }

.legende-link {
    border-top: 1px solid var(--border);
    padding-top: 0.625rem;
}

.pfeil-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    min-height: 2.75rem;
}

.rangliste-kopf {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-bottom: 0.625rem;
}

.rangliste-kopf h2 {
    margin: 0;
}

.rangliste-kopf .icon {
    color: var(--accent);
}

.rangliste-blau .rangliste-kopf .icon {
    color: var(--blue);
}

.rangliste ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rangliste li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 13rem) minmax(3rem, 1fr) 2.5rem;
    gap: 0.75rem;
    align-items: center;
    min-height: 2.5rem;
    border-top: 1px solid var(--border);
}

.rang-nr {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.rang-name {
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.rang-name:hover {
    text-decoration: underline;
}

.rangliste-blau .rang-name {
    color: var(--blue);
}

.rang-wert {
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.balken { display: block; }
.balken-spur { fill: var(--track); }
.balken-wert { fill: var(--chart-accent); }
.balken-blau .balken-wert { fill: var(--blue); }

.leer-hinweis {
    color: var(--muted);
    font-size: 0.9375rem;
    margin: 0;
}

.bezirk-karte {
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-karte);
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (hover: hover) {
    .bezirk-karte:hover {
        border-color: var(--accent);
        box-shadow: 0 0 0 1px var(--accent);
        text-decoration: none;
        color: inherit;
    }
}

.bezirk-karte-kopf {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.bezirk-karte-name {
    font-weight: 700;
    flex: 1;
}

.bezirk-karte-kopf > .icon:last-child {
    color: var(--muted);
}

.bezirk-karte-fuss {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5rem;
}

.bezirk-karte-zahl {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    display: block;
}

.bezirk-karte-notiz {
    font-size: 0.8125rem;
    color: var(--muted);
}

/* ---------- Lehrstellen: Liste und Detail ---------- */

/* Lehrstellen (V2): Seitenkopf und Filterkarte über die ganze Breite, darunter Liste und Detail 50 : 50 */
.stellen-seite {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.liste-titelzeile {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.liste-titel {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
}

.liste-titelzeile h1 {
    margin: 0;
    font-size: 1.875rem;
}

.filterkarte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-karte);
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1rem;
}

.filterkarte .filterform {
    flex: 1 1 24rem;
    min-width: 0;
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Schmal (< 64em): mit Auswahl öffnet das Detail als eigene Ansicht („← Zur Trefferliste“), ohne Auswahl nur die Liste */
.mit-auswahl .filterkarte,
.split-auswahl .stellen-liste,
.split:not(.split-auswahl) .stellen-detail {
    display: none;
}

@container seite (min-width: 64em) {
    .split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .mit-auswahl .filterkarte {
        display: flex;
    }

    .split-auswahl .stellen-liste,
    .split:not(.split-auswahl) .stellen-detail {
        display: flex;
    }

    /* Nur das Detail-Feld neben der Trefferliste bleibt beim Scrollen stehen – nicht die eigene Stellen-Seite
       (dort würde der Stellenkopf Chronik und Formular überdecken). Abstand = Höhe der Kopfzeile. */
    .split .stellen-detail {
        position: sticky;
        top: calc(var(--kopf-hoehe, 8rem) + 0.5rem);
        max-height: calc(100vh - var(--kopf-hoehe, 8rem) - 1rem);
        max-height: calc(100dvh - var(--kopf-hoehe, 8rem) - 1rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .split .stellen-detail .zurueck-link {
        display: none;
    }
}

.stellen-liste {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-karte);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.trefferzahl {
    font-size: 0.9375rem;
    color: var(--muted);
    white-space: nowrap;
    margin: 0;
}

.trefferzahl b {
    color: var(--text);
}

.filterform {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filterleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.filter-gruppe > summary {
    list-style: none;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 2.75rem;
    padding: 0 0.5rem 0 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    border-radius: var(--r-feld);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
}

/* Beschriftung darf bei sehr schmaler Breite und großer Schrift umbrechen (Reflow), Zähler und Pfeil nicht */
.filter-gruppe {
    max-width: 100%;
}

.filter-gruppe > summary > * {
    flex: none;
}

.filter-gruppe > summary > span:first-child {
    flex: 0 1 auto;
    min-width: 0;
}

/* Schmal: Filter-Knöpfe füllen die Zeile (große Tippfläche, Wörter brechen nicht mitten um) */
@container seite (max-width: 37.49em) {
    .filterleiste .filter-gruppe {
        flex: 1 1 auto;
    }

    .filterleiste .filter-gruppe > summary {
        display: flex;
        flex-wrap: wrap;
        padding-block: 0.375rem;
    }

    .filter-gruppe > summary > span:first-child {
        flex: 1 1 auto;
    }

    .quelle-wahl {
        flex: 1 1 100%;
    }
}

.filter-gruppe > summary::-webkit-details-marker {
    display: none;
}

@media (hover: hover) {
    .filter-gruppe > summary:hover {
        border-color: var(--accent);
    }
}

.filter-gruppe[open] > summary {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent-ink);
}

.filter-gruppe[open] > summary .icon {
    transform: rotate(180deg);
}

.filter-zaehler {
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.4rem;
    border-radius: var(--r-chip);
    font-size: 0.8125rem;
    display: inline-grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--muted);
}

.filter-zaehler-aktiv {
    background: var(--accent);
    color: var(--on-accent);
}

.filter-panel {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 15;
    margin: 0.5rem 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.filter-panel-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem 0.5rem;
}

.filter-panel-titel {
    font-size: 1rem;
    font-weight: 700;
}

.filter-panel-info {
    font-size: 0.875rem;
    color: var(--muted);
    white-space: nowrap;
}

.filter-panel-suche {
    padding: 0 1rem 0.75rem;
}

.filter-panel-suche label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-feld);
    padding: 0 0.75rem;
    background: var(--surface);
    color: var(--muted);
}

.filter-panel-suche input[type="search"] {
    border: 0;
    min-height: 2.5rem;
    padding: 0;
    background: transparent;
}

/* Fokus wie bei allen Eingabefeldern: Hintergrund eingefärbt – hier am ganzen Feld samt Lupe */
.filter-panel-suche input[type="search"]:focus-visible {
    background: transparent;
}

/* Kein Fokusrahmen (Wunsch der Nutzerin 04.10.2026, Entscheidung 142): nur die Fläche wird eingefärbt */
.filter-panel-suche label:focus-within {
    background: var(--fokus-feld);
}

.filter-panel-suche input[type="search"]:focus-visible {
    border: 0;
    box-shadow: none;
}

.filter-optionen {
    max-height: 15rem;
    overflow: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0.25rem 0;
    margin: 0;
    list-style: none;
}

.filter-optionen label {
    min-height: 2.75rem;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9375rem;
}

.filter-optionen label:hover {
    background: var(--surface-2);
}

.filter-optionen input {
    margin: 0;
}

.option-text {
    flex: 1;
    min-width: 0;
}

.option-zahl {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: var(--r-chip);
    padding: 0.0625rem 0.5rem;
    font-variant-numeric: tabular-nums;
}

.filter-panel-fuss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
}

.filter-weitere {
    display: grid;
    gap: 0 1rem;
    padding: 1rem 1rem 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* „Alle Filter zurücksetzen“: wichtiger Knopf, deutlich sichtbar (Wunsch der Nutzerin, Entscheidung 149) */
.filter-zuruecksetzen {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 2px solid var(--danger);
    border-radius: 10px;
    background: var(--danger-tint);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--danger);
    text-decoration: none;
    max-width: 100%;
}

@media (hover: hover) {
    .filter-zuruecksetzen:hover {
        background: var(--danger);
        color: var(--surface);
    }
}

.filter-anwenden {
    align-self: flex-start;
}

.chips {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
}

.chips-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--muted);
    margin-right: 0.25rem;
}

.chip {
    font-size: 0.875rem;
    font-weight: 700;
    min-height: 2.75rem; /* 44 px Touch-Ziel */
    padding: 0.25rem 0.375rem 0.25rem 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--r-chip);
    border: 1px solid var(--accent);
    background: var(--accent-tint);
    color: var(--accent-ink);
    white-space: normal; /* lange Lehrberufe bei 320 px/A++ umbrechen statt seitlich scrollen */
    max-width: 100%;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.chip .icon {
    flex: none;
}

.chip:hover {
    text-decoration: underline;
}

.treffer {
    list-style: none;
    margin: 0;
    padding: 0;
}

.treffer > li {
    border-bottom: 1px solid var(--border);
}

.treffer-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    color: inherit;
    text-decoration: none;
}

/* Hover färbt die ganze Karte – auch den Bereich mit dem Inserat-Knopf unter dem Link */
@media (hover: hover) {
    .treffer > li:hover {
        background: var(--surface-2);
    }
}

.treffer-link:hover {
    color: inherit;
    text-decoration: none;
}

.treffer-link:hover .treffer-titel {
    text-decoration: underline;
}

.treffer-link[aria-current="true"] {
    background: var(--accent-tint);
}

.treffer-zeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.treffer-ort {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    flex-wrap: wrap;
}

.treffer-ort > .icon {
    color: var(--accent);
}

.treffer-ortname {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--accent-ink);
}

.treffer-bezirk,
.treffer-datum,
.treffer-betrieb {
    font-size: 0.875rem;
    color: var(--muted);
}

.treffer-datum {
    white-space: nowrap;
    font-family: var(--schrift-mono);
    font-size: 0.8125rem;
}

.treffer-rechts {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.375rem 0.5rem;
}

/* Herkunft einer Stelle: Text + Farbe (AMS blau, REWE orange, viennajobs violett, metajob grün, jobwein weinrot, Stadt Wien mint, Wiener Stadtwerke himbeer, wienerjobs oliv, NÖ LGA indigo) */
.etikett-ams { background: var(--blue-tint); color: var(--blue); }
.etikett-rewe { background: var(--orange-tint); color: var(--orange); }
.etikett-viennajobs { background: var(--violet-tint); color: var(--violet); }
.etikett-metajob { background: var(--success-tint); color: var(--success); }
.etikett-jobwein { background: var(--surface-2); color: var(--q-jobwein); }
.etikett-stadtwien { background: var(--q-stadtwien-tint); color: var(--q-stadtwien); }
.etikett-stadtwerke { background: var(--q-stadtwerke-tint); color: var(--q-stadtwerke); }
.etikett-wienerjobs { background: var(--q-wienerjobs-tint); color: var(--q-wienerjobs); }
.etikett-noelga { background: var(--q-noelga-tint); color: var(--q-noelga); }
.etikett-lehrlingsportal { background: var(--q-lehrlingsportal-tint); color: var(--q-lehrlingsportal); }
.etikett-team { background: var(--accent-tint); color: var(--accent-ink); }
/* BAS-Lehrbetriebe (Entscheidung 182): dunkles Etikett, hebt sich von allen Börsen ab */
.etikett-bas { background: var(--text); color: var(--surface); }
/* Art der Lehre §8b1/§8b2: Rahmen statt Fläche, damit es sich von den Quellen-Etiketten abhebt */
.etikett-lehrart { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent-ink); }

/* Umschalter „Quelle: Alle | AMS | REWE | viennajobs | metajob“ über der Trefferliste */
.quelle-wahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.625rem;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
}

/* Die drei Quellen-Knöpfe stehen nebeneinander (kein Grid mit auto-fit: im schrumpfenden Flex-Element
   ergäbe das nur eine Spalte). Schmal teilen sie sich die Zeile, bei großer Schrift brechen sie um. */
.quelle-wahl .segmente {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
}

.quelle-wahl .segmente li {
    display: flex;
    flex: 1 1 auto;
}

.quelle-wahl .segmente a {
    flex: 1 1 auto;
    white-space: nowrap;
}

.quelle-wahl-titel {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
}

.quelle-wahl .segmente {
    list-style: none;
    margin: 0;
}

.segment-zahl {
    font-family: var(--schrift-mono);
    font-weight: 400;
}

.segmente a:hover {
    background: var(--surface);
    color: var(--text);
}

.segmente a[aria-current="true"]:hover {
    background: var(--accent);
    color: var(--on-accent);
}

.treffer-titel {
    font-size: 1rem;
    font-weight: 700;
}

.liste-fuss {
    padding: 1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.leer-zustand {
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    align-items: flex-start;
}

.leer-zustand h2 {
    margin: 0;
    font-size: 1.0625rem;
}

.leer-zustand p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.stellen-detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-karte);
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* „Alle Details zur Stelle“ (Wunsch der Nutzerin): der wichtigste Knopf im Detail – direkt unter Titel und Ort,
   groß, Metallblau mit weißer Schrift (4,6:1), Dokument-Symbol und Pfeil; nicht über die ganze Breite */
.knopf-details {
    align-self: flex-start;
    min-height: 3.5rem;
    padding: 0 1.5rem 0 1.25rem;
    gap: 0.625rem;
    font-size: 1.125rem;
    border-radius: var(--r-kachel);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.2);
}

/* „Inserat öffnen“: Link zur Quelle des Jobs – überall deutlich, Ziel darunter. Genau wie die Quellen-Etiketten:
   heller Farbgrund, Schrift in der Farbe der Börse (AMS blau, REWE orange, viennajobs violett, metajob grün,
   jobwein weinrot; direkter Link petrol, andere schiefergrau), dazu ein Rahmen in der Farbe. Kontrast in allen
   Schemata ≥ 5,0:1; beim Darüberfahren gefüllt (Text --q-text ≥ 5,9:1). */
.knopf-inserat {
    --q: var(--q-andere);
    --q-hell: var(--surface-2);
    background: var(--q-hell);
    border: 1.5px solid var(--q);
    color: var(--q);
    min-height: 3.5rem;
    padding: 0.375rem 1.25rem 0.375rem 1rem;
    gap: 0.625rem;
    border-radius: var(--r-kachel);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.2);
    text-align: left;
}

@media (hover: hover) {
    .knopf-inserat:hover,
    :root[data-theme="dunkel"] .knopf-inserat:hover {
        background: var(--q);
        border-color: var(--q);
        color: var(--q-text);
    }
}

.knopf-inserat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 1.0625rem;
}

.knopf-inserat-ams { --q: var(--blue); --q-hell: var(--blue-tint); }
.knopf-inserat-rewe { --q: var(--orange); --q-hell: var(--orange-tint); }
.knopf-inserat-viennajobs { --q: var(--violet); --q-hell: var(--violet-tint); }
.knopf-inserat-metajob { --q: var(--success); --q-hell: var(--success-tint); }
.knopf-inserat-jobwein { --q: var(--q-jobwein); }
.knopf-inserat-stadtwien { --q: var(--q-stadtwien); --q-hell: var(--q-stadtwien-tint); }
.knopf-inserat-stadtwerke { --q: var(--q-stadtwerke); --q-hell: var(--q-stadtwerke-tint); }
.knopf-inserat-wienerjobs { --q: var(--q-wienerjobs); --q-hell: var(--q-wienerjobs-tint); }
.knopf-inserat-noelga { --q: var(--q-noelga); --q-hell: var(--q-noelga-tint); }
.knopf-inserat-lehrlingsportal { --q: var(--q-lehrlingsportal); --q-hell: var(--q-lehrlingsportal-tint); }
.knopf-inserat-anbieter { --q: var(--q-anbieter); }

.knopf-inserat-quelle {
    font-size: 0.8125rem;
    font-weight: 400;
}

.knopf-inserat-klein {
    min-height: 2.75rem;
    padding: 0.25rem 0.875rem 0.25rem 0.75rem;
    box-shadow: none;
    border-radius: var(--r-feld);
}

.knopf-inserat-klein .knopf-inserat-text {
    font-size: 0.9375rem;
}

.detail-kopf-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Ausgewählte Stelle: ganze Karte in Auswahlfarbe – ohne Streifen und ohne Rahmen (Wünsche der Nutzerin) */
.treffer-mit-inserat.ist-ausgewaehlt,
.treffer > li.ist-ausgewaehlt:hover {
    background: var(--accent-tint);
}

/* Trefferliste: Knopf unter der Karte, außerhalb des Karten-Links */
.treffer-mit-inserat > .knopf-inserat {
    margin: 0 1rem 0.875rem;
    align-self: flex-start;
}

.treffer-mit-inserat {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Ganze Karte wählt die Stelle aus – auch die Fläche neben „Inserat öffnen“ (Wunsch der Nutzerin): der Link
   spannt eine unsichtbare Fläche über die Karte, der Knopf liegt darüber und bleibt eigenständig klickbar */
.treffer-mit-inserat > .treffer-link {
    position: static;
}

.treffer-mit-inserat > .treffer-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.treffer-mit-inserat > .knopf-inserat {
    position: relative;
    z-index: 1;
}

.chronik-inhalt > .knopf-inserat {
    margin-top: 0.5rem;
}

.detail-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.knopf-details .icon:last-child {
    transition: transform 0.15s ease;
}

.knopf-details:hover .icon:last-child {
    transform: translateX(3px);
}

.detail-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.detail-kopf-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 16rem;
}

.detail-dach {
    font-size: 0.9375rem;
    color: var(--muted);
    margin: 0;
}

.detail-titel {
    margin: 0;
    font-size: 1.625rem;
    line-height: 1.25;
}

.ortsfeld {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: var(--accent-tint);
    border-radius: var(--r-kachel);
    padding: 0.5rem 0.875rem;
    margin: 0;
    max-width: 100%;
    min-width: 0;
}

.ortsfeld > .icon {
    color: var(--accent);
}

.ortsfeld-ort {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-ink);
    min-width: 0;
    overflow-wrap: anywhere; /* lange Ortsnamen bei 320 px und A++ */
}

.ortsfeld-bezirk {
    font-size: 0.9375rem;
    color: var(--text-2);
}

.fakten {
    margin: 0;
    display: grid;
    /* min(): bei sehr schmaler Spalte und großer Schrift nicht breiter als die Spalte */
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: 0.75rem;
}

.fakten > div {
    background: var(--surface-2);
    border-radius: var(--r-kachel);
    padding: 0.75rem 0.875rem;
    min-width: 0;
}

.fakten dt {
    font-size: 0.8125rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.stammdaten dt .icon {
    vertical-align: -3px;
    margin-right: 0.375rem;
    color: var(--accent-ink);
}

.fakten dt .icon {
    flex: none;
    color: var(--accent-ink);
}

.fakten dd {
    margin: 0;
    font-weight: 700;
}

.fakten dd + dd {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-2);
}

.hinweis-orange {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    border: 1px solid var(--orange);
    background: var(--orange-tint);
    border-radius: var(--r-kachel);
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    margin: 0;
}

.hinweis-orange > .icon {
    color: var(--orange);
    margin-top: 0.1rem;
}

.hinweis-orange span {
    display: block;
    color: var(--text-2);
}

.abschnitt-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.abschnitt-kopf h2,
.abschnitt-kopf h3 {
    margin: 0;
    font-size: 1.25rem;
}

/* Chronik als Zeitleiste */
.chronik {
    list-style: none;
    padding: 0;
    margin: 0;
}

.chronik > li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.875rem;
}

.chronik-punkt {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chronik-punkt::before {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--surface);
    margin-top: 0.3rem;
    border: 3px solid var(--muted);
}

.chronik-punkt::after {
    content: "";
    width: 2px;
    flex: 1;
    background: var(--border);
}

.chronik-punkt-blau::before { border-color: var(--blue); }
.chronik-punkt-violett::before { border-color: var(--violet); }
.chronik-punkt-tuerkis::before { border-color: var(--accent); }
.chronik-punkt-gruen::before { border-color: var(--success); }
.chronik-punkt-rot::before { border-color: var(--danger); }

.chronik-inhalt {
    padding-bottom: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    min-width: 0;
}

.chronik-meta {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--muted);
    margin: 0;
}

.chronik-kopf {
    font-weight: 700;
    margin: 0;
}

/* Ort der Stelle in den Einträgen eines Kunden */
.chronik-ort {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.125rem 0 0;
    font-size: 0.9375rem;
    color: var(--text-2);
}

.chronik-ort .icon {
    flex: none;
    color: var(--muted);
}

.chronik-text {
    font-size: 0.9375rem;
    color: var(--text-2);
    margin: 0;
    white-space: pre-line;
}

.chronik .aktionen {
    margin-top: 0.375rem;
}

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

/* Stammdaten einer Stelle/Person */
.stammdaten {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem 1rem;
    margin: 0;
}

.stammdaten dt {
    font-size: 0.875rem;
    color: var(--muted);
}

.stammdaten dd {
    margin: 0 0 0.5rem;
}

@container inhalt (min-width: 36rem) {
    .stammdaten {
        grid-template-columns: 11rem minmax(0, 1fr);
    }

    .stammdaten dd {
        margin: 0;
    }
}

details.klapp {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 1.25rem;
}

details.klapp summary {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

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

/* Klappbereiche sehen sonst wie Überschriften aus: rechts „anzeigen“ / „ausblenden“ mit Pfeil (Wunsch der Nutzerin) */
details.klapp summary::after {
    content: "anzeigen";
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 1.75rem 0 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-chip);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--surface) no-repeat right 0.5rem center / 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23435a69%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E");
}

details.klapp[open] > summary::after {
    content: "ausblenden";
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23435a69%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 15l6-6 6 6%27/%3E%3C/svg%3E");
}

@media (hover: hover) {
    details.klapp summary:hover::after {
        border-color: var(--accent);
        background-color: var(--accent-tint);
    }
}

/* Dunkel: Pfeil hell */
:root[data-theme="dunkel"] details.klapp summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23a9c0ce%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E"); }
:root[data-theme="dunkel"] details.klapp[open] > summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23a9c0ce%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 15l6-6 6 6%27/%3E%3C/svg%3E"); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) details.klapp summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23a9c0ce%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E"); }
    :root:not([data-theme]) details.klapp[open] > summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23a9c0ce%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 15l6-6 6 6%27/%3E%3C/svg%3E"); }
}

details.klapp[open] {
    padding-bottom: 1rem;
}

.einfach-liste {
    padding-left: 1.25rem;
    margin: 0;
}

.einfach-liste li {
    margin-bottom: 0.5rem;
}

.geloeschte-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.geloeschte-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.geloeschte-liste li > div {
    flex: 1 1 20em;
    min-width: 0;
}

.geloeschte-liste p {
    margin: 0 0 0.25rem;
}

.diff-alt {
    text-decoration: line-through;
    color: var(--muted);
}

.diff-neu {
    font-weight: 700;
}

/* ---------- Import ---------- */

.import-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Stand je Quelle: Ergebnis des letzten Laufs (Farbe nur zusätzlich zu Symbol und Text) */
.lauf {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.lauf .icon {
    flex: none;
    margin-top: 0.2em;
}

.lauf-zeit {
    white-space: nowrap;
}

.lauf-ok .icon {
    color: var(--success);
}

.lauf-gebremst .icon {
    color: var(--orange);
}

.lauf-fehler .icon,
.lauf-fehler b {
    color: var(--danger);
}

.lauf-gebremst b {
    color: var(--orange);
}

/* Admin-Hinweis zur Aktualisierung (07.10.2026, ersetzt den dunkelroten Block): Karte wie die übrigen, Warnsignal über
   roten Rahmen, rote Symbol-Kachel und Status-Etiketten – keine Streifen am Rand (Entscheidung 133) */
.ue-import-hinweis {
    display: grid;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    border: 2px solid var(--danger);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.ue-import-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.ue-import-symbol {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    background: var(--danger);
    color: var(--surface);
}

.ue-import-titel {
    flex: 1 1 12rem;
    min-width: 0;
}

.ue-import-titel h2 {
    margin: 0;
    font-size: 1.0625rem;
    hyphens: manual;
}

.ue-import-titel p {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: var(--muted);
}

.ue-import-knopf {
    flex: none;
}

.ue-import-liste {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ue-import-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    background: var(--surface-2);
}

.ue-import-quelle {
    font-weight: 700;
}

.ue-import-status {
    padding: 0.0625rem 0.5rem;
    border-radius: var(--r-chip);
    font-size: 0.8125rem;
    font-weight: 700;
}

.ue-import-status-fehler {
    background: var(--danger-tint);
    color: var(--danger);
}

.ue-import-status-gebremst {
    background: var(--orange-tint);
    color: var(--orange);
}

.ue-import-zeit {
    font-size: 0.875rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.ue-import-text {
    flex: 1 1 100%;
    font-size: 0.9375rem;
    color: var(--text-2);
}

@media (forced-colors: active) {
    .ue-import-hinweis,
    .ue-import-status {
        border: 2px solid CanvasText;
    }
}

.ue-ams-statistik {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--muted);
    max-width: 60ch;
}

.ue-ams-statistik b {
    color: var(--text);
}

.ue-stand {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.import-rewe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
}

.import-einzeln {
    display: contents;
}

.fortschritt {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fortschritt-zeile {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.9375rem;
    margin: 0;
}

.fortschritt-balken {
    height: 0.625rem;
    border-radius: 5px;
    background: var(--track);
    overflow: hidden;
}

.fortschritt-balken svg {
    display: block;
    width: 100%;
    height: 100%;
}

.fortschritt-wert {
    fill: var(--chart-accent);
}

.schritte {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    counter-reset: schritt;
}

.schritte > li {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.875rem;
    align-items: start;
    counter-increment: schritt;
}

.schritte > li::before {
    content: counter(schritt);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-ink);
    display: grid;
    place-items: center;
    font-weight: 700;
}

.schritt-inhalt {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-top: 0.25rem;
    min-width: 0;
}

.schritt-inhalt > span,
.schritt-inhalt > p {
    color: var(--text-2);
    font-size: 0.9375rem;
    margin: 0;
}

.bookmarklet {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 2px dashed var(--accent);
    border-radius: var(--r-feld);
    font-weight: 700;
    background: var(--accent-tint);
    color: var(--accent-ink);
    text-decoration: none;
    cursor: grab;
    align-self: flex-start;
}

textarea.code {
    min-height: 8rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ---------- Verwaltung ---------- */

.kachel-link {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-karte);
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    text-decoration: none;
    color: var(--text);
}

@media (hover: hover) {
    .kachel-link:hover {
        border-color: var(--accent);
        box-shadow: 0 0 0 1px var(--accent);
        text-decoration: none;
        color: var(--text);
    }
}

.kachel-buchstabe {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-kachel);
    background: var(--accent-tint);
    color: var(--accent-ink);
    display: grid;
    place-items: center;
    flex: none;
    font-weight: 700;
}

.kachel-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.kachel-titel {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--accent-ink);
}

.kachel-link:hover .kachel-titel {
    text-decoration: underline;
}

.kachel-beschreibung {
    font-size: 0.9375rem;
    color: var(--muted);
}

/* ---------- Anmeldung ---------- */

.login {
    /* volle Breite: die farbige Fläche reicht bis zum linken Rand, auch auf sehr breiten Bildschirmen */
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--bg);
}

.login-aside {
    display: none;
    background: var(--accent);
    color: var(--on-accent);
    padding: 3rem;
    flex-direction: column;
    /* Wunsch der Nutzerin: nur das Logo, mitten auf der Fläche */
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.login-aside a {
    color: var(--on-accent);
}

.login-marke {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.login-main {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem;
    min-width: 0;
}

.login-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.login-kopf .umschalter {
    margin-left: auto;
}

.login-mitte {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.login-formular {
    width: 100%;
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.login-formular h1 {
    margin: 0;
}

.login-formular .feld {
    margin: 0;
}

.login-formular input[type="email"],
.login-formular input[type="password"],
.login-formular input[type="text"] {
    height: 3rem;
    border-radius: var(--r-kachel);
}

.passwort-feld {
    position: relative;
    display: flex;
}

.passwort-feld input {
    flex: 1;
    min-width: 0;
}

.passwort-feld.mit-knopf input {
    padding-right: 7rem;
}

.passwort-anzeigen {
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    min-height: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--r-feld);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.875rem;
}

.passwort-anzeigen:hover {
    background: var(--border);
    color: var(--text);
}

.login-absenden {
    min-height: 3rem;
    border-radius: var(--r-kachel);
    font-size: 1.0625rem;
    width: 100%;
}

@container seite (min-width: 56.25em) {
    .login {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .login-aside {
        display: flex;
    }

    .login-main {
        padding: 2rem 3rem;
    }

    .login-kopf .marke {
        display: none;
    }
}

/* ---------- Druck, Bewegung ---------- */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    .filter-gruppe > summary .icon {
        transition: transform 0.15s;
    }
}

@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;
    }
}

@media print {
    .kopf,
    .fuss,
    .filterform,
    .knopf,
    .hauptnavigation,
    form {
        display: none !important;
    }

    .split .stellen-detail {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .nur-breit {
        display: block !important;
    }

    .nur-schmal {
        display: none !important;
    }
}

/* ---------- Unterseiten: Formulare und Tabellen direkt im Inhalt als Karte ---------- */

.inhalt > form.formular,
.inhalt > div.formular,
.inhalt > .tabelle-scroll,
.inhalt > .nur-breit {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-karte);
    box-shadow: var(--shadow);
}

.inhalt > form.formular,
.inhalt > div.formular {
    padding: 1.375rem 1.5rem;
}

.inhalt > .tabelle-scroll caption:not(.visually-hidden),
.inhalt > .nur-breit caption:not(.visually-hidden) {
    padding: 1rem 1.25rem 0.5rem;
}

.inhalt > p.trefferinfo,
.trefferinfo {
    color: var(--muted);
    margin: 0;
}

.suchleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: flex-end;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-karte);
    padding: 1rem 1.25rem;
}

.suchleiste .feld {
    flex: 1 1 18rem;
    margin: 0;
}

.suchleiste .feld-checkbox {
    flex: 0 1 auto;
    align-items: center;
    min-height: 2.75rem;
}

/* Einheitliche Abstände in Flächen und Klappbereichen */
.flaeche,
details.klapp[open] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.flaeche > *,
details.klapp > * {
    margin-top: 0;
    margin-bottom: 0;
}

.flaeche > h2:first-child,
.formular-flaeche > h2 {
    margin-bottom: 0;
}

.flaeche > .flaeche-kopf {
    margin-bottom: 0;
}

.flaeche > form > :last-child,
details.klapp .schritt-inhalt > :last-child {
    margin-bottom: 0;
}

.schritt-inhalt .feld {
    margin: 0.5rem 0 0;
}

.schritt-inhalt > p {
    margin: 0.25rem 0 0;
}

/* ---------- Reflow (1.4.10): bei 320 px und A++ nichts abschneiden ---------- */

.knopf,
button,
.hauptnavigation a,
.konto-link,
.chip,
.rang-name,
.treffer-link,
.kpi,
.bezirk-karte {
    position: relative; /* versteckte Zusatztexte bleiben im Knopf, statt die Seite zu verbreitern */
}

.knopf,
button,
.status,
.typ,
.etikett,
.markierung,
.bookmarklet {
    white-space: normal;
    max-width: 100%;
}

.segmente button,
.knopf-anlegen,
.filter-zaehler,
.treffer-datum {
    white-space: nowrap;
}

.karte dl,
.dl-raster {
    grid-template-columns: auto minmax(0, 1fr);
}

.karte dd,
.dl-raster dd,
.stammdaten dd,
.fakten dd {
    overflow-wrap: anywhere;
}

/* Lange deutsche Wörter bei großer Schrift trennen statt überlaufen lassen */
h1,
h2,
h3,
summary,
.kachel-titel,
.treffer-titel,
.detail-titel {
    hyphens: auto;
    overflow-wrap: anywhere;
}

.knopf,
button,
.bookmarklet {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Übersicht: Meine Wiedervorlagen */
.wv-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wv-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border);
}

.wv-liste li:first-child {
    border-top: 0;
    padding-top: 0;
}

.wv-text {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 0.9375rem;
}

.wv-liste form {
    margin: 0;
}

.etikett-orange {
    background: var(--orange-tint);
    color: var(--orange);
}

.etikett-akzent {
    background: var(--accent-tint);
    color: var(--accent-ink);
}

/* ---------- Übersicht (Design V2) ---------- */

.etikett-rot {
    background: var(--danger-tint);
    color: var(--danger);
}

.etikett-grau {
    background: var(--surface-2);
    color: var(--text-2);
}

.icon-kachel-gruen { background: var(--success-tint); color: var(--success); }

.quellenkasten {
    flex-wrap: wrap; /* schmal/A++: Link unter den Text statt Buchstabenspalte */
    align-items: center;
    padding: 1rem 1.25rem;
}

.quellenkasten-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.quellenkasten .quellenkasten-stand {
    font-size: 0.875rem;
    color: var(--text-2);
}

.kpi {
    gap: 0.5rem;
    padding: 1.25rem;
}

.kpi-kopf {
    color: var(--text);
}

.kpi-zahl {
    margin-top: 0.25rem;
}

.kpi-notiz {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--text-2);
}

.wiedervorlagen .flaeche-kopf,
.rangliste h2 {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.wv-text a {
    font-weight: 700;
}

.wv-text .gedaempft {
    color: var(--text-2);
}

.rang-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rangliste .rang-liste li {
    display: grid;
    grid-template-columns: minmax(7rem, 12rem) minmax(3rem, 1fr) 2.5rem;
    gap: 1rem;
    align-items: center;
    min-height: 2.75rem;
    border-top: 0;
}

.rang-liste .rang-name {
    color: var(--accent-ink);
    text-decoration: underline;
    font-weight: 700;
}

.rang-wert {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.raster-bezirke {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 1rem;
}

.bezirk-karte {
    gap: 0.5rem;
}

.bezirk-karte-kopf > .icon {
    color: var(--text-2);
}

.bezirk-karte-zahl {
    margin-top: 0.25rem;
}

.bezirk-karte-notiz {
    font-size: 0.875rem;
    color: var(--text-2);
}

/* Handy: nur die erste Kopfzeile klebt, die Suche scrollt mit – spart Platz, besonders bei A+/A++ */
@container seite (max-width: 37.49em) {
    .kopf {
        top: calc(-1 * var(--kopf-versatz, 3.25rem));
    }
}

/* Handy: Menü „Darstellung“ über die ganze Kopfbreite – rechts verankert ragte es bei 320–390 px links aus dem Bild */
@container seite (max-width: 37.49em) {
    .darstellung-menue {
        position: static;
    }

    .darstellung-panel {
        left: max(1rem, env(safe-area-inset-left));
        right: max(1rem, env(safe-area-inset-right));
        width: auto;
        max-width: none;
    }
}

/* Schmaler Inhalt (Handy, A++): Gemeindename in eigener Zeile, Balken und Zahl darunter – sonst Name 3 px breit oder Überbreite */
@container inhalt (max-width: 30em) {
    .rangliste .rang-liste li {
        grid-template-columns: minmax(0, 1fr) 2.5rem;
        row-gap: 0.25rem;
    }

    .rangliste .rang-liste li .rang-name {
        grid-column: 1 / -1;
    }

    .quellenkasten-link {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .quellenkasten > .icon-kachel {
        display: none; /* dekorativ – der Platz gehört dem Text */
    }
}

/* Kund*innen: eigene Kund*innen im Fokus – zart metallblau hinterlegt, kräftiger Rahmen rundum (keine Streifen links) */
/* Hervorhebung nur über die Fläche – dunkler Rahmen auf Wunsch der Nutzerin entfernt (07.10.2026) */
.flaeche-fokus {
    background: var(--accent-tint);
    border-color: var(--accent-tint);
}

.flaeche-fokus > h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-ink);
}

.flaeche-fokus .tabelle-scroll,
.flaeche-fokus .karte {
    background: var(--surface);
}

/* „Alle Kund*innen“: zurückhaltender Klappbereich mit Liste */
details.klapp-liste summary {
    font-size: 1.0625rem;
}

/* „Eintrag hinzufügen“ und „+ Neue Lehrstelle“: Pastellgrün #93B089 mit weißer Schrift – ausdrücklicher Wunsch der
   Nutzerin (Entscheidung 138), bewusst unter WCAG AA (2,4:1 statt 4,5:1). Hover etwas dunkler. */
.knopf.knopf-eintrag,
.knopf.knopf-anlegen,
.knopf.knopf-anlegen-seite,
:root[data-theme="dunkel"] .knopf.knopf-eintrag,
:root[data-theme="dunkel"] .knopf.knopf-anlegen,
:root[data-theme="dunkel"] .knopf.knopf-anlegen-seite {
    background: #93b089;
    border-color: #93b089;
    color: #ffffff;
}

@media (hover: hover) {
    .knopf.knopf-eintrag:hover,
    .knopf.knopf-anlegen:hover,
    .knopf.knopf-anlegen-seite:hover,
    :root[data-theme="dunkel"] .knopf.knopf-eintrag:hover,
    :root[data-theme="dunkel"] .knopf.knopf-anlegen:hover,
    :root[data-theme="dunkel"] .knopf.knopf-anlegen-seite:hover {
        background: #7f9e74;
        border-color: #7f9e74;
        color: #ffffff;
    }
}

/* „Inserat öffnen“ in der Trefferliste: ohne Hintergrund und Schatten, Rahmen und Schrift in der Farbe der Börse */
.treffer-mit-inserat > .knopf-inserat {
    background: transparent;
    box-shadow: none;
}

/* Verwaltung → Bezirke: Karten als Raster statt langer Liste */
.karten.bezirke-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0.75rem;
}

.bezirke-liste .karte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.bezirke-liste .karte > * {
    margin: 0;
}

.bezirke-liste .karte > form,
.bezirke-liste .karte > .knopf {
    margin-top: auto;
}

/* ---------- Formular „Neue Lehrstelle“ / „Stelle bearbeiten“ (Design-Übergabe 04.10.2026, Entscheidung 139) ----------
   Eine Karte mit drei farbigen Sektionen (links Symbol + Titel, rechts die Felder im flex-wrap-Raster), Symbole in
   den Feldern, „Ort nicht in der Liste?“ aufklappbar, Schnellauswahl der Projekte. Farben aus den Tokens (hell/dunkel/
   Kontrast); der Fokus in Feldern bleibt der geprüfte App-Fokus (Hintergrund + Rahmen). */
.formular-titelzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
}

.formular-titelzeile h1 {
    margin: 0 0 0.375rem;
}

.formular-intro {
    max-width: 47.5rem;
    margin: 0;
}

.pflicht-legende {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted);
}

.pflicht-stern {
    color: var(--danger);
    font-weight: 700;
}

.formular-sektionen {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-karte);
    overflow: hidden;
}

.sektion {
    --sektion-farbe: var(--accent-ink);
    --sektion-tint: var(--accent-tint);
    display: grid;
    grid-template-columns: 13.75rem minmax(0, 1fr);
    gap: 1rem 1.5rem;
    padding: 1.5rem;
}

.sektion + .sektion {
    border-top: 1px solid var(--border);
}

.sektion-blau {
    --sektion-farbe: var(--blue);
    --sektion-tint: var(--blue-tint);
}

.sektion-gruen {
    --sektion-farbe: var(--success);
    --sektion-tint: var(--success-tint);
}

.sektion-ocker {
    --sektion-farbe: var(--orange);
    --sektion-tint: var(--orange-tint);
}

.sektion-kopf {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.sektion-badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 9px;
    background: var(--sektion-tint);
    color: var(--sektion-farbe);
}

.sektion-kopf h2 {
    margin: 0.125rem 0 0.125rem;
    font-size: 1rem;
}

.sektion-kopf p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted);
}

.sektion-felder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.sektion-felder > .feld,
.sektion-felder > .feld-gruppe-quelle,
.sektion-felder > fieldset,
.sektion-felder > button {
    margin: 0;
    min-width: 0;
}

.feld-schmal { flex: 1 1 13.75rem; }
.feld-breit { flex: 2 1 18.75rem; }
.feld-mittel { flex: 1 1 16.25rem; }
.feld-halb { flex: 1 1 18.75rem; }
.feld-voll { flex: 1 1 100%; }
.feld-ortsname { flex: 3 1 12rem; }
.feld-plz { flex: 1 1 6.5rem; }

.feld-gruppe-quelle > .feld {
    margin: 0;
}

/* Symbol links im Feld */
.feld-mit-icon {
    position: relative;
}

.feld-mit-icon > .icon {
    position: absolute;
    left: 0.75rem;
    top: calc(1.375rem - 8px);
    color: var(--sektion-farbe, var(--muted));
    pointer-events: none;
}

.feld-mit-icon > input,
.feld-mit-icon > select,
.feld-mit-icon > textarea {
    padding-left: 2.375rem;
}

.feld-mit-icon > textarea {
    min-height: 5.5rem;
}

.sektion .feld .hinweis {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
}

/* „Ort nicht in der Liste?“ – gestrichelter Knopf, darunter aufklappbar die Felder */
.ort-neu-knopf,
:root[data-theme="dunkel"] .ort-neu-knopf {
    justify-content: flex-start;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    background: var(--success-tint);
    border: 1.5px dashed var(--success);
    border-radius: var(--r-feld);
    color: var(--success);
    font-weight: 700;
    box-shadow: none;
}

.ort-neu-knopf > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

@media (hover: hover) {
    .ort-neu-knopf:hover,
    :root[data-theme="dunkel"] .ort-neu-knopf:hover {
        background: var(--surface-2);
        border-color: var(--success);
        color: var(--success);
    }
}

.ort-neu {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}

.ort-neu legend {
    padding: 0 0.25rem;
}

.ort-neu > .hinweis {
    margin: 0 0 0.75rem;
}

/* Schnellauswahl „Woher kommt die Stelle?“ */
.quelle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.quelle-chip,
:root[data-theme="dunkel"] .quelle-chip {
    min-height: 2.75rem;
    padding: 0.25rem 0.875rem;
    border: 1px solid var(--violet);
    border-radius: 999px;
    background: var(--violet-tint);
    color: var(--violet);
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: none;
}

@media (hover: hover) {
    .quelle-chip:hover,
    :root[data-theme="dunkel"] .quelle-chip:hover {
        background: var(--surface-2);
        border-color: var(--violet);
        color: var(--violet);
    }
}

.sektion-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}

/* Schmal (Handy, Tablet hoch, A++): Sektionskopf über den Feldern */
@container inhalt (max-width: 44rem) {
    .sektion {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.25rem 1rem;
    }

    .sektion-aktionen {
        padding: 1rem;
    }
}

/* ---------- Übersicht (Design V3, 04.10.2026, Entscheidung 141) ----------
   Karten --surface/--border/12px; Grafiken als SVG mit Klassen (keine Inline-Styles, CSP). Breakpoints als Container
   Queries in em am Inhalt, damit A+/A++ sie verschiebt. Keine Streifen links – aktiv nur über die Hintergrundfarbe. */
.ue-karte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    min-width: 0;
}

.ue-karte h2 {
    margin: 0 0 0.75rem;
    font-size: 1.0625rem;
}

.ue-kopf {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ue-kopf h1 {
    margin: 0;
    font-size: 1.875rem;
}

.ue-kopf .dachzeile {
    margin: 0 0 0.25rem;
}

/* Standort-Leiste: Knöpfe mit Zahl, aktiv = gefüllt */
.standort-leiste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.standort-leiste button,
:root[data-theme="dunkel"] .standort-leiste button {
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 700;
    box-shadow: none;
}

.standort-zahl {
    padding: 0.0625rem 0.375rem;
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--text-2);
    font-family: var(--schrift-mono);
    font-size: 0.75rem;
}

.standort-leiste button[aria-pressed="true"],
:root[data-theme="dunkel"] .standort-leiste button[aria-pressed="true"] {
    background: var(--accent);
    color: #ffffff;
}

.standort-leiste button[aria-pressed="true"] .standort-zahl {
    background: #ffffff;
    color: #3f5868;
}

@media (hover: hover) {
    .standort-leiste button:not([aria-pressed="true"]):hover {
        background: var(--surface-2);
        color: var(--text);
    }
}

/* Hinweis „Neu seit deinem letzten Besuch“ */
.ue-neu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1rem;
    background: var(--accent-tint);
    border-radius: 12px;
}

.ue-neu > p {
    flex: 1 1 18rem;
    margin: 0;
}

.ue-neu-symbol {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: var(--accent);
    color: #ffffff;
}

/* Brücke im kleinen Lesefenster (Entscheidung 165) */
.bruecke {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--bg);
    color: var(--text);
}

.bruecke-inhalt {
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    padding: 1rem;
    text-align: center;
}

.bruecke-titel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 700;
}

.bruecke-marke {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: var(--accent);
    color: var(--on-accent, #fff);
    font-size: 0.875rem;
}

#bruecke-text {
    margin: 0;
    color: var(--muted);
}

/* Kopfkarte */
.ue-kopfkarte {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.ue-kopfkarte h2 {
    color: var(--text-2);
    font-size: 1rem;
}

.ue-gross {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin: 0 0 1rem;
}

.ue-gross-zahl {
    font-family: var(--schrift-mono);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
}

.ue-diff {
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    background: var(--success-tint);
    color: var(--success);
    font-weight: 700;
    white-space: nowrap;
}

.ue-diff-minus {
    background: var(--surface-2);
    color: var(--text-2);
}

.quellen-balken {
    display: block;
    width: 100%;
    height: 1rem;
}

.q-blau { fill: var(--blue); background: var(--blue); }
.q-orange { fill: var(--orange); background: var(--orange); }
.q-violett { fill: var(--violet); background: var(--violet); }
.q-akzent { fill: var(--accent); background: var(--accent); }
.q-grau { fill: var(--muted); background: var(--muted); }

.quellen-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

.quellen-legende li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.quellen-legende .quadrat {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
}

.ue-quellen {
    margin-top: 1rem;
    border-top: 1px solid var(--border);
}

.ue-quellen summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.ue-quellen summary::-webkit-details-marker {
    display: none;
}

.ue-quellen summary::before {
    content: "›";
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 0.15s;
}

.ue-quellen[open] summary::before {
    transform: rotate(90deg);
}

.ue-quellen p {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
}

/* Wochenverlauf */
.ue-wochen {
    margin: 0;
    min-width: 0;
}

.ue-wochen figcaption {
    margin-bottom: 0.75rem;
    color: var(--text-2);
    font-weight: 700;
}

.ue-wochen ol {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ue-wochen li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.ue-wochen svg {
    display: block;
    width: min(100%, 2.75rem);
    height: 8.5rem;
}

.woche-wert,
.woche-kw {
    font-size: 0.8125rem;
    font-family: var(--schrift-mono);
}

.ue-wochen .aktuell .woche-wert,
.ue-wochen .aktuell .woche-kw {
    font-weight: 700;
}

.saeule { fill: color-mix(in oklab, var(--accent) 35%, var(--surface)); }
.saeule-aktuell { fill: var(--accent); }

/* Kennzahlen */
.ue-kennzahlen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ue-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    color: var(--text);
    text-decoration: none;
}

@media (hover: hover) {
    .ue-kpi:hover {
        border-color: var(--accent);
        color: var(--text);
        text-decoration: none;
    }
}

.ue-kpi-kopf {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 700;
}

.ue-kpi-symbol {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
}

.kpi-blau { background: var(--blue-tint); color: var(--blue); --kpi-farbe: var(--blue); }
.kpi-gruen { background: var(--success-tint); color: var(--success); --kpi-farbe: var(--success); }
.kpi-akzent { background: var(--accent-tint); color: var(--accent-ink); --kpi-farbe: var(--accent-ink); }

.ue-kpi-mitte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ue-kpi-zahl {
    font-family: var(--schrift-mono);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}

.ue-kpi-text {
    color: var(--text-2);
    font-size: 0.875rem;
}

.ue-tage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    background: none;
}

.ue-tage .mini-saeulen {
    width: 4.5rem;
    height: 2rem;
}

.ue-tage .saeule,
.ue-tage .saeule-aktuell {
    fill: var(--blue);
}

.ue-tage-namen {
    display: flex;
    justify-content: space-around;
    color: var(--muted);
    font-size: 0.625rem;
    font-weight: 700;
}

.ring {
    flex: none;
    width: 3.75rem;
    height: 3.75rem;
}

.ring-spur {
    fill: none;
    stroke: var(--surface-2);
    stroke-width: 5;
}

.ring-wert {
    fill: none;
    stroke-width: 5;
}

.ring-gruen .ring-wert { stroke: var(--success); }
.ring-blau .ring-wert { stroke: var(--blue); }
.ring-akzent .ring-wert { stroke: var(--accent-ink); }

.ring-text {
    fill: var(--text);
    font-family: var(--schrift-mono);
    font-size: 9px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Karte */
.ue-kartenbereich {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.ue-karte-text p {
    margin: 0 0 0.75rem;
}

.ue-legende-titel {
    font-weight: 700;
    margin-bottom: 0.375rem !important;
}

.ue-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.ue-legende li,
.ue-legende-bahn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.legende-kreis {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    border: 1.5px solid #5e798a;
}

.legende-kreis.stufe-1 { background: #dbe4ea; }
.legende-kreis.stufe-2 { background: #5e798a; }
.legende-kreis.stufe-3 { background: #2c4250; border-color: #2c4250; }

.bahn-kaestchen {
    display: inline-grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface);
    color: var(--accent-ink);
}

.ue-punktkarte {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.punktkarte-rahmen-hoch {
    display: none;
}

/* Zoom (app.js): Knöpfe über der Karte; gezoomt verschiebt Ziehen die Karte statt die Seite zu scrollen */
.karte-zoom {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.karte-zoom button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.karte-zoom button[data-zoom="zurueck"] {
    font-size: 0.9375rem;
}

.ue-punktkarte.js-karte {
    overflow: hidden;
    touch-action: pan-y;
}

.ue-punktkarte.gezoomt {
    touch-action: none;
    cursor: grab;
}

.ue-punktkarte.js-karte {
    -webkit-user-select: none;
    user-select: none;
}

/* Während des Ziehens: Greifhand, kein Hover/Klickziel auf den Orten */
.ue-punktkarte.zieht {
    cursor: grabbing;
}

.ue-punktkarte.zieht .punkt {
    pointer-events: none;
}

.ue-punktkarte .punkt:focus:not(:focus-visible) {
    outline: none;
}

.punkt-schild rect {
    fill: var(--text);
}

.punkt-schild text {
    fill: var(--surface);
    font-size: 20px;
    font-weight: 700;
}

.ue-punktkarte-hoch .punkt-schild text { font-size: 24px; }

.punktkarte-flaeche {
    fill: var(--surface-2);
}

.punkt circle {
    stroke: #5e798a;
    stroke-width: 2;
}

.punkt.stufe-1 circle { fill: #dbe4ea; }
.punkt.stufe-2 circle { fill: #5e798a; }
.punkt.stufe-3 circle { fill: #2c4250; stroke: #2c4250; }

/* Dunkel: Kreise der Stufe „viele“ hoben sich kaum vom Grund ab (1,36:1) – helle Kontur (Audit 08.10.2026, WCAG 1.4.11) */
:root[data-theme="dunkel"] .punkt.stufe-3 circle { stroke: var(--accent-ink); }
:root[data-theme="dunkel"] .legende-kreis.stufe-3 { border-color: var(--accent-ink); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .punkt.stufe-3 circle { stroke: var(--accent-ink); }
    :root:not([data-theme]) .legende-kreis.stufe-3 { border-color: var(--accent-ink); }
}

.punkt-zahl {
    font-family: var(--schrift-mono);
    font-size: 20px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.punkt.stufe-1 .punkt-zahl { fill: #1f2937; }
.punkt.stufe-2 .punkt-zahl,
.punkt.stufe-3 .punkt-zahl { fill: #ffffff; }

.punkt-bahn rect {
    fill: var(--surface);
    stroke: var(--border-strong);
    stroke-width: 1;
}

.punkt-bahn svg {
    fill: none;
    stroke: var(--accent-ink);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.punkt-name {
    fill: var(--text);
    font-size: 19px;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--surface-2);
    stroke-width: 4px;
    stroke-linejoin: round;
}

/* ohne JS: kleine Orte ohne Namen (sonst Überlappungen); mit JS setzt app.js jeden Namen kollisionsfrei */
.punkt-name-klein { display: none; }
.js-karte .punkt-name-klein { display: inline; }
.punkt-name.verdeckt { visibility: hidden; }

.ue-punktkarte .punkt:focus-visible circle {
    stroke: var(--focus);
    stroke-width: 5;
}

.ue-punktkarte-hoch .punkt-zahl { font-size: 24px; }
.ue-punktkarte-hoch .punkt-name { font-size: 24px; }

/* Ranglisten */
.ue-zweispaltig {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.ue-rangliste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ue-rangliste li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1.4fr) minmax(3rem, 1fr) 2.75rem;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
}

.rang-platz {
    color: var(--muted);
    font-family: var(--schrift-mono);
    font-size: 0.8125rem;
}

.rang-ort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.ue-rangliste .rang-name {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.anbindung {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 700;
}

.anbindung-bahn {
    background: var(--accent-tint);
    color: var(--accent-ink);
}

.ue-rangliste .rang-wert {
    text-align: right;
    font-family: var(--schrift-mono);
    font-weight: 700;
}

.ue-mehr summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin-top: 0.5rem;
    cursor: pointer;
    color: var(--accent-ink);
    font-weight: 700;
    list-style: none;
}

.ue-mehr summary::-webkit-details-marker { display: none; }
.ue-mehr summary::before { content: "⌄"; }
.ue-mehr[open] summary::before { content: "⌃"; }
.ue-mehr .mehr-auf { display: none; }
.ue-mehr[open] .mehr-zu { display: none; }
.ue-mehr[open] .mehr-auf { display: inline; }
.ue-mehr[open] summary { order: 2; }
.ue-mehr[open] { display: flex; flex-direction: column; }

.ue-beruf-anteil {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin: 0 0 1rem;
}

.ue-beruf-anteil > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ue-beruf-prozent {
    color: var(--accent-ink);
    font-family: var(--schrift-mono);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.ue-berufe {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.beruf-balken {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0 1rem;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    overflow: hidden;
    text-decoration: none;
}

.beruf-balken svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.beruf-erster { fill: color-mix(in oklab, var(--accent) 42%, var(--surface-2)); }
.beruf-fuellung { fill: color-mix(in oklab, var(--accent) 24%, var(--surface-2)); }

.beruf-platz,
.beruf-name,
.beruf-zahl {
    position: relative;
}

.beruf-platz {
    color: var(--text-2);
    font-family: var(--schrift-mono);
    font-size: 0.875rem;
}

.beruf-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.beruf-zahl {
    font-family: var(--schrift-mono);
    font-size: 1.125rem;
    font-weight: 700;
}

@media (hover: hover) {
    .beruf-balken:hover {
        color: var(--text);
        text-decoration: underline;
    }
}

/* Am längsten im Portal */
.ue-abschnitt-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
}

.ue-abschnitt-kopf h2 {
    margin: 0;
}

.ue-abschnitt-kopf p {
    margin: 0;
    color: var(--text-2);
    font-size: 0.9375rem;
}

.ue-laengste {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ue-laengste-karte {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    height: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
}

@media (hover: hover) {
    .ue-laengste-karte:hover {
        border-color: var(--accent);
        color: var(--text);
        text-decoration: none;
    }
}

.laengste-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

/* Ortsname umbrechen statt abschneiden – am Touch-Gerät lässt sich ein „title“ nicht aufdecken (Audit 08.10.2026) */
.laengste-ort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--accent-ink);
    font-weight: 700;
}

.laengste-ort .icon { flex: none; }

.laengste-tage {
    flex: none;
    padding: 0.0625rem 0.5rem;
    border-radius: 6px;
    background: var(--violet-tint);
    color: var(--violet);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.laengste-titel {
    font-weight: 700;
}

.laengste-betrieb {
    color: var(--text-2);
    font-size: 0.875rem;
}

/* Alle Standorte */
.ue-standort-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ue-standort-karte,
:root[data-theme="dunkel"] .ue-standort-karte {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    padding: 1rem 1.125rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-weight: 400;
    text-align: left;
    box-shadow: none;
}

.ue-standort-karte.aktuell,
:root[data-theme="dunkel"] .ue-standort-karte.aktuell {
    background: var(--accent-tint);
    border: 2px solid var(--accent);
}

@media (hover: hover) {
    .ue-standort-karte:hover,
    :root[data-theme="dunkel"] .ue-standort-karte:hover {
        background: var(--surface-2);
        border-color: var(--accent);
        color: var(--text);
    }
}

.standort-name {
    font-weight: 700;
}

.standort-etikett {
    align-self: flex-start;
    padding: 0.0625rem 0.5rem;
    border-radius: 5px;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

.standort-werte {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.standort-frei {
    font-family: var(--schrift-mono);
    font-size: 1.625rem;
    font-weight: 700;
}

.standort-diff {
    color: var(--success);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

.standort-diff.minus {
    color: var(--text-2);
}

.standort-saeulen .mini-saeulen {
    display: block;
    width: 100%;
    height: 2.125rem;
}

.standort-neu {
    color: var(--text-2);
    font-size: 0.8125rem;
}

/* Breakpoints (em am Inhalt: A+/A++ springt früher um) */
@container inhalt (min-width: 36em) {
    .ue-laengste,
    .ue-kennzahlen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container inhalt (min-width: 64em) {
    .ue-kopfkarte {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.5rem;
    }

    .ue-kartenbereich {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: start;
    }

    /* Überschrift so hoch wie die Zoom-Leiste: der Text beginnt auf Höhe der Kartenfläche */
    .ue-kartenbereich:has(.karte-zoom:not([hidden])) .ue-karte-text h2 {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        margin-bottom: 0.5rem;
    }

    .ue-zweispaltig {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .ue-laengste,
    .ue-kennzahlen {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container inhalt (min-width: 72em) {
    .ue-kopf {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .standort-leiste {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Handy: Karte im Hochformat, Wochen nur mit Zahl, Rang-Zeilen enger */
@container inhalt (max-width: 30em) {
    .punktkarte-rahmen-breit { display: none; }
    .punktkarte-rahmen-hoch { display: block; }
    .woche-kw-lang { display: none; }
    .ue-gross-zahl { font-size: 3.5rem; }
    .ue-karte { padding: 1rem; }
}

@container inhalt (max-width: 36em) {
    .ue-rangliste li {
        grid-template-columns: 1.25rem minmax(0, 1fr) 2.75rem;
    }

    .ue-rangliste li .balken {
        grid-column: 2 / 3;
        grid-row: 2;
    }

    .ue-rangliste li .rang-wert {
        grid-row: 1;
        grid-column: 3;
    }
}

/* Handy: ohne Platz-Nummer (steht nur als Deko da), Name über volle Breite, Balken darunter */
@container inhalt (max-width: 30em) {
    .ue-rangliste .rang-platz { display: none; }

    .ue-rangliste li {
        grid-template-columns: minmax(0, 1fr) 2.75rem;
        gap: 0 0.5rem;
    }

    .ue-rangliste li .rang-ort { grid-column: 1; grid-row: 1; }
    .ue-rangliste li .rang-wert { grid-column: 2; grid-row: 1; }
    .ue-rangliste li .balken { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .ue-quellen summary::before { transition: none; }
}

@media (forced-colors: active) {
    .standort-leiste button[aria-pressed="true"],
    .ue-standort-karte.aktuell {
        outline: 2px solid CanvasText;
    }
}

/* Touch: kein Doppeltipp-Zoom auf Bedienelementen */
button,
.knopf,
summary,
label,
.chip,
.reiter a,
.segmente a,
.hauptnavigation a,
.treffer-link {
    touch-action: manipulation;
}

/* Fortschrittsfenster „AMS Daten Update“ unten rechts, auf jeder Seite (ams-lauf.js, Entscheidung 157) */
.ams-lauf {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    width: min(22rem, calc(100vw - 2rem));
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(31, 41, 55, 0.28);
    font-size: 0.9375rem;
}

.ams-lauf-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.ams-lauf-marke {
    display: inline-grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 7px;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 700;
}

.ams-lauf-titel {
    flex: 1;
    margin: 0;
    font-size: 1rem;
}

.ams-lauf-zu {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 1.375rem;
    line-height: 1;
}

.ams-lauf-schritte {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.ams-lauf-schritte li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
}

.ams-lauf-schritte .schritt-nr {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    font-size: 0.75rem;
    font-weight: 700;
}

.ams-lauf-schritte li.aktiv {
    color: var(--text);
    font-weight: 600;
}

.ams-lauf-schritte li.aktiv .schritt-nr {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.ams-lauf-schritte li.erledigt {
    color: var(--text);
}

.ams-lauf-schritte li.erledigt .schritt-nr {
    border-color: var(--success);
    color: var(--success);
    font-size: 0;
}

.ams-lauf-schritte li.erledigt .schritt-nr::before {
    content: "✓";
    font-size: 0.75rem;
}

.ams-lauf-text {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.ams-lauf-balken {
    margin-bottom: 0.5rem;
}

.ams-lauf-hinweis {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.ams-lauf-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ams-lauf-fertig {
    border-color: var(--success);
}

.ams-lauf-fertig .ams-lauf-text {
    color: var(--success);
}

.ams-lauf-fehler {
    border-color: var(--danger);
}

.ams-lauf-fehler .ams-lauf-text {
    color: var(--danger);
}

/* Handy: über der festen Navigationsleiste */
@container seite (max-width: 37.5em) {
    .ams-lauf {
        right: 0.5rem;
        left: 0.5rem;
        bottom: calc(4.25rem + env(safe-area-inset-bottom));
        width: auto;
    }
}

@media print {
    .ams-lauf {
        display: none;
    }
}

/* =====================================================================================================================
   Verwaltung im neuen Design (Design-Übergabe Verwaltung, Entscheidung 166). Umbrüche als Container-Abfragen in em am
   <body> (Container „seite“), damit A+/A++ sie verschiebt. Keine farbigen Streifen; aktiv nur über die Hintergrundfarbe.
   ===================================================================================================================== */

.vw {
    max-width: 90rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.vw > * {
    margin-block: 0;
}

.vw h1 {
    font-size: 1.875rem;
    margin: 0;
}

.vw .meldungen:empty {
    display: none;
}

/* ---------- Bereichs-Navigation ---------- */

.vw-nav {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
}

.vw-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

@container seite (min-width: 30em) {
    .vw-nav ul {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
    }
}

/* Ab 64em alle 11 Bereiche in einer Zeile (Wunsch der Nutzerin, 07.10.2026): kleinere Schrift, ohne Symbole;
   reicht der Platz bei großer Schrift (A++) trotzdem nicht, scrollt nur die Leiste, nie die Seite */
@container seite (min-width: 64em) {
    .vw-nav ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        overflow-x: auto;
    }

    .vw-nav li {
        flex: 0 1 auto;
    }

    /* Symbole weglassen – mit ihnen passen 11 Bereiche nicht in die Inhaltsbreite */
    .vw-nav a svg {
        display: none;
    }

    /* li a: steht vor der Grundregel .vw-nav a und muss sie schlagen (Audit 08.10.2026) */
    .vw-nav li a {
        gap: 0.375rem;
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }
}


.vw-nav a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    height: 100%;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    color: var(--text);
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.2;
    text-decoration: none;
}

.vw-nav a svg {
    flex: none;
}

.vw-nav-name {
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

.vw-nav a[aria-current="page"] {
    background: var(--accent);
    color: var(--on-accent);
}

@media (hover: hover) {
    .vw-nav a:not([aria-current="page"]):hover {
        background: var(--surface-2);
        text-decoration: none;
    }
}

.vw-zaehler {
    margin-left: auto;
    flex: none;
    min-width: 1.375rem;
    padding: 0.125rem 0.375rem;
    border-radius: 6px;
    font-family: var(--schrift-mono);
    font-size: 0.75rem;
    text-align: center;
}

.vw-zaehler-violet {
    background: var(--violet-tint);
    color: var(--violet);
}

.vw-zaehler-danger {
    background: var(--danger-tint);
    color: var(--danger);
}

.vw-nav a[aria-current="page"] .vw-zaehler {
    background: #ffffff;
    color: #3f5868;
}

/* ---------- Seitenkopf ---------- */

.vw-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.vw-kopf-text {
    min-width: 0;
    flex: 1 1 30rem;
}

.vw-zeile {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

.vw-kurztext {
    margin: 0.5rem 0 0;
    max-width: 52rem;
    color: var(--text-2);
}

.vw .zurueck-link {
    align-self: flex-start;
}

/* ---------- Karten und Kennzahlen ---------- */

.vw-karte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    min-width: 0;
}

.vw-karte h2,
.vw-karte h3 {
    margin: 0;
    font-size: 1.0625rem;
}

.vw-karte-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.vw-karte-kopf a {
    font-weight: 700;
}

.vw-kennzahlen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@container seite (min-width: 30em) {
    .vw-kennzahlen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container seite (min-width: 60em) {
    .vw-kennzahlen {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vw-kennzahl {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vw-kennzahl-titel {
    margin: 0;
    font-weight: 700;
    color: var(--text-2);
}

.vw-kennzahl-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.75rem;
}

.vw-kennzahl-zeile-unter {
    flex-direction: column;
    align-items: stretch;
}

.vw-kennzahl-wert {
    margin: 0;
    font-family: var(--schrift-mono);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.vw-kennzahl-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-2);
}

.vw-ton-violet {
    color: var(--violet);
}

.vw-ton-danger {
    color: var(--danger);
}

/* ---------- Mini-Grafiken (SVG, Farben über Klassen) ---------- */

.vw-ring,
.vw-saeulen {
    flex: none;
}

.vw-ring-spur {
    fill: none;
    stroke: var(--track);
    stroke-width: 6;
}

.vw-ring-wert {
    fill: none;
    stroke-width: 6;
}

.vw-t-accent { stroke: var(--accent); }
.vw-t-blue { stroke: var(--blue); }
.vw-t-violet { stroke: var(--violet); }
.vw-t-success { stroke: var(--success); }
.vw-t-danger { stroke: var(--danger); }

.vw-f-accent { fill: var(--accent); }
.vw-f-blue { fill: var(--blue); }
.vw-f-violet { fill: var(--violet); }
.vw-f-success { fill: var(--success); }
.vw-f-danger { fill: var(--danger); }
.vw-f-grau { fill: var(--border-strong); }
.vw-f-neutral { fill: var(--muted); }
.vw-f-spur { fill: var(--track); }

.vw-f-accent.vw-blass { fill: color-mix(in oklab, var(--accent) 40%, var(--surface)); }
.vw-f-blue.vw-blass { fill: color-mix(in oklab, var(--blue) 40%, var(--surface)); }
.vw-f-violet.vw-blass { fill: color-mix(in oklab, var(--violet) 40%, var(--surface)); }

.vw-segmente,
.vw-balken {
    display: block;
}

.vw-b-accent { background: var(--accent); }
.vw-b-blue { background: var(--blue); }
.vw-b-violet { background: var(--violet); }
.vw-b-leer { background: var(--surface-2); border: 1px solid var(--border-strong); }

.vw-kuerzel {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: 9rem;
}

.vw-kuerzel-punkt {
    display: inline-grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.5625rem;
    font-weight: 700;
}

.vw-kuerzel-offen {
    background: var(--violet-tint);
    color: var(--violet);
}

.vw-legende {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.875rem;
    color: var(--text-2);
}

.vw-legende li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vw-legende-spalte {
    flex-direction: column;
    margin: 0;
}

.vw-legende-feld {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
    flex: none;
}

.vw-klein {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-2);
}

.vw-mono {
    font-family: var(--schrift-mono);
    font-size: 0.875rem;
}

/* ---------- Startseite ---------- */

.vw-raster-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@container seite (min-width: 64em) {
    .vw-raster-2-64 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@container seite (min-width: 72em) {
    .vw-raster-2-72 {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
}

.vw-zustand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.vw-zustand-uebersicht {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.vw-zustand-ring {
    position: relative;
    display: grid;
    place-items: center;
}

.vw-zustand-ring .vw-ring {
    width: 7.5rem;
    height: 7.5rem;
}

.vw-zustand-zahl {
    position: absolute;
    text-align: center;
    line-height: 1.1;
}

.vw-zustand-zahl strong {
    display: block;
    font-family: var(--schrift-mono);
    font-size: 1.75rem;
}

.vw-zustand-zahl span {
    font-size: 0.75rem;
    color: var(--text-2);
}

.vw-zustand-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.vw-zustand-liste li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vw-zustand-liste b {
    font-family: var(--schrift-mono);
    min-width: 1.5rem;
}

.vw-offen {
    flex: 1 1 min(16rem, 100%);
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.vw-offen a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    min-height: 2.75rem;
}

.vw-offen-violet { background: var(--violet-tint); }
.vw-offen-danger { background: var(--danger-tint); }
.vw-offen-accent { background: var(--accent-tint); }

.vw-offen-symbol {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--surface);
}

.vw-offen-violet .vw-offen-symbol { color: var(--violet); }
.vw-offen-danger .vw-offen-symbol { color: var(--danger); }

.vw-offen-text {
    flex: 1;
    min-width: 0;
}

.vw-offen-text strong {
    display: block;
}

.vw-offen-text span {
    font-size: 0.8125rem;
    color: var(--text-2);
}

@media (hover: hover) {
    .vw-offen a:hover {
        text-decoration: none;
        filter: brightness(0.97);
    }
}

.vw-status-kurz {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    font-weight: 700;
    white-space: nowrap;
    color: var(--text);
}

.vw-punkt {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex: none;
}

.vw-punkt-danger { background: var(--danger); }
.vw-punkt-blue { background: var(--blue); }
.vw-punkt-success { background: var(--success); }
.vw-punkt-violet { background: var(--violet); }

/* Aktivität */

.vw-aktivitaet-svg {
    display: block;
    width: 100%;
    height: 12.5rem;
}

.vw-aktivitaet-tage {
    list-style: none;
    margin: 0.375rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    font-family: var(--schrift-mono);
    font-size: 0.75rem;
    color: var(--text-2);
    text-align: center;
}

.vw-aktivitaet-tage .vw-heute {
    font-weight: 700;
    color: var(--text);
}

@container seite (max-width: 29.99em) {
    .vw-aktivitaet-tage li:not(:nth-child(3n + 2)):not(.vw-heute) {
        visibility: hidden;
    }
}

/* Gebiet (Kachelkarte) */

.vw-gebiet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.vw-kachelkarte {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(2.75rem, 4.125rem));
    gap: 4px;
    flex: 0 1 auto;
    max-width: 100%;
}

.vw-kk-s1 { grid-column: 1; }
.vw-kk-s2 { grid-column: 2; }
.vw-kk-s3 { grid-column: 3; }
.vw-kk-s4 { grid-column: 4; }
.vw-kk-s5 { grid-column: 5; }
.vw-kk-s6 { grid-column: 6; }
.vw-kk-z1 { grid-row: 1; }
.vw-kk-z2 { grid-row: 2; }
.vw-kk-z3 { grid-row: 3; }
.vw-kk-z4 { grid-row: 4; }
.vw-kk-z5 { grid-row: 5; }

.vw-kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 2.75rem;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    text-decoration: none;
    font-weight: 700;
    line-height: 1.1;
}

.vw-kachel-kuerzel {
    font-family: var(--schrift-mono);
    font-size: 0.75rem;
}

.vw-kachel-zahl {
    font-family: var(--schrift-mono);
    font-size: 1.125rem;
}

.vw-kachel-aktiv {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.vw-kachel-wien {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
    color: var(--surface);
}

@media (hover: hover) {
    .vw-kachel:hover {
        text-decoration: none;
        outline: 2px solid var(--accent-ink);
        outline-offset: 1px;
    }
}

.vw-gebiet-text {
    flex: 1 1 14rem;
    min-width: 0;
    display: grid;
    gap: 0.75rem;
}

.vw-gebiet-text p {
    margin: 0;
}

.vw-gebiet-wert {
    font-size: 1.125rem;
}

/* Quellenstand */

.vw-quellenstand {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.vw-quellenstand li {
    display: grid;
    gap: 0.375rem;
}

.vw-quelle-kopf {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.vw-quelle-name {
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------- Tabellen und Karten-Listen ---------- */

.vw-tabelle {
    padding: 0;
    overflow-x: auto;
}

.vw-tabelle table {
    width: 100%;
    border-collapse: collapse;
}

.vw-tabelle th,
.vw-tabelle td {
    padding: 0.875rem 1.25rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.vw-tabelle td {
    overflow-wrap: anywhere;
}

.vw-tabelle thead th {
    background: var(--surface-2);
    font-weight: 700;
    white-space: nowrap;
}

.vw-tabelle tbody tr:last-child th,
.vw-tabelle tbody tr:last-child td {
    border-bottom: 0;
}

.vw-nur-breit {
    display: none;
}

.vw-nur-schmal {
    display: grid;
}

@container seite (min-width: 60em) {
    .vw-nur-breit {
        display: block;
    }

    .vw-nur-schmal {
        display: none;
    }
}

.vw-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1rem;
}

.vw-liste dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.375rem 1rem;
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
}

.vw-liste dt {
    color: var(--text-2);
}

.vw-liste dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.vw-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vw-initialen {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 700;
}

.vw-etikett {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.vw-etikett-schwach {
    font-weight: 400;
    color: var(--text-2);
}

.vw-etikett-violet { background: var(--violet-tint); color: var(--violet); }
.vw-etikett-blue { background: var(--blue-tint); color: var(--blue); }
.vw-etikett-success { background: var(--success-tint); color: var(--success); }
.vw-etikett-danger { background: var(--danger); color: var(--surface); }

.vw-etiketten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.vw-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Formulare mit Seitenkarte ---------- */

.vw-formular-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@container seite (min-width: 60em) {
    .vw-formular-raster {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.vw .formular {
    max-width: none;
}

.vw-felder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1.5rem;
}

@container seite (min-width: 37.5em) {
    .vw-felder-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vw-felder-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container seite (min-width: 60em) {
    .vw-felder-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container seite (min-width: 80em) {
    .vw-felder-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.vw-option {
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    background: var(--surface-2);
}

.vw-option .checkbox,
.vw-option .feld-checkbox {
    margin: 0;
}

.vw-option-text {
    display: block;
    margin: 0.125rem 0 0 2rem;
    font-size: 0.875rem;
    color: var(--text-2);
}

.vw-trenner {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}

.vw-seitenkarte {
    background: var(--accent-tint);
    border-color: transparent;
}

.vw-seitenkarte p {
    margin: 0;
}

.vw-anmeldung {
    margin: 0.5rem 0 !important;
    font-family: var(--schrift-mono);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
}

.vw-umschalter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    max-width: 100%;
    list-style: none;
    margin: 0;
    align-self: flex-start;
}

.vw-umschalter a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    border-radius: 8px;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.vw-umschalter a[aria-current="page"] {
    background: var(--surface);
    box-shadow: var(--shadow);
}

.vw-umschalter a.vw-loeschen[aria-current="page"] {
    color: var(--danger);
}

.vw-konto-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.vw-folgen {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.vw-folgen li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.vw-folgen-symbol {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
}

.vw-folgen-danger { background: var(--danger-tint); color: var(--danger); }
.vw-folgen-success { background: var(--success-tint); color: var(--success); }
.vw-folgen-blue { background: var(--blue-tint); color: var(--blue); }
.vw-folgen-neutral { background: var(--surface-2); color: var(--text-2); }

.vw-hinweisflaeche {
    padding: 0.875rem 1rem;
    border-radius: 10px;
    background: var(--surface-2);
    margin: 1rem 0;
}

.vw-knopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.knopf-gefahr[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- Karten-Raster (Projekte, Bezirke) ---------- */

.vw-kartenraster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@container seite (min-width: 37.5em) {
    .vw-kartenraster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container seite (min-width: 64em) {
    .vw-kartenraster {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .vw-kartenraster-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.vw-karte-neu {
    border-style: dashed;
    border-color: var(--border-strong);
}

.vw-karte-titel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.vw-projekt-kuerzel {
    font-family: var(--schrift-mono);
    font-size: 1.25rem;
    letter-spacing: 0.08em;
}

.vw-zahlen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.vw-zahlen dt {
    font-size: 0.75rem;
    color: var(--text-2);
}

.vw-zahlen dd {
    margin: 0;
    font-family: var(--schrift-mono);
    font-weight: 700;
}

.vw-weitere {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 2rem;
}

@container seite (min-width: 45em) {
    .vw-weitere {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container seite (min-width: 72em) {
    .vw-weitere {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vw-weitere li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.vw-weitere form {
    margin: 0;
}

.vw-hinweisbox {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--blue-tint);
    color: var(--text);
    max-width: 52rem;
}

.vw-hinweisbox p {
    margin: 0;
}

.vw-hinweisbox svg {
    flex: none;
    color: var(--blue);
    margin-top: 0.125rem;
}

/* ---------- Klappliste (Orte, Quellen, Eintragstypen) ---------- */

.vw-klappliste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.vw-klapp {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.vw-klapp-pruefen {
    border-color: var(--violet);
}

.vw-klapp > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    min-height: 2.75rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    list-style: none;
}

.vw-klapp > summary::-webkit-details-marker {
    display: none;
}

.vw-klapp > summary::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    margin-right: 0.25rem;
}

.vw-klapp[open] > summary::before {
    transform: rotate(45deg);
}

.vw-klapp[open] > summary {
    border-bottom: 1px solid var(--border);
}

.vw-klapp-titel {
    font-weight: 700;
}

.vw-klapp-rechts {
    margin-left: auto;
}

.vw-klapp-inhalt {
    padding: 1rem 1.25rem 1.25rem;
}

.vw-nummer {
    display: inline-grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: var(--surface-2);
    font-family: var(--schrift-mono);
    font-size: 0.8125rem;
    font-weight: 700;
}

.vw-auswahl-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.vw-auswahl-kopf form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin: 0;
}

.vw-auswahl-kopf .feld {
    margin: 0;
}

.vw-auswahl-kopf h2,
.vw-auswahl-kopf p {
    margin: 0;
}

.vw-titelzeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vw-titelzeile h2 {
    margin: 0;
}

.vw-abschnitt {
    display: grid;
    gap: 1rem;
}

.vw-abschnitt > h2,
.vw-abschnitt > p {
    margin: 0;
}

/* ---------- Betrieb prüfen ---------- */

.vw-pruefungen {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vw-pruefungen li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem 1.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border);
}

@container seite (min-width: 50em) {
    .vw-pruefungen li {
        grid-template-columns: 16rem 9rem minmax(0, 1fr);
        align-items: start;
    }
}

.vw-pruefung-name {
    font-weight: 700;
    margin: 0;
}

.vw-pruefung-text {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ---------- Export ---------- */

.vw-export {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@container seite (min-width: 60em) {
    .vw-export {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vw-export .vw-karte {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.vw-export p,
.vw-export form {
    margin: 0;
}

.vw-link-feld {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

.vw-link-feld input {
    flex: 1 1 18rem;
    min-width: 0;
    font-family: var(--schrift-mono);
    background: var(--surface-2);
}

.vw-erfolg-kopf {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.vw-erfolg-kopf h2 {
    margin: 0;
}

.vw-erfolg-symbol {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: var(--success-tint);
    color: var(--success);
}

.vw-erfolg-kopf p {
    margin: 0.25rem 0 0;
    color: var(--text-2);
}

/* Protokoll */

.vw-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.vw-filter .feld {
    margin: 0;
    flex: 0 1 24rem;
}

.vw-filter p {
    margin: 0;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
}

.vw-aktion-import { background: var(--blue-tint); color: var(--blue); }
.vw-aktion-konto { background: var(--violet-tint); color: var(--violet); }
.vw-aktion-stelle { background: var(--success-tint); color: var(--success); }

@media (prefers-reduced-motion: reduce) {
    .vw * {
        transition: none !important;
    }
}

.vw-offen a > svg:last-child {
    flex: none;
    transform: rotate(-90deg);
}

.vw-loeschkarte {
    max-width: 48rem;
}

.vw-option .feld-checkbox label {
    font-weight: 700;
}

.vw-hinweisflaeche p {
    margin: 0;
}

.vw-pruefungen-titel {
    padding: 1.25rem 1.25rem 0;
    margin: 0 0 0.75rem;
}

.vw-loeschkarte .feld-checkbox label {
    font-weight: 700;
}

.vw-aktivitaet-tage li {
    white-space: nowrap;
}

/* Kachelkarte: auf sehr schmalen Bildschirmen innerhalb der Karte waagrecht scrollbar (Ziele bleiben 44 px) */
.vw-kachelkarte {
    overflow-x: auto;
    padding-bottom: 2px;
}

.vw-pruefungen li p {
    margin: 0;
}

.vw-tabelle td.vw-nowrap,
.vw-tabelle td.vw-mono {
    white-space: nowrap;
    overflow-wrap: normal;
}

.vw-liste .vw-etikett {
    white-space: normal;
}

.vw-zustand-uebersicht {
    flex-wrap: wrap;
}

.vw-offen {
    grid-template-columns: minmax(0, 1fr);
}

@container seite (max-width: 29.99em) {
    .vw-karte {
        padding: 1rem;
    }
}

/* ==========================================================================
   Leiste „AMS Daten Update“ (Design-Übergabe Import, Entscheidung 167)
   Übersicht und Import-Seite. Breiten als Container-Abfragen am <body> (em), damit A+/A++ sie verschiebt.
   ========================================================================== */

.ams-seitenkopf h1 {
    margin: 0.25rem 0 0;
}

.ams-dachzeile {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

.ams-mono {
    font-family: var(--schrift-mono);
}

.ams-bereich {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: 0 1.5rem;
}

.ams-leiste {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border-radius: 12px;
    background: var(--accent-tint);
    color: var(--text);
}

.ams-leiste-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 2.5rem;
}

.ams-leiste-symbol {
    display: grid;
    place-items: center;
    flex: none;
    align-self: flex-start;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -1.5rem;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
}

/* Symbol und Text bleiben nebeneinander (Symbol: 2.75rem, wirksamer Abstand 1rem) */
.ams-leiste-text {
    flex: 1 1 auto;
    width: max-content;
    min-width: 0;
    max-width: calc(100% - 3.75rem);
}

.ams-leiste-text h2 {
    margin: 0;
    font-size: 1.125rem;
}

.ams-leiste-text > p {
    margin: 0.125rem 0 0;
}

.ams-leiste-text > .ams-hinweis {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 100%;
    margin-top: 0.625rem;
    padding: 0.5rem 0.875rem;
    border: 1.5px solid var(--success);
    border-radius: 8px;
    background: var(--success-tint);
    color: var(--text);
    font-weight: 400;
    line-height: 1.35;
}

.ams-hinweis svg {
    flex: none;
    margin-top: 0.0625rem;
    color: var(--success);
}

.ams-leiste-text > .ams-gesperrt {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.ams-gesperrt svg {
    flex: none;
    margin-top: 0.125rem;
}

@container seite (min-width: 64em) {
    .ams-hinweis {
        white-space: nowrap;
    }
}

.ams-leiste-knoepfe {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.ams-leiste-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.ams-leiste-reihe form {
    display: flex;
    margin: 0;
}

.ams-start,
.ams-spaeter,
.ams-einrichten {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

a.ams-start {
    padding: 0 1.25rem;
    border: 0;
    background: var(--accent);
    color: var(--on-accent);
    text-decoration: none;
}

.ams-spaeter {
    padding: 0 1rem;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
}

.ams-einrichten.knopf-zweitrangig {
    width: 100%;
    padding: 0 0.875rem 0 0.75rem;
    border: 1.5px dashed var(--accent);
    background: var(--surface);
    color: var(--accent-ink);
}

.ams-einrichten-pfeil {
    transition: transform 0.15s;
}

.ams-einrichten[aria-expanded="true"] .ams-einrichten-pfeil {
    transform: rotate(180deg);
}

@media (hover: hover) {
    a.ams-start:hover {
        background: var(--accent-ink);
        color: var(--surface);
    }

    .ams-spaeter:hover {
        background: var(--surface-2);
        color: var(--text);
    }

    .ams-einrichten:hover {
        background: var(--surface-2);
        border-color: var(--accent);
        color: var(--accent-ink);
    }
}

:root[data-theme="dunkel"] a.ams-start:hover {
    background: #4c6574;
    color: #ffffff;
}

/* Ablauf-Zeile „So läuft das Update“: Trennlinien über gap auf --border. Eigener Container: bei zwei Spalten
   (2 + 1 Felder) nimmt das dritte Feld die ganze Breite, damit kein leeres graues Feld bleibt. */
.ams-ablauf {
    container: ablauf / inline-size;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--border);
}

.ams-ablauf li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem 1rem;
    background: var(--surface);
}

@container ablauf (min-width: 24.0625rem) and (max-width: 36.125rem) {
    .ams-ablauf li:last-child {
        grid-column: 1 / -1;
    }
}

.ams-ablauf li > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.ams-ablauf li > span:last-child > span {
    color: var(--text-2);
    font-size: 0.9375rem;
}

.ams-ablauf-zahl {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--schrift-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* Anleitung „Lesezeichen einrichten“ */
.ams-anleitung {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.ams-anleitung:focus {
    outline: none;
}

.ams-anleitung:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.ams-anleitung-schritte {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding-left: 1.25rem;
}

.ams-anleitung kbd {
    padding: 0 0.375rem;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--schrift-mono);
    font-size: 1rem;
}

.ams-skizze {
    max-width: 30rem;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface-2);
}

.ams-skizze-oben {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.ams-skizze-adresse {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--schrift-mono);
    font-size: 0.9375rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ams-skizze-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: 0.9375rem;
}

.ams-skizze-leiste b {
    color: var(--accent-ink);
}

.ams-skizze-ziel,
.ams-skizze-knopf {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border: 2px dashed var(--accent);
    border-radius: 6px;
    color: var(--accent-ink);
    font-weight: 700;
}

.ams-skizze-knopf {
    background: var(--accent-tint);
    font-size: 0.9375rem;
}

.ams-skizze-unten {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 4.5rem;
    padding: 0.75rem 1rem;
}

.ams-skizze-pfeil {
    position: absolute;
    left: 5.5rem;
    top: -0.25rem;
    width: 7.5rem;
    height: 3.5rem;
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 4 4;
}

.ams-ziehen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

a.ams-ziehen-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1.125rem;
    border: 2px dashed var(--accent);
    border-radius: 10px;
    background: var(--accent-tint);
    color: var(--accent-ink);
    font-weight: 700;
    text-decoration: none;
    cursor: grab;
}

.ams-ziehen-pfeil {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text);
}

.ams-ziehen-hinweis {
    margin: 0;
}

.ams-meldung {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
}

.ams-meldung svg {
    flex: none;
    margin-top: 0.125rem;
}

.ams-meldung-ok {
    border: 1.5px solid var(--success);
    background: var(--success-tint);
}

.ams-meldung-alt {
    border: 1.5px solid var(--danger);
    background: var(--danger-tint);
}

/* „Erinnerung ausgeblendet. Wieder anzeigen“ */
.ams-ausgeblendet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    margin-block: 0 1.5rem;
}

.ams-bereich .ams-ausgeblendet {
    margin: 0;
}

.ams-ausgeblendet form {
    margin: 0;
}

.ams-textknopf.knopf-text {
    padding: 0 0.25rem;
    font-size: inherit;
    text-decoration: underline;
}

/* Karte „Import läuft, bitte warten“ */
.ams-laeuft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    max-width: 56rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.ams-laeuft > div {
    flex: 1 1 18rem;
    min-width: 0;
}

.ams-laeuft h2 {
    margin: 0;
    font-size: 1.25rem;
}

.ams-laeuft p {
    margin: 0.25rem 0 0;
}

.ams-laeuft-symbol {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-ink);
}

@keyframes ams-puls {
    0% { box-shadow: 0 0 0 0 rgba(94, 121, 138, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(94, 121, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(94, 121, 138, 0); }
}

@media (prefers-reduced-motion: no-preference) {
    .ams-laeuft-symbol {
        animation: ams-puls 1.6s ease-out infinite;
    }
}

/* Import-Seite: AMS-Daten aktuell */
.ams-aktuell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-block: 0 1.5rem;
}

.ams-aktuell > svg {
    flex: none;
    color: var(--success);
}

.ams-aktuell a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 700;
}

/* Tablet: Knopfspalte rutscht unter den Text; Handy: alles untereinander, Knöpfe voll breit */
@container seite (max-width: 47.99em) {
    .ams-leiste-knoepfe {
        flex: 1 1 100%;
    }

    .ams-leiste-reihe > * {
        flex: 1 1 auto;
    }

    .ams-leiste-reihe form,
    .ams-leiste-reihe .ams-spaeter,
    a.ams-start {
        width: 100%;
    }
}

@media (forced-colors: active) {
    .ams-leiste,
    .ams-anleitung,
    .ams-laeuft {
        border: 1px solid CanvasText;
    }
}

/* Sehr schmal oder große Schrift: Knopftexte dürfen umbrechen, statt die Seite zu verbreitern */
@container seite (max-width: 29.99em) {
    .ams-leiste {
        padding: 1rem;
    }

    .ams-leiste-knoepfe {
        min-width: 0;
    }

    .ams-start,
    .ams-spaeter,
    .ams-einrichten {
        white-space: normal;
        text-align: center;
    }

    .ams-leiste-symbol {
        margin-right: 0;
    }
}

/* Passwort-Hilfe der Redaktion (Entscheidung 168) */
.redaktion-liste {
    display: grid;
    margin-top: 1.5rem;
}

.redaktion-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.redaktion-zeile h2 {
    margin: 0;
    font-size: 1.125rem;
}

.redaktion-zeile p {
    margin: 0.25rem 0 0;
}

/* Verwaltung → Regionen (Entscheidung 169): Bezirke als Häkchen in zwei Spalten, ab schmaler Breite eine */
.regionen-bezirke {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
    gap: 0 1rem;
    margin: 0.5rem 0 1rem;
    padding: 0;
    border: 0;
}

.regionen-bezirke legend {
    padding: 0;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

/* Mitarbeitende nach Regionen (07.10.2026) */
.vw-gruppe {
    display: grid;
    gap: 0.75rem;
}

.vw-gruppe + .vw-gruppe {
    margin-top: 1.25rem;
}

.vw-gruppe-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0;
    font-size: 1.25rem;
}

.vw-gruppe-kopf .vw-etikett {
    font-size: 0.8125rem;
}

.vw-gruppe-hinweis {
    font-weight: 400;
}

/* ======================================================================
   Lehrstelle (Detailseite) – Design-Übergabe „Stelle Detail“ (07.10.2026, Entscheidung 174)
   Zwei Spalten nach dem Sidebar-Muster ohne Media Query; Formular rechts sticky, unter ca. 60em darunter.
   ====================================================================== */
.sd-raster {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem;
    max-width: 90rem;
}

.sd-haupt {
    flex: 999 1 36rem;
    min-width: 0;
    display: grid;
    gap: 1.25rem;
}

.sd-seite {
    flex: 1 1 22rem;
    min-width: 0;
}

@media (min-height: 40em) {
    .sd-seite {
        position: sticky;
        top: calc(var(--kopf-hoehe, 8rem) + 1rem);
        /* Nie höher als der sichtbare Bereich – sonst bleibt „Speichern“ bis zum Ende der Chronik unerreichbar
           (Tablet quer, Laptop 720 px; Audit 08.10.2026) */
        max-height: calc(100vh - var(--kopf-hoehe, 8rem) - 2rem);
        max-height: calc(100dvh - var(--kopf-hoehe, 8rem) - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@container seite (max-width: 60em) {
    .sd-seite {
        position: static;
    }
}

.sd-karte,
.sd-chronik,
.sd-formular {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    min-width: 0;
}

/* Besetzt: grüne Karte ohne sichtbaren Rahmen (transparent, damit nichts springt), Chronik ohne Rahmen */
.sd-karte.sd-besetzt {
    background: var(--success-tint);
    border-color: transparent;
}

.sd-chronik.sd-besetzt {
    border-color: transparent;
}

.sd-besetzt-balken {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
    padding: 0.875rem 1.125rem;
    border-radius: 10px;
    background: var(--success);
    color: var(--surface);
}

.sd-besetzt-balken > span:last-child {
    display: grid;
    gap: 0.125rem;
}

.sd-besetzt-balken strong {
    font-size: 1.125rem;
}

.sd-besetzt-symbol {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--surface);
    color: var(--success);
}

.sd-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem 1.5rem;
}

.sd-kopf-text {
    flex: 1 1 22rem;
    min-width: 0;
}

.sd-dach {
    margin: 0;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.sd-titel {
    margin: 0.25rem 0 0.75rem;
    font-size: 1.875rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.sd-etiketten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Orts-Etikett: groß und auffällig (Öffis am Land) */
.sd-ort {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.375rem 0.875rem;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
}

.sd-ort .icon {
    align-self: center;
}

.sd-plz {
    font-family: var(--schrift-mono);
    font-weight: 700;
    font-size: 1.125rem;
}

.sd-ortname {
    font-size: 1.25rem;
    font-weight: 700;
}

.sd-bezirk {
    font-size: 0.875rem;
}

.sd-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--r-chip);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

.sd-status-aktiv {
    background: var(--success-tint);
    color: var(--success);
}

.sd-status-besetzt,
.status-besetzt {
    background: var(--success);
    color: var(--surface);
}

.sd-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Faktenleiste: Trennlinien über den gap */
.sd-fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 1px;
    margin: 1.25rem 0 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--border);
    overflow: hidden;
}

.sd-fakten > div {
    padding: 0.75rem 1rem;
    background: var(--surface-2);
}

.sd-besetzt .sd-fakten > div {
    background: var(--surface);
}

.sd-fakten dt {
    font-size: 0.875rem;
    color: var(--text-2);
}

.sd-fakten dd {
    margin: 0.125rem 0 0;
    font-weight: 700;
}

.sd-mono {
    font-family: var(--schrift-mono);
    font-variant-numeric: tabular-nums;
}

.sd-angaben {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

.sd-angaben > div {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
    gap: 0.25rem 1rem;
}

.sd-angaben dt {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-2);
}

.sd-angaben dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.sd-technik {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.sd-technik summary {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 700;
    cursor: pointer;
}

.sd-technik dl {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
    gap: 0.5rem 1rem;
    margin: 0.5rem 0 0;
}

.sd-technik dt {
    color: var(--text-2);
}

.sd-technik dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Chronik */
.sd-chronik-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
}

.sd-chronik-kopf h2 {
    margin: 0;
}

.sd-chronik-kopf a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 700;
}

.sd-anzahl {
    font-family: var(--schrift-mono);
    font-weight: 400;
}

.sd-statuszeile:not(:empty) {
    margin: 0.5rem 0;
}

.sd-leer {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1rem 0 0;
    padding: 1rem 1.125rem;
    border: 2px dashed var(--border-strong);
    border-radius: 10px;
    color: var(--text-2);
}

.sd-liste {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.sd-liste > li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.sd-liste > li + li {
    border-top: 1px solid var(--border);
}

.sd-eintrag {
    flex: 1 1 auto;
    min-width: 0;
}

.sd-eintrag-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
    margin: 0;
}

.sd-eintrag-kopf .typ {
    flex: none;
    white-space: nowrap;
}

/* Wiedervorlage in der Chronik als Pill, ohne Fettschrift (Nutzerin, 09.10.2026) */
.sd-wv {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.625rem;
    border: 1px solid var(--violet);
    border-radius: 999px;
    background: var(--violet-tint);
    color: var(--violet);
    font-weight: 400;
    white-space: nowrap;
}
.sd-wv abbr { text-decoration: none; }

.sd-eintrag-text {
    margin: 0.25rem 0 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.sd-eintrag-aktionen {
    display: flex;
    flex: none;
}

.sd-eintrag-aktionen form {
    margin: 0;
}

/* Icon-Knöpfe der Chronik: Zielfläche 44 × 44 px */
.sd-icon-knopf {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
}

.sd-loeschen {
    color: var(--danger);
}

@media (hover: hover) {
    .sd-icon-knopf:hover {
        background: var(--surface-2);
        color: var(--text);
    }

    .sd-loeschen:hover {
        background: var(--danger-tint);
        color: var(--danger);
    }
}

/* Formular „Eintrag hinzufügen“ (kompakt) */
.sd-formular h2 {
    margin: 0 0 0.75rem;
}

.sd-form {
    display: grid;
    gap: 1rem;
}

.sd-typ-wahl {
    position: relative;
}

.sd-typ-wahl select {
    width: 100%;
    padding-left: 2.25rem;
}

.sd-typ-punkt {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: -0.375rem;
    border-radius: 50%;
    background: var(--muted);
    pointer-events: none;
}

.sd-typ-punkt-blau { background: var(--blue); }
.sd-typ-punkt-violett { background: var(--violet); }
.sd-typ-punkt-tuerkis { background: var(--accent); }
.sd-typ-punkt-gruen { background: var(--success); }
.sd-typ-punkt-rot { background: var(--danger); }

.sd-wv-klapp {
    border: 1px solid var(--border);
    border-radius: 8px;
}

.sd-wv-klapp summary {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.875rem;
    font-weight: 700;
    cursor: pointer;
}

.sd-wv-klapp > .feld {
    padding: 0 0.875rem 0.875rem;
}

.sd-speichern {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3rem;
}

/* Lehrstellenliste: besetzte Stelle grün ohne Rahmen (Ort bleibt zuerst, fett, --accent-ink) */
.treffer > li.treffer-besetzt,
.treffer > li.treffer-besetzt:hover {
    background: var(--success-tint);
    border-bottom-color: transparent;
}

.treffer > li.treffer-besetzt.ist-ausgewaehlt {
    background: var(--accent-tint);
}

@media (forced-colors: active) {
    .sd-besetzt-balken,
    .sd-status-besetzt,
    .status-besetzt,
    .sd-ort {
        border: 2px solid CanvasText;
    }

    .sd-typ-punkt {
        forced-color-adjust: none;
    }
}

/* Aufklapp-Pfeil für „Technische Angaben“ und „Wiedervorlage“ (summary mit display:flex verliert den Standard-Pfeil) */
.sd-technik summary::-webkit-details-marker,
.sd-wv-klapp summary::-webkit-details-marker {
    display: none;
}

.sd-technik summary::before,
.sd-wv-klapp summary::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0.5rem 0 0.125rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.sd-technik[open] > summary::before,
.sd-wv-klapp[open] > summary::before {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
    .sd-technik summary::before,
    .sd-wv-klapp summary::before {
        transition: transform 0.15s;
    }
}

/* ======================================================================
   Eintrag bearbeiten – Design-Übergabe „Eintrag bearbeiten“ (07.10.2026, Entscheidung 175)
   Formular links (auto-fit-Raster), Kontextspalte rechts (Sidebar-Muster ohne Media Query)
   ====================================================================== */
.eb-dach {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

.eb-titel {
    margin: 0.125rem 0 0;
}

.eb-raster {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem;
    max-width: 90rem;
}

.eb-formular {
    flex: 999 1 36rem;
    min-width: 0;
}

.eb-seite {
    flex: 1 1 20rem;
    min-width: 0;
    display: grid;
    gap: 1rem;
}

.eb-formular,
.eb-karte,
.eb-geloescht {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
}

.eb-formular-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.eb-formular-kopf h2 {
    margin: 0;
}

.eb-status {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
}

.eb-status-ungespeichert {
    color: var(--violet);
}

.eb-status-gespeichert {
    color: var(--success);
}

.eb-form {
    display: grid;
    gap: 1.25rem;
    max-width: none; /* .formular begrenzt sonst auf 40rem – hier bis zu 3 Felder nebeneinander */
}

.eb-felder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.125rem 1.5rem;
    align-items: start;
}

.eb-felder > .feld {
    margin: 0;
    min-width: 0;
}

.eb-felder select,
.eb-felder input,
.eb-felder textarea {
    width: 100%;
}

.eb-voll,
.eb-hinweis {
    grid-column: 1 / -1;
}

/* Hinweis beim Wechsel zu oder von „Zusage“ */
.eb-hinweis {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--surface-2);
}

.eb-hinweis[hidden] {
    display: none;
}

.eb-hinweis p {
    margin: 0;
}

.eb-hinweis-besetzt {
    background: var(--success-tint);
}

.eb-hinweis-symbol {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--text-2);
    color: var(--surface);
}

.eb-hinweis-besetzt .eb-hinweis-symbol {
    background: var(--success);
}

.eb-fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.eb-fuss a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 700;
}

.eb-speichern {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
}

/* Kontextspalte */
.eb-klein {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
}

.eb-ort {
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem;
}

.eb-ort .sd-plz,
.eb-ort .sd-ortname {
    font-size: 1rem;
}

.eb-stelle {
    margin: 0.75rem 0 0.25rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.eb-betrieb {
    margin: 0;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.eb-bisher-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
    margin: 0;
}

.eb-bisher-wer {
    margin: 0.375rem 0 0;
    font-size: 0.9375rem;
    color: var(--text-2);
}

.eb-bisher-text {
    margin: 0.625rem 0 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.eb-loeschen {
    border: 1.5px dashed var(--danger);
}

.eb-loeschen h2 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}

.eb-loeschen p {
    margin: 0 0 1rem;
    color: var(--text-2);
}

.eb-loeschen-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    border: 1px solid var(--danger);
    background: var(--surface);
    color: var(--danger);
}

@media (hover: hover) {
    .eb-loeschen-knopf:hover {
        background: var(--danger-tint);
        color: var(--danger);
    }
}

/* Nach dem Löschen: Statuskarte */
.eb-geloescht {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    max-width: 90rem;
}

.eb-geloescht p {
    flex: 1 1 18rem;
    margin: 0;
}

.eb-geloescht-symbol {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--danger-tint);
    color: var(--danger);
}

.eb-geloescht-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.eb-geloescht-knoepfe form {
    margin: 0;
}

@media (forced-colors: active) {
    .eb-hinweis,
    .eb-loeschen-knopf {
        border: 2px solid CanvasText;
    }
}

/* Lesezeichen ohne Ziehen einrichten (Tastatur, Tablet) – Audit 08.10.2026 */
.ams-ohne-ziehen {
    margin: 0;
}

.ams-ohne-ziehen[open] > :last-child {
    margin-bottom: 1rem;
}

.ams-ohne-ziehen[open] > :not(summary) + * {
    margin-top: 0.75rem;
}

/* Links in Zeilenköpfen von Tabellen (Kürzel der Jugendlichen, Konten): mindestens 24 px, am Touch-Gerät 44 px hoch
   (Audit 08.10.2026, WCAG 2.5.8) */
th[scope="row"] > a,
th[scope="row"] > .vw-person > a,
.vw-person-titel > .vw-person > a {
    display: inline-flex;
    align-items: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

@media (pointer: coarse) {
    th[scope="row"] > a,
    th[scope="row"] > .vw-person > a,
    .vw-person-titel > .vw-person > a {
        min-height: 2.75rem;
    }
}

/* ---------- Verwaltung → Regionen (Design-Übergabe „regio.zip“, Entscheidung 178) ---------- */

:root { --rg-warn: #ffd27a; } /* Warnung auf der dunklen Speicherleiste, ≥ 7:1 */
:root[data-theme="dunkel"] { --rg-warn: #7a4a00; } /* Leiste ist dort hell */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { --rg-warn: #7a4a00; }
}
/* System dunkel + mehr Kontrast: es gelten die Kontrast-Tokens (Leiste schwarz) */
@media (prefers-contrast: more) {
    :root:not([data-theme]) { --rg-warn: #ffd27a; }
}

.rg {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.rg-f-violett { --rg-ink: var(--violet); --rg-tint: var(--violet-tint); }
.rg-f-gruen { --rg-ink: var(--success); --rg-tint: var(--success-tint); }
.rg-f-blau { --rg-ink: var(--blue); --rg-tint: var(--blue-tint); }
.rg-f-orange { --rg-ink: var(--orange); --rg-tint: var(--orange-tint); }
.rg-f-petrol { --rg-ink: var(--accent-ink); --rg-tint: var(--accent-tint); }

.rg-kopf h1:focus { outline: none; }

.rg-reihenfolge-ok {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    margin: 0.625rem 0 0;
    padding: 0 0.75rem;
    border-radius: 8px;
    background: var(--success-tint);
    color: var(--success);
    font-size: 0.9375rem;
    font-weight: 700;
}

.rg-neu {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1.5px dashed var(--accent);
    border-radius: 12px;
}

.rg-neu .fehler-zusammenfassung { flex: 1 1 100%; }
.rg-neu-feld { flex: 1 1 18rem; margin: 0; }

.rg-neu-knoepfe,
.rg-umbenennen-knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.rg-neu-knoepfe a,
.rg-umbenennen-knoepfe a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

/* Karten: immer untereinander */
.rg-liste {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rg-karte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.rg-karte.rg-gezogen { opacity: 0.5; }
.rg-karte.rg-ziel-ablage { border: 2px dashed var(--accent); }

.rg-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2rem;
    padding: 1.25rem 1.25rem 1rem;
    background: var(--rg-tint);
}

.rg-name {
    display: flex;
    flex: 1 1 18rem;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.rg-ordnen {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    margin-left: -0.5rem;
}

.rg-ordnen form,
.rg-name > form,
.rg-etikett form,
.rg-verschieben form { display: contents; }

.rg-pfeil,
.rg-stift,
.rg-etikett-knopf {
    min-height: 0;
    min-width: 0;
    padding: 0;
    color: var(--rg-ink);
    background: transparent;
    border: 0;
}

/* ▲/▼: 44 px breit, 26 px hoch, mit dem Griff dazwischen voneinander getrennt (WCAG 2.5.8) */
.rg-pfeil {
    width: 2.75rem;
    height: 1.625rem;
    border-radius: 6px;
}

.rg-pfeil[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
}

.rg-griff {
    display: grid;
    place-items: center;
    height: 1rem;
    color: var(--rg-ink);
    cursor: grab;
}

.rg-symbol {
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: var(--rg-ink);
    color: var(--surface);
}

.rg-symbol .icon { stroke-width: 1.8; }

.rg-name h2 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--rg-ink);
    overflow-wrap: anywhere;
}

.rg-name h2:focus { outline: none; }

.rg-traeger {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--text-2);
}

.rg-stift {
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.5rem -0.5rem 0 0;
    border-radius: 8px;
}

.rg-umbenennen {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

.rg-umbenennen .feld {
    flex: 1 1 12rem;
    margin: 0;
}

.rg-umbenennen .fehler-zusammenfassung { flex: 1 1 100%; }

.rg-zahlen {
    display: grid;
    flex: 0 1 20rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.rg-zahlen > div {
    min-width: 0;
    padding: 0.5rem 0.625rem;
    background: var(--surface);
    border-radius: 8px;
}

.rg-zahlen dt {
    font-size: 0.8125rem;
    color: var(--text-2);
}

.rg-zahlen dd {
    margin: 0;
    font-family: var(--schrift-mono);
    font-size: 1.25rem;
    font-weight: 700;
}

/* Inhalt: Bezirke | Konten */
.rg-spalten {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    min-width: 0;
    padding: 1.25rem 1.5rem 1.5rem;
}

.rg-bezirke {
    display: flex;
    flex: 1 1 22rem;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.rg-konten {
    display: flex;
    flex: 1 1 18rem;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.rg h3 {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
}

.rg-anzahl {
    font-family: var(--schrift-mono);
    color: var(--text);
}

.rg-leer {
    margin: 0;
    color: var(--text-2);
}

.rg-wien {
    margin: 0.5rem 0 0;
    color: var(--text-2);
}

.rg-etiketten,
.rg-kuerzel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rg-etikett {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    min-height: 2.25rem;
    padding-left: 0.625rem;
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.rg-etikett > span {
    min-width: 0;
    margin-right: 0.125rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

.rg-etikett-knopf {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    color: var(--text-2);
}

.rg-etikett-knopf.ist-offen {
    background: var(--accent-tint);
    color: var(--accent-ink);
}

.rg-verschieben {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    border-radius: 10px;
    background: var(--accent-tint);
}

.rg-verschieben > span {
    margin-right: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
}

.rg-ziel {
    min-height: 2.75rem;
    padding: 0 0.75rem;
    font-size: 0.9375rem;
    color: var(--rg-ink);
    background: var(--surface);
    border: 1.5px solid var(--rg-ink);
}

.rg-ziel-ohne {
    --rg-ink: var(--violet);
    --rg-tint: var(--violet-tint);
}

.rg-abbrechen {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-2);
}

.rg-warnung {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-radius: 10px;
    background: var(--violet-tint);
    color: var(--violet);
}

.rg-warnung .icon {
    flex: none;
    margin-top: 0.15rem;
}

.rg-hinzufuegen {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.rg-hinzufuegen-feld {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.rg-hinzufuegen-feld label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-2);
}

.rg-auswahl { position: relative; }

.rg .rg-auswahl select {
    appearance: none;
    -webkit-appearance: none;
    height: 2.75rem;
    padding: 0 2.5rem 0 0.75rem;
}

.rg .rg-auswahl select:focus-visible {
    outline: none;
    background: var(--fokus-feld);
    border-color: var(--focus);
    box-shadow: 0 0 0 2px var(--focus);
}

.rg-auswahl-pfeil {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    color: var(--text-2);
    pointer-events: none;
}

.rg-plus {
    flex: none;
    padding: 0;
    color: var(--rg-ink);
    background: var(--surface);
    border-color: var(--rg-ink);
}

.rg-konten-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.rg-konten-kopf a,
.rg-protokoll-kopf a {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.rg-kuerzel li {
    display: inline-flex;
    align-items: center;
    min-height: 1.875rem;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--schrift-mono);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Fußzeile: Hinweis links, Knopf rechts; schmal steht der Knopf über dem Hinweis */
.rg-fuss {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border);
}

.rg-fuss-text {
    flex: 1 1 16rem;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--text-2);
}

.rg-deaktivieren { font-size: 0.9375rem; }

.rg-deaktivieren[aria-disabled="true"] {
    color: var(--text-2);
    opacity: 0.6;
    cursor: not-allowed;
}

/* Ohne Region */
.rg-ohne {
    --rg-ink: var(--violet);
    --rg-tint: var(--violet-tint);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 1rem 1.25rem;
    border: 1.5px dashed var(--violet);
    border-radius: 12px;
}

.rg-ohne.rg-ohne-alle { border-color: var(--success); }

.rg-ohne-text {
    display: flex;
    flex: 0 1 18rem;
    flex-direction: column;
    min-width: 0;
}

.rg-ohne-text > span {
    font-size: 0.9375rem;
    color: var(--text-2);
}

.rg-ohne h2 {
    margin: 0;
    font-size: 1.0625rem;
}

.rg-ohne h2:focus { outline: none; }
.rg-ohne .rg-anzahl { color: var(--violet); }
.rg-ohne-alle .rg-anzahl { color: var(--success); }

.rg-ohne-liste {
    display: flex;
    flex: 1 1 20rem;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rg-ohne-form {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border-radius: 8px;
    background: var(--violet-tint);
    color: var(--violet);
    font-size: 0.9375rem;
    font-weight: 700;
}

.rg .rg-auswahl-klein select {
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0 2rem 0 0.625rem;
    font-size: 1rem; /* < 16 px zoomt iOS beim Antippen */
    font-weight: 400;
    border-color: var(--violet);
    border-radius: 6px;
}

.rg-auswahl-klein .rg-auswahl-pfeil { right: 0.5rem; }

.rg-ohne-form .rg-ohne-js {
    min-height: 2.25rem;
    padding: 0 0.625rem;
}

.rg-js .rg-ohne-js { display: none; }

/* Speicherleiste */
.rg-leiste {
    position: sticky;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    border-radius: 12px;
    background: var(--text);
    color: var(--surface);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.18);
}

.rg-leiste-text {
    display: flex;
    flex: 1 1 24rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.rg-leiste-titel {
    margin: 0;
    color: inherit;
    font-size: 1rem;
    font-weight: 700;
}

.rg-leiste ul {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-height: 4.5em; /* viele Änderungen: Liste scrollt, die Leiste verdeckt nicht den halben Bildschirm */
    overflow-y: auto;
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.9375rem;
}

.rg-leiste-warnung { color: var(--rg-warn); }

.rg-leiste-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rg-verwerfen {
    color: var(--surface);
    background: transparent;
    border-color: var(--surface);
}

.rg-speichern {
    color: var(--text);
    background: var(--surface);
    border-color: var(--surface);
}

.rg-leiste :focus-visible { outline-color: var(--surface); }

.rg-gespeichert {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-weight: 700;
    color: var(--success);
}

.rg-gespeichert:focus { outline: none; }

/* Deaktivierte Regionen */
.rg-deaktiviert {
    padding: 0 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rg-deaktiviert summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.rg-deaktiviert summary::-webkit-details-marker { display: none; }

.rg-chevron {
    flex: none;
    color: var(--text-2);
    transition: transform 0.15s;
}

.rg-deaktiviert[open] .rg-chevron { transform: rotate(90deg); }

.rg-deaktiviert ul {
    display: flex;
    flex-direction: column;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.rg-deaktiviert li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
}

.rg-traeger-inline { color: var(--text-2); }

/* Letzte Änderungen */
.rg-protokoll {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rg-protokoll-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.rg-protokoll h2 {
    margin: 0;
    font-size: 1.125rem;
}

.rg-protokoll-kopf a { font-size: 0.9375rem; }

.rg-protokoll ol {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rg-protokoll li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
}

.rg-zeit,
.rg-wer {
    font-family: var(--schrift-mono);
    font-size: 0.875rem;
    white-space: nowrap;
}

.rg-zeit { color: var(--text-2); }
.rg-wer { font-weight: 700; }

.rg-was {
    flex: 1 1 16rem;
    min-width: 0;
}

/* Das globale button:hover (Akzentfläche) gilt hier nicht; eigene Hover-Farben nur mit Maus */
.rg-pfeil:hover,
.rg-stift:hover {
    color: var(--rg-ink);
    background: transparent;
}

.rg-etikett-knopf:hover {
    color: var(--text-2);
    background: transparent;
}

.rg-etikett-knopf.ist-offen:hover {
    background: var(--accent-tint);
    color: var(--accent-ink);
}

.rg-ziel:hover,
.rg-plus:hover {
    color: var(--rg-ink);
    background: var(--surface);
    border-color: var(--rg-ink);
}

.rg-verwerfen:hover {
    color: var(--surface);
    background: transparent;
    border-color: var(--surface);
}

.rg-speichern:hover {
    color: var(--text);
    background: var(--surface);
    border-color: var(--surface);
}

.rg-deaktivieren[aria-disabled="true"]:hover {
    color: var(--text-2);
    background: var(--surface);
    border-color: var(--border-strong);
}

@media (hover: hover) {
    .rg-pfeil:not([aria-disabled="true"]):hover,
    .rg-stift:hover {
        background: var(--surface);
    }

    .rg-etikett-knopf:hover {
        background: var(--accent-tint);
        color: var(--accent-ink);
    }

    .rg-entfernen:hover {
        background: var(--danger-tint);
        color: var(--danger);
    }

    .rg-ziel:hover,
    .rg-plus:hover {
        background: var(--rg-tint);
    }

    .rg-verwerfen:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .rg-speichern:hover {
        background: var(--surface-2);
    }
}

/* Schmal (Tablet hoch, Handy): Kennzahlen unter dem Namen, Bezirke und Konten untereinander */
@container inhalt (max-width: 44em) {
    .rg-name,
    .rg-zahlen {
        flex: 1 1 100%;
    }

    .rg-spalten {
        flex-direction: column;
        padding: 1rem 1.25rem 1.25rem;
    }

    .rg-bezirke,
    .rg-konten {
        flex: none;
    }

    .rg-konten {
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
    }

    .rg-fuss { padding: 0.75rem 1.25rem; }
    .rg-fuss form { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .rg-chevron { transition: none; }
}

@media (forced-colors: active) {
    .rg-karte.rg-ziel-ablage { border-color: Highlight; }
    .rg-symbol { border: 1px solid CanvasText; }
    .rg-leiste { border: 2px solid CanvasText; }
}

/* Regionen: Finger und schmale Ansicht (Audit 09.10.2026, T11–T19) */
@media (pointer: coarse) {
    .rg-pfeil { height: 2.75rem; }
    .rg-griff { display: none; }
    .rg-etikett-knopf { width: 2.75rem; height: 2.75rem; }
    .rg .rg-auswahl-klein select,
    .rg-ohne-form .rg-ohne-js { height: 2.75rem; min-height: 2.75rem; }
    .rg-konten-kopf a,
    .rg-protokoll-kopf a { min-height: 2.75rem; }
}

/* Handy: Speicherleiste über der festen Navigation unten */
@container seite (max-width: 37.5em) {
    .rg-leiste { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
}

/* niedrige Fenster (Handy quer, starker Zoom): Leiste klebt nicht */
@media (max-height: 40em) {
    .rg-leiste { position: static; }
}

@container inhalt (max-width: 26em) {
    .rg-name { flex-wrap: wrap; }
    .rg-symbol { display: none; }
    .rg-name h2 { flex-basis: 8rem; }
}

/* Fokus nie unter der Speicherleiste (Höhe misst app.js) */
html:has(.rg-leiste) { scroll-padding-bottom: calc(var(--rg-leiste-hoehe, 8rem) + 6rem + env(safe-area-inset-bottom)); }

/* ---------- BAS-Lehrbetriebe (Entscheidung 182) ---------- */

.bas-seite .reiter { margin-bottom: 1rem; }

.bas-stand {
    margin: 0 0 1rem;
    color: var(--text-2);
}

.bas-stand .icon { margin-right: 0.375rem; vertical-align: -0.125em; }

.bas-kopf-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bas-notiz {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-2);
    font-size: 0.9375rem;
}

/* Detailseite: Stand der Liste unter den Fakten */
.sd-karte .bas-stand { margin: 1rem 0 0; font-size: 0.9375rem; }

/* Karte: Suche über der Karte, daneben (breit) die Orte als Liste */
.bas-kartensuche {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.bas-kartensuche .bas-suche { margin: 0; }

.bas-kartensuche-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

.bas-kartensuche-filter .feld { margin: 0; }

.bas-kartensuche-ort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin: 0;
}

.bas-karte-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.bas-seite .bas-karte {
    display: block;
}

.bas-karte .ue-karte-text p { max-width: 60em; }

.bas-orte h2 { margin-bottom: 0.5rem; }

.bas-orte-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bas-orte-liste a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.bas-orte-liste a:focus-visible { border-radius: 6px; }

.bas-orte-zahl {
    flex: none;
    min-width: 2rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--surface-2);
    font-weight: 700;
    text-align: center;
}

@media (hover: hover) {
    .bas-orte-liste a:hover { background: var(--surface-2); text-decoration: underline; }
}

@container inhalt (min-width: 72em) {
    .bas-karte-raster { grid-template-columns: minmax(0, 1fr) 18rem; }
    .bas-orte { position: sticky; top: calc(var(--kopf-hoehe, 8.5rem) + 1rem); max-height: calc(100vh - var(--kopf-hoehe, 8.5rem) - 2rem); overflow-y: auto; }
}

@media (max-height: 40em) {
    .bas-orte { position: static; max-height: none; }
}

/* Upload und Vorschau */
.bas-upload input[type="file"] {
    min-height: 2.75rem;
    padding: 0.5rem;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    font-size: 1rem;
    max-width: 100%;
}

.bas-tabelle { overflow-x: auto; }

.bas-vorschau-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.bas-vorschau-zahlen li {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-2);
}

.bas-vorschau-wert {
    display: block;
    color: var(--text);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.bas-vorschau-gruppe { border-top: 1px solid var(--border); }

.bas-vorschau-gruppe summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    font-weight: 700;
    cursor: pointer;
}

.bas-vorschau-zahl {
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--surface-2);
}

.bas-vorschau-liste {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.bas-vorschau-liste li { margin: 0.25rem 0; overflow-wrap: anywhere; }

.bas-vorschau-knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.bas-vorschau-knoepfe form { margin: 0; }

@media (forced-colors: active) {
    .etikett-bas,
    .bas-orte-zahl { border: 1px solid CanvasText; }
}

/* BAS-Betriebe in der Hauptnavigation nur ab Tablet; am Handy (Navigation unten, 5 Ziele) über den Reiter der Lehrstellen */
@container seite (max-width: 37.5em) {
    .hauptnavigation .nav-nur-breit { display: none; }
}

/* Farben je BAS-Mitarbeiterin (Entscheidungen 182/184/185): die ersten 16 Töne klar verschieden (Gelb, Lila, Orange, Hellblau,
   Rot, Beige, Grau, Grün, Rosa, Blau, Dunkeloliv, Türkis, Rotbraun, Hellgrün, Schwarz, Beere), danach Reserve. Schrift je Farbe
   schwarz oder weiß (≥ 4,5:1). Im Dunkelmodus werden die fast schwarzen Töne hell. */
.ma-0 { --ma: #F3C300; --ma-schrift: #000000; }
.ma-1 { --ma: #875692; --ma-schrift: #ffffff; }
.ma-2 { --ma: #F38400; --ma-schrift: #000000; }
.ma-3 { --ma: #A1CAF1; --ma-schrift: #000000; }
.ma-4 { --ma: #BE0032; --ma-schrift: #ffffff; }
.ma-5 { --ma: #C2B280; --ma-schrift: #000000; }
.ma-6 { --ma: #747472; --ma-schrift: #ffffff; }
.ma-7 { --ma: #008856; --ma-schrift: #ffffff; }
.ma-8 { --ma: #E68FAC; --ma-schrift: #000000; }
.ma-9 { --ma: #0067A5; --ma-schrift: #ffffff; }
.ma-10 { --ma: #2B3D26; --ma-schrift: #ffffff; }
.ma-11 { --ma: #007a7a; --ma-schrift: #ffffff; } /* dunkles Türkis: weiße Schrift (Nutzerin, 09.10.2026) */
.ma-12 { --ma: #882D17; --ma-schrift: #ffffff; }
.ma-13 { --ma: #8DB600; --ma-schrift: #000000; }
.ma-14 { --ma: #222222; --ma-schrift: #ffffff; }
.ma-15 { --ma: #B3446C; --ma-schrift: #ffffff; }
.ma-16 { --ma: #604E97; --ma-schrift: #ffffff; }
.ma-17 { --ma: #F99379; --ma-schrift: #000000; }
.ma-18 { --ma: #DCD300; --ma-schrift: #000000; }
.ma-19 { --ma: #654522; --ma-schrift: #ffffff; }
.ma-20 { --ma: #F6A600; --ma-schrift: #000000; }
.ma-21 { --ma: #c74d1e; --ma-schrift: #ffffff; }
.ma-22 { --ma: #FFB3D9; --ma-schrift: #000000; }
.ma-23 { --ma: #4b8228; --ma-schrift: #ffffff; }
:root[data-theme="dunkel"] .ma-10 { --ma: #a3c293; --ma-schrift: #000000; }
:root[data-theme="dunkel"] .ma-12 { --ma: #e8957f; --ma-schrift: #000000; }
:root[data-theme="dunkel"] .ma-14 { --ma: #d9d9d9; --ma-schrift: #000000; }
:root[data-theme="dunkel"] .ma-19 { --ma: #c9a27e; --ma-schrift: #000000; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .ma-10 { --ma: #a3c293; --ma-schrift: #000000; }
    :root:not([data-theme]) .ma-12 { --ma: #e8957f; --ma-schrift: #000000; }
    :root:not([data-theme]) .ma-14 { --ma: #d9d9d9; --ma-schrift: #000000; }
    :root:not([data-theme]) .ma-19 { --ma: #c9a27e; --ma-schrift: #000000; }
}
.etikett-ma { background: var(--ma); color: var(--ma-schrift); white-space: nowrap; }
.ma-sonstige { --ma: #6b7280; --ma-schrift: #ffffff; } /* „Sonstige“: neutrales Grau, 4,8:1 */

/* „Lehrstellen“ und „BAS §8b Pool“ heben sich in der Navigation farbig ab (Wunsch der Nutzerin, 09.10.2026) – Fläche und
   Rahmen rundum, kein Streifen am Rand; aktuell = volle Farbe */
@container seite (min-width: 37.5em) {
    .hauptnavigation .nav-stellen a { background: var(--blue-tint); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
    .hauptnavigation .nav-bas a { background: var(--violet-tint); color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); }
    .hauptnavigation .nav-stellen a[aria-current="page"] { background: var(--blue); color: var(--surface); }
    .hauptnavigation .nav-bas a[aria-current="page"] { background: var(--violet); color: var(--surface); }
    .hauptnavigation .nav-stellen a .nav-zahl,
    .hauptnavigation .nav-bas a .nav-zahl { color: inherit; }
}

@media (hover: hover) {
    .hauptnavigation .nav-stellen a:not([aria-current="page"]):hover { background: var(--surface); color: var(--blue); }
    .hauptnavigation .nav-bas a:not([aria-current="page"]):hover { background: var(--surface); color: var(--violet); }
}

@media (forced-colors: active) {
    .hauptnavigation .nav-stellen a,
    .hauptnavigation .nav-bas a { border: 1px solid CanvasText; }
}

.bas-handy-link { margin: 0 0 1rem; }
.bas-handy-link .knopf { background: var(--violet-tint); color: var(--violet); border-color: var(--violet); }
@container seite (min-width: 37.51em) {
    .bas-handy-link { display: none; }
}

/* Karte der BAS §8b Pool: ganze Breite, Legende der Mitarbeiterinnen über der Karte, Orte darunter in Spalten */
.bas-karte { margin-bottom: 1.25rem; }
.bas-karte-kopf h2 { margin-bottom: 0.375rem; }
.bas-karte-kopf p { margin: 0 0 0.75rem; max-width: 70em; }

.bas-legende ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.bas-legende a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.625rem 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.bas-legende a[aria-current="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }

@media (hover: hover) {
    .bas-legende a:hover { background: var(--surface-2); }
}

@media (pointer: coarse) {
    .bas-legende a { min-height: 2.75rem; }
}

.bas-legende-farbe {
    flex: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--ma);
    box-shadow: inset 0 0 0 1px var(--text);
}

.bas-legende-farbe.bas-ohne,
.bas-segment.bas-ohne { --ma: var(--border-strong); }

.bas-legende-zahl {
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--surface-2);
    font-family: var(--schrift-mono);
    font-weight: 400;
}

.bas-punkt .bas-grund { fill: #ffffff; stroke: #ffffff; stroke-width: 2.5; }
.bas-punkt .bas-segment { fill: var(--ma); stroke: #ffffff; stroke-width: 2; }
/* weißer Rand + weicher Schatten: Kreise wirken plastisch statt schwarz umrandet (Wunsch der Nutzerin, 09.10.2026) */
.bas-punkt { filter: drop-shadow(0 1.5px 2px rgba(17, 24, 39, 0.35)); }
.bas-punkt .bas-innen { fill: var(--surface); stroke: none; }
.bas-punkt .punkt-zahl { fill: var(--text); }
.ue-punktkarte .bas-punkt:focus-visible .bas-grund { stroke: var(--focus); stroke-width: 6; }

.bas-orte-liste {
    columns: 14rem auto;
    column-gap: 1.5rem;
}

.bas-orte-liste li { break-inside: avoid; }

@container inhalt (min-width: 72em) {
    .bas-orte { position: static; max-height: none; overflow: visible; }
}

/* BAS §8b Pool – Liste im neuen Aussehen (09.10.2026): Kennzahlen, große Suche, Firmen als Karten im Raster */
.bas-kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.bas-kennzahlen li {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.bas-kennzahlen li:first-child { background: var(--violet-tint); border-color: var(--violet); }
.bas-kennzahl-wert { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-family: var(--schrift-mono); }
.bas-kennzahlen li:first-child .bas-kennzahl-wert { color: var(--violet); }
.bas-kennzahl-text { color: var(--text-2); font-size: 0.9375rem; }

.bas-suche {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.bas-suche-feld {
    position: relative;
    flex: 1;
    min-width: 0;
}

.bas-suche-feld .icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    transform: translateY(-50%);
    color: var(--text-2);
    pointer-events: none;
}

.bas-suche-feld input {
    width: 100%;
    min-height: 3rem;
    padding-left: 2.75rem;
    border-radius: 12px;
    font-size: 1.0625rem;
}

.bas-suche button { min-height: 3rem; border-radius: 12px; padding-inline: 1.25rem; }

.bas-firmen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@container inhalt (min-width: 46em) {
    .bas-firmen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container inhalt (min-width: 82em) {
    .bas-firmen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bas-firma article {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: 1.125rem 1.25rem 1rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.bas-firma-archiv article { background: var(--surface-2); }

.bas-firma-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.bas-firma-name {
    margin: 0;
    font-size: 1.1875rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.bas-firma-name a { color: var(--text); text-decoration: none; }
.bas-firma-name a::after { content: " →"; color: var(--violet); }

@media (hover: hover) {
    .bas-firma article:hover { border-color: var(--violet); box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08); }
    .bas-firma-name a:hover { text-decoration: underline; }
    .bas-berufe a:hover { border-color: var(--violet); background: var(--violet-tint); }
}

.bas-firma-ort {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
    font-size: 1rem;
}

.bas-firma-ort .icon { flex: none; margin-top: 0.125rem; color: var(--violet); }
.bas-firma-bezirk { color: var(--text-2); }

.bas-berufe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bas-berufe a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.9375rem;
    text-decoration: none;
}

.bas-berufe a.bas-beruf-archiv { color: var(--text-2); border-style: dashed; }

@media (pointer: coarse) {
    .bas-berufe a { min-height: 2.75rem; }
}

.bas-beruf-zahl {
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--violet-tint);
    color: var(--violet);
    font-family: var(--schrift-mono);
    font-size: 0.8125rem;
    font-weight: 700;
}

.bas-firma .bas-notiz {
    display: flex;
    gap: 0.375rem;
    margin: 0;
    padding: 0.5rem 0.625rem;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.875rem;
}

.bas-firma .bas-notiz .icon { flex: none; margin-top: 0.125rem; }

.bas-firma-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.bas-firma-ma { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.bas-firma-eintraege { color: var(--text-2); font-size: 0.875rem; }
.bas-ohne-text { color: var(--text-2); font-size: 0.875rem; }

.bas-liste .liste-fuss { margin-top: 1.25rem; }

@media (forced-colors: active) {
    .bas-firma article, .bas-kennzahlen li, .bas-berufe a { border: 1px solid CanvasText; }
}

/* Detailseite eines Betriebs im BAS §8b Pool: Ort groß, Links zu Ort/Bezirk/Firma, weitere Lehrberufe */
.bas-detail-ort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: var(--violet-tint);
}

.bas-detail-frage { margin: 0; font-weight: 700; }

.bas-detail-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bas-detail-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--violet);
    font-weight: 700;
}

.bas-detail-berufe { margin-top: 1rem; }
.bas-detail-titel { margin: 0 0 0.5rem; font-size: 1rem; }

.bas-regeln-titel { margin: 1.5rem 0 0.375rem; font-size: 1rem; }
.bas-regeln { margin: 0; padding-left: 1.25rem; color: var(--text-2); }
.bas-regeln li { margin: 0.125rem 0; }

/* Detailseite: Ansprechperson (BAS-Mitarbeiterin) groß und farbig – sie ist der Kontakt zum Betrieb */
.bas-kontakt {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: var(--violet-tint);
}

.bas-kontakt-titel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 1.0625rem;
    color: var(--violet);
}

.bas-kontakt-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.bas-kontakt-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
}

.bas-kontakt-kuerzel .etikett-ma {
    padding: 0.375rem 0.875rem;
    border-radius: 10px;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bas-kontakt-liste a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--violet);
    font-weight: 700;
}

.bas-kontakt-text { margin: 0; color: var(--text); }
.bas-kontakt-text .etikett-ma { margin-right: 0.375rem; }

/* BAS §8b Pool: Umschalter Kacheln | Liste und Listenansicht als Tabelle (am Handy gestapelt) */
.bas-ansicht { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }
.bas-ansicht a { display: inline-flex; align-items: center; gap: 0.375rem; }

.bas-tabelle-firmen {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.bas-tabelle-firmen table { width: 100%; border-collapse: collapse; }

.bas-tabelle-firmen th,
.bas-tabelle-firmen td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.bas-tabelle-firmen thead th {
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.bas-tabelle-firmen tbody th { font-weight: 700; }
.bas-tabelle-firmen tbody th a { color: var(--text); }
.bas-tabelle-firmen tbody tr:last-child > * { border-bottom: 0; }
.bas-tabelle-firmen .bas-firma-archiv { background: var(--surface-2); }
.bas-tabelle-firmen .bas-zahl { font-family: var(--schrift-mono); text-align: right; }

@media (hover: hover) {
    .bas-tabelle-firmen tbody tr:hover { background: var(--violet-tint); }
}

.bas-berufe-text { margin: 0; padding: 0; list-style: none; }
.bas-berufe-text li + li { margin-top: 0.25rem; }
.bas-berufe-text a { color: var(--text); }

@container inhalt (max-width: 46em) {
    .bas-tabelle-firmen { overflow: visible; border: 0; background: transparent; }
    .bas-tabelle-firmen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .bas-tabelle-firmen table, .bas-tabelle-firmen tbody, .bas-tabelle-firmen tr, .bas-tabelle-firmen th, .bas-tabelle-firmen td { display: block; }
    .bas-tabelle-firmen tr { margin-bottom: 0.75rem; padding: 0.5rem 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
    .bas-tabelle-firmen th, .bas-tabelle-firmen td { border: 0; padding: 0.375rem 1rem; }
    .bas-tabelle-firmen td::before { content: attr(data-label); display: block; color: var(--text-2); font-size: 0.8125rem; font-weight: 700; }
    .bas-tabelle-firmen .bas-zahl { text-align: left; }
}
.bas-ansicht .segmente { margin: 0; list-style: none; }
.bas-ansicht .segmente li { list-style: none; }

/* Leiste „AMS Daten Update“: fällig deutlich (Rückfrage der Nutzerin, 09.10.2026) */
.ams-faellig { margin: 0.125rem 0 0.25rem; color: var(--text); }
.ams-faellig strong { color: var(--danger); }

/* Tabellenansicht BAS §8b Pool: mehr Luft (Wunsch der Nutzerin, 09.10.2026) */
.bas-tabelle-firmen { overflow-x: auto; }
.bas-tabelle-firmen th,
.bas-tabelle-firmen td { padding: 1rem 1.125rem; }
.bas-tabelle-firmen thead th { padding-block: 0.75rem; }
.bas-tabelle-firmen tbody td, .bas-tabelle-firmen tbody th { vertical-align: middle; }
.bas-tabelle-firmen tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.bas-tabelle-firmen tbody th { font-size: 1.0625rem; line-height: 1.35; min-width: 12rem; }
.bas-tabelle-firmen tbody th a { text-decoration: none; }
.bas-tabelle-firmen .bas-tab-ort-spalte { min-width: 10rem; }
.bas-tab-ort { display: block; font-weight: 700; }
.bas-tab-bezirk { display: block; margin-top: 0.125rem; color: var(--text-2); font-size: 0.875rem; }
.bas-berufe-klein { gap: 0.3125rem; }
.bas-berufe-klein a { min-height: 2rem; padding: 0.125rem 0.625rem; font-size: 0.875rem; }
.bas-zahl-badge { display: inline-block; min-width: 1.75rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--violet-tint); color: var(--violet); font-weight: 700; text-align: center; }
.bas-zahl-leer { color: var(--text-2); }
.bas-tabelle-firmen .status { margin-left: 0.375rem; }

@media (hover: hover) {
    .bas-tabelle-firmen tbody th a:hover { text-decoration: underline; }
}

@container inhalt (max-width: 46em) {
    .bas-tabelle-firmen tbody tr:nth-child(even) { background: var(--surface); }
}

/* lange Lehrberufe umbrechen statt über den Rand zu ragen (320 px mit A++) */
.bas-berufe li { max-width: 100%; }
.bas-berufe a { max-width: 100%; overflow-wrap: anywhere; }
.bas-ansicht .segmente { max-width: 100%; }

/* Detailansicht: Kürzel der Ansprechperson immer mit weißer Schrift (Wunsch der Nutzerin, 09.10.2026) – helle Farben
   bekommen dort einen dunkleren Ton desselben Farbtons, damit Weiß mindestens 4,5:1 erreicht. */
.ma-0 { --ma-tief: #8d7100; }
.ma-1 { --ma-tief: #875692; }
.ma-2 { --ma-tief: #af5f00; }
.ma-3 { --ma-tief: #617991; }
.ma-4 { --ma-tief: #be0032; }
.ma-5 { --ma-tief: #807554; }
.ma-6 { --ma-tief: #747472; }
.ma-7 { --ma-tief: #008856; }
.ma-8 { --ma-tief: #a16478; }
.ma-9 { --ma-tief: #0067a5; }
.ma-10 { --ma-tief: #2b3d26; }
.ma-11 { --ma-tief: #007a7a; }
.ma-12 { --ma-tief: #882d17; }
.ma-13 { --ma-tief: #637f00; }
.ma-14 { --ma-tief: #222222; }
.ma-15 { --ma-tief: #b3446c; }
.ma-16 { --ma-tief: #604e97; }
.ma-17 { --ma-tief: #a96452; }
.ma-18 { --ma-tief: #7b7600; }
.ma-19 { --ma-tief: #654522; }
.ma-20 { --ma-tief: #9d6a00; }
.ma-21 { --ma-tief: #c74d1e; }
.ma-22 { --ma-tief: #94687e; }
.ma-23 { --ma-tief: #4b8228; }
.ma-sonstige { --ma-tief: #6b7280; }
.bas-kontakt-kuerzel .etikett-ma, .bas-kontakt-text .etikett-ma { background: var(--ma-tief, var(--ma)); color: #ffffff; }

/* „BAS Lehrstelle §8b eintragen“: Hauptaktion im Kopf des BAS §8b Pool (Entscheidung 188) */
.knopf-bas-neu { background: var(--violet); border-color: var(--violet); color: var(--surface); }
@media (hover: hover) {
    .knopf-bas-neu:hover { background: color-mix(in srgb, var(--violet) 85%, #000); color: var(--surface); }
}

/* BAS-Formular: eigene Mitarbeiter*in fest (nur Redaktion/Admin wählen) */
.feld-label-text { display: block; margin-bottom: 0.375rem; font-weight: 700; }
.bas-ma-fest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0; }
.bas-ma-fest .etikett-ma { padding: 0.25rem 0.625rem; font-size: 1rem; }
.bas-ma-fest .hinweis { margin: 0; }

/* BAS §8b Pool: Lehrstelle vergeben (Zusage) grün wie „besetzt“ in der Lehrstellenliste (Entscheidung 189) */
.bas-firma-vergeben article { background: var(--success-tint); border-color: var(--success); }
.bas-tabelle-firmen tbody tr.bas-firma-vergeben,
.bas-tabelle-firmen tbody tr.bas-firma-vergeben:nth-child(even) { background: var(--success-tint); }
.bas-firma-kopf .status-besetzt { flex: none; }

/* Seite der*des Jugendlichen: Knöpfe je Eintrag kompakt statt über die ganze Breite; BAS-Lehrstellen mit eigenem Knopf
   zur Detailseite (Wunsch der Nutzerin, 09.10.2026) */
.chronik-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; }
.chronik-aktionen:empty { display: none; }
.chronik-aktionen > .knopf,
.chronik-aktionen > a { flex: 0 0 auto; width: auto; max-width: 100%; }
.chronik-aktionen .knopf-inserat { min-height: 2.75rem; padding: 0.25rem 1rem 0.25rem 0.75rem; }
.knopf-bas-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.25rem 1rem 0.25rem 0.75rem;
    border: 1.5px solid var(--violet);
    border-radius: var(--r-kachel);
    background: var(--violet-tint);
    color: var(--violet);
    font-weight: 700;
    text-decoration: none;
}
@media (hover: hover) {
    .knopf-bas-detail:hover { background: var(--violet); color: var(--surface); }
}
.knopf-stelle-detail {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.25rem 1rem 0.25rem 0.75rem;
    border: 1.5px solid var(--blue); border-radius: var(--r-kachel); background: var(--blue-tint); color: var(--blue); font-weight: 700; text-decoration: none;
}
@media (hover: hover) {
    .knopf-stelle-detail:hover { background: var(--blue); color: var(--surface); }
}

/* Detailseite: Chronik an 2. Stelle, darunter „Weitere Angaben“ (Wunsch der Nutzerin, 09.10.2026) */

/* BAS §8b Pool: gelöschter Betrieb (Konkurs u. ä.) */
.bas-geloescht { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.bas-geloescht > span { flex: 1 1 20rem; }
.bas-umfang { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.bas-umfang legend { font-weight: 700; margin-bottom: 0.5rem; }

/* Datumsfeld mit Kalender-Knopf (app.js) */
.datum-feld { position: relative; display: flex; align-items: stretch; gap: 0.5rem; }
.datum-feld > input[data-datum] { flex: 1 1 auto; min-width: 0; }
.datum-knopf {
    flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem;
    border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer;
}
@media (hover: hover) {
    .datum-knopf:hover { background: var(--surface-2); }
}
.datum-kalender { position: absolute; right: 0; bottom: 0; width: 2.75rem; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* BAS-Karte: Schild beim Überfahren mit zweiter Zeile (BAS-Mitarbeiterinnen), normale Schrift */
.punkt-schild .punkt-schild-zeile2 { font-weight: 400; }

/* ===== Detailseite V2 (Design-Übergabe „Detail V2“, det2.zip, 09.10.2026) – Lehrstelle und BAS-Lehrbetrieb =====
   Ein Template, Abstand zwischen den Blöcken 1rem, Karten-Innenabstand 1.25rem × 1.5rem. Petrol = Ort/Bedienung,
   Grün = positiv/Person (Status, Ansprechperson, „Mehr …“, Zusage), Rot nur Löschen. Keine farbigen Streifen links. */
.sd-raster { gap: 1rem; }
.sd-haupt { gap: 1rem; }
.sd-seite { flex: 1 1 21rem; }
@container seite (max-width: 58em) {
    .sd-seite { position: static; max-height: none; overflow: visible; }
}

/* Kopfkarte: eine Karte mit Balken, Kopf und Faktenzeile */
.sd-karte {
    padding: 0;
    overflow: hidden;
}
.sd-karte.sd-besetzt {
    background: var(--surface);
    border-color: var(--border);
}
.sd-besetzt-balken {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0.75rem 1.5rem;
    border-radius: 0;
    background: var(--success);
    color: #ffffff;
}
.sd-besetzt-balken .icon { flex: none; }
.sd-kopf {
    padding: 1.25rem 1.5rem;
    gap: 1rem 1.5rem;
}
.sd-besetzt .sd-kopf { background: var(--success-tint); }
.sd-kopf-text {
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sd-dach {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
}
.sd-titel {
    margin: 0;
    font-size: 1.75rem;
}
.sd-etiketten {
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}
.sd-ort {
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.25rem 0.875rem 0.25rem 0.625rem;
    border-radius: 8px;
    background: var(--accent);
    color: #ffffff;
}
.sd-ortname { font-size: 1.125rem; }
.sd-plz { font-size: 1rem; font-weight: 400; }
.sd-bezirk { font-size: 0.9375rem; }
.sd-status {
    min-height: 2rem;
    padding: 0 0.625rem;
    gap: 0.375rem;
    border-radius: 6px;
}
.sd-status-punkt {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}
.sd-status-besetzt { color: #ffffff; }
.sd-aktionen { gap: 0.5rem; }
.sd-aktionen .knopf,
.sd-aktionen a { white-space: nowrap; }
.sd-knopf-gefahr,
.sd-knopf-gefahr:link,
.sd-knopf-gefahr:visited {
    border: 1.5px solid var(--danger);
    color: var(--danger);
    background: var(--surface);
}
@media (hover: hover) {
    .sd-knopf-gefahr:hover { background: var(--danger-tint); color: var(--danger); }
}
.sd-kopf-hinweis { margin: 0 1.5rem 1rem; }

/* Faktenzeile: Trennlinie oben, Linien über gap auf --border */
.sd-fakten {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    margin: 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
}
.sd-fakten > div,
.sd-besetzt .sd-fakten > div {
    min-width: 0;
    padding: 0.75rem 1.5rem;
    background: var(--surface);
}
.sd-fakten dt { font-size: 0.8125rem; margin-bottom: 0.125rem; }
.sd-fakten dd { margin: 0; overflow-wrap: anywhere; }
.sd-fakten > .sd-fakt-breit { grid-column: 1 / -1; }
.sd-fakt-text { font-weight: 400; white-space: pre-line; }

/* Ansprechperson (BAS): eigener Block, grün getönt, ohne Rahmen */
.sd-ansprech {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    background: var(--success-tint);
}
.sd-ansprech-symbol {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--success);
    color: #ffffff;
}
.sd-ansprech-text {
    flex: 1 1 20rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.sd-ansprech h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}
.sd-ansprech-titel { color: var(--success); }
.sd-ansprech p { margin: 0; }
.sd-ansprech-links {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sd-ansprech-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    color: var(--success);
    font-weight: 700;
    font-size: 0.9375rem;
    white-space: nowrap;
    text-underline-offset: 3px;
}

/* Chronik */
.sd-chronik {
    padding: 1.25rem 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sd-chronik-kopf { align-items: center; }
.sd-chronik-kopf h2 { font-size: 1.125rem; }
.sd-anzahl { color: var(--text-2); }
.sd-statuszeile { color: var(--success); font-weight: 700; }
.sd-statuszeile:not(:empty) { margin: 0; }
.sd-leer {
    display: block;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-2);
}
.sd-liste { margin: 0; }
.sd-liste > li,
.sd-liste > li + li {
    gap: 0.25rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--border);
}
.sd-eintrag-kopf {
    align-items: baseline;
    gap: 0.125rem 0.625rem;
}
.sd-eintrag-kopf .typ {
    min-height: 1.5rem;
    padding: 0 0.4375rem;
    border-radius: 6px;
    font-size: 0.875rem;
}
.sd-eintrag-datum { font-size: 0.9375rem; white-space: nowrap; }
.sd-eintrag-wer { color: var(--text-2); font-size: 0.9375rem; }
.sd-eintrag-text { margin: 0.375rem 0 0; }
.sd-eintrag-aktionen { margin: -0.375rem -0.5rem -0.375rem 0; }
.sd-bearbeiten { color: var(--accent-ink); }
@media (hover: hover) {
    .sd-bearbeiten:hover { background: var(--accent-tint); color: var(--accent-ink); }
}

/* „Mehr …“: Zeile ohne Karte direkt auf dem Seitenhintergrund, darunter „Technische Angaben“ */
.sd-mehr {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sd-mehr-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
.sd-mehr h2,
.sd-mehr-titel {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--success);
}
.sd-mehr-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sd-mehr-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    max-width: 100%;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--accent-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
}
@media (hover: hover) {
    .sd-mehr-links a:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--text); }
}
.sd-mehr .sd-technik {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}
.sd-mehr .sd-technik summary { color: var(--text-2); }
.sd-mehr .sd-technik dl { margin: 0.25rem 0 0.75rem; font-size: 0.9375rem; gap: 0.25rem 1rem; }

/* Formular „Eintrag hinzufügen“: Karte mit Kopfband */
.sd-formular {
    padding: 0;
    overflow: hidden;
}
.sd-formular > h2 {
    margin: 0;
    padding: 0.875rem 1.25rem;
    font-size: 1.125rem;
    background: var(--accent-tint);
    color: var(--accent-ink);
    border-bottom: 1px solid var(--border);
}
.sd-formular-inhalt {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem 1.25rem 1.25rem;
}
.sd-form { gap: 0.875rem; }
.sd-wv-klapp { border: 0; border-radius: 0; }
.sd-wv-klapp summary { padding: 0; }
.sd-wv-klapp > .feld { padding: 0 0 0.25rem; }

@media (forced-colors: active) {
    .sd-ansprech,
    .sd-status { border: 1px solid CanvasText; }
}
.sd-form .feld { margin-bottom: 0; gap: 0.25rem; }
.sd-form .hinweis { font-size: 0.875rem; margin: 0; }
.sd-fakten .sd-fakt-text { font-weight: 400; }

/* ===== Audit 09.10.2026 (2) ===== */
/* Faktenzeile als Flex: keine leere Rasterzelle neben einer breiten Zeile (Nutzerin, 3.png), langer Lehrberuf bekommt Platz */
.sd-fakten {
    display: flex;
    flex-wrap: wrap;
}
.sd-fakten > div,
.sd-besetzt .sd-fakten > div {
    flex: 1 1 12rem;
}
.sd-fakten > div:first-child { flex-grow: 2; }
.sd-fakten > .sd-fakt-breit { flex-basis: 100%; }
.sd-fakten dd { overflow-wrap: break-word; hyphens: auto; }

/* Dunkel-Modus: Schrift auf --success ist --surface (Weiß auf hellem Grün wäre 1,8:1) */
.sd-besetzt-balken,
.sd-status-besetzt,
.sd-ansprech-symbol { color: var(--surface); }

/* Handy: Knöpfe und Status-Etiketten dürfen umbrechen, sonst schneidet die Karte sie ab */
@container seite (max-width: 37.49em) {
    .sd-aktionen .knopf,
    .sd-aktionen a,
    .sd-status { white-space: normal; max-width: 100%; }
    .sd-aktionen { width: 100%; }
    .sd-wv { white-space: normal; }
}
.sd-mehr-links a { overflow-wrap: anywhere; }
@media (pointer: coarse) {
    .sd-mehr-links a,
    .bas-berufe-klein a { min-height: 2.75rem; }
}

/* Sticky-Formular: ein gemeinsamer Grenzwert, darunter kein eigener Scrollbereich */
@container seite (max-width: 61em) {
    .sd-seite { position: static; max-height: none; overflow: visible; }
}

/* Erzwungene Farben: MA-Farben der Karte bleiben sichtbar */
@media (forced-colors: active) {
    .bas-segment,
    .bas-legende-farbe { forced-color-adjust: none; }
}

/* Karte: Orte klappbar (Nutzerin, 09.10.2026) */
.bas-orte-klapp > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    cursor: pointer;
    list-style: none;
}
.bas-orte-klapp > summary::-webkit-details-marker { display: none; }
.bas-orte-klapp > summary::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0.25rem 0 0.125rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}
.bas-orte-klapp[open] > summary::before { transform: rotate(45deg); }
.bas-orte-klapp > summary h2 { margin: 0; }
.bas-orte-klapp[open] > .bas-orte-liste { margin-top: 0.75rem; }
.sd-fakten > div,
.sd-besetzt .sd-fakten > div { flex-basis: min(100%, 12rem); }
@container seite (max-width: 37.49em) {
    .sd-fakten dd { overflow-wrap: anywhere; }
    .sd-fakten > div,
    .sd-besetzt .sd-fakten > div { padding-inline: 1rem; }
}
/* BAS-Karte: unsichtbare Trefferfläche, damit kleine Kreise am Tablet ≥ 24 px antippbar sind */
.bas-treffer { fill: transparent; }
.sd-haupt { grid-template-columns: minmax(0, 1fr); }
@container seite (max-width: 37.49em) {
    .sd-ansprech-links,
    .sd-ansprech-links a { max-width: 100%; }
    .sd-ansprech-links a { white-space: normal; }
}
.punkt circle.bas-treffer { fill: transparent; stroke: none; }
/* Impressum-Link (Nutzerin, 09.10.2026) */
.login-rechtliches { margin: 1rem 0 0; font-size: 0.9375rem; }
.login-rechtliches a,
.fuss a { display: inline-flex; align-items: center; min-height: 1.5rem; }
/* Impressum auf der Anmeldeseite: breit links unten mittig in der Farbfläche, klein (Nutzerin, 09.10.2026); schmal unter dem Formular */
.login-aside { position: relative; }
.login-aside-fuss {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5rem;
    margin: 0;
    text-align: center;
    font-size: 0.8125rem;
}
.login-rechtliches { font-size: 0.8125rem; text-align: center; }
/* Schmal: Impressum unter dem Formular statt daneben (Nutzerin, 09.10.2026) */
.login-mitte { flex-direction: column; }
@container seite (min-width: 56.25em) {
    .login-rechtliches { display: none; }
}
/* Impressum-Links ohne Unterstreichung (Nutzerin, 09.10.2026) */
.login-aside-fuss a,
.login-rechtliches a,
.fuss a { text-decoration: none; }
@media (hover: hover) {
    .login-aside-fuss a:hover,
    .login-rechtliches a:hover,
    .fuss a:hover { text-decoration: underline; }
}
/* Anmeldung schmal (Handy/Tablet hoch): Logo groß und mittig, Darstellung + Schrift kompakt in einer Zeile darunter (Nutzerin, 09.10.2026) */
@container seite (max-width: 56.24em) {
    .login-kopf { flex-direction: column; align-items: center; gap: 1.25rem; }
    .login-kopf .marke .logo { width: 15rem; max-width: 80%; height: auto; }
    .login-kopf .marke { justify-content: center; width: 100%; }
    .login-kopf .umschalter { margin-left: 0; justify-content: center; gap: 0.5rem; }
    .login-kopf .segmente button { padding: 0 0.625rem; font-size: 0.8125rem; min-width: 2.25rem; min-height: 2.5rem; }
    .login-kopf .segmente .schrift-125 { font-size: 0.9375rem; }
    .login-kopf .segmente .schrift-150 { font-size: 1.0625rem; }
    .login-mitte { padding-top: 1.5rem; }
}
@media (pointer: coarse) {
    @container seite (max-width: 56.24em) {
        .login-kopf .segmente button { min-height: 2.75rem; }
    }
}