/* ==========================================================================
   aion.inno-sync.de — Stylesheet
   --------------------------------------------------------------------------
   Gleiche Tokens, Schriften und Fraktionsfarben wie inno-sync.de (v5) und
   die Aion-Seite, damit beides wie aus einem Guss wirkt.
   Hell/Dunkel: folgt dem Gerät, der Knopf oben setzt data-theme am <html>.
   Fraktion: data-faction="asmo" | "elyos" färbt nur die Akzent-Tokens um.

   ⚠️ CACHE: nach Änderungen ?v= in index.html hochzählen.
   ========================================================================== */

@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("fonts/space-grotesk.woff2") format("woff2-variations"),url("fonts/space-grotesk.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("fonts/jetbrains-mono.woff2") format("woff2-variations"),url("fonts/jetbrains-mono.woff2") format("woff2");
}

/* ============ TOKENS (aus inno-sync.de v5) ============ */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --bg-page:#131619; --bg-sunken:#101315;
  --surface-card:#1A1E22; --surface-hover:#21262B;
  --border-color:#2A3036; --border-color-strong:#343B42;
  --text-strong:#F2F3F5; --text-primary:#E9EBEE; --text-soft:#C4CAD0;
  --text-muted:#A3ABB3; --text-faint:#848D96;
  --accent:#C994BC; --accent-hover:#E2B6D6; --text-accent:#D3A6C7;
  --text-on-accent:#19151A; --focus-ring:#C994BC;
  --accent-wash:rgba(201,148,188,.12); --border-color-accent:rgba(201,148,188,.45);
  --status-ok:#7FC8A9; --status-warn:#E8A765; --status-down:#D98B84;
  --status-warn-wash:rgba(232,167,101,.10); --status-warn-line:rgba(232,167,101,.34);
  --status-down-wash:rgba(217,139,132,.10); --status-down-line:rgba(217,139,132,.34);
  /* Seltenheit — geprüft mit dem Paletten-Validator (dunkel, Fläche #1A1E22) */
  --g-common:#848D96; --g-rare:#199e70; --g-legend:#3987e5; --g-unique:#c98500;
  --g-epic:#9085e9; --g-mythic:#e66767; --g-special:#d55181;
  --shadow-pop:0 16px 40px rgba(0,0,0,.45);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg-page:#F5F6F8; --bg-sunken:#ECEEF1;
    --surface-card:#FFFFFF; --surface-hover:#F0F1F4;
    --border-color:#E1E4E9; --border-color-strong:#CDD2D9;
    --text-strong:#0E1013; --text-primary:#15181C; --text-soft:#3A4048;
    --text-muted:#545B64; --text-faint:#646B74;
    --accent:#7A4C6E; --accent-hover:#5C3753; --text-accent:#7A4C6E;
    --text-on-accent:#FFFFFF; --focus-ring:#7A4C6E;
    --accent-wash:rgba(122,76,110,.08); --border-color-accent:rgba(122,76,110,.35);
    --status-ok:#4F8F76; --status-warn:#B4761F; --status-down:#A8544C;
    --status-warn-wash:rgba(180,118,31,.08); --status-warn-line:rgba(180,118,31,.34);
    --status-down-wash:rgba(168,84,76,.08); --status-down-line:rgba(168,84,76,.34);
    --g-common:#646B74; --g-rare:#1baf7a; --g-legend:#2a78d6; --g-unique:#eda100;
    --g-epic:#6250d6; --g-mythic:#e34948; --g-special:#e87ba4;
    --shadow-pop:0 16px 40px rgba(20,24,28,.12);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg-page:#F5F6F8; --bg-sunken:#ECEEF1;
  --surface-card:#FFFFFF; --surface-hover:#F0F1F4;
  --border-color:#E1E4E9; --border-color-strong:#CDD2D9;
  --text-strong:#0E1013; --text-primary:#15181C; --text-soft:#3A4048;
  --text-muted:#545B64; --text-faint:#646B74;
  --accent:#7A4C6E; --accent-hover:#5C3753; --text-accent:#7A4C6E;
  --text-on-accent:#FFFFFF; --focus-ring:#7A4C6E;
  --accent-wash:rgba(122,76,110,.08); --border-color-accent:rgba(122,76,110,.35);
  --status-ok:#4F8F76; --status-warn:#B4761F; --status-down:#A8544C;
  --status-warn-wash:rgba(180,118,31,.08); --status-warn-line:rgba(180,118,31,.34);
  --status-down-wash:rgba(168,84,76,.08); --status-down-line:rgba(168,84,76,.34);
  --g-common:#646B74; --g-rare:#1baf7a; --g-legend:#2a78d6; --g-unique:#eda100;
  --g-epic:#6250d6; --g-mythic:#e34948; --g-special:#e87ba4;
  --shadow-pop:0 16px 40px rgba(20,24,28,.12);
}

