/* ╔══════════════════════════════════════════════════════════════════╗
   ║  Para.id — Globales Stylesheet                                     ║
   ║  Design-DNA: Brand_Guide.md (S217) — Schwarz / Pink / Grün         ║
   ║  Schriften via fonts.css (lokal gehostet, kein CDN)                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── Design-Tokens ────────────────────────────────────────────────── */
:root{
  --bg:        #000000;
  --surface:   #0E1015;
  --hero:      #FF5C8A;   /* Pink — laut, gezielt */
  --signal:    #3DFF8A;   /* Grün — Methode / Terminal */
  --t1:        #C8DCE8;   /* Primärtext */
  --t2:        #5F8294;   /* Sekundärtext — WCAG-AA auf Schwarz (5,1:1) */
  --t3:        #253545;   /* Muted / Grid / Trenner */

  --display: 'Clash Display', 'Inter', -apple-system, system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans:    'Inter', -apple-system, system-ui, sans-serif;

  --pink-glow:  0 0 6px rgba(255,92,138,.9), 0 0 16px rgba(255,92,138,.38);
  --green-glow: 0 0 4px rgba(61,255,138,.95), 0 0 10px rgba(61,255,138,.40);

  --maxw: 1240px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  background-color:var(--bg);
  color:var(--t1);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit}

/* feines 48px-Grid, sehr dezent (Brand_Guide 2.5) */
.grid-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(61,255,138,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,255,138,.03) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 42%, #000 55%, transparent 100%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 42%, #000 55%, transparent 100%);
}

/* ─── Navigation ───────────────────────────────────────────────────── */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px clamp(20px,5vw,48px);
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.scrolled{border-bottom-color:var(--t3);background:rgba(0,0,0,.82)}
.nav__brand{
  font-family:var(--display);
  font-weight:600;
  font-size:18px;
  letter-spacing:.04em;
  color:var(--t1);
  text-decoration:none;
  white-space:nowrap;
}
.nav__brand .dot{color:var(--hero)}
.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.3vw,32px);
  list-style:none;
}
.nav__links a{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--t2);
  text-decoration:none;
  transition:color .2s ease;
}
.nav__links a:hover{color:var(--t1)}
.nav__links a.active{color:var(--hero)}
.nav__links a.nav__cta{
  color:var(--bg);
  background:var(--hero);
  padding:.55em 1.05em;
  border-radius:6px;
  font-weight:600;
  letter-spacing:.06em;
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav__links a.nav__cta:hover{color:var(--bg);transform:translateY(-1px);box-shadow:0 6px 20px -6px rgba(255,92,138,.6)}
.nav__toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;
  z-index:60;
}
.nav__toggle span{width:24px;height:2px;background:var(--t1);border-radius:2px;transition:.3s ease}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── Hero ─────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(80px,14vh,140px) 24px clamp(64px,10vh,110px);
}
.hero__label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:clamp(28px,5vh,48px);
  opacity:0;
}
.hero__label::before{content:'// ';color:var(--t3)}

