/* =====================================================================
   TopReels · Style Guide (Tokens) und Komponenten
   Regel: Jede Farbe, jede Schriftgröße, jeder Abstand kommt aus den
   Tokens unten. Keine Einzelwerte im Code.
   ===================================================================== */

@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Farbe: warmes Fast-Schwarz, ein Akzent (TopReels-Gold) */
  --c-bg: oklch(15.5% 0.006 70);
  --c-surface: oklch(19.5% 0.007 70);
  --c-surface-2: oklch(23.5% 0.008 70);
  --c-rule: oklch(29% 0.008 70);
  --c-rule-strong: oklch(40% 0.009 70);
  --c-muted: oklch(70% 0.010 75);
  --c-soft: oklch(84% 0.008 80);
  --c-ink: oklch(95% 0.007 85);
  --c-accent: oklch(82% 0.135 75);
  --c-accent-hover: oklch(87% 0.115 80);
  --c-accent-ink: oklch(18% 0.02 70);
  --c-error: oklch(72% 0.15 28);
  --c-scrim: oklch(9% 0.004 70 / 0.96);
  --c-media-shade: oklch(9% 0.004 70 / 0.55);
  --c-nav: oklch(19.5% 0.007 70 / 0.88);
  --c-inner-line: oklch(100% 0 0 / 0.06);
  --c-sheen: var(--c-sheen);          /* helle Innenkante der CTAs */
  --c-glow: oklch(82% 0.135 75 / 0.55);          /* goldener Glow der CTAs */
  --c-glow-soft: var(--c-glow-soft);
  --c-glow-strong: var(--c-glow-strong);
  --c-glow-edge: var(--c-glow-edge);
  --c-on-color: var(--c-on-color);           /* Linien auf farbigen Mini-Ads */
  --c-on-color-soft: var(--c-on-color-soft);
  /* Säulen- und Datenfarben: nur in den Ablaufgrafiken (Prinzip Plastic: Farbe kommt aus den Inhalten) */
  --c-ads: oklch(72% 0.13 252);
  --c-funnel: oklch(73% 0.14 42);
  --c-social: oklch(77% 0.11 305);
  --c-data-1: var(--c-ads);
  --c-data-3: var(--c-funnel);
  --c-data-4: var(--c-social);
  /* Nur für die Nachbildung des Meta Ads Managers (helle Oberfläche wie im Original) */
  --c-meta-bg: oklch(100% 0 0);
  --c-meta-bar: oklch(96.5% 0.003 250);
  --c-meta-row: oklch(97.8% 0.002 250);
  --c-meta-rule: oklch(91% 0.004 250);
  --c-meta-ink: oklch(25% 0.01 250);
  --c-meta-muted: oklch(50% 0.012 250);
  --c-meta-blue: oklch(54% 0.2 258);
  --c-meta-good: oklch(52% 0.14 152);
  --c-meta-bad: oklch(55% 0.19 27);

  /* Schrift: eine Familie, zwei Schnitte */
  --font: "Golos Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;

  /* Typo-Skala: genau 6 Stufen (mobil → Desktop) */
  --fs-display: clamp(2.25rem, 1.2rem + 4.2vw, 5.25rem);   /* 36 → 84 */
  --fs-h2: clamp(1.75rem, 1.15rem + 2.6vw, 3.5rem);        /* 28 → 56 */
  --fs-h3: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);         /* 24 → 36: Unterüberschriften in Sektionen */
  --fs-h4: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);   /* 19 → 22: Kartentitel */
  --fs-lead: var(--fs-h4);                                 /* 19 → 22, gleiche Stufe wie h4 */
  --fs-body: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);     /* 16 → 17 */
  --fs-small: 0.875rem;                                     /* 14 */
  --fs-micro: 0.75rem;                                      /* 12 */

  --lh-display: 1.02;
  --lh-h2: 1.1;
  --lh-h3: 1.15;
  --lh-h4: 1.25;
  --lh-lead: 1.42;
  --lh-body: 1.6;
  --lh-small: 1.5;

  --tr-display: -0.035em;
  --tr-h2: -0.03em;
  --tr-h3: -0.022em;
  --tr-h4: -0.012em;
  --tr-ui: -0.005em;
  --tr-brand: -0.015em;
  --fs-input: 1rem; /* Felder immer 16 px, sonst zoomt iOS */

  /* Abstand: 4-pt-Raster, nach Rolle benannt */
  --s-3xs: 0.125rem;  /* 2 */
  --s-2xs: 0.25rem;   /* 4 */
  --s-xs: 0.5rem;     /* 8 */
  --s-sm: 0.75rem;    /* 12 */
  --s-md: 1rem;       /* 16 */
  --s-lg: 1.5rem;     /* 24 */
  --s-xl: 2.5rem;     /* 40 */
  --s-2xl: 4rem;      /* 64 */
  --s-3xl: 6rem;      /* 96 */
  --s-4xl: 9rem;      /* 144 */

  --gutter: var(--s-lg);
  --section-y: var(--s-2xl);
  --container: 80rem; /* 1280 */
  --measure: 62ch;

  /* Form */
  --r-media: 12px;
  --r-card: 16px;
  --r-pill: 999px;
  --r-fine: 4px;
  --dot: 0.4375rem; /* 7 px: alle Aufzählungspunkte und Marker */   /* nur Miniaturen in den Ablaufgrafiken */
  --dgm-h: 8rem;   /* Höhe der Bildfelder in der Funnel-Grafik */
  --control-h: 3rem;     /* 48: Buttons, Felder */
  --control-h-sm: 2.5rem; /* 40: kleine Buttons, Chips, Nav-Links, Play-Symbol */
  --logo-h: 1.5rem;
  --logo-h-tall: 2.25rem;
  --logo-opacity: 0.62;

  /* Bewegung */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --d-fast: 160ms;
  --d-base: 240ms;
  --d-slow: 360ms;
  --d-intro: 640ms;
  --stagger: 60ms;

  /* Ebenen */
  --z-nav: 200;
  --z-modal: 400;
}

@media (min-width: 768px) {
  :root { --gutter: var(--s-xl); --section-y: var(--s-2xl); --dgm-h: 10.5rem; }
}
@media (min-width: 1200px) {
  :root { --gutter: var(--s-2xl); --section-y: var(--s-3xl); --dgm-h: 13rem; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-3xl); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-soft);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: var(--fw-medium); color: var(--c-ink); }

::selection { background: var(--c-rule-strong); color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }

html { scrollbar-color: var(--c-rule-strong) var(--c-bg); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--s-md); top: var(--s-md); z-index: calc(var(--z-nav) + 1);
  padding: var(--s-xs) var(--s-md); border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-bg); font-size: var(--fs-small);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------- Typo-Rollen ---------- */
.t-display, .t-h2, .t-h3, .t-h4 { color: var(--c-ink); font-weight: var(--fw-regular); text-wrap: balance; }
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-soft); text-wrap: pretty; }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-micro { font-size: var(--fs-micro); line-height: var(--lh-small); color: var(--c-muted); }
.t-num { font-variant-numeric: tabular-nums; }
.kw { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 0.07em; text-underline-offset: 0.12em; text-decoration-skip-ink: none; }
.nowrap { white-space: nowrap; }
p { text-wrap: pretty; }

/* Sinn-Zeilen: ab 1024 px eine Zeile pro Sinneinheit */
@media (min-width: 1024px) { .ln { display: block; } }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--c-rule); }
.section--tight { padding-block: var(--s-2xl); }