/* Fraktionen — Werte wie auf inno-sync.de/aion2 */
:root[data-faction="elyos"]{--accent:#E2BE72;--accent-hover:#F0D398;--text-accent:#E8C886;--focus-ring:#E8C886;
  --accent-wash:rgba(226,190,114,.12);--border-color-accent:rgba(226,190,114,.42)}
:root[data-faction="asmo"]{--accent:#D27A8C;--accent-hover:#E89AAA;--text-accent:#DF93A3;--focus-ring:#DF93A3;
  --accent-wash:rgba(210,122,140,.12);--border-color-accent:rgba(210,122,140,.42)}
@media (prefers-color-scheme:light){
  :root[data-faction="elyos"]:not([data-theme="dark"]){--accent:#9A7428;--accent-hover:#7F5F1F;--text-accent:#7F5F1F;
    --focus-ring:#9A7428;--accent-wash:rgba(154,116,40,.10);--border-color-accent:rgba(154,116,40,.40)}
  :root[data-faction="asmo"]:not([data-theme="dark"]){--accent:#9C3F5C;--accent-hover:#83334C;--text-accent:#83334C;
    --focus-ring:#9C3F5C;--accent-wash:rgba(156,63,92,.10);--border-color-accent:rgba(156,63,92,.40)}
}
:root[data-faction="elyos"][data-theme="light"]{--accent:#9A7428;--accent-hover:#7F5F1F;--text-accent:#7F5F1F;
  --focus-ring:#9A7428;--accent-wash:rgba(154,116,40,.10);--border-color-accent:rgba(154,116,40,.40)}
:root[data-faction="asmo"][data-theme="light"]{--accent:#9C3F5C;--accent-hover:#83334C;--text-accent:#83334C;
  --focus-ring:#9C3F5C;--accent-wash:rgba(156,63,92,.10);--border-color-accent:rgba(156,63,92,.40)}

:root{
  --font-ui:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius-card:14px; --radius-control:8px;
  --container-max:1200px; --gutter:32px;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg-page)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg-page);
  color:var(--text-primary);font:400 16px/1.6 var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:var(--text-accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-wash)}
[hidden]{display:none !important}
.wrap{width:100%;max-width:var(--container-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;background:var(--surface-card);
  border:1px solid var(--border-color);border-radius:var(--radius-control)}
.skip:focus{left:12px;top:12px}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zahl{font-variant-numeric:tabular-nums}
.leise{color:var(--text-muted)}

/* ============ KOPF ============ */
.kopf{position:sticky;top:0;z-index:40;background:var(--bg-page);border-bottom:1px solid var(--border-color)}
.kopf-zeile{display:flex;align-items:center;gap:16px 24px;min-height:68px;flex-wrap:wrap}
.wortmarke{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 18px/1 var(--font-ui);
  letter-spacing:-0.01em;color:var(--text-strong)}
.wortmarke:hover{color:var(--text-strong)}
.wortmarke .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.wortmarke .zusatz{color:var(--text-muted);font-weight:500}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:8px}
.wer{color:var(--text-muted);font-size:15px;margin-right:4px}

/* ============ KNÖPFE ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:var(--radius-control);border:1px solid transparent;font-weight:500;font-size:15px;
  cursor:pointer;text-decoration:none;transition:background-color .09s,border-color .09s,color .09s}
.btn-haupt{background:var(--accent);color:var(--text-on-accent)}
.btn-haupt:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.btn-zweit{background:transparent;border-color:var(--border-color-strong);color:var(--text-primary)}
.btn-zweit:hover{background:var(--surface-hover);color:var(--text-primary)}
.btn-leise{background:transparent;color:var(--text-soft);padding:0 12px}
.btn-leise:hover{background:var(--surface-hover);color:var(--text-primary)}
.btn-gefahr{background:transparent;border-color:var(--status-down-line);color:var(--status-down)}
.btn-gefahr:hover{background:var(--status-down-wash)}
.btn[disabled]{opacity:.55;cursor:default}
.btn-symbol{width:44px;padding:0}
.btn-symbol svg{width:20px;height:20px}
.btn-discord svg{width:20px;height:20px}

/* ============ INHALT ============ */
main{flex:1 0 auto;padding-top:40px;padding-bottom:72px}
main:focus{outline:none}
.laden{color:var(--text-muted)}
.zurueck{display:inline-flex;align-items:center;min-height:44px;margin-bottom:8px;font-size:15px;color:var(--text-muted)}
.zurueck:hover{color:var(--text-primary)}
h1.titel{font:600 34px/1.15 var(--font-ui);letter-spacing:-0.02em;color:var(--text-strong)}
h2.abschnitt{font:600 20px/1.3 var(--font-ui);letter-spacing:-0.01em;color:var(--text-strong);margin-bottom:14px}
.abschnitt-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.abschnitt-kopf h2.abschnitt{margin-bottom:0}
section+section{margin-top:44px}
.hinweis{padding:14px 16px;border-radius:var(--radius-control);border:1px solid var(--border-color);
  background:var(--surface-card);color:var(--text-soft);font-size:15px}
.hinweis.warn{border-color:var(--status-warn-line);background:var(--status-warn-wash);color:var(--text-primary)}
.hinweis.fehler{border-color:var(--status-down-line);background:var(--status-down-wash);color:var(--text-primary)}

/* ============ START (abgemeldet) ============ */
.start{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center;padding:24px 0 8px}
.start h1{font:600 48px/1.06 var(--font-ui);letter-spacing:-0.025em;color:var(--text-strong);max-width:14ch}
.start .einleitung{margin-top:18px;font-size:18px;color:var(--text-soft);max-width:52ch}
.start .aktion{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.start .kleingedruckt{margin-top:16px;font-size:14px;color:var(--text-muted);max-width:52ch}
.vorschau{border:1px solid var(--border-color);border-radius:var(--radius-card);background:var(--surface-card);padding:22px}
.vorschau-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--border-color);font-size:15px}
.vorschau-zeile:last-child{border-bottom:0}
.vorschau-zeile b{font-weight:600;color:var(--text-strong)}
.start-punkte{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.start-punkte h3{font:600 17px/1.3 var(--font-ui);color:var(--text-strong);margin-bottom:6px}
.start-punkte p{color:var(--text-soft);font-size:15px}

/* ============ MEINE CHARS ============ */
.kopfzeile{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.zaehler{color:var(--text-muted);font-size:15px}
.char-liste{display:grid;gap:10px}
.char-zeile{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);
  align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--border-color);border-radius:var(--radius-card);
  background:var(--surface-card);color:var(--text-primary);transition:border-color .09s,background-color .09s}
.char-zeile:hover{border-color:var(--border-color-strong);background:var(--surface-hover);color:var(--text-primary)}
.char-name{font:600 19px/1.25 var(--font-ui);color:var(--text-strong);display:flex;align-items:center;gap:10px}
.fraktion{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--text-faint)}
.fraktion.asmo{background:#D27A8C}
.fraktion.elyos{background:#E2BE72}
.char-unter{font-size:14px;color:var(--text-muted);margin-top:2px}
.wert-klein{display:flex;flex-direction:column}
.wert-klein .label{font-size:13px;color:var(--text-muted)}
.wert-klein .wert{font-weight:600;font-size:17px;color:var(--text-strong)}
.plus{font-size:13px;color:var(--text-soft)}
.stand{font-size:13px;color:var(--text-muted);text-align:right}
.leer{padding:28px;border:1px dashed var(--border-color-strong);border-radius:var(--radius-card);color:var(--text-soft)}

.hinzufuegen{margin-top:40px;padding:24px;border:1px solid var(--border-color);border-radius:var(--radius-card);background:var(--bg-sunken)}
.such-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:4px}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-size:14px;color:var(--text-soft)}
.feld input,.feld select{min-height:44px;padding:0 12px;border-radius:var(--radius-control);
  border:1px solid var(--border-color-strong);background:var(--surface-card);color:var(--text-primary)}
