/* ==========================================================================
   SCHMIEL CONSULTING – REDESIGN 2026
   Eigenstaendiges Design-System fuer die neue Startseite.
   Laedt unabhaengig von main.css (keine Altlasten, kleinere Datei).

   Aufbau
   1  Tokens
   2  Reset & Basis
   3  Layout
   4  Typografie-Bausteine
   5  Buttons & Links
   6  Topbar / Header / Navigation
   7  Hero (Video)
   8  Plattform-Leiste
   9  Projekte (Cases)
   10 Growth System
   11 Strategie
   12 Social Media & Video
   13 Google & KI
   14 KI-Automatisierung
   15 Historie / Timeline
   16 Zahlen
   17 Warum wir
   18 Prozess
   19 FAQ
   20 Abschluss-CTA
   21 Footer
   22 Motion, A11y, Utilities
   ========================================================================== */

/* 1  TOKENS
   ---------------------------------------------------------------------- */
:root {
  /* Marke */
  --sc-navy-900: #080d1a;
  --sc-navy-800: #101728;   /* Primaerer Dunkelton */
  --sc-navy-700: #17203a;
  --sc-navy-600: #1e2749;   /* bestehende Markenfarbe */
  --sc-navy-500: #2b3760;

  --sc-warm: #f8f6f0;       /* Warm White */
  --sc-warm-2: #f1eee5;
  --sc-warm-3: #e8e3d6;
  --sc-white: #ffffff;

  --sc-gold: #ffbc57;       /* Marken-Gold aus dem Logo */
  --sc-gold-deep: #e79f2c;
  --sc-gold-ink: #8f5300;   /* Gold als Text auf hellem Grund (Kontrast) */

  --sc-ink: #101728;
  --sc-body: #3a4055;
  --sc-muted: #6b7285;
  --sc-muted-dark: rgba(248, 246, 240, 0.66);

  --sc-line: rgba(16, 23, 40, 0.10);
  --sc-line-strong: rgba(16, 23, 40, 0.18);
  --sc-line-dark: rgba(248, 246, 240, 0.14);

  --sc-focus: #7aa7ff;

  /* Typografie – ausschliesslich Systemschriften (DSGVO, Tempo) */
  --sc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.5rem, 1.35rem + 4.6vw, 5.25rem);
  --fs-h2:      clamp(2rem, 1.35rem + 2.7vw, 3.75rem);
  --fs-h3:      clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --fs-h4:      clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.36vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-kicker:  0.75rem;

  /* Raster */
  --sc-container: 1280px;
  --sc-container-wide: 1560px;
  --sc-gutter: clamp(1.25rem, 4vw, 3rem);
  --sc-section: clamp(4.5rem, 8.5vw, 9rem);

  --sc-radius-s: 10px;
  --sc-radius-m: 18px;
  --sc-radius-l: 28px;
  --sc-radius-xl: 36px;
  --sc-pill: 999px;

  --sc-shadow-s: 0 1px 2px rgba(16, 23, 40, 0.05);
  --sc-shadow-m: 0 18px 40px -24px rgba(16, 23, 40, 0.35);
  --sc-shadow-l: 0 40px 90px -50px rgba(16, 23, 40, 0.55);

  --sc-header: 84px;
  --sc-topbar: 40px;

  --sc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sc-t: 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 899px) {
  :root { --sc-header: 68px; --sc-topbar: 0px; }
}

/* 2  RESET & BASIS
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sc-header) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--sc-font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--sc-body);
  background: var(--sc-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  color: var(--sc-ink);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.15; }
h4 { font-size: var(--fs-h4); letter-spacing: -0.012em; line-height: 1.25; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
strong { color: var(--sc-ink); font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--sc-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sc-gold); color: var(--sc-navy-800); }

/* 3  LAYOUT
   ---------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--sc-container);
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}
.wrap--wide { max-width: var(--sc-container-wide); }
.wrap--narrow { max-width: 860px; }

.sec { padding-block: var(--sc-section); position: relative; }
.sec--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.sec--warm { background: var(--sc-warm); }
.sec--warm-2 { background: var(--sc-warm-2); }
.sec--dark { background: var(--sc-navy-800); color: rgba(248, 246, 240, 0.78); }
.sec--dark h2, .sec--dark h3, .sec--dark h4 { color: var(--sc-warm); }
.sec--deep { background: var(--sc-navy-900); color: rgba(248, 246, 240, 0.78); }
.sec--deep h2, .sec--deep h3, .sec--deep h4 { color: var(--sc-warm); }

/* 4  TYPOGRAFIE-BAUSTEINE
   ---------------------------------------------------------------------- */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  font-size: var(--fs-kicker);
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-gold-ink);
}
.kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--sc-gold);
  flex: none;
}
.kicker--center { justify-content: center; }
.sec--dark .kicker, .sec--deep .kicker, .hero .kicker { color: var(--sc-gold); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--sc-muted);
  max-width: 62ch;
}
.sec--dark .lead, .sec--deep .lead { color: var(--sc-muted-dark); }

.sec-head { max-width: 56rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }

.gold { color: var(--sc-gold); }
.gold-ink { color: var(--sc-gold-ink); }

/* 5  BUTTONS & LINKS
   ---------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--sc-gold);
  --btn-fg: var(--sc-navy-800);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.75rem;
  min-height: 54px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--sc-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--sc-t), background-color var(--sc-t),
              border-color var(--sc-t), color var(--sc-t), box-shadow var(--sc-t);
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--sc-t); }
.btn:hover svg { transform: translateX(3px); }

.btn--gold { box-shadow: 0 14px 30px -18px rgba(231, 159, 44, 0.9); }
.btn--gold:hover { background: var(--sc-gold-deep); }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--sc-warm);
  --btn-bd: rgba(248, 246, 240, 0.32);
}
.btn--outline-light:hover { --btn-bg: rgba(248, 246, 240, 0.10); --btn-bd: rgba(248, 246, 240, 0.6); }

.btn--outline-dark {
  --btn-bg: transparent;
  --btn-fg: var(--sc-ink);
  --btn-bd: var(--sc-line-strong);
}
.btn--outline-dark:hover { --btn-bg: var(--sc-ink); --btn-fg: var(--sc-warm); --btn-bd: var(--sc-ink); }

.btn--dark { --btn-bg: var(--sc-navy-800); --btn-fg: var(--sc-warm); }
.btn--dark:hover { --btn-bg: var(--sc-navy-600); }

.btn--sm { min-height: 44px; padding: 0.6rem 1.2rem; font-size: var(--fs-xs); }
.btn--lg { min-height: 60px; padding: 1.15rem 2.15rem; font-size: var(--fs-body); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

.alink {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 650;
  font-size: var(--fs-sm);
  color: var(--sc-ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--sc-line-strong);
  transition: gap var(--sc-t), border-color var(--sc-t), color var(--sc-t);
}
.alink::after {
  content: "";
  width: 16px; height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h13M9.5 1L14 5l-4.5 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h13M9.5 1L14 5l-4.5 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--sc-t);
}
.alink:hover { gap: 0.85rem; border-color: var(--sc-gold); color: var(--sc-gold-ink); }
.sec--dark .alink, .sec--deep .alink { color: var(--sc-warm); border-color: var(--sc-line-dark); }
.sec--dark .alink:hover, .sec--deep .alink:hover { color: var(--sc-gold); border-color: var(--sc-gold); }

/* 6  TOPBAR / HEADER / NAVIGATION
   ---------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sc-gold); color: var(--sc-navy-800);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--sc-radius-s) 0;
  font-weight: 650; text-decoration: none;
}
.skip-link:focus { left: 0; }

.topbar {
  position: relative;
  z-index: 60;
  background: var(--sc-navy-900);
  color: rgba(248, 246, 240, 0.62);
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(248, 246, 240, 0.07);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--sc-topbar);
}
.topbar a { color: inherit; text-decoration: none; transition: color var(--sc-t); }
.topbar a:hover { color: var(--sc-gold); }
.topbar__social { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.topbar__social svg { width: 15px; height: 15px; fill: currentColor; }
.topbar__info { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.topbar__info svg { width: 14px; height: 14px; fill: currentColor; }
.topbar__contact, .topbar__wa { display: inline-flex; align-items: center; gap: 0.45rem; }
@media (max-width: 899px) { .topbar { display: none; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 320ms ease, box-shadow 320ms ease,
              border-color 320ms ease;
  border-bottom: 1px solid transparent;
}
.site-header--overlay { background: transparent; margin-bottom: calc(var(--sc-header) * -1); }
.site-header.is-solid {
  background: rgba(16, 23, 40, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(248, 246, 240, 0.10);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--sc-header);
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: auto; height: 34px; }
@media (max-width: 899px) { .brand img { height: 28px; } }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: rgba(248, 246, 240, 0.82);
  text-decoration: none;
  transition: color var(--sc-t);
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--sc-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--sc-ease);
}
.site-nav__list a:hover { color: var(--sc-warm); }
.site-nav__list a:hover::after { transform: scaleX(1); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  color: rgba(248, 246, 240, 0.5);
}
.lang-switch a { color: rgba(248, 246, 240, 0.5); text-decoration: none; transition: color var(--sc-t); }
.lang-switch a:hover { color: var(--sc-gold); }
.lang-switch [aria-current] { color: var(--sc-warm); }
.lang-switch::before { content: ""; width: 1px; height: 14px; background: rgba(248, 246, 240, 0.18); margin-right: 0.4rem; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid rgba(248, 246, 240, 0.22);
  border-radius: var(--sc-radius-s);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1.5px;
  background: var(--sc-warm);
  transform: translate(-50%, -50%);
  transition: transform 260ms var(--sc-ease), opacity 200ms ease;
}
.nav-toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 5px)); }
.nav-toggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 5px)); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 1099px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: var(--sc-header) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 1.5rem var(--sc-gutter) 2.5rem;
    background: var(--sc-navy-800);
    border-bottom: 1px solid rgba(248, 246, 240, 0.10);
    max-height: calc(100dvh - var(--sc-header));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, transform 300ms var(--sc-ease), visibility 240ms;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list a {
    display: block;
    padding: 0.95rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid rgba(248, 246, 240, 0.09);
  }
  .site-nav__list a::after { display: none; }
  .site-nav .btn { margin-top: 1.5rem; width: 100%; }
  .lang-switch { margin-top: 1.25rem; }
  .lang-switch::before { display: none; }
}

/* 7  HERO
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--sc-navy-800);
  color: var(--sc-warm);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 88vh, 980px);
  padding-top: calc(var(--sc-header) + clamp(2rem, 5vh, 4rem));
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
}
.hero__content { max-width: 45rem; }

.hero .kicker { margin-bottom: 1.6rem; }

.hero h1 {
  color: var(--sc-warm);
  margin-bottom: 1.5rem;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-weight: 700;
}
.hero h1 .line { display: block; }

.hero__sub {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(248, 246, 240, 0.76);
  max-width: 40rem;
  margin-bottom: 0;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: rgba(248, 246, 240, 0.55);
}
.hero__trust li { display: flex; align-items: center; gap: 0.5rem; }
.hero__trust li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sc-gold);
  flex: none;
}

/* Medien: Desktop = vollflaechiges Video, Mobil = quadratischer Ausschnitt */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--sc-navy-900);
}
.hero__media picture, .hero__media img, .hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}
/* Das Video ist von Anfang an sichtbar. Solange noch keine Quelle
   gesetzt oder noch kein Bild dekodiert ist, zeichnet ein <video> nichts
   – dann scheint das Posterbild darunter durch. Es gibt also bewusst
   keine Klasse, die das Video erst freischaltet. Ebenen im Kopfbereich:
   Video 0, Verlauf 2, Text und Sprungmarke 3, Kopfleiste 50/60.
   Reihenfolge der Ebenen: siehe .hero__media (1) und .hero__veil (2). */
