@import url("/assets/fonts/fonts.local.css");

/* ============ Tokens ============ */
:root {
  --black: #000000;
  --ink: #1a1817;      /* near-black text */
  --ink-2: #2e2d2c;    /* Grau 90 */
  --grey-70: #58564f;
  --grey-50: #8a8783;
  --grey-label: #555555;
  --grey-bg: #ededed;  /* Problem section */
  --white: #ffffff;
  --hl: #fff400;       /* highlight yellow (knallig) */
  --hl-solid: #fff400; /* yellow pill / accents */
  --brand-gold: #998675;
  --mt-w: clamp(100px, 12vw, 124px);   /* Stufe 3/4: Medien-Kachelbreite, für exakte Ausrichtung der Framework/Storyboard-Kästen wiederverwendet */
  --mt-gap: clamp(12px, 1.6vw, 18px);

  --container: 1240px;
  --pad-x: clamp(20px, 5vw, 88px);

  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Poppins", system-ui, -apple-system, sans-serif;

  --radius-pill: 999px;
  --radius-card: 22px;
}

/* ============ Reset-ish ============ */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* iPadOS/iOS Safari kann unsichtbare, absolut positionierte Elemente
     (z.B. die Leistungen-Dropdown-Flyouts, die per visibility:hidden
     versteckt sind statt display:none) per Touch-Wischen erreichbar
     machen, obwohl overflow-x:hidden auf body steht - das reicht auf
     iOS nicht zuverlässig aus. Deshalb hier zusätzlich auf html selbst.
     WICHTIG: "clip" statt "hidden" - Safari deaktiviert
     position:sticky (Menüband) bei Nachfahren, sobald html/body ein
     "overflow: hidden" haben; "clip" verhindert denselben Wisch-Bug,
     ohne diesen Sticky-Bug auszulösen. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  width: 100%;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* Safari auf dem iPad gibt einem <button> ohne eigene Farbe die System-
   Akzentfarbe: Die Modulueberschriften der SV-Akademie standen dort blau,
   auf dem Mac schwarz. Ein Knopf erbt die Textfarbe seiner Umgebung, wie
   jeder andere Text auch - wer eine eigene Farbe braucht, setzt sie.
   -webkit-text-fill-color haelt auch die Fuellung fest, die iOS sonst
   getrennt bestimmt. */
button { font-family: inherit; cursor: pointer; color: inherit;
         -webkit-text-fill-color: currentColor; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

/* Markierung: ein enges Band hinter dem Text.
   Erst war es ein inline-block mit absolutem ::before - das konnte nur eine
   Zeile. Dann ein eingerueckter Verlauf - der konnte zwei Zeilen, aber keine
   runden Ecken, und das kleine g hing unten heraus.
   Jetzt ist das Band der Hintergrund des Elements selbst: er fuellt die
   Schriftbox samt Ober- und Unterlaengen, die Ecken lassen sich runden, und
   box-decoration-break: clone gibt jedem Zeilenstueck ein eigenes Band. */
.hl {
  display: inline;
  color: var(--ink);
  font-weight: 700;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  background-image: linear-gradient(var(--hl), var(--hl));
  border-radius: 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* section labels (kicker) */
.kicker {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink-2);
  margin: 0 0 0.9rem;
}
/* Schriftlogo "sofort sichtbar" als Ersatz für Fließtext in der Hero-Subheadline,
   auf die Cap-Höhe des Kicker-Texts (1.15rem) skaliert. */
.produkt-kicker-logo { height: 0.7894em; width: auto; vertical-align: baseline; }

/* generic serif headline */
.h-serif {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0;
}

/* body paragraphs */
/* Corporate Design Manual, 01 Typografie: Fliesstext in "Poppins - Light".
   Bewusst auf den Inhaltsbereich begrenzt - Navigation, Buttons und Footer
   haben kein eigenes Gewicht, erben vom body und wuerden sonst mit ausduennen. */
main p, main li { font-weight: 300; }
main .btn { font-weight: 500; }
/* Ohne explizites Gewicht loest "bolder" relativ zu 300 nur 400 auf; die
   Hervorhebungen im Text waeren damit praktisch unsichtbar. */
b, strong { font-weight: 600; }

.lead { color: var(--ink-2); font-size: 1.125rem; line-height: 1.7; }
.muted { color: var(--grey-50); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1;
  padding: 1.05rem 2.1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--black);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.btn--dark { background: var(--black); color: #fff; }
.btn--dark:hover { transform: translateY(-2px); background: #171717; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--black); color: #fff; }
.btn--sm { padding: 0.7rem 1.4rem; font-size: 0.95rem; }

.link-more {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--grey-50);
  background: none; border: 0; padding: 0;
  transition: color .18s ease;
}
.link-more:hover { color: var(--ink); }

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.scrolled { border-color: #ededed; box-shadow: 0 6px 24px rgba(0,0,0,.04); }
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 84px;
}
.brand { flex: 0 0 auto; }
.brand svg, .brand img { height: 34px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  /* Mittig im Menüband verankert (unabhängig von Logo- und Kontakt-Button-
     Breite) statt rechtsbündig vor dem Kontakt-Button - die Position des
     Leistungen-Dropdowns selbst (siehe .nav-dropdown) bleibt davon unberührt. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-links a {
  font-size: 0.95rem;
  color: var(--grey-label);
  font-weight: 400;
  transition: color .18s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: 2.4rem; padding-left: 2.6rem; padding-right: 2.6rem; }
.nav-toggle { display: none; }
.mobile-menu { display: none; }

/* Leistungen-Dropdown im Hauptmenü */
.nav-item--dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%; left: 50%;
  /* Verschiebt sich abhängig von der Fensterbreite: auf schmalen Desktop-/
     iPad-Breiten (901-1099px) weit genug nach links, damit rechts vom
     1.-Ebene-Panel immer genug Platz für die nach rechts aufklappende 2.
     (und 3.) Ebene bleibt (unverändert, so von Daniel bestätigt). Ab
     1100px wird der wachsende vw-Anteil bei -145px gedeckelt (min()) -
     sonst rutscht das Panel auf breiten MacBook-/Monitor-Fenstern viel zu
     weit nach rechts und wirkt nicht mehr zum Auslöser "Leistungen"
     zugehörig. Werte per Playwright über mehrere Breiten (901-1920px)
     austariert. */
  transform: translateX(calc(-50% + min(50vw - 695px, -145px)));
  padding-top: 14px; /* unsichtbare Hover-Brücke, damit der Dropdown beim
                         diagonalen Runterfahren nicht vorzeitig schließt */
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s ease;
  z-index: 70;
}
.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; }
.nav-dropdown-panel {
  min-width: 260px;
  width: max-content;
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid var(--grey-bg);
  box-shadow: 0 20px 50px rgba(0,0,0,.14);
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.nav-links .nav-dropdown-panel a {
  display: flex;
  align-items: center;
  min-height: calc(1.35em + 24px);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  white-space: nowrap;
}
.nav-links .nav-dropdown-panel a:hover { background: var(--grey-bg); color: var(--ink); }
/* Schriftlogo "sofort sichtbar" im Nav-Dropdown (Digitale Tools) + mobiles Menü,
   auf die Cap-Höhe des umgebenden Menütexts (0.95rem) skaliert; der Link ist ein
   Flex-Container (s.o.), daher reicht hier reines Höhe/Breite ohne vertical-align. */
.nav-sofort-logo { height: 0.8611em; width: auto; }

/* Trennstrich + "Medien"-Untermenü innerhalb des Leistungen-Dropdowns.
   Die 2. (und 3.) Ebene öffnet als eigenes Fenster nach rechts daneben
   (gewohnte Lese-/Pfeilrichtung). Damit das nicht über den rechten
   Bildschirmrand hinausragt, ist das 1. Ebene-Panel selbst so weit
   nach links verschoben (siehe .nav-dropdown transform), dass rechts
   davon immer genug Platz für die 2. Ebene bleibt. */
.nav-dropdown-divider { height: 1px; background: var(--grey-bg); margin: 8px 6px; }
.nav-item--subdropdown { position: relative; }
.nav-dropdown-sub-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 12px;
  font-size: 0.95rem; font-weight: 500; line-height: 1.35;
  color: var(--ink); cursor: default;
  white-space: nowrap;
}
.nav-dropdown-sub-trigger::after {
  content: ""; width: 6px; height: 6px; margin-left: 12px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); opacity: 0.5;
}
.nav-item--subdropdown:hover > .nav-dropdown-sub-trigger,
.nav-item--subdropdown:focus-within > .nav-dropdown-sub-trigger { background: var(--grey-bg); }
.nav-dropdown-sub-trigger--link { cursor: pointer; text-decoration: none; }
.nav-dropdown-sub-trigger--link:hover { color: var(--ink); }
.nav-dropdown-sub {
  position: absolute; left: 100%; top: -10px;
  padding-left: 10px; /* unsichtbare Hover-Brücke */
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease, visibility .16s ease;
  z-index: 71;
}
.nav-item--subdropdown:hover > .nav-dropdown-sub,
.nav-item--subdropdown:focus-within > .nav-dropdown-sub { opacity: 1; visibility: visible; }
.nav-dropdown-sub .nav-dropdown-panel { min-width: 200px; width: max-content; }

/* Auf schmalen Desktop-/iPad-Breiten (ab 901px bis knapp über iPad Mini
   querformat) ist auch nach dem Linksrücken des 1.-Ebene-Panels nicht genug
   Platz für die 2. Ebene in voller (einzeiliger) Breite. Deshalb hier
   schmaler - lange Einträge (z.B. "Komplexe Themen strukturieren &
   kommunizieren") brechen dafür zweizeilig um. */
@media (min-width: 901px) and (max-width: 1099px) {
  .nav-dropdown-sub .nav-dropdown-panel { width: 190px; min-width: 190px; }
  .nav-dropdown-sub .nav-dropdown-panel a,
  .nav-dropdown-sub .nav-dropdown-leaf { white-space: normal; }
}


/* Hauptpunkte ohne Unterpunkte (noch) — kein Flyout, nur eine Zeile direkt im
   Panel. Anklickbar (z.B. "Marketing as a Service") oder als stummes Label
   (z.B. "Archiv", hellgrau, nicht anklickbar). */
.nav-dropdown-leaf {
  display: block; padding: 12px 14px; border-radius: 12px;
  font-size: 0.95rem; font-weight: 500; line-height: 1.35;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
a.nav-dropdown-leaf:hover { background: var(--grey-bg); color: var(--ink); }
.nav-dropdown-leaf--muted { color: var(--grey-50); cursor: default; }

/* Gruppen-Trigger, die zwar ein Flyout mit Unterpunkten haben, aber selbst
   optisch zurückgenommen (hellgrau) dargestellt werden sollen, z.B. "Archiv". */
.nav-dropdown-sub-trigger--muted { color: var(--grey-50); }
.mobile-submenu-label--muted { color: var(--grey-50); }
/* Unterpunkte innerhalb einer zurückgenommenen Gruppe (z.B. "Archiv",
   "Impulsvorträge"): genauso hellgrau wie der übergeordnete Gruppen-Trigger. */
.nav-dropdown-panel-link--muted { color: var(--grey-50); }
.nav-dropdown-panel-link--muted:hover { color: var(--ink); }

/* ============ Hero ============ */
.hero { padding-top: clamp(72px, 9vw, 140px); padding-bottom: clamp(40px, 5vw, 72px); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(3rem, 7.2vw, 6.2rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.hero-head { width: max-content; max-width: 100%; }
.hero h1 .hl { font-weight: 700; margin-left: 0.02em; }
.hero-arrow { margin-top: -0.9rem; color: var(--ink); text-align: right; }
.hero-arrow svg { width: clamp(70px, 7vw, 96px); height: auto; display: inline-block; }
.hero-copy { padding-top: calc(0.6rem + 5px); }
.hero-copy p { margin: 0 0 1.4rem; }
.hero-copy p:last-child { margin-bottom: 0; }
.hero-cta { text-align: center; margin-top: clamp(40px, 5vw, 72px); }

/* ============ Marquee (native horizontal scroll + drag) ============ */
.marquee {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-block: 30px 90px;
}
/* Edge fades via gradient overlays (no mask-image -> no iOS compositing bugs) */
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(36px, 7%, 96px);
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: var(--pad-x);  background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.marquee::after  { right: var(--pad-x); background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.marquee-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.marquee-viewport::-webkit-scrollbar { width: 0; height: 0; display: none; }
.marquee-viewport.dragging { cursor: grabbing; }
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.marquee-track img {
  height: 42px;
  width: auto;
  flex: 0 0 auto;
  margin-right: 64px;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ============ Section frame ============ */
.section { position: relative; padding-block: clamp(72px, 9vw, 132px); overflow: hidden; }
.section--grey { background: var(--grey-bg); }
.section--dark { background: var(--black); color: #fff; }
.watermark {
  position: absolute;
  z-index: 0;
  color: #dedede;
  pointer-events: none;
  opacity: .9;
}
.section > .container { position: relative; z-index: 1; }
.wm-kreis { left: -26%; top: -10%; }
.portrait-round { display: none; }

/* Problem */
.problem-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.problem-head { text-align: right; }
.problem-head .kicker { margin-bottom: 1.1rem; }
.problem-head h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 600; line-height: 1.18; }
.problem-card {
  background: var(--black);
  color: #fff;
  border-radius: var(--radius-card);
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 30px);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.problem-card p { margin: 0 0 0.85rem; }
.problem-card ul { margin: 0.85rem 0; padding-left: 0; list-style: none; }
.problem-card li { position: relative; padding-left: 1.2rem; margin-bottom: 0.5rem; }
.problem-card li::before { content: "•"; position: absolute; left: 0; color: #fff; }
.problem-card p:last-child { margin-bottom: 0; }

/* Lösung */
.loesung { text-align: center; }
.loesung .container { max-width: 900px; }
.loesung h2 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 600;
  line-height: 1.14;
}
.loesung .wirkung {
  position: relative;
  display: block;
  margin-top: 2.2em;
}
.loesung .wirkung .txt { position: relative; z-index: 1; display: inline-block; transform: translateY(-22px); }
.loesung .wirkung .txt strong { font-weight: 700; }
.loesung .yellow-pill {
  position: absolute;
  left: 50%;
  top: -1.85em;
  transform: translateX(-50%);
  width: 0.85em;
  height: 3.05em;
  background: var(--hl-solid);
  border-radius: var(--radius-pill);
  z-index: 0;
}
/* Standalone Pill-Trenner (gleiche Optik wie die Pill in der Lösungssection der Startseite,
   hier ohne umgebende Headline als eigenständiger Trenner zwischen zwei Timelines) */
.pill-divider {
  text-align: center;
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding-top: 2.2em;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  font-family: var(--font-serif);
  color: var(--ink);
}
.pill-divider .wirkung { position: relative; display: inline-block; }
.pill-divider .wirkung .txt { position: relative; z-index: 1; display: inline-block; transform: translateY(-22px); }
.pill-divider .wirkung .txt strong { font-weight: 700; }
.pill-divider .yellow-pill {
  position: absolute;
  left: 50%;
  top: -1.85em;
  transform: translateX(-50%);
  width: 0.85em;
  height: 3.05em;
  background: var(--hl-solid);
  border-radius: var(--radius-pill);
  z-index: 0;
}

.loesung-copy { margin: 3.6rem auto 0; max-width: 640px; }
.loesung-actions { margin-top: 1.6rem; display: flex; flex-direction: column; align-items: center; gap: 2.8rem; }
.loesung-actions .link-more { font-size: 1.25rem; }

/* Leistungen */
.leistungen { overflow: visible; }
.leistungen .container { max-width: 1340px; }
.leistungen-grid {
  display: grid;
  grid-template-columns: 0.56fr 1.24fr;
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
}
.leistungen-head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; margin-bottom: 1.6rem; line-height: 1.1; }
.leistungen-head .lead { max-width: 320px; }
.cards-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 3.4vw, 48px) clamp(26px, 2.6vw, 36px);
}
.lcard {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 16px;
  row-gap: 0.7rem;
  align-items: center;
}
.lcard-icon { position: relative; width: 52px; height: 52px; grid-column: 1; grid-row: 1; align-self: center; transform: translateY(-50px); }
.lcard-icon .ico-shadow { position: absolute; inset: 0; transform: translate(4px, 5px); color: var(--hl-solid); }
.lcard-icon .ico-main { position: absolute; inset: 0; color: var(--ink); }
.lcard h3 {
  grid-column: 2; grid-row: 1;
  align-self: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.22;
  margin: 0;
  color: var(--ink);
}
.lcard-body { grid-column: 2; grid-row: 2; min-width: 0; align-self: start; }
.lcard p { font-size: 0.94rem; line-height: 1.58; color: var(--ink-2); margin: 0 0 0.8rem; }
.leistungen-cta { text-align: center; margin-top: clamp(48px, 6vw, 84px); }

/* Leistungen head zentriert oberhalb + 3 Karten nebeneinander (Startseite) */
.leistungen-head--center { max-width: 680px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.leistungen-head--center .kicker { text-align: center; }
.leistungen-head--center .lead { max-width: 56ch; margin-left: auto; margin-right: auto; }
.cards-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 3.4vw, 48px) clamp(26px, 2.6vw, 36px);
}

/* Formate (Startseite) */
.formate-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.formate-head { text-align: left; }
.formate-head .kicker { text-align: left; margin-bottom: 1.1rem; }
.formate-head h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 600; line-height: 1.18; margin: 0 0 1.2rem; }
.formate-head .lead { max-width: 46ch; }
.formate-head .lead + .lead { margin-top: 0.85rem; }

