/* =================================================================
   JaJa Productions , Foundation
   Editorial · Warm · Modern · Mobile-first
   ================================================================= */

/* ---------- Custom Properties ---------- */
:root {
  /* Brand: 1:1 aus Live-Site jajaproductions.de
     Korall-Rot Akzent, neutrales Hellgrau, reines Schwarz -- KEIN Rosa-Tint */
  --bg:           #f5f5f5;       /* Squarespace --siteBackgroundColor */
  --bg-soft:      #ededed;       /* etwas dunkler fuer Sektion-Wechsel */
  --bg-deep:      #000000;       /* reines Schwarz fuer Dark-Sections */
  --bg-paper:     #ffffff;       /* reines Weiss fuer Karten */
  --bg-tint:      #fbe5e5;       /* sehr soft Korall-Wash (nicht rosa!) */
  --bg-cream:     #fdf2f2;       /* (frueher Beige) jetzt zarter Korall-Wash, Brand Weiss+Rot */

  --ink:          #000000;       /* reines Schwarz */
  --ink-soft:     #2a2a2a;       /* fast-Schwarz fuer Subtext */
  --ink-mute:     #6e6e6e;       /* neutral mute fuer Meta */

  --line:         #e2e2e2;       /* Trennlinien neutral */
  --line-soft:    #ededed;

  --accent:       #ff6b6b;       /* Korall-Rot (Live-Site Hauptton) */
  --accent-d:     #e85555;       /* dunkleres Korall fuer Hover */
  --accent-l:     #ffa3a3;       /* helle Korall-Variante */
  --accent-soft:  #fbe5e5;       /* sehr leichter Korall-Wash */
  --accent-deep:  #c44343;       /* tiefes Korall fuer Box-Shadows */
  --accent-text:   var(--accent-deep); /* Text-Rot auf hellem Grund (4,96:1 AA) */
  --accent-text-d: #a83737;            /* Hover zu --accent-text */

  /* Service-Saeulen: semantische Rot-Abstufungen (Social hell -> GEO tief).
     Ersetzt frueheres Rot/Blau/Gruen -- alles Weiss+Rot, kein Fremdton. */
  --pillar-social: var(--accent-l);    /* helles Korall */
  --pillar-web:    var(--accent);      /* Korall-Rot (Mitte) */
  --pillar-geo:    var(--accent-deep); /* tiefes Korall */

  /* Typo: Roboto Slab Black (Slab-Serif) als Live-Pendant zu dapifer */
  --font-display: 'Roboto Slab', 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --max-w:        1240px;
  --gutter:       clamp(20px, 4vw, 40px);
  --section-y:    clamp(80px, 11vw, 140px);

  /* Easing */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  /* HYPHENS: GLOBAL AUS - Woerter NIE mittendrin trennen (heis-se waere haesslich)
     Stattdessen: Zeile am Wortende umbrechen, Schrift bei Bedarf skalieren */
  hyphens: manual;
  -webkit-hyphens: manual;
  /* Sehr lange unbrechbare Sequenzen (URLs, lange Begriffe) duerfen umbrechen */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  /* Sticky-Footer: Body als Flex-Spalte, main waechst, footer klebt unten */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1 0 auto;
}
body > .site-footer {
  flex-shrink: 0;
  /* zarter Korall-/Rosa-Wash im Hintergrund -- so wie Live-Site */
  background-image:
    radial-gradient(at 18% 8%, rgba(255, 107, 107, 0.05), transparent 48%),
    radial-gradient(at 88% 72%, rgba(248, 211, 224, 0.18), transparent 52%);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}

button { font: inherit; cursor: pointer; }

ul, ol { list-style: none; padding: 0; margin: 0; }

p { margin: 0 0 1em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -40px; left: 8px;
  background: var(--ink); color: var(--bg-paper);
  padding: 8px 14px; border-radius: 6px;
  z-index: 1000; font-size: 0.85rem;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 8px; }

/* ---------- Typografie ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  /* Roboto Slab Black -- dramatische Slab-Serif wie Live-Site dapifer */
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  color: var(--ink);
  text-wrap: balance;
  text-transform: none;
  /* Display NIE Auto-Hyphenation (haesslich an Headlines) */
  hyphens: manual;
  -webkit-hyphens: manual;
}
/* Magazin-Akzent: Italic-Rot (leiser Akzent) */
.display em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-text);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
/* Magazin-Akzent: Block-Highlight (lauter Akzent) */
.display em.block,
.statement-quote em.block {
  font-style: italic;
  font-weight: 500;
  color: #fff;
  background: var(--accent-d);
  padding: 0.04em 0.22em 0.1em;
  display: inline-block;
  transform: skew(-5deg);
  margin: 0 0.06em;
  box-shadow: 0 4px 0 var(--accent-deep);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.display-md {
  font-size: clamp(2rem, 4.8vw, 3.6rem);
}

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 0 36px;
  /* Linksbuendig: keine haesslichen Wort-Luecken durch Blocksatz */
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 24px;
}
.eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* Service-Body + Statement: linksbuendig, manuelle Hyphens
   (Auto-Trennen wuerde 'heis-se' produzieren - haesslich) */
.service-body p,
.statement-quote {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 245, 245, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line-soft);
}
.site-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  font-variation-settings: 'opsz' 36;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.brand-mark { color: var(--ink); }
.brand-mark-soft {
  font-size: 0.78em;
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 300;
  margin-left: 2px;
}

.site-nav {
  display: flex; align-items: center; gap: 28px;
  font-size: 0.92rem;
  font-weight: 500;
}
.site-nav a { color: var(--ink-soft); position: relative; padding: 4px 0; }
.site-nav a:hover { color: var(--ink); }
.site-nav a:not(.nav-cta)::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease-out);
}
.site-nav a:not(.nav-cta):hover::after { width: 100%; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent); /* helles Korall - Marken-CTA, identisch site-weit */
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.nav-cta:hover {
  background: var(--ink);
  color: #ffffff;
  transform: translateY(-1px);
}
.site-nav a.nav-cta { color: #ffffff; }
.site-nav a.nav-cta:hover { color: #ffffff; }
/* Hard-Reset: stelle sicher, dass nav-cta nicht vom generischen .site-nav a Padding gestoert wird */
.site-nav a.nav-cta { padding: 10px 20px; }

@media (max-width: 720px) {
  /* Mobile-Nav: kollabiert, Hamburger-Toggle uebernimmt */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-paper);
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
    box-shadow: 0 18px 40px -16px rgba(28,10,10,0.18);
  }
  .site-header.nav-open .site-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out), visibility 0s;
  }
  .site-nav a {
    padding: 12px var(--gutter);
    font-size: 1rem;
  }
  .site-nav a.nav-cta {
    margin: 8px var(--gutter) 4px;
    text-align: center;
  }
  .site-nav a:not(.nav-cta)::after { display: none; }
}

/* =================================================================
   MOBILE NAV TOGGLE (Hamburger)
   ================================================================= */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  width: 44px; height: 44px;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle-bar {
  display: block;
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out), top 0.3s var(--ease-out);
}
.nav-toggle-bar:nth-child(1) { top: 15px; }
.nav-toggle-bar:nth-child(2) { top: 21px; }
.nav-toggle-bar:nth-child(3) { top: 27px; }
.site-header.nav-open .nav-toggle-bar:nth-child(1) {
  top: 21px; transform: rotate(45deg);
}
.site-header.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header.nav-open .nav-toggle-bar:nth-child(3) {
  top: 21px; transform: rotate(-45deg);
}
@media (max-width: 720px) {
  .nav-toggle { display: block; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: all 0.3s var(--ease-out);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg-paper);
}
.btn-primary:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px rgba(200, 71, 45, 0.45);
}
.btn-primary:hover .btn-arrow { transform: translateX(4px); }
.btn-arrow { width: 18px; height: 18px; transition: transform 0.3s var(--ease-out); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--ink);
  background: var(--bg-paper);
  transform: translateY(-1px);
}

/* =================================================================
   HERO , Editorial Split-Layout mit 3D-Frame-Stack
   ================================================================= */