.hero__video {
  z-index: 0;
  display: block;
  opacity: 1;
  visibility: visible;
  background: transparent;   /* damit das Posterbild darunter durchscheint */
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(100deg,
      rgba(16, 23, 40, 0.97) 0%,
      rgba(16, 23, 40, 0.94) 22%,
      rgba(16, 23, 40, 0.72) 42%,
      rgba(16, 23, 40, 0.30) 60%,
      rgba(16, 23, 40, 0.06) 78%,
      rgba(16, 23, 40, 0.00) 100%),
    linear-gradient(to top, rgba(8, 13, 26, 0.65) 0%, rgba(8, 13, 26, 0) 28%);
  pointer-events: none;
}

.hero__scroll {
  position: absolute;
  left: var(--sc-gutter);
  bottom: 2rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(248, 246, 240, 0.42);
  text-decoration: none;
}
.hero__scroll i {
  display: block;
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--sc-gold), transparent);
  animation: scrollHint 2.6s var(--sc-ease) infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.5; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* Mobiler Hero: eigener Aufbau – Text zuerst, Bild darunter */
@media (max-width: 899px) {
  .hero__inner {
    display: block;
    min-height: 0;
    padding-top: calc(var(--sc-header) + 1.75rem);
    padding-bottom: 0;
  }
  .hero__content { max-width: none; }
  .hero h1 { font-size: clamp(2.125rem, 6.2vw + 0.85rem, 3rem); }
  .hero__sub { font-size: 1rem; line-height: 1.6; }
  .hero .btn-row { margin-top: 1.75rem; }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .hero__trust { margin-top: 1.5rem; gap: 0.35rem 1.25rem; font-size: 0.75rem; }
  .hero__media {
    position: relative;
    inset: auto;
    margin: 2rem calc(var(--sc-gutter) * -1) 0;
    aspect-ratio: 1 / 1;
    max-height: 62vh;
  }
  .hero__media picture, .hero__media img, .hero__media video { object-position: center 40%; }
  .hero__veil {
    background: linear-gradient(to bottom, rgba(16, 23, 40, 0.30) 0%, rgba(16, 23, 40, 0) 26%);
  }
  .hero__scroll { display: none; }
}

@media (max-width: 899px) and (min-width: 768px) {
  .hero__media { aspect-ratio: 16 / 10; }
  .hero .btn-row .btn { flex: 0 1 auto; }
}

/* 8  PLATTFORM-LEISTE
   ---------------------------------------------------------------------- */
.platforms { background: var(--sc-warm); border-bottom: 1px solid var(--sc-line); }
.platforms__head {
  margin: 0 0 1.75rem;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-muted);
}
.platforms__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.platforms__track li {
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(16, 23, 40, 0.42);
  transition: color var(--sc-t);
}
.platforms__track li:hover { color: var(--sc-ink); }

@media (min-width: 900px) {
  .platforms__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .platforms__marquee {
    display: flex;
    width: max-content;
    animation: marquee 48s linear infinite;
  }
  .platforms__marquee:hover { animation-play-state: paused; }
  .platforms__marquee .platforms__track {
    flex-wrap: nowrap;
    padding-right: clamp(1.5rem, 5vw, 4.5rem);
  }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* 9  PROJEKTE (CASES)
   ---------------------------------------------------------------------- */
.cases { display: grid; gap: clamp(4rem, 9vw, 8rem); }

.case { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 1000px) {
  .case { grid-template-columns: 1.12fr 0.88fr; }
  .case:nth-child(even) .case__media { order: 2; }
  .case:nth-child(even) .case__body { order: 1; }
}

.case__body { max-width: 34rem; }
.case__num {
  display: block;
  margin-bottom: 1rem;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-gold-ink);
}
.case__body h3 { margin-bottom: 1rem; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
.case__body p { color: var(--sc-muted); margin-bottom: 1.6rem; }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.6rem; padding: 0; }
.tags li {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--sc-line-strong);
  border-radius: var(--sc-pill);
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--sc-body);
  background: var(--sc-white);
}
.sec--dark .tags li, .sec--deep .tags li {
  background: transparent;
  border-color: var(--sc-line-dark);
  color: rgba(248, 246, 240, 0.72);
}

.case__media { position: relative; }
.shot {
  position: relative;
  border-radius: var(--sc-radius-l);
  overflow: hidden;
  background: var(--sc-navy-800);
  box-shadow: var(--sc-shadow-l);
  transition: transform 700ms var(--sc-ease);
}
.case:hover .shot { transform: translateY(-6px); }
.shot__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.1rem;
  background: rgba(248, 246, 240, 0.06);
  border-bottom: 1px solid rgba(248, 246, 240, 0.08);
}
.shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(248, 246, 240, 0.18); }
.shot__bar span {
  margin-left: 0.75rem;
  padding: 0.2rem 0.75rem;
  border-radius: var(--sc-pill);
  background: rgba(248, 246, 240, 0.07);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(248, 246, 240, 0.5);
}
.shot__canvas { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.shot__canvas img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Platzhalter-Visual, solange keine freigegebenen Screenshots vorliegen */
.shot__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(255, 188, 87, 0.16), transparent 55%),
    linear-gradient(160deg, var(--sc-navy-700), var(--sc-navy-900));
}
.shot__placeholder b, .shot__placeholder i {
  display: block;
  border-radius: 4px;
  background: rgba(248, 246, 240, 0.11);
}
.shot__placeholder b { height: 14px; }
.shot__placeholder i { height: 8px; }
.shot__placeholder .w-70 { width: 70%; }
.shot__placeholder .w-45 { width: 45%; }
.shot__placeholder .w-90 { width: 90%; }
.shot__placeholder .w-30 {
  width: 30%; height: 10px;
  background: rgba(255, 188, 87, 0.55);
  border-radius: var(--sc-pill);
}
.shot__note {
  position: absolute;
  left: clamp(1.5rem, 3vw, 2.75rem);
  bottom: clamp(1.25rem, 2.5vw, 2rem);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 246, 240, 0.34);
}

