/* ========================================================
   Mateeria — Marketing-Site
   Color/Type-Tokens exakt aus src/app/globals.css (UI-Default,
   keine workspace-spezifischen Akzente).
   ======================================================== */
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Variable.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-VariableItalic.woff2') format('woff2');font-weight:300 900;font-style:italic;font-display:swap}
/* Inter (Variable, latin + latin-ext) — ersetzt Google-Fonts-Link, nur benötigte Schnitte 400/500/600 */
@font-face{font-family:'Inter';src:url('fonts/Inter-Variable-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('fonts/Inter-Variable-latin-ext.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* JetBrains Mono (Variable, latin + latin-ext) — ersetzt Google-Fonts-Link, benötigte Schnitte 400/500 */
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Variable-latin.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Variable-latin-ext.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root {
  /* Surfaces */
  --bg:         #f7f7f5;     /* body */
  --bg-warm:    #efece5;     /* warm light */
  --bg-cream:   #D8CDBF;     /* cream */
  --bg-elev:    #ffffff;
  --surface:    #ffffff;
  --surface-2:  #faf8f4;
  --surface-glass: rgba(255,255,255,0.7);

  /* Ink */
  --ink:        #1f1f1f;
  --ink-80:     rgba(31,31,31,0.8);
  --ink-60:     rgba(31,31,31,0.6);
  --ink-40:     rgba(31,31,31,0.4);
  --ink-25:     rgba(31,31,31,0.25);

  /* Lines */
  --border:        rgba(31,31,31,0.07);
  --border-soft:   rgba(31,31,31,0.05);
  --border-strong: rgba(31,31,31,0.14);
  --border-warm:   rgba(216,205,191,0.7);

  /* Brand — Premium-Blau (matches .btn-primary in app) */
  --brand:       #6F93B4;
  --brand-dark:  #0F2C47;
  --brand-light: #6F93B4;

  /* Marineblau — Akzent (deepens primary, accent details) */
  --navy:        #0f2c47;
  --navy-soft:   rgba(15,44,71,0.08);
  --navy-line:   rgba(15,44,71,0.16);

  /* Status */
  --green:      #4f8a4a;
  --green-soft: #e2eedd;
  --amber:      #b78034;
  --amber-soft: #f5e5c8;
  --rust:       #b25437;
  --rust-soft:  #f1d8cc;

  /* Channel dot colors (top-bar pills im UI) */
  --ch-pinterest:  #d4527a;
  --ch-instagram:  #a05fb7;
  --ch-newsletter: #2e8a8c;
  --ch-blog:       #6a7a4f;
  --ch-ads:        #b78034;

  /* Type scale */
  --serif: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif-text: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:  "Inter", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;

  --shadow-sm: 0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 2px rgba(31,31,31,0.04);
  --shadow-md: 0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 14px -6px rgba(31,31,31,0.10), 0 2px 4px rgba(31,31,31,0.04);
  --shadow-lg: 0 1px 0 rgba(255,255,255,0.7) inset, 0 18px 50px -18px rgba(31,31,31,0.18), 0 6px 14px -8px rgba(31,31,31,0.08);
  --shadow-glass: 0 1px 0 rgba(255,255,255,0.55) inset, 0 0 0 1px rgba(31,31,31,0.07), 0 12px 32px -14px rgba(31,31,31,0.16);
}

/* ---- dark theme (toggle via [data-theme="dark"] on <html>) ---- */
html[data-theme="dark"] {
  --bg:         #17181a;
  --bg-warm:    #201f1b;
  --bg-cream:   #322e27;
  --bg-elev:    #1e1f22;
  --surface:    #1e1f22;
  --surface-2:  #232427;
  --surface-glass: rgba(28,29,32,0.7);

  --ink:        #f2f1ed;
  --ink-80:     rgba(242,241,237,0.8);
  --ink-60:     rgba(242,241,237,0.6);
  --ink-40:     rgba(242,241,237,0.4);
  --ink-25:     rgba(242,241,237,0.25);

  --border:        rgba(255,255,255,0.10);
  --border-soft:   rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.20);
  --border-warm:   rgba(216,205,191,0.3);

  /* Im dunklen Modus traegt Muted Blue den Akzent: Navy waere auf dem fast
     schwarzen Grund nicht mehr zu erkennen. */
  --brand:       #6F93B4;
  --brand-dark:  #6F93B4;
  --brand-light: #6F93B4;

  --navy:        #0f2c47;
  --navy-soft:   rgba(111,147,180,0.14);
  --navy-line:   rgba(111,147,180,0.28);

  --green:      #7bbf74;
  --green-soft: rgba(79,138,74,0.22);
  --amber:      #d9ab5c;
  --amber-soft: rgba(183,128,52,0.22);
  --rust:       #d68563;
  --rust-soft:  rgba(178,84,55,0.22);

  --shadow-sm: 0 1px 0 rgba(255,255,255,0.05) inset, 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 14px -6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px -18px rgba(0,0,0,0.5), 0 6px 14px -8px rgba(0,0,0,0.3);
  --shadow-glass: 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(255,255,255,0.09), 0 12px 32px -14px rgba(0,0,0,0.45);
}
html[data-theme="dark"] body::after {
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(111,147,180,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(216,205,191,0.06), transparent 60%),
    radial-gradient(700px 600px at 50% 110%, rgba(111,147,180,0.08), transparent 60%);
}
html[data-theme="dark"] img, html[data-theme="dark"] image-slot { filter: brightness(0.92) contrast(1.02); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv01", "cv11";
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 240ms ease, color 240ms ease;
}

/* App-style noise overlay (very subtle, like /globals.css) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: multiply;
}

/* warm radial backdrop tints */
body::after {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(216,205,191,0.45), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(216,205,191,0.30), transparent 60%),
    radial-gradient(700px 600px at 50% 110%, rgba(111,147,180,0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

main, nav, footer { position: relative; z-index: 1; }

/* ---- typography ---- */
h1, h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h3, h4, h5 {
  font-family: var(--serif-text);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(46px, 6.6vw, 92px); line-height: 1.02; font-weight: 600; }
h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.05; font-weight: 600; }
h3 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.18; font-weight: 600; }
h4 { font-size: 20px; line-height: 1.3; font-weight: 600; }
p  { margin: 0; text-wrap: pretty; }

em, .italic { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.lede {
  font-family: var(--sans);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  color: var(--ink-80);
  letter-spacing: -0.005em;
  max-width: 62ch;
}

.mono { font-family: var(--mono); }

/* ---- layout ---- */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
section {
  position: relative;
  padding: clamp(56px, 7vw, 100px) 0;
}
.section-head {
  max-width: 780px;
  margin-bottom: 52px;
}
.section-head .eyebrow { margin-bottom: 18px; display: inline-block; }
.section-head h2 + p { margin-top: 18px; }

/* ---- glassy nav (floating liquid-glass bar) ---- */
nav.top {
  position: sticky;
  top: 12px;
  z-index: 50;
  width: calc(100% - 32px);
  max-width: 1280px;
  margin: 12px auto 0;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: saturate(185%) blur(26px);
  -webkit-backdrop-filter: saturate(185%) blur(26px);
  background: linear-gradient(180deg, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.40) 100%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 0 0 1px var(--navy-line),
    0 14px 34px -14px rgba(15,44,71,0.30);
  animation: navSlideDown 780ms cubic-bezier(0.22,1,0.36,1) forwards;
}
html[data-theme="dark"] nav.top {
  background: linear-gradient(180deg, rgba(36,37,40,0.75) 0%, rgba(28,29,32,0.6) 100%);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px var(--navy-line),
    0 14px 34px -14px rgba(0,0,0,0.5);
}
/* drifting specular sheen across the glass */
nav.top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.5) 49%, transparent 64%);
  background-size: 250% 100%;
  animation: navSheen 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes navSlideDown {
  from { transform: translateY(-130%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes navSheen {
  0%, 100% { background-position: 145% 0; }
  50%      { background-position: -45% 0; }
}
@media (prefers-reduced-motion: reduce) {
  nav.top { animation: none; }
  nav.top::before { animation: none; }
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 28px;
  max-width: 1320px;
  margin: 0 auto;
}
.brand {
  display: flex; align-items: center; gap: 2px;
  font-family: var(--serif-text); font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  width: auto; height: 24px; aspect-ratio: 468/407;
  border-radius: 0;
  background: none;
  -webkit-mask-image: url('mateeria-mark.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('mateeria-mark.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: var(--brand-dark);
  color: transparent;
  font-size: 0;
  display: block;
  box-shadow: none;
  flex: none;
}
/* Im dunklen Modus traegt das M dieselbe Helligkeit wie der Schriftzug daneben. */
html[data-theme="dark"] .brand-mark { background-color: var(--ink); }
.nav-links {
  display: flex; gap: 4px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-80);
}
.nav-links a {
  color: var(--ink-80);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 120ms, color 120ms;
}
.nav-links a:hover { background: rgba(31,31,31,0.05); color: var(--ink); }
.nav-cta {
  display: flex; align-items: center; gap: 10px;
}
.language-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink-80);
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  transition: color 160ms, border-color 160ms, background 160ms;
}
.language-switch:hover {
  color: var(--ink);
  border-color: var(--border-strong);
  background: rgba(31,31,31,0.05);
}
.language-switch:focus-visible {
  outline: 3px solid rgba(31,31,31,0.28);
  outline-offset: 3px;
}
html[data-theme="dark"] .language-switch:hover { background: rgba(255,255,255,0.10); }

/* ---- buttons (Uiverse.io by barisdogansutcu, adapted to brand colors) ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  letter-spacing: 0.2px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.4s ease;
  white-space: nowrap;
}
.btn-primary, .btn-ghost {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 1px 8px rgba(31,31,31,0.06);
}
.btn-primary:hover, .btn-ghost:hover {
  letter-spacing: 1px;
  background: linear-gradient(180deg, rgba(246,243,235,0.95) 0%, rgba(239,236,229,0.9) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: #1f1f1f;
  border-color: #1f1f1f;
  box-shadow: 0 10px 28px -6px rgba(15,44,71,0.25);
}
.btn-primary:active, .btn-ghost:active {
  letter-spacing: 1px;
  box-shadow: 0 0 0 0 rgba(15,44,71,0);
  transform: translateY(3px);
  transition: 100ms;
}
.btn-text {
  color: var(--ink-80);
  background: transparent;
  padding: 10px 4px;
}
.btn-text:hover { color: var(--brand-dark); }
.btn-lg { padding: 15px 28px; font-size: 14.5px; border-radius: 50px; }
.btn .arrow { transition: transform 180ms; }
.btn:hover .arrow { transform: translateX(2px); }

/* ---- pill / tag (app-style channel dots) ---- */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: rgba(31,31,31,0.8);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.tag .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--green);
  flex: none;
}
.tag .dot.pin       { background: var(--ch-pinterest); }
.tag .dot.ig        { background: var(--ch-instagram); }
.tag .dot.nl        { background: var(--ch-newsletter); }
.tag .dot.blog      { background: var(--ch-blog); }
.tag .dot.ads       { background: var(--ch-ads); }
.tag .dot.brand     { background: var(--brand); }
.tag .dot.amber     { background: var(--amber); }
.tag .dot.rust      { background: var(--rust); }