.hero {
  position: relative;
  padding: clamp(60px, 10vw, 110px) 0 clamp(80px, 12vw, 140px);
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Hero Split-Layout (Text links, 9:16 Best-Of rechts) ---------- */

/* ---------- LIVE: Home-Hero (Video-Background) — NICHT loeschen! ---------- */
.hero-video {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
  background: var(--ink);
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.75) 100%),
    radial-gradient(at 70% 30%, rgba(255, 107, 107, 0.15), transparent 55%);
  z-index: 1;
}
.hero-inner-video {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(80px, 14vw, 140px) var(--gutter) clamp(100px, 16vw, 160px);
  width: 100%;
}

/* Light-Varianten fuer Text auf dunklem Video */
.eyebrow-light {
  color: rgba(255, 255, 255, 0.85);
}
.eyebrow-light .eyebrow-dot {
  background: var(--accent);
}
.display-hero {
  color: #ffffff;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}
.display-hero em:not(.block) {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
}
.display-hero em.block {
  background: var(--accent-d);
  color: #ffffff;
  box-shadow: 0 6px 0 var(--accent-deep);
}
.lead-light {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  max-width: 50ch;
}
.btn-ghost-light {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}
.hero-proof-light {
  color: rgba(255, 255, 255, 0.7);
}
.hero-proof-light .dot { color: rgba(255, 255, 255, 0.5); }
.hero-scroll-hint-light {
  color: rgba(255, 255, 255, 0.7);
}
.hero-scroll-hint-light svg {
  stroke: rgba(255, 255, 255, 0.7);
}

/* Mobile: Video-Hero noch fokussierter */
@media (max-width: 720px) {
  .hero-video {
    min-height: 92vh;
    min-height: 92dvh;
  }
  .hero-inner-video {
    padding: 80px 22px 60px;
  }
  .display-hero {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
}

/* Reduced motion: kein Auto-Play */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display: none; }
  .hero-video { background: var(--ink); }
}


.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: clamp(60px, 9vw, 90px);
  }
}

.hero-text { max-width: 620px; }
.hero-text .display { margin-bottom: 28px; }
.hero-text .lead { margin-bottom: 36px; }

.hero-cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-proof {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--ink-mute);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.hero-proof li { display: inline-flex; align-items: center; }
.hero-proof .dot { color: var(--line); }

/* ---------- Hero Stage / 3D-Frames ---------- */

.hero-scroll-hint {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  opacity: 0.75;
}
.hero-scroll-hint svg {
  width: 14px; height: 14px;
  animation: scrollNudge 2.4s var(--ease-soft) infinite;
}
@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (max-width: 960px) { .hero-scroll-hint { display: none; } }

/* =================================================================
   STATEMENT
   ================================================================= */
.statement {
  background: var(--bg-deep);
  color: var(--bg-paper);
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}
.statement::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 107, 107, 0.22), transparent 52%),
    radial-gradient(circle at 78% 72%, rgba(255, 120, 104, 0.14), transparent 50%);
  pointer-events: none;
}
.statement-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative; z-index: 2;
}
.statement-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-l);
  font-weight: 500;
  margin-bottom: 32px;
}
.statement-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: 'opsz' 96, 'SOFT' 100;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--bg-paper);
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.statement-quote em {
  font-style: italic;
  color: var(--accent-l);
}

/* =================================================================
   SERVICES
   ================================================================= */

.section-head {
  max-width: 760px;
  margin: 0 0 clamp(50px, 7vw, 80px);
}

.service-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 220px;
  gap: 32px;
  align-items: baseline;
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.service-item::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(200, 71, 45, 0.04), transparent);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.service-item:hover::before { opacity: 1; }


@media (max-width: 820px) {
  .service-item {
    grid-template-columns: 60px 1fr;
    gap: 20px;
  }
}

/* =================================================================
   MARQUEE , Klienten- und Wunsch-Laufband (Magazin-Element)
   ================================================================= */

/* =================================================================
   STICKY-NOTE , Easter-Egg im Footer
   ================================================================= */
.sticky-note {
  position: absolute;
  top: -28px; right: clamp(20px, 6vw, 80px);
  background: #fef089;
  color: #2a1f0a;
  padding: 14px 18px 16px;
  width: 200px;
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: 19px;
  line-height: 1.18;
  transform: rotate(3.5deg);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.4s var(--ease-soft);
  z-index: 5;
}
.sticky-note:hover {
  transform: rotate(-1deg) translateY(-3px);
}
.sticky-note::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  width: 56px; height: 16px;
  background: rgba(255, 107, 107, 0.55);
  transform: translateX(-50%) rotate(-4deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.sticky-note strong {
  font-weight: 700;
  color: var(--accent-d);
  display: block;
  font-size: 22px;
  margin-bottom: 2px;
}
@media (max-width: 720px) {
  .sticky-note {
    position: relative;
    top: 0; right: 0;
    margin: 30px auto 8px;
    transform: rotate(-2deg);
  }
}

/* =================================================================
   PLACEHOLDER SECTIONS
   ================================================================= */

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer {
  background: var(--bg-deep);
  color: var(--bg-paper);
  padding: 60px 0 80px;
}
.site-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: relative;
}
.site-footer { position: relative; }
.footer-brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  margin: 0;
}
.footer-meta {
  display: inline-flex; gap: 12px; flex-wrap: wrap; row-gap: 6px;
  font-size: 0.85rem;
  color: rgba(250, 246, 238, 0.6);
  margin: 0;
}
.footer-meta a { color: rgba(250, 246, 238, 0.85); }
.footer-meta a:hover { color: var(--accent-l); }
.footer-whale {
  color: var(--accent-l);
  opacity: 0.5;
  transition: opacity 0.3s var(--ease-out), transform 0.6s var(--ease-soft);
  cursor: default;
}
.footer-whale:hover {
  opacity: 1;
  transform: translateX(4px) rotate(-6deg);
}

/* =================================================================
   REVEAL ANIMATION
   ================================================================= */
/* Definition lebt EINMAL im Abschnitt 'data-reveal Items kommen sanft
   von unten rein' (weiter unten) — hier bewusst keine zweite Kopie. */

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =================================================================
   FOCUS STYLES
   ================================================================= */
:focus-visible {
  outline: 2px solid var(--accent-deep); /* sichtbarer Tastatur-Fokus, AA 1.4.11 */
  outline-offset: 3px;
  border-radius: 4px;
}

/* =================================================================
   NAV ACTIVE STATE
   ================================================================= */
.site-nav a.is-active:not(.nav-cta) {
  color: var(--ink);
}
.site-nav a.is-active:not(.nav-cta)::after {
  width: 100%;
  background: var(--accent);
}
.site-nav .nav-cta.is-active {
  background: var(--accent);
}

/* =================================================================
   SUB-PAGE HERO (kleiner, fuer Leistungen, Arbeiten, Ueber, Kontakt)
   ================================================================= */
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 107, 107, 0.07), transparent 42%),
    radial-gradient(circle at 12% 78%, rgba(255, 120, 104, 0.05), transparent 46%);
  z-index: -1;
  pointer-events: none;
}
.page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: 940px;
}
.page-hero .display { margin-bottom: 24px; }
.page-hero .lead { margin-bottom: 0; max-width: 56ch; }

/* =================================================================
   DISCIPLINE Sections (Leistungen)
   ================================================================= */
.discipline-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--accent-text);
  letter-spacing: 0;
  margin: 0 0 8px;
  opacity: 0.85;
}


/* =================================================================
   FUNNEL BANNER (Leistungen, Ueber)
   ================================================================= */
.funnel-banner {
  background: var(--bg-cream);
  color: var(--ink);
  padding: clamp(60px, 9vw, 110px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.funnel-banner::before {
  content: '';
  display: none;
}
.funnel-banner-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.funnel-eyebrow {
  color: var(--ink-mute);
  margin-bottom: 28px;
}
.funnel-title {
  color: var(--ink);
  margin: 0 auto 24px;
}
.funnel-title em.block {
  background: var(--bg-paper);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,0.4);
}
.funnel-lead {
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto 36px;
  text-align: center;
  text-align-last: center;
}
.funnel-cta {
  margin: 0 auto;
  background: var(--ink);
  color: #fff;
}
.funnel-cta:hover {
  background: var(--ink);
  color: #fff;
}
.funnel-alt-hint {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--ink-mute);
  text-align: center;
}
.funnel-alt-hint a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.funnel-alt-hint a:hover { color: var(--accent-deep); }