.head { display: grid; gap: var(--s-lg); margin-bottom: var(--s-xl); max-width: 46rem; }
@media (min-width: 1024px) { .head { margin-bottom: var(--s-2xl); } }
.head--center { margin-inline: auto; text-align: center; justify-items: center; }
#leistungen .head--center { max-width: 60rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xs);
  min-height: var(--control-h); padding: 0 var(--s-lg);
  border: 0; border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: var(--fw-medium); letter-spacing: var(--tr-ui);
  line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--d-fast) ease, color var(--d-fast) ease, transform var(--d-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--primary:hover { background: var(--c-accent-hover); }
/* Haupt-CTAs auf der Seite: edler Glow, die Navigation bleibt schlicht */
main .btn--primary, .form .btn--primary {
  background: linear-gradient(180deg, var(--c-accent-hover), var(--c-accent));
  box-shadow: inset 0 1px 0 var(--c-sheen), 0 0 0 1px var(--c-glow), 0 8px 24px -8px var(--c-glow), 0 0 48px -6px var(--c-glow-soft);
  transition: box-shadow var(--d-base) var(--ease-out), transform var(--d-fast) var(--ease-out), filter var(--d-base) ease;
}
main .btn--primary:hover, .form .btn--primary:hover {
  filter: brightness(1.05);
  box-shadow: inset 0 1px 0 var(--c-sheen), 0 0 0 1px var(--c-glow-edge), 0 12px 32px -8px var(--c-glow-strong), 0 0 72px -4px var(--c-glow-soft);
  transform: translateY(-1px);
}
main .btn--primary:active, .form .btn--primary:active { transform: translateY(0) scale(0.98); }
main .sec-cta .btn--primary { min-height: 3.25rem; padding-inline: var(--s-xl); }
.btn--ghost { background: var(--c-surface-2); color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-rule-strong); }
.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--s-md); font-size: var(--fs-small); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: var(--s-sm); left: 50%; z-index: var(--z-nav);
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 2 * var(--s-sm));
  display: flex; align-items: center; gap: var(--s-xs);
  padding: var(--s-2xs); border-radius: var(--r-pill);
  background: var(--c-nav);
  border: 1px solid var(--c-rule);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: var(--s-xs);
  padding: 0 var(--s-sm) 0 var(--s-xs); min-height: var(--control-h-sm);
  color: var(--c-ink); text-decoration: none;
  font-size: var(--fs-body); font-weight: var(--fw-medium); letter-spacing: var(--tr-brand);
}
.nav__brand img { width: 1.5rem; height: 1.5rem; }
.nav__links { display: none; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 var(--s-sm);
  border-radius: var(--r-pill); color: var(--c-muted); text-decoration: none;
  font-size: var(--fs-small); transition: color var(--d-fast) ease, background-color var(--d-fast) ease;
}
.nav__links a:hover { color: var(--c-ink); background: var(--c-surface-2); }
@media (min-width: 900px) {
  .nav { top: var(--s-md); }
  .nav__links { display: flex; align-items: center; gap: var(--s-3xs); padding-inline: var(--s-xs); border-left: 1px solid var(--c-rule); }
}

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--s-3xl) + var(--s-md)); padding-bottom: var(--s-2xl); text-align: center; }
.hero__copy { display: grid; justify-items: center; gap: var(--s-lg); }
.hero .t-lead { max-width: 62rem; color: var(--c-soft); }
.hero__actions { display: grid; gap: var(--s-sm); width: 100%; margin-top: var(--s-xs); }
.hero__note { color: var(--c-muted); }
.hero__lead { display: grid; justify-items: center; gap: var(--s-sm); }
.hero__points { display: grid; gap: var(--s-xs); justify-items: start; }
.hero__points li { display: flex; align-items: baseline; text-align: left; gap: var(--s-xs); color: var(--c-ink); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.hero__points svg { flex: none; align-self: center; width: 1.25rem; height: 1.25rem; }
.hero__points svg circle { fill: var(--c-accent); }
.hero__points svg path { fill: none; stroke: var(--c-bg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .hero__points { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-xs) var(--s-xl); } }
@media (min-width: 640px) {
  .hero__actions { display: flex; justify-content: center; width: auto; }
}
@media (min-width: 1024px) {
  .hero { padding-top: calc(var(--s-4xl) + var(--s-xs)); }
}

/* Medien-Kachel (Bild oder Video) */
.media {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in;
}
.media[data-lb-type="video"] { cursor: pointer; }
.media__frame {
  position: relative; display: block; overflow: hidden; border-radius: var(--r-media);
  background: var(--c-surface); aspect-ratio: var(--ratio, 16 / 9);
}
.ratio-9x16 { --ratio: 9 / 16; }
.ratio-16x9 { --ratio: 16 / 9; }
.ratio-social { --ratio: 1400 / 1158; }
.media__frame img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--d-base) ease; }
.media__frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--c-inner-line); pointer-events: none;
}
.media:hover .media__frame img { filter: brightness(1.08); }
.media__play {
  position: absolute; left: var(--s-sm); bottom: var(--s-sm);
  display: grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--r-pill);
  background: var(--c-media-shade); color: var(--c-ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color var(--d-fast) ease, color var(--d-fast) ease, transform var(--d-fast) var(--ease-out);
}
.media__play svg { width: 0.875rem; height: 0.875rem; margin-left: 2px; }
.media:hover .media__play { background: var(--c-ink); color: var(--c-bg); }
.media:active .media__play { transform: scale(0.94); }
.media__cap { display: grid; gap: var(--s-3xs); margin-top: var(--s-sm); }
.media__client { color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.media__meta { color: var(--c-muted); font-size: var(--fs-micro); line-height: var(--lh-small); }
.media__meta b { color: var(--c-accent); font-weight: var(--fw-regular); }

/* ---------- Logos ---------- */
.logos { padding-block: var(--s-2xl); }
.logos__list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--s-lg) var(--s-xl);
}
.logos__list img { height: var(--logo-h); width: auto; opacity: var(--logo-opacity); }
.logos__list .logo--tall { height: var(--logo-h-tall); }
@media (min-width: 1024px) {
  .logos__list { gap: var(--s-xl) var(--s-2xl); }
  .logos { --logo-h: 1.75rem; --logo-h-tall: 2.5rem; }
}

/* ---------- Säulen ---------- */
.pillar { display: grid; gap: var(--s-xl); align-items: start; }
.pillar__text { display: grid; gap: var(--s-lg); align-content: start; }
.pillar__text .t-h2 { max-width: 16ch; }
.pillar__body { max-width: var(--measure); }
.badge {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--s-xs);
  min-height: 2rem; padding: 0 var(--s-sm); margin-top: calc(-1 * var(--s-xs));
  border: 1px solid color-mix(in srgb, var(--pc, var(--c-accent)) 55%, transparent); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--pc, var(--c-accent)) 12%, transparent);
  color: var(--pc, var(--c-accent)); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); white-space: nowrap;
}
.badge::before { content: ""; width: var(--dot); height: var(--dot); border-radius: var(--r-pill); background: currentColor; }
.facts { display: grid; border-top: 1px solid var(--c-rule); }
.facts li, .case__more li { position: relative; padding-left: var(--s-lg) !important; }
.facts li::before, .case__more li::before, .loop__notes li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--s-sm) + 0.5em); width: var(--dot); height: var(--dot); border-radius: var(--r-pill); background: var(--c-accent);
}
.facts li {
  padding-block: var(--s-sm); border-bottom: 1px solid var(--c-rule);
  color: var(--c-soft); font-size: var(--fs-small); line-height: var(--lh-small);
}
.proof { display: flex; gap: var(--s-sm); align-items: baseline; color: var(--c-soft); font-size: var(--fs-small); line-height: var(--lh-small); }
.proof b { color: var(--c-accent); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-lg) var(--s-md); }
.social-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-lg) var(--s-md); align-items: start; }
.social-media > :first-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .social-media { grid-template-columns: repeat(4, minmax(0, 1fr)); container-type: inline-size; }
  .social-media > :first-child { grid-column: span 2; }
  .social-media > :first-child .media__frame { aspect-ratio: auto; height: calc((100cqw - 3 * var(--s-md)) / 4 * 16 / 9); }
}

