:root { --tinte:#17203a; --petrol:#0d8085; --petrol-hell:#5cc4c4; --gold:#f0a540; --papier:#faf8f0; --text:#1b2233; --leise:#5c6577; --karte:#ffffff; --rand:#e4e6ea; color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --papier:#11151f; --text:#e8ebf1; --leise:#a5adbd; --karte:#1a2030; --rand:#2a3142; --petrol:#5cc4c4; }
}
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--papier); color:var(--text); line-height:1.65; }
a { color:var(--petrol); }

/* Startseite */
header.hero { background:radial-gradient(circle at 50% 0%, #1e6d74, var(--tinte) 72%); color:#fff; text-align:center; padding:56px 16px 64px; }
.icon { width:120px; height:120px; border-radius:27px; box-shadow:0 18px 40px rgba(0,0,0,.35); }
.hero h1 { font-size:2.6rem; margin:20px 0 4px; letter-spacing:.3px; }
.tag { font-size:1.25rem; color:#ffd89a; font-weight:700; margin:0 0 18px; }
.hero p { max-width:580px; margin:0 auto; color:rgba(255,255,255,.86); }
.bald { display:inline-block; margin-top:26px; padding:14px 28px; border-radius:999px; font-weight:800; color:var(--tinte); background:linear-gradient(135deg,#ffd89a,var(--gold)); }
.sprache { position:absolute; top:14px; right:16px; color:rgba(255,255,255,.8); font-size:.9rem; text-decoration:none; }
main.start { max-width:780px; margin:0 auto; padding:40px 16px 24px; }
main.start h2 { font-size:1.4rem; margin:8px 0 18px; text-align:center; }
.schritte { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:40px; }
.schritt { text-align:center; padding:8px; }
.schritt .nr { display:inline-flex; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; background:var(--petrol); color:#fff; font-weight:800; }
.schritt b { display:block; margin-top:8px; }
.schritt span { color:var(--leise); font-size:.95rem; }
.raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.karte { background:var(--karte); border:1px solid var(--rand); border-radius:18px; padding:16px 18px; }
.karte b { display:block; color:var(--petrol); margin-bottom:4px; }
.karte span { color:var(--leise); font-size:.95rem; }
.zitat { text-align:center; margin:44px auto 8px; max-width:580px; color:var(--leise); }
.zitat strong { display:block; font-size:1.6rem; color:var(--text); margin-bottom:6px; }
.klein { text-align:center; color:var(--leise); font-size:.9rem; margin-top:32px; }
footer { text-align:center; padding:24px 16px 40px; font-size:.9rem; color:var(--leise); }
footer a { color:var(--leise); margin:0 10px; display:inline-block; }

/* Textseiten */
.seite { max-width:760px; margin:0 auto; padding:2.5rem 1.5rem 5rem; }
.seite h1 { font-size:1.9rem; margin-bottom:.25rem; }
.seite h2 { font-size:1.2rem; margin-top:2.2rem; border-bottom:1px solid var(--rand); padding-bottom:.4rem; color:var(--petrol); }
.stand { color:var(--leise); font-size:.9rem; margin-bottom:2rem; }
.hinweis { background:var(--karte); border-left:4px solid var(--petrol); padding:.8rem 1rem; margin:1rem 0; font-size:.95rem; border-radius:0 10px 10px 0; }
nav.leiste { margin-bottom:2rem; font-size:.9rem; display:flex; flex-wrap:wrap; gap:.4rem 1rem; }
nav.leiste .home { font-weight:700; text-decoration:none; }