.shot-phone {
  position: absolute;
  right: -3%;
  bottom: -9%;
  width: 21%;
  min-width: 104px;
  aspect-ratio: 9 / 19.5;
  border-radius: 22px;
  padding: 5px;
  background: linear-gradient(160deg, #2b3350, #0d1322);
  box-shadow: 0 30px 60px -30px rgba(8, 13, 26, 0.85);
  transition: transform 700ms var(--sc-ease);
}
.case:hover .shot-phone { transform: translateY(-10px); }
.shot-phone > * {
  width: 100%; height: 100%;
  border-radius: 18px;
  object-fit: cover;
  background: linear-gradient(160deg, var(--sc-navy-600), var(--sc-navy-900));
}
@media (max-width: 640px) { .shot-phone { display: none; } }

/* 10  GROWTH SYSTEM
   ---------------------------------------------------------------------- */
.growth { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 1000px) { .growth { grid-template-columns: 0.38fr 1fr; align-items: start; } }

.growth__rail { position: relative; }
@media (min-width: 1000px) {
  .growth__rail { position: sticky; top: calc(var(--sc-header) + 6rem); }
}
.growth__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.growth__steps li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 246, 240, 0.30);
  transition: color 420ms ease;
}
.growth__steps li b {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(248, 246, 240, 0.14);
  transition: color 420ms ease;
}
.growth__steps li.is-active { color: var(--sc-warm); }
.growth__steps li.is-active b { color: var(--sc-gold); }

.growth__progress {
  position: absolute;
  left: -1.75rem; top: 0.4rem; bottom: 0.4rem;
  width: 2px;
  background: rgba(248, 246, 240, 0.10);
  border-radius: 2px;
  overflow: hidden;
}
.growth__progress i {
  position: absolute;
  inset: 0 0 auto 0;
  height: 33.34%;
  background: linear-gradient(to bottom, var(--sc-gold), var(--sc-gold-deep));
  transform: translateY(0);
  transition: transform 520ms var(--sc-ease);
}
@media (max-width: 999px) { .growth__progress { display: none; } }

.growth__stages { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }

.stage {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border: 1px solid rgba(248, 246, 240, 0.12);
  border-radius: var(--sc-radius-l);
  background: linear-gradient(165deg, rgba(30, 39, 73, 0.96), rgba(11, 17, 32, 0.98));
}
@media (min-width: 1000px) {
  .stage { position: sticky; top: calc(var(--sc-header) + 5rem); }
  .stage:nth-child(2) { top: calc(var(--sc-header) + 5.9rem); }
  .stage:nth-child(3) { top: calc(var(--sc-header) + 6.8rem); }
}
.stage__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(248, 246, 240, 0.10);
}
.stage__num {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--sc-gold);
}
.stage__top h3 {
  margin: 0;
  font-size: var(--fs-h3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stage p { color: rgba(248, 246, 240, 0.72); margin-bottom: 1.5rem; max-width: 46rem; }
.stage__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.stage__list li {
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(248, 246, 240, 0.14);
  border-radius: var(--sc-pill);
  font-size: var(--fs-xs);
  color: rgba(248, 246, 240, 0.78);
}

/* 11  STRATEGIE
   ---------------------------------------------------------------------- */
.strategy { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (min-width: 1000px) { .strategy { grid-template-columns: 1fr 0.9fr; } }
.strategy h2 { max-width: 18ch; }
.strategy__quote {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--sc-radius-l);
  background: var(--sc-navy-800);
  color: var(--sc-warm);
  overflow: hidden;
}
.strategy__quote::before {
  content: "";
  position: absolute;
  inset: auto -20% -45% auto;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 188, 87, 0.16), transparent 62%);
}
.strategy__quote p { position: relative; }
.strategy__points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.strategy__points li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: var(--fs-sm);
  color: rgba(248, 246, 240, 0.82);
}
.strategy__points li::before {
  content: "";
  margin-top: 0.55rem;
  width: 18px; height: 1px;
  background: var(--sc-gold);
  flex: none;
}
.strategy__figure {
  position: relative;
  border-radius: var(--sc-radius-l);
  overflow: hidden;
  box-shadow: var(--sc-shadow-l);
}
.strategy__figure img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.strategy__badge {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  right: clamp(1rem, 2vw, 1.75rem);
  padding: 1.1rem 1.35rem;
  border-radius: var(--sc-radius-m);
  background: rgba(16, 23, 40, 0.82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--sc-warm);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.strategy__badge b { display: block; color: var(--sc-gold); font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.35rem; }

/* 12  SOCIAL MEDIA & VIDEO
   ---------------------------------------------------------------------- */
.phones {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}
.phone {
  position: relative;
  flex: 0 0 auto;
  width: clamp(180px, 20vw, 268px);
  aspect-ratio: 9 / 19.5;
  padding: 6px;
  border-radius: 30px;
  background: linear-gradient(165deg, #313a58, #0b1020);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(248, 246, 240, 0.07);
  transition: transform 600ms var(--sc-ease);
}
.phone--lead { width: clamp(210px, 24vw, 320px); z-index: 2; }
.phone:hover { transform: translateY(-8px); }
.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 25px;
  overflow: hidden;
  background: var(--sc-navy-900);
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}
.phone__screen img, .phone__screen video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.phone__notch {
  position: absolute;
  z-index: 3;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 16px;
  border-radius: var(--sc-pill);
  background: #06090f;
}
.phone__play {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(16, 23, 40, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(248, 246, 240, 0.35);
  transition: background-color var(--sc-t), transform var(--sc-t);
}
.phone__play::after {
  content: "";
  position: absolute;
  left: 53%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--sc-warm);
}
.phone__screen:hover .phone__play { background: var(--sc-gold); transform: translate(-50%, -50%) scale(1.06); }
.phone__screen:hover .phone__play::after { border-left-color: var(--sc-navy-800); }
.phone__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2.5rem 1rem 1rem;
  background: linear-gradient(to top, rgba(8, 13, 26, 0.85), transparent);
  font-size: var(--fs-xs);
  color: rgba(248, 246, 240, 0.85);
  text-align: left;
}

@media (max-width: 899px) {
  .phones {
    justify-content: flex-start;
    margin-inline: calc(var(--sc-gutter) * -1);
    padding-inline: var(--sc-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }
  .phones::-webkit-scrollbar { display: none; }
  .phone { scroll-snap-align: center; width: min(62vw, 260px); }
  .phone--lead { width: min(62vw, 260px); }
}

.pipeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.5rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
.pipeline li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(248, 246, 240, 0.16);
  border-radius: var(--sc-pill);
  font-size: var(--fs-sm);
  color: rgba(248, 246, 240, 0.82);
}
.pipeline li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sc-gold);
}

/* 13  GOOGLE & KI
   ---------------------------------------------------------------------- */
.search-viz { display: grid; gap: 1rem; }
@media (min-width: 860px) { .search-viz { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; } }

.viz-card {
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-l);
  background: var(--sc-white);
  box-shadow: var(--sc-shadow-m);
  transition: transform 500ms var(--sc-ease), box-shadow 500ms var(--sc-ease);
}
.viz-card:hover { transform: translateY(-5px); box-shadow: var(--sc-shadow-l); }
.viz-card__label {
  display: block;
  margin-bottom: 1.1rem;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-gold-ink);
}
.viz-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--sc-line-strong);
  border-radius: var(--sc-pill);
  font-size: var(--fs-sm);
  color: var(--sc-ink);
  background: var(--sc-warm);
}
.viz-bar svg { width: 15px; height: 15px; flex: none; opacity: 0.5; }
.viz-result {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--sc-radius-m);
  background: var(--sc-warm);
  border: 1px solid var(--sc-line);
}
.viz-result--lead { border-color: rgba(255, 188, 87, 0.65); background: rgba(255, 188, 87, 0.1); }
.viz-result strong { display: block; font-size: var(--fs-sm); }
.viz-result span { font-size: var(--fs-xs); color: var(--sc-muted); }
.viz-line { height: 7px; border-radius: 4px; background: var(--sc-line); margin-top: 0.5rem; }
.viz-line.w-80 { width: 80%; }
.viz-line.w-55 { width: 55%; }

