/* ============================================================
   Move2Beruf – Backend (eingeloggter Bereich)
   Eigenständiges Design-System, bewusst ohne Bootstrap.

   Farbwelt: Schiefer als Basis, Stahlblau als einziger Akzent.
   Status ausschließlich über Grün / Bernstein / Rot. Die pinke
   Markenwelt der Website bleibt draußen – hier wird gearbeitet,
   oft lange und in Tabellen.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    /* Flächen */
    --bg:            #f1f5f9;
    --surface:       #ffffff;
    --surface-2:     #f8fafc;
    --surface-3:     #f1f5f9;
    --sidebar:       #1e293b;
    --sidebar-2:     #0f172a;

    /* Linien */
    --line:          #e2e8f0;
    --line-strong:   #cbd5e1;

    /* Text */
    --text:          #0f172a;
    --text-muted:    #475569;
    --text-subtle:   #64748b;
    --text-invert:   #f8fafc;

    /* Akzent */
    --accent:        #2563eb;
    --accent-hover:  #1d4ed8;
    --accent-soft:   #eff6ff;
    --accent-line:   #bfdbfe;

    /* Status */
    --ok:            #15803d;
    --ok-soft:       #f0fdf4;
    --ok-line:       #bbf7d0;
    --warn:          #b45309;
    --warn-soft:     #fffbeb;
    --warn-line:     #fde68a;
    --danger:        #b91c1c;
    --danger-hover:  #991b1b;
    --danger-soft:   #fef2f2;
    --danger-line:   #fecaca;

    /* Maße */
    --radius:        8px;
    --radius-lg:     12px;
    --sidebar-w:     248px;
    --topbar-h:      56px;
    /* Seitenabstand des Inhalts. Als Variable, weil .form-bar sie negativ
       spiegeln muss, um über die volle Breite zu klemmen. Startwert ist der
       fürs Handy; die Breakpoints weiter unten vergrößern ihn. */
    --gutter:        .9rem;

    --shadow-sm:     0 1px 2px rgba(15, 23, 42, .06);
    --shadow:        0 1px 3px rgba(15, 23, 42, .1), 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-lg:     0 10px 24px rgba(15, 23, 42, .12);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

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

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

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 200;
    background: var(--accent); color: #fff;
    padding: .6rem 1rem; font-weight: 600; text-decoration: none;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ============================================================
   App-Shell
   ============================================================ */
/* Mobile First: eine Spalte. Die Seitenleiste liegt als Schublade darüber und
   wird ab 901px zur festen Spalte (siehe Abschnitt „Breakpoints“ am Ende). */
.app {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

/* ---------- Seitenleiste ---------- */
/* Geschlossen per visibility:hidden aus dem Tab-Fluss genommen; ein reines
   translateX ließe die Links weiter fokussierbar. */
.sidebar {
    background: var(--sidebar);
    color: var(--text-invert);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, var(--sidebar-w));
    height: 100vh;
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s ease;
    box-shadow: var(--shadow-lg);
}
.sidebar.is-open { transform: none; visibility: visible; }

/* Abdunkelung hinter der offenen Schublade. */
.scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 50;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.scrim[hidden] { display: none; }

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    color: #fff;
    text-decoration: none;
    flex: none;
}
/* Das Logo ist dunkles Navy auf transparentem Grund und wäre auf der dunklen
   Seitenleiste unlesbar – deshalb auf heller Fläche. */
.sidebar__brand img {
    height: 30px;
    width: auto;
    display: block;
    background: #fff;
    padding: 5px 9px;
    border-radius: 6px;
    box-sizing: content-box;
}
.sidebar__brand-text { font-weight: 700; letter-spacing: -.01em; }

.sidebar__role {
    padding: .8rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    flex: none;
}
.sidebar__role-label {
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 700;
}
.sidebar__role-name {
    margin-top: .15rem;
    font-weight: 600;
    color: #e2e8f0;
    font-size: .95rem;
    overflow-wrap: anywhere;
}

.sidebar__nav {
    padding: .7rem .6rem 1.5rem;
    flex: 1 1 auto;
}
.sidebar__group {
    margin-top: 1.1rem;
    padding: 0 .55rem .35rem;
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 700;
}
.sidebar__group:first-child { margin-top: 0; }

.sidebar__link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .6rem;
    margin-bottom: 1px;
    border-radius: var(--radius);
    color: #cbd5e1;
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}
.sidebar__link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar__link[aria-current="page"] {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}
.sidebar__link svg { flex: none; opacity: .85; }
.sidebar__link[aria-current="page"] svg { opacity: 1; }
.sidebar__link .count {
    margin-left: auto;
    font-size: .75rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .14);
    padding: .05rem .4rem;
    border-radius: 999px;
}
.sidebar :focus-visible { outline-color: #fff; }

.sidebar__foot {
    padding: .8rem 1.15rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
    flex: none;
}
.sidebar__foot a {
    color: #94a3b8;
    text-decoration: none;
    font-size: .85rem;
    display: block;
    padding: .15rem 0;
}
.sidebar__foot a:hover { color: #fff; }

/* ---------- Kopfleiste ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 var(--gutter);
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar__toggle {
    display: inline-flex;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: .35rem .5rem;
    cursor: pointer;
    color: var(--text);
    line-height: 0;
}
.topbar__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar__spacer { margin-left: auto; }
.topbar__user {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .88rem;
    color: var(--text-muted);
}
/* Auf dem Handy steht nur das Kürzel; der ausgeschriebene Name kommt ab 561px
   dazu. Die Ausnahme für .topbar__avatar ist nötig, weil der sein display:grid
   zum Zentrieren braucht und eine Regel auf "span" ihn sonst überschreibt. */
.topbar__user > span:not(.topbar__avatar) { display: none; }
.topbar__avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .78rem;
    flex: none;
}

/* ============================================================
   Öffentliches Grundgerüst

   Für die Seiten, die es zweimal gibt: /teilnehmende-unternehmen und das
   öffentliche Unternehmensprofil. Angemeldet stecken sie im Backend-Rahmen
   oben, für Besucher in diesem hier. Der Inhalt dazwischen ist identisch –
   deshalb liegen beide Rahmen in derselben Datei.
   ============================================================ */
/* Doppelte Klasse mit Absicht: die Spaltenregel für .app im 901px-Block steht
   weiter unten in der Datei und würde eine einfache .app--public-Regel sonst
   überschreiben – der Inhalt landete dann in der 248px schmalen Spalte, in der
   sonst die Seitenleiste steht. */
.app.app--public {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
}

.pubbar {
    grid-column: 1 / -1;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem var(--gutter);
    position: sticky;
    top: 0;
    z-index: 30;
}
.pubbar__brand { flex: none; display: flex; align-items: center; text-decoration: none; }
.pubbar__brand img { height: 30px; width: auto; display: block; }

.pubbar__toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: .4rem .75rem;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    flex: none;
}
.pubbar__toggle:hover { background: var(--surface-3); }