/* ---- surface / glass (mirrors .surface + .glass in app) ---- */
.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.glass {
  background: var(--surface-glass);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-glass);
}
.glass-cream {
  background: rgba(216,205,191,0.42);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid rgba(31,31,31,0.08);
  border-radius: 14px;
}

/* ---- cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.card-cream {
  background: linear-gradient(180deg, #f6f3eb 0%, #efece5 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: #1f1f1f;
}
.card-ink {
  background: linear-gradient(180deg, #232220 0%, #161614 100%);
  color: rgba(247, 247, 245, 0.88);
  border-radius: var(--r-xl);
  border: 1px solid #2a2a26;
  box-shadow: var(--shadow-lg);
}
.card-ink h2, .card-ink h3, .card-ink h4 { color: #F7F7F5; }

/* ---- lists ---- */
ul.clean { list-style: none; margin: 0; padding: 0; }

/* ---- serial / labels ---- */
.serial {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-40);
  text-transform: uppercase;
}
.serial::before {
  content: ""; width: 18px; height: 1px; background: var(--navy);
  display: inline-block; transform: translateY(-3px);
}

/* numbered/checked step indicators (app onboarding style) */
.step-num {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(111,147,180,0.10);
  color: var(--brand-dark);
  display: grid; place-items: center;
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  flex: none;
}
.step-check {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  display: grid; place-items: center;
  flex: none;
}

/* ---- HERO ---- */
.hero {
  padding-top: clamp(60px, 8vw, 110px);
  padding-bottom: clamp(56px, 6vw, 100px);
  position: relative;
}
.hero-center {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.hero-center .hero-meta { justify-content: center; }
.hero-center h1 { margin-top: 6px; }
.hero-center .hook {
  font-family: var(--serif-text);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-80);
  margin: 22px auto 0;
  max-width: 30ch;
  font-style: italic;
  font-weight: 500;
}
.hero-center .hook strong {
  color: var(--ink);
  font-weight: 600;
  font-style: normal;
}
.hero-center .hero-ctas { justify-content: center; }
.hero-center .hero-trust { justify-content: center; }
.hero-center .credit {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--ink-60);
}
.hero-center .credit .avatar { width: 28px; height: 28px; font-size: 13px; }

/* hero video placeholder */
.hero-video {
  position: relative;
  margin: 36px auto 0;
  max-width: 880px;
  aspect-ratio: 16/9;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at center, #2a2a2a, #161614 70%);
  border: 1px solid rgba(31,31,31,0.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 30px 80px -28px rgba(31,31,31,0.32),
    0 12px 30px -18px rgba(31,31,31,0.18);
  overflow: hidden;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.4,0,0.2,1), box-shadow 220ms;
}
.hero-video:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 40px 100px -28px rgba(31,31,31,0.42),
    0 18px 40px -18px rgba(31,31,31,0.22);
}
.hero-video .frame-mock {
  position: absolute; inset: 24px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 40px -14px rgba(0,0,0,0.5);
  display: grid;
  grid-template-columns: 80px 1fr;
  overflow: hidden;
}
.hero-video .fm-side {
  background: linear-gradient(180deg, var(--bg-warm), #e9e5dc);
  border-right: 1px solid var(--border-soft);
  padding: 14px 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.hero-video .fm-side .it {
  height: 14px; border-radius: 4px;
  background: rgba(31,31,31,0.06);
}
.hero-video .fm-side .it.on {
  background: rgba(111,147,180,0.18);
}
.hero-video .fm-main { padding: 16px 22px; }
.hero-video .fm-main .ttl {
  font-family: var(--serif-text); font-size: 22px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.hero-video .fm-main .row {
  height: 9px; background: var(--surface-2); border-radius: 4px;
  margin-bottom: 7px;
}
.hero-video .fm-main .row.s1 { width: 80%; }
.hero-video .fm-main .row.s2 { width: 55%; }
.hero-video .fm-main .row.s3 { width: 70%; }
.hero-video .fm-main .pills {
  display: flex; gap: 6px; margin-top: 14px;
}
.hero-video .fm-main .pill-mini {
  height: 18px; padding: 0 9px; border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center;
  font-size: 9px; color: var(--ink-60);
}
.hero-video .play-lg {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  display: grid; place-items: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  z-index: 2;
  transition: transform 220ms, box-shadow 220ms;
}
.hero-video:hover .play-lg {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.hero-video .play-lg::before {
  content: "";
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 5px;
}
.hero-video .badge-time {
  position: absolute; left: 16px; bottom: 16px;
  z-index: 2;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  font-family: var(--mono); font-size: 11px;
  color: #1f1f1f;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(0,0,0,0.05);
}
.hero-video .badge-time::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; background: #d94343;
}
.hero-video-caption {
  margin: 14px auto 0;
  max-width: 50ch;
  font-size: 13.5px; color: var(--ink-60);
  text-align: center;
  font-style: italic;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
}
.hero h1 .swash {
  font-style: italic;
  font-weight: 500;
  color: var(--brand-dark);
}
.hero-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.hero-meta .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink-80);
  backdrop-filter: blur(8px);
}
.hero-ctas {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 36px;
}
.hero-trust {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-60);
  display: flex; align-items: center; gap: 8px;
}
.hero-founder {
  background: var(--surface-glass);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-glass);
  padding: 22px;
}
.hero-founder .row {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 14px;
}
.avatar {
  width: 52px; height: 52px; border-radius: 999px;
  background:
    radial-gradient(circle at 30% 25%, #6F93B4 0%, #0F2C47 70%, #0F2C47 100%);
  display: grid; place-items: center;
  color: #F7F7F5; font-family: var(--serif-text); font-size: 22px; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 12px -4px rgba(0,0,0,0.22);
}
.hero-founder .name {
  font-family: var(--serif-text); font-size: 18px; font-weight: 700;
  line-height: 1.2;
}
.hero-founder .role {
  font-size: 12.5px; color: var(--ink-60);
}
.hero-founder blockquote {
  margin: 0;
  font-family: var(--sans);
  font-size: 15.5px; line-height: 1.55;
  color: var(--ink-80);
  letter-spacing: -0.005em;
}
.hero-founder blockquote::before {
  content: "„"; font-family: var(--serif-text); font-size: 38px; line-height: 0;
  vertical-align: -10px; color: var(--brand);
  margin-right: 2px; font-weight: 700;
}
.hero-founder .sig {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-40);
}

