/* EEG Abstimmungen – Backend
   Bewusst ohne Framework: weniger Code, keine externen Abhängigkeiten,
   passt zur strengen Content-Security-Policy. */

:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --border: #d9dce1;
    --text: #1d2129;
    --text-dim: #6b7280;
    --accent: #1a6b3c;
    --accent-dark: #14522e;
    /* Abgeleitete Farben. Ueberschrieben von /theme.css nach der
       eingestellten Hauptfarbe; hier die Werte fuer die Vorgabe. */
    --accent-soft: #e7f1eb;
    --accent-text: #1a6b3c;
    --on-accent: #ffffff;
    --accent-a06: rgba(26, 107, 60, 0.06);
    --accent-a07: rgba(26, 107, 60, 0.07);
    --accent-a20: rgba(26, 107, 60, 0.2);
    --ok: #1a7f37;
    --warn: #b45309;
    --error: #b42318;
    --radius: 6px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: #eef0f3;
    padding: 1px 5px;
    border-radius: 3px;
}

.dim { color: var(--text-dim); }
.num { text-align: right; }
.center { text-align: center; }

/* Topbar ---------------------------------------------------------------- */

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    min-height: 58px;
}

.brand {
    font-weight: 650;
    text-decoration: none;
    color: var(--text);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand__logo { display: block; height: 36px; width: auto; }

/* Auf schmalen Schirmen bleibt nur das Zeichen: der Schriftzug frisst dort
   den Platz, den die Navigation braucht. */
@media (max-width: 560px) {
    .brand__text { display: none; }
}

.centered__brand { text-align: center; margin: 0 0 18px; }
.centered__brand img { height: 72px; width: auto; }

.nav {
    display: flex;
    gap: 4px;
    flex: 1;
    flex-wrap: wrap;
}

.nav__link {
    padding: 7px 12px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-dim);
    font-weight: 500;
}

.nav__link:hover { background: #eef0f3; color: var(--text); }
.nav__link.is-active { background: var(--accent-soft); color: var(--accent-text); }

.user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.user__name { font-weight: 500; }
.user__link { color: var(--text-dim); text-decoration: none; }
.user__link:hover { text-decoration: underline; }

/* Layout ---------------------------------------------------------------- */

.main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.page-head h1 { font-size: 22px; margin: 0; }

.section { margin-top: 36px; }
.section h2 { font-size: 17px; margin: 0 0 10px; }

.footer {
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
    padding: 20px;
}

.app--centered { display: grid; place-items: center; min-height: 100vh; }
.centered { width: 100%; max-width: 420px; padding: 20px; }

/* Karten ---------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
}

.card--narrow { max-width: 620px; }
.card--auth { padding: 28px; }
.card__title { margin: 0 0 4px; font-size: 20px; }
.card__lead { margin: 0 0 22px; color: var(--text-dim); font-size: 14px; }
.card h2 { font-size: 16px; margin: 24px 0 12px; }
.card h2:first-of-type { margin-top: 0; }

.cards {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat__label { font-size: 13px; color: var(--text-dim); }
.stat__value { font-size: 27px; font-weight: 600; line-height: 1.15; }
.stat__note { font-size: 12px; color: var(--text-dim); }

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

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.table--narrow { max-width: 760px; }

.table th,
.table td {
    padding: 9px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.table th {
    background: #f8f9fa;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table th.num, .table td.num { text-align: right; }
.table th.center, .table td.center { text-align: center; }
.row--muted td { opacity: 0.55; }
.actions { text-align: right; white-space: nowrap; }

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

.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: #fff;
    color: var(--text);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

.hint {
    font-size: 12.5px;
    color: var(--text-dim);
    margin: 5px 0 0;
}

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

/* Buttons --------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { background: #eef0f3; }

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--block { width: 100%; margin-top: 6px; }
.btn--small { padding: 4px 10px; font-size: 13px; }

.btn--link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--text-dim);
    text-decoration: none;
}

.btn--link:hover { background: none; text-decoration: underline; color: var(--text); }

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

.flashes { margin-bottom: 18px; }

.alert {
    padding: 11px 15px;
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: 9px;
    font-size: 14px;
}

.alert--success { background: #e9f5ec; border-color: #b7dfc3; color: #14522e; }
.alert--error   { background: #fdecea; border-color: #f5c2bd; color: var(--error); }
.alert--warning { background: #fef6e7; border-color: #f5dfb0; color: var(--warn); }
.alert--info    { background: #eaf1fb; border-color: #c3d6f0; color: #1c4e8a; }

.notice {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 13px 16px;
    margin: 18px 0;
}

.notice p { margin: 0; font-size: 14px; }
.notice--info { border-left-color: #3b76c4; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 11px;
    background: #eef0f3;
    font-size: 12px;
    color: var(--text-dim);
    white-space: nowrap;
}

.status { font-size: 13px; font-weight: 600; }
.status--ok   { color: var(--ok); }
.status--warn { color: var(--warn); }
.status--off  { color: var(--text-dim); }

.empty {
    color: var(--text-dim);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
}

@media (max-width: 700px) {
    .topbar__inner { padding: 10px 16px; }
    .nav { order: 3; width: 100%; }
    .main { padding: 20px 16px 48px; }
    .table { display: block; overflow-x: auto; }
}

/* Filterleiste und Listen */

.filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.filters input[type=search],
.filters select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}