.wm{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(44px,10.5vw,120px);
  line-height:1;
  letter-spacing:.005em;
  color:var(--t1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  user-select:none;
  opacity:0;
}
.wm__seg{display:inline-block}
.wm__mid{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:1em;
  vertical-align:baseline;
}
.wm__nowrap{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.wm__no{display:inline-block}
.wm__dot{
  position:absolute;
  left:50%;
  top:50%;
  height:.2em;
  background:var(--hero);
  border-radius:3px;
  transform:translate(-50%,-50%);
  box-shadow:var(--pink-glow);
}

.hero__claim{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(30px,5.4vw,62px);
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--t1);
  margin-top:clamp(26px,5vh,46px);
  opacity:0;
}
.hero__claim .pink{color:var(--hero);text-shadow:var(--pink-glow)}
.hero__tagline{
  font-family:var(--mono);
  font-size:clamp(12px,1.5vw,14px);
  font-weight:400;
  letter-spacing:.04em;
  color:var(--t2);
  margin-top:clamp(12px,2vh,18px);
  opacity:0;
}
.hero__tagline::before{content:'// ';color:var(--t3)}
.hero__sub{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(15px,1.9vw,19px);
  line-height:1.6;
  color:var(--t2);
  max-width:30ch;
  margin-top:clamp(20px,3.4vh,30px);
  opacity:0;
}
.hero__cta{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin-top:clamp(34px,5.5vh,52px);
  padding:.92em 1.5em;
  font-family:var(--mono);
  font-size:clamp(13px,1.5vw,15px);
  font-weight:500;
  color:var(--bg);
  background:var(--hero);
  border:none;
  border-radius:8px;
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(255,92,138,.5), 0 8px 30px -8px rgba(255,92,138,.55);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
  opacity:0;
}
.hero__cta:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,92,138,.7), 0 14px 40px -8px rgba(255,92,138,.7)}
.hero__cta .prompt{opacity:.62;font-weight:400}
.hero__cta:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.hero__scroll{
  position:absolute;
  left:50%;
  bottom:clamp(22px,4vh,38px);
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--t3);
  opacity:0;
}
.hero__scroll::before{content:'// '}

/* Hero-Reveal-Stagger */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.is-ready .hero__label{animation:rise .7s cubic-bezier(.22,.61,.36,1) .05s forwards}
.is-ready .wm{animation:rise .8s cubic-bezier(.22,.61,.36,1) .15s forwards}
.is-ready .hero__claim{animation:rise .7s cubic-bezier(.22,.61,.36,1) 2.55s forwards}
.is-ready .hero__tagline{animation:rise .7s cubic-bezier(.22,.61,.36,1) 2.68s forwards}
.is-ready .hero__sub{animation:rise .7s cubic-bezier(.22,.61,.36,1) 2.82s forwards}
.is-ready .hero__cta{animation:rise .7s cubic-bezier(.22,.61,.36,1) 2.98s forwards}
.is-ready .hero__scroll{animation:rise .9s ease 3.28s forwards}

/* ─── Seitenkopf (Unterseiten ohne Hero) ───────────────────────────── */
.pagehead{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(130px,20vh,210px) clamp(24px,5vw,72px) clamp(20px,4vh,40px);
}
.pagehead__label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:18px;
}
.pagehead__label::before{content:'// ';color:var(--t3)}
.pagehead__title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(38px,6.4vw,80px);
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--t1);
}
.pagehead__title .pink{color:var(--hero);text-shadow:0 0 24px rgba(255,92,138,.28)}
.pagehead__sub{
  font-family:var(--sans);
  font-size:clamp(16px,2vw,20px);
  line-height:1.6;
  color:var(--t2);
  max-width:60ch;
  margin-top:clamp(20px,3vh,30px);
}

/* ─── Sections — Editorial-Split ───────────────────────────────────── */
.section{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(100px,16vh,180px) clamp(24px,5vw,72px);
}
.sec__grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,2.3fr);
  gap:clamp(28px,5.5vw,90px);
  align-items:start;
}
.sec__meta{display:flex;flex-direction:column;gap:16px}
.sec__index{
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(34px,4.4vw,58px);
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--t3);
}
.sec__label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--signal);
}
.sec__label::before{content:'// ';color:var(--t3)}
.sec__head{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(32px,5.4vw,64px);
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--t1);
}
.sec__head .pink{color:var(--hero);text-shadow:0 0 24px rgba(255,92,138,.28)}
.sec__body{
  font-family:var(--sans);
  font-size:clamp(15px,1.45vw,18px);
  line-height:1.72;
  color:var(--t2);
  max-width:60ch;
  margin-top:clamp(28px,3.6vh,40px);
}
.sec__body p + p{margin-top:1.05em}
.sec__body strong{color:var(--t1);font-weight:600}

