/* ============================================================================
   THEME ALLROUND — Tokens + Basis. Das Seiten-Design kommt (wie in der Vorlage)
   aus Inline-var()-Styles der Views; hier nur Tokens, Fonts-Fallback, Body-Basis,
   Hover-/Responsive-Helfer (was Inline nicht kann).
   Grundmodus DUNKEL (nativ, wie Vorlage). Hell via :root[data-theme="light"].
   ========================================================================== */

:root{
  --bg:#0f1115; --bg2:#191c22; --text:#f4f5f7; --muted:#99a0ac; --border:#272b33;
  --primary:#ff6a3d; --primary-ink:#ffffff; --on-primary:#ffffff; --accent:#38d6b0;
  --radius:14px; --radius-lg:22px; --chip-radius:999px;
  --card-bw:1px; --card-bc:var(--border);
  /* Schatten-Skala (11/2026): weich + mehrlagig, kleine Y-Versätze. Dunkel: etwas mehr
     Deckkraft, damit Tiefe auf dunklem Grund überhaupt sichtbar bleibt — nie hart. */
  --shadow-sm:0 1px 2px rgba(0,0,0,.18);
  --shadow:0 1px 2px rgba(0,0,0,.16),0 6px 16px -6px rgba(0,0,0,.32);
  --shadow-hover:0 2px 4px rgba(0,0,0,.18),0 14px 28px -10px rgba(0,0,0,.40);
  --shadow-pop:0 4px 10px -2px rgba(0,0,0,.24),0 18px 36px -12px rgba(0,0,0,.45);
  /* Abstands-Raster (8er-System) — EINE Quelle für Karten-/Raster-/Spalten-Luft. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --gap-grid:var(--sp-4); --gap-card:var(--sp-5); --gap-col:40px; --gap-section:var(--sp-7);
  --font-head:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --head-weight:700; --head-spacing:-0.02em; --head-transform:none;
  --maxw:1240px;
}
:root[data-theme="light"]{
  --bg:#f5f6f8; --bg2:#ffffff; --text:#12141a; --muted:#5c6270; --border:#e4e7ec;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.04);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 12px -2px rgba(16,24,40,.06);
  --shadow-hover:0 2px 4px rgba(16,24,40,.04),0 12px 24px -6px rgba(16,24,40,.10);
  --shadow-pop:0 4px 8px -2px rgba(16,24,40,.06),0 16px 32px -8px rgba(16,24,40,.14);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body.ar{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;}
.ar a{color:inherit;text-decoration:none;}
.ar img{max-width:100%;}
.ar-main{flex:1 0 auto;}
.ar-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%;}

/* Hover-/Transition-Helfer (Inline kann kein :hover) */
.ar-lift{transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.ar-lift:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow-hover);}
.ar-btn{transition:transform .15s ease,filter .15s ease;cursor:pointer;text-decoration:none;}
.ar-btn:hover{transform:translateY(-1px);filter:brightness(1.05);}
.ar-link:hover{color:var(--primary)!important;}
@media(prefers-reduced-motion:reduce){ .ar-lift,.ar-btn{transition:none;} .ar-lift:hover,.ar-btn:hover{transform:none;} }

/* Header-Navigation responsiv (Inline kann kein media query) */
.ar-navlink{color:var(--muted);transition:color .15s;}
.ar-navlink:hover{color:var(--text);}
.ar-navlink.is-active{color:var(--primary-ink);background:var(--primary);}
/* Burger nur mobil: !important schlägt das inline display:inline-flex des Icon-Buttons */
.ar-burger{display:none!important;}
@media(max-width:960px){
  .ar-nav{display:none!important;}
  .ar-burger{display:inline-flex!important;}
  .ar-nav.ar-open{display:flex!important;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    background:var(--bg2);border-bottom:1px solid var(--border);padding:12px 24px;gap:4px;z-index:120;}
}
.ar-hd-text{display:none;}
@media(min-width:600px){.ar-hd-text{display:inline;}}