.viz-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--sc-radius-m);
  overflow: hidden;
  background:
    linear-gradient(var(--sc-line) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, var(--sc-line) 1px, transparent 1px) 0 0 / 34px 100%,
    var(--sc-warm);
}
.viz-map::before {
  content: "";
  position: absolute;
  left: 8%; top: 62%;
  width: 120%; height: 16px;
  background: rgba(16, 23, 40, 0.07);
  transform: rotate(-16deg);
}
.viz-pin {
  position: absolute;
  left: 50%; top: 46%;
  width: 22px; height: 22px;
  margin: -22px 0 0 -11px;
  border-radius: 50% 50% 50% 0;
  background: var(--sc-gold);
  transform: rotate(-45deg);
  box-shadow: 0 8px 18px -8px rgba(231, 159, 44, 0.9);
}
.viz-pin::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--sc-navy-800);
}
.viz-pulse {
  position: absolute;
  left: 50%; top: 46%;
  width: 96px; height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 188, 87, 0.55);
  animation: pulse 3.4s var(--sc-ease) infinite;
}
@keyframes pulse {
  0% { transform: scale(0.4); opacity: 0.9; }
  80%, 100% { transform: scale(1.15); opacity: 0; }
}

.viz-ai { display: grid; gap: 0.6rem; }
.viz-ai__row { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); color: var(--sc-ink); }
.viz-ai__dot {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--sc-navy-600), var(--sc-navy-900));
  position: relative;
}
.viz-ai__dot::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--sc-gold);
}
.viz-ai__txt { display: grid; gap: 0.45rem; margin-top: 0.35rem; }
.viz-ai__txt i { display: block; height: 8px; border-radius: 4px; background: var(--sc-line); }
.viz-ai__txt i:nth-child(1) { width: 100%; }
.viz-ai__txt i:nth-child(2) { width: 88%; }
.viz-ai__txt i:nth-child(3) { width: 62%; }
.viz-ai__cite {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--sc-pill);
  border: 1px solid rgba(255, 188, 87, 0.6);
  background: rgba(255, 188, 87, 0.12);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--sc-gold-ink);
}

.feature-grid { display: grid; gap: 0.75rem 2rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.feature-grid li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--fs-sm);
  color: var(--sc-body);
}
.feature-grid li::before {
  content: "";
  margin-top: 0.6rem;
  width: 14px; height: 1px;
  background: var(--sc-gold-deep);
  flex: none;
}
.sec--dark .feature-grid li, .sec--deep .feature-grid li { color: rgba(248, 246, 240, 0.78); }

/* 14  KI-AUTOMATISIERUNG
   ---------------------------------------------------------------------- */
.flow {
  display: grid;
  gap: 0.75rem;
  margin-block: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 960px) {
  .flow { grid-template-columns: repeat(5, 1fr); gap: 0; align-items: stretch; }
}
.flow__node {
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid rgba(248, 246, 240, 0.13);
  border-radius: var(--sc-radius-m);
  background: rgba(248, 246, 240, 0.035);
  text-align: center;
  transition: border-color 500ms ease, background-color 500ms ease, transform 500ms var(--sc-ease);
}
@media (min-width: 960px) {
  .flow__node { border-radius: 0; border-right-width: 0; }
  .flow__node:first-child { border-radius: var(--sc-radius-m) 0 0 var(--sc-radius-m); }
  .flow__node:last-child { border-radius: 0 var(--sc-radius-m) var(--sc-radius-m) 0; border-right-width: 1px; }
}
.flow__node.is-live {
  border-color: rgba(255, 188, 87, 0.55);
  background: rgba(255, 188, 87, 0.08);
  transform: translateY(-4px);
}
.flow__node b {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.16em;
  color: rgba(248, 246, 240, 0.34);
  margin-bottom: 0.6rem;
  transition: color 500ms ease;
}
.flow__node.is-live b { color: var(--sc-gold); }
.flow__node span { font-size: var(--fs-sm); color: var(--sc-warm); font-weight: 600; }
.flow__node em { display: block; font-style: normal; font-size: var(--fs-xs); color: rgba(248, 246, 240, 0.5); margin-top: 0.3rem; }

.flow__rail {
  position: relative;
  height: 1px;
  background: rgba(248, 246, 240, 0.14);
  margin-bottom: 2rem;
  overflow: hidden;
}
.flow__rail i {
  position: absolute;
  top: 0; left: 0;
  width: 22%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--sc-gold), transparent);
  animation: railRun 5.5s linear infinite;
}
@keyframes railRun {
  from { transform: translateX(-110%); }
  to { transform: translateX(560%); }
}

/* 15  HISTORIE / TIMELINE
   ---------------------------------------------------------------------- */
.story { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (min-width: 1000px) { .story { grid-template-columns: 0.92fr 1.08fr; } }

.story__figure {
  position: relative;
  border-radius: var(--sc-radius-l);
  overflow: hidden;
  box-shadow: var(--sc-shadow-l);
}
@media (min-width: 1000px) { .story__figure { position: sticky; top: calc(var(--sc-header) + 4rem); } }
.story__figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.story__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3rem 1.5rem 1.35rem;
  background: linear-gradient(to top, rgba(8, 13, 26, 0.9), transparent);
  color: var(--sc-warm);
  font-size: var(--fs-sm);
}
.story__caption b { display: block; font-weight: 650; }
.story__caption span { color: rgba(248, 246, 240, 0.6); font-size: var(--fs-xs); }

.timeline { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-left: 0; list-style: none; margin: 0; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0; top: 0.9rem; bottom: 1.5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--sc-gold), rgba(255, 188, 87, 0.15));
  border-radius: 2px;
}
.tl { position: relative; padding-left: clamp(1.5rem, 3vw, 2.75rem); }
.tl::before {
  content: "";
  position: absolute;
  left: -5px; top: 0.85rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sc-gold);
  box-shadow: 0 0 0 6px rgba(255, 188, 87, 0.14);
}
.tl__year {
  display: block;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--sc-ink);
  margin-bottom: 1rem;
}
.sec--dark .tl__year, .sec--deep .tl__year { color: var(--sc-warm); }
.tl p { max-width: 44rem; font-size: var(--fs-lead); line-height: 1.6; color: var(--sc-muted); }
.sec--dark .tl p, .sec--deep .tl p { color: rgba(248, 246, 240, 0.72); }
.tl p + p { font-size: var(--fs-body); }

/* 16  ZAHLEN
   ---------------------------------------------------------------------- */
.stats { display: grid; gap: 1px; background: var(--sc-line-dark); border-block: 1px solid var(--sc-line-dark); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 2rem); background: var(--sc-navy-800); }
.stat b {
  display: block;
  font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--sc-gold);
  margin-bottom: 0.75rem;
}
.stat span { display: block; font-size: var(--fs-sm); color: rgba(248, 246, 240, 0.7); max-width: 22ch; }

/* 17  WARUM WIR
   ---------------------------------------------------------------------- */
.reasons { display: grid; gap: 1px; background: var(--sc-line); border: 1px solid var(--sc-line); border-radius: var(--sc-radius-l); overflow: hidden; }
@media (min-width: 760px) { .reasons { grid-template-columns: 1fr 1fr; } }
.reason {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--sc-white);
  transition: background-color var(--sc-t);
}
.reason:hover { background: var(--sc-warm); }
.reason b {
  display: block;
  margin-bottom: 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.2em;
  color: var(--sc-gold-ink);
}
.reason h3 { font-size: var(--fs-h4); margin-bottom: 0.6rem; }
.reason p { margin: 0; font-size: var(--fs-sm); color: var(--sc-muted); }

/* 18  PROZESS
   ---------------------------------------------------------------------- */
.process { position: relative; }
.process__track { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) {
  .process__track { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
  .process::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 14px;
    height: 1px;
    background: var(--sc-line-strong);
  }
  .sec--dark .process::before, .sec--deep .process::before { background: var(--sc-line-dark); }
}
.step { position: relative; padding-left: 2.75rem; }
@media (min-width: 1000px) { .step { padding-left: 0; padding-top: 3rem; } }
.step::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sc-warm);
  border: 2px solid var(--sc-gold);
}
@media (min-width: 1000px) { .step::before { top: 9px; left: 0; } }
.step b {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.2em;
  color: var(--sc-gold-ink);
}
.sec--dark .step b, .sec--deep .step b { color: var(--sc-gold); }
.step h3 { font-size: var(--fs-h4); margin-bottom: 0.5rem; }
.step p { margin: 0; font-size: var(--fs-sm); color: var(--sc-muted); }
.sec--dark .step p, .sec--deep .step p { color: rgba(248, 246, 240, 0.68); }
@media (max-width: 999px) {
  .process__track { position: relative; }
  .process__track::before {
    content: "";
    position: absolute;
    left: 5px; top: 14px; bottom: 14px;
    width: 1px;
    background: var(--sc-line-strong);
  }
}

/* 19  FAQ
   ---------------------------------------------------------------------- */
.faq { display: grid; max-width: 62rem; margin-inline: auto; }
.faq details {
  border-top: 1px solid var(--sc-line);
  padding: 0.5rem 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--sc-line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.25rem, 2.5vw, 1.85rem) 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--sc-ink);
  transition: color var(--sc-t);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sc-gold-ink); }