@media (min-width: 1024px) {
  .pillar { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-2xl); }
  .pillar--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pillar--flip .pillar__text { order: 2; }
  .pillar--flip .pillar__media { order: 1; }
  .pillar__text { position: sticky; top: calc(var(--s-3xl) + var(--s-md)); }
  .pillar__media { align-self: center; }
}

.pillar-head { display: grid; gap: var(--s-lg); margin-bottom: var(--s-xl); }
@media (min-width: 1024px) {
  .pillar-head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2xl); align-items: start; }
  .pillar-head__side { display: grid; gap: var(--s-lg); }
}
.pillar-head__main { display: grid; gap: var(--s-lg); align-content: start; }
.pillar-head__side { display: grid; gap: var(--s-lg); align-content: start; }
.events { margin-bottom: var(--s-xl); }

/* ---------- Säulen-Aufbau: Kopf, Beweis, Arbeiten ---------- */
.pillar-stack { --stack-gap: var(--s-xl); display: grid; gap: var(--stack-gap); }
@media (min-width: 768px) { .pillar-stack { --stack-gap: var(--s-2xl); } }
.pillar-stack > .sec-cta { margin-top: calc(var(--s-xl) - var(--stack-gap)); }
/* jeder Unterabschnitt einer Säule beginnt mit einer Haarlinie */
.pillar-stack > .formats, .pillar-stack > .acct, .pillar-stack > .work, .pillar-stack > .feature, .pillar-stack > .insights { padding-top: var(--s-xl); border-top: 1px solid var(--c-rule); }
.pillar-stack > .pillar + * { padding-top: 0; border-top: 0; }

.proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-md); border-top: 1px solid var(--c-rule); padding-top: var(--s-md); }
.proofs li { display: grid; gap: var(--s-3xs); align-content: start; color: var(--c-soft); font-size: var(--fs-small); line-height: var(--lh-small); }
.proofs b { color: var(--c-accent); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.work { display: grid; gap: var(--s-lg); }
.work__grid { display: grid; gap: var(--s-lg); }
.work__tall {
  display: flex; gap: var(--s-sm);
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: var(--s-xs);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.work__tall::-webkit-scrollbar { display: none; }
.work__tall li { flex: 0 0 44vw; max-width: 14rem; scroll-snap-align: start; }
.work__wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-md); }
.work__wide > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .work__tall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-md); margin-inline: 0; padding: 0; overflow: visible; }
  .work__tall li { max-width: none; }
}
@media (min-width: 1024px) {
  .work__tall { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
  .work__wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .work__tall--few { grid-template-columns: repeat(3, minmax(0, 15rem)); }
  .work__grid { gap: var(--s-xl); }
}

/* ---------- Säulenfarbe ---------- */
.is-ads { --pc: var(--c-ads); }
.is-funnel { --pc: var(--c-funnel); }
.is-social { --pc: var(--c-social); }

/* ---------- Übersicht: ein Ziel, drei Säulen ---------- */
.system { display: grid; justify-items: center; }
.system__goal {
  position: relative; display: flex; align-items: center; gap: var(--s-sm);
  padding: var(--s-sm) var(--s-lg) var(--s-sm) var(--s-sm);
  background: var(--c-surface); border: 1px solid var(--c-rule-strong); border-radius: var(--r-card);
}
.system__goal::after {
  content: ""; position: absolute; left: 50%; top: 100%; height: var(--s-xl);
  border-left: 1px solid var(--c-rule-strong);
}
.system__icon {
  display: grid; place-items: center; flex: none; width: var(--control-h-sm); height: var(--control-h-sm);
  border-radius: var(--r-media); background: var(--c-surface-2); color: var(--c-accent);
}
.system__icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.system__icon .fill { fill: currentColor; stroke: none; }
.system__name { display: block; color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.system__sub { display: block; color: var(--c-muted); font-size: var(--fs-micro); line-height: var(--lh-small); }
.system__cols { position: relative; display: grid; gap: var(--s-md); width: 100%; margin-top: var(--s-xl); }
.system__col {
  position: relative; display: grid; align-content: start;
  background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: var(--r-card);
  color: inherit; text-decoration: none;
  transition: border-color var(--d-fast) ease;
}
.system__col:hover { border-color: var(--pc); }
.system__head { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-sm); align-items: center; padding: var(--s-md) var(--s-lg); border-bottom: 1px solid var(--c-rule); }
.system__head .system__sub { grid-column: 2; }
.system__dot { grid-row: 1 / span 2; width: var(--s-sm); height: var(--s-sm); border-radius: var(--r-fine); background: var(--pc); box-shadow: 0 0 0 var(--s-2xs) color-mix(in srgb, var(--pc) 22%, transparent); }
.system__list li::marker { content: none; }
.system__list li { position: relative; padding-left: calc(var(--s-lg) + var(--s-md)) !important; }
.system__list li::before { content: ""; position: absolute; left: var(--s-lg); top: 50%; width: var(--dot); height: var(--dot); margin-top: -0.21875rem; border-radius: var(--r-pill); background: var(--c-accent); }
.system__head .system__name { font-size: var(--fs-body); letter-spacing: var(--tr-ui); }
.system__list li { padding: var(--s-sm) var(--s-lg); border-bottom: 1px solid var(--c-rule); color: var(--c-soft); font-size: var(--fs-small); line-height: var(--lh-small); }
.system__more { padding: var(--s-sm) var(--s-lg); color: var(--c-muted); font-size: var(--fs-small); line-height: var(--lh-small); transition: color var(--d-fast) ease; }
.system__col:hover .system__more { color: var(--pc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (min-width: 900px) {
  .system__goal::after { height: var(--s-lg); }
  .system__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-lg); margin-top: var(--s-2xl); }
  .system__cols::before {
    content: ""; position: absolute; top: calc(-1 * var(--s-2xl) + var(--s-lg)); left: calc((100% - 2 * var(--s-lg)) / 6); right: calc((100% - 2 * var(--s-lg)) / 6);
    border-top: 1px solid var(--c-rule-strong);
  }
  .system__col::before {
    content: ""; position: absolute; left: 50%; bottom: 100%; height: calc(var(--s-2xl) - var(--s-lg));
    border-left: 1px solid var(--pc);
  }
}

/* ---------- Ablaufgrafiken (gemeinsam) ---------- */
.dgm { min-width: 0; }

/* Ads: mehrere Kaufgründe, ein Gewinner */
.dgm--ads { display: grid; gap: var(--s-md); }
.dgm__cap { color: var(--c-muted); font-size: var(--fs-micro); line-height: var(--lh-small); }
.dgm__src { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); }
.dgm__card {
  position: relative; display: grid; grid-template-columns: auto 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-sm);
  margin-block: var(--s-2xs); padding: var(--s-sm) var(--s-md);
  background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: var(--r-media);
}
.dgm__lbl { color: var(--c-soft); font-size: var(--fs-small); line-height: var(--lh-small); white-space: nowrap; }
.dgm__bar { display: block; width: var(--w); height: 0.375rem; border-radius: var(--r-pill); background: var(--h, var(--c-rule-strong)); opacity: 0.85; }
.dgm__mini { display: grid; align-content: end; gap: 3px; width: 1.375rem; height: 2.375rem; padding: 3px; border-radius: var(--r-fine); background: var(--h); }
.dgm__mini i { height: 3px; border-radius: var(--r-pill); background: var(--c-on-color); }
.dgm__mini i + i { width: 60%; background: var(--c-on-color-soft); }
.dgm__tag {
  position: absolute; right: var(--s-md); top: 0; transform: translateY(-50%); background: var(--c-surface-2);
  padding: var(--s-3xs) var(--s-xs); border: 1px solid color-mix(in srgb, var(--c-accent) 60%, transparent); border-radius: var(--r-pill);
  color: var(--c-accent); font-size: var(--fs-micro); line-height: var(--lh-small);
}
.dgm__card.is-win { background: var(--c-surface-2); border-color: color-mix(in srgb, var(--c-accent) 60%, var(--c-rule)); }
.dgm__card.is-win .dgm__lbl { color: var(--c-ink); }
.dgm__card.is-win .dgm__bar { background: var(--c-accent); opacity: 1; }
.dgm__links { display: none; }
.dgm__out {
  display: grid; gap: var(--s-sm); padding: var(--s-md) var(--s-lg);
  background: var(--c-surface); border: 1px solid var(--c-rule-strong); border-radius: var(--r-card);
}
.dgm__out .dgm__lbl { color: var(--c-ink); font-weight: var(--fw-medium); }
.dgm__chart { width: 100%; height: var(--s-2xl); overflow: visible; display: block; }
.dgm__chartwrap { position: relative; display: block; }
.dgm__ping { position: absolute; right: -3px; top: calc(8 / 64 * 100% - 3px); width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--c-accent); }
.dgm__val { color: var(--c-soft); font-size: var(--fs-micro); line-height: var(--lh-small); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 3.25rem; text-align: right; }
.dgm__card.is-win .dgm__val { color: var(--c-accent); }
.dgm__budget { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-sm); }
.dgm__budget-lbl { color: var(--c-muted); font-size: var(--fs-micro); line-height: var(--lh-small); }
.dgm__alloc { display: flex; gap: 2px; height: 0.5rem; border-radius: var(--r-pill); overflow: hidden; }
.dgm__alloc i { flex: 0 0 12%; background: var(--c); opacity: 0.7; }
.dgm__alloc i.b { flex: 1 1 auto; background: var(--c-accent); opacity: 1; }
.dgm__alloc i:nth-child(3) { flex-basis: 6%; }
.dgm__links .flow { fill: none; stroke: var(--c-accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.08 0.92; opacity: 0; }
.dgm__steps li { position: relative; }
.fnl__link { position: relative; display: block; height: 1px; margin-top: calc(var(--dgm-h) / 2); background: color-mix(in srgb, var(--c-funnel) 55%, transparent); }
.fnl__link::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--c-funnel); border-right: 1px solid var(--c-funnel); transform: rotate(45deg); }
.fnl__dot { position: absolute; left: 0; top: -3.5px; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--c-accent); opacity: 0; }
.fnl__sale { position: relative; }
@media (max-width: 479px) { .fnl__plus { display: none; } }
.fnl__plus { position: absolute; left: 50%; top: var(--s-sm); transform: translateX(-50%); padding: 2px var(--s-xs); border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-accent) 18%, transparent); color: var(--c-accent); font-size: var(--fs-micro); line-height: var(--lh-small); white-space: nowrap; opacity: 0; }
.dgm__chart path { fill: none; }
.dgm__chart .grid { stroke: var(--c-rule); stroke-width: 1; }
.dgm__chart .lose { stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.dgm__chart .l1 { stroke: var(--c-data-1); } .dgm__chart .l3 { stroke: var(--c-data-3); } .dgm__chart .l4 { stroke: var(--c-data-4); }
.dgm__chart .line { stroke: var(--c-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dgm__note { color: var(--c-muted); font-size: var(--fs-micro); line-height: var(--lh-small); }
.dgm__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-md) var(--s-sm); counter-reset: dstep; margin-top: var(--s-md); }
.dgm__steps li {
  display: grid; gap: var(--s-2xs); padding-top: var(--s-sm); border-top: 1px solid color-mix(in srgb, var(--pc, var(--c-rule-strong)) 70%, transparent);
  color: var(--c-soft); font-size: var(--fs-small); line-height: var(--lh-small); counter-increment: dstep;
}
.dgm__steps li::before { content: counter(dstep); color: var(--pc, var(--c-muted)); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) {
  .dgm--ads { grid-template-columns: minmax(0, 1.15fr) var(--s-2xl) minmax(0, 1fr); column-gap: 0; row-gap: var(--s-sm); }
  .dgm__cap { grid-column: 1; }
  .dgm__src { grid-column: 1; grid-row: 2; }
  .dgm__links { display: block; grid-column: 2; grid-row: 2; width: 100%; height: 100%; overflow: visible; }
  .dgm__links path { fill: none; stroke: var(--c-rule-strong); stroke-width: 1; }
  .dgm__links .win { stroke: var(--c-accent); }
  .dgm__out { grid-column: 3; grid-row: 2; align-self: center; }
  .dgm__steps { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-xl); }
}

