/*
 * App-Shell. Bewusst klein: Das hier ist das Geruest, das offline aus dem
 * Cache startet (Aufgabe 1.7). Fachliche Oberflaechen kommen mit ihren Modulen
 * dazu.
 *
 * Kein roher Farbwert in dieser Datei — alles ueber die Tokens (PRD 12.1).
 */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--schrift);
    font-size: 1rem;
    line-height: 1.5;
}

.shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.shell-kopf {
    display: flex;
    align-items: baseline;
    gap: var(--abstand-3);
    padding: var(--abstand-4) var(--abstand-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--flaeche-rahmen);
}

.shell-titel {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.shell-untertitel {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.shell-inhalt {
    flex: 1;
    padding: var(--abstand-5);
}

.karte {
    max-width: 44rem;
    padding: var(--abstand-5);
    background: var(--color-surface);
    border: 1px solid var(--flaeche-rahmen);
    border-radius: var(--abstand-2);
}

.karte h2 {
    margin: 0 0 var(--abstand-3);
    font-size: 1.125rem;
    font-weight: 600;
}

.karte p {
    margin: 0 0 var(--abstand-3);
}

.karte p:last-child {
    margin-bottom: 0;
}

.stand {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--abstand-2) var(--abstand-4);
    margin: 0;
    font-size: 0.875rem;
}

.stand dt {
    color: var(--color-muted);
}

.stand dd {
    margin: 0;
    font-family: var(--schrift-mono);
}

/* --- Textseiten (Datenschutzhinweis) --------------------------------- */

.shell-titel-link {
    color: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
}

.shell-titel-link:hover,
.shell-titel-link:focus-visible {
    color: var(--color-accent);
}

.text {
    max-width: 38rem;
}

.text h1 {
    margin: 0 0 var(--abstand-4);
    font-size: 1.5rem;
    font-weight: 600;
}

.text h2 {
    margin: var(--abstand-5) 0 var(--abstand-2);
    font-size: 1.125rem;
    font-weight: 600;
}

.text ul {
    margin: 0 0 var(--abstand-3);
    padding-left: var(--abstand-5);
}

.text li {
    margin-bottom: var(--abstand-2);
}

/* Offene Stellen im Entwurf sichtbar machen, ohne Ampelfarben zu erfinden. */
.text mark {
    padding: 0 var(--abstand-1);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-text);
}

.hinweis-entwurf {
    margin-top: var(--abstand-5);
    padding-top: var(--abstand-3);
    border-top: 1px solid var(--flaeche-rahmen);
    color: var(--color-muted);
    font-size: 0.875rem;
}

.fusszeile {
    padding: var(--abstand-4) var(--abstand-5);
    border-top: 1px solid var(--flaeche-rahmen);
    font-size: 0.875rem;
}

.fusszeile a {
    color: var(--color-accent);
}