/* ==========================================================================
   KEY Agentur — Website
   Baut ausschliesslich auf den Design-System-Tokens auf (assets/ds/styles.css).
   Keine neuen Farben, keine neuen Schriften. Nur Layout und Komposition.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Seiten-eigene Layout-Variablen (keine Marken-Werte, nur Raster)
   -------------------------------------------------------------------------- */
:root {
  --wrap: 1280px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 9vw, 120px);

  /* Grosse Display-Groessen, fluid aus der DS-Skala abgeleitet */
  --fs-display: clamp(40px, 7.6vw, 104px);
  --fs-h1-fluid: clamp(32px, 4.6vw, 56px);
  --fs-h2-fluid: clamp(36px, 5.6vw, 84px);   /* Bold-Maßstab seit 2026-10-20 */
  --fs-lead: clamp(18px, 1.6vw, 22px);

  --header-h: 84px;
}

/* --------------------------------------------------------------------------
   1b. Dunkle Seite — semantische Tokens des Design Systems umbelegt
   Die Palette bleibt unverändert (Schwarz, Graphit, Grau, Weiß, ein Cyan).
   Gedreht wird nur, welche Rolle welchen Wert bekommt. Dadurch ziehen
   Fließtext, Überschriften, Linien und Flächen automatisch mit.
   Die Seite ist durchgehend schwarz; ein einziger Cyan-Streifen setzt den Akzent.
   -------------------------------------------------------------------------- */
:root {
  --surface-page: var(--key-black);      /* Grundfläche der Seite */
  --surface-card: transparent;           /* Cards tragen nur noch eine Hairline */
  --surface-muted: var(--key-ink);       /* #1A1A1A — der zweite Ton im Wechsel */

  --text-strong: var(--key-white);
  --text-body: rgba(255, 255, 255, 0.78);
  --text-muted: var(--key-gray);

  --border-subtle: rgba(255, 255, 255, 0.16);
  --border-strong: var(--key-white);
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body { overflow-x: hidden; }

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

/* Fokus: Cyan-Ring, innen zusaetzlich weisse Kante fuer Kontrast auf Schwarz */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--key-white);
  border-radius: var(--radius-sm);
}
/* Auf den wenigen hellen Inseln (z. B. hervorgehobenes Paket) andersherum */
.plan--featured :focus-visible,
.on-light :focus-visible {
  box-shadow: 0 0 0 2px var(--key-black);
}

/* Skip-Link */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  background: var(--key-black);
  color: var(--key-white);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: var(--weight-bold);
  transition: top var(--dur-base) var(--ease-standard);
}
.skip-link:focus { top: 16px; opacity: 1; }

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

/* Die Seite ist durchgehend schwarz. --muted/--dark/--ink bleiben als
   Aliase erhalten, falls einzelne Abschnitte doch abgesetzt werden sollen. */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--muted { background: var(--surface-muted); }
.section--dark { background: var(--key-black); }
.section--ink { background: var(--key-ink); }

/* --------------------------------------------------------------------------
   Der eine Cyan-Streifen.
   Bewusst nur einmal pro Seite — das Design System rationiert den Akzent.
   Verschieben: die Klasse section--accent an einem anderen <section> setzen
   und hier entfernen. Weisse Schrift ist auf Cyan unlesbar (1.5:1), deshalb
   kippt der ganze Streifen auf dunkle Schrift.
   -------------------------------------------------------------------------- */
.section--accent { background: var(--accent); color: var(--text-on-accent); }
.section--accent h1,
.section--accent h2,
.section--accent h3 { color: var(--key-black); }
.section--accent .lead { color: var(--text-on-accent); }
.section--accent .eyebrow,
.section--accent .eyebrow--accent { color: var(--key-graphite); }
.section--accent .meta { color: var(--key-graphite); }
.section--accent .chev-list li::before { color: var(--key-black); }
.section--accent a { color: var(--key-black); }

/* Buttons drehen sich um: gefuellt wird schwarz, die Kontur ebenfalls. */
.section--accent .btn--accent,
.section--accent .btn--primary {
  background: var(--key-black); color: var(--key-white); border-color: var(--key-black);
}
.section--accent .btn--accent:hover,
.section--accent .btn--primary:hover {
  background: var(--key-graphite); border-color: var(--key-graphite); color: var(--key-white);
}
.section--accent .btn--secondary {
  background: transparent; color: var(--key-black); border-color: rgba(0, 0, 0, 0.35);
}
.section--accent .btn--secondary:hover { background: rgba(0, 0, 0, 0.08); color: var(--key-black); }

/* Formular auf Cyan */
.section--accent .field label { color: var(--key-black); }
.section--accent .field .hint { color: var(--key-graphite); }
.section--accent .field input,
.section--accent .field textarea,
.section--accent .field select {
  color: var(--key-black);
  border-color: rgba(0, 0, 0, 0.35);
  color-scheme: light;
}
.section--accent .field input::placeholder,
.section--accent .field textarea::placeholder { color: var(--key-graphite); }
.section--accent .field input:hover,
.section--accent .field textarea:hover,
.section--accent .field select:hover { border-color: var(--key-black); }
.section--accent .checkbox-row label { color: var(--key-graphite); }
.section--accent .checkbox-row a { color: var(--key-black); }
.section--accent .checkbox-row input { accent-color: var(--key-black); }
.section--accent .contact-direct > div { border-top-color: rgba(0, 0, 0, 0.25); }
.section--accent .contact-direct dt { color: var(--key-graphite); }
.section--accent .contact-direct dd a {
  color: var(--key-black); border-bottom-color: rgba(0, 0, 0, 0.4);
}
.section--accent .contact-direct dd a:hover { border-bottom-color: var(--key-black); }

/* Fokusring auf Cyan: innen schwarz, damit der Ring ueberhaupt sichtbar wird */
.section--accent :focus-visible {
  outline-color: var(--key-black);
  box-shadow: 0 0 0 2px var(--key-white);
}

/* --------------------------------------------------------------------------
   Heller Streifen — fuer die Pakete.
   Schwarz-auf-Weiss ist im Design System gleichberechtigt zu Weiss-auf-Schwarz.
   Alle Rollen kehren sich hier um.
   -------------------------------------------------------------------------- */
