/* === Komponenten ===
 * Nutzt AUSSCHLIESSLICH Variablen aus tokens.css. Kein Hex-Wert hier.
 * Mobil zuerst; Breakpoints erweitern nach oben.
 */

/* --- Rücksetzung --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; font-weight: var(--weight-semibold); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
img, svg { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- Grundgerüst --- */
.kopf {
    position: sticky; top: 0; z-index: var(--z-header);
    height: calc(var(--header-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    display: flex; align-items: center; gap: var(--space-3);
    padding-inline: var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.kopf__titel { font-size: var(--text-lg); font-weight: var(--weight-semibold); flex: 1;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf__zurueck { display: flex; align-items: center; color: var(--text-muted);
                 margin-left: calc(var(--space-2) * -1); padding: var(--space-2); }
.kopf__zurueck:hover { text-decoration: none; color: var(--text); }

.inhalt {
    max-width: var(--inhalt-max);
    margin-inline: auto;
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-4);
}

/* --- Untere Navigation --- */
.nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-nav);
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}
.nav__punkt {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    height: var(--nav-h);
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    color: var(--text-subtle);
    transition: color var(--dauer-schnell) var(--ease);
}
.nav__punkt:hover { text-decoration: none; color: var(--text-muted); }
.nav__punkt[aria-current="page"] { color: var(--primary); }
.nav__icon { width: 22px; height: 22px; stroke-width: 1.9; }

/* --- Karte --- */
.karte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.karte__kopf {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
}
.karte__titel { font-size: var(--text-base); font-weight: var(--weight-semibold); flex: 1; }
.karte__koerper { padding: var(--space-4); }
.karte__koerper--eng { padding: 0; }

/* --- Schaltflächen --- */
.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: 10px var(--space-4);
    border-radius: var(--radius);
    font-size: var(--text-base); font-weight: var(--weight-medium);
    border: 1px solid transparent;
    transition: background var(--dauer-schnell) var(--ease),
                border-color var(--dauer-schnell) var(--ease);
    white-space: nowrap;
}
.knopf:hover { text-decoration: none; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf--primaer { background: var(--primary); color: var(--text-on-primary); }
.knopf--primaer:hover:not(:disabled) { background: var(--primary-hover); }
.knopf--zweit { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.knopf--zweit:hover:not(:disabled) { background: var(--surface-2); }
.knopf--gefahr { background: var(--danger); color: #fff; }
.knopf--still { color: var(--text-muted); padding-inline: var(--space-3); }
.knopf--still:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.knopf--voll { width: 100%; }
.knopf--klein { padding: 6px var(--space-3); font-size: var(--text-sm); }

/* --- Formularfelder --- */
.feld { display: flex; flex-direction: column; gap: var(--space-2); }
.feld__marke { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); }
.feld__hinweis { font-size: var(--text-sm); color: var(--text-subtle); }
.eingabe {
    width: 100%; padding: 10px var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color var(--dauer-schnell) var(--ease);
}
.eingabe:focus { border-color: var(--primary); outline: none;
                 box-shadow: 0 0 0 3px var(--primary-bg); }
textarea.eingabe { resize: vertical; min-height: 84px; line-height: 1.5; }
.formular { display: flex; flex-direction: column; gap: var(--space-4); }
.formular__reihe { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.formular__reihe > * { flex: 1; min-width: 140px; }

/* --- Abzeichen --- */
.abzeichen {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    background: var(--surface-2); color: var(--text-muted);
    white-space: nowrap;
}
.abzeichen--primary { background: var(--primary-bg); color: var(--primary-fg); }
.abzeichen--accent  { background: var(--accent-bg);  color: var(--accent-fg); }
.abzeichen--success { background: var(--success-bg); color: var(--success); }
.abzeichen--warning { background: var(--warning-bg); color: var(--warning); }
.abzeichen--danger  { background: var(--danger-bg);  color: var(--danger); }
.abzeichen--info    { background: var(--info-bg);    color: var(--info); }

/* --- Meldungen --- */
.meldung {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    border: 1px solid transparent;
}
.meldung--fehler  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger); }
.meldung--erfolg  { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.meldung--hinweis { background: var(--info-bg);    color: var(--info);    border-color: var(--info); }

/* --- Leerzustand --- */
.leer { text-align: center; padding: var(--space-10) var(--space-4); color: var(--text-muted); }
.leer__icon { width: 44px; height: 44px; margin: 0 auto var(--space-3);
              color: var(--text-subtle); stroke-width: 1.4; }
.leer__titel { font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--space-1); }
.leer__text { font-size: var(--text-sm); max-width: 34ch; margin: 0 auto var(--space-4); }

/* --- Hilfsklassen (bewusst wenige) --- */
.stapel { display: flex; flex-direction: column; gap: var(--space-3); }
.reihe  { display: flex; align-items: center; gap: var(--space-3); }
.reihe--zwischen { justify-content: space-between; }
.schieber { margin-left: auto; }
.gedaempft { color: var(--text-muted); }
.klein { font-size: var(--text-sm); }
.nur-schirmleser {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}