/* ============================================================
   HAXH — AI. Automation. Growth.
   style.css  v=1
   Dunkles Design-System. Alle Kontrast-/Layout-Lehren aus HINQ
   sind hier von Anfang an berücksichtigt.
   ============================================================ */

:root {
  /* Hintergründe */
  --bg:        #050505;   /* Canvas / Seiten-Basis */
  --bg-2:      #0E0E0E;   /* Sektionen, Karten-Basis */
  --bg-card:   #131313;   /* Karten auf #0E0E0E */
  --bg-elev:   #1A1A1A;   /* hervorgehobene Karten */

  /* Akzent */
  --accent:      #00FFD1; /* Marken-Teal: CTAs, Highlights, Linien */
  --accent-glow: #00E5FF; /* Cyan: Verläufe, Glow, Canvas-Tiefe */
  --accent-dim:  rgba(0,255,209,0.10);
  --accent-line: rgba(0,255,209,0.18);

  /* Text */
  --text:        #F2F4F3;
  --text-muted:  rgba(242,244,243,0.58);
  --text-faint:  rgba(242,244,243,0.36);

  /* Linien */
  --border:      rgba(255,255,255,0.08);
  --border-2:    rgba(255,255,255,0.14);

  /* Maße */
  --max-w: 1240px;
  --pad-x: clamp(1.1rem, 5vw, 4rem);
  --nav-h: 72px;
  --r:    14px;
  --r-sm: 8px;

  /* Schrift */
  --f-display: 'Space Grotesk', sans-serif;   /* Headlines, Display */
  --f-mono:    'Space Mono', monospace;        /* Labels, Metriken, Daten */
  --f-ui:      'Inter', sans-serif;            /* Nav, Footer-Zeile — clean, modern */
  --f-body:    'Inter', sans-serif;            /* Fließtext */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Canvas-Hintergrund ----------
   Lektion HINQ: Canvas ist fixed/z-index:0. Jede Sektion mit
   eigenem Hintergrund braucht position:relative; z-index:1. */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 12% 8%,  rgba(0,229,255,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 88% 92%, rgba(0,255,209,0.08) 0%, transparent 55%),
    var(--bg);
}

/* ---------- Layout-Helfer ---------- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.section { position: relative; z-index: 1; padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section--solid { background: var(--bg-2); }
.section--line-top { border-top: 1px solid var(--border); }

/* ---------- Helle Sektion (weiß) ----------
   KRITISCHE KONTRAST-REGEL (Lektion aus HINQ, umgedreht):
   Auf hellem BG ist Teal-Text unlesbar. Hier wird der Akzent
   zu dunklem Text. Eyebrow nutzt dunkles Teal-Grün, kein #00FFD1. */