.filters input[type=search] { min-width: 260px; flex: 1; }

.table th a.sort { color: var(--text-dim); text-decoration: none; }
.table th a.sort:hover { color: var(--text); text-decoration: underline; }
.table th a.sort.is-active { color: var(--accent-text); }

.pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.changes { margin: 0; padding-left: 16px; font-size: 13px; }
.changes li { margin-bottom: 2px; }

input[type=file] {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: #fafbfc;
}

label.radio {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-weight: 400;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 7px;
    cursor: pointer;
}

label.radio:hover { background: #f8f9fa; }
label.radio input { margin-top: 3px; width: auto; }
label.radio .hint { margin: 2px 0 0; }

textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}

/* Fortschritt beim Energiedaten-Abruf */

.progress {
    height: 10px;
    background: #e9ebee;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress__bar {
    height: 100%;
    background: var(--accent);
    width: 0;
    transition: width 0.25s ease;
}

.log {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.log li {
    padding: 3px 0;
    border-bottom: 1px solid #eef0f3;
    color: var(--text-dim);
}

.log li.warn { color: var(--warn); }
.log li.ok { color: var(--ok); }

/* Diagramme */

.chart {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    overflow: visible;
}

.chart__grid { stroke: #e4e6ea; stroke-width: 1; }
.chart__axis { font-size: 10px; fill: var(--text-dim); }

/* Tooltip ohne JavaScript: erscheint beim Überfahren der Spalte. */
.chart__hit { fill: transparent; }
.chart__col:hover .chart__hit { fill: var(--accent-a06); }

.chart__tip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.chart__col:hover .chart__tip { opacity: 1; }

.chart__tip-bg {
    fill: #ffffff;
    stroke: var(--border);
    stroke-width: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.14));
}

.chart__tip-title { font-size: 12px; font-weight: 650; fill: var(--text); }
.chart__tip-text  { font-size: 11px; fill: var(--text-dim); }
.chart__tip-value { font-size: 11px; font-weight: 600; fill: var(--text); }
.chart__tip-rule  { stroke: var(--border); stroke-width: 1; }

.chart-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-dim);
    margin: 8px 0 4px;
}

.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

.chart-pair { display: grid; gap: 22px; }

@media (min-width: 1000px) {
    .chart-pair { grid-template-columns: 1fr 1fr; }
}

/* Unternavigation */

.subnav {
    background: #fafbfc;
    border-top: 1px solid var(--border);
}

.subnav__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.subnav__link {
    padding: 9px 13px;
    font-size: 14px;
    text-decoration: none;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
}

.subnav__link:hover { color: var(--text); }
.subnav__link.is-active { color: var(--accent-text); border-bottom-color: var(--accent); }

/* Benutzermenü */

.usermenu { position: relative; }

.usermenu__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 5px 8px;
    border-radius: var(--radius);
    font-size: 14px;
}

.usermenu__toggle::-webkit-details-marker { display: none; }
.usermenu__toggle:hover { background: #eef0f3; }

.usermenu__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 13px;
}

.usermenu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    z-index: 30;
    overflow: hidden;
}

.usermenu__head {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.usermenu__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    color: var(--text);
    text-decoration: none;
    font: inherit;
    font-size: 14px;
    background: none;
    border: 0;
    cursor: pointer;
}