.faq summary i {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
}
.faq summary i::before, .faq summary i::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--sc-gold-deep);
  transform: translate(-50%, -50%);
  transition: transform 320ms var(--sc-ease), opacity 200ms ease;
}
.faq summary i::before { width: 16px; height: 2px; }
.faq summary i::after { width: 2px; height: 16px; }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__body { padding: 0 0 clamp(1.25rem, 2.5vw, 1.85rem); max-width: 52rem; }
.faq__body p { margin: 0; color: var(--sc-muted); }

/* 20  ABSCHLUSS-CTA
   ---------------------------------------------------------------------- */
.final { position: relative; overflow: hidden; background: var(--sc-navy-800); color: var(--sc-warm); }
.final::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 55%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 188, 87, 0.14), transparent 62%);
  pointer-events: none;
}
.final__inner { position: relative; text-align: center; }
.final h2 { max-width: 20ch; margin-inline: auto; color: var(--sc-warm); }
.final .lead { margin-inline: auto; }
.final .btn-row { justify-content: center; }
.final__note { margin-top: 1.75rem; font-size: var(--fs-sm); }
.final__note a { color: rgba(248, 246, 240, 0.62); }
.final__note a:hover { color: var(--sc-gold); }

/* 21  FOOTER
   ---------------------------------------------------------------------- */
.site-footer {
  background: var(--sc-navy-900);
  color: rgba(248, 246, 240, 0.62);
  font-size: var(--fs-sm);
  padding-block: clamp(3.5rem, 6vw, 6rem) 2rem;
}
.site-footer a { color: inherit; text-decoration: none; transition: color var(--sc-t); }
.site-footer a:hover { color: var(--sc-gold); }
.site-footer h2 {
  margin: 0 0 1.25rem;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(248, 246, 240, 0.42);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer-grid { display: grid; gap: clamp(2.25rem, 4vw, 3rem); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 0.9fr; } }
.footer-brand img { height: 34px; width: auto; margin-bottom: 1.5rem; }
.footer-brand address { font-style: normal; line-height: 1.8; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(248, 246, 240, 0.10);
  font-size: var(--fs-xs);
  color: rgba(248, 246, 240, 0.45);
}
.footer-bottom ul { display: flex; gap: 1.25rem; }
.footer-bottom .lang-switch { margin-left: auto; }
.footer-bottom .lang-switch::before { display: none; }

/* WhatsApp-FAB */
.whatsapp-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 40;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 16px 34px -16px rgba(37, 211, 102, 0.9);
  transition: transform var(--sc-t);
}
.whatsapp-fab:hover { transform: translateY(-3px) scale(1.04); }
.whatsapp-fab svg { width: 28px; height: 28px; fill: currentColor; }

/* 22  MOTION, A11Y, UTILITIES
   ---------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 760ms var(--sc-ease), transform 880ms var(--sc-ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

.mask-line { display: block; overflow: hidden; }
.mask-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1000ms var(--sc-ease);
  transition-delay: var(--d, 0ms);
}
.is-in .mask-line > span, .mask-line.is-in > span { transform: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.mt-6 { margin-top: clamp(2rem, 4vw, 3rem); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .mask-line > span { transform: none; }
  .hero__video { display: none; }
  .platforms__marquee { animation: none; }
  .flow__rail i { display: none; }
  .viz-pulse { display: none; }
  .hero__scroll i { animation: none; }
}

/* Ohne JavaScript bleibt alles sichtbar */
.no-js [data-reveal] { opacity: 1; transform: none; }
.no-js .mask-line > span { transform: none; }

/* 23  NACHTRAEGE / FEINSCHLIFF
   ---------------------------------------------------------------------- */

/* Die zweite Plattform-Liste existiert nur fuer die Endlos-Schleife
   auf grossen Bildschirmen. Auf kleinen Geraeten waere sie eine
   sichtbare Dopplung. */
@media (max-width: 899px) {
  .platforms__track--loop { display: none; }
  .kicker { font-size: 0.6875rem; letter-spacing: 0.14em; gap: 0.55rem; }
  .kicker::before { width: 20px; }
}

/* Workflow-Knoten etwas praesenter */
.flow__node { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.flow__node span { font-size: var(--fs-body); }
.flow__node b { font-size: 0.6875rem; letter-spacing: 0.22em; }

/* Etwas mehr Luft unter dem Hero-Text, damit der Scroll-Hinweis auf
   niedrigen Laptop-Displays nicht an die Trust-Zeile stoesst. */
@media (min-width: 900px) {
  .hero__inner { padding-bottom: clamp(4.5rem, 11vh, 7rem); }
}

/* Das kleine Telefon am Case-Visual bekommt eine angedeutete Oberflaeche,
   damit es nicht als leere Flaeche wirkt. */
.shot-phone > div {
  position: relative;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 188, 87, 0.18), transparent 60%),
    linear-gradient(170deg, var(--sc-navy-600), var(--sc-navy-900));
}
.shot-phone > div::before,
.shot-phone > div::after {
  content: "";
  position: absolute;
  left: 14%;
  height: 5px;
  border-radius: 3px;
  background: rgba(248, 246, 240, 0.16);
}
.shot-phone > div::before { top: 34%; width: 60%; }
.shot-phone > div::after  { top: 43%; width: 40%; }

/* Kontrast-Feinschliff: alle Textfarben erreichen mindestens 4.5:1
   gegenueber ihrem Hintergrund (WCAG AA). */
.platforms__track li { color: rgba(16, 23, 40, 0.62); }
.shot__note { color: rgba(248, 246, 240, 0.52); }
.growth__steps li { color: rgba(248, 246, 240, 0.42); }
.growth__steps li b { color: rgba(248, 246, 240, 0.20); }
.flow__node em { color: rgba(248, 246, 240, 0.60); }
.flow__node b { color: rgba(248, 246, 240, 0.46); }
.lang-switch, .lang-switch a { color: rgba(248, 246, 240, 0.62); }
.hero__trust { color: rgba(248, 246, 240, 0.66); }
.hero__scroll { color: rgba(248, 246, 240, 0.55); }
.story__caption span { color: rgba(248, 246, 240, 0.72); }
.footer-bottom { color: rgba(248, 246, 240, 0.6); }
.site-footer h2 { color: rgba(248, 246, 240, 0.55); }

/* ==========================================================================
   24  NEW-WEBSITE – PROJEKTE MIT ECHTEN SCREENSHOTS
   Die Case-Visuals zeigen jetzt echte Aufnahmen der Kundenseiten
   (Desktop 16:10 + Smartphone 9:19.5).
   ========================================================================== */

.case__media { padding-bottom: 6%; }

.shot { background: var(--sc-navy-900); }
.shot__canvas { background: var(--sc-navy-900); }
.shot__canvas picture { display: block; width: 100%; height: 100%; }
.shot__canvas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.shot-phone {
  right: -2%;
  bottom: 0;
  width: 25%;
  min-width: 96px;
  overflow: hidden;
}
.shot-phone picture { display: block; width: 100%; height: 100%; }
.shot-phone img {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
  object-position: top center;
}
/* Die angedeutete Oberflaeche aus Etappe 1 wird nicht mehr gebraucht,
   sobald ein echter Screenshot im Telefon steckt. */
.shot-phone > picture::before,
.shot-phone > picture::after { content: none; }

@media (max-width: 640px) {
  .shot-phone { display: block; width: 30%; right: -1%; }
}

/* Externer Projekt-Link mit kleinem Hinweis-Icon */
.alink--extern::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h8v8M14 2L6.5 9.5M11 12.5V14H2V5h1.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h8v8M14 2L6.5 9.5M11 12.5V14H2V5h1.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  width: 13px; height: 13px;
}
.alink--extern:hover::after { transform: translate(2px, -2px); }

/* ==========================================================================
   25  NAVIGATION – vollstaendige Labels, Umschaltpunkt bei 1200 px
   ========================================================================== */
.site-nav__list a { font-size: 0.875rem; }
.site-nav { gap: clamp(0.9rem, 1.5vw, 1.6rem); }
.site-nav__list { gap: clamp(0.8rem, 1.3vw, 1.45rem); }

@media (min-width: 1100px) and (max-width: 1199px) {
  .nav-toggle { display: block; }
}
@media (max-width: 1199px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: var(--sc-header) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 1.5rem var(--sc-gutter) 2.5rem;
    background: var(--sc-navy-800);
    border-bottom: 1px solid rgba(248, 246, 240, 0.10);
    max-height: calc(100dvh - var(--sc-header));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, transform 300ms var(--sc-ease), visibility 240ms;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list a {
    display: block;
    padding: 0.95rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid rgba(248, 246, 240, 0.09);
  }
  .site-nav__list a::after { display: none; }
  .site-nav .btn { margin-top: 1.5rem; width: 100%; }
  .lang-switch { margin-top: 1.25rem; }
  .lang-switch::before { display: none; }
}
@media (min-width: 1200px) {
  .nav-toggle { display: none; }
}