/* ===== CASE CONFIG-CTA (am Ende jeder Case-Page) ===== */
.case-config-cta {
  background: var(--bg-cream);
  padding: clamp(50px, 8vw, 90px) 0;
  text-align: center;
}
.case-config-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.case-config-cta .eyebrow {
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.case-config-cta h2 {
  margin-bottom: 18px;
}
.case-config-cta .lead {
  margin-bottom: 28px;
  color: var(--ink-soft);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.case-config-cta .btn-primary {
  background: var(--ink);
  color: #fff;
}
.case-config-cta .btn-primary:hover {
  background: var(--ink);
}

/* =================================================================
   CASES GRID (Arbeiten)
   ================================================================= */
.cases {
  padding: var(--section-y) 0;
}
.cases-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 720px) {
  .case-grid { grid-template-columns: 1fr; }
}


/* =================================================================
   CASE DETAIL (Hero + Body + Pullquote + Next)
   ================================================================= */
.case-hero {
  padding: clamp(70px, 10vw, 130px) 0 clamp(50px, 7vw, 90px);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.case-hero-1 { background: linear-gradient(135deg, rgba(28,10,10,0.04), transparent 60%); }
.case-hero-2 { background: linear-gradient(135deg, rgba(90,26,24,0.05), transparent 60%); }
.case-hero-3 { background: linear-gradient(135deg, rgba(155,31,25,0.05), transparent 60%); }
.case-hero-4 { background: linear-gradient(135deg, rgba(255,107,107,0.06), transparent 60%); }
.case-hero-inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.case-hero-title {
  margin-bottom: 28px;
}
.case-hero-lead {
  margin-bottom: 0;
  max-width: 56ch;
}

.case-body {
  padding: clamp(50px, 8vw, 100px) 0;
}
.case-body-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.case-section {
  margin-bottom: clamp(40px, 6vw, 64px);
}
.case-section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.case-section-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.7em;
  color: var(--accent-text);
  opacity: 0.8;
}
.case-section p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 16px;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.case-section p:last-child { margin-bottom: 0; }
.case-section em {
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}

.case-deliverables {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.case-deliverables li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.case-deliverables li::before {
  content: '\2192';
  position: absolute; left: 0; top: 10px;
  color: var(--accent-text);
  font-weight: 500;
}


.case-next {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: clamp(40px, 6vw, 72px) 0;
}
.case-next-link {
  display: block;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.3s var(--ease-out);
}
.case-next-link:hover { transform: translateX(8px); }
.case-next-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.case-next-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.case-next-title em {
  font-style: italic;
  color: var(--accent-text);
}
.case-next-arrow {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--accent-text);
}

/* =================================================================
   PROSE SECTIONS (Ueber)
   ================================================================= */
.prose-section {
  padding: clamp(40px, 7vw, 90px) 0;
}
.prose-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 80px);
}
.prose-block {
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 4vw, 44px);
}
.prose-block:first-child { border-top: none; padding-top: 0; }
.prose-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 22px;
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.prose-title em {
  font-style: italic;
  color: var(--accent-text);
  font-weight: 300;
}
.prose-block p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* =================================================================
   CONTACT (Form + Aside)
   ================================================================= */
.contact-section {
  padding: clamp(40px, 7vw, 90px) 0 var(--section-y);
}
.contact-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 880px) {
  .contact-inner { grid-template-columns: 1fr; }
}

.contact-form-wrap {
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(28px, 4vw, 44px);
}
.form-section-label { margin-bottom: 24px; }
.form-row {
  display: block;
  margin-bottom: 22px;
}
.form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.2s var(--ease-out);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
  line-height: 1.5;
}
.form-checks {
  border: none;
  padding: 0;
  margin: 0 0 22px;
}
.form-checks legend { padding: 0; }
.form-checks label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 16px 6px 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.form-submit { margin-top: 8px; }
.form-meta {
  margin: 18px 0 0;
  font-size: 0.85rem;
  color: var(--ink-mute);
  line-height: 1.5;
}
.form-meta a { color: var(--accent-deep); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 40px);
}
.contact-block {
  padding: 0;
}
.contact-block .prose-title {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  margin-bottom: 18px;
}
.contact-list {
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 0.98rem;
  color: var(--ink-soft);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.contact-list-label {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  min-width: 70px;
}
.contact-list a {
  color: var(--accent-text);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.contact-list a:hover { color: var(--accent-d); border-bottom-color: var(--accent-d); }

/* =================================================================
   LEGAL (Impressum, Datenschutz)
   ================================================================= */
.legal-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.legal-head {
  margin-bottom: clamp(40px, 6vw, 72px);
}
.legal-head .display { margin-bottom: 12px; }
.legal-meta {
  font-size: 0.95rem;
  color: var(--ink-mute);
  margin: 0;
}
.legal-section {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.legal-section h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
}
.legal-section p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 12px;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.legal-section a {
  color: var(--accent-deep); /* Prosa-Links AA 4.96:1 auf Weiss */
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.legal-section a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.legal-section small {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  margin-left: 4px;
}

/* =================================================================
   404 PAGE
   ================================================================= */

/* =================================================================
   PRINT
   ================================================================= */
@media print {
  .site-header, .site-footer, .funnel-banner, .hero-scroll-hint,
  .sticky-note, .skip-link { display: none !important; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
}


/* =================================================================
   REELS-SHOWCASE (Cases mit echten Video-Galerien)
   ================================================================= */

.reel-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.2);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
  cursor: pointer;
}
.reel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px -10px rgba(0, 0, 0, 0.28);
}
.reel-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reel-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.reel-card-caption {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 14px 16px;
  color: #ffffff;
  z-index: 2;
}
.reel-card-tag {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-l);
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}
.reel-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Play-Button-Indikator beim Hover */
.reel-card::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
  z-index: 1;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
  background-repeat: no-repeat;
  background-position: 56% center;
  background-size: 20px;
}
.reel-card:hover::after { opacity: 1; }
.reel-card.is-playing::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><rect x="6" y="5" width="4" height="14"/><rect x="14" y="5" width="4" height="14"/></svg>');
  background-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .reel-card video { display: none; }
  .reel-card { background-size: cover; background-position: center; }
}

/* ============================================================
   REEL-WAND (Home) — swappbar via Panel/Content
   Nutzt .reel-card (Styling + JS-Autoplay-Observer) wieder.
   ============================================================ */
.reel-wall-section {
  padding: clamp(56px, 8vw, 92px) 0;
}
.reel-wall-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
}
.section-head-center {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head-center .eyebrow { justify-content: center; }
.section-head-center .section-head-lead {
  margin-left: auto;
  margin-right: auto;
}
.reel-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.reel-wall .reel-card {
  /* Poster sofort sichtbar, Video lazy via Observer */
  background-size: cover;
  background-position: center;
}
.reel-wall-cta {
  text-align: center;
  margin-top: clamp(28px, 4.5vw, 48px);
}
@media (max-width: 900px) {
  .reel-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .reel-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stat-Strip unter Reels */
.case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: clamp(40px, 6vw, 60px) 0;
}
.case-stat {
  background: var(--bg-paper);
  padding: 28px 20px;
  text-align: center;
}
.case-stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--accent-text);
  line-height: 1;
  margin-bottom: 4px;
}
.case-stat-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
@media (max-width: 560px) {
  .case-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   CASE-ZITAT (Testimonial) — field-driven, nur wenn gefuellt
   ============================================================ */
.case-quote-section {
  padding: clamp(20px, 4vw, 40px) 0 clamp(40px, 6vw, 64px);
}
.case-quote {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
  text-align: center;
}
.case-quote-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.case-quote-text::before { content: '„'; color: var(--accent-text); }
.case-quote-text::after  { content: '“'; color: var(--accent-text); }
.case-quote-cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: clamp(20px, 3vw, 28px);
}
.case-quote-author {
  font-weight: 600;
  color: var(--ink);
}
.case-quote-role {
  font-size: 0.85rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* =================================================================
   AKZENT-SEKTIONEN MIT CREAM-BACKGROUND
   Haltung-Statement + Kontakt-Banner bekommen Cream, brechen
   den grauen Hauptfluss optisch auf.
   ================================================================= */
.statement-cream {
  background: var(--bg-cream);
  padding: clamp(80px, 12vw, 130px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.statement-cream .statement-inner {
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.statement-cream .statement-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 30px;
}
.statement-cream .statement-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* Kontakt-Banner mit Cream */

/* =================================================================
   ARBEITEN , HOCHKANT VIDEO-CARDS (9:16, autoplay)
   ================================================================= */
.case-grid-portrait {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 560px) { .case-grid-portrait { grid-template-columns: 1fr; max-width: 420px; } }

.case-card-v {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink);
  text-decoration: none;
  color: #fff;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  box-shadow: 0 4px 18px -8px rgba(0,0,0,0.2);
}
.case-card-v:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px -14px rgba(0,0,0,0.35);
}
.case-card-image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background-position: center;
  background-size: cover;
  z-index: 0;
}
.case-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.78) 100%);
  z-index: 1;
}
.case-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 22px 22px;
  z-index: 2;
}
.case-card-tag {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-l);
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}
.case-card-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
  color: #fff;
}
.case-card-blurb {
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.82);
  margin: 0;
}

