/* =========================
   Macs for Minds – Styles
   ========================= */

/* Farben & Tokens */
:root{
  --bg:#ffffff;
  --fg:#0b0f14;
  --muted:#5e6773;
  --line:#e8edf3;
  --card:#f7f9fc;

  --accent:#2a6bff;
  --grad-a:#4d9cff;
  --grad-b:#9fe0ff;

  /* Pastellfarben für Bubbles */
  --c1:#FFE27A; /* Gelb */
  --c2:#FFD1DC; /* Rosa */
  --c3:#CDE7FF; /* Hellblau */
  --c4:#CFF6DD; /* Mint */
  --c5:#E6E0FF; /* Flieder */
  --c6:#FFE3C2; /* Apricot */

  /* Größen */
  --bubble-size: 120px;     /* HTML‑Bubbles (kleiner) */
  --bubble-size-md: 98px;
  --bubble-size-sm: 80px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14; --fg:#e6eef6; --muted:#a5b3c2; --line:#1b2530; --card:#101720;
    --accent:#6aa8ff; --grad-a:#2a7cff; --grad-b:#66d3ff;
    --c1:#7b651f; --c2:#614651; --c3:#2b4258; --c4:#2a4a3a; --c5:#3a345c; --c6:#5a4735;
  }
}

/* Basis */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,system-ui,sans-serif;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}
img{max-width:100%; display:block}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; border-bottom:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(10px);
}
.brand{font-weight:600; letter-spacing:.1px; text-decoration:none; color:var(--fg)}
.site-nav a{color:var(--fg); text-decoration:none; padding:8px 10px; border-radius:10px}
.site-nav a:hover{background:var(--card)}

/* Hero */
.hero{max-width:1100px; margin:0 auto}
.hero-colored{
  position:relative; padding:96px 20px 96px; text-align:center;
  overflow:visible; /* nichts clippen */
  margin-bottom:24px;
}
.badge{
  display:inline-block; padding:6px 10px; border:1px solid var(--line);
  border-radius:999px; font-size:.85rem; color:var(--muted)
}
.hero-title{margin:18px auto 12px; font-size:clamp(36px, 6vw, 64px); line-height:1.1; letter-spacing:-.5px}
.grad{
  background:linear-gradient(90deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation:shine 10s linear infinite;
}
@keyframes shine{0%{background-position:0%}100%{background-position:200%}}
.lead{max-width:840px; margin:0 auto 18px; font-size:1.125rem; color:var(--muted)}
.cta{display:inline-block; margin-top:10px; padding:12px 18px; border-radius:14px; color:#fff; text-decoration:none; background:var(--accent); box-shadow:0 10px 26px rgba(42,107,255,.28)}
.cta:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(42,107,255,.32)}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.cta.ghost{background:transparent; color:var(--fg); border:1px solid var(--line); box-shadow:0 6px 16px rgba(0,0,0,.06)}
.cta.ghost:hover{background:var(--card)}

/* Glassmorphism-Karte (iOS‑Look, „glassier“) */
.hero-copy{
  position:relative;
  max-width:980px; margin:0 auto; padding:28px 24px;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.55);
  border-radius:26px;
  box-shadow:
    0 40px 100px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 0 0 6px rgba(255,255,255,.06);
  backdrop-filter: blur(22px) saturate(185%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
}
@media (prefers-color-scheme: dark){
  .hero-copy{
    background:rgba(16,23,32,.38);
    border-color:rgba(255,255,255,.14);
    box-shadow:
      0 40px 100px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 0 0 6px rgba(255,255,255,.04);
  }
}
/* zarter Lichtrand plus Soft‑Vignette */
.hero-copy::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(140% 100% at 50% -20%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(140% 100% at 50% 120%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(120% 80% at 50% 50%, rgba(0,0,0,.06), transparent 60%);
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  padding:1px; -webkit-mask-composite:xor; mask-composite:exclude;
}

/* ========= Bubbles ========= */
/* Container: dreht sich als Ganzes (Uhrzeigersinn), sehr langsam */
.bubbles{
  position:absolute; inset:-160px -160px; /* größer als Hero -> nichts abgeschnitten */
  pointer-events:none; z-index:-1; overflow:visible;
  transform-origin:center center;
  animation:spinGroup 120s linear infinite;
}
@keyframes spinGroup{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Viele kleine Pastellkreise (ohne Icons) */
.bubbles::before{
  content:""; position:absolute; inset:-10% -10%; pointer-events:none;
  background:
    radial-gradient(circle at 6% 10%,   var(--c1) 0 70px,  transparent 72px),
    radial-gradient(circle at 16% 86%,  var(--c2) 0 64px,  transparent 66px),
    radial-gradient(circle at 28% 22%,  var(--c3) 0 68px,  transparent 70px),
    radial-gradient(circle at 40% 78%,  var(--c4) 0 76px,  transparent 78px),
    radial-gradient(circle at 54% 16%,  var(--c5) 0 72px,  transparent 74px),
    radial-gradient(circle at 68% 86%,  var(--c6) 0 66px,  transparent 68px),
    radial-gradient(circle at 82% 26%,  var(--c3) 0 64px,  transparent 66px),
    radial-gradient(circle at 92% 70%,  var(--c2) 0 62px,  transparent 64px),
    radial-gradient(circle at 14% 58%,  var(--c4) 0 60px,  transparent 62px),
    radial-gradient(circle at 34% 40%,  var(--c5) 0 58px,  transparent 60px),
    radial-gradient(circle at 60% 10%,  var(--c1) 0 64px,  transparent 66px),
    radial-gradient(circle at 74% 52%,  var(--c6) 0 72px,  transparent 74px),
    radial-gradient(circle at 50% 94%,  var(--c5) 0 70px,  transparent 72px),
    radial-gradient(circle at 22% 92%,  var(--c2) 0 58px,  transparent 60px),
    radial-gradient(circle at 88% 12%,  var(--c3) 0 58px,  transparent 60px),
    /* zusätzliche Bubbles für mehr Dichte */
    radial-gradient(circle at 10% 34%,  var(--c6) 0 56px,  transparent 58px),
    radial-gradient(circle at 46% 88%,  var(--c4) 0 54px,  transparent 56px),
    radial-gradient(circle at 72% 36%,  var(--c1) 0 52px,  transparent 54px),
    radial-gradient(circle at 86% 20%,  var(--c5) 0 50px,  transparent 52px);
  filter: drop-shadow(0 14px 36px rgba(0,0,0,.08));
  opacity:.9;
}

/* Die 6 HTML‑Bubbles (ohne Icons), mit sanftem Schimmer */
.bubble{
  --sz: var(--bubble-size);
  width:var(--sz); height:var(--sz); border-radius:999px;
  position:absolute; display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.55), transparent 45%),
    var(--bubble, var(--c3));
  box-shadow: 0 10px 28px rgba(0,0,0,.10), inset 0 8px 26px rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.35);
}
@media (max-width:1100px){ .bubble{ --sz: var(--bubble-size-md); } }
@media (max-width:780px){  .bubble{ --sz: var(--bubble-size-sm); } }

