/* betabrain Datenschutzportal
 *
 * Farben und Schrift stammen aus dem Theme der Hauptseite
 * (themes/betabrain/build/style.css): Petrol #00a09b als Akzent,
 * #646363 für Fließtext, Ubuntu als Schrift.
 *
 * Ruhig und dicht. Formulare sind das Herzstück, deshalb großzügige
 * Zeilenabstände und ein sichtbarer Fokus. Keine Animationen.
 */

:root {
    --accent: #00a09b;
    --accent-dark: #007f7b;
    --text: #333232;
    --text-muted: #646363;
    --line: #d7d7d7;
    --surface: #ffffff;
    --page: #f4f5f5;
    --error: #a94442;
    --error-bg: #fdf3f3;
    --ok: #3c763d;
    --radius: 3px;
    --space: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    /* Ubuntu wie die Hauptseite; die Ersatzschriften decken den Fall ab,
       dass sie nicht installiert ist — eingebunden wird sie nicht, das
       hieße eine Verbindung zu Google Fonts. */
    font-family: Ubuntu, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--page);
}

h1, h2, h3 { line-height: 1.25; color: var(--text); }
h1 { font-size: 1.6rem; margin: 0 0 1.5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }

a { color: var(--accent-dark); }
a:hover { color: var(--accent); }

/* Der Fokus muss sichtbar sein — die Anwendung ist vollständig mit der
   Tastatur bedienbar. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    background: var(--surface);
    padding: .5rem 1rem;
    border: 2px solid var(--accent);
}

.page-plain {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: var(--space);
}

.panel {
    width: 100%;
    max-width: 26rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
}

.form-stack { display: flex; flex-direction: column; gap: 1.25rem; }

.field { display: flex; flex-direction: column; gap: .35rem; }

label { font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
    font: inherit;
    color: inherit;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    width: 100%;
}

input:focus, select:focus, textarea:focus { border-color: var(--accent); }

.button-primary {
    font: inherit;
    font-weight: 500;
    padding: .7rem 1.2rem;
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
.button-primary:hover { background: var(--accent-dark); }

.notice {
    padding: .75rem 1rem;
    border-left: 4px solid var(--accent);
    background: #f0faf9;
    margin: 0 0 1.25rem;
}
.notice-error {
    border-left-color: var(--error);
    background: var(--error-bg);
    color: var(--error);
}

.form-aside { margin: 0; font-size: .9rem; }

.page-footer {
    margin-top: 2rem;
    font-size: .85rem;
    color: var(--text-muted);
    text-align: center;
}

.field-hint {
    margin: 0;
    font-size: .85rem;
    color: var(--text-muted);
}

/* Das TOTP-Geheimnis wird abgetippt — deshalb Festbreitenschrift,
   großzügiger Zeichenabstand und keine Zeile, die zu lang wird. */
.secret-block {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--page);
}
.secret-label { margin: 0 0 .5rem; font-weight: 500; }
.secret-value { margin: 0 0 .75rem; }
.secret-value code {
    font-size: 1.1rem;
    letter-spacing: .08em;
    word-spacing: .3em;
    line-height: 1.9;
}
code {
    font-family: Menlo, Consolas, "Courier New", monospace;
    background: #fff;
    padding: .1rem .3rem;
    border: 1px solid var(--line);
    border-radius: 2px;
}
.input-code {
    font-family: Menlo, Consolas, monospace;
    font-size: 1.3rem;
    letter-spacing: .3em;
    max-width: 9rem;
}
.code-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .5rem;
}
.code-list code { display: block; text-align: center; padding: .5rem; }

