/* =============================================================
   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}

/* ---------- Untermenue „Services" ----------
   Der Eintrag selbst ist bewusst kein Link — er oeffnet nur das Untermenue.
   Sichtbar bei Hover und bei Tastaturfokus (:focus-within). */
.site-nav .menu .has-sub,.cnav .menu .has-sub{position:relative;display:flex;align-items:center}
.site-nav .menu .sub-trigger,.cnav .menu .sub-trigger{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;
  color:var(--navy);opacity:.82;cursor:default;-webkit-user-select:none;user-select:none;transition:opacity .15s}
.site-nav .menu .has-sub:hover .sub-trigger,.cnav .menu .has-sub:hover .sub-trigger,
.site-nav .menu .has-sub:focus-within .sub-trigger,.cnav .menu .has-sub:focus-within .sub-trigger{opacity:1}
.site-nav .menu .sub-trigger svg,.cnav .menu .sub-trigger svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.site-nav .menu .has-sub:hover .sub-trigger svg,.cnav .menu .has-sub:hover .sub-trigger svg,
.site-nav .menu .has-sub:focus-within .sub-trigger svg,.cnav .menu .has-sub:focus-within .sub-trigger svg{transform:rotate(180deg)}
.site-nav .menu .sub,.cnav .menu .sub{position:absolute;top:100%;left:50%;margin-top:16px;min-width:300px;background:#fff;
  border-radius:18px;box-shadow:0 26px 60px -26px rgba(12,14,17,.5);padding:10px;
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s ease,transform .18s ease}
.site-nav .menu .has-sub:hover .sub,.cnav .menu .has-sub:hover .sub,
.site-nav .menu .has-sub:focus-within .sub,.cnav .menu .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* Unsichtbare Bruecke, damit der Zeiger die Luecke ueberqueren kann */
.site-nav .menu .sub::before,.cnav .menu .sub::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.site-nav .menu .sub a,.cnav .menu .sub a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;transition:background .15s}
.site-nav .menu .sub a:hover,.cnav .menu .sub a:hover{background:var(--band)}
.site-nav .menu .sub strong,.cnav .menu .sub strong{display:block;font-size:15px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.site-nav .menu .sub em,.cnav .menu .sub em{display:block;font-style:normal;font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.4}
@media(prefers-reduced-motion:reduce){.site-nav .menu .sub,.cnav .menu .sub,.site-nav .menu .sub-trigger svg,.cnav .menu .sub-trigger svg{transition:none}}
.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-globe{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none}
/* Schleier zwischen Kugel und Text — hält die Typo lesbar */
.stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,14,17,.60) 0%,rgba(12,14,17,.28) 45%,transparent 78%)}
@media(max-width:820px){.stage::after{background:linear-gradient(180deg,rgba(12,14,17,.40) 0%,rgba(12,14,17,.66) 48%,rgba(12,14,17,.42) 100%)}}
.stage .stage-body{position:relative;z-index:3;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:clamp(28px,3.4vw,44px);max-width:44ch;font-size:clamp(20px,2.1vw,27px);color:rgba(255,255,255,.8);font-weight:500;line-height:1.45}
.stage .stage-cta{margin-top:clamp(40px,5vw,64px);display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Globaler Footer (.psf) ----------
   Einheitlich auf allen Live-Seiten. Bewusst hoch specifisch (footer.psf …),
   damit die alten seiteneigenen `footer{…}`-Inline-Regeln nicht durchschlagen. */
footer.psf{background:var(--dark);color:#fff;font-family:var(--font-satoshi);padding:0;margin:0;border:0}
footer.psf .psf-in{max-width:1220px;margin:0 auto;padding:86px 40px 104px}
footer.psf .psf-grid{display:grid;grid-template-columns:1fr auto;gap:64px;align-items:start}
footer.psf a{color:inherit}

footer.psf .psf-links{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
footer.psf .psf-links a{font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.2;color:#fff;
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;transition:color .16s}
footer.psf .psf-links a:hover{color:var(--mint)}

/* Wortmarken einzeilig — kein Umbruch innerhalb eines Namens */
footer.psf .psf-marks{display:flex;gap:14px 30px;flex-wrap:wrap;justify-content:flex-end}
footer.psf .psf-marks a,footer.psf .psf-marks span{display:block;white-space:nowrap;font-size:19px;font-weight:500;line-height:1.25;
  letter-spacing:-.015em;color:#fff;text-decoration:none;transition:color .16s}
footer.psf .psf-marks a:hover{color:var(--mint)}
footer.psf .psf-marks span{color:rgba(255,255,255,.55)}

footer.psf .psf-legal{margin-top:84px;font-size:13px;line-height:1.85;color:rgba(255,255,255,.66)}
footer.psf .psf-legal a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
footer.psf .psf-legal a:hover{color:var(--mint)}

@media(max-width:900px){
  footer.psf .psf-in{padding:64px 24px 76px}
  footer.psf .psf-grid{grid-template-columns:1fr;gap:48px}
  footer.psf .psf-marks{gap:10px 24px;justify-content:flex-start}
  footer.psf .psf-marks a,footer.psf .psf-marks span{font-size:17px}
  footer.psf .psf-legal{margin-top:56px}
}

/* ---------- Sprachschalter in der Hauptnavigation ----------
   .nav-end fasst Schalter und Contact-CTA in der rechten Grid-Zelle zusammen,
   damit der Schalter auch auf Mobil sichtbar bleibt (das .menu wird dort ausgeblendet). */
.site-nav .nav-end,.cnav .nav-end{justify-self:end;display:flex;align-items:center;gap:14px}
.site-nav .lang,.cnav .lang{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-satoshi);
  font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--navy)}
.site-nav .lang a,.cnav .lang a{color:var(--navy);opacity:.5;text-decoration:none;transition:opacity .15s}
.site-nav .lang a:hover,.cnav .lang a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.site-nav .lang b,.cnav .lang b{font-weight:700}
.site-nav .lang i,.cnav .lang i{font-style:normal;opacity:.3}
@media(max-width:560px){.site-nav .nav-end,.cnav .nav-end{gap:10px}.site-nav .lang,.cnav .lang{font-size:12px}}



/* Die Case-Navigation ist fixiert — das Untermenue darf nicht abgeschnitten werden. */
.cnav{overflow:visible}