/* Auf dem Handy fährt die Navigation als Schublade von rechts ein – dieselbe
   Mechanik wie die Seitenleiste im Backend, damit sich beides gleich anfühlt. */
.pubbar__nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(88vw, 320px);
    background: var(--sidebar);
    z-index: 60;
    padding: 1.1rem .9rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s ease;
    box-shadow: var(--shadow-lg);
}
.pubbar__nav.is-open { transform: none; visibility: visible; }
.pubbar__nav :focus-visible { outline-color: #fff; }

.pubbar__nav > a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    padding: .55rem .7rem;
    border-radius: var(--radius);
}
.pubbar__nav > a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.pubbar__nav > a[aria-current="page"] { background: var(--accent); color: #fff; font-weight: 600; }

.pubbar__actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.pubbar__actions .btn { width: 100%; }

.pubfoot {
    grid-column: 1 / -1;
    background: var(--sidebar);
    color: #94a3b8;
    padding: 1.5rem var(--gutter);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    font-size: .87rem;
}
.pubfoot__note { margin: 0; }
.pubfoot__links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.pubfoot__links a { color: #cbd5e1; text-decoration: none; }
.pubfoot__links a:hover { color: #fff; text-decoration: underline; }

/* ---------- Inhalt ---------- */
/* Bewusst ohne max-width: die Seiten sind Tabellen- und Kennzahlenansichten mit
   vielen Spalten, die von jeder verfügbaren Breite profitieren. Vorher stand hier
   eine Kappung auf 1320px ohne "margin: 0 auto" – der Inhalt klebte damit links
   und ließ auf breiten Bildschirmen den halben Platz rechts leer.
   Die Lesbarkeit der Fließtexte hängt nicht hieran: .page-head .lead, .fs__hint
   und .empty p bringen ihre eigene Zeilenlängenbegrenzung mit. */
.content {
    padding: 1.15rem var(--gutter) 4rem;
    width: 100%;
}

.page-head { margin-bottom: 1.5rem; }
.page-head__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-head h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
}
.page-head .lead {
    margin: .35rem 0 0;
    color: var(--text-muted);
    max-width: 68ch;
}

.breadcrumb {
    display: flex;
    gap: .4rem;
    align-items: center;
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    font-size: .82rem;
    color: var(--text-subtle);
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-subtle); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--line-strong); }

/* ============================================================
   Bausteine
   ============================================================ */

/* ---------- Karte ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 1.25rem; }
/* Im Raster sorgt bereits gap für den Abstand. Ohne diese Rücknahme bekäme die
   zweite Karte einer Zeile zusätzlich den Abstand von oben und stünde tiefer
   als ihre Nachbarin. Gilt für jedes Raster aus Karten, nicht nur für .grid:
   in der Unternehmensübersicht stand die erste Karte einer Zeile deshalb höher
   als alle anderen. */