.section--light { background: var(--key-white); color: var(--text-body-light, #333333); }
.section--light h1,
.section--light h2,
.section--light h3 { color: var(--key-black); }
.section--light .lead,
.section--light p { color: var(--key-graphite); }
/* #888 erreicht auf Weiss nur 3.5:1 — fuer Fliesstext zu wenig, daher Graphit. */
.section--light .eyebrow,
.section--light .meta,
.section--light .muted-note { color: var(--key-graphite); }
.section--light .eyebrow--accent { color: var(--key-black); }
.section--light .chev-list { color: var(--key-graphite); }
.section--light .chev-list li::before { color: var(--key-black); }
.section--light a { color: var(--key-black); }
.section--light :focus-visible { box-shadow: 0 0 0 2px var(--key-black); }

.section--light .card,
.section--light .plan { background: var(--key-white); border-color: var(--key-border); }
.section--light .plan__price,
.section--light .plan__kpi-value { color: var(--key-black); }
.section--light .plan__desc,
.section--light .plan__note,
.section--light .plan__kpi-label { color: var(--key-graphite); }
.section--light .plan__kpi { border-color: var(--key-border); }
.section--light .addon { border-bottom-color: var(--key-border); }
.section--light .addon__name { color: var(--key-black); }
.section--light .addon__price { color: var(--key-graphite); }
.section--light .badge { background: var(--surface-muted-light, #F6F6F6); color: var(--key-graphite); border-color: var(--key-border); }
.section--light .badge--accent { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }

.section--light .region-list li { border-color: var(--key-border); color: var(--key-graphite); }
.section--light .case { border-top-color: var(--key-border); }
.section--light .case__label { color: var(--key-graphite); }
.section--light .case__hero-value { color: var(--key-black); }
.section--light .case__claim { color: var(--key-graphite); }
.section--light .case__more { border-top-color: var(--key-border); }
.section--light .case__more summary { color: var(--key-black); }
.section--light .flow__step p { color: var(--key-graphite); }
.section--light .flow__tick { background: var(--key-border); }
.section--light .kpi__value { color: var(--key-black); }
.section--light .kpi__label { color: var(--key-graphite); }
.section--light .faq,
.section--light .faq__item { border-color: var(--key-border); }
.section--light .faq__item summary { color: var(--key-black); }
.section--light .faq__answer { color: var(--key-graphite); }
.section--light .project__name { color: var(--key-black); }
.section--light .project__tag,
.section--light .ref-item figcaption { color: var(--key-graphite); }

.section--light .btn--primary { background: var(--key-black); color: var(--key-white); border-color: var(--key-black); }
.section--light .btn--primary:hover { background: var(--key-graphite); border-color: var(--key-graphite); }
.section--light .btn--secondary { background: var(--key-white); color: var(--key-black); border-color: var(--key-border); }
.section--light .btn--secondary:hover { background: #F6F6F6; color: var(--key-black); }
.section--light .link-chev { color: var(--key-black); }

/* Im hellen Streifen ist das hervorgehobene Paket die dunkle Insel. */
.section--light .plan--featured {
  background: var(--key-ink);
  color: rgba(255, 255, 255, 0.78);
  border-color: var(--key-ink);
}
.section--light .plan--featured h3,
.section--light .plan--featured .plan__price,
.section--light .plan--featured .plan__kpi-value { color: var(--key-white); }
.section--light .plan--featured .plan__desc,
.section--light .plan--featured .plan__note,
.section--light .plan--featured .plan__kpi-label,
.section--light .plan--featured .chev-list { color: rgba(255, 255, 255, 0.78); }
.section--light .plan--featured .chev-list li::before { color: var(--accent); }
.section--light .plan--featured .plan__kpi { border-color: var(--border-on-dark); }
.section--light .plan--featured :focus-visible { box-shadow: 0 0 0 2px var(--key-white); }

.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-5); }

.grid { display: grid; gap: var(--space-4); }
@media (min-width: 800px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 560px) and (max-width: 799px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   4. Typografie-Bausteine
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1-fluid); }
h2 {
  font-size: var(--fs-h2-fluid);
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h3 { letter-spacing: -0.02em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 62ch;
}

.eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--key-gray);
  display: block;
  margin-bottom: var(--space-3);
}
.eyebrow--accent { color: var(--accent); }

.meta { font-size: var(--fs-small); color: var(--key-gray); line-height: 1.6; }

.muted-note { font-size: var(--fs-small); color: var(--text-body); }

/* Chevron als Marken-Aufzaehlungszeichen */
.chev-list { list-style: none; margin: 0; padding: 0; }
.chev-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--space-2);
  line-height: 1.55;
}
.chev-list li::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--weight-bold);
  color: var(--accent);
}

/* Trennlinie aus Chevrons */
.chev-rule {
  font-weight: var(--weight-bold);
  letter-spacing: 0.5em;
  color: var(--accent);
  font-size: var(--fs-small);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   5. Buttons (Pille, DS-Varianten)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 15px;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}
.btn:hover { opacity: 1; }
.btn .chev { transition: transform var(--dur-base) var(--ease-standard); }
.btn:hover .chev { transform: translateX(3px); }

/* Auf der dunklen Seite ist der gefüllte Button weiss, nicht schwarz. */
.btn--primary { background: var(--key-white); color: var(--key-black); border-color: var(--key-white); }
.btn--primary:hover { background: var(--key-border); border-color: var(--key-border); color: var(--key-black); }

.btn--accent { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }
.btn--accent:active { background: var(--accent-press); }

/* Der zurueckhaltende Button: nur Kontur, keine Flaeche. */
.btn--secondary { background: transparent; color: var(--key-white); border-color: rgba(255, 255, 255, 0.4); }
.btn--secondary:hover { background: rgba(255, 255, 255, 0.12); color: var(--key-white); }

.btn--outline-light { background: transparent; color: var(--key-white); border-color: var(--border-on-dark); }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); color: var(--key-white); }

/* Innerhalb der hellen Insel (hervorgehobenes Paket) drehen sich die Buttons um. */
.plan--featured .btn--primary { background: var(--key-black); color: var(--key-white); border-color: var(--key-black); }
.plan--featured .btn--primary:hover { background: var(--key-graphite); border-color: var(--key-graphite); }
.plan--featured .btn--secondary { background: transparent; color: var(--key-black); border-color: var(--key-border); }
.plan--featured .btn--secondary:hover { background: var(--surface-muted); color: var(--key-black); }

.btn--lg { font-size: 17px; padding: 18px 32px; }

/* In schmalen Karten sprengt ein langer Knopftext sonst den Rahmen:
   dort volle Breite und Umbruch erlaubt. */
@media (max-width: 700px) {
  .swipe-row .btn,
  .plan__foot .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Textlink mit Chevron.
   Mindesthoehe 24px — WCAG 2.5.8 verlangt das als Tippziel. */
.link-chev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font-weight: var(--weight-bold);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.link-chev .chev { transition: transform var(--dur-base) var(--ease-standard); }
.link-chev:hover .chev { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Badge
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid var(--border-subtle);
  background: var(--surface-muted);
  color: var(--text-body);
}
.badge--solid { background: var(--key-black); color: var(--key-white); border-color: var(--key-black); }
.badge--accent { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.badge--outline-light { background: transparent; color: var(--key-white); border-color: var(--border-on-dark); }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--pad-card);
}
.card--muted { background: var(--surface-muted); }
.card--dark { background: var(--surface-inverse); color: var(--text-on-dark); border-color: var(--border-on-dark); }
.card--dark h2, .card--dark h3 { color: var(--text-on-dark); }

/* --------------------------------------------------------------------------
   8. Header / Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-header__logo { display: block; flex-shrink: 0; }
.site-header__logo img { height: 36px; width: auto; }

/* Zustand: gescrollt -> schwarze Leiste mit Hairline.
   Das Logo bleibt weiss, da die Leiste nie hell wird. */
.site-header.is-scrolled {
  background: var(--key-black);
  border-bottom-color: var(--border-subtle);
}

.site-nav { display: none; }
@media (min-width: 940px) {
  .site-nav { display: flex; align-items: center; gap: var(--space-5); }
}
.site-nav a {
  text-decoration: none;
  font-size: 15px;
  color: var(--key-white);
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.site-nav a:hover { opacity: 0.6; }

/* Die CTA in der Leiste ist der eine Cyan-Moment im Kopfbereich. */
.header-cta { display: none; }
@media (min-width: 940px) { .header-cta { display: inline-flex; } }

/* Burger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* Pille statt nackter Striche — Buttons sind im Design System volle Pillen,
     dadurch wirkt der Knopf als Bedienelement und nicht als Beiwerk. */
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--radius-pill);
  padding: 0 16px 0 14px;
  height: 42px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--key-white);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.6); }
