/* ===========================================================================
   Digitalhilfe Deutschland — Showcase (Premium Dark, 3D, immersive)
   Self-contained stylesheet. Brand: purple #8E2C8E + lime #C3D830,
   lifted to a dark, glowing palette. Fraunces (display) + Nunito Sans (body).
   =========================================================================== */

:root{
  /* Brand, brightened for dark backgrounds */
  --purple:#8E2C8E;
  --purple-lit:#C04BD6;
  --purple-glow:#E07BF2;
  --lime:#C3D830;
  --lime-lit:#D8EE55;

  /* Dark surface system */
  --bg:#0B0710;
  --bg-2:#120A1A;
  --ink:#F5EEF8;
  --ink-soft:#C9BCD4;
  --ink-mute:#B2A4BF; /* leicht aufgehellt für besseren Textkontrast auf Dunkel (WCAG AA) */
  --line:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.045);
  --glass-strong:rgba(255,255,255,.07);

  --shadow:0 30px 60px -24px rgba(0,0,0,.7), 0 10px 24px -12px rgba(0,0,0,.5);
  --glow-purple:0 0 40px -8px rgba(192,75,214,.55);

  --wrap:72rem;
  --dur:240ms;
  --ease:cubic-bezier(.16,1,.3,1);

  --font-display:"Sora", system-ui, -apple-system, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:6rem; -webkit-text-size-adjust:100%;}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  /* premium fallback gradient — visible even if WebGL never loads */
  background-image:
    radial-gradient(120% 80% at 80% -10%, rgba(142,44,142,.40), transparent 55%),
    radial-gradient(90% 70% at 0% 110%, rgba(143,162,28,.18), transparent 50%),
    linear-gradient(180deg, #0B0710 0%, #120A1A 60%, #0B0710 100%);
  background-attachment:fixed;
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:1.125rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.06;
  font-weight:700;
  margin:0;
  letter-spacing:-0.022em;
}
p{margin:0;}
::selection{background:var(--lime); color:#1a1320;}
img{display:block; max-width:100%;}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ===== Fixed WebGL backdrop + atmosphere ===== */
#scene{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-3; display:block; pointer-events:none;
}
.grain{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  mix-blend-mode:overlay;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
#spotlight{
  position:fixed; left:0; top:0; width:46rem; height:46rem; z-index:-1;
  margin:-23rem 0 0 -23rem; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(192,75,214,.16), transparent 60%);
  transform:translate3d(50vw,30vh,0); transition:opacity .4s var(--ease);
  will-change:transform; opacity:0;
}

/* ===== Scroll progress ===== */
#progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:60; background:transparent;}
#progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--purple-lit), var(--lime));
  box-shadow:0 0 12px rgba(192,75,214,.6);
}

/* ===== Layout helper ===== */
.wrap{width:min(var(--wrap), 100% - 2.5rem); margin-inline:auto;}

/* ===== Skip link ===== */
.skip-link{
  position:fixed; left:1rem; top:1rem; z-index:100;
  background:var(--purple-lit); color:#fff; padding:.85rem 1.25rem;
  border-radius:12px; font-weight:800; text-decoration:none;
  transform:translateY(-160%); transition:transform var(--dur) var(--ease);
}
.skip-link:focus{transform:translateY(0);}

/* ===== Focus visibility (lime ring on dark) ===== */
a,button{outline:none;}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--lime); outline-offset:3px; border-radius:10px;
}