/* =================================================================
   CASE-STUDIES , REEL-FOCUS ZIGZAG-LAYOUT
   Pro Reel: ein Block, Text+Reel versetzt links/rechts.
   Identische Struktur ueber alle Cases.
   ================================================================= */
.reel-focus {
  padding: clamp(60px, 9vw, 120px) 0;
}
.reel-focus + .reel-focus { padding-top: 0; }
.reel-focus-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
/* Zigzag: jeder zweite Reel-Focus dreht das Layout */
.reel-focus.flip .reel-focus-inner {
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}
.reel-focus.flip .reel-focus-text { direction: ltr; }
.reel-focus.flip .reel-focus-video { direction: ltr; }

@media (max-width: 820px) {
  .reel-focus-inner { grid-template-columns: 1fr; gap: 28px; }
  .reel-focus.flip .reel-focus-inner { direction: ltr; }
  .reel-focus.flip .reel-focus-video { order: -1; }
}

.reel-focus-video {
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 360px;
  margin: 0 auto;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 18px 50px -22px rgba(0,0,0,0.3);
  cursor: pointer;
}
.reel-focus-video video {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}

.reel-focus-text {
  display: flex; flex-direction: column; gap: 14px;
}
.reel-focus-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: var(--accent-text);
  letter-spacing: 0.06em;
}
.reel-focus-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin: 0 0 6px;
}
.reel-focus-meta span { position: relative; padding-right: 14px; }
.reel-focus-meta span + span::before {
  content: '·';
  position: absolute; left: -10px; color: var(--ink-mute); opacity: 0.5;
}
.reel-focus-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.reel-focus-title em {
  color: var(--accent-text);
  font-style: italic;
  font-weight: 700;
}
.reel-focus-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 48ch;
}
.reel-focus-body strong { color: var(--ink); font-weight: 600; }

/* =================================================================
   LEISTUNGEN , SCHLANK (5 Buckets, editorial-list)
   ================================================================= */
.services-lean {
  padding: clamp(30px, 5vw, 60px) 0 clamp(80px, 12vw, 130px);
}
.services-lean-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.lean-row {
  display: grid;
  grid-template-columns: 80px 1fr 200px;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.4s var(--ease-out), background 0.3s var(--ease-out);
}
.lean-row:first-of-type { border-top: 1px solid var(--line); }
.lean-row:hover {
  padding-left: 16px;
  background: linear-gradient(90deg, var(--bg-tint), transparent 60%);
}
.lean-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--accent-text);
  line-height: 1;
}
.lean-content { display: flex; flex-direction: column; gap: 10px; }
.lean-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.lean-title em {
  color: var(--accent-text);
  font-style: italic;
}
.lean-blurb {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 52ch;
}
.lean-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.lean-tags li {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--bg-paper);
}
.lean-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

@media (max-width: 760px) {
  .lean-row {
    grid-template-columns: 50px 1fr;
    gap: 16px;
  }
  .lean-aside {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
  }
}

/* =================================================================
   PROZESS-STRIP (So läuft's ab, 3 Schritte) , Leistungen
   ================================================================= */
.process-strip {
  padding: clamp(60px, 9vw, 110px) 0;
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.process-strip-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.process-steps {
  list-style: none;
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
.process-step {
  position: relative;
  padding-top: 18px;
  border-top: 2px solid var(--accent);
}
.process-step-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.process-step-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--ink);
}
.process-step-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 34ch;
}
@media (max-width: 760px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .process-step-text { max-width: 52ch; }
}

/* =================================================================
   GEO-MAPS (2D): Diagnose-Quadrant + Flow-Pipeline (nur /geo-audit/)
   Kopfmodell statt Datenmodell. Reines HTML/CSS, kein WebGL -> lean.
   ================================================================= */
.geo-maps-section {
  padding: clamp(64px, 9vw, 120px) 0;
  background: var(--bg); /* neutral statt Korall-Wash -> kein Rosa-Overload */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.geo-maps-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- Diagnose-Quadrant --- */
.geo-quadrant { margin: clamp(36px, 5vw, 60px) 0 0; }
.geo-quadrant-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  padding: 0 0 36px 40px; /* Platz fuer Achsen */
}
.geo-cell {
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(18px, 2.4vw, 26px);
  min-height: 120px;
  transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease);
}
.geo-cell:hover { transform: translateY(-3px); }
.geo-cell h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 7px;
  color: var(--ink);
}
.geo-cell p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
.geo-cell--goal { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.geo-cell--goal h3 { color: var(--accent-deep); }
.geo-cell--pain {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #ffd2d2 100%);
  border-color: var(--accent);
}
.geo-cell--pain h3 { color: var(--accent-deep); }

.geo-axis {
  position: absolute;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.geo-axis-x { bottom: 6px; left: 40px; right: 0; text-align: center; }
.geo-axis-y {
  top: 0; bottom: 36px; left: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: center;
}
.geo-figcap {
  margin-top: 18px; text-align: center;
  font-size: 0.9rem; color: var(--ink-mute); font-style: italic;
}

/* --- Flow-Pipeline --- */
.geo-flow { margin: clamp(48px, 6vw, 84px) 0 0; }
.geo-flow-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; justify-content: center;
  gap: 14px;
}
.geo-flow-step {
  flex: 1 1 0;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(16px, 2vw, 24px);
  text-align: center;
}
.geo-flow-step--brand {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft) 0%, #ffd2d2 100%);
  display: flex; flex-direction: column; justify-content: center;
}
.geo-flow-kicker {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1rem, 1.6vw, 1.2rem); margin: 0 0 10px; color: var(--ink);
}
.geo-flow-step--brand .geo-flow-kicker { color: var(--accent-deep); }
.geo-flow-brandtext { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.45; }
.geo-flow-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.geo-flow-chips li {
  font-size: 0.8rem; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--line);
}
.geo-flow-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-text); font-size: 1.6rem; font-weight: 700; flex: 0 0 auto;
}

@media (max-width: 680px) {
  .geo-flow-steps { flex-direction: column; }
  .geo-flow-arrow { transform: rotate(90deg); padding: 2px 0; }
  .geo-cell { min-height: 0; }
}

/* =================================================================
   IDLE-BLUBBI EASTER EGG (Sprite-Animation nach 10 Min Idle, nur Home)
   Spritesheet: 1536x1872, 8 Spalten x 9 Reihen, jede Zelle 192x208.
   Row 2 (y=-208) = Blubbi schwimmt nach rechts mit Bubbles.
   ================================================================= */
/* Wrapper macht den horizontalen Swim (via left), Inner macht den Bob (via transform) */
.idle-blubbi {
  position: fixed;
  top: 18vh;
  left: -260px;
  z-index: 9999;
  width: 192px;
  height: 208px;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.18));
  /* ENDLOS-Loop: links rein, rechts raus, links wieder rein */
  animation: blubbi-swim 18s linear infinite;
}
.idle-blubbi-inner {
  width: 100%;
  height: 100%;
  background-image:
    image-set(
      url('/assets/blubbi/spritesheet.webp') type('image/webp'),
      url('/assets/blubbi/spritesheet.png')  type('image/png')
    );
  background-size: 1536px 1872px;
  background-position: 0 -208px;   /* Row 2 , Richtung gemaess Jan */
  background-repeat: no-repeat;
  image-rendering: -webkit-optimize-contrast;
  animation:
    blubbi-frames 0.7s steps(8) infinite,
    blubbi-bob 2.4s ease-in-out infinite;
}
@keyframes blubbi-frames {
  from { background-position-x: 0; }
  to   { background-position-x: -1536px; }
}
@keyframes blubbi-swim {
  0%   { left: -260px; }
  100% { left: calc(100vw + 80px); }
}
@keyframes blubbi-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .idle-blubbi { display: none; }
}