.site-header.is-scrolled .nav-toggle { background: transparent; }
@media (min-width: 940px) { .nav-toggle { display: none; } }

/* Drei kurze Striche statt zwei langer — kompakter und klarer als Symbol. */
.nav-toggle__bars { display: block; width: 17px; height: 11px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars {
  --bar: 1.5px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--bar);
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }
/* mittlerer Strich, bewusst kuerzer */
.nav-toggle__bars { background: none; }
.nav-toggle__bars span,
.nav-toggle__bars::marker { display: none; }
.nav-toggle::before {
  content: "";
  position: absolute;
  left: 14px;
  width: 11px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle { position: relative; }

/* Mobile-Overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--key-black);
  color: var(--key-white);
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  transform: translateY(-100%);
  visibility: hidden;
  /* Sichtbarkeit schaltet beim Schließen erst nach dem Wegfahren um,
     beim Öffnen sofort — sonst greift der Fokus ins Leere. */
  transition: transform var(--dur-base) var(--ease-standard),
              visibility 0s linear var(--dur-base);
}
.mobile-nav[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-standard), visibility 0s;
}
.mobile-nav__head { display: flex; justify-content: space-between; align-items: center; height: calc(var(--header-h) - 2 * var(--gutter) + 40px); }
.mobile-nav__close {
  background: none;
  border: 0;
  color: var(--key-white);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 4px;
}
.mobile-nav__list {
  list-style: none;
  margin: auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mobile-nav__list a {
  color: var(--key-white);
  text-decoration: none;
  font-size: clamp(28px, 8vw, 40px);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-heading);
  line-height: 1.1;
}
.mobile-nav__foot { padding-top: var(--space-5); border-top: 1px solid var(--border-on-dark); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--key-black);
  color: var(--text-on-dark);
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--space-6));
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--key-black);
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dunkle Abdeckung, damit weisse Schrift immer 4.5:1 erreicht */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
/* Pause-Knopf für das Hintergrundvideo — oben rechts unter der Kopfleiste, über der Abdeckung */
.hero__pause {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--header-h) + var(--space-4));
  z-index: 3;
}
.hero__pause[hidden] { display: none; }
.hero__inner { position: relative; z-index: 2; width: 100%; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Hero auf dem Handy: ruhiger.
   Kleinere Schrift, weniger Zeilen, und der Inhalt sitzt am unteren Rand des
   ersten Bildschirms — die Buttons sind das Letzte, was ohne Scrollen zu
   sehen ist. Die Faktenzeile rutscht dadurch bewusst unter die Kante.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .hero { min-height: 0; padding-top: 0; }
  .hero__inner {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: calc(var(--header-h) + var(--space-6));
    padding-bottom: var(--space-6);
  }
  /* Ausgemessen bei 375px Breite: 25px ergibt drei Zeilen, 30px vier.
     Zwei Zeilen braeuchten 20px — kleiner als der Fliesstext (17px) und
     damit fuer eine H1 unbrauchbar. Daher drei Zeilen bei 25px. */
  .hero .display {
    font-size: clamp(30px, 8.5vw, 44px);
    line-height: 0.95;
    letter-spacing: -0.04em;
    max-width: none;
  }
  .br-desktop { display: none; }

  .hero .lead {
    font-size: 16px;
    line-height: 1.5;
    margin-top: var(--space-3);
    max-width: 30ch;
  }
  .hero .btn-row { margin-top: var(--space-4); }
  .hero__facts { margin-top: 0; }
}
.hero__content { max-width: 20ch; }
/* Nur ab Tablet — auf dem Handy gilt der Block weiter oben, der die
   Schrift kleiner setzt. Ohne diese Grenze wuerde die Regel ihn ueberschreiben,
   weil sie spaeter in der Datei steht. */
@media (min-width: 900px) {
  .hero .display { max-width: none; font-size: clamp(36px, 3.4vw, 54px); line-height: 0.98; letter-spacing: -0.035em; text-wrap: normal; }
  .hero .lead { margin-top: var(--space-4); max-width: 52ch; }
  .hero .btn-row { margin-top: var(--space-5); }
}

.hero__facts {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin-top: clamp(48px, 8vw, 96px);
  border-top: 1px solid var(--border-on-dark);
  padding-block: var(--space-4);
}
.hero__facts-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .hero__facts-grid { grid-template-columns: repeat(3, 1fr); }
}
.hero__fact dt {
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--key-gray);
  margin-bottom: 6px;
}
.hero__fact dd { margin: 0; font-size: 15px; color: var(--key-white); line-height: 1.5; }

/* --------------------------------------------------------------------------
   10. Vollflaechige Bild-/Video-Breaker
   -------------------------------------------------------------------------- */
.breaker {
  position: relative;
  min-height: clamp(420px, 72vh, 760px);
  display: flex;
  align-items: flex-end;
  background: var(--key-black);
  color: var(--text-on-dark);
  overflow: hidden;
}
.breaker__media { position: absolute; inset: 0; z-index: 0; }
.breaker__media img,
.breaker__media video { width: 100%; height: 100%; object-fit: cover; }
/* Abdeckung so stark, dass weiße Schrift auch über hellen Motiven 4.5:1 erreicht. */
.breaker__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.58); }
.breaker__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(40px, 6vw, 72px); }
.breaker__quote {
  font-size: clamp(24px, 3.6vw, 44px);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--key-white);
  max-width: 20ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. Media-Platzhalter (bis echte Dateien vorliegen)
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  background: var(--key-black);
  overflow: hidden;
}
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--21x9 { aspect-ratio: 21 / 9; }
/* Nur direkte Kinder — das Chevron im Platzhalter behält seine Größe. */
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; }
.media--rounded { border-radius: var(--radius-lg); }

.media-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--key-black);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.media-ph__mark {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  opacity: 0.4;
}
.media-ph__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--key-gray);
  text-align: center;
  padding-inline: var(--space-3);
}

/* --------------------------------------------------------------------------
   12. Leistungen
   -------------------------------------------------------------------------- */
.service {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service__num {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--weight-bold);
  color: var(--text-body);
  margin-bottom: var(--space-4);
}
.service h3 { margin-bottom: var(--space-3); font-size: clamp(24px, 2.2vw, 30px); }
.service p { margin-bottom: var(--space-4); }
.service .chev-list { margin-top: auto; }

/* --------------------------------------------------------------------------
   12b. Ablauf als Sticky-Scroll
   Auf dem Desktop bleibt das Bild stehen und wechselt, waehrend die Schritte
   daran vorbeiscrollen. Auf dem Handy bekommt jeder Schritt sein eigenes Bild —
   Sticky lohnt sich auf kleinen Schirmen nicht.
   -------------------------------------------------------------------------- */
.flow { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .flow { grid-template-columns: 5fr 6fr; gap: var(--space-8); align-items: start; }
}

.flow__visual { display: none; }
@media (min-width: 900px) {
  .flow__visual {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}
.flow__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--key-ink);
  border: 1px solid var(--border-subtle);
}
.flow__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms var(--ease-standard);
}
.flow__frame img[data-active="true"] { opacity: 1; }