.feld input{width:240px}
.feld input:focus,.feld select:focus{outline:2px solid var(--focus-ring);outline-offset:1px}
.such-hinweis{margin-top:12px;font-size:14px;color:var(--text-muted);max-width:70ch}
.treffer{margin-top:18px;display:grid;gap:8px}
.treffer li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;
  border:1px solid var(--border-color);border-radius:var(--radius-control);background:var(--surface-card)}
.treffer .t-name{font-weight:600;color:var(--text-strong)}
.treffer .t-info{font-size:14px;color:var(--text-muted)}
.treffer .drin{font-size:14px;color:var(--text-muted);padding-right:8px}

/* ============ CHAR-KARTE ============ */
.karte-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.karte-kopf .unter{margin-top:6px;color:var(--text-soft);font-size:16px}
.karte-kopf .rechts{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.karte-kopf .stand{font-size:14px}

.zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.zahl-panel{border:1px solid var(--border-color);border-radius:var(--radius-card);background:var(--surface-card);
  padding:20px 20px 12px}
.zahl-panel .label{font-size:15px;color:var(--text-soft)}
.zahl-panel .gross{font:600 46px/1.1 var(--font-ui);letter-spacing:-0.02em;color:var(--text-strong);margin-top:4px}
.zahl-panel .neben{font-size:14px;color:var(--text-muted);min-height:22px}
.zahl-panel .neben b{font-weight:600;color:var(--text-primary)}

/* Diagramm */
.diagramm{position:relative;margin-top:10px}
.diagramm svg{display:block;width:100%;height:150px;overflow:visible}
.diagramm .gitter{stroke:var(--border-color);stroke-width:1}
.diagramm .achse-text{fill:var(--text-muted);font:400 12px var(--font-ui);font-variant-numeric:tabular-nums}
.diagramm .linie{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.diagramm .flaeche{fill:var(--accent);opacity:.10}
.diagramm .punkt{fill:var(--accent);stroke:var(--surface-card);stroke-width:2}
.diagramm .end-text{fill:var(--text-primary);font:600 12px var(--font-ui);font-variant-numeric:tabular-nums}
.diagramm .faden{stroke:var(--text-faint);stroke-width:1}
.diagramm .treffflaeche{fill:transparent;cursor:crosshair}
.diagramm:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:6px}
.diagramm .tipp{position:absolute;top:0;pointer-events:none;padding:8px 10px;border-radius:var(--radius-control);
  border:1px solid var(--border-color-strong);background:var(--surface-card);box-shadow:var(--shadow-pop);
  font-size:13px;line-height:1.35;white-space:nowrap;transform:translateX(-50%)}
.diagramm .tipp b{display:block;font-size:15px;color:var(--text-strong);font-variant-numeric:tabular-nums}
.diagramm .tipp span{color:var(--text-muted)}
.diagramm-leer{font-size:14px;color:var(--text-muted);padding:10px 0 4px}
.tabelle-umschalter{margin-top:6px;font-size:14px}
.tabelle-umschalter summary{cursor:pointer;color:var(--text-muted);min-height:32px;display:inline-flex;align-items:center}
.tabelle-umschalter table{margin-top:6px;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tabelle-umschalter th,.tabelle-umschalter td{padding:4px 16px 4px 0;text-align:left;border-bottom:1px solid var(--border-color)}
.tabelle-umschalter th{font-weight:500;color:var(--text-muted)}

/* Was jetzt? — das Herzstück der Karte */
.was-jetzt{margin-top:44px;border:1px solid var(--border-color-accent);border-radius:var(--radius-card);
  background:linear-gradient(var(--accent-wash),var(--accent-wash)),var(--surface-card);padding:24px 24px 8px}
.was-jetzt h2{font:600 24px/1.2 var(--font-ui);letter-spacing:-0.01em;color:var(--text-strong)}
.was-jetzt .unter{color:var(--text-soft);font-size:15px;margin-top:4px}
.tipps{margin-top:18px;counter-reset:tipp}
.tipps>li{counter-increment:tipp;display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 14px;
  padding:16px 0;border-top:1px solid var(--border-color)}
.tipps>li::before{content:counter(tipp);grid-row:1 / span 3;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--text-on-accent);font-weight:600;font-size:15px}
.tipps h3{font:600 17px/1.35 var(--font-ui);color:var(--text-strong);padding-top:4px}
.tipps p{color:var(--text-soft);font-size:15px;max-width:72ch}
.tipps .punkte{margin-top:6px;display:grid;gap:2px}
.tipps .punkte li{font-size:15px;color:var(--text-primary);padding-left:16px;position:relative}
.tipps .punkte li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:2px;border-radius:1px;background:var(--text-faint)}