/* =================================================================
   FAQ-SECTION (Leistungen-Seite, fuer GEO/KI-Suche)
   ================================================================= */
.faq-section {
  padding: clamp(50px, 8vw, 100px) 0;
  background: var(--bg-paper);
}
.faq-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.faq-section .section-head {
  margin-bottom: clamp(30px, 5vw, 50px);
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
}
.faq-item {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.faq-item:last-child { padding-bottom: 12px; }
.faq-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.faq-a {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  max-width: 70ch;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.faq-a a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.faq-a a:hover { color: var(--ink); }

/* =================================================================
   LEAD-MAGNET-SEITE (/checkliste/)
   ================================================================= */
.lead-magnet-hero {
  padding: clamp(50px, 8vw, 110px) 0 clamp(40px, 6vw, 80px);
}
.lead-magnet-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 920px) {
  .lead-magnet-inner {
    grid-template-columns: 1.2fr 0.9fr;
  }
}
.lead-magnet-text .display { margin-bottom: 24px; }
.lead-magnet-text .lead { margin-bottom: 28px; max-width: 56ch; }
.lead-magnet-bullets {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lead-magnet-bullets li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}
.lead-magnet-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 2px;
  background: var(--accent);
}
.lead-magnet-form-wrap { position: sticky; top: 100px; }
@media (max-width: 919px) {
  .lead-magnet-form-wrap { position: static; }
}
.lead-magnet-form-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 18px 40px -22px rgba(28,10,10,0.18);
}
.lead-magnet-form-card .prose-title { margin: 4px 0 14px; font-size: 1.7rem; }
.lead-magnet-form-intro {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0 0 20px;
  line-height: 1.5;
}
.lead-magnet-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.lead-magnet-form .form-label {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lead-magnet-form input[type="text"],
.lead-magnet-form input[type="email"] {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--bg-paper);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lead-magnet-form input:focus {
  outline: none;
  border-color: var(--ink);
  background: #FFFFFF;
}
.lead-magnet-form .form-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: 6px;
}
.lead-magnet-form .form-checkbox input { margin-top: 3px; }
.lead-magnet-form .form-submit {
  width: 100%;
  margin-top: 16px;
  background: var(--ink);
  color: #fff;
  justify-content: center;
}
.lead-magnet-form .form-submit:hover { background: var(--ink); }
.lead-magnet-form .form-meta {
  font-size: 0.78rem;
  color: var(--ink-mute);
  margin: 14px 0 0;
  text-align: center;
}

.lead-magnet-why {
  background: var(--bg-cream);
  padding: clamp(50px, 8vw, 100px) 0;
}
.lead-magnet-why-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.lead-magnet-why .section-head { margin-bottom: clamp(30px, 5vw, 50px); }
.lead-magnet-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) {
  .lead-magnet-why-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.lead-magnet-why-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
}
.lead-magnet-why-card p:last-child {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.lead-magnet-author {
  padding: clamp(40px, 6vw, 70px) 0;
}
.lead-magnet-author-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.lead-magnet-author-inner .lead { max-width: none; }

/* =================================================================
   SOCIAL-PROOF (Home, unter Manifesto)
   ================================================================= */
.social-proof {
  padding: clamp(40px, 6vw, 70px) 0;
  background: var(--bg-paper);
}
.social-proof-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.social-proof-eyebrow {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 24px;
  text-align: center;
}
.social-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.social-proof-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  background: #FFFFFF;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.social-proof-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.social-proof-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
}
.social-proof-meta {
  font-size: 0.82rem;
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.4;
}

/* =================================================================
   EXIT-INTENT-POPUP (Lead-Magnet)
   ================================================================= */
.exit-intent {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.exit-intent.show {
  opacity: 1;
  pointer-events: auto;
}
.exit-intent-card {
  background: #FFFFFF;
  border-radius: 16px;
  max-width: 480px;
  padding: clamp(28px, 4vw, 40px);
  position: relative;
  box-shadow: 0 30px 60px -20px rgba(28,10,10,0.4);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.exit-intent.show .exit-intent-card { transform: translateY(0); }
.exit-intent-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.exit-intent-close:hover { border-color: var(--ink); color: var(--ink); }
.exit-intent-eyebrow {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 10px;
}
.exit-intent-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 12px;
}
.exit-intent-title em { color: var(--accent-text); font-style: italic; }
.exit-intent-text {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 22px;
}
.exit-intent-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s ease;
}
.exit-intent-cta:hover { background: var(--ink); color: #FFFFFF; }
.exit-intent-dismiss {
  display: block;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--ink-mute);
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
@media (prefers-reduced-motion: reduce) {
  .exit-intent, .exit-intent-card { transition: none; }
}

/* ============================================================
   BLOG (Index + Article)
   Hinzugefuegt 2026-05-25
   ============================================================ */


/* --- Blog-Index --- */

.blog-list {
  padding: 24px 0 64px;
}
.blog-list-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.blog-card {
  background: #fff;
  border-radius: 18px;
  padding: 32px 36px;
  box-shadow: 0 4px 24px -8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px -12px rgba(0,0,0,0.12);
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 0 0 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.blog-card-cat {
  background: var(--accent-soft);
  color: var(--accent-text);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}
.blog-card-date { color: var(--ink-mute); }

.blog-card-title {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  margin: 0 0 16px;
  text-wrap: balance;
}
.blog-card-title a {
  color: inherit;
  text-decoration: none;
}
.blog-card-title a:hover { color: var(--accent-deep); }

.blog-card-excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
}
.link-arrow:hover { color: var(--accent-text-d); }
.link-arrow span { display: inline-block; transition: transform 0.2s var(--ease-out); }
.link-arrow:hover span { transform: translateX(4px); }

/* --- Article-Detail --- */

.article-shell {
  padding: 0 0 40px;
}

.article-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px var(--gutter, 24px) 24px;
}
.article-title {
  margin-top: 16px;
  margin-bottom: 20px;
}
.article-lead {
  max-width: 640px;
}

.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  /* Linksbuendig: keine Wort-Luecken durch Blocksatz, keine zerrissenen Woerter */
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.article-body > p {
  margin: 0 0 20px;
}

.article-body > p.lead,
.article-body > .article-coda {
  text-align: left;
  text-align-last: left;
}

.article-body h2 {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  margin: 56px 0 16px;
  text-wrap: balance;
  text-align: left;
}

.article-body h3 {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.3;
  margin: 40px 0 12px;
  text-align: left;
  color: var(--ink-soft);
}

.article-body ul,
.article-body ol {
  margin: 0 0 24px;
  padding-left: 24px;
  text-align: left;
  text-align-last: left;
}
.article-body li {
  margin: 0 0 10px;
  line-height: 1.65;
}

.article-body code {
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  color: var(--ink);
}

.article-body strong { font-weight: 700; color: var(--ink); }
.article-body em { font-style: italic; }
.article-body a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body a:hover { color: var(--accent-d); }

.article-table-wrap {
  margin: 24px 0 32px;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}
.article-table th,
.article-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.article-table th {
  background: var(--bg-soft);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.article-table tr:last-child td { border-bottom: none; }

.article-coda {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: 14px;
  text-align: left;
  text-align-last: left;
}

/* --- Related Articles --- */

.related-articles {
  padding: 56px var(--gutter, 24px);
  background: var(--bg-soft);
  margin: 48px 0 0;
}
.related-articles-inner {
  max-width: 920px;
  margin: 0 auto;
}
.related-grid {
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.related-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.1);
}
.related-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 8px;
}
.related-title {
  display: block;
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
}

/* --- Mobile Tweaks --- */

@media (max-width: 480px) {
  .blog-card { padding: 24px 22px; }
  .article-body { font-size: 16px; }
  .article-body h2 { margin-top: 40px; }
  .article-body h3 { margin-top: 32px; }
  .related-articles { padding: 40px 20px; }
}

