/* Einheitliches Aussehen aller Unterseiten von 29b-ausweis.at (nicht der Startseite).
   Wird nach dem seiteneigenen <style> geladen und gewinnt deshalb bei gleichen Regeln.
   Breite, Farben, Karte, Kopfzeile, blauer Kopfbereich, Inhaltsabstand, Kästen und Schrift stehen nur hier. */

:root{--bg:#eef3f7;--card:#fff;--text:#101828;--muted:#667085;--line:#e4e7ec;--soft:#f8fafc;--blue:#1d4ed8;--blue-bg:#eef4ff;--green:#15803d;--green-bg:#eafaf0;--red:#be123c;--red-bg:#fff1f2;--amber:#b45309;--amber-bg:#fff8e6;--violet:#6d28d9;--violet-bg:#f3efff;--shadow:0 18px 45px rgba(15,23,42,.10)}
html[data-theme="dark"]{--bg:#0b1120;--card:#111827;--text:#f9fafb;--muted:#aab4c5;--line:#263244;--soft:#0f172a;--blue:#93c5fd;--blue-bg:#172554;--green:#86efac;--green-bg:#052e16;--red:#fda4af;--red-bg:#3f0b16;--amber:#facc15;--amber-bg:#3b2a05;--violet:#c4b5fd;--violet-bg:#2e1065;--shadow:0 18px 45px rgba(0,0,0,.42)}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Platz für den Scrollbalken immer freihalten: sonst ist eine kurze Seite (ohne Scrollbalken) breiter
   als eine lange und die Karte springt beim Seitenwechsel zur Seite. */
html{overflow-y:scroll;scrollbar-gutter:stable}
body{min-height:100vh;background:radial-gradient(circle at top left,rgba(29,78,216,.16),transparent 32rem),linear-gradient(180deg,#f8fafc 0%,var(--bg) 100%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.5}
html[data-theme="dark"] body{background:radial-gradient(circle at top left,rgba(59,130,246,.20),transparent 32rem),linear-gradient(180deg,#020617 0%,var(--bg) 100%)}

/* Seitenbreite: auf allen Unterseiten gleich */
.page{width:100%;max-width:960px;margin:0 auto;padding:28px 16px 48px}
.app-card{background:rgba(255,255,255,.95);border:2px solid rgba(29,78,216,.35);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
html[data-theme="dark"] .app-card{background:rgba(17,24,39,.96);border-color:rgba(147,197,253,.35)}

/* Kopfzeile: Seitenname links, Menü und Hell/Dunkel rechts */
.header{padding:18px 22px 0}
.app-card>.top-row{padding:18px 22px 0}
.top-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:var(--blue-bg);color:var(--blue);font-size:13px;font-weight:800;text-decoration:none}
.badge-dot{width:8px;height:8px;border-radius:50%;background:#22c55e}
.theme-toggle{width:auto;height:auto;margin:0;padding:9px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);font-size:16px;line-height:1;box-shadow:none;cursor:pointer}

/* Blauer Kopfbereich mit Titel und Untertitel (.kopf auf den einfachen Seiten, .hero bei App und Funktionen) */
.kopf,.hero{position:relative;overflow:hidden;margin:16px 0 0;border-radius:22px;padding:22px 24px;color:#fff;background:linear-gradient(135deg,#2563eb,#1e3a8a);box-shadow:0 10px 24px rgba(30,58,138,.28);text-align:left}
.content>.hero:first-child{margin-top:0}
.kopf::before,.kopf::after,.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.10);pointer-events:none}
.kopf::before,.hero::before{width:200px;height:200px;right:-50px;top:-60px}
.kopf::after,.hero::after{width:160px;height:160px;right:140px;bottom:-90px;background:rgba(255,255,255,.06)}
.kopf h1,.hero h1{position:relative;margin:0;font-size:28px;line-height:1.15;letter-spacing:-.03em;color:#fff}
.kopf p,.kopf .subtitle,.hero>p{position:relative;margin:8px 0 0;max-width:640px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.9)}
.kopf a{color:#fff}

/* Inhalt */
.content{padding:16px 22px 24px}
a{color:var(--blue);font-weight:800;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.panel{padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--card);margin:0 0 14px}
.panel h2{margin:0 0 10px;font-size:18px;line-height:1.3}
.panel p{margin:8px 0;font-size:14.5px;line-height:1.6}
.panel p:first-child{margin-top:0}
.panel p:last-child{margin-bottom:0}

@media(max-width:640px){
  .page{padding:18px 10px 30px}
  .app-card{border-radius:24px}
  .header,.app-card>.top-row{padding:14px 14px 0}
  .content{padding:14px 14px 20px}
  .kopf,.hero{padding:18px;border-radius:20px}
  .kopf h1,.hero h1{font-size:23px}
}