/* ===========================================================================
   cms.css - Der Eintrage-Bereich hinter dem "+".
   ===========================================================================

   Nutzt durchgehend die Farbrollen aus shared/theme.css. Dadurch passt sich der Bereich
   automatisch an, wenn der Hintergrund von dunkel auf hell wechselt - hier steht keine
   einzige feste Farbe, die das durchbrechen könnte.
*/

/* Der Bereich rechnet Innenabstand und Rahmen in die Breite ein. master.css setzt das ohnehin
   für die ganze Seite - hier steht es noch einmal für den Bereich selbst, damit cms.css nicht
   stillschweigend davon abhängt, dass eine andere Datei vorher geladen wurde. */
.cms-overlay,
.cms-overlay *,
.cms-overlay *::before,
.cms-overlay *::after {
    box-sizing: border-box;
}

/* --- ÜBERLAGERUNG --------------------------------------------------------- */

.cms-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;                 /* über der Kopfzeile, unter dem Vorschalter */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 92px 16px 24px;       /* oben Platz für die feste Kopfzeile */
    background: var(--scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    -webkit-overflow-scrolling: touch;
}

.cms-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

/* Solange der Bereich offen ist, soll die Liste dahinter nicht mitscrollen. */
body.cms-open {
    overflow: hidden;
}

.cms-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-bottom: 40px;
    padding: 28px 26px 30px;
    border-radius: 22px;
    border: 1px solid var(--glass-edge);
    background: var(--glass-tint);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: var(--glass-shadow);
    color: var(--text-main);
    transform: translateY(14px);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.cms-overlay.is-open .cms-panel {
    transform: translateY(0);
}

.cms-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(var(--ink), 0.22);
    background: rgba(var(--ink), 0.08);
    color: var(--text-main);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cms-close:hover {
    background: rgba(var(--ink), 0.2);
}

/* --- TEXTE ---------------------------------------------------------------- */

.cms-title {
    margin: 0 0 6px;
    padding-right: 40px;           /* Platz für den Schliessen-Knopf */
    font-size: 1.45rem;
    font-weight: 600;
    text-shadow: 0 2px 6px var(--ink-shadow);
}

.cms-subtitle {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 600;
}

.cms-intro,
.cms-hint {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.cms-hint {
    margin: -4px 0 16px;
    font-size: 0.84rem;
}

.cms-loading,
.cms-empty {
    padding: 22px 0;
    text-align: center;
    color: var(--text-muted);
}

/* --- FORMULAR ------------------------------------------------------------- */

.cms-form {
    display: flex;
    flex-direction: column;
}

/* <label> ist von Haus aus ein Zeilenelement. Ohne display:block stellt sich ein kurzes
   Eingabefeld NEBEN seine Beschriftung, und die nächste Beschriftung gleich daneben - die
   Einstellungen liefen dadurch als Fliesstext ineinander. Bei den breiten Feldern fiel es nicht
   auf, weil ein Feld über die volle Breite die Zeile ohnehin umbricht. */
.cms-label {
    display: block;
    margin: 12px 0 5px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-muted);
}

.cms-input,
.cms-file {
    width: 100%;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid rgba(var(--ink), 0.25);
    background: rgba(var(--ink), 0.08);
    color: var(--text-main);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cms-input::placeholder {
    color: rgba(var(--ink), 0.45);
}

.cms-input:focus,
.cms-file:focus {
    outline: none;
    border-color: rgba(var(--ink), 0.55);
    background: rgba(var(--ink), 0.14);
}

.cms-textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.5;
}

/* Der Datums-Wähler bringt in der dunklen Fassung ein schwarzes Kalendersymbol mit. */
.cms-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: var(--icon-filter);
    cursor: pointer;
}

.cms-file {
    padding: 9px 12px;
    font-size: 0.9rem;
    cursor: pointer;
}

.cms-file::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    border-radius: 9px;
    border: 1px solid rgba(var(--ink), 0.28);
    background: rgba(var(--ink), 0.12);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}