/* CRO: Ad, Funnel, Verkauf */
.fnl { display: grid; grid-template-columns: minmax(0, 1fr) var(--s-lg) minmax(0, 1fr) var(--s-lg) minmax(0, 1fr); align-items: start; column-gap: var(--s-xs); }
.fnl__node { display: grid; justify-items: center; text-align: center; min-width: 0; }
.fnl__phone {
  display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--s-xs);
  width: calc(var(--dgm-h) * 0.56); height: var(--dgm-h); padding: var(--s-xs);
  background: var(--c-surface); border: 1px solid var(--c-rule-strong); border-radius: var(--r-card);
}
.fnl__who { display: flex; align-items: center; gap: var(--s-2xs); }
.fnl__who .dot { width: var(--s-sm); height: var(--s-sm); border-radius: var(--r-pill); background: var(--c-social); }
.fnl__who .ln1 { width: 50%; height: var(--s-2xs); border-radius: var(--r-pill); background: var(--c-rule-strong); }
.fnl__img { border-radius: var(--r-fine); background: var(--c-funnel); }
.fnl__txt { display: grid; gap: var(--s-2xs); }
.fnl__txt i { height: var(--s-2xs); border-radius: var(--r-pill); background: var(--c-rule-strong); }
.fnl__txt i + i { width: 60%; }
.fnl__cta { height: var(--s-md); border-radius: var(--r-pill); background: var(--c-ads); }
.fnl__funnel { display: grid; align-content: center; justify-items: center; gap: var(--s-2xs); width: 100%; height: var(--dgm-h); }
.fnl__funnel span {
  width: var(--w); padding-block: var(--s-xs); overflow: hidden;
  background: color-mix(in srgb, var(--c-funnel) 18%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-funnel) 40%, var(--c-rule)); border-radius: var(--r-media);
  color: var(--c-ink); font-size: var(--fs-micro); line-height: var(--lh-small); white-space: nowrap; text-overflow: ellipsis;
}
.fnl__funnel span:nth-child(2) { background: color-mix(in srgb, var(--c-funnel) 32%, var(--c-surface)); }
.fnl__funnel span:last-child { background: color-mix(in srgb, var(--c-funnel) 50%, var(--c-surface)); border-color: var(--c-funnel); }
.fnl__sale {
  display: grid; align-content: center; gap: var(--s-xs);
  width: 100%; max-width: 9rem; height: var(--dgm-h); padding: var(--s-md);
  background: var(--c-surface); border: 1px solid var(--c-rule-strong); border-radius: var(--r-card);
}
.fnl__check { display: grid; place-items: center; width: var(--s-xl); height: var(--s-xl); margin: 0 auto var(--s-2xs); border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-accent-ink); }
.fnl__check svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fnl__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-xs); }
.fnl__row i { width: 55%; height: var(--s-2xs); border-radius: var(--r-pill); background: var(--c-rule-strong); }
.fnl__row .fnl__v { width: 22%; height: var(--s-2xs); border-radius: var(--r-pill); background: var(--c-rule-strong); }
.fnl__row--sum { padding-top: var(--s-xs); border-top: 1px solid var(--c-rule); }
.fnl__row--sum .fnl__v { background: var(--c-accent); }
.fnl__name { margin-top: var(--s-md); color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.fnl__sub { color: var(--c-muted); font-size: var(--fs-micro); line-height: var(--lh-small); }
@media (max-width: 479px) {
  .fnl { grid-template-columns: minmax(0, 0.85fr) var(--s-md) minmax(0, 1.3fr) var(--s-md) minmax(0, 0.95fr); column-gap: var(--s-3xs); }
  .fnl__funnel span { padding-inline: var(--s-3xs); }
  .fnl__funnel span:nth-child(2) { width: 92%; }
  .fnl__funnel span:nth-child(3) { width: 84%; }
}
@media (min-width: 640px) {
  .fnl { grid-template-columns: minmax(0, 1fr) var(--s-2xl) minmax(0, 1fr) var(--s-2xl) minmax(0, 1fr); column-gap: var(--s-sm); }
  .fnl__phone { padding: var(--s-sm); }
}

/* Social Media: Kreislauf */
.loop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sm); }
.loop__top { display: grid; justify-items: center; gap: var(--s-sm); }
.loop__notes { display: grid; gap: var(--s-xs); width: 100%; padding-top: var(--s-md); border-top: 1px solid color-mix(in srgb, var(--c-social) 22%, transparent); }
.loop__notes li { position: relative; padding-left: var(--s-md); color: var(--c-soft); font-size: var(--fs-small); line-height: var(--lh-small); }
.loop__notes li::before { top: 0.5em; }
.loop__notes li { text-align: left; }
.loop__step {
  position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-content: start; gap: var(--s-md);
  padding: var(--s-lg) var(--s-md);
  background: color-mix(in srgb, var(--c-social) 7%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-social) 25%, var(--c-rule)); border-radius: var(--r-card);
}
.loop__step svg { width: var(--control-h); height: var(--s-xl); fill: none; stroke: var(--c-social); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.loop__step svg .on { fill: var(--c-social); stroke: var(--c-social); }
.loop__step:last-child svg .on { fill: var(--c-accent); stroke: var(--c-accent); }
.loop__name { color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.loop__back { position: relative; margin-top: var(--s-md); }
.loop__back > svg:first-child, .loop__tip { display: none; }
.loop__back p { color: var(--c-muted); font-size: var(--fs-micro); line-height: var(--lh-small); text-align: center; }
@media (min-width: 640px) {
  .loop { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .loop__step:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; left: 100%; width: var(--s-sm);
    border-top: 1px solid var(--c-social);
  }
  .loop__back { margin-top: 0; }
  .loop__back > svg:first-child { display: block; width: 100%; height: var(--s-lg); overflow: visible; }
  .loop__back > svg:first-child path { fill: none; stroke: var(--c-social); stroke-width: 1; }
  .loop__tip { display: block; position: absolute; top: calc(-1 * var(--s-2xs)); left: calc(12.5% - var(--s-xs) + 1px); width: var(--s-md); height: var(--s-sm); overflow: visible; }
  .loop__tip path { fill: none; stroke: var(--c-social); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
  .loop__back p { margin-top: var(--s-xs); }
}

/* Fotografie: ein Shooting, viele Kanäle */
.dgm--reuse { display: grid; gap: var(--s-md); margin-top: var(--s-md); }
.ru__src { position: relative; display: grid; align-content: end; aspect-ratio: 4 / 3; padding: var(--s-md); overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--c-rule-strong); background: var(--c-surface); }
.ru__src img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.ru__src::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--c-bg), transparent 70%); }
.ru__lbl, .ru__sub { position: relative; z-index: 1; }
.ru__lbl { color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.ru__sub { color: var(--c-soft); font-size: var(--fs-micro); line-height: var(--lh-small); }
.ru__links { display: none; }
.ru__outs { display: grid; gap: var(--s-xs); }
.ru__outs li { display: flex; align-items: center; gap: var(--s-sm); padding: var(--s-xs) var(--s-sm); border: 1px solid var(--c-rule); border-radius: var(--r-media); background: var(--c-surface); }
.ru__outs b { display: block; color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.ru__outs small { display: block; color: var(--c-muted); font-size: var(--fs-micro); line-height: var(--lh-small); }
.ru__ic { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--r-fine); background: var(--c-surface-2); color: var(--c-accent); }
.ru__ic svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) {
  .dgm--reuse { grid-template-columns: minmax(0, 0.9fr) var(--s-2xl) minmax(0, 1.1fr); gap: 0; align-items: center; }
  .ru__src { aspect-ratio: 3 / 4; }
  .ru__links { display: block; width: 100%; height: 100%; overflow: visible; align-self: stretch; }
  .ru__links path { fill: none; stroke: var(--c-rule-strong); stroke-width: 1; }
  .ru__links .flow { stroke: var(--c-accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.12 0.88; opacity: 0; }
  .ru__outs { align-self: stretch; grid-template-rows: repeat(5, minmax(0, 1fr)); }
}

/* Ads: Static Ads und Video-Ads */
.formats { display: grid; gap: var(--s-lg); }
.formats__grid { display: grid; gap: var(--s-md); }
.formats__card { display: grid; gap: var(--s-sm); align-content: start; padding: var(--s-lg); background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: var(--r-card); }
.formats__card p { max-width: var(--measure); }
.formats__card .facts { margin-top: var(--s-xs); }
.formats__ic { display: grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--r-media); background: color-mix(in srgb, var(--pc, var(--c-accent)) 16%, transparent); color: var(--pc, var(--c-accent)); }
.formats__ic svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 768px) { .formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-lg); } .formats__card { padding: var(--s-xl); } }