/* ---- App preview (top-bar + sidebar mock used in hero) ---- */
.app-preview {
  margin-top: clamp(48px, 5vw, 64px);
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 30px 80px -28px rgba(31,31,31,0.22),
    0 12px 30px -18px rgba(31,31,31,0.12);
}
.app-topbar {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(247,247,245,0.7));
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(20px);
}
.app-topbar .ws {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif-text); font-size: 14px; font-weight: 600;
}
.app-topbar .ws .b {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(180deg, #2b2b2b, #1a1a1a);
  color: #F7F7F5;
  display: grid; place-items: center;
  font-family: var(--serif-text); font-size: 14px; font-weight: 700;
}
.app-topbar .ws small { color: var(--ink-40); font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.mode-pills {
  display: flex; gap: 6px; justify-content: center;
  align-items: center;
}
.mode-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  color: var(--ink-80);
  border: 1px solid transparent;
}
.mode-pill.active {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 10px -4px rgba(15,44,71,0.45);
}
/* Im dunklen Modus ist die Flaeche Muted Blue, dort traegt Navy den Text. */
html[data-theme="dark"] .mode-pill.active { color: #0F2C47; }
.mode-pill .d { width: 6px; height: 6px; border-radius: 999px; }
.mode-pill.active .d { display: none; }
.app-topbar .kbd {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-40);
  background: rgba(31,31,31,0.05);
  padding: 3px 8px; border-radius: 6px;
  justify-self: end;
}
.app-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 460px;
}
.app-side {
  background: linear-gradient(180deg, var(--bg-warm), #e9e5dc);
  border-right: 1px solid var(--border-soft);
  padding: 16px 12px;
  display: flex; flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
}
.app-side .grp {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-40);
  padding: 14px 12px 6px;
}
.app-side a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ink-80);
  text-decoration: none;
  transition: background 120ms;
}
.app-side a.active {
  background: rgba(111,147,180,0.10);
  color: var(--brand-dark);
  font-weight: 500;
}
.app-side a:hover:not(.active) { background: rgba(31,31,31,0.04); }
.app-side a .ic { width: 14px; height: 14px; opacity: 0.65; }
.app-side a.active .ic { opacity: 1; }
.app-side .mode-toggle {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  font-size: 12.5px;
}
.app-side .mode-toggle .opt {
  text-align: center; padding: 6px 8px; border-radius: 6px;
  color: var(--ink-60);
  border: 1px solid transparent;
  cursor: pointer;
}
.app-side .mode-toggle .opt.on {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
  font-weight: 500;
}
.app-main {
  padding: 28px 36px;
  background: var(--surface);
  position: relative;
}
.app-main .crumbs {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-40);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.app-main h3.title {
  font-family: var(--serif-text); font-size: 36px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 4px;
}
.app-main .sub { color: var(--ink-60); font-size: 13.5px; }
.app-section {
  margin-top: 22px;
}
.app-section .lbl {
  font-family: var(--serif-text); font-size: 18px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.app-section .lbl .sp {
  width: 16px; height: 16px;
  color: var(--brand);
}
.app-section p {
  font-size: 13.5px; color: var(--ink-60);
  margin-bottom: 14px;
}
.onb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
}
.onb-head {
  display: flex; justify-content: flex-end; align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-40);
  letter-spacing: 0.06em;
}
.onb-step {
  display: grid; grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.onb-step:last-child { border-bottom: none; }
.onb-step .title {
  font-family: var(--serif-text); font-size: 17px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.onb-step .desc {
  font-size: 12.5px; color: var(--ink-60); margin-top: 2px;
}
.onb-step .pills {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.onb-step .btn-row { margin-top: 12px; }

/* ---- problem cards ---- */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pain {
  padding: 34px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms, box-shadow 200ms;
}
.pain:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pain .num {
  font-family: var(--mono); font-size: 13px; color: var(--ink-40);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  display: block;
}
.pain h4 {
  font-family: var(--serif-text); font-weight: 600; font-size: 26px;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.persona-card h3 {
  font-family: var(--serif-text); font-weight: 600; font-size: 26px;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.persona-pains {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.persona-pains li {
  position: relative;
  padding-left: 15px;
  color: var(--ink-60);
  font-size: 16.5px;
  line-height: 1.55;
}
.persona-pains li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.persona-card-primary {
  border-color: var(--navy-line);
  box-shadow: var(--shadow-md);
}
.pain p { font-size: 16.5px; color: var(--ink-60); line-height: 1.55; }
.pain.card-cream .num { color: rgba(31,31,31,0.4); }
.pain.card-cream h4 { color: #1f1f1f; }
.pain.card-cream p { color: rgba(31,31,31,0.6); }

@media (max-width: 1100px) {
  .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .pain-grid { grid-template-columns: 1fr; }
}

/* ---- Was pro Kanal moeglich ist (Startseite, vor der Galerie) ----------
   Bewusst dieselbe Kartensprache wie .pain/.persona-card oben: gleiche
   Flaeche, gleicher Radius, gleicher Schatten, gleiche Hover-Anhebung.
   Neu sind nur der Kanal-Punkt in der Kopfzeile (Farben aus denselben
   --ch-*-Tokens wie die Pills im Produkt) und die Haken-Liste, die die
   Formate auffuehrt. Die Fussnote unter der Liste traegt das, was pro
   Kanal zusaetzlich entsteht (Texte, Keywords, Hashtags, Bildvorschlaege). */
.chan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.chan-card {
  padding: 34px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms, box-shadow 200ms;
  display: flex;
  flex-direction: column;
}
.chan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.chan-card .ch-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 18px;
}
.chan-card .ch-name .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.chan-card .dot.pin { background: var(--ch-pinterest); }
.chan-card .dot.ig { background: var(--ch-instagram); }
.chan-card .dot.nl { background: var(--ch-newsletter); }
.chan-card .dot.blog { background: var(--ch-blog); }
.chan-card .dot.studio { background: var(--amber); }
.chan-card .dot.shop { background: var(--rust); }
.chan-card h3 {
  font-family: var(--serif-text);
  font-weight: 600;
  font-size: 26px;
  margin-bottom: 16px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.chan-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chan-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  color: var(--ink-60);
  font-size: 16.5px;
  line-height: 1.55;
}
.chan-list li::before {
  content: "✓";
  color: var(--brand-dark);
  font-size: 13px;
  margin-top: 4px;
}
.chan-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 15px;
  color: var(--ink-60);
  line-height: 1.55;
}
/* Das Studio ist kein Plattform-Kanal, sondern die freie Flaeche daneben -
   deshalb bekommt es dieselbe Hervorhebung wie die primaere Persona-Karte. */
.chan-card-highlight {
  border-color: var(--navy-line);
  box-shadow: var(--shadow-md);
}
@media (max-width: 1100px) {
  .chan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .chan-grid { grid-template-columns: 1fr; }
  .chan-card { padding: 26px; }
}

/* ---- timeline ---- */
.timeline {
  display: grid; gap: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 11px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--border-strong), transparent);
}
.t-row {
  display: grid;
  grid-template-columns: 28px 160px 1fr;
  gap: 24px;
  padding: 16px 0;
  align-items: start;
  border-bottom: 1px dashed var(--border-soft);
}
.t-row:last-child { border-bottom: none; }
.t-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--ink-25);
  margin-top: 8px;
  margin-left: 1px;
  box-shadow: 0 0 0 4px var(--bg);
}
.t-row.now .t-dot {
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 8px rgba(111,147,180,0.18);
}
.t-when {
  font-family: var(--mono); font-size: 12px; color: var(--ink-60);
  letter-spacing: 0.04em;
  padding-top: 4px;
}
.t-what h4 {
  font-family: var(--serif-text); font-weight: 600; font-size: 19px;
  margin-bottom: 4px;
}
.t-what p { font-size: 14.5px; color: var(--ink-60); line-height: 1.5; }

/* ---- vertical timeline: pinned fullscreen scroll-through ---- */
.tl-pin-wrap { position: relative; }
.tl-pin-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.tl-pin-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
  opacity: 0; transform: translateY(28px);
  transition: opacity 500ms ease, transform 500ms ease;
  pointer-events: none;
}
.tl-pin-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tl-pin-slide .tl-year {
  font-family: var(--mono); font-size: 16px; color: var(--ink-60);
  letter-spacing: 0.08em; margin-bottom: 18px;
}
.tl-pin-slide.now .tl-year { color: var(--brand-dark); font-weight: 600; }
.tl-pin-slide h4 {
  font-family: var(--serif-text); font-weight: 600; font-size: clamp(32px,5vw,56px);
  letter-spacing: -0.02em; margin-bottom: 16px; max-width: 16ch;
}
.tl-pin-slide p { font-size: 17px; color: var(--ink-60); line-height: 1.6; max-width: 46ch; }
.tl-pin-dots {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px; z-index: 2;
}
.tl-pin-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--border-soft); }
.tl-pin-progress-bar { height: 100%; width: 0%; background: var(--brand-dark); }
.tl-dot-nav { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-25); cursor: pointer; transition: background 150ms, transform 150ms; }
.tl-dot-nav.active { background: var(--brand-dark); transform: scale(1.35); }
@media (max-width: 640px) {
  .tl-pin-dots { right: 16px; }
  .tl-pin-slide h4 { max-width: 90%; }
}

/* ---- loop diagram stage ---- */
.loop-stage {
  position: relative;
  padding: 56px;
  border-radius: 24px;
  background:
    radial-gradient(600px 400px at 50% 50%, rgba(255,255,255,0.55), transparent 70%),
    linear-gradient(180deg, #f6f3eb 0%, #efece5 100%);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* ---- capacity cards ---- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.cap-card {
  padding: 26px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 200ms, box-shadow 200ms;
  position: relative;
  overflow: hidden;
}
.cap-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cap-card .icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(111,147,180,0.08);
  display: grid; place-items: center;
  color: var(--brand-dark);
}
.cap-card h3 {
  font-size: 22px; letter-spacing: -0.015em;
}
.cap-card .solution {
  font-size: 14.5px; color: var(--ink-80); line-height: 1.5;
}
.cap-card .tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.cap-card .cta {
  margin-top: auto;
  font-size: 13.5px; color: var(--brand-dark);
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; font-weight: 500;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}
.cap-card .cta:hover { color: var(--brand-dark); }

/* ---- video grid ---- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.video-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 200ms, box-shadow 200ms;
}
.video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.video-thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
}
.video-thumb .ui-mock {
  position: absolute; inset: 18px;
  background: var(--surface);
  border-radius: 8px;
  padding: 14px;
  font-size: 11px;
  color: var(--ink-80);
  box-shadow: 0 10px 28px -10px rgba(0,0,0,0.4);
  overflow: hidden;
}
.video-thumb .play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
  z-index: 2;
}
.video-thumb .play::before {
  content: "";
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 4px;
}
.video-body {
  padding: 16px 18px 20px;
}
.video-body .duration {
  font-family: var(--mono); font-size: 11px; color: var(--ink-40);
  letter-spacing: 0.06em;
}
.video-body h4 {
  font-family: var(--serif-text); font-weight: 600; font-size: 19px;
  margin: 6px 0 6px;
  letter-spacing: -0.015em;
}
.video-body p { font-size: 13.5px; color: var(--ink-60); }

/* ---- pattern engine ---- */
.pe-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 24px;
  align-items: start;
}
.pe-card {
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.pe-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.pe-head .label {
  font-family: var(--mono); font-size: 11px; color: var(--ink-40);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pe-rec {
  padding: 26px;
}
.pe-rec h3 {
  font-family: var(--serif-text); font-size: 25px; font-weight: 600;
  line-height: 1.2; letter-spacing: -0.015em;
}
.pe-rec .conf {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: 12.5px; color: var(--brand-dark);
  background: rgba(111,147,180,0.08);
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--mono);
}
.pe-evidence {
  margin-top: 22px;
  display: grid; gap: 8px;
}
.pe-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.pe-row .src {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
}
.pe-row .src .ic {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 600;
  color: #fff;
  font-family: var(--sans);
}
.pe-row .delta {
  font-family: var(--mono); font-size: 12px;
  color: var(--green);
  font-weight: 500;
}
.pe-row .when {
  font-size: 11.5px; color: var(--ink-40);
  font-family: var(--mono);
}
.pe-action {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, #F7F7F5, #D8CDBF);
  border: 1px solid rgba(216,205,191,0.7);
  display: flex; gap: 14px; align-items: center;
}
.pe-action .lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-60);
  display: block;
  margin-bottom: 2px;
}
.pe-action p { font-size: 14.5px; color: var(--ink); }