/* Fortschritt unter dem Bild */
.flow__ticks { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.flow__tick {
  flex: 1;
  height: 2px;
  background: var(--border-subtle);
  transition: background var(--dur-base) var(--ease-standard);
}
.flow__tick[data-active="true"] { background: var(--accent); }

.flow__steps { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .flow__steps { gap: 0; }
  .flow__step { min-height: 68vh; display: flex; flex-direction: column; justify-content: center; }
}

.flow__step { border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }
@media (min-width: 900px) { .flow__step { border-top: 0; padding-top: 0; } }

.flow__num {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--weight-bold);
  color: var(--accent);
  margin-bottom: var(--space-3);
}
/* Die Botschaft steht fuer sich — bewusst gross.
   Die Zeilenbegrenzung gilt erst ab Tablet: auf dem Handy erzwaengen 16 Zeichen
   sonst einen vierzeiligen Flattersatz. */
.flow__step h3 {
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
@media (min-width: 900px) {
  .flow__step h3 { max-width: 16ch; }
}
.flow__step p { color: rgba(255, 255, 255, 0.78); max-width: 42ch; }

/* --------------------------------------------------------------------------
   Faktenliste — ersetzt Fliesstext, wo es eigentlich um drei harte Angaben geht.
   Wiederverwendbar: ueberall dort, wo ein Absatz in Wahrheit eine Aufzaehlung ist.
   -------------------------------------------------------------------------- */
.facts { margin: var(--space-5) 0 0; display: grid; gap: 0; }
.facts > div {
  padding-block: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 4px;
}
@media (min-width: 620px) {
  .facts > div { grid-template-columns: 13ch 1fr; gap: var(--space-4); align-items: baseline; }
}
.facts dt {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--key-gray);
}
.facts dd { margin: 0; color: var(--text-strong); font-size: 16px; line-height: 1.5; }
.section--light .facts > div { border-top-color: var(--key-border); }
.section--light .facts dt { color: var(--key-graphite); }
.section--light .facts dd { color: var(--key-black); }

/* Bild je Schritt — nur auf schmalen Schirmen */
.flow__step-media { margin: var(--space-4) 0 0; }
@media (min-width: 900px) { .flow__step-media { display: none; } }

/* Ablauf 01 / 02 / 03 */
.step { border-top: 1px solid var(--border-on-dark); padding-top: var(--space-4); }
.step__num {
  font-size: var(--fs-h3);
  font-weight: var(--weight-bold);
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-3);
  line-height: 1;
}
.step h3 { margin-bottom: var(--space-2); }
.step p { color: rgba(255, 255, 255, 0.78); font-size: 16px; }

/* --------------------------------------------------------------------------
   13. Pakete
   -------------------------------------------------------------------------- */
.plans { display: grid; gap: var(--space-4); align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--pad-card);
  position: relative;
}
/* Das hervorgehobene Paket ist die einzige helle Flaeche der Seite —
   dadurch ist ohne weitere Mittel klar, welches gemeint ist. */
.plan--featured {
  background: var(--key-white);
  color: var(--key-graphite);
  border-color: var(--key-white);
}
.plan--featured h3 { color: var(--key-black); }
.plan--featured .plan__price { color: var(--key-black); }
.plan--featured .plan__desc,
.plan--featured .plan__note { color: var(--key-graphite); }
.plan--featured .chev-list { color: var(--key-graphite); }
.plan--featured .chev-list li::before { color: var(--key-black); }
.plan--featured .plan__kpi { border-color: var(--key-border); }
.plan--featured .plan__kpi-value { color: var(--key-black); }
.plan--featured .plan__kpi-label { color: var(--key-graphite); }

.plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
/* In der schmalen Wisch-Karte passen Titel und Badge nicht nebeneinander —
   die Badge ragte sonst aus der Karte heraus. Dort steht sie darueber. */
@media (max-width: 700px) {
  .plan__head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-2);
  }
}
.plan__price {
  font-size: clamp(34px, 3.4vw, 44px);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--text-strong);
  margin-block: var(--space-3) 4px;
  display: block;
}
.plan__price span { font-size: 17px; font-weight: var(--weight-regular); letter-spacing: 0; }
.plan__desc { font-size: 16px; color: var(--text-body); margin-bottom: var(--space-4); }

.plan__kpi {
  border-block: 1px solid var(--border-subtle);
  padding-block: var(--space-3);
  margin-bottom: var(--space-4);
}
.plan__kpi-value {
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.03em;
  font-weight: var(--weight-bold);
  line-height: 1.1;
  color: var(--text-strong);
  display: block;
}
.plan__kpi-label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--text-body);
  margin-top: 6px;
  display: block;
}
.plan .chev-list { font-size: 16px; }
.plan__foot { margin-top: auto; padding-top: var(--space-5); }
.plan__foot .btn { width: 100%; }
.plan__note { font-size: var(--fs-small); color: var(--text-body); margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Zusatzmodule als Karten
   Vorher eine Liste mit Trennlinien — als gleich grosse Kacheln liest es sich
   ruhiger und wirkt wie ein Baukasten statt wie eine Aufzaehlung.
   -------------------------------------------------------------------------- */
.modules { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .modules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .modules { grid-template-columns: repeat(4, 1fr); } }

.module {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 148px;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.module:hover { border-color: rgba(255, 255, 255, 0.42); }
.module__num {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--weight-bold);
  color: var(--accent);
}
.module__name {
  margin-top: auto;
  font-size: 17px;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: 1.35;
}
.section--light .module { border-color: var(--key-border); }
.section--light .module:hover { border-color: var(--key-black); }
.section--light .module__num { color: var(--key-graphite); }
.section--light .module__name { color: var(--key-black); }

/* --------------------------------------------------------------------------
   14. Referenzen & Cases
   -------------------------------------------------------------------------- */
/* Projekt-Raster — bewusst gleichmäßig. Eine Kachel = ein Projekt.
   Ab Tablet ein Raster: alle Projekte auf einen Blick, das ist bei einem
   Portfolio der Punkt. Auf dem Handy stattdessen horizontal wischen, weil
   sieben gestapelte Kacheln dort eine sehr lange Strecke ergeben. */
.projects {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .projects { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   WISCH-REIHE — wiederverwendbar
   Drei- und Mehrspalter stapeln sich auf dem Handy zu sehr langen Strecken.
   Statt untereinander liegen die Karten dort nebeneinander und werden
   gewischt. Ab 560px greift wieder das jeweilige Raster.

   Anwenden: den Container zusaetzlich mit .swipe-row auszeichnen und in
   <div class="swipe-wrap"> huellen. Der Hinweis-Pfeil ist optional:
     <span class="swipe-hint" aria-hidden="true">
       <img src="assets/ds/assets/logo/key-chevron-white.svg" alt="" width="16" height="16">
     </span>
   Reines CSS-Scrollen — mit Tastatur und Screenreader ohnehin bedienbar.
   ========================================================================== */
.swipe-wrap { position: relative; }
.swipe-hint { display: none; }

@media (max-width: 559px) {
  /* Jede Karte rastet mittig ein — auch die erste und die letzte.
     Dafuer muessen die Masse auf die Fensterbreite bezogen sein (vw), nicht
     auf den Container: bei 78vw Kartenbreite bleiben links und rechts je 11vw,
     genau die Innenabstaende. Sonst koennten Anfang und Ende nicht in die
     Mitte rutschen. */
  .swipe-row {
    --karte: 78vw;
    --rand: calc((100vw - var(--karte)) / 2);

    grid-auto-flow: column;
    grid-auto-columns: var(--karte);
    grid-template-columns: none;
    gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* bis an den Fensterrand ziehen */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--rand);
    scroll-padding-inline: var(--rand);
    scrollbar-width: none;
  }
  .swipe-row::-webkit-scrollbar { display: none; }
  .swipe-row > * { scroll-snap-align: center; }

  /* Der Hinweis — das Chevron ist die Bildmarke, also nehmen wir sie auch hier.
     Rein visuell: aria-hidden und nicht anklickbar. */
  .swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 4px;
    top: 40%;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.28);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-standard);
  }
  .swipe-hint img { width: 16px; height: 16px; }

  /* Weg, sobald verstanden — oder wenn es gar nichts zu scrollen gibt. */
  .swipe-wrap[data-scrolled="true"] .swipe-hint,
  .swipe-wrap[data-scrollable="false"] .swipe-hint { opacity: 0; }
}