/* ---------- Ad-Account (Beweis in der Ads-Säule) ---------- */
.acct { display: grid; gap: var(--s-xl); }
.acct__story { display: grid; gap: var(--s-lg); }
.acct__story .case__pl { display: contents; }
@media (min-width: 768px) {
  .acct__story { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-xl); padding-top: var(--s-xl); border-top: 1px solid var(--c-rule); }
}
.acct__text { display: grid; gap: var(--s-lg); align-content: start; }
.acct__text p { max-width: var(--measure); }
.acct__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sm); }
.acct__case { display: grid; gap: var(--s-md); }
.acct__duo { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); gap: var(--s-md); align-items: start; }
.acct__duo .acct__pair { grid-template-columns: 1fr; }
.acct__side { display: grid; gap: var(--s-md); align-content: start; }
@media (max-width: 767px) {
  .acct__side { display: contents; }
  .acct__duo .proofs--rows { grid-column: 1 / -1; }
  .proofs--rows li { grid-template-columns: 5.5rem minmax(0, 1fr); }
}
.proofs--rows { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
.proofs--rows li { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--s-md); padding-block: var(--s-sm); border-bottom: 1px solid var(--c-rule); }
.acct__tile { display: grid; gap: var(--s-3xs); padding: var(--s-md) var(--s-lg); background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: var(--r-card); }
.acct__tile--best { border-color: var(--c-rule-strong); }
.acct__k { color: var(--c-muted); font-size: var(--fs-micro); line-height: var(--lh-small); }
.acct__v { color: var(--c-ink); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct__tile--best .acct__v { color: var(--c-accent); }
.acct__table figcaption { margin-top: var(--s-sm); }
.acct__table figcaption b { color: var(--c-accent); font-weight: var(--fw-regular); }
.amx { overflow: hidden; background: var(--c-meta-bg); border: 1px solid var(--c-meta-rule); border-radius: var(--r-card); color: var(--c-meta-ink); font-variant-numeric: tabular-nums; }
.amx__src { padding: var(--s-sm) var(--s-lg); background: var(--c-meta-bar); border-bottom: 1px solid var(--c-meta-rule); color: var(--c-meta-muted); font-size: var(--fs-micro); line-height: var(--lh-small); }
.amx__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amx__row + .amx__row { border-top: 1px solid var(--c-meta-rule); }
.amx__row:nth-child(even):not(.amx__row--head) { background: var(--c-meta-row); }
.amx__row > span { position: relative; display: grid; justify-items: end; align-content: center; padding: var(--s-xs) var(--s-md); }
.amx__row > span:first-child { border-right: 1px solid var(--c-meta-rule); }
.amx__row b { color: var(--c-meta-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.amx__row small { color: var(--c-meta-muted); font-size: var(--fs-micro); line-height: var(--lh-small); }
.amx__row--head > span { justify-items: end; text-align: right; padding-block: var(--s-sm); color: var(--c-meta-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.amx__row--head > span:first-child { color: var(--c-meta-blue); }
.amx__row--best > span:last-child b { color: var(--c-meta-good); }
.amx__row--worst > span:last-child b { color: var(--c-meta-bad); }
.amx__mark { position: absolute; left: var(--s-md); top: 50%; transform: translateY(-50%); font-style: normal; font-size: var(--fs-micro); font-weight: var(--fw-regular); line-height: var(--lh-small); max-width: 45%; }
.amx__row--best .amx__mark { color: var(--c-meta-good); }
.amx__row--worst .amx__mark { color: var(--c-meta-bad); }
.amx__row--total { border-top-color: var(--c-meta-rule) !important; border-top-width: 2px !important; border-top-style: solid !important; }
@media (min-width: 768px) { .amx__row > span { padding-inline: var(--s-lg); } .amx__mark { left: var(--s-lg); } }
@media (min-width: 1024px) {
  .acct { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-xl) var(--s-2xl); align-items: start; }
  .acct__title, .acct__story { grid-column: 1 / -1; }
  .feature__title, .feature > .acct__story { grid-column: 1 / -1; }
}

/* ---------- Instagram-Insights (Beweis in der Social-Säule) ---------- */
.insights { display: grid; gap: var(--s-xl); }
.insights__text { display: grid; gap: var(--s-lg); align-content: start; }
.insights__stats { border-top: 1px solid var(--c-rule); }
.insights__stats div { display: grid; gap: var(--s-3xs); padding-block: var(--s-md); border-bottom: 1px solid var(--c-rule); }
.insights__stats dt { order: 2; color: var(--c-soft); font-size: var(--fs-small); line-height: var(--lh-small); }
.insights__stats dd { order: 1; color: var(--c-accent); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-variant-numeric: tabular-nums; }
.insights__pair { display: grid; grid-template-columns: minmax(0, 0.9315fr) minmax(0, 1fr); gap: var(--s-sm); align-items: start; }
.insights__shot { position: relative; display: block; overflow: hidden; border-radius: var(--r-media); background: var(--c-surface); }
.insights__shot img, .insights__shot video { display: block; width: 100%; height: auto; }
.insights__shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--c-inner-line); pointer-events: none; }
.insights__media figcaption { margin-top: var(--s-sm); }
@media (min-width: 1024px) {
  .insights { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-2xl); align-items: center; }
}

/* ---------- CTA am Ende jeder Sektion ---------- */
.sec-cta { display: flex; flex-direction: column; align-items: center; gap: var(--s-sm); margin-top: var(--s-xl); text-align: center; }
.sec-cta__note { color: var(--c-muted); max-width: 46ch; }
@media (max-width: 639px) { .sec-cta .btn { width: 100%; } }
.about > .sec-cta { grid-column: 1 / -1; margin-top: 0; }

/* ---------- Galerie ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-xs); grid-auto-flow: dense; container-type: inline-size; }
.gallery__item .media__frame { --ratio: 4 / 5; border-radius: 0; }
/* Galerie und Video-Kacheln: nur das Medium, Beschriftung bleibt für Screenreader und Lightbox */
.gallery .media__cap, .work .media__cap, .acct .media__cap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--wide .media__frame { --ratio: 16 / 10; }
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-sm); }
  /* breite Kachel exakt so hoch wie eine 4:5-Kachel daneben */
  .gallery__item--wide .media__frame { aspect-ratio: auto; height: calc((100cqw - 3 * var(--s-sm)) / 4 * 1.25); }
}

