/* Pflegenia — Übergangsseite
 *
 * Handgeschrieben, kein Framework, kein Build. Die Werte stammen aus
 * DESIGN.md des Hauptprojekts, damit diese Seite nach demselben System
 * aussieht wie das, was später an ihre Stelle tritt.
 */

@font-face {
    font-family: 'Manrope';
    src: url('fonts/manrope-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

:root {
    --bordeaux: oklch(0.41 0.110 19);
    --bordeaux-deep: oklch(0.34 0.090 18);
    --petrol: oklch(0.46 0.075 208);
    --petrol-deep: oklch(0.30 0.055 212);
    --paper: oklch(0.985 0.008 75);
    --paper-raised: oklch(0.965 0.012 75);
    --edge: oklch(0.93 0.018 72);
    --edge-strong: oklch(0.88 0.022 70);
    --ink: oklch(0.22 0.012 60);
    --ink-soft: oklch(0.36 0.012 60);
    --ink-muted: oklch(0.52 0.010 65);

    --breite: 72rem;
    --radius-md: 8px;
    --radius-lg: 12px;
}

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

body {
    margin: 0;
    /* Kein-Weiß-Regel: Der Seitengrund ist Papier, nie #fff. */
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

h1 {
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1.08;
    text-wrap: balance;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.2;
}

h3 {
    font-size: 1.0625rem;
    line-height: 1.35;
    letter-spacing: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* Zeilenlaenge hoechstens rund 75 Zeichen. */
.fliesstext { max-width: 42rem; }

a {
    color: var(--bordeaux);
    text-underline-offset: 2px;
}
a:hover { color: var(--bordeaux-deep); }

a:focus-visible,
.knopf:focus-visible {
    /* Der Standard-Umriss wird ersetzt, nie ersatzlos entfernt. */
    outline: 2px solid var(--bordeaux);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Kopf, Inhalt und Fuss auf exakt derselben Breite — der auffaelligste
   Layoutfehler des Hauptprojekts war ein Kopf, der weiter reichte. */
.bahn {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 1rem;
}

.kopf {
    background: #fff;
    border-bottom: 1px solid var(--edge);
}

.kopf .bahn {
    display: flex;
    align-items: baseline;
    /* Ohne den Umbruch stehen Wortmarke und Zusatz auf schmalen Geraeten in
       einer Zeile, die nicht passt. */
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}

.wortmarke {
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--bordeaux);
    text-decoration: none;
}

.kopf-zusatz {
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

section { padding: 3rem 0; }

/* Flaechenwechsel statt Trennlinie. */
.band { background: var(--paper-raised); }

/* Ueber einer Ueberschrift steht mehr Raum als darunter. */
section h2 { margin-bottom: 1.25rem; }

.karte {
    background: #fff;
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    /* Ruhezustand-Regel: flach. Schatten waere ein Zustandssignal. */
}

.zahlen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--edge);
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-width: 42rem;
}

.zahl {
    background: #fff;
    padding: 1.25rem;
}

.zahl-wert {
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    /* Tabellenziffern-Regel: Zahlen nebeneinander muessen fluchten. */
    font-variant-numeric: tabular-nums;
    color: var(--petrol-deep);
}

.zahl-name {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin-top: 0.125rem;
}

.liste {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 42rem;
}

.liste li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--edge);
    color: var(--ink-soft);
}
.liste li:last-child { border-bottom: 0; }

.liste strong {
    color: var(--ink);
    font-weight: 500;
}

.knopf {
    display: inline-block;
    background: var(--bordeaux);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    transition: background-color 150ms;
}
.knopf:hover {
    background: var(--bordeaux-deep);
    color: #fff;
}

.fuss {
    background: var(--petrol-deep);
    color: #fff;
    padding: 2rem 0;
    font-size: 0.8125rem;
}

.fuss a {
    color: #fff;
    text-decoration: underline;
}

.fuss-zeilen {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: baseline;
    justify-content: space-between;
}

/* Rechtstexte: eine Spalte, ruhig gesetzt. */
.rechtstext { max-width: 42rem; }
.rechtstext h2 { margin-top: 2.5rem; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext dl { margin: 0 0 1rem; }
.rechtstext dt { font-weight: 500; margin-top: 0.75rem; }
.rechtstext dd { margin: 0; color: var(--ink-soft); }

@media (max-width: 40rem) {
    .zahlen { grid-template-columns: 1fr; }
    section { padding: 2.25rem 0; }
}