.section--light {
  background: #F4F6F5;
  color: #0A0A0A;
}
/* Hintergrundgrafik nur für die "Warum HAXH"-Sektion */
.section--bg-grid {
  background-color: #F4F6F5;
  background-image: url('/bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section--light .s-head h2 { color: #0A0A0A; }
.section--light .s-head p { color: rgba(10,10,10,0.62); }
.section--light .eyebrow { color: #047a64; }       /* dunkles Teal, lesbar auf weiß */
.section--light .eyebrow::before { background: #047a64; }
.section--light .seo-prose p { color: rgba(10,10,10,0.74); }
.section--light .seo-prose h3 { color: #0A0A0A; }
/* SEO-Sektion: dezenter animierter Mint-Verlauf oben rechts */
.section--seo { position: relative; overflow: hidden; }
.seo-blob {
  position: absolute; top: -12%; right: -6%;
  width: 46%; height: 70%;
  background: radial-gradient(ellipse at 70% 30%, rgba(0,255,209,0.28) 0%, rgba(0,255,209,0.10) 35%, rgba(244,246,245,0) 68%);
  z-index: 0; pointer-events: none;
  filter: blur(8px);
  animation: seo-drift 14s ease-in-out infinite;
}
.section--seo .wrap { position: relative; z-index: 1; }
@keyframes seo-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5%); }
}
@media (prefers-reduced-motion: reduce) {
  .seo-blob { animation: none; }
}
.section--light .seo-prose h2 { color: #0A0A0A; }
.seo-prose h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.01em; margin: 2rem 0 .6rem; }
.seo-prose p { font-size: 1.05rem; margin-bottom: 1.1rem; line-height: 1.7; }
.seo-prose .eyebrow { margin-bottom: 1rem; }
.section--light .seo-prose strong { color: #000; }
.section--light .seo-prose a { color: #047a64; border-bottom-color: rgba(4,122,100,0.4); }
.section--light .tile { background: #fff; border-color: rgba(0,0,0,0.08); }
.section--light .tile h3 { color: #0A0A0A; }
.section--light .tile p { color: rgba(10,10,10,0.62); }
.section--light .tile .t-ico { background: rgba(4,122,100,0.1); color: #047a64; }

/* ---------- Mint-Sektion (Akzentfläche) ----------
   Volle Teal-Fläche als bewusster Knall. Schrift dunkel/schwarz. */
.section--mint {
  background: var(--accent);
  color: #04140F;
}
/* Systeme-Sektion: halbtransparenter bg2-Layer + animiertes Canvas */
.section--sys { position: relative; overflow: hidden; background: var(--accent); }
.sys-bg {
  position: absolute; inset: 0;
  background-image: url('/bg2.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}
.sys-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.section--sys .wrap { position: relative; z-index: 2; }
.section--mint .s-head h2 { color: #04140F; }
.section--mint .s-head p { color: rgba(4,20,15,0.72); }
.section--mint .eyebrow { color: #04140F; }
.section--mint .eyebrow::before { background: #04140F; }

/* Engine-Karten auf Mint: dunkle Karten, klarer Kontrast */
.section--mint .engine { background: #060807; border-color: rgba(0,0,0,0.22); }
.section--mint .engine:hover { border-color: rgba(0,0,0,0.4); }
.section--mint .engine::after { background: radial-gradient(circle, rgba(0,255,209,0.10), transparent 70%); }
.section--mint .engine .e-num { color: var(--accent); }
.section--mint .engine h2, .section--mint .engine h3 { color: #F2F4F3; }
.section--mint .engine p { color: rgba(242,244,243,0.7); }
.section--mint .engine .e-tags span { color: rgba(242,244,243,0.75); border-color: rgba(255,255,255,0.2); }

/* Eyebrow / Mono-Label */
.eyebrow {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.2rem;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
  display: inline-block;
}

/* Section-Heading */
.s-head { max-width: 760px; margin-bottom: 3.2rem; }
.s-head h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.s-head h2 .glow { color: var(--accent); }
.s-head p { color: var(--text-muted); font-size: 1.08rem; margin-top: 1.1rem; max-width: 56ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-ui);
  font-size: .92rem;
  letter-spacing: -0.005em;
  font-weight: 600;
  padding: .95rem 1.6rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 0 0 rgba(0,255,209,0.0);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px -10px rgba(0,255,209,0.45);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn .arrow { transition: transform .18s ease; display: inline-block; vertical-align: middle; }
.btn:hover .arrow { transform: translate(3px,-3px); }

/* ============================================================
   NAVIGATION
   Lektion HINQ: scrolled-Klasse. Auf Unterseiten mit hellem
   Start ist das hier kein Problem, weil alles dunkel ist —
   aber der scroll-Handler bleibt für die Verdichtung.
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(5,5,5,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.nav { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); display: flex; align-items: center; justify-content: space-between; }
.brand {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .14em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.brand b { color: var(--accent); font-weight: 700; }
.brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); display: inline-block; }
.nav-logo { height: 26px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a {
  font-family: var(--f-ui);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  transition: color .15s ease;
  position: relative;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--accent); }
.nav-cta { margin-left: .5rem; }
.nav-cta .btn--primary { padding: .6rem 1.25rem; }
.nav-links a.btn--primary { color: #000; }
.nav-links a.btn--primary:hover { color: #000; }

/* ---------- Dropdown ---------- */
.nav-drop { position: relative; }
.nav-drop > .drop-trigger {
  font-family: var(--f-ui); font-size: .92rem; font-weight: 500; letter-spacing: -0.005em;
  color: var(--text-muted); background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem; padding: 0;
  transition: color .15s ease;
}
.nav-drop > .drop-trigger:hover, .nav-drop.open > .drop-trigger { color: var(--text); }
.drop-trigger .chev { width: 10px; height: 10px; transition: transform .2s ease; }
.nav-drop.open .drop-trigger .chev { transform: rotate(180deg); }
.drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  background: rgba(14,14,14,0.97); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: 12px;
  padding: .5rem; min-width: 230px;
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8);
  z-index: 120;
}
/* unsichtbare Hover-Brücke: überbrückt die Lücke zwischen Trigger und Menü */
.nav-drop::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px;
  opacity: 0; visibility: hidden;
}
.nav-drop:hover::after { opacity: 1; visibility: visible; }
.nav-drop:hover .drop-menu, .nav-drop.open .drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.drop-menu a {
  display: flex; flex-direction: column; gap: 1px;
  padding: .6rem .8rem; border-radius: 8px; border: 0;
  font-size: .9rem; color: var(--text); transition: background .12s ease;
}
.drop-menu a:hover { background: rgba(0,255,209,0.08); color: var(--accent); }
.drop-menu a .d-sub { font-size: .74rem; color: var(--text-faint); }
.drop-menu a:hover .d-sub { color: rgba(0,255,209,0.7); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; height: 2px; width: 24px; background: var(--text); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: rgba(5,5,5,0.97);
    backdrop-filter: blur(18px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem var(--pad-x) 2rem;
    border-bottom: 1px solid var(--border);
    transform: translateY(-120%);
    transition: transform .3s ease;
    height: auto;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 1rem 0; font-size: 1rem; border-bottom: 1px solid var(--border); }
  .nav-cta { margin: 1rem 0 0; }
  .nav-cta .btn { width: 100%; justify-content: center; }
  /* Dropdown mobil: aufklappen statt Overlay */
  .nav-drop > .drop-trigger { display: flex; width: 100%; justify-content: space-between; padding: 1rem 0; font-size: 1rem; border-bottom: 1px solid var(--border); }
  .drop-menu {
    position: static; left: auto; right: auto; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: 0; box-shadow: none; backdrop-filter: none;
    padding: 0 0 0 1rem; min-width: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-drop.open .drop-menu { max-height: 600px; transform: none; }
  .nav-drop:hover .drop-menu { transform: none; }
  .drop-menu a { padding: .8rem 0; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 1rem; }
  .drop-menu a:hover { background: none; color: var(--accent); }
  .drop-menu a .d-sub { display: none; }
}

/* ============================================================
   HERO  — Signatur: lebendes Growth-Diagramm
   ============================================================ */
.hero { position: relative; z-index: 1; padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem)); padding-bottom: clamp(4rem, 8vw, 7rem); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-status {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .9rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  margin-bottom: 1.8rem;
}
.hero-status .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0,255,209,0.6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,255,209,0.5); }
  70% { box-shadow: 0 0 0 9px rgba(0,255,209,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,209,0); }
}
.hero h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.hero h1 .glow { color: var(--accent); }
.hero-sub {
  color: var(--text-muted);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  margin: 1.6rem 0 2.4rem;
  max-width: 46ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-trust {
  margin-top: 2.6rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: .76rem;
  color: var(--text-faint);
  letter-spacing: .04em;
}
.hero-trust b { color: var(--text); font-weight: 700; }

/* Hero-Diagramm-Panel */
.hero-panel {
  position: relative;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.4rem 1.4rem 1.6rem;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.9);
  overflow: hidden;
}
.hero-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 70% 0%, rgba(0,229,255,0.10), transparent 60%);
  pointer-events: none;
}
.panel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; position: relative; }
.panel-title { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.panel-live { font-family: var(--f-mono); font-size: .68rem; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; }
.panel-live .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s infinite; }
.chart-wrap { position: relative; }
.chart { width: 100%; height: 180px; display: block; }

/* Logo-Glitch am Wendepunkt des Diagramms */
.chart-logo {
  position: absolute;
  top: 38%; left: 47%;
  transform: translate(-50%,-50%) scale(.82);
  width: 42%;
  opacity: 0;
  pointer-events: none;
}
.chart-logo.show { opacity: 1; }
.glitch-logo { position: absolute; }
.glitch-img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; }
.glitch-img--main { position: relative; }
.glitch-img--r { mix-blend-mode: screen; filter: hue-rotate(-18deg) saturate(3); opacity: .9; }
.glitch-img--b { mix-blend-mode: screen; filter: hue-rotate(150deg) saturate(4); opacity: .9; }
.chart-logo.glitching .glitch-img--main { animation: g-main .5s steps(2) 3; }
.chart-logo.glitching .glitch-img--r { animation: g-r .5s steps(2) 3; }
.chart-logo.glitching .glitch-img--b { animation: g-b .5s steps(2) 3; }
@keyframes g-main { 0%,100%{transform:none;clip-path:none;} 40%{transform:translate(-2px,1px);clip-path:polygon(0 10%,100% 10%,100% 35%,0 35%);} 70%{transform:translate(2px,-1px);clip-path:polygon(0 55%,100% 55%,100% 85%,0 85%);} }
@keyframes g-r { 0%,100%{transform:translate(0,0);} 40%{transform:translate(-4px,0);} 70%{transform:translate(3px,1px);} }
@keyframes g-b { 0%,100%{transform:translate(0,0);} 40%{transform:translate(4px,0);} 70%{transform:translate(-3px,-1px);} }
@media (prefers-reduced-motion: reduce) {
  .chart-logo.glitching .glitch-img--main,
  .chart-logo.glitching .glitch-img--r,
  .chart-logo.glitching .glitch-img--b { animation: none; }
  .glitch-img--r, .glitch-img--b { opacity: 0; }
}

/* Vorher/Nachher-Tags im Diagramm */
.chart-tag {
  position: absolute;
  font-family: var(--f-ui);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .5s ease;
}
.chart-tag--before { bottom: 14%; left: 6%; color: var(--text-faint); border: 1px solid var(--border); }
.chart-tag--after { top: 8%; right: 5%; color: #000; background: var(--accent); }
.chart-tag.show { opacity: 1; }

.section--light .proof { background: #fff; border-color: rgba(0,0,0,0.08); }
.section--light .proof .p-label { color: rgba(10,10,10,0.45); }
.section--light .proof .before { color: rgba(10,10,10,0.35); text-decoration-color: rgba(0,0,0,.2); }
.section--light .proof .after { color: #02110D; }
.section--light .proof .arrow-r { color: #047a64; }
.section--light .proof .p-desc { color: rgba(10,10,10,0.6); }

.panel-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin-top: 1.2rem; position: relative; }
.pstat { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .85rem .9rem; }
.pstat .num { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; color: var(--text); letter-spacing: -0.02em; }
.pstat .lbl { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-top: .15rem; }
.pstat .num .unit { color: var(--accent); font-size: 1rem; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { order: 2; }
}

/* ============================================================
   "WARUM HAXH" — 4 Kacheln
   ============================================================ */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .grid-4 { grid-template-columns: 1fr; } }

.tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.8rem 1.5rem;
  transition: border-color .2s ease, transform .2s ease;
  position: relative;
}
.tile:hover { border-color: var(--accent-line); transform: translateY(-4px); }
.tile .t-ico {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--accent-dim);
  display: grid; place-items: center;
  margin-bottom: 1.2rem;
  color: var(--accent);
}
.tile h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; }
.tile p { color: var(--text-muted); font-size: .94rem; margin-top: .5rem; }

/* ============================================================
   SYSTEME — Engine-Karten (2x2)
   ============================================================ */
.engine-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; }
@media (max-width: 760px) { .engine-grid { grid-template-columns: 1fr; } }

.engine {
  background: linear-gradient(165deg, var(--bg-card), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 2rem 1.9rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease;
}
.engine:hover { border-color: var(--accent-line); }
.engine::after {
  content: "";
  position: absolute; top: -40%; right: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(0,255,209,0.06), transparent 70%);
  pointer-events: none;
}
.engine .e-ico {
  width: 48px; height: 48px; border-radius: 10px;
  border: 1px solid var(--border-2);
  display: grid; place-items: center;
  color: var(--accent);
  margin-bottom: 1.3rem;
}
.engine .e-num { font-family: var(--f-mono); font-size: .72rem; color: var(--accent); letter-spacing: .14em; }
.engine h2, .engine h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.7rem; margin: .6rem 0 .8rem; letter-spacing: -0.02em; }
.engine .e-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.engine .e-tags span {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--text-muted);
  border: 1px solid var(--border-2);
  padding: .3rem .65rem;
  border-radius: 100px;
}
.engine p { color: var(--text-muted); font-size: .96rem; }