/* Das grosse Feld für den Zahlencode: weit auseinandergezogene Ziffern. */
.cms-code-input {
    width: 100%;
    padding: 16px 10px;
    border-radius: 14px;
    border: 1px solid rgba(var(--ink), 0.28);
    background: rgba(var(--ink), 0.1);
    color: var(--text-main);
    font-size: 2rem;
    font-family: inherit;
    letter-spacing: 0.5em;
    text-indent: 0.5em;            /* gleicht den Abstand hinter der letzten Ziffer aus */
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cms-code-input:focus {
    outline: none;
    border-color: rgba(var(--ink), 0.6);
    background: rgba(var(--ink), 0.16);
}

.cms-code-input::placeholder {
    color: rgba(var(--ink), 0.25);
}

/* --- BILDVORSCHAU --------------------------------------------------------- */

.cms-preview {
    margin-top: 12px;
    text-align: center;
}

.cms-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 12px;
    border: 1px solid var(--glass-edge);
    display: block;
    margin: 0 auto 8px;
}

/* --- KNÖPFE --------------------------------------------------------------- */

.cms-btn {
    margin-top: 20px;
    padding: 13px 22px;
    border-radius: 13px;
    border: 1px solid rgba(var(--ink), 0.3);
    background: rgba(var(--ink), 0.16);
    color: var(--text-main);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.cms-btn:hover:not(:disabled) {
    background: rgba(var(--ink), 0.28);
}

.cms-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.cms-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.cms-btn-small {
    margin-top: 0;
    padding: 11px 16px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.cms-btn-ghost {
    background: transparent;
}

.cms-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cms-actions .cms-btn {
    flex: 1 1 140px;
}

.cms-link-btn {
    padding: 0;
    border: none;
    background: none;
    color: var(--text-main);
    font: inherit;
    font-size: 0.88rem;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.8;
}

.cms-link-btn:hover {
    opacity: 1;
}

.cms-danger[data-armed="yes"] {
    font-weight: 700;
    opacity: 1;
}

/* --- MELDUNGEN ------------------------------------------------------------ */

.cms-message {
    display: none;
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 11px;
    font-size: 0.9rem;
    line-height: 1.45;
    background: var(--panel-bg);
    border: 1px solid rgba(var(--ink), 0.2);
}

.cms-message.is-visible {
    display: block;
}

.cms-message.success {
    border-color: rgba(var(--ink), 0.35);
}

/* --- ADMIN-BEREICH -------------------------------------------------------- */

.cms-section {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--ink), 0.16);
}

.cms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cms-table th {
    padding: 0 8px 7px 0;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(var(--ink), 0.18);
}

.cms-table td {
    padding: 9px 8px 9px 0;
    border-bottom: 1px solid rgba(var(--ink), 0.1);
    vertical-align: top;
}

.cms-table td:last-child,
.cms-table th:last-child {
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
}

.cms-num {
    white-space: nowrap;
    color: var(--text-muted);
}

.cms-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 20px;
    border: 1px solid rgba(var(--ink), 0.25);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.cms-inline-form {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.cms-inline-form .cms-input {
    flex: 1 1 160px;
    width: auto;
}

.cms-inline-form .cms-input-code {
    flex: 0 0 110px;
    letter-spacing: 0.12em;
    text-align: center;
}

/* --- SCHMALE BILDSCHIRME -------------------------------------------------- */

@media (max-width: 600px) {
    .cms-overlay {
        padding: 78px 10px 16px;
    }

    .cms-panel {
        padding: 24px 18px 26px;
        border-radius: 18px;
    }

    .cms-code-input {
        font-size: 1.6rem;
        letter-spacing: 0.34em;
        text-indent: 0.34em;
    }

    /* Die Tabellen brauchen auf dem Handy jeden Millimeter. */
    .cms-table {
        font-size: 0.84rem;
    }

    .cms-table th:nth-child(2),
    .cms-table td:nth-child(2) {
        width: 100%;
    }

    .cms-inline-form .cms-input-code {
        flex: 1 1 100px;
    }
}

/* --- GEWÄHLTE BILDER ------------------------------------------------------
   Miniaturen der bereits aufbereiteten Bilder. Angezeigt wird, was tatsächlich hochgeht -
   also die verkleinerte Fassung samt ihrer Masse und Grösse, nicht die Originaldatei. */

.cms-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.cms-thumb {
    position: relative;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--glass-edge);
    background: rgba(var(--ink), 0.08);
}