.usermenu__item:hover { background: #eef0f3; }

/* Diagramm-Tooltip */

.chart__grid { stroke: #e4e6ea; stroke-width: 1; }
.chart__axis { font-size: 10px; fill: #6b7280; }
.chart__hit { fill: transparent; }
.chart__group:hover .chart__hit { fill: var(--accent-a07); }

.chart__tip { opacity: 0; pointer-events: none; transition: opacity 0.1s ease; }
.chart__group:hover .chart__tip { opacity: 1; }
.chart__tip rect:first-child { fill: #fff; stroke: #c9ced6; stroke-width: 1; }
.chart__tip-title { font-size: 12px; font-weight: 600; fill: #1d2129; }
.chart__tip-text { font-size: 11px; fill: #40454d; }
.chart__tip-total { font-size: 11px; font-weight: 600; fill: #1d2129; }

.chart-legend__dot { width: 11px; height: 11px; }

.progress {
    display: block;
    width: 100%;
    height: 10px;
    margin-bottom: 12px;
    appearance: none;
    border: 0;
    border-radius: 5px;
    background: #e9ebee;
    overflow: hidden;
}

.progress::-webkit-progress-bar { background: #e9ebee; }
.progress::-webkit-progress-value { background: var(--accent); }
.progress::-moz-progress-bar { background: var(--accent); }

/* Hochstufen direkt in der Empfehlungsliste */

.stage-form {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: nowrap;
}

.stage-form select { padding: 4px 6px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius); }
.stage-form input[type=text] { width: 220px; padding: 4px 7px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius); }

.input--num { text-align: right; width: 110px; }

/* Ergebnisbalken */

.result { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.result__row {
    display: grid;
    grid-template-columns: 130px 1fr 220px;
    gap: 12px;
    align-items: center;
}

.result__label { font-weight: 600; font-size: 14px; }

.result__track {
    background: #eef0f3;
    border-radius: 3px;
    overflow: hidden;
    height: 12px;
}

.result__bar { display: block; width: 100%; height: 12px; }
.result__value { font-size: 14px; display: flex; gap: 8px; align-items: baseline; }

.breakable { word-break: break-all; }

.question-form { display: flex; gap: 6px; width: 100%; }
.question-form input[type=text] { flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 14px; }

@media (max-width: 760px) {
    .result__row { grid-template-columns: 1fr; gap: 4px; }
}

/* Fragenliste: die Frage bekommt den Platz, die Aktionen nur so viel wie nötig */

.table--questions { table-layout: auto; }
.table--questions th:first-child,
.table--questions td:first-child { width: 1%; white-space: nowrap; }
.table--questions th:last-child,
.table--questions td:last-child { width: 1%; white-space: nowrap; }
.table--questions td:nth-child(2) { width: 100%; }

.question-form input[type=text] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 7px 10px;
    font-size: 15px;
}

/* QR-Codes
   Rahmen und Rundung gehoeren nie auf das SVG selbst. Bei box-sizing:
   border-box zieht ein 1px-Rahmen die Zeichenflaeche auf 178 statt 180
   Pixel, womit die Modulgroesse krumm wird; border-radius schneidet
   ausserdem in die Ruhezone, die ein Scanner zum Finden der Ecken braucht.
   Beides kommt deshalb auf einen Kasten darum herum. */

.qr { display: block; max-width: 100%; height: auto; }

.qr-box {
    display: inline-block;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Ohne Breitenangabe: das SVG bringt seine Groesse selbst mit, ein Modul
   entspricht dann genau so vielen Pixeln wie im Aufruf angegeben. */
.qr--small { width: auto; }

/* Testseite fuer den QR-Code: dieselbe Adresse in mehreren Modulgroessen
   nebeneinander, damit sich mit dem Telefon feststellen laesst, ab wann
   das Scannen zuverlaessig klappt. */

.qr-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

.qr-grid__item { text-align: center; }
.qr-grid__item .hint { margin-top: 6px; }

/* IBAN und andere heikle Werte aufdecken.
   Ohne JavaScript: das Kontrollkaestchen ist unsichtbar, das Label davor
   schaltet es um, und der Geschwisterselektor blendet um. Damit funktioniert
   es auch bei strenger Content-Security-Policy und per Fingertipp. */

.reveal { display: inline-flex; align-items: center; gap: 8px; }
.reveal__toggle { position: absolute; opacity: 0; width: 0; height: 0; }

.reveal__plain { display: none; }
.reveal__toggle:checked ~ .reveal__masked { display: none; }
.reveal__toggle:checked ~ .reveal__plain { display: inline; }

.reveal__btn {
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    /* Genug Flaeche fuer einen Finger, nicht nur fuer einen Mauszeiger. */
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reveal__btn:hover { background: var(--bg); }
.reveal__toggle:focus-visible ~ .reveal__btn { outline: 2px solid var(--accent); outline-offset: 1px; }

.reveal__hide { display: none; }
.reveal__toggle:checked ~ .reveal__btn .reveal__show { display: none; }
.reveal__toggle:checked ~ .reveal__btn .reveal__hide { display: inline; }

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

/* Hinweise per Fingertipp (siehe assets/js/tips.js).
   Der Text steht in data-tip und wird als Sprechblase eingeblendet, sobald
   das Element die Klasse tip-open traegt. Am Rechner zusaetzlich beim
   Ueberfahren - dort ist das gewohnt. */

[data-tip] { position: relative; }

[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    background: #1d2129;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 400;
    padding: 6px 9px;
    border-radius: 6px;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    z-index: 40;
    pointer-events: none;
}

[data-tip].tip-open::after { opacity: 1; visibility: visible; }

/* In der Kopfleiste nach unten klappen. Oberhalb waere die Sprechblase
   ausserhalb des Fensters und damit unsichtbar. */
.topbar [data-tip]::after,
.nav [data-tip]::after {
    bottom: auto;
    top: calc(100% + 6px);
}

/* Nur wo es einen Mauszeiger gibt. Am Telefon loest :hover sonst beim
   Scrollen aus und der Hinweis bleibt haengen. */
@media (hover: hover) {
    [data-tip]:hover::after,
    [data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
}

/* Diagramme: dieselbe Sprechblase per Tipp auf die Säule. */
.chart__group.is-active .chart__tip { opacity: 1; }

/* Umschalter zwischen zwei Auflösungen einer Auswertung.
   Bewusst Links statt Formularknöpfe: der Zustand steht damit in der
   Adresse und lässt sich als Lesezeichen ablegen oder weitergeben. */

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.tabs__item {
    padding: 8px 14px;
    text-decoration: none;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tabs__item:hover { color: var(--text); }

.tabs__item.is-active {
    color: var(--accent-text);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* Navigationspunkt als Zeichen statt Beschriftung.
   Gleiche Höhe wie die übrigen Punkte, damit die Grundlinie stimmt. */

.nav__link--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding-left: 10px;
    padding-right: 10px;
}

.nav__link--icon svg { display: block; }

/* Beitrittsformular */

.centered--wide { max-width: 720px; }

/* Vertragstext scrollt in sich: der Antrag soll nicht seitenlang werden,
   und wer unterschreibt, soll den Text gesehen haben. */
.contract {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    background: var(--surface);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 12px;
}

.signature { margin-bottom: 14px; }

.signature__pad {
    display: block;
    width: 100%;
    /* Nicht breiter als die Zeichenfläche selbst: darüber hinaus wird die
       Unterschrift beim Speichern nur wieder heruntergerechnet. */
    max-width: 600px;
    /* Die Höhe setzt das Skript im Verhältnis 3:1 zur tatsächlichen Breite.
       Der Wert hier gilt nur, bis es gelaufen ist. */
    height: 200px;
    aspect-ratio: 3 / 1;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    /* Sonst scrollt die Seite, statt dass gezeichnet wird. */
    touch-action: none;
    cursor: crosshair;
    margin-bottom: 8px;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 22px;
}

/* Falle für Automaten: für Menschen unsichtbar, aber nicht per display:none -
   manche Ausfüllhilfen überspringen versteckte Felder sonst gar nicht. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.signature__image {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
}

/* Beitrittsformular: am Desktop breit, am Telefon einspaltig.
   Die schmale Spalte der Anmeldemasken passt hier nicht — das Formular hat
   zwanzig Felder, die nebeneinander deutlich übersichtlicher stehen. */

.onboarding {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.onboarding__brand { text-align: center; margin: 0 0 20px; }
.onboarding__brand img { height: 72px; width: auto; }

.onboarding .card { padding: 26px 28px; }
.onboarding h2 { font-size: 17px; margin: 26px 0 12px; }
.onboarding h2:first-of-type { margin-top: 0; }

.lead { font-size: 15px; color: var(--text-dim); margin: 0 0 20px; }

/* Zwei Spalten ab Tablet, vier ab Desktop. auto-fit statt fester Zahl:
   so passt es sich der Breite an, ohne Umbruchpunkte zu pflegen. */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0 18px;
}

.grid__full { grid-column: 1 / -1; }

.anlage {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px 12px;
    margin-bottom: 14px;
}

.anlage legend {
    font-weight: 600;
    font-size: 14px;
    padding: 0 6px;
}

/* Schrittleiste als durchgehendes Band.
   Die Ecken sitzen aussen am Band, nicht an jedem Abschnitt - deshalb
   overflow: hidden am Behaelter statt Radius je Element. Vorher stand hier
   zusaetzlich eine aeltere Pillen-Definition; die hat in der Mitte der
   Leiste durchgeschlagen und runde Ecken zwischen eckigen erzeugt. */

.steps {
    display: flex;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.steps__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 10px;
    color: var(--text-dim);
    text-align: center;
    border-right: 1px solid var(--border);
}

.steps__item:last-child { border-right: 0; }

.steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg);
    font-size: 12px;
    font-weight: 700;
    flex: none;
}

.steps__item.is-done { color: var(--ok); background: #f2f9f4; }
.steps__item.is-done .steps__num { background: #e9f5ec; color: var(--ok); }

.steps__item.is-active {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    border-right-color: var(--accent);
}

.steps__item.is-active .steps__num { background: rgba(255, 255, 255, 0.25); color: #fff; }

@media (max-width: 640px) {
    .steps { flex-direction: column; }
    .steps__item {
        justify-content: flex-start;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .steps__item:last-child { border-bottom: 0; }
}

/* Vorschlagsliste unter einem Eingabefeld.
   Ersetzt das datalist-Element: dessen Aufklappen bestimmt der Browser,
   meist rechts neben dem Feld, und es lässt sich nicht gestalten. */

.suggest { position: relative; }

.suggest__list {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    max-height: 260px;
    overflow-y: auto;
}

.suggest__list li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 15px;
    /* Fingergerecht: 36 Pixel Höhe sind am Telefon noch treffbar. */
    min-height: 36px;
    display: flex;
    align-items: center;
}

.suggest__list li:hover,
.suggest__list li.is-active {
    background: var(--accent);
    color: var(--on-accent);
}

@media (max-width: 640px) {
    .suggest__list { max-height: 200px; }
}

/* Zustimmungshäkchen: deutlich abgesetzt, damit es nicht im Fließtext
   untergeht. Wer hier klickt, geht eine Verpflichtung ein. */

.consent {
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 16px 0;
}

.consent label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.55;
    cursor: pointer;
}

/* Der Text gehoert in genau ein Kind des Flex-Behaelters.
   Ohne diese Huelle wird jedes <strong> zu einem eigenen Flex-Element und
   der Satz zerfaellt in Spalten - genau das war zu sehen. */
.consent__text { flex: 1; }

.consent input[type="checkbox"] {
    /* Nicht mitschrumpfen und nicht mit der ersten Zeile verrutschen. */
    flex: none;
    margin-top: 2px;
    width: 18px;
    height: 18px;
}

/* Vertragstext mit Gliederung */

.contract h3 {
    font-size: 15px;
    margin: 18px 0 6px;
    color: var(--text);
}

.contract h3:first-child { margin-top: 0; }
.contract p { margin: 0 0 10px; }

.abschnitt { margin-bottom: 14px; }
.abschnitt textarea { width: 100%; font: inherit; line-height: 1.5; }

.signature__svg { display: block; max-width: 100%; height: auto; }

/* Serverdialog beim Testversand: unverändert, wie er über die Leitung ging. */

.log {
    background: #1d2129;
    color: #e6e8eb;
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    margin: 0 0 14px;
}

/* Platzhalterliste in den Nachrichtentexten. Mehrspaltig, weil es je Text
   bis zu sechzehn sind und sie untereinander die Seite sprengen würden. */

.platzhalter {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    columns: 2;
    font-size: 13px;
    line-height: 1.8;
}

.platzhalter li { break-inside: avoid; }

@media (max-width: 640px) {
    .platzhalter { columns: 1; }
}

/* Modal für eingebettete Dokumente */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(29, 33, 41, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal__box {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 900px;
    /* Nicht höher als der Bildschirm, sonst ist die Kopfzeile nicht mehr
       erreichbar und das Modal lässt sich nur mit Escape schließen. */
    height: min(85vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 14px;
}

.modal__head span { flex: 1; }

.modal__frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #f4f5f7;
}

body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
    .modal { padding: 8px; }
    .modal__box { height: 92vh; }
}

/* Prüfseite für Vollmachten. Für ein Telefon am Eingang gedacht: große
   Aussage, wenig drumherum, alles ohne Scrollen erreichbar. */

.verify {
    max-width: 460px;
    margin: 0 auto;
    padding: 20px 16px 40px;
    text-align: center;
}

.verify__logo { margin: 0 0 20px; }
.verify__logo img { max-width: 140px; height: auto; }

.verify__result {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: var(--radius);
    padding: 18px 12px;
    margin: 0 0 16px;
}

.verify__result--good { background: #0a9c3d; color: #fff; }
.verify__result--bad  { background: #b4231f; color: #fff; }

.verify__data {
    text-align: left;
    margin: 0 0 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.verify__data dt {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px;
}

.verify__data dt:first-child { margin-top: 0; }
.verify__data dd { margin: 2px 0 0; font-size: 15px; }

.verify__note { color: var(--muted); font-size: 13px; margin: 12px 0; }

.verify__form, .verify__next {
    text-align: left;
    border-top: 1px solid var(--border);
    margin-top: 18px;
    padding-top: 16px;
}

.verify__form label, .verify__next label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.verify__form input, .verify__next input {
    width: 100%;
    margin-bottom: 10px;
}

.verify__video {
    width: 100%;
    border-radius: var(--radius);
    margin-top: 10px;
    background: #000;
}

/* Prüfziffer der Versammlung: soll vom Bildschirm abgelesen und abgetippt
   werden, deshalb groß und mit weiten Zeichenabständen. */

.pruefziffer {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.12em;
    background: var(--surface-alt, #f4f5f7);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    display: inline-block;
    margin: 0 0 12px;
}

/* Scanner am Eingang */

.scanner { margin: 18px 0; }
.scanner [data-scan-canvas] { display: none; }

.btn--wide { width: 100%; display: block; margin-bottom: 8px; }

/* Das hidden-Attribut muss stärker sein als jede eigene display-Regel.

   Der Browser setzt für [hidden] zwar display:none, aber das steht in seiner
   eigenen Stilvorlage - und jede Klasse aus dieser Datei schlägt sie. Ein
   .scanner__overlay { display: flex } machte die Auflage damit dauerhaft
   sichtbar, obwohl sie im HTML als hidden markiert war: der Bildschirm blieb
   dunkel und man sah nicht, wohin man die Kamera hält.

   Die Regel gilt bewusst für das ganze Projekt - der Fehler ist an jeder
   Stelle möglich, an der ein Element mit display-Angabe versteckt wird. */

[hidden] { display: none !important; }

/* Scanner: Ergebnis liegt auf dem Kamerabild.

   Am Eingang schaut man auf die Kamera und auf die Person davor. Ein
   Ergebnis, das unterhalb erscheint, wird übersehen - und der Knopf für die
   Identitätskontrolle erst recht. */

.scanner__stage {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    margin-bottom: 10px;
}

.scanner__video {
    display: block;
    width: 100%;
    height: auto;
    /* Hochkant halten, damit das Bild nicht springt, während die Kamera
       ihre Auflösung aushandelt. */
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.scanner__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    text-align: center;
    color: #fff;
    background: rgba(29, 33, 41, 0.94);
}

.scanner__overlay--good { background: rgba(10, 122, 45, 0.96); }
.scanner__overlay--bad  { background: rgba(150, 26, 22, 0.96); }

.scanner__verdict {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0;
}

.scanner__member {
    font-size: 30px;
    font-weight: 700;
    margin: 0;
}

.scanner__line { margin: 0; font-size: 15px; }
.scanner__hint { margin: 0; font-size: 13px; opacity: 0.85; }

.scanner__overlay .btn {
    width: 100%;
    background: #fff;
    color: #1d2129;
    border-color: #fff;
}

.scanner__overlay input[type="text"] {
    width: 100%;
    margin-bottom: 6px;
}

.scanner__overlay--done .scanner__verdict { font-size: 20px; }

/* Profilbild. Rund über CSS, nicht in der Datei: ein rundes PNG mit
   Transparenz sähe auf jedem anderen Hintergrund falsch aus. */

.avatar {
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    background: #fff;
}

.avatar--large { width: 120px; height: 120px; }
.avatar--small { width: 32px; height: 32px; }

/* Kompaktes Häkchen in einer Tabellenzeile, etwa "2/3" neben einer Frage. */

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    white-space: nowrap;
}

.usermenu__photo { flex: 0 0 auto; }

/* Vorstand: drei Spalten, weil sich sechs Funktionen gut aufteilen. */

.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 12px;
}

.board__person {
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 12px;
}

.board__photo { width: 88px; height: 88px; margin-bottom: 8px; }

.board__initial {
    width: 88px;
    height: 88px;
    margin: 0 auto 8px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-alt, #f4f5f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 600;
    color: var(--muted);
}

.board__role { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.board__name { font-weight: 600; margin: 4px 0 2px; }
.board__mail { font-size: 13px; word-break: break-word; }

@media (max-width: 700px) {
    .board { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
    .board { grid-template-columns: 1fr; }
}

/* Zweidrittelmehrheit: muss auffallen, ohne die Frage zu überlagern. */

.badge--majority {
    background: #7a3e00;
    color: #fff;
    border-color: #7a3e00;
}

.vote__majority {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.result__verdict {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
}

.result__verdict .dim { font-weight: 400; font-size: 13px; }
.result__verdict--yes { color: #0a7a2d; }
.result__verdict--no  { color: #961a16; }
.result__verdict--none { color: var(--muted); font-weight: 400; }

/* Prüfung am Eingang: die Ziffer ist das Wichtige und steht deshalb
   rechts für sich, nicht zwischen den Erklärungen. */

.entrance__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
}

.entrance__code {
    text-align: center;
    padding: 4px 0;
}

.entrance__label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

@media (max-width: 760px) {
    .entrance__grid { grid-template-columns: 1fr; }
    .entrance__code { text-align: left; }
}

.agenda__source {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 6px;
    font-style: italic;
}

/* Protokoll */

.minutes__votes {
    border-left: 3px solid var(--border);
    padding-left: 14px;
    margin: 14px 0;
}

.minutes__question { font-weight: 600; margin: 10px 0 2px; }
.minutes__result { margin: 0 0 8px; font-size: 14px; }

.minutes__remark {
    border-left: 3px solid var(--border);
    padding-left: 14px;
    margin-bottom: 10px;
}

.minutes__remark p { margin: 0 0 6px; }

.minutes__add {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.minutes__add summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.minutes__add form { margin-top: 12px; }

/* Ungespeichertes Feld: ein dezenter Rand genügt — ein Warnkasten bei jedem
   Anschlag wäre in einer Sitzung unerträglich. */

textarea.is-unsaved,
input.is-unsaved {
    border-color: #c98a00;
    box-shadow: 0 0 0 2px rgba(201, 138, 0, 0.12);
}

/* Freigabe von Anmeldungen auf der Anzeige */

.present__requests {
    margin: 24px 0;
    padding: 16px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
}

.present__request {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    flex-wrap: wrap;
}

.present__request form { display: flex; gap: 6px; }

.vote__fallback {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.vote__big { font-size: 40px; font-weight: 700; margin: 0; }


.minutes__edit { margin-top: 8px; }
.minutes__edit summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.minutes__edit form { margin-top: 10px; }

/* Erläuterung und Antwortmöglichkeiten an einer Frage */

.question-extra { margin-top: 8px; width: 100%; }
.question-extra summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.question-extra .field { margin-top: 10px; }
.question-extra [data-repeat-item] { margin-bottom: 6px; }

.table--questions textarea { width: 100%; min-height: 44px; }

.vote__description {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 12px;
}

/* Protokolltext in der Reihe: ohne Randstrich, damit er sich von einer
   Wortmeldung unterscheidet — er ist die Mitschrift, nicht ein Zitat. */

.minutes__remark--text {
    border-left: 0;
    padding-left: 0;
}

.result__threshold {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

/* Formatierter Protokolltext */

.minutes__formatted { margin: 6px 0; }
.minutes__formatted p { margin: 0 0 6px; }

.minutes__formatted h4 {
    font-size: 15px;
    margin: 12px 0 4px;
}

.minutes__formatted h4:first-child { margin-top: 0; }

.minutes__preview {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.minutes__preview summary { cursor: pointer; font-size: 13px; color: var(--muted); }

/* Formatiertes Eingabefeld fürs Protokoll.

   Die Textarea bleibt bestehen und trägt weiterhin die Auszeichnung — sie ist
   das, was abgeschickt und gespeichert wird. Ohne JavaScript arbeitet man
   direkt in ihr, deshalb wird sie nur versteckt, wenn der Editor da ist. */

.editor {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.editor__source { display: none; }

.editor__bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt, #f4f5f7);
    border-radius: var(--radius) var(--radius) 0 0;
}

.editor__btn {
    min-width: 30px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.editor__btn:hover { border-color: var(--muted); }

.editor__btn--bold { font-weight: 700; }
.editor__btn--underline { text-decoration: underline; }
.editor__btn--strikeThrough { text-decoration: line-through; }
.editor__btn--heading { font-weight: 700; }

.editor__hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.editor__area {
    padding: 10px 12px;
    min-height: 110px;
    outline: none;
    line-height: 1.5;
}

.editor__area:focus { box-shadow: inset 0 0 0 2px var(--accent-a20); }
.editor__area p { margin: 0 0 8px; }
.editor__area h4 { font-size: 15px; margin: 10px 0 6px; }
.editor__area ul { margin: 0 0 8px 20px; }

.minutes__list { margin: 0 0 8px 20px; }

/* Aufklappmenü für schmale Bildschirme.

   Über ein verstecktes Kästchen und seine Beschriftung, nicht über
   JavaScript: das Menü muss auch dann aufgehen, wenn ein Skript nicht lädt —
   sonst kommt man auf dem Telefon nirgendwohin. */

.nav__switch { position: absolute; opacity: 0; pointer-events: none; }

.nav__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 38px;
    padding: 8px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    margin-left: auto;
}

.nav__burger span {
    display: block;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.15s, opacity 0.15s;
}

/* Aufgeklappt wird aus den drei Strichen ein Kreuz — dasselbe Element
   schließt wieder, und das soll man sehen. */
.nav__switch:checked + .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__switch:checked + .nav__burger span:nth-child(2) { opacity: 0; }
.nav__switch:checked + .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Unterpunkte waagrecht wischbar statt zwei- bis dreizeilig.

   Ein umbrechendes Untermenü schiebt den Inhalt nach unten und wechselt seine
   Höhe je nach Bereich — dann springt die Seite bei jedem Wechsel. */

.subnav__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__link { flex: 0 0 auto; scroll-snap-align: start; }

@media (max-width: 860px) {
    .nav__burger { display: flex; }

    .topbar__inner { flex-wrap: wrap; }

    .nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        gap: 2px;
        padding: 8px 0 4px;
        order: 3;
    }

    .nav__switch:checked ~ .nav { display: flex; }

    .nav__link,
    .nav__link--icon {
        display: block;
        width: 100%;
        padding: 11px 12px;
    }

    /* Das Benutzermenü bleibt neben dem Burger sichtbar — es trägt das
       Abmelden, und danach sucht man nicht erst in einem Menü. */
    .usermenu { order: 2; }
}


/* Tabellen auf schmalen Bildschirmen.

   Eine Tabelle mit sechs Spalten passt auf kein Telefon. Sie zu quetschen
   macht sie unlesbar; sie seitlich scrollen zu lassen behält die Struktur.
   Der Behälter scrollt, nicht die Seite — sonst verrutscht alles andere. */

@media (max-width: 760px) {
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .table td,
    .table th { white-space: normal; }

    /* Kästchenreihen untereinander statt nebeneinander. */
    .cards { grid-template-columns: 1fr; }

    /* Formularraster einspaltig. */
    .grid { grid-template-columns: 1fr; }

    .page-head {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Knöpfe in Zeilen brauchen Luft zum Treffen. */
    .actions .btn,
    .actions button { margin-bottom: 4px; }
}

/* Reiter innerhalb einer Einstellungsgruppe.

   Dieselbe Bedienung wie das Untermenü darüber: waagrecht wischbar, nicht
   umbrechend — sonst springt der Inhalt beim Wechsel. */

.tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 18px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs__link {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 8px 8px 0 0;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    border: 1px solid transparent;
    border-bottom: 0;
}

.tabs__link:hover { color: var(--text); }

.tabs__link.is-active {
    color: var(--text);
    font-weight: 600;
    background: var(--surface);
    border-color: var(--border);
    margin-bottom: -3px;
    padding-bottom: 11px;
}

/* Zwei gleichwertige Knöpfe nebeneinander.

   Untereinander lesen sie sich wie Haupt- und Nebenweg — sind es aber nicht:
   „Zugang senden" und „Neues Startpasswort" sind zwei Wege zum selben Ziel,
   je nachdem ob eine Mailadresse hinterlegt ist. */

.btn-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: stretch;
}

.btn-row form { display: flex; }

.btn-row .btn {
    white-space: nowrap;
    display: flex;
    align-items: center;
}

@media (max-width: 560px) {
    .btn-row { flex-direction: column; }
    .btn-row form,
    .btn-row .btn { width: 100%; justify-content: center; }
}

/* Energieflüsse als waagrechte Balken.

   Ein Balken je Menge: was erzeugt wurde, und was bezogen wurde. Beide auf
   dieselbe Breite normiert — der Vergleich innerhalb einer Zeile ist der
   interessante, nicht der zwischen den Zeilen. Die Zeilen teilen zwei
   verschiedene Mengen auf; sie gegeneinander zu legen ergäbe nichts. */

.flow { margin: 0 0 20px; }

.flow__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.flow__title {
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.flow__total { font-size: 15px; font-weight: 700; }

/* Der Balken ist ein SVG: die Content-Security-Policy lässt keine
   style-Attribute zu, und eine Breite in Prozent bräuchte genau das. In SVG
   sind Breite und Farbe Attribute, kein Stil. */

.flow__bar {
    display: block;
    width: 100%;
    height: 26px;
}

.flow__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 8px;
}

.flow__item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
}

.flow__dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    align-self: center;
}

.flow__name { color: var(--muted); }
.flow__value { font-weight: 600; }
.flow__share { color: var(--muted); }

/* Zeitraumwahl unter den Balken. */

.filters--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* Veränderung gegenüber dem Vorzeitraum. Farbig, aber ohne Wertung: mehr
   Bezug vom EVU ist nicht „gut", nur anders. Deshalb dieselbe gedämpfte
   Farbe für beide Richtungen, nur das Zeichen unterscheidet. */

.flow__delta {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .flow__legend { flex-direction: column; gap: 4px; }
}

/* Bereits angemeldete Anlage in der Nachmeldung.

   Sichtbar anders als eine neue: sie steht zur Übersicht da, nicht zur
   Bearbeitung. Ohne den Unterschied tippt jemand hinein und wundert sich,
   dass nichts passiert. */

.anlage--bestand {
    background: var(--surface-alt, #f4f5f7);
    border-style: dashed;
}

.anlage--bestand input[readonly] {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
}

/* Eingebettete Fassung des Beitrittsformulars.

   Ohne eigenen Hintergrund und ohne Außenabstand: in einem iframe sitzt das
   Formular in einer fremden Seite und soll sich einfügen, nicht als Kasten
   darin stehen. */

.app--embed {
    background: transparent;
    padding: 0;
    min-height: 0;
}

.app--embed .onboarding {
    margin: 0;
    max-width: none;
    box-shadow: none;
}

/* Unsichtbare Hürde gegen automatisiertes Ausfüllen.

   Nicht display:none — ein Programm überspringt versteckte Felder oft.
   Das Feld existiert und ist bedienbar, nur für das Auge verschwunden. */

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Sicherheitsfrage im Beitrittsformular. Schmal, damit sie nicht wie ein
   Pflichtfeld unter vielen wirkt — sie ist eine Nebensache. */

.field--quiz { max-width: 340px; margin-bottom: 18px; }
.field--quiz input { max-width: 100px; }

/* Kennzeichnung der Testinstallation. Rot und oben festgeheftet: zwei gleich
   aussehende Seiten verwechselt man, und dann wird auf der falschen
   gearbeitet. */

.staging-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 6px 12px;
    background: #b42318;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* Gespiegelter Wert: sichtbar, aber nicht hier bearbeitbar. */

.wert {
    margin: 0;
    padding: 9px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
}

/* Auswahlfelder außerhalb von .field.

   Sie sahen aus wie vom Browser hingestellt, während dieselben Felder in
   einem Formular gestaltet waren — derselbe Wert, zwei Erscheinungsbilder.
   Deshalb dieselben Regeln, nur ohne die volle Breite. */

.table select,
.table input[type="text"],
.table input[type="date"],
.inline-form select,
.inline-form input[type="text"] {
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: #fff;
    color: var(--text);
    min-width: 220px;
    max-width: 100%;
}

.table select:focus,
.inline-form select:focus,
.table input:focus,
.inline-form input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

.inline-form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* Zuordnungsblock, der unter einer Tabellenzeile aufklappt.

   Abgesetzt, damit man sieht, dass er zur Zeile darüber gehört und nicht
   selbst ein Eintrag der Liste ist. */

.slideout > td {
    background: var(--surface-alt, #f4f5f7);
    border-left: 3px solid var(--accent);
    padding: 0;
}

.slideout__inner { padding: 16px 18px; }
.slideout__inner > h3:first-child { margin-top: 0; }
.slideout__inner .table { background: #fff; }

.table tr.is-active > td { font-weight: 600; }

/* Farbwaehler: das Standardfeld waere so breit wie ein Textfeld. */
input[type=color] { width: 64px; height: 36px; padding: 2px; cursor: pointer; }