/* PARA-Methode — vier Bereiche als Struktur (Grün-Signal) */
.para-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:clamp(34px,4.4vh,52px);
}
.para-cell{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:22px 20px;
  background:linear-gradient(165deg, rgba(61,255,138,.04), transparent 45%), var(--surface);
  border:1px solid rgba(61,255,138,.16);
  border-radius:12px;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s ease;
}
.para-cell:hover{transform:translateY(-3px);border-color:rgba(61,255,138,.42)}
.para-letter{
  font-family:var(--mono);
  font-weight:700;
  font-size:30px;
  line-height:1;
  color:var(--signal);
  text-shadow:var(--green-glow);
}
.para-name{font-family:var(--display);font-weight:600;font-size:16px;color:var(--t1)}
.para-desc{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--t2)}

/* Karten-Reihe (z.B. Angebots-Bausteine, Ablauf-Schritte) */
.cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));   /* feste 2x2 — sonst bricht „Vier Bausteine" zu 3+1 */
  gap:16px;
  margin-top:clamp(32px,4.5vh,52px);
}
.card{
  position:relative;
  background:linear-gradient(165deg, rgba(255,255,255,.028), transparent 42%), var(--surface);
  border:1px solid var(--t3);
  border-radius:14px;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .34s cubic-bezier(.22,.61,.36,1), border-color .34s ease, box-shadow .34s ease;
}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,92,138,.32);
  box-shadow:0 18px 46px -18px rgba(255,92,138,.32);
}
/* Gleicher Hover-Effekt fuer die Tool- + Datenklassen-Karten */
.tool, .dc{transition:transform .34s cubic-bezier(.22,.61,.36,1), border-color .34s ease, box-shadow .34s ease}
.tool:hover, .dc:hover{
  transform:translateY(-5px);
  border-color:rgba(255,92,138,.32);
  box-shadow:0 18px 46px -18px rgba(255,92,138,.32);
}
.card__tag{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--signal);
}
.card__title{font-family:var(--display);font-weight:600;font-size:20px;color:var(--t1)}
.card__text{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--t2)}

/* Ablauf-Timeline (vertikal, Node-Marker auf grüner Methoden-Linie) */
.timeline{max-width:820px;margin:clamp(12px,3vh,32px) auto 0;padding:0 clamp(24px,5vw,40px)}
.tl-step{
  position:relative;
  padding:2px 0 clamp(40px,6vh,64px) 52px;
  border-left:1.5px solid rgba(61,255,138,.2);
}
.tl-step:last-child{border-left-color:transparent;padding-bottom:0}
.tl-step::before{
  content:'';position:absolute;left:-10px;top:2px;
  width:18px;height:18px;border:2.5px solid var(--signal);border-radius:50%;
  background:var(--bg);box-shadow:0 0 8px rgba(61,255,138,.5);
}
.tl-step::after{
  content:'';position:absolute;left:-3px;top:9px;
  width:4px;height:4px;border-radius:50%;background:var(--signal);
}
.tl-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--signal)}
.tl-label::before{content:'// ';color:var(--t3)}
.tl-title{font-family:var(--display);font-weight:600;font-size:clamp(22px,3.2vw,34px);line-height:1.12;color:var(--t1);margin:10px 0 12px}
.tl-text{font-family:var(--sans);font-size:clamp(15px,1.5vw,17px);line-height:1.65;color:var(--t2);max-width:52ch}
/* Frozen-Modell — dezenter Abschluss-Hinweis nach der Timeline (Erwartungsmanagement) */
.tl-note{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--t2);max-width:820px;margin:clamp(28px,4vh,46px) auto 0;padding:0 clamp(24px,5vw,40px) 0 calc(clamp(24px,5vw,40px) + 52px)}