/* Auf hellem Grund (Pakete) muss der Hinweis andersherum. */
@media (max-width: 559px) {
  .section--light .swipe-hint {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.2);
  }
  .section--light .swipe-hint img { filter: invert(1); }
}

/* Kleiner Stups statt Blinken. Unter "Bewegung reduzieren" faellt er weg. */
@media (prefers-reduced-motion: no-preference) {
  .swipe-hint img { animation: hint-nudge 2.6s var(--ease-standard) infinite; }
}
@keyframes hint-nudge {
  0%, 60%, 100% { transform: translateX(0); }
  30% { transform: translateX(4px); }
}

.project__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  color: inherit;
}
.project__cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--key-black);
  border: 1px solid var(--border-on-dark);
}
.project__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.project__trigger:hover .project__cover img { opacity: 0.55; }

/* Hinweis, dass sich etwas öffnet — erscheint beim Hover und bei Tastaturfokus */
.project__open {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.project__trigger:hover .project__open,
.project__trigger:focus-visible .project__open { opacity: 1; transform: none; }

.project__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.project__name {
  font-size: 18px;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: 1.3;
}
.project__name { color: var(--key-white); }
.project__tag {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-body);
  margin-top: 4px;
}
.project__tag { color: var(--key-gray); }
.project__count {
  flex-shrink: 0;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--key-gray);
}

/* ==========================================================================
   REFERENZ-BÜHNE — vollflächig, angedockt
   Ab Tablet: Der Streifen bleibt am oberen Rand stehen, waehrend man scrollt.
   Das Hintergrundmedium blendet um, der Text darauf wechselt mit.
   Die Scrollstrecke liefern unsichtbare Abschnitte unter der Buehne; die
   Buehne selbst zieht sich per negativem Aussenabstand aus dem Fluss, damit
   nicht ein Bildschirm zusaetzlich entsteht.

   Auf dem Handy faellt das Andocken weg — dort werden dieselben Folien zu
   einer Wisch-Reihe. Sonst waeren sieben Projekte sieben Bildschirme.
   ========================================================================== */
/* Die Scrollstrecke kommt aus der Hoehe der Buehne.
   Ein Bildschirm mehr als Projekte: die angedockte Flaeche wandert nur
   (Hoehe − ein Bildschirm), sonst bekaeme das letzte Projekt keinen Zug ab.
   --anzahl setzt das HTML. */
.stage {
  position: relative;
  height: calc((var(--anzahl, 5) + 1) * 100svh);
}

.stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--key-black);
}

/* Marker fuer den Beobachter — liegen ueber der Buehne, ohne sie zu stoeren. */
.stage__steps {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-rows: repeat(var(--anzahl, 5), 1fr);
}

.stage__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 620ms var(--ease-standard);
  display: flex;
  align-items: flex-end;
}
.stage__slide[data-active="true"] { opacity: 1; }
/* Nur die sichtbare Folie ist bedienbar. */
.stage__slide { pointer-events: none; }
.stage__slide[data-active="true"] { pointer-events: auto; }

.stage__media { position: absolute; inset: 0; z-index: 0; }
.stage__media img,
.stage__media video { width: 100%; height: 100%; object-fit: cover; }
/* Abdeckung: weisse Schrift erreicht so auch ueber hellen Motiven 4.5:1. */
.stage__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.58); }

.stage__text {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(72px, 12vh, 132px);
}
.stage__name {
  font-size: clamp(30px, 5vw, 60px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--key-white);
  margin: var(--space-3) 0 var(--space-3);
  max-width: 16ch;
}
.stage__claim {
  color: rgba(255, 255, 255, 0.85);
  max-width: 44ch;
  margin-bottom: var(--space-5);
}
/* Partnernennung bei gemeinsamen Projekten — auch auf dem Handy sichtbar */
.stage__partner {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-small);
  margin: calc(var(--space-3) * -1) 0 var(--space-4);
}

/* Fortschritt: ein Strich je Projekt, unten am Rand */
.stage__ticks {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  gap: 4px;
  padding: 0 var(--gutter) var(--space-5);
  max-width: var(--wrap);
  margin-inline: auto;
}
.stage__tick {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
  transition: background var(--dur-base) var(--ease-standard);
}
.stage__tick[data-active="true"] { background: var(--accent); }

.stage__zaehler {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: calc(var(--space-5) + 14px);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--weight-bold);
  color: var(--accent);
}

/* --- Handy: keine Buehne, sondern Wisch-Reihe aus denselben Folien --- */
@media (max-width: 899px) {
  .stage { height: auto; }
  .stage__pin {
    position: static;
    height: auto;
    margin-bottom: 0;
    overflow: visible;
    background: none;

    --karte: 82vw;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--karte);
    gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: calc((100vw - var(--karte)) / 2);
    scroll-padding-inline: calc((100vw - var(--karte)) / 2);
    scrollbar-width: none;
  }
  .stage__pin::-webkit-scrollbar { display: none; }

  .stage__slide {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    scroll-snap-align: center;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .stage__text { padding: 0 var(--space-4) var(--space-4); }
  .stage__name { font-size: clamp(22px, 5.6vw, 30px); margin-block: var(--space-2); }
  .stage__claim { display: none; }
  .stage__steps, .stage__ticks, .stage__zaehler { display: none; }
}

/* --------------------------------------------------------------------------
   14b. Projekt-Galerie (Overlay)
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--key-black);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-standard),
              visibility 0s linear var(--dur-base);
}
.lightbox[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-standard), visibility 0s;
}
/* Muss die eigene display-Regel schlagen, sonst wirkt das hidden-Attribut nicht. */
.lightbox[hidden] { display: none; }

.lightbox__bar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter);
  border-bottom: 1px solid var(--border-on-dark);
}
.lightbox__title { font-size: clamp(18px, 2.2vw, 24px); color: var(--key-white); margin: 0; }
.lightbox__tag { font-size: var(--fs-small); color: var(--key-gray); margin-top: 4px; }
.lightbox__close {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-pill);
  color: var(--key-white);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.12); }

.lightbox__stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--gutter);
}
.lightbox__slide {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.lightbox__slide[data-active="true"] { display: flex; }
.lightbox__slide img,
.lightbox__slide video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Blättern */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border-on-dark);
  background: rgba(0, 0, 0, 0.6);
  color: var(--key-white);
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard);
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.16); }
.lightbox__nav[disabled] { opacity: 0.3; cursor: default; }
.lightbox__nav--prev { left: max(12px, calc(var(--gutter) / 2)); }
.lightbox__nav--next { right: max(12px, calc(var(--gutter) / 2)); }