/* ---------- Case-Details (ottonova in der Funnel-Säule) ---------- */
.case__pl { display: grid; gap: var(--s-md); }
.case__pl dt { color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.case__pl dd { margin: var(--s-2xs) 0 0; max-width: var(--measure); }
.case__result { display: grid; gap: var(--s-2xs); padding-top: var(--s-md); border-top: 1px solid var(--c-rule); }
.case__num { color: var(--c-accent); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-variant-numeric: tabular-nums; }
.case__label { color: var(--c-ink); font-size: var(--fs-small); line-height: var(--lh-small); }
.case__more { border-top: 1px solid var(--c-rule); }
.case__more li { padding-block: var(--s-sm); border-bottom: 1px solid var(--c-rule); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-soft); }
.case__context { color: var(--c-muted); font-size: var(--fs-small); line-height: var(--lh-small); max-width: var(--measure); }
.feature { display: grid; gap: var(--s-lg); }
.case__head { display: grid; gap: var(--s-md); justify-items: start; }
.case__head .t-h3 { max-width: 30ch; }
.case__logo { height: var(--logo-h); width: auto; opacity: var(--logo-opacity); }
@media (min-width: 1024px) { .case__logo { height: 1.75rem; } }
.feature__text { display: grid; gap: var(--s-md); align-content: start; }
@media (min-width: 1024px) {
  .feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-xl) var(--s-2xl); align-items: start; }
}

/* ---------- Kundenstimmen ---------- */
.quote { display: grid; justify-items: center; gap: var(--s-lg); text-align: center; }
.quote blockquote { max-width: 24ch; color: var(--c-ink); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); text-wrap: balance; }
.quote figcaption { color: var(--c-muted); font-size: var(--fs-small); }
.quote figcaption strong { display: block; color: var(--c-ink); }
.voices { display: grid; gap: var(--s-xl); margin-top: var(--s-2xl); }
.voice { display: grid; gap: var(--s-sm); align-content: start; }
.voice__quote { color: var(--c-soft); font-size: var(--fs-body); line-height: var(--lh-body); }
.voice__who { color: var(--c-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.voice__who strong { color: var(--c-ink); }
@media (min-width: 900px) { .voices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-lg); } }

/* ---------- Über uns ---------- */
.about { display: grid; gap: var(--s-xl); align-items: center; }
.about__photo { border-radius: var(--r-card); overflow: hidden; background: var(--c-surface); aspect-ratio: 4 / 5; max-width: 30rem; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__text { display: grid; gap: var(--s-lg); }
.about__text .t-h2 { max-width: 18ch; }
.about__body { display: grid; gap: var(--s-md); max-width: var(--measure); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-xs); border-top: 1px solid var(--c-rule); }
.stats div { display: grid; gap: var(--s-3xs); padding: var(--s-md) var(--s-md) var(--s-md) 0; border-bottom: 1px solid var(--c-rule); }
.stats dt { color: var(--c-soft) !important; }
.stats dt { order: 2; color: var(--c-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.stats dd { order: 1; color: var(--c-accent); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-variant-numeric: tabular-nums; }
.about__caption { margin-top: var(--s-sm); }
@media (min-width: 1024px) {
  .about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-xl) var(--s-2xl); }
}

/* ---------- Ablauf ---------- */
.steps { display: grid; gap: var(--s-xl); counter-reset: step; }
.step { position: relative; display: grid; gap: var(--s-sm); align-content: start; padding-top: var(--s-lg); counter-increment: step; }
.step::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--c-accent), var(--c-rule-strong) 40%); }
.step::before { content: counter(step, decimal-leading-zero); color: var(--c-accent); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.step p { max-width: 38ch; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-lg); } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--c-rule); }
.faq__row { display: grid; gap: var(--s-xs); padding-block: var(--s-lg); border-bottom: 1px solid var(--c-rule); }
.faq__q { color: var(--c-ink); font-size: var(--fs-body); line-height: var(--lh-small); font-weight: var(--fw-medium); }
.faq__a { max-width: var(--measure); }
@media (min-width: 900px) { .faq__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-2xl); } }

/* ---------- Kontakt ---------- */
.contact { display: grid; gap: var(--s-xl); align-items: start; }
.contact__text { display: grid; gap: var(--s-lg); }
@media (min-width: 1024px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-2xl); } }