/* Ausrüstung */
.gear-gruppe+.gear-gruppe{margin-top:22px}
.gear-gruppe h3{font:500 15px/1.3 var(--font-ui);color:var(--text-muted);margin-bottom:10px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px}
.slot{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 14px 12px 18px;
  border:1px solid var(--border-color);border-radius:var(--radius-control);background:var(--surface-card);overflow:hidden}
.slot::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad,var(--g-common))}
.slot-kopf{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--text-muted)}
.slot-name{font-weight:600;font-size:15px;line-height:1.3;color:var(--text-strong)}
.slot-zeile{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--text-soft)}
.slot-quelle{font-size:13px;color:var(--text-muted)}
.slot .marke{align-self:flex-start;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:500}
.slot.tausch{border-color:var(--status-warn-line)}
.slot.tausch .marke{background:var(--status-warn-wash);color:var(--text-primary);border:1px solid var(--status-warn-line)}
.seltenheit{display:inline-flex;align-items:center;gap:6px}
.seltenheit::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--grad,var(--g-common))}
.g-common{--grad:var(--g-common)} .g-rare{--grad:var(--g-rare)} .g-legend{--grad:var(--g-legend)}
.g-unique{--grad:var(--g-unique)} .g-epic{--grad:var(--g-epic)} .g-mythic{--grad:var(--g-mythic)}
.g-special{--grad:var(--g-special)}
.meter{height:6px;border-radius:3px;background:var(--accent-wash);overflow:hidden;margin-top:2px}
.meter>span{display:block;height:100%;border-radius:3px;background:var(--accent)}
.meter.voll>span{background:var(--status-ok)}

