:root {
    --hintergrund: #F2F2F7;
    --karte: #FFFFFF;
    --text: #000000;
    --text-schwach: #6C6C70;
    --trennlinie: rgba(60, 60, 67, .29);
    --aktion: #007AFF;
    --erfolg: #34C759;
    --hinweis: #FF9500;
    --gefahr: #FF3B30;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hintergrund: #000000;
        --karte: #1C1C1E;
        --text: #FFFFFF;
        --text-schwach: #8E8E93;
        --trennlinie: rgba(84, 84, 88, .6);
        --aktion: #0A84FF;
        --erfolg: #30D158;
        --hinweis: #FF9F0A;
        --gefahr: #FF453A;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--hintergrund);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.4;
}

body {
    padding-bottom: 70px;
}

/* Ab Tablet-Breite: Seite in einem Telefonrahmen zeigen, damit klar bleibt,
   dass es sich um eine mobile Seite handelt. Unterhalb der Breite (das
   eigentliche Zielgerät) bleibt alles wie gehabt, ohne Rahmen. */
@media (min-width: 700px) {
    html, body {
        background: #E5E5EA;
    }

    body {
        padding: 24px 12px;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .telefon-rahmen {
        position: relative;
        width: 390px;
        height: 844px;
        max-height: 94vh;
        background: #1c1c1e;
        border-radius: 44px;
        padding: 11px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    }

    .telefon-rahmen::before {
        content: '';
        position: absolute;
        top: 21px;
        left: 50%;
        transform: translateX(-50%);
        width: 118px;
        height: 32px;
        background: #1c1c1e;
        border-radius: 20px;
        z-index: 1;
    }

    .telefon-bildschirm {
        height: 100%;
        background: var(--hintergrund);
        border-radius: 33px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .telefon-bildschirm .inhalt {
        flex: 1;
    }

    .telefon-bildschirm .kopf {
        padding-top: 40px;
    }

    .telefon-bildschirm .tableiste {
        position: sticky;
    }
}

.kopf {
    padding: 12px 16px 4px;
}

.kopf h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 8px 0;
}

.inhalt {
    padding: 0 16px 24px;
    max-width: 600px;
    margin: 0 auto;
}

.karte-gruppe {
    background: var(--karte);
    border-radius: 12px;
    margin: 16px 0;
    overflow: hidden;
}

/* Zeilen innerhalb einer Karte teilen sich die Karte ohne Trennlinie —
   Trennung entsteht nur zwischen verschiedenen .karte-gruppe-Karten
   (durch deren Außenabstand), nicht innerhalb einer Gruppe. */
.karte-zeile {
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.beschriftung {
    font-size: 13px;
    color: var(--text-schwach);
    text-transform: uppercase;
    padding: 0 16px;
    margin: 16px 0 4px;
}

.merkkasten {
    background: var(--karte);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    border-left: 4px solid var(--hinweis);
}

.merkkasten .titel {
    font-weight: 600;
    margin-bottom: 4px;
}

.hinweiskasten-blau {
    background: rgba(0, 122, 255, .12);
    color: var(--aktion);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 15px;
    line-height: 1.4;
}

@media (prefers-color-scheme: dark) {
    .hinweiskasten-blau {
        background: rgba(10, 132, 255, .2);
    }
}

details.aufklapp {
    background: var(--karte);
    border-radius: 12px;
    margin: 8px 0;
    overflow: hidden;
}

details.aufklapp summary {
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
}

details.aufklapp summary::-webkit-details-marker { display: none; }

details.aufklapp summary::after {
    content: '›';
    transform: rotate(90deg);
    color: var(--text-schwach);
    font-size: 20px;
    transition: transform 150ms;
}

details.aufklapp[open] summary::after {
    transform: rotate(270deg);
}

/* Die Höhen-Animation beim Auf-/Zuklappen übernimmt app.js über die Web
   Animations API (details.animate). Ohne JavaScript klappt <details> nativ
   und sofort auf — das bleibt die Grundlage, falls JS mal fehlt. */
.aufklapp-inhalt-innen {
    padding: 12px 16px 16px;
    color: var(--text-schwach);
    border-top: 0.5px solid var(--trennlinie);
}

.kurz {
    color: var(--text-schwach);
    font-size: 15px;
}

a, .link {
    color: var(--aktion);
    text-decoration: none;
}

.knopf {
    display: inline-block;
    background: var(--aktion);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 17px;
    min-height: 44px;
    cursor: pointer;
    text-align: center;
}

.knopf.sekundaer {
    background: transparent;
    color: var(--aktion);
    border: 1px solid var(--aktion);
}

.knopf.erfolg { background: var(--erfolg); }

.formular label {
    display: block;
    font-size: 13px;
    color: var(--text-schwach);
    margin: 12px 0 4px;
}

.formular input[type=text],
.formular input[type=password],
.formular textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 17px;
    border: 0.5px solid var(--trennlinie);
    border-radius: 10px;
    background: var(--hintergrund);
    color: var(--text);
    font-family: inherit;
}

.formular textarea {
    min-height: 80px;
    resize: vertical;
}

.zeichenzahl {
    font-size: 13px;
    color: var(--text-schwach);
    text-align: right;
}

.hinweis {
    font-size: 13px;
    color: var(--text-schwach);
    margin-top: 8px;
}

.fehler {
    color: var(--gefahr);
    font-size: 15px;
    margin: 8px 0;
}

.erfolgsmeldung {
    color: var(--erfolg);
    font-size: 15px;
    margin: 8px 0;
}

.fortschritt {
    height: 6px;
    background: var(--trennlinie);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}

.fortschritt-balken {
    height: 100%;
    background: var(--erfolg);
}

.grow {
    flex: 1;
    min-width: 0;
}

.opt-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
}

.opt-eingabe {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.opt-box {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 7px;
    border: 1.5px solid var(--text-schwach);
    display: flex;
    align-items: center;
    justify-content: center;
}

.opt-eingabe:checked + .opt-box {
    background: var(--erfolg);
    border-color: var(--erfolg);
}

.opt-eingabe:checked + .opt-box::after {
    content: '\2713';
    color: #fff;
    font-size: 15px;
}

.opt-eingabe:focus-visible + .opt-box {
    outline: 2px solid var(--aktion);
    outline-offset: 2px;
}

.daumen {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--hintergrund);
    border: 1px solid var(--trennlinie);
    color: var(--text);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 15px;
    min-height: 36px;
    white-space: nowrap;
    cursor: pointer;
}

.daumen.on,
.daumen:disabled {
    background: var(--aktion);
    border-color: var(--aktion);
    color: #fff;
    opacity: 1;
}

.tableiste {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: var(--karte);
    border-top: 0.5px solid var(--trennlinie);
    padding-bottom: env(safe-area-inset-bottom);
}

.tableiste a {
    flex: 1;
    text-align: center;
    padding: 10px 4px;
    font-size: 13px;
    color: var(--text-schwach);
    min-height: 44px;
}

.tableiste a.aktiv {
    color: var(--aktion);
    font-weight: 600;
}