.form { display: grid; gap: var(--s-lg); padding: var(--s-lg); border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--c-rule); }
@media (min-width: 768px) { .form { padding: var(--s-xl); } }
.form__row { display: grid; gap: var(--s-lg); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: var(--s-xs); }
.field label, .field legend { color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); padding: 0; }
.field .opt { color: var(--c-muted); font-weight: var(--fw-regular); }
.input {
  width: 100%; min-height: var(--control-h); padding: var(--s-sm) var(--s-md);
  border: 1px solid var(--c-rule-strong); border-radius: var(--r-card);
  background: var(--c-bg); color: var(--c-ink);
  font: inherit; font-size: var(--fs-input); line-height: var(--lh-small);
  transition: border-color var(--d-fast) ease, background-color var(--d-fast) ease;
}
.input::placeholder { color: var(--c-muted); opacity: 1; }
.input:hover { border-color: var(--c-muted); }
.input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
.input[aria-invalid="true"] { border-color: var(--c-error); }
textarea.input { min-height: 8rem; resize: vertical; }
.field__error { color: var(--c-error); font-size: var(--fs-small); line-height: var(--lh-small); }
.field__error:empty { display: none; }

fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 var(--s-md);
  border: 1px solid var(--c-rule-strong); border-radius: var(--r-pill);
  color: var(--c-soft); font-size: var(--fs-small); white-space: nowrap;
  transition: background-color var(--d-fast) ease, color var(--d-fast) ease, border-color var(--d-fast) ease;
}
.chip input:hover + span { border-color: var(--c-muted); color: var(--c-ink); }
.chip input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-bg); }
.chip input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.form__foot { display: grid; gap: var(--s-md); }
.form__legal { color: var(--c-muted); font-size: var(--fs-micro); line-height: var(--lh-small); }
.form__legal a { color: var(--c-soft); }
.form__status { font-size: var(--fs-small); line-height: var(--lh-small); }
.form__status[data-state="error"] { color: var(--c-error); }
.form .btn { width: 100%; }
@media (min-width: 640px) { .form .btn { width: auto; justify-self: start; } }
.hp { position: absolute; left: -9999px; }

.form-done { display: grid; gap: var(--s-sm); padding: var(--s-xl); border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--c-rule); }
.form-done[hidden] { display: none; }
.form-done .t-h3 { color: var(--c-ink); }

/* ---------- Rechtsseiten (Impressum, Datenschutz, AGB) ---------- */
.legal-page { padding-top: calc(var(--s-3xl) + var(--s-lg)); }
.legal { max-width: 46rem; overflow-wrap: anywhere; }
.legal h1 { margin-bottom: var(--s-xl); color: var(--c-ink); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); text-wrap: balance; }
.legal h2 { margin: var(--s-xl) 0 var(--s-sm); color: var(--c-ink); font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); }
.legal h3 { margin: var(--s-lg) 0 var(--s-xs); color: var(--c-ink); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.legal h4 { margin: var(--s-md) 0 var(--s-2xs); color: var(--c-soft); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.legal p, .legal ul { margin: 0 0 var(--s-md); color: var(--c-soft); font-size: var(--fs-small); line-height: var(--lh-body); }
.legal ul { display: grid; gap: var(--s-2xs); }
.legal li { position: relative; padding-left: var(--s-lg); }
.legal li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: var(--dot); height: var(--dot); border-radius: var(--r-pill); background: var(--c-accent); }
.legal a { color: var(--c-ink); }
@media (min-width: 1024px) { .legal-page { padding-top: calc(var(--s-4xl) + var(--s-md)); } }

/* ---------- Footer ---------- */
.footer { padding-block: var(--s-2xl) var(--s-xl); border-top: 1px solid var(--c-rule); }
.footer__inner { display: grid; gap: var(--s-lg); }
.footer__brand { display: inline-flex; align-items: center; gap: var(--s-xs); color: var(--c-ink); font-weight: var(--fw-medium); text-decoration: none; }
.footer__brand img { width: 1.5rem; height: 1.5rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-lg); font-size: var(--fs-small); }
.footer__links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--c-muted); text-decoration: none; white-space: nowrap; }
.footer__links a:hover { color: var(--c-ink); }
.footer small { color: var(--c-muted); font-size: var(--fs-micro); }
@media (min-width: 900px) {
  .footer__inner { grid-template-columns: auto 1fr auto; align-items: center; }
  .footer__links { justify-content: center; }
}

/* ---------- Lightbox ---------- */
html.lb-open { overflow: hidden; }
.lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--c-ink);
  overflow: hidden;
}
.lb::backdrop { background: transparent; }
.lb__scrim { position: absolute; inset: 0; background: var(--c-scrim); }
.lb__stage { position: absolute; inset: 0; display: grid; place-items: center; touch-action: none; }
.lb__item { position: absolute; top: 0; left: 0; border-radius: var(--r-media); overflow: hidden; background: var(--c-surface); will-change: transform; }
.lb__item img { width: 100%; height: 100%; object-fit: cover; }
.lb__item iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lb__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-md);
  padding: var(--s-md) var(--gutter) calc(var(--s-md) + env(safe-area-inset-bottom));
  color: var(--c-soft); font-size: var(--fs-small); line-height: var(--lh-small);
}
.lb__caption { color: var(--c-ink); }
.lb__count { color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb__btn {
  position: absolute; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-ink); cursor: pointer;
  transition: background-color var(--d-fast) ease, transform var(--d-fast) var(--ease-out);
}
.lb__btn:hover { background: var(--c-rule-strong); }
.lb__btn:active { transform: scale(0.94); }
.lb__btn svg { width: 1.125rem; height: 1.125rem; }
.lb__close { top: var(--s-md); right: var(--s-md); }
.lb__prev, .lb__next { top: 50%; margin-top: -1.375rem; display: none; }
.lb__prev { left: var(--s-md); }
.lb__next { right: var(--s-md); }
.lb[data-multi="true"] .lb__prev, .lb[data-multi="true"] .lb__next { display: grid; }
@media (hover: none) and (pointer: coarse) {
  .lb__prev, .lb__next { display: none !important; }
}
.lb__hint { position: absolute; left: 50%; bottom: var(--s-3xl); transform: translateX(-50%); }