/* ============================================================
   VORHER / NACHHER — Ergebnis-Beweis
   ============================================================ */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
@media (max-width: 820px) { .proof-grid { grid-template-columns: 1fr; } }
/* Ergebnis-Sektion mit bg3-Hintergrund */
.section--proof-bg { position: relative; overflow: hidden; }
.proof-bg {
  position: absolute; inset: 0;
  background-image: url('/bg3.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
.section--proof-bg .wrap { position: relative; z-index: 1; }

.proof {
  background: rgba(19,19,19,0.72);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.9rem 1.7rem;
}
.proof .p-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .3rem; }
.proof .p-ico {
  width: 40px; height: 40px; border-radius: 9px;
  border: 1px solid var(--border-2);
  display: grid; place-items: center;
  color: var(--accent); flex-shrink: 0;
}
.proof .p-label { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.proof .ba { display: flex; align-items: flex-end; gap: 1.1rem; margin: 1rem 0 .4rem; }
.proof .before { font-family: var(--f-display); font-size: 1.5rem; color: var(--text-faint); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.2); }
.proof .arrow-r { color: var(--accent); font-size: 1.1rem; }
.proof .after { font-family: var(--f-display); font-weight: 600; font-size: 2.6rem; color: var(--accent); line-height: 1; letter-spacing: -0.02em; }
.proof .p-desc { color: var(--text-muted); font-size: .9rem; margin-top: .6rem; }

/* ============================================================
   PROZESS — Timeline
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 2.4rem; }
.step::before {
  counter-increment: step;
  content: counter(step,decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: .8rem;
  color: var(--accent);
  position: absolute; top: 0; left: 0;
  letter-spacing: .1em;
}
.step::after {
  content: "";
  position: absolute; top: .35rem; left: 2.6rem; right: 0;
  height: 1px; background: var(--border);
}
.step:last-child::after { display: none; }
.step h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin-bottom: .4rem; }
.step p { color: var(--text-muted); font-size: .9rem; }

/* ============================================================
   CTA-Sektion
   ============================================================ */
/* ============================================================
   GLOSSAR
   ============================================================ */
.gloss-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.1rem; }
@media (max-width: 760px) { .gloss-grid { grid-template-columns: 1fr; } }
.gterm {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.6rem 1.6rem;
  transition: border-color .2s ease;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.gterm:hover { border-color: var(--accent-line); }
.gterm h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--text); margin-bottom: .2rem; }
.gterm .g-tag { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.gterm p { color: var(--text-muted); font-size: .95rem; margin-top: .7rem; line-height: 1.6; }
.gterm p a { color: var(--accent); border-bottom: 1px solid var(--accent-line); }
.gloss-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.gloss-jump a {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--text-muted); border: 1px solid var(--border-2);
  padding: .35rem .8rem; border-radius: 100px; transition: all .15s ease;
}
.gloss-jump a:hover { border-color: var(--accent); color: var(--accent); }