.cms-thumb img {
    display: block;
    width: 100%;
    height: 78px;
    object-fit: cover;
}

.cms-thumb figcaption {
    padding: 4px 6px;
    font-size: 0.68rem;
    line-height: 1.3;
    text-align: center;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cms-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.cms-thumb-remove:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* --- ÜBERSICHT ------------------------------------------------------------ */

.cms-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cms-menu .cms-btn {
    margin-top: 0;
}

/* --- ZEITRAUM -------------------------------------------------------------
   Zwei Datumsfelder nebeneinander. Auf schmalen Bildschirmen brechen sie um, das Wort "bis"
   bleibt dann als Zeile dazwischen stehen. */

.cms-daterange {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cms-daterange .cms-input {
    flex: 1 1 140px;
    width: auto;
}

.cms-daterange-sep {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- EIGENE EINTRÄGE ------------------------------------------------------ */

.cms-entries {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.cms-entry {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--ink), 0.12);
}

.cms-entry:last-child {
    border-bottom: none;
}

.cms-entry-text {
    min-width: 0;      /* lässt lange Titel umbrechen statt die Zeile zu sprengen */
}

.cms-entry-text strong {
    display: block;
    margin: 4px 0 2px;
    font-weight: 600;
    line-height: 1.35;
}

.cms-entry-meta {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.cms-entry-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* --- BESUCHE --------------------------------------------------------------
   Vier Kennzahlen als Kacheln, der Verlauf als Säulenreihe, die Aufschlüsselungen als Listen
   mit Anteilsbalken.

   Alle Balken tragen dieselbe Farbe. Sie zeigen eine Menge, keine Zugehörigkeit - verschiedene
   Farben würden eine Unterscheidung behaupten, die es hier nicht gibt, und wären für einen Teil
   der Betrachter ohnehin nicht auseinanderzuhalten. Die Länge trägt die Aussage, die Zahl
   daneben macht sie ablesbar. */

.stat-kacheln {
    display: grid;
    /* Auf dem Handy zwei mal zwei. Automatisch verteilt ergäbe sich dort eine Reihe zu drei und
       eine einzelne darunter - und "4:49 min" bräche in der schmalen Kachel um. */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 2px 0 10px;
}

@media (min-width: 620px) {
    .stat-kacheln {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stat-kachel {
    padding: 15px 14px 13px;
    border-radius: 14px;
    border: 1px solid rgba(var(--ink), 0.13);
    background: rgba(var(--ink), 0.06);
}

.stat-kachel-wert {
    display: block;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    /* Bewusst KEIN tabular-nums: Gleich breite Ziffern lassen eine grosse Zahl wie "121"
       auseinandergezogen wirken. Für ausgerichtete Zahlenspalten gilt das Gegenteil - siehe
       .stat-zahl und .cms-num. */
}

.stat-kachel-wert small {
    font-size: 0.55em;
    font-weight: 500;
    margin-left: 1px;
    color: var(--text-muted);
}

.stat-kachel-name {
    display: block;
    margin-top: 5px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* --- VERLAUF: EINE SÄULE JE TAG ------------------------------------------- */

.verlauf {
    display: flex;
    align-items: flex-end;
    gap: 2px;                      /* der trennende Zwischenraum, kein Rahmen um die Säulen */
    height: 116px;
    margin-top: 12px;
    padding-top: 16px;             /* Platz für die Zahl über der höchsten Säule */
    border-bottom: 1px solid rgba(var(--ink), 0.16);   /* die Grundlinie, haarfein */
}

.verlauf-tag {
    position: relative;
    flex: 1 1 0;
    max-width: 24px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.verlauf-saeule {
    display: block;
    width: 100%;
    min-height: 2px;
    /* Oben gerundet, unten eckig: Die Säule sitzt auf der Grundlinie auf. */
    border-radius: 4px 4px 0 0;
    background: rgba(var(--ink), 0.32);
    transition: background 0.15s ease;
}

.verlauf-saeule.is-spitze {
    background: rgba(var(--ink), 0.62);
}

.verlauf-tag:hover .verlauf-saeule {
    background: rgba(var(--ink), 0.72);
}

/* Nur der höchste Tag wird beschriftet. Eine Zahl über jeder Säule läse niemand. */
.verlauf-marke {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.verlauf-achse {
    display: flex;
    justify-content: space-between;
    margin: 6px 0 14px;         /* unten Luft, sonst klebt der Erklärtext an der Achse */
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.stat-liste {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.stat-liste li {
    display: grid;
    grid-template-columns: minmax(64px, 30%) 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 0.86rem;
}

.stat-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.stat-balken {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: rgba(var(--ink), 0.09);
}

.stat-balken > span {
    display: block;
    height: 100%;
    /* Am Anfang eckig, am Ende gerundet - das gerundete Ende ist das Ende des Werts. */
    border-radius: 2px 4px 4px 2px;
    background: rgba(var(--ink), 0.42);
}

.stat-zahl {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.stat-zahl small {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
}



/* --- ZUGÄNGE IN DER VERWALTUNG --------------------------------------------
   Je Zugang eine Karte statt einer Tabellenzeile: Name, Modus, Code, Adresse und eine
   mehrzeilige Beschreibung passen in keine Tabelle mehr, ohne dass eine Spalte zerquetscht
   wird. Zum Ändern klappt an derselben Stelle ein Formular auf - man verliert den Zusammenhang
   nicht, weil nichts wegspringt. */

.zugang-liste {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.zugang {
    padding: 13px 14px 11px;
    border-radius: 13px;
    border: 1px solid rgba(var(--ink), 0.13);
    background: rgba(var(--ink), 0.05);
}

.zugang-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.zugang-name {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.zugang-daten {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-top: 7px;
    font-size: 0.85rem;
}

.zugang-mail {
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.zugang-ohne {
    font-style: italic;
    color: var(--text-muted);
    letter-spacing: normal;
    user-select: auto;
}

.zugang-text {
    margin: 8px 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.zugang-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-top: 10px;
}

.zugang-fuss .cms-hint {
    margin: 0;
}

.zugang-knoepfe {
    display: flex;
    gap: 14px;
}

/* Das aufgeklappte Formular sitzt in der Karte und ist davon abgesetzt. */
.zugang-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--ink), 0.14);
}

.zugang-form .cms-label:first-child {
    margin-top: 0;
}

.zugang-form .cms-actions {
    align-items: center;
}

/* Ein hidden-Attribut muss stärker sein als jedes display der Regeln darüber. */
.zugang-form[hidden] {
    display: none;
}

/* Das Anlegen-Formular unter der Liste. */
.zugang-neu {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--ink), 0.14);
}

.cms-subtitle-klein {
    margin: 0 0 2px;
    font-size: 0.92rem;
    font-weight: 600;
}

/* --- WO DIE DATEN LIEGEN -------------------------------------------------- */

.lage {
    margin: 0 0 8px;
    padding: 11px 13px;
    border-radius: 11px;
    border: 1px solid rgba(var(--ink), 0.18);
    background: rgba(var(--ink), 0.06);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Der gute Fall bekommt einen kräftigeren Rand - er soll auf einen Blick erkennbar sein. */
.lage-gut {
    border-color: rgba(var(--ink), 0.38);
}

.lage code,
.cms-hint code {
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(var(--ink), 0.1);
    font-size: 0.92em;
    overflow-wrap: anywhere;
}

/* --- EIN FRISCH VERGEBENER CODE -------------------------------------------
   Diese Anzeige ist die einzige Gelegenheit, den Code zu sehen: Gespeichert wird nur sein Hash.
   Entsprechend ist sie kein Meldungsstreifen, sondern ein Block, der stehen bleibt, bis er
   weggeklickt wird - und der Code darin ist gross, gesperrt und mit einem Klick markierbar. */

.admin-einmal {
    margin: 14px 0 4px;
    padding: 16px 18px 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--ink), 0.3);
    background: rgba(var(--ink), 0.09);
}

.admin-einmal[hidden] {
    display: none;
}

.einmal-kopf {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.einmal-code {
    margin: 6px 0 8px;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    /* Zum Weitergeben will man ihn mit einem Klick markieren können. */
    user-select: all;
    overflow-wrap: anywhere;
}

.einmal-text {
    margin: 0 0 12px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* --- ZUGANG BEANTRAGEN ---------------------------------------------------- */

/* Die Bestätigung nach dem Antrag. Sie ist die einzige Rückmeldung, die jemand bekommt -
   entsprechend deutlich abgesetzt. */
.cms-erfolg {
    padding: 16px 18px 6px;
    border-radius: 14px;
    border: 1px solid rgba(var(--ink), 0.2);
    background: rgba(var(--ink), 0.07);
}

.cms-erfolg .cms-title {
    margin-top: 0;
}

.cms-zentriert {
    text-align: center;
}

/* Die Falle für Maschinen: für Menschen unsichtbar, aber nicht per display:none - manche
   Ausfüllhelfer überspringen ausgeblendete Felder und tappen sonst nicht hinein. Aus dem Bild
   geschoben und von der Tastaturbedienung ausgenommen. */
.cms-honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Die Vorstellung im Antrag - mehrzeilig, mit Abstand zur Kopfzeile des Eintrags. */
.cms-entry-text-lang {
    display: block;
    margin-top: 6px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
    /* Zeilenumbrüche des Absenders bleiben erhalten, lange Wörter sprengen nichts. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ===========================================================================
   GRÖSSERE ANSICHT AUF DEM SCHREIBTISCH
   ===========================================================================

   Auf dem Handy ist der schmale Streifen richtig - dort gibt es nichts Breiteres. Auf einem
   grossen Bildschirm verschenkte er dagegen viel Platz: Tabellen mussten umbrechen, und die
   Verwaltung wurde zu einer sehr langen Spalte. Der Bereich wächst deshalb mit dem Fenster,
   und die Verwaltung nutzt die Breite für zwei Spalten. */

@media (min-width: 900px) {
    .cms-overlay {
        padding: 84px 24px 32px;
    }

    .cms-panel {
        max-width: 820px;
        padding: 34px 34px 32px;
    }

    .cms-title {
        font-size: 1.6rem;
    }
}

@media (min-width: 1300px) {
    .cms-panel {
        max-width: 1000px;
    }
}

/* Die Verwaltung bekommt mehr Platz als das Eintrage-Formular: Sie zeigt Tabellen und zwei
   Spalten, das Formular ist eine einzelne Eingabespalte und würde in der Breite zerfallen. */
@media (min-width: 900px) {
    .cms-panel:has(.admin-reiter) {
        max-width: 980px;
    }
}

@media (min-width: 1400px) {
    .cms-panel:has(.admin-reiter) {
        max-width: 1180px;
    }
}

/* ===========================================================================
   DIE VERWALTUNG: EINE OBERFLÄCHE MIT REITERN
   ===========================================================================

   Kopf und Reiterleiste stehen still, nur der Inhalt darunter wird getauscht. Deshalb sind sie
   hier auch gestalterisch das Feste: eine Trennlinie unter der Leiste, die durchläuft, und ein
   Strich unter dem offenen Reiter, der sie an genau einer Stelle unterbricht. */

.admin-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    /* Rechts sitzt der Schliessen-Knopf des Bereichs - "abmelden" weicht ihm aus. */
    padding-right: 34px;
}

/* Damit ein langer Titel den Abmelden-Verweis nicht aus der Zeile drückt. */
.admin-kopf-text {
    min-width: 0;
}

.admin-kopf .cms-title {
    margin-bottom: 2px;
}

.admin-wer {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.admin-kopf .cms-link-btn {
    flex: none;
    margin-top: 4px;
}

.admin-reiter {
    display: flex;
    gap: 4px;
    margin: 18px 0 0;
    border-bottom: 1px solid rgba(var(--ink), 0.16);
    /* Auf schmalen Geräten dürfen die Reiter seitlich wandern statt umzubrechen. */
    overflow-x: auto;
    scrollbar-width: none;
}

.admin-reiter::-webkit-scrollbar {
    display: none;
}

.admin-reiter-knopf {
    position: relative;
    flex: none;
    padding: 9px 14px 10px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.admin-reiter-knopf:hover {
    color: var(--text-main);
    background: rgba(var(--ink), 0.05);
}

.admin-reiter-knopf:focus-visible {
    outline: 2px solid rgba(var(--ink), 0.5);
    outline-offset: -2px;
}

.admin-reiter-knopf[aria-selected="true"] {
    color: var(--text-main);
    font-weight: 600;
}

/* Der Strich sitzt AUF der Trennlinie der Leiste und unterbricht sie - dadurch wirkt der offene
   Reiter mit dem Inhalt darunter verbunden. */
.admin-reiter-knopf[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: rgba(var(--ink), 0.72);
}

.admin-inhalt {
    padding-top: 4px;
}

.admin-inhalt:focus {
    outline: none;
}

/* Der Zeitraum steht unter den Kacheln und gehört zu ihnen - nicht zum ersten Abschnitt. */
.admin-zeitraum {
    margin-top: 0;
    margin-bottom: 2px;
}

/* Zwei kurze Felder nebeneinander, wo sie inhaltlich zusammengehören. */
.cms-feldpaar {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.cms-feldpaar > div {
    flex: 1 1 180px;
}

.cms-feldpaar > div:last-child {
    flex: 0 0 auto;
}

/* Die Speicherzeile am Fuss der Einstellungen. */
.admin-absenden {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--ink), 0.14);
}

.admin-absenden .cms-hint {
    margin: 0;
}

/* Was nicht zum Formular gehört, wird davon abgesetzt - hier das Passwort der Verwaltung. */
.admin-abgesetzt {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(var(--ink), 0.14);
}

/* Zwei Spalten im Inhalt der Reiter. Nur Abschnitte werden nebeneinander gesetzt; was oben steht
   und was jemanden aufhält, bekommt die volle Breite (.admin-voll). */
@media (min-width: 900px) {
    .admin-raster {
        display: grid;
        /* minmax(0, 1fr) statt 1fr: Sonst darf eine breite Tabelle ihre Spalte aufblähen, und
           die beiden Spalten stehen ungleich - gemessen 343 zu 404 Pixel. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 34px;
        align-items: start;
    }

    .admin-raster > .admin-voll {
        grid-column: 1 / -1;
    }

    .admin-raster > .cms-section {
        margin-top: 24px;
    }
}

/* --- FREIGABE ------------------------------------------------------------- */

/* Was jemanden aufhält, wird abgesetzt - nicht schreiend, aber sichtbar. */
.cms-section-hervor {
    padding: 18px 18px 4px;
    border: 1px solid rgba(var(--ink), 0.22);
    border-radius: 14px;
    background: rgba(var(--ink), 0.06);
}

.cms-tag-wartet {
    border-color: rgba(var(--ink), 0.45);
    color: var(--text-main);
    font-weight: 600;
}

/* Umschalter in der Zugangsliste: sieht aus wie eine Angabe, ist aber ein Knopf. */
.cms-schild {
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(var(--ink), 0.28);
    background: rgba(var(--ink), 0.08);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.74rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.cms-schild:hover {
    background: rgba(var(--ink), 0.2);
    border-color: rgba(var(--ink), 0.5);
}

.cms-schild.is-frei {
    color: var(--text-main);
    border-style: dashed;
}

/* --- SCHALTER MIT ERKLÄRUNG ----------------------------------------------- */

.cms-schalter {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 14px 0 4px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(var(--ink), 0.16);
    background: rgba(var(--ink), 0.06);
    cursor: pointer;
}

.cms-schalter input {
    /* Genug Fläche zum Treffen, auch mit dem Finger. */
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: rgb(var(--ink));
    cursor: pointer;
}

.cms-schalter strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.cms-schalter small {
    display: block;
    margin-top: 3px;
    font-size: 0.79rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.cms-schalter-schmal {
    margin-top: 12px;
}

/* --- EINSTELLUNGEN UND ZUGANG --------------------------------------------- */

/* Zahlenfelder brauchen nicht die volle Breite - so ist auf einen Blick klar, dass dort eine
   kleine Zahl steht und kein Satz. */
.cms-input-kurz {
    max-width: 160px;
}

/* Das Anmeldefeld nimmt jetzt Code und Passwort an. Die weit auseinandergezogenen Ziffern von
   früher passen dazu nicht mehr - ein Passwort liest sich so nicht. */
.cms-zugang-input {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 14px 14px;
}

/* Innerhalb eines Formulars sollen die Abschnitte nicht wie eigene Karten wirken. */
#cms-einst-form .cms-section:first-of-type {
    margin-top: 8px;
    padding-top: 0;
    border-top: none;
}

/* ===========================================================================
   RICHTUNG "TAFEL"
   ===========================================================================

   Der Eintrage- und Verwaltungsbereich war für die Glas-Fassung gebaut: Flächen aus
   rgba(--ink, 0.1), Ränder aus rgba(--ink, 0.25). Über die Rollen in theme.css sitzt er schon
   auf Papier - aber gemessen kam dabei ein Hauptknopf in Grau heraus (rgba(28,26,23,0.16)) und
   ein Eingabefeld mit dunkelgrauem Rand. Beides passt nicht: Der Hauptknopf ist die einzige
   Stelle, an der etwas geschieht, und ein Rand muss eine Haarlinie sein, kein Balken.

   Deshalb hier, am Ende der Datei, die Rollen aus dem neuen System - ausdrücklich, nicht über
   Umwege. */

.cms-btn {
    background: var(--akzent);
    border-color: transparent;
    color: var(--auf-akzent);
    font-family: var(--schrift-text);
    box-shadow: none;
}

.cms-btn:hover:not(:disabled) {
    background: var(--akzent-tief);
    color: var(--auf-akzent);
}

.cms-btn-ghost {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    color: var(--tinte);
}

.cms-btn-ghost:hover:not(:disabled) {
    background: var(--flaeche);
    border-color: var(--akzent);
    color: var(--akzent);
}

.cms-input,
.cms-file {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    color: var(--tinte);
    font-family: var(--schrift-text);
    border-radius: 10px;
}

.cms-input:focus,
.cms-file:focus {
    border-color: var(--akzent);
    background: var(--flaeche);
    outline: none;
}

.cms-input::placeholder {
    color: var(--leise);
}

.cms-panel {
    background: var(--papier);
    border: 1px solid var(--linie);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 16px;
}

.cms-overlay {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.cms-title {
    font-family: var(--schrift-titel);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.cms-subtitle,
.cms-subtitle-klein {
    font-family: var(--schrift-text);
}

.cms-link-btn {
    color: var(--akzent);
}

.cms-link-btn:hover {
    color: var(--akzent-tief);
}

.cms-danger,
.cms-danger:hover {
    color: var(--tinte);
}

.cms-table th {
    color: var(--leise);
}

.cms-table td,
.cms-table th {
    border-color: var(--linie-fein);
}

/* Der Reiterstrich der Verwaltung nimmt die Akzentfarbe statt der Tinte. */
.admin-reiter-knopf[aria-selected="true"]::after {
    background: var(--akzent);
}

.zugang,
.stat-kachel,
.admin-einmal,
.cms-section-hervor,
.lage {
    background: var(--flaeche);
    border-color: var(--linie);
}

.zugang-code,
.einmal-code {
    font-family: var(--schrift-text);
}

/* Die Balken der Besuchsauswertung: eine Farbe, die Länge trägt die Aussage. */
.stat-balken > span,
.verlauf-saeule {
    background: var(--akzent);
    opacity: 0.55;
}

.verlauf-saeule.is-spitze {
    opacity: 1;
}

.stat-balken {
    background: var(--linie-fein);
}

.verlauf {
    border-bottom-color: var(--linie);
}