.lightbox__foot {
  flex-shrink: 0;
  padding: var(--space-3) var(--gutter) var(--space-4);
  border-top: 1px solid var(--border-on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.lightbox__caption { font-size: var(--fs-small); color: var(--key-gray); max-width: 70ch; }
.lightbox__counter {
  flex-shrink: 0;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--weight-bold);
  color: var(--accent);
}

/* Miniaturen */
.lightbox__thumbs {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 0 var(--gutter) var(--space-4);
  scrollbar-width: thin;
}
.lightbox__thumb {
  flex: 0 0 auto;
  width: 84px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--border-on-dark);
  background: var(--key-black);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
  opacity: 0.55;
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb:hover { opacity: 0.85; }
.lightbox__thumb[aria-current="true"] { border-color: var(--accent); opacity: 1; }

@media (max-width: 640px) {
  .lightbox__thumbs { display: none; }
  .lightbox__stage { padding-inline: var(--space-3); }

  /* Pfeile unter das Medium, sonst liegen sie auf der Video-Steuerung.
     Bezug ist dadurch das Overlay selbst, nicht mehr die Bühne. */
  .lightbox__stage { position: static; }
  .lightbox__nav {
    width: 48px;
    height: 48px;
    top: auto;
    bottom: var(--space-4);
    transform: none;
  }
  .lightbox__nav--prev { left: var(--gutter); }
  .lightbox__nav--next { right: var(--gutter); }

  .lightbox__foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding-bottom: calc(48px + var(--space-4) * 2);
  }
}

/* Die Galerie-Daten stehen im HTML, werden aber nicht direkt angezeigt. */
.project__data { display: none; }

.case {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-5);
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .case { grid-template-columns: 5fr 7fr; gap: var(--space-6); align-items: start; }
}
.case__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--text-body);
  margin-bottom: var(--space-3);
  display: block;
}
.case h3 { margin-bottom: var(--space-3); }

/* Die Kennzahl ist die Botschaft — sie steht vor der Erzaehlung, nicht dahinter. */
.case__hero {
  margin: var(--space-5) 0 var(--space-4);
}
.case__hero-value {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}
.case__hero-label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--accent);
}
.case__claim {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  max-width: 38ch;
}

/* Aufklappen: längere Inhalte stehen im HTML, sind aber erst auf Wunsch sichtbar.
   Farbe kommt aus dem Umfeld (currentColor), funktioniert auf Hell und Dunkel. */
.mehr { border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 22%, transparent); }
.mehr summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding-block: var(--space-3);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary:hover { opacity: 0.6; }
.mehr summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-standard);
}
.mehr[open] summary::after { transform: rotate(45deg); }
.mehr > *:last-child { padding-bottom: var(--space-3); }
.service .mehr { margin-top: auto; }
.service .mehr .chev-list { margin-top: 0; }

/* Die ganze Geschichte bleibt im HTML — auffindbar, aber eingeklappt. */
.case__more { margin-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.case__more summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-strong);
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.case__more summary::-webkit-details-marker { display: none; }
.case__more summary:hover { opacity: 0.6; }
.case__more summary::after {
  content: "+";
  font-size: 18px;
  line-height: 1;
}
.case__more[open] summary::after { content: "\2013"; }
.case__more p { max-width: 60ch; }
.case__more p + p { margin-top: var(--space-3); }
.case__more > *:last-child { padding-bottom: var(--space-4); }

.kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (min-width: 620px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi__value {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--text-strong);
  display: block;
}
.kpi__label {
  font-size: var(--fs-small);
  color: var(--text-body);
  margin-top: 8px;
  display: block;
  line-height: 1.4;
}


/* --------------------------------------------------------------------------
   15. Ueber / Region
   -------------------------------------------------------------------------- */
.about { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .about { grid-template-columns: 5fr 7fr; gap: var(--space-7); align-items: center; } }

.region-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.region-list li {
  font-size: var(--fs-small);
  padding: 6px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-body);
}


/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--border-subtle); }
.faq__item { border-bottom: 1px solid var(--border-subtle); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: 1.4;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { opacity: 0.6; }
.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-weight: var(--weight-bold);
  font-size: 24px;
  line-height: 1.1;
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__answer { padding-bottom: var(--space-4); max-width: 72ch; color: var(--text-body); }

/* --------------------------------------------------------------------------
   17. Kontakt / Formular
   -------------------------------------------------------------------------- */
.contact { display: grid; gap: var(--space-6); }
@media (min-width: 940px) { .contact { grid-template-columns: 5fr 6fr; gap: var(--space-7); } }

.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--weight-bold);
  color: var(--key-white);
  margin-bottom: 8px;
}
.field .hint { font-weight: var(--weight-regular); color: var(--key-gray); }
.field input,
.field textarea,
.field select {
  width: 100%;
  color-scheme: dark;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--key-white);
  background: transparent;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.field input::placeholder, .field textarea::placeholder { color: #888888; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: rgba(255, 255, 255, 0.4); }
.field textarea { min-height: 130px; resize: vertical; }

/* Spamschutz-Feld: fuer Menschen unsichtbar, fuer Bots ausfuellbar.
   Bewusst nicht display:none — manche Bots ueberspringen versteckte Felder. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rueckmeldungen zum Versand */
.form-hinweis {
  font-size: var(--fs-small);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
.form-hinweis:empty { display: none; }
.form-hinweis--fehler { color: var(--accent); }
.section--accent .form-hinweis--fehler { color: var(--key-black); font-weight: var(--weight-bold); }

.form-danke {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--pad-card);
}
.section--accent .form-danke { border-color: rgba(0, 0, 0, 0.28); }
.section--accent .form-danke .chev-rule { color: var(--key-black); }

/* Waehrend des Sendens */
.btn[data-sendet="true"] { opacity: 0.6; pointer-events: none; }

.checkbox-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--space-4); }
/* 24px statt 20px — Mindestgroesse fuer Tippziele nach WCAG 2.5.8. */
.checkbox-row input { width: 24px; height: 24px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.checkbox-row label { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.8); line-height: 1.55; font-weight: var(--weight-regular); }
/* Der Link im Einwilligungstext braucht ebenfalls 24px Hoehe. */
.checkbox-row a {
  color: var(--key-white);
  display: inline-block;
  padding-block: 5px;
}

.contact-direct { margin: var(--space-5) 0 0; padding: 0; }
.contact-direct > div { padding-block: var(--space-3); border-top: 1px solid var(--border-on-dark); }
.contact-direct dt {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--key-gray);
  margin-bottom: 6px;
}
.contact-direct dd { margin: 0; font-size: 18px; }
/* Mindesthoehe 24px fuer Telefon- und Mailadresse — Tippziel nach WCAG 2.5.8. */
.contact-direct dd a {
  color: var(--key-white);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.contact-direct dd a:hover { border-bottom-color: var(--accent); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--key-black); color: var(--key-gray); padding-block: var(--space-6) var(--space-5); }
