/* ============================================================
   OneDrive Manager — bundra.eu · Design-System v1
   Marke: Kobalt-Azur + kühle Stahl-Neutrale (kohärent zum GTM-Dossier),
   editorialer Produkt-Duktus. System-Sans + Monospace für Datenrollen.
   Beide Themes über Tokens. Kein CDN-Webfont (Selbsthosting-fest, DSGVO).
   ============================================================ */

:root{
  color-scheme:light;
  --bg:#f6f8fc; --surface:#ffffff; --surface-2:#eef2f9; --sunken:#f0f3fa;
  --ink:#0f1520; --muted:#525d72; --faint:#828da3; --hairline:#dde3ee;
  --accent:#2b4fd6; --accent-2:#5878ef; --accent-ink:#1f3aa0; --accent-weak:#e7ecfc;
  --on-accent:#ffffff;
  --ok:#0f7a52; --ok-bg:#dcf0e6; --ok-line:#93d4b6;
  --warn:#8f5e0e; --warn-bg:#f6ead0; --warn-line:#e2bb78;
  --hero-1:#1b2f7a; --hero-2:#2b4fd6; --hero-ink:#eaf0ff; --hero-sub:#b9c8f6;
  --shadow:0 1px 2px rgba(15,30,60,.06),0 8px 30px rgba(15,30,60,.07);
  --shadow-lg:0 4px 12px rgba(15,30,60,.10),0 24px 60px rgba(15,30,60,.14);
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  --maxw:1160px; --gap:clamp(16px,3vw,26px); --radius:14px; --radius-lg:20px;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#0b0e14; --surface:#141a24; --surface-2:#1a212d; --sunken:#0f141c;
    --ink:#e8edf6; --muted:#98a3b8; --faint:#6a7488; --hairline:#28303e;
    --accent:#6e93ff; --accent-2:#8aa6ff; --accent-ink:#a8c2ff; --accent-weak:#162340;
    --on-accent:#0b0e14;
    --ok:#45c887; --ok-bg:#0f2c1f; --ok-line:#215c41;
    --warn:#e0a63f; --warn-bg:#2e2411; --warn-line:#5c471d;
    --hero-1:#0e1836; --hero-2:#243f9e; --hero-ink:#eaf0ff; --hero-sub:#aebdf0;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 30px rgba(0,0,0,.45);
    --shadow-lg:0 4px 12px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f8fc; --surface:#ffffff; --surface-2:#eef2f9; --sunken:#f0f3fa;
  --ink:#0f1520; --muted:#525d72; --faint:#828da3; --hairline:#dde3ee;
  --accent:#2b4fd6; --accent-2:#5878ef; --accent-ink:#1f3aa0; --accent-weak:#e7ecfc;
  --on-accent:#ffffff;
  --ok:#0f7a52; --ok-bg:#dcf0e6; --ok-line:#93d4b6;
  --warn:#8f5e0e; --warn-bg:#f6ead0; --warn-line:#e2bb78;
  --hero-1:#1b2f7a; --hero-2:#2b4fd6; --hero-ink:#eaf0ff; --hero-sub:#b9c8f6;
  --shadow:0 1px 2px rgba(15,30,60,.06),0 8px 30px rgba(15,30,60,.07);
  --shadow-lg:0 4px 12px rgba(15,30,60,.10),0 24px 60px rgba(15,30,60,.14);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0e14; --surface:#141a24; --surface-2:#1a212d; --sunken:#0f141c;
  --ink:#e8edf6; --muted:#98a3b8; --faint:#6a7488; --hairline:#28303e;
  --accent:#6e93ff; --accent-2:#8aa6ff; --accent-ink:#a8c2ff; --accent-weak:#162340;
  --on-accent:#0b0e14;
  --ok:#45c887; --ok-bg:#0f2c1f; --ok-line:#215c41;
  --warn:#e0a63f; --warn-bg:#2e2411; --warn-line:#5c471d;
  --hero-1:#0e1836; --hero-2:#243f9e; --hero-ink:#eaf0ff; --hero-sub:#aebdf0;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 30px rgba(0,0,0,.45);
  --shadow-lg:0 4px 12px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.6);
}

/* ---- Reset / base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;font-weight:800}
p{margin:0}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--font-mono)}
.tnum{font-variant-numeric:tabular-nums}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.center{text-align:center}
.muted{color:var(--muted)}

/* ---- Eyebrow / kicker ---- */
.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:600;display:inline-flex;gap:9px;align-items:center}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-sans);font-weight:650;font-size:1rem;
  padding:.72em 1.3em;border-radius:11px;border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;white-space:nowrap;line-height:1}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 40%,transparent)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000);box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 45%,transparent)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--hairline);box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--hairline))}