/* Daevanion */
.dae{display:grid;gap:12px;max-width:720px}
.dae li{display:grid;grid-template-columns:120px minmax(0,1fr) 56px;align-items:center;gap:14px;font-size:15px}
.dae .meter{height:8px;margin:0;border-radius:4px}
.dae .prozent{text-align:right;color:var(--text-soft);font-variant-numeric:tabular-nums}

/* Skills */
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:2px 24px}
/* Lange deutsche Skill-Namen: Stufe rutscht bei Bedarf in die nächste Zeile statt in die Nachbarspalte */
.skills li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;min-width:0;padding:8px 0;
  border-bottom:1px solid var(--border-color);font-size:15px}
.skills .s-name{color:var(--text-primary);min-width:0;overflow-wrap:anywhere}
.skills .aus{color:var(--text-muted)}
.skills .s-info{margin-left:auto;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.begleiter{display:flex;flex-wrap:wrap;gap:10px 40px;font-size:15px}
.begleiter .label{color:var(--text-muted);margin-right:8px}

.karte-fuss{margin-top:56px;padding-top:20px;border-top:1px solid var(--border-color);display:flex;
  flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;color:var(--text-muted);font-size:14px}

/* Datenschutz */
.text-seite{max-width:70ch}
.text-seite h2{font:600 20px/1.3 var(--font-ui);color:var(--text-strong);margin:32px 0 8px}
.text-seite p,.text-seite li{color:var(--text-soft)}
.text-seite ul{list-style:disc;padding-left:22px;display:grid;gap:4px}

/* ============ FUSS ============ */
.fuss{border-top:1px solid var(--border-color);padding:24px 0 32px;color:var(--text-muted);font-size:14px}
.fuss-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.fuss a{color:var(--text-soft)}
.fuss a:hover{color:var(--text-primary)}

/* Meldung unten */
.meldung{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:min(560px,calc(100% - 32px));
  padding:12px 16px;border-radius:var(--radius-control);border:1px solid var(--border-color-strong);
  background:var(--surface-card);box-shadow:var(--shadow-pop);font-size:15px}

/* ============ HANDY ============ */
@media (max-width:860px){
  :root{--gutter:16px}
  main{padding-top:24px}
  .start{grid-template-columns:minmax(0,1fr);gap:32px}
  .start h1{font-size:38px}
  .start-punkte{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .char-zeile{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .char-zeile .stand{text-align:left}
  .zahlen{grid-template-columns:minmax(0,1fr)}
  .karte-kopf .rechts{align-items:flex-start}
  h1.titel{font-size:30px}
  .zahl-panel .gross{font-size:40px}
  .feld,.feld input{width:100%}
  .such-form{flex-direction:column;align-items:stretch}
  .dae li{grid-template-columns:96px minmax(0,1fr) 48px}
  .was-jetzt{padding:20px 16px 4px}
  .wer{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}