/* ── Angemeldeter Bereich ─────────────────────────────────────────────── */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner {
    max-width: 68rem;
    margin: 0 auto;
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.brand { font-weight: 600; color: var(--accent-dark); text-decoration: none; }
.mainnav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.mainnav a { color: var(--text); text-decoration: none; padding: .2rem 0; }
.mainnav a:hover { color: var(--accent-dark); border-bottom: 2px solid var(--accent); }
.topbar-account { margin-left: auto; display: flex; gap: 1rem; font-size: .9rem; }

.page { max-width: 68rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.page-head h1 { margin: 0; }

/* Hinweisleiste während der Arbeit im Zugang eines Mandanten. Auffällig,
   weil man nie versehentlich glauben soll, im eigenen Zugang zu sein. */
.impersonation-bar {
    background: #8a6d3b;
    color: #fff;
    padding: .5rem 1rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.impersonation-bar a { color: #fff; }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.data-table th, .data-table td {
    text-align: left;
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.data-table thead th {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
    border-bottom-width: 2px;
}
.data-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody tr:hover { background: #fafbfb; }
.muted { color: var(--text-muted); font-size: .9rem; display: block; }

.badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .8rem;
    border: 1px solid;
}
.badge-ok { color: var(--ok); border-color: #bcd7bd; background: #f2f8f2; }
.badge-locked { color: var(--error); border-color: #e3c3c3; background: var(--error-bg); }

/* Alter des Prüfstands, abgestuft nach Abschnitt 9. Farbe allein genügt
   nicht — die Monatszahl steht daneben. */
.age { font-variant-numeric: tabular-nums; }
.age-ok { color: var(--ok); }
.age-warn { color: #8a6d3b; }
.age-old { color: var(--error); font-weight: 600; }
.age-unknown { color: var(--text-muted); }

.empty { color: var(--text-muted); padding: 2rem 0; }

/* ── Formulare ────────────────────────────────────────────────────────── */
.form-sections { max-width: 46rem; }
fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.25rem 1.5rem 1.5rem;
    margin: 0 0 1.5rem;
}
legend {
    font-weight: 600;
    padding: 0 .5rem;
    color: var(--accent-dark);
}
fieldset .field { margin-bottom: 1.1rem; }
fieldset .field:last-child { margin-bottom: 0; }

.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row .grow { flex: 1 1 14rem; }
.field-row .narrow { flex: 0 1 10rem; }

.field-check {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: 1.1rem;
}
.field-check input { margin-top: .3rem; }
.field-check label { font-weight: 500; }
.field-check .field-hint { margin-top: .15rem; }

/* Pflichtfelder nach Art. 30 Abs. 1 werden sichtbar gekennzeichnet und von
   den empfohlenen Zusatzfeldern getrennt (Abschnitt 4). */
.req {
    font-weight: 400;
    font-size: .8rem;
    color: var(--accent-dark);
    background: #eaf7f6;
    padding: .05rem .4rem;
    border-radius: 2px;
    margin-left: .3rem;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: .5rem;
}

.subsection { max-width: 46rem; margin-top: 2.5rem; }
.subsection h2 { margin-top: 0; }
.inline-form { display: inline; }
.inline-add { align-items: flex-end; margin-top: 1rem; }
.actions { white-space: nowrap; }
.button-secondary {
    font: inherit;
    padding: .6rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}
.button-secondary:hover { border-color: var(--accent); }
.button-quiet {
    font: inherit;
    font-size: .9rem;
    padding: .2rem .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    margin-right: .3rem;
}
.button-quiet:hover { border-color: var(--accent); color: var(--accent-dark); }
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
}
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}
.card h2 { margin-top: 0; font-size: 1.05rem; }
.card h3 { font-size: .9rem; color: var(--text-muted); margin: 1.25rem 0 .5rem; }
.big-number {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--accent-dark);
    font-variant-numeric: tabular-nums;
}
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--line);
}
.plain-list li:last-child { border-bottom: 0; }
.count { font-variant-numeric: tabular-nums; font-weight: 600; }

.head-actions { display: flex; gap: .75rem; }
.filter-bar {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.filter-bar .field { margin-bottom: 0; }
.data-table .tick { width: 2.5rem; }
.data-table .ref { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }

/* ── Hilfe zu einzelnen Feldern ───────────────────────────────────────── */
.label-row { display: flex; align-items: center; gap: .4rem; }
.help { display: inline; position: relative; }
.help > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent-dark);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.help > summary::-webkit-details-marker { display: none; }
.help > summary:hover { border-color: var(--accent); background: #eaf7f6; }
.help[open] > summary { border-color: var(--accent); background: var(--accent); color: #fff; }

.help-body {
    position: absolute;
    z-index: 20;
    top: 1.9rem;
    left: -1rem;
    width: min(26rem, 80vw);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    padding: 1rem 1.1rem;
    font-weight: 400;
}
.help-body h3 { margin: 0 0 .5rem; font-size: 1rem; }
.help-body h4 { margin: 1rem 0 .4rem; font-size: .85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.help-body p { margin: 0; font-size: .92rem; }
.help-examples { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.help-examples li {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: .45rem 0;
    border-bottom: 1px solid var(--line);
}
.help-examples li:last-child { border-bottom: 0; }
.help-examples button { flex-shrink: 0; }

/* Ohne JavaScript liegt das Popup im Fluss statt schwebend — dann
   verschiebt es zwar das Layout, ist aber lesbar. */
.no-js .help-body { position: static; width: auto; box-shadow: none; margin-top: .5rem; }

.section-progress {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    font-size: .9rem;
}
.section-progress a {
    padding: .35rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    text-decoration: none;
    color: var(--text);
}
.section-progress a:hover { border-color: var(--accent); color: var(--accent-dark); }

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .4rem 1.5rem;
}
.checkbox-grid label { font-weight: 400; }
.tom-group { margin-bottom: 1.25rem; }
.tom-group h4 { margin: 0 0 .4rem; font-size: .9rem; color: var(--accent-dark); }

.subgroup-note {
    margin: 1.75rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--line);
    font-size: .88rem;
    color: var(--text-muted);
}
.label-like { font-weight: 500; display: block; margin-bottom: .5rem; }
.muted-inline { color: var(--text-muted); font-size: .85rem; }

.intro { max-width: 46rem; color: var(--text-muted); }
.row-inactive { opacity: .55; }
.tom-section { margin-bottom: 2rem; max-width: 46rem; }
.tom-section h2 { font-size: 1rem; margin-bottom: .5rem; }

.nowrap { white-space: nowrap; }
.value-old { color: var(--text-muted); text-decoration: line-through; }
.value-new { color: var(--text); }
.badge-warn { color: #8a6d3b; border-color: #e0d0b0; background: #fdf8ef; }

.cell-wide { max-width: 28rem; font-size: .9rem; color: var(--text-muted); }