/* SIMO Zwei-Marken-Design-System — Produktions-Beleg (0-Console-Nachweis).
   Reine Tokens/CSS aus docs/strategy/brand-color-system.md, lokale Fonts + Logos + FontAwesome.
   Keine externen Requests, kein Babel, keine Frameworks. */

@font-face { font-family:"Uni Neue"; src:url("fonts/unineue-regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Uni Neue"; src:url("fonts/unineue-bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Uni Neue"; src:url("fonts/unineue-black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"Uni Neue Book"; src:url("fonts/unineue-book.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("fonts/Inter-Variable.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --font-brand:"Uni Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --radius:16px; --ease:cubic-bezier(0.4,0,0.2,1);
  --fa-secondary-opacity:0.55;
}

/* ---------- SIMO GmbH — Purple / Navy (Beratung) ---------- */
html[data-brand="simo-gmbh"][data-theme="dark"]{
  --bg:#000033; --bg-elevated:#0a0a4d; --text:#ffffff; --text-sec:#cccccc; --text-muted:#999999;
  --primary:#b794f6; --primary-hover:#c299ff; --secondary:#9c9cf8;
  --fill:#7b2cbf; --on-fill:#ffffff; --gradient:linear-gradient(135deg,#7b2cbf 0%,#5a189a 100%);
  --border:rgba(255,255,255,0.10);
  --glass-bg:rgba(183,148,246,0.06); --glass-border:rgba(183,148,246,0.22); --glass-glow:0 0 24px rgba(183,148,246,0.30);
  --focus:0 0 0 3px #b794f6; --fa-primary:#b794f6; --fa-secondary:#9c9cf8;
}
html[data-brand="simo-gmbh"][data-theme="light"]{
  --bg:#ffffff; --bg-elevated:#f5f5f7; --text:#252626; --text-sec:#5a5a5a; --text-muted:#6f6f75;
  --primary:#5a189a; --primary-hover:#7b2cbf; --secondary:#7b2cbf;
  --fill:#7b2cbf; --on-fill:#ffffff; --gradient:linear-gradient(135deg,#7b2cbf 0%,#5a189a 100%);
  --border:rgba(0,0,0,0.10);
  --glass-bg:rgba(255,255,255,0.65); --glass-border:rgba(183,148,246,0.22); --glass-glow:0 0 24px rgba(183,148,246,0.15);
  --focus:0 0 0 3px #5a189a; --fa-primary:#5a189a; --fa-secondary:#7b2cbf;
}

/* ---------- SIMOSphere AI — Teal / Hell (Produktfamilie) ---------- */
html[data-brand="simosphere"][data-theme="light"]{
  --bg:#ffffff; --bg-elevated:#f5f5f7; --text:#252626; --text-sec:#5a5a5a; --text-muted:#6f6f75;
  --primary:#0d7878; --primary-hover:#0a6363; --secondary:#5ebfbf;
  --fill:#0d7878; --on-fill:#ffffff; --gradient:linear-gradient(135deg,#0d7878 0%,#2605f3 100%);
  --border:rgba(0,0,0,0.08);
  --glass-bg:rgba(255,255,255,0.65); --glass-border:rgba(94,191,191,0.15); --glass-glow:0 0 24px rgba(94,191,191,0.18);
  --focus:0 0 0 3px #0d7878; --fa-primary:#0d7878; --fa-secondary:#5ebfbf;
}
html[data-brand="simosphere"][data-theme="dark"]{
  --bg:#0b1a1a; --bg-elevated:#12292a; --text:#f2f2f2; --text-sec:rgba(242,242,242,0.7); --text-muted:rgba(242,242,242,0.5);
  --primary:#4bbecf; --primary-hover:#5ed0e0; --secondary:#5ebfbf;
  --fill:#4bbecf; --on-fill:#0b1a1a; --gradient:linear-gradient(135deg,#4bbecf 0%,#8b7dfd 100%);
  --border:rgba(255,255,255,0.10);
  --glass-bg:rgba(11,26,26,0.60); --glass-border:rgba(94,191,191,0.22); --glass-glow:0 0 24px rgba(94,191,191,0.30);
  --focus:0 0 0 3px #4bbecf; --fa-primary:#4bbecf; --fa-secondary:#5ebfbf;
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-ui); font-size:16px; line-height:1.6;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.wrap{max-width:1120px; margin:0 auto; padding:0 2%;}
a{color:var(--primary); text-underline-offset:3px;}
:focus-visible{outline:none; box-shadow:var(--focus);}

/* Header */
header{position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border);}
.nav{display:flex; align-items:center; gap:24px; padding:14px 0;}
.brandmark{display:flex; align-items:center; gap:10px; margin-right:auto;}
.brandmark img{height:26px; width:auto; display:block;}
.nav a.navlink{display:inline-flex; align-items:center; min-height:24px; padding:6px 4px;
  color:var(--text-sec); text-decoration:none; font-size:15px;}
.nav a.navlink:hover{color:var(--primary);}
.toggle{display:inline-flex; gap:4px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:999px; padding:4px;}
.toggle button{min-height:32px; min-width:44px; padding:4px 12px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--text-sec); font-family:var(--font-ui); font-size:13px;}
.toggle button[aria-pressed="true"]{background:var(--fill); color:var(--on-fill);}

/* Hero + two-part heading */
.hero{padding:72px 0 48px; position:relative;}
.eyebrow{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); font-weight:700;}
h1{font-family:var(--font-brand); font-weight:900; font-size:clamp(40px,7vw,84px); line-height:1.02; margin:14px 0 20px;}
h1 .accent{color:var(--primary);}
h1 .rest{color:var(--text);}
.lead{max-width:620px; color:var(--text-sec); font-size:19px;}
h2{font-family:var(--font-brand); font-weight:700; font-size:clamp(26px,3.5vw,38px); margin:0 0 8px;}
h2 .accent{color:var(--primary);} h3{font-family:var(--font-brand); font-weight:700; font-size:20px; margin:0 0 6px;}

/* Buttons */
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;}
.btn{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:12px 24px; border-radius:999px;
  font-family:var(--font-ui); font-weight:600; font-size:16px; cursor:pointer; border:1px solid transparent; text-decoration:none;}
