/* ============== RESET ============== */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
  body {
    margin: 0;
    font-family: var(--ff);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-black);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: var(--c-green); text-decoration: none; transition: color var(--t-fast); }
  a:hover { color: var(--c-green-dark); text-decoration: underline; }
  button { font-family: inherit; cursor: pointer; border: 0; background: none; }
  h1,h2,h3,h4,p { margin: 0; }
  ::selection { background: var(--c-green); color: #fff; }

  /* ============== TYPO ============== */
  .display { font-size: var(--fs-display); font-weight: 900; line-height: var(--lh-display); letter-spacing: -0.02em; text-wrap: balance; }
  .h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -0.015em; text-wrap: balance; }
  .h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -0.01em; text-wrap: balance; }
  .section--dark .h2 { color: var(--c-white); }
  .h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
  .h4 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.35; }
  .overline {
    font-size: var(--fs-overline); font-weight: 500; line-height: 1.4;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-green);
  }
  .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }

  /* ============== LAYOUT ============== */
  .container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding-left: var(--pad-side);
    padding-right: var(--pad-side);
  }
  .section { padding-top: var(--s24); padding-bottom: var(--s24); }
  @media (max-width: 767px) { .section { padding-top: var(--s16); padding-bottom: var(--s16); } }
  .section--white  { background: var(--c-white);     color: var(--c-black); }
  .section--dark   { background: var(--c-anthracite-dark); color: var(--c-white); }

  /* Standort-Block — gemeinsame Komponente fuer ueber-bit-feed und kontakt
     (Phase 2.5: zuvor verbatim auf 2 Pages dupliziert). Markup als
     site/partials/standort.html, daher kein Inhalts-Drift moeglich. */
  .standort {
    display: grid; grid-template-columns: 2fr 3fr;
    gap: var(--s12); align-items: start;
  }
  @media (max-width: 1023px) {
    .standort { grid-template-columns: 1fr; gap: var(--s8); }
  }
  .standort__info h2 { color: #fff; margin-bottom: var(--s4); }
  .standort__info .body-lg {
    color: rgba(255,255,255,0.78);
    margin-bottom: var(--s8);
    max-width: 460px;
  }
  .standort__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: var(--s4);
  }
  .standort__list li {
    display: grid; grid-template-columns: 110px 1fr;
    gap: var(--s4); align-items: baseline;
    color: rgba(255,255,255,0.92);
  }
  @media (max-width: 767px) {
    .standort__list li { grid-template-columns: 1fr; gap: 2px; }
  }
  .standort__list .label {
    font-family: var(--ff-mono); font-size: 12px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  .standort__list a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); }
  .standort__list a:hover { color: var(--c-green); border-color: var(--c-green); }
  /* OSM Click-to-Load: Wrapper traegt die feste Hoehe, das iframe wird erst
     per JS hineingehaengt. Identische Dimensionen verhindern Layout-Shift
     beim Uebergang Placeholder -> Karte. */
  .osm-embed {
    position: relative;
    width: 100%; height: 400px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    overflow: hidden;
    background-color: var(--c-anthracite-dark);
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  .osm-embed iframe {
    display: block; width: 100%; height: 100%; border: 0;
  }
  .osm-embed__placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--s4); padding: var(--s6);
    text-align: center;
  }
  .osm-embed__notice {
    margin: 0; max-width: 36ch;
    font-size: 14px; color: rgba(255,255,255,0.78);
    line-height: var(--lh-body);
  }
  .osm-embed__hint {
    margin: 0; font-size: 13px;
    color: rgba(255,255,255,0.55);
  }
  .osm-embed__hint a {
    color: rgba(255,255,255,0.85);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .osm-embed__hint a:hover { color: var(--c-green); }
  .osm-embed.is-loaded .osm-embed__placeholder { display: none; }
  @media (max-width: 767px) {
    .osm-embed { height: 320px; }
    .osm-embed__notice { max-width: none; }
  }

  .standort__map { min-height: 400px; }
  @media (max-width: 767px) {
    .standort__map { min-height: 320px; }
  }

  .standort__map .osm-embed__link {
    margin-top: var(--s3);
    font-size: var(--fs-body-sm);
    color: rgba(255,255,255,0.55);
  }
  .standort__map .osm-embed__link a {
    color: rgba(255,255,255,0.85);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .standort__map .osm-embed__link a:hover { color: var(--c-green); }

  /* Standort-Block — White-Variante (verwendet auf ueber-bit-feed.html).
     Identisches Markup wie die Dark-Variante, lediglich Farben invertiert.
     Phase-2.5-Refactor: zuvor page-scoped in ueber-bit-feed.html. */
  .section--white .standort__info h2 { color: var(--c-anthracite-dark); }
  .section--white .standort__info .body-lg { color: var(--c-anthracite-light); }
  .section--white .standort__list li { color: var(--c-anthracite-dark); }
  .section--white .standort__list .label { color: var(--c-anthracite-light); }
  .section--white .standort__list a {
    color: var(--c-anthracite-dark);
    border-bottom-color: var(--c-gray-300);
  }
  .section--white .standort__list a:hover {
    color: var(--c-green);
    border-color: var(--c-green);
  }
  .section--white .osm-embed {
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  }
  .section--white .standort__map .osm-embed__link { color: var(--c-anthracite-light); }
  .section--white .standort__map .osm-embed__link a { color: var(--c-anthracite-dark); }
  .section--white .standort__map .osm-embed__link a:hover { color: var(--c-green); }

  /* ============== MATRIX — Zweispalten-Vergleich "ihr behaltet / wir übernehmen"
     Phase 3: Helle Sektion mit dunklen Karten (Dark-Cards-on-Light), mittiger
     Konnektor mit pulsierendem grünen Punkt, Bridge-Block zur Bausteine-Sektion.
     Markup ist page-specific (co-managed-it.html), Klassen sind generisch. */
  .matrix-section { position: relative; overflow: hidden; }
  .matrix-section::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 820px; height: 480px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(0,191,99,0.07), transparent 70%);
    pointer-events: none; z-index: 0;
  }
  .matrix-wrap { position: relative; z-index: 1; }

  .matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
    margin-top: var(--s8);
    align-items: stretch;
  }

  .matrix__col {
    position: relative;
    display: flex; flex-direction: column; gap: var(--s5);
    padding: var(--s8) var(--s7);
    /* Anthrazite Karte auf hellem Sektions-Hintergrund */
    background: var(--c-anthracite-dark);
    color: var(--c-white);
    /* Eingriff B (refit): grüne Topbar als Karten-eigener border-top — folgt
       der Karten-Rundung automatisch, keine Pseudoelement-Geometrie nötig. */
    border: 4px solid var(--c-anthracite);
    border-top-color: var(--c-green);
    border-radius: var(--radius-lg);
    /* Eingriff E: 3 weiche Tiefen-Lagen + grüner Outer-Glow zur Sektions-Verbindung,
       Eingriff D: inset Light-Reflex am oberen Innenrand. */
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.12),
      0 24px 64px rgba(0, 0, 0, 0.18),
      0 0 60px rgba(0, 191, 99, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition:
      transform 350ms cubic-bezier(.2,.8,.2,1),
      border-color 350ms cubic-bezier(.2,.8,.2,1),
      box-shadow 350ms cubic-bezier(.2,.8,.2,1);
  }
  /* Eingriff A: dezenter Top-Glow innerhalb der Karte (radial vom oberen Rand). */
  .matrix__col::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 180px;
    background: radial-gradient(ellipse at 50% 0%, rgba(0,191,99,0.07), transparent 65%);
    border-radius: 8px 8px 0 0;
    pointer-events: none;
    z-index: 0;
  }
  /* Inhalt der Karte über das ::before-Glow heben */
  .matrix__col > * { position: relative; z-index: 1; }

  .matrix__col:hover {
    transform: translateY(-2px);
    /* Top-Glow bei Hover über zusätzliche negative-Y Schatten-Lage; die anderen
       Tiefen-Lagen werden gleichzeitig leicht intensiver. */
    box-shadow:
      0 -6px 22px rgba(0, 191, 99, 0.40),
      0 6px 16px rgba(0, 0, 0, 0.16),
      0 32px 80px rgba(0, 0, 0, 0.24),
      0 0 80px rgba(0, 191, 99, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  .matrix__head {
    /* Eingriff C: eigene Header-Zone mit subtilem Hintergrund. Negative Margins
       ziehen den Block auf die Karten-Außenkanten (oben/links/rechts), der
       border-radius slott den Block in die abgerundeten Karten-Innenecken. */
    display: flex; flex-direction: column; gap: 4px;
    margin: calc(-1 * var(--s8)) calc(-1 * var(--s7)) var(--s2);
    padding: var(--s8) var(--s7) var(--s5);
    background: rgba(255,255,255,0.025);
    border-bottom: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px 8px 0 0;
  }
  .matrix__head-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
    color: var(--c-white);
    border-radius: 12px;
    margin-bottom: var(--s3);
  }
  .matrix__head-icon--green {
    background: rgba(0,191,99,0.16);
    color: var(--c-green);
  }
  .matrix__head-title {
    font-size: 32px; font-weight: 700; line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--c-white);
  }
  .matrix__head-title-mono {
    font-family: var(--ff-mono);
    font-weight: 700;
    /* Mono ist optisch etwas schwerer als sans bei gleicher Größe — leicht runter. */
    font-size: 0.92em;
    letter-spacing: -0.01em;
  }
  .matrix__head-sub {
    margin-top: 4px;
    font-size: var(--fs-body-sm);
    color: rgba(255,255,255,0.65);
  }

  .matrix__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
  .matrix__row {
    display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
    padding: 10px 8px;
    color: rgba(255,255,255,0.85);
    font-size: var(--fs-body); line-height: var(--lh-body);
    border-radius: 8px;
    transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
  }
  .matrix__row:hover {
    transform: translateX(4px);
    background: rgba(255,255,255,0.04);
  }
  .matrix__row-text { padding-top: 1px; }

  .matrix__check {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,0.10);
    color: var(--c-white);
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 2px; flex-shrink: 0;
    transition: transform 200ms ease, background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  .matrix__check--green {
    background: rgba(0,191,99,0.20);
    color: var(--c-green);
  }
  .matrix__check--outline {
    background: transparent;
    color: rgba(255,255,255,0.45);
    border: 1.5px solid rgba(255,255,255,0.20);
  }
  .matrix__row:hover .matrix__check { transform: scale(1.1); }

  /* Add-on rows — leicht abgesetzt, Häkchen wechselt bei Hover in voll-grün */
  .matrix__row--addon { color: rgba(255,255,255,0.55); }
  .matrix__row--addon:hover { color: var(--c-white); }
  .matrix__row--addon:hover .matrix__check--outline {
    background: rgba(0,191,99,0.20);
    color: var(--c-green);
    border-color: rgba(0,191,99,0.20);
  }

  /* Group divider — fieldset-Legenden-Stil zwischen Grundpaket und Add-ons */
  .matrix__group {
    position: relative;
    height: 1px;
    margin: var(--s5) 0 var(--s2);
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 15%, rgba(255,255,255,0.15) 85%, transparent 100%);
    text-align: center;
  }
  .matrix__group-label {
    position: relative; top: -10px;
    display: inline-block;
    padding: 2px 12px;
    /* Matched zur Karten-Hintergrundfarbe, damit Label die Linie sauber bricht */
    background: var(--c-anthracite-dark);
    font-family: var(--ff-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.55);
  }

  /* Bridge — Übergang zur Bausteine-Sektion (auf hellem Section-Grund) */
  .matrix__bridge-divider {
    height: 1px;
    background: var(--c-gray-200);
    margin: var(--s12) 0 var(--s8);
  }
  .matrix__bridge {
    display: grid; grid-template-columns: 1fr auto;
    gap: var(--s7); align-items: center;
  }
  .matrix__bridge-lead {
    margin: 0 0 4px;
    font-size: 16px; font-weight: 500; line-height: 1.5;
    color: var(--c-anthracite-dark);
  }
  .matrix__bridge-sub {
    margin: 0;
    font-size: 14px; line-height: 1.5;
    color: var(--c-anthracite-light);
  }
  .matrix__bridge-cta svg { transition: transform var(--t-default); }
  .matrix__bridge-cta:hover svg { transform: translateX(3px); }

  /* Mobile: Spalten stapeln */
  @media (max-width: 880px) {
    .matrix { grid-template-columns: 1fr; }
  }
  @media (max-width: 767px) {
    .matrix__bridge { grid-template-columns: 1fr; gap: var(--s4); }
    .matrix__bridge-cta { width: 100%; justify-content: center; }
    .matrix__head-title { font-size: 26px; }
    /* Auf Mobile reduzierte Schatten-Lagen — sonst auf kleiner Fläche zu satt. */
    .matrix__col {
      box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.16),
        0 0 40px rgba(0, 191, 99, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    }
    .matrix__col:hover {
      box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.20),
        0 0 50px rgba(0, 191, 99, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }
  }

  /* Reveal-Stagger — Header zuerst, Rows gestaffelt, Connector-Label, Bridge zum Schluss.
     Pattern parallel zu .anders__pillar (animation + backwards), damit Hover-Transitions intakt bleiben. */
  @keyframes matrixRowIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .reveal:not(.is-in) .matrix__head,
  .reveal:not(.is-in) .matrix__row,
  .reveal:not(.is-in) .matrix__group,
  .reveal:not(.is-in) .matrix__bridge,
  .reveal:not(.is-in) .matrix__bridge-divider { opacity: 0; }

  .reveal.is-in .matrix__head { animation: matrixRowIn 500ms var(--t-default) 50ms backwards; }
  .reveal.is-in .matrix__col--you .matrix__row:nth-child(1) { animation: matrixRowIn 450ms var(--t-default) 200ms backwards; }
  .reveal.is-in .matrix__col--you .matrix__row:nth-child(2) { animation: matrixRowIn 450ms var(--t-default) 260ms backwards; }
  .reveal.is-in .matrix__col--you .matrix__row:nth-child(3) { animation: matrixRowIn 450ms var(--t-default) 320ms backwards; }
  .reveal.is-in .matrix__col--you .matrix__row:nth-child(4) { animation: matrixRowIn 450ms var(--t-default) 380ms backwards; }
  .reveal.is-in .matrix__col--you .matrix__row:nth-child(5) { animation: matrixRowIn 450ms var(--t-default) 440ms backwards; }
  .reveal.is-in .matrix__col--you .matrix__row:nth-child(6) { animation: matrixRowIn 450ms var(--t-default) 500ms backwards; }
  .reveal.is-in .matrix__col--you .matrix__row:nth-child(7) { animation: matrixRowIn 450ms var(--t-default) 560ms backwards; }
  .reveal.is-in .matrix__col--you .matrix__row:nth-child(8) { animation: matrixRowIn 450ms var(--t-default) 620ms backwards; }
  .reveal.is-in .matrix__col--us .matrix__list:first-of-type .matrix__row:nth-child(1) { animation: matrixRowIn 450ms var(--t-default) 240ms backwards; }
  .reveal.is-in .matrix__col--us .matrix__list:first-of-type .matrix__row:nth-child(2) { animation: matrixRowIn 450ms var(--t-default) 300ms backwards; }
  .reveal.is-in .matrix__col--us .matrix__list:first-of-type .matrix__row:nth-child(3) { animation: matrixRowIn 450ms var(--t-default) 360ms backwards; }
  .reveal.is-in .matrix__col--us .matrix__list:first-of-type .matrix__row:nth-child(4) { animation: matrixRowIn 450ms var(--t-default) 420ms backwards; }
  .reveal.is-in .matrix__col--us .matrix__list:first-of-type .matrix__row:nth-child(5) { animation: matrixRowIn 450ms var(--t-default) 480ms backwards; }
  .reveal.is-in .matrix__col--us .matrix__group { animation: matrixRowIn 450ms var(--t-default) 540ms backwards; }
  .reveal.is-in .matrix__col--us .matrix__list--addon .matrix__row:nth-child(1) { animation: matrixRowIn 450ms var(--t-default) 600ms backwards; }
  .reveal.is-in .matrix__col--us .matrix__list--addon .matrix__row:nth-child(2) { animation: matrixRowIn 450ms var(--t-default) 660ms backwards; }
  .reveal.is-in .matrix__col--us .matrix__list--addon .matrix__row:nth-child(3) { animation: matrixRowIn 450ms var(--t-default) 720ms backwards; }
  .reveal.is-in .matrix__col--us .matrix__list--addon .matrix__row:nth-child(4) { animation: matrixRowIn 450ms var(--t-default) 780ms backwards; }
  .reveal.is-in .matrix__col--us .matrix__list--addon .matrix__row:nth-child(5) { animation: matrixRowIn 450ms var(--t-default) 840ms backwards; }
  .reveal.is-in .matrix__bridge-divider { animation: matrixRowIn 500ms var(--t-default) 1000ms backwards; }
  .reveal.is-in .matrix__bridge { animation: matrixRowIn 500ms var(--t-default) 1100ms backwards; }

  @media (prefers-reduced-motion: reduce) {
    .reveal:not(.is-in) .matrix__head,
    .reveal:not(.is-in) .matrix__row,
    .reveal:not(.is-in) .matrix__group,
    .reveal:not(.is-in) .matrix__bridge,
    .reveal:not(.is-in) .matrix__bridge-divider { opacity: 1; }
    .reveal.is-in .matrix__head,
    .reveal.is-in .matrix__row,
    .reveal.is-in .matrix__group,
    .reveal.is-in .matrix__bridge,
    .reveal.is-in .matrix__bridge-divider { animation: none; }
    .matrix__col,
    .matrix__row,
    .matrix__check { transition: none; }
    .matrix__col:hover { transform: none; }
    .matrix__row:hover { transform: none; }
    .matrix__row:hover .matrix__check { transform: none; }
  }

  /* ============== TICKET — Vorfall-Akte als Alltags-Beispiel
     Mehrlagige Karte auf dunklem Sektions-Hintergrund. 4px-Border-System
     (Anthrazit + grüner border-top) konsistent zu .matrix__col. Mono-Schrift
     für Ticket-Header, Status, Meta, Zeitstempel — Sans für Beschreibungen. */
  .ticket {
    position: relative;
    margin-top: var(--s8);
    background: var(--c-anthracite);
    color: var(--c-white);
    border: 4px solid var(--c-anthracite);
    border-top-color: var(--c-green);
    border-radius: var(--radius-lg);
    padding: var(--s8) var(--s8) var(--s7);
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.18),
      0 24px 64px rgba(0, 0, 0, 0.28),
      0 0 60px rgba(0, 191, 99, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .ticket__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s4); flex-wrap: wrap;
  }
  .ticket__id {
    font-family: var(--ff-mono);
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--c-green);
  }
  .ticket__status {
    font-family: var(--ff-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--c-green);
    background: rgba(0,191,99,0.14);
    border: 1px solid rgba(0,191,99,0.30);
    padding: 4px 10px;
    border-radius: 999px;
  }

  .ticket__divider {
    height: 1px;
    background: rgba(255,255,255,0.10);
    margin: var(--s5) 0;
    border: 0;
  }

  .ticket__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px var(--s5);
    font-family: var(--ff-mono);
    font-size: 13px; line-height: 1.6;
  }
  .ticket__meta-label {
    color: rgba(255,255,255,0.50);
    letter-spacing: 0.04em;
    text-transform: lowercase;
  }
  .ticket__meta-value {
    color: rgba(255,255,255,0.90);
  }

  .ticket__timeline {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--s5);
  }
  /* Durchgehende vertikale Linie, die die Marker verbindet */
  .ticket__timeline::before {
    content: "";
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, rgba(0,191,99,0.55), rgba(255,255,255,0.10));
    border-radius: 2px;
  }
  .ticket__timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 16px max-content 1fr;
    gap: var(--s4);
    align-items: baseline;
  }
  .ticket__timeline-marker {
    position: relative;
    width: 16px; height: 16px;
    align-self: start;
    margin-top: 2px;
  }
  .ticket__timeline-marker::before {
    content: "";
    position: absolute; left: 3px; top: 3px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--c-green);
    box-shadow: 0 0 0 3px var(--c-anthracite), 0 0 12px rgba(0,191,99,0.55);
  }
  .ticket__timeline-time {
    font-family: var(--ff-mono);
    font-size: 13px; font-weight: 600;
    color: var(--c-green);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .ticket__timeline-text {
    color: rgba(255,255,255,0.88);
    font-size: var(--fs-body);
    line-height: 1.5;
  }

  .ticket__result {
    display: grid;
    gap: 10px;
  }
  .ticket__result-label {
    font-family: var(--ff-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.50);
    margin-bottom: 4px;
  }
  .ticket__result-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: baseline;
    color: rgba(255,255,255,0.92);
    font-size: var(--fs-body);
    line-height: 1.5;
  }
  .ticket__result-item::before {
    content: "→";
    color: var(--c-green);
    font-family: var(--ff-mono);
    font-weight: 700;
  }

  .alltag-coda {
    margin: var(--s8) auto 0;
    max-width: 720px;
    text-align: center;
    font-size: var(--fs-body-lg);
    font-style: italic;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
  }

  @media (max-width: 700px) {
    .ticket { padding: var(--s6) var(--s5); }
    .ticket__meta { grid-template-columns: 1fr; gap: 2px; }
    .ticket__meta-value { margin-bottom: 6px; }
    .ticket__timeline-item {
      grid-template-columns: 16px 1fr;
      row-gap: 2px;
    }
    .ticket__timeline-time { grid-column: 2; }
    .ticket__timeline-text { grid-column: 2; }
    .alltag-coda { font-size: var(--fs-body); }
  }

  /* Reveal-Stagger — Pattern parallel zu .matrix (animation + backwards) */
  .reveal:not(.is-in) .ticket__head,
  .reveal:not(.is-in) .ticket__meta,
  .reveal:not(.is-in) .ticket__timeline-item,
  .reveal:not(.is-in) .ticket__result,
  .reveal:not(.is-in) .alltag-coda { opacity: 0; }

  .reveal.is-in .ticket__head     { animation: matrixRowIn 500ms var(--t-default) 100ms backwards; }
  .reveal.is-in .ticket__meta     { animation: matrixRowIn 500ms var(--t-default) 220ms backwards; }
  .reveal.is-in .ticket__timeline-item:nth-child(1) { animation: matrixRowIn 450ms var(--t-default) 360ms backwards; }
  .reveal.is-in .ticket__timeline-item:nth-child(2) { animation: matrixRowIn 450ms var(--t-default) 450ms backwards; }
  .reveal.is-in .ticket__timeline-item:nth-child(3) { animation: matrixRowIn 450ms var(--t-default) 540ms backwards; }
  .reveal.is-in .ticket__timeline-item:nth-child(4) { animation: matrixRowIn 450ms var(--t-default) 630ms backwards; }
  .reveal.is-in .ticket__timeline-item:nth-child(5) { animation: matrixRowIn 450ms var(--t-default) 720ms backwards; }
  .reveal.is-in .ticket__result   { animation: matrixRowIn 500ms var(--t-default) 860ms backwards; }
  .reveal.is-in .alltag-coda      { animation: matrixRowIn 500ms var(--t-default) 1000ms backwards; }

  @media (prefers-reduced-motion: reduce) {
    .reveal:not(.is-in) .ticket__head,
    .reveal:not(.is-in) .ticket__meta,
    .reveal:not(.is-in) .ticket__timeline-item,
    .reveal:not(.is-in) .ticket__result,
    .reveal:not(.is-in) .alltag-coda { opacity: 1; }
    .reveal.is-in .ticket__head,
    .reveal.is-in .ticket__meta,
    .reveal.is-in .ticket__timeline-item,
    .reveal.is-in .ticket__result,
    .reveal.is-in .alltag-coda { animation: none !important; }
  }

  /* ============== HEADER ============== */
  .header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(31,31,31,0.92);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: transform var(--t-default);
    height: var(--header-h);
  }
  .header.is-hidden { transform: translateY(-100%); }
  .header__inner {
    height: 100%; display: flex; align-items: center; gap: var(--s6);
    max-width: 100%; margin: 0;
    padding-left: 20px; padding-right: 20px;
  }
  .logo {
    display: inline-flex; align-items: center;
    color: #fff; text-decoration: none;
  }
  .header .logo { height: 100%; }
  .logo:hover { text-decoration: none; }
  .logo-svg {
    height: 48px; width: auto; display: block;
    fill: currentColor;
    transition: height var(--t-default);
  }
  .logo-svg .st0 { fill: var(--c-green); }
  /* logo on light contexts */
  .section--white .logo { color: var(--c-anthracite-dark); }
  .nav { display: flex; align-items: center; gap: var(--s8); margin: 0 auto; }
  .nav__link {
    color: rgba(255,255,255,0.9); font-size: var(--fs-body); font-weight: 500;
    padding: 6px 0; position: relative; text-decoration: none;
  }
  .nav__link:hover { color: #fff; text-decoration: none; }
  .nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--c-green);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--t-fast);
  }
  .nav__link:hover::after { transform: scaleX(1); }
  .nav__link.is-active { color: #fff; }
  .nav__link.is-active::after { transform: scaleX(1); }
  .header-cta { margin-left: auto; }
  .hamburger { display: none; margin-left: auto; width: 40px; height: 40px; color: #fff;
    align-items: center; justify-content: center; border-radius: 6px; }
  .hamburger:hover { background: rgba(255,255,255,0.08); }
  @media (max-width: 1023px) {
    .nav, .header-cta { display: none; }
    .hamburger { display: inline-flex; }
  }

  /* Mobile menu */
  .mobile-menu { position: fixed; inset: 0; z-index: 60; display: none; }
  .mobile-menu.is-open { display: block; }
  .mobile-menu__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
  .mobile-menu__panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 100vw);
    background: var(--c-anthracite-dark); color: #fff;
    animation: slideIn 300ms ease-out; display: flex; flex-direction: column;
  }
  @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
  .mobile-menu__head { height: var(--header-h); display:flex; align-items:center; justify-content:space-between; padding: 0 var(--s4); border-bottom:1px solid rgba(255,255,255,0.08); }
  .mobile-menu__nav { padding: var(--s4); flex: 1; }
  .mobile-menu__nav a { display:flex; justify-content:space-between; align-items:center; color:#fff; padding: var(--s4) 0; font-size: 18px; border-bottom: 1px solid rgba(255,255,255,0.06); text-decoration:none; }
  .mobile-menu__foot { padding: var(--s4); border-top: 1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; gap: var(--s3); font-size: 14px; color: rgba(255,255,255,0.7); }

  /* ============== BUTTONS ============== */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 24px; font-weight: 500; font-size: 16px;
    border-radius: var(--radius-sm);
    transition: background var(--t-fast), transform 50ms ease, box-shadow var(--t-fast), color var(--t-fast);
    text-decoration: none; white-space: nowrap;
  }
  .btn--primary { background: var(--c-green); color: #fff; }
  .btn--primary:hover { background: var(--c-green-dark); box-shadow: 0 4px 12px rgba(0,191,99,0.3); text-decoration:none; color:#fff; }
  .btn--primary:active { transform: translateY(1px); box-shadow: none; }
  .btn--primary:focus-visible { outline: 3px solid var(--c-green); outline-offset: 2px; }

  .btn--secondary { background: transparent; color: var(--c-green); border: 2px solid var(--c-green); }
  .btn--secondary:hover { background: var(--c-green-light); text-decoration:none; }
  .on-dark .btn--secondary { color: #fff; border-color: #fff; }
  .on-dark .btn--secondary:hover { background: rgba(255,255,255,0.08); }

  .btn--small { height: 40px; font-size: 14px; padding: 0 18px; }
  .btn--lg { height: 56px; padding: 0 28px; font-size: 18px; }
  .btn--block { width: 100%; }

  .tlink {
    display: inline-flex; align-items: center; gap: 6px; color: var(--c-green);
    font-weight: 500; text-decoration: none;
  }
  .tlink .arrow { transition: transform var(--t-fast); }
  .tlink:hover { text-decoration: underline; color: var(--c-green-dark); }
  .tlink:hover .arrow { transform: translateX(3px); }
  .on-dark .tlink { color: var(--c-green); }
  /* Mono-Caps-Pfad-Anzeige rechts neben einem .tlink-Bridge-Link (auf dunklem Bg) */
  .tlink-path {
    font-family: var(--ff-mono);
    color: rgba(255,255,255,0.4);
    margin-left: var(--s4);
  }
  /* ============== HERO ============== */
  .hero {
    min-height: min(80vh, 780px);
    padding-top: var(--s16); padding-bottom: var(--s16);
    display: flex; align-items: center; position: relative; overflow: hidden;
    background: var(--c-anthracite-dark);
    color: #fff;
  }
  .hero__grid-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 75%);
  }
  .hero__glow {
    position: absolute; right: -120px; top: 50%; transform: translateY(-50%);
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,191,99,0.18), transparent 60%);
    pointer-events: none;
  }
  .hero__inner { max-width: 900px; position: relative; }
  .hero__overline { margin-bottom: 16px; }
  .hero__headline { margin-bottom: 24px; }
  .hero__headline .line-2 { color: var(--c-green); }
  .hero__sub { max-width: 680px; color: rgba(255,255,255,0.82); margin-bottom: 32px; }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s6); margin-bottom: var(--s6); }
  @media (max-width: 767px) {
    .hero__ctas { flex-direction: column; align-items: stretch; gap: var(--s4); }
    .hero__ctas .btn { width: 100%; }
  }
  .hero__ctas .btn { min-width: 260px; justify-content: space-between; }
  .hero__fineprint { color: rgba(255,255,255,0.6); font-size: 14px; }
  .hero__fineprint a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

  /* Hero-Variante C — Standard-Layout der Subpages (Phase 2.5: zuvor in 8 Pages dupliziert) */
  .hero--c { min-height: 500px; }
  @media (max-width: 767px) { .hero--c { min-height: 400px; } }
  .hero--c .hero__headline { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -0.015em; }
  .hero--c .hero__ctas { align-items: center; gap: var(--s8); margin-bottom: 0; }
  .hero--c .tlink { font-size: 15px; }

  /* Hero-Variante C kürzer (kontakt.html — kompakter Pflicht-Sub-Hero) */
  .hero--c-short { min-height: 400px; }
  @media (max-width: 767px) { .hero--c-short { min-height: 320px; } }
  .hero--c-short .hero__headline {
    font-size: var(--fs-h1); font-weight: 700;
    line-height: var(--lh-heading); letter-spacing: -0.015em;
  }
  .hero--c-short .hero__sub { margin-bottom: 0; }

  /* About-Text — zentrierter 720px-Fließtext-Block (Phase 2.5: zuvor in 7 Pages dupliziert).
     Mit Lead-Ins via <strong>, optionalem --center-Modifier für die head-Section,
     __more-Subzeile mit Border-Hover, und on-dark-Variante über .section--dark. */
  .about-text {
    max-width: 720px; margin: 0 auto;
    display: grid; gap: var(--s5);
  }
  .about-text p {
    color: var(--c-anthracite);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
  }
  .about-text p strong {
    color: var(--c-anthracite-dark);
    font-weight: 700;
  }
  .about-text__more {
    margin: var(--s4) auto 0;
    font-size: var(--fs-body);
    color: var(--c-anthracite-light);
    text-align: center;
    line-height: var(--lh-body);
  }
  .about-text__more a {
    color: var(--c-green-dark);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast);
  }
  .about-text__more a:hover { border-color: var(--c-green); text-decoration: none; }
  .section--dark .about-text p { color: rgba(255,255,255,0.85); }
  .section--dark .about-text p strong { color: #fff; }

  /* ============== HALTUNGEN CARDS ============== */
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  @media (max-width: 1023px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 767px) { .grid-3 { grid-template-columns: 1fr; } }

  .card {
    background: var(--c-white); border-radius: var(--radius-md); padding: var(--s8);
    box-shadow: var(--sh-sm); border: 4px solid var(--c-gray-200);
    transition: transform var(--t-default), box-shadow var(--t-default);
  }

  .haltung__num {
    font-family: var(--ff-mono); font-weight: 500; color: var(--c-green);
    font-size: 14px; letter-spacing: 0.15em; margin-bottom: var(--s4);
    display:flex; align-items:center; gap: 10px;
  }
  .haltung__num::after { content:""; flex:1; height:1px; background: var(--c-gray-200); }
  .haltung h3 { margin-bottom: var(--s4); position: relative; z-index: 1; }
  .haltung p { color: var(--c-anthracite-light); position: relative; z-index: 1; }

  /* ============== HALTUNGEN ENHANCEMENTS ============== */
  .haltungen-section {
    position: relative; overflow: hidden;
  }
  .haltungen-section::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, var(--c-gray-300) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  }
  .haltungen-section::after {
    content: ""; position: absolute; right: -180px; top: -120px;
    width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(0,191,99,0.08), transparent 70%);
  }
  .haltungen-section .container { position: relative; z-index: 1; }

  .haltung {
    position: relative; overflow: hidden;
    transition: transform var(--t-default), box-shadow var(--t-default);
  }
  .haltung:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
  .haltung__big {
    position: absolute; right: -12px; bottom: -38px; pointer-events: none;
    font-family: var(--ff-mono); font-weight: 700;
    font-size: 180px; line-height: 1; letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(58,58,58,0.08);
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
                -webkit-text-stroke-color 300ms ease-out;
    user-select: none;
  }
  .haltung:hover .haltung__big {
    transform: translate(-8px, -6px) rotate(-3deg);
    -webkit-text-stroke-color: rgba(0,191,99,0.35);
  }
  .haltung__sweep {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--c-green);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 500ms cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .haltung:hover .haltung__sweep { transform: scaleX(1); }

  .haltung__num { position: relative; z-index: 1; }
  /* Staggered card reveal */
  .haltung {
    opacity: 0; transform: translateY(24px);
    transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow var(--t-default), transform var(--t-default);
  }
  .haltungen-section.is-in .haltung { opacity: 1; transform: translateY(0); }
  .haltungen-section.is-in .haltung:nth-child(1) { transition-delay: 0ms; }
  .haltungen-section.is-in .haltung:nth-child(2) { transition-delay: 120ms; }
  .haltungen-section.is-in .haltung:nth-child(3) { transition-delay: 240ms; }

  /* Connector thread above cards on desktop */
  .haltung-thread {
    position: relative; height: 1px; margin-bottom: var(--s8);
    background: linear-gradient(90deg, transparent 0%, var(--c-gray-300) 10%, var(--c-gray-300) 90%, transparent 100%);
    overflow: visible;
  }
  .haltung-thread::before,
  .haltung-thread::after,
  .haltung-thread > span {
    content: ""; position: absolute; top: 50%; transform: translateY(-50%);
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--c-gray-100); border: 2px solid var(--c-gray-300);
    transition: background 300ms ease-out, border-color 300ms ease-out, transform 300ms ease-out;
  }
  .haltung-thread::before { left: 16.66%; }
  .haltung-thread > span  { left: 50%; transform: translate(-50%, -50%); }
  .haltung-thread::after  { left: 83.33%; }
  .haltungen-section.is-in .haltung-thread::before,
  .haltungen-section.is-in .haltung-thread > span,
  .haltungen-section.is-in .haltung-thread::after {
    background: var(--c-green); border-color: var(--c-green);
    box-shadow: 0 0 0 4px rgba(0,191,99,0.15);
  }
  .haltungen-section.is-in .haltung-thread > span { transition-delay: 120ms; }
  .haltungen-section.is-in .haltung-thread::after { transition-delay: 240ms; }
  @media (max-width: 1023px) { .haltung-thread { display: none; } }

  /* Inline-Link-Hover in Haltung-Body — zentralisiert */
  .haltung p a {
    color: var(--c-green-dark);
    border-bottom: 1px solid var(--c-green);
    transition: color var(--t-fast), border-color var(--t-fast);
  }
  .haltung p a:hover { color: var(--c-green); border-color: var(--c-green); text-decoration: none; }

  /* section head */
  .head { margin-bottom: var(--s12); max-width: 760px; }
  .head .overline { display: block; margin-bottom: 8px; }
  .head h2 { margin-bottom: 16px; }
  .head p { color: var(--c-anthracite-light); font-size: var(--fs-body-lg); }
  .on-dark .head p { color: rgba(255,255,255,0.75); }
  .head--center { margin-left: auto; margin-right: auto; text-align: center; }

  /* ============== PROBLEM CARDS (shared: managed-it + co-managed-it) ============== */
  .problems {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--s6); align-items: stretch;
  }
  @media (max-width: 1023px) { .problems { grid-template-columns: 1fr; gap: var(--s4); } }

  .problem-card {
    position: relative;
    display: flex; flex-direction: column;
    height: 100%;
    background: var(--c-white);
    border: 4px solid var(--c-gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition:
      transform 350ms cubic-bezier(.2,.8,.2,1),
      border-color 350ms cubic-bezier(.2,.8,.2,1),
      box-shadow 350ms cubic-bezier(.2,.8,.2,1);
  }
  .problem-card::before {
    content: ""; position: absolute; top: 0; left: 0;
    height: 3px; width: 0;
    background: var(--c-green);
    z-index: 2;
    transition: width 500ms cubic-bezier(.2,.8,.2,1);
  }
  .problem-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--sh-sm);
  }
  .problem-card:hover::before { width: 100%; }

  .problem-card__top {
    flex: 1 1 auto;
    padding: var(--s7) var(--s6) var(--s6);
  }
  .problem-card__header {
    display: flex; align-items: center; gap: var(--s2);
    margin-bottom: var(--s5);
  }
  .problem-card__bullet {
    width: 10px; height: 10px;
    border-radius: 2px;
    background: var(--c-red-warn);
    flex-shrink: 0;
    transition: background-color 400ms ease;
  }
  .problem-card__id {
    font-family: var(--ff-mono); font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--c-anthracite-light);
  }
  .problem-card__title {
    margin: 0 0 var(--s3);
    font-size: 20px; font-weight: 700; line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--c-anthracite-dark);
    min-height: 49px;
  }
  .problem-card__text {
    margin: 0;
    font-size: 13.5px; line-height: 1.6;
    color: var(--c-anthracite-light);
  }

  .problem-card__bottom {
    flex-shrink: 0;
    display: flex; align-items: center; gap: var(--s3);
    min-height: 96px;
    padding: var(--s4) var(--s6);
    background: var(--c-gray-50);
    border-top: 4px solid var(--c-gray-300);
    transition: background-color 400ms ease, border-color 400ms ease;
  }
  .problem-card__prefix {
    color: var(--c-green);
    flex-shrink: 0;
    align-self: center;
  }
  .problem-card__cons {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
  }
  .problem-card__cons-label {
    font-family: var(--ff-mono); font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-anthracite-light);
    transition: color 400ms ease;
  }
  .problem-card__cons-text {
    font-size: 13.5px; font-weight: 500;
    color: var(--c-anthracite-dark);
    transition: color 400ms ease;
  }

  .problem-card:hover .problem-card__bullet { background: var(--c-green); }
  .problem-card:hover .problem-card__bottom {
    background: var(--c-anthracite-dark);
    border-top-color: var(--c-green);
  }
  .problem-card:hover .problem-card__cons-label { color: var(--c-green); }
  .problem-card:hover .problem-card__cons-text  { color: var(--c-white); }

  @media (max-width: 767px) {
    .problem-card__title  { min-height: 0; }
    .problem-card__bottom { min-height: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .problem-card,
    .problem-card::before,
    .problem-card__bullet,
    .problem-card__bottom,
    .problem-card__cons-label,
    .problem-card__cons-text { transition: none; }
    .problem-card:hover { transform: none; }
    .problem-card:hover::before { width: 0; }
  }

  /* ============== ANDERS / ROLLENVERTEILUNG (shared: managed-it + co-managed-it) ============== */
  .anders-section { position: relative; overflow: hidden; }
  .anders-section::before {
    content: ""; position: absolute; left: 10%; top: 50%; width: 480px; height: 480px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(0,191,99,0.12), transparent 65%);
    pointer-events: none;
  }
  .anders { position: relative; z-index: 1; }

  /* Top: zweispaltiger Headline-Lead */
  .anders__top {
    display: grid; grid-template-columns: 1.05fr 1fr;
    gap: var(--s12); align-items: start;
    margin-bottom: var(--s12);
  }
  .anders__overline {
    display: inline-flex; align-items: center; gap: var(--s3);
    font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--c-green);
    margin-bottom: var(--s5);
  }
  .anders__overline::before {
    content: ""; width: 24px; height: 1px; background: var(--c-green);
  }
  .anders__headline {
    margin: 0;
    font-size: 56px; font-weight: 700; line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--c-white);
  }
  .anders__headline em { font-style: normal; color: var(--c-green); }
  .anders__lead {
    margin: 0 0 var(--s4);
    font-size: 16px; line-height: 1.65;
    color: rgba(255,255,255,0.78);
  }
  .anders__lead:last-child { margin-bottom: 0; }
  .anders__lead strong { color: var(--c-white); font-weight: 500; }

  /* Pillars 2x2 */
  .anders__pillars {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--s5); align-items: stretch;
    margin-bottom: var(--s12);
  }
  .anders__pillar {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; height: 100%;
    padding: var(--s5) var(--s6) var(--s5);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    transition: background 400ms ease, border-color 400ms ease;
  }
  .anders__pillar::before {
    content: ""; position: absolute; top: 0; left: 0;
    height: 3px; width: 0;
    background: var(--c-green);
    transition: width 500ms cubic-bezier(.2,.8,.2,1);
  }
  .anders__pillar-head {
    display: flex; align-items: center; gap: var(--s4);
    margin-bottom: var(--s3);
  }
  .anders__pillar-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 9px;
    background: rgba(0,191,99,0.12);
    color: var(--c-green);
    flex-shrink: 0;
    transition: background 400ms ease, color 400ms ease;
  }
  .anders__pillar-icon svg { width: 18px; height: 18px; }
  .anders__pillar-title {
    margin: 0;
    font-size: 18px; font-weight: 700; line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--c-white);
  }
  .anders__pillar-desc {
    margin: 0;
    font-size: 13.5px; line-height: 1.55;
    color: rgba(255,255,255,0.62);
  }
  .anders__pillar:hover {
    background: rgba(0,191,99,0.06);
    border-color: rgba(0,191,99,0.3);
  }
  .anders__pillar:hover::before { width: 100%; }
  .anders__pillar:hover .anders__pillar-icon {
    background: var(--c-green);
    color: var(--c-anthracite-dark);
  }

  /* Closing-Bridge */
  .anders__divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin-bottom: var(--s8);
  }
  .anders__closing {
    display: grid; grid-template-columns: 1fr auto;
    gap: var(--s7); align-items: center;
  }
  .anders__closing-text {
    margin: 0;
    font-size: 16px; line-height: 1.5;
    color: rgba(255,255,255,0.78);
  }
  .anders__closing-text strong { color: var(--c-white); font-weight: 500; }
  .anders__cta svg { transition: transform var(--t-default); }
  .anders__cta:hover svg { transform: translateX(3px); }

  @media (max-width: 1023px) {
    .anders__top { grid-template-columns: 1fr; gap: var(--s8); margin-bottom: var(--s8); }
  }
  @media (max-width: 767px) {
    .anders__headline { font-size: 36px; }
    .anders__pillars { grid-template-columns: 1fr; gap: var(--s4); margin-bottom: var(--s8); }
    .anders__closing { grid-template-columns: 1fr; gap: var(--s4); }
    .anders__cta { width: 100%; }
  }

  /* Anders-Pillars: Stagger beim Reveal — animation statt transition,
     damit die hover-transitions von .anders__pillar nicht beeinflusst werden. */
  @keyframes andersPillarIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  .reveal:not(.is-in) .anders__pillar { opacity: 0; }
  .reveal.is-in .anders__pillar:nth-child(1) { animation: andersPillarIn 500ms var(--t-default) 100ms backwards; }
  .reveal.is-in .anders__pillar:nth-child(2) { animation: andersPillarIn 500ms var(--t-default) 200ms backwards; }
  .reveal.is-in .anders__pillar:nth-child(3) { animation: andersPillarIn 500ms var(--t-default) 300ms backwards; }
  .reveal.is-in .anders__pillar:nth-child(4) { animation: andersPillarIn 500ms var(--t-default) 400ms backwards; }
  @media (prefers-reduced-motion: reduce) {
    .reveal:not(.is-in) .anders__pillar { opacity: 1; }
    .reveal.is-in .anders__pillar { animation: none; }
    .anders__pillar,
    .anders__pillar::before,
    .anders__pillar-icon { transition: none; }
  }

  /* ============== PROZESS PANEL (unified) ============== */
  .ppanel {
    position: relative;
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
  }
  .ppanel--bare {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .ppanel::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(31,31,31,0.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(31,31,31,0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  }
  .ppanel--bare::before { display: none; }
  .ppanel > * { position: relative; z-index: 1; }

  .ppanel__head {
    padding: var(--s4) var(--s12) var(--s12);
    text-align: center;
    max-width: 820px; margin: 0 auto;
  }
  .ppanel--bare .ppanel__head { padding: 0 var(--s4) var(--s12); }
  .ppanel__head h2 { margin: var(--s3) 0; text-wrap: balance; }
  .ppanel__head p  { color: var(--c-anthracite-light); }
  .ppanel__head .overline { display: block; margin-bottom: var(--s2); }

  /* Dark-context head overrides */
  .section--dark .ppanel__head h2 { color: #fff; }
  .section--dark .ppanel__head p  { color: rgba(255,255,255,0.68); }
  .section--dark .ppanel__head .overline { color: var(--c-green); }

  .ppanel__tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--ff-mono); font-size: 12px;
    color: var(--c-anthracite-light); letter-spacing: 0.14em; text-transform: uppercase;
    padding: 6px 14px; background: var(--c-gray-100);
    border: 1px solid var(--c-gray-200); border-radius: 999px;
    margin-bottom: var(--s4);
  }
  .section--dark .ppanel__tag {
    color: rgba(255,255,255,0.72);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
  }

  .ppanel__steps {
    position: relative;
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 0 0 var(--s12);
  }
  .ppanel--bare .ppanel__steps { padding: 0 0 var(--s16); }
  .pstep-line {
    position: absolute;
    left: 10%; right: 10%;
    top: 38px; height: 1px;
    background: repeating-linear-gradient(90deg, var(--c-gray-300) 0 8px, transparent 8px 14px);
    z-index: 0;
  }
  .section--dark .pstep-line {
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 8px, transparent 8px 14px);
  }
  .pstep-line::before {
    content: ""; position: absolute; inset: 0;
    background: var(--c-green);
    transform-origin: left center;
    transform: scaleX(var(--grow, 0));
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .pstep { position: relative; z-index: 1; text-align: left; padding: 0 var(--s4); }
  .pstep__mark {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    height: 76px;
    padding: 0 10px 0 0;
    background: var(--c-anthracite-dark);
    z-index: 2;
  }
  .section--white .pstep__mark { background: var(--c-white); }
  .pstep__num {
    position: relative; z-index: 2;
    font-family: var(--ff-mono); font-size: 13px;
    color: var(--c-anthracite-light); letter-spacing: 0.08em;
    background: var(--c-white);
    padding: 4px 8px;
    border: 1px solid var(--c-gray-200); border-radius: 6px;
    transition: color var(--t-default), border-color var(--t-default), background var(--t-default);
  }
  .section--dark .pstep__num {
    background: var(--c-anthracite-dark);
    color: rgba(255,255,255,0.55);
    border-color: rgba(255,255,255,0.18);
  }
  .pstep__dot {
    position: relative; z-index: 2;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--c-white);
    border: 2px solid var(--c-gray-300);
    box-shadow: 0 0 0 4px var(--c-white);
    transition: background var(--t-default), border-color var(--t-default), box-shadow var(--t-default), transform var(--t-default);
  }
  .section--dark .pstep__dot {
    background: var(--c-anthracite-dark);
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 0 0 4px var(--c-anthracite-dark);
  }
  .pstep.is-reached .pstep__num { color: var(--c-green-dark); border-color: var(--c-green); background: rgba(0,191,99,0.06); }
  .section--dark .pstep.is-reached .pstep__num { color: var(--c-green); background: rgba(0,191,99,0.12); border-color: var(--c-green); }
  .pstep.is-reached .pstep__dot {
    background: var(--c-green); border-color: var(--c-green);
    box-shadow: 0 0 0 4px var(--c-white), 0 4px 14px rgba(0,191,99,0.35);
    transform: scale(1.1);
  }
  .section--dark .pstep.is-reached .pstep__dot {
    box-shadow: 0 0 0 4px var(--c-anthracite-dark), 0 4px 14px rgba(0,191,99,0.5);
  }
  .pstep__title { margin: 0 0 6px; }
  .pstep__desc  { font-size: 14px; color: var(--c-anthracite-light); }
  .section--dark .pstep__title { color: #fff; }
  .section--dark .pstep__desc  { color: rgba(255,255,255,0.6); }

  @media (max-width: 1023px) {
    .ppanel__steps { grid-template-columns: 1fr; padding: 0 0 var(--s8); gap: var(--s5); }
    .pstep-line { display: none; }
    .pstep { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s4); row-gap: 2px; padding: 0; }
    .pstep__mark { height: auto; grid-row: 1 / span 2; align-items: flex-start; padding-top: 2px; }
    .pstep__title, .pstep__desc { grid-column: 2; }
  }

  /* CTA band — embedded inside dark section */
  .ppanel__cta {
    display: grid; grid-template-columns: 1.1fr 1fr;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    color: #fff;
    position: relative; isolation: isolate; overflow: hidden;
  }
  .ppanel__cta::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 100%);
  }
  .ppanel__cta > * { position: relative; z-index: 1; }
  @media (max-width: 1023px) { .ppanel__cta { grid-template-columns: 1fr; } }

  .pcta {
    padding: var(--s12);
    display: flex; flex-direction: column; gap: var(--s4);
    border-right: 1px solid rgba(255,255,255,0.08);
    position: relative;
  }
  .pcta::after {
    content: ""; position: absolute; right: -120px; bottom: -120px;
    width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(0,191,99,0.18), transparent 65%);
  }
  @media (max-width: 1023px) { .pcta { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); } }
  .pcta > * { position: relative; z-index: 1; }
  .pcta h3 { color: #fff; text-wrap: balance; margin: 0; }
  .pcta p  { color: rgba(255,255,255,0.72); margin: 0; }

  .pcta__tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--ff-mono); font-size: 12px;
    color: rgba(255,255,255,0.78); letter-spacing: 0.14em; text-transform: uppercase;
    padding: 6px 14px 6px 10px;
    background: rgba(0,191,99,0.12);
    border: 1px solid rgba(0,191,99,0.3);
    border-radius: 999px;
    align-self: flex-start;
  }
  .pc-dot {
    width: 8px; height: 8px; background: var(--c-green); border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0,191,99,0.25);
    animation: pulse 2.4s ease-in-out infinite;
  }
  .pcta__actions { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s2); }
  .pcta__tel {
    color: #fff; text-decoration: none;
    font-family: var(--ff-mono); font-size: 15px; letter-spacing: 0.02em;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.35);
    transition: border-color var(--t-default), color var(--t-default);
  }
  .pcta__tel:hover { color: var(--c-green); border-color: var(--c-green); }
  .pcta__hours {
    font-family: var(--ff-mono); font-size: 11px; color: rgba(255,255,255,0.45);
    letter-spacing: 0.14em; text-transform: uppercase;
    padding-top: var(--s4);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; gap: 12px;
  }
  .pcta__sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.25); }

  .pfacts { display: grid; grid-template-rows: repeat(4, 1fr); }
  .pfact {
    padding: var(--s8) var(--s12);
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "label val" "note val";
    align-items: center; column-gap: var(--s6);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: background var(--t-default);
    position: relative;
  }
  .pfact:last-child { border-bottom: 0; }
  .pfact::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--c-green);
    transform: scaleY(0); transform-origin: center;
    transition: transform var(--t-default);
  }
  .pfact:hover { background: rgba(255,255,255,0.03); }
  .pfact:hover::before { transform: scaleY(1); }
  .pfact__label {
    grid-area: label;
    font-family: var(--ff-mono); font-size: 11px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .pfact__note { grid-area: note; font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; }
  .pfact__val {
    grid-area: val;
    font-weight: 700; color: #fff;
    font-size: 40px; line-height: 1; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: baseline; gap: 6px;
    transition: color var(--t-default);
  }
  .pfact__val small { font-size: 15px; font-weight: 500; color: var(--c-green); }
  .pfact:hover .pfact__val { color: var(--c-green); }
  @media (max-width: 767px) {
    .pfact { grid-template-columns: 1fr; grid-template-areas: "label" "val" "note"; padding: var(--s6); row-gap: 4px; }
    .pfact__val { font-size: 32px; }
  }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
  @media (max-width: 767px) { .grid-2 { grid-template-columns: 1fr; } }

  /* ============== TWO-WAY CARDS (DARK SECTION) ============== */
  .way { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
  @media (max-width: 1023px) { .way { grid-template-columns: 1fr; } }
  .way-card {
    background: var(--c-anthracite);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: var(--s12);
    display: flex; flex-direction: column; gap: var(--s6);
    transition: transform var(--t-default), border-color var(--t-default);
    position: relative; overflow: hidden;
  }
  .way-card:hover { transform: translateY(-2px); border-color: rgba(0,191,99,0.5); }
  .way-card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 100% 0%, rgba(0,191,99,0.10), transparent 40%);
  }
  .way-card__label {
    font-family: var(--ff-mono); color: rgba(255,255,255,0.5); font-size: 12px;
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  .way-card h3 { font-size: 28px; }
  .way-card__body { color: rgba(255,255,255,0.78); flex: 1; }
  .way-card__price {
    padding: var(--s4) var(--s6); border-left: 4px solid var(--c-green);
    background: rgba(0,191,99,0.08);
    border-radius: 4px;
    display:flex; flex-direction:column; gap:2px;
  }
  .way-card__price strong { color: #fff; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .way-card__price span { color: rgba(255,255,255,0.6); font-size: 14px; }
  .way-card__foot { display:flex; justify-content: space-between; align-items: center; padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,0.08); }
  .way-card__foot .tlink { color: var(--c-green); }

  /* Geist-Nummer als grosser Hintergrund-Anker in der Karte
     — wurde von projekte.html uebernommen, wo nummerierte
     Projekt-Typen visuell verstaerkt werden. Sub-Klasse, falls
     andere Seiten dasselbe Pattern spaeter nutzen wollen. */
  .way-card__bg-num {
    position: absolute; right: -12px; bottom: -38px; pointer-events: none;
    font-family: var(--ff-mono); font-weight: 700;
    font-size: 180px; line-height: 1; letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.04);
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
                -webkit-text-stroke-color 300ms ease-out;
    user-select: none;
  }
  .way-card:hover .way-card__bg-num {
    transform: translate(-8px, -6px) rotate(-3deg);
    -webkit-text-stroke-color: rgba(0,191,99,0.35);
  }
  @media (prefers-reduced-motion: reduce) {
    .way-card__bg-num,
    .way-card:hover .way-card__bg-num { transition: none; transform: none; }
  }

  /* Model-Tile — Routing-Karten für Service-Wahl
     (z.B. zwei Modelle bei bit-feed: Managed IT vs Co-Managed IT)
     — wurde von SEO-Seiten zentralisiert, damit künftige Seiten
     das Pattern wiederverwenden können. */
  .model-tile {
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius-md);
    padding: var(--s8);
    box-shadow: var(--sh-sm);
    display: flex; flex-direction: column;
    gap: var(--s5);
    transition: transform var(--t-default), box-shadow var(--t-default);
  }
  .model-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  }
  .model-tile h3 { margin: 0; color: var(--c-anthracite-dark); }
  .model-tile p {
    margin: 0;
    color: var(--c-anthracite);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .model-tile__price {
    font-weight: 700;
    color: var(--c-green-dark);
    font-size: var(--fs-body-lg);
    padding-top: var(--s4);
    border-top: 1px solid var(--c-gray-200);
  }
  .model-tile .tlink { margin-top: auto; }

  /* ============== FAQ ============== */
  .faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--c-gray-200); }
  .faq__item { border-bottom: 1px solid var(--c-gray-200); }
  .faq__q {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 20px 0; font-size: 20px; font-weight: 500; line-height: 1.4;
    color: var(--c-black); text-align: left;
    transition: color var(--t-fast);
  }
  .faq__q:hover { color: var(--c-green); }
  .faq__chev { width: 24px; height: 24px; color: var(--c-green); flex: 0 0 auto; transition: transform var(--t-default); }
  .faq__item.is-open .faq__chev { transform: rotate(180deg); }
  .faq__a {
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-default);
  }
  .faq__item.is-open .faq__a { grid-template-rows: 1fr; }
  .faq__a > div { overflow: hidden; }
  .faq__a p { padding-bottom: 24px; color: var(--c-anthracite-light); max-width: 720px; }

  /* FAQ-Wrap auf SEO-Pages — zentrierte head-Section, unterstrichene Inline-Links
     (Phase 2.5: zuvor in 5 SEO-Pages dupliziert). */
  .faq-wrap { max-width: 820px; margin: 0 auto; }
  .faq-wrap .head { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }
  .faq-wrap .faq__a a { color: var(--c-green-dark); text-decoration: underline; }

  /* FAQ auf dunklem Hintergrund (zusammengeführter FAQ + CTA Block) */
  .section--dark .faq { border-top-color: rgba(255,255,255,0.12); }
  .section--dark .faq__item { border-bottom-color: rgba(255,255,255,0.12); }
  .section--dark .faq__q { color: var(--c-white); }
  .section--dark .faq__q:hover { color: var(--c-green); }
  .section--dark .faq__a p { color: rgba(255,255,255,0.72); }
  .section--dark .faq-wrap .faq__a a { color: var(--c-green); }

  /* ============== FINAL CTA ============== */
  .talk-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s5);
    max-width: 900px;
    margin: 0 auto var(--s8);
    text-align: left;
  }
  /* Modifier: volle Container-Breite (kontakt.html Kanal-Sektion). */
  .talk-steps--wide { max-width: none; }
  .talk-step {
    background: var(--c-white);
    border: 1px solid var(--c-gray-300);
    border-left: 4px solid var(--c-green);
    border-radius: var(--radius-md);
    padding: var(--s6);
    display: flex;
    flex-direction: column;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.06),
      0 12px 28px -10px rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(255,255,255,0.7);
    transition: box-shadow 350ms cubic-bezier(.2,.8,.2,1), transform 350ms cubic-bezier(.2,.8,.2,1);
  }
  .talk-step:hover {
    transform: translateY(-2px);
    box-shadow:
      0 2px 4px rgba(0,0,0,0.06),
      0 18px 40px -12px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .talk-step__num {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--ff-mono); font-size: 16px; font-weight: 700;
    color: var(--c-green-dark);
    background: var(--c-white);
    border: 2px solid var(--c-green);
    border-radius: 8px;
    padding: 6px 12px;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: var(--s4);
  }
  .talk-step__title {
    font-size: 18px; font-weight: 600; line-height: 1.35;
    color: var(--c-anthracite-dark);
    margin: 0 0 6px;
  }
  .talk-step__desc {
    font-size: 15px; line-height: 1.5;
    color: var(--c-anthracite-light);
    margin: 0;
    flex-grow: 1;
  }
  .reveal .talk-step {
    opacity: 0; transform: translateY(12px);
    transition: opacity 500ms var(--t-default), transform 500ms var(--t-default), box-shadow 350ms cubic-bezier(.2,.8,.2,1);
  }
  .reveal.is-in .talk-step { opacity: 1; transform: none; }
  .reveal.is-in .talk-step:hover { transform: translateY(-2px); }
  .reveal.is-in .talk-step:nth-child(1) { transition-delay: 0ms; }
  .reveal.is-in .talk-step:nth-child(2) { transition-delay: 90ms; }
  .reveal.is-in .talk-step:nth-child(3) { transition-delay: 180ms; }
  @media (max-width: 767px) {
    .talk-steps { grid-template-columns: 1fr; gap: var(--s3); }
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal .talk-step,
    .reveal.is-in .talk-step:hover,
    .talk-step:hover { transform: none !important; transition: none !important; }
    .reveal .talk-step { opacity: 1 !important; }
  }

  /* Talk-Step — flaches Mono-Caps-Label statt Nummern-Pille (.__num).
     Verwendung: kontakt.html (Kanal-Kacheln + Form-Talk-Steps). */
  .talk-step__label {
    display: block;
    font-family: var(--ff-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-green-dark);
    margin-bottom: var(--s4);
  }
  /* Talk-Step Footer-Zeile mit Trennlinie + Mono-Schrift (Kontaktdaten,
     kurze Begleitinfos). Verwendung: index.html (Final-CTA), kontakt.html. */
  .talk-step__foot {
    margin: var(--s4) 0 0;
    padding-top: var(--s3);
    border-top: 1px solid var(--c-gray-200);
    font-family: var(--ff-mono);
    font-size: 12px;
    color: var(--c-anthracite-light);
    letter-spacing: 0.02em;
    line-height: 1.4;
  }
  .talk-step__foot a {
    color: var(--c-anthracite-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--c-gray-300);
    transition: color var(--t-fast), border-color var(--t-fast);
  }
  .talk-step__foot a:hover { color: var(--c-green); border-color: var(--c-green); }

  /* Talk-Step — Dark-Variante (auf .section--dark).
     Verwendung: kontakt.html (Form-Sektion linke Spalte). */
  .section--dark .talk-step {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 4px solid var(--c-green);
    box-shadow: none;
  }
  .section--dark .talk-step:hover {
    background: rgba(0,0,0,0.32);
    box-shadow: none;
  }
  .section--dark .talk-step__label { color: var(--c-green); }
  .section--dark .talk-step__title { color: var(--c-white); }
  .section--dark .talk-step__desc  { color: rgba(255,255,255,0.85); }
  .section--dark .talk-step__foot {
    border-top-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
  }
  .section--dark .talk-step__foot a {
    color: rgba(255,255,255,0.85);
    border-bottom-color: rgba(255,255,255,0.2);
  }
  .section--dark .talk-step__foot a:hover { color: var(--c-green); border-color: var(--c-green); }

  /* Module-Grid — Übersicht optionaler Add-ons (kein Routing-Pattern,
     kein Hover-Lift, kein Border-Glow). 4-spaltig auf Desktop,
     2-spaltig auf Tablet, 1-spaltig auf Mobile. */
  .module-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s5);
  }
  @media (max-width: 1023px) {
    .module-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .module-grid { grid-template-columns: 1fr; }
  }
  .module-card {
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.13);
    border-radius: var(--radius-md);
    padding: var(--s6);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    box-shadow: 0 4px 24px rgba(0,191,99,0.06);
    transition: background var(--t-default), border-color var(--t-default), box-shadow var(--t-default);
  }
  /* Module-Card Hover: dezenter Akzent ohne Routing-Pattern.
     Karten sind Information, kein Lift — nur Border + Schatten reagieren,
     damit die Sektion lebt. */
  .module-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(0,191,99,0.4);
    box-shadow: 0 4px 24px rgba(0,191,99,0.15);
  }
  .module-card:hover .module-card__num {
    color: #1ed877;
  }
  .module-card__num {
    font-family: var(--ff-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--c-green);
    transition: color var(--t-default);
  }
  .module-card h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: var(--c-white);
  }
  .module-card p {
    margin: 0;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    color: rgba(255,255,255,0.72);
  }

  /* Stagger-Reveal: Karten erscheinen beim Scroll-Eintritt der Sektion
     versetzt von oben links nach unten rechts. */
  .reveal .module-card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms var(--t-default),
                transform 400ms var(--t-default),
                background var(--t-default),
                border-color var(--t-default),
                box-shadow var(--t-default);
  }
  .reveal.is-in .module-card { opacity: 1; transform: none; }
  .reveal.is-in .module-card:nth-child(1) { transition-delay: 0ms; }
  .reveal.is-in .module-card:nth-child(2) { transition-delay: 80ms; }
  .reveal.is-in .module-card:nth-child(3) { transition-delay: 160ms; }
  .reveal.is-in .module-card:nth-child(4) { transition-delay: 240ms; }
  .reveal.is-in .module-card:nth-child(5) { transition-delay: 320ms; }
  .reveal.is-in .module-card:nth-child(6) { transition-delay: 400ms; }
  .reveal.is-in .module-card:nth-child(7) { transition-delay: 480ms; }
  .reveal.is-in .module-card:nth-child(8) { transition-delay: 560ms; }

  @media (prefers-reduced-motion: reduce) {
    .reveal .module-card { opacity: 1; transform: none; transition: none; }
    .module-card,
    .module-card:hover,
    .module-card__num { transition: none; }
  }

  /* Principle Card — Werte-/Prinzipien-Statement-Karte
     Visuelle Vorlage: Talk-Step-Karten im Final-CTA auf index.html.
     Identisches Pattern (Bg, Padding, Schatten, Footer-Trennlinie),
     stärker durch: Border 6px, Body fs-h4, Label fs-body-sm.
     Anwendung: Werte-/Prinzipien-Sektionen, primär weiße Sektionen. */
  .principle-card {
    background: var(--c-white);
    border: 1px solid var(--c-gray-300);
    border-left: 6px solid var(--c-green);
    border-radius: var(--radius-md);
    padding: var(--s6);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.06),
      0 12px 28px -10px rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(255,255,255,0.7);
    transition: box-shadow 350ms cubic-bezier(.2,.8,.2,1), transform 350ms cubic-bezier(.2,.8,.2,1);
  }
  .principle-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 2px 4px rgba(0,0,0,0.06),
      0 18px 40px -12px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .principle-card__label {
    font-family: var(--ff-mono);
    font-size: var(--fs-body-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-green-dark);
    margin-bottom: var(--s4);
  }
  .principle-card__body {
    font-size: var(--fs-h4);
    line-height: 1.4;
    color: var(--c-anthracite-dark);
    margin: 0;
    flex: 1;
  }
  .principle-card__foot {
    margin: var(--s4) 0 0;
    padding-top: var(--s3);
    border-top: 1px solid var(--c-gray-200);
    font-family: var(--ff-mono);
    font-size: var(--fs-micro);
    color: var(--c-anthracite-light);
    letter-spacing: 0.02em;
    line-height: 1.4;
  }
  .reveal .principle-card {
    opacity: 0; transform: translateY(12px);
    transition: opacity 500ms var(--t-default), transform 500ms var(--t-default), box-shadow 350ms cubic-bezier(.2,.8,.2,1);
  }
  .reveal.is-in .principle-card { opacity: 1; transform: none; }
  .reveal.is-in .principle-card:hover { transform: translateY(-2px); }
  .reveal.is-in .principle-card:nth-child(1) { transition-delay: 0ms; }
  .reveal.is-in .principle-card:nth-child(2) { transition-delay: 90ms; }
  .reveal.is-in .principle-card:nth-child(3) { transition-delay: 180ms; }
  @media (prefers-reduced-motion: reduce) {
    .reveal .principle-card,
    .reveal.is-in .principle-card:hover,
    .principle-card:hover { transform: none !important; transition: none !important; }
    .reveal .principle-card { opacity: 1 !important; }
  }

  /* Principle Card — Dark-Variante.
     Anwendung: dark-Sektionen, in denen das Werte-/Prinzipien-Muster
     aufgegriffen wird (z. B. #zielgruppe auf ueber-bit-feed). */
  .principle-card--dark {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 0;
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: background 400ms ease, border-color 400ms ease;
  }
  .principle-card--dark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--c-green);
    transition: width 500ms cubic-bezier(.2,.8,.2,1);
  }
  .principle-card--dark .principle-card__label { color: var(--c-green); }
  .principle-card--dark .principle-card__body  { color: rgba(255,255,255,0.92); }
  .principle-card--dark .principle-card__foot {
    border-top: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55);
  }
  .principle-card--dark:hover {
    background: rgba(0,191,99,0.06);
    border-color: rgba(0,191,99,0.3);
    transform: none;
    box-shadow: none;
  }
  .principle-card--dark:hover::before { width: 100%; }
  /* Specificity-Override: .reveal.is-in .principle-card:hover (Hover-Lift
     im Reveal-Kontext) greift auch fuer --dark und schlaegt :hover allein. */
  .reveal.is-in .principle-card--dark:hover { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .principle-card--dark::before { transition: none; }
  }

  .final-cta { text-align: center; max-width: 720px; margin: 0 auto; }
  .final-cta .overline { display: block; margin-bottom: var(--s3); }
  .final-cta .h2 { margin-bottom: var(--s4); }
  .final-cta p { color: var(--c-anthracite-light); margin-bottom: var(--s8); font-size: var(--fs-body-lg); }
  .final-cta .btn { margin-bottom: var(--s6); }

  /* Tertiaere Geschaeftszeiten-Zeile direkt unter dem Final-CTA-Button. */
  .final-cta__hint {
    margin-top: var(--s4);
    margin-bottom: 0;
    font-family: var(--ff-mono); font-size: 13px;
    color: var(--c-anthracite-light);
    letter-spacing: 0.04em;
  }
  .section--dark .final-cta__hint { color: rgba(255,255,255,0.55); }

  /* Bridge-Link unter dem Final-CTA-Button — fuehrt auf eine verwandte Seite. */
  .final-cta__bridge {
    margin-top: var(--s4);
    margin-bottom: 0;
    font-size: 14px;
    color: var(--c-anthracite-light);
    line-height: 1.5;
  }
  .final-cta__bridge a { color: var(--c-green-dark); text-decoration: underline; text-underline-offset: 3px; }
  .final-cta__bridge a:hover { color: var(--c-green); }
  .section--dark .final-cta__bridge { color: rgba(255,255,255,0.55); }
  .section--dark .final-cta__bridge a { color: var(--c-green); }
  /* Dark-Kontext (kontakt-Sektion auf index/so-arbeiten-wir/projekte) */
  .section--dark .final-cta p { color: rgba(255,255,255,0.78); }

  /* ============== FOOTER ============== */
  footer {
    background: var(--c-anthracite-dark); color: var(--c-white);
    padding: var(--s12) 0 var(--s6);
  }
  .footer-grid {
    display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--s12);
  }
  @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s8); } }
  .footer-grid > nav { display: contents; }
  .footer .footer__heading {
    font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500;
    color: rgba(255,255,255,0.5); margin: 0 0 var(--s4);
  }
  .footer__about { display: flex; flex-direction: column; align-items: flex-start; }
  .footer__about .logo-svg { height: 36px; }
  .footer__about p { color: rgba(255,255,255,0.6); font-size: 14px; max-width: 280px; margin: 14px 0 0; }
  .footer ul { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 10px; }
  .footer ul a { color: rgba(255,255,255,0.85); font-size: 15px; }
  .footer ul a:hover { color: var(--c-green); text-decoration: none; }
  .footer__bottom {
    margin-top: var(--s8); padding-top: var(--s4);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s4);
    color: rgba(255,255,255,0.45); font-size: 13px;
  }
  .footer__bottom a { color: rgba(255,255,255,0.7); }
  .footer-link {
    background: transparent; border: 0; padding: 0;
    font: inherit; color: rgba(255,255,255,0.7);
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer; transition: color var(--t-fast);
  }
  .footer-link:hover { color: var(--c-green); }
  .footer-link:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; border-radius: 2px; }
  @media (max-width: 767px) { .footer-link { padding: 10px 0; } }
  .linkedin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85); margin-top: 16px;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .linkedin:hover { background: var(--c-green); color:#fff; text-decoration: none; }

  /* ============== BACK TO TOP ============== */
  .to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 40;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--c-green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    opacity: 0; pointer-events: none; transition: opacity var(--t-default), transform var(--t-default);
    transform: translateY(10px);
  }
  .to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .to-top:hover { background: var(--c-green-dark); }

  /* ============== COOKIE BANNER ============== */
  .cookie {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70;
    background: var(--c-anthracite-dark); color: #fff;
    border-radius: var(--radius-md); padding: var(--s6);
    display: grid; grid-template-columns: 1fr auto; gap: var(--s4) var(--s6);
    align-items: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
    transform: translateY(120%); opacity: 0;
    transition: transform var(--t-slow), opacity var(--t-slow);
    max-width: 1200px; margin-left: auto; margin-right: auto;
    border: 1px solid rgba(255,255,255,0.08);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .cookie.is-visible { transform: translateY(0); opacity: 1; }
  .cookie__text { font-size: 14px; color: rgba(255,255,255,0.8); margin: 0; line-height: var(--lh-body); }
  .cookie__text a { color: var(--c-green); text-decoration: underline; }
  .cookie__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  /* Settings-Panel: spannt beide Grid-Spalten, animiert max-height. */
  .cookie__settings-panel {
    grid-column: 1 / -1;
    max-height: 0; overflow: hidden;
    opacity: 0;
    transition: max-height 300ms ease-out, opacity 200ms ease-out, padding-top 300ms ease-out, margin-top 300ms ease-out;
    padding-top: 0; margin-top: 0;
    border-top: 1px solid transparent;
  }
  .cookie.is-expanded .cookie__settings-panel {
    max-height: 60vh;
    opacity: 1;
    padding-top: var(--s4);
    margin-top: var(--s2);
    border-top-color: rgba(255,255,255,0.08);
  }
  /* Default-/Expanded-Buttons schalten je nach Banner-Zustand. */
  .cookie__act--expanded { display: none; }
  .cookie.is-expanded .cookie__act--default { display: none; }
  .cookie.is-expanded .cookie__act--expanded { display: inline-flex; }
  /* Secondary button on dark fixed-bottom (Cookie-Banner + Lead-Bar) */
  .cookie .btn--secondary,
  .lead-bar .btn--secondary { color: #fff; border-color: rgba(255,255,255,0.4); }
  .cookie .btn--secondary:hover,
  .lead-bar .btn--secondary:hover { background: rgba(255,255,255,0.08); }
  .cookie__settings {
    background: transparent; border: 0; padding: 8px 4px;
    font: inherit; font-size: 14px; color: rgba(255,255,255,0.7);
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer; transition: color var(--t-fast);
  }
  .cookie__settings:hover { color: #fff; }
  .cookie__settings:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; border-radius: 2px; }
  @media (max-width: 767px) {
    .cookie { grid-template-columns: 1fr; gap: var(--s4); }
    .cookie__actions { flex-direction: column; align-items: stretch; gap: 8px; }
    .cookie__actions .btn { width: 100%; }
    .cookie__settings { text-align: center; padding: 10px 4px; }
    .cookie.is-expanded .cookie__settings-panel { max-height: 50vh; }
  }

  /* ============== COOKIE-FAB (Re-Open) ============== */
  .cookie-fab {
    position: fixed; left: 24px; bottom: 24px; z-index: 60;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--c-green); color: #fff;
    border: 0; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    transition: background var(--t-fast), transform var(--t-fast);
  }
  .cookie-fab:hover { background: var(--c-green-dark); }
  .cookie-fab:focus-visible { outline: 2px solid var(--c-green); outline-offset: 3px; }

  /* ============== CONSENT-SETTINGS (im Banner inline) ============== */
  .consent-row {
    display: flex; align-items: center; gap: var(--s4);
    padding: var(--s4) 0;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .consent-row:first-of-type { border-top: 0; padding-top: 0; }
  .consent-row__text { flex: 1; min-width: 0; }
  .consent-row__text strong {
    display: block; color: #fff;
    font-weight: 600; margin-bottom: 2px;
  }
  .consent-row__text span {
    display: block; font-size: 14px; color: rgba(255,255,255,0.65);
    line-height: var(--lh-body);
  }
  .consent-toggle {
    flex: 0 0 auto; position: relative; width: 44px; height: 24px;
    display: inline-block;
  }
  .consent-toggle input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; margin: 0;
  }
  .consent-toggle input:disabled { cursor: not-allowed; }
  .consent-toggle__track {
    position: absolute; inset: 0; background: var(--c-gray-300);
    border-radius: 999px; transition: background var(--t-fast);
    pointer-events: none;
  }
  .consent-toggle__track::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; background: var(--c-white); border-radius: 50%;
    transition: transform var(--t-fast);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .consent-toggle input:checked + .consent-toggle__track { background: var(--c-green); }
  .consent-toggle input:checked + .consent-toggle__track::after { transform: translateX(20px); }
  .consent-toggle input:disabled + .consent-toggle__track { opacity: 0.55; }
  .consent-toggle input:focus-visible + .consent-toggle__track {
    outline: 2px solid var(--c-green); outline-offset: 2px;
  }

  /* ============== SECTION TRANSITIONS ============== */
  .xfade {
    position: relative; height: 100px; margin: 0;
    overflow: hidden; line-height: 0;
  }
  .xfade svg { width: 100%; height: 100%; display: block; }
  .xfade .hairline { display: none; }

  /* ============== DYNAMIC ACCENTS ============== */
  .word-reveal { display: inline-block; overflow: hidden; vertical-align: bottom; }
  .word-reveal > .w {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .word-reveal.is-in > .w { transform: translateY(0); }

  .spotlight {
    position: relative; overflow: hidden;
  }
  .spotlight::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
                rgba(0,191,99,0.18), transparent 65%);
    opacity: 0; transition: opacity var(--t-default);
  }
  .spotlight:hover::after, .spotlight.is-active::after { opacity: 1; }

  /* Ticker / marquee strip */
  .ticker {
    background: var(--c-anthracite-dark); color: rgba(255,255,255,0.75);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow: hidden; padding: 18px 0; font-family: var(--ff-mono); font-size: 14px;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .ticker__track { display: flex; gap: var(--s16); white-space: nowrap; animation: tick 40s linear infinite; width: max-content; }
  .ticker__track > span { display: inline-flex; align-items: center; gap: 14px; color: rgba(255,255,255,0.75); }
  .ticker__track > span::before {
    content: ""; width: 8px; height: 8px; background: var(--c-green); border-radius: 50%; display: inline-block;
    box-shadow: 0 0 0 4px rgba(0,191,99,0.15);
  }
  .ticker:hover .ticker__track { animation-play-state: paused; }
  @keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Magnetic button */
  .btn[data-magnetic] { position: relative; transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1), background var(--t-fast), box-shadow var(--t-fast); }

  /* Cursor follower */
  .cursor {
    --cursor-x: 0px;
    --cursor-y: 0px;
    --cursor-scale: 0;
    position: fixed; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%;
    background: var(--c-green); pointer-events: none; z-index: 100;
    transform: translate(var(--cursor-x), var(--cursor-y)) translate(-50%, -50%) scale(var(--cursor-scale));
    opacity: 0; box-shadow: 0 0 0 6px rgba(0,191,99,0.15);
    transition: opacity 180ms ease-out, width 180ms ease-out, height 180ms ease-out;
  }
  .cursor.is-active { opacity: 1; --cursor-scale: 1; }
  .cursor.is-hover  { width: 44px; height: 44px; background: transparent; border: 1.5px solid var(--c-green); box-shadow: none; }
  .cursor.is-on-primary { background: var(--c-white); }
  .cursor.is-hover.is-on-primary { background: transparent; border-color: #fff; }
  @media (hover: none) { .cursor { display: none; } }

  /* Nativen Cursor verstecken, sobald Custom-Cursor aktiv ist (body.has-cursor wird vom JS gesetzt). */
  /* I-Beam für Eingabefelder bleibt erhalten, not-allowed für aria-busy / disabled. */
  @media (hover: hover) and (pointer: fine) {
    body.has-cursor, body.has-cursor * { cursor: none; }
    /* I-Beam nur auf textartigen Inputs. Checkbox/Radio/Range/Button etc.
       wuerden sonst den nativen Caret zusaetzlich zum Custom-Cursor zeigen
       (Doppel-Cursor-Bug an den Consent-Toggles). */
    body.has-cursor input:not([type]),
    body.has-cursor input[type="text"],
    body.has-cursor input[type="email"],
    body.has-cursor input[type="password"],
    body.has-cursor input[type="number"],
    body.has-cursor input[type="tel"],
    body.has-cursor input[type="url"],
    body.has-cursor input[type="search"],
    body.has-cursor input[type="date"],
    body.has-cursor input[type="time"],
    body.has-cursor input[type="datetime-local"],
    body.has-cursor input[type="month"],
    body.has-cursor input[type="week"],
    body.has-cursor textarea,
    body.has-cursor [contenteditable],
    body.has-cursor [contenteditable="true"] {
      cursor: text;
    }
    body.has-cursor [aria-busy="true"], body.has-cursor button:disabled {
      cursor: not-allowed;
    }
  }

  /* Hero parallax */
  .hero__grid-bg, .hero__glow { transition: transform 120ms linear; will-change: transform; }

  /* ============== QUALIFIER (LEAD GEN) ============== */
  .qualifier {
    background: linear-gradient(180deg, var(--c-anthracite-dark), var(--c-anthracite));
    border-radius: var(--radius-lg);
    padding: var(--s12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    position: relative; overflow: hidden;
  }
  .qualifier::before {
    content: ""; position: absolute; right: -100px; top: -100px; width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(0,191,99,0.15), transparent 65%); pointer-events: none;
  }
  .qualifier__head { position: relative; margin-bottom: var(--s6); }
  .qualifier__step {
    font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--c-green); margin-bottom: 8px;
  }
  .qualifier__q { font-size: 28px; font-weight: 700; line-height: 1.2; }
  @media (max-width: 767px) { .qualifier__q { font-size: 22px; } }
  .qualifier__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); position: relative; }
  @media (max-width: 767px) { .qualifier__opts { grid-template-columns: 1fr; } }
  .qualifier__opt {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    padding: var(--s6); border-radius: var(--radius-md); text-align: left;
    color: #fff; font-size: 16px; font-weight: 500; cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
    display: flex; flex-direction: column; gap: 4px;
  }
  .qualifier__opt small { color: rgba(255,255,255,0.55); font-size: 13px; font-weight: 400; }
  .qualifier__opt:hover { background: rgba(0,191,99,0.1); border-color: var(--c-green); transform: translateY(-2px); }
  .qualifier__opt[aria-pressed="true"] { background: var(--c-green); border-color: var(--c-green); color: #fff; }
  .qualifier__opt[aria-pressed="true"] small { color: rgba(255,255,255,0.85); }
  .qualifier__result {
    margin-top: var(--s6); padding: var(--s6); border-radius: var(--radius-md);
    background: rgba(0,191,99,0.12); border: 1px solid rgba(0,191,99,0.3);
    display: none; animation: fadeUp 400ms ease-out;
  }
  .qualifier__result.is-visible { display: block; }
  .qualifier__result strong { color: var(--c-green); }
  .qualifier__result p {
    margin-bottom: var(--s4);
    color: rgba(255,255,255,0.85);
  }
  .qualifier__result-actions {
    display: flex;
    gap: var(--s3);
    flex-wrap: wrap;
  }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* ============== STICKY LEAD BAR ============== */
  .lead-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: rgba(31,31,31,0.96); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 14px var(--pad-side);
    display: flex; align-items: center; gap: var(--s6);
    transform: translateY(110%);
    transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.2);
  }
  .lead-bar.is-visible { transform: translateY(0); }
  .lead-bar__icon {
    width: 44px; height: 44px; border-radius: 50%; background: var(--c-green);
    display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto;
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,191,99,0.5); }
    50%      { box-shadow: 0 0 0 10px rgba(0,191,99,0); }
  }
  .lead-bar__text { color: #fff; font-size: 14px; flex: 1; }
  .lead-bar__text strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 2px; }
  .lead-bar__text span { color: rgba(255,255,255,0.6); }
  .lead-bar__actions { display: flex; gap: var(--s3); flex: 0 0 auto; }
  .lead-bar__close {
    width: 32px; height: 32px; border-radius: 50%; color: rgba(255,255,255,0.5);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  }
  .lead-bar__close:hover { color: #fff; background: rgba(255,255,255,0.08); }
  @media (max-width: 767px) {
    .lead-bar { flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
    .lead-bar__text { flex: 1 1 calc(100% - 80px); }
    .lead-bar__actions { flex: 1 1 100%; }
    .lead-bar__actions .btn { flex: 1; }
  }
  .to-top { bottom: 90px; }                 /* make room for lead-bar */
  .cookie { bottom: 90px; }                 /* same */
  .cookie-fab { bottom: 90px; }             /* same */
  body.leadbar-hidden .to-top,
  body.leadbar-hidden .cookie,
  body.leadbar-hidden .cookie-fab { bottom: 24px; }

  /* Section selbst bleibt voll sichtbar (Hintergrund deckt Wave-Transition).
     Nur der .container und seine direkten Kinder werden animiert. */
  .reveal > .container,
  .reveal > .container > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
  }
  .reveal.is-in > .container,
  .reveal.is-in > .container > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* ============== FORM CARD ==============
     Lead-Generation-Formular auf dunkler Sektion.
     Dunkler Bg, dauerhafter gruener Aussen-Glow als visueller Anker.
     Verwendung: kontakt.html (primaere Lead-Conversion-Form). */
  /* Honeypot-Feld: visuell unsichtbar, fuer Bots aber befuellbar. */
  .hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form-card-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s12);
    align-items: start;
  }
  @media (max-width: 1023px) {
    .form-card-grid { grid-template-columns: 1fr; gap: var(--s8); }
  }

  .form-card-aside h3 {
    margin: 0 0 var(--s5);
    color: var(--c-white);
  }
  .form-card-aside .talk-steps {
    grid-template-columns: 1fr;
    gap: var(--s4);
    max-width: none;
    margin: 0;
  }

  .form-card-wrap { position: relative; }
  .form-card-wrap::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--c-green) 0%, transparent 50%, var(--c-green) 100%);
    border-radius: calc(var(--radius-md) + 2px);
    opacity: 0.4;
    z-index: 0;
    filter: blur(12px);
    pointer-events: none;
  }

  .form-card {
    position: relative;
    z-index: 1;
    background: var(--c-anthracite-darker);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    padding: var(--s8);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 24px 48px -16px rgba(0,0,0,0.6);
  }

  .form-card__header {
    margin-bottom: var(--s7);
    padding-bottom: var(--s5);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
  }
  .form-card__title {
    font-size: 22px; font-weight: 700; line-height: 1.2;
    color: var(--c-white);
    margin: 0 0 6px;
  }
  .form-card__sub {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    margin: 0;
    line-height: 1.45;
  }
  .form-card__badge {
    background: rgba(0,191,99,0.12);
    border: 1px solid rgba(0,191,99,0.3);
    color: var(--c-green);
    font-family: var(--ff-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .form-card .form-field { margin-bottom: var(--s4); position: relative; }
  .form-card .form-field label {
    display: block;
    font-family: var(--ff-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
    font-weight: 500;
  }
  .form-card .form-field label .req { color: var(--c-green); }
  .form-card .form-field input,
  .form-card .form-field textarea {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 12px 14px;
    color: var(--c-white);
    font-size: 15px;
    font-family: var(--ff);
    transition: border-color var(--t-default), background var(--t-default), box-shadow var(--t-default);
  }
  .form-card .form-field input:focus,
  .form-card .form-field textarea:focus {
    outline: none;
    border-color: var(--c-green);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(0,191,99,0.18);
  }
  .form-card .form-field input::placeholder,
  .form-card .form-field textarea::placeholder {
    color: rgba(255,255,255,0.3);
  }
  .form-card .form-field textarea {
    min-height: 100px;
    resize: vertical;
    line-height: var(--lh-body);
  }
  .form-card .form-field input.is-invalid,
  .form-card .form-field textarea.is-invalid {
    border-color: var(--c-red-warn);
    background: rgba(217,48,37,0.10);
  }
  .form-card .form-error {
    display: none;
    color: #ff8d85;
    font-size: var(--fs-body-sm);
    margin-top: var(--s2);
  }
  .form-card .form-error.is-visible { display: block; }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
    margin-bottom: var(--s4);
  }
  .form-row .form-field { margin-bottom: 0; }
  @media (max-width: 767px) {
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .form-row .form-field { margin-bottom: var(--s4); }
    .form-row .form-field:last-child { margin-bottom: 0; }
  }

  .form-checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: var(--s5) 0;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
  }
  .form-checkbox input { margin-top: 3px; flex-shrink: 0; }
  .form-checkbox a { color: var(--c-green); text-decoration: underline; }
  .form-checkbox .form-error { width: 100%; }

  /* Submit-Button — basiert auf .btn--primary, mit Lift-Hover und vollbreit
     im Form-Card-Kontext. */
  .form-card .btn--primary {
    box-shadow: 0 4px 12px rgba(0,191,99,0.3);
    transition: background var(--t-fast), transform 200ms, box-shadow 200ms, color var(--t-fast);
  }
  .form-card .btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,191,99,0.45);
  }
  .form-card .btn--primary:active { transform: translateY(0); }
  .form-card button[type="submit"][disabled] {
    opacity: 0.7;
    cursor: progress;
  }

  .form-card .form-foot {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin: var(--s4) 0 0;
    text-align: center;
  }

  .form-banner {
    margin-top: var(--s5);
    padding: var(--s4) var(--s5);
    border-radius: 8px;
    border: 1px solid rgba(217,48,37,0.35);
    background: rgba(217,48,37,0.10);
    color: #ffb3ad;
    font-size: var(--fs-body-sm);
    line-height: 1.5;
  }
  .form-banner[hidden] { display: none; }
  .form-banner strong { color: #ffd2cd; }
  .form-banner a { color: var(--c-white); text-decoration: underline; }

  .form-success {
    position: relative;
    z-index: 1;
    background: var(--c-anthracite-darker);
    border: 1px solid rgba(0,191,99,0.35);
    border-left: 4px solid var(--c-green);
    border-radius: var(--radius-md);
    padding: var(--s12) var(--s8);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 24px 48px -16px rgba(0,0,0,0.6);
    text-align: left;
    color: var(--c-white);
  }
  .form-success[hidden] { display: none; }
  .form-success h3 { margin: 0 0 var(--s4); color: var(--c-white); }
  .form-success p {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .form-success p a { color: var(--c-green); text-decoration: underline; }

  @media (prefers-reduced-motion: reduce) {
    .form-card-wrap::before { opacity: 0.2; }
    .form-card .btn--primary,
    .form-card .btn--primary:hover { transform: none !important; transition: none !important; }
    .form-card .form-field input,
    .form-card .form-field textarea { transition: none !important; }
  }

  /* ============== REDUCED MOTION ============== */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
    .reveal > .container,
    .reveal > .container > * {
      opacity: 1;
      transform: none;
    }
  }