/* ---------- Einstieg (nur Desktop, nur mit JS, ohne reduzierte Bewegung) ---------- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.intro .hero [data-in] { opacity: 0; transform: translateY(12px); }
  html.intro.intro-run .hero [data-in] {
    opacity: 1; transform: none;
    transition: opacity var(--d-intro) var(--ease-out), transform var(--d-intro) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
}

/* ---------- Grafiken bauen sich beim Reinscrollen einmal auf (nur mit JS, nie bei reduzierter Bewegung) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-anim] .system__goal, html.js [data-anim] .system__col,
  html.js [data-anim] .dgm__card, html.js [data-anim] .dgm__out, html.js [data-anim] .dgm__steps li,
  html.js [data-anim] .fnl__node, html.js [data-anim] .fnl__funnel span, html.js [data-anim] .loop__step, html.js [data-anim] .loop__back p, html.js [data-anim] .step, html.js [data-anim] .ru__src, html.js [data-anim] .ru__outs li {
    opacity: 0; transform: translateY(12px);
    transition: opacity var(--d-intro) var(--ease-out), transform var(--d-intro) var(--ease-out);
    transition-delay: calc(var(--k, 0) * 90ms);
  }
  html.js [data-anim] .step { transition-delay: calc(var(--k, 0) * 180ms); }
  html.js [data-anim] .dgm__bar { transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--ease-out); transition-delay: calc(var(--k, 0) * 90ms + 300ms); }
  html.js [data-anim] path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease-out); transition-delay: calc(var(--k, 0) * 90ms + 500ms); }
  html.js [data-anim] .system__cols::before, html.js [data-anim] .system__col::before, html.js [data-anim] .system__goal::after { transform: scale(0); transition: transform 700ms var(--ease-out) 250ms; }
  html.js [data-anim] .system__cols::before { transform-origin: center; }
  html.js [data-anim] .system__col::before, html.js [data-anim] .system__goal::after { transform-origin: top; }
  html.js [data-anim] .dgm__links, html.js [data-anim] .ru__links, html.js [data-anim] .loop__back > svg:first-child { clip-path: inset(0 100% 0 0); transition: clip-path 1000ms var(--ease-out) 650ms; }
  html.js [data-anim] .fnl__check { transform: scale(0.6); opacity: 0; transition: transform 500ms var(--ease-out) 1100ms, opacity 300ms ease 1100ms; }
  html.js [data-anim] .loop__step:last-child svg .on { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform 700ms var(--ease-out) 900ms; }
  html.js [data-anim].is-in .system__goal, html.js [data-anim].is-in .system__col,
  html.js [data-anim].is-in .dgm__card, html.js [data-anim].is-in .dgm__out, html.js [data-anim].is-in .dgm__steps li,
  html.js [data-anim].is-in .fnl__node, html.js [data-anim].is-in .fnl__funnel span, html.js [data-anim].is-in .loop__step, html.js [data-anim].is-in .loop__back p, html.js [data-anim].is-in .step, html.js [data-anim].is-in .ru__src, html.js [data-anim].is-in .ru__outs li { opacity: 1; transform: none; }
  html.js [data-anim] .step::after { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out); transition-delay: calc(var(--k, 0) * 180ms + 200ms); }
  html.js [data-anim].is-in .step::after { transform: none; }
  html.js [data-anim].is-in .dgm__bar { transform: none; }
  html.js [data-anim].is-in path[pathLength] { stroke-dashoffset: 0; }
  html.js [data-anim].is-in .system__cols::before, html.js [data-anim].is-in .system__col::before, html.js [data-anim].is-in .system__goal::after { transform: none; }
  html.js [data-anim].is-in .fnl__check { transform: none; opacity: 1; }
  html.js [data-anim].is-in .dgm__links, html.js [data-anim].is-in .ru__links, html.js [data-anim].is-in .loop__back > svg:first-child { clip-path: inset(0 0 0 0); }
  html.js [data-anim].is-in .loop__step:last-child svg .on { transform: none; }
}


/* ---------- Laufende Animation der Grafiken (Prinzip Plastic): startet nach dem Aufbau, läuft ruhig in Schleife ---------- */
@keyframes tr-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tr-dim { to { opacity: 0.5; } }
@keyframes tr-winglow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent); } }
@keyframes tr-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes tr-tap { 0%, 4%, 14%, 100% { transform: none; filter: none; } 8% { transform: scale(0.92); filter: brightness(1.25); } }
@keyframes tr-dot { 0%, 18% { left: 0; opacity: 0; } 20% { opacity: 1; } 32% { left: calc(100% - 8px); opacity: 1; } 34%, 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes tr-dot2 { 0%, 64% { left: 0; opacity: 0; } 66% { opacity: 1; } 78% { left: calc(100% - 8px); opacity: 1; } 80%, 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes tr-hl1 { 0%, 33%, 48%, 100% { filter: none; box-shadow: none; } 38%, 43% { filter: brightness(1.45); box-shadow: 0 0 0 1px var(--c-funnel); } }
@keyframes tr-hl2 { 0%, 43%, 58%, 100% { filter: none; box-shadow: none; } 48%, 53% { filter: brightness(1.45); box-shadow: 0 0 0 1px var(--c-funnel); } }
@keyframes tr-hl3 { 0%, 53%, 68%, 100% { filter: none; box-shadow: none; } 58%, 63% { filter: brightness(1.45); box-shadow: 0 0 0 1px var(--c-funnel); } }
@keyframes tr-check { 0%, 79%, 100% { box-shadow: 0 0 0 0 transparent; } 82% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 70%, transparent); } 95% { box-shadow: 0 0 0 14px transparent; } }
@keyframes tr-plus { 0%, 80% { opacity: 0; transform: translate(-50%, 6px); } 84%, 94% { opacity: 1; transform: translate(-50%, -6px); } 100% { opacity: 0; transform: translate(-50%, -14px); } }
@keyframes ru-flow { 0% { stroke-dashoffset: 1; opacity: 0; } 5% { opacity: 1; } 40% { stroke-dashoffset: 0; opacity: 1; } 46%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ru-hl { 0%, 36%, 70%, 100% { border-color: var(--c-rule); background: var(--c-surface); } 42%, 60% { border-color: color-mix(in srgb, var(--c-accent) 70%, transparent); background: var(--c-surface-2); } }
@keyframes ru-src { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } }
@keyframes tr-sum { 0%, 80%, 100% { filter: none; } 86% { filter: brightness(1.5); } }
@media (prefers-reduced-motion: no-preference) {
  html.js [data-anim] .dgm__alloc i { transition: flex-basis 1200ms var(--ease-in-out) 1600ms; }
  html.js [data-anim]:not(.is-in) .dgm__alloc i, html.js [data-anim]:not(.is-in) .dgm__alloc i.b { flex: 0 0 calc(25% - 2px); }
  html.js [data-anim].is-in .dgm__links .flow { opacity: 1; transition: opacity 400ms ease 1700ms; animation: tr-flow 1.6s linear 1700ms infinite; }
  html.js [data-anim].is-in .dgm__card:not(.is-win) { animation: tr-dim 600ms var(--ease-out) 2000ms forwards; }
  html.js [data-anim].is-in .dgm__card.is-win { animation: tr-winglow 2.4s ease-in-out 2000ms infinite; }
  html.js [data-anim].is-in .dgm__ping { animation: tr-ping 1.8s var(--ease-out) 1800ms infinite; }
  html.js [data-anim] .dgm__steps li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--pc, var(--c-accent)); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out); transition-delay: calc(1400ms + var(--k, 0) * 350ms); }
  html.js [data-anim].is-in .dgm__steps li::after { transform: none; }
  html.js .dgm--reuse.is-in .ru__links .flow { animation: ru-flow 5s var(--ease-in-out) calc(1600ms + var(--n) * 1s) infinite; }
  html.js .dgm--reuse.is-in .ru__outs li { animation: ru-hl 5s ease calc(1600ms + var(--n) * 1s) infinite; }
  html.js .dgm--reuse.is-in .ru__src img { animation: ru-src 10s ease-in-out 1600ms infinite; }
  html.js .dgm--funnel.is-in { --cyc: 4.8s; }
  html.js .dgm--funnel.is-in .fnl__cta { animation: tr-tap var(--cyc) var(--ease-out) 1500ms infinite; }
  html.js .dgm--funnel.is-in .fnl__link--1 .fnl__dot { animation: tr-dot var(--cyc) var(--ease-in-out) 1500ms infinite; }
  html.js .dgm--funnel.is-in .fnl__link--2 .fnl__dot { animation: tr-dot2 var(--cyc) var(--ease-in-out) 1500ms infinite; }
  html.js .dgm--funnel.is-in .fnl__funnel span:nth-child(1) { animation: tr-hl1 var(--cyc) ease 1500ms infinite; }
  html.js .dgm--funnel.is-in .fnl__funnel span:nth-child(2) { animation: tr-hl2 var(--cyc) ease 1500ms infinite; }
  html.js .dgm--funnel.is-in .fnl__funnel span:nth-child(3) { animation: tr-hl3 var(--cyc) ease 1500ms infinite; }
  html.js .dgm--funnel.is-in .fnl__check { animation: tr-check var(--cyc) var(--ease-out) 1500ms infinite; }
  html.js .dgm--funnel.is-in .fnl__plus { animation: tr-plus var(--cyc) var(--ease-out) 1500ms infinite; }
  html.js .dgm--funnel.is-in .fnl__row--sum .fnl__v { animation: tr-sum var(--cyc) ease 1500ms infinite; }
}

@media print {
  .nav, .lb, .work__note { display: none !important; }
  html.intro .hero [data-in] { opacity: 1 !important; transform: none !important; }
  [data-anim] * { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}