/* ===== Navbar ===== */
.site-head{position:fixed; inset-inline:0; top:1rem; z-index:50; padding-inline:1rem;}
.nav-shell{
  width:min(var(--wrap), 100% - 2rem); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.65rem .75rem .65rem 1.1rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(11,7,16,.55);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-head.is-scrolled .nav-shell{background:rgba(11,7,16,.82); box-shadow:var(--shadow);}
/* Brand: 3D rocket emblem + light wordmark */
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; perspective:620px;}
.brand-mark{
  display:inline-flex; transform-style:preserve-3d; will-change:transform;
  transition:transform var(--dur) var(--ease);
}
.brand-mark img{
  height:2.7rem; width:auto; display:block;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(195,216,48,.30));
}
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark{transform:rotateY(18deg) rotateX(-9deg) scale(1.07);}
.brand-word{display:flex; flex-direction:column; line-height:.96; letter-spacing:.005em;}
.brand-word strong{font-weight:800; font-size:1.2rem; color:var(--ink);}
.brand-word span{font-weight:600; font-size:1.04rem; color:var(--purple-glow);}
@media (prefers-reduced-motion:no-preference){
  .brand-mark img{animation:logoFloat 5s var(--ease) infinite;}
}
@keyframes logoFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
@media (max-width:479px){ .brand-word{display:none;} }
.nav-links{display:none; gap:1.2rem; list-style:none; margin:0; padding:0;}
.nav-actions{display:flex; align-items:center; gap:.6rem;}
.nav-link{position:relative; color:var(--ink-soft); font-weight:700; text-decoration:none; padding:.3rem .1rem; white-space:nowrap;}
.nav-link::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background:var(--lime); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease);}
.nav-link:hover{color:var(--ink);}
.nav-link:hover::after{transform:scaleX(1);}

.motion-toggle{
  display:none; align-items:center; gap:.5rem; cursor:pointer;
  background:var(--glass); border:1px solid var(--line); color:var(--ink-soft);
  border-radius:999px; padding:.5rem .85rem; font:inherit; font-size:.9rem; font-weight:700;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.motion-toggle:hover{border-color:rgba(255,255,255,.28); color:var(--ink);}
.motion-dot{width:.6rem; height:.6rem; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.motion-toggle[aria-pressed="true"] .motion-dot{background:var(--ink-mute); box-shadow:none;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:.75rem 1.4rem; border-radius:999px;
  font-family:var(--font-body); font-weight:800; font-size:1rem; text-decoration:none;
  cursor:pointer; border:1.5px solid transparent;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-lg{min-height:56px; padding:.9rem 1.8rem; font-size:1.0625rem;}
.btn-primary{
  color:#fff; background:linear-gradient(135deg, var(--purple-lit), var(--purple));
  box-shadow:var(--glow-purple);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 50px -6px rgba(192,75,214,.75);}
.btn-ghost{color:var(--ink); background:var(--glass-strong); border-color:var(--line); backdrop-filter:blur(8px);}
.btn-ghost:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.10);}

/* ===== Eyebrow ===== */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:800; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--purple-glow); padding:.45rem .9rem; margin:0;
  background:rgba(192,75,214,.10); border:1px solid rgba(192,75,214,.28); border-radius:999px;
}
.eyebrow .dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime);}

/* Gradient text accent */
.grad{
  background:linear-gradient(100deg, var(--purple-glow) 0%, var(--lime-lit) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== Sections rhythm ===== */
section{position:relative; padding-block:clamp(5rem, 10vw, 9rem);}
.section-head{max-width:46rem; margin-bottom:clamp(2.5rem,5vw,4rem);}
.section-title{font-size:clamp(2rem, 4.5vw, 3.4rem); margin:.6rem 0 .8rem;}
.section-sub{font-size:1.2rem; color:var(--ink-mute);}

/* ===== Hero ===== */
.hero{min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:8rem;}
/* Scrim keeps the headline readable over the bright 3D core */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(125% 95% at 28% 42%, rgba(11,7,16,.80), rgba(11,7,16,.40) 46%, transparent 72%);
}
.hero-inner{position:relative; max-width:54rem;}
.hero-title{
  font-size:clamp(2.9rem, 9vw, 7rem); font-weight:600; margin:1.4rem 0 0;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}
.hero-sub{margin-top:1.6rem; max-width:34rem; font-size:1.3rem; color:var(--ink-soft); line-height:1.55;}
.hero-cta{margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1rem;}
.scroll-hint{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--ink-mute); text-decoration:none; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
}
.scroll-hint:hover{color:var(--ink-soft);}
.scroll-hint-dot{animation:scrollPulse 1.8s var(--ease) infinite;}
@keyframes scrollPulse{0%{transform:translateY(0); opacity:1} 70%{transform:translateY(8px); opacity:0} 100%{opacity:0}}