.grid > .card + .card,
.firm-grid > .card + .card { margin-top: 0; }
.card__head {
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.card__title { font-size: 1rem; font-weight: 650; margin: 0; }
.card__hint { font-size: .85rem; color: var(--text-subtle); margin: .15rem 0 0; }
.card__body { padding: 1.15rem; }
.card__body--flush { padding: 0; }
.card__foot {
    padding: .85rem 1.15rem;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- Raster ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.grid--cards  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--2      { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* ---------- Kennzahl ---------- */
.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1rem 1.15rem;
    box-shadow: var(--shadow-sm);
}
.stat__label {
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.stat__value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: .25rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
/* Für Werte, die keine Zahl sind, sondern mehrere Marken – etwa die Uhrzeiten
   der angebotenen Zeitfenster. 1.9rem wäre dafür eine Überschrift. */
.stat__value--small {
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .4rem;
}
.stat__meta { font-size: .84rem; color: var(--text-muted); margin-top: .15rem; }
.stat--accent { border-left: 3px solid var(--accent); }
.stat--ok     { border-left: 3px solid var(--ok); }
.stat--warn   { border-left: 3px solid var(--warn); }
.stat--danger { border-left: 3px solid var(--danger); }

/* ---------- Schnellzugriff ---------- */
.tile {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.15rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.tile:hover {
    border-color: var(--accent-line);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
    color: inherit;
}
.tile__icon {
    width: 36px; height: 36px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
    margin-bottom: .7rem;
}
.tile__title { font-weight: 650; margin: 0 0 .2rem; }
.tile__text { margin: 0; color: var(--text-muted); font-size: .9rem; }

/* ---------- Knopf ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    padding: .55rem 1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); color: #fff; }
.btn--secondary {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--text);
}
.btn--secondary:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { background: var(--danger-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.btn--sm { font-size: .84rem; padding: .35rem .7rem; }
.btn--block { width: 100%; }
/* Auf dem Handy füllen die Knöpfe die Zeile, ab 561px behalten sie ihre
   natürliche Breite (siehe Breakpoints). */
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-row .btn { flex: 1 1 auto; }

/* ---------- Aktionsmenü ----------
   Ein Knopf statt einer Reihe von Knöpfen: die Aktionsspalte war die breiteste
   der Tabelle, obwohl sie am seltensten gebraucht wird.

   Die Liste hängt per position:fixed am Knopf und nicht absolut in der Zelle -
   .table-wrap scrollt waagerecht und schnitte sie sonst ab. Die Koordinaten
   setzt initMenus() in backend.js. */
.menu { display: inline-block; }
.btn--icon { padding: .35rem; }
.btn--icon svg { display: block; }
.menu__panel {
    position: fixed;
    z-index: 70;
    min-width: 12.5rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .3rem;
}
.menu__panel[hidden] { display: none; }
.menu__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .6rem;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
}
.menu__item:hover,
.menu__item:focus-visible { background: var(--accent-soft); color: #1e40af; }
.menu__item svg { flex: none; color: var(--text-subtle); }
.menu__item:hover svg,
.menu__item:focus-visible svg { color: inherit; }
.menu__label {
    padding: .35rem .6rem .15rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}
.menu__sep { height: 1px; background: var(--line); margin: .3rem .25rem; }

/* ---------- Status ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 650;
    padding: .12rem .5rem;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}
.badge--ok      { background: var(--ok-soft);     color: var(--ok);      border-color: var(--ok-line); }
.badge--warn    { background: var(--warn-soft);   color: var(--warn);    border-color: var(--warn-line); }
.badge--danger  { background: var(--danger-soft); color: var(--danger);  border-color: var(--danger-line); }
.badge--neutral { background: var(--surface-3);   color: var(--text-muted); border-color: var(--line-strong); }
.badge--accent  { background: var(--accent-soft); color: var(--accent);  border-color: var(--accent-line); }

/* ---------- Hinweis ---------- */
.notice {
    display: flex;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: 1.25rem;
    font-size: .92rem;
}
.notice svg { flex: none; margin-top: .1rem; }
.notice p { margin: 0; }
.notice p + p { margin-top: .4rem; }
.notice--info   { background: var(--accent-soft); border-color: var(--accent-line); color: #1e40af; }
.notice--ok     { background: var(--ok-soft);     border-color: var(--ok-line);     color: #14532d; }
.notice--warn   { background: var(--warn-soft);   border-color: var(--warn-line);   color: #78350f; }
.notice--danger { background: var(--danger-soft); border-color: var(--danger-line); color: #7f1d1d; }

/* ---------- Tabelle ---------- */
.table-wrap {
    overflow-x: auto;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
table.data th, table.data td {
    padding: .5rem .6rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
table.data thead th {
    background: var(--surface-2);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .nowrap { white-space: nowrap; }
table.data .shrink { width: 1%; white-space: nowrap; }
/* Knöpfe in einer Tabellenzeile stehen nebeneinander. Die Aktionsspalte ist auf
   ihre Inhaltsbreite geschrumpft; mit dem sonst üblichen Umbruch stapelten sich
   schon zwei Knöpfe untereinander und die Zeilenhöhen liefen auseinander.
   Wird die Tabelle dadurch zu breit, scrollt .table-wrap ohnehin waagerecht. */
table.data .btn-row { flex-wrap: nowrap; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable::after {
    content: "";
    display: inline-block;
    margin-left: .35rem;
    border: 4px solid transparent;
    vertical-align: middle;
    opacity: .3;
    border-top-color: currentColor;
    transform: translateY(2px);
}
th.sortable[aria-sort="ascending"]::after {
    opacity: 1;
    border-top-color: transparent;
    border-bottom-color: currentColor;
    transform: translateY(-2px);
}
th.sortable[aria-sort="descending"]::after { opacity: 1; }

/* Filterzeile über Tabellen */
.table-tools {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}
.table-tools input[type="search"] { min-width: 220px; }
.table-count { font-size: .85rem; color: var(--text-subtle); }

/* ---------- Leerzustand ---------- */
.empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
}
.empty__icon {
    width: 48px; height: 48px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-subtle);
    display: grid;
    place-items: center;
}
.empty h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--text); }
.empty p { margin: 0 auto; max-width: 46ch; }
.empty .btn-row { justify-content: center; margin-top: 1.2rem; }

/* ============================================================
   Formulare
   ============================================================ */
fieldset.fs {
    border: 0;
    padding: 0;
    margin: 0 0 1.75rem;
    min-width: 0;
}
fieldset.fs:last-of-type { margin-bottom: 0; }
fieldset.fs > legend {
    font-size: .95rem;
    font-weight: 700;
    padding: 0;
    margin-bottom: .25rem;
}
.fs__hint {
    font-size: .88rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
    max-width: 72ch;
}

.field { margin-bottom: 1rem; }
.field > label,
.field-label {
    display: block;
    font-size: .87rem;
    font-weight: 600;
    margin-bottom: .3rem;
}
.field .req { color: var(--danger); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field input[type="password"],
.field input[type="search"],
.field input[type="date"],
.field select,
.field textarea,
input.inp, select.inp, textarea.inp {
    width: 100%;
    font-family: inherit;
    font-size: .93rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: .5rem .65rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #94a3b8; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.field input:disabled, .field select:disabled, .field textarea:disabled {
    background: var(--surface-3);
    color: var(--text-subtle);
    cursor: not-allowed;
}
.field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    padding-right: 2.1rem;
}
/* Erklärender Kleintext. Die Klasse wird auch außerhalb eines Feldes benutzt
   (Unternehmensliste, Profilseite) – bisher war sie nur innerhalb von .field
   definiert und blieb dort ohne Wirkung. */
.hint { font-size: .82rem; color: var(--text-subtle); margin: .3rem 0 0; }
.field .hint { font-size: .82rem; color: var(--text-subtle); margin: .3rem 0 0; }
.field .error { display: none; font-size: .84rem; font-weight: 600; color: var(--danger); margin: .3rem 0 0; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--danger); background: var(--danger-soft); }
.field.is-invalid .error { display: block; }

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0 1rem;
}
.field-row--tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }

/* Kontrollkästchen / Optionsfelder */
.check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .55rem;
}
.check input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .2rem; accent-color: var(--accent); }
.check label { font-size: .92rem; margin: 0; font-weight: 500; }
.check .hint { margin: .1rem 0 0; }

.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 0 1rem;
}

/* ---------- Formularseite mit Nebenspalte ----------
   Links die Eingaben, rechts der Zugang selbst. Ohne die Nebenspalte stünde ein
   Formular mit vier kurzen Feldern auf einem breiten Monitor in einer einzigen
   Spalte und der halbe Bildschirm bliebe leer. Unter 1100px fällt die
   Nebenspalte unter die Hauptspalte – gestapelt ist sie schmal unbrauchbar. */
.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.form-layout__main { min-width: 0; }
.form-layout__side { min-width: 0; }
/* Die Karten beider Spalten stapeln mit gleichem Abstand. */
.form-layout__main > .card + .card,
.form-layout__side > .card + .card { margin-top: 1.25rem; }

/* ---------- Rollenauswahl ----------
   Kachel je Rolle mit Piktogramm. Das Kontrollkästchen selbst ist ausgeblendet;
   sichtbarer Zustand sind Rahmen, Fläche und das Häkchen oben rechts. Die
   Kachel bleibt ein echtes <label> zum <input>, damit Tastatur und
   Screenreader unverändert funktionieren. */
.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: .75rem;
}
.role-card { position: relative; }
.role-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.role-card label {
    display: block;
    position: relative;
    height: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: .95rem 1rem 1rem;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.role-card label:hover { border-color: #94a3b8; box-shadow: var(--shadow-sm); }

.role-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--surface-3);
    color: var(--text-muted);
    margin-bottom: .7rem;
    transition: background .12s ease, color .12s ease;
}
.role-card__title {
    display: block;
    font-weight: 650;
    font-size: .95rem;
    padding-right: 1.5rem;
}
.role-card__text {
    display: block;
    margin-top: .2rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Häkchen oben rechts – zusätzlich zur Farbe, damit die Auswahl nicht allein
   über den Farbton erkennbar ist. */
.role-card__check {
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: transparent;
    display: grid;
    place-items: center;
    line-height: 0;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.role-card input:checked + label {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.role-card input:checked + label .role-card__icon { background: var(--accent); color: #fff; }
.role-card input:checked + label .role-card__text { color: #1e40af; }
.role-card input:checked + label .role-card__check {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.role-card input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Zugangskarte in der Nebenspalte ---------- */
.idcard__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.15rem 1.15rem 1rem;
    border-bottom: 1px solid var(--line);
}
.idcard__avatar {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
}
.idcard__who { min-width: 0; }
.idcard__name {
    margin: 0;
    font-weight: 650;
    font-size: 1rem;
    overflow-wrap: anywhere;
}
.idcard__meta {
    margin: .1rem 0 0;
    font-size: .85rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* Schmalere Beschriftungsspalte als die Standard-Definitionsliste: in der
   340px-Nebenspalte bliebe für den Wert sonst kaum Platz. */
.dl--compact .dl__row { grid-template-columns: minmax(90px, 40%) 1fr; }

/* ============================================================
   Unternehmensliste (öffentlich und im Backend dieselbe)
   ============================================================ */
/* auto-fill statt auto-fit: bei nur einem Unternehmen bleibt die Karte in
   normaler Breite stehen, statt sich über den ganzen Bildschirm zu ziehen. */
.firm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 1rem;
    /* Gleiche Höhe je Zeile: die Karten unterscheiden sich in der Zahl der
       Angebote, und mit unterschiedlich hohen Karten stand der Knopf „Mehr
       erfahren“ in jeder Karte woanders. */
    align-items: stretch;
}
.firm {
    display: flex;
    flex-direction: column;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.firm:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.firm[hidden] { display: none; }

.firm__head {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 1.15rem .9rem;
}
.firm__logo {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--line);
}
.firm__logo--leer {
    display: grid;
    place-items: center;
    color: var(--text-subtle);
}
.firm__who { min-width: 0; }
.firm__name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.firm__addr {
    margin: .2rem 0 0;
    font-size: .87rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.firm__body { padding: 0 1.15rem .2rem; flex: 1 1 auto; }
.firm__offers {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    font-size: .88rem;
}
.firm__offers li { display: inline-flex; align-items: center; gap: .35rem; }
.firm__offers svg { color: var(--accent); flex: none; }
.firm__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }
/* Nur hier: .badge steht global auf nowrap, was für kurze Statusplaketten
   richtig ist. Berufsnamen sind aber lang („Fachinformatiker:in
   Anwendungsentwicklung“) und ragten damit auf dem Handy aus der Karte. */
.firm__tags .badge {
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
}

/* ---------- Ausbildungsberufe in der Unternehmenskarte ----------
   Eigene Überschrift, weil darunter Berufsnamen stehen und darunter noch die
   Sprachen: zwei Reihen gleich aussehender Plaketten ohne Beschriftung waren
   nicht auseinanderzuhalten. */
.firm__jobs { margin-top: .8rem; }
.firm__jobs-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.firm__jobs .firm__tags { margin-top: .3rem; }

/* ---------- Zeitfenster in der Unternehmenskarte ----------
   Zwei feste Spalten und nicht auto-fit: der Aktionstag hat vier Fenster, und
   als 2x2 stehen sie in jeder Kartenbreite gleich. Mit auto-fit brach die
   Reihe je nach Kartenbreite anders um, und die Karten einer Zeile waren
   unterschiedlich hoch.

   Die Klassen hießen früher wie die Zeitfenster-Zeilen des Standortformulars
   und wurden von ihnen überschrieben - die Kacheln landeten dadurch in einem
   dreispaltigen Raster und brachen Wort für Wort um. Das Formular hat jetzt
   eigene Klassen (.cap…). */
.slots__label {
    display: block;
    padding: .9rem 1.15rem 0;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    padding: .5rem 1.15rem .9rem;
}
.slot {
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: .5rem .6rem;
    font-size: .82rem;
    color: var(--text-subtle);
    min-width: 0;
}
.slot__time {
    display: block;
    font-weight: 650;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.slot__state { display: block; margin-top: .15rem; }
/* Der Zusatz am letzten Zeitfenster: es liegt nach Schulschluss und ist deshalb
   auch für Eltern offen. */
.slot__eltern {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--accent);
}
.slot--frei {
    background: var(--ok-soft);
    border-color: var(--ok-line);
    border-left-color: var(--ok);
    color: var(--ok);
}
.slot--frei .slot__time { color: var(--ok); }
.slot--voll {
    background: var(--warn-soft);
    border-color: var(--warn-line);
    border-left-color: var(--warn);
    color: var(--warn);
}
.slot--voll .slot__time { color: var(--warn); }

.firm__foot {
    padding: 0 1.15rem 1.1rem;
    display: flex;
    justify-content: flex-end;
}
.firm__foot .btn { flex: 1 1 auto; }

/* ---------- Einstieg für Betriebe am Fuß der Übersicht ----------
   Auf dem Handy untereinander, ab 640px Text links und Knopf rechts. Der Knopf
   wächst dabei nicht mit: über die halbe Bildschirmbreite gezogen sieht er aus
   wie ein Formularfeld. */
.join { display: grid; gap: 1rem; }
.join__title { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 650; }
.join__text { color: var(--text-muted); max-width: 80ch; }
.join .btn { justify-self: start; }
@media (min-width: 640px) {
    .join {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    .join .btn { justify-self: end; }
}

/* ---------- Rechtekacheln ---------- */
.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: .75rem;
}
.right-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: .8rem .9rem .7rem;
}
.right-card__title { margin: 0; font-weight: 600; font-size: .92rem; }
.right-card__name {
    margin: .1rem 0 .6rem;
    font-size: .78rem;
    color: var(--text-subtle);
    overflow-wrap: anywhere;
}
.right-card__opts {
    display: flex;
    gap: 1.1rem;
    padding-top: .6rem;
    border-top: 1px solid var(--line);
}

/* Kontrollkästchen mit Beschriftung als eine anklickbare Einheit. */
.tick {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .87rem;
    font-weight: 500;
    cursor: pointer;
}
.tick input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent);
    cursor: pointer;
    flex: none;
}

/* Merkliste in der Nebenspalte */
.notes {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.notes li + li { margin-top: .5rem; }

/* Auswahlkacheln (z.B. Angebotsarten) */
.opt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: .75rem;
}
.opt-card { position: relative; }
.opt-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.opt-card label {
    display: block;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: .7rem .85rem;
    cursor: pointer;
    font-weight: 500;
    transition: border-color .12s ease, background .12s ease;
}
.opt-card label:hover { border-color: #94a3b8; }
.opt-card input:checked + label {
    border-color: var(--accent);
    background: var(--accent-soft);
    font-weight: 600;
}
.opt-card input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt-card__title { display: block; font-weight: 650; }
.opt-card__text {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    font-weight: 400;
    color: var(--text-muted);
}
.opt-card input:checked + label .opt-card__text { color: #1e40af; }

/* Etiketten-Eingabe (Sprachen, Ausbildungsberufe) */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--accent-soft);
    color: #1e40af;
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    padding: .15rem .3rem .15rem .65rem;
    font-size: .85rem;
    font-weight: 600;
}
.tag button {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    line-height: 0;
    padding: .2rem;
    border-radius: 50%;
    opacity: .65;
}
.tag button:hover { opacity: 1; background: rgba(30, 64, 175, .12); }

.combo { position: relative; }
.combo__list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 2px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
    margin: 0; padding: .25rem;
    list-style: none;
}
.combo__list[hidden] { display: none; }
.combo__list li {
    padding: .4rem .55rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .92rem;
}
.combo__list li:hover,
.combo__list li[aria-selected="true"] { background: var(--accent-soft); color: #1e40af; }
.combo__empty { padding: .5rem .55rem; color: var(--text-subtle); font-size: .9rem; }

/* ============================================================
   Kapazitäten am Standort (/verwaltung/standorte/…)

   Vorher vier Zeilen mit Häkchen links und einem Zahlenfeld ganz
   rechts am Bildschirmrand: Betriebe sahen nicht, was sie insgesamt
   anbieten, und die Zahl gehörte optisch zu nichts. Jetzt vier
   Kacheln mit Schalter, Plus/Minus und einem Balken, der die
   Verteilung über den Tag zeigt.

   Eigene Klassen (.cap…) und nicht die .slot-Klassen der öffentlichen
   Übersicht: die beiden Bausteine hießen gleich und überschrieben
   sich gegenseitig - die Kacheln der Übersicht wurden dadurch in ein
   dreispaltiges Raster gezwängt und brachen Wort für Wort um.
   ============================================================ */
.caps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: .75rem;
}
.cap {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: .8rem .9rem .9rem;
    transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.cap--on {
    background: var(--accent-soft);
    border-color: var(--accent-line);
}
.cap__head { display: flex; align-items: flex-start; gap: .55rem; }
.cap__switch { flex: none; margin-top: .15rem; }
.cap__title { display: block; font-weight: 650; font-size: .95rem; cursor: pointer; }
.cap__time {
    display: block;
    font-size: .84rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.cap__note {
    display: inline-block;
    margin-top: .3rem;
    font-size: .72rem;
    font-weight: 650;
    color: var(--accent);
}
.cap__body { margin-top: .7rem; }
.cap[data-off] .cap__body { opacity: .45; }
.cap__label {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: .3rem;
}

/* Plus/Minus statt nur eines Zahlenfeldes: die Betriebe tragen ihre
   Plätze am Handy ein, und dort ist der Drehregler eines number-Feldes
   nicht zu treffen. */
.stepper { display: flex; align-items: center; gap: .35rem; }
.stepper__btn {
    flex: none;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.stepper__btn:hover:not(:disabled) { background: var(--surface-3); }
.stepper__btn:disabled { opacity: .4; cursor: not-allowed; }
.stepper input {
    width: 4.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    /* Die Pfeilchen des Browsers stören neben eigenen Knöpfen. */
    -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Der Balken zeigt, wie sich die Plätze über den Tag verteilen. */
.cap__bar {
    margin-top: .6rem;
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}
.cap__bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.cap[data-off] .cap__bar i { background: var(--line-strong); }

.caps__sum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1rem;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}
.caps__sum b { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.caps__sum span { color: var(--text-muted); font-size: .9rem; }

/* ============================================================
   Bilder eines Standorts
   ============================================================ */
.locimg {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
    gap: .75rem;
}
.locimg__item {
    position: relative;
    /* figure bringt vom Browser 40px Außenabstand links und rechts mit - im
       Raster blieb davon eine Spalte übrig, die kaum breiter war als das Bild. */
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
}
.locimg__item img {
    display: block;
    width: 100%;
    height: 118px;
    object-fit: cover;
}
.locimg__bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .5rem;
    font-size: .78rem;
    color: var(--text-subtle);
}
.locimg__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.locimg__bar .btn { flex: none; }
/* Gelöscht wird beim Speichern, nicht sofort: ein versehentlicher Klick
   ist so noch mit „Abbrechen“ zurückzunehmen. */
.locimg__item[data-remove] { opacity: .45; }
.locimg__item[data-remove] img { filter: grayscale(1); }
.locimg__drop {
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 1.1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .9rem;
}
.locimg__drop.is-over { border-color: var(--accent); background: var(--accent-soft); }

/* Adressvorschläge von Google */
.gplace { position: relative; }
.gplace__status {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
    font-size: .85rem;
}
.gplace__status--ok { color: var(--ok); }
.gplace__status--warn { color: var(--warn); }
.gplace__status--busy { color: var(--text-subtle); }

/* ============================================================
   Öffentliches Unternehmensprofil (/unternehmen/{slug})

   Eigene Bausteine, weil die Seite als einzige einen Steckbrief
   zeigt: Kopf mit Logo, die vier Zeitfenster als Buchungskacheln
   und eine Bildergalerie. Alles darunter sind die gewohnten
   Karten, Etiketten und Knöpfe.
   ============================================================ */

.profil {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.15rem;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.15rem;
    margin-bottom: 1.25rem;
}
.profil__logo {
    width: 84px;
    height: 84px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    overflow: hidden;
    color: var(--text-subtle);
}
.profil__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.profil__who { min-width: 0; }
.profil__who h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 0 0 .35rem;
    overflow-wrap: anywhere;
}
.profil__addr {
    display: flex;
    gap: .45rem;
    align-items: start;
    margin: 0;
    color: var(--text-muted);
    font-size: .92rem;
}
.profil__addr svg { flex: none; margin-top: .15rem; color: var(--text-subtle); }
.profil__angebote {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    list-style: none;
    margin: .8rem 0 0;
    padding: 0;
    font-size: .88rem;
    color: var(--text-muted);
}
.profil__angebote li { display: inline-flex; align-items: center; gap: .35rem; }
.profil__angebote svg { color: var(--accent); flex: none; }
/* Die Knöpfe stehen auf dem Handy unter dem Namen und rücken erst auf
   breiten Schirmen in die rechte Spalte – siehe Breakpoint unten. */
.profil__tun {
    grid-column: 1 / -1;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.profil__tun:empty { display: none; }

/* ---------- Zeitfenster ---------- */
.zeitfenster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: .8rem;
}
/* Bewusst .zeit und nicht .slot: .slot gibt es in dieser Datei schon zweimal
   (Kachel in der Firmenliste, Zeile im Profilformular). Ein dritter Sinn für
   denselben Namen würde beide Bestandsseiten mitreißen. */
.zeit {
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: .8rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.zeit__uhr { font-weight: 650; margin: 0; font-variant-numeric: tabular-nums; }
.zeit__stand { margin: 0; font-size: .88rem; color: var(--text-muted); }
/* „offen für Eltern“ am letzten Zeitfenster – es liegt nach Schulschluss, damit
   Familien gemeinsam kommen können. */
.zeit__eltern {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--accent);
}
.zeit__tun { margin-top: .6rem; }
.zeit__hinweis { margin: 0; font-size: .82rem; color: var(--text-subtle); }
.zeit--frei { border-left-color: var(--ok); background: var(--ok-soft); }
.zeit--frei .zeit__stand { color: var(--ok); }
.zeit--voll { border-left-color: var(--warn); background: var(--warn-soft); }
.zeit--voll .zeit__stand { color: var(--warn); }
.zeit--zu { opacity: .75; }

/* ---------- Fließtext aus Formularfeldern ---------- */
/* Der Text stammt aus einem <textarea>. Die Umbrüche darin bleiben erhalten,
   ohne dass sie serverseitig in <br> übersetzt werden müssten – genau das war
   der Grund, warum die Beschreibung früher als ungeprüftes HTML ausgegeben
   wurde. */
.fliesstext { white-space: pre-line; overflow-wrap: anywhere; }

.kontakt__name { font-weight: 650; margin: 0 0 .6rem; }

.liste { margin: 0; padding-left: 1.1rem; }
.liste li + li { margin-top: .3rem; }

/* ---------- Website und Netzwerke ---------- */
/* auto-fill statt auto-fit: bei zwei oder drei Netzwerken bleiben die Kacheln
   handlich, statt sich über die ganze Breite zu ziehen. */
.linkgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
    gap: .6rem;
}
.linkkachel {
    display: block;
    text-align: center;
    padding: .7rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
}
.linkkachel:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }

/* ---------- Bild in groß ---------- */
.lupe {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(94vw, 1100px);
    max-height: 92vh;
    overflow: visible;
}
.lupe::backdrop { background: rgba(15, 23, 42, .82); }
.lupe img {
    display: block;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius);
}
.lupe__zu {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: .3rem;
    cursor: pointer;
    line-height: 0;
}
.lupe__zu:hover { background: var(--danger); }

/* Bilder */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .8rem;
}
.media {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-3);
    aspect-ratio: 4 / 3;
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bilder, die ohne Kachel direkt im Raster stehen - die Vorschau zeigt sie an,
   ohne dass man sie vergrößern kann. */