.bc1{ --bubble:var(--c1) }
.bc2{ --bubble:var(--c2) }
.bc3{ --bubble:var(--c3) }
.bc4{ --bubble:var(--c4) }
.bc5{ --bubble:var(--c5) }
.bc6{ --bubble:var(--c6) }

/* Positionen – nahe an den Rändern, voll sichtbar */
.pos.tl{ top:  -10px; left:   8px; }
.pos.tr{ top:  -22px; right:  12px; }
.pos.ml{ top:   30%; left:   10px; }
.pos.mr{ top:   28%; right:  10px; }
.pos.bl{ bottom:-18px; left:   9%; }
.pos.br{ bottom:-28px; right:  7%; }

/* ========== Sections, Cards & Content im Glass-Look ========== */
.section{position:relative; padding:72px 20px; max-width:1100px; margin:0 auto}
.section h2{font-size:clamp(28px,3.4vw,42px); margin:0 0 18px}

/* Optional farbiger Glow pro Section: setze eine der Klassen auf das Section-Element */
.section.glow-mint::before,
.section.glow-apricot::before,
.section.glow-sky::before{
  content:""; position:absolute; inset:-10% -5% -15%; z-index:-1; pointer-events:none;
  filter: blur(28px); opacity:.55;
}
.section.glow-mint::before{ background:radial-gradient(60% 40% at 20% 10%, rgba(207,246,221,.9), transparent 60%) }
.section.glow-apricot::before{ background:radial-gradient(55% 45% at 80% 20%, rgba(255,227,194,.9), transparent 60%) }
.section.glow-sky::before{ background:radial-gradient(60% 45% at 50% 0%, rgba(205,231,255,.9), transparent 60%) }