/* ==========================================================================
   26  UNTERSEITEN-KOPF, TRUST-KACHELN, EINWILLIGUNGSBANNER
   (NEW-WEBSITE-FINAL – gemeinsam fuer Deutsch und Englisch)
   ========================================================================== */

/* Auf Unterseiten liegt der Kopfbereich nicht ueber einem Hero,
   sondern steht dauerhaft auf dunklem Grund. */
.site-header--page {
  background: rgba(16, 23, 40, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(248, 246, 240, 0.10);
}

/* Aktiver Navigationspunkt */
.site-nav__list a[aria-current="page"] { color: var(--sc-warm); }
.site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }

/* Trust-Kacheln ohne Zahl (z. B. „Persönliche Beratung") */
.stat--text b {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Einwilligungsbanner – erscheint nur, wenn Analytics aktiviert wurde */
.consent {
  position: fixed;
  z-index: 60;
  left: clamp(0.75rem, 3vw, 2rem);
  right: clamp(0.75rem, 3vw, 2rem);
  bottom: clamp(0.75rem, 3vw, 2rem);
  max-width: 46rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid rgba(248, 246, 240, 0.16);
  border-radius: var(--sc-radius-m);
  background: rgba(16, 23, 40, 0.97);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  color: rgba(248, 246, 240, 0.82);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.consent__text { flex: 1 1 22rem; margin: 0; }
.consent__text a { color: var(--sc-gold); }
.consent__actions { display: flex; gap: 0.6rem; flex: 0 0 auto; }
@media (max-width: 560px) {
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1 1 0; }
}

/* Fusszeilen-Link „Cookie-Einstellungen ändern" – von analytics.js
   eingeblendet, solange Analytics deaktiviert ist bleibt er verborgen. */
.footer-bottom [data-consent-reset] {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.footer-bottom [data-consent-reset]:hover { color: var(--sc-gold); }

/* ==========================================================================
   27  UNTERSEITEN-INHALTE
   Die Startseite arbeitet mit .wrap, die Unterseiten mit .container.
   Die sehr grossen Display-Groessen sind ausschliesslich fuer den Hero und
   die Abschnittsueberschriften der Startseite gedacht – im Fliesstext der
   Unterseiten waeren sie zu gross.
   ========================================================================== */
h1 { font-size: var(--fs-h2); }
.hero h1 { font-size: var(--fs-display); }

.container h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.container h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem); }
.container h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4375rem); }
.container h4 { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }

/* Der feste Kopfbereich darf Sprungziele auf Unterseiten nicht verdecken */
.container [id] { scroll-margin-top: calc(var(--sc-header) + 1.5rem); }

/* Mobile Hero-Groesse erneut setzen, da die Regel oben spaeter im
   Dokument steht als der urspruengliche Media-Query. */
@media (max-width: 899px) {
  .hero h1 { font-size: clamp(2.125rem, 6.2vw + 0.85rem, 3rem); }
}

/* Die Projekt-Karten sehen auf der Referenzseite genauso aus wie auf der
   Startseite – die kleineren Unterseiten-Groessen gelten hier nicht. */
.container .case__body h3 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }

/* ==========================================================================
   28  MOBILE-OPTIMIERUNG (Runde 2)
   Ziel: Auf dem Smartphone dieselbe Wertigkeit wie auf dem Desktop.
   Der Desktop bleibt unveraendert – alles hier greift erst unter 768 px,
   sofern nicht anders vermerkt.
   ========================================================================== */

:root {
  /* Seitenverhaeltnis der Hero-Flaeche auf dem Smartphone.
     Das eigene 9:16-Video liegt vor, deshalb 9/16.
     Ohne Video (config.js: hero.mobile = "") sind 4/5 die bessere Wahl,
     weil das Posterbild dann nicht so viel Hoehe braucht. */
  --hero-mobile-ratio: 9 / 16;

  /* Plus-Zeichen der Akkordeon-Schaltflaechen */
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- 28.1  Hero auf dem Smartphone -------------------------------------- */
@media (max-width: 767px) {
  .hero__inner {
    padding-top: calc(var(--sc-header) + 1.25rem);
    padding-bottom: 0;
  }
  .hero .kicker { margin-bottom: 1rem; }
  .hero h1 { line-height: 1.05; margin-bottom: 1rem; }
  .hero__sub {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(248, 246, 240, 0.72);
    max-width: 34rem;
  }

  /* Primaerer CTA voll, sekundaerer deutlich zurueckgenommen */
  .hero .btn-row { margin-top: 1.35rem; gap: 0.5rem; }
  .hero .btn-row .btn--gold { flex: 1 1 100%; }
  .hero .btn-row .btn--outline-light {
    flex: 1 1 100%;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-color: transparent;
    background: transparent;
    color: rgba(248, 246, 240, 0.72);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-color: rgba(248, 246, 240, 0.3);
  }
  .hero .btn-row .btn--outline-light:hover { color: var(--sc-gold); }

  /* Trust-Signale kompakt */
  .hero__trust {
    margin-top: 1.1rem;
    gap: 0.3rem 0.9rem;
    font-size: 0.6875rem;
  }
  .hero__trust li::before { width: 4px; height: 4px; }

  /* Bild-/Videoflaeche rueckt frueher ins Bild */
  .hero__media {
    margin-top: 1.35rem;
    aspect-ratio: var(--hero-mobile-ratio);
    max-height: none;
  }
}

/* ---- 28.2  Growth System als Akkordeon ---------------------------------- */
.stage__top { display: flex; align-items: center; gap: 1rem; }
.stage__btn {
  flex: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}

@media (min-width: 768px) {
  /* Desktop unveraendert: der Button ist dort nur ein Textelement */
  .stage__body { display: block !important; }
  .stage__btn { pointer-events: none; }
}

@media (max-width: 767px) {
  .growth__rail { display: none; }
  .growth__stages { gap: 0.75rem; }

  .stage {
    padding: 0;
    overflow: hidden;
    transition: border-color var(--sc-t), background-color var(--sc-t);
  }
  .stage__top {
    margin: 0;
    padding: 1.05rem 1.25rem;
    border-bottom: 0;
    gap: 0.85rem;
  }
  .stage__num {
    font-size: 1.5rem;
    color: rgba(248, 246, 240, 0.28);
    transition: color var(--sc-t);
  }
  .stage__btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(248, 246, 240, 0.62);
    transition: color var(--sc-t);
  }
  .stage__btn::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--icon-plus) no-repeat center / contain;
            mask: var(--icon-plus) no-repeat center / contain;
    transition: transform 320ms var(--sc-ease);
  }
  .stage__btn[aria-expanded="true"] { color: var(--sc-warm); }
  .stage__btn[aria-expanded="true"]::after { transform: rotate(45deg); }

  .stage.is-open {
    border-color: rgba(255, 188, 87, 0.55);
    background: linear-gradient(165deg, rgba(30, 39, 73, 0.98), rgba(11, 17, 32, 0.99));
  }
  .stage.is-open .stage__num { color: var(--sc-gold); }

  .stage__body {
    padding: 1.05rem 1.25rem 1.3rem;
    border-top: 1px solid rgba(248, 246, 240, 0.10);
  }
  .stage__body[hidden] { display: none; }
  .stage p { margin-bottom: 0.9rem; font-size: var(--fs-sm); }
  .stage__list li { font-size: 0.75rem; padding: 0.35rem 0.75rem; }
}

/* ---- 28.3  Projekte auf dem Smartphone ---------------------------------- */
@media (max-width: 767px) {
  .cases { gap: 3.5rem; }
  .case { gap: 1.5rem; }
  .case__media { padding-bottom: 14%; }
  .shot-phone {
    display: block;
    width: 36%;
    right: 2%;
    bottom: 0;
    border-radius: 18px;
    padding: 4px;
  }
  .shot-phone img { border-radius: 15px; }
  .case__body h3 { font-size: clamp(1.5rem, 1.2rem + 2vw, 2rem); }
  .tags { gap: 0.4rem; margin-bottom: 1.15rem; }
  .tags li { padding: 0.3rem 0.7rem; font-size: 0.75rem; }
}

/* ---- 28.4  Reels: ein Telefon gross, das naechste angeschnitten --------- */
@media (max-width: 767px) {
  .phones {
    gap: 0.85rem;
    scroll-padding-inline: var(--sc-gutter);
    margin-bottom: 1.75rem;
  }
  .phone,
  .phone--lead { width: 74vw; max-width: 320px; scroll-snap-align: start; }
  .phone--lead { order: -1; }
  .phone__play { width: 52px; height: 52px; }
  .phone__label { padding: 2.75rem 0.9rem 1.1rem; font-size: 0.75rem; }
  .pipeline { gap: 0.45rem 0.4rem; }
  .pipeline li { padding: 0.4rem 0.85rem; font-size: 0.8125rem; }
}