/* audit log drawer */
.pe-audit {
  border-radius: 18px;
  background: #1a1814;
  color: #D8CDBF;
  padding: 22px;
  font-family: var(--mono); font-size: 12px;
  line-height: 1.7;
  position: sticky; top: 90px;
  box-shadow: var(--shadow-lg);
}
.pe-audit .ah {
  font-family: var(--sans);
  font-size: 12px; color: #8b8576;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.pe-audit .ah .live {
  display: inline-flex; align-items: center; gap: 6px;
  color: #84c08e;
}
.pe-audit .ah .live::before {
  content: ""; width: 6px; height: 6px; background: #84c08e; border-radius: 999px;
  box-shadow: 0 0 8px #84c08e;
}
.pe-audit .line { display: block; }
.pe-audit .k { color: #8b8576; }
.pe-audit .v { color: #F7F7F5; }
.pe-audit .ok { color: #8fd6a8; }
.pe-audit .num { color: #d9b07a; }
.pe-audit .warn { color: #e6b56c; }

/* ---- brand voice section ---- */
.bv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.bv-col {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.bv-col header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.bv-col header h4 {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--ink-80); letter-spacing: -0.005em;
  text-transform: none;
}
.bv-col .ampel {
  font-family: var(--mono); font-size: 11px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px; border-radius: 999px;
}
.ampel-r { background: #fbe1d7; color: var(--rust); }
.ampel-y { background: #f7ead0; color: var(--amber); }
.ampel-g { background: #dfeedd; color: var(--green); }
.ampel::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}
.bv-col .score-bar {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-60);
}
.bv-col .score-bar .v {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.bv-col .body {
  padding: 18px 20px;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  flex: 1;
}
.bv-col .body .miss { background: #fbe1d7; padding: 1px 4px; border-radius: 3px; }
.bv-col .body .pass { background: #dfeedd; padding: 1px 4px; border-radius: 3px; }
.bv-col .body .warn { background: #f7ead0; padding: 1px 4px; border-radius: 3px; }
.bv-col footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--ink-60);
  display: flex; justify-content: space-between;
}

.brand-dna {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 24px;
}
.dna-card {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.dna-card h5 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-60);
  margin-bottom: 14px; font-weight: 500;
}
.dna-words { display: flex; flex-wrap: wrap; gap: 6px; }
.dna-words .w {
  padding: 4px 10px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  font-size: 13px;
  font-family: var(--sans);
}
.dna-words .w.bad {
  background: #fbe1d7; border-color: rgba(178,84,55,0.25); color: var(--rust);
  text-decoration: line-through;
  text-decoration-color: rgba(178,84,55,0.5);
}
.dna-words .w.good {
  background: #dfeedd; border-color: rgba(79,138,74,0.25); color: var(--green);
}

.tone-bars { display: grid; gap: 9px; margin-top: 4px; }
.tone-row { display: grid; grid-template-columns: 90px 1fr 30px; gap: 12px; align-items: center; font-size: 12.5px; color: var(--ink-80); }
.tone-bar { height: 6px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px; overflow: hidden; }
.tone-fill { height: 100%; background: linear-gradient(90deg, var(--brand-light), var(--brand-dark)); border-radius: 999px; }
.tone-row .v { font-family: var(--mono); font-size: 11px; color: var(--ink-60); text-align: right; }

/* ---- creative section ---- */
.cr-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
}
.cr-recipe {
  padding: 26px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.cr-recipe h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-60);
  font-weight: 500;
  margin-bottom: 14px;
}
.cr-recipe .input-row {
  display: grid; grid-template-columns: 100px 1fr; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 14px;
}
.cr-recipe .input-row .k {
  color: var(--ink-60); font-size: 12.5px;
}
.cr-recipe .input-row .v { color: var(--ink); }
.cr-outputs {
  display: grid; gap: 10px;
}
.cr-out {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 96px 1fr;
}
.cr-out .preview {
  background: linear-gradient(135deg, #2c2c2c, #1a1a1a);
  position: relative;
  overflow: hidden;
}
.cr-out .preview.cream {
  background: linear-gradient(135deg, #F7F7F5, #D8CDBF);
}
.cr-out .preview.warm {
  background: linear-gradient(135deg, #D8CDBF, #6F93B4);
}
.cr-out .preview .tag-mini {
  position: absolute; left: 8px; bottom: 8px;
  font-family: var(--mono); font-size: 9px;
  background: rgba(0,0,0,0.5); color: #fff;
  padding: 3px 6px; border-radius: 4px;
  letter-spacing: 0.06em;
}
.cr-out .meta {
  padding: 13px 15px;
}
.cr-out .meta .ty {
  font-size: 11px; font-family: var(--mono); color: var(--ink-40);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.cr-out .meta h5 {
  font-family: var(--serif-text); font-size: 16px; font-weight: 600;
  margin: 4px 0; letter-spacing: -0.01em;
}
.cr-out .meta .ln {
  font-size: 12.5px; color: var(--ink-60);
}

/* ---- shop manager ---- */
.sm-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.sm-col {
  border-radius: 18px;
  padding: 26px;
  border: 1px solid var(--border);
}
.sm-before {
  background: var(--surface-2);
}
.sm-after {
  background: linear-gradient(180deg, #f6f3eb, #efece5);
  border-color: rgba(216,205,191,0.7);
}
.sm-col h4 {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 6px;
}
.sm-col .title {
  font-family: var(--serif-text); font-size: 22px; font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}
.sm-items { display: grid; gap: 7px; }
.sm-item {
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px;
}
.sm-item .src {
  font-family: var(--mono); font-size: 11px; color: var(--ink-40);
}
.sm-after .sm-item .st {
  font-size: 11px; color: var(--green);
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);
}
.sm-after .sm-item .st::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--green);
}

/* ---- comparison table ---- */
.cmp-table {
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.cmp-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border-soft);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-row > div {
  padding: 18px 22px;
  font-size: 14.5px;
  line-height: 1.5;
}
.cmp-row .label {
  font-family: var(--mono); font-size: 11px; color: var(--ink-60);
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--surface-2);
  display: flex; align-items: center;
}
.cmp-row .neg { color: var(--ink-60); }
.cmp-row .pos {
  color: var(--ink); font-weight: 500;
  background: linear-gradient(180deg, rgba(111,147,180,0.06), rgba(111,147,180,0.02));
}
.cmp-head {
  background: var(--surface-2);
}
.cmp-head .label { background: transparent; }
.cmp-head > div {
  font-family: var(--serif-text); font-size: 18px; font-weight: 600;
  color: var(--ink);
}
.cmp-head .pos {
  color: var(--brand-dark);
  background: linear-gradient(180deg, rgba(111,147,180,0.08), rgba(111,147,180,0.02));
}

/* ---- pratfall (was nicht funktioniert) ---- */
.pratfall {
  border-radius: 24px;
  background:
    radial-gradient(700px 400px at 90% 0%, rgba(183,128,52,0.10), transparent 60%),
    linear-gradient(180deg, #f6f3eb 0%, #efece5 100%);
  border: 1px solid var(--border);
  padding: clamp(40px, 5vw, 64px);
}
.pratfall-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 28px;
}
.pf-list {
  display: grid; gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.pf-list li {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 12px; align-items: flex-start;
}
.pf-list .badge {
  font-family: var(--mono); font-size: 10px;
  background: rgba(178,84,55,0.10);
  color: var(--rust);
  padding: 3px 6px; border-radius: 5px;
  letter-spacing: 0.06em;
  margin-top: 3px;
  text-align: center;
}
.pf-list .badge.soon { background: rgba(183,128,52,0.10); color: var(--amber); }
.pf-list h5 {
  font-family: var(--serif-text); font-size: 16px; font-weight: 600;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.pf-list p { font-size: 13.5px; color: var(--ink-60); line-height: 1.5; }

/* ---- fit section ---- */
.fit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.fit-card {
  padding: 28px;
  border-radius: 18px;
  border: 1px solid var(--border);
}
.fit-yes {
  background: linear-gradient(180deg, rgba(111,147,180,0.06), rgba(111,147,180,0.01));
  border-color: rgba(111,147,180,0.2);
}
.fit-no {
  background: var(--surface-2);
}
.fit-card h3 {
  font-size: 22px; letter-spacing: -0.015em;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.fit-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fit-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  font-size: 14.5px; color: var(--ink-80);
  line-height: 1.45;
}
.fit-list li .ic {
  margin-top: 2px;
}

/* ---- BDS card (Reality-Anchor) ---- */
.bds-card {
  border-radius: 28px;
  background:
    radial-gradient(760px 320px at 18% -5%, rgba(111, 147, 180, 0.30), transparent 62%),
    linear-gradient(180deg, rgba(111, 147, 180, 0.16) 0%, rgba(111, 147, 180, 0) 100%), #0F2C47;
  color: rgba(247, 247, 245, 0.88);
  padding: clamp(40px, 5vw, 64px);
  border: 1px solid rgba(111, 147, 180, 0.38);
  position: relative;
  overflow: hidden;
}
.bds-card h2 { color: #F7F7F5; }
.bds-card .eyebrow { color: #6F93B4; }
.bds-card p { color: rgba(247, 247, 245, 0.80); }
.bds-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  margin-top: 32px;
}
.bds-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
  margin-top: 28px;
}
.bds-stat {
  padding: 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(111, 147, 180, 0.28);
}
.bds-stat .v {
  font-family: var(--serif-text); font-size: 30px; font-weight: 600;
  color: #F7F7F5;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.bds-stat .l {
  font-size: 12.5px; color: rgba(247, 247, 245, 0.68);
  margin-top: 6px;
}
.bds-mock {
  background: var(--surface);
  border-radius: 14px;
  padding: 18px;
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
  font-size: 13px;
}

/* ---- pricing ---- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.price-card {
  padding: 28px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.price-card.featured {
  background: linear-gradient(180deg, var(--surface), #f6f3eb);
  border-color: rgba(111,147,180,0.25);
  box-shadow: var(--shadow-md);
}
.price-card .badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--brand-dark);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 500;
}
html[data-theme="dark"] .price-card .badge { color: #0F2C47; }
.price-card .name {
  font-family: var(--serif-text); font-size: 26px; font-weight: 600;
  letter-spacing: -0.015em;
}
.price-card .tagline {
  font-size: 13.5px; color: var(--ink-60);
  margin: 6px 0 18px;
  line-height: 1.5;
}
.price-card .price {
  font-family: var(--serif-text);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 6px;
}
.price-card .price .per {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink-60);
  font-weight: 400;
}
.price-card .quotas {
  margin: 22px 0 22px;
  display: grid; gap: 9px;
  border-top: 1px dashed var(--border-soft);
  border-bottom: 1px dashed var(--border-soft);
  padding: 18px 0;
}
.quota-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  font-size: 13.5px;
}
.quota-row .v {
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  font-weight: 500;
}
.quota-row .k { color: var(--ink-60); }
.price-card .feats {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
  margin-bottom: 22px;
}
.price-card .feats li {
  font-size: 13.5px;
  color: var(--ink-80);
  display: grid; grid-template-columns: 18px 1fr; gap: 8px;
}
.price-card .feats li::before {
  content: "✓"; color: var(--brand-dark); font-size: 12.5px; margin-top: 1px;
}
.price-card .btn { width: 100%; justify-content: center; margin-top: auto; }

.byok {
  margin-top: 24px;
  padding: 28px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-items: center;
}
.byok h4 { font-family: var(--serif-text); font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.byok p { font-size: 14px; color: var(--ink-60); line-height: 1.55; }

/* output table */
.output-table {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.ot-row {
  display: grid; grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--border-soft);
}
.ot-row:last-child { border-bottom: none; }
.ot-row > div { padding: 16px 22px; }
.ot-row .what {
  font-family: var(--serif-text); font-size: 16px; font-weight: 600;
  background: var(--surface-2);
  display: flex; align-items: center; gap: 10px;
}
.ot-row .what .dt {
  width: 8px; height: 8px; border-radius: 999px; background: var(--brand);
}
.ot-row .when { font-size: 14px; color: var(--ink-80); line-height: 1.5; }

/* ---- final CTA ---- */
.final {
  position: relative;
  padding: clamp(44px, 5.5vw, 76px);
  border-radius: 28px;
  background:
    radial-gradient(800px 400px at 80% 20%, rgba(111,147,180,0.10), transparent 60%),
    radial-gradient(600px 400px at 20% 80%, rgba(216,205,191,0.45), transparent 60%),
    linear-gradient(180deg, #f6f3eb 0%, #efece5 100%);
  border: 1px solid var(--border);
  text-align: center;
  overflow: hidden;
}
.final, .final h2, .final p { color: #1f1f1f; }
.final .serial { color: rgba(31,31,31,0.4); }
.final h2 { max-width: 26ch; margin: 0 auto; font-size: clamp(28px, 3.4vw, 44px); }
.final p { max-width: 56ch; margin: 14px auto 26px; }
.final .why-callout, .final .why-callout p, .final .why-callout .name { color: #1f1f1f; }
.final .why-callout .role { color: rgba(31,31,31,0.6); }
.final .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- loslegen (booking + email) ---- */
.start-primary { margin-top: 0; padding: clamp(56px,8vw,96px) clamp(32px,6vw,64px); border-radius: 24px; text-align: center; background: radial-gradient(700px 300px at 80% 20%, rgba(111,147,180,0.10), transparent 60%), radial-gradient(500px 300px at 20% 80%, rgba(216,205,191,0.45), transparent 60%), linear-gradient(180deg, #f6f3eb 0%, #efece5 100%); border: 1px solid var(--border); color: #1f1f1f; }
.start-primary, .start-primary h2, .start-primary h1 { color: #1f1f1f; }
.start-label { display: block; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(31,31,31,0.45); margin-bottom: 16px; }
.start-primary h2, .start-primary h1 { font-size: clamp(36px,5vw,56px); line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.02em; }
.start-primary > p { color: rgba(31,31,31,0.75); font-size: clamp(16px,1.6vw,19px); line-height: 1.55; max-width: 56ch; margin: 0 auto 36px; }
.start-primary .btn { border: none; cursor: pointer; font-family: var(--sans); }
.start-cal-btn { padding: 20px 40px !important; font-size: 17px !important; border-radius: 999px; }
.start-meta { margin: 14px 0 0 !important; font-size: 12.5px !important; color: rgba(31,31,31,0.45) !important; max-width: none !important; }
.start-divider { display: flex; align-items: center; gap: 14px; margin: 30px 0; color: var(--ink-40); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono); }
.start-divider::before, .start-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.start-secondary { text-align: center; }
.start-secondary > p { color: var(--ink-60); font-size: 14.5px; margin-bottom: 10px; }
.start-email-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif-text); font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border-strong); padding-bottom: 2px; transition: color 180ms, border-color 180ms; }
.start-email-link:hover { color: var(--brand-dark); border-color: var(--brand-dark); }
.start-email-link .arrow { transition: transform 180ms; }
.start-email-link:hover .arrow { transform: translateX(3px); }
.start-who { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 40px; padding-top: 24px; border-top: 1px dashed var(--border-soft); }
.start-who .name { font-family: var(--serif-text); font-weight: 600; font-size: 14px; }
.start-who .role { font-size: 12px; color: var(--ink-60); }

/* ---- footer (dark, oversized wordmark) ---- */.footer-dark { background: var(--bg-warm); margin-top: 60px; }
.footer-dark-top { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 70px 0 50px; flex-wrap: wrap; }
.footer-wordmark { display: flex; align-items: center; gap: 0.02em; font-family: var(--serif); font-weight: 600; font-size: clamp(64px,11vw,168px); line-height: 0.85; letter-spacing: -0.03em; color: var(--ink); }
.footer-logo-mark { width: auto; height: 1.05em; aspect-ratio: 468/407; flex: none; background: none; -webkit-mask-image: url('mateeria-mark.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url('mateeria-mark.svg'); mask-repeat: no-repeat; mask-position: center; mask-size: contain; background-color: var(--brand-dark); }
html[data-theme="dark"] .footer-logo-mark { background-color: var(--ink); }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-cols h5 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 16px; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-cols a { color: var(--ink-80); text-decoration: none; font-size: 14.5px; transition: color 150ms; }
.footer-cols a:hover { color: var(--brand-dark); }
.footer-dark-base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 24px 0 32px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-40); }
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { color: var(--ink-40); text-decoration: none; transition: color 150ms; }
.footer-legal a:hover { color: var(--brand-dark); }
.footer-dark-base .mono { font-family: var(--mono); font-size: 11.5px; }
@media (max-width: 820px) {
  .footer-dark-top { flex-direction: column; align-items: flex-start; padding: 50px 0 36px; }
  .footer-cols { gap: 36px; }
  .footer-wordmark { font-size: clamp(56px,20vw,96px); }
}
footer {
  padding: 60px 0 36px;
  border-top: 1px solid var(--border);
  margin-top: 60px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid h5 {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 16px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-grid a {
  color: var(--ink-80);
  font-size: 14px;
  text-decoration: none;
}
.footer-grid a:hover { color: var(--brand-dark); }
.footer-tag {
  font-family: var(--serif-text); font-size: 18px;
  color: var(--ink-80); line-height: 1.4;
  max-width: 30ch;
  margin-top: 14px;
}
.footer-base {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--ink-40);
}

/* fade-in on scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms }
.reveal-stagger.in > *:nth-child(n+7) { transition-delay: 460ms }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* responsive */
@media (max-width: 1080px) {
  .app-body { grid-template-columns: 220px 1fr; }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .pe-stage { grid-template-columns: 1fr; }
  .pe-audit { position: static; }
  .cr-stage { grid-template-columns: 1fr; }
  .sm-flow { grid-template-columns: 1fr; }
  .bv-grid { grid-template-columns: 1fr; }
  .brand-dna { grid-template-columns: 1fr; }
  .bds-grid { grid-template-columns: 1fr; gap: 28px; }
  .fit-grid { grid-template-columns: 1fr; }
  .pratfall-grid { grid-template-columns: 1fr; gap: 24px; }
  .price-grid { grid-template-columns: 1fr; }
  .byok { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cmp-row { grid-template-columns: 1fr; }
  .cmp-row .label { border-bottom: 1px solid var(--border-soft); }
  .nav-links { display: none; }
  .t-row { grid-template-columns: 28px 1fr; }
  .t-when { grid-column: 2; padding-top: 0; font-size: 11px; }
  .t-what { grid-column: 2; }
  .ot-row { grid-template-columns: 1fr; }
  .app-topbar { grid-template-columns: 1fr; gap: 10px; }
  .app-topbar .ws { justify-content: center; }
  .mode-pills { justify-content: flex-start; overflow-x: auto; }
  .app-topbar .kbd { display: none; }
  .app-body { grid-template-columns: 1fr; }
  .app-side { display: none; }
}
.nav-toggle { display: none; }
@media (max-width: 1080px) {
  .nav-inner { flex-wrap: wrap; position: relative; }
  .nav-toggle {
    order: 2; display: grid; place-items: center; flex: none;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer;
  }
  .brand { order: 1; }
  .nav-links, .nav-cta {
    display: none; flex-direction: column; align-items: stretch; flex-basis: 100%;
  }
  .nav-links { order: 3; gap: 2px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
  .nav-links a { padding: 12px 14px; }
  .nav-cta { order: 4; gap: 8px; margin-top: 10px; }
  .nav-cta .btn { justify-content: center; }
  .nav-cta .language-switch, .nav-cta .lang-toggle, .nav-cta .theme-toggle { align-self: flex-start; width: auto; }
  .nav-cta .theme-toggle { width: 32px; }
  .nav-inner.is-open .nav-links, .nav-inner.is-open .nav-cta { display: flex; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 44px; }
  section { padding: 60px 0; }
}


/* ========================================================
   Multi-Page Page-Shell — Sub-Page Components
   ======================================================== */

/* page hero (slim, for sub-pages) */
.page-hero {
  padding-top: clamp(50px, 6vw, 90px);
  padding-bottom: clamp(40px, 5vw, 70px);
}
.page-hero .crumbs {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 14px;
  display: flex; gap: 8px; align-items: center;
}
.page-hero .crumbs a { color: var(--ink-60); text-decoration: none; }
.page-hero .crumbs a:hover { color: var(--brand-dark); }
.page-hero .crumbs .sep { opacity: 0.5; }
.page-hero h1 {
  font-size: clamp(40px, 5.5vw, 70px);
  line-height: 1.04;
  max-width: 22ch;
  margin-bottom: 22px;
}
.page-hero .lede {
  max-width: 60ch;
}
.page-hero .head-grid {
  display: block;
}
.page-hero .meta-side {
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px;
  border-radius: 14px;
  background: var(--surface-glass);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-glass);
}
.page-hero .meta-side .row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.page-hero .meta-side .row:last-child { border-bottom: none; }
.page-hero .meta-side .row .k { color: var(--ink-60); }
.page-hero .meta-side .row .v { font-family: var(--mono); font-size: 12px; color: var(--ink); }

/* large video block (reusable) */
.video-lg {
  position: relative;
  border-radius: 20px;
  aspect-ratio: 16/9;
  background: radial-gradient(ellipse at center, #2a2a2a, #161614 70%);
  border: 1px solid rgba(31,31,31,0.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 30px 80px -28px rgba(31,31,31,0.32),
    0 12px 30px -18px rgba(31,31,31,0.18);
  overflow: hidden;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.4,0,0.2,1), box-shadow 220ms;
}
.video-lg:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 40px 100px -28px rgba(31,31,31,0.42),
    0 18px 40px -18px rgba(31,31,31,0.22);
}
.video-lg .thumb {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #2a2a2a 0%, #1a1a1a 100%);
}
.video-lg .thumb-content {
  position: absolute; inset: 22px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 40px -14px rgba(0,0,0,0.5);
  padding: 18px 22px;
  overflow: hidden;
}
.video-lg .play-lg,
.video-md .play-md {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  display: grid; place-items: center;
  z-index: 2;
  transition: transform 220ms, box-shadow 220ms;
}
.video-lg .play-lg { width: 72px; height: 72px; box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.video-md .play-md { width: 56px; height: 56px; box-shadow: 0 8px 24px rgba(0,0,0,0.32); }
.video-lg:hover .play-lg { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 22px 50px rgba(0,0,0,0.45); }
.video-lg .play-lg::before {
  content: ""; border-style: solid; border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 4px;
}
.video-md .play-md::before {
  content: ""; border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 3px;
}
.video-lg .badge-time {
  position: absolute; left: 16px; bottom: 16px;
  z-index: 2;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  font-family: var(--mono); font-size: 11px;
  color: #1f1f1f;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(0,0,0,0.05);
}
.video-lg .badge-time::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; background: #d94343;
}

/* medium video card */
.video-md {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, #2a2a2a, #1a1a1a);
  border: 1px solid var(--border);
  aspect-ratio: 16/10;
  cursor: pointer;
  transition: transform 200ms, box-shadow 200ms;
  box-shadow: var(--shadow-sm);
}
.video-md:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.video-md .thumb-content {
  position: absolute; inset: 18px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px -10px rgba(0,0,0,0.4);
  padding: 14px;
  overflow: hidden;
  font-size: 11px;
  color: var(--ink-80);
}
.video-md .badge-time {
  position: absolute; left: 12px; bottom: 12px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  font-family: var(--mono); font-size: 10px;
  color: #1f1f1f;
}

/* video-tile (gallery) */
.video-tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms, box-shadow 200ms;
}
.video-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.video-tile .body {
  padding: 14px 18px 18px;
}
.video-tile .body .meta-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-40);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.video-tile h4 {
  font-family: var(--serif-text); font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  line-height: 1.2;
}
.video-tile p { font-size: 13px; color: var(--ink-60); line-height: 1.45; }

/* feature block (text + video side by side, alternating) */
.feat-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
  padding: clamp(56px, 6vw, 90px) 0;
  border-bottom: 1px solid var(--border-soft);
}
.feat-block:last-child { border-bottom: none; }
.feat-block.reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.feat-block.reverse .feat-text { order: 2; }
.feat-block.reverse .feat-media { order: 1; }
.feat-block .feat-text .num {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.08em; color: var(--brand-dark);
  margin-bottom: 12px;
}
.feat-block .feat-text h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.feat-block .feat-text .desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-80);
  margin-bottom: 18px;
}
.feat-block .feat-text ul.checks {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: grid; gap: 10px;
}
.feat-block .feat-text ul.checks li {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  font-size: 14.5px; color: var(--ink-80);
}
.feat-block .feat-text ul.checks li::before {
  content: "✓"; color: var(--brand-dark); font-size: 13px; margin-top: 2px;
}
.feat-block .feat-text .tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px;
}
.confidence-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px;
}
.confidence-legend .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-60);
}
.confidence-legend .lg-pill { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.confidence-legend .lg-pill.sure { background: var(--green-soft); color: var(--green); }
.confidence-legend .lg-pill.maybe { background: var(--amber-soft); color: var(--amber); }
.confidence-legend .lg-pill.try { background: var(--surface); color: var(--ink-60); border: 1px solid var(--border); }
.feat-block .feat-text .feat-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--brand-dark);
  text-decoration: none; font-weight: 500;
}
.feat-block .feat-text .feat-cta:hover { color: var(--brand-dark); }
.feat-block .feat-text .feat-cta .arrow { transition: transform 180ms; }
.feat-block .feat-text .feat-cta:hover .arrow { transform: translateX(2px); }

/* "Why I built this" callout — trust block (matches BDS-style glass card) */
.why-callout {
  display: grid;
  gap: 14px;
  padding: 26px 28px;
  border-radius: 16px;
  background: var(--surface-glass);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  box-shadow: var(--shadow-glass);
  margin: 28px 0;
}
.why-callout .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.why-callout > p {
  font-family: var(--serif-text);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
}
.why-callout .who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.why-callout .who .avatar {
  width: 42px; height: 42px; font-size: 17px;
}
.why-callout .who .name {
  font-family: var(--serif-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.why-callout .who .role {
  font-size: 12px;
  color: var(--ink-60);
  margin-top: 2px;
}

/* mini app/sidebar mockup chip for inline use */
.ui-chip {
  display: inline-flex;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-size: 12.5px;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  font-family: var(--mono);
  letter-spacing: -0.005em;
}

/* page section with eyebrow + headline + content */
.page-section {
  padding: clamp(60px, 7vw, 100px) 0;
}
.page-section .head {
  max-width: 720px;
  margin-bottom: 40px;
}
.page-section .head h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.02em;
  margin-top: 12px;
}

/* shared mini-cards for feature overview */
.feat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.feat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms, box-shadow 200ms;
}
.feat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feat-card .vid-preview {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(160deg, #2a2a2a, #1a1a1a);
  overflow: hidden;
}
.feat-card .vid-preview .inner {
  position: absolute; inset: 14px;
  border-radius: 6px;
  background: var(--surface);
  padding: 10px 12px;
  font-size: 10px;
  color: var(--ink-80);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
}
.feat-card .vid-preview .play-sm {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  display: grid; place-items: center;
  z-index: 2;
}
.feat-card .vid-preview .play-sm::before {
  content: ""; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 3px;
}
.feat-card .vid-preview .badge-time {
  position: absolute; left: 10px; bottom: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  font-family: var(--mono); font-size: 10px;
  color: #1f1f1f;
}
.feat-card .body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column;
  flex: 1;
}
.feat-card .body .label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--ink-40);
  margin-bottom: 6px;
}
.feat-card .body h3 {
  font-family: var(--serif-text); font-size: 20px; font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.feat-card .body p { font-size: 13.5px; color: var(--ink-60); line-height: 1.5; }
.feat-card .body .more {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border-soft);
  font-size: 13px; color: var(--brand-dark);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}