/* Cards (Textrahmen) im Glass-Look – konsistent zur Hero-Karte */
.grid{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.card{
  grid-column:span 12;
  padding:22px 22px;
  border-radius:20px;
  background:rgba(255,255,255,.38);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 24px 64px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}
@media (min-width:800px){ .card{grid-column:span 4} }
h3{margin:.2rem 0 .4rem}

/* Ablauf / Steps – Glassy Items + Progress-Linie */
.steps{
  position:relative;
  display:grid; gap:14px; counter-reset:step;
}
.steps::before{
  content:""; position:absolute; left:27px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(42,107,255,.18), transparent);
}
.steps li{
  list-style:none; padding:18px 18px 18px 54px; position:relative;
  border-radius:18px;
  background:rgba(255,255,255,.36);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 16px 40px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
}
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:10px; top:14px; width:32px; height:32px;
  border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-weight:700; box-shadow:0 8px 20px rgba(42,107,255,.35);
}
h4{margin:.2rem 0 .4rem}

/* KPIs */
.kpi{display:grid; place-items:center; text-align:center}
.kpi.card{grid-column:span 12}
@media (min-width:800px){ .kpi.card{grid-column:span 4} }
.kpi-number{font-size:clamp(36px,5vw,56px); font-weight:700; letter-spacing:-.5px}

/* Kontakt – Formular als Glassy Box */
.contact{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:720px;
  padding:18px; border-radius:18px;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 18px 48px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
}
.contact label{display:grid; gap:6px}
.contact input,.contact textarea{
  padding:12px 14px; border:1px solid var(--line);
  border-radius:12px; background:rgba(255,255,255,.8); color:var(--fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.contact input:focus,.contact textarea:focus{outline:none; border-color:color-mix(in oklab, var(--accent) 55%, #8fb4ff)}
.contact .full{grid-column:1/-1}
.contact button{
  grid-column:1/-1; justify-self:start; padding:12px 18px; border:0; border-radius:14px;
  background:var(--accent); color:#fff; cursor:pointer; box-shadow:0 10px 26px rgba(42,107,255,.28)
}
.contact button:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(42,107,255,.32)}
.alt-mail{margin-top:10px; color:var(--muted)}
.hint{margin-top:10px; color:var(--muted); font-size:.9rem}

/* Footer */
.site-footer{
  display:flex; gap:12px; justify-content:space-between; align-items:center;
  padding:22px 20px; border-top:1px solid var(--line);
  max-width:1100px; margin:40px auto 20px;
}
.site-footer a{color:var(--muted); text-decoration:none}
.site-footer a:hover{color:var(--fg)}

/* Scroll-Reveal (etwas mehr Tiefe: Scale-In) */
.reveal{opacity:0; transform:translateY(14px) scale(.98); transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:translateY(0) scale(1)}

/* Impressum schmaler */
.narrow{max-width:800px}

/* Motion-Reduktion */
@media (prefers-reduced-motion: reduce){
  .grad{animation:none}
  .reveal{transition:none}
  .bubbles{animation:none}
}
/* === Scroll Reveal Varianten & Stagger === */
.reveal { will-change: transform, opacity; }
.reveal.from-left   { transform: translateX(-18px) scale(.98); }
.reveal.from-right  { transform: translateX( 18px) scale(.98); }
.reveal.from-up     { transform: translateY(-18px) scale(.98); } /* selten */
.reveal.from-down   { transform: translateY( 18px) scale(.98); } /* default ist already .reveal */
.reveal.is-visible  { transform: none; opacity: 1; }

/* sanftere Default-Transition (überschreibt ggf. frühere Definition) */
.reveal{
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22,.61,.36,1);
}

/* Stagger-Container -> nur Attribut am Parent nötig */
[data-stagger] .reveal { transition-delay: 0ms; } /* Delay kommt dynamisch aus JS */

/* === KPI Pop-Effekt, wenn Zahl fertig gezählt hat === */
@keyframes kpiPop {
  0%   { transform: scale(1);   text-shadow: none; }
  50%  { transform: scale(1.06); text-shadow: 0 8px 22px rgba(0,0,0,.08); }
  100% { transform: scale(1);   text-shadow: none; }
}
.kpi-pop {
  animation: kpiPop .45s ease;
  /* dezenter Glanz */
  background: radial-gradient(120% 120% at 50% -20%, rgba(255,255,255,.45), transparent 60%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* === Edle Hover-Details === */

/* Links: dezente Underline-Animation */
a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
a:hover { background-size: 100% 1px; }

/* Buttons/CTA: sanfter Glow + Mini-Lift */
.cta {
  transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(42,107,255,.35);
  filter: saturate(1.05);
}
.cta.ghost:hover {
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* Cards: leichtes Anheben & Lichtkante */
.card {
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, background .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 72px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.65);
}

/* Steps-Hover subtil */
.steps li { transition: transform .25s ease, box-shadow .25s ease; }
.steps li:hover { transform: translateY(-2px); box-shadow: 0 20px 50px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6); }

/* Formular-Felder: Fokus-Glow */
.contact input:focus, .contact textarea:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 55%, #8fb4ff);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* Navigations-Hover: pilliger Hintergrund */
.site-nav a { position: relative; }
.site-nav a:hover { background: color-mix(in oklab, var(--card) 85%, transparent); }

/* Smooth-Scroll: Anker-Ziel mit Offset „unter“ den Sticky-Header setzen */
:root { --header-h: 56px; } /* bei Bedarf anpassen */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Back-to-top (optional – wenn du später ein Element mit id="to-top" einfügst) */
#to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: none; /* JS blendet ein */
  padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.55);
  box-shadow: 0 16px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  color: var(--fg);
}
@media (prefers-color-scheme: dark){
  #to-top { background: rgba(16,23,32,.45); border-color: rgba(255,255,255,.14); }
}
#to-top:hover { transform: translateY(-2px); }

/* --- Steps: klare Dots + sichere Linien-Animation --- */

/* Linie: skaliert von oben nach unten */
.steps{ position:relative; counter-reset:step; }
.steps::before{
  content:"";
  position:absolute; left:27px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, rgba(42,107,255,.28), rgba(42,107,255,0));
  border-radius:2px;
  transform-origin: top;
  transform: scaleY(0);        /* Startzustand */
}
.steps.is-animated::before{
  transition: transform 1200ms cubic-bezier(.22,.61,.36,1);
  transform: scaleY(1);        /* wächst bis 100% */
}