.btn-primary{background:var(--fill); color:var(--on-fill);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary);}

/* Glass panels / cards / stats */
.grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; margin-top:8px;}
@media(max-width:820px){.grid{grid-template-columns:1fr;}}
.glass{background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,0.28),var(--glass-glow); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:26px; transition:transform .3s var(--ease);}
.glass:hover{transform:translateY(-3px);}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px;}
.stat .num{font-family:var(--font-brand); font-weight:900; font-size:44px; color:var(--primary); line-height:1;}
.stat .lbl{color:var(--text-sec); font-size:14px; margin-top:6px;}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px;}
@media(max-width:820px){.pillars{grid-template-columns:1fr;}}
.pillar i{font-size:26px; color:var(--fa-primary); margin-bottom:10px; display:block;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--fa-primary) 45%,transparent));}
.pillar p{color:var(--text-sec); font-size:15px; margin:0;}

/* Form */
.formcard{margin-top:44px; max-width:460px;}
label{display:block; font-weight:600; font-size:14px; margin:14px 0 6px;}
input[type=email],input[type=password]{width:100%; min-height:44px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--bg-elevated); color:var(--text); font-family:var(--font-ui); font-size:15px;}
input:focus-visible{box-shadow:var(--focus); border-color:var(--primary);}
.check{display:flex; align-items:center; gap:10px; min-height:32px; margin:14px 0; color:var(--text-sec); font-size:15px;}
footer{border-top:1px solid var(--border); margin-top:64px; padding:32px 0; color:var(--text-muted);}
.foot-cols{display:flex; flex-wrap:wrap; gap:48px;}
.foot-cols a{display:inline-flex; align-items:center; min-height:24px; padding:4px 0; color:var(--text-sec); text-decoration:none; font-size:14px;}
.foot-cols a:hover{color:var(--primary);}
.only-gmbh,.only-sphere{display:none;}
html[data-brand="simo-gmbh"] .only-gmbh{display:revert;}
html[data-brand="simosphere"] .only-sphere{display:revert;}