/* Kontakt-Karten (Mail / Telefon) */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  max-width:760px;
  margin:clamp(36px,5vh,56px) auto 0;
}
.contact-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:32px 30px;
  background:linear-gradient(165deg, rgba(255,92,138,.05), transparent 46%), var(--surface);
  border:1px solid var(--t3);
  border-radius:16px;
  text-decoration:none;
  transition:transform .34s cubic-bezier(.22,.61,.36,1), border-color .34s ease, box-shadow .34s ease;
}
.contact-card:hover{transform:translateY(-5px);border-color:rgba(255,92,138,.4);box-shadow:0 18px 46px -18px rgba(255,92,138,.35)}
.contact-card__label{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.contact-card__label::before{content:'// ';color:var(--t3)}
.contact-card__value{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.3vw,27px);color:var(--t1);letter-spacing:.01em}
.contact-card__hint{font-family:var(--sans);font-size:14px;color:var(--t2)}
.contact-note{
  max-width:760px;margin:clamp(34px,5vh,52px) auto 0;
  font-family:var(--sans);font-size:clamp(15px,1.6vw,17px);line-height:1.7;color:var(--t2);
}
.contact-note strong{color:var(--t1);font-weight:600}

/* Abschluss-CTA — zentrierte Klammer zum Hero */
.section--cta{text-align:center}
.section--cta .sec__label{display:inline-block}
.cta__head{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(40px,7vw,88px);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--t1);
  margin-top:18px;
}
.cta__head .pink{color:var(--hero);text-shadow:0 0 24px rgba(255,92,138,.28)}
.cta__sub{
  font-family:var(--sans);
  font-size:clamp(15px,1.8vw,18px);
  line-height:1.6;
  color:var(--t2);
  max-width:46ch;
  margin:22px auto 0;
}
.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin-top:clamp(34px,5vh,48px);
  padding:.92em 1.5em;
  font-family:var(--mono);
  font-size:clamp(13px,1.5vw,15px);
  font-weight:500;
  color:var(--bg);
  background:var(--hero);
  border:none;
  border-radius:8px;
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(255,92,138,.5), 0 8px 30px -8px rgba(255,92,138,.55);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,92,138,.7), 0 14px 40px -8px rgba(255,92,138,.7)}
.cta-btn .prompt{opacity:.62;font-weight:400}
.cta-btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ─── dictum / incant — Sprach-Tools ───────────────────────────────── */
.tools{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:clamp(24px,3.5vh,38px);
}
.tool{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:linear-gradient(165deg, rgba(255,255,255,.028), transparent 42%), var(--surface);
  border:1px solid var(--t3);
  border-radius:14px;
  padding:22px 24px;
}
.tool__key{
  flex-shrink:0;
  font-family:var(--mono);
  font-size:14px;
  font-weight:600;
  color:var(--signal);
  border:1px solid var(--t3);
  border-radius:8px;
  padding:7px 10px;
  background:rgba(61,255,138,.05);
  white-space:nowrap;
}
.tool__name{
  font-family:var(--mono);
  font-size:16px;
  font-weight:600;
  color:var(--hero);
  margin-bottom:5px;
}
.tool__text{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.55;
  color:var(--t2);
}
@media (max-width:760px){ .tools{grid-template-columns:1fr} }

