/* ============================================================
   Michaels Autopilot — gemeinsames Stylesheet aller Seiten
   Schriften: Quicksand (Text und Überschriften), JetBrains Mono (Zahlen, Labels)
   Beide selbst gehostet, OFL-Lizenzen liegen in fonts/.
   Farblogik:  Marke = Blau→Mint-Verlauf (Buttons, Akzente)
               Mint  = das System hat es erledigt
               Amber = das braucht uns
   ============================================================ */

@font-face{font-family:'Quicksand';src:url('fonts/quicksand.woff2') format('woff2-variations');
  font-weight:300 700;font-display:swap;font-style:normal}
@font-face{font-family:'Mono';src:url('fonts/mono.woff2') format('woff2-variations');
  font-weight:100 800;font-display:swap;font-style:normal}

/* ---------- Tokens: Dunkel ist Standard ---------- */
:root{
  color-scheme:dark;
  --bg:#06090D; --panel:#0C1117; --panel-2:#121A24;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --tx:#EEF3F8; --tx-2:#B4C0CD; --tx-3:#8593A3;
  /* Marke */
  --a1:#62B6FF; --a2:#72F3D2;
  --grad:linear-gradient(120deg,var(--a1),var(--a2));
  --grad-text:linear-gradient(100deg,var(--a1),var(--a2),var(--a1));
  --brand:#62B6FF; --brand-text:#8CC8FF; --brand-ink:#05090D;
  --brand-dim:rgba(98,182,255,.13); --brand-line:rgba(98,182,255,.42); --brand-glow:rgba(98,182,255,.5);
  /* Produktlogik: Blau = das System hat es erledigt, Neutral/Weiß = das braucht uns */
  --ok:#62B6FF; --ok-text:#8CC8FF; --ok-ink:#05090D;
  --ok-dim:rgba(98,182,255,.13); --ok-line:rgba(98,182,255,.42); --ok-glow:rgba(98,182,255,.5);
  --warn:#EEF3F8; --warn-text:#EEF3F8; --warn-dim:rgba(255,255,255,.06); --warn-line:rgba(255,255,255,.34);
  /* Mint nur als zweiter Verlaufston und als Highlight-Pille */
  --mint:#72F3D2; --mint-text:#7CF0D2; --mint-dim:rgba(114,243,210,.12); --mint-line:rgba(114,243,210,.42);
  --header-bg:rgba(9,13,19,.66); --input-bg:rgba(0,0,0,.35);
  --shadow-card:0 28px 70px -40px var(--brand-glow);
  --shadow-panel:0 40px 80px -40px rgba(0,0,0,.9);
  --grain:.028; --orb:.16;
  --sans:'Quicksand',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1180px;
}
/* ---------- Tokens: Hell ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FFFFFF; --panel:#F3F6FB; --panel-2:#E8EFFA;
  --line:rgba(20,50,90,.12); --line-2:rgba(20,50,90,.22);
  --tx:#0F1A26; --tx-2:#45566A; --tx-3:#6E8094;
  --a1:#2B7FFF; --a2:#17C3A8;
  --brand:#1F6FEB; --brand-text:#155ECC; --brand-ink:#FFFFFF;
  --brand-dim:#E6EFFF; --brand-line:rgba(31,111,235,.42); --brand-glow:rgba(31,111,235,.35);
  --ok:#1F6FEB; --ok-text:#155ECC; --ok-ink:#FFFFFF;
  --ok-dim:#E6EFFF; --ok-line:rgba(31,111,235,.42); --ok-glow:rgba(31,111,235,.35);
  --warn:#0F1A26; --warn-text:#0F1A26; --warn-dim:rgba(20,50,90,.06); --warn-line:rgba(20,50,90,.38);
  --mint:#17C3A8; --mint-text:#0E9A84; --mint-dim:#DDF7F1; --mint-line:rgba(23,195,168,.45);
  --header-bg:rgba(255,255,255,.72); --input-bg:#FFFFFF;
  --shadow-card:0 24px 50px -30px var(--brand-glow);
  --shadow-panel:0 30px 60px -36px rgba(20,50,90,.3);
  --grain:0; --orb:.14;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--tx);
  font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background .25s ease,color .25s ease;
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Kornstruktur – nur dunkel */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;position:relative;z-index:2}
@media(min-width:800px){.wrap{padding:0 40px}}
a{color:inherit;text-decoration:none}
strong,b{font-weight:700}

