/* ===== Design-Tokens (1:1 aus quelle/template.html) ===== */
:root{
  --navy:#06103F;          /* Vereinsfarbe, Primär */
  --ink:#020722;           /* tiefstes Blau für Hero/Footer */
  --devil:#3A35F0;         /* Ultramarin aus dem Logo, Akzent */
  --devil-hi:#5B57FF;
  --ice:#EEF2F8;           /* Eisfläche, heller Grund */
  --steel:#8D97AD;         /* Silber aus Logo/Schläger */
  --line:#D5DCE8;
  --paper:#FFFFFF;
  --text:#0B1335;
  --muted:#59627A;
  --on-dark:#FFFFFF;
  --on-dark-muted:#AEB7CC;
  --shop:#D62839;
  --ff-display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --ff-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --wrap:1240px;
  --gut:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ice:#0A1440; --paper:#0E1A4D; --text:#EEF2F8; --muted:#AEB7CC; --line:#1E2B66;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{ --ice:#0A1440; --paper:#0E1A4D; --text:#EEF2F8; --muted:#AEB7CC; --line:#1E2B66; color-scheme:dark; }

/* Brücke zu Elementor: Globale Farben, die im Dunkelmodus wechseln, zeigen auf die Tokens.
   Der Selektor schlägt .elementor-kit-N (Spezifität 0,1,1 > 0,1,0). */
body[class*="elementor-kit-"]{
  --e-global-color-text:var(--text);
  --e-global-color-bdice:var(--ice);
  --e-global-color-bdpaper:var(--paper);
  --e-global-color-bdmuted:var(--muted);
  --e-global-color-bdline:var(--line);
}

/* ===== Basis (ersetzt die abgeschalteten Hello-Grundstile; 1:1 aus dem Entwurf) ===== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ice);color:var(--text);font:400 16px/1.55 var(--ff-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
table{border-collapse:collapse}
.skip{position:absolute;left:-999px;top:8px;background:var(--devil);color:#fff;padding:10px 14px;z-index:99}
.skip:focus{left:8px}
.sec{padding:clamp(56px,8vw,96px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
h1,h2,h3{margin:0}
h2{font-size:clamp(34px,5vw,56px)}
h1,h2,h3{font-family:var(--ff-display);font-weight:800;line-height:.95;letter-spacing:.01em;text-transform:uppercase}
h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
:focus-visible{outline:3px solid var(--devil-hi);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lede{color:var(--muted);max-width:60ch;margin:10px 0 0}
.kicker{font:700 14px/1 var(--ff-body);color:var(--acc,var(--devil))}

/* ===== Buttons (1:1 aus dem Entwurf; Elementor setzt keine globalen Link-/Button-Farben, siehe elementor-kit.php) ===== */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 15px/1 var(--ff-body);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:15px 22px;border:2px solid transparent;border-radius:3px;transition:background .15s,color .15s,border-color .15s;cursor:pointer}
.btn-primary{background:var(--devil);color:#fff}
.btn-primary:hover{background:var(--devil-hi);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--devil);color:#fff}
.link{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px;text-decoration:none;border-bottom:2px solid var(--devil);padding-bottom:3px;color:inherit}
.link:hover{color:var(--acc,var(--devil))}
/* Elementor-Button-Widget: Standard = .btn-primary (Einstellungen im Widget gehen vor, Spezifität 0,4,0) */
body .elementor-widget-button .elementor-button{display:inline-flex;align-items:center;gap:10px;font:700 15px/1 var(--ff-body);letter-spacing:.04em;text-transform:uppercase;padding:15px 22px;border:2px solid transparent;border-radius:3px;background:var(--devil);color:#fff;transition:background .15s,color .15s,border-color .15s}
body .elementor-widget-button .elementor-button:hover,body .elementor-widget-button .elementor-button:focus{background:var(--devil-hi);color:#fff}
/* Elementor-Button-Widget mit CSS-Klasse btn-ghost / btn-dark */
.elementor-widget-button.btn-ghost .elementor-button{background:transparent;border:2px solid rgba(255,255,255,.5);color:#fff}
.elementor-widget-button.btn-ghost .elementor-button:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.elementor-widget-button.btn-dark .elementor-button{background:var(--navy)}
.elementor-widget-button.btn-dark .elementor-button:hover{background:var(--devil)}

/* ===== Hell/Dunkel-Schalter ===== */
html body .theme-tg{display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-radius:0;color:var(--on-dark-muted);cursor:pointer;padding:6px 4px;font:600 13px/1 var(--ff-body);text-transform:none;letter-spacing:normal;box-shadow:none}
html body .theme-tg:hover,html body .theme-tg:focus{color:#fff;background:none}
.theme-tg svg{width:16px;height:16px}
.theme-tg .i-sun{fill:none;stroke:currentColor;stroke-width:2}
.theme-tg .i-sun circle{fill:currentColor;stroke:none}
.theme-tg .i-moon{fill:currentColor}
.tg-track{position:relative;width:34px;height:18px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);transition:background .2s}
.tg-knob{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}
.theme-tg[aria-checked="true"] .tg-track{background:var(--devil)}
.theme-tg[aria-checked="true"] .tg-knob{transform:translateX(16px)}
.theme-tg[aria-checked="false"] .i-sun,.theme-tg[aria-checked="true"] .i-moon{color:#fff}
.tg-label{margin-left:2px}
@media (max-width:640px){.tg-label{display:none}}