.media-grid > img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-3);
}
/* Auf der Profilseite sind die Kacheln Knöpfe: das Bild lässt sich vergrößern.
   Der Browserstil eines <button> (Rand, Innenabstand, Systemschrift) muss dafür
   weg, das Aussehen kommt komplett von .media. */
button.media { padding: 0; cursor: zoom-in; font: inherit; color: inherit; }
.media-grid--klein { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.media__del {
    position: absolute;
    top: .35rem; right: .35rem;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: .25rem .35rem;
    cursor: pointer;
    line-height: 0;
}
.media__del:hover { background: var(--danger); }
.media--drag { cursor: grab; }
.media.is-dragging { opacity: .4; }
.media.is-over { outline: 2px dashed var(--accent); outline-offset: -2px; }

.logo-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.logo-box__preview {
    width: 130px; height: 90px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-3);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: none;
}
.logo-box__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-box__preview span { color: var(--text-subtle); font-size: .82rem; }

/* Datei-Auswahl */
input[type="file"] {
    font-size: .88rem;
    max-width: 100%;
}
input[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    padding: .4rem .8rem;
    margin-right: .7rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--surface-3); }

/* Klebeleiste zum Speichern */
.form-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, .06);
    padding: .8rem var(--gutter);
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    /* Spiegelt den Seitenabstand von .content, damit die Leiste bündig über die
       volle Breite läuft. Deshalb ist --gutter eine Variable. */
    margin: 1.5rem calc(-1 * var(--gutter)) -4rem;
}
.form-bar__status { font-size: .87rem; color: var(--text-subtle); margin-right: auto; }