/* ─── Datenklassen-Schutzschicht ───────────────────────────────────── */
.dataclass{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:clamp(24px,3.5vh,36px);
}
.dc{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--t3);
  border-radius:12px;
  padding:14px 18px;
}
.dc__dot{
  width:10px; height:10px;
  border-radius:50%;
  flex-shrink:0;
  align-self:center;
}
.dc--conf .dc__dot{background:var(--hero); box-shadow:var(--pink-glow)}      /* vertraulich — Pink */
.dc--int  .dc__dot{background:#7E94A0}                                       /* intern — neutral */
.dc--pub  .dc__dot{background:var(--signal); box-shadow:var(--green-glow)}   /* öffentlich — Grün */
.dc__name{
  font-family:var(--mono);
  font-size:14px;
  font-weight:600;
  color:var(--t1);
  min-width:84px;
}
.dc__desc{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  color:var(--t2);
  flex:1;
  min-width:200px;
}
.sec__own{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  color:var(--t2);
  margin-top:20px;
  padding-left:16px;
  border-left:2px solid var(--hero);
}

/* ─── Scroll-Ball (Signature-Element) ──────────────────────────────── */
.scrollball{
  position:fixed;
  top:0; left:0;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--hero);
  box-shadow:0 0 10px rgba(255,92,138,.75), 0 0 24px rgba(255,92,138,.35);
  pointer-events:none;
  z-index:45;
  opacity:0;
  transition:opacity .25s ease;
  will-change:transform;
}
.scrollball.active{opacity:1}

/* ─── Wissensstruktur-Diagramm ─────────────────────────────────────── */
.diagram{
  width:100%;
  max-width:860px;
  margin:clamp(40px,6vh,68px) auto 0;
  display:block;
  overflow:visible;
}
.diagram .node-label{font-family:var(--mono);font-weight:500;letter-spacing:.04em}
.diagram .hub-title{font-family:var(--display);font-weight:600;letter-spacing:.04em}
/* Datenfluss: Wissen wandert entlang der Verbindung ins Gehirn */
.diagram .flow{stroke-dasharray:4 15;stroke-linecap:round;animation:flow-move 1.6s linear infinite}
@keyframes flow-move{to{stroke-dashoffset:-19}}
/* Feuernde Neuronen */
.diagram .fire{animation:neuron-fire 2.8s ease-in-out infinite}
@keyframes neuron-fire{0%,100%{opacity:.4}50%{opacity:1}}
.diagram__caption{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--t2);
  text-align:center;
  margin-top:26px;
}
.diagram__caption::before{content:'// ';color:var(--t3)}
@media (prefers-reduced-motion: reduce){ .diagram .ring{animation:none} }

/* ─── Rechtstexte (Impressum / Datenschutz) ────────────────────────── */
.legal{
  position:relative; z-index:1;
  max-width:780px; margin:0 auto;
  padding:clamp(120px,18vh,190px) clamp(24px,5vw,40px) clamp(70px,11vh,110px);
}
.legal h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(34px,5.4vw,60px);line-height:1.04;letter-spacing:-.015em;
  color:var(--t1);margin-bottom:clamp(28px,4vh,44px);
}
.legal h1 .pink{color:var(--hero);text-shadow:0 0 24px rgba(255,92,138,.28)}
.legal h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(19px,2.3vw,26px);color:var(--t1);
  margin:clamp(34px,5vh,50px) 0 12px;
}
.legal h3{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);margin:22px 0 8px;
}
.legal h3::before{content:'// ';color:var(--t3)}
.legal p,.legal li{font-family:var(--sans);font-size:15px;line-height:1.72;color:var(--t2);max-width:66ch}
.legal p{margin-bottom:12px}
.legal strong{color:var(--t1);font-weight:600}
.legal a{color:var(--hero);text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal ul{margin:8px 0 14px 20px}
.legal li{margin-bottom:6px}
.legal .ph{
  display:inline-block;
  background:rgba(255,92,138,.12);
  border:1px dashed rgba(255,92,138,.55);
  border-radius:4px;padding:0 8px;
  color:var(--hero);font-family:var(--mono);font-size:13px;
}

/* ─── Footer ───────────────────────────────────────────────────────── */
.footer{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(56px,9vh,96px) clamp(24px,5vw,72px) 40px;
}
.footer__top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:40px;
  margin-bottom:44px;
}
.footer__brand-block{max-width:280px}
.footer__brand{font-family:var(--display);font-weight:600;font-size:25px;letter-spacing:.04em;color:var(--t1)}
.footer__brand .dot{color:var(--hero)}
.footer__tag{
  font-family:var(--mono);
  font-size:12px;
  color:var(--t2);
  margin-top:10px;
  letter-spacing:.03em;
  line-height:1.5;
}
.footer__tag::before{content:'// ';color:var(--t3)}
.footer__cols{display:flex;flex-wrap:wrap;gap:clamp(32px,6vw,72px)}
.footer__col{display:flex;flex-direction:column;gap:12px}
.footer__col h4{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:2px;
}
.footer__col a,.footer__col span{
  font-family:var(--sans);
  font-size:14px;
  color:var(--t2);
  text-decoration:none;
  transition:color .2s ease;
}
.footer__col a:hover{color:var(--t1)}
.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  padding-top:30px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--t3);
}
.footer__bottom a{color:var(--t2);text-decoration:none}
.footer__bottom a:hover{color:var(--hero)}
.footer__legal{display:flex;gap:20px;flex-wrap:wrap}