/* trust strip — small badges */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 22px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--ink-60);
}
.trust-strip .item {
  display: inline-flex; align-items: center; gap: 8px;
}
.trust-strip svg { color: var(--brand-dark); }

/* page CTA — full-width bottom strip */
.page-cta {
  margin-top: clamp(40px, 5vw, 70px);
  padding: clamp(48px, 6vw, 72px);
  border-radius: 24px;
  text-align: center;
  background:
    radial-gradient(700px 300px at 80% 20%, rgba(111,147,180,0.10), transparent 60%),
    radial-gradient(500px 300px at 20% 80%, rgba(216,205,191,0.45), transparent 60%),
    linear-gradient(180deg, #f6f3eb 0%, #efece5 100%);
  border: 1px solid var(--border);
  color: #1f1f1f;
}
.page-cta h2 { font-size: clamp(28px, 3.4vw, 42px); color: #1f1f1f; }
.page-cta p { color: rgba(31,31,31,0.8); margin: 14px auto 26px; max-width: 56ch; }
.page-cta .serial { color: rgba(31,31,31,0.4); }
.page-cta .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* responsive overrides for new components */
@media (max-width: 980px) {
  .feat-block { grid-template-columns: 1fr; gap: 24px; }
  .feat-block.reverse { grid-template-columns: 1fr; }
  .feat-block.reverse .feat-text { order: 1; }
  .feat-block.reverse .feat-media { order: 2; }
}


/* ========================================================
   Modell-Stack — model grid + card
   ======================================================== */

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.model-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform 200ms, box-shadow 200ms;
}
.model-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.model-card .model-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.model-card .model-mono {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 14px; font-weight: 500;
  flex: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 2px 6px rgba(31,31,31,0.16);
  letter-spacing: -0.02em;
}
.model-card .name {
  font-family: var(--serif-text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.model-card .provider {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-40);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.model-card .tagline {
  font-family: var(--serif-text);
  font-size: 15.5px;
  line-height: 1.4;
  font-style: italic;
  color: var(--ink-80);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border-soft);
}
.model-card .model-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  font-size: 13px;
  line-height: 1.45;
  padding: 7px 0;
}
.model-card .model-row .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding-top: 2px;
}
.model-card .model-row + .model-row {
  border-top: 1px dashed var(--border-soft);
}