/* ============================================================
   SERVICES NEU (2026-05-25): Strategie-Anker + 2 Gruppen + Scroll-Stagger
   ============================================================ */

/* ----- STRATEGIE als hervorgehobener Anker oben ----- */

.service-anchor {
  margin: 48px auto 32px;
  max-width: 920px;
  padding: 0 var(--gutter, 24px);
}
.service-anchor-inner {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #ffd2d2 100%);
  border-radius: 24px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
  box-shadow: 0 12px 48px -16px rgba(232, 95, 61, 0.18);
  position: relative;
  overflow: hidden;
}
.service-anchor-inner::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255,122,89,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.service-anchor-num {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  color: var(--accent-text);
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.service-anchor-body { position: relative; z-index: 1; }
.service-anchor-label {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--accent-deep);
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.service-anchor-body h3 {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 30px);
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.2;
}
.service-anchor-body p {
  margin: 0 0 12px;
  color: #2a2a2a;
  line-height: 1.6;
}
.service-anchor-tag {
  font-size: 12px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep) !important;
  font-weight: 600;
  margin-top: 14px !important;
}

/* ----- "dann eines von beidem" Trenner ----- */

.service-or {
  text-align: center;
  margin: 32px auto 40px;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--ink-mute);
  position: relative;
}
.service-or span {
  background: var(--bg, var(--bg-paper));
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.service-or::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 480px;
  height: 1px;
  background: var(--line);
  z-index: 0;
}

/* ----- Service-Gruppen ----- */

.service-group {
  max-width: 1100px;
  margin: 56px auto;
  padding: 0 var(--gutter, 24px);
}
.service-group + .service-group { margin-top: 80px; }

.service-group-head {
  max-width: 720px;
  margin: 0 0 28px;
}
.service-group-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 12px;
}
.service-group-title {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
  text-wrap: balance;
}
.service-group-lead {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* Visuelle Trennung Gruppe A vs B */
.service-group-a .service-num { color: var(--accent-deep); }
.service-group-b .service-num { color: var(--accent-deep); }
.service-group-b .service-group-head .eyebrow { color: var(--accent-deep); }

/* ----- Scroll-Stagger fuer Service-Items ----- */

/* data-reveal Items kommen sanft von unten rein */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js [data-reveal].is-revealed,
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger fuer Items innerhalb einer Gruppe (CSS-Var --stagger aus Template) */
.service-item[data-reveal] {
  transition-delay: calc(var(--stagger, 0) * 0.08s);
}

/* Anker-Block hat extra Spring-Effekt */
html.js .service-anchor[data-reveal] {
  transform: translateY(40px) scale(0.97);
}
html.js .service-anchor[data-reveal].is-revealed,
.service-anchor[data-reveal].is-revealed {
  transform: translateY(0) scale(1);
  transition-duration: 0.85s;
}

/* Hero-Video: subtiler Parallax beim Scroll */
.hero-video {
  position: relative;
  /* Poster als Sofort-Hintergrund: ueberbrueckt die Ladezeit von
     poster-Attribut + Video ohne schwarzen Moment */
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
}
.hero-bg-video {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-bg-video { transition: none !important; }
}

/* ============================================================
   TYPOGRAFIE-SYSTEM (2026-05-26): dynamische Anordnung
   text-wrap: balance  → verteilt Text gleichmaessig auf alle Zeilen
                         (perfekt fuer Headlines, kurze Labels, Card-Untertitel)
   text-wrap: pretty   → letzte Zeile darf nicht ein einzelnes Wort sein
                         (perfekt fuer Fliesstext, Lead-Paragraphen)
   ============================================================ */

/* Headlines + kurze Labels: balance (gleichmaessige Zeilen) */
h1, h2, h3, h4, h5, h6,
.display, .display-md, .display-hero,
.statement-quote,
.service-anchor-body h3,
.service-group-title,
.blog-card-title, .case-hero-title,
.social-proof-name, .social-proof-meta,
.case-card-title,
.module-name, .tile-name,
.welcome-title, .screen-title,
.placeholder-note,
.section-head h2 {
  text-wrap: balance;
}

/* Laengere Absaetze: pretty (kein Wort-Witwen) */
p, li,
.lead,
.blog-card-excerpt,
.service-body p,
.service-group-lead,
.service-anchor-body p,
.case-hero-lead,
.case-section p,
.legal-section p {
  text-wrap: pretty;
}

/* ============================================================
   SERVICE-PICKER (2026-05-26): Karten als Toggle + Sticky-Pille
   ============================================================ */

.service-item {
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  outline: none;
}
.service-item:hover {
  border-color: var(--line);
  transform: translateY(-1px);
}
.service-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Check-Icon: standardmaessig unsichtbar */
.service-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
  color: transparent;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
  pointer-events: none;
}

/* AKTIV: Karte ausgewaehlt */
.service-item.is-selected {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #ffd2d2 100%);
  border-color: var(--accent) !important;
  box-shadow: 0 6px 24px -10px rgba(232, 95, 61, 0.25);
}
.service-item.is-selected .service-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.1);
}
.service-group-b .service-item.is-selected {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #ffd2d2 100%);
  border-color: var(--accent) !important;
  box-shadow: 0 6px 24px -10px rgba(42, 95, 176, 0.25);
}
.service-group-b .service-item.is-selected .service-check {
  background: var(--accent);
  border-color: var(--accent);
}

/* Subtiler Hinweis-Text */
.service-picker-hint {
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 20px;
  color: var(--ink-mute);
  max-width: 480px;
  margin: 48px auto 0;
  padding: 0 var(--gutter, 24px);
  text-wrap: balance;
}

/* ============================================================
   STICKY-PILLE: schwebt unten rechts wenn min. 1 Auswahl
   ============================================================ */

.paket-picker {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 80;
  max-width: calc(100vw - 48px);
  animation: paketPickerIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.paket-picker[hidden] { display: none; }

.paket-picker-inner {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 16px 48px -12px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.15);
  font-family: var(--font-body, "Inter", sans-serif);
}

.paket-picker-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-right: 4px;
}
.paket-picker-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin: 0 0 2px;
}
.paket-picker-count {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.1;
}
.paket-picker-num {
  font-size: 18px;
  color: var(--accent-text);
}
.paket-picker-names {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin: 2px 0 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paket-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.12s ease;
}
.paket-picker-btn:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
}
.paket-picker-btn .btn-arrow {
  transition: transform 0.18s ease;
}
.paket-picker-btn:hover .btn-arrow { transform: translateX(2px); }

.paket-picker-clear {
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.7);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.18s ease;
  margin-right: 4px;
}
.paket-picker-clear:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

@keyframes paketPickerIn {
  from { transform: translateY(40px) scale(0.92); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Pille-Update Animation (wenn Count sich aendert) */
.paket-picker.is-pulse .paket-picker-num {
  animation: paketPulse 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes paketPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); color: #fff; }
  100% { transform: scale(1); }
}

/* Mobile */
@media (max-width: 640px) {
  .paket-picker {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
  .paket-picker-inner {
    border-radius: 18px;
    padding: 12px 12px 12px 18px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .paket-picker-names { max-width: 180px; }
  .paket-picker-btn { flex: 1; justify-content: center; padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .paket-picker { animation: none; }
  .paket-picker.is-pulse .paket-picker-num { animation: none; }
}

/* ============================================================
   PILLARS (2026-05-26 Saeulen-Pivot): 3 Karten als Haupt-CTA der Home
   ============================================================ */

.pillars {
  padding: 56px 0 80px;
}
.pillars-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
}

.section-head-lead {
  max-width: 600px;
  margin-top: 12px;
  color: var(--ink-soft);
}

.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 56px 0 40px;
}
@media (min-width: 900px) {
  .pillar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.pillar {
  background: #fff;
  border-radius: 22px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px -16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-top: 4px solid transparent;
}
.pillar:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px -16px rgba(0,0,0,0.12);
}
.pillar-social { border-top-color: var(--pillar-social); }
.pillar-web    { border-top-color: var(--pillar-web); }
.pillar-geo    { border-top-color: var(--pillar-geo); }

.pillar-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute, #8a8a8e);
  margin: 0 0 16px;
}

.pillar-title {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--ink);
  text-wrap: balance;
}
.pillar-title em {
  font-style: italic;
}
.pillar-social .pillar-title em { color: var(--accent-deep); }
.pillar-web    .pillar-title em { color: var(--pillar-web); }
.pillar-geo    .pillar-title em { color: var(--pillar-geo); }