/* Badge (Zahl) bleibt – nur sichergestellt, dass keine Marker angezeigt werden */
.steps, .steps li{ list-style:none; }

/* Dots: clean, ohne „Emoji-Look“/Innenglanzeffekt */
.steps li::after{
  content:"";
  position:absolute; left:26px; top:28px; margin-left:-5px;
  width:10px; height:10px; border-radius:999px;
  background: var(--accent);
  box-shadow:
    0 0 0 6px color-mix(in oklab, var(--accent) 18%, transparent),
    0 10px 24px rgba(42,107,255,.30);
  transform: scale(.3); opacity:0;
}
.steps.is-animated li::after{ animation: dotPop 500ms ease forwards; }
.steps.is-animated li:nth-child(1)::after{ animation-delay: 200ms; }
.steps.is-animated li:nth-child(2)::after{ animation-delay: 450ms; }
.steps.is-animated li:nth-child(3)::after{ animation-delay: 700ms; }

@keyframes dotPop{
  0%{ transform:scale(.3); opacity:0 }
  60%{ transform:scale(1.15); opacity:1 }
  100%{ transform:scale(1); opacity:1 }
}
/* Fix: Step-Nummern nicht mehr überdecken */
.steps { position: relative; }
.steps::before { z-index: 0; }      /* Linie im Hintergrund */
.steps li::after { z-index: 0; }    /* Dots im Hintergrund */

.steps li { position: relative; z-index: 1; } /* Inhalt (Text, Zahl) im Vordergrund */
/* Steps: Dots komplett ausblenden */
.steps li::after { content: none !important; }
/* Honeypot verstecken aber zugänglich lassen */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sr-skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.sr-skip:focus{ left:12px; top:12px; width:auto; height:auto; padding:10px 12px; border-radius:10px;
  background:#fff; color:#000; box-shadow:0 10px 26px rgba(0,0,0,.2); z-index:9999; }

/* ====== Logo-Einbindungen (Header, Hero, Footer) ====== */

/* Header-Brand mit Logo + Text */
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:600; letter-spacing:.1px; color:var(--fg); text-decoration:none;
}
.site-logo{ height:28px; width:auto; display:block }
@media (min-width:900px){ .site-logo{ height:32px } }

/* Hero: Logo-Chip (kein Wasserzeichen) */
.hero-logo{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  color: var(--muted);
  margin-bottom:12px; /* Abstand zur folgenden Badge/Headline */
}
.hero-logo img{ height:24px; width:auto; display:block }
@media (prefers-color-scheme: dark){
  .hero-logo{ background:rgba(16,23,32,.45); border-color:rgba(255,255,255,.14) }
}