.site-footer__grid { display: grid; gap: var(--space-5); }
@media (min-width: 780px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); } }
.site-footer img { height: 30px; width: auto; }
.site-footer h2 {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--key-gray);
  margin-bottom: var(--space-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
/* inline-flex mit Mindesthoehe: sonst sind die Links nur 18px hoch und
   damit unter der Mindestgroesse fuer Tippziele. */
.site-footer a {
  color: var(--key-white);
  text-decoration: none;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.site-footer a:hover { opacity: 0.6; }
.site-footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  justify-content: space-between;
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   19. Rechtsseiten (Impressum, Datenschutz, Barrierefreiheit)
   -------------------------------------------------------------------------- */
.legal { padding-top: calc(var(--header-h) + var(--space-7)); }
.legal h1 { margin-bottom: var(--space-5); }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.legal h3 { font-size: 19px; margin-top: var(--space-5); margin-bottom: var(--space-2); }
.legal p, .legal li { color: var(--text-body); }
.legal p + p { margin-top: var(--space-3); }
.legal ul, .legal ol { padding-left: 20px; margin: var(--space-3) 0; }
.legal ol > li { margin-bottom: 10px; }
.legal li { margin-bottom: 8px; }
.legal .todo {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   20. Leise Bewegung — Reveal beim Scrollen
   -------------------------------------------------------------------------- */
/* Ohne JavaScript bleibt alles sichtbar — die Klasse "js" setzt das Skript im <head>.
   Steuerung in assets/js/bewegung.js. --reihe staffelt, was gleichzeitig sichtbar wird. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-standard), transform 900ms var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.js .reveal.is-in { opacity: 1; transform: none; transition-delay: calc(var(--reihe, 0) * 90ms); }
.js .reveal.sofort { transition: none; }

/* Bilder setzen sich beim Einblenden: von leicht vergrößert auf normal */
.js .reveal .media img,
.js .reveal.media img {
  transform: scale(1.06);
  transition: transform 1400ms var(--ease-standard);
}
.js .reveal.is-in .media img,
.js .reveal.is-in.media img { transform: none; }

/* Überschriften steigen wortweise aus einer Maske */
.maske .wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.maske .wort > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-standard);
  transition-delay: calc(var(--reihe, 0) * 90ms + var(--w, 0) * 40ms);
}
.maske.ist-da .wort > span { transform: none; }
.maske.sofort .wort > span { transition: none; }

/* Hochzählende Zahlen: gleich breite Ziffern, damit nichts springt */
.plan__kpi-value { font-variant-numeric: tabular-nums; }

/* Hero: Video setzt sich beim Laden */
.js .hero__media video,
.js .hero__media img { animation: hero-setzen 2200ms var(--ease-standard) both; }
@keyframes hero-setzen { from { transform: scale(1.08); } }
.hero__inner { will-change: opacity, transform; }
/* Hero-Inhalte treten nach dem Titel nacheinander auf */
.js .hero__text > .eyebrow,
.js .hero__text > .lead,
.js .hero__unten > .btn-row,
.js .hero__facts { animation: auftreten 900ms var(--ease-standard) both; }
.js .hero__text > .eyebrow { animation-delay: 700ms; }
.js .hero__text > .lead { animation-delay: 1050ms; }
.js .hero__unten > .btn-row { animation-delay: 1150ms; }
.js .hero__facts { animation-delay: 1350ms; }
@keyframes auftreten { from { opacity: 0; transform: translateY(20px); } }

/* Karten reagieren: kleiner Weg nach oben, Rand wird deutlicher */
.service,
.plan {
  transition: transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
@media (hover: hover) {
  .service:hover, .js .reveal.is-in.service:hover,
  .plan:hover, .js .reveal.is-in.plan:hover {
    transform: translateY(-4px);
    transition-duration: var(--dur-base);
    transition-delay: 0s;
  }
  .service:hover,
  .plan:not(.plan--featured):hover { border-color: var(--key-gray); }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .reveal .media img, .js .reveal.media img { transform: none; transition: none; }
  .maske .wort > span { transform: none; transition: none; }
  .js .hero__media video, .js .hero__media img,
  .js .hero__text > *, .js .hero__unten > .btn-row, .js .hero__facts { animation: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Utilities */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   Paket-Popup
   -------------------------------------------------------------------------- */
button.link-chev {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.pkgmodal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-standard),
              visibility 0s linear var(--dur-base);
}
.pkgmodal[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.pkgmodal[hidden] { display: none; }
.pkgmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.pkgmodal__panel {
  position: relative;
  z-index: 1;
  width: min(1160px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface-page);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.pkgmodal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.pkgmodal__title { margin: 0; font-size: clamp(26px, 3vw, 40px); }
.pkgmodal__close {
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--text-strong);
}
.pkgmodal__body .plans { margin-top: 0; }
.pkgmodal__foot { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-on-dark); }

/* ────────────────────────────────────────────────────────────────────
   ANZEIGEN-SCHAUFENSTER — Werbeanzeigen im Plattform-Kontext
   Zeigt Bild- und Video-Anzeigen in einem nachgebauten Meta-Rahmen.
   Neue Anzeige = einen .ad-phone-Block kopieren.
   ──────────────────────────────────────────────────────────────────── */
.adshow { margin-top: var(--space-7); scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
.adshow-carousel { position: relative; margin-top: var(--space-5); }
.adshow-grid {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.adshow-grid::-webkit-scrollbar { display: none; }
.ad-phone {
  flex: 0 0 min(300px, 74vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #111;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-on-dark);
}
/* Vor/Zurück-Buttons — erscheinen nur, wenn es etwas zu scrollen gibt */
.adshow-nav {
  position: absolute;
  top: 42%;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--key-white);
  color: var(--key-black);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.adshow-nav:hover { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.adshow-nav svg { display: block; }
.adshow-nav--prev { left: -14px; }
.adshow-nav--next { right: -14px; }
.adshow-nav[hidden] { display: none; }
.ad-phone__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.ad-phone__ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ad-phone__ava--ph { background: var(--accent); }
.ad-phone__id { line-height: 1.2; }
.ad-phone__name { font-size: 13px; font-weight: 700; }
.ad-phone__spon { font-size: 11px; color: #8a8a8a; }
.ad-phone__dots { margin-left: auto; color: #444; letter-spacing: 1px; }
.ad-phone__media { width: 100%; display: block; object-fit: cover; background: #eee; }
.ad-phone--feed .ad-phone__media { flex: 1; min-height: 0; height: auto; }
/* Grafik-Anzeigen tragen Text bis an den Rand — nie beschneiden */
.ad-phone__media--grafik { object-fit: contain; }
.ad-phone__actions { display: flex; align-items: center; gap: 14px; padding: 9px 12px 4px; color: #1a1a1a; }
.ad-phone__actions svg { display: block; }
.ad-phone__save { margin-left: auto; }
.ad-phone__cap { padding: 2px 12px 10px; font-size: 12px; line-height: 1.4; color: #222; }
.ad-phone__cap b { font-weight: 700; }
.ad-phone__cta {
  margin: 0 12px 12px; padding: 9px; text-align: center;
  background: #f2f2f2; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; color: #111;
}
/* Story-Variante — vollflächiges Bild, Chrome liegt darüber */
.ad-phone--story { position: relative; aspect-ratio: 9 / 16; background: #000; }
.ad-phone--story .ad-phone__media { position: absolute; inset: 0; width: 100%; height: 100%; }
.ad-phone--story .ad-phone__bar { position: relative; z-index: 2; color: #fff; }
.ad-phone--story .ad-phone__spon { color: rgba(255,255,255,.75); }
.ad-phone__progress { position: relative; z-index: 2; display: flex; gap: 4px; padding: 10px 12px 0; }
.ad-phone__progress span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); }
.ad-phone__progress span.is-on { background: rgba(255,255,255,.95); }
.ad-phone__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 62%, rgba(0,0,0,.6) 100%); }
.ad-phone__play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; color: #fff; }
.ad-phone--story .ad-phone__cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 12px; background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(2px); }
/* Hinweis-Fußzeile */
.adshow__note { margin-top: var(--space-4); }

@media (max-width: 640px) {
  .adshow-grid { gap: var(--space-3); }
  .adshow-nav { display: none; }
}

/* --------------------------------------------------------------------------
   21. Figuren — isometrische Strichfiguren (assets/js/figuren.js)
   Je Leistung eine Figur oben in der Karte, dazu die Klappe nach dem Absenden.
   Seitenverhältnis 16:10 passt zu data-verhaeltnis="1.6" im HTML.
   -------------------------------------------------------------------------- */
.figur { aspect-ratio: 16 / 10; width: 100%; }
.figur svg { display: block; width: 100%; height: 100%; }
/* Feste Höhe, damit Überschriften in den Leistungskarten auf einer Linie bleiben,
   auch wenn die Karten unterschiedlich breit sind. */
.figur--buehne {
  aspect-ratio: auto;
  height: 168px;
  background: var(--surface-inverse);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}
.figur--danke { max-width: 240px; }
/* Über uns: Weiden als größere Bühne über der Ortsliste */
/* Über uns: Weiden als quadratische Bühne anstelle eines Fotos */
.figur--weiden { height: auto; aspect-ratio: 1 / 1; margin: 0; border-radius: var(--radius-lg); }

/* --------------------------------------------------------------------------
   22. Version 1 (Oktober 2026) — Bausteine ohne Fotos
   -------------------------------------------------------------------------- */

/* Ablauf: drei Schritte, große Nummer, Linie darüber */
.schritte {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 800px) { .schritte { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.schritt {
  border-top: 1px solid var(--border-on-dark);
  padding-top: var(--space-4);
}
.schritt__nr {
  display: block;
  font-size: clamp(56px, 6vw, 96px);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--key-gray);
  margin-bottom: var(--space-4);
}
.schritt h3 { font-size: clamp(24px, 2.2vw, 30px); margin-bottom: var(--space-2); }
.schritt p { color: rgba(255, 255, 255, 0.72); max-width: 36ch; }

/* Medienproduktion: Formate als große, ruhige Liste */
.formate {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-on-dark);
}
.formate li {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-on-dark);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   23. Hero: „Videos. Fotos. Werbeanzeigen.“ mit Lichtkegel
   Zwei deckungsgleiche Ebenen im selben Rasterfeld:
     grau  = Grundschrift (#888 auf Schwarz, 5,9 : 1 — gut lesbar)
     licht = weiße Kopie, nur im Lichtkegel um den Mauszeiger sichtbar (Maske)
   „Werbeanzeigen.“ ist auf beiden Ebenen weiß: das Hauptprodukt.
   -------------------------------------------------------------------------- */
.wendung {
  display: grid;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  /* Breiteste Zeile „Werbeanzeigen.“ ≈ 7,3 Schriftgrößen. Größe = Breite / 7.6,
     höchstens 160 px (Inhaltsbreite 1.200 px) → füllt die Zeile, bricht nie um. */
  font-size: min(160px, calc((100vw - 2 * var(--gutter)) / 7.6));
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.wendung__ebene { grid-area: 1 / 1; display: block; color: var(--key-gray); }
.wendung__ebene--licht {
  color: var(--key-white);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--r, 240px) at var(--x, -9999px) var(--y, -9999px), #000 45%, transparent 100%);
          mask-image: radial-gradient(circle var(--r, 240px) at var(--x, -9999px) var(--y, -9999px), #000 45%, transparent 100%);
}
.wendung__zeile { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.wendung__teil { display: inline-block; }

.wendung__teil--hell { color: var(--key-white); }

/* Auftritt: Wort für Wort (Start bei Klasse .los am Absatz) */
.js .wendung__teil { transform: translateY(110%); }
.js .wendung.los .wendung__zeile:nth-child(1) .wendung__teil:nth-child(1) { animation: w-steigen 900ms var(--ease-standard) 100ms forwards; }
.js .wendung.los .wendung__zeile:nth-child(1) .wendung__teil:nth-child(2) { animation: w-steigen 900ms var(--ease-standard) 380ms forwards; }
.js .wendung.los .wendung__zeile:nth-child(2) .wendung__teil { animation: w-steigen 900ms var(--ease-standard) 700ms forwards; }
@keyframes w-steigen { to { transform: none; } }

/* Unterer Teil: Überschrift links, Buttons rechts (ab Tablet) */
.hero__unten { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.hero__text .eyebrow { margin-bottom: var(--space-3); }
.hero .hero__text .display { font-size: clamp(26px, 3.2vw, 48px); line-height: 1; letter-spacing: -0.03em; max-width: none; }
@media (max-width: 899px) { .hero .hero__text .display { font-size: 26px; } }
.hero .hero__text .lead { margin-top: var(--space-3); }
.hero .hero__unten .btn-row { margin-top: 0; }
@media (min-width: 900px) {
  .hero__unten { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-6); margin-top: var(--space-7); }
}

/* Reduzierte Bewegung: sofort Endzustand, kein Lichtkegel */
@media (prefers-reduced-motion: reduce) {
  .js .wendung__teil { transform: none; animation: none !important; }
  .wendung__ebene--licht { display: none; }
}

/* --------------------------------------------------------------------------
   24. Laufband — Leistungen als Umriss-Schrift
   Ruhiges Treiben (ca. 30 px/s), Scrollen schiebt mit, Wort unter der Maus
   füllt sich weiß. Läuft nur, solange das Band sichtbar ist.
   Bei reduzierter Bewegung steht es still.
   -------------------------------------------------------------------------- */
.laufband {
  overflow: hidden;
  padding-block: clamp(32px, 5vw, 72px);
  background: var(--key-black);
  border-block: 1px solid var(--border-on-dark);
}
.laufband__spur {
  display: flex;
  width: max-content;
  gap: 0.3em;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(64px, 13vw, 220px);
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  will-change: transform;
}
.laufband__wort {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
  transition: color var(--dur-base) var(--ease-standard),
              -webkit-text-stroke-color var(--dur-base) var(--ease-standard);
}
@media (hover: hover) {
  .laufband__wort:hover { color: var(--key-white); -webkit-text-stroke-color: var(--key-white); }
}
.laufband__trenner { color: var(--accent); }

/* --------------------------------------------------------------------------
   25. Hero-Feed im Hintergrund
   Spalten aus Beitrags-Kacheln (nur Linien, kaum sichtbar). Bewegung nur im
   Auftritt: scrollen → abbremsen → stehen. Eine Kachel wird zur Anzeige (Cyan).
   Liegt unter dem Text (z-index 0), rechts dichter als links, damit die
   Schrift links frei steht.
   -------------------------------------------------------------------------- */
.hero__feed {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--spalten, 6), 1fr);
  gap: clamp(10px, 1.4vw, 20px);
  padding-inline: var(--gutter);
  overflow: hidden;
  pointer-events: none;
  /* Links ausblenden, damit die Schrift ruhig steht */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
.feed__spalte { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 20px); will-change: transform; }
.feed__kachel {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 5;
  transition: border-color 900ms var(--ease-standard), background-color 900ms var(--ease-standard);
}
.feed__kachel--hoch { aspect-ratio: 9 / 16; }
.feed__kachel.treffer { border-color: var(--accent); background-color: rgba(66, 227, 255, 0.14); }
/* Glimmen: schnell an (180 ms), langsam aus (900 ms) */
.feed__kachel.blitz {
  border-color: var(--accent);
  background-color: rgba(66, 227, 255, 0.1);
  transition-duration: 180ms;
}
@media (max-width: 899px) {
  .hero__feed {
    --spalten: 3;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 70%);
            mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 70%);
  }
}