.pillar-lead {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 20px;
  text-wrap: pretty;
}

.pillar-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--ink);
}
.pillar-list li {
  padding: 8px 0 8px 22px;
  position: relative;
  border-top: 1px dashed var(--line);
  line-height: 1.5;
}
.pillar-list li:first-child { border-top: none; }
.pillar-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
.pillar-social .pillar-list li::before { background: var(--pillar-social); opacity: 0.8; }
.pillar-web    .pillar-list li::before { background: var(--pillar-web); opacity: 0.8; }
.pillar-geo    .pillar-list li::before { background: var(--pillar-geo); opacity: 0.8; }

.pillar-cases {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--bg-paper);
  border-radius: 10px;
  text-wrap: pretty;
}
.pillar-cases-label {
  font-weight: 600;
  color: var(--ink-mute);
  margin-right: 6px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.pillar-cases a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}
.pillar-cases a:hover { color: var(--accent-deep); }

.pillar-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  align-self: flex-start;
  transition: all 0.18s ease;
}
.pillar-cta:hover {
  background: var(--ink);
  color: #fff;
  transform: translateX(2px);
}
.pillar-cta .btn-arrow {
  transition: transform 0.18s ease;
}
.pillar-cta:hover .btn-arrow { transform: translateX(2px); }

/* GEO Audit: Primary-Variante (gruen, gefuellt) */
.pillar-cta-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--accent);
}
.pillar-cta-primary:hover {
  background: var(--accent-d);
  border-color: var(--accent-d);
  color: #fff;
}

.pillars-custom-hint {
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--ink-mute, #8a8a8e);
  margin: 48px auto 0;
  max-width: 580px;
  text-wrap: balance;
}
.pillars-custom-hint a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
}
.pillars-custom-hint a:hover { color: var(--accent-deep); }

/* ============================================================
   GEO-AUDIT PRODUKT-PAGE
   ============================================================ */

.product-hero {
  padding: clamp(60px, 8vw, 120px) var(--gutter, 24px) clamp(40px, 5vw, 80px);
}
.product-hero-inner {
  max-width: 920px;
  margin: 0 auto;
}
.product-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 24px;
}
.product-hero-title {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  margin: 0 0 24px;
  text-wrap: balance;
}
.product-hero-title em {
  font-style: italic;
  color: var(--accent-text);
}
.product-hero-lead {
  font-size: clamp(17px, 1.5vw, 19px);
  max-width: 640px;
  margin: 0 0 40px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.product-hero-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, #ffd2d2 100%);
  padding: 28px 32px;
  border-radius: 18px;
  margin-top: 32px;
}
@media (min-width: 720px) {
  .product-hero-meta { grid-template-columns: repeat(3, 1fr); }
}
.product-meta-item {
  text-align: center;
}
.product-meta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-d);
  margin: 0 0 6px;
}
.product-meta-value {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.1;
}
.product-meta-hint {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 0;
}

.product-section {
  padding: 0 var(--gutter, 24px) 80px;
}
.product-section-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.product-block-title {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 20px;
  text-wrap: balance;
}

.product-checklist,
.product-deliverables {
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-checklist li,
.product-deliverables li {
  padding: 12px 0 12px 32px;
  border-top: 1px solid var(--line);
  position: relative;
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}
.product-checklist li:first-child,
.product-deliverables li:first-child { border-top: none; }
.product-checklist li::before,
.product-deliverables li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
}
.product-checklist li::after,
.product-deliverables li::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 22px;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}

.product-process {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: process;
}
.product-process li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.product-process li:first-child { border-top: none; }
.product-process-num {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-text);
}
.product-process h3 {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 6px;
}
.product-process p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.product-cta-card {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #ffd2d2 100%);
  border-radius: 22px;
  padding: 48px 36px;
  text-align: center;
  margin-top: 24px;
}
.product-cta-card h2 {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 12px;
}
.product-cta-card p {
  max-width: 480px;
  margin: 0 auto 24px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.product-cta-card .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  border: none;
}
.product-cta-card .btn-primary:hover { background: var(--accent-d); }
.product-cta-hint {
  font-size: 13px !important;
  color: var(--ink-mute) !important;
  margin: 16px 0 0 !important;
}

/* ============================================================
   CASE-GRID STAGGERED (2026-05-28): Magazin-Treppen-Layout fuer 3 Cases
   ============================================================ */

/* ============================================================
   CASE-STORY (2026-05-28): Magazin-Editorial mit Story-Tiefe
   Alternating Bild-links / Bild-rechts, untereinander gestapelt.
   ============================================================ */

.case-story-list {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 var(--gutter, 24px);
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.case-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  position: relative;
}

.case-story-left .case-story-visual { order: 1; }
.case-story-left .case-story-body   { order: 2; }
.case-story-right .case-story-visual { order: 2; }
.case-story-right .case-story-body   { order: 1; }

/* Versatz fuer Magazin-Wirkung */
.case-story-left  { padding-right: 4%; }
.case-story-right { padding-left: 4%; }

/* Visual: Video oder Poster — EXAKT 9:16 wie die Reels selbst.
   NIE croppen: Untertitel/Gesichter muessen voll im Bild sein (Jan, 2026-06-13) */
.case-story-visual {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  /* Reel in Handy-Groesse statt halber Seitenbreite — gleiche
     Deckelung wie .reel-focus-video auf den Case-Detailseiten */
  width: 100%;
  max-width: 360px;
  justify-self: center;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 20px 60px -16px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  text-decoration: none;
}
.case-story-visual:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 28px 72px -16px rgba(0,0,0,0.28), 0 6px 16px rgba(0,0,0,0.10);
}
.case-story-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-story-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 40px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 4px 16px rgba(0,0,0,0.4);
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.case-story-visual:hover .case-story-play {
  opacity: 1;
  transform: scale(1.15);
}
/* Spielt das Preview-Video, blendet das statische Play-Icon aus */
.case-story.is-playing .case-story-play { opacity: 0; }

/* Body: Text-Spalte */
.case-story-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-story-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}

.case-story-title {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.case-story-title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.18s ease;
}
.case-story-title a:hover { color: var(--accent-deep); }