.btn-lg{font-size:1.06rem;padding:.85em 1.6em}
.btn .sub{font-family:var(--font-mono);font-size:.72rem;font-weight:500;opacity:.85}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---- Pills / badges ---- */
.pill{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  padding:.34em .7em;border-radius:999px;border:1px solid var(--hairline);background:var(--surface-2);color:var(--muted);line-height:1}
.pill.accent{background:var(--accent-weak);border-color:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--accent-ink)}
.pill.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--hairline)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:1.06rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(140deg,var(--accent-2),var(--accent));flex:none;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:.9rem;box-shadow:var(--shadow)}
.nav-links{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav-links a{font-size:.95rem;color:var(--muted);padding:.45em .7em;border-radius:8px;font-weight:550}
.nav-links a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
.nav-toggle{display:none;margin-left:auto;background:var(--surface);border:1px solid var(--hairline);border-radius:9px;
  padding:.5em .7em;cursor:pointer;color:var(--ink);font-size:1rem}
@media(max-width:840px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--hairline);padding:10px 16px 16px}
  .nav-links.open{display:flex}
  .nav-links a{padding:.7em .8em}
  .nav-toggle{display:inline-flex}
}

/* ---- Section rhythm ---- */
section{padding:clamp(48px,7vw,90px) 0}
.section-tight{padding:clamp(32px,5vw,56px) 0}
.alt{background:var(--surface);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.sunk{background:var(--sunken)}
.sec-head{max-width:64ch;margin:0 auto clamp(28px,4vw,48px);text-align:center}
.sec-head.left{margin-left:0;text-align:left}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:750}
.sec-head p{margin-top:.7rem;color:var(--muted);font-size:1.08rem}
.lead{font-size:1.14rem;color:var(--muted);max-width:60ch}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;color:var(--hero-ink);
  background:radial-gradient(120% 120% at 15% 0%,var(--hero-2) 0%,var(--hero-1) 60%,#0a1230 100%)}
.hero .container{position:relative;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(56px,8vw,110px);z-index:1}
.hero .eyebrow{color:#cfdcff}
.hero .eyebrow .dot{background:#8fb0ff}
.hero h1{font-size:clamp(2rem,5.4vw,3.6rem);font-weight:850;color:#fff;margin-top:.6rem;max-width:16ch}
.hero .sub{margin-top:1.1rem;font-size:clamp(1.06rem,2vw,1.28rem);color:var(--hero-sub);max-width:52ch;line-height:1.55}
.hero .btn-row{margin-top:1.8rem}
.hero .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(4px);box-shadow:none}
.hero .btn-ghost:hover{background:rgba(255,255,255,.16)}
.hero .reassure{margin-top:1.1rem;font-family:var(--font-mono);font-size:.82rem;color:#a9bdf0;display:flex;flex-wrap:wrap;gap:6px 18px}
.hero-glow{position:absolute;inset:0;background:radial-gradient(60% 50% at 85% 20%,rgba(120,150,255,.35),transparent 70%);pointer-events:none}

/* ---- Grids & cards ---- */
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--muted);font-size:.98rem}
.feature .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.2rem;margin-bottom:14px;
  background:var(--accent-weak);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}

/* ---- Steps (how it works) ---- */
.steps{counter-reset:step;display:grid;gap:var(--gap)}
.steps.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.steps.g3{grid-template-columns:1fr}}
.step{position:relative;padding-left:0}
.step .n{counter-increment:step;font-family:var(--font-mono);font-weight:700;color:var(--accent-ink);
  font-size:.8rem;border:1px solid var(--hairline);background:var(--surface);border-radius:8px;padding:.2em .55em;display:inline-block;margin-bottom:10px}
.step .n::before{content:counter(step,decimal-leading-zero)}

