/* =============================================================
   Peter Spiegel — Global Styles
   Zentrale, wiederverwendbare Style-Komponenten (zur besseren Pflege).
   Einbinden:  <link rel="stylesheet" href="<pfad>/Style/global.css">
     · Root-Seiten:      Style/global.css
     · Cases/:           ../Style/global.css
     · Cases/DRK/:       ../../Style/global.css
     · AI_Toolkit/:      ../Style/global.css
   Font-URLs sind relativ ZU DIESER DATEI (Style/fonts/…).
   ============================================================= */

/* ---------- Satoshi (lokale Fonts) ---------- */
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-black%202/satoshi-black.woff2') format('woff2'),url('fonts/satoshi-black%202/satoshi-black.woff') format('woff');font-weight:900;font-style:normal;font-display:swap}

/* ---------- Design Tokens ---------- */
:root{
  --mint:#50E3C2; --navy:#0E3A4A; --navy-2:#0B2E3B; --coral:#FF4A3D; --coral-deep:#E8402E; --emerald:#0BA37B;
  --ink:#0E3A4A; --ink-2:#42555c; --ink-3:#8a979c; --line:#e6e9e9;
  --paper:#ffffff; --paper-2:#f5f6f6; --band:#EAF9F4; --dark:#0c0e11;
  --radius:20px; --shadow:0 30px 70px -34px rgba(14,58,74,.4);
  --font-satoshi:'Satoshi',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Buttons ---------- */
.btn-g{display:inline-flex;align-items:center;gap:11px;background:var(--navy);color:#fff;font-family:var(--font-satoshi);font-weight:700;font-size:14px;padding:14px 22px;border-radius:999px;transition:background .16s;text-decoration:none;border:none;cursor:pointer}
.btn-g:hover{background:var(--navy-2)}
.btn-g .arw{display:inline-flex;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);align-items:center;justify-content:center;font-size:13px}
.btn-g.mint{background:var(--mint);color:var(--navy)}
.btn-g.mint .arw{background:rgba(14,58,74,.14)}
.btn-g.glass{background:rgba(255,255,255,.12);color:#fff}
.btn-g.glass:hover{background:rgba(255,255,255,.2)}

/* ---------- Hauptnavigation (Floating Pill) ---------- */
.site-nav{position:sticky;top:0;z-index:60;padding:40px 20px 0;font-family:var(--font-satoshi);pointer-events:none;will-change:transform}
.site-nav .bar{pointer-events:auto;max-width:1200px;margin:0 auto;background:#fff;border-radius:999px;box-shadow:0 16px 46px -24px rgba(12,14,17,.45);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:11px 11px 11px 24px}
.site-nav .brand{justify-self:start;display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px;letter-spacing:-.02em;color:var(--navy);text-decoration:none}
.site-nav .brand .sq{width:11px;height:11px;border-radius:3px;background:var(--navy);flex:none}
.site-nav .menu{justify-self:center;display:flex;align-items:center;gap:30px}
.site-nav .menu a{font-weight:600;font-size:15px;color:var(--navy);opacity:.82;text-decoration:none;transition:opacity .15s}
.site-nav .menu a:hover{opacity:1}
.site-nav .menu a[aria-current]{color:var(--navy);opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.site-nav .cta{justify-self:end;display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:#fff;font-weight:700;font-size:15px;padding:12px 22px;border-radius:999px;text-decoration:none;transition:background .16s}
.site-nav .cta:hover{background:var(--navy-2)}
.site-nav .cta svg{width:17px;height:17px}
@media(max-width:820px){.site-nav .menu{display:none}.site-nav .bar{grid-template-columns:1fr auto;padding-left:20px}}

/* ---------- Stage (Hero) ---------- */
.stage{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;color:#fff;overflow:hidden;font-family:var(--font-satoshi);
  background:radial-gradient(120% 90% at 78% 15%,rgba(80,227,194,.16),transparent 55%),linear-gradient(180deg,#12151a,#0c0e11 70%)}
.stage .stage-img{position:absolute;inset:0;z-index:0;opacity:.55;background:
  radial-gradient(60% 60% at 70% 30%,rgba(80,227,194,.22),transparent 60%),
  linear-gradient(120deg,#0c0e11,#1a2230 60%,#0c0e11)}
.stage .stage-body{position:relative;z-index:2;flex:1;max-width:1120px;width:100%;margin:0 auto;padding:40px 32px 0;display:flex;flex-direction:column;justify-content:center}
.stage h1{font-weight:900;font-size:clamp(38px,6.4vw,78px);line-height:1.0;letter-spacing:-.035em;max-width:16ch;color:#fff}
.stage .stage-sub{margin-top:22px;max-width:52ch;font-size:16.5px;color:rgba(255,255,255,.74);font-weight:500;line-height:1.6}
.stage .stage-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}