/* ---------- Abschnittsnavigation im Formular ---------- */
.formnav {
    display: flex;
    gap: .3rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}
.formnav a {
    padding: .55rem .85rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.formnav a:hover { color: var(--text); }
.formnav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Beschreibungsliste ---------- */
.dl { margin: 0; }
.dl__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--line);
}
.dl__row:last-child { border-bottom: 0; }
.dl dt { color: var(--text-subtle); font-size: .88rem; }
.dl dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Vorschau des Unternehmensprofils ----------
   Die Seite zeigt die öffentliche Seite selbst. Damit trotzdem jederzeit klar
   ist, was Rahmen und was Bühne ist, bekommt die Bühne eine eigene Fläche in der
   Hintergrundfarbe der öffentlichen Seite und eine Leiste mit deren Adresse –
   dieselbe Trennung, die ein Browserfenster im Screenshot leistet. */
.buehne {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--bg);
    /* Kräftiger als --shadow-lg: die Bühne trägt dieselbe Hintergrundfarbe wie
       die Seite darum – ohne den Schatten verschwämme die Grenze. */
    box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
    overflow: hidden;
}
.buehne__leiste {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
/* Drei Punkte wie an einem Fenster: reine Zutat, deshalb aria-hidden. */
.buehne__punkte { display: none; gap: .3rem; flex: none; }
.buehne__punkte i {
    width: 9px; height: 9px;
    border-radius: 999px;
    background: var(--line-strong);
    display: block;
}
.buehne__adresse {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: .18rem .6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--text-muted);
    /* Lange Slugs kürzen statt die Leiste zu sprengen. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.buehne__adresse a { color: var(--text-muted); text-decoration: none; }
.buehne__adresse a:hover { color: var(--accent); text-decoration: underline; }

/* Der Seitenabstand entspricht dem von .content – die eingebundene Seite bringt
   ihren eigenen nicht mit, weil ihr <main> außerhalb des Fragments bleibt.
   overflow-x: die Bühne klemmt ihre Ecken mit overflow:hidden ab; ohne diese
   Zeile würde etwas Überbreites dort still abgeschnitten statt zu rollen. */
.buehne__blatt { padding: 1.15rem var(--gutter) 2rem; overflow-x: auto; }

/* ---------- Freigabestand in der Vorschau ---------- */
.stand {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
.stand__marken { display: flex; flex-wrap: wrap; gap: .4rem; }
.fehlt {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .9rem;
}
.fehlt li { display: flex; align-items: center; gap: .45rem; }
.fehlt svg { color: var(--warn); flex: none; }

/* ---------- Fortschritt ---------- */
.bar {
    height: 7px;
    background: var(--surface-3);
    border-radius: 999px;
    overflow: hidden;
}
.bar__fill { height: 100%; background: var(--accent); border-radius: 999px; }
.bar__fill--ok { background: var(--ok); }
.bar__fill--warn { background: var(--warn); }
.bar__fill--danger { background: var(--danger); }

/* ---------- Dialog ---------- */
dialog.modal {
    border: 0;
    border-radius: var(--radius-lg);
    padding: 0;
    max-width: 520px;
    width: calc(100% - 2rem);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}
dialog.modal::backdrop { background: rgba(15, 23, 42, .45); }
dialog.modal .card__head,
dialog.modal .card__body,
dialog.modal .card__foot { border-radius: 0; }
dialog.modal .card__foot { justify-content: flex-end; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ---------- Hilfsklassen ---------- */
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: .86rem; }
.mono { font-family: var(--font-mono); font-size: .88em; }
.right { text-align: right; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.hidden { display: none !important; }

/* ============================================================
   Reaktionsfähig
   ============================================================ */
/* Ab hier wird aus der Handy-Ansicht Schritt für Schritt die große. Jeder Block
   fügt nur hinzu, was der zusätzliche Platz hergibt – nichts wird
   zurückgenommen, was weiter oben für kleine Bildschirme steht. */

/* ---------- ab 561px: mehr Luft, Knöpfe in natürlicher Breite ---------- */
@media (min-width: 561px) {
    :root { --gutter: 1.25rem; }

    .content { padding-top: 1.5rem; }
    .btn-row .btn { flex: 0 1 auto; }
    table.data th, table.data td { padding: .6rem .8rem; }
    /* Der Name neben dem Kürzel; auf dem Handy fehlt dafür die Breite.
       Das Kürzel selbst bleibt in jeder Größe stehen. */
    .topbar__user > span:not(.topbar__avatar) { display: inline; }

    /* Profilkopf: die Knöpfe rücken neben den Namen, statt darunter zu stehen. */
    .profil { grid-template-columns: auto 1fr auto; padding: 1.35rem; }
    .profil__tun { grid-column: 3; flex-direction: column; align-items: stretch; }
    .profil__logo { width: 104px; height: 104px; }
    .profil__who h1 { font-size: 1.7rem; }
}

/* ---------- ab 901px: Seitenleiste wird zur festen Spalte ---------- */
@media (min-width: 901px) {
    .app { grid-template-columns: var(--sidebar-w) 1fr; }

    .sidebar {
        position: sticky;
        inset: auto;
        top: 0;
        width: auto;
        z-index: auto;
        transform: none;
        visibility: visible;
        box-shadow: none;
    }

    /* Ohne Schublade braucht es weder Knopf noch Abdunkelung. */
    .topbar__toggle { display: none; }
    .scrim { display: none; }

    .dl__row { grid-template-columns: minmax(140px, 220px) 1fr; gap: .5rem 1rem; }

    /* Öffentlicher Rahmen: die Navigation passt in die Kopfzeile. */
    .pubbar__toggle { display: none; }
    .pubbar__nav {
        position: static;
        width: auto;
        margin-left: auto;
        background: none;
        box-shadow: none;
        padding: 0;
        overflow: visible;
        flex-direction: row;
        align-items: center;
        gap: .1rem;
        transform: none;
        visibility: visible;
    }
    .pubbar__nav > a { color: var(--text-muted); font-size: .89rem; padding: .4rem .6rem; }
    .pubbar__nav > a:hover { background: var(--surface-3); color: var(--text); }
    .pubbar__actions {
        margin: 0 0 0 .6rem;
        padding: 0 0 0 .8rem;
        border-top: 0;
        border-left: 1px solid var(--line);
    }
    .pubbar__actions .btn { width: auto; }

    .pubfoot { flex-direction: row; align-items: center; justify-content: space-between; }

    /* Vorschau: der Freigabestand bekommt seine zweite Spalte, die fehlenden
       Angaben stehen dann neben dem Balken statt darunter. */
    .stand { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .buehne__punkte { display: flex; }
    .buehne__leiste { padding: .55rem 1rem; }
}

/* ---------- ab 1101px: Formulare bekommen ihre Nebenspalte ---------- */
@media (min-width: 1101px) {
    .form-layout { grid-template-columns: minmax(0, 1fr) 340px; }
    .form-layout__side {
        position: sticky;
        top: calc(var(--topbar-h) + 1.25rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Druck
   ============================================================ */
@media print {
    .sidebar, .topbar, .form-bar, .scrim, .btn { display: none !important; }
    .pubbar, .pubfoot, .lupe, .breadcrumb { display: none !important; }
    .app { display: block; }
    .content { max-width: none; padding: 0; }
    .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
}

/* Hinweis am Ende einer gekürzten Vorschlagsliste ("50 von 721 – bitte weiter
   tippen"). Bewusst anders als .combo__empty: das ist eine Absage, das hier
   eine Aufforderung, und beide standen sonst grau untereinander. */
.combo__more {
    padding: .5rem .55rem;
    border-top: 1px solid var(--line);
    color: var(--text-subtle);
    font-size: .85rem;
    background: var(--surface-2, #f8fafc);
}

/* ============================================================
   Pflegeseiten: Unternehmensprofil und Standorte
   ------------------------------------------------------------
   Beide Seiten sind lange Formulare, die Betriebe einmal im Jahr
   und meist nicht am Schreibtisch ausfüllen. Die Überarbeitung
   verfolgt drei Ziele:

     1. Der Stand ist immer sichtbar - Vollständigkeit, was noch
        fehlt, ob gespeichert ist. Vorher stand das in einer Karte
        ganz oben und war nach dem ersten Scrollen weg.
     2. Der wichtigste Weg ist der größte Knopf. "Standorte
        verwalten" hing als kleiner Zweitknopf mitten im Formular,
        obwohl ohne Standort niemand buchen kann.
     3. Weniger gleichzeitig. Was freiwillig ist, sagt das auch,
        und die Abschnittsnavigation macht aus einer Rolle eine
        überschaubare Folge.

   Alles innerhalb der bestehenden Farbwelt (Schiefer, Stahlblau,
   Status in Grün/Bernstein/Rot). Eine zweite Bildsprache wäre der
   sicherste Weg, das Backend uneinheitlich aussehen zu lassen.
   ============================================================ */

/* ---------- Der eine Weg, der auf einer Seite zählt ---------- */
.btn--lg {
    font-size: 1rem;
    font-weight: 650;
    padding: .8rem 1.3rem;
    border-radius: var(--radius-lg);
    gap: .5rem;
}
.btn--lg svg { width: 18px; height: 18px; }

/* ---------- Überzeile über der Hauptüberschrift ----------
   Trägt die Gattung ("Unternehmensprofil"), damit die Überschrift
   selbst den Namen des Betriebs zeigen kann. Der eigene Name ist
   das einladendere Wort. */
.page-head__kicker {
    display: block;
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: .15rem;
}

/* ---------- Nebenspalte, die auf schmalen Geräten oben steht ----------
   Stand und nächster Schritt gehören vor das lange Formular. Ab
   1101px wandern sie nach rechts und bleiben beim Scrollen stehen
   (siehe .form-layout__side in den Breakpoints). */
@media (min-width: 1101px) {
    .form-layout--seite-oben > .form-layout__main { grid-column: 1; grid-row: 1; }
    .form-layout--seite-oben > .form-layout__side { grid-column: 2; grid-row: 1; }
}

/* ---------- Speicherzustand ----------
   Als Pille mit Punkt und nicht als grauer Fließtext: die Zusage
   "das ist angekommen" ist der Grund, warum niemand mehr auf den
   Speichernknopf schauen muss. Sie muss man sehen können. */
.saveflag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .7rem .3rem .6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-subtle);
    font-size: .85rem;
    font-weight: 500;
}
.saveflag::before {
    content: "";
    width: .5rem; height: .5rem;
    border-radius: 999px;
    background: var(--line-strong);
    flex: none;
}
.saveflag.is-ok {
    background: var(--ok-soft); border-color: var(--ok-line);
    color: var(--ok); font-weight: 600;
}
.saveflag.is-ok::before { background: var(--ok); }
.saveflag.is-dirty {
    background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn);
}
.saveflag.is-dirty::before { background: var(--warn); }
.saveflag.is-busy::before {
    background: var(--accent);
    animation: saveflag-puls 1s ease-in-out infinite;
}
.saveflag.is-error {
    background: var(--danger-soft); border-color: var(--danger-line);
    color: var(--danger); font-weight: 600;
}
.saveflag.is-error::before { background: var(--danger); }
@keyframes saveflag-puls { 50% { opacity: .25; } }

/* ---------- Wegweiser ----------
   Eine Karte, deren ganzer Zweck ein Weg ist. Der Knopf sitzt über
   die volle Breite darunter, nicht als Fußnote daneben. */
.signpost { border-left: 3px solid var(--accent); }
.signpost .btn--lg { width: 100%; justify-content: center; }
.signpost--offen { border-left-color: var(--warn); }

/* ---------- Standort als Zeile ----------
   Auf der Profilseite steht die Liste der Standorte nur zur
   Orientierung - anklickbar ist sie trotzdem, weil sonst jeder den
   Umweg über die Übersicht nimmt. */
.locrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}
.locrow:last-child { border-bottom: 0; }
.locrow:hover { color: var(--accent); }
.locrow__name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.locrow__ort { display: block; font-size: .85rem; color: var(--text-subtle); font-weight: 400; }
.locrow__zahl { flex: none; font-size: .85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Standortkarten in der Übersicht ---------- */
.loccard { display: flex; flex-direction: column; }
.loccard .card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .9rem; }
.loccard__zeile { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.loccard__label {
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin: 0 0 .3rem;
}
.loccard__meta { margin: 0; font-size: .85rem; color: var(--text-subtle); }
.loccard .card__foot { margin-top: auto; }

/* Die Kachel am Ende der Reihe: derselbe Umriss, aber offen -
   "hier ist Platz für den nächsten". */
.loccard--neu {
    border: 2px dashed var(--line-strong);
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.2rem;
    text-decoration: none;
    color: var(--text-muted);
    min-height: 180px;
}
.loccard--neu:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.loccard--neu strong { display: block; font-size: 1rem; }
.loccard--neu span { font-size: .87rem; }
.loccard--neu svg { display: block; margin: 0 auto .5rem; }

/* ---------- Schrittfolge ----------
   Auf "Standort anlegen": drei Zeilen, die sagen, wie lang das
   dauert. Ein leeres Formular ohne Aussicht auf sein Ende ist der
   häufigste Grund, es zuzuklappen. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.steps li {
    counter-increment: schritt;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .35rem 0;
    font-size: .9rem;
    color: var(--text-muted);
}
.steps li::before {
    content: counter(schritt);
    flex: none;
    width: 1.4rem; height: 1.4rem;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Freiwilliger Abschnitt ----------
   Ein Formular wirkt kürzer, wenn erkennbar ist, was man
   überspringen darf. */
.card__optional {
    flex: none;
    align-self: flex-start;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-subtle);
    background: var(--surface-3);
    border-radius: 999px;
    padding: .15rem .55rem;
}

/* ---------- Gefahrenzone ----------
   Löschen steht abgesetzt und in Rot umrandet, damit es nicht wie
   der nächste Schritt aussieht. */
.dangerzone { border-color: var(--danger-line); }
.dangerzone .card__head {
    background: var(--danger-soft);
    border-bottom-color: var(--danger-line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.dangerzone .card__title { color: var(--danger); }

/* ---------- Abschnittsnavigation, die stehen bleibt ----------
   Sechs Abschnitte in einer Rolle sind ohne Wegweiser eine Rolle.
   Die Leiste klebt unter der Kopfzeile; die Sprungziele bekommen
   entsprechend Vorlauf, sonst verschwindet die angesprungene
   Überschrift darunter. */
.formnav--sticky {
    position: sticky;
    top: var(--topbar-h);
    z-index: 12;
    background: var(--bg);
    margin: 0 0 1.25rem;
    padding-top: .35rem;
    /* Der Rand der Karten darunter darf nicht durchscheinen, wenn sie
       unter der Leiste durchlaufen. */
    box-shadow: 0 6px 8px -6px rgba(15, 23, 42, .12);
}
[data-formnav-section] { scroll-margin-top: calc(var(--topbar-h) + 3.6rem); }

/* ---------- Kennzahlzeile über einem Balken ----------
   "3 von 10 Plätzen vergeben", "Vollständigkeit  60 %". Die Zahl
   trägt das Gewicht, der Text daneben bleibt Beschriftung. */
.standzeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    font-size: .88rem;
    color: var(--text-muted);
}
.standzeile b { font-size: 1.15rem; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Was nach der Klebeleiste noch kommt ----------
   Die Leiste zieht mit ihrem negativen Außenabstand alles Folgende an sich
   heran - richtig, solange sie das Letzte auf der Seite ist. Steht darunter
   noch eine Karte (das Löschen eines Standorts), muss die diesen Zug
   ausgleichen; sonst liegt ihre Überschrift hinter der Leiste. */
.nach-formbar { margin-top: 5.5rem; }

/* Auf schmalen Geräten hat die Fußleiste nicht für beides Platz: dort tritt die
   Sternchen-Legende hinter den Speicherzustand zurück. Die Zusage, dass die
   Eingabe angekommen ist, wiegt schwerer als die Erklärung eines Zeichens, das
   ohnehin neben jedem Pflichtfeld steht. Steht die Legende allein in der Leiste
   (Standortformular), bleibt sie. */
@media (max-width: 700px) {
    .form-bar .saveflag + .form-bar__status { display: none; }
}