/* Oberfläche der Plattform – bewusst schlicht, ohne Build-Schritt. Farben als Variablen, hell und dunkel. */
:root {
    --grund: #f7f7f5; --flaeche: #ffffff; --text: #1d1d1b; --leise: #6b6b66; --linie: #deded8;
    --akzent: #1f5fa8; --akzent-text: #ffffff; --warnung: #8a5a00; --warnung-grund: #fff4dc;
    --fehler: #a4262c; --fehler-grund: #fde7e9; --gut: #1e6b3a; --gut-grund: #e3f4e8;
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :root {
        --grund: #161615; --flaeche: #20201e; --text: #ececea; --leise: #a3a39c; --linie: #3a3a36;
        --akzent: #7fb0ec; --akzent-text: #0e1a29; --warnung: #f0c060; --warnung-grund: #3a2d10;
        --fehler: #ff9aa0; --fehler-grund: #3d1a1c; --gut: #8fd6a6; --gut-grund: #16301f;
    }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--akzent); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }

.kopf { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between;
    padding: .75rem 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf .marke { font-weight: 600; text-decoration: none; color: var(--text); }
.kopf nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.kopf nav a { text-decoration: none; }
.kopf nav a.aktiv { font-weight: 600; text-decoration: underline; }
.kopf form { margin: 0; }

main { margin: 2rem auto; padding: 0 16px; }
main.schmal { max-width: 28rem; }
main.breit { max-width: 60rem; }

.formular { display: grid; gap: 1rem; margin: 1rem 0; max-width: 28rem; }
label { display: grid; gap: .3rem; font-weight: 500; }
label small { font-weight: 400; color: var(--leise); }
input, select { font: inherit; padding: .55rem .65rem; border: 1px solid var(--linie); border-radius: 6px;
    background: var(--flaeche); color: var(--text); width: 100%; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
button, .knopf { font: inherit; font-weight: 500; padding: .55rem 1rem; border-radius: 6px; border: 1px solid var(--akzent);
    background: var(--akzent); color: var(--akzent-text); cursor: pointer; text-decoration: none; display: inline-block; }
button.zweitrangig, .knopf.zweitrangig { background: transparent; color: var(--akzent); }
button.verweis { background: none; border: none; padding: 0; color: var(--akzent); text-decoration: underline; font-weight: 400; }

.hinweis { padding: .75rem 1rem; border-radius: 6px; background: var(--gut-grund); color: var(--gut); }
.fehler { padding: .75rem 1rem; border-radius: 6px; background: var(--fehler-grund); color: var(--fehler); }
.fehler p { margin: 0; }
.leise { color: var(--leise); font-size: .9rem; }
.leer { color: var(--leise); font-style: italic; }
.nebenwege { margin-top: 1.5rem; color: var(--leise); }
.marke-warten { display: inline-block; padding: .1rem .5rem; border-radius: 4px; background: var(--warnung-grund);
    color: var(--warnung); font-size: .9rem; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0; }
.karte header { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.karte h2 { margin: 0; }
.liste { padding-left: 1.2rem; }
.liste li { margin: .25rem 0; }
.eingebettet { display: inline; margin-left: .5rem; }
.zeile { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.zeile select { flex: 1 1 16rem; width: auto; }

.tabelle { width: 100%; border-collapse: collapse; background: var(--flaeche); border: 1px solid var(--linie); }
.tabelle th, .tabelle td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-size: .9rem; color: var(--leise); font-weight: 500; }
.spalten { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

textarea { font: inherit; padding: .55rem .65rem; border: 1px solid var(--linie); border-radius: 6px;
    background: var(--flaeche); color: var(--text); width: 100%; resize: vertical; }
textarea:focus { outline: 2px solid var(--akzent); outline-offset: 2px; }
button:disabled, input:disabled, textarea:disabled, select:disabled { opacity: .5; cursor: not-allowed; }
button.gefahr { background: var(--fehler); border-color: var(--fehler); color: var(--flaeche); }

/* Betriebskonsole und Postkorb (4c) */
.risiko { display: inline-block; padding: 0 .4rem; border-radius: 4px; border: 1px solid var(--linie); font-size: .85rem;
    font-weight: 600; font-variant-numeric: tabular-nums; }
.marke-gesperrt { display: inline-block; padding: .1rem .5rem; border-radius: 4px; background: var(--fehler-grund);
    color: var(--fehler); font-size: .9rem; font-weight: 600; }
.marke-frei { display: inline-block; padding: .1rem .5rem; border-radius: 4px; background: var(--gut-grund);
    color: var(--gut); font-size: .9rem; }
.schalter { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; }
.schalter .eingebettet { margin-left: 0; }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.angaben dt { color: var(--leise); }
.angaben dd { margin: 0; }
.entscheidung { display: grid; gap: 1rem; }
.entscheidung .schmal-feld { max-width: 14rem; }
fieldset.position { display: grid; gap: .75rem; margin: 0; }
fieldset.position legend { font-weight: 600; padding: 0 .25rem; }
fieldset.position p { margin: 0; }
.ankreuzen { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.ankreuzen input { width: auto; }

.schritte li { margin-bottom: 1.5rem; }
.qr { margin: .75rem 0; }
.qr svg { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 6px; }
.geheimnis { display: block; margin-top: .5rem; font-size: 1.05rem; letter-spacing: .05em; word-break: break-all; }
.codes { columns: 2; list-style: none; padding: 0; }
.codes code { font-size: 1.05rem; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Nutzer-Web-Oberfläche (4d) */
.frage { display: grid; gap: .75rem; margin: 1rem 0 1.5rem; }
.frage button { justify-self: start; }
.antwort h2 { font-size: 1.05rem; }
.aussagen { padding-left: 1.2rem; margin: .75rem 0; }
.aussagen li { margin: .75rem 0; }
.aussagen p { margin: 0; }
.herkunft { margin-top: .2rem !important; color: var(--leise); font-size: .9rem; }
.herkunft-art { display: inline-block; padding: 0 .4rem; border-radius: 4px; border: 1px solid var(--linie); font-size: .85rem;
    font-weight: 600; color: var(--text); }
.bewertung { display: grid; gap: .25rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--linie); }
.bewertung .zeile { margin: .25rem 0 0; }
.bewertung-abgegeben { margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--linie); }

/* Veranstaltungen und Dienstplan (10a) – eingetragen wird vom Telefon aus: große Tippflächen, eine Karte je Dienst */
a.karte.veranstaltung { display: grid; gap: .2rem; text-decoration: none; color: var(--text); }
a.karte.veranstaltung span:last-child { color: var(--akzent); }
details.karte summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.filter a { padding: .5rem .9rem; border: 1px solid var(--linie); border-radius: 999px; text-decoration: none; background: var(--flaeche); }
.filter a.aktiv { border-color: var(--akzent); background: var(--akzent); color: var(--akzent-text); }
h3.tag { font-size: 1rem; margin: 1.5rem 0 .25rem; color: var(--leise); }
.karte.dienst { margin: .5rem 0; padding: .9rem 1rem; }
.karte.dienst header { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.karte.dienst h4 { margin: 0; font-size: 1.05rem; flex: 1 1 10rem; }
.karte.dienst .uhrzeit { font-variant-numeric: tabular-nums; font-weight: 600; }
.karte.dienst.eigen { border-color: var(--akzent); box-shadow: inset 4px 0 0 var(--akzent); }
.karte.dienst p { margin: .35rem 0; }
.belegung { color: var(--leise); font-size: .9rem; }
.namen { list-style: none; padding: 0; margin: .25rem 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.namen li { padding: .1rem .5rem; border-radius: 4px; background: var(--grund); border: 1px solid var(--linie); font-size: .95rem; }
.namen li.ich { border-color: var(--akzent); font-weight: 600; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .6rem; }
.knoepfe form { margin: 0; }
.knoepfe button { min-height: 2.75rem; min-width: 8rem; }
.knoepfe .verwalten { margin-left: auto; }
.wuensche { border-color: var(--warnung); background: var(--warnung-grund); }
.wunsch + .wunsch { border-top: 1px solid var(--linie); margin-top: .75rem; padding-top: .75rem; }
.zwei-felder { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.sichtbar { margin-top: 1.5rem; }

@media (max-width: 40rem) {
    .knoepfe form { flex: 1 1 100%; }
    .knoepfe form button { width: 100%; }
    .knoepfe .verwalten { margin-left: 0; }
    .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
    .tabelle thead { display: none; }
    .tabelle tr { border-bottom: 1px solid var(--linie); }
    .tabelle td { border: none; padding: .35rem .75rem; }
    .tabelle td.rollenname { font-weight: 600; padding-top: .6rem; }
    .tabelle td[data-titel]::before { content: attr(data-titel); display: block; font-size: .8rem; color: var(--leise); }
}