/* Footer: kleines Logo links */
.footer-brand{
  display:flex; align-items:center; gap:10px;
  color:var(--muted);
}
.footer-logo{ height:20px; width:auto; display:block }

/* Kleinere Bildschirme: etwas kompakter */
@media (max-width:520px){
  .site-logo{ height:26px }
  .hero-logo img{ height:22px }
  .footer-logo{ height:18px }
}
/* ===== Header Nav fix (keine Bullets, horizontal, zentriert im Header) ===== */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
}
.site-nav ul{
  display:flex; gap:18px; margin:0; padding:0; list-style:none;
}
.site-nav li{ margin:0; padding:0; }
.site-nav a{
  display:inline-block; padding:8px 10px; border-radius:10px;
  text-decoration:none; color:var(--fg);
  transition: background .2s ease, color .2s ease;
}
.site-nav a:hover{ background: color-mix(in oklab, var(--card) 85%, transparent); }

/* ===== Hero Logo Chip (zentriert, kein Wasserzeichen) ===== */
.hero-colored{ text-align:center; }
.hero-logo-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:999px; margin-bottom:12px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
}
.hero-logo-chip img{ height:28px; width:auto; display:block }
@media (prefers-color-scheme: dark){
  .hero-logo-chip{ background:rgba(16,23,32,.45); border-color:rgba(255,255,255,.14); }
}

/* ===== Footer Links + Trennpunkte ===== */
.site-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
.footer-links{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.footer-links .sep{ color:var(--muted); opacity:.6 }
.footer-links a{ color:var(--muted); text-decoration:none; }
.footer-links a:hover{ color:var(--fg); }

/* ===== Logos (Header/Hero/Footer) sizing safety ===== */
.site-logo{ height:32px; width:auto; }
.footer-logo{ height:20px; width:auto; }
@media (max-width:520px){
  .site-logo{ height:28px }
  .hero-logo-chip img{ height:24px }
  .footer-logo{ height:18px }
}
.hero-logo-chip { transition: box-shadow .25s ease, transform .2s ease; }
.hero-logo-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 48px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.7);
}
/* KPI-Sektion: eine Box mittig */
#impact .grid {
  display: flex;
  justify-content: center;
}

/* Impact: Single-KPI vollbreit + sauber zentriert */
#impact h2 { 
  text-align: center; 
}

#impact .kpi.card {
  grid-column: 1 / -1;      /* volle Breite innerhalb des 12er-Grids */
  text-align: center;        /* Inhalt zentrieren */
}

/* überschreibt die frühere Regel, die ab 800px span 4 setzt */
@media (min-width: 800px){
  #impact .kpi.card { 
    grid-column: 1 / -1; 
  }
}
/* Unten ein weicher Apricot-Glow über die gesamte Seite */
.site-footer::before{
  content:"";
  position: fixed;
  left: -20%;
  right: -20%;
  bottom: -160px;
  height: 420px;
  z-index: -1;
  pointer-events: none;
  filter: blur(32px);
  opacity: .6;
  background: radial-gradient(55% 65% at 50% 100%, rgba(255,227,194,.9), transparent 60%);
}
@media (prefers-color-scheme: dark){
  .site-footer::before{
    opacity: .45; /* im Dark Mode etwas dezenter */
  }
}
/* Kontakt: Bubbles wiederverwenden, aber ohne die vielen Mini-Kreise */
#kontakt{ position: relative; overflow: visible; }

.bubbles-kontakt{
  position: absolute;
  inset: -120px -120px -160px;
  z-index: -1;
  animation: spinGroup 120s linear infinite; /* gleiche Bewegung wie oben */
}
/* Keine Hintergrund-Streu-Bubbles, nur die 3 runden HTML-Bubbles */
.bubbles-kontakt::before{ content: none; }

/* Positions-Feintuning für diese drei Bubbles, damit nichts überlappt */
.bubbles-kontakt .pos.tl{ top: -10px; left: 8px; }
.bubbles-kontakt .pos.mr{ top: 24%; right: 10px; }
.bubbles-kontakt .pos.bl{ bottom: -24px; left: 12%; }