/* ─── Scroll-Reveal ────────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.in{opacity:1;transform:none}
.sec__head.reveal{transition-delay:.06s}
.sec__body.reveal{transition-delay:.14s}

/* ─── Effekt-Upgrade (dezent, opt-in) ──────────────────────────────────
   Reveal-Stagger: .stagger auf einen bereits als .reveal ausgezeichneten
   Container → dessen direkte Kinder fahren gestaffelt ein. Nutzt die
   eigenstaendige translate-Property, damit :hover-transform (Karten-Lift)
   ungestoert komponiert. Aktiv nur, wo Markup opt-in-t.                    */
.reveal.stagger{opacity:1;transform:none}
.stagger > *{opacity:0;translate:0 14px;transition:opacity .85s cubic-bezier(.16,1,.3,1),translate .85s cubic-bezier(.16,1,.3,1)}
.stagger.in > *{opacity:1;translate:0 0}
.stagger.in > *:nth-child(2){transition-delay:.13s}
.stagger.in > *:nth-child(3){transition-delay:.26s}
.stagger.in > *:nth-child(4){transition-delay:.39s}
.stagger.in > *:nth-child(5){transition-delay:.52s}
.stagger.in > *:nth-child(6){transition-delay:.65s}
/* Magnetische CTAs: Bewegung kommt aus rAF-Lerp in app.js (kontinuierlich,
   smooth) — daher KEINE transform-Transition hier (die wuerde doppelt glaetten
   = traege). Nur box-shadow-Hover bleibt. Gating (reduce+fine) + Werte in app.js. */
.magnetic{transition:box-shadow .25s ease;will-change:transform}
@media (prefers-reduced-motion: reduce){
  .stagger > *{opacity:1 !important;translate:none !important;transition:none !important}
}

/* ─── Responsive ───────────────────────────────────────────────────── */
@media (max-width:760px){
  .nav{flex-wrap:wrap}
  .nav__toggle{display:flex}
  .nav__links{
    display:none;
    order:3;
    flex-basis:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    padding:22px 4px 10px;
  }
  .nav__links.open{display:flex}
  .nav__links a{font-size:14px}
  .nav__links a.nav__cta{align-self:flex-start}

  .sec__grid{grid-template-columns:1fr;gap:24px}
  .cards{grid-template-columns:1fr}
  .sec__meta{flex-direction:row;align-items:baseline;gap:18px}
  .sec__index{font-size:34px}
  .para-grid{grid-template-columns:1fr 1fr}
}