/* ===== Manifest ===== */
.big-statement{font-size:clamp(1.9rem, 4.6vw, 3.6rem); max-width:20ch; margin:1rem 0 0; line-height:1.12;}
.big-statement em{font-style:normal; color:var(--lime-lit);}
.manifest .lead{margin-top:2rem; max-width:40rem; font-size:1.3rem; color:var(--ink-soft);}

/* ===== Glass cards (Leistungen) ===== */
.card-grid{display:grid; grid-template-columns:1fr; gap:1.25rem;}
.glass-card{
  position:relative; padding:2rem 1.9rem 2.1rem; border-radius:1.5rem;
  background:linear-gradient(160deg, rgba(30,17,42,.66), rgba(16,9,24,.5));
  border:1px solid var(--line); box-shadow:var(--shadow);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  overflow:hidden; transform-style:preserve-3d; will-change:transform;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.glass-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%, rgba(192,75,214,.18), transparent 70%);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.glass-card:hover,.glass-card:focus-visible{border-color:rgba(192,75,214,.45); box-shadow:var(--shadow), var(--glow-purple);}
.glass-card:hover::before,.glass-card:focus-visible::before{opacity:1;}
.card-num{
  position:absolute; top:1.2rem; right:1.4rem; font-family:var(--font-display);
  font-size:2.4rem; color:rgba(255,255,255,.10); font-weight:600; transform:translateZ(20px);
}
.card-icon{
  display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
  border-radius:16px; color:var(--lime-lit);
  background:rgba(195,216,48,.10); border:1px solid rgba(195,216,48,.22);
  transform:translateZ(40px);
}
.card-title{font-size:1.5rem; margin:1.2rem 0 .6rem; transform:translateZ(30px);}
.card-text{color:var(--ink-mute); font-size:1.05rem; transform:translateZ(15px);}