.formate-accordion { display: flex; flex-direction: column; gap: 12px; margin-top: 2.9rem; }
.formate-acc-item {
  background: var(--grey-bg, #f4f2ef);
  border: 1px solid #e7e2df;
  border-left: 4px solid transparent;
  border-radius: 16px;
  padding: 4px 22px;
  transition: background .3s ease, border-color .3s ease;
}
.formate-acc-item:hover { background: #efece7; }
.formate-acc-item summary {
  cursor: pointer; padding: 18px 0; font-family: var(--font-sans); font-weight: 600;
  color: var(--ink); font-size: 1.05rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.formate-acc-item summary::-webkit-details-marker { display: none; }
.formate-acc-item summary::after {
  content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--grey-70);
  transition: transform .2s ease; flex: 0 0 auto;
}
.formate-acc-item[open] summary::after { transform: rotate(45deg); }
.formate-acc-body p { margin: 0 0 14px; font-size: .92rem; line-height: 1.65; color: var(--ink-2); }
.formate-acc-body { padding-bottom: 22px; }
.formate-acc-body .btn { display: block; width: max-content; margin: 6px auto 0; background: var(--black); border-color: var(--black); color: #fff; }
.formate-acc-body .btn:hover { background: #171717; }

/* Vorschau-Kacheln innerhalb der Akkordeon-Details: kleine, farbige Miniaturen
   der echten Produktseiten-Kacheln (Skizze/Icon + Titel + Kurztext), ohne CTA. */
.formate-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 10px;
  margin: 2px 0 18px;
}
.formate-preview-card {
  border-radius: 12px;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
}
.formate-preview-thumb {
  height: 66px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; overflow: hidden;
}
.formate-preview-thumb .produkt-mock-sketch { width: 100%; height: 100%; max-width: none; display: flex; align-items: center; justify-content: center; }
.formate-preview-thumb .produkt-mock-sketch svg { width: 100%; height: 100%; display: block; filter: none; }
.formate-preview-thumb .mock-phone-body { fill: rgba(255,255,255,.14); }
.formate-preview-thumb--icon svg { width: 30px; height: 30px; color: rgba(255,255,255,.9); }
.formate-preview-title { font-family: var(--font-sans); font-weight: 700; font-size: .8rem; line-height: 1.28; color: #fff; margin-bottom: 4px; }
.formate-preview-card p.formate-preview-desc {
  margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: .8rem; line-height: 1.42; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.formate-acc--magenta .formate-preview-card { background: linear-gradient(155deg, #fff400 0%, #fff400 100%); }
.formate-acc--violet .formate-preview-card { background: linear-gradient(155deg, #fff400 0%, #fff400 100%); }
.formate-acc--cyan .formate-preview-card { background: linear-gradient(155deg, #fff400 0%, #fff400 100%); }
.formate-acc--lime .formate-preview-card { background: linear-gradient(155deg, #A3E635 0%, #6b9422 100%); }
/* Training & Sparring: zeigt die echten Grafiken der Unterseite (Trainingsplan-Skizze,
   Foto) statt eines Icons — etwas höherer Kasten, aber deutlich kompakter als der erste
   Entwurf, und die beiden Kästen selbst 20% schmaler (Luft auf beiden Seiten). */
.formate-acc--lime .formate-preview-grid { max-width: 80%; margin-left: auto; margin-right: auto; }
.formate-acc--lime .formate-preview-thumb { height: 108px; }
.formate-acc--lime .formate-preview-thumb .produkt-mock-sketch svg { width: 86%; height: 86%; }
/* 1:1 Sparring: komplettes (nicht angeschnittenes) Foto liegt als dezenter Schwarz-Weiß-
   Hintergrund am unteren Kastenrand, etwas nach rechts gerückt mit Abstand zum rechten
   Rand, Titel/Text liegen davor. */
.formate-preview-card--photo { position: relative; min-height: 168px; justify-content: flex-end; }
.formate-preview-card-photo {
  position: absolute; right: calc(8% - 40px); bottom: 0; left: auto;
  width: 88%; height: auto; display: block; z-index: 0; pointer-events: none;
  filter: grayscale(1); opacity: .4;
}
.formate-preview-card--photo .formate-preview-title,
.formate-preview-card--photo .formate-preview-desc { position: relative; z-index: 1; }
.formate-acc--emerald .formate-preview-card { background: linear-gradient(155deg, #fff400 0%, #fff400 100%); }
.formate-preview-grid--2x2 { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
.formate-preview-grid--center { margin-left: auto; margin-right: auto; }
@media (max-width: 480px) {
  .formate-preview-grid { grid-template-columns: repeat(2, 1fr); }
}
.formate-acc-item--magenta, .formate-acc--magenta { border-left-color: #fff400; }
.formate-acc-item--violet, .formate-acc--violet { border-left-color: #fff400; }
.formate-acc-item--cyan, .formate-acc--cyan { border-left-color: #fff400; }
.formate-acc-item--lime, .formate-acc--lime { border-left-color: #6b9422; }
.formate-acc-item--emerald, .formate-acc--emerald { border-left-color: #fff400; }
.formate-acc--magenta summary::after { color: #1a1817; }
.formate-acc--violet summary::after { color: #1a1817; }
.formate-acc--cyan summary::after { color: #1a1817; }
.formate-acc--lime summary::after { color: #6b9422; }
.formate-acc--emerald summary::after { color: #1a1817; }
@media (max-width: 900px) {
  .formate-grid { grid-template-columns: 1fr; gap: 40px; }
  .formate-accordion { margin-top: 0; }
}

/* Stats / dark */
.stats { text-align: center; }
.stats h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  color: #fff;
  margin: 0 0 clamp(40px, 5vw, 68px);
  letter-spacing: -0.005em;
}
.stats h2 b { font-weight: 700; }
.stats-row {
  display: flex;
  justify-content: center;
  gap: clamp(48px, 8vw, 120px);
  flex-wrap: wrap;
}
.stat { text-align: center; }
.stat .num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 3.4vw, 3rem);
  color: #fff;
  line-height: 1;
  margin-bottom: 0.6rem;
}
.stat .lbl { font-size: 0.95rem; color: #cfcecc; line-height: 1.4; max-width: 190px; }

/* Kontakt */
.kontakt { padding-bottom: 0; padding-top: clamp(36px, 4vw, 60px); }
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.kontakt h2 { font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 600; margin-bottom: 1.8rem; }
.kontakt-copy p { margin: 0 0 1.3rem; }
.kontakt-contact { margin-top: 2.2rem; display: flex; align-items: center; gap: 1.1rem; }
.kontakt-contact .pico { flex: 0 0 auto; width: 48px; height: 48px; color: var(--ink); }
.kontakt-contact .lines { line-height: 1.6; }
.kontakt-contact a { font-size: 1.0625rem; }
.kontakt-media { position: relative; align-self: stretch; min-height: 640px; }
.kontakt-media .portrait {
  position: absolute;
  right: -74px; bottom: 0;
  max-height: 1010px;
  width: auto;
  z-index: 1;
}
.kontakt-media .wm-fwd { position: absolute; right: -185px; bottom: -5px; z-index: 0; color: #e6e6e6; }
/* Team-Foto-Variante der Kontakt-Media (Querformat statt hohem Einzelporträt).
   Der Wrap ist absolut positioniert (kein Layout-Einfluss), damit die Section-Höhe
   unverändert bleibt, obwohl das Bild doppelt so groß dargestellt wird. Dank
   "overflow: visible" auf der Section (.kontakt--team-bleed) darf das Bild nach unten
   über die Section hinausragen; die nachfolgende dunkle Section überdeckt es dort
   (spätere Elemente im Dokument liegen automatisch obenauf). */
.kontakt-media--team {
  position: relative;
  min-height: 640px;
  padding-block: 0;
}
/* Wrap sitzt jetzt direkt in der Section (nicht mehr im Grid), damit er exakt am
   rechten Rand des Contentstreifens (var(--pad-x), wie der Container-Innenrand) und
   ganz unten an der Section-Kante (bottom:0) ausgerichtet werden kann. */
.team-portrait-wrap {
  position: absolute;
  right: calc((100% - var(--container)) / 2 + var(--pad-x) - 15px);
  bottom: 0;
  width: min(666px, 49vw);
  z-index: 1;
}
.team-portrait-wrap .portrait {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
}
.badge--team { left: 50%; bottom: 8%; transform: translateX(calc(-50% + 210px)); }
/* Höher spezifisch als die generische "a.badge:hover"-Regel weiter unten, damit der
   horizontale Versatz beim Hover erhalten bleibt und die Pill sich genau wie die
   anderen Pills in den Kontakt-Sektionen verhält (nur ein leichtes Anheben). */
.team-portrait-wrap a.badge--team:hover { transform: translateX(calc(-50% + 210px)) translateY(-2px); }
.kontakt--team-bleed > .wm-fwd { right: calc((100% - var(--container)) / 2 + var(--pad-x) + 35px); bottom: 20px; width: 300px; height: 300px; z-index: 0; }
.kontakt--team-bleed { overflow: visible; }

.badge {
  position: absolute;
  left: 13.5%; bottom: 13%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 1.15rem;
  background: rgba(28,27,26,0.78);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 0.62rem 3rem 0.62rem 1.2rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}
a.badge:hover { transform: translateY(-2px); background: rgba(28,27,26,0.9); }
.badge .in {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.badge .in svg { width: 42px; height: 42px; }
.badge .btext { line-height: 1.06; }
.badge .bname { font-family: var(--font-serif); font-weight: 700; font-size: 1.26rem; line-height: 1.06; white-space: nowrap; }
.badge .brole { font-size: 0.98rem; color: #d8d7d5; }

/* Mobile-only Daniel contact card (hidden on desktop) */
.dani-card { display: none; }

/* Footer */
.site-footer { background: var(--black); color: #cfcecc; }
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 28px;
  font-size: 0.95rem;
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.footer-links a:hover { color: #fff; }
/* "Cookie-Einstellungen" ist ein <button> (ruft Cookiebot.renew()), muss aber
   wie die Footer-Links aussehen. */
.footer-links button {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.footer-links button:hover { color: #fff; }

/* ============ Legal pages (Impressum / Datenschutz) ============ */
.legal { padding-block: clamp(44px, 6vw, 84px) clamp(60px, 8vw, 110px); }
/* Container auf normaler Breite lassen, damit die linke Kante mit dem Logo im
   Header fluchtet; stattdessen die Textspalte begrenzen. Das calc reproduziert
   exakt die vorherige Zeilenlänge (früher: 840px-Box minus beidseitiges
   padding-inline) — nur eben linksbündig statt zentriert. */
.legal .container { max-width: var(--container); }
.legal .container > * { max-width: calc(840px - 2 * var(--pad-x)); }
.legal h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.1;
  letter-spacing: -0.01em; margin: 0 0 1.6rem; color: var(--ink);
}
.legal h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 2.4rem 0 0.6rem; color: var(--ink);
}
.legal h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; margin: 1.5rem 0 0.4rem; color: var(--ink); }
.legal p, .legal li { color: var(--ink-2); line-height: 1.72; font-size: 1.0625rem; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.4rem; }
.legal address { font-style: normal; margin: 0 0 1rem; line-height: 1.72; color: var(--ink-2); }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--grey-70); }
.legal .lead-note {
  background: var(--grey-bg); border-radius: 14px;
  padding: 16px 20px; margin: 0 0 2rem; font-size: 0.98rem;
}
.legal .updated { color: var(--grey-50); font-size: 0.92rem; margin-top: 2.6rem; }
.nav-back { margin-left: auto; }

/* ============ Leistungen-Detailseiten ============ */
/* .hero-head { width: max-content } ist auf die immer zweizeilige Homepage-Headline
   zugeschnitten (kurzer Text mit hartem <br>). Bei den Detailseiten ist die Headline
   teils einzeilig und länger -> max-content sprengt sonst die Grid-Spalte und
   überlappt Icon/Lead-Text. Hier auf normales Grid-Stretch zurücksetzen. */
/* Padding-top so gewählt, dass H1 IMMER exakt auf Höhe des Homepage-Hero-H1
   landet: homepage nutzt clamp(72px,9vw,140px) ohne Kicker davor: hier also
   dieselbe Formel minus der (fixen, rem-basierten) Kicker-Blockhöhe. */
/* Kein Kicker mehr vor dem H1 auf den Detailseiten -> identisches Padding
   wie die Startseite (.hero), damit H1 und Fließtext exakt auf gleicher
   Höhe wie auf der Startseite beginnen. */
.leistung-hero { padding-top: clamp(72px, 9vw, 140px); }
.leistung-hero .hero-head { width: auto; max-width: none; text-align: right; }
.leistung-content { position: relative; z-index: 1; max-width: 680px; }
.leistung-content p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.72; margin: 0 0 1.15rem; }
.leistung-content p:last-child { margin-bottom: 0; }

.leistung-result .kicker { color: #cfcecc; }
.leistung-result-copy p {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.32;
  color: #fff; margin: 0 0 1.2rem; max-width: 780px;
}
.leistung-result-copy p:last-child { margin-bottom: 0; }

.leistung-cta-row { text-align: center; margin-bottom: clamp(48px, 6vw, 84px); }

/* "Weitere Leistungen": schwarze Sektion, schlanke Karten (nur Icon + Titel),
   Beschreibung + Link erscheinen erst per Hover-Slide-up. */
.leistung-related-section { text-align: center; }
.leistung-related-section .kicker { color: #cfcecc; text-align: center; margin-bottom: 1rem; }
.leistung-related-section h2 {
  color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.leistung-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); text-align: left; }
.related-leistung {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 196px;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--radius-card);
  border: 1.5px solid rgba(255,255,255,0.45);
  transition: border-color .2s ease;
}
.related-leistung:hover { border-color: transparent; }
.related-leistung-face {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.related-leistung-face .icon { width: 34px; height: 34px; color: #fff; flex: 0 0 auto; }
.related-leistung-face .icon svg { width: 100%; height: 100%; }
.related-leistung-face h3 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 1.12rem; line-height: 1.28; margin: 0; color: #fff;
  text-align: left;
}
.related-leistung-hover {
  position: absolute; inset: 0; z-index: 2;
  background: var(--hl-solid);
  display: flex; flex-direction: column; justify-content: center; gap: 0.8rem;
  padding: clamp(24px, 2.6vw, 32px);
  transform: translateY(100%);
  transition: transform .32s ease;
}
.related-leistung-hover p { font-size: 0.94rem; line-height: 1.58; color: var(--black); margin: 0; }
.related-leistung-hover .link-more { color: var(--black); }
.related-leistung:hover .related-leistung-hover,
.related-leistung:focus-visible .related-leistung-hover { transform: translateY(0); }

/* ============ Leistungen-Detailseiten: Grundstruktur (Problem/Lösung/Ergebnis/Bausteine/Austausch) ============ */
.leistung-simple-section h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 0 0 1.1rem; }
.section--dark.leistung-simple-section .h-serif { color: #fff; }
.section--dark.leistung-simple-section .lead { color: #cfcecc; }
.section--dark.leistung-simple-section .kicker { color: #cfcecc; }
.leistung-austausch-cta { margin-top: 2rem; }

/* Problem & Lösung: linksbündig, exakt an der Container-Kante (= Logo-Position).
   Lösung/Ergebnis/Austausch teilen sich .leistung-simple als reinen Innen-Wrapper
   (kein Einfluss auf die äußere .container-Zentrierung); Standard = linksbündig,
   --center macht daraus die zentrierte Variante für Ergebnis/Austausch. */
.leistung-simple { max-width: 640px; }
.leistung-simple-section--center .leistung-simple { max-width: 760px; text-align: center; margin-inline: auto; }

/* Hero: Anlässe als kleine Chips unterhalb des Hero-Texts */
.hero-anlaesse {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem;
  margin-top: 1.4rem;
}
.hero-anlass {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--grey-bg);
  border-radius: 999px;
  font-size: 0.7rem; font-weight: 500;
  color: var(--grey-50);
  background: transparent;
  white-space: nowrap;
}

.leistung-bausteine-section .leistung-bausteine-head { text-align: center; max-width: 680px; margin: 0 auto clamp(40px, 5vw, 64px); }
.leistung-bausteine-section .kicker { text-align: center; }
.leistung-bausteine-section h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 0 0 1.1rem; }
.bausteine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); }
.baustein-card {
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--radius-card);
  border: 1px solid var(--grey-bg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.baustein-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.08); border-color: transparent; }
.baustein-card .icon-wrap { position: relative; width: 44px; height: 44px; margin-bottom: 1rem; }
.baustein-card .icon-wrap svg { width: 100%; height: 100%; display: block; }
.baustein-card .icon-wrap .ico-shadow { position: absolute; inset: 0; transform: translate(3px, 4px); color: var(--hl-solid); }
.baustein-card .icon-wrap .ico-main { position: absolute; inset: 0; color: var(--ink); }
.baustein-card h3 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 1.14rem; line-height: 1.26; margin: 0 0 0.6rem; color: var(--ink);
}
.baustein-card p { font-size: 0.94rem; line-height: 1.58; color: var(--ink-2); margin: 0; }

/* ============ Leistungen-Detailseiten: Lösung/Leistungen als vertikale Timeline ============ */
.leistung-stufen-section .leistung-stufen-head { text-align: center; max-width: 680px; margin: 0 auto clamp(64px, 8vw, 96px); }
.leistung-stufen-section .kicker { text-align: center; }
.leistung-stufen-section h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 0 0 1.1rem; }

.stufe-note { font-size: 0.86rem; color: var(--grey-50); font-style: italic; }

/* Stufe 3: Medien-Kacheln – dezent angedeutet, Absprungpunkte für spätere Unterseiten */
.medien-tiles {
  display: flex; flex-wrap: wrap; gap: var(--mt-gap);
  margin: 1.3rem 0 1rem;
}
/* Nur noch 3 Kacheln (Video entfernt) – Breite je Kachel so vergrößert,
   dass die Gesamtbreite der 3 Kacheln der vorherigen Gesamtbreite von
   4 Kacheln entspricht: (4 * mt-w + 3 * gap) auf 3 Kacheln + 2 gaps verteilt. */
.medien-tiles .medien-tile { width: calc((4 * var(--mt-w) + var(--mt-gap)) / 3); }
.medien-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: var(--mt-w); padding: 20px 12px;
  border: 1px solid var(--grey-bg); border-radius: 16px;
  color: inherit; text-align: center;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.medien-tile-icon {
  position: relative; z-index: 1;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); opacity: 1; transition: color .2s ease, opacity .18s ease;
}
.medien-tile-icon svg { width: 24px; height: 24px; }
.medien-tile-label {
  position: relative; z-index: 1; font-size: 0.78rem; color: var(--ink-2);
  opacity: 1; transition: color .2s ease, opacity .18s ease;
}
.medien-tile:hover {
  border-color: transparent; background: #fff; transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.07);
}

/* Vollflächiger Overlay pro Kachel beim Hover, fährt von unten hoch – je
   Kachel in der Akzentfarbe der zugehörigen Produktseite (PowerPoint:
   Magenta, Roll-up: Violet, Video: Gold/Braun, Landingpage: Cyan). Icon +
   Label blenden dabei aus, "Mehr erfahren" blendet zentriert darüber ein. */
.medien-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--hl-solid);
  transform: translateY(100%);
  transition: transform .3s ease;
  pointer-events: none;
}
.medien-tile--ppt::after { background: #fff400; }
.medien-tile--rollup::after { background: #fff400; }
.medien-tile--video::after { background: #fff400; }
.medien-tile--landing::after { background: #fff400; }
.medien-tile:hover::after, .medien-tile:focus-visible::after { transform: translateY(0); }
.medien-tile:hover .medien-tile-icon, .medien-tile:focus-visible .medien-tile-icon,
.medien-tile:hover .medien-tile-label, .medien-tile:focus-visible .medien-tile-label {
  opacity: 0;
}
.medien-tile-more {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px; text-align: center;
  font-family: var(--font-sans); font-weight: 600; font-size: .8rem; color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s ease .06s, transform .22s ease .06s;
  pointer-events: none;
}
.medien-tile:hover .medien-tile-more, .medien-tile:focus-visible .medien-tile-more {
  opacity: 1; transform: translateY(0);
}

/* Stufe 4: Framework/Storyboard – größere Kacheln, gleicher Hover-Reveal wie
   bei "Weitere Leistungen" (heller Rand, gelbe Rückseite mit Info beim Hover) */
.briefing-tiles {
  display: flex; flex-wrap: wrap; gap: var(--mt-gap);
  margin: 1.4rem 0 0;
}
.briefing-tile {
  position: relative; overflow: hidden; cursor: default;
  width: calc(2 * var(--mt-w) + var(--mt-gap));
  min-height: 236px; padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--grey-bg); border-radius: 16px;
  display: flex; align-items: flex-end;
  transition: border-color .2s ease;
}
.briefing-tile:hover, .briefing-tile:focus-visible { border-color: transparent; outline: none; }
.briefing-tile-face {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.briefing-tile-icon {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); flex: 0 0 auto;
}
.briefing-tile-icon svg { width: 22px; height: 22px; }
.briefing-tile-face h4 {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 0.78rem; color: var(--ink-2); margin: 0;
}
.briefing-tile-hover {
  position: absolute; inset: 0; z-index: 2;
  background: var(--hl-solid);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 8px;
  padding: clamp(18px, 2.2vw, 24px);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.briefing-tile-icon--hover { color: var(--black); }
/* Compound-Selektor nötig: ".stufe-content p" steht im Stylesheet weiter unten
   und würde bei gleicher Spezifität sonst Schriftgröße/Zeilenabstand hier
   überschreiben (gleicher Bug wie beim PDF-Modal) – Formatierung 1:1 wie
   ".related-leistung-hover p" bei "Weitere Leistungen". */
.briefing-tile .briefing-tile-hover p {
  font-size: 0.94rem; line-height: 1.58; color: var(--black); margin: 0; max-width: none;
}
.briefing-tile:hover .briefing-tile-hover,
.briefing-tile:focus-visible .briefing-tile-hover { transform: translateY(0); }
@media (max-width: 480px) {
  .briefing-tile { width: 100%; max-width: 280px; }
}

/* Stufe 1: PDF-Kasten im Querformat unterhalb des Texts, volle Textbreite */
.stufe-content--with-pdf { display: block; }
.stufe-pdf-card {
  display: flex; flex-direction: row; align-items: flex-end; gap: 20px;
  margin-top: 1.4rem; width: 100%; max-width: 52ch;
  padding: 12px; border: 1px solid var(--grey-bg); border-radius: 16px;
}
.stufe-pdf-preview {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 0; border: 1px solid var(--grey-bg); border-radius: 10px;
  overflow: hidden; background: #fff; cursor: pointer; width: 92px; height: 182px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.stufe-pdf-preview:hover { border-color: var(--brand-gold); box-shadow: 0 10px 24px rgba(0,0,0,.08); transform: translateY(-1px); }
.stufe-pdf-thumb { display: block; width: 100%; height: 100%; object-fit: contain; }
.stufe-pdf-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stufe-pdf-title { font-size: 0.7rem; line-height: 1.4; color: var(--grey-50); margin: 0; }
.stufe-pdf-cta { align-self: flex-start; padding: 0.45rem 0.9rem; font-size: 0.78rem; }
@media (max-width: 640px) {
  .stufe-pdf-card { max-width: 100%; }
}

/* PDF-Vorschau-Modal (reuses .modal-overlay / .modal-wrap / .modal-close).
   Compound-Selektor ".modal.modal--pdf" ist nötig, weil die generische .modal-Regel
   weiter unten im Stylesheet steht und bei gleicher Spezifität sonst padding/
   overflow-y überschreiben und das PDF stauchen würde. */
.modal.modal--pdf { max-width: 460px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 86vh; }

/* Zeitplan-Modal (horizontale Onboarding-Timeline inkl. Detailkasten) */
.modal.modal--timeline { max-width: 780px; }
.modal--timeline .onboarding-timeline,
.modal--timeline .onboarding-detail-panel { max-width: none; }
.modal--timeline .onboarding-detail-panel { margin-bottom: 0; min-height: 240px; }
.onboarding-link-wrap { text-align: center; margin: 0 auto clamp(56px, 7vw, 84px); }

/* Statische Vorschau der Timeline auf der Seite selbst (ohne Detailkasten, nicht klickbar) */
.onboarding-timeline--static .onboarding-step { cursor: default; }
.onboarding-timeline--static { margin-bottom: clamp(20px, 2.6vw, 28px); }
.modal-pdf-scroll {
  overflow-y: auto; display: flex; justify-content: center;
  background: var(--grey-bg); flex: 1 1 auto; min-height: 0;
  padding: clamp(20px, 3.4vw, 36px);
}
.modal-pdf-img { display: block; width: auto; max-width: 84%; height: auto; box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.modal-pdf-footer { padding: clamp(18px, 2.6vw, 24px); flex: 0 0 auto; }
.modal-pdf-footer p { margin: 0 0 0.9rem; color: var(--ink); font-weight: 600; line-height: 1.4; font-size: 0.94rem; }
.modal-pdf-footer .btn { width: 100%; text-align: center; }

/* Problem-Sektion mit Erklärvideo-Platzhalter */
.leistung-problem-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 64px); align-items: end;
}
.leistung-problem-grid .leistung-simple { max-width: 560px; }
.leistung-problem-grid .lead + .lead { margin-top: 0.85rem; }
.leistung-simple .lead + .lead { margin-top: 0.85rem; }
.leistung-problem-video { width: 100%; }
.video-placeholder {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--black) 0%, #33302c 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.video-placeholder-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--hl-solid); color: var(--black);
  display: flex; align-items: center; justify-content: center;
}
.video-placeholder-play svg { width: 28px; height: 28px; }
.video-placeholder-tag {
  position: absolute; left: 16px; bottom: 14px;
  font-size: 0.72rem; letter-spacing: 0.02em; color: #d8d5d0;
  background: rgba(0,0,0,0.35); padding: 4px 10px; border-radius: 100px;
}
@media (max-width: 900px) {
  .leistung-problem-grid { grid-template-columns: 1fr; }
  .leistung-problem-grid .leistung-simple { max-width: none; }
  .leistung-problem-video { max-width: 420px; }
}

/* Leadmagnet-Dummy (Platzhalter für Download-Karte) */
.leadmagnet-card {
  margin: clamp(28px, 4vw, 40px) auto 0; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: clamp(28px, 3.4vw, 36px) clamp(22px, 2.8vw, 28px);
  border: 1px solid var(--grey-bg); border-radius: var(--radius-card);
  background: #fff; text-align: center;
}
.leadmagnet-icon { width: 48px; height: 48px; color: var(--brand-gold); margin-bottom: 2px; }
.leadmagnet-icon svg { width: 100%; height: 100%; }
.leadmagnet-subhead { font-family: var(--font-sans); font-weight: 600; font-size: 1rem; color: var(--ink); margin: 0 0 0.7rem; }
.leadmagnet-title { font-size: 0.86rem; line-height: 1.5; color: var(--ink); margin: 0; }
.leadmagnet-cta { margin-top: 4px; }
.leadmagnet-tag { font-size: 0.7rem; color: var(--grey-50); }

/* Timeline: Lösung/Leistungen – Ziffern-Marker links mit Verbindungslinie, Inhalt rechts */
.leistung-stufen-section { padding-bottom: 0; }
.stufen-timeline { max-width: 820px; margin: 0 auto; }
.stufen-timeline-item {
  display: flex; gap: clamp(24px, 3.4vw, 36px); position: relative;
  --tl-gap: clamp(44px, 5.4vw, 68px);
  padding-bottom: var(--tl-gap);
}
/* Letzte Stufe: Linie läuft bis zur Sektionskante durch (kein eigenes bottom-padding der Section mehr) */
.stufen-timeline-item:last-child { --tl-gap: clamp(72px, 9vw, 132px); }
.stl-marker { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.stl-marker::after {
  content: ""; position: absolute; top: 64px; bottom: calc(-1 * var(--tl-gap)); left: 50%; width: 1px;
  background: var(--grey-bg); transform: translateX(-50%);
}
.stl-icon {
  width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px solid var(--grey-bg); color: var(--brand-gold); background: #fff;
  position: relative; z-index: 1;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.02rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.stl-icon:hover { background: var(--brand-gold); border-color: var(--brand-gold); color: #fff; }
.stufe-content { padding-top: 4px; }

/* Erste Timeline-Hälfte (Stufe 01–02): normaler Abstand nach dem letzten Item,
   die vergrößerte :last-child-Lücke ist nur für die wirklich letzte Stufe (04)
   gedacht, die in die schwarze Ergebnis-Sektion überläuft. */
.stufen-timeline--top .stufen-timeline-item:last-child { --tl-gap: clamp(44px, 5.4vw, 68px); }

/* Zwischenergebnis: eigenständiger, auf die volle Containerbreite zentrierter
   Break zwischen den beiden Timeline-Hälften – kein Marker, kein Kasten, zwei
   dünne Linien rahmen die Aussage wie eine bewusste Zäsur im Ablauf. */
.stufe-break {
  max-width: 790px; margin: clamp(8px, 1.4vw, 16px) auto clamp(32px, 4.4vw, 56px);
  padding-block: clamp(32px, 4.2vw, 48px);
  border-top: 1px solid var(--grey-bg); border-bottom: 1px solid var(--grey-bg);
  text-align: center;
}
.stufe-interim-tag {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand-gold); margin: 0 0 0.7rem;
}
.stufe-break h3 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.15rem); line-height: 1.22;
  margin: 0 0 0.8rem; color: var(--ink);
}
.stufe-break p { font-size: 1rem; line-height: 1.7; color: var(--ink-2); margin: 0 auto; max-width: 62ch; }
.stufe-break p + p { margin-top: 1rem; }
/* Band-Variante (Komplexe Themen): Zwischenergebnis auf durchgehend hellgrauem
   Hintergrund über die volle Fensterbreite, wie die Problem-Section. Der graue
   Streifen entsteht per box-shadow + clip-path, die Section schneidet seitlich ab
   (overflow: hidden) – daher kein horizontaler Überlauf. */
.stufe-break--band {
  max-width: none; background: var(--grey-bg);
  border-top: 0; border-bottom: 0;
  box-shadow: 0 0 0 100vmax var(--grey-bg); clip-path: inset(0 -100vmax);
  padding-block: clamp(56px, 7vw, 96px);
  margin-block: clamp(32px, 4.4vw, 56px) clamp(56px, 7vw, 96px);
}
.stufe-content h3 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(1.7rem, 2.9vw, 2.2rem);
  line-height: 1.18; margin: 0 0 0.7rem; color: var(--ink);
}
.stufe-content p {
  font-size: 1rem; line-height: 1.7; color: var(--ink-2); margin: 0; max-width: 52ch;
}
.stufe-content p + p {
  margin-top: 1rem;
}

/* Business Story: Why / How / What next – Akkordeon, öffnet bei Mouseover */
.story-accordion { margin-top: 1.1rem; max-width: 480px; border-top: 1px solid var(--grey-bg); }
.story-acc-item { border-bottom: 1px solid var(--grey-bg); }
.story-acc-head { display: flex; align-items: center; padding: 13px 0; }
.story-acc-title {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.02rem;
  color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em;
}
.story-acc-body {
  max-height: 0; overflow: hidden; opacity: 0;
  padding-left: 0; border-left: 2px solid transparent;
  transition: max-height .3s ease, opacity .25s ease, padding-left .3s ease, border-color .3s ease;
}
.story-acc-body p { margin: 0 0 14px; font-size: 0.94rem; line-height: 1.6; color: var(--ink-2); }
.story-acc-item:hover .story-acc-body {
  max-height: 120px; opacity: 1; padding-left: 14px; border-left-color: var(--brand-gold);
}

/* Modul-Akkordeon (Stufe 01 Teams): Klick statt Hover, für längere Inhalte mit Bulletliste/PDF */
.modul-accordion { margin-top: 1.1rem; max-width: 560px; border-top: 1px solid var(--grey-bg); }
.modul-acc-item { border-bottom: 1px solid var(--grey-bg); }
.modul-acc-item > summary.modul-acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; cursor: pointer; list-style: none;
}
.modul-acc-item > summary.modul-acc-head::-webkit-details-marker { display: none; }
.modul-acc-title {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.02rem; color: var(--ink);
}
.modul-acc-toggle { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
.modul-acc-toggle::before, .modul-acc-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--ink-2);
  transform: translate(-50%, -50%); transition: transform .25s ease, opacity .25s ease;
}
.modul-acc-toggle::before { width: 12px; height: 2px; }
.modul-acc-toggle::after { width: 2px; height: 12px; }
.modul-acc-item[open] .modul-acc-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.modul-acc-body { padding: 2px 0 22px 14px; border-left: 2px solid var(--brand-gold); }
.modul-acc-body p { margin: 0 0 12px; font-size: 0.94rem; line-height: 1.6; color: var(--ink-2); }
.modul-acc-list { margin: 0 0 14px; padding-left: 18px; }
.modul-acc-list li { font-size: 0.94rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 6px; }
.modul-acc-result { font-size: 0.94rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 4px; }
.modul-acc-result strong { color: var(--ink); }
/* Compound-Selektor nötig: ".stufe-content p" (Klasse+Element) ist spezifischer
   als eine einzelne Klasse und würde margin-top sonst wieder auf 0 setzen. */
.modul-acc-result.modul-acc-result--spaced { margin-top: 2.6rem; }
.modul-pdf-card { margin-top: 0.6rem; }

/* Stufe 03 (Umsetzungsbegleitung): Zeitraum-Pill neben der Headline */
.stufe-duration-tag {
  display: inline-block; margin: 0 0 0.9rem;
  padding: 4px 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--brand-gold); border: 1px solid var(--brand-gold); border-radius: 999px;
}

/* 70-20-10-Regel: segmentierter Balken + Legende */
.ratio-bar { display: flex; width: 100%; max-width: 480px; height: 34px; border-radius: 8px; overflow: hidden; margin: 0.9rem 0 0.9rem; }
.ratio-seg { display: flex; align-items: center; justify-content: center; }
.ratio-seg-value { font-size: 0.78rem; font-weight: 600; }
.ratio-seg--a { background: var(--black); }
.ratio-seg--a .ratio-seg-value { color: #fff; }
.ratio-seg--b { background: var(--brand-gold); }
.ratio-seg--b .ratio-seg-value { color: #fff; }
.ratio-seg--c { background: var(--grey-bg); }
.ratio-seg--c .ratio-seg-value { color: var(--ink-2); }
.ratio-legend { display: flex; flex-direction: column; gap: 7px; margin-bottom: 0.8rem; }
.ratio-legend-item { display: flex; align-items: baseline; gap: 9px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.ratio-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); }
.ratio-dot--a { background: var(--black); }
.ratio-dot--b { background: var(--brand-gold); }
.ratio-dot--c { background: var(--grey-bg); border: 1px solid var(--grey-50); }

/* Horizontale Ablauf-Timeline (Lösung, zwischen Text und vertikaler Stufen-Timeline):
   Klick auf einen Punkt wählt ihn aus, die Details erscheinen gemeinsam in einem
   grauen Kasten unterhalb der ganzen Timeline (nicht pro Punkt einzeln). */
.onboarding-timeline {
  position: relative; display: flex; justify-content: space-between; gap: 8px;
  max-width: 900px; margin: 0 auto clamp(28px, 3.6vw, 40px); padding-top: 6px;
}
.onboarding-line {
  position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: var(--grey-bg); z-index: 0;
}
.onboarding-step {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: none; font: inherit; cursor: pointer; padding: 0 8px; text-align: center;
}
.onboarding-dot {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  border: 2px solid var(--brand-gold); transition: background .2s ease;
}
.onboarding-step.is-active .onboarding-dot { background: var(--brand-gold); }
.onboarding-step-text { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.onboarding-step-title { font-family: var(--font-serif); font-weight: 700; font-size: 0.96rem; color: var(--ink); }
.onboarding-step.is-active .onboarding-step-title { color: var(--brand-gold); }
.onboarding-step-duration { font-size: 0.72rem; color: var(--grey-50); letter-spacing: 0.01em; }
.onboarding-detail-panel {
  max-width: 900px; margin: 0 auto clamp(56px, 7vw, 84px);
  padding: clamp(22px, 3vw, 30px) clamp(24px, 3.4vw, 34px);
  background: var(--grey-bg); border-radius: var(--radius-card);
}
.onboarding-detail { display: none; }
.onboarding-detail.is-active { display: block; }
.onboarding-detail p { font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; }
.onboarding-step-list { margin: 0; padding-left: 18px; }
.onboarding-step-list li { font-size: 0.88rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 6px; }
.onboarding-step-list li:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .onboarding-timeline { flex-direction: column; gap: 16px; max-width: 420px; }
  .onboarding-line { display: none; }
  .onboarding-step { flex-direction: row; align-items: flex-start; gap: 12px; text-align: left; width: 100%; }
  .onboarding-step-text { align-items: flex-start; }
}
@media (max-width: 640px) {
  .stufen-timeline-item { gap: 16px; }
  .stl-icon { width: 48px; height: 48px; font-size: 0.9rem; }
  .stufe-content h3 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
}



/* ============ Modal ============ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  background: #fff;
  border-radius: var(--radius-card);
  max-width: 680px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 52px);
  transform: translateY(16px) scale(.98);
  transition: transform .25s ease;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.modal-overlay.open .modal { transform: none; }
.modal-icon { width: 44px; height: 44px; color: var(--ink); margin-bottom: 1.4rem; }
.modal-icon svg { width: 100%; height: 100%; }
.modal h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  margin: 0 0 1.4rem;
  color: var(--ink);
}
.modal-body p { margin: 0 0 1rem; color: var(--ink-2); line-height: 1.68; }
.modal-body .result-label { font-weight: 600; color: var(--ink); font-family: var(--font-sans); }
.modal-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid #e2e2e2;
  background: #fff;
  display: grid; place-items: center;
  color: var(--ink);
  font-size: 1.2rem;
}
.modal-close:hover { background: #f4f4f4; }
.modal-wrap { position: relative; width: 100%; max-width: 680px; }

/* Anforderungsprofil "virtueller Marketingmitarbeiter" — helles, dokumentartiges
   Zweispalten-Layout statt der sonstigen dunklen Diagramm-Modals. */
.modal-wrap--jobprofile { max-width: 900px; }
.modal.modal--jobprofile { max-width: 900px; max-height: 92vh; text-align: left; padding: clamp(28px, 3.6vw, 50px); }
.jobprofile-header { border-bottom: 2px solid var(--ink); padding-bottom: 16px; margin-bottom: 24px; }
.jobprofile-header .kicker { color: var(--grey-50); }
.jobprofile-header h3 { margin: .35rem 0 .55rem; font-size: 1.65rem; }
.jobprofile-header p { color: var(--grey-70); margin: 0; font-size: .88rem; line-height: 1.5; }
.jobprofile-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px 34px; }
.jobprofile-section h4 {
  font-family: var(--font-serif); font-weight: 700; font-size: .98rem;
  margin: 0 0 .55rem; color: var(--ink);
}
.jobprofile-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.jobprofile-list li {
  padding-left: 16px; position: relative; font-size: .82rem; line-height: 1.45; color: var(--ink-2);
}
.jobprofile-list li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--ink);
}
.jobprofile-callout {
  margin: 32px 0 26px; padding: 16px 22px; background: #eef3f6;
  border-left: 4px solid #063755; border-radius: 4px 10px 10px 4px;
}
.jobprofile-callout p {
  margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: .96rem;
  line-height: 1.45; color: var(--ink);
}
.jobprofile-download {
  margin-top: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 18px;
}
.jobprofile-download-includes {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px;
}
.jobprofile-download-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600; color: var(--grey-70);
}
.jobprofile-download-item svg {
  width: 30px; height: 30px; color: #063755;
}
.jobprofile-download .btn { padding: .7rem 1.5rem; font-size: .92rem; }
.jobprofile-download-note { margin: 0; font-size: .8rem; color: var(--grey-70); }
@media (max-width: 900px) {
  .jobprofile-columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .jobprofile-columns { grid-template-columns: 1fr; }
}

/* ============ Responsive ============ */
/* Desktop-only refinements (mobile untouched) */
@media (min-width: 901px) {
  .loesung-actions .link-more { font-size: 1.125rem; font-weight: 700; }
  .lcard .link-more { font-size: 0.94rem; font-weight: 700; }
  /* Ausgemessen am Homepage-Hero bei 1440px (siehe HANDOFF-Standardmaß
     "Desktop 1440x900"), damit die Leistungen-Detailseiten exakt dieselbe
     Header-Section-Höhe haben wie die Startseite - unabhängig von der
     Zeilenzahl der jeweiligen Headline. */
  .leistung-hero { min-height: 711px; }
}

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; background: none; color: var(--ink);
  }
  .nav { height: 68px; }
  .mobile-menu {
    position: fixed; inset: 68px 0 auto 0; z-index: 55;
    background: #fff; border-bottom: 1px solid #ededed;
    display: flex; flex-direction: column; padding: 12px var(--pad-x) 24px;
    box-shadow: 0 12px 24px rgba(0,0,0,.06);
    transform: translateY(-120%); transition: transform .3s ease;
    max-height: calc(100vh - 68px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .mobile-menu.open { transform: none; }
  .mobile-menu a { padding: 14px 0; font-size: 1.15rem; border-bottom: 1px solid #f2f2f2; color: var(--ink); }
  .mobile-menu .btn { margin-top: 16px; color: #fff; border: 1.5px solid var(--black); }

  /* Leistungen-Unterpunkte im Mobile-Menü: pro Hauptgruppe ein eigenes
     Accordion (Pfeil tippen -> Unterpunkte auf-/zuklappen), standardmäßig
     zu. So bleibt das Menü bei vielen Gruppen kompakt und scrollbar, statt
     dass alle Unterpunkte aller Gruppen permanent aufgeklappt sind. */
  .mobile-submenu { display: flex; flex-direction: column; padding-left: 16px; margin-top: -6px; }
  .mobile-submenu-divider { height: 1px; background: #f2f2f2; margin: 6px 0; }
  .mobile-submenu-group { display: flex; flex-direction: column; }
  .mobile-submenu-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .mobile-submenu-row .mobile-submenu-label { padding: 10px 0; flex: 1; }
  .mobile-submenu-label {
    padding: 10px 0 2px; font-size: 0.95rem; font-weight: 500;
    color: var(--grey-50);
  }
  .mobile-submenu-label--link { text-decoration: none; }
  .mobile-submenu-label--link:hover { color: var(--ink); }
  .mobile-submenu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: 4px 0; padding: 0; border: 0; background: none;
    color: var(--grey-50); flex-shrink: 0;
  }
  .mobile-submenu-chevron { transition: transform .2s ease; }
  .mobile-submenu-group.is-open .mobile-submenu-chevron { transform: rotate(180deg); }
  .mobile-submenu-panel { display: none; flex-direction: column; padding-left: 16px; }
  .mobile-submenu-group.is-open .mobile-submenu-panel { display: flex; }
  .mobile-submenu-panel a {
    padding: 10px 0; font-size: 0.95rem; font-weight: 500;
    color: var(--grey-label); border-bottom: 1px dashed #f2f2f2;
  }
  .mobile-submenu-panel a:last-child { border-bottom: 1px solid #f2f2f2; }
  /* Verschachtelter Unterpunkt, der selbst noch eigene Links aufklappt (3. Ebene,
     z.B. "Medien, die Ergebnisse liefern" unter "Marketing"): wie ein normaler
     Link, nur fett, damit er sich von seinen eingerückten Kindern abhebt. */
  a.mobile-submenu-sublabel {
    display: block; padding: 10px 0; font-size: 0.95rem; font-weight: 700;
    color: var(--ink); border-bottom: 1px dashed #f2f2f2; text-decoration: none;
  }
  a.mobile-submenu-sublink {
    display: block; padding: 10px 0 10px 16px; font-size: 0.9rem; font-weight: 500;
    color: var(--grey-label); border-bottom: 1px dashed #f2f2f2; text-decoration: none;
  }
  /* Unterpunkte innerhalb einer zurückgenommenen Gruppe (z.B. "Archiv",
     "Impulsvorträge"): genauso hellgrau wie das übergeordnete Label. */
  .mobile-submenu-link--muted,
  a.mobile-submenu-sublink--muted,
  a.mobile-submenu-sublabel--muted { color: var(--grey-50); }

  /* Hero */
  .hero-grid { grid-template-columns: 1fr; gap: 14px; }
  .hero h1 { font-size: clamp(3.4rem, 17vw, 4.6rem); }
  .hero-arrow { margin-top: -1.6rem; }
  .hero-copy { order: 2; padding-top: 0; font-size: 1rem; }

  /* Problem */
  .problem-grid { grid-template-columns: 1fr; gap: 48px; }
  .problem-head { text-align: left; }
  .problem-head .kicker { font-size: 1rem; margin-bottom: 0.5rem; }
  .problem-head h2 { font-size: clamp(2.3rem, 9.5vw, 2.9rem); }
  .problem-card { font-size: 0.95rem; }

  /* Lösung */
  .loesung-copy { font-size: 1rem; }
  .loesung-actions .link-more { font-size: 1.05rem; }
  /* All primary CTAs share the same mobile size/proportions */
  .loesung-actions .btn, .hero-cta .btn, .leistungen-cta .btn { font-size: 0.95rem; padding: 0.85rem 1.7rem; }

  /* Leistungen */
  .leistungen-grid { grid-template-columns: 1fr; }
  .cards-2x2 { grid-template-columns: 1fr; }
  .cards-3col { grid-template-columns: 1fr; }
  .leistungen-head h2 { font-size: clamp(2.3rem, 9.5vw, 2.9rem); }
  .leistungen-head .lead { font-size: 1rem; }
  .lcard h3 { font-size: 1.34rem; }
  .wm-kreis { left: -62%; top: calc(-22% + 40px); }

  /* Formate */
  .formate-grid { grid-template-columns: 1fr; gap: 32px; }
  .formate-head h2 { font-size: clamp(2.3rem, 9.5vw, 2.9rem); }

  /* Leistungen-Detailseiten */
  .leistung-related-grid { grid-template-columns: 1fr; }
  .bausteine-grid { grid-template-columns: 1fr; }
  .leistung-simple-section h2 { font-size: clamp(2rem, 8.5vw, 2.5rem); }

  /* Stats */
  .stats h2 { font-size: clamp(2.2rem, 8.5vw, 2.8rem); }
  .stat .num { font-size: clamp(2.8rem, 12vw, 3.4rem); }

  /* Kontakt */
  .kontakt-grid { grid-template-columns: 1fr; }
  .kontakt .kicker { font-size: 1rem; margin-bottom: 0.5rem; }
  .kontakt h2 { font-size: clamp(2.4rem, 9.5vw, 3rem); }
  .kontakt-copy { font-size: 0.9rem; }
  .kontakt { padding-bottom: 40px; }

  /* Mobile: replace the desktop contact/portrait with the black Daniel card */
  .kontakt-contact, .kontakt-media { display: none; }
  .team-portrait-wrap, .kontakt--team-bleed > .wm-fwd { display: none; }
  .dani-card {
    display: block;
    position: relative;
    background: #000;
    border-radius: 30px;
    margin-top: 100px;
    padding: 128px 30px 32px;
    color: #fff;
    text-align: left;
  }
  .dani-photo {
    position: absolute;
    top: -80px; left: 50%; transform: translateX(-50%);
    width: 172px; height: 172px;
  }
  .dani-name {
    font-family: var(--font-serif); font-weight: 700;
    font-size: 1.5rem; line-height: 1.1; margin: 0 0 0.7rem; color: #fff;
  }
  .dani-role, .dani-line {
    display: block; font-family: var(--font-serif); font-weight: 400;
    font-size: 1.05rem; line-height: 1.55; color: #fff; margin: 0 0 0.28rem;
  }
  .dani-line { color: #fff; }
  .dani-line:last-of-type { margin-bottom: 0; }
  .dani-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    margin-top: 1.6rem;
    padding: 0.68rem 1.3rem;
    border: 1.5px solid rgba(255,255,255,0.55);
    border-radius: var(--radius-pill);
    color: #fff; font-family: var(--font-sans); font-size: 0.9rem; white-space: nowrap;
    transition: background .18s ease;
  }
  .dani-btn:hover { background: rgba(255,255,255,0.1); }
  .dani-btn-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; }
  .dani-btn-icon svg { width: 28px; height: 28px; }

  .footer-row { flex-direction: column; gap: 12px; text-align: center; }
  /* Trenner raus: sobald die Links umbrechen, hinge sonst ein "|" am Zeilenende. */
  .footer-links > span { display: none; }
  .footer-links { gap: 8px 20px; }
}

/* Phones only: logo bar becomes a static icon grid.
   Tablets/iPads (>640px) keep the smooth running marquee. */
@media (max-width: 640px) {
  .marquee { max-width: none; margin-inline: 0; padding-block: 26px 84px; }
  .marquee::before, .marquee::after { display: none; }
  .marquee-viewport { overflow: visible; cursor: auto; }
  .marquee-track {
    animation: none; display: grid; grid-template-columns: repeat(3, 1fr);
    width: 100%; gap: 26px 14px; align-items: center; justify-items: center;
  }
  .marquee-track img { height: auto; max-height: 30px; max-width: 100%; margin-right: 0; }
  .marquee-track img:nth-child(n+15) { display: none; }
  /* Mobile-Reihenfolge exakt laut "Logos mobile-Ansicht.svg" (14 Logos).
     DOM = Desktop-Reihenfolge; order = Position im Mobile-Raster. */
  .marquee-track img:nth-child(1)  { order: 1; }  /* SV */
  .marquee-track img:nth-child(2)  { order: 2; }  /* VGH */
  .marquee-track img:nth-child(3)  { order: 3; }  /* DEVK RE */
  .marquee-track img:nth-child(4)  { order: 4; }  /* VH */
  .marquee-track img:nth-child(5)  { order: 5; }  /* SVS */
  .marquee-track img:nth-child(6)  { order: 11; } /* MSK */
  .marquee-track img:nth-child(7)  { order: 10; } /* VoeV */
  .marquee-track img:nth-child(8)  { order: 6; }  /* Gartenbau */
  .marquee-track img:nth-child(9)  { order: 7; }  /* SV bAV */
  .marquee-track img:nth-child(10) { order: 13; } /* DEVK AM */
  .marquee-track img:nth-child(11) { order: 9; }  /* ÖRAG */
  .marquee-track img:nth-child(12) { order: 14; } /* SVP */
  .marquee-track img:nth-child(13) { order: 8; }  /* cominia */
  .marquee-track img:nth-child(14) { order: 12; } /* zeitsprung */
}

@media (max-width: 560px) {
  .stats-row { gap: 32px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* scroll offset for sticky nav */
.section, .anchor, .section-anchor { scroll-margin-top: 92px; }
.section-anchor { display: block; height: 0; }

/* ============================================================
   Produktseiten (PowerPoint, Roll-up, Video, Landingpage):
   eigenständiges Design, kein Problem/Lösung-Aufbau wie die
   Leistungsseiten – ein visuell starker, monochromer Verlauf,
   der oben in der jeweiligen Medien-Akzentfarbe startet und nach
   unten in Schwarz ausläuft. Herkunft: Konzept-Variante 6.
   Jede Produktseite trägt zusätzlich zu "produktseite" eine
   Farbvariante-Klasse (produktseite--magenta/--violet/--gold/--cyan),
   die Verlauf und Highlight-Textfarbe festlegt; alles andere
   (Layout, Karten, CTA) ist gemeinsam.
   ============================================================ */
.produktseite .site-footer { background: transparent; }

/* PowerPoint – Magenta */
body.produktseite--magenta {
  background: linear-gradient(180deg, #fff400 0%, #fff400 14%, #431022 38%, #240b14 62%, #120a0c 84%, #0a0a0c 100%);
}
.produktseite--magenta .produkt-hero .hl { color: #3d0a1f; }

/* Roll-up – Violet */
body.produktseite--violet {
  background: linear-gradient(180deg, #fff400 0%, #fff400 14%, #330a39 38%, #1d0920 62%, #110a10 84%, #0a0a0c 100%);
}
.produktseite--violet .produkt-hero .hl { color: #2a0a33; }

/* Video – Emerald */
body.produktseite--emerald {
  background: linear-gradient(180deg, #fff400 0%, #fff400 14%, #0a3b2e 38%, #0a241f 62%, #0a1412 84%, #0a0a0c 100%);
}
.produktseite--emerald .produkt-hero .hl { color: #062a20; }

/* Landingpage – Cyan */
body.produktseite--cyan {
  background: linear-gradient(180deg, #fff400 0%, #fff400 14%, #fff400 38%, #0a2429 62%, #0a1416 84%, #0a0a0c 100%);
}
.produktseite--cyan .produkt-hero .hl { color: #1a1817; }

/* Vortrag 1 – Ember */
body.produktseite--ember {
  background: linear-gradient(180deg, #F0603A 0%, #8a3018 14%, #471a0f 38%, #261210 62%, #120e0c 84%, #0a0a0c 100%);
}
.produktseite--ember .produkt-hero .hl { color: #3d1408; }

/* Vortrag 2 – Blau */
body.produktseite--blau {
  background: linear-gradient(180deg, #063755 0%, #042a41 14%, #03192a 38%, #03121d 62%, #020c14 84%, #0a0a0c 100%);
}
.produktseite--blau .produkt-hero .hl { color: #021620; }

/* Vortrag 3 – Lime */
body.produktseite--lime {
  background: linear-gradient(180deg, #A3E635 0%, #6b9422 14%, #33480f 38%, #1d270c 62%, #120f0a 84%, #0a0a0c 100%);
}
.produktseite--lime .produkt-hero .hl { color: #1c2b0e; }

/* Moderation deines Workshops – Blau */
body.produktseite--indigo {
  background: linear-gradient(180deg, #063755 0%, #042a41 14%, #03192a 38%, #03121d 62%, #020c14 84%, #0a0a0c 100%);
}
.produktseite--indigo .produkt-hero .hl { color: #021620; }

/* sofort sichtbar – Plum/Steel-Blue Duoton */
body.produktseite--sofortsichtbar {
  background: linear-gradient(180deg, #663A66 0%, #534b79 18%, #405C8D 36%, #223050 56%, #14151c 80%, #0a0a0c 100%);
}
.produktseite--sofortsichtbar .produkt-hero .hl { color: #2a1830; }

.produkt-hero { padding-block: clamp(90px, 12vw, 150px); color: #fff; }
.produkt-hero .kicker { color: rgba(255,255,255,.8); }
.produkt-hero h1 { color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.8rem); max-width: 16ch; }
.produkt-hero .hl { background-image: linear-gradient(#fff, #fff); }
.produkt-hero p.lead { color: rgba(255,255,255,.82); max-width: 44ch; margin-top: 1.1rem; }
.produkt-hero-lead-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px;
  max-width: 1080px; margin-top: 1.1rem;
}
.produkt-hero-lead-cols p.lead { margin-top: 0; max-width: none; }
.produkt-hero-lead-cols--single { grid-template-columns: 1fr; gap: 1.1rem; max-width: 44ch; }
@media (max-width: 760px) {
  .produkt-hero-lead-cols { grid-template-columns: 1fr; gap: 0.85rem; }
}
.produkt-hero .btn--dark { background: #fff; color: #0a0a0c; margin-top: 2rem; }
.produkt-hero-lead-full { margin-top: clamp(28px, 4vw, 46px); }
.produkt-hero-lead-full .produkt-hero-lead-cols { margin-top: 0; }
.produkt-hero-lead-full .produkt-pills { justify-content: center; margin-top: clamp(22px, 3vw, 34px); }

/* Hero-Variante: Bild rechts neben der Headline (oben ausgerichtet statt vertikal
   zentriert), darunter über die volle Breite zwei eigenständige Textkästen — links
   unter der Headline, rechts unter dem Bild (z.B. Marketing as a Service). */
.produkt-hero-image-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "head visual" "textleft textright";
  column-gap: clamp(36px, 6vw, 90px);
  row-gap: clamp(28px, 4vw, 46px);
  align-items: center;
}
.produkt-hero-image-head { grid-area: head; }
.produkt-hero-image-visual { grid-area: visual; margin-top: 0; }
.produkt-hero-image-text { grid-area: textleft; }
.produkt-hero-image-text--right { grid-area: textright; }
.produkt-hero-image-text p.lead { max-width: none; margin-top: 0; }
.produkt-hero-image-text p.lead + p.lead { margin-top: .85rem; }
.produkt-hero-image-pills { display: flex; justify-content: center; margin-top: clamp(22px, 3vw, 34px); }
.produkt-hero-image-pills .produkt-pills { justify-content: center; margin-top: 0; }
@media (max-width: 900px) {
  .produkt-hero-image-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "visual" "textleft" "textright";
  }
}

/* Hero-Variante mit Portraitfoto rechts neben dem Text (z.B. 1:1 Sparring) */
.produkt-hero-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "text  photo"
    "cta   .";
  column-gap: clamp(32px, 6vw, 90px);
  row-gap: 32px;
}
.produkt-hero-split-text { grid-area: text; }
.produkt-hero-split-cta { grid-area: cta; }
.produkt-hero-split-text .produkt-hero-lead-cols {
  display: flex; flex-direction: column; gap: 1.1rem; max-width: 48ch;
}
.produkt-hero-split-text .produkt-hero-lead-cols p.lead { max-width: none; margin-top: 0; }
.produkt-hero-split-photo { grid-area: photo; position: relative; }
.produkt-hero-photo-img {
  position: absolute; right: 0; bottom: 0;
  width: clamp(390px, 47vw, 642px); max-width: none; height: auto; display: block;
  opacity: .6;
}
.produkt-hero-photo-pills {
  position: absolute; right: 0; bottom: 30px; max-width: 66%; z-index: 2;
}
.produkt-hero-photo-pills .produkt-pills { margin-top: 0; justify-content: flex-end; }
@media (max-width: 900px) {
  .produkt-hero-split-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "text" "cta";
    row-gap: 20px;
  }
  .produkt-hero-split-photo { position: static; max-width: 240px; margin: 0 auto; }
  .produkt-hero-photo-img { position: static; width: 100%; max-width: 240px; }
  .produkt-hero-photo-pills { position: static; max-width: none; margin-top: 14px; }
  .produkt-hero-photo-pills .produkt-pills { justify-content: flex-start; }
}
.produkt-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.3rem; }
.produkt-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.hero-stat {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 2rem;
  padding: 12px 22px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.4);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.hero-stat-icon { flex: 0 0 auto; width: 24px; height: 24px; color: #fff; }
.hero-stat-num { font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; color: #fff; line-height: 1; }
.hero-stat-label { font-family: var(--font-sans); font-size: .8rem; color: rgba(255,255,255,.8); line-height: 1.25; max-width: 150px; }
.produkt-pill {
  display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: .78rem;
  letter-spacing: .02em;
}

.produkt-mock {
  margin-top: clamp(48px, 6vw, 88px); border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  box-shadow: 0 40px 100px rgba(0,0,0,.35);
  aspect-ratio: 16/8; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); font-family: var(--font-sans); font-size: .85rem;
  transition: transform .4s ease, box-shadow .4s ease;
}
.produkt-mock:hover { transform: translateY(-4px); box-shadow: 0 50px 120px rgba(0,0,0,.42); }

/* Default icon-showcase fallback panel (pages without a custom mockup_html) */
.produkt-mock-icon {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
}
.produkt-mock-icon svg {
  width: clamp(72px, 12vw, 128px); height: clamp(72px, 12vw, 128px);
  color: rgba(255,255,255,.85); filter: drop-shadow(0 12px 30px rgba(0,0,0,.3));
}

/* Real-image mockup (Landingpage, Dashboard digitales Marketing, sofort sichtbar) —
   no card, no background, no border: the image stands on its own. */
.produkt-mock-bare {
  margin-top: clamp(48px, 6vw, 88px); display: flex; justify-content: center;
}
.produkt-mock-bare img {
  display: block; width: 100%; max-width: 100%; height: auto;
}

/* Tools-Reihe (KI zum Anfassen) — kein Kasten, keine Karte: die echten Tool-Logos
   stehen frei auf dem Hero-Hintergrund, wie die Real-Image-Mockups oben. */
.tools-row {
  margin-top: clamp(48px, 6vw, 88px);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(28px, 4vw, 52px);
}
.tools-row-item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 84px;
}
.tools-row-icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.tools-row-icon img { width: 100%; height: 100%; object-fit: contain; opacity: .92; }
.tools-row-label {
  font-family: var(--font-sans); font-weight: 600; font-size: .74rem; text-align: center;
  color: rgba(26,24,23,.65); line-height: 1.3;
}
.tools-row--features { margin-top: 0; margin-bottom: clamp(44px, 6vw, 80px); }

/* Dashboard mockup (Paid Ads) */
.produkt-mock--dashboard { aspect-ratio: auto; align-items: stretch; padding: clamp(24px, 4vw, 40px); }
.produkt-dashboard { width: 100%; display: flex; flex-direction: column; gap: 22px; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-kpi {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  min-width: 0;
}
.dash-kpi .val, .dash-kpi .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpi .val { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: #fff; }
.dash-kpi .lbl { font-family: var(--font-sans); font-size: .74rem; color: rgba(255,255,255,.65); }
.dash-bars {
  display: flex; align-items: flex-end; gap: 10px; height: clamp(90px, 12vw, 150px);
  padding: 16px 10px 0; background: rgba(255,255,255,.04); border-radius: 14px;
}
.dash-bar {
  flex: 1; height: var(--h, 30%); border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.35));
}
.dash-caption { margin: 0; font-size: .76rem; color: rgba(255,255,255,.55); font-family: var(--font-sans); }

/* Dashboard-tool mockup (Dashboard digitales Marketing) — slim left nav + line/bar chart */
.produkt-mock--tool { aspect-ratio: auto; align-items: stretch; padding: 0; }
.tool-dash { display: flex; width: 100%; min-height: clamp(280px, 32vw, 440px); }
.tool-dash-nav {
  width: clamp(52px, 6vw, 72px); flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; gap: 16px; padding: 24px 0;
  background: rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.16);
}
.tool-dash-logo { width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,.9); margin-bottom: 10px; }
.tool-dash-nav-item { width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.14); }
.tool-dash-nav-item--active { background: rgba(255,255,255,.85); }
.tool-dash-main {
  flex: 1; padding: clamp(24px, 3.4vw, 40px); display: flex; flex-direction: column;
  gap: clamp(18px, 2.4vw, 28px); justify-content: center;
}
.tool-dash-line { width: 100%; height: clamp(70px, 10vw, 120px); }
.tool-dash-line svg { width: 100%; height: 100%; display: block; }

/* Structure-sketch mockup (Landingpage) — sketched section-by-section blueprint as SVG */
.produkt-mock--structure { aspect-ratio: auto; align-items: stretch; padding: clamp(18px, 3vw, 32px); }
.produkt-mock--structure svg { width: 100%; height: auto; display: block; }

/* Zweigeteiltes Mockup (Dashboard digitales Marketing) — links MacBook mit Dashboard-Fenster,
   rechts Video-Dummy. Kein Kasten, keine Karte: beide stehen frei auf dem Hero-Hintergrund,
   wie die Real-Image-Mockups (.produkt-mock-bare). */
.produkt-mock--split-bare {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: clamp(28px, 4vw, 56px); flex-wrap: wrap;
}
.mock-split-half { flex: 0 1 300px; display: flex; align-items: center; min-width: 220px; max-width: 340px; }
.mock-split-half svg { width: 100%; height: auto; display: block; }

/* Sprint-Landingpage: zweispaltig, ohne umgebenden Kasten — links Timeline, rechts
   hochkant die Struktur-Vorschau als eigene Karte */
.sprint-showcase {
  margin-top: clamp(48px, 6vw, 88px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(36px, 4.6vw, 60px); align-items: start;
}
.sprint-timeline { width: 100%; }
.sprint-step { display: flex; gap: clamp(20px, 2.6vw, 28px); position: relative; padding-bottom: clamp(38px, 5vw, 52px); }
.sprint-step:last-child { padding-bottom: 0; }
.sprint-step:not(:last-child)::before {
  content: ''; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px;
  background: rgba(255,255,255,.25);
}
.sprint-step-marker {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; color: #fff;
  position: relative; z-index: 1;
}
.sprint-step-body { flex: 1 1 auto; min-width: 0; padding-top: 8px; }
.sprint-step-body h4 { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.6rem); color: #fff; }
.sprint-step-meta { margin: 0; font-family: var(--font-sans); font-size: 1rem; color: rgba(255,255,255,.65); }
.sprint-substeps { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.sprint-substep { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.sprint-substep-tag {
  flex: 0 0 auto; font-family: var(--font-sans); font-weight: 700; font-size: .86rem;
  color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px; padding: 5px 14px; letter-spacing: .02em;
}
.sprint-substep p { margin: 0; font-family: var(--font-sans); font-size: 1rem; color: rgba(255,255,255,.8); line-height: 1.55; }

.sprint-structure-panel { display: flex; }
.sprint-structure-card {
  width: 100%; display: flex; flex-direction: column; appearance: none; -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.2); border-radius: 22px; margin: 0;
  background: rgba(255,255,255,.05); overflow: hidden; cursor: pointer; text-align: left; padding: 0;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
}
.sprint-structure-card:hover { border-color: rgba(255,255,255,.5); transform: translateY(-3px); box-shadow: 0 40px 90px rgba(0,0,0,.36); }
.sprint-structure-thumb { padding: clamp(22px, 2.8vw, 32px); }
.sprint-structure-thumb svg { display: block; width: 100%; height: auto; }
.sprint-structure-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 18px clamp(20px, 2.6vw, 30px); border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
}
.sprint-structure-title { font-family: var(--font-sans); font-weight: 600; font-size: .88rem; color: rgba(255,255,255,.85); }
.sprint-structure-cta.btn--dark { background: #fff; color: #0a0a0c; padding: .55rem 1.1rem; font-size: .82rem; }
@media (max-width: 900px) {
  .sprint-showcase { grid-template-columns: 1fr; }
  .sprint-structure-panel { max-width: 420px; }
}

/* Kompakte Vorschau-Kachel als Hero-Mockup auf den einzelnen Medien-Produktseiten
   (PowerPoint, Landingpage, Roll-up) — bewusst schmal statt bildschirmfüllend,
   Klick auf "Vorschau ansehen" zeigt die Skizze groß im Modal. */
.produkt-hero-preview {
  margin-top: clamp(48px, 6vw, 88px);
  max-width: 380px;
}

/* "Medien, die Ergebnisse liefern": Grid aus drei klickbaren Vorschau-Kacheln
   (gleiche Optik wie .sprint-structure-card), alle exakt gleich groß (Breite wie
   Höhe) — die Grafik füllt die Kachel per SVG-eigenem preserveAspectRatio (voreingestellt
   "xMidYMid meet") und bekommt so automatisch ringsum Luft, unabhängig vom eigenen
   Format (quer bei PowerPoint, hochkant beim Roll-up). Titel, "Vorschau ansehen" und
   "Zur Produktseite" liegen alle INNERHALB der Karte, jeweils in eigener Zeile, damit
   nie etwas umbricht und alle drei Kacheln exakt gleich hoch bleiben. */
.media-boxes-grid {
  margin-top: clamp(36px, 4.6vw, 56px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 34px);
  align-items: stretch;
}
.media-box { display: flex; flex-direction: column; padding: 0; }
.media-box-thumb-btn {
  appearance: none; -webkit-appearance: none; border: none; margin: 0; padding: 0;
  width: 100%; display: block; background: transparent; cursor: pointer;
}
.media-box-thumb {
  height: clamp(230px, 24vw, 300px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 2.6vw, 30px);
}
.media-box-thumb svg { width: 100%; height: 100%; display: block; }
.media-box-footer {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px clamp(20px, 2.6vw, 30px); border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
}
.media-box-title { font-family: var(--font-sans); font-weight: 600; font-size: .92rem; color: rgba(255,255,255,.9); }
.media-box-desc { margin: 0; font-family: var(--font-sans); font-size: .84rem; line-height: 1.55; color: rgba(255,255,255,.66); }
.media-box-actions { display: flex; flex-direction: column; gap: 10px; }
.media-box-actions .btn { width: 100%; text-align: center; }
/* Icon-Variante der Vorschau-Kacheln (Übersichtsseiten Workshops, Digitale Tools, ...):
   großes Icon statt Struktur-Skizze, plus echte Zusammenfassung statt nur Sprungpunkt. */
.media-box-thumb--icon { background: rgba(255,255,255,.05); }
.media-box-thumb--icon svg { width: 40%; height: 40%; color: rgba(255,255,255,.85); }
.media-box--icon .media-box-footer { flex: 1; }
/* CTA-Button immer unten am Kasten, egal wie viele Zeilen der Beschreibungstext
   darüber braucht – sonst springt er je nach Textlänge auf unterschiedliche Höhen. */
.media-box-footer .sprint-structure-cta { margin-top: auto; }
/* Mock-Variante: zeigt die ECHTE Hero-Grafik der Unterseite (statt Icon oder neuer
   Skizze), verkleinert auf Kachel-Größe. !important überschreibt bewusst die
   Hero-eigenen max-width-Regeln der jeweiligen Mock-Wrapper-Klasse. */
.media-box-thumb--mock { overflow: hidden; }
.media-box-thumb--mock > div { max-width: 82% !important; width: 82% !important; margin: 0 auto !important; }
.media-box-thumb--mock img { width: 100% !important; height: auto !important; }
/* Foto-Variante (z.B. Daniel bei 1:1 Sparring): am unteren Kachelrand ausgerichtet,
   damit die Person quasi auf dem dunkleren Footer-Streifen der Kachel steht. */
.media-box-thumb--photo { align-items: flex-end; justify-content: center; padding-bottom: 0; overflow: hidden; }
.media-box-thumb--photo img {
  width: auto; height: 110%; max-width: 100%; display: block; object-fit: contain; object-position: bottom;
  filter: grayscale(1); opacity: .6;
}
@media (max-width: 900px) {
  /* !important nötig, weil die Spaltenzahl/max-width auf dieser Klasse öfter
     inline pro Seite gesetzt wird (je nach Kachel-Anzahl) - Inline-Styles
     würden diese Mobile-Regel sonst immer überschreiben und die Kacheln
     blieben nebeneinander (extrem schmal & hoch) statt untereinander. */
  .media-boxes-grid { grid-template-columns: 1fr !important; max-width: 420px !important; margin-left: auto; margin-right: auto; }
}

/* Layout-Varianten für die "Unsere Medien"-Kacheln – ausschließlich zur Auswahl auf
   der Produktseite Marketing eingesetzt (media_boxes_variants=True), keine anderen
   Seiten verwenden diese Klassen. */
.media-variant-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 14px;
}
.media-boxes-grid--2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.media-boxes-grid--stacked {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.media-box--wide-row {
  flex-direction: row;
  align-items: stretch;
}
.media-box--wide-row .media-box-thumb {
  width: 38%;
  height: auto;
  flex-shrink: 0;
}
.media-box--wide-row .media-box-footer {
  flex: 1;
  justify-content: center;
  border-top: none;
  border-left: 1px solid rgba(255,255,255,.14);
}
.media-boxes-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 34px);
  max-width: 1040px;
  margin: clamp(36px, 4.6vw, 56px) auto 0;
  align-items: stretch;
}
.media-box--bento-lg {
  grid-column: span 3;
}
.media-box--bento-lg .media-box-thumb {
  height: clamp(260px, 26vw, 340px);
}
@media (max-width: 900px) {
  .media-boxes-grid--2x2, .media-boxes-bento { grid-template-columns: 1fr !important; max-width: 420px !important; margin-left: auto; margin-right: auto; }
  .media-box--wide-row { flex-direction: column; }
  .media-box--wide-row .media-box-thumb { width: 100%; }
  .media-box--wide-row .media-box-footer { border-left: none; border-top: 1px solid rgba(255,255,255,.14); }
}

/* Struktur-Vorschau-Modal (reuses .modal-overlay / .modal-wrap / .modal-close, Muster wie modal--pdf).
   Breite wird je nach Seitenverhältnis der jeweiligen Grafik inline gesetzt
   (width: min(90vw, calc(78vh * Breite/Höhe))) — Standardwert hier ist die
   Landingpage-Struktur (880/1092), damit Sprint Landingpage unverändert bleibt. */
/* Breite an die normale Content-Spalte gekoppelt (.container = 1240px), statt an
   die volle Fensterbreite — sonst wirkt der Kasten bei den Preis-Paketen so, als
   würde er über die Ränder der Karten hinausragen. */
.modal-wrap--structure { max-width: min(94vw, 1240px); }
.modal.modal--structure {
  max-width: min(94vw, 1240px); max-height: 84vh; padding: clamp(24px, 3.4vw, 48px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: linear-gradient(160deg, #1c2a38, #10151d);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.modal-structure-frame { width: min(90vw, calc(66vh * 0.8059)); aspect-ratio: 880 / 1092; }
.modal-structure-frame svg { display: block; width: 100%; height: 100%; }
.modal-structure-layout {
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap; max-width: 100%;
}
.modal-structure-note {
  max-width: 260px; color: rgba(255,255,255,.75); font-family: var(--font-sans);
  font-size: .85rem; line-height: 1.65; margin: 0;
}
.modal-structure-note-wrap { max-width: 260px; position: relative; top: -25px; }
.modal-structure-note-wrap .modal-structure-note { max-width: none; }
.modal-structure-note-wrap .modal-structure-note + .modal-structure-note { margin-top: 1em; }
/* Gestapelte Variante: Grafik oben (größer), Text darunter über die volle Breite
   der Grafik — statt nebeneinander, damit die Grafik selbst mehr Raum bekommt
   und der Kasten insgesamt schmaler, aber höher wird (z.B. Rundum-Betreuung-Ablauf). */
.modal-structure-layout--stacked { flex-direction: column; align-items: center; }
.modal-structure-layout--stacked .modal-structure-note {
  max-width: inherit; text-align: left; margin-top: clamp(14px, 2.2vw, 22px);
}
/* Kopfzeile (Headline + optionale Subheadline) über der Grafik, damit sofort
   klar ist, worum es in dem aufgeklappten Kasten geht. */
.modal-structure-head { text-align: center; max-width: 640px; margin: 0 0 clamp(16px, 2.4vw, 26px); }
.modal-structure-head h3 {
  font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: #fff; margin: 0 0 6px;
}
.modal-structure-head p { margin: 0; color: rgba(255,255,255,.6); font-size: .92rem; line-height: 1.5; }

/* Übersichtsseiten-Popups (Workshops, Digitale Tools, Marketing, ...): zeigen die
   ECHTE Hero-Grafik der jeweiligen Unterseite groß, statt einer neuen Skizze. Der
   Farbverlauf (modal--structure-accent) wird je Seite per Akzentfarbe gesetzt (siehe
   _produkt_clean_style) — Skizzen bleiben weiß auf Farbe, wie das MarketingEcoSystem-
   Diagramm auf der Marketing-as-a-Service-Seite. */
.modal-summary-mock { max-width: 420px; width: 100%; margin: 0 auto clamp(18px, 2.6vw, 28px); }
.modal-summary-mock--icon { max-width: 140px; opacity: .9; }
.modal-summary-mock--icon svg { width: 100%; height: 100%; color: rgba(255,255,255,.85); }
.modal-summary-mock img { width: 100%; height: auto; display: block; border-radius: 12px; }
.modal.modal--structure-accent { box-shadow: 0 30px 80px rgba(0,0,0,.4); }

/* Erklärungs-Buttons unter dem MarketingEcoSystem-Diagramm */
.mes-explainer-buttons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px;
}
.mes-explainer-buttons--left { justify-content: flex-start; }

/* Kontaktformular-Modal (Sprint Landingpage, reuses .modal-overlay/.modal-wrap/.modal-close via #formModalOverlay) */
.modal--form .form-intro { margin: 0 0 1.6rem; color: var(--ink-2); line-height: 1.65; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label, .form-full {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: var(--ink-2);
}
.contact-form input {
  width: 100%; min-width: 0; max-width: 100%;
  font-family: var(--font-sans); font-size: .95rem; font-weight: 400; color: var(--ink);
  padding: 12px 14px; border-radius: 10px; border: 1.5px solid #e2e2e2; background: #fff;
  transition: border-color .2s ease;
}
.contact-form input:focus { outline: none; border-color: var(--ink); }
.form-submit { margin-top: 6px; width: 100%; justify-content: center; }
.form-note { margin: 10px 0 0; font-size: .78rem; color: var(--ink-2); text-align: center; }
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

.produkt-grid { padding-block: clamp(50px, 7vw, 100px); }
.produkt-price-note { padding-top: 0; }
.price-note-card {
  position: relative;
  max-width: 460px; margin: 0 auto;
  padding: clamp(32px, 4.4vw, 44px) clamp(28px, 4vw, 40px) clamp(28px, 3.6vw, 36px);
  border-radius: 24px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
}
.price-note-card--feature {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32);
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
}
.price-note-badge-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.price-note-value {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-bottom: 22px;
}
.price-note-amount { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.4rem); color: #fff; line-height: 1; }
.price-note-unit { margin-top: 9px; font-family: var(--font-sans); font-size: .85rem; color: rgba(255,255,255,.65); max-width: 280px; text-align: center; }
.price-note-detail { margin: 0; font-family: var(--font-sans); font-size: .92rem; line-height: 1.65; color: rgba(255,255,255,.75); text-align: center; }
.price-note-list {
  list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.2);
  display: flex; flex-direction: column; gap: 11px;
}
.price-note-list li {
  font-family: var(--font-sans); font-weight: 500; font-size: .9rem; line-height: 1.5;
  color: rgba(255,255,255,.85); padding-left: 24px; position: relative;
}
.price-note-list li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  border-radius: 50%; background: rgba(255,255,255,.7);
}
.produkt-grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.produkt-glass {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 20px; padding: 34px;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.produkt-glass:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.26); }
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
}
.feature-icon svg { width: 22px; height: 22px; color: #fff; }
.produkt-glass h3 { font-family: var(--font-serif); font-size: 1.2rem; margin: 0 0 .5rem; color: #fff; }
.produkt-glass p { margin: 0; font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.78); }
/* Sonderfall sofort sichtbar: echte Vorschaubilder statt Icons, Bild unten im
   Kasten. Die PNGs sind freigestellt (transparent) - sie brauchen daher keinen
   Rahmen und keine Rundung, sondern muessen auf der Unterkante des Kastens
   stehen. Deshalb padding-bottom:0 am Kasten und margin-top:auto am Bild;
   mit einem festen margin-top schwebten die Bilder vorher im Kasten. */
.sofort-feature-card { display: flex; flex-direction: column; padding-bottom: 0; overflow: hidden; }
.sofort-feature-img {
  margin-top: auto; padding-top: 20px; width: 100%; height: auto; display: block;
  border-radius: 0;
}
/* "Das Problem"-Sektion (sofort sichtbar): statt Fließtext ein knapper, dunkler
   Zitat-Kasten mit kurzen, pointierten Zeilen (gleiche Bildsprache wie der
   "Problem"-Kasten auf der Startseite), plus der bestehende .usp-highlight-Baustein
   für den wichtigsten Punkt (Vertriebsstrategie 1:1 in digitale Kanäle). */
.problem-quote-card {
  margin: 22px 0; padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px);
  background: #141216; border-radius: var(--radius-card, 20px);
}
.problem-quote-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.problem-quote-card li {
  position: relative; padding-left: 26px;
  font-family: var(--font-sans); font-size: .98rem; line-height: 1.55; color: rgba(255,255,255,.92);
}
.problem-quote-card li::before { content: "—"; position: absolute; left: 0; color: #1a1817; font-weight: 700; }
.problem-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
/* Skizze frei ohne Kasten, wie in den Headern – bare_sketch übernimmt bereits die
   Invertierung auf hellen "clean"-Seiten, hier nur zentriert und etwas größer. */
.vorschau-split-card--sketch { display: flex; align-items: center; justify-content: center; max-width: 520px; }
.vorschau-split-card--sketch .produkt-mock-sketch { width: 100%; }
.produkt-cta { padding-block: clamp(60px, 8vw, 110px); text-align: center; }
.produkt-cta h2 {
  color: #fff; font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 20ch; margin: 0 auto 1.4rem;
}
.produkt-cta .btn--dark { background: #fff; color: #0a0a0c; }
.produkt-cta-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
}
.btn--outline { background: transparent; color: #fff; border-color: #fff; }
.btn--outline:hover { transform: translateY(-2px); background: #fff; color: #0a0a0c; }

/* Pricing */
.produkt-pricing-grid { align-items: stretch; }
.pricing-footnote {
  margin: 28px auto 0; max-width: 680px; text-align: center;
  font-family: var(--font-sans); font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,.6);
}
.price-card { display: flex; flex-direction: column; position: relative; }
.price-card--featured { background: rgba(255,255,255,.1); border-color: rgba(26,24,23,.32); }
.price-badge-slot { min-height: 26px; margin-bottom: 14px; }
.price-badge {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); color: #fff;
  font-family: var(--font-sans); font-weight: 700;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
}
.price-card h3 { font-weight: 700; min-height: 2.8em; line-height: 1.35; }
.price-name-sub {
  display: block; margin-top: 3px; font-family: var(--font-serif);
  font-weight: 500; font-size: 1em; color: rgba(255,255,255,.78);
}
.price-desc { min-height: 3.2em; margin: 0; color: rgba(255,255,255,.85); }
.price-desc--fixed2 {
  height: 3.2em; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.price-value { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 2px; }
.price-amount { font-family: var(--font-serif); font-weight: 700; font-size: 2.1rem; color: #fff; }
.price-unit { font-family: var(--font-sans); font-weight: 400; font-size: .85rem; color: rgba(255,255,255,.8); }
.price-note { font-size: .78rem; line-height: 1.6; min-height: 2.56em; font-weight: 400; color: rgba(255,255,255,.7); }
/* Höhere Spezifität als ".produkt-glass p" nötig (sonst gewinnt dessen "margin:0" und der
   Abstand zwischen Preis-Hinweistext und der grauen Trennlinie darunter fällt weg) — deshalb
   hier über ".price-card .price-note" statt nur ".price-note" gesetzt. Gleicher Wert wie
   .price-features padding-top, damit der Abstand vor UND nach der Linie identisch ist. */
.price-card .price-note { margin: 0 0 18px; }
.price-features {
  list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.24);
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.price-features li {
  font-family: var(--font-sans); font-weight: 500;
  font-size: .88rem; line-height: 1.5; color: #fff; padding-left: 22px; position: relative;
}
.price-features li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  border-radius: 50%; background: rgba(255,255,255,.7);
}
.price-more-btn { align-self: center; margin-top: 30px; }
/* Abschluss-Satz ("ideal für...") als eigene, farblich abgesetzte Fußzeile am Kastenende —
   bleedet bis an den Kastenrand (negative margin = Karten-Padding von .produkt-glass, 34px),
   analog zum footer-Streifen der Medien-Kacheln. Mehr Abstand zum CTA-Button darüber, damit
   beides klar getrennt wirkt. */
.price-ideal-band {
  margin: 34px -34px -34px; padding: 20px 34px;
  border-radius: 0 0 20px 20px;
  background: rgba(255,255,255,.06);
}
.price-ideal {
  margin: 0; text-align: center; font-family: var(--font-sans);
  font-weight: 700; font-size: .86rem; line-height: 1.5; color: #fff;
}

/* Mögliche Themen (einzelne Glass-Card mit zweispaltiger Checkliste) */
.topics-card { padding: 40px clamp(28px, 4vw, 48px); }
.topics-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px;
}
.topics-list li {
  font-family: var(--font-sans); font-weight: 500; font-size: .95rem; line-height: 1.55;
  color: #fff; padding-left: 26px; position: relative;
}
.topics-list li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: rgba(255,255,255,.7);
}
@media (max-width: 700px) {
  .topics-list { grid-template-columns: 1fr; }
}

/* Themen-Sektion: Vergleichsvarianten (temporär, zur Auswahl) */
.tc-card { padding: 32px clamp(24px, 4vw, 44px); }
.tc-option { margin-top: 44px; }
.tc-option:first-child { margin-top: 0; }
.tc-option-label {
  font-family: var(--font-sans); font-weight: 700; font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--grey-70); margin: 0 0 14px;
}
.tc-intro { margin: 0 0 24px; color: var(--grey-70); font-size: .95rem; line-height: 1.65; max-width: 72ch; }
.tc-occ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.tc-occ-card { background: var(--grey-bg); border: 1px solid #e7e2df; border-radius: 14px; padding: 16px; }
.tc-occ-icon { color: var(--ink); margin-bottom: 10px; }
.tc-occ-title { font-family: var(--font-sans); font-weight: 700; font-size: .85rem; margin: 0 0 4px; color: var(--ink); }
.tc-occ-desc { font-family: var(--font-sans); font-size: .78rem; line-height: 1.4; color: var(--grey-70); margin: 0; }
.tc-chip-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.tc-chip {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px;
  background: var(--grey-bg); border: 1px solid #e7e2df; font-family: var(--font-sans);
  font-size: .82rem; font-weight: 600; color: var(--ink);
}
.tc-chip--more { font-style: italic; color: var(--grey-70); font-weight: 500; }
.tc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.tc-split-head {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem;
  color: var(--ink); margin: 0 0 26px;
}
.tc-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ece9e5;
  font-family: var(--font-sans); font-size: .92rem; color: var(--ink); font-weight: 600;
}
.tc-row:last-child { border-bottom: none; }
.tc-row-icon { flex: 0 0 auto; color: var(--grey-70); }
.tc-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tc-check-list li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: .92rem; color: var(--ink); line-height: 1.4; }
.tc-check-list li svg { flex: 0 0 auto; margin-top: 2px; color: var(--grey-70); }
.tc-check-more { font-style: italic; color: var(--grey-70); }
.tc-flow { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 28px; position: relative; }
.tc-flow::before { content: ""; position: absolute; top: 24px; left: 6%; right: 6%; height: 1px; background: #e7e2df; z-index: 0; }
.tc-flow-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; gap: 8px; }
.tc-flow-icon {
  width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid #e7e2df;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.tc-flow-title { font-family: var(--font-sans); font-size: .78rem; font-weight: 600; color: var(--ink); margin: 0; max-width: 110px; }
.tc-topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tc-grid-card { background: var(--grey-bg); border: 1px solid #e7e2df; border-radius: 12px; padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px; }
.tc-grid-card svg { flex: 0 0 auto; margin-top: 2px; color: var(--grey-70); }
.tc-grid-card p { margin: 0; font-family: var(--font-sans); font-size: .85rem; color: var(--ink); line-height: 1.4; }
.tc-grid-card--more p { font-style: italic; color: var(--grey-70); }
@media (max-width: 760px) {
  .tc-occ-grid { grid-template-columns: repeat(2, 1fr); }
  .tc-split { grid-template-columns: 1fr; gap: 28px; }
  .tc-flow { flex-wrap: wrap; }
  .tc-flow::before { display: none; }
  .tc-topic-grid { grid-template-columns: 1fr 1fr; }
}

/* Section-Kopf (Kicker + Headline + Sub), wiederverwendet vor Vorteile,
   Prozess, Team und FAQ */
/* Zweispaltige Vorschau-Sektion (z.B. "Erfolgsfaktor" auf der Sprint-Landingpage):
   links Text + Fakten-Checkliste, rechts die farbige Vorschau-Karte. */
.vorschau-split-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center;
}
/* Wie bei .produkt-section-head: der Kicker ist ein <p> und faengt sich
   sonst die Absatzregel dieser Spalte ein. */
.vorschau-split-text .kicker { color: rgba(255,255,255,.75); font-size: 1rem; }
.vorschau-split-text h2 {
  font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: #fff; margin: .5rem 0 1rem;
}
.vorschau-split-text p { color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.65; margin: 0 0 1em; }
.vorschau-facts-list {
  list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-direction: column; gap: 13px;
}
.vorschau-facts-list li {
  font-family: var(--font-sans); font-weight: 500; font-size: .92rem; line-height: 1.55;
  color: #fff; padding-left: 26px; position: relative;
}
.vorschau-facts-list li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  border-radius: 50%; background: rgba(255,255,255,.7);
}
.vorschau-split-card { max-width: 460px; margin: 0 auto; width: 100%; }
/* Einzelne, bewusst helle Ausnahme von der sonst vollfarbigen Vorschau-Karte
   (z.B. "Dein Dashboard im Gesamtzusammenhang"), damit nicht zu viele voll-
   flächig farbige Kästen hintereinander auf einer Seite stehen: weißer
   Hauptkasten, dezenter grauer CTA, Skizze in Grautönen statt Weiß-auf-Farbe. */
.vorschau-split-card--light .sprint-structure-card {
  background: #fff !important; border: 1px solid #e7e2df !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.08) !important;
}
.vorschau-split-card--light .media-box-footer,
.vorschau-split-card--light .sprint-structure-footer {
  background: #f4f2ef !important; border-top: 1px solid #e7e2df !important;
}
.vorschau-split-card--light .media-box-title,
.vorschau-split-card--light .sprint-structure-title { color: var(--ink) !important; }
.vorschau-split-card--light .sprint-structure-cta.btn--dark {
  background: #e5e1dc !important; border-color: #e5e1dc !important; color: var(--ink) !important;
}
.vorschau-split-card--light .media-box-thumb svg { filter: invert(1); }
@media (max-width: 900px) {
  .vorschau-split-grid { grid-template-columns: 1fr; }
  .vorschau-split-card { max-width: 420px; }
}

.produkt-section-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.produkt-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.produkt-section-head--center p { margin-left: auto; margin-right: auto; }
/* Der Kicker ist ein <p> und faengt sich sonst die Absatzregel direkt
   darunter ein - die ist spezifischer als .kicker und setzt ihn auf
   .95rem. Dadurch standen die Abschnitts-Kicker auf allen Produktseiten
   eine Stufe kleiner als der Kicker im Aufmacher und in der Kontaktsektion
   derselben Seite. Groesse hier zurueckholen. */
.produkt-section-head .kicker { color: rgba(255,255,255,.75); font-size: 1rem; }
.produkt-section-head h2 {
  font-family: var(--font-serif); font-weight: 700; color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 24ch; margin: .3rem 0 0;
}
.produkt-section-head p { color: rgba(255,255,255,.78); max-width: 54ch; margin-top: .7rem; font-size: .95rem; line-height: 1.65; }

.produkt-section { padding-block: clamp(50px, 7vw, 100px); }

/* Separat hervorgehobener USP-Bereich (z.B. "Umsetzungsturbo" auf 1:1 Sparring):
   volle Breite, dezenter grauer Hintergrund wie die Problem-Sektion auf der
   Startseite (.section--grey) — kein abgekasteltes Kartenmodul. */
.usp-turbo-section { background: var(--grey-bg); }
.usp-turbo-head {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.usp-turbo-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.usp-turbo-head .kicker { margin: 0; }
.usp-turbo-head h2 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem); margin: .3rem 0 0;
}
.usp-turbo-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px); max-width: 980px;
}
.usp-turbo-col p { font-size: 1rem; line-height: 1.7; }
.usp-turbo-col p + p { margin-top: .9rem; }
.usp-turbo-col .tc-check-list { margin-top: 1rem; }
@media (max-width: 700px) {
  .usp-turbo-cols { grid-template-columns: 1fr; }
}

/* Vergleich-Bild: klassische Agentur vs. sofort sichtbar (Monate werden zu Tagen).
   1:1 an die Sektion "Warum keine Agentur?" auf sofortsichtbar.de angelehnt (Struktur,
   Ausrichtung und Proportionen anhand der Original-DOM/CSS-Werte nachgebaut), nur
   farblich an unser eigenes Violett angepasst statt 1:1 übernommen.
   WICHTIG für die Ausrichtung: .vergleich-timeline UND die --outline-Variante brauchen
   exakt dasselbe padding, sonst startet die "Auftragsklärung"-Pille in Zeile 2 (mit
   Rahmen) weiter rechts als die in Zeile 1 (ohne Rahmen) – genau das war der Bug. Und
   die Pillen dürfen nicht per flex:1 gestreckt werden (sonst füllt eine einzelne Pille,
   wie "Auftragsklärung" in Zeile 2, die ganze verfügbare Breite aus) – sie sitzen im
   Original alle nur so breit wie ihr Text plus Innenabstand. */
.vergleich-bild {
  margin-top: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(36px, 5vw, 56px);
  display: flex; flex-direction: column; gap: clamp(14px, 2vw, 16px);
  padding: clamp(20px, 3vw, 32px);
  background: #211d24; border-radius: 28px;
}
.vergleich-row { display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 2vw, 20px); }
.vergleich-label {
  flex: 0 0 clamp(84px, 11vw, 112px);
  font-family: var(--font-sans); font-weight: 700; font-size: .82rem; line-height: 1.3; text-align: center;
  color: #fff;
}
.vergleich-label--brand { color: #fff; }
.vergleich-label-logo { display: block; width: 100%; max-width: 62px; height: auto; margin: 0 auto; }
.vergleich-timeline {
  flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(0,0,0,.4); border: 1px solid transparent; border-radius: 16px;
  padding: clamp(10px, 1.6vw, 16px);
}
.vergleich-timeline--outline { border-color: rgba(255,255,255,.22); }
.vergleich-pill {
  flex: 0 1 auto; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 10px 20px;
  background: rgba(255,255,255,.07); border-radius: 12px;
  font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.92);
  white-space: nowrap;
}
/* Zeile "klassische Agentur" (ohne --outline): die 4 grauen Kästen sollen die volle
   Kastenbreite gleichmäßig ausfüllen (statt sich nur auf ihren Text zu beschränken),
   damit die Rakete an den rechten Rand rutscht und links/rechts gleich viel Rand bleibt.
   Die outline-Zeile (sofort sichtbar) bleibt bewusst unverändert kompakt. Nur ab 701px,
   damit das mobile Wrap-Layout weiter unten (2 Spalten je Zeile) unverändert bleibt. */
@media (min-width: 701px) {
  .vergleich-timeline:not(.vergleich-timeline--outline) .vergleich-pill {
    flex: 1 1 0; white-space: normal;
  }
  /* Kernaussage der Grafik: "Online, bevor eine klassische Agentur die
     Auftragsklaerung abgeschlossen hat." Dann darf die Pille in der
     sofort-sichtbar-Zeile nicht genauso breit sein wie die gleichnamige in
     der Agentur-Zeile - sonst sagt das Bild das Gegenteil. Kleinere Schrift
     und engeres Padding machen sie sichtbar kuerzer. */
  .vergleich-timeline--outline .vergleich-pill {
    flex: 0 0 auto; max-width: 132px; padding: 10px 12px; font-size: .72rem;
  }
}
.vergleich-rocket {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(172deg, #fff400, #fff400);
  border: 1.5px solid rgba(26,24,23,.28);
}
.vergleich-rocket svg { color: #1a1817; }
.vergleich-bonus {
  flex: 0 1 auto; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px; white-space: nowrap;
  font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: #fff;
}
.vergleich-bonus svg { flex: 0 0 auto; color: rgba(255,255,255,.85); }
@media (max-width: 700px) {
  .vergleich-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vergleich-timeline { width: 100%; }
  .vergleich-pill { flex: 1 1 calc(50% - 8px); font-size: .72rem; white-space: normal; }
  .vergleich-bonus { flex: 1 1 100%; white-space: normal; text-align: center; }
}

/* Prozess-Schritte */
.produkt-process-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.produkt-process-step {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px; padding: 28px 24px;
  transition: transform .3s ease, background .3s ease;
}
.produkt-process-step:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); }
.produkt-process-step .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  font-family: var(--font-sans); font-weight: 600; font-size: .85rem;
  margin-bottom: 16px;
}
.produkt-process-step h3 { font-family: var(--font-serif); font-size: 1.05rem; color: #fff; margin: 0 0 .5rem; }
.produkt-process-step p { margin: 0; font-size: .85rem; line-height: 1.6; color: rgba(255,255,255,.75); }

/* Team / direkter Draht (kombiniert mit finalem CTA, siehe .produkt-team-cta) */
.produkt-team-text {
  max-width: 640px; font-size: 1.05rem; line-height: 1.7;
  color: rgba(255,255,255,.88); font-family: var(--font-serif);
}
.produkt-team-cta { padding-top: clamp(60px, 8vw, 110px); }
.produkt-team-cta .kicker { color: #fff; }
.produkt-team-cta-sub {
  margin: 0 auto clamp(36px, 5vw, 56px); max-width: 46ch;
  font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.78);
}
.ansprechpartner-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(32px, 5vw, 56px); margin-bottom: clamp(40px, 5vw, 60px);
}
.ansprechpartner-card { display: flex; flex-direction: column; align-items: center; text-align: center; width: 168px; }
.ansprechpartner-photo {
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255,255,255,.85); box-shadow: 0 14px 30px rgba(0,0,0,.28);
  margin-bottom: 16px;
}
.ansprechpartner-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ansprechpartner-name { margin: 0 0 4px; font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; color: #fff; }
.ansprechpartner-role { margin: 0; font-family: var(--font-sans); font-size: .85rem; color: rgba(255,255,255,.6); line-height: 1.4; }

/* FAQ */
.produkt-faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.produkt-faq-item {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; padding: 4px 22px;
  transition: background .3s ease, border-color .3s ease;
}
.produkt-faq-item:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.produkt-faq-item summary {
  cursor: pointer; padding: 18px 0; font-family: var(--font-sans); font-weight: 600;
  color: #fff; font-size: .98rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.produkt-faq-item summary::-webkit-details-marker { display: none; }
.produkt-faq-item summary::after {
  content: "+"; font-size: 1.3rem; font-weight: 400; color: rgba(255,255,255,.6);
  transition: transform .2s ease; flex: 0 0 auto;
}
.produkt-faq-item[open] summary::after { transform: rotate(45deg); }
.produkt-faq-item p { margin: 0 0 20px; font-size: .9rem; line-height: 1.65; color: rgba(255,255,255,.75); }

@media (max-width: 760px) {
  .produkt-grid-cards { grid-template-columns: 1fr; }
  .produkt-process-list { grid-template-columns: 1fr; }
  .dash-kpis { grid-template-columns: 1fr; }
}

/* ============ Kontakt-Standalone (eigene Seite, eigener Look) ============ */
.kontakt-page .site-header { border-color: rgba(0,0,0,.08); }
.kontakt-standalone {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: 0;
  background: #fff;
}
.kontakt-standalone-top {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(32px, 5vw, 64px); align-items: start;
  padding-bottom: clamp(52px, 7vw, 92px);
}
.kontakt-standalone-text .kicker { color: var(--brand-gold); }
.kontakt-standalone-text h1, .kontakt-standalone-text h2 {
  font-size: clamp(3rem, 7.2vw, 6.2rem); font-weight: 500; letter-spacing: -0.015em;
  line-height: 1.22; margin: .5rem 0 1.1rem; color: var(--ink);
}
.kontakt-standalone-text .lead {
  max-width: 46ch; font-size: 1.08rem; line-height: 1.65; color: var(--ink-2); margin: 0 0 1rem;
}
.kontakt-standalone-note {
  max-width: 46ch; margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: .98rem; color: var(--ink);
}
.kontakt-standalone-side { display: flex; flex-direction: column; align-self: start; margin-top: 6.49rem; }
.ks-actions { display: flex; flex-direction: column; gap: 12px; }
.ks-marquee { position: relative; margin-top: 7.04rem; overflow: hidden; }
.ks-marquee::before, .ks-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  z-index: 2;
  pointer-events: none;
}
.ks-marquee::before { left: 0;  background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.ks-marquee::after  { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.ks-marquee .marquee-viewport { overflow: hidden; }
.ks-marquee .marquee-track img { height: 29px; margin-right: 45px; }
.ks-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; border-radius: var(--radius-pill);
  background: var(--black); color: #fff;
  font-family: var(--font-sans); font-weight: 600; font-size: .92rem;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.ks-pill:hover { transform: translateY(-2px); background: #171717; box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.ks-pill--ghost {
  background: transparent; color: var(--ink); border: 1.5px solid rgba(26,24,23,.22);
}
.ks-pill--ghost:hover { background: rgba(26,24,23,.05); box-shadow: none; }
.ks-pill-icon { flex: 0 0 auto; width: 20px; height: 20px; display: flex; }
.ks-pill-icon svg { width: 100%; height: 100%; }
.kontakt-standalone-media {
  position: relative; width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
.ks-media-icon {
  position: absolute; z-index: 0; bottom: -4%;
  width: clamp(220px, 26vw, 400px); height: auto;
  color: rgba(26,24,23,.09);
}
.ks-photo {
  position: relative; z-index: 1;
  width: 36%; min-width: 264px; height: auto; max-width: none; display: block;
}
@media (max-width: 900px) {
  .kontakt-standalone-top { grid-template-columns: minmax(0, 1fr); } /* minmax: Logo-Laufband darf die Spalte nicht auf Tausende Pixel aufblähen */
  .kontakt-standalone-side { align-self: start; margin-top: 1.6rem; }
  .ks-marquee { margin-top: 20px; }
  .kontakt-standalone-text .lead { max-width: none; }
}
@media (max-width: 480px) {
  .ks-pill { font-size: .86rem; padding: 12px 16px; }
}

/* Scroll-reveal (fade + slide-up), progressively enhanced via IntersectionObserver in script.js.
   Without JS support the .reveal class simply has no effect (elements stay visible). */
.js-reveal-ready .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.js-reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Präsentationsseminar: die Leistungsseite "Teams befähigen,
   professionell zu kommunizieren" 1:1 im Produktseiten-Look
   (Farbverlauf, weiße Typografie) – Struktur/Klassen bleiben
   identisch zu leistungen/teams.html, hier werden nur die
   Text-/Rahmenfarben auf das dunkle Produktseiten-Theme gemappt.
   Body trägt zusätzlich zu "produktseite produktseite--violet"
   die Scope-Klasse "ps-leistung".
   ============================================================ */
.ps-leistung .section--grey,
.ps-leistung .section--dark { background: transparent; }
.ps-leistung .kicker { color: rgba(255,255,255,.75); }
.ps-leistung .h-serif { color: #fff; }
.ps-leistung .lead { color: rgba(255,255,255,.82); }

.ps-leistung .video-placeholder { background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.03) 100%); border: 1px solid rgba(255,255,255,.18); }
.ps-leistung .video-placeholder-tag { color: rgba(255,255,255,.75); background: rgba(0,0,0,.4); }

.ps-leistung .pill-divider { color: #fff; }
.ps-leistung .pill-divider .yellow-pill { background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.7); }

.ps-leistung .onboarding-line { background: rgba(255,255,255,.22); }
.ps-leistung .onboarding-step-title { color: #fff; }
.ps-leistung .onboarding-step-duration { color: rgba(255,255,255,.6); }

.ps-leistung .stl-marker::after { background: rgba(255,255,255,.2); }
.ps-leistung .stl-icon { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); }
.ps-leistung .stl-icon:hover { background: var(--brand-gold); border-color: var(--brand-gold); }
.ps-leistung .stufe-content h3 { color: #fff; }
.ps-leistung .stufe-content p { color: rgba(255,255,255,.78); }

.ps-leistung .modul-accordion { border-top-color: rgba(255,255,255,.18); }
.ps-leistung .modul-acc-item { border-bottom-color: rgba(255,255,255,.18); }
.ps-leistung .modul-acc-title { color: #fff; }
.ps-leistung .modul-acc-toggle::before,
.ps-leistung .modul-acc-toggle::after { background: rgba(255,255,255,.85); }
.ps-leistung .modul-acc-body p,
.ps-leistung .modul-acc-list li,
.ps-leistung .modul-acc-result { color: rgba(255,255,255,.78); }
.ps-leistung .modul-acc-result strong { color: #fff; }

.ps-leistung .ratio-seg--c { background: rgba(255,255,255,.16); }
.ps-leistung .ratio-seg--c .ratio-seg-value { color: #fff; }
.ps-leistung .ratio-dot--c { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.ps-leistung .ratio-legend-item { color: rgba(255,255,255,.78); }

.ps-leistung .stufe-pdf-card { border-color: rgba(255,255,255,.2); }
.ps-leistung .stufe-pdf-title { color: rgba(255,255,255,.65); }

.ps-leistung .leadmagnet-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.ps-leistung .leadmagnet-subhead { color: #fff; }
.ps-leistung .leadmagnet-title { color: rgba(255,255,255,.85); }
.ps-leistung .leadmagnet-tag { color: rgba(255,255,255,.5); }

/* Strategie-Seite, Lösung: Text links, anklickbares Strategiemodell rechts
   (schwarze Karte wie der Problem-Kasten, Klick öffnet die Skizze groß im Modal). */
.loesung-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.loesung-modell-card { background: var(--black); border-color: var(--black); }
.loesung-modell-card:hover { border-color: var(--black); }
.loesung-modell-thumb { height: auto; }
.loesung-modell-thumb svg { height: auto; }
.modal.modal--strategiemodell { background: var(--black); }
@media (max-width: 900px) {
  .loesung-split { grid-template-columns: 1fr; }
  .loesung-modell { max-width: 420px; }
}

/* Komplexe Themen, Stufe 03 Medien: Skizzen (wie auf "Medien, die Ergebnisse
   liefern") statt Icon-Kacheln – rein zur Ansicht, kein Hover, ein CTA darunter. */
.medien-sketches {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px); max-width: 520px; margin: 1.3rem 0 1.2rem;
}
.medien-sketch {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--grey-bg); border-radius: 16px; padding: clamp(12px, 1.6vw, 18px) clamp(10px, 1.4vw, 14px);
}
.medien-sketch-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.medien-sketch-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: invert(1) contrast(1.6); }
.medien-sketch-label { font-family: var(--font-sans); font-weight: 600; font-size: .8rem; color: var(--ink); text-align: center; }
@media (max-width: 560px) { .medien-sketch-label { font-size: .68rem; } }
.medien-sketches-cta-wrap { max-width: 520px; text-align: center; margin-bottom: 1.2rem; }
.medien-sketches-cta { padding: 0.45rem 0.9rem; font-size: 0.78rem; }
/* Hover: gelbe Fläche fährt von unten über den Kasten und zeigt den Kurztext
   (Texte identisch zu den Pop-ups auf "Medien, die Ergebnisse liefern").
   Schriftgröße skaliert mit der Kastenbreite (Container-Einheiten), damit der
   Text in jeder Bildschirmbreite in den Kasten passt. */
.medien-sketch { position: relative; overflow: hidden; container-type: inline-size; }
.medien-sketch-hover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7cqi; background: var(--hl-solid); color: var(--ink);
  text-align: left; transform: translateY(100%); transition: transform .3s ease;
}
.medien-sketch p.medien-sketch-hover-title {
  margin: 0 0 .45em; font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(11px, 10.5cqi, 15px); line-height: 1.15;
}
.medien-sketch p.medien-sketch-hover-text { max-width: none; color: var(--ink);
  margin: 0; font-family: var(--font-sans);
  font-size: clamp(9px, 8.2cqi, 12px); line-height: 1.4;
}
@media (hover: hover) {
  .medien-sketch:hover .medien-sketch-hover,
  .medien-sketch:focus-visible .medien-sketch-hover { transform: translateY(0); }
}
.medien-sketch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 560px) { .medien-sketch-hover { display: none; } }
/* Aufzählung im Lead-Text (z. B. Strategie-Seite, Lösung) */
.leistung-lead-list { list-style: none; padding: 0; margin: 0.85rem 0; }
.leistung-lead-list li { position: relative; padding-left: 1.2rem; margin-bottom: 0.35rem; }
.leistung-lead-list li::before { content: "•"; position: absolute; left: 0; }

/* ===== Strategie-Seite: Perspektivwechsel "Homepage deiner Abteilung" =====
   Text + Gedankenexperiment links, rechts eine leere Browser-Skizze mit den
   fünf offenen Fragen – regt an, den eigenen Bereich von außen zu betrachten. */
.perspektive-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.perspektive h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 0 0 1.1rem; }
.perspektive .lead + .lead { margin-top: 0.85rem; }
.perspektive-gedanke {
  margin-top: clamp(24px, 3vw, 36px); padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 30px);
  background: var(--grey-bg); border-radius: var(--radius-card);
  border-left: 6px solid var(--hl-solid);
}
.perspektive-gedanke p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.perspektive-gedanke p + p { margin-top: 0.6rem; }
.perspektive-gedanke .perspektive-gedanke-tag {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-50); margin-bottom: 0.5rem;
}
.perspektive-gedanke .perspektive-gedanke-frage {
  font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.55rem); color: var(--ink);
}

/* Browser-Skizze */
.perspektive-browser {
  background: #fff; border: 1px solid #e2e0dd; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.05);
}
.pb-bar {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: #f5f4f2; border-bottom: 1px solid #e2e0dd;
}
.pb-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.pb-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d6d3cf; display: block; }
.pb-url {
  flex: 1; min-width: 0; display: flex; align-items: center;
  background: #fff; border: 1px solid #e2e0dd; border-radius: 999px; padding: 6px 14px;
  font-family: var(--font-sans); font-size: 0.8rem; color: var(--grey-70);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; background: var(--ink); animation: pb-blink 1s steps(1) infinite; }
@keyframes pb-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pb-caret { animation: none; } }
.pb-page { padding: clamp(18px, 2.4vw, 28px); }
.pb-hero { display: flex; flex-direction: column; gap: 8px; padding-bottom: clamp(16px, 2vw, 22px); border-bottom: 1px solid #eeecea; }
.pb-logo { font-family: var(--font-sans); font-weight: 700; font-size: 0.78rem; color: var(--ink); margin-bottom: 6px; }
.pb-skel { display: block; height: 12px; border-radius: 6px; background: #ecebe8; }
.pb-skel--h1 { height: 16px; width: 82%; }
.pb-skel--short { width: 54%; }
.pb-rows { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pb-rows li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 14px; padding: clamp(11px, 1.4vw, 15px) 0; border-bottom: 1px dashed #e2e0dd;
}
.pb-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.pb-num { font-family: var(--font-serif); font-weight: 700; font-size: 0.85rem; color: var(--grey-50); }
.pb-q { font-family: var(--font-sans); font-weight: 600; font-size: clamp(0.86rem, 1.1vw, 0.95rem); line-height: 1.35; color: var(--ink); }
.pb-mark {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hl-solid); color: var(--ink);
  font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem;
}

.perspektive-fazit { max-width: 760px; margin: clamp(56px, 7vw, 96px) auto 0; text-align: center; }
.perspektive-punch { margin: 1.1rem 0 0; font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.22; color: var(--ink); }
@media (max-width: 900px) {
  .perspektive-grid { grid-template-columns: 1fr; }
  .perspektive-browser { max-width: 520px; }
}

/* ===== Perspektivwechsel: Grundanordnung (Variante 1 gewählt) ===== */
.pv-nowrap { white-space: nowrap; }
.pv-head { max-width: 780px; margin: 0 auto clamp(44px, 5.5vw, 72px); text-align: center; }
.pv-head .lead { max-width: 680px; margin-inline: auto; }
.pv-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.perspektive .pv-tag {
  margin: 0 0 .7rem; font-family: var(--font-sans); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink);
}
.perspektive .pv-tag::before {
  content: ""; display: inline-block; width: 22px; height: 4px; margin-right: 10px;
  vertical-align: middle; background: var(--hl-solid); border-radius: 2px;
}
.perspektive .pv-exp { margin: 0; font-size: 1.125rem; line-height: 1.65; color: var(--ink-2); }
.perspektive .pv-q { margin: 1rem 0 0; font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; color: var(--ink); }
.pv-punch { margin: 0; font-weight: 700; line-height: 1.22; color: var(--ink); }

/* Abschluss 1: zentriert, ohne Rahmen */
.pv-end--1 { max-width: 760px; margin: clamp(56px, 7vw, 96px) auto 0; text-align: center; }
.pv-end--1 .pv-punch { margin-top: 1.1rem; font-size: clamp(1.7rem, 3vw, 2.3rem); }


@media (max-width: 900px) {
  .pv-row { grid-template-columns: 1fr; }
  .pv-row .perspektive-browser { max-width: 520px; }
}

/* Aufzählung innerhalb einer Timeline-Stufe (Komplexe Themen, 04 Taktisches Briefing) */
.stufe-bullets { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 52ch; }
.stufe-bullets li { position: relative; padding-left: 1.2rem; font-size: 1rem; line-height: 1.7; color: var(--ink-2); }
.stufe-bullets li + li { margin-top: .9rem; }
.stufe-bullets li::before { content: "•"; position: absolute; left: 0; color: var(--ink); }
.stufe-bullets strong { display: block; color: var(--ink); font-weight: 600; }

/* ===== Innovation-Seite: Lösung "Nichts ist in Stein gemeißelt" ===== */
.inno-label {
  margin: 0 0 .8rem; font-family: var(--font-sans); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink);
}
.inno-label::before { content: ""; display: inline-block; width: 22px; height: 4px; margin-right: 10px; vertical-align: middle; background: var(--hl-solid); border-radius: 2px; }
.inno-loesung .lead + .lead { margin-top: .85rem; }
.inno-loesung h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 0 0 1.1rem; }

/* 1) Einstieg */
.inno-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.inno-stein {
  position: relative; background: var(--grey-bg); border-radius: var(--radius-card);
  padding: clamp(28px, 3.6vw, 48px); overflow: hidden;
}
.inno-stein-tag { margin: 0 0 1.2rem; font-family: var(--font-sans); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-50); }
.inno-stein ul { list-style: none; margin: 0; padding: 0; }
.inno-stein li { margin: 0 0 .9rem; font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; color: var(--grey-70); }
.inno-strike { position: relative; display: inline; background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: 0 58%; background-size: 100% 3px; transition: background-size .6s ease; }
.js-reveal-ready .inno-stein:not(.is-visible) .inno-strike { background-size: 0 3px; }
.inno-stein li:nth-child(2) .inno-strike { transition-delay: .35s; }
.inno-stein li:nth-child(3) .inno-strike { transition-delay: .7s; }
.inno-stein-foot { position: relative; margin: 1.4rem 0 0; display: inline-block; font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.8rem); color: var(--ink); }
.inno-stein-foot::before { content: ""; position: absolute; z-index: -1; left: -.1em; right: -.1em; top: .05em; bottom: -.02em; background: var(--hl-solid); border-radius: 4px; }
.inno-stein-foot { z-index: 0; }

/* 2) Einsatzmöglichkeiten */
.inno-einsatz { margin-top: clamp(72px, 9vw, 128px); }
.inno-einsatz-head { max-width: 720px; margin: 0 auto clamp(28px, 3.4vw, 40px); text-align: center; }
.inno-einsatz-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.inno-einsatz-item {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: 150px; padding: 20px 20px 22px; border: 1px solid #e2e0dd; border-radius: 18px; background: #fff;
}
.inno-einsatz-item--main { background: var(--black); border-color: var(--black); }
.inno-einsatz-num { font-family: var(--font-serif); font-weight: 700; font-size: .95rem; color: var(--grey-50); }
.inno-einsatz-item { container-type: inline-size; }
.inno-einsatz-title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(0.95rem, 11cqi, 1.25rem); line-height: 1.2; color: var(--ink); hyphens: manual; overflow-wrap: normal; }
.inno-einsatz-item--main .inno-einsatz-num { color: var(--hl-solid); }
.inno-einsatz-item--main .inno-einsatz-title { color: #fff; }
.inno-scope { margin: clamp(20px, 2.4vw, 28px) 0 0; text-align: center; font-family: var(--font-sans); font-size: .95rem; color: var(--grey-70); }

/* 3) Methoden: Text mittig, darunter der bewährte Ansatz als großer schwarzer Fokus-Kasten.
   Business Model Canvas + Pitch nur als angeschnittene, blasse Linien-Grafik im Kasten. */
.inno-methode { margin-top: clamp(72px, 9vw, 128px); }
.inno-methode-text { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.inno-greenfield {
  position: relative; overflow: hidden; background: var(--black); border-radius: var(--radius-card);
  padding: clamp(56px, 8vw, 120px) clamp(24px, 6vw, 96px);
}
.inno-greenfield-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; text-align: center; }
.inno-greenfield-tag { margin: 0 0 1rem; font-family: var(--font-sans); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--hl-solid); }
.inno-greenfield-text { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.22; color: #fff; }
.inno-greenfield-text .hl { color: var(--ink); }
.inno-deco { position: absolute; z-index: 0; opacity: .32; pointer-events: none; height: auto; }
.inno-deco--bmc { width: clamp(260px, 30vw, 420px); left: -90px; bottom: -120px; transform: rotate(-8deg); }
.inno-deco--pitch { width: clamp(280px, 32vw, 460px); right: -80px; top: -50px; transform: rotate(7deg); }
@media (max-width: 700px) {
  .inno-deco { opacity: .2; }
  .inno-deco--bmc { width: 220px; left: -70px; bottom: -60px; }
  .inno-deco--pitch { width: 240px; right: -90px; top: -60px; }
}

@media (max-width: 1100px) {
  .inno-einsatz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inno-einsatz-item--main { grid-column: 1 / -1; }
  .inno-einsatz-item { min-height: 120px; }
}
@media (max-width: 900px) {
  .inno-intro { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .inno-einsatz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inno-einsatz-item { min-height: 120px; }
  .inno-einsatz-item--main { grid-column: 1 / -1; }
}

/* ===== Responsive-Feinschliff (Tablet/Mobil) für die neuen Sections ===== */
@media (max-width: 900px) {
  /* Perspektivwechsel: Browser + Gedankenexperiment unter der zentrierten Headline mittig ausrichten */
  .pv-row { justify-items: center; }
  .pv-row .perspektive-browser, .pv-exp-block { width: 100%; max-width: 560px; }
}
@media (max-width: 600px) {
  /* Lange Fließtexte auf dem Handy linksbündig statt zentriert – besser lesbar */
  .pv-head, .pv-end--1, .inno-einsatz-head, .inno-methode-text, .inno-scope { text-align: left; }
  .pv-head .lead, .pv-end--1 .lead { margin-inline: 0; }
  .inno-greenfield { padding: 48px 22px; }
  .inno-greenfield-inner { text-align: left; }
}

/* ============================================================
   Mobile-Feinschliff (16.09.2026, Branch Noah)
   Sammelblock fuer die Mobil-Abnahme. Bewusst am Dateiende und
   in einem Stueck, damit er sich leicht mergen und nachvollziehen
   laesst. Regeln gelten nur unterhalb der genannten Breiten, der
   Desktop bleibt unveraendert (Ausnahme: Kicker-Groesse).
   ============================================================ */

/* Produktseiten-Hero: weisse Schrift im farbigen Marker. Der Kasten endete an der
   Grundlinie, Unterlaengen (g, p) standen weiss auf weiss und wirkten abgeschnitten.
   Kasten reicht jetzt bis unter die Unterlaengen. */

/* Produktseiten-Hero: Zeilenhoehe 1.06 war enger als die Glyphen, der Marker-Kasten
   ueberdeckte Unter-/Oberlaengen der Nachbarzeilen. 1.2 wie Startseite/Leistungsseiten. */
.produktseite .produkt-hero h1 { line-height: 1.2; }

/* Unterstes Modul (Ansprechpartner + CTA): Headline-Zeilenabstand wie 'Weitere Leistungen' (1.06). */
.produkt-cta h2 { line-height: 1.06; }

/* Akkordeons auf Produktseiten (FAQ, Beispiele, Anwendungsfaelle): Aufbau wie das FAQ
   auf Paid Ads. Desktop: Kopf links (1/3), Karten rechts (2/3); Karten mit rundem Plus. */
@media (min-width: 901px) {
  .produkt-faq .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
  .produkt-faq .produkt-section-head { margin-bottom: 0; }
  .produkt-faq .produkt-section-head p { max-width: 34ch; }
  .produkt-faq-list { max-width: none; gap: 14px; }
}
body .produkt-faq-item { padding: 0; border-radius: 18px; transition: border-color .2s, box-shadow .2s; }
body.produktseite-clean .produkt-faq-item:hover, body.produktseite-clean .produkt-faq-item[open] { border-color: #d6d0cc; box-shadow: 0 14px 34px rgba(0,0,0,.05); background: #fff; }
body .produkt-faq-item summary { padding: 26px 28px; font-size: 1.02rem; line-height: 1.35; gap: 18px; }
body .produkt-faq-item summary::after {
  content: ""; width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat,
    var(--grey-bg);
  transition: transform .25s ease, background-color .2s;
}
body.produktseite-clean .produkt-faq-item summary::after { color: var(--ink); }
body .produkt-faq-item[open] summary::after { transform: rotate(45deg); }
body .produkt-faq-item p { margin: 0; padding: 0 28px 26px; line-height: 1.7; max-width: 62ch; }
body .produkt-faq-item p + p { padding-top: 0; margin-top: -12px; }

/* Kicker/Preheader eine Stufe kleiner, ueberall (1.15rem -> 1rem). */
.kicker { font-size: 1rem; }
/* "Zwischenergebnis"-Tag (Komplexe Themen) wie ein normaler Kicker, nicht fett/gross. */
.stufe-interim-tag { font-size: 1rem; font-weight: 500; }

@media (max-width: 900px) {
  /* Leistungsseiten: H1 linksbuendig statt rechtsbuendig. */
  .leistung-hero .hero-head, .leistung-hero .hero-head h1 { text-align: left; }
  .leistung-hero .hero-head { width: auto; }
  .leistung-hero .hero-head .hero-arrow { text-align: left; }

  /* Produktseiten-Hero: Skizzen/Mockups raus, Text zuerst. Ausnahmen (MES, Paid Ads,
     Sparring-Portrait) behalten ihr Visual, aber unterhalb des Textes. */
  .produktseite .produkt-hero-visual { display: none; }
  body.produktseite--keep-visual .produkt-hero .container { display: flex; flex-direction: column; }
  body.produktseite--keep-visual .produkt-hero-grid { display: contents; }
  body.produktseite--keep-visual .produkt-hero-text { order: 1; }
  body.produktseite--keep-visual .produkt-hero-actions { order: 2; }
  body.produktseite--keep-visual .produkt-hero-visual { display: block; order: 3; margin: 32px auto 0; width: 100%; max-width: 360px; }
  /* MES: Kopf -> Text -> Pills -> Buttons -> Mockup */
  body.produktseite--keep-visual .produkt-hero-image-grid { display: contents; }
  body.produktseite--keep-visual .produkt-hero-image-head { order: 1; }
  body.produktseite--keep-visual .produkt-hero-image-text { order: 2; }
  body.produktseite--keep-visual .produkt-hero-image-pills { order: 3; }
  body.produktseite--keep-visual .produkt-hero-image-text + .produkt-hero-image-text { margin-top: .85rem; }
  body.produktseite--keep-visual .produkt-hero-image-visual { order: 4; }
  /* Sparring: Portrait unter Text und Button, kompakt. */
  .produkt-hero--split .produkt-hero-split-grid { grid-template-areas: "text" "cta" "photo"; row-gap: 24px; }
  .produkt-hero--split .produkt-hero-split-photo { max-width: 260px; margin: 0 auto; }
  .produktseite-clean .produkt-hero-grid { align-items: start; }
}

@media (max-width: 640px) {
  /* Buttons wie "konkrete Loesungen anzeigen" auf der Startseite: 44px statt 53px. */
  body .btn { font-size: .95rem; padding: .85rem 1.7rem; }
  body .btn--outline, body .btn--ghost { padding: .85rem 1.7rem; }

  /* Fliesstext einheitlich 16px (Lead-Absaetze in den Modulen waren 18px). */
  main p.lead { font-size: 1rem; line-height: 1.65; }

  /* Startseite: Hero-Inhalt 15px hoeher. */
  .hero { padding-top: calc(clamp(72px, 9vw, 140px) - 15px); }

  /* Produktseiten-Hero: weniger Luft oben, Abstand Text -> Button halbiert. */
  .produktseite .produkt-hero { padding-top: 56px; }
  .produktseite-clean .produkt-hero-actions--center { margin-top: 15px; }
  .produktseite .produkt-hero .btn--dark { margin-top: 0; }
  .produkt-hero-actions { gap: 12px; }

  /* Pills deutlich kleiner. */
  .produkt-pills { gap: 6px; margin-top: 1rem; }
  .produkt-pill { font-size: .72rem; padding: 5px 10px; }
  .hero-anlass, .produkt-pill.reveal { font-size: .72rem; }

  /* Burger-Menue: Unterpunkte nicht fett, eine Stufe kleiner. */
  .mobile-menu .mobile-submenu-row .mobile-submenu-label,
  .mobile-menu .mobile-submenu-label { font-size: .95rem; font-weight: 400; }
  .mobile-menu .mobile-submenu-panel a { font-size: .9rem; font-weight: 400; }

  /* Startseite Kontakt: Abstand Text -> Buttons halbiert und gleich dem Abstand Buttons -> Logos. */
  .kontakt-standalone-top { row-gap: 22px; }
  .kontakt-standalone-side { margin-top: 0; }
  .kontakt-standalone .ks-marquee { margin-top: 22px; }
  /* Logo-Raster in der Kontakt-Sektion: Desktop-Marquee-Abstand am Bild liess die linke Spalte ueberlaufen. */
  .ks-marquee .marquee-track img { margin-right: 0; }
  .ks-marquee::before, .ks-marquee::after { display: none; } /* Fade-Kanten nur fuer den Desktop-Lauf */

  /* Akkordeons (Zusammenarbeit, Beispiele, Anwendungsfaelle, FAQ): flacher, Text kleiner. */
  .formate-acc-item summary { padding: 13px 0; font-size: .95rem; }
  .formate-acc-body p { font-size: .86rem; }
  body .produkt-faq-item summary { padding: 16px 18px; font-size: .95rem; }
  body .produkt-faq-item p { font-size: .86rem; padding: 0 18px 16px; }

  /* Preis-Karten: ohne Badge keine Luft fuer den Badge-Platzhalter reservieren. */
  .price-badge-slot:empty { min-height: 0; margin-bottom: 0; }
  .pricing-footnote { font-size: .78rem; }

  /* Modals: Titel laeuft nicht mehr unter den Schliessen-Button. */
  .modal-close { width: 36px; height: 36px; top: 12px; right: 12px; font-size: 1rem; }
  .modal h3, .modal h2, .modal-summary-title { padding-right: 40px; }
  /* Sprint-Landingpage: Struktur-Skizze im Popup groesser (Popup scrollt dann). */

  /* "Weitere Leistungen"-Kacheln: kompakter, Beschreibung erst nach Tipp (s. script.js). */
  .related-leistung { min-height: 0; }
  .related-leistung-face { min-height: 0; padding-bottom: 6px; }
  .related-leistung.is-open .related-leistung-hover { transform: translateY(0); }
  .medien-tile.is-open::after { transform: translateY(0); }
  .medien-tile.is-open .medien-tile-icon, .medien-tile.is-open .medien-tile-label { opacity: 0; }

  /* sofort sichtbar, Vergleichs-Grafik: Desktop-Aufbau (Label, Timeline in einer Reihe,
     Rakete rechts), nur verkleinert statt umgebrochen. */
  .vergleich-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .vergleich-label { flex: none; text-align: left; font-size: .78rem; }
  .vergleich-label-logo { margin: 0; max-width: 56px; }
  .vergleich-timeline { flex-wrap: nowrap; gap: 4px; padding: 8px; width: 100%; }
  .vergleich-pill { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 3px; font-size: .58rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; hyphens: auto; border-radius: 8px; }
  .vergleich-rocket { width: 36px; height: 36px; border-radius: 8px; }
  .vergleich-rocket svg { width: 18px; height: 18px; }
  .vergleich-bonus { flex: 1 1 auto; padding: 6px 4px; font-size: .62rem; line-height: 1.15; white-space: normal; text-align: left; gap: 6px; }
  .vergleich-bonus svg { width: 16px; height: 16px; }
  /* MES: Hero-Pills nebeneinander statt untereinander. */
  .produkt-hero-image-pills .produkt-pills { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  /* Komplexe Themen: Medien-Kacheln zu dritt in einer Reihe statt untereinander. */
  .medien-tiles { flex-direction: row; }
  .medien-tiles .medien-tile { width: calc((100% - 2 * var(--mt-gap)) / 3); padding: 16px 6px; }
  /* Sprint-Landingpage, Struktur-Popup: Skizze auf das Handy zugeschnitten (viewBox per script.js),
     Rahmen volle Breite, Popup scrollt. */
  .modal.modal--structure { max-height: 90vh; overflow-y: auto; }
  .modal-structure-frame { width: 100%; flex: 0 0 auto; }
  .modal-structure-frame.is-cropped { aspect-ratio: 300 / 1052; max-width: 240px; margin: 0 auto; }
  .vergleich-timeline--outline .vergleich-pill { flex: 0 1 auto; min-width: 88px; }
  .vergleich-timeline--outline .vergleich-bonus { flex: 1 1 0; min-width: 0; }
  /* sofort sichtbar, Ablauf-Boxen: Schrittnummern groesser. */
  .produkt-process-step .step-num { font-size: 1.1rem; }

  /* MES-Mockup: Inhalte innerhalb des Mockups groesser. */
  .tool-dash { min-height: 300px; }
  .tool-dash-nav { width: 56px; gap: 14px; padding: 18px 0; }
  .tool-dash-logo { width: 22px; height: 22px; }
  .tool-dash-nav-item { width: 26px; height: 26px; }
  .tool-dash-main { padding: 20px; gap: 18px; }
  .tool-dash-line { height: 96px; }

  /* ---------- Runde 2 (16.09.2026, abends) ---------- */
  /* Startseite: Nav -> Hero-Inhalt -20 % (57 -> 46px); Pfeil kleiner, Abstand Pfeil -> Text -30 %. */
  .hero { padding-top: 46px; }
  .hero .hero-arrow svg { width: 52px; height: 52px; }
  .hero .hero-copy { margin-top: -7px; }
  /* Startseite Kontakt: Buttons -> Logos wieder +20 % (22 -> 27px). */
  .kontakt-standalone .ks-marquee { margin-top: 27px; }

  /* Leistungsseiten: Strategie-Pfeil kleiner und rechts; Kreuz/Kreis bleiben links. */
  .leistung-hero .hero-head .hero-arrow { text-align: left; }
  body.leistung--strategie .leistung-hero .hero-head .hero-arrow { text-align: right; }
  .leistung-hero .hero-arrow svg { width: 52px; height: 52px; }
  /* Hero-Unterkante -> naechstes Modul halbiert (40 -> 20px). */
  .leistung-hero { padding-bottom: 20px; }

  /* "Weitere Leistungen"-Kacheln, geoeffneter Zustand: Text und Link eine Stufe kleiner, mehr Luft oben. */
  .related-leistung-hover { padding: 34px 24px 24px; }
  .related-leistung-hover p { font-size: .875rem; }
  .related-leistung-hover .link-more { font-size: .9rem; }

  /* Produktseiten: Hero-Unterkante -> naechstes Modul halbiert (90 -> 45px). */
  .produktseite .produkt-hero { padding-bottom: 45px; }

  /* MES: Abstand H1 -> Text wie auf den anderen Seiten, Text eine Stufe kleiner; USP-Box-Text kleiner. */
  body.produktseite--keep-visual .produkt-hero-image-text { margin-top: 18px; }
  .produktseite--dashboard-digitales-marketing .produkt-hero-image-text p.lead { font-size: .9rem; }
  .usp-highlight p:not(.usp-highlight-kicker) { font-size: .9rem; }

  /* sofort sichtbar: Schrittnummern deutlich groesser; Buttons ganz unten gleich breit. */
  .produkt-process-step .step-num { font-size: 1.5rem; }
  .produkt-cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .produkt-cta-actions .btn { width: 100%; }

  /* Paid Ads: Akkordeon-Antworten eine Stufe kleiner. */
  .pa-faq-answer p { font-size: .86rem; }

  /* Praesentationsseminar: Onboarding-Punkte auf Hoehe der Titelzeile. */
  .onboarding-step { align-items: flex-start; }
  .onboarding-dot { margin-top: 6px; }

  /* Startseite/Leistungsseiten: kleinerer Pfeil rutschte in die Marker-Zeile, Negativ-Margin abmildern. */
  .hero .hero-arrow { margin-top: -6px; }
  /* MES, "Alles greift ineinander": Erklaer-Buttons als kleine Pills nebeneinander. */
  .mes-explainer-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
  body .mes-explainer-buttons .btn { font-size: .75rem; padding: .5rem .9rem; }
  /* Sparring: Portrait mobil raus. */
  .produkt-hero--split .produkt-hero-split-photo { display: none; }
}

/* Menüpunkt ohne Unterebene (z. B. capiamo in der Sandbox): kein Pfeil */
.nav-dropdown-sub-trigger--empty::after { display: none; }

/* ===== PDF-Download-Bereich (alle Produktseiten) =====
   Schwarzer Kasten – bewusst eigenständig neben den farbigen Kästen der Seite.
   Seitenfarbe per --dl-acc am Element. Variante --mist: Farbnebel am Rand,
   Highlight (.hl-acc) in der Seitenfarbe. */
.pdf-dl {
  --dl-acc: #fff400;
  position: relative; overflow: hidden; isolation: isolate; clip-path: inset(0 round var(--radius-card)); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center; color: #fff; background: #000;
  border-radius: var(--radius-card); padding: clamp(2.4rem, 5vw, 4.2rem) clamp(1.6rem, 5vw, 4.5rem);
  box-shadow: 0 34px 80px rgba(0,0,0,.22);
}
.pdf-dl > * { position: relative; z-index: 1; }
.pdf-dl::before, .pdf-dl::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }
.pdf-dl--mist::before { inset: 0; background: radial-gradient(ellipse 60% 70% at 100% 100%, color-mix(in srgb, var(--dl-acc) 80%, transparent) 0%, color-mix(in srgb, var(--dl-acc) 30%, transparent) 45%, transparent 75%); }
.pdf-dl--mist::after { inset: 0; background: radial-gradient(ellipse 45% 55% at 0% 0%, color-mix(in srgb, var(--dl-acc) 40%, transparent) 0%, transparent 70%); }
.pdf-dl-h .hl-acc { position: relative; z-index: 0; display: inline-block; color: var(--dl-hl-fg, #fff); font-weight: 700; }
.pdf-dl-h .hl-acc::before { content: ""; position: absolute; z-index: -1; left: -.1em; right: -.1em; top: .06em; bottom: -.1em; background: var(--dl-acc); border-radius: 4px; }
.pdf-dl-visual { position: relative; height: clamp(18rem, 32vw, 25rem); }
.pdf-dl-page { position: absolute; top: 50%; left: 50%; height: 100%; width: auto; aspect-ratio: 210 / 297; object-fit: cover; border-radius: 6px; box-shadow: 0 26px 56px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14); transition: transform .35s ease; }
.pdf-dl-page--back { transform: translate(-26%, -50%) rotate(6deg); }
.pdf-dl-page--front { transform: translate(-74%, -50%) rotate(-3deg); }
.pdf-dl:hover .pdf-dl-page--back { transform: translate(-16%, -52%) rotate(8deg); }
.pdf-dl:hover .pdf-dl-page--front { transform: translate(-82%, -51%) rotate(-5deg); }
.pdf-dl-kicker { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 1rem; color: rgba(255,255,255,.7); }
.pdf-dl--mist .pdf-dl-kicker { color: var(--dl-acc); }
.pdf-dl-h { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.18; margin: .6rem 0 1rem; color: #fff; }
.pdf-dl-lead { margin: 0; max-width: 34rem; font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,.8); }
.pdf-dl-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1.9rem; }
.pdf-dl-meta span { border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .35rem .9rem; font-family: var(--font-sans); font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.9); }
.pdf-dl-btn { display: inline-flex; align-items: center; gap: .6rem; background: #fff; color: #1a1817; border-radius: 999px; padding: .9rem 1.5rem; font-family: var(--font-sans); font-weight: 600; font-size: .95rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.pdf-dl-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,255,255,.12); }
.pdf-dl-btn svg { width: 16px; height: 16px; }
@media (max-width: 960px) { .pdf-dl { grid-template-columns: minmax(0, 1fr); } .pdf-dl-visual { height: 17rem; } }
@media (max-width: 600px) { .pdf-dl { padding: 2rem 1.4rem; } .pdf-dl-visual { height: 13rem; } .pdf-dl-btn { width: 100%; justify-content: center; } }
.pdf-dl--yellow::after { display: none; }
.pdf-dl-section { padding-block: clamp(48px, 6vw, 88px); }
.arg-proof--solo { grid-template-columns: minmax(0, 1fr); }