/* ─── Reduced Motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .grid-bg{mask-image:none;-webkit-mask-image:none}
  .hero__label,.wm,.hero__claim,.hero__tagline,.hero__sub,.hero__cta,.hero__scroll{
    opacity:1 !important;animation:none !important;transform:none !important;
  }
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .nav__toggle span,.nav__links{transition:none !important}
  .wm__no{display:none}
  .wm__mid{width:.4em}
  .wm__dot{width:.2em;height:.2em;border-radius:50%;transform:translate(-50%,calc(-50% + .24em))}
}

/* ─── Flipper-Pop-Bumper (Hindernisse für den einen Ball) ──────────────
   Im Ruhezustand komplett UNSICHTBAR (transparent) — maximale Ruhe auf der
   Seite. Sie erscheinen nur im Moment des Treffers: ein kurzer Glow-Puls
   (.flash, via JS) blitzt auf und klingt wieder zu transparent ab — wie ein
   unsichtbares Kraftfeld. pointer-events:none → reine Deko + Physik-Anker.   */
.bumper{
  position:absolute;
  width:30px; height:30px;
  border-radius:50%;
  border:1.5px solid transparent;            /* Ruhezustand: unsichtbar — erscheint nur im Moment des Treffers */
  pointer-events:none;
  z-index:1;
  transform-origin:50% 50%;
}
.bumper.s{width:20px; height:20px}
.bumper.m{width:30px; height:30px}
.bumper.l{width:42px; height:42px}

/* ── Treffer-Aufleuchten (.flash via JS) — Ringe + farbige Wörter ── */
.bumper.flash{animation:bumperPulse .5s cubic-bezier(.2,.7,.3,1)}
@keyframes bumperPulse{
  0%{
    border-color:rgba(255,92,138,1);
    box-shadow:0 0 11px rgba(255,92,138,.85), 0 0 24px rgba(255,92,138,.42), inset 0 0 11px rgba(255,92,138,.35);
    transform:scale(1.16);
  }
  100%{
    border-color:transparent;
    box-shadow:none;
    transform:scale(1);
  }
}
/* Pinke Wörter/Elemente glühen beim Abprall pink auf (Headlines + Footer-Kontakt + Kontakt-Werte) */
.pagehead__title .pink.flash, .sec__head .pink.flash, .cta__head .pink.flash, .footer__col a.flash, .contact-card__value.flash{animation:wordPulsePink .55s cubic-bezier(.2,.7,.3,1)}
@keyframes wordPulsePink{
  0%{text-shadow:0 0 9px rgba(255,92,138,1), 0 0 22px rgba(255,92,138,.75), 0 0 42px rgba(255,92,138,.45)}
  100%{text-shadow:0 0 24px rgba(255,92,138,.28)}
}
/* Grüne Wörter glühen grün auf (alle // Mono-Labels: Sektion, Seitenkopf, Footer, Timeline, Kontakt, Karten, Diagramm) */
.sec__label.flash, .footer__col h4.flash, .tl-label.flash, .contact-card__label.flash,
.pagehead__label.flash, .card__tag.flash, .diagram__caption.flash{animation:wordPulseGreen .55s cubic-bezier(.2,.7,.3,1)}
@keyframes wordPulseGreen{
  0%{text-shadow:0 0 9px rgba(61,255,138,1), 0 0 20px rgba(61,255,138,.7), 0 0 38px rgba(61,255,138,.4)}
  100%{text-shadow:0 0 6px rgba(61,255,138,.30)}
}
/* PARA-Boxen: ganze Box ist Hindernis → grüner Rand-Glow beim Abprall */
.para-cell.flash{animation:boxPulseGreen .55s cubic-bezier(.2,.7,.3,1)}
@keyframes boxPulseGreen{
  0%{border-color:rgba(61,255,138,.95); box-shadow:0 0 18px rgba(61,255,138,.5), inset 0 0 24px rgba(61,255,138,.16)}
  100%{border-color:rgba(61,255,138,.16); box-shadow:none}
}
/* Buchstabe der getroffenen Box leuchtet mit (per JS synchron zur Box getriggert) */
.para-letter.flash{animation:wordPulseGreen .55s cubic-bezier(.2,.7,.3,1)}
/* CTA-Box (E-Mail-Prompt): pinker Glow-Puls beim Abprall */
.cta-btn.flash{animation:boxPulsePink .55s cubic-bezier(.2,.7,.3,1)}
@keyframes boxPulsePink{
  0%{box-shadow:0 0 0 2px rgba(255,92,138,1), 0 0 28px rgba(255,92,138,.8), 0 8px 44px -6px rgba(255,92,138,.9)}
  100%{box-shadow:0 0 0 1px rgba(255,92,138,.5), 0 8px 30px -8px rgba(255,92,138,.55)}
}
/* Angebots-Karten + Kontakt-Karten: pinker Rand-Glow beim Abprall (Rückkehr zum Ruhe-Rand --t3) */
.card.flash, .contact-card.flash, .tool.flash, .dc.flash{animation:cardPulsePink .55s cubic-bezier(.2,.7,.3,1)}
@keyframes cardPulsePink{
  0%{border-color:rgba(255,92,138,.9); box-shadow:0 0 18px rgba(255,92,138,.45), inset 0 0 22px rgba(255,92,138,.12)}
  100%{border-color:var(--t3); box-shadow:none}
}
/* Timeline-Knoten als Bumper: echtes Element genau am Pseudo-Knoten-Ort,
   im Ruhezustand unsichtbar, leuchtet beim Treffer grün auf (die Achsen-Linie bleibt frei) */