/* ===== Process steps ===== */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:1.25rem; counter-reset:step;}
.step{
  position:relative; padding:1.8rem 1.8rem 1.8rem 5.5rem; border-radius:1.25rem;
  background:linear-gradient(160deg, rgba(30,17,42,.6), rgba(16,9,24,.46));
  border:1px solid var(--line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.step-num{
  position:absolute; left:1.5rem; top:1.6rem;
  display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem;
  border-radius:50%; font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:#fff;
  background:linear-gradient(135deg, var(--purple-lit), var(--purple)); box-shadow:var(--glow-purple);
}
.step-title{font-size:1.35rem; margin:0 0 .35rem;}
.step-text{color:var(--ink-mute); font-size:1.05rem;}

/* ===== Stats ===== */
.stat-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1.25rem;}
.stat{
  text-align:center; padding:2.2rem 1rem; border-radius:1.25rem;
  background:linear-gradient(160deg, rgba(30,17,42,.62), rgba(16,9,24,.48));
  border:1px solid var(--line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.stat-num{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.6rem, 6vw, 3.8rem); line-height:1;
  background:linear-gradient(120deg, #fff, var(--purple-glow));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{display:block; margin-top:.8rem; font-size:.98rem; color:var(--ink-mute); font-weight:600;}

/* ===== CTA ===== */
.cta-inner{
  text-align:left; max-width:48rem; margin-inline:auto; padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,4vw,3.5rem);
  border-radius:2rem; border:1px solid rgba(192,75,214,.30);
  background:linear-gradient(160deg, rgba(192,75,214,.14), rgba(11,7,16,.4));
  box-shadow:var(--shadow), var(--glow-purple); backdrop-filter:blur(14px);
}
.cta-inner .eyebrow{margin-inline:0;}
.cta-title{font-size:clamp(2.2rem, 5vw, 3.8rem); margin:1.1rem 0 1rem;}
.cta-sub{font-size:1.25rem; color:var(--ink-soft); max-width:34rem; margin-inline:0;}
.cta-inner .hero-cta{justify-content:flex-start;}
.cta-meta{display:inline-flex; align-items:center; gap:.5rem; margin-top:1.8rem; color:var(--ink-mute); font-weight:700;}
.cta-meta svg{color:var(--lime-lit);}
.cta-note{margin-top:1.1rem; font-size:.95rem; color:var(--ink-mute);}
.cta-note a{color:var(--lime-lit); font-weight:700; text-decoration:underline; text-underline-offset:2px;}

/* ===== Footer ===== */
.site-foot{padding-block:3.5rem; border-top:1px solid var(--line); background:rgba(9,6,14,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:relative; z-index:1;}
.foot-inner{display:flex; flex-direction:column; gap:2rem;}
.foot-brand .brand-mark img{height:3rem;}
.foot-note{margin-top:1rem; font-size:.95rem; color:var(--ink-mute); line-height:1.5;}
.foot-side{display:flex; flex-direction:column; gap:1.4rem;}
.foot-legal{display:flex; flex-wrap:wrap; gap:1.4rem;}
.foot-social{display:flex; gap:.75rem;}
.social-badge{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:14px; color:var(--ink-soft); background:var(--glass); border:1px solid var(--line);
  transition:transform var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social-badge:hover{transform:translateY(-3px); color:var(--ink); border-color:rgba(192,75,214,.45);}

/* ===== Scroll reveal ===== */
.js .reveal{opacity:0; transform:translateY(26px);}
.reveal.is-in{opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease);}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (min-width:640px){
  .stat-grid{gap:1.5rem;}
  .foot-inner{flex-direction:row; align-items:flex-end; justify-content:space-between;}
  .foot-side{align-items:flex-end;}
}
@media (min-width:768px){
  .card-grid{grid-template-columns:repeat(2, 1fr); gap:1.5rem;}
  .steps{grid-template-columns:repeat(2, 1fr); gap:1.5rem;}
  .stat-grid{grid-template-columns:repeat(4, 1fr);}
}
@media (min-width:1180px){
  .nav-links{display:flex;}
  .motion-toggle{display:inline-flex;}
}

/* ===========================================================================
   Reduced motion — kill movement, show static premium gradient
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
  .js .reveal{opacity:1 !important; transform:none !important;}
  #scene{display:none;}
  .scroll-hint-dot{display:none;}
}
/* Manual "effects off" toggle mirrors reduced-motion for the canvas */
html[data-motion="off"] #scene{opacity:0;}
html[data-motion="off"] #spotlight{display:none;}

/* ============================================================
   Seiten-Navigation wie die anderen Seiten (gleicher Aufbau),
   im Premium-Dark-Look. Header schwebt fixiert ueber dem Inhalt.
   ============================================================ */
.container{ width:min(74rem, 100% - 2.5rem); margin-inline:auto; }
.header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(11,7,16,.72);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header__inner{ display:flex; justify-content:space-between; align-items:center; padding:.85rem 0; }
.logo{ max-width:210px; display:inline-flex; line-height:0; }
.logo img{ width:100%; height:auto; display:block; filter:brightness(0) invert(1); } /* Logo weiss auf Dunkel */
.nav__list{ display:flex; gap:1.5rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav__list a{ white-space:nowrap; color:var(--ink-soft); font-weight:700; font-size:1.0625rem; text-decoration:none; transition:color .2s ease; }
.nav__list a:hover{ color:#fff; }
/* "Fuer Unternehmen" als Premium-Button (aktuelle Seite, hervorgehoben) */
.nav__list a[href$="unternehmen.html"]{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1.05rem; border-radius:999px;
  background:linear-gradient(135deg,#C04BD6,#8E2C8E); color:#fff;
  box-shadow:0 6px 16px -6px rgba(142,44,142,.55);
}
.nav__list a[href$="unternehmen.html"]::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); flex:none; }
/* "Jetzt kontaktieren" als Lime-Button (wie auf den anderen Seiten) */
.nav__list a.btn{
  display:inline-flex; align-items:center; min-height:auto; padding:.6rem 1.25rem; border-radius:999px;
  background:var(--lime); color:#1a1320; font-weight:800; border:0;
  transition:transform .2s ease, filter .2s ease;
}
.nav__list a.btn:hover{ transform:translateY(-2px); filter:brightness(1.06); color:#1a1320; }
/* Hamburger */
.nav-toggle{ background:none; border:none; cursor:pointer; z-index:2000; display:none; min-width:44px; min-height:44px; align-items:center; justify-content:center; padding:0; }
.hamburger, .hamburger::before, .hamburger::after{ display:block; width:28px; height:3px; background:#f4eef8; border-radius:3px; position:relative; transition:all .3s ease; }
.hamburger::before, .hamburger::after{ content:""; position:absolute; left:0; }
.hamburger::before{ top:-8px; } .hamburger::after{ top:8px; }
/* Mobiles Off-Canvas-Menue (gleiches Verhalten wie andere Seiten) */
@media (max-width:1306px){
  /* Off-Canvas-Drawer sitzt geschlossen rechts ausserhalb (right:-100%).
     `overflow-x:clip` am Wurzelelement kappt diese Ueberbreite, ohne – anders
     als `overflow:hidden` – einen Scroll-Container zu erzeugen, der die
     sticky Build-Buehne im Tablet-Bereich brechen wuerde. */
  html{ overflow-x:clip; }
  .nav{ position:fixed; top:0; right:-100%; width:80%; max-width:330px; height:100vh;
        background:linear-gradient(165deg,#1a0f22,#0c0711); padding:6rem 1.8rem;
        box-shadow:-12px 0 40px rgba(0,0,0,.55); transition:right .3s ease; }
  .nav.active{ right:0; }
  .nav__list{ flex-direction:column; gap:1.5rem; align-items:flex-start; font-size:1.2rem; }
  .nav-toggle{ display:flex; }
}
@media (min-width:1307px){ .nav__list{ font-size:1.0625rem; gap:1.5rem; } }

/* ============================================================
   Mobile-Optimierung (<=767px)
   - Schwere Desktop-Deko (WebGL-Canvas, Grain, Spotlight, Dial,
     Scrubber) ausblenden: das Canvas erhaelt per Three.js eine
     feste Inline-Pixelbreite und blaeht sonst den Layout-Viewport
     auf (Querscroll). Body behaelt den Premium-Dark-Verlauf, der
     Look bleibt also erhalten – ohne WebGL-Last auf dem Handy.
   - Header + Logo verschlankt, Inhalt raeumt den fixen Header frei.
   ============================================================ */
@media (max-width:767px){
  #scene, .grain, #spotlight, #dial, #scrubber{ display:none !important; }

  .header__inner{ padding:.55rem 0; }
  .logo{ max-width:148px; }

  /* Feinschliff des Off-Canvas-Drawers fuer schmale Screens */
  .nav{ width:86%; max-width:300px; padding:5.25rem 1.5rem; }
  .nav__list{ gap:1.35rem; font-size:1.15rem; }
}

@media (max-width:380px){
  .logo{ max-width:134px; }
}

/* ============================================================
   Footer auf Mobil (<=639px, unter dem Desktop-Footer-Breakpoint):
   zentriert, mit sichtbarem Markennamen statt nur der Rakete,
   und einer sauber zentrierten Link-/Social-Reihe.
   ============================================================ */
@media (max-width:639px){
  .site-foot{ padding-block:2.75rem; }
  .foot-inner{ align-items:center; text-align:center; }
  .foot-brand{ justify-content:center; }
  .foot-brand .brand-word{ display:flex; }   /* Name auch auf kleinen Screens zeigen */
  .foot-note{ text-align:center; }
  .foot-side{ align-items:center; }
  .foot-legal{ justify-content:center; gap:.7rem 1.3rem; }
  .foot-social{ justify-content:center; }
}

/* ============================================================
   Mobil (<=767px): Sektions-Koepfe, CTA und Stakes zentriert.
   Desktop (>=768px) bleibt linksbuendig (Basisregeln unveraendert).
   ============================================================ */
@media (max-width:767px){
  .section-head{ margin-inline:auto; text-align:center; }
  .cta-inner{ text-align:center; }
  .cta-sub{ margin-inline:auto; }
  .cta-inner .hero-cta{ justify-content:center; }
  .cta-meta{ justify-content:center; }
  .stakes .wrap{ text-align:center; }
  .stakes .lead, .stakes .big-statement{ margin-inline:auto; }
}