/* ============================================================
   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. */
.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;
}
.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; }

/* ---------- 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; }

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;
    align-items: start;
}
.firm { display: flex; flex-direction: column; }
.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; 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; }

/* ---------- Zeitfenster ---------- */
.slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
    gap: .5rem;
    padding: .9rem 1.15rem;
}
.slot {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: .5rem .6rem;
    font-size: .82rem;
    color: var(--text-subtle);
}
.slot__time { display: block; font-weight: 650; }
.slot__state { display: block; margin-top: .1rem; }
.slot--frei {
    background: var(--ok-soft);
    border-color: var(--ok-line);
    color: var(--ok);
}
.slot--voll {
    background: var(--warn-soft);
    border-color: var(--warn-line);
    color: var(--warn);
}

.firm__foot {
    padding: 0 1.15rem 1.1rem;
    display: flex;
    justify-content: flex-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; }

/* Zeitfenster-Zeile */
.slot {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .9rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
}
.slot:last-child { border-bottom: 0; }
.slot__title { font-weight: 600; }
.slot__time { font-size: .85rem; color: var(--text-subtle); }
.slot__count { width: 110px; }
.slot__count input { text-align: right; }
.slot[data-off] .slot__title,
.slot[data-off] .slot__time { 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); }
.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; }
/* 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; }
.form-bar__status.is-ok { color: var(--ok); font-weight: 600; }
.form-bar__status.is-error { color: var(--danger); font-weight: 600; }

/* ---------- 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; }

/* ---------- 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; }
}

/* ---------- 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; }
}