.tl-dot{position:absolute; left:-10px; top:2px; width:18px; height:18px; border-radius:50%; pointer-events:none}
.tl-dot.flash{animation:dotPulseGreen .55s cubic-bezier(.2,.7,.3,1)}
@keyframes dotPulseGreen{
  0%{box-shadow:0 0 16px rgba(61,255,138,.95), 0 0 6px rgba(61,255,138,.85)}
  100%{box-shadow:none}
}
/* Wissensquellen-Karten im Gehirn-Diagramm (SVG-Gruppen): grüner Glow beim Abprall */
.kn-node{transition:none}
.kn-node.flash{animation:knPulseGreen .6s cubic-bezier(.2,.7,.3,1)}
@keyframes knPulseGreen{
  0%{filter:drop-shadow(0 0 18px rgba(61,255,138,1)) drop-shadow(0 0 7px rgba(61,255,138,.95))}
  55%{filter:drop-shadow(0 0 11px rgba(61,255,138,.7))}
  100%{filter:none}
}
/* Rahmen der getroffenen Karte leuchtet mit auf (rect-Kind der kn-node-Gruppe) */
.kn-node.flash rect{animation:knRectPulse .6s cubic-bezier(.2,.7,.3,1)}
@keyframes knRectPulse{
  0%{stroke:rgba(61,255,138,1); stroke-width:2.6}
  100%{stroke:rgba(61,255,138,.3); stroke-width:1.2}
}
/* Gehirn-Kontur als Bumper: die Hemisphaeren-Outline leuchtet pink auf, wenn der Ball sie trifft
   (der Gruppen-Glow-Filter verstaerkt den hellen Strich zum Puls). */
.hemi.flash{animation:hemiPulse .55s cubic-bezier(.2,.7,.3,1)}
@keyframes hemiPulse{
  0%{stroke:rgba(255,92,138,1); stroke-width:3.4}
  100%{stroke:rgba(255,92,138,.5); stroke-width:1.5}
}
@media (prefers-reduced-motion: reduce){
  .bumper.flash, .pink.flash, .sec__label.flash, .footer__col h4.flash, .footer__col a.flash,
  .para-cell.flash, .para-letter.flash, .cta-btn.flash, .card.flash, .contact-card.flash,
  .tl-dot.flash, .tl-label.flash, .contact-card__label.flash, .contact-card__value.flash,
  .kn-node.flash, .pagehead__label.flash, .card__tag.flash, .diagram__caption.flash, .hemi.flash,
  .tool.flash, .dc.flash{animation:none}
}