/* ---- 28.5  Beratungsbild: Karte kleiner, mehr Rand ---------------------- */
.strategy__figure img { aspect-ratio: 4 / 5; }
@media (max-width: 767px) {
  .strategy__figure { border-radius: var(--sc-radius-m); }
  .strategy__badge {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 0.9rem 1.05rem;
    border-radius: 12px;
    font-size: 0.8125rem;
    line-height: 1.4;
  }
  .strategy__badge b { margin-bottom: 0.25rem; font-size: 0.6875rem; }
}

/* ---- 28.6  WhatsApp-Schaltflaeche ruhiger ------------------------------- */
@media (max-width: 767px) {
  .whatsapp-fab {
    width: 47px;
    height: 47px;
    right: max(1.15rem, env(safe-area-inset-right));
    bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.9);
    transition: opacity 320ms ease, transform 320ms var(--sc-ease), visibility 320ms;
  }
  .whatsapp-fab svg { width: 24px; height: 24px; }
  /* erscheint erst nach dem Hero – verdeckt den ersten CTA nicht */
  body.is-scrolled .whatsapp-fab {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ---- 28.7  Gestaffelte Reveals ----------------------------------------- */
.reasons .reason,
.process__track .step,
.stats .stat {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--sc-ease), transform 620ms var(--sc-ease);
}
.reasons.is-in .reason,
.process.is-in .step,
[data-reveal].is-in .stat { opacity: 1; transform: none; }

.reasons.is-in .reason:nth-child(2) { transition-delay: 80ms; }
.reasons.is-in .reason:nth-child(3) { transition-delay: 160ms; }
.reasons.is-in .reason:nth-child(4) { transition-delay: 240ms; }
.process.is-in .step:nth-child(2)   { transition-delay: 70ms; }
.process.is-in .step:nth-child(3)   { transition-delay: 140ms; }
.process.is-in .step:nth-child(4)   { transition-delay: 210ms; }
.process.is-in .step:nth-child(5)   { transition-delay: 280ms; }

.no-js .reasons .reason,
.no-js .process__track .step,
.no-js .stats .stat { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reasons .reason,
  .process__track .step,
    .stats .stat { opacity: 1; transform: none; }
  .whatsapp-fab { opacity: 1; visibility: visible; transform: none; }
}

/* ==========================================================================
   29  GOOGLE · MAPS · KI-SUCHE
   Drei Karten als kleine, glaubwuerdige Oberflaechen-Ausschnitte statt
   flacher Symbolflaechen. Gleiche Designfamilie wie der Kopfbereich:
   Navy als Grundton, Warmweiss als Flaeche, Gold nur als Akzent.
   Desktop: nebeneinander. Smartphone: Reiter, immer nur eine Karte.
   Alle Darstellungen sind als Beispiel gekennzeichnet – es werden keine
   Platzierungen, Bewertungen oder Sterne behauptet.
   ========================================================================== */

/* Der Grund ist bewusst deutlich dunkler als die Karten. Nur so wirken
   weisse Flaechen erhoben statt flach – der Abschnitt bleibt aber hell
   und unterbricht die beiden dunklen Nachbarabschnitte. */
.sec--viz {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 70% at 8% -12%, rgba(255, 188, 87, 0.30), transparent 56%),
    radial-gradient(95% 65% at 106% 108%, rgba(30, 39, 73, 0.20), transparent 58%),
    linear-gradient(180deg, #ece7db 0%, #e2dccd 100%);
}
/* Feines Raster im Hintergrund – gibt Tiefe, ohne laut zu werden */
.sec--viz::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(16, 23, 40, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 23, 40, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(80% 64% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(80% 64% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}
/* Haarlinie oben und unten – sauberer Abschluss zu den dunklen Nachbarn */
.sec--viz::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(16, 23, 40, 0.07);
  pointer-events: none;
}

/* ---- Reiter (nur Smartphone) ------------------------------------------- */
.viz-tabs { display: none; }

@media (max-width: 767px) {
  .viz-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    margin-bottom: 1.35rem;
    padding: 0.3rem;
    border: 1px solid rgba(16, 23, 40, 0.08);
    border-radius: var(--sc-pill);
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 12px 26px -20px rgba(16, 23, 40, 0.5);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
  }
  .viz-tab {
    min-height: 42px;
    padding: 0.5rem 0.35rem;
    border: 0;
    border-radius: var(--sc-pill);
    background: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.15;
    color: var(--sc-body);
    cursor: pointer;
    transition: color 260ms var(--sc-ease), background 260ms var(--sc-ease),
                box-shadow 260ms var(--sc-ease);
  }
  .viz-tab.is-active {
    color: var(--sc-navy-800);
    background: linear-gradient(180deg, #ffd08c, var(--sc-gold));
    box-shadow: 0 8px 18px -10px rgba(231, 159, 44, 0.9);
  }
  .viz-tab:focus-visible {
    outline: 2px solid var(--sc-focus);
    outline-offset: 2px;
  }
  .viz-card[hidden] { display: none; }
  .viz-card { animation: vizIn 460ms var(--sc-ease) both; }
}

@keyframes vizIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Karten-Grundform --------------------------------------------------- */
.search-viz .viz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--sc-radius-l);
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f4 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 1px 2px rgba(16, 23, 40, 0.06),
    0 8px 16px -8px rgba(16, 23, 40, 0.18),
    0 40px 70px -34px rgba(16, 23, 40, 0.42);
  transition: transform 520ms var(--sc-ease), box-shadow 520ms var(--sc-ease);
}
/* Haarfeiner Goldschimmer an der Oberkante */
.search-viz .viz-card::before {
  content: "";
  position: absolute;
  left: clamp(1.4rem, 2.2vw, 1.9rem);
  right: clamp(1.4rem, 2.2vw, 1.9rem);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 188, 87, 0.85), transparent);
  border-radius: 1px;
}
.search-viz .viz-card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 2px 4px rgba(16, 23, 40, 0.07),
    0 14px 26px -10px rgba(16, 23, 40, 0.22),
    0 58px 92px -36px rgba(16, 23, 40, 0.48);
}

.viz-card__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.25rem;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sc-navy-600);
}
.viz-card__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 13px;
  color: var(--sc-gold-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 240, 214, 0.85)),
    var(--sc-warm-2);
  box-shadow:
    0 0 0 1px rgba(231, 159, 44, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 10px 20px -14px rgba(231, 159, 44, 0.9);
}
.viz-card__icon svg { width: 21px; height: 21px; }

.viz-card__note {
  margin: 1.35rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(16, 23, 40, 0.07);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sc-muted);
}

/* ---- Fensterrahmen (Karte 1) ------------------------------------------- */
.viz-frame {
  border: 1px solid rgba(16, 23, 40, 0.09);
  border-radius: var(--sc-radius-m);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 32px -26px rgba(16, 23, 40, 0.55);
}
.viz-frame__bar {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.6rem 0.85rem;
  background: linear-gradient(180deg, #f7f5f0, #efece4);
  border-bottom: 1px solid rgba(16, 23, 40, 0.07);
}
.viz-frame__bar i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(16, 23, 40, 0.16);
  flex: none;
}
.viz-frame__url {
  margin-left: 0.5rem;
  padding: 0.16rem 0.6rem;
  border-radius: var(--sc-pill);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(16, 23, 40, 0.07);
  font-size: 0.6875rem;
  color: var(--sc-muted);
  letter-spacing: 0.01em;
}
.viz-frame__body {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem 1.1rem;
}

/* ---- Karte 1: Google-Suche --------------------------------------------- */
.viz-search__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.62rem 0.7rem 0.62rem 0.85rem;
  border: 1px solid rgba(16, 23, 40, 0.12);
  border-radius: var(--sc-pill);
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(255, 188, 87, 0.16),
    0 8px 18px -14px rgba(16, 23, 40, 0.6);
  font-size: var(--fs-sm);
  color: var(--sc-ink);
}
.viz-search__bar svg { width: 16px; height: 16px; flex: none; color: var(--sc-muted); }
.viz-search__q { flex: 1; min-width: 0; }
.viz-search__key {
  flex: none;
  padding: 0.1rem 0.42rem;
  border: 1px solid rgba(16, 23, 40, 0.14);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--sc-warm);
  font-size: 0.6875rem;
  color: var(--sc-muted);
}