.cta-band {
  position: relative; z-index: 1;
  background: linear-gradient(150deg, #0a1614, #050505 60%);
  border-top: 1px solid var(--accent-line);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 80% at 80% 50%, rgba(0,255,209,0.10), transparent 60%);
  pointer-events: none;
}
#cta-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.cta-inner { padding: clamp(4rem,8vw,6.5rem) 0; text-align: center; position: relative; z-index: 1; }
.cta-inner h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem,5vw,3.6rem); letter-spacing: -0.025em; line-height: 1.02; max-width: 18ch; margin: 0 auto; }
.cta-inner p { color: var(--text-muted); font-size: 1.1rem; margin: 1.2rem auto 2.2rem; max-width: 48ch; }
.cta-inner .hero-cta { justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { position: relative; z-index: 1; background: var(--bg-2); border-top: 1px solid var(--border); padding: clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer .brand { margin-bottom: 1rem; }
.footer-logo { width: 150px; height: auto; margin-bottom: 1.1rem; display: block; }
.footer-about { color: var(--text-muted); font-size: .92rem; max-width: 34ch; }
.footer .footer-label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(242,244,243,0.72); margin-bottom: 1.1rem; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.footer ul a { color: var(--text-muted); font-size: .92rem; transition: color .15s ease; }
.footer ul a:hover { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--border); font-family: var(--f-ui); font-weight: 400; font-size: .85rem; letter-spacing: -0.005em; color: rgba(242,244,243,0.65); }
.footer-bottom a { color: rgba(242,244,243,0.65); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(0,255,209,0.5); }
.footer-bottom a:hover { color: var(--accent); }

/* ============================================================
   UNTERSEITEN — generischer Page-Header + Prosa
   ============================================================ */
.page-hero { position: relative; z-index: 1; padding: calc(var(--nav-h) + 4rem) 0 3rem; }
.page-hero + .section { padding-top: 1rem; }
.page-hero .crumb { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 1.4rem; }
.page-hero .crumb a { color: var(--text-muted); }
.page-hero .crumb a:hover { color: var(--accent); }
.page-hero h1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.3rem,5.5vw,4rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 18ch; }
.page-hero .lead { color: var(--text-muted); font-size: 1.15rem; margin-top: 1.3rem; max-width: 58ch; }