/* ---- Value anchor / stats ---- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:720px){.stats{grid-template-columns:1fr}}
.stat{text-align:center;padding:20px}
.stat .big{font-family:var(--font-mono);font-weight:750;font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.stat .lbl{margin-top:.5rem;color:var(--muted);font-size:.95rem}

/* ---- Pricing ---- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:start}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.price-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:14px}
.price-card.featured{border-color:color-mix(in srgb,var(--accent) 55%,var(--hairline));box-shadow:var(--shadow-lg);position:relative}
.price-card.featured::before{content:"Empfohlen";position:absolute;top:-11px;left:26px;background:var(--accent);color:var(--on-accent);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:.3em .7em;border-radius:999px}
.price-card .tier{font-weight:800;font-size:1.25rem}
.price-card .amt{font-family:var(--font-mono);font-weight:750;font-size:2.3rem;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.price-card .amt small{font-size:.9rem;font-weight:500;color:var(--muted);letter-spacing:0}
.price-card .matrix{display:flex;flex-wrap:wrap;gap:6px}
.price-card .matrix .m{font-family:var(--font-mono);font-size:.72rem;background:var(--sunken);border:1px solid var(--hairline);
  border-radius:7px;padding:.35em .55em;color:var(--muted)}
.price-card .matrix .m b{color:var(--ink)}
.feats{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.feats li{display:flex;gap:.6em;align-items:flex-start;font-size:.96rem;color:var(--ink)}
.feats li::before{content:"✓";color:var(--ok);font-weight:800;flex:none;margin-top:.05em}
.feats li.off{color:var(--faint)} .feats li.off::before{content:"–";color:var(--faint)}

/* ---- Comparison table ---- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface)}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:.94rem}
table.cmp th,table.cmp td{padding:13px 16px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:middle}
table.cmp thead th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  background:var(--surface-2);font-weight:600}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp .yes{color:var(--ok);font-weight:700} table.cmp .no{color:var(--faint)}
table.cmp .hl{background:var(--accent-weak)}
table.cmp td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* ---- Callout ---- */
.callout{border-radius:var(--radius);padding:18px 20px;border:1px solid;display:flex;gap:14px;align-items:flex-start}
.callout.accent{background:var(--accent-weak);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.callout .ic{font-size:1.2rem;line-height:1.3;flex:none}
.callout p{font-size:.96rem}

/* ---- Quote ---- */
.quote{background:var(--surface);border:1px solid var(--hairline);border-left:4px solid var(--accent);border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow)}
.quote p{font-size:1.05rem;color:var(--ink)}
.quote .who{margin-top:10px;font-family:var(--font-mono);font-size:.8rem;color:var(--muted)}

/* ---- FAQ ---- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--accent-ink);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--hairline)}
.faq .body{padding:14px 20px 18px;color:var(--muted);font-size:.98rem}

/* ---- CTA band ---- */
.band{background:radial-gradient(120% 140% at 20% 0%,var(--hero-2),var(--hero-1) 70%);color:#fff;border-radius:var(--radius-lg);
  padding:clamp(30px,5vw,54px);text-align:center;box-shadow:var(--shadow-lg)}
.band h2{color:#fff} .band p{color:var(--hero-sub);margin:.7rem auto 1.4rem;max-width:48ch}
.band .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}

/* ---- Footer ---- */
.footer{background:var(--surface);border-top:1px solid var(--hairline);padding:52px 0 34px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:30px}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;font-weight:600}
.footer a{display:block;color:var(--muted);font-size:.94rem;padding:4px 0}
.footer a:hover{color:var(--ink)}
.footer .about{color:var(--muted);font-size:.94rem;max-width:34ch}
.footer .legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:8px 20px;
  align-items:center;justify-content:space-between;color:var(--faint);font-size:.85rem}
.footer .legal .mono{font-family:var(--font-mono)}

/* ---- Legal / prose documents (Impressum, DSE, AGB …) ---- */
.legal-doc{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,72px) 0}
.legal-doc h1{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:.3em}
.legal-doc .updated{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);margin-bottom:2em}
.legal-doc h2{font-size:1.25rem;margin:1.8em 0 .5em;letter-spacing:-.01em}
.legal-doc h3{font-size:1.05rem;margin:1.3em 0 .4em}
.legal-doc p,.legal-doc li{color:var(--ink);font-size:1rem;line-height:1.7}
.legal-doc p{margin:.7em 0}
.legal-doc ul,.legal-doc ol{padding-left:1.3em;margin:.6em 0}
.legal-doc li{margin:.35em 0}
.legal-doc .draft{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);border-radius:10px;
  padding:12px 16px;font-size:.9rem;margin-bottom:1.6em}
.legal-doc address{font-style:normal;font-family:var(--font-mono);font-size:.95rem;background:var(--sunken);
  border:1px solid var(--hairline);border-radius:10px;padding:14px 16px;display:inline-block}

/* ---- Utility ---- */
.hr{height:1px;background:var(--hairline);border:0;margin:0}
.spacer{height:clamp(28px,5vw,56px)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---- Waitlist form + roadmap badge (appended) ---- */
.wl{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.wl input[type=email]{flex:1 1 240px;min-width:0;font:inherit;font-size:1rem;padding:.8em 1em;border-radius:11px;
  border:1px solid var(--hairline);background:var(--surface);color:var(--ink)}
.wl input[type=email]:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.wl .btn{flex:0 0 auto}
.wl-consent{display:flex;gap:.6em;align-items:flex-start;margin-top:12px;font-size:.85rem;color:var(--muted);max-width:560px}
.wl-consent input{margin-top:.28em;flex:none;width:16px;height:16px;accent-color:var(--accent)}
.hero .wl input[type=email]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff}
.hero .wl input[type=email]::placeholder{color:#c6d2f6}
.hero .wl-consent{color:#c6d2f6}
.form-note{font-size:.82rem;color:var(--muted);margin-top:8px}
.soon{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.64rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:.2em .5em;border-radius:6px;vertical-align:middle;
  background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}