/* Krypto-Vorsorgemappe – Markenfarben (Kit K4a, Stil stil-redaktion). Kontrastwerte in DESIGN.md. */
:root {
  --marke: #1e5a6e;         /* Petrol: Weiß darauf 7,66:1 */
  --marke-dunkel: #15424f;
  --marke-hell: #e5f0f2;
  --akzent: #9c6b17;        /* Fokusrahmen: 4,64:1 auf Weiß */
  --flaeche: #f5f3ee;       /* Papierton für abgesetzte Abschnitte */
  --radius: 12px;
}

/* Unterseiten (Ratgeber, Rechtstexte): Lesespalte und Brotkrumen, wenige Zeilen */
.seite { padding-block: clamp(2rem, 5vw, 3.5rem) var(--abstand); }
.seite .wrap > * { max-width: var(--lesebreite); }
.seite h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); }
.seite h2 { margin-top: 2.2rem; }
.seite .hinweis { margin-block: 1.5rem; }

/* Checkliste: Kästchen zum Abhaken beim Ausdrucken */
ul.check { list-style: none; padding-left: 0; }
ul.check li { padding-left: 1.9rem; position: relative; margin: .45rem 0; }
ul.check li::before { content: "☐"; position: absolute; left: 0; font-size: 1.2rem; line-height: 1.4; }
@media print { .noprint { display: none; } }

/* Startbereich: zweite Mappenseite ragt im Kit 6 % nach rechts hinaus – Platz dafür lassen (sonst 390 px Überlauf) */
.hero .vorschau { margin-right: 7%; }

/* Kopf auf schmalen Handys: Name einzeilig halten; Hinweiskästen ohne Leerraum unten */
.logo { white-space: nowrap; }
.kopf .nav .btn { white-space: nowrap; }
@media (max-width: 420px) { .logo { font-size: 1rem; } .kopf .nav .btn { padding-inline: .8rem; } }
.hinweis > p:last-child { margin-bottom: 0; }