@media (max-width: 780px){
  .bubbles-kontakt{ inset: -100px -80px -140px; }
  .bubbles-kontakt .pos.mr{ top: 28%; right: 6px; }
  .bubbles-kontakt .pos.bl{ left: 8%; }
}
/* Kontakt: Bubbles flat, innerhalb der Sektion, ohne zusätzliche Höhe */
#kontakt {
  position: relative;
  overflow: hidden;            /* Nichts ragt über die Sektion hinaus */
}

/* Container: keine negativen Insets, rotiert wie oben */
.bubbles-kontakt{
  position: absolute;
  inset: 0;                    /* bleibt vollständig innerhalb von #kontakt */
  z-index: -1;                 /* hinter dem Formular */
  pointer-events: none;
  animation: spinGroup 120s linear infinite; /* gleiche Bewegung wie im Hero */
}
/* keine Streu-Bubbles im Hintergrund */
.bubbles-kontakt::before { content: none; }

/* Bubbles: flach, ohne Glanz/Verlauf/Border/Shadow */
.bubbles-kontakt .bubble{
  background: var(--bubble) !important;
  box-shadow: none !important;
  border: none !important;
}

/* Positionen so, dass alles im Sichtbereich bleibt (keine negativen Offsets) */
.bubbles-kontakt .pos.tl { top: 12px;  left: 12px; }
.bubbles-kontakt .pos.mr { top: 28%;   right: 12px; }
.bubbles-kontakt .pos.bl { bottom: 12px; left: 8%; }

@media (max-width: 780px){
  .bubbles-kontakt .pos.mr { top: 34%; right: 8px; }
  .bubbles-kontakt .pos.bl { left: 6%; bottom: 10px; }
}
/* ===== Einheitlicher Glass-Look im Dark Mode (wie .hero-copy) ===== */
@media (prefers-color-scheme: dark){
  /* Alle Karten/Boxen auf denselben Stil wie .hero-copy */
  .card,
  .steps li,
  .contact {
    background: rgba(16,23,32,.38);
    border-color: rgba(255,255,255,.14);
    box-shadow:
      0 40px 100px rgba(0,0,0,.50),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 0 0 6px rgba(255,255,255,.04);
  }

  /* Hover im Dark Mode etwas kräftiger */
  .card:hover {
    box-shadow:
      0 28px 72px rgba(0,0,0,.60),
      inset 0 1px 0 rgba(255,255,255,.12);
  }

  /* KPI-Karten sind auch .card – Zahl bleibt gut lesbar */
  .kpi-number { color: var(--fg); }

  /* Dezente Section-Glows im Dark Mode etwas zurücknehmen (optional) */
  .section.glow-mint::before,
  .section.glow-apricot::before,
  .section.glow-sky::before { opacity: .40; }

  /* Ghost-Buttons/Konturen im Dark Mode konsistent */
  .cta.ghost { border-color: rgba(255,255,255,.14); }
}

<--Impressum--> 
.impressum {
  padding: 40px 20px;
  line-height: 1.6;
}

.impressum h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.impressum h2 {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  color: var(--muted);
}
.footer-powered {
  display:flex; align-items:center; gap:10px;
  font-size:.9rem; color:var(--muted);
  margin-top:10px;
}
.footer-powered img {
  height:28px; width:auto;
  filter: brightness(1); /* im Dark Mode gut sichtbar */
}
.mxit-note{
  margin-top:20px; font-size:.95rem; color:var(--muted);
  display:flex; justify-content:center; align-items:center; gap:8px;
}
.mxit-note img{ height:26px; width:auto; display:block; }
/* Kontakt: Bubbles sicher hinter den Inhalten */
#kontakt{
  position: relative;
  isolation: isolate;        /* eigener Stacking-Context */
}

#kontakt .bubbles{
  position: absolute;
  inset: -120px -120px -80px; /* genug Rand, damit nichts abgeschnitten wird */
  z-index: -1;               /* klar hinter dem Text/Formular */
  pointer-events: none;
}
#kontakt h2,
#kontakt p,
#kontakt .contact,
#kontakt .alt-mail{
  position: relative;
  z-index: 1;                /* Inhalte sicher über den Bubbles */
}

}
#kontakt h2,
#kontakt p,
#kontakt .contact,
#kontakt .alt-mail {
  position: relative;
  z-index: 1;   /* Inhalte sicher oben */
}


.hp { position: absolute; left: -9999px; width:1px; height:1px; overflow:hidden; }

/* ergänzen in styles.css */
.contact .form-row { display:grid; gap:6px; }
.contact .form-row.full { grid-column: 1 / -1; }