.viz-hit {
  position: relative;
  display: grid;
  gap: 0.16rem;
  padding: 0.7rem 0.85rem 0.75rem 2.75rem;
  border-radius: var(--sc-radius-s);
  background: linear-gradient(180deg, rgba(255, 188, 87, 0.10), rgba(255, 188, 87, 0.04));
  border: 1px solid rgba(231, 159, 44, 0.22);
}
.viz-hit__brand {
  position: absolute;
  left: 0.8rem; top: 0.78rem;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--sc-navy-800);
  color: var(--sc-gold);
}
.viz-hit__brand svg { width: 13px; height: 13px; }
.viz-hit__url { display: block; font-size: 0.6875rem; color: var(--sc-muted); }
.viz-hit__title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 640;
  color: var(--sc-navy-700);
  letter-spacing: -0.012em;
}
.viz-hit__desc { display: block; font-size: 0.8125rem; line-height: 1.45; color: var(--sc-body); }

.viz-hit--muted {
  padding: 0.7rem 0.85rem;
  border: 0;
  background: none;
}
.viz-hit--muted i {
  display: block;
  height: 8px;
  margin-bottom: 0.4rem;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(16, 23, 40, 0.10), rgba(16, 23, 40, 0.05));
}
.viz-hit--muted i:last-child { margin-bottom: 0; }
.w-40 { width: 40%; } .w-85 { width: 85%; } .w-60 { width: 60%; }
.w-35 { width: 35%; } .w-75 { width: 75%; }

/* ---- Karte 2: Google Maps ---------------------------------------------- */
.viz-map {
  position: relative;
  flex: 1;
  min-height: clamp(190px, 20vw, 232px);
  border-radius: var(--sc-radius-m);
  overflow: hidden;
  border: 1px solid rgba(16, 23, 40, 0.09);
  box-shadow: 0 16px 32px -26px rgba(16, 23, 40, 0.55);
}
.viz-map__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* leichte Vignette, damit die Infokarte darunter Halt bekommt */
.viz-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(16, 23, 40, 0.16) 100%);
  pointer-events: none;
}
.viz-pin {
  position: absolute;
  left: 47%; top: 44%;
  width: 30px; height: 30px;
  margin: -30px 0 0 -15px;
  display: grid;
  place-items: center;
  color: var(--sc-gold);
  filter: drop-shadow(0 8px 12px rgba(16, 23, 40, 0.45));
  z-index: 2;
}
.viz-pin svg { width: 30px; height: 30px; }
.viz-pulse {
  position: absolute;
  left: 47%; top: 44%;
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 188, 87, 0.75);
  background: radial-gradient(circle, rgba(255, 188, 87, 0.22), transparent 62%);
  animation: pulse 3.6s var(--sc-ease) infinite;
  z-index: 1;
}

.viz-place {
  position: relative;
  z-index: 2;
  margin: -2.4rem 0.7rem 0;
  padding: 0.95rem 1.05rem 1.05rem;
  border: 1px solid rgba(16, 23, 40, 0.08);
  border-radius: var(--sc-radius-m);
  background: linear-gradient(180deg, #ffffff, #fdfbf7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 22px 40px -26px rgba(16, 23, 40, 0.6);
}
.viz-place strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 640;
  color: var(--sc-ink);
  letter-spacing: -0.012em;
}
.viz-place > span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: var(--sc-muted);
}
.viz-place__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
}
.viz-place__actions li {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid rgba(16, 23, 40, 0.12);
  border-radius: var(--sc-pill);
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--sc-body);
}
.viz-place__actions svg {
  width: 13px; height: 13px;
  flex: none;
  color: var(--sc-gold-ink);
}

/* ---- Karte 3: KI-Suche (dunkel, dadurch eigener Charakter) -------------- */
.search-viz .viz-card--ai {
  border-color: rgba(248, 246, 240, 0.13);
  background:
    radial-gradient(120% 80% at 88% -8%, rgba(255, 188, 87, 0.20), transparent 58%),
    linear-gradient(168deg, var(--sc-navy-700) 0%, var(--sc-navy-900) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 2px 4px -2px rgba(8, 13, 26, 0.6),
    0 34px 70px -38px rgba(8, 13, 26, 0.95);
}
.search-viz .viz-card--ai::before {
  background: linear-gradient(90deg, transparent, rgba(255, 188, 87, 0.6), transparent);
}
.search-viz .viz-card--ai .viz-card__label { color: rgba(248, 246, 240, 0.9); }
.search-viz .viz-card--ai .viz-card__icon {
  color: var(--sc-gold);
  background: linear-gradient(180deg, rgba(255, 188, 87, 0.24), rgba(255, 188, 87, 0.10));
  box-shadow:
    0 0 0 1px rgba(255, 188, 87, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 12px 22px -14px rgba(255, 188, 87, 0.7);
}
.search-viz .viz-card--ai .viz-card__note {
  color: rgba(248, 246, 240, 0.48);
  border-top-color: rgba(248, 246, 240, 0.11);
}

/* Frage, Antwort und Quellenangabe bleiben als Gespraech zusammen am
   oberen Rand; der Freiraum liegt darunter – genau wie in der Suchkarte,
   deren Trefferliste ebenfalls oben steht. */
.viz-ai { display: grid; gap: 0.85rem; align-content: start; }
.viz-ai__frage {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--sc-radius-m) var(--sc-radius-m) var(--sc-radius-m) 7px;
  border: 1px solid rgba(248, 246, 240, 0.10);
  background: rgba(248, 246, 240, 0.07);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--sc-warm);
}
.viz-ai__antwort {
  position: relative;
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem 1rem 0.95rem 0.9rem;
  border-radius: var(--sc-radius-m);
  border: 1px solid rgba(255, 188, 87, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 188, 87, 0.09), rgba(255, 188, 87, 0.03));
}
.viz-ai__mark {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--sc-gold), var(--sc-gold-deep));
  color: var(--sc-navy-900);
  box-shadow: 0 8px 16px -10px rgba(255, 188, 87, 0.95);
}
.viz-ai__mark svg { width: 15px; height: 15px; }
.viz-ai__antwort p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(248, 246, 240, 0.92);
}
.viz-ai__caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--sc-gold);
  animation: vizCaret 1.15s steps(1) infinite;
}
@keyframes vizCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.viz-ai__quelle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: start;
  justify-self: start;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(248, 246, 240, 0.14);
  border-radius: var(--sc-pill);
  background: rgba(248, 246, 240, 0.05);
  font-size: 0.6875rem;
  color: rgba(248, 246, 240, 0.7);
}
.viz-ai__quelle svg { width: 12px; height: 12px; flex: none; color: var(--sc-gold); }

/* ---- Merkmalliste unter den Karten -------------------------------------- */
.viz-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem 1.6rem;
  list-style: none;
  margin: clamp(2rem, 3.6vw, 2.9rem) 0 0;
  padding: 0;
}

/* ---- Smartphone --------------------------------------------------------- */
@media (max-width: 767px) {
  .search-viz .viz-card {
    padding: 1.25rem 1.15rem 1.35rem;
    border-radius: var(--sc-radius-m);
  }
  .search-viz .viz-card::before {
    left: 1.25rem;
    right: 1.25rem;
  }
  .viz-card__label {
    margin-bottom: 1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.13em;
  }
  .viz-card__icon { width: 36px; height: 36px; border-radius: 12px; }
  .viz-card__icon svg { width: 19px; height: 19px; }

  .viz-frame__body { padding: 0.85rem 0.85rem 1rem; gap: 0.65rem; }
  .viz-search__bar { font-size: 0.875rem; padding-block: 0.58rem; }
  .viz-hit { padding-left: 2.6rem; }
  .viz-hit__title { font-size: 1rem; }

  .viz-map { min-height: 186px; }
  .viz-place { margin-inline: 0.45rem; padding: 0.85rem 0.9rem 0.95rem; }
  .viz-place__actions { gap: 0.32rem; }
  .viz-place__actions li { padding: 0.3rem 0.6rem; }

  .viz-ai__frage { padding: 0.8rem 0.9rem; font-size: 0.875rem; }
  .viz-ai__antwort { padding: 0.85rem 0.9rem; }
  .viz-ai__antwort p { font-size: 0.8438rem; }

  .viz-points { margin-top: 1.75rem; gap: 0.55rem; }
}

/* [hidden] muss die display-Regel der Karte sicher ueberschreiben,
   sonst belegen die inaktiven Reiter weiterhin Platz. */
.search-viz .viz-card[hidden],
.viz-card[hidden] { display: none !important; }
.stage__body[hidden] { display: none !important; }

/* Hinweiszeile immer am unteren Kartenrand, dadurch gleiche Optik */
.search-viz .viz-card__note { margin-top: auto; }
.search-viz .viz-card > .viz-frame,
.search-viz .viz-card > .viz-ai { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .viz-pulse, .viz-ai__caret { animation: none; }
  .viz-card { animation: none; }
}