/* ---------- Typografie ---------- */
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.022em;line-height:1.08}
h1{font-size:clamp(38px,6.2vw,72px)}
h2{font-size:clamp(28px,4vw,46px);line-height:1.12}
h3{font-size:19px;line-height:1.3;letter-spacing:-.012em}
.eyebrow{color:var(--brand-text);display:inline-flex;align-items:center;gap:9px;margin-bottom:26px}
.eyebrow::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--grad)}
.lede{font-size:clamp(17px,1.65vw,19.5px);color:var(--tx-2);max-width:56ch}
.lede strong{color:var(--tx)}
.sub{color:var(--tx-2);max-width:60ch;font-size:17px}
/* Verlaufstext mit leichtem Schimmer */
.gt{background-image:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:240% 100%;animation:shimmer 6s ease-in-out infinite alternate}
@keyframes shimmer{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ---------- Header: schwebende Pille ---------- */
header{position:sticky;top:0;z-index:50;padding:12px 0 0}
.bar{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px;
  padding:0 8px 0 18px;border-radius:999px;border:1px solid var(--line);
  background:var(--header-bg);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:15px;letter-spacing:-.01em;font-weight:700;white-space:nowrap}
.logo svg{flex:none}
.nav{display:none;gap:26px;align-items:center;font-size:15px;font-weight:600;color:var(--tx-2)}
.nav a{transition:color .2s}
.nav a:hover{color:var(--tx)}
@media(min-width:900px){.nav{display:flex}}
.bar-right{display:flex;align-items:center;gap:10px}
@media(max-width:560px){.bar-right .btn{display:none}}

/* ---------- Buttons ---------- */
.btn{
  position:relative;font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.005em;
  padding:11px 20px;border-radius:999px;background:var(--grad);color:var(--brand-ink);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:0;cursor:pointer;line-height:1.2;
  background-size:160% 100%;background-position:0% 50%;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background-position .5s;
  box-shadow:0 6px 24px -14px var(--brand-glow);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px -16px var(--brand-glow);background-position:100% 50%}
.btn-ghost{background:transparent;color:var(--tx);border:1.5px solid var(--line-2);box-shadow:none}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-text);box-shadow:0 12px 36px -20px var(--brand-glow)}
.btn-lg{font-size:16px;padding:14px 26px}

/* Umschalter hell/dunkel */
.theme{
  width:40px;height:40px;border-radius:999px;border:1.5px solid var(--line-2);background:transparent;
  color:var(--tx-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;flex:none;
}
.theme:hover{border-color:var(--brand);color:var(--brand-text)}
.theme svg{width:18px;height:18px}
.theme .sun{display:none}
:root[data-theme="light"] .theme .sun{display:block}
:root[data-theme="light"] .theme .moon{display:none}

/* ---------- Abschnitte ---------- */
section{padding:84px 0;position:relative}
@media(min-width:800px){section{padding:120px 0}}
.rule{height:1px;background:var(--line);width:100%}
.js .reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* Leuchtkugeln im Hintergrund – langsam treibend */
.orb{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0;opacity:var(--orb);
  animation:orb 22s ease-in-out infinite alternate}
.orb.a{background:var(--a1)} .orb.b{background:var(--a2)}
@keyframes orb{from{translate:-6% -4%}to{translate:7% 6%}}

/* ---------- Karten ---------- */
.card{
  position:relative;border:1px solid var(--line);border-radius:18px;padding:24px 22px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  transition:border-color .35s,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .4s;
}
.card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.card:hover,.card:focus-within{border-color:transparent;transform:translateY(-3px);box-shadow:var(--shadow-card)}
.card:hover::before,.card:focus-within::before{opacity:1}
.pill{
  display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:var(--brand-text);
  border:1px solid var(--brand-line);background:var(--brand-dim);border-radius:999px;
  padding:6px 12px;line-height:1;transition:background .3s,color .3s,border-color .3s;
}
.card:hover .pill,.card:focus-within .pill{background:var(--grad);color:var(--brand-ink);border-color:transparent}
.pill.ok{color:var(--mint-text);border-color:var(--mint-line);background:var(--mint-dim)}

/* ---------- Rechtsseiten ---------- */
.legal main{padding:64px 0 96px}
@media(min-width:800px){.legal main{padding:88px 0 120px}}
.legal h1{font-size:clamp(34px,5vw,56px)}
.legal h2{font-size:22px;margin-bottom:14px;line-height:1.25}
.legal .cards{display:grid;gap:14px;margin-top:44px}
@media(min-width:820px){.legal .cards{grid-template-columns:1fr 1fr}.legal .card.wide{grid-column:1/-1}}
.legal .card .pill{margin-bottom:16px}
.legal .card p,.legal .card address{font-style:normal;color:var(--tx-2);font-size:15.5px;line-height:1.7}
.legal .card b{color:var(--tx)}
.legal .card a{color:var(--brand-text)}
.legal .card a:hover{text-decoration:underline;text-underline-offset:3px}
.legal .block{margin-top:44px;max-width:76ch}
.legal .block p,.legal .block li{color:var(--tx-2);font-size:15.5px;margin-top:12px;line-height:1.7}
.legal .block p:first-of-type{margin-top:0}
.legal .block ul{padding-left:20px;margin-top:8px}
.legal .block li{margin-top:6px}
.legal .block a{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px}
.legal .block b{color:var(--tx)}
.legal .toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.legal .toc a{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--tx-2);border:1px solid var(--line-2);border-radius:999px;padding:7px 12px;transition:border-color .2s,color .2s}
.legal .toc a:hover{border-color:var(--brand);color:var(--brand-text)}
.legal .stand{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin-top:48px}

/* ---------- Fußzeile ---------- */
footer{border-top:1px solid var(--line);padding:40px 0 56px;position:relative}
.frow{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;
  font-size:14px;color:var(--tx-2);font-weight:600}
.flinks{display:flex;gap:22px;flex-wrap:wrap}
footer a:hover{color:var(--brand-text)}
.built{display:inline-flex;align-items:center;gap:7px;color:var(--tx-2)}
.built .heart{font-size:15px;line-height:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
:root[data-theme="light"] .built .heart{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.fimp{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.7;color:var(--tx-3);font-weight:500}
.fimp b{color:var(--tx-2);font-weight:700}