@media (max-width: 600px) {
  .model-card .model-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}


/* ========================================================
   Pratfall · prominenter Auftritt — bigger icons
   ======================================================== */

.pf-list-lg {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.pf-list-lg > li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.pf-list-lg > li:first-child { padding-top: 0; }
.pf-list-lg > li:last-child { border-bottom: none; padding-bottom: 0; }

.pf-list-lg .pf-icon-x,
.pf-list-lg .pf-icon-soon {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: grid; place-items: center;
  flex: none;
  margin-top: 2px;
}
.pf-list-lg .pf-icon-x {
  background: rgba(178,84,55,0.10);
  color: var(--rust);
  border: 1px solid rgba(178,84,55,0.20);
}
.pf-list-lg .pf-icon-soon {
  background: rgba(183,128,52,0.10);
  color: var(--amber);
  border: 1px solid rgba(183,128,52,0.20);
}

.pf-list-lg h4 {
  font-family: var(--serif-text);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.2;
}
.pf-list-lg p {
  font-size: 14.5px;
  color: var(--ink-80);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .pratfall > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}


/* ========================================================
   Manifest · darker, contrasting two-column anti-SaaS-bro
   ======================================================== */

.manifest {
  position: relative;
  padding: clamp(40px, 5vw, 72px);
  border-radius: 28px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  overflow: hidden;
}
.manifest::before {
  content: none;
}

.manifest-head {
  max-width: 720px;
  margin-bottom: 44px;
}
.manifest-head .serial {
  color: var(--ink);
}
.manifest-h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 16px;
}
.manifest-em {
  font-style: italic;
  color: var(--brand-dark);
  font-weight: 500;
}
.manifest-lede {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-80);
  max-width: 60ch;
}

.manifest-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.manifest-col-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.manifest-col-head.not { border-right: 1px solid var(--border); }
.manifest-col-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.manifest-col-head.not .manifest-col-eyebrow {
  color: #b25437;
}
.manifest-col-head.instead .manifest-col-eyebrow {
  color: #84c08e;
}
.manifest-col-eyebrow em {
  font-style: italic;
  font-weight: 600;
}

.manifest-cell {
  padding: 20px 22px;
  font-size: 16px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-soft);
}
.manifest-grid .manifest-cell:nth-last-child(-n+2) {
  border-bottom: none;
}
.manifest-cell.not {
  border-right: 1px solid var(--border-soft);
  font-family: var(--serif-text);
  color: var(--ink-60);
}
.manifest-cell.not s {
  text-decoration: line-through;
  text-decoration-color: rgba(220,140,110,0.55);
  text-decoration-thickness: 1.5px;
}
.manifest-cell.instead {
  color: var(--ink);
  font-family: var(--serif-text);
  font-weight: 500;
}

.manifest-foot {
  margin-top: 40px;
}
.manifest-closer {
  font-family: var(--serif-text);
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
}
.manifest-closer em {
  font-style: italic;
  color: var(--brand-dark);
}

@media (max-width: 980px) {
  .manifest-grid { grid-template-columns: 1fr; }
  .manifest-col-head.not, .manifest-cell.not { border-right: none; }
  .manifest-col-head.not, .manifest-cell.not { background: rgba(178,84,55,0.04); }
}


/* ========================================================
   Language toggle (EN ↔ DE)
   ======================================================== */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--ink-80);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 160ms, border-color 160ms, color 160ms, transform 160ms;
  margin-right: 4px;
}
.lang-toggle:hover {
  background: rgba(255,255,255,0.96);
  border-color: var(--border-strong);
  color: var(--ink);
}
.lang-toggle:active { transform: scale(0.96); }
.lang-toggle:disabled {
  opacity: 0.5;
  cursor: progress;
}
.theme-toggle { width: 32px; min-width: 32px; padding: 0; }
.theme-toggle svg { display: block; }
html[data-theme="dark"] .lang-toggle {
  background: rgba(255,255,255,0.08);
  border-color: var(--border);
  color: var(--ink-80);
}
html[data-theme="dark"] .lang-toggle:hover {
  background: rgba(255,255,255,0.16);
  border-color: var(--border-strong);
  color: var(--ink);
}

/* ========================================================
   Channel Grid (5 cards on home, also reusable)
   ======================================================== */

.channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1180px) { .channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .channel-grid { grid-template-columns: 1fr; } }

.channel-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
  position: relative;
}
.channel-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--ch-color, var(--border-strong));
}
.channel-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ch-color);
  opacity: 0;
  transition: opacity 200ms;
}
.channel-card:hover::before { opacity: 1; }

.ch-mock {
  aspect-ratio: 4/3;
  position: relative;
}
.ch-mock image-slot { width: 100%; height: 100%; }
.ch-mock-logo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  color: rgba(255,255,255,0.92);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}
.ch-mock-tag {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  font-family: var(--mono);
  font-size: 10px;
  color: #1f1f1f;
  letter-spacing: 0.06em;
}
.ch-mock-tag svg { width: 11px; height: 11px; flex-shrink: 0; }

.ch-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ch-body .ch-label {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 8px;
}
.ch-body .ch-label .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
}
.ch-body .ch-label .ch-ic {
  width: 15px; height: 15px;
  flex: none;
  color: var(--ch-color);
  display: block;
}
.ch-body .ch-phase {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(183,128,52,0.12);
  color: var(--amber);
  letter-spacing: 0.04em;
  text-transform: none;
}
.ch-body h3 {
  font-family: var(--serif-text);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.ch-body p {
  font-size: 13px;
  color: var(--ink-60);
  line-height: 1.5;
}
.ch-body .ch-cta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--border-soft);
  font-size: 16px;
  font-weight: 500;
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ch-body .ch-cta .arrow { transition: transform 180ms; }
.channel-card:hover .ch-cta .arrow { transform: translateX(2px); }

/* ---- 3-Schritte (So funktioniert's) ---- */
.steps3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
  counter-reset: step3;
}
.step3 {
  position: relative;
  padding: 30px 26px 28px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
}
.step3-num {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-light), var(--navy));
  color: #fff;
  font-family: var(--serif-text);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(15,44,71,0.3);
}
.step3 h3 {
  font-family: var(--serif-text);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.step3 p {
  font-size: 14px;
  color: var(--ink-60);
  line-height: 1.55;
}
@media (max-width: 760px) {
  .steps3 { grid-template-columns: 1fr; }
}

/* Ergebnis-Galerie */
.rg-filterbar{background:var(--bg);border-bottom:1px solid var(--border)}
.rg-filterbar-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;overflow-x:auto;padding:22px 0;scrollbar-width:none}
.rg-filterbar-inner::-webkit-scrollbar{display:none}
.rg-fgroup{display:inline-flex;align-items:center;gap:2px;flex:none;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px}
.rg-filter-divider{display:none}
.rg-flink{background:none;border:none;padding:8px 16px;border-radius:999px;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-60);cursor:pointer;white-space:nowrap;transition:background 150ms,color 150ms}
.rg-flink:hover{color:var(--ink)}
.rg-flink.active{color:var(--brand-dark);background:var(--border-soft)}
.rg-grid{column-width:360px;column-gap:22px}
.rg-card{position:relative;break-inside:avoid;margin-bottom:22px;border-radius:14px;overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-sm);cursor:zoom-in}
.rg-media{width:100%;aspect-ratio:var(--rg-ratio,4/5)}
.rg-media image-slot{width:100%;height:100%;display:block}
.rg-tag{position:absolute;left:10px;bottom:10px;right:10px;display:flex;align-items:center;gap:8px;background:rgba(18,16,15,0.55);backdrop-filter:blur(5px);padding:6px 12px 6px 6px;border-radius:10px;max-width:calc(100% - 20px);opacity:0;transform:translateY(4px);transition:opacity 200ms,transform 200ms;pointer-events:none}
.rg-card:hover .rg-tag,.rg-card.rg-expanded .rg-tag{opacity:1;transform:translateY(0)}
.rg-tag-icon{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,0.12);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:none}
.rg-tag-text{min-width:0}
.rg-tag-title{display:block;font-size:12px;font-weight:500;letter-spacing:0.01em;color:rgba(255,255,255,0.92);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-tag-sub{display:flex;align-items:center;gap:5px;font-size:10.5px;color:rgba(255,255,255,0.58);margin-top:1px}
.rg-lightbox{position:fixed;inset:0;background:rgba(20,17,14,0.88);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:6vh 5vw;opacity:0;pointer-events:none;transition:opacity 220ms;z-index:400}
.rg-lightbox.open{opacity:1;pointer-events:auto}
.rg-lightbox-stage{display:flex}
.rg-lightbox-close{position:fixed;top:22px;right:26px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 150ms}
.rg-lightbox-close:hover{background:rgba(255,255,255,0.18)}
.rg-card.rg-expanded{width:min(90vw,900px);max-height:88vh;margin:0;cursor:zoom-out;box-shadow:var(--shadow-lg)}
.rg-card.rg-expanded .rg-media{aspect-ratio:auto;height:100%;max-height:88vh}
.media-lightbox{position:fixed;inset:0;z-index:300;background:rgba(20,17,14,0.88);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:6vh 5vw;opacity:0;pointer-events:none;transition:opacity 220ms}
.media-lightbox.open{opacity:1;pointer-events:auto}
.media-lightbox-close{position:absolute;top:20px;right:24px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,0.12);color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 150ms;z-index:2}
.media-lightbox-close:hover{background:rgba(255,255,255,0.22)}
@media (max-width:640px){.rg-tag-sub{display:none}.rg-filterbar-inner{gap:10px}.rg-fgroup{gap:2px}}

/* ========================================================
   Medien-Pipeline — Skeleton fuer befuellte Bild-Slots
   (scripts/medien-bauen.mjs ersetzt <image-slot> durch
   <picture class="slot-img">; image-slot.js selbst setzt fuer
   dieses Element das Attribut data-loaded, sobald das <img>
   geladen ist). Nur bereits befuellte Slots shimmern - ein noch
   leerer <image-slot>-Platzhalter ist davon unberuehrt und bleibt
   exakt so ruhig wie bisher.
   ======================================================== */
.slot-img {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(
    100deg,
    var(--border-soft) 25%,
    var(--border-strong) 50%,
    var(--border-soft) 75%
  );
  background-size: 200% 100%;
  /* Der Shimmer laeuft erst nach einer kurzen Wartezeit los. Seit die Bilder
     vorausladen (siehe scripts/medien-bauen.mjs, fetchpriority="low") sind
     sie im Normalfall lange vorher da - ein sofort startendes Glitzern waere
     dann nur ein kurzes Aufblitzen ohne Informationswert. Bleibt eine
     Verbindung wirklich langsam, erscheint er nach 450 ms wie gehabt. */
  animation: slot-img-shimmer 1.6s ease-in-out 450ms infinite;
}
.slot-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s ease;
}
.slot-img[data-loaded] {
  animation: none;
  background: none;
}
.slot-img[data-loaded] img {
  opacity: 1;
}
/* War das Bild beim ersten Blick bereits vollstaendig da, gibt es nichts
   einzublenden (siehe image-slot.js). */
.slot-img[data-instant] img {
  transition: none;
}
@keyframes slot-img-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .slot-img { animation: none; background: var(--border-soft); }
  .slot-img img { transition: none; }
}
/* Eigenes, selbst gehostetes <video> direkt als Slot-Element (kein
   <picture>-Wrapper noetig, das poster-Attribut liefert das Sofortbild) -
   fuer Pinterest-Beispiele mit echtem Video statt Standbild. */
video.slot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--border-soft);
}

/* ==========================================================
   Wiederverwendbares Karussell/Lightbox-System (gal-marquee.js,
   gal-lightbox.js). Urspruenglich fuer die Startseiten-Galerie gebaut,
   jetzt auch fuer die kompakten Beispiel-Reihen auf kanaele.html.
   ========================================================== */
.gal-marquee-host {
  overflow-x: clip;
}
/* Kurzes Label ueber der Galerie - bewusst nur die Augenbraue (.serial),
   kein volles .section-head mit h2 + Lede: die Galerie soll fuer sich
   sprechen, nicht durch einen grossen Textblock eingeleitet werden. */
.gal-marquee-label {
  margin-bottom: 22px;
}
.gal-marquee {
  --gal-gap: 18px;
  --gal-h: clamp(300px, 33vw, 460px);
  display: grid;
  gap: var(--gal-gap);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.gal-marquee--compact {
  --gal-h: clamp(300px, 33vw, 460px);
}
.gal-row {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.gal-row.is-dragging {
  cursor: grabbing;
}
.gal-track {
  display: flex;
  gap: var(--gal-gap);
  width: max-content;
  padding: 6px 0;
  will-change: transform;
}
.gal-marquee img,
.gal-marquee picture {
  -webkit-user-drag: none;
  pointer-events: none;
}
.gal-marquee .gal-item {
  flex: 0 0 auto;
  height: var(--gal-h);
}
.gal-marquee [data-gal-row="pins"] .gal-item {
  aspect-ratio: 2 / 3 !important;
}
.gal-marquee [data-gal-row="products"] .gal-item {
  aspect-ratio: 1 / 1 !important;
}
.gal-marquee [data-gal-row="pin-examples"] .gal-item {
  aspect-ratio: 2 / 3 !important;
}
.gal-marquee [data-gal-row="ig-examples"] .gal-item {
  aspect-ratio: 9 / 16 !important;
}
.gal-marquee [data-gal-row="nl-examples"] .gal-item {
  aspect-ratio: 16 / 10 !important;
}
.gal-marquee [data-gal-row="blog-examples"] .gal-item {
  aspect-ratio: 16 / 10 !important;
}
@media (prefers-reduced-motion: reduce) {
  .gal-row {
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .gal-track {
    transform: none !important;
  }
  .gal-lightbox,
  .gal-lightbox-panel,
  .ex-reader,
  .ex-reader-panel {
    transition: none !important;
  }
}
.gal-item {
  position: relative;
  break-inside: avoid;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition:
    transform 200ms,
    box-shadow 200ms;
  cursor: pointer;
}
.gal-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.gal-item image-slot {
  width: 100%;
  height: 100%;
}
.gal-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  backdrop-filter: blur(6px);
}
.gal-expand {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(20, 20, 18, 0.55);
  color: #fff;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  transition:
    background 150ms,
    transform 150ms;
}
.gal-expand:hover {
  background: rgba(20, 20, 18, 0.8);
  transform: scale(1.06);
}
.gal-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  z-index: 1;
  pointer-events: none;
}
.gal-play::before {
  content: "";
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 4px;
}
/* Die Kacheln liegen ruhig abgedunkelt da. Was unter dem Zeiger liegt,
   wird hell und hebt sich leicht an. Der Text steht erst in der grossen
   Ansicht, nicht als Schicht ueber dem Bild. */
.gal-marquee .gal-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(18, 17, 15, 0.44);
  transition: opacity 260ms ease;
  pointer-events: none;
}
.gal-marquee .gal-item:hover::after,
.gal-marquee .gal-item:focus-within::after {
  opacity: 0;
}
/* Videos in der Kachel starten nicht dort, sondern erst in der grossen
   Ansicht: sonst wuerde ein Klick beides gleichzeitig ausloesen. */
.gal-marquee .gal-item yt-embed {
  pointer-events: none;
}
.gal-caption {
  display: none;
}
/* display:none -> flex waere ein harter Sprung: der Rahmen samt Bild stuende
   ohne jeden Uebergang von einem Frame auf den naechsten schlagartig da, und
   der teure backdrop-filter (blur) braucht meist noch einen weiteren Frame,
   um zu greifen - zusammen wirkte das wie ein doppeltes Ruckeln beim Oeffnen.
   Deshalb bleibt das Element immer im Layout (display: flex) und wird stattdessen
   ueber Opacity ein-/ausgeblendet, siehe auch .media-lightbox weiter oben, das
   dasselbe Muster schon nutzt. "visibility" folgt der Opacity zeitversetzt,
   damit der geschlossene Zustand weiterhin unsichtbar UND nicht per Tab
   erreichbar bleibt. */
.gal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.gal-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms ease, visibility 0s linear;
}
.gal-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0.62);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
}
.gal-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(1000px, 92vw);
  max-height: 88vh;
  background: var(--surface);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  transform: scale(0.97);
  transition: transform 200ms ease;
}
.gal-lightbox.is-open .gal-lightbox-panel {
  transform: scale(1);
}
.gal-lightbox-frame {
  position: relative;
  background: var(--surface-2);
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gal-lightbox-frame image-slot {
  width: 100%;
  height: 100%;
}
/* Eigener innerer Wrapper nur fuer das Bild: gal-lightbox.js leert bei
   jedem Bildwechsel NUR diesen, nicht den ganzen Rahmen - sonst wuerden
   Karussell-Pfeile und Zaehler (Geschwister dieses Wrappers) bei jedem
   Klick mitgeloescht, sie liegen bewusst ausserhalb davon. */
.gal-lightbox-media {
  display: contents;
}
/* Karussell-Steuerung in der grossen Ansicht: nur sichtbar, wenn eine
   Kachel mehrere befuellte Slides hat (gal-lightbox.js blendet sonst ein,
   ueber das hidden-Attribut). */
.gal-lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(20, 18, 15, 0.5);
  color: #fff;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  transition: background 150ms, transform 150ms;
}
.gal-lb-arrow:hover {
  background: rgba(20, 18, 15, 0.75);
}
.gal-lb-arrow-prev {
  left: 14px;
}
.gal-lb-arrow-prev:hover {
  transform: translateY(-50%) translateX(-2px);
}
.gal-lb-arrow-next {
  right: 14px;
}
.gal-lb-arrow-next:hover {
  transform: translateY(-50%) translateX(2px);
}
.gal-lb-counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(20, 18, 15, 0.5);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}
.gal-lightbox-frame img,
.gal-lightbox-frame picture,
.gal-lightbox-frame yt-embed,
.gal-lightbox-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gal-lightbox-text {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}
.gal-badge-lb {
  position: static;
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 16px;
}
.gal-lightbox-text h3 {
  font-family: var(--serif-text);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 14px;
}
.gal-lightbox-text p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-80);
}
.gal-lightbox-close {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  transition: background 150ms;
}
.gal-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}
.gal-lightbox-panel.is-single {
  grid-template-columns: 1fr;
  width: auto;
  min-width: min(420px, 88vw);
  max-width: 92vw;
}
.gal-lightbox-panel.is-single .gal-lightbox-text {
  display: none;
}
.gal-lightbox-panel.is-single .gal-lightbox-frame {
  background: transparent;
  min-height: min(460px, 60vh);
}
.gal-lightbox-panel.is-single .gal-lightbox-frame img,
.gal-lightbox-panel.is-single .gal-lightbox-frame picture {
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 86vh;
}
@media (max-width: 860px) {
  .gal-lightbox-panel {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }
  .gal-lightbox-frame {
    aspect-ratio: 3/4;
  }
}
@media (max-width: 700px) {
  .gal-marquee {
    --gal-gap: 12px;
    --gal-h: clamp(230px, 58vw, 330px);
  }
  .gal-marquee--compact {
    --gal-h: clamp(230px, 58vw, 330px);
  }
}

/* Einfacher Beispiel-Streifen (Blog, Newsletter, Pinterest, Instagram).
   Die Kachelgroesse richtet sich - wie im Laufband der Startseite - nach
   einer gedeckelten HOEHE, nicht nach einem Anteil der Zeilenbreite.
   Vorher hing die Groesse an "50% der Breite": auf einem normalen Laptop
   wurde eine Pinterest-Kachel dadurch rund 583x875px gross und fuellte den
   Bildschirm fast komplett. Ueber die Hoehe gedeckelt ergibt dasselbe
   Seitenverhaeltnis eine ruhige Kachel (2:3 bei 460px Hoehe = 307px breit),
   und es passen mehrere nebeneinander.
   Gezogen wird per ex-strip-drag.js (Maus) bzw. nativ per Wischgeste. */
.ex-strip {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  margin-top: 8px;
  cursor: grab;
}
.ex-strip.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
/* Hier stand einmal ".ex-strip.is-dragging * { pointer-events: none }", um
   waehrend des Ziehens das browsereigene Bild-Ziehen zu unterbinden. Das war
   gleich doppelt falsch: Bilder in einer Kachel tragen ohnehin schon
   pointer-events:none (siehe ".ex-strip-item img, ... video" weiter unten),
   die Regel war also ueberfluessig - und sie hat beim gewoehnlichen Klick das
   Klickziel von der Kachel auf den Streifen verschoben, sodass sich die
   Beispiele gar nicht mehr oeffnen liessen. Bewusst ersatzlos entfernt. */
.ex-strip-item {
  flex: 0 0 auto;
  height: clamp(300px, 33vw, 460px);
  aspect-ratio: 3 / 2;
  scroll-snap-align: start;
}
@media (max-width: 700px) {
  .ex-strip-item {
    height: clamp(230px, 58vw, 330px);
  }
}
/* Pinterest- und Instagram-Beispiele sollen in der Kachel schon nach ihrer
   eigenen Plattform aussehen, nicht nach dem Blog/Newsletter-Querformat:
   Pinterest-Pins sind hochkant 2:3, Instagram-Feedbeitraege maximal 4:5.
   Die grosse Ansicht (Lightbox) zeigt ohnehin immer das ganze Bild
   unbeschnitten (object-fit: contain), das hier betrifft nur die Kachel. */
.ex-strip--pin .ex-strip-item {
  aspect-ratio: 2 / 3;
}
.ex-strip--ig .ex-strip-item {
  aspect-ratio: 4 / 5;
}
.ex-strip-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(18, 17, 15, 0.44);
  transition: opacity 260ms ease;
  pointer-events: none;
}
.ex-strip-item:hover::after,
.ex-strip-item:focus-within::after {
  opacity: 0;
}
.ex-strip-item img,
.ex-strip-item picture,
.ex-strip-item video {
  -webkit-user-drag: none;
  pointer-events: none;
}
/* Abzeichen auf Karussell-Karten (mehrere Slides dahinter): zeigt sich schon
   auf der Kachel selbst, bevor man klickt, damit klar ist "hier gibt es
   mehr zu sehen" - angelehnt an das Stapel-Symbol, das Instagram/Pinterest
   selbst fuer Mehrfachbeitraege benutzen. */
.gal-carousel-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 15, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  pointer-events: none;
}
.gal-carousel-badge svg {
  width: 14px;
  height: 14px;
}
/* Neben-Slides eines Karussell-Beispiels: fuer Website-Besucher unsichtbar
   (nur das Hauptbild der Karte zeigt sich im Streifen), aber mit einer
   gueltigen Flaeche an derselben Stelle wie das Hauptbild - der lokale
   Editor braucht das, um dort einen eigenen Bearbeiten-Punkt zu platzieren.
   visibility statt display:none, weil display:none keine Groesse mehr hat. */
.gal-slide-extra {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 700px) {
  .ex-strip {
    gap: 12px;
  }
  .ex-strip-item {
    flex-basis: 78%;
  }
}

/* Grosse Leseansicht (ex-reader.js): fuer Blog-/Newsletter-Beispiele mit
   einem vollstaendigen, zusammenhaengenden Text. Fast bildschirmfuellende
   Karte, Titelbild oben, darunter scrollbarer Fliesstext. .gal-article
   selbst bleibt immer unsichtbar (nur Datenquelle fuer ex-reader.js), egal
   ob JS greift oder nicht. */
.gal-article {
  display: none;
}
/* Gleiches Uebergangs-Muster wie .gal-lightbox oben: immer im Layout,
   Ein-/Ausblenden ueber Opacity statt display:none/flex - sonst derselbe
   harte Doppel-Sprung (Sprung des Panels plus verspaetet greifender
   backdrop-filter). */
.ex-reader {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.ex-reader.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms ease, visibility 0s linear;
}
.ex-reader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0.66);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
}
.ex-reader-panel {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(920px, 94vh);
  background: var(--surface);
  border-radius: var(--r-xl);
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.97);
  transition: transform 200ms ease;
}
.ex-reader.is-open .ex-reader-panel {
  transform: scale(1);
}
.ex-reader-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}
.ex-reader-hero img,
.ex-reader-hero picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ex-reader-body {
  padding: clamp(28px, 5vw, 56px);
}
/* Titel der Leseansicht. Im Quelltext ein <h2>, nicht <h1>: die Seite selbst
   traegt bereits eine H1 (die Seitenueberschrift), und dieses Element ist im
   geschlossenen Zustand leer - eine leere H1 waere fuer Suchmaschinen ein
   fehlendes Hauptthema. Die eigene Klasse haelt die Optik unabhaengig von der
   Tag-Wahl; sie ist spezifischer als ".ex-reader-body h2" und gewinnt daher
   gegen die Regel fuer die Zwischenueberschriften weiter unten. */
.ex-reader-body h1,
.ex-reader-body .ex-reader-title {
  font-family: var(--serif-text);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 22px;
}
.ex-reader-body h2 {
  font-family: var(--serif-text);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 34px 0 12px;
}
.ex-reader-body h3 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  margin: 24px 0 8px;
}
.ex-reader-body p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-80);
  margin: 0 0 14px;
}
/* Bilder innerhalb des Fliesstexts (nicht das Titelbild oben): an den
   Stellen, wo der echte Artikel ein Produkt oder eine Szene zeigt, damit
   der Leser wie ein echter Blog-/Newsletter-Beitrag wirkt statt eine
   Textwueste mit einem einzelnen Bild ganz oben zu sein. */
.ex-reader-body picture,
.ex-reader-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  margin: 22px 0;
}
.ex-reader-close {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(20, 18, 15, 0.4);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  transition: background 150ms;
}
.ex-reader-close:hover {
  background: rgba(20, 18, 15, 0.65);
}
@media (max-width: 700px) {
  .ex-reader-panel {
    max-height: 96vh;
    border-radius: var(--r-lg);
  }
  .ex-reader-hero {
    aspect-ratio: 4 / 3;
  }
}

/* Feature-Block ohne kleines Begleitbild: Text nimmt die volle Breite,
   bleibt aber auf Lesebreite begrenzt. */
.feat-block.no-media {
  grid-template-columns: 1fr;
}
.feat-block.no-media .feat-text {
  max-width: 640px;
}