/* willers.one board - Bauteile
   Knoepfe, Felder, Karten, Tabellen, Hinweise und die Anmeldekarte.
   Gilt fuer alle Board-Seiten und fuer die Karte. Masse wie im BD Cockpit:
   Eingabefelder 36 px, jeder Knopf 28 px hoch. */

h1, h2, h3 { margin: 0; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -.005em; }
h3 { font-size: 14px; font-weight: 700; }

/* ---------- Formulare ---------- */
input, select, textarea, button { font: inherit; color: inherit; }

input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], input[type="time"],
input[type="tel"], input[type="datetime-local"], select, textarea {
    width: 100%;
    height: var(--control-h);
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); margin: 0; width: auto; }

/* Feldbeschriftung: klein, fett, gedaempft, Feld darunter */
.feld, .raster label:not(.haken), .auth-card label:not(.radio):not(.check) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.feld input, .raster label input, .auth-card label input { font-weight: 400; color: var(--text); }

.hint, .notiz { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.auth-card .hint { font-size: 12.5px; }

label.check, label.radio, .haken {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
}
label.radio-block { display: flex; align-items: flex-start; gap: 10px; }
label.radio-block input { margin-top: 3px; }
label.radio-block .hint { display: block; margin-top: 2px; }

fieldset {
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
legend { padding: 0 6px; font-size: 13px; font-weight: 700; }

/* ---------- Knoepfe ---------- */
.btn, .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--control-h-akt);
    padding: 0 12px;
    border: 1.5px solid color-mix(in srgb, var(--text) 16%, var(--border));
    border-radius: var(--knopf-radius);
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .015em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:hover, .knopf:hover {
    background: var(--surface-2);
    border-color: color-mix(in srgb, var(--text) 32%, var(--border));
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,.07);
}
.btn:active, .knopf:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible, .knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled], .btn:disabled, .knopf:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover, .knopf:hover { transform: none; } }

/* Hauptaktion: voll in der Akzentfarbe. .knopf ohne Zusatz ist die Hauptaktion. */
.btn-primary, .knopf {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover, .knopf:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Nebenaktion */
.knopf.klein, .knopf.neben {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.knopf.klein, .knopf.neben { border-color: color-mix(in srgb, var(--text) 16%, var(--border)); box-shadow: none; }
.knopf.klein:hover, .knopf.neben:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--text) 32%, var(--border)); box-shadow: 0 3px 8px rgba(0,0,0,.07); }

/* Loeschen und Trennen */
.btn-danger, .knopf.gefahr {
    background: var(--surface);
    border-color: var(--danger-border);
    color: var(--danger);
}
.btn-danger:hover, .knopf.gefahr:hover { background: var(--danger-soft); border-color: var(--danger); }

.link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}
.link-btn:hover { color: var(--accent-hover); }

/* ---------- Seitenkopf: auf jeder Seite gleich (shell_seitenkopf) ---------- */
.seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 20px; }
.seitenkopf-text { min-width: 0; }
.ueberschrift { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }   /* Roboto ExtraBold */
.sub { margin: 6px 0 0; color: var(--text-muted); font-size: 13.5px; }
.seitenkopf-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Boxen: Kopf in jeder Box gleich (karte_kopf) ---------- */
.karte {
    margin-bottom: 16px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.karte.neu { border-style: dashed; box-shadow: none; }
.karte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.karte-kopf-text { min-width: 0; }
.karte-titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.005em; line-height: 1.35; }
.karte-sub { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; }
.karte-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.karte-titel .zahl { color: var(--text-muted); font-weight: 400; }
/* Tabellen stehen in einer Box: dort ohne eigenen Schatten */
.karte .tabelle-wrap, .karte .rb-tabelle-wrap { box-shadow: none; }
.karte > :last-child { margin-bottom: 0; }

.mail { color: var(--text-muted); font-size: 13px; }

.abzeichen {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: .02em;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
}

.zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.zeile .inline { display: inline-flex; margin: 0; }
.zeile input[type="text"], .zeile input[type="password"], .zeile input[type="email"], .zeile input[type="url"] {
    width: auto;
    min-width: 200px;
    height: var(--control-h-akt);
    padding: 4px 9px;
    font-size: 13px;
}
.etikett { min-width: 118px; color: var(--text-muted); font-size: 12px; font-weight: 600; }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.raster-breit { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.stack { display: flex; flex-direction: column; gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Kacheln (Uebersicht) ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.kachel {
    display: block;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.kachel:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.kachel h2 { margin: 0 0 6px; font-size: 15px; }
.kachel p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.kachel .strich {
    display: block;
    width: 26px; height: 3px;
    margin-bottom: 14px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0b8b82, #6b3f81 55%, #ca2a7a);
    transition: width .3s cubic-bezier(.3, 1.4, .5, 1);
}
a.kachel:hover .strich { width: 44px; }
.kachel.bald { opacity: .6; }
.kachel.bald .strich, .kachel.verwaltung .strich { background: var(--border); }
.kachel .bald-marke {
    display: inline-block;
    margin-top: 12px;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

/* ---------- Hinweise ---------- */
.meldung, .alert {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 13px;
}
.meldung.fehler, .alert-error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.meldung.gut, .alert-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.auth-card .alert { margin: 0; }

/* ---------- Reiter ---------- */
.reiter, .tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin: 0 0 20px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 11px;
}
.reiter::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
.reiter a, .tabs a {
    flex: none;
    padding: 6px 14px;
    border-radius: 8px;
    transition: background .15s, color .15s;
    color: color-mix(in srgb, var(--text) 68%, transparent);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.reiter a:hover, .tabs a:hover { background: var(--surface-3); color: var(--text); }
.reiter a.aktiv, .tabs a.is-active {
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,.16), 0 0 0 1px var(--border);
}
.auth-card .tabs { display: flex; margin: 0; }
.auth-card .tabs a { flex: 1; text-align: center; }

/* ---------- Tabellen ---------- */
.tabelle-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th, .tabelle td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle th { background: var(--surface-2); color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tabelle tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }

code, .cron-url, .code-out { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.cron-url { padding: 3px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.cron-laeufe { align-items: flex-start; }
.cron-tabelle { flex: 1; min-width: 0; border-collapse: collapse; font-size: 12.5px; }
.cron-tabelle td { padding: 3px 10px 3px 0; vertical-align: top; }
.cron-tabelle .zeit { white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cron-tabelle .cron-fehler td { color: var(--danger); }

/* ---------- Leere Seite / gesperrt ---------- */
.leer { padding: 44px 18px; text-align: center; color: var(--text-muted); }

.leer h1 { margin-bottom: 8px; color: var(--text); }

/* ---------- Anmelden und Einrichten ---------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auth-kopf { position: fixed; top: 14px; right: 14px; z-index: 5; }
.auth-card {
    width: 100%;
    max-width: 400px;
    padding: 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.auth-card-wide { max-width: 620px; }
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; font-weight: 700; }
.auth-logo .brand-mark { width: 30px; height: auto; }
.auth-sub { margin: -8px 0 4px; text-align: center; color: var(--text-muted); font-size: 13px; }
.auth-card .btn-primary { height: var(--control-h); font-size: 13px; }

.vergessen > summary { cursor: pointer; list-style: none; color: var(--text-muted); font-size: 13px; text-align: center; }
.vergessen > summary::-webkit-details-marker { display: none; }
.vergessen > summary:hover { color: var(--text); }
.vergessen p { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
textarea.code-out { width: 100%; }

@media (max-width: 480px) { .auth-card { padding: 24px 20px; } }

/* ---------- Formularraster und Knopfreihen ---------- */
.feld-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.feld-raster .breit, .feld-raster .feld.breit { grid-column: 1 / -1; }
@media (max-width: 640px) { .feld-raster { grid-template-columns: 1fr; } }
.knopfreihe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.knopfreihe form { margin: 0; display: inline-flex; }
.abstand-oben { margin-top: 12px; margin-bottom: 0; }
label.btn { margin: 0; }

.profilbild { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.profilbild .notiz { flex-basis: 100%; }

/* ---------- Verwaltung: Leiste links, Inhalt rechts (wie im BD Cockpit) ---------- */
.adm-layout { display: flex; align-items: flex-start; gap: 16px; }
.adm-inhalt { flex: 1; min-width: 0; }
.adm-seite {
    flex: 0 0 190px;
    /* scrollt mit dem Inhalt mit - als "sticky" stand sie beim Scrollen versetzt zu den Boxen */
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.adm-gruppe + .adm-gruppe { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border); }
.adm-gruppe-titel {
    padding: 6px 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.adm-seite a {
    display: block;
    padding: 4px 10px;
    border-radius: 7px;
    color: color-mix(in srgb, var(--text) 72%, transparent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-seite a:hover { background: var(--surface-2); color: var(--text); }
.adm-seite a.aktiv { background: var(--accent); color: var(--accent-text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.adm-seite a { transition: background .15s, color .15s; }
@media (max-width: 900px) {
    .adm-layout { flex-direction: column; align-items: stretch; }
    .adm-seite { position: static; flex-basis: auto; }
    .adm-gruppe { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
    .adm-gruppe-titel { flex-basis: 100%; }
}

.abstand-unten { margin: 0 0 14px; }
.zeile.erste { border-top: 0; padding-top: 0; }

.neu-konto { margin: 0 0 16px; padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); }
.feld-raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feld-raster .breit-2 { grid-column: span 2; }
.feld > span:first-child { font-size: 12px; font-weight: 600; color: var(--text-muted); }
@media (max-width: 900px) { .feld-raster.drei { grid-template-columns: 1fr; } .feld-raster .breit-2 { grid-column: auto; } }

.tabelle-wrap.ohne-schatten { box-shadow: none; }
.tabelle .mitte, .tabelle th.mitte { text-align: center; }
.tabelle td { vertical-align: middle; }
.tabelle .aktionen { width: 44px; text-align: right; }
.tabelle tr.inaktiv td { color: var(--text-muted); }
.tabelle tr.inaktiv .avatar { opacity: .5; }
.nutzer-tabelle { min-width: 640px; }
.person { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.person-name { line-height: 1.3; }
select.klein { width: auto; height: var(--control-h-akt); padding: 2px 8px; font-size: 12.5px; }
.btn.nur-symbol { width: var(--control-h-akt); padding: 0; font-size: 15px; letter-spacing: 1px; }

.chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.chip.ok     { background: var(--ok-soft); color: var(--ok); }
.chip.warn   { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
.chip.fehler { background: var(--danger-soft); color: var(--danger); }

.zeilen-menue { min-width: 220px; text-align: left; }
.aufklapp-titel { padding: 4px 10px 6px; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.einmal-pw {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
    border-radius: 8px;
    background: var(--ok-soft);
    color: var(--ok);
    font-size: 13px;
}
.einmal-pw code { padding: 2px 10px; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.einmal-pw .notiz { flex-basis: 100%; color: inherit; opacity: .85; }

.dialog-klein {
    width: min(420px, calc(100vw - 24px));
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.dialog-klein::backdrop { background: rgba(0,0,0,.4); }
.dialog-klein form { display: flex; flex-direction: column; gap: 12px; }
.dialog-klein h3 { font-size: 15px; }
.knopfreihe.rechts { justify-content: flex-end; }

.marke-vorschau {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 15px;
    font-weight: 700;
}
.marke-vorschau img { height: 34px; width: auto; }

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

/* ---------- Farbwahl ---------- */
input[type="color"] {
    width: 44px;
    height: var(--control-h);
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }

/* ---------- Auswahl von Gruppen und Mitgliedern (zuweisung_feld) ---------- */
.wahl { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.wahl-zeile { display: flex; flex-direction: column; gap: 6px; }
.wahl-titel { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.wahl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wahl-chip { position: relative; cursor: pointer; }
.wahl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wahl-chip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
}
.wahl-chip:hover span { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
.wahl-chip input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.wahl-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.wahl-chip.gruppe span::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 3px;
    background: currentColor; opacity: .35; }
.wahl-chip .punkt { width: 10px; height: 10px; flex: none; border-radius: 50%; }

/* Mitgliedertabelle: Felder direkt in der Zeile */
.mitglieder-tabelle { min-width: 720px; }
.mitglieder-tabelle input[type="text"] { min-width: 140px; }
.mitglieder-tabelle input[type="date"] { width: auto; }
.mitglieder-tabelle .notiz { margin-left: 6px; }
.mitglieder-tabelle .aktionen { width: auto; white-space: nowrap; }

/* Verwaltung › Darstellung › Menü: je Menüpunkt Name und Bereich */
.menue-zeilen { display: flex; flex-direction: column; gap: 10px; }
.menue-zeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 640px) { .menue-zeile { grid-template-columns: 1fr; } }

/* ---------- Signalfarbe (Mein Profil) ---------- */
.farb-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.farb-feld { width: 38px; height: 38px; padding: 3px; border: 2px solid transparent; border-radius: 11px; background: none; cursor: pointer; transition: border-color .15s, transform .15s; }
.farb-feld:hover { border-color: var(--border); transform: translateY(-1px); }
.farb-feld.aktiv { border-color: var(--text); }
.farb-feld:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.farb-feld span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); }
.farb-zufall span { background: conic-gradient(#662d91, #c1272d, #ff421d, #f5921e, #fdb62f, #39b54a, #00a99d, #0071bc, #662d91); color: #fff; font-size: 14px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.farb-probe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ---------- Schloss: nur fuer Admins (admin_schloss()) ---------- */
.schloss { display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: .35em; color: var(--text-muted); vertical-align: -.08em; }
.schloss svg { width: .9em; height: .9em; min-width: 11px; min-height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ueberschrift .schloss { margin-left: .3em; vertical-align: .02em; }
.ueberschrift .schloss svg { width: .62em; height: .62em; stroke-width: 2.3; }
.btn .schloss, .knopf .schloss { margin-left: 0; color: inherit; opacity: .7; }
.btn-primary .schloss { opacity: .85; }
.reiter a .schloss, .tabs a .schloss { margin-left: .4em; }
.meldung .schloss { margin: 0 .2em 0 0; color: inherit; }
.notiz .schloss { margin: 0 .15em 0 0; }
th .schloss { margin-left: .4em; vertical-align: -.12em; }
.aufklapp a .schloss { margin-left: .45em; }
.wu-technik .schloss { float: right; margin: 0; }

/* ---------- Menueaufbau (Verwaltung › Darstellung, wie im BD Cockpit) ---------- */
.ma-spalten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; align-items: start; margin-top: 4px; }
.ma-spalte-kopf { margin: 0 0 8px; }
.ma-bereich-name { height: 32px !important; font-weight: 700; font-size: 13.5px !important; }
.ma-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.ma-liste:empty { border: 1px dashed var(--border); border-radius: 10px; }
.ma-liste:empty::after { content: "Punkte hierher ziehen"; display: block; padding: 10px; color: var(--text-muted); font-size: 12px; text-align: center; }
.ma-home-hinweis { padding: 12px 10px; border-radius: 10px; background: var(--surface-2); color: var(--text-muted); font-size: 12px; text-align: center; }
.ma-z { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; font-weight: 600; cursor: grab; }
.ma-z.fest { cursor: default; background: var(--surface-2); }
.ma-z.offen { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ma-z-kopf { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; }
.ord-griff { width: 10px; color: var(--text-muted); letter-spacing: -2px; }
.ord-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-akt { display: flex; gap: 4px; flex: 0 0 auto; }
.ord-akt .btn.nur-symbol { font-size: 13px; letter-spacing: 0; }
.ord-akt .btn.an { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ma-alt { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--text-muted); text-decoration: line-through; }
.ma-recht { margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.ma-einst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px 10px 10px; cursor: default; }
.ma-einst label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.ma-einst input, .ma-einst select { height: 30px; font-size: 13px; }
.ma-platz { list-style: none; height: 0; margin: -4px 0; border-top: 2px solid var(--accent); border-radius: 2px; }
.ma-zieht { opacity: .4; }
.ma-stand {
    position: fixed; right: 20px; bottom: 20px; z-index: 1500; padding: 8px 14px; border-radius: 8px;
    background: var(--text); color: var(--surface); font-size: 13px; font-weight: 600;
    opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.ma-stand.zeigen { opacity: 1; transform: none; }
.ma-stand.fehler { background: var(--danger); color: #fff; }