.case-story-lead {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

/* Stats: drei Mini-Spalten */
.case-story-stats {
  list-style: none;
  padding: 20px 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.case-story-stats li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.case-story-stats strong {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--accent-text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.case-story-stats span {
  font-size: 11px;
  color: var(--ink-mute, #8a8a8e);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  line-height: 1.3;
}

/* Quote: warm, Caveat-Feeling */

/* CTA-Row */
.case-story-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 16px;
}
.case-story-cta-link,
.case-story-cta-buy {
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.18s ease;
  line-height: 1.3;
}
.case-story-cta-link {
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px;
}
.case-story-cta-link:hover {
  color: var(--accent-text);
  border-bottom-color: var(--accent-text);
}
.case-story-cta-buy {
  color: #fff;
  background: var(--ink, var(--ink));
  padding: 10px 16px;
  border-radius: 999px;
}
.case-story-cta-buy:hover {
  background: var(--accent-deep);
}

/* Tablet: stapeln */
@media (max-width: 900px) {
  .case-story-list { gap: 64px; }
  .case-story,
  .case-story-left,
  .case-story-right {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-left: 0;
    padding-right: 0;
  }
  .case-story-visual,
  .case-story-body {
    order: unset !important;
  }
  .case-story-visual {
    aspect-ratio: 9 / 16;
    max-width: min(78vw, 320px);
    margin: 0 auto;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Mobile: kompakter */
@media (max-width: 560px) {
  .case-story-list { gap: 56px; padding: 0 16px; }
  .case-story-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .case-story-stats strong { font-size: 20px; }
  .case-story-cta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .case-story-cta-buy { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .case-story-visual,
  .case-story-play { transition: none; }
}

/* =================================================================
   FORM-FEEDBACK (Success/Error-Banner ueber Kontakt-/Checkliste-Form)
   ================================================================= */
.form-feedback {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.5;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  color: var(--ink);
}
.form-feedback-ok {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.form-feedback-error {
  border-color: var(--accent-deep);
  box-shadow: inset 3px 0 0 var(--accent-deep);
  color: var(--accent-deep);
}

/* =================================================================
   PERSONA-EINSTIEG (Home): Pain-Saetze pro Zielgruppe als Zitat-Karten
   ================================================================= */
.persona-section {
  padding: clamp(64px, 9vw, 120px) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.persona-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(36px, 5vw, 56px);
}
.persona-card {
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.persona-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -22px rgba(0, 0, 0, 0.25);
}
.persona-quote {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink);
  position: relative;
  padding-left: 26px;
}
.persona-quote::before {
  content: '\201E';
  position: absolute;
  left: 0;
  top: -2px;
  font-size: 1.9em;
  line-height: 1;
  color: var(--accent-text);
  font-style: normal;
}
.persona-answer {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.55;
}
.persona-link { margin: auto 0 0; }

@media (max-width: 720px) {
  .persona-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   AUDIENCE-BRIDGE (Leistungen): Pain -> Einstieg, kompakt
   ================================================================= */
.audience-bridge {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-paper);
}
.audience-bridge-list {
  list-style: none;
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(18px, 3vw, 36px);
}
.audience-bridge-list a {
  display: inline-block;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.audience-bridge-list a:hover { color: var(--accent-deep); }
.audience-bridge-list strong { color: var(--ink); font-weight: 600; }
.audience-bridge-list span[aria-hidden] { color: var(--accent-text); }

/* =================================================================
   FULLSCREEN-FIX: 9:16-Videos im Vollbild nicht beschneiden
   (object-fit: cover wuerde croppen -> contain + schwarzer Grund)
   ================================================================= */
video:fullscreen { object-fit: contain; background: #000; }
video:-webkit-full-screen { object-fit: contain; background: #000; }

/* =================================================================
   PROOF-REELS: echte Reels (9:16) auf den Landingpages — der Beweis,
   den keine Behauptung ersetzt.
   ================================================================= */
.proof-reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
  margin: 18px 0 6px;
}
.proof-reel {
  position: relative;
  margin: 0; /* figure User-Agent-Margin (1em 40px) resetten */
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink);
}
.proof-reel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile: 3 Spalten waeren 106px-Briefmarken. Stattdessen wischbares
   Karussell mit Scroll-Snap; angeschnittene zweite Karte signalisiert
   die Wischbarkeit. */
@media (max-width: 640px) {
  .proof-reels {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .proof-reels::-webkit-scrollbar { display: none; }
  .proof-reel {
    flex: 0 0 min(62vw, 240px);
    scroll-snap-align: center;
  }
}
.proof-reel-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.proof-reels-hint {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--ink-mute);
}
@media (max-width: 600px) {
  .proof-reel-tag { font-size: 0.7rem; }
}

/* =================================================================
   STICKY-CTA: schwebende Erstgespraech-Blase (erscheint nach Scroll,
   dismissible, nicht auf Kontakt/Rechtsseiten)
   ================================================================= */
.sticky-cta {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.sticky-cta.show { opacity: 1; transform: none; pointer-events: auto; }
.sticky-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.sticky-cta-link:hover { transform: translateY(-2px); background: var(--accent-deep); }
.sticky-cta-close {
  /* 44px Trefferflaeche, sichtbarer Kreis bleibt 26px (content-box) */
  width: 44px;
  height: 44px;
  padding: 9px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  background-clip: content-box;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 600px) {
  .sticky-cta { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .sticky-cta-link { padding: 12px 16px; font-size: 0.88rem; }
}
@media print { .sticky-cta { display: none; } }

/* Hero-CTA auf den Produkt-Landingpages (Reihe unter dem Lead) */
.product-hero .hero-cta-row {
  margin: 26px 0 0;
  align-items: center;
  gap: 16px;
}
.hero-cta-hint {
  font-size: 0.84rem;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}

/* Mid-CTA zwischen Bloecken (nach dem Proof-Block) */
.product-mid-cta {
  margin: -6px 0 8px;
  font-size: 1.02rem;
  font-weight: 600;
}

/* =================================================================
   DISTRIBUTION & ADS Block (Startseite, nach den Saeulen)
   ================================================================= */
.ads-section {
  padding: clamp(64px, 9vw, 110px) 0;
  background: var(--bg-cream);
  border-top: 1px solid var(--line);
}
.ads-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ads-checklist {
  max-width: 720px;
  margin-top: 8px;
}
.ads-cta {
  margin-top: 26px;
  font-size: 1.02rem;
  font-weight: 600;
}


/* =================================================================
   UI-AUDIT-FIXES 2026-06-12: Scrim, FAQ-Accordion, Checkbox-Farbe,
   Eyebrow-Puls, Lesebreite (siehe _brain/REVIEWS/2026-06-12_ui-optik-audit.md)
   ================================================================= */

/* Bottom-Scrim macht die proof-reel-Tags auf bewegtem Video lesbar
   (gleiches Pattern wie .reel-card-overlay) */
.proof-reel::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
  z-index: 1;
}

/* FAQ als natives Accordion (details/summary), JSON-LD bleibt unberuehrt */
details.faq-item summary.faq-q {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 36px;
}
details.faq-item summary.faq-q::-webkit-details-marker { display: none; }
details.faq-item summary.faq-q::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25em;
  line-height: 1;
  color: var(--accent-text);
  transition: transform 0.25s var(--ease-out);
}
details.faq-item[open] summary.faq-q::after {
  transform: translateY(-50%) rotate(45deg);
}
details.faq-item summary.faq-q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
details.faq-item[open] .faq-a { animation: faqReveal 0.3s var(--ease-out); }
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Checkboxen in Markenfarbe statt System-Blau */
input[type="checkbox"] { accent-color: var(--accent-text); }

/* Exit-Intent-Dismiss war das einzige interaktive Element ohne Hover */
.exit-intent-dismiss:hover { color: var(--ink); }

/* Lesebreite: 760px-Spalte ergibt ~90 Zeichen, optimal sind 45-75 */
.product-block p { max-width: 65ch; }
.article-body > p { max-width: 65ch; }

/* Eyebrow-Dot: langsamer Puls als kleinstes Lebenszeichen jeder Sektion */
@keyframes eyebrowPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.65; }
}
.eyebrow-dot { animation: eyebrowPulse 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .eyebrow-dot { animation: none; }
}


/* =================================================================
   SPLIT-HERO Landingpages: das Produkt (Reel) ist ab dem ersten
   Blick sichtbar — Text links, 9:16-Medium rechts
   ================================================================= */
.product-hero-split-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 300px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1010px;
}
.product-hero-reel {
  width: 100%;
  margin: 0;
}
.proof-reel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 800px) {
  .product-hero-split-inner { grid-template-columns: 1fr; }
  .product-hero-reel { max-width: 240px; margin-top: 6px; }
}

/* =================================================================
   VIDEO-KACHELN: sanfter Lade-Puls statt hartem Schwarz, bis
   Poster/Video gemalt sind (liegt unsichtbar HINTER dem Medium)
   ================================================================= */
/* Kein schwarzer Lade-Blitz: jedes <video> zeigt sofort sein LQIP
   (assets/reel-lqip.css, per [poster$=]-Selektor als Hintergrund).
   Container-Grundton warm-neutral statt schwarz, falls doch eine
   Luecke bleibt. */
.proof-reel video,
.reel-focus-video video,
.case-story-visual video,
.case-story-video,
.case-card-v video {
  background-size: cover;
  background-position: center;
}
.proof-reel,
.reel-card,
.reel-focus-video,
.case-story-visual,
.case-card-image {
  background-color: #2a2422;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =================================================================
   HOME-HERO (Split): etwas grosszuegiger als die Produkt-Heros
   ================================================================= */
.home-hero { padding-top: clamp(48px, 7vw, 96px); }
.home-hero .product-hero-title { font-size: clamp(34px, 5.5vw, 62px); }
.home-hero .product-hero-reel { max-width: clamp(240px, 26vw, 320px); }
.home-hero .hero-proof {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 0.82rem; color: var(--ink-mute); font-weight: 500; letter-spacing: 0.04em;
}
.home-hero .hero-proof li { display: inline-flex; align-items: center; }
.home-hero .hero-proof .dot { color: var(--line); }