.page-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3.5rem; align-items: start; }
@media (max-width: 900px) { .page-layout { grid-template-columns: 1fr; } }
.prose { max-width: none; }
.prose h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem,3.5vw,2.3rem); letter-spacing: -0.02em; margin: 2.6rem 0 1rem; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; margin: 1.8rem 0 .6rem; }
.prose p { color: var(--text-muted); margin-bottom: 1.1rem; font-size: 1.02rem; }
.prose ul { color: var(--text-muted); margin: 0 0 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.prose li { padding-left: .3rem; }
.prose strong { color: var(--text); }
.prose a { color: var(--accent); border-bottom: 1px solid var(--accent-line); }

.sidebar { position: sticky; top: calc(var(--nav-h) + 2rem); display: flex; flex-direction: column; gap: 1.2rem; }
.side-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem 1.4rem; }
.side-card h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin-bottom: .7rem; }
.side-card p { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.1rem; }
.side-card .btn { width: 100%; justify-content: center; }
.side-card.accent { background: linear-gradient(160deg, #0a1614, var(--bg-card)); border-color: var(--accent-line); }
.side-links { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.side-links a { color: var(--text-muted); font-size: .92rem; display: flex; align-items: center; gap: .5rem; }
.side-links a::before { content: "→"; color: var(--accent); }
.side-links a:hover { color: var(--text); }

/* Feature-Liste auf Unterseiten */
.feat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.1rem; margin: 1.8rem 0; }
@media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } }
.feat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1.3rem 1.3rem; }
.feat h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; margin-bottom: .4rem; color: var(--text); }
.feat p { color: var(--text-muted); font-size: .9rem; margin: 0; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.bcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: border-color .2s ease, transform .2s ease; display: flex; flex-direction: column; }
.bcard:hover { border-color: var(--accent-line); transform: translateY(-4px); }
.bcard .b-img { aspect-ratio: 2.5/1; background: linear-gradient(135deg, #0a1614, #131313); overflow: hidden; }
.bcard .b-img img { width: 100%; height: 100%; object-fit: cover; }
.bcard .b-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.bcard .b-cat { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .7rem; }
.bcard h2, .bcard h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em; }
.bcard p { color: var(--text-muted); font-size: .9rem; margin: .6rem 0 1rem; flex: 1; }
.bcard .b-read { font-family: var(--f-mono); font-size: .74rem; color: var(--text-muted); margin-top: auto; }

/* Blog-Artikel */
.art-hero { position: relative; z-index: 1; padding: calc(var(--nav-h) + 3.5rem) 0 2.5rem; }
.art-hero-inner { max-width: 800px; }
.art-cat { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.art-h1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem,4.8vw,3.2rem); line-height: 1.05; letter-spacing: -0.02em; }
.art-lead { color: var(--text-muted); font-size: 1.18rem; margin-top: 1.2rem; }
.art-meta { font-family: var(--f-mono); font-size: .74rem; color: var(--text-faint); margin-top: 1.4rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.art-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3.5rem; align-items: start; }
@media (max-width: 900px) { .art-layout { grid-template-columns: 1fr; } }
.art-prose { max-width: none; }
.art-prose h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem,3.5vw,2.2rem); margin: 2.4rem 0 1rem; letter-spacing: -0.02em; }
.art-prose h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; margin: 1.8rem 0 .6rem; }
.art-prose p { color: var(--text-muted); margin-bottom: 1.1rem; font-size: 1.04rem; }
.art-prose ul, .art-prose ol { color: var(--text-muted); margin: 0 0 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.art-prose strong { color: var(--text); }
.art-prose a { color: var(--accent); border-bottom: 1px solid var(--accent-line); }
.art-img { border-radius: var(--r); overflow: hidden; margin-bottom: 2rem; aspect-ratio: 2.5/1; background: linear-gradient(135deg,#0a1614,#131313); }
.art-img img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   FAQ (Accordion-frei, einfach offen)
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); padding: 1.5rem 0; }
.faq-item summary { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.5rem; font-family: var(--f-mono); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--text-muted); margin-top: 1rem; font-size: 1rem; }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 2rem 1.8rem; transition: border-color .2s ease; }
.contact-card:hover { border-color: var(--accent-line); }
.contact-card .c-ico { color: var(--accent); margin-bottom: 1rem; }
.contact-card h2, .contact-card h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; }
.contact-card .c-val { font-family: var(--f-mono); font-size: 1.05rem; color: var(--accent); margin-top: .5rem; display: block; }
.contact-card p { color: var(--text-muted); font-size: .92rem; margin-top: .4rem; }

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ============================================================
   WhatsApp / Float-Button (optional, später)
   ============================================================ */
.float-cta {
  position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 90;
  background: var(--accent); color: #04110D;
  font-family: var(--f-mono); font-weight: 700; font-size: .8rem;
  padding: .9rem 1.3rem; border-radius: 100px;
  box-shadow: 0 14px 40px -12px rgba(0,255,209,0.5);
  display: inline-flex; align-items: center; gap: .5rem;
  transition: transform .18s ease;
}
.float-cta:hover { transform: translateY(-3px); }
@media (max-width: 600px) { .float-cta { bottom: 1rem; right: 1rem; padding: .8rem 1.1rem; } }

/* ============================================================
   Cookie-Banner
   ============================================================ */
.cookie {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: rgba(14,14,14,0.97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 1.1rem var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  transform: translateY(110%); transition: transform .3s ease;
}
.cookie.show { transform: translateY(0); }
.cookie p { color: var(--text-muted); font-size: .86rem; max-width: 70ch; }
.cookie a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cookie .btn { padding: .6rem 1.2rem; }
.cookie-actions { display: flex; gap: .7rem; flex-shrink: 0; }
@media (max-width: 560px) {
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1; justify-content: center; }
}