/* Signalfabrik Brand Tokens + Production Stylesheet
   V29 Iteration 4 als Style-Anker
   Brand-Source: Vault/16_Signalfabrik/Identität/Signalfabrik - Brand.md
*/

/* Globaler Mobile-Overflow-Schutz: kein horizontales Scrollen, egal welche Sektion */
html, body { overflow-x: clip; max-width: 100%; }

:root {
  --pine-1: #DBF6E3;
  --pine-2: #7CD4A0;
  --primary: #10B454;
  --primary-deep: #0A6E32;
  --primary-darker: #074A22;
  --primary-tint: #DBF6E3;
  --bg: #faf9f7;
  --text: #0a0a0a;
  --muted: rgba(10,10,10,0.6);
  --border: rgba(10,10,10,0.15);
  --font-h: 'Red Hat Display', sans-serif;
  --font-s: 'Source Serif Pro', Georgia, serif;
  --font-m: 'JetBrains Mono', monospace;
  --font-b: 'Inter', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-b); background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip; }

/* Typography */
h1,h2,h3 { font-family:var(--font-h); font-weight:900; -webkit-text-stroke:0.35px; line-height:0.92; letter-spacing:-0.04em; }
.italic { font-family:var(--font-s); font-style:italic; font-weight:600; -webkit-text-stroke:0; letter-spacing:-0.02em; }
.italic-accent { font-family:var(--font-s); font-style:italic; font-weight:600; -webkit-text-stroke:0; color:var(--primary); letter-spacing:-0.02em; }
.mono { font-family:var(--font-m); font-weight:500; letter-spacing:0.05em; }

.container { max-width:1600px; margin:0 auto; padding:0 48px; position:relative; }
.eyebrow { font-family:var(--font-m); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:700; }

/* CTA */
.cta { display:inline-flex; align-items:center; gap:12px; padding:24px 36px; text-decoration:none; font-weight:700; font-size:18px; transition:background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s; font-family:var(--font-h); }
.cta::after { content:'→'; font-size:24px; transition:transform 0.2s; display:inline-block; }
.cta-primary { background:var(--text); color:#fff; }
.cta-primary:hover { background:var(--primary); color:#fff; transform:translateY(-2px); }
.cta-primary:hover::after { transform:translateX(6px); }

/* Logo */
.logo-wrap { padding:8px 14px; display:inline-block; background:var(--text); }
.logo { font-family:var(--font-h); font-weight:900; font-size:22px; text-decoration:none; -webkit-text-stroke:0.35px; letter-spacing:-0.02em; }
.logo .s, .logo .f { color:var(--primary); }
.logo .rest { color:#fff; }

/* Site Header */
.site-header { padding:18px 0; position:sticky; top:0; background:var(--bg); z-index:50; border-bottom:2px solid var(--text); transition:background 0.35s ease, border-color 0.35s ease, padding 0.35s ease; }
.site-header .container { display:flex; justify-content:space-between; align-items:center; }
.nav { display:flex; gap:32px; align-items:center; border:2px solid transparent; border-radius:4px; transition:background 0.35s ease, padding 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, gap 0.35s ease; }
.nav a { font-family:var(--font-m); color:var(--text); text-decoration:none; font-size:13px; font-weight:500; letter-spacing:0.05em; }
.nav a:hover { color:var(--primary); }
.nav-cta { color:var(--primary) !important; font-weight:700; }

/* Sticky-Header Scrolled-State · Industrie-Plates (Brand-Vokabular .fab-post / .bento-cell)
   Shadow IMMER Pine (Esteban-Direktive 2026-05-23): Brand-Akzent durchgehend, nur Plate-Color
   wechselt zwischen hell/dark Section-Hintergrund, Shadow bleibt konstant. */
.site-header.is-scrolled { background:transparent; border-bottom-color:transparent; padding:14px 0; }
.logo-wrap { border-radius:4px; transition:border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; }
.site-header.is-scrolled .logo-wrap { box-shadow:4px 4px 0 var(--primary); }
.site-header.is-scrolled .logo-wrap:hover { box-shadow:6px 6px 0 var(--primary); transform:translate(-1px,-1px); }
.site-header.is-scrolled .nav { background:#fff; padding:10px 24px; border-color:var(--text); box-shadow:4px 4px 0 var(--primary); }
/* KEIN :hover-Effekt auf .nav-Plate selbst (Esteban-Direktive 2026-05-23): einzelne Items reagieren, nicht das ganze Plate */

/* Sticky-Header Dark-BG-Adaptive (Esteban-Direktive 2026-05-23):
   Wenn dark Section unter dem Header liegt, invertieren beide Plate-Hintergründe für Kontrast.
   Shadow bleibt IMMER Pine (Brand-Akzent durchgehend, kein Color-Whiplash beim Section-Wechsel). */
.site-header.is-scrolled.is-dark-bg .logo-wrap {
  background: #fff;
  box-shadow: 4px 4px 0 var(--primary);
}
.site-header.is-scrolled.is-dark-bg .logo-wrap:hover {
  box-shadow: 6px 6px 0 var(--primary);
  transform: translate(-1px,-1px);
}
.site-header.is-scrolled.is-dark-bg .logo-wrap .rest { color: var(--text); }
.site-header.is-scrolled.is-dark-bg .nav {
  background: var(--text);
  border-color: #fff;
  box-shadow: 4px 4px 0 var(--primary);
}
.site-header.is-scrolled.is-dark-bg .nav a { color: #fff; }
.site-header.is-scrolled.is-dark-bg .nav a:hover { color: var(--primary); }
.site-header.is-scrolled.is-dark-bg .nav-cta { color: var(--primary) !important; }

@media (max-width:720px) {
  .site-header.is-scrolled .nav { padding:8px 18px; gap:18px; box-shadow:3px 3px 0 var(--primary); }
  .site-header.is-scrolled .logo-wrap { box-shadow:3px 3px 0 var(--primary); }
  .site-header.is-scrolled.is-dark-bg .nav { box-shadow:3px 3px 0 var(--primary); }
  .site-header.is-scrolled.is-dark-bg .logo-wrap { box-shadow:3px 3px 0 var(--primary); }
}

/* Hamburger Button (Scan-Bars-X Pattern, analog Seonar #178) */
.nav-hamburger { display:none; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:flex-end; gap:5px; padding:0 10px; background:transparent; border:none; cursor:pointer; transition:background 0.2s; }
.nav-hamburger:hover { background:var(--primary-tint); }
.nav-hamburger.is-open { background:var(--primary-tint); }
.nav-hamburger span { display:block; height:2px; background:var(--text); border-radius:2px; transform-origin:center; transition:width 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s, transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s; }
.nav-hamburger span:nth-child(1) { width:24px; }
.nav-hamburger span:nth-child(2) { width:18px; }
.nav-hamburger span:nth-child(3) { width:12px; }
.nav-hamburger:hover span { background:var(--primary); }
.nav-hamburger.is-open span { width:24px; background:var(--primary-deep); }
.nav-hamburger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* HERO Iteration 4 — Signal inline mit "wird", CTA-Hover Inversion-plus-Shadow, Body-Card */
.hero { padding:36px 0 60px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:0; right:-10%; width:55%; height:120%; background:var(--primary); transform:skewX(-12deg); transform-origin:top right; }
.hero .halftone-overlay { position:absolute; top:0; right:-10%; width:55%; height:120%; background-image:radial-gradient(circle, var(--primary-darker) 2px, transparent 2px); background-size:16px 16px; transform:skewX(-12deg); transform-origin:top right; opacity:0.7; }
.hero::after { content:''; position:absolute; top:30%; right:5%; width:30%; height:30%; background:var(--text); transform:skewX(-12deg); }
.hero .container { position:relative; z-index:1; }

.hero .meta-line { display:flex; gap:20px; margin-bottom:32px; align-items:center; flex-wrap:wrap; }
.hero .meta-line .eyebrow { color:var(--primary-deep); padding:8px 16px; background:var(--pine-1); border-radius:4px; }
.hero .meta-line .mono-meta { font-family:var(--font-m); font-size:11px; color:var(--text); letter-spacing:0.15em; opacity:0.55; }

.hero h1 { font-size:clamp(56px,9vw,148px); line-height:0.95; }
.hero h1 .stroke-line { -webkit-text-stroke:3px var(--text); color:transparent; -webkit-text-fill-color:transparent; }
.hero h1 .line-2 { }
.hero h1 .line-2 .stroke-text { -webkit-text-stroke:3px var(--text); color:transparent; -webkit-text-fill-color:transparent; }
.hero h1 .signal-box { display:inline-block; background:var(--primary); padding:0 0.16em; margin-left:0.25em; box-shadow:10px 10px 0 var(--text); line-height:0.92; vertical-align:baseline; }
.hero h1 .signal-box .signal-italic { font-family:var(--font-s); font-style:italic; font-weight:600; -webkit-text-stroke:0; color:#fff; letter-spacing:-0.02em; font-size:1.12em; line-height:0.92; display:inline-block; }

.hero-sub-row { display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:32px; padding-top:24px; border-top:3px solid var(--text); align-items:start; }
.hero-sub { font-family:var(--font-h); font-weight:900; font-size:clamp(26px,2.8vw,44px); line-height:1.1; -webkit-text-stroke:0.35px; letter-spacing:-0.02em; color:var(--text); }
.hero-sub .reichweite { color:var(--primary); font-family:var(--font-s); font-style:italic; font-weight:600; -webkit-text-stroke:0; }

/* Hero-Top-Row: H1 links, Body-Card rechts oben (Session #179 Esteban-Direktive) */
.hero-top-row { display:flex; gap:48px; align-items:flex-start; margin-bottom:24px; }
.hero-top-row h1 { flex:1 1 auto; margin:0; }
.hero-top-row .hero-body-card { flex:0 0 420px; max-width:420px; margin:0; align-self:flex-start; }

/* Hero-Tagline H2 unter Stage, full-width (Session #179 Esteban-Direktive) */
.hero-tagline { font-family:var(--font-h); font-weight:900; font-size:clamp(28px,3.2vw,52px); line-height:1.15; -webkit-text-stroke:0.35px; letter-spacing:-0.02em; color:var(--text); margin:24px 0 0; padding-top:24px; border-top:3px solid var(--text); }
.hero-tagline-line { display:block; }
.hero-tagline em { color:var(--primary); font-family:var(--font-s); font-style:italic; font-weight:600; -webkit-text-stroke:0; letter-spacing:-0.02em; }

/* Hero-Body-Card: opaque cream BG plus hard-shadow für Lesbarkeit über Halftone */
.hero-body-card { background:var(--bg); padding:36px 40px; border:2px solid var(--text); box-shadow:8px 8px 0 var(--text); max-width:540px; }
.hero-body { font-family:var(--font-b); font-size:17px; line-height:1.55; font-weight:500; color:var(--text); margin-bottom:8px; }
.hero-cta-wrap { margin-top:24px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.hero-body-card .cta-primary { font-family:var(--font-b); font-weight:700; font-size:16px; padding:18px 28px; letter-spacing:0; }
.hero-body-card .cta-primary::after { font-size:20px; }
.cta-sub { font-family:var(--font-b); font-size:13px; color:var(--muted); max-width:480px; letter-spacing:0; line-height:1.5; }

/* WHAT — Tri-Font-Mix */
.what { background:var(--text); color:var(--bg); padding:200px 0; position:relative; overflow:hidden; }
.what::before { content:''; position:absolute; bottom:0; left:-10%; width:50%; height:60%; background:var(--primary); transform:skewX(15deg); opacity:0.12; }
.what .halftone-bg { position:absolute; bottom:0; left:-10%; width:50%; height:60%; background-image:radial-gradient(circle, var(--primary) 1.5px, transparent 1.5px); background-size:18px 18px; transform:skewX(15deg); opacity:0.4; }
.what .container { position:relative; z-index:1; }
.what .eyebrow { color:var(--primary); margin-bottom:60px; }
.what h2 { font-size:clamp(60px,10vw,160px); margin-bottom:80px; color:var(--bg); }
.what h2 .italic-accent { color:var(--primary); }
.what h2 .stroke-accent { -webkit-text-stroke:3px var(--bg); color:transparent; -webkit-text-fill-color:transparent; }
.what-list { display:flex; flex-direction:column; }
.what-item { padding:64px 32px; border-top:1px solid rgba(255,255,255,0.15); display:grid; grid-template-columns:120px 1fr 2fr; gap:48px; align-items:start; transition:background-color 0.25s, border-color 0.25s; text-decoration:none; color:inherit; cursor:pointer; }
.what-item:last-child { border-bottom:1px solid rgba(255,255,255,0.15); }
.what-item:hover { background:rgba(16,180,84,0.10); border-top-color:var(--primary); }
.what-item:hover + .what-item { border-top-color:var(--primary); }
.what-item .num { font-family:var(--font-m); font-weight:700; font-size:48px; color:var(--primary); letter-spacing:-0.02em; line-height:1; }
.what-item h3 { font-size:clamp(36px,4vw,56px); color:var(--bg); }
.what-item h3 .italic-accent { color:var(--primary); }
.what-item .what-text { display:flex; flex-direction:column; gap:18px; padding-top:16px; }
.what-item p { font-family:var(--font-s); font-size:19px; line-height:1.6; color:rgba(255,255,255,0.7); margin:0; }
.what-item .what-cta-hint { font-family:var(--font-m); font-size:13px; letter-spacing:0.08em; color:var(--primary); display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border:1px solid rgba(16,180,84,0.45); border-radius:0; align-self:flex-start; transition:background-color 0.2s, border-color 0.2s, color 0.2s; }
.what-item .what-cta-hint::after { content:'→'; font-size:18px; transition:transform 0.2s; }
.what-item:hover .what-cta-hint { background:var(--primary); border-color:var(--primary); color:#fff; }
.what-item:hover .what-cta-hint::after { transform:translateX(4px); }
.what-item .what-cta-url { font-family:'JetBrains Mono', monospace; font-size:11px; color:rgba(255,255,255,0.45); letter-spacing:0.08em; margin-top:6px; }

/* BIG NUMBER */
.big-number-block { padding:0; text-align:center; background:var(--primary); color:var(--text); position:relative; overflow:hidden; background-image:radial-gradient(circle, var(--primary-darker) 1.5px, transparent 1.5px); background-size:18px 18px; }
.big-number-block::before { content:''; position:absolute; top:-10%; left:-10%; width:120%; height:50%; background:var(--text); transform:skewY(-4deg); }
.big-number-block::after { content:''; position:absolute; bottom:-10%; right:-10%; width:80%; height:30%; background:var(--text); transform:skewY(-4deg); }
.big-number-block .stripe-1 { position:absolute; top:32%; left:0; right:0; height:6%; background:var(--pine-2); transform:skewY(-4deg); opacity:0.7; z-index:1; }
.big-number-block .stripe-2 { position:absolute; top:62%; left:0; right:0; height:5%; background:var(--primary-darker); transform:skewY(-4deg); opacity:0.5; z-index:1; }
.big-number-block .container { position:relative; z-index:2; padding:200px 0; }
.big-number-block .eyebrow { color:#fff; margin-bottom:40px; }
.big-number-block .num { font-family:var(--font-h); font-weight:900; font-size:clamp(180px,24vw,480px); line-height:0.85; letter-spacing:-0.06em; -webkit-text-stroke:5px var(--text); color:transparent; -webkit-text-fill-color:transparent; }
.big-number-block .caption { font-family:var(--font-s); font-style:italic; font-weight:600; font-size:clamp(28px,3vw,48px); margin-top:60px; max-width:800px; margin-left:auto; margin-right:auto; line-height:1.25; letter-spacing:-0.02em; color:var(--text); }
.big-number-block .caption .strong-display { font-family:var(--font-h); font-style:normal; font-weight:900; -webkit-text-stroke:0.35px; }

/* PAKETE */
.pakete { padding:200px 0; position:relative; overflow:hidden; }
.pakete .pine-tint-wedge { position:absolute; top:15%; left:-5%; width:30%; height:30%; background:var(--pine-1); transform:skewX(-15deg); }
.pakete .halftone-paket { position:absolute; bottom:15%; right:-5%; width:35%; height:30%; background-image:radial-gradient(circle, var(--primary) 1.2px, transparent 1.2px); background-size:14px 14px; transform:skewX(-15deg); opacity:0.5; }
.pakete .container { position:relative; z-index:1; }
.pakete .eyebrow { color:var(--primary); margin-bottom:24px; }
.pakete h2 { font-size:clamp(60px,10vw,160px); margin-bottom:24px; color:var(--text); }
.pakete h2 .italic-accent { color:var(--primary); }
.pakete .meta { font-family:var(--font-m); font-size:12px; color:var(--muted); margin-bottom:80px; letter-spacing:0.15em; text-transform:uppercase; }
.paket-grid { display:flex; flex-direction:column; }
.paket-row { padding:80px 0; border-top:2px solid var(--text); display:grid; grid-template-columns:200px 1fr 1fr; gap:64px; align-items:center; transition:all 0.2s; background:var(--bg); }
.paket-row:last-child { border-bottom:2px solid var(--text); }
.paket-row:hover { background:var(--primary); padding-left:32px; padding-right:32px; }
.paket-row:hover .paket-num, .paket-row:hover h3, .paket-row:hover .desc, .paket-row:hover .price { color:#fff; }
.paket-row:hover h3 .italic-accent { color:#fff; }
.paket-num { font-family:var(--font-m); font-size:13px; letter-spacing:0.15em; color:var(--primary); font-weight:700; }
.paket-row h3 { font-size:clamp(48px,6vw,96px); transition:color 0.2s; color:var(--text); }
.paket-row h3 .italic-accent { color:var(--primary); transition:color 0.2s; }
.paket-row .desc { font-family:var(--font-s); font-size:17px; line-height:1.6; color:var(--muted); transition:color 0.2s; }
.paket-row .price { font-family:var(--font-m); font-size:11px; color:var(--muted); margin-top:16px; letter-spacing:0.15em; text-transform:uppercase; }

/* BLOG-Section (blog.html) */
.blog-section { padding:96px 0 80px; background:var(--bg); position:relative; }
.blog-mock-banner {
  display:flex; gap:20px; align-items:flex-start;
  background:#fff; border:2px solid var(--text);
  padding:20px 24px; margin-bottom:48px;
  box-shadow:6px 6px 0 var(--primary);
}
.blog-mock-badge {
  flex-shrink:0;
  font-family:var(--font-m); font-size:11px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:#fff; background:var(--text);
  padding:6px 12px;
}
.blog-mock-banner p {
  font-family:var(--font-b); font-size:15px; line-height:1.55;
  color:var(--text); margin:0;
}
.blog-mock-banner p strong { color:var(--primary-deep); }
.blog-mock-banner a {
  color:var(--text); font-weight:700; text-decoration:underline;
  text-decoration-color:var(--primary); text-underline-offset:3px;
}
.blog-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.blog-card {
  display:flex; flex-direction:column; gap:14px;
  background:#fff; border:2px solid var(--text);
  padding:28px 26px 24px;
  box-shadow:6px 6px 0 var(--text);
  transition:transform 0.18s, box-shadow 0.18s;
  text-decoration:none;
  position:relative;
}
.blog-card:hover {
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 var(--primary);
}
.blog-card.is-mock { cursor:default; }
.blog-card.is-mock::before {
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, transparent 0 8px, rgba(16,180,84,0.05) 8px 9px);
  pointer-events:none;
}
/* Mock-Card behaelt Hover-Lift (Esteban will visuelle Reaktion auch ohne Klick-Funktion) */
.blog-card-meta {
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
}
.blog-card-kicker {
  font-family:var(--font-m); font-size:11px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--primary-deep);
}
.blog-card-date {
  font-family:var(--font-m); font-size:10px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted);
}
.blog-card h3 {
  font-family:var(--font-h); font-weight:900;
  font-size:clamp(20px, 2vw, 26px); line-height:1.15;
  -webkit-text-stroke:0.35px; letter-spacing:-0.02em;
  color:var(--text); margin:0;
}
.blog-card h3 .italic-accent {
  font-family:var(--font-s); font-style:italic; font-weight:600;
  -webkit-text-stroke:0; color:var(--primary);
}
.blog-card p {
  font-family:var(--font-s); font-size:15px; line-height:1.55;
  color:var(--muted); margin:0;
  flex:1;
}
.blog-card-cta {
  font-family:var(--font-m); font-size:11px; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--text);
  padding-top:8px;
  border-top:1px solid var(--border);
}

@media (max-width:1024px) {
  .blog-grid { grid-template-columns:repeat(2, 1fr); gap:22px; }
}
@media (max-width:680px) {
  .blog-section { padding:64px 0 56px; }
  .blog-mock-banner { flex-direction:column; gap:12px; padding:18px 20px; box-shadow:4px 4px 0 var(--primary); margin-bottom:32px; }
  .blog-mock-banner p { font-size:14px; }
  .blog-grid { grid-template-columns:1fr; gap:18px; }
  .blog-card { padding:22px 20px 20px; box-shadow:4px 4px 0 var(--text); }
  .blog-card:hover { box-shadow:6px 6px 0 var(--primary); }
  .blog-card h3 { font-size:20px; }
  .blog-card p { font-size:14px; }
}

/* FAQ */
.faq { background:var(--text); color:var(--bg); padding:200px 0; position:relative; overflow:hidden; background-image:radial-gradient(circle, rgba(16,180,84,0.12) 1.5px, transparent 1.5px); background-size:24px 24px; }
.faq::before { content:''; position:absolute; top:0; right:-10%; width:40%; height:100%; background-image:radial-gradient(circle, var(--primary) 1.5px, transparent 1.5px); background-size:14px 14px; transform:skewX(-12deg); opacity:0.5; }
.faq .container { position:relative; z-index:1; }
.faq h2 { font-size:clamp(60px,10vw,160px); margin-bottom:100px; color:var(--bg); }
.faq h2 .italic-accent { color:var(--primary); }
.faq-item { padding:48px 0; border-top:1px solid rgba(255,255,255,0.15); display:grid; grid-template-columns:1fr 2fr; gap:80px; }
.faq-item:last-child { border-bottom:1px solid rgba(255,255,255,0.15); }
.faq-item h3 { font-size:clamp(28px,3vw,40px); -webkit-text-stroke:0.2px; line-height:1.15; color:var(--bg); }
.faq-item p { font-family:var(--font-s); font-size:19px; line-height:1.6; color:rgba(255,255,255,0.75); padding-top:8px; }

/* FINAL CTA */
.final-cta { background:var(--primary); color:var(--text); padding:0; text-align:center; position:relative; overflow:hidden; background-image:radial-gradient(circle, var(--primary-darker) 1.5px, transparent 1.5px); background-size:18px 18px; }
.final-cta::before { content:''; position:absolute; top:-10%; left:-10%; width:120%; height:50%; background:var(--text); transform:skewY(-4deg); }
.final-cta::after { content:''; position:absolute; bottom:-10%; left:-10%; width:120%; height:30%; background:var(--text); transform:skewY(-4deg); }
.final-cta .container { position:relative; z-index:2; padding:200px 0; }
.final-cta h2 { font-size:clamp(80px,14vw,240px); margin-bottom:60px; color:var(--text); }
.final-cta h2 .italic-accent { color:#fff; display:block; }
.final-cta p { font-family:var(--font-s); font-style:italic; font-size:21px; max-width:700px; margin:0 auto 60px; line-height:1.5; color:var(--text); }
.final-cta .cta { background:var(--text); color:var(--primary); font-size:24px; padding:32px 48px; }
.final-cta .cta:hover { background:#fff; color:var(--text); box-shadow:6px 6px 0 var(--text); transform:translate(-2px,-2px); }
.final-cta .cta:hover::after { transform:translateX(4px); }

/* Site Footer */
.site-footer { background:#000; color:rgba(255,255,255,0.7); padding:80px 0 40px; font-size:14px; position:relative; overflow:hidden; }
.site-footer .container { display:grid; grid-template-columns:2fr 1fr 1fr; gap:80px; position:relative; z-index:2; }
.footer-tag { font-family:var(--font-h); font-weight:900; font-size:clamp(32px,3.5vw,56px); line-height:1.05; -webkit-text-stroke:0.35px; letter-spacing:-0.02em; color:#fff; margin-top:24px; }
.footer-tag .italic-accent { color:var(--primary); }
.footer-col h4 { font-family:var(--font-b); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--primary); font-weight:700; margin-bottom:20px; }
.footer-col p, .footer-col a { font-family:var(--font-b); display:block; line-height:1.7; color:rgba(255,255,255,0.7); text-decoration:none; font-size:14px; }
.footer-col a:hover { color:var(--primary); }
.footer-bottom { grid-column:1/-1; border-top:1px solid rgba(255,255,255,0.15); padding-top:32px; margin-top:48px; display:flex; justify-content:space-between; font-family:var(--font-b); font-size:12px; letter-spacing:0; text-transform:none; }
.footer-tag-personal { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-family:var(--font-b); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.45); text-decoration:none; transition:color 0.2s ease; }
.footer-tag-personal::after { content:"↗"; font-size:12px; letter-spacing:0; }
.footer-tag-personal:hover { color:var(--primary); }

/* Footer Fabrik-Animation: 3 Förderbänder mit transportierten Container-Rechtecken.
   Markup wird via footer-belt.js dynamisch injected (sonst 11x HTML-Duplikat).
   Start-Cascade: Tracks rollen sich von links aus (scaleX), kurzer Glow-Pulse,
   Pakete fliessen ein. Trigger via IntersectionObserver. */
.site-footer .belt-track { position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,0.12); z-index:0; pointer-events:none; transform:scaleX(0); transform-origin:left center; transition:transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.site-footer .belt-track.t1 { bottom:10%; }
.site-footer .belt-track.t2 { bottom:32%; transform-origin:right center; }
.site-footer .belt-track.t3 { bottom:38%; }
.site-footer.belt-1-active .belt-track.t1,
.site-footer.belt-2-active .belt-track.t2,
.site-footer.belt-3-active .belt-track.t3 { transform:scaleX(1); animation:trackPulse 1.6s ease-out 0.35s both; }
@keyframes trackPulse {
  0%   { background:rgba(16,180,84,0.75); box-shadow:0 0 14px rgba(16,180,84,0.55); }
  100% { background:rgba(255,255,255,0.12); box-shadow:none; }
}
.site-footer .package-row { position:absolute; left:0; right:0; height:0; z-index:1; pointer-events:none; }
.site-footer .package-row.r1 { bottom:10%; }
.site-footer .package-row.r2 { bottom:32%; }
.site-footer .package-row.r3 { bottom:38%; }
.site-footer .package { position:absolute; bottom:0; left:-5%; background:transparent; border:1.5px solid var(--primary); box-shadow:0 0 8px rgba(16,180,84,0.4); animation:fabPackage linear infinite; animation-play-state:paused; animation-fill-mode:backwards; }
.site-footer .package-row.r2 .package { animation-name:fabPackageReverse; left:105%; }
.site-footer.belt-1-active .package-row.r1 .package,
.site-footer.belt-2-active .package-row.r2 .package,
.site-footer.belt-3-active .package-row.r3 .package { animation-play-state:running; }
@keyframes fabPackage {
  0%   { left:-5%; opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { left:105%; opacity:0; }
}
@keyframes fabPackageReverse {
  0%   { left:105%; opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { left:-5%; opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer .package { animation:none; opacity:0; }
  .site-footer .belt-track { transform:scaleX(1); }
}

/* SUB-PAGE: Page-Hero (kleinerer Hero ohne Wedge) */
.page-hero { padding:96px 0 64px; position:relative; border-bottom:2px solid var(--text); }
.page-hero .eyebrow { color:var(--primary); margin-bottom:32px; }
.page-hero h1 { font-size:clamp(56px,8vw,128px); margin-bottom:24px; color:var(--text); }
.page-hero h1 .italic-accent { color:var(--primary); }
.page-hero .lead { font-family:var(--font-s); font-size:clamp(20px,2vw,28px); line-height:1.5; max-width:720px; color:var(--text); }

/* Article Layout für Über/Methodik/Kontakt */
.article { padding:120px 0; }
.article .container { max-width:960px; }
.article h2 { font-size:clamp(40px,5vw,72px); margin-bottom:32px; margin-top:96px; color:var(--text); }
.article h2:first-child { margin-top:0; }
.article h2 .italic-accent { color:var(--primary); }
.article h3 { font-family:var(--font-h); font-weight:900; font-size:clamp(24px,2.4vw,32px); margin-bottom:16px; margin-top:48px; color:var(--text); -webkit-text-stroke:0.2px; }
.article p { font-family:var(--font-s); font-size:19px; line-height:1.7; color:var(--text); margin-bottom:20px; max-width:720px; }
.article p strong { font-family:var(--font-h); font-weight:900; -webkit-text-stroke:0.2px; }
.article ul { font-family:var(--font-s); font-size:19px; line-height:1.7; color:var(--text); margin-bottom:24px; max-width:720px; padding-left:0; list-style:none; }
.article ul li { padding-left:32px; position:relative; margin-bottom:12px; }
.article ul li::before { content:'→'; position:absolute; left:0; top:0; color:var(--primary); font-family:var(--font-h); font-weight:900; }
.article .meta { font-family:var(--font-m); font-size:13px; letter-spacing:0.1em; color:var(--muted); margin-bottom:8px; text-transform:uppercase; }

/* Article-Block mit Pine-Tint-BG (für Highlights) */
.article-highlight { background:var(--pine-1); padding:48px; margin:48px 0; border-left:4px solid var(--primary); }
.article-highlight p { margin-bottom:0; }

/* Step-List für Methodik */
.step-list { display:flex; flex-direction:column; gap:0; margin:48px 0; }
.step-item { padding:48px 0; border-top:2px solid var(--text); display:grid; grid-template-columns:80px 1fr 2fr; gap:48px; align-items:start; }
.step-item:last-child { border-bottom:2px solid var(--text); }
.step-item .num { font-family:var(--font-m); font-weight:700; font-size:32px; color:var(--primary); }
.step-item h3 { font-size:clamp(24px,2.4vw,36px); color:var(--text); margin-top:0; }
.step-item h3 .italic-accent { color:var(--primary); }
.step-item p { font-family:var(--font-s); font-size:17px; line-height:1.6; color:var(--muted); margin-bottom:0; padding-top:8px; }

/* Contact Card */
.contact-card { background:var(--bg); border:2px solid var(--text); box-shadow:12px 12px 0 var(--text); padding:48px; margin:48px 0; max-width:640px; }
.contact-card h3 { font-size:clamp(28px,3vw,40px); margin-bottom:24px; }
.contact-card p { font-family:var(--font-s); font-size:18px; margin-bottom:8px; }
.contact-card a { color:var(--text); text-decoration:none; border-bottom:2px solid var(--primary); }
.contact-card a:hover { color:var(--primary); }
.contact-card .cta-mail { font-family:var(--font-h); font-weight:900; font-size:24px; margin-top:32px; display:inline-block; padding:16px 24px; background:var(--text); color:#fff; border:none; }
.contact-card .cta-mail:hover { background:var(--primary-darker); }

/* Legal Layout */
.legal { padding:96px 0 120px; }
.legal .container { max-width:840px; }
.legal h1 { font-size:clamp(40px,5vw,72px); margin-bottom:48px; color:var(--text); }
.legal h2 { font-size:clamp(24px,2.4vw,32px); margin-top:48px; margin-bottom:16px; color:var(--text); }
.legal h3 { font-family:var(--font-h); font-weight:700; font-size:18px; margin-top:24px; margin-bottom:8px; color:var(--text); }
.legal p, .legal li { font-family:var(--font-s); font-size:17px; line-height:1.7; color:var(--text); margin-bottom:16px; }
.legal ul { padding-left:24px; margin-bottom:24px; }
.legal a { color:var(--primary-deep); }
.legal .meta { font-family:var(--font-m); font-size:12px; color:var(--muted); margin-bottom:48px; letter-spacing:0.1em; text-transform:uppercase; }

/* 404 */
.fourofour { padding:160px 0; text-align:center; min-height:70vh; display:flex; align-items:center; }
.fourofour .container { max-width:720px; }
.fourofour .num { font-family:var(--font-h); font-weight:900; font-size:clamp(120px,20vw,280px); line-height:0.9; color:var(--primary); margin-bottom:24px; -webkit-text-stroke:0.35px; }
.fourofour h1 { font-size:clamp(40px,5vw,72px); margin-bottom:24px; }
.fourofour p { font-family:var(--font-s); font-size:20px; margin-bottom:48px; max-width:480px; margin-left:auto; margin-right:auto; }

/* === Inter-Override + Final-CTA Split-Cut === */

/* Body-Texts auf Inter (statt Source Serif Pro) */
.what-item p { font-family:var(--font-b); }
.big-number-block .caption { font-family:var(--font-b); font-style:normal; font-weight:600; }
.paket-row .desc { font-family:var(--font-b); }
.faq-item p { font-family:var(--font-b); }
.page-hero .lead { font-family:var(--font-b); font-size:clamp(18px,1.7vw,22px); }
.article p { font-family:var(--font-b); font-size:17px; }
.article ul { font-family:var(--font-b); font-size:17px; }
.step-item p { font-family:var(--font-b); }
.contact-card p { font-family:var(--font-b); }
.legal p, .legal li { font-family:var(--font-b); }
.fourofour p { font-family:var(--font-b); }

/* ============================================================
   Final-CTA Standard (Cream-BG, Pine-Dot-Grid)
   Genutzt von webdesign.html + content.html mit Sub-Klassen
   .final-cta-intro, .final-cta-featured, .final-cta-subpaths
   ============================================================ */
.final-cta {
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(16,180,84,0.16) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 0 0;
  background-repeat: repeat;
}
.final-cta::before { content: none; }
.final-cta::after { content: none; }
.final-cta .container { padding: 100px 0 140px; }
.final-cta h2 {
  font-size: clamp(56px, 8vw, 128px);
  margin-bottom: 50px;
  line-height: 1.0;
}
.final-cta p {
  font-family: var(--font-b); font-style: normal;
  font-size: 18px; font-weight: 500;
  max-width: 580px; margin: 0 auto 50px;
  line-height: 1.55; color: var(--text); text-align: center;
}

/* Split-H2 Diagonal-Cut (legacy fuer Pages die Klasse noch nutzen) */
.split-h2 {
  position: relative;
  display: inline-block;
  color: var(--text);
  -webkit-text-stroke: 0.5px var(--text);
}
.split-h2::before {
  content: attr(data-text);
  position: absolute; inset: 0;
  color: var(--primary);
  -webkit-text-stroke: 0.5px var(--primary);
  clip-path: polygon(0 0, 100% 0, 100% 65%, 55% 100%, 0 100%);
  pointer-events: none;
}

/* ============================================================
   Final-CTA Uniform (2026-05-14, Esteban-Direktive)
   Hero-Echo: cream BG mit schraegem Pine-Block plus Halftone rechts
   2-Spalten-Layout: Text links, CTA-Card rechts
   Genutzt von blog, kontakt, live, marketing-check Pages
   ============================================================ */
.final-cta-uniform {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.final-cta-uniform::before {
  content: '';
  position: absolute;
  top: -15%; right: -10%;
  width: 50%; height: 130%;
  background: var(--primary);
  transform: skewX(-12deg);
  transform-origin: top right;
}
.final-cta-uniform::after {
  content: '';
  position: absolute;
  top: -15%; right: -10%;
  width: 50%; height: 130%;
  background-image: radial-gradient(circle, var(--primary-darker) 2px, transparent 2px);
  background-size: 16px 16px;
  transform: skewX(-12deg);
  transform-origin: top right;
  opacity: 0.6;
}
.final-cta-uniform .container {
  position: relative;
  z-index: 2;
  padding: 110px 48px 130px;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
}
/* Wenn Bridge direkt vor Final-CTA: Spalt zu, sodass Pfeil-Animation
   visuell in die CTA reinfliesst (webdesign + content Pages). */
.wd-faq-bridge + .final-cta-uniform .container { padding-top: 56px; }

/* Linke Text-Spalte */
.final-cta-text { min-width: 0; }
.final-cta-text .eyebrow {
  font-family: var(--font-m); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--primary-deep); font-weight: 700;
  margin-bottom: 22px; display: inline-block;
}
.final-cta-text h2 {
  font-family: var(--font-h); font-weight: 900;
  font-size: clamp(44px, 6.5vw, 92px); line-height: 1.0;
  color: var(--text); margin-bottom: 22px; letter-spacing: -0.025em;
  -webkit-text-stroke: 0.4px;
}
.final-cta-text h2 .italic-accent {
  font-family: var(--font-s); font-style: italic; font-weight: 600;
  -webkit-text-stroke: 0;
  color: var(--primary);
}
.final-cta-text p {
  font-family: var(--font-b); font-size: 17px; font-weight: 500;
  max-width: 460px; margin: 0; color: var(--text);
  line-height: 1.55;
  text-align: left;
}

/* Rechte CTA-Card: schwarz mit Pine-Shadow */
.final-cta-side {
  background: var(--text);
  color: #fff;
  padding: 56px 44px;
  border: 2px solid var(--text);
  box-shadow: 12px 12px 0 var(--primary);
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}
.final-cta-promise {
  font-family: var(--font-m); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--primary);
  font-weight: 700;
}
.final-cta-promise-big {
  font-family: var(--font-h); font-weight: 900;
  font-size: 52px; line-height: 1.0;
  color: #fff;
  letter-spacing: -0.025em;
}
.final-cta-promise-big .italic-accent {
  color: var(--primary);
  font-family: var(--font-s); font-style: italic; font-weight: 600;
  -webkit-text-stroke: 0;
}
.final-cta-side .cta {
  background: var(--primary);
  color: var(--text);
  border: 2px solid var(--primary);
  font-family: var(--font-h); font-weight: 900;
  font-size: 19px;
  padding: 22px 30px;
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.final-cta-side .cta::after { content: ' →'; }
.final-cta-side .cta:hover {
  background: #fff;
  color: var(--text);
  border-color: #fff;
  transform: translateY(-2px);
}
.final-cta-promise-sub {
  font-family: var(--font-s); font-style: italic;
  font-size: 14px; color: rgba(255,255,255,0.6);
  text-align: center;
  margin-top: -6px;
}

@media (max-width: 768px) {
  .final-cta-uniform .container {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
    padding: 80px 20px 100px;
  }
  .wd-faq-bridge + .final-cta-uniform .container { padding-top: 28px; }
  .final-cta-text p { margin: 0 auto; max-width: 480px; text-align: center; }
  .final-cta-text h2 { font-size: clamp(36px, 8vw, 52px); }
  .final-cta-side { padding: 40px 28px; box-shadow: 8px 8px 0 var(--primary); gap: 20px; }
  .final-cta-promise-big { font-size: 40px; }
  .final-cta-side .cta { font-size: 17px; padding: 20px 24px; }
  .final-cta-uniform::before, .final-cta-uniform::after { width: 70%; right: -25%; }
}

/* Mobile */
@media (max-width:768px) {
  .container { padding:0 24px; }
  .hero { padding:28px 0 56px; }
  .hero::before {
    display:block;
    top:-5%; right:-12%; width:55%; height:55%;
    opacity:0.85;
  }
  .hero .halftone-overlay {
    display:block;
    top:-5%; right:-12%; width:55%; height:55%;
    background-image:radial-gradient(circle, var(--text) 2px, transparent 2px);
    background-size:16px 16px;
    opacity:0.55;
  }
  .hero::after { display:none; }
  .hero h1 { font-size:clamp(30px,8vw,52px); line-height:0.98; letter-spacing:-0.045em; }
  .hero h1 .stroke-line { -webkit-text-stroke-width:2px; }
  .hero h1 .line-2 .stroke-text { -webkit-text-stroke-width:2px; }
  .hero h1 .signal-box { margin-left:0.12em; box-shadow:5px 5px 0 var(--text); }
  .hero-sub-row { grid-template-columns:1fr; gap:20px; margin-top:24px; padding-top:20px; }
  .hero-tagline { font-size:clamp(22px,5.5vw,32px); align-self:start; }
  .hero-body-card { box-shadow:6px 6px 0 var(--text); padding:24px; max-width:none; }
  .what-item, .paket-row, .faq-item, .step-item { grid-template-columns:1fr; gap:24px; }
  /* Footer Mobile: Logo+Tag full-width oben, Kontakt + Navigation/Legal als 2 Spalten darunter */
  .site-footer .container { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .site-footer .container > div:first-child { grid-column: 1 / -1; }
  .site-footer { padding: 56px 0 32px; }
  .site-footer .footer-tag { font-size: clamp(28px, 7vw, 42px); margin-top: 18px; }
  .site-footer .footer-col h4 { margin-bottom: 14px; }
  .site-footer .footer-col p, .site-footer .footer-col a { font-size: 13px; line-height: 1.6; }
  /* Final-CTA Mobile: grünen Pseudo-Bereich aus, sonst grün-on-grün auf Texten */
  .final-cta-uniform::before, .final-cta-uniform::after { display: none; }
  /* Fliessband-Mobile-Cards plus -Speed: siehe Webdesign-Mobile-Block weiter unten */
  .what { padding:120px 0; }
  .pakete { padding:120px 0; }
  .faq { padding:120px 0; }
  .big-number-block .container { padding:120px 0; }
  .final-cta .container { padding:120px 0; }
  .nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:2px solid var(--text); flex-direction:column; align-items:stretch; padding:16px 24px 24px; gap:0; box-shadow:0 12px 24px rgba(10,10,10,0.08); }
  .nav.is-open { display:flex; }
  .nav a { font-size:16px; padding:16px 0; border-bottom:1px solid var(--border); letter-spacing:0.03em; }
  .nav a:last-child { border-bottom:none; }
  .nav .nav-cta { margin-top:12px; padding:16px 20px; background:var(--text); color:var(--primary) !important; text-align:center; border-bottom:none; }
  .nav-hamburger { display:flex; }
  .article { padding:64px 0; }
  .article h2 { margin-top:64px; }
  .contact-card { padding:32px; box-shadow:6px 6px 0 var(--text); }
  .legal { padding:64px 0 96px; }
}

/* ============================================================
   WEBDESIGN-PAGE PATTERN (Session #170)
   Fliessband-Hero + Live-Showcase + Method-Cards + Feature-Grid
   ============================================================ */

/* WD-Hero V6: 2-spaltig komplett, Animation parallel zum H1 */
.wd-hero { padding:48px 0 36px; position:relative; background:var(--bg); border-bottom:2px solid var(--text); overflow:hidden; }
.wd-hero::before { content:''; position:absolute; top:-20%; left:-15%; width:55%; height:80%; background:var(--primary); transform:skewX(-12deg); opacity:0.08; pointer-events:none; }
.wd-hero-grid { position:relative; z-index:2; max-width:1600px; margin:0 auto; padding:0 48px; display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:center; }
.wd-hero-left { display:flex; flex-direction:column; gap:28px; min-width:0; }
.wd-hero .meta-line { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.wd-hero .meta-line .eyebrow { color:var(--primary-deep); padding:8px 16px; background:var(--pine-1); border-radius:4px; }
.wd-hero .meta-line .mono-meta { font-family:var(--font-m); font-size:11px; color:var(--text); letter-spacing:0.15em; opacity:0.55; }
.wd-hero h1 { font-size:clamp(48px,7.5vw,128px); }
.wd-hero h1 .stroke-line { display:block; -webkit-text-stroke:3px var(--text); color:transparent; -webkit-text-fill-color:transparent; }
.wd-hero h1 .line-2 { display:block; padding-left:clamp(20px,3vw,52px); }
.wd-hero h1 .vorschau-box { display:inline-block; background:var(--primary); padding:0 0.16em; margin-left:0.18em; box-shadow:10px 10px 0 var(--text); line-height:0.92; vertical-align:baseline; }
.wd-hero h1 .vorschau-italic { font-family:var(--font-s); font-style:italic; font-weight:600; -webkit-text-stroke:0; color:#fff; letter-spacing:-0.02em; font-size:1.12em; line-height:0.92; display:inline-block; }
.wd-hero-divider { height:3px; background:var(--text); width:100%; }
.wd-hero-lead { font-family:var(--font-s); font-size:clamp(18px,1.4vw,22px); line-height:1.5; color:var(--text); }
.wd-hero-lead em { font-family:var(--font-s); font-style:italic; font-weight:600; color:var(--primary-deep); }
.wd-hero-right { display:flex; justify-content:center; align-items:center; }
.wd-hero-cta-card { background:var(--text); color:#fff; padding:32px 36px; border:2px solid var(--text); box-shadow:8px 8px 0 var(--primary); }
.wd-hero-cta-card h3 { font-family:var(--font-h); font-weight:900; font-size:clamp(28px,2.8vw,40px); line-height:1.05; letter-spacing:-0.02em; -webkit-text-stroke:0.35px; color:#fff; margin-bottom:14px; }
.wd-hero-cta-card h3 .italic-accent { color:var(--primary); font-family:var(--font-s); font-style:italic; font-weight:600; -webkit-text-stroke:0; }
.wd-hero-cta-card p { font-family:var(--font-b); font-size:15px; line-height:1.5; color:rgba(255,255,255,0.85); margin-bottom:20px; }
.wd-hero-cta-card .cta { background:var(--primary); color:#fff; padding:18px 28px; font-size:16px; font-family:var(--font-h); font-weight:700; transition:background-color 0.2s, transform 0.2s; }
.wd-hero-cta-card .cta:hover { background:var(--bg); color:var(--text); transform:translateY(-2px); }
.wd-hero-cta-card .cta-sub { font-family:var(--font-m); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--pine-2); margin-top:14px; margin-bottom:0; }

/* Hero-Picker-Animation V6: dauer-sichtbar, gezielter Pine-Glow, smoother Cursor */
.wd-hero-anim { background:var(--text); border:2px solid var(--text); box-shadow:10px 10px 0 var(--primary); padding:20px 20px 18px; position:relative; aspect-ratio:1/1.05; overflow:hidden; min-height:380px; }
.wd-hero-anim::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 25%, rgba(16,180,84,0.22), transparent 55%); pointer-events:none; }
.wd-hero-anim-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; position:relative; z-index:2; }
.wd-hero-anim-label { font-family:var(--font-m); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.55); display:flex; align-items:center; gap:8px; }
.wd-hero-anim-label::before { content:''; display:inline-block; width:7px; height:7px; background:var(--primary); border-radius:50%; box-shadow:0 0 10px var(--primary); animation:pulse-dot 1.6s ease-in-out infinite; }
.wd-hero-anim-time { font-family:var(--font-m); font-size:10px; letter-spacing:0.18em; color:rgba(255,255,255,0.4); }
.wd-hero-anim-stage { position:relative; height:calc(100% - 88px); display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; z-index:1; }
.wd-mock { position:relative; background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 6px 14px -6px rgba(0,0,0,0.45); transition:none; opacity:0.65; will-change:opacity, transform, box-shadow; }
.wd-mock-bar { background:rgba(0,0,0,0.07); height:14px; display:flex; align-items:center; padding:0 8px; gap:4px; }
.wd-mock-bar span { width:4px; height:4px; border-radius:50%; background:rgba(0,0,0,0.2); }
.wd-mock-body { padding:10px; display:flex; flex-direction:column; gap:6px; height:calc(100% - 14px); }
.wd-mock-line { height:5px; border-radius:2px; }
.wd-mock-line.short { width:50%; }
.wd-mock-line.med { width:75%; }
.wd-mock-line.tiny { width:30%; }
.wd-mock-block { flex:1; border-radius:3px; margin-top:6px; }
.wd-mock-cta { height:14px; width:55%; border-radius:2px; margin-top:4px; }

.wd-mock-1 .wd-mock-line { background:rgba(10,10,10,0.16); }
.wd-mock-1 .wd-mock-block { background:linear-gradient(135deg, var(--primary-tint) 0%, #fff 60%, var(--pine-2) 100%); }
.wd-mock-1 .wd-mock-cta { background:var(--primary); }

.wd-mock-2 { background:#1a1a1a; }
.wd-mock-2 .wd-mock-bar { background:rgba(255,255,255,0.06); }
.wd-mock-2 .wd-mock-bar span { background:rgba(255,255,255,0.3); }
.wd-mock-2 .wd-mock-line { background:rgba(255,255,255,0.3); }
.wd-mock-2 .wd-mock-block { background:linear-gradient(135deg, #2a2a2a, #0a0a0a 60%, var(--primary-deep) 100%); }
.wd-mock-2 .wd-mock-cta { background:var(--primary); }

.wd-mock-3 .wd-mock-line { background:rgba(10,10,10,0.16); }
.wd-mock-3 .wd-mock-block { background:linear-gradient(135deg, #f3eee5 0%, #fff 50%, #e8e1d3 100%); }
.wd-mock-3 .wd-mock-cta { background:var(--text); }

.wd-mock-react { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-weight:900; font-size:14px; opacity:0; transform:scale(0.5); }
.wd-mock-react.yes { background:var(--primary); color:#fff; box-shadow:0 0 16px rgba(16,180,84,0.7); }
.wd-mock-react.no { background:#ff5f57; color:#fff; box-shadow:0 0 12px rgba(255,95,87,0.5); }

.wd-mock-1 { animation:mock-pick 9s cubic-bezier(0.4,0,0.2,1) infinite; animation-delay:0s; }
.wd-mock-2 { animation:mock-pick 9s cubic-bezier(0.4,0,0.2,1) infinite; animation-delay:-6s; }
.wd-mock-3 { animation:mock-pick 9s cubic-bezier(0.4,0,0.2,1) infinite; animation-delay:-3s; }
@keyframes mock-pick {
  0%, 8% { opacity:0.65; transform:translateY(0); box-shadow:0 6px 14px -6px rgba(0,0,0,0.45); }
  14%, 28% { opacity:1; transform:translateY(-8px); box-shadow:0 18px 32px -10px rgba(16,180,84,0.6), 0 0 0 2px rgba(16,180,84,0.5); }
  34%, 100% { opacity:0.65; transform:translateY(0); box-shadow:0 6px 14px -6px rgba(0,0,0,0.45); }
}
.wd-mock-1 .wd-mock-react.yes { animation:react-pop 9s cubic-bezier(0.4,0,0.2,1) infinite; animation-delay:1.5s; }
.wd-mock-2 .wd-mock-react.no { animation:react-pop 9s cubic-bezier(0.4,0,0.2,1) infinite; animation-delay:7.5s; }
.wd-mock-3 .wd-mock-react.yes { animation:react-pop 9s cubic-bezier(0.4,0,0.2,1) infinite; animation-delay:4.5s; }
@keyframes react-pop {
  0%, 12% { opacity:0; transform:scale(0.5); }
  16%, 30% { opacity:1; transform:scale(1.05); }
  35%, 100% { opacity:0; transform:scale(0.5); }
}

.wd-cursor { position:absolute; width:20px; height:26px; z-index:5; pointer-events:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.6)); animation:cursor-path 9s cubic-bezier(0.65,0,0.35,1) infinite; left:18%; top:55%; }
.wd-cursor svg { width:100%; height:100%; }
@keyframes cursor-path {
  0% { left:84%; top:78%; }
  10% { left:18%; top:55%; }
  22% { left:18%; top:55%; }
  33% { left:50%; top:55%; }
  44% { left:50%; top:55%; }
  55% { left:50%; top:55%; }
  66% { left:84%; top:55%; }
  77% { left:84%; top:55%; }
  88% { left:84%; top:78%; }
  100% { left:84%; top:78%; }
}

.wd-hero-anim-caption { position:absolute; left:20px; right:20px; bottom:16px; font-family:var(--font-s); font-size:13px; line-height:1.4; color:rgba(255,255,255,0.85); padding-top:12px; border-top:1px solid rgba(255,255,255,0.14); display:flex; justify-content:space-between; align-items:baseline; gap:14px; z-index:3; }
.wd-hero-anim-caption strong { color:#fff; font-family:var(--font-h); font-weight:900; -webkit-text-stroke:0.2px; }
.wd-hero-anim-caption-sub { font-family:var(--font-m); font-size:10px; letter-spacing:0.15em; color:var(--primary); text-transform:uppercase; flex:0 0 auto; }

/* Fliessband-Banner V4: Fabrik-Conveyor mit Industrial-Markers + Stripes */
.flies-banner { padding:48px 0 0; background:var(--text); overflow:hidden; position:relative; }
.flies-banner::before { content:''; position:absolute; top:0; bottom:0; left:0; width:140px; background:linear-gradient(to right, var(--text) 30%, transparent); z-index:3; pointer-events:none; }
.flies-banner::after { content:''; position:absolute; top:0; bottom:0; right:0; width:140px; background:linear-gradient(to left, var(--text) 30%, transparent); z-index:3; pointer-events:none; }
.flies-meta { max-width:1600px; margin:0 auto 36px; padding:0 48px; display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.flies-meta-label { font-family:var(--font-m); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.5); display:flex; align-items:center; gap:12px; }
.flies-meta-label::before { content:''; display:inline-block; width:10px; height:10px; background:var(--primary); border-radius:50%; box-shadow:0 0 12px var(--primary); animation:pulse-dot 1.6s ease-in-out infinite; }
.flies-counter { display:flex; align-items:flex-end; gap:24px; font-family:var(--font-m); }
.flies-counter-cell { display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center; }
.flies-counter-cell strong { font-family:var(--font-h); font-weight:900; font-size:24px; color:#fff; -webkit-text-stroke:0.35px; line-height:1; letter-spacing:-0.02em; }
.flies-counter-cell strong .accent { color:var(--primary); }
.flies-counter-cell span { font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.4); }
@keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.7); } }
.flies-track-wrap { width:100%; overflow:hidden; padding:24px 0 20px; position:relative; }
.flies-track-wrap + .flies-track-wrap { padding:20px 0 32px; }
.flies-track { display:flex; gap:36px; width:max-content; will-change:transform; }
.flies-track.dir-left { animation:flies-scroll-left 60s linear infinite; }
.flies-track.dir-right { animation:flies-scroll-right 65s linear infinite; }
.flies-track:hover { animation-play-state:paused; }
@keyframes flies-scroll-left { 0% { transform:translateX(0); } 100% { transform:translateX(calc(-50% - 18px)); } }
@keyframes flies-scroll-right { 0% { transform:translateX(calc(-50% - 18px)); } 100% { transform:translateX(0); } }
.flies-card { animation:bob 4s ease-in-out infinite; }
.flies-card:nth-child(2n) { animation-delay:-1s; }
.flies-card:nth-child(3n) { animation-delay:-2s; }
.flies-card:nth-child(5n) { animation-delay:-3s; }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

/* Conveyor-Belt unter den Cards */
.flies-rail { position:relative; height:48px; background:#0a0a0a; border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); overflow:hidden; }
.flies-rail::before { content:''; position:absolute; top:50%; left:0; right:0; height:14px; transform:translateY(-50%); background:repeating-linear-gradient(45deg, var(--primary) 0 14px, transparent 14px 28px); opacity:0.4; animation:rail-scroll 1.2s linear infinite; will-change:background-position; }
@keyframes rail-scroll { 0% { background-position:0 0; } 100% { background-position:40px 0; } }
.flies-rail::after { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent); }
.flies-rail-marks { position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); display:flex; justify-content:space-around; pointer-events:none; z-index:1; }
.flies-rail-marks span { font-family:var(--font-m); font-size:9px; letter-spacing:0.2em; color:rgba(255,255,255,0.55); padding:4px 10px; background:#0a0a0a; border:1px solid rgba(255,255,255,0.12); }

/* Slot-Card "Hier könnte Ihre Site sein" */
.flies-card.is-slot .flies-device { background:transparent; border:2px dashed rgba(16,180,84,0.45); box-shadow:none; padding:8px 8px 0; }
.flies-card.is-slot:hover .flies-device { border-color:var(--primary); box-shadow:0 24px 48px -12px rgba(16,180,84,0.4); }
.flies-card.is-slot .flies-chrome .flies-url { background:rgba(16,180,84,0.12); color:var(--primary); }
.flies-card.is-slot .flies-body { background:linear-gradient(135deg, rgba(16,180,84,0.06), rgba(16,180,84,0.02)); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; padding:32px; text-align:center; }
.flies-card.is-slot .flies-body::before { content:''; position:absolute; inset:14px; border:1px dashed rgba(16,180,84,0.3); pointer-events:none; }
.flies-slot-title { font-family:var(--font-h); font-weight:900; font-size:22px; color:var(--primary); -webkit-text-stroke:0.35px; letter-spacing:-0.02em; line-height:1.15; position:relative; z-index:1; }
.flies-slot-sub { font-family:var(--font-m); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.55); position:relative; z-index:1; }
.flies-slot-arrow { font-family:var(--font-h); font-weight:900; font-size:32px; color:var(--primary); position:relative; z-index:1; transition:transform 0.3s; }
.flies-card.is-slot:hover .flies-slot-arrow { transform:translateX(8px); }

/* Section-Divider: Industrial-Marker zwischen Sektionen */
.section-divider { background:var(--text); padding:0; border-bottom:1px solid rgba(255,255,255,0.08); border-top:1px solid rgba(255,255,255,0.08); }
.section-divider .container { display:flex; justify-content:space-between; align-items:center; gap:32px; padding-top:18px; padding-bottom:18px; flex-wrap:wrap; }
.section-divider-tag { display:flex; align-items:center; gap:14px; font-family:var(--font-m); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.section-divider-tag::before { content:''; display:inline-block; width:32px; height:1px; background:var(--primary); }
.section-divider-tag strong { color:#fff; font-weight:700; -webkit-text-stroke:0.2px; }
.section-divider-stripes { flex:1; height:14px; background:repeating-linear-gradient(45deg, var(--primary) 0 8px, transparent 8px 16px); opacity:0.45; min-width:160px; max-width:520px; }
.section-divider-status { font-family:var(--font-m); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.4); display:flex; align-items:center; gap:8px; }
.section-divider-status::before { content:''; display:inline-block; width:7px; height:7px; background:var(--primary); border-radius:50%; }
.section-divider.bg-light { background:var(--bg); border-color:var(--border); }
.section-divider.bg-light .section-divider-tag { color:var(--muted); }
.section-divider.bg-light .section-divider-tag strong { color:var(--text); }
.section-divider.bg-light .section-divider-status { color:var(--muted); }

/* Fliessband-Card V3: Laptop-Device-Look mit klarer Frame-Site-Trennung */
.flies-card { flex:0 0 420px; text-decoration:none; color:#fff; display:flex; flex-direction:column; gap:14px; transition:transform 0.3s; }
.flies-card:hover { transform:translateY(-8px); }
.flies-device { background:#1a1a1a; border-radius:14px; padding:8px 8px 0; box-shadow:0 24px 48px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06); position:relative; transition:box-shadow 0.3s; }
.flies-card:hover .flies-device { box-shadow:0 32px 56px -12px rgba(16,180,84,0.35), 0 0 0 1px rgba(16,180,84,0.4); }
.flies-chrome { padding:10px 14px 12px; display:flex; align-items:center; gap:10px; }
.flies-dots { display:flex; gap:6px; flex:0 0 auto; }
.flies-dots span { width:10px; height:10px; border-radius:50%; }
.flies-dots span:nth-child(1) { background:#ff5f57; }
.flies-dots span:nth-child(2) { background:#febc2e; }
.flies-dots span:nth-child(3) { background:#28c940; }
.flies-url { font-family:var(--font-m); font-size:11px; color:rgba(255,255,255,0.55); letter-spacing:0.04em; flex:1; text-align:center; padding:5px 14px; background:rgba(255,255,255,0.07); border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flies-body { position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:#fff; border-radius:0 0 6px 6px; box-shadow:inset 0 1px 0 rgba(0,0,0,0.05); }
.flies-body iframe { position:absolute; top:0; left:0; width:1280px; height:800px; border:0; transform:scale(0.328); transform-origin:0 0; pointer-events:none; opacity:0; transition:opacity 0.4s; }
/* Touch-Pass-Through: alle inneren Card-Elemente lassen Touches zum <a> durch (iOS-Safari Tap-Hijack-Fix) */
.flies-card * { pointer-events: none; }
.flies-card { -webkit-tap-highlight-color: rgba(16,180,84,0.18); }
.flies-card.is-loaded .flies-body iframe { opacity:1; }
.flies-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--primary-tint) 0%, #fff 100%); color:var(--primary-deep); font-family:var(--font-h); font-weight:900; font-size:36px; letter-spacing:-0.02em; transition:opacity 0.4s; }
.flies-card.is-loaded .flies-fallback { opacity:0; }
.flies-foot { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:0 4px; }
.flies-foot strong { font-family:var(--font-h); font-weight:900; font-size:15px; color:#fff; letter-spacing:-0.01em; -webkit-text-stroke:0.35px; }
.flies-foot small { font-family:var(--font-m); font-size:10px; color:rgba(255,255,255,0.45); letter-spacing:0.12em; text-transform:uppercase; }

/* Live-Showcase-Sektion (3 grosse Cards) */
.showcase { padding:160px 0 120px; background:var(--bg); position:relative; }
.showcase .eyebrow { color:var(--primary-deep); }
.showcase h2 { font-size:clamp(48px,7vw,120px); margin-bottom:24px; }
.showcase h2 .italic-accent { color:var(--primary); }
.showcase-intro { font-family:var(--font-s); font-size:clamp(18px,1.4vw,22px); line-height:1.55; max-width:720px; color:var(--text); margin-bottom:80px; }
.showcase-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.showcase-card { display:block; text-decoration:none; color:var(--text); background:var(--bg); border:2px solid var(--text); transition:transform 0.25s, box-shadow 0.25s; box-shadow:8px 8px 0 var(--text); }
.showcase-card:hover { transform:translate(-4px,-4px); box-shadow:12px 12px 0 var(--primary); }
.showcase-card .flies-chrome { padding:12px 16px; }
.showcase-card .flies-body { aspect-ratio:16/11; }
.showcase-card .flies-body iframe { width:300%; height:300%; transform:scale(0.333); transform-origin:0 0; }
.showcase-card .flies-fallback { font-size:48px; }
.showcase-meta { padding:24px 28px; border-top:2px solid var(--text); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.showcase-meta-left h3 { font-family:var(--font-h); font-weight:900; font-size:24px; letter-spacing:-0.02em; line-height:1; margin-bottom:6px; -webkit-text-stroke:0.35px; }
.showcase-meta-left p { font-family:var(--font-s); font-size:14px; color:var(--muted); line-height:1.4; font-style:italic; font-weight:400; }
.showcase-arrow { font-family:var(--font-h); font-weight:900; font-size:32px; color:var(--text); transition:transform 0.2s, color 0.2s; }
.showcase-card:hover .showcase-arrow { color:var(--primary); transform:translateX(6px); }

/* Method-Grid (4 nummerierte Cards) */
.method { padding:160px 0; background:var(--text); color:var(--bg); position:relative; overflow:hidden; }
.method::before { content:''; position:absolute; top:0; right:-15%; width:50%; height:60%; background:var(--primary); transform:skewX(-12deg); opacity:0.1; }
.method::after { content:''; position:absolute; top:0; right:-15%; width:50%; height:60%; background-image:radial-gradient(circle, var(--primary) 1.5px, transparent 1.5px); background-size:18px 18px; transform:skewX(-12deg); opacity:0.3; }
.method .container { position:relative; z-index:1; }
.method .eyebrow { color:var(--primary); margin-bottom:32px; }
.method h2 { font-size:clamp(48px,7vw,120px); color:var(--bg); margin-bottom:24px; }
.method h2 .italic-accent { color:var(--primary); }
.method-intro { font-family:var(--font-s); font-size:clamp(18px,1.4vw,22px); line-height:1.55; max-width:720px; color:rgba(255,255,255,0.7); margin-bottom:80px; }
.method-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.method-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); padding:36px 28px; transition:background-color 0.2s, border-color 0.2s, transform 0.2s; }
.method-card:hover { background:rgba(16,180,84,0.12); border-color:var(--primary); transform:translateY(-4px); }
.method-num { font-family:var(--font-m); font-weight:700; font-size:14px; color:var(--primary); letter-spacing:0.18em; margin-bottom:32px; }
.method-card h3 { font-family:var(--font-h); font-weight:900; font-size:28px; line-height:1.05; letter-spacing:-0.02em; color:var(--bg); margin-bottom:20px; -webkit-text-stroke:0.35px; }
.method-card h3 .italic-accent { color:var(--primary); font-family:var(--font-s); font-style:italic; font-weight:600; -webkit-text-stroke:0; }
.method-card p { font-family:var(--font-s); font-size:15px; line-height:1.55; color:rgba(255,255,255,0.7); }

/* Feature-Bento V3: Big-Audit-Hero + 6 Mini-Cards Grid */
.features { padding:160px 0; background:var(--bg); position:relative; overflow:hidden; }
.features::before { content:''; position:absolute; top:0; right:-15%; width:40%; height:50%; background-image:radial-gradient(circle, var(--primary) 1.5px, transparent 1.5px); background-size:18px 18px; opacity:0.18; pointer-events:none; }
.features .container { position:relative; z-index:1; }
.features .eyebrow { color:var(--primary-deep); margin-bottom:32px; }
.features h2 { font-size:clamp(48px,7vw,120px); margin-bottom:24px; }
.features h2 .italic-accent { color:var(--primary); }
.features-intro { font-family:var(--font-s); font-size:clamp(18px,1.4vw,22px); line-height:1.55; max-width:720px; color:var(--text); margin-bottom:64px; }
.bento { display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; }
.bento-cell { background:#fff; border:1px solid var(--border); padding:32px 28px; transition:transform 0.25s, box-shadow 0.25s, border-color 0.25s; display:flex; flex-direction:column; gap:14px; position:relative; }
.bento-cell:hover { transform:translateY(-4px); box-shadow:8px 8px 0 var(--primary); border-color:var(--primary); }
.bento-cell .num { font-family:var(--font-m); font-size:11px; font-weight:700; letter-spacing:0.18em; color:var(--primary); }
.bento-cell h4 { font-family:var(--font-h); font-weight:900; font-size:22px; line-height:1.1; letter-spacing:-0.02em; -webkit-text-stroke:0.35px; }
.bento-cell h4 .italic-accent { color:var(--primary); }
.bento-cell p { font-family:var(--font-s); font-size:15px; line-height:1.55; color:var(--muted); }
.bento-cell.span-2 { grid-column:span 2; }
.bento-cell.span-3 { grid-column:span 3; }
.bento-cell.span-6 { grid-column:span 6; }
.bento-hero { background:var(--text); color:#fff; padding:56px; position:relative; overflow:hidden; border:none; box-shadow:none; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; }
.bento-hero::before { content:''; position:absolute; top:-20%; right:-10%; width:50%; height:140%; background:var(--primary); transform:skewX(-12deg); opacity:0.18; pointer-events:none; }
.bento-hero::after { content:''; position:absolute; top:-20%; right:-10%; width:50%; height:140%; background-image:radial-gradient(circle, var(--primary) 2px, transparent 2px); background-size:18px 18px; transform:skewX(-12deg); opacity:0.35; pointer-events:none; }
.bento-hero > * { position:relative; z-index:1; }
.bento-hero:hover { transform:translateY(-4px); box-shadow:none; border:none; }
.bento-hero-text { display:flex; flex-direction:column; gap:14px; }
.bento-hero .num { color:rgba(255,255,255,0.7); display:flex; align-items:center; gap:10px; }
.bento-hero .num::before { content:''; display:inline-block; width:8px; height:8px; background:var(--primary); border-radius:50%; box-shadow:0 0 10px var(--primary); }
.bento-hero h4 { font-size:clamp(28px,2.8vw,46px); color:#fff; }
.bento-hero h4 .italic-accent { color:var(--primary); }
.bento-hero p { font-size:16px; color:rgba(255,255,255,0.85); line-height:1.55; }
.bento-hero .audit-stats { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:14px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.18); }
.bento-hero .audit-stat { display:flex; flex-direction:column; gap:4px; }
.bento-hero .audit-stat strong { font-family:var(--font-h); font-weight:900; font-size:13px; color:#fff; -webkit-text-stroke:0.2px; }
.bento-hero .audit-stat span { font-family:var(--font-m); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:rgba(255,255,255,0.55); }

/* Audit-Preview-Mockup (rechts in Bento-Hero) */
.audit-preview { background:#fff; color:var(--text); border-radius:8px; box-shadow:0 24px 48px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); overflow:hidden; position:relative; }
.audit-preview::before { content:'GRATIS INKLUDIERT'; position:absolute; top:18px; right:-36px; transform:rotate(35deg); background:var(--primary); color:#fff; font-family:var(--font-m); font-size:9px; font-weight:700; letter-spacing:0.15em; padding:4px 36px; z-index:5; }
.audit-preview-bar { background:#f3f1ec; border-bottom:1px solid var(--border); padding:10px 14px; display:flex; align-items:center; gap:10px; }
.audit-preview-bar .dots { display:flex; gap:5px; }
.audit-preview-bar .dots span { width:8px; height:8px; border-radius:50%; }
.audit-preview-bar .dots span:nth-child(1) { background:#ff5f57; }
.audit-preview-bar .dots span:nth-child(2) { background:#febc2e; }
.audit-preview-bar .dots span:nth-child(3) { background:#28c940; }
.audit-preview-bar .label { font-family:var(--font-m); font-size:10px; color:var(--muted); letter-spacing:0.05em; flex:1; text-align:center; padding:3px 10px; background:#fff; border-radius:3px; }
.audit-preview-body { padding:24px 24px 22px; display:flex; flex-direction:column; gap:18px; }
.audit-preview-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.audit-preview-head h5 { font-family:var(--font-h); font-weight:900; font-size:15px; line-height:1.2; letter-spacing:-0.02em; -webkit-text-stroke:0.2px; }
.audit-preview-head h5 small { font-family:var(--font-m); font-size:9px; font-weight:500; letter-spacing:0.15em; color:var(--muted); display:block; margin-top:4px; }
.audit-preview-status { font-family:var(--font-m); font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:var(--primary-deep); padding:4px 8px; background:var(--primary-tint); border-radius:3px; flex:0 0 auto; }
.audit-preview-score { display:flex; align-items:center; gap:18px; padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.audit-preview-score-num { font-family:var(--font-h); font-weight:900; font-size:48px; line-height:1; letter-spacing:-0.04em; color:var(--text); -webkit-text-stroke:0.5px; }
.audit-preview-score-num span { color:var(--muted); font-size:24px; font-weight:400; }
.audit-preview-score-label { display:flex; flex-direction:column; gap:4px; flex:1; }
.audit-preview-score-label strong { font-family:var(--font-h); font-weight:900; font-size:11px; -webkit-text-stroke:0.2px; }
.audit-preview-score-label span { font-family:var(--font-m); font-size:9px; letter-spacing:0.15em; color:var(--muted); }
.audit-preview-bar-chart { display:flex; flex-direction:column; gap:9px; }
.audit-preview-row { display:grid; grid-template-columns:90px 1fr 32px; gap:10px; align-items:center; font-family:var(--font-m); font-size:10px; }
.audit-preview-row .lbl { color:var(--muted); letter-spacing:0.05em; }
.audit-preview-row .bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.audit-preview-row .bar i { display:block; height:100%; background:var(--primary); border-radius:3px; animation:bar-fill 2.5s ease-out forwards; transform-origin:left; transform:scaleX(0); }
.audit-preview-row .val { font-weight:700; color:var(--text); text-align:right; }
@keyframes bar-fill { to { transform:scaleX(var(--w, 0.7)); } }
.audit-preview-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--border); }
.audit-preview-foot strong { font-family:var(--font-h); font-weight:900; font-size:13px; }
.audit-preview-foot .pine { color:var(--primary-deep); }
.audit-preview-foot small { font-family:var(--font-m); font-size:9px; letter-spacing:0.15em; color:var(--muted); }

/* Paket-Card-Grid (3-Spalten statt Long-Row) */
.wd-pakete { padding:160px 0; background:var(--text); color:var(--bg); position:relative; overflow:hidden; }
.wd-pakete::before { content:''; position:absolute; top:0; left:-10%; width:50%; height:50%; background-image:radial-gradient(circle, var(--primary) 1.5px, transparent 1.5px); background-size:18px 18px; opacity:0.25; }
.wd-pakete .container { position:relative; z-index:1; }
.wd-pakete .eyebrow { color:var(--primary); margin-bottom:32px; }
.wd-pakete h2 { font-size:clamp(48px,7vw,120px); color:var(--bg); margin-bottom:24px; }
.wd-pakete h2 .italic-accent { color:var(--primary); }
.wd-pakete-intro { font-family:var(--font-s); font-size:clamp(18px,1.4vw,22px); line-height:1.55; max-width:720px; color:rgba(255,255,255,0.7); margin-bottom:80px; }
.wd-paket-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border:1px solid rgba(255,255,255,0.12); }
.wd-paket-card { background:transparent; padding:56px 40px; transition:transform 0.3s; display:flex; flex-direction:column; position:relative; border-right:1px solid rgba(255,255,255,0.12); }
.wd-paket-card:last-child { border-right:none; }
.wd-paket-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary); transform:scaleY(0); transform-origin:top; transition:transform 0.35s ease; }
.wd-paket-card:hover { transform:translateY(-4px); }
.wd-paket-card:hover::before { transform:scaleY(1); }
.wd-paket-card:hover .wd-paket-num { color:var(--bg); }
.wd-paket-num { font-family:var(--font-m); font-weight:700; font-size:13px; letter-spacing:0.18em; color:var(--primary); margin-bottom:48px; transition:color 0.3s; display:flex; align-items:center; gap:10px; }
.wd-paket-num::before { content:''; display:inline-block; width:24px; height:1px; background:var(--primary); }
.wd-paket-card h3 { font-family:var(--font-h); font-weight:900; font-size:42px; line-height:1.02; letter-spacing:-0.025em; color:var(--bg); margin-bottom:28px; -webkit-text-stroke:0.35px; }
.wd-paket-card h3 .italic-accent { color:var(--primary); font-family:var(--font-s); font-style:italic; font-weight:600; -webkit-text-stroke:0; }
.wd-paket-desc { font-family:var(--font-s); font-size:16px; line-height:1.55; color:rgba(255,255,255,0.6); margin-bottom:36px; }
.wd-paket-bullets { list-style:none; padding:0; flex:1; margin-bottom:32px; }
.wd-paket-bullets li { padding:13px 0 13px 24px; position:relative; font-family:var(--font-b); font-size:14px; line-height:1.5; color:rgba(255,255,255,0.82); transition:color 0.25s, transform 0.25s; }
.wd-paket-bullets li::before { content:''; position:absolute; left:0; top:20px; width:10px; height:1px; background:var(--primary); }
.wd-paket-card:hover .wd-paket-bullets li { color:#fff; }
.wd-paket-card:hover .wd-paket-bullets li:nth-child(1) { transform:translateX(4px); transition-delay:0.05s; }
.wd-paket-card:hover .wd-paket-bullets li:nth-child(2) { transform:translateX(4px); transition-delay:0.08s; }
.wd-paket-card:hover .wd-paket-bullets li:nth-child(3) { transform:translateX(4px); transition-delay:0.11s; }
.wd-paket-card:hover .wd-paket-bullets li:nth-child(4) { transform:translateX(4px); transition-delay:0.14s; }
.wd-paket-card:hover .wd-paket-bullets li:nth-child(5) { transform:translateX(4px); transition-delay:0.17s; }
.wd-paket-card:hover .wd-paket-bullets li:nth-child(6) { transform:translateX(4px); transition-delay:0.20s; }
.wd-paket-card:hover .wd-paket-bullets li:nth-child(7) { transform:translateX(4px); transition-delay:0.23s; }
.wd-paket-foot { font-family:var(--font-m); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.4); padding-top:24px; border-top:1px solid rgba(255,255,255,0.12); display:flex; justify-content:space-between; align-items:center; transition:color 0.3s, border-color 0.3s; }
.wd-paket-foot::after { content:'→'; font-family:var(--font-h); font-weight:900; font-size:20px; color:var(--primary); transform:translateX(0); transition:transform 0.3s; }
.wd-paket-card:hover .wd-paket-foot { color:var(--bg); border-color:var(--primary); }
.wd-paket-card:hover .wd-paket-foot::after { transform:translateX(8px); }

/* Final-CTA Cross-Sell-Variante (Webdesign-Page) */
.final-cta-cross-row { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; align-items:center; margin-top:8px; }
.final-cta-cross-row .cta { background:var(--text); color:#fff; }
.final-cta-cross-row .cta:hover { background:var(--primary); }
.final-cta-cross-row .cta-secondary { background:transparent; color:var(--text); border:2px solid var(--text); padding:22px 34px; }
.final-cta-cross-row .cta-secondary:hover { background:var(--text); color:#fff; }
.final-cta-cross-row .cta-secondary::after { content:'→'; }
.final-cta-cross-options { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:980px; margin:48px auto 32px; }
.final-cta-cross-card { background:rgba(255,255,255,0.9); border:1px solid var(--border); padding:24px 22px; text-align:left; text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:8px; transition:transform 0.25s, box-shadow 0.25s, border-color 0.25s; backdrop-filter:blur(4px); }
.final-cta-cross-card:hover { transform:translateY(-4px); box-shadow:6px 6px 0 var(--text); border-color:var(--text); }
.final-cta-cross-card .num { font-family:var(--font-m); font-size:11px; font-weight:700; letter-spacing:0.18em; color:var(--primary-deep); }
.final-cta-cross-card h3 { font-family:var(--font-h); font-weight:900; font-size:22px; line-height:1.1; letter-spacing:-0.02em; -webkit-text-stroke:0.35px; }
.final-cta-cross-card h3 .italic-accent { color:var(--primary); }
.final-cta-cross-card p { font-family:var(--font-s); font-size:14px; line-height:1.5; color:var(--muted); }
.final-cta-cross-card-foot { font-family:var(--font-m); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--primary-deep); margin-top:8px; display:flex; align-items:center; gap:8px; }
.final-cta-cross-card-foot::after { content:'→'; font-family:var(--font-h); font-weight:900; font-size:18px; transition:transform 0.2s; }
.final-cta-cross-card:hover .final-cta-cross-card-foot::after { transform:translateX(6px); }
@media (max-width:768px) {
  .final-cta-cross-options { grid-template-columns:1fr; gap:12px; margin:32px auto 24px; }
}

/* WD-FAQ V3: 2-Spalten-Grid, Numbered, Pine-Akzent, Hover-Lift */
.wd-faq { padding:160px 0; background:var(--bg); position:relative; }
.wd-faq .eyebrow { color:var(--primary-deep); margin-bottom:32px; }
.wd-faq h2 { font-size:clamp(48px,7vw,120px); margin-bottom:64px; }
.wd-faq h2 .italic-accent { color:var(--primary); }
.wd-faq-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }
.wd-faq-item { background:#fff; border:1px solid var(--border); padding:36px 36px 32px; position:relative; transition:transform 0.25s, box-shadow 0.25s, border-color 0.25s; display:flex; flex-direction:column; gap:18px; }
.wd-faq-item:hover { transform:translateY(-4px); box-shadow:8px 8px 0 var(--primary); border-color:var(--primary); }
.wd-faq-num { font-family:var(--font-m); font-weight:700; font-size:11px; letter-spacing:0.18em; color:var(--primary); display:flex; align-items:center; gap:10px; }
.wd-faq-num::before { content:''; display:inline-block; width:24px; height:1px; background:var(--primary); }
.wd-faq-item h3 { font-family:var(--font-h); font-weight:900; font-size:clamp(20px,1.8vw,26px); line-height:1.2; letter-spacing:-0.02em; -webkit-text-stroke:0.35px; }
.wd-faq-item h3 .italic-accent { color:var(--primary); }
.wd-faq-item p { font-family:var(--font-s); font-size:16px; line-height:1.6; color:var(--muted); }

/* Mobile */
@media (max-width:1024px) {
  .wd-hero-grid { grid-template-columns:1fr; gap:36px; }
  .wd-hero-right { position:static; max-width:560px; }
  .wd-hero h1 { font-size:clamp(54px,9vw,120px); }
  .method-grid { grid-template-columns:repeat(2, 1fr); }
  .wd-paket-grid { grid-template-columns:1fr; border:1px solid rgba(255,255,255,0.12); }
  .wd-paket-card { border-right:none; border-bottom:1px solid rgba(255,255,255,0.12); }
  .wd-paket-card:last-child { border-bottom:none; }
  .bento { grid-template-columns:repeat(2, 1fr); }
  .bento-cell.span-2 { grid-column:span 1; }
  .bento-cell.span-3 { grid-column:span 2; }
  .bento-cell.span-6 { grid-column:span 2; }
  .bento-hero .audit-stats { grid-template-columns:repeat(2, 1fr); }
  .wd-faq-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .wd-hero { padding:32px 0 24px; }
  .wd-hero-grid { padding:0 24px; gap:28px; }
  .wd-hero-left { gap:22px; }
  .wd-hero h1 { font-size:clamp(44px,12vw,72px); }
  .wd-hero h1 .line-2 { padding-left:0; }
  .wd-hero h1 .vorschau-box { box-shadow:5px 5px 0 var(--text); margin-left:0.1em; }
  .wd-hero-cta-card { box-shadow:5px 5px 0 var(--primary); padding:24px; }
  .wd-hero-cta-card h3 { font-size:24px; }
  .wd-hero-anim { box-shadow:6px 6px 0 var(--primary); padding:14px 14px 12px; aspect-ratio:1.2/1; min-height:280px; }
  .wd-hero-anim-stage { gap:8px; }
  .wd-hero-anim-caption { font-size:12px; left:14px; right:14px; bottom:12px; flex-direction:column; gap:4px; align-items:flex-start; }
  .wd-hero-anim-caption-sub { font-size:9px; }
  .wd-mock-cta { height:10px; }
  .wd-mock-line { height:4px; }
  .meta-line { gap:12px; }
  .flies-banner { padding:32px 0 0; }
  .flies-meta { padding:0 24px; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:24px; }
  .flies-counter { gap:14px; flex-wrap:wrap; }
  .flies-counter-cell strong { font-size:16px; }
  .flies-counter-cell span { font-size:9px; }
  .flies-card { flex:0 0 170px; }
  .flies-track { gap:16px; }
  .flies-track.dir-left { animation-duration: 38s; }
  .flies-track.dir-right { animation-duration: 44s; }
  .flies-body iframe { transform: scale(0.133); }
  .flies-fallback .fb-wordmark { font-size: 26px; }
  .flies-fallback .fb-tagline { font-size: 8px; }
  .flies-device { padding:4px 4px 0; }
  .flies-chrome { padding:6px 8px 7px; }
  .flies-url { font-size:9px; padding:3px 8px; }
  .flies-foot strong { font-size:12px; }
  .flies-foot small { font-size:8px; }
  .flies-track-wrap { padding:18px 0 14px; }
  .flies-track-wrap + .flies-track-wrap { padding:14px 0 24px; }
  .flies-rail { height:32px; }
  .flies-rail-marks span { font-size:8px; padding:3px 8px; }
  .flies-slot-title { font-size:15px; }
  .flies-card.is-slot .flies-body { padding:18px 12px; }
  .flies-slot-arrow { font-size:24px; }
  .section-divider .container { flex-direction:column; align-items:flex-start; gap:12px; padding-top:14px; padding-bottom:14px; }
  .section-divider-tag { font-size:10px; gap:10px; }
  .section-divider-tag::before { width:20px; }
  .section-divider-stripes { width:100%; max-width:none; height:8px; }
  .section-divider-status { font-size:9px; }
  .method { padding:80px 0; }
  .method h2 { font-size:48px; }
  .method-intro { font-size:16px; margin-bottom:48px; }
  .method-grid { grid-template-columns:1fr; gap:14px; }
  .method-card { padding:28px 24px; }
  .method-card h3 { font-size:24px; }
  .features { padding:80px 0; }
  .features h2 { font-size:48px; }
  .features-intro { font-size:16px; margin-bottom:40px; }
  .bento { grid-template-columns:1fr; gap:12px; }
  .bento-cell.span-2, .bento-cell.span-3, .bento-cell.span-6 { grid-column:span 1; }
  .bento-cell { padding:22px; }
  .bento-cell h4 { font-size:20px; }
  .bento-hero { padding:28px 24px; grid-template-columns:1fr; gap:28px; }
  .bento-hero h4 { font-size:26px; }
  .bento-hero p { font-size:15px; }
  .bento-hero .audit-stats { grid-template-columns:repeat(2, 1fr); gap:14px; padding-top:18px; margin-top:10px; }
  .bento-hero .audit-stat strong { font-size:12px; }
  .bento-hero .audit-stat span { font-size:9px; }
  .audit-preview-body { padding:18px; gap:14px; }
  .audit-preview-score-num { font-size:36px; }
  .audit-preview-row { grid-template-columns:80px 1fr 28px; }
  .wd-pakete { padding:80px 0; }
  .wd-pakete h2 { font-size:48px; }
  .wd-pakete-intro { font-size:16px; margin-bottom:48px; }
  .wd-paket-card { padding:36px 24px; }
  .wd-paket-card h3 { font-size:32px; }
  .wd-paket-card .wd-paket-num { margin-bottom:32px; }
  .wd-faq { padding:80px 0; }
  .wd-faq h2 { font-size:48px; margin-bottom:40px; }
  .wd-faq-item { padding:26px 22px; }
  .wd-faq-item h3 { font-size:18px; }
  .wd-faq-item p { font-size:15px; }
}
@media (max-width:480px) {
  .wd-hero { padding:24px 0 20px; }
  .wd-hero h1 { font-size:48px; }
  .meta-line .mono-meta { font-size:9px; }
  /* Fliessband Phone-Mobile: Cards kompakt, Track schneller, Iframe-Scale phone-spezifisch */
  .flies-card { flex:0 0 150px; }
  .flies-track { gap:12px; }
  .flies-track.dir-left { animation-duration: 40s; }
  .flies-track.dir-right { animation-duration: 46s; }
  .flies-body iframe { transform: scale(0.117); }
  .flies-fallback .fb-wordmark { font-size: 22px; }
  .flies-fallback .fb-tagline { font-size: 7px; }
  .flies-track-wrap { padding:14px 0; }
  .flies-banner::before, .flies-banner::after { width:50px; }
  .flies-rail { display:block; height:30px; }
  .flies-rail-marks { padding:0 16px; justify-content:space-around; }
  .flies-rail-marks span { font-size:7px; padding:2px 6px; }
  .flies-rail-marks span:not(:nth-child(3)):not(:nth-child(6)) { display:none; }
  /* Card Innen-Visual sehr klein für 95px Width */
  .flies-device { padding:3px 3px 0; }
  .flies-chrome { padding:4px 5px 5px; gap:3px; }
  .flies-chrome .flies-dots span { width:3px; height:3px; }
  .flies-url { font-size:7px; padding:1px 4px; letter-spacing:0; }
  .flies-foot { padding:0 2px; gap:4px; }
  .flies-foot strong { font-size:9px; }
  .flies-foot small { font-size:6px; letter-spacing:0.05em; }
  .flies-fallback { font-size:18px; }
  /* Slot-Cards: aspect-ratio matched Iframe-Cards für einheitliche Höhe */
  .flies-card.is-slot .flies-body { aspect-ratio:16/10; padding:6px 4px; gap:3px; flex-direction:column; align-items:center; justify-content:center; }
  .flies-card.is-slot .flies-body::before { inset:4px; }
  .flies-slot-title { font-size:9px; line-height:1.1; }
  .flies-slot-sub { font-size:6px; }
  .flies-slot-arrow { font-size:14px; }
  .flies-counter { gap:10px; }
  .flies-counter-cell { min-width:74px; }
  .flies-chrome { padding:5px 6px 6px; }
  .flies-chrome .flies-dots span { width:3px; height:3px; }
  .flies-url { font-size:8px; padding:2px 6px; letter-spacing:0; }
  .flies-foot { padding:0 2px; gap:6px; }
  .flies-foot strong { font-size:10px; }
  .flies-foot small { font-size:7px; }
  .flies-fallback { font-size:22px; }
  .flies-slot-title { font-size:12px; line-height:1.2; }
  .flies-slot-sub { font-size:8px; }
  .flies-slot-arrow { font-size:20px; }
  .flies-card.is-slot .flies-body { padding:14px 8px; gap:8px; }
  .flies-card.is-slot .flies-body::before { inset:8px; }
}

/* HERO-CTA-SECONDARY-LINK: dezenter Sekundär-Pfad zu webdesign.html aus Index-Hero */
.hero-cta-secondary-link {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--text);
  padding: 4px 0 3px;
  margin-top: 4px;
  align-self: flex-start;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.hero-cta-secondary-link:hover {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateX(3px);
}

/* WD-OPERATOR · Esteban-Voll-Modul auf webdesign.html (STATION 05 WER) */
.wd-operator { padding: 110px 0; background: var(--bg); position: relative; }
.wd-operator .container { max-width: 1180px; }
.wd-operator-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 70px;
  align-items: start;
}
.wd-operator-photo {
  position: relative;
  aspect-ratio: 4/5;
  background:
    radial-gradient(circle at 50% 30%, rgba(124, 212, 160, 0.20) 0%, transparent 55%),
    linear-gradient(180deg, #1a5d4a 0%, #061410 100%);
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--text);
  border: 2px solid var(--text);
}
.wd-operator-photo img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom;
  display: block;
}
.wd-operator-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 40%);
  pointer-events: none;
  z-index: 1;
}
.wd-operator-photo-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(8, 44, 31, 0.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(124, 212, 160, 0.45);
  padding: 6px 12px;
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pine-2);
  z-index: 3;
}
.wd-operator-text .eyebrow { color: var(--primary); margin-bottom: 14px; display: block; }
.wd-operator-text h2 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(38px, 5.5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
}
.wd-operator-text h2 .italic-accent {
  font-family: var(--font-s);
  font-style: italic;
  font-weight: 600;
  color: var(--primary);
}
.wd-operator-lead {
  font-family: var(--font-s);
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.45;
  color: var(--text);
  padding: 24px 28px;
  background: rgba(16, 180, 84, 0.06);
  border-left: 3px solid var(--primary);
  margin: 0 0 40px;
}
.wd-operator-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.wd-operator-body p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
  padding-left: 56px;
  position: relative;
  margin: 0;
}
.wd-operator-num {
  position: absolute;
  left: 0;
  top: 4px;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--primary);
  font-weight: 500;
}
.wd-operator-body p::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 24px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--primary) 0%, transparent 100%);
  opacity: 0.35;
}
.wd-operator-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 40px;
}
.wd-operator-contact-card {
  padding: 18px 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.25s ease, background 0.2s, border-color 0.2s;
}
.wd-operator-contact-card:hover {
  transform: translateX(6px);
  background: rgba(16, 180, 84, 0.05);
  border-color: var(--primary);
}
.wd-operator-contact-card .lbl {
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
}
.wd-operator-contact-card .val {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.005em;
}
@media (max-width: 880px) {
  .wd-operator { padding: 70px 0; }
  .wd-operator-grid { grid-template-columns: 1fr; gap: 36px; }
  .wd-operator-photo { width: 280px; max-width: 100%; }
  .wd-operator-contact { grid-template-columns: 1fr; }
}

/* WD-HERO-V7 · Variant A: 1 Browser-Mock statt 3-Mock-Picker-Anim */
.wd-hero-anim-v7 .wd-hero-anim-stage.wd-hero-anim-single {
  display: block;
  height: auto;
  max-height: 245px;
  margin-bottom: 0;
}
.wd-mock-single {
  height: 245px;
  opacity: 1;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
}
.wd-mock-single .wd-mock-bar {
  position: relative;
  height: 18px;
  flex-shrink: 0;
}
.wd-mock-single .wd-mock-bar > span:not(.wd-mock-url) {
  width: 5px;
  height: 5px;
}
.wd-mock-url {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.5);
  background: rgba(255,255,255,0.7);
  padding: 2px 12px;
  border-radius: 3px;
  width: auto;
  white-space: nowrap;
}
.wd-mock-single .wd-mock-body {
  flex: 1;
  height: auto;
}
.wd-mock-single .wd-mock-line { background: rgba(10,10,10,0.16); }
.wd-mock-single .wd-mock-block {
  background: linear-gradient(135deg, rgba(16,180,84,0.10) 0%, #fff 60%, rgba(124,212,160,0.20) 100%);
}
.wd-mock-single .wd-mock-cta { background: var(--primary); }

.wd-iter-log {
  position: relative;
  z-index: 2;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.wd-iter-row {
  display: grid;
  grid-template-columns: 64px 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.3s, background 0.3s;
}
.wd-iter-row:last-child { border-bottom: none; }
.wd-iter-num {
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.wd-iter-time {
  font-family: var(--font-m);
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  letter-spacing: 0.05em;
}
.wd-iter-state {
  font-family: var(--font-b);
  font-size: 11px;
  color: rgba(255,255,255,0.72);
  font-weight: 400;
}
.wd-iter-row.is-active {
  background: rgba(16,180,84,0.12);
  margin: 0 -8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(16,180,84,0.35);
}
.wd-iter-row.is-active .wd-iter-num {
  color: var(--primary);
  text-shadow: 0 0 10px rgba(16,180,84,0.6);
}
.wd-iter-row.is-active .wd-iter-time {
  color: rgba(255,255,255,0.55);
}
.wd-iter-row.is-active .wd-iter-state {
  color: #fff;
  font-weight: 500;
}

@media (max-width: 880px) {
  .wd-hero-anim-v7 .wd-hero-anim-stage.wd-hero-anim-single { max-height: 180px; }
  .wd-mock-single { height: 180px; }
}

/* WD-MOCK-DEMO · Station 02 Stand-in-24h Sektion (Esteban-Direktive 2026-05-10) */
.wd-mock-demo {
  padding: 110px 0;
  background: var(--bg);
  position: relative;
}
.wd-mock-demo .container { max-width: 1200px; }
.wd-mock-demo-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.wd-mock-demo-text .eyebrow { color: var(--primary); margin-bottom: 14px; display: block; }
.wd-mock-demo-text h2 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(38px, 5.5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
}
.wd-mock-demo-text h2 .italic-accent {
  font-family: var(--font-s);
  font-style: italic;
  font-weight: 600;
  color: var(--primary);
}
.wd-mock-demo-lead {
  font-family: var(--font-s);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 36px;
}
.wd-mock-demo-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.wd-mock-demo-timeline li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.wd-mock-demo-time {
  font-family: var(--font-m);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--primary);
  font-weight: 500;
}
.wd-mock-demo-state {
  font-family: var(--font-b);
  font-size: 15px;
  color: var(--text);
  line-height: 1.4;
}
.wd-mock-demo-state strong {
  font-family: var(--font-h);
  font-weight: 900;
  -webkit-text-stroke: 0.2px;
}
.wd-mock-demo-timeline li.is-active {
  background: rgba(16, 180, 84, 0.08);
  margin: 0 -16px;
  padding: 16px;
  border-bottom-color: var(--primary);
}
.wd-mock-demo-timeline li.is-active .wd-mock-demo-time {
  color: var(--primary);
  font-weight: 700;
}

.wd-mock-demo-visual {
  position: relative;
}
.wd-mock-demo-browser {
  background: #1a1a1a;
  border-radius: 14px;
  padding: 10px 10px 0;
  box-shadow:
    0 30px 60px -12px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
  transform: rotate(-1deg);
  transition: transform 0.4s ease;
}
.wd-mock-demo-browser:hover { transform: rotate(0deg) translateY(-4px); }
.wd-mock-demo-browser::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -30px;
  right: -30px;
  bottom: -22px;
  background: radial-gradient(ellipse at 50% 50%, rgba(16,180,84,0.18), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.wd-mock-demo-bar {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
}
.wd-mock-demo-bar > span:not(.wd-mock-demo-url) {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.wd-mock-demo-url {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
  padding: 3px 14px;
  border-radius: 4px;
  white-space: nowrap;
}
.wd-mock-demo-body {
  background: #fff;
  padding: 22px 22px 28px;
  border-radius: 0 0 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 380px;
}
.wd-mock-demo-line {
  height: 8px;
  border-radius: 3px;
  background: rgba(10,10,10,0.16);
}
.wd-mock-demo-line.short { width: 45%; }
.wd-mock-demo-line.med { width: 75%; }
.wd-mock-demo-line.tiny { width: 30%; margin-top: 12px; }
.wd-mock-demo-block {
  flex: 1;
  min-height: 100px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(16,180,84,0.10) 0%, #fff 60%, rgba(124,212,160,0.20) 100%);
  margin: 8px 0;
}
.wd-mock-demo-cta {
  height: 24px;
  width: 38%;
  border-radius: 4px;
  background: var(--primary);
  margin-top: 8px;
}

@media (max-width: 880px) {
  .wd-mock-demo { padding: 70px 0; }
  .wd-mock-demo-grid { grid-template-columns: 1fr; gap: 50px; }
  .wd-mock-demo-browser { transform: rotate(0deg); max-width: 480px; margin: 0 auto; }
  .wd-mock-demo-body { min-height: 340px; }
}

/* WD-FAQ-BRIDGE · Knick-Pfeil von FAQ-06 (rechts) zur Bridge-Headline plus Bouncing-Tip-Cue */
/* Bridge-Block (webdesign + content): Uebergang zu Final-CTA-Uniform.
   Refactor 2026-05-14: BG bleibt cream (Final-CTA ist auch cream),
   Knick-Animation kompakter, Banner-Frame als Question-CTA prominenter. */
.wd-faq-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 24px 16px;
  margin-top: -110px;
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 5;
  text-align: center;
  transition: background 0.3s ease;
}

.wd-faq-bridge-knick {
  color: var(--primary);
  filter: drop-shadow(0 2px 8px rgba(16,180,84,0.25));
  margin: 0 auto;
}
.wd-faq-bridge-knick-desktop {
  width: 100%;
  max-width: 1280px;
  height: 130px;
  display: block;
}
.wd-faq-bridge-knick-mobile {
  display: none;
  width: 4px;
  height: 48px;
}
.wd-faq-bridge-knick-desktop .wd-faq-bridge-knick-path {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}
.wd-faq-bridge.is-visible .wd-faq-bridge-knick-desktop .wd-faq-bridge-knick-path {
  animation: wdBridgeKnickDraw 1.6s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

.wd-faq-bridge-text {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 680px;
  margin: 8px auto 0;
  transition: color 0.3s ease;
  -webkit-text-stroke: 0.35px;
}
.wd-faq-bridge-text em {
  font-family: var(--font-s);
  font-style: italic;
  font-weight: 600;
  color: var(--primary);
  -webkit-text-stroke: 0;
}

.wd-faq-bridge-cascade {
  width: 60px;
  height: 92px;
  color: var(--primary);
  margin-top: 14px;
  filter: drop-shadow(0 6px 14px rgba(16,180,84,0.45));
}
.wd-faq-bridge-cascade .cascade-chev {
  opacity: 0;
  transform: translateY(-6px);
  transform-origin: 30px 50%;
}
.wd-faq-bridge.is-visible .wd-faq-bridge-cascade .cascade-chev {
  animation: wdCascadeChev 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.wd-faq-bridge.is-visible .wd-faq-bridge-cascade .cascade-chev-1 { animation-delay: 1.30s; }
.wd-faq-bridge.is-visible .wd-faq-bridge-cascade .cascade-chev-2 { animation-delay: 1.55s; }
.wd-faq-bridge.is-visible .wd-faq-bridge-cascade .cascade-chev-3 { animation-delay: 1.80s; }

@keyframes wdBridgeKnickDraw {
  0%   { stroke-dashoffset: 700; }
  100% { stroke-dashoffset: 0; }
}
@keyframes wdCascadeChev {
  0%   { opacity: 0;    transform: translateY(-6px); }
  100% { opacity: 0.95; transform: translateY(0); }
}

@media (max-width: 880px) {
  .wd-faq-bridge { padding: 0 22px 12px; margin-top: -60px; gap: 10px; }
  .wd-faq-bridge-knick-desktop { display: none; }
  .wd-faq-bridge-knick-mobile { display: block; }
  .wd-faq-bridge-cascade { width: 48px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-faq-bridge-knick-path { stroke-dashoffset: 0; animation: none; }
  .wd-faq-bridge-cascade .cascade-chev { opacity: 0.9; transform: translateY(0); animation: none; }
}

/* WD-MOCK-DEMO Browser-Body Realismus: Header-Nav + Hero + 3-Card-Grid */
.wd-mock-demo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  margin-bottom: 18px;
}
.wd-mock-demo-logo {
  width: 64px;
  height: 14px;
  background: linear-gradient(90deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.55) 100%);
  border-radius: 2px;
}
.wd-mock-demo-nav {
  display: flex;
  gap: 12px;
}
.wd-mock-demo-nav span {
  width: 30px;
  height: 6px;
  background: rgba(10,10,10,0.22);
  border-radius: 1px;
}
.wd-mock-demo-nav span:last-child {
  background: var(--primary);
  width: 36px;
  height: 14px;
  border-radius: 2px;
}
.wd-mock-demo-hero {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
}
.wd-mock-demo-line.headline {
  height: 14px;
  width: 78%;
  background: rgba(10,10,10,0.78);
  border-radius: 3px;
}
.wd-mock-demo-line.headline-2 {
  height: 14px;
  width: 58%;
  background: rgba(10,10,10,0.78);
  border-radius: 3px;
}
.wd-mock-demo-line.sub {
  height: 7px;
  width: 70%;
  background: rgba(10,10,10,0.25);
  border-radius: 2px;
  margin-top: 6px;
}
.wd-mock-demo-cta-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.wd-mock-demo-cta {
  height: 22px;
  width: 88px;
  border-radius: 3px;
  background: var(--primary);
  margin-top: 0;
}
.wd-mock-demo-cta-ghost {
  height: 22px;
  width: 70px;
  border-radius: 3px;
  background: transparent;
  border: 1.5px solid rgba(10,10,10,0.55);
}
.wd-mock-demo-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.wd-mock-demo-card {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, rgba(16,180,84,0.10) 0%, rgba(124,212,160,0.06) 100%);
  border: 1px solid rgba(16,180,84,0.18);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.wd-mock-demo-card::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  height: 4px;
  background: rgba(10,10,10,0.18);
  border-radius: 1px;
}
.wd-mock-demo-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(10,10,10,0.06) 0%, rgba(10,10,10,0.02) 100%);
  border-color: rgba(10,10,10,0.12);
}

/* Audit-Bento Seonar-Inline-Link (Origin-Story-Anker) */
.audit-seonar-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1.5px solid var(--primary);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.audit-seonar-link:hover {
  color: var(--text);
  border-color: var(--text);
}

/* Audit-Bento Seonar-CTA-Row plus Mini-Audit-Button */
.audit-seonar-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.audit-seonar-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: 4px;
  border: 1.5px solid var(--primary);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.audit-seonar-cta:hover {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16,180,84,0.35);
}
.audit-seonar-cta-note {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* Audit-Preview Seonar-Brand-Bar (ersetzt Browser-Chrome auf webdesign Bento) */
.audit-preview-bar--seonar {
  background: #0E1410;
  border-bottom: 1px solid #2a3530;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.audit-preview-bar--seonar .audit-preview-wordmark-svg {
  height: 20px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.audit-preview-bar--seonar .audit-preview-tag {
  font-family: var(--font-m);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(16,180,84,0.15);
  padding: 4px 10px;
  border-radius: 3px;
}

@media (max-width: 720px) {
  .audit-seonar-cta-row {
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
  }
  .audit-seonar-cta {
    padding: 12px 18px;
    font-size: 13px;
  }
  .audit-seonar-cta-note {
    font-size: 10px;
  }
  .audit-preview-bar--seonar {
    padding: 12px 14px;
  }
  .audit-preview-bar--seonar .audit-preview-wordmark-svg {
    height: 17px;
  }
  .audit-preview-bar--seonar .audit-preview-tag {
    font-size: 8px;
    padding: 3px 8px;
  }
}

/* ============================================================================
   INKLUDIERT-SECTION · 5-Bausteine-Layout (Bento ohne Hero)
   Ersetzt das 6-Col-Bento mit gleichberechtigten 5 Cells in einer Reihe.
   Eigener Modifier .bento--includes für die Inkludiert-Section auf webdesign.html.
   ============================================================================ */
.bento--includes {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.bento--includes .bento-cell {
  padding: 32px 22px;
  grid-column: auto;
}
.bento--includes .bento-cell .num {
  font-family: var(--font-h);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--primary);
  -webkit-text-stroke: 0.3px var(--primary);
  margin-bottom: 4px;
}
.bento--includes .bento-cell h4 {
  font-size: 20px;
}
.bento--includes .bento-cell p {
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .bento--includes {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .bento--includes .bento-cell { grid-column: auto; }
}
@media (max-width: 700px) {
  .bento--includes {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bento--includes .bento-cell {
    padding: 22px 20px;
  }
}

/* ============================================================================
   STATION 04 · INKLUDIERT — Dark-Variante (Esteban-Direktive #243: schwarz =
   solide Bausteine). Dunkel analog .wd-bonus; eigene Textur via .features::before
   Dot-Grid (Pine-Glow), damit Station 04 und 05 trotz beider Dunkelheit
   unterscheidbar bleiben.
   ============================================================================ */
.features--dark { background:var(--text); color:#fff; }
.features--dark .eyebrow { color:var(--primary); }
.features--dark h2 { color:#fff; }
.features--dark .features-intro { color:rgba(255,255,255,0.78); }
.features--dark .bento-cell { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.14); }
.features--dark .bento-cell h4 { color:#fff; }
.features--dark .bento-cell p { color:rgba(255,255,255,0.62); }
.features--dark .bento-cell:hover { border-color:var(--primary); box-shadow:8px 8px 0 var(--primary); }

/* ============================================================================
   STATION 06 · PLUS · SEONAR-AUDIT — eigene Bonus-Section
   Dunkel-Atmosphere analog .method, mit Pine-Skew-Decoration plus Dot-Grid.
   2-Col-Grid: Text links, Audit-Preview-Mockup rechts.
   ============================================================================ */
.wd-bonus {
  padding: 140px 0;
  background: var(--text);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.wd-bonus::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 50%;
  height: 140%;
  background: var(--primary);
  transform: skewX(-12deg);
  opacity: 0.12;
  pointer-events: none;
}
.wd-bonus::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 50%;
  height: 140%;
  background-image: radial-gradient(circle, var(--primary) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  transform: skewX(-12deg);
  opacity: 0.28;
  pointer-events: none;
}
.wd-bonus .container {
  position: relative;
  z-index: 1;
}

.wd-bonus-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}

.wd-bonus-text {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.wd-bonus-num {
  font-family: var(--font-m);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 12px;
}
.wd-bonus-num::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--primary);
  flex-shrink: 0;
}

.wd-bonus-text h2 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: #fff;
  -webkit-text-stroke: 0.4px;
  margin: 0;
}
.wd-bonus-text h2 .italic-accent {
  color: var(--primary);
  font-family: var(--font-s);
  font-style: italic;
  font-weight: 600;
  -webkit-text-stroke: 0;
}

.wd-bonus-lead {
  font-family: var(--font-s);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0;
  max-width: 56ch;
}

.wd-bonus-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 4px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.wd-bonus-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wd-bonus-stat strong {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  -webkit-text-stroke: 0.2px;
}
.wd-bonus-stat span {
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
}

.wd-bonus-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.wd-bonus-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 26px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: 4px;
  border: 1.5px solid var(--primary);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.wd-bonus-cta:hover {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16,180,84,0.4);
}
.wd-bonus-cta-note {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

.wd-bonus-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Audit-Preview-Bonus-Variant: GRATIS-Stempel weg (Doppel-Info zur Section-Schrift),
   etwas mehr Shadow für Standalone-Bühne */
.audit-preview--bonus {
  max-width: 480px;
  width: 100%;
  box-shadow: 0 32px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
}
.audit-preview--bonus::before {
  display: none;
}

/* ----------------------------------------------------------------------------
   Station 05 (Seonar-Audit) Light-Variante (Esteban-Direktive #243: weisser
   Hintergrund). Flippt die ursprünglich dunkle Bonus-Section auf hell, damit
   sie als Wechsel zur dunklen Station 04 funktioniert. Pine-Dekor gedimmt,
   Mockup-Shadow für hellen Grund neu.
   ---------------------------------------------------------------------------- */
.wd-bonus { background: var(--bg); color: var(--text); }
.wd-bonus::before { opacity: 0.06; }
.wd-bonus::after { opacity: 0.14; }
.wd-bonus-num { color: var(--muted); }
.wd-bonus-text h2 { color: var(--text); }
.wd-bonus-lead { color: var(--text); }
.wd-bonus-stats { border-top-color: var(--border); }
.wd-bonus-stat strong { color: var(--text); }
.wd-bonus-stat span { color: var(--muted); }
.wd-bonus-cta-row { border-top-color: var(--border); }
.wd-bonus-cta-note { color: var(--muted); }
.audit-preview--bonus { box-shadow: 0 24px 48px rgba(0,0,0,0.12), 0 0 0 1px var(--border); }

@media (max-width: 1024px) {
  .wd-bonus {
    padding: 96px 0;
  }
  .wd-bonus-grid {
    grid-template-columns: 1fr;
    gap: 56px;
    align-items: stretch;
  }
  .wd-bonus-visual {
    justify-content: stretch;
  }
  .audit-preview--bonus {
    max-width: 100%;
  }
}
@media (max-width: 700px) {
  .wd-bonus {
    padding: 64px 0;
  }
  .wd-bonus-grid {
    gap: 40px;
  }
  .wd-bonus-text {
    gap: 22px;
  }
  .wd-bonus-text h2 {
    font-size: 36px;
  }
  .wd-bonus-lead {
    font-size: 15px;
  }
  .wd-bonus-stats {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 22px;
  }
  .wd-bonus-cta-row {
    gap: 14px;
    padding-top: 22px;
  }
  .wd-bonus-cta {
    padding: 14px 22px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
  }
  .wd-bonus-cta-note {
    font-size: 10px;
  }
}

/* WD-FINAL-CTA · Intro-Text auf dark-Half plus Featured-Card plus 2 Sub-Pfade */
.final-cta-intro {
  font-family: var(--font-b);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--text);
  text-align: center;
  max-width: 720px;
  margin: 0 auto 8px;
  font-weight: 400;
}
.final-cta-featured {
  display: block;
  max-width: 880px;
  margin: 36px auto 56px;
  padding: 40px 48px 36px;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 12px 12px 0 var(--text), 0 0 0 1px rgba(16,180,84,0.2);
  text-decoration: none;
  color: var(--text);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.final-cta-featured::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(16, 180, 84, 0.28);
  pointer-events: none;
}
.final-cta-featured:hover {
  transform: translate(-3px, -3px);
  box-shadow: 16px 16px 0 var(--text), 0 0 0 1px rgba(16,180,84,0.35);
  background: rgba(16, 180, 84, 0.04);
}
.final-cta-featured-tag {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 700;
  display: inline-block;
  background: rgba(16, 180, 84, 0.12);
  padding: 6px 12px;
  margin-bottom: 22px;
}
.final-cta-featured-title {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 18px;
}
.final-cta-featured-title .italic-accent {
  font-family: var(--font-s);
  font-style: italic;
  font-weight: 600;
  color: var(--primary);
}
.final-cta-featured-desc {
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 28px;
  max-width: 620px;
}
.final-cta-featured-arrow {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 17px;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 4px;
  transition: gap 0.3s ease;
}
.final-cta-featured-arrow em {
  font-style: normal;
  font-size: 22px;
  transition: transform 0.3s ease;
}
.final-cta-featured:hover .final-cta-featured-arrow { gap: 14px; }
.final-cta-featured:hover .final-cta-featured-arrow em { transform: translateX(4px); }

.final-cta-subpaths {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}
.final-cta-subpaths-label {
  display: block;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 18px;
  text-align: center;
}
.final-cta-subpaths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.final-cta-subpath {
  padding: 26px 28px 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid rgba(10, 10, 10, 0.2);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.3s ease, background 0.3s ease, border-left-color 0.3s ease, box-shadow 0.3s ease;
}
.final-cta-subpath:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 var(--text);
  border-left-color: var(--primary);
}
.final-cta-subpath-num {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.final-cta-subpath h4 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}
.final-cta-subpath h4 .italic-accent {
  font-family: var(--font-s);
  font-style: italic;
  font-weight: 600;
  color: var(--primary);
}
.final-cta-subpath p {
  font-family: var(--font-b);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  flex: 1;
}
.final-cta-subpath-arrow {
  font-family: var(--font-m);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--primary);
  font-weight: 600;
  margin-top: 6px;
  transition: transform 0.3s ease;
  display: inline-block;
}
.final-cta-subpath:hover .final-cta-subpath-arrow { transform: translateX(4px); }

@media (max-width: 760px) {
  .final-cta-featured { padding: 28px 24px 24px; margin: 28px auto 40px; box-shadow: 8px 8px 0 var(--text); }
  .final-cta-featured:hover { box-shadow: 10px 10px 0 var(--text); }
  .final-cta-subpaths-grid { grid-template-columns: 1fr; gap: 12px; }
  .final-cta-subpath { padding: 22px 22px 18px; }
  .final-cta-subpath h4 { font-size: 22px; }
}

/* ============================================================
   HERO-FABRIK-STAGE (Session #179, V01-Pattern integriert)
   Animation: Fabrik produziert Posts auf Fliessband, Posts laufen rechts
   Esteban-Pick V01 Fliessband-Output 2026-05-11
   ============================================================ */

.stage {
  position: relative;
  width: 100%;
  height: 400px;
  margin: 28px 0 16px;
  overflow: hidden;
}
.stage::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60px;
  background: repeating-linear-gradient(90deg, rgba(10,10,10,0.04) 0 1px, transparent 1px 40px);
  border-top: 1px solid var(--border);
  z-index: 1;
}

/* Fabrik-Silhouette sitzt mit Building-Bottom auf Belt-Top (Belt-Top bei 170, SVG-bottom-padding ~10px) */
.factory {
  position: absolute;
  left: 0;
  bottom: 160px;
  width: 260px;
  height: 234px;
  z-index: 5;
}
.factory svg { width: 100%; height: 100%; display: block; }
@keyframes smoke {
  0%   { transform: translateY(0) scale(1); opacity: 0.7; }
  60%  { transform: translateY(-26px) scale(1.6); opacity: 0.25; }
  100% { transform: translateY(-44px) scale(2.1); opacity: 0; }
}
.factory .smoke { transform-origin: center bottom; animation: smoke 3.6s ease-out infinite; }
.factory .smoke.b { animation-delay: 1.2s; }
.factory .smoke.c { animation-delay: 2.4s; }

/* Conveyor-Belt schwebt hoeher (bottom:120), rechts mit klarer Cliff-Kante, Air-Gap 20px zu Becken */
.belt {
  position: absolute;
  left: 0;
  right: 160px;
  bottom: 120px;
  height: 50px;
  background: var(--text);
  border-top: 3px solid var(--text);
  border-bottom: 3px solid var(--text);
  border-right: 6px solid var(--text);
  box-shadow: 6px 0 0 var(--text);
  z-index: 2;
  overflow: hidden;
}
/* Belt-Cliff-Front: vertikaler Strich unter Belt-Right-Edge bis Stage-Boden zeigt "wo Belt endet" */
.belt::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 100%;
  width: 6px;
  height: 18px;
  background: var(--text);
  pointer-events: none;
}
.belt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-55deg, rgba(255,255,255,0.12) 0 14px, rgba(255,255,255,0) 14px 32px);
  background-size: 46px 100%;
  animation: beltMove 1.4s linear infinite;
  will-change: background-position;
}
@keyframes beltMove {
  0%   { background-position: 0 0; }
  100% { background-position: 46px 0; }
}

/* Roller links und rechts */
.roller {
  position: absolute;
  bottom: 8px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #222;
  border: 3px solid var(--text);
  box-shadow: inset 0 0 0 4px #444;
  z-index: 3;
}
.roller.l { left: -10px; }
.roller.r { right: -10px; }
.roller::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: repeating-conic-gradient(#1a1a1a 0 30deg, #333 30deg 60deg);
  animation: rollerSpin 1.4s linear infinite;
}
@keyframes rollerSpin { to { transform: rotate(360deg); } }

/* Posts-Track auf dem Belt (bottom 170 = belt-bottom 120 + belt-height 50) */
.track {
  position: absolute;
  left: 260px;
  right: 0;
  bottom: 170px;
  height: 200px;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.post {
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 150px;
  min-height: 88px;
  background: #fff;
  border: 2px solid var(--text);
  border-radius: 6px;
  box-shadow: 5px 5px 0 var(--text);
  font-family: var(--font-b);
  font-size: 11px;
  line-height: 1.35;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: scale(0.3);
  animation: postRide 26s linear infinite;
  will-change: transform, opacity;
}

/* 4-Phasen-Animation mit min()-Cap fuer Drop sichtbar auf grossen Viewports (1920+) */
@keyframes postRide {
  0%   { transform: translateX(-50px) scale(0.92) rotate(-3deg); opacity: 0; }
  3%   { transform: translateX(-20px) scale(0.96) rotate(-1.5deg); opacity: 0.4; }
  7%   { transform: translateX(22px) scale(1) rotate(0); opacity: 1; }
  76%  { transform: translateX(min(calc(100vw - 680px), 1080px)) scale(1) rotate(0) translateY(0); opacity: 1; }
  82%  { transform: translateX(min(calc(100vw - 600px), 1110px)) scale(1) rotate(12deg) translateY(20px); opacity: 1; }
  90%  { transform: translateX(min(calc(100vw - 560px), 1140px)) scale(0.95) rotate(30deg) translateY(80px); opacity: 1; }
  96%  { transform: translateX(min(calc(100vw - 540px), 1160px)) scale(0.88) rotate(45deg) translateY(140px); opacity: 0.7; }
  100% { transform: translateX(min(calc(100vw - 530px), 1170px)) scale(0.8) rotate(55deg) translateY(165px); opacity: 0; }
}
.post.p1 { animation-delay: 0s; }
.post.p2 { animation-delay: -5.2s; }
.post.p3 { animation-delay: -10.4s; }
.post.p4 { animation-delay: -15.6s; }
.post.p5 { animation-delay: -20.8s; }

/* BECKEN: Auffang-Behaelter rechts unten, sammelt gefallene Posts. Becken-Top liegt 70px UNTER Belt-Top damit Posts sichtbar durch Air-Gap fallen */
.basin {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 140px;
  height: 100px;
  background: var(--text);
  border: 3px solid var(--text);
  border-top: 6px solid var(--text);
  z-index: 3;
  overflow: hidden;
}
.basin::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0 6px, transparent 6px 14px);
  pointer-events: none;
}
.basin-wall {
  position: absolute;
  inset: auto 0 0 0;
  height: 32px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 70%, var(--text) 100%);
  pointer-events: none;
}
.basin-label {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-m);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  font-weight: 700;
  pointer-events: none;
}
.basin-stack {
  position: absolute;
  inset: 18px 8px 4px 8px;
  pointer-events: none;
}
.basin-item {
  position: absolute;
  width: 42px;
  height: 30px;
  background: #fff;
  border: 1.5px solid var(--text);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}
.basin-item.bi1 { bottom: 0; left: 4px; transform: rotate(-12deg); }
.basin-item.bi2 { bottom: 4px; left: 38px; transform: rotate(9deg); background: var(--pine-1); }
.basin-item.bi3 { bottom: 20px; left: 18px; transform: rotate(-5deg); background: #eeece6; }
.basin-item.bi4 { bottom: 30px; left: 52px; transform: rotate(14deg); border-top: 3px solid #0a66c2; }

/* Post-Typ 1: LinkedIn */
.post.linkedin { border-top: 6px solid #0a66c2; padding-top: 8px; }
.post.linkedin .head { display: flex; align-items: center; gap: 6px; }
.post.linkedin .avatar { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); flex-shrink: 0; }
.post.linkedin .name { font-weight: 700; font-size: 9.5px; }
.post.linkedin .text { font-size: 10px; color: var(--text); font-weight: 500; }

/* Post-Typ 2: Instagram-Square */
.post.instagram { width: 120px; min-height: 120px; padding: 8px; justify-content: space-between; }
.post.instagram .square { flex: 1; background: linear-gradient(135deg, #f5f0e8 0%, #e8dfd0 100%); border: 1px solid var(--border); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-family: var(--font-h); font-weight: 900; font-size: 13px; letter-spacing: -0.02em; color: var(--text); text-align: center; padding: 6px; }
.post.instagram .dots { display: flex; justify-content: center; gap: 3px; }
.post.instagram .dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--border); }
.post.instagram .dots span:first-child { background: var(--primary); }

/* Post-Typ 3: Blog-Headline */
.post.blog { background: var(--bg); border-left: 6px solid var(--primary); padding-left: 12px; }
.post.blog .kicker { font-family: var(--font-m); font-size: 8.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-deep); }
.post.blog .title { font-family: var(--font-h); font-weight: 900; font-size: 13px; line-height: 1.15; letter-spacing: -0.01em; }

/* Post-Typ 4: Newsletter */
.post.newsletter { background: #eeece6; border: 2px solid var(--text); }
.post.newsletter .head { display: flex; align-items: center; gap: 6px; }
.post.newsletter .mail { width: 20px; height: 14px; border: 1.5px solid var(--text); background: #fff; position: relative; flex-shrink: 0; }
.post.newsletter .mail::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--text) calc(50% - 1px), var(--text) 50%, transparent 50%), linear-gradient(to bottom left, transparent calc(50% - 1px), var(--text) calc(50% - 1px), var(--text) 50%, transparent 50%); }
.post.newsletter .from { font-family: var(--font-m); font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.post.newsletter .subject { font-weight: 700; font-size: 11px; color: var(--text); }

/* Post-Typ 5: Reel-Frame */
.post.reel { width: 88px; min-height: 140px; padding: 6px; background: var(--text); border-color: var(--text); align-items: center; justify-content: center; position: relative; }
.post.reel .phone { width: 100%; height: 100%; background: linear-gradient(180deg, #1a3320 0%, #0f1f15 100%); border: 1px solid #333; border-radius: 8px; position: relative; display: flex; align-items: center; justify-content: center; }
.post.reel .play { width: 0; height: 0; border-left: 14px solid var(--primary); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 3px; filter: drop-shadow(0 0 8px rgba(16,180,84,0.5)); }
.post.reel .caption { position: absolute; bottom: 6px; left: 6px; right: 6px; font-family: var(--font-m); font-size: 8px; color: #fff; text-align: center; background: rgba(0,0,0,0.5); padding: 2px 4px; border-radius: 2px; }

/* Stage Responsive */
@media (max-width: 1024px) {
  .stage { height: 360px; }
  .factory { width: 200px; height: 180px; bottom: 142px; }
  .belt { bottom: 100px; }
  .track { left: 200px; bottom: 150px; height: 170px; }
  .hero-top-row { gap: 32px; }
  .hero-top-row .hero-body-card { flex: 0 0 360px; max-width: 360px; }
}
@media (max-width: 768px) {
  .hero-top-row { flex-direction: column; gap: 28px; }
  .hero-top-row .hero-body-card { flex: 1 1 auto; max-width: none; }
  .stage { height: 320px; margin: 20px 0 12px; }
  .factory { width: 150px; height: 135px; bottom: 132px; }
  .belt { right: 100px; bottom: 90px; }
  .track { left: 150px; bottom: 140px; height: 150px; }
  .post { width: 120px; font-size: 10px; animation-name: postRideMobile; }
  .post.instagram { width: 100px; min-height: 100px; }
  .post.reel { width: 72px; min-height: 118px; }
  .basin { width: 100px; height: 80px; }
  .basin-item { width: 32px; height: 22px; }
  .basin-item.bi1 { bottom: 0; left: 2px; }
  .basin-item.bi2 { bottom: 4px; left: 26px; }
  .basin-item.bi3 { bottom: 16px; left: 12px; }
  .basin-item.bi4 { bottom: 26px; left: 36px; }
  .hero-tagline { margin: 20px 0 0; padding-top: 20px; }
}
@media (max-width: 380px) {
  .stage { height: 280px; }
  .factory { width: 110px; height: 99px; bottom: 125px; }
  .belt { right: 86px; bottom: 80px; }
  .track { left: 110px; bottom: 130px; }
  .basin { width: 86px; height: 70px; }
}

/* Mobile-spezifische Posts-Animation (Slide-Out + Drop, kleinere Travel-Distanz) */
@keyframes postRideMobile {
  0%   { transform: translateX(-40px) scale(0.92) rotate(-3deg); opacity: 0; }
  4%   { transform: translateX(-15px) scale(0.96) rotate(-1.5deg); opacity: 0.4; }
  9%   { transform: translateX(16px) scale(1) rotate(0); opacity: 1; }
  70%  { transform: translateX(calc(100vw - 350px)) scale(1) rotate(0) translateY(0); opacity: 1; }
  80%  { transform: translateX(calc(100vw - 290px)) scale(0.95) rotate(15deg) translateY(28px); opacity: 1; }
  90%  { transform: translateX(calc(100vw - 260px)) scale(0.88) rotate(28deg) translateY(70px); opacity: 0.9; }
  100% { transform: translateX(calc(100vw - 240px)) scale(0.78) rotate(42deg) translateY(120px); opacity: 0; }
}

/* Reduced-Motion Fallback: Posts statisch verteilt sichtbar, alle Animationen aus */
@media (prefers-reduced-motion: reduce) {
  .post, .belt::before, .roller::after, .factory .smoke { animation: none !important; }
  .post { opacity: 1 !important; }
  .post.p1 { transform: translateX(40px) scale(1) !important; }
  .post.p2 { transform: translateX(220px) scale(1) !important; }
  .post.p3 { transform: translateX(400px) scale(1) !important; }
  .post.p4 { transform: translateX(580px) scale(1) !important; }
  .post.p5 { transform: translateX(760px) scale(1) !important; }
}

/* ============================================================
   WD-OPERATOR-MINI — Compact Operator-Card für Service-Pages
   ============================================================ */

.wd-operator-mini { padding: 80px 0; background: var(--bg, #fff); }

.wd-operator-mini-card {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wd-operator-mini-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.wd-operator-mini-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--primary-tint);
}

.wd-operator-mini-text { flex: 1; }
.wd-operator-mini-text .eyebrow { display: block; margin: 0 0 10px; font-size: 13px; }
.wd-operator-mini-text h3 { font-size: 26px; line-height: 1.2; margin: 0 0 10px; font-family: "Red Hat Display", sans-serif; font-weight: 900; }
.wd-operator-mini-text p { margin: 0 0 14px; font-size: 16px; line-height: 1.5; }
.wd-operator-mini-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 2px;
}

@media (max-width: 600px) {
  .wd-operator-mini { padding: 48px 0; }
  .wd-operator-mini-card {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 28px 24px;
  }
  .wd-operator-mini-photo { width: 110px; height: 110px; }
  .wd-operator-mini-text h3 { font-size: 22px; }
  .wd-operator-mini-text p { font-size: 15px; }
}

/* ============================================================
   FLIES-FALLBACK RICH-VARIANTS (Brand-Cards ohne iframe-Load)
   ============================================================ */

.flies-fallback.is-rich { 
  flex-direction: column; 
  gap: 8px; 
  padding: 16px; 
  text-align: center; 
}
.flies-fallback .fb-wordmark {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(28px, 7vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.flies-fallback .fb-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(9px, 1.6vw, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.flies-fallback.is-runthesim { 
  background: linear-gradient(135deg, #0a0a0a 0%, #1a2540 50%, #0A6E32 100%); 
  color: #fff; 
}
.flies-fallback.is-runthesim .fb-tagline { color: rgba(255,255,255,0.75); }

.flies-fallback.is-seonar { 
  background: linear-gradient(135deg, #DBF6E3 0%, #7CD4A0 60%, #10B454 100%); 
  color: #074A22; 
}
.flies-fallback.is-seonar .fb-tagline { color: rgba(7,74,34,0.8); }

/* Index Hero .fab-post.fab-site Rich-Variant */
.fab-post.fab-site .site-body { 
  background: linear-gradient(135deg, #0a0a0a 0%, #1a2540 50%, #0A6E32 100%); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
  gap: 4px; 
}
.fab-post.fab-site .site-mark { 
  font-family: var(--font-h); 
  font-weight: 900; 
  font-size: 18px; 
  color: #fff; 
  letter-spacing: -0.02em; 
}
.fab-post.fab-site .site-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* IFRAME-Render konsolidiert in default .flies-body iframe (Iter 4, 2026-05-15)
   Alle Iframes laden uniform Desktop-Viewport 1280x800 fuer konsistenten Look.
   Scale per Mobile-Breakpoint: Desktop 0.328, Tablet 0.133, Phone 0.117. */

/* ============================================================
   MARKETING-CHECK MULTI-STEP FORM (Session #193, 2026-05-13)
   Selbstdiagnose-Form mit 8 Fragen, Pfad-Routing, Investment-Cut
   ============================================================ */

.mc-form-section {
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(16,180,84,0.10) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  background-position: 0 0;
  padding: 32px 0 56px;
}

.mc-form-shell {
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--text);
  box-shadow: 10px 10px 0 var(--text);
  padding: 36px 36px;
  position: relative;
}

/* Progress (Step-Meta + Bar) */
.mc-progress { margin-bottom: 28px; }
.mc-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.mc-progress-step {
  font-family: var(--font-m); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.mc-progress-step strong {
  font-family: var(--font-h); font-weight: 900;
  font-size: 18px; color: var(--primary-deep);
  letter-spacing: -0.01em; margin: 0 2px;
  -webkit-text-stroke: 0.25px;
}
.mc-progress-percent {
  font-family: var(--font-m); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--primary);
}
.mc-progress-track {
  height: 8px; background: var(--pine-1);
  position: relative; overflow: hidden;
  border: 1.5px solid var(--text);
}
.mc-progress-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 12.5%; background: var(--primary);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Legacy: alte Single-Label-Variante (Fallback) */
.mc-progress-label {
  font-family: var(--font-m); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); white-space: nowrap;
}

/* Step container */
.mc-step { display: none; }
.mc-step.is-active { display: block; animation: mcFadeIn 0.35s ease-out; }
@keyframes mcFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mc-q-eyebrow {
  display: inline-block;
  font-family: var(--font-m); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--primary-deep);
  background: var(--pine-1);
  padding: 6px 12px;
  border: 1.5px solid var(--primary);
  margin-bottom: 18px;
}
.mc-q-title {
  font-family: var(--font-h); font-weight: 900;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08;
  -webkit-text-stroke: 0.4px; letter-spacing: -0.025em;
  color: var(--text); margin-bottom: 22px;
}
.mc-q-title .italic-accent {
  font-family: var(--font-s); font-style: italic; font-weight: 600;
  -webkit-text-stroke: 0; color: var(--primary);
}
.mc-q-helper {
  font-family: var(--font-b); font-size: 14px; line-height: 1.5;
  color: var(--muted); margin-bottom: 14px;
}

/* Options (radio-as-card) */
.mc-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.mc-option { display: block; cursor: pointer; position: relative; }
.mc-option input { position: absolute; opacity: 0; pointer-events: none; }
.mc-option-label {
  display: block; padding: 13px 18px;
  border: 2px solid var(--text); background: var(--bg);
  font-family: var(--font-b); font-size: 15px; font-weight: 500;
  color: var(--text);
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.mc-option-label:hover {
  background: var(--pine-1);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--text);
}
.mc-option input:checked + .mc-option-label {
  background: var(--text); color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--primary);
}
.mc-option input:focus-visible + .mc-option-label {
  outline: 3px solid var(--primary); outline-offset: 3px;
}

/* Multi-Select-Variante (Frage 1: bis zu 3 Wahlen, Klick-Reihenfolge zählt) */
.mc-options-multi-helper {
  font-family: var(--font-b); font-size: 13px; font-weight: 500;
  color: var(--muted);
  margin-bottom: 14px; line-height: 1.45;
}
.mc-options-multi-helper strong { color: var(--text); font-weight: 700; }
.mc-options-multi .mc-option-label {
  padding-right: 60px;
  position: relative;
}
.mc-options-multi .mc-option[data-order] .mc-option-label::after {
  content: attr(data-order);
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text);
  font-family: var(--font-h); font-weight: 900;
  font-size: 16px;
  -webkit-text-stroke: 0.35px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.mc-options-multi .mc-option input:checked + .mc-option-label {
  background: var(--text); color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--primary);
}
.mc-options-multi.is-max .mc-option:not([data-order]) .mc-option-label {
  opacity: 0.4; cursor: not-allowed;
}
.mc-options-multi.is-max .mc-option:not([data-order]) .mc-option-label:hover {
  background: var(--bg); color: var(--text);
  transform: none; box-shadow: none;
}

/* Skala (Frage 2: 1-5) */
.mc-skala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 20px; }
.mc-skala-item { cursor: pointer; position: relative; }
.mc-skala-item input { position: absolute; opacity: 0; pointer-events: none; }
.mc-skala-label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 6px; min-height: 84px;
  border: 2px solid var(--text); background: var(--bg);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.mc-skala-label .num {
  font-family: var(--font-h); font-weight: 900; font-size: 26px;
  line-height: 1; -webkit-text-stroke: 0.35px;
  color: var(--text); margin-bottom: 6px;
}
.mc-skala-label .lbl {
  font-family: var(--font-b); font-size: 11px; font-weight: 600;
  text-align: center; color: var(--muted); line-height: 1.25;
}
.mc-skala-item:hover .mc-skala-label {
  background: var(--pine-1);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--text);
}
.mc-skala-item input:checked + .mc-skala-label {
  background: var(--text);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--primary);
}
.mc-skala-item input:checked + .mc-skala-label .num,
.mc-skala-item input:checked + .mc-skala-label .lbl { color: #fff; }
.mc-skala-item input:focus-visible + .mc-skala-label {
  outline: 3px solid var(--primary); outline-offset: 3px;
}

/* Investment-Cut Block (Step 7 Opener) */
.mc-invest-cut {
  background: var(--pine-1);
  border-left: 4px solid var(--primary);
  padding: 20px 24px;
  margin-bottom: 22px;
}
.mc-invest-cut h4 {
  font-family: var(--font-h); font-weight: 900;
  font-size: clamp(18px, 2vw, 22px); line-height: 1.18;
  -webkit-text-stroke: 0.35px; letter-spacing: -0.015em;
  color: var(--text); margin-bottom: 8px;
}
.mc-invest-cut h4 .italic-accent {
  font-family: var(--font-s); font-style: italic; font-weight: 600;
  -webkit-text-stroke: 0; color: var(--primary);
}
.mc-invest-cut p {
  font-family: var(--font-b); font-size: 14px; line-height: 1.5;
  color: var(--text); margin: 0;
}

/* Text-Inputs */
.mc-input-group { margin-bottom: 14px; }
.mc-input-group label {
  display: block; font-family: var(--font-m); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
}
.mc-label-optional {
  font-weight: 400; text-transform: none;
  letter-spacing: 0.02em; color: var(--muted);
  font-size: 10px; margin-left: 4px;
}
.mc-input {
  width: 100%; padding: 12px 16px;
  border: 2px solid var(--text); background: var(--bg);
  font-family: var(--font-b); font-size: 15px; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mc-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 4px 4px 0 var(--primary);
}
.mc-input::placeholder { color: var(--muted); }

/* DSG Checkbox */
.mc-dsg {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 22px; padding: 14px;
  background: var(--bg); border: 2px solid var(--border);
}
.mc-dsg input {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  accent-color: var(--primary); cursor: pointer;
}
.mc-dsg label {
  font-family: var(--font-b); font-size: 14px; line-height: 1.5;
  color: var(--text); cursor: pointer;
}
.mc-dsg a { color: var(--primary-deep); border-bottom: 1px solid var(--primary); text-decoration: none; }
.mc-dsg a:hover { color: var(--primary); }

/* Nav Buttons */
.mc-nav {
  display: flex; gap: 12px; justify-content: space-between;
  align-items: center; margin-top: 4px;
}
.mc-nav-spacer { flex: 1; }
.mc-btn {
  font-family: var(--font-h); font-weight: 700; font-size: 15px;
  padding: 13px 22px; cursor: pointer;
  border: 2px solid var(--text);
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.mc-btn-next {
  background: var(--text); color: #fff;
}
.mc-btn-next:hover {
  background: var(--primary);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--text);
}
.mc-btn-next::after { content: ' →'; }
.mc-btn-back {
  background: transparent; color: var(--text);
}
.mc-btn-back:hover {
  background: var(--pine-1);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--text);
}
.mc-btn-back::before { content: '← '; }
.mc-btn-submit {
  background: var(--primary); color: #fff;
  font-size: 16px; padding: 16px 28px;
  border-color: var(--primary);
}
.mc-btn-submit:hover {
  background: var(--text); border-color: var(--text);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--primary);
}
.mc-btn-submit::after { content: ' →'; font-size: 20px; }

/* Honeypot */
.mc-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* Error */
.mc-error {
  font-family: var(--font-b); font-size: 13px; font-weight: 500;
  color: #c1272d; margin-top: 4px; margin-bottom: 8px; min-height: 18px;
}

/* Q3 Variants (Pfad-spezifisch, JS toggle) */
.mc-q-variant { display: none; }
.mc-q-variant.is-active { display: block; }

/* Confirmation-Page Block */
.mc-danke-section { background: var(--bg); padding: 96px 0 120px; }
.mc-danke-shell {
  max-width: 720px; margin: 0 auto;
  background: #fff;
  border: 2px solid var(--text); box-shadow: 12px 12px 0 var(--text);
  padding: 64px 48px;
}
.mc-danke-eyebrow {
  font-family: var(--font-m); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--primary); margin-bottom: 24px;
}
.mc-danke-shell h1 {
  font-family: var(--font-h); font-weight: 900;
  font-size: clamp(40px, 5.5vw, 64px); line-height: 1.0;
  -webkit-text-stroke: 0.35px; letter-spacing: -0.03em;
  color: var(--text); margin-bottom: 28px;
}
.mc-danke-shell h1 .italic-accent {
  font-family: var(--font-s); font-style: italic; font-weight: 600;
  -webkit-text-stroke: 0; color: var(--primary);
}
.mc-danke-shell p {
  font-family: var(--font-b); font-size: 18px; line-height: 1.55;
  color: var(--text); margin-bottom: 20px;
}
.mc-danke-links {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 32px; padding-top: 32px; border-top: 2px solid var(--border);
}
.mc-danke-links h4 {
  font-family: var(--font-m); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: 4px;
}
.mc-danke-links a {
  font-family: var(--font-h); font-weight: 700; font-size: 18px;
  color: var(--text); text-decoration: none;
  padding: 14px 18px; border: 2px solid var(--text); background: var(--bg);
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.mc-danke-links a:hover {
  background: var(--text); color: var(--primary);
  transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--primary);
}
.mc-danke-links a::after { content: ' →'; }

/* Focus-Page (check.html, Standalone) */
.mc-focus-header {
  padding: 14px 0;
  background: var(--bg);
  border-bottom: 2px solid var(--text);
  position: sticky; top: 0; z-index: 50;
}
.mc-focus-header .container {
  display: flex; justify-content: space-between; align-items: center;
}
.mc-focus-back {
  font-family: var(--font-h); font-weight: 700; font-size: 14px;
  color: var(--text); text-decoration: none;
  padding: 10px 16px; border: 2px solid var(--text);
  background: var(--bg);
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.mc-focus-back::before { content: '← '; }
.mc-focus-back:hover {
  background: var(--text); color: var(--primary);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--primary);
}

.mc-focus-intro {
  background: var(--bg);
  padding: 24px 0 14px;
  text-align: center;
}
.mc-focus-intro .eyebrow {
  color: var(--primary-deep); margin-bottom: 10px;
}
.mc-focus-intro h1 {
  font-family: var(--font-h); font-weight: 900;
  font-size: clamp(28px, 4vw, 44px); line-height: 0.98;
  -webkit-text-stroke: 0.35px; letter-spacing: -0.025em;
  color: var(--text); margin-bottom: 10px;
}
.mc-focus-intro h1 .italic-accent {
  font-family: var(--font-s); font-style: italic; font-weight: 600;
  -webkit-text-stroke: 0; color: var(--primary);
}
.mc-focus-intro p {
  font-family: var(--font-b); font-size: 15px; line-height: 1.5;
  color: var(--text); max-width: 560px; margin: 0 auto;
}

.mc-focus-footer {
  padding: 28px 0;
  background: var(--bg);
  border-top: 2px solid var(--text);
}
.mc-focus-footer .container {
  display: flex; gap: 28px; justify-content: center;
  flex-wrap: wrap; align-items: center;
}
.mc-focus-footer a {
  font-family: var(--font-m); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 600; color: var(--muted); text-decoration: none;
}
.mc-focus-footer a:hover { color: var(--primary); }
.mc-focus-footer .mc-focus-divider { color: var(--border); }

/* ============================================================
   FULL-PAGE-LOCK MODE (marketing-check.html, Session #196)
   BG-Layer: voll-Page blurred Backdrop
   Overlay-Layer: Form viewport-zentriert, body locked
   ============================================================ */

body.mc-locked {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  margin: 0;
}

/* BG-Layer: alte Page komplett, blurred, non-interactive */
.mc-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  filter: blur(16px);
  -webkit-filter: blur(16px);
  transform: scale(1.06);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.mc-bg > * { pointer-events: none; }

/* Overlay-Layer: Mini-Header + Form, sitzt über BG */
.mc-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
.mc-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(247, 246, 241, 0.78) 0%, rgba(247, 246, 241, 0.62) 60%, rgba(247, 246, 241, 0.72) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Mini-Header: Brand-Mark + Brand-Text + SVG-Close */
.mc-mini-header {
  position: relative;
  z-index: 2;
  height: 72px;
  background: var(--bg);
  border-bottom: 2px solid var(--text);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 24px rgba(13, 19, 17, 0.06);
}
.mc-mini-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.mc-brand {
  text-decoration: none;
  transition: opacity 0.15s;
}
.mc-brand:hover { opacity: 0.78; }

.mc-close {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  text-decoration: none;
  border: 2px solid var(--text);
  background: var(--bg);
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.mc-close:hover {
  background: var(--text);
  color: var(--primary);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--primary);
}
.mc-close svg { display: block; }

/* Page-Main: scrollable Form-Bereich */
.mc-page-main {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mc-page-inner {
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px 64px;
  box-sizing: border-box;
}
.mc-page-main .mc-form-shell {
  width: 100%;
  max-width: 720px;
  margin: 0;
  padding: 44px 44px;
  background: #fff;
  border: 2px solid var(--text);
  box-shadow: 12px 12px 0 var(--text);
  position: relative;
}

/* ============================================================
   MARKETING-CHECK MODAL (In-Page-Overlay, 2026-05-25)
   Öffnet den Check auf der aktuellen Seite statt Seitenwechsel.
   Reuse von .mc-overlay/.mc-mini-header/.mc-page-main (siehe oben).
   ============================================================ */
.mc-modal-root { display: none; }
.mc-modal-root.is-open { display: block; }
.mc-modal-root .mc-overlay { z-index: 9999; }

/* Aktuelle Seite hinter dem Modal blurren + Scroll sperren */
html.mc-modal-open, body.mc-modal-open { overflow: hidden; }
.mc-modal-root .mc-page-main { overscroll-behavior: contain; }
body.mc-modal-open > *:not(.mc-modal-root):not(script) {
  filter: blur(16px);
  -webkit-filter: blur(16px);
  transform: scale(1.01);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}

/* Mobile-First Adjustments */
@media (max-width: 768px) {
  .mc-form-section { padding: 48px 0 72px; }
  .mc-q-title { font-size: clamp(26px, 7vw, 34px); margin-bottom: 18px; }
  .mc-q-eyebrow { font-size: 10px; padding: 5px 10px; margin-bottom: 14px; }
  .mc-skala { gap: 6px; }
  .mc-skala-label { padding: 14px 4px; min-height: 92px; }
  .mc-skala-label .num { font-size: 26px; margin-bottom: 6px; }
  .mc-skala-label .lbl { font-size: 10px; }
  .mc-option-label { padding: 16px 16px; font-size: 15px; min-height: 48px; box-sizing: border-box; }
  .mc-invest-cut { padding: 22px 20px; }
  .mc-nav { flex-direction: column-reverse; gap: 10px; }
  .mc-nav .mc-btn { width: 100%; }
  .mc-nav-spacer { display: none; }
  .mc-btn { font-size: 14px; padding: 14px 18px; min-height: 48px; }
  .mc-btn-submit { font-size: 16px; padding: 16px 24px; min-height: 52px; }
  .mc-danke-section { padding: 56px 0 80px; }
  .mc-danke-shell { padding: 40px 24px; box-shadow: 6px 6px 0 var(--text); }
  .mc-focus-header { padding: 14px 0; }
  .mc-focus-back { font-size: 12px; padding: 8px 12px; }
  .mc-focus-intro { padding: 32px 0 16px; }
  .mc-focus-intro h1 { font-size: clamp(30px, 8vw, 48px); }
  .mc-focus-intro p { font-size: 15px; padding: 0 24px; }

  /* Lock-Mode mobile */
  .mc-mini-header { height: 60px; }
  .mc-mini-header .container { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .mc-close { width: 40px; height: 40px; }
  .mc-close svg { width: 18px; height: 18px; }
  .mc-page-inner { padding: 20px 14px 40px; align-items: flex-start; }
  .mc-page-main .mc-form-shell {
    padding: 28px 20px;
    box-shadow: 6px 6px 0 var(--text);
  }
  .mc-progress { margin-bottom: 22px; }
  .mc-progress-meta { margin-bottom: 8px; }
  .mc-progress-step { font-size: 11px; }
  .mc-progress-step strong { font-size: 16px; }
  .mc-progress-percent { font-size: 10px; }
  .mc-progress-track { height: 6px; }
}

@media (max-width: 420px) {
  .mc-q-title { font-size: clamp(24px, 7.4vw, 30px); }
  .mc-page-main .mc-form-shell { padding: 24px 18px; }
}

/* ============================================================
   DANKE-PAGE (Lock-Mode, personalisiert via URL-Param)
   ============================================================ */

.mc-danke-card .mc-q-eyebrow {
  margin-bottom: 14px;
}
.mc-danke-h1 {
  font-family: var(--font-h); font-weight: 900;
  font-size: clamp(36px, 5vw, 56px); line-height: 1.0;
  -webkit-text-stroke: 0.4px; letter-spacing: -0.03em;
  color: var(--text); margin: 0 0 20px;
}
.mc-danke-h1 .italic-accent {
  font-family: var(--font-s); font-style: italic; font-weight: 600;
  -webkit-text-stroke: 0; color: var(--primary);
}
.mc-danke-lead {
  font-family: var(--font-b); font-size: 17px; line-height: 1.55;
  color: var(--text); margin-bottom: 28px;
}
.mc-danke-lead .italic-accent {
  font-family: var(--font-s); font-style: italic; font-weight: 600;
  color: var(--primary);
}

@media (max-width: 768px) {
  .mc-danke-h1 { font-size: clamp(30px, 8.5vw, 42px); margin-bottom: 16px; }
  .mc-danke-lead { font-size: 15px; margin-bottom: 22px; }
}