/* ============================================================================
   ON Automation — Designsystem "Präzisionswerkstatt"
   Grundprinzip: Struktur sichtbar machen. Kanten statt Wolken.

   Eine Datei, gegliedert über native Cascade Layers. Die Reihenfolge unten ist
   verbindlich — dadurch braucht keine Regel eine erhöhte Spezifität.

   Regeln (siehe KONVENTIONEN.md):
   - Farbe ausschließlich für Interaktion, Zustand, Semantik, Daten.
   - Struktur über 1px-Linien und Flächenwechsel, nicht über Schatten.
   - Keine Magic Numbers: Maße kommen aus Tokens.
   ========================================================================== */

@layer tokens, reset, base, layout, components, utilities;

/* ============================================================================
   FONTS — selbst gehostet, latin-Subset, WOFF2
   Zwei Dateien insgesamt:
   - Plex Sans als Variable Font (Gewichte 400–600 aus EINER Datei)
   - Plex Mono in einem Schnitt (400), nur für Labels/Kennzahlen
   Metriken wurden aus den Schriftdateien gelesen (unitsPerEm 1000,
   hhea ascent 1025, descent -275, lineGap 0, x-Höhe 516).
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  /* latin-Subset: deutsche Umlaute, ß, €, dt. Anführungszeichen sind enthalten */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metrisch angepasster Fallback gegen Layout-Shift beim Font-Swap.
   Gemessen: Plex Sans x-Höhe 0.5160 em, Arial x-Höhe 0.5186 em
   -> size-adjust = 0.5160 / 0.5186 = 99.51 %
   -> ascent/descent aus Plex, geteilt durch size-adjust, damit die Zeilenbox
      in px identisch bleibt: 102.5 / 0.9951 = 103.00 %, 27.5 / 0.9951 = 27.64 % */
@font-face {
  font-family: "Plex Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 99.51%;
  ascent-override: 103%;
  descent-override: 27.64%;
  line-gap-override: 0%;
}

/* ============================================================================
   TOKENS
   ========================================================================== */

@layer tokens {
  :root {
    /* --- Farbe -------------------------------------------------------------
       Alle Werte gemessen (WCAG 2.x). Vollständige Tabelle im Styleguide.
       Mengenverhältnis: ~90 % neutral, ~5 % Akzent, ~5 % Daten/Semantik. */

    --color-bg: #ffffff;
    /* Etwas wärmer und einen Tick präsenter als vorher (#f7f6f4). Die Fläche
       soll sich als ruhige Off-White-Zone lesen, die einen Abschnitt gliedert —
       ohne dass eine Trennlinie nötig wird. Trägt keine Information, daher
       keine Kontrastvorgabe. */
    --color-surface: #f5f3ef;        /* 1.11:1 zu bg — reiner Flächenwechsel */
    /* Zweiter Flächenton. Damit lassen sich Abschnitte durch FLÄCHE statt
       durch Trennlinien gliedern — der Hauptgrund, warum die Seite vorher
       nach Raster und Dokumentation aussah. */
    --color-surface-2: #ece9e3;      /* 1.20:1 zu bg, Text 14.6:1 */
    /* Akzentgetönte Fläche. Ausschließlich zum Markieren der WICHTIGSTEN
       Information (Ergebnis-Panel), nie dekorativ. */
    --color-accent-surface: #e8f0f1; /* Text 15.08:1, Akzent 7.27:1 */
    --color-text: #1a1a18;           /* 17.43:1 auf bg */
    /* Zwischenton für große sekundäre Flächen (Lead, Statement). Deutlich
       satter als text-muted, damit ein 22-px-Lead nicht grau und billig wirkt,
       aber klar unter dem Textschwarz. */
    --color-text-soft: #3d3c39;      /* 11.03:1 auf bg,  9.95:1 auf surface */
    --color-text-muted: #5c5b57;     /*  6.80:1 auf bg,  6.13:1 auf surface */

    /* Zwei Grenz-Tokens, bewusst getrennt:
       --color-border        strukturelle/dekorative Linien (1.31:1, WCAG n. a.)
       --color-border-strong Grenzen, die ein Bedienelement identifizieren
                             (Formularfelder) — 3.58:1 auf bg, 3.24:1 auf surface */
    --color-border: #e3e1dc;
    --color-border-strong: #8a8780;

    --color-accent: #0f5563;         /*  8.40:1 auf bg — Links, Buttons, aktiv */
    --color-accent-hover: #0c4955;   /* 10.00:1 auf bg */
    --color-accent-contrast: #ffffff;/*  8.40:1 auf accent */
    --color-focus: #0f5563;          /*  8.40:1 auf bg,  7.58:1 auf surface */

    /* Datenfarben — ausschließlich Diagramme und Tool-Grafik, niemals UI.
       Ziel 3:1 (grafische Objekte). */
    --color-data-1: #b4740e;         /* 3.86:1 auf bg */
    --color-data-2: #4c6b7a;         /* 5.69:1 auf bg */
    --color-data-3: #6e7a55;         /* 4.59:1 auf bg */

    /* Semantik — als Text lesbar, Ziel 4.5:1 */
    --color-success: #1f7a4c;        /* 5.32:1 auf bg */
    --color-warning: #8a5a00;        /* 5.93:1 auf bg */
    --color-error: #b3261e;          /* 6.54:1 auf bg */

    /* --- Typografie -------------------------------------------------------- */

    --font-sans: "IBM Plex Sans", "Plex Fallback", Arial, Helvetica, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Fluide Skala, linear zwischen 360px und 1280px Viewport.
       Der Kontrast liegt bewusst am oberen Ende: Display zu Fließtext rund
       4,5:1. Die Modernität kommt aus diesem Größensprung und aus Weißraum —
       nicht aus Effekten. Der Mittelbau (H3 / Lead / Body) bleibt eng
       beieinander, weil eine Unternehmensseite dort ruhig lesen soll. */
    --text-display: clamp(2.75rem, 1.8152rem + 4.1522vw, 4.75rem);  /* 44 → 76 */
    --text-h1: clamp(2.25rem, 1.7283rem + 2.3188vw, 3.375rem);      /* 36 → 54 */
    --text-h2: clamp(1.75rem, 1.4239rem + 1.4493vw, 2.4375rem);     /* 28 → 39 */
    --text-h3: clamp(1.3125rem, 1.2337rem + 0.3502vw, 1.5rem);      /* 21 → 24 */
    --text-lead: clamp(1.1875rem, 1.1141rem + 0.3261vw, 1.375rem);  /* 19 → 22 */
    --text-body: clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem);      /* 16 → 17 */
    --text-small: 0.9375rem;                                         /* 15 */
    --text-mono-label: 0.8125rem;                                    /* 13 */

    /* Kennzahlen sind auf dieser Website das Kernargument und deshalb eine
       eigene, betont große Stufe — nicht die H2-Größe. */
    --text-kpi: clamp(2.5rem, 1.9130rem + 2.6087vw, 4rem);          /* 40 → 64 */

    /* Zeilenhöhe: große Grade eng, kleine offen. Ein 76-px-Display mit 1,04
       wirkt noch locker — 1,0 macht es zum Block. */
    --leading-display: 1.0;
    --leading-heading: 1.1;    /* H1, H2 */
    --leading-snug: 1.28;      /* H3 */
    --leading-lead: 1.45;      /* Lead */
    --leading-normal: 1.6;     /* Fließtext */

    /* Optischer Ausgleich: je größer der Grad, desto enger der Satz. */
    --tracking-display: -0.04em;
    --tracking-tight: -0.021em;  /* H1, H2 */
    --tracking-h3: -0.014em;
    --tracking-normal: 0;
    --tracking-label: 0.02em;    /* kurze Labels, ohne Kapitälchen */

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;      /* Maximum. Kein 700/800/900. */
    /* Große Grade tragen mit weniger Gewicht. 600 bei 76px wirkt schwer und
       gedrängt, 500 wirkt souverän. Bleibt innerhalb der Vorgabe (max. 600). */
    --weight-display: 500;

    --measure: 68ch;             /* Zeilenlänge Fließtext */
    /* Überschriften brechen früher als Text, aber nicht so früh, dass eine
       schmale Spalte wie in einem Formular entsteht (vorher 26ch). */
    --measure-heading: 34ch;

    /* --- Raum — 4px-Basis -------------------------------------------------- */

    --space-3xs: 0.25rem;   /*  4 */
    --space-2xs: 0.5rem;    /*  8 */
    --space-xs: 0.75rem;    /* 12 */
    --space-sm: 1rem;       /* 16 */
    --space-md: 1.5rem;     /* 24 */
    --space-lg: 2rem;       /* 32 */
    --space-xl: 3rem;       /* 48 */
    --space-2xl: 4rem;      /* 64 */
    --space-3xl: 6rem;      /* 96 */
    --space-4xl: 8rem;      /* 128 */

    /* Weißraum trägt die Gliederung, damit Trennlinien es nicht tun müssen.
       Noch einmal großzügiger als zuvor (max. 128px) — der wichtigste Hebel
       für den ruhigen, hochwertigen Eindruck. */
    --space-section: clamp(4.5rem, 2.6739rem + 8.1159vw, 9rem);      /*  72 → 144 */
    --space-section-tight: clamp(3rem, 2.3478rem + 2.8986vw, 4.5rem);/*  48 →  72 */

    /* --- Layout ----------------------------------------------------------- */

    --container-text: 45rem;
    --container-standard: 72rem;
    --container-wide: 90rem;
    --container-pad: clamp(1rem, 0.6522rem + 1.5459vw, 2rem);

    --header-height: 4.5rem;    /* 72px — schlank und ruhig, nicht gedrängt */

    /* --- Kanten und Radien ------------------------------------------------ */

    --border-width: 1px;
    --radius: 8px;         /* Standard: Buttons, Felder, Karten */
    --radius-sm: 4px;      /* Kleinteile: Badges, Marker */

    /* Genau eine Schattenstufe, ausschließlich für Elemente, die über
       Inhalt liegen (mobiles Nav-Panel, klebende Tool-Leiste). Nie dekorativ. */
    --shadow-overlay: 0 -1px 0 var(--color-border), 0 -8px 24px rgb(26 26 24 / 8%);

    /* --- Bewegung --------------------------------------------------------- */

    --dur-fast: 120ms;
    --dur-base: 200ms;
    --ease: cubic-bezier(0.2, 0, 0.3, 1);

    /* --- Ebenen ----------------------------------------------------------- */

    --z-sticky: 50;
    --z-header: 100;
    --z-nav-panel: 200;

    /* --- Icons -------------------------------------------------------------
       Nur funktionale Icons, als CSS-Maske in currentColor. Kein Icon-Markup,
       keine Sprite-Datei, kein zusätzlicher Request. */
    --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
    --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v10M4 7l4 4 4-4M2 14h12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
    --icon-shield-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 13.5 4v4.2c0 3-2.3 5.4-5.5 6.3-3.2-.9-5.5-3.3-5.5-6.3V4z' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='m5.6 8.2 1.7 1.7 3.1-3.4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
  }
}

/* ============================================================================
   RESET — schlank, kein normalize.css
   ========================================================================== */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

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

  img,
  video {
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  /* Ankerziele dürfen nicht unter dem klebenden Header landen.
     Bewusst auf allen [id] statt nur auf :target — :target greift erst nach
     der Navigation und wirkt beim Sprung nicht zuverlässig. :where() hält die
     Spezifität bei 0, damit diese Regel nie mit etwas konkurriert. */
  :where([id]) {
    scroll-margin-top: calc(var(--header-height) + var(--space-md));
  }
}

/* ============================================================================
   BASE — Element-Defaults
   ========================================================================== */

@layer base {
  html {
    font-family: var(--font-sans);
    /* Kein smooth scrolling erzwingen — respektiert Reduced Motion (s. u.) */
  }

  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    /* Deutsche Komposita: Silbentrennung ist hier Pflicht, nicht Feinschliff.
       Wirkt nur mit korrektem lang="de" am <html>-Element. */
    hyphens: auto;
    overflow-wrap: break-word;
    /* Bewusst KEIN overflow-x: hidden. Das würde Overflow nur verdecken statt
       verhindern — und es bricht position: sticky in mehreren Browsern, weil
       ein Scroll-Container entsteht. Overflow wird stattdessen an der Quelle
       vermieden: Silbentrennung, break-word, min-width in Grid-Kindern. */
  }

  /* Überschriftenebene und Schriftgröße sind entkoppelt: die Ebene ist
     Semantik (Dokumentstruktur), die Größe ist Gestaltung. Damit muss niemand
     eine falsche Ebene wählen, nur um eine Größe zu bekommen — und ein
     Absatz darf wie eine Überschrift aussehen, ohne eine zu sein. */
  h1,
  h2,
  h3,
  h4,
  .c-heading {
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-heading);
    text-wrap: balance;
    /* Headlines sind immer linksbündig — nie zentriert, nie Blocksatz */
    text-align: left;
  }

  h1,
  .c-h1 {
    font-size: var(--text-h1);
    font-weight: var(--weight-display);
  }

  h2,
  .c-h2 {
    font-size: var(--text-h2);
  }

  h3,
  .c-h3 {
    font-size: var(--text-h3);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-h3);
  }

  h4,
  .c-h4 {
    font-size: var(--text-body);
    letter-spacing: var(--tracking-normal);
  }

  p,
  li {
    text-wrap: pretty;
  }

  a {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  a:hover {
    color: var(--color-accent-hover);
  }

  /* Ein Fokusstil für alles. Gemessen 8.40:1 auf bg, 7.78:1 auf surface. */
  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  strong,
  b {
    font-weight: var(--weight-semibold);
  }

  small {
    font-size: var(--text-small);
  }

  /* <address> ist semantisch richtig für Kontaktdaten, der Kursiv-Default
     des Browsers ist hier aber falsch. */
  address {
    font-style: normal;
  }

  code,
  kbd,
  samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  hr {
    height: var(--border-width);
    border: 0;
    background: var(--color-border);
    margin-block: var(--space-lg);
  }

  /* Zahlen laufen in Tabellen und Tools nie in unterschiedlichen Breiten */
  table {
    font-variant-numeric: tabular-nums;
    border-collapse: collapse;
    width: 100%;
  }

  ::selection {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
  }
}

/* ============================================================================
   LAYOUT — Primitive. Alles richtet sich am gleichen Raster aus.
   ========================================================================== */

@layer layout {
  /* Drei verbindliche Breiten. Keine Einzelfall-Breiten auf Seiten. */
  .l-container {
    width: 100%;
    max-width: var(--container-standard);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .l-container--text {
    max-width: calc(var(--container-text) + 2 * var(--container-pad));
  }

  .l-container--wide {
    max-width: var(--container-wide);
  }

  /* Vertikaler Rhythmus: Abstände entstehen zwischen Geschwistern, nicht
     durch Einzel-Margins an Komponenten. */
  .l-stack > * + * {
    margin-block-start: var(--stack-space, var(--space-md));
  }

  .l-stack--sm {
    --stack-space: var(--space-2xs);
  }

  .l-stack--md {
    --stack-space: var(--space-sm);
  }

  .l-stack--lg {
    --stack-space: var(--space-lg);
  }

  /* Horizontale Gruppe, die bei Platzmangel umbricht (Buttonpaare, Meta) */
  .l-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-sm));
    align-items: center;
  }

  /* Automatisches Grid ohne Media Query. min ist der Umbruchpunkt. */
  .l-grid {
    display: grid;
    gap: var(--grid-gap, var(--space-md));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 17rem), 100%), 1fr));
  }

  .l-grid--2 {
    --grid-min: 22rem;
  }

  .l-grid--3 {
    --grid-min: 17rem;
  }

  /* Asymmetrische Zweiteilung. Genau EIN Umbruchpunkt (64rem): darunter
     gestapelt, darüber 7/5. Das ist die bewusste Absage an das überall
     gleiche 50/50- bzw. Kachelraster — eine Spalte trägt die Aussage, die
     andere den Beleg (Visual, Kennzahlen, Liste).
     Modifier --wide macht daraus 8/4 für Fälle mit klarer Nebenrolle. */
  .l-split {
    display: grid;
    gap: var(--split-gap, var(--space-2xl));
  }

  @media (width >= 64rem) {
    .l-split {
      grid-template-columns: var(--split, 7fr 5fr);
      gap: var(--split-gap, var(--space-3xl));
      align-items: var(--split-align, start);
    }

    .l-split--wide {
      --split: 8fr 4fr;
    }

    /* Beide Spalten auf gleiche Höhe. Nötig, damit ein klebendes Element in
       der kürzeren Spalte (z. B. .c-offer--sticky) Scrollweg hat. */
    .l-split--stretch {
      --split-align: stretch;
    }

    /* Kehrt die Spaltenreihenfolge visuell um, ohne die DOM-Reihenfolge zu
       ändern — die Aussage bleibt im Quelltext zuerst. */
    .l-split--flip > :first-child {
      order: 2;
    }
  }

  /* Fließtextspalte: begrenzte Zeilenlänge, unabhängig vom Container */
  .l-measure {
    max-width: var(--measure);
  }

  .l-divider {
    border-block-start: var(--border-width) solid var(--color-border);
  }
}

/* ============================================================================
   COMPONENTS
   ========================================================================== */

@layer components {
  /* --- Skip-Link — erstes fokussierbares Element im Dokument ------------- */

  .c-skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: calc(var(--z-nav-panel) + 1);
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius);
    color: var(--color-accent);
    font-weight: var(--weight-medium);
    text-decoration: none;
    /* Sichtbar nur bei Fokus — nicht per display:none, sonst nicht fokussierbar */
    transform: translateY(-200%);
  }

  .c-skip-link:focus-visible {
    transform: translateY(0);
  }

  /* --- Header ------------------------------------------------------------ */

  .c-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: var(--color-bg);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .c-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: var(--header-height);
  }

  .c-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
  }

  .c-brand:hover {
    color: var(--color-text);
  }

  /* Bild-Logo im Header. Höhe steuert die Größe, Breite folgt dem
     Seitenverhältnis (width/height am <img> verhindern Layout-Shift). */
  .c-brand__logo {
    display: block;
    height: 2.75rem;
    width: auto;
  }

  /* Wortmarke (nur noch im Styleguide-Vorher/Nachher-Vergleich): der Punkt
     ist das einzige grafische Markenelement und markiert den Akzentton. */
  .c-brand__mark {
    color: var(--color-accent);
  }

  /* Positionierungswort, durch eine Haarlinie vom Wortzeichen getrennt —
     ein ruhiges, präzises Detail statt eines zweiten Schriftschnitts. */
  .c-brand__suffix {
    padding-inline-start: 0.55em;
    border-inline-start: var(--border-width) solid var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-normal);
  }

  /* --- Navigation (Desktop) --------------------------------------------- */

  .c-nav {
    display: none;
  }

  .c-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }

  .c-nav__link {
    display: inline-block;
    padding-block: var(--space-2xs);
    color: var(--color-text);
    font-size: var(--text-small);
    text-decoration: none;
    /* Aktiv-Markierung über eine Linie, nicht über Farbfläche */
    border-block-end: 2px solid transparent;
  }

  .c-nav__link:hover {
    color: var(--color-accent);
    border-block-end-color: var(--color-border-strong);
  }

  .c-nav__link[aria-current="page"] {
    color: var(--color-accent);
    border-block-end-color: var(--color-accent);
  }

  /* --- Navigation (Mobil) ---------------------------------------------- */

  .c-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    /* Touch-Ziel 44px, ohne die Kopfhöhe zu sprengen */
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding-inline: var(--space-2xs);
    border-radius: var(--radius);
    color: var(--color-text);
    cursor: pointer;
  }

  .c-nav-toggle__bars {
    display: grid;
    gap: 4px;
    width: 20px;
  }

  .c-nav-toggle__bars span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }

  .c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bars span:nth-child(2) {
    opacity: 0;
  }

  .c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Panel. Ohne JS bleibt es sichtbar (kein hidden im HTML nötig) —
     nav.js setzt [hidden], sobald es die Steuerung übernimmt. */
  .c-nav-panel {
    border-block-start: var(--border-width) solid var(--color-border);
    background: var(--color-bg);
  }

  .c-nav-panel[hidden] {
    display: none;
  }

  .c-nav-panel__list {
    display: grid;
    padding-block: var(--space-2xs);
  }

  .c-nav-panel__link {
    display: block;
    padding: var(--space-xs) 0;
    min-height: 44px;
    color: var(--color-text);
    text-decoration: none;
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .c-nav-panel__list > li:last-child .c-nav-panel__link {
    border-block-end: 0;
  }

  .c-nav-panel__link:hover,
  .c-nav-panel__link[aria-current="page"] {
    color: var(--color-accent);
  }

  .c-nav-panel__cta {
    padding-block: var(--space-sm);
  }

  /* --- Breadcrumbs ------------------------------------------------------ */

  /* Ohne Trennlinie. Der Abstand allein trennt ausreichend, und eine Linie
     direkt unter der Header-Linie erzeugte zwei parallele Striche. */
  .c-breadcrumbs {
    font-size: var(--text-small);
  }

  .c-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-sm);
    color: var(--color-text-muted);
  }

  .c-breadcrumbs__list li + li::before {
    content: "/";
    margin-inline-end: var(--space-2xs);
    color: var(--color-border-strong);
  }

  .c-breadcrumbs a {
    color: var(--color-text-muted);
  }

  .c-breadcrumbs a:hover {
    color: var(--color-accent);
  }

  .c-breadcrumbs [aria-current="page"] {
    color: var(--color-text);
  }

  /* --- Section --------------------------------------------------------- */

  .c-section {
    padding-block: var(--space-section);
  }

  /* Vorher zusätzlich mit Trennlinien oben und unten. Die Linien sind weg:
     Bei genügend Weißraum trennt die Fläche allein, und ohne sie verschwindet
     der Raster-Eindruck. Genau hier lag ein Großteil des
     „Dokumentations"-Charakters. */
  .c-section--surface {
    background: var(--color-surface);
  }

  /* Zweiter Flächenton für Abschnitte, die sich von einer angrenzenden
     surface-Fläche abheben müssen — statt eine Linie dazwischen zu setzen. */
  .c-section--surface-2 {
    background: var(--color-surface-2);
  }

  .c-section--tight {
    padding-block: var(--space-section-tight);
  }

  .c-section--divided {
    border-block-start: var(--border-width) solid var(--color-border);
  }

  /* Abschnitts-Anatomie: (optional Eyebrow) → H2 → Lead → Inhalt.
     Der Eyebrow ist kein Pflichtteil mehr. */
  .c-section__head {
    max-width: var(--measure);
    margin-block-end: var(--space-2xl);
  }

  /* Überschriften brechen früher als Fließtext. Eine H2 mit 39px über volle
     68 Zeichen laufen zu lassen, ergibt zu lange Zeilen. */
  .c-section__head > :is(h1, h2, .c-heading) {
    max-width: var(--measure-heading);
  }

  /* Für editoriale Abschnitte, deren Überschrift bewusst breit laufen soll. */
  .c-section__head--wide {
    max-width: none;
  }

  .c-section__head--wide > :is(h1, h2, .c-heading) {
    max-width: 26ch;
  }

  /* --- Eyebrow — Mono-Label, ersetzt dekorative Elemente ---------------- */

  /* Kurzer, ruhiger Kicker in Sans — kein gesperrtes Mono-Label mehr und
     bewusst NICHT in Akzentfarbe: der Akzent ist für Interaktion und Daten
     reserviert, nicht für Gliederungsmarken. Der Eyebrow ist ab jetzt
     optional (siehe .c-section__head) und wird sparsam eingesetzt; fünf
     Kategorielabels pro Seite waren der „Spec-Sheet"-Eindruck. */
  .c-eyebrow {
    display: block;
    margin-block-end: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--text-mono-label);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-label);
    hyphens: manual;
  }

  /* --- Lead ------------------------------------------------------------ */

  .c-lead {
    max-width: var(--measure);
    /* Satter als text-muted: ein 22-px-Lead in Grau wirkt billig. */
    color: var(--color-text-soft);
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
    letter-spacing: -0.005em;
  }

  /* Der Reset setzt alle Margins auf 0. Ein Lead direkt unter einer
     Überschrift braucht aber Abstand — sonst klebt er an der Headline. */
  :is(h1, h2, h3, .c-heading) + .c-lead {
    margin-block-start: var(--space-md);
  }

  /* Der größte Grad. Eigene Zeilenhöhe und eigener Satz, weil 76px anders
     behandelt werden müssen als 36px. */
  .c-display {
    font-size: var(--text-display);
    font-weight: var(--weight-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    max-width: var(--measure-heading);
  }

  /* --- Statement — große typografische Fläche statt Kasten --------------- */

  /* Ein einzelner Satz als eigenständige gestalterische Fläche: H2-Grad,
     kein Rahmen, kein Hintergrund, viel Luft. Ersetzt das Callout-Kästchen
     dort, wo eine Aussage für sich stehen soll. Ein einziges Wort darf über
     .c-statement__accent den Akzent tragen — das ist der bestimmungsgemäße
     Einsatz von Farbe für die wichtigste Information. */
  .c-statement {
    max-width: 24ch;
    font-size: var(--text-h2);
    font-weight: var(--weight-display);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  .c-statement__accent {
    color: var(--color-accent);
  }

  .c-statement--measure {
    max-width: 20ch;
  }

  /* --- Hero ------------------------------------------------------------ */

  /* Der Hero war vorher eine normale Section mit Text. Er trägt jetzt
     visuelles Gewicht — aber durch das Produkt selbst, nicht durch Dekoration:
     rechts steht ein echtes Ergebnis-Panel, ein Screenshot oder ein Diagramm.
     Das ist die Stelle, an die auf anderen Seiten das Stockfoto käme. */
  .c-hero {
    padding-block: var(--space-section-tight) var(--space-section);
  }

  .c-hero__inner {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
  }

  .c-hero__content {
    min-width: 0;
  }

  .c-hero__visual {
    min-width: 0;
  }

  /* Trust-Zeile am Fuß des Hero, deutlich abgesetzt */
  .c-hero__trust {
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-md);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  /* --- Reihen — editorial statt Kachelraster --------------------------- */

  /* Für Aufzählungen mit Substanz (Vorgehen, Leistungen) ist eine Reihe die
     bessere Form als eine Karte: Nummer und Titel links, Text rechts,
     getrennt durch EINE Linie statt durch vier Rahmen pro Element. Damit
     verschwindet der „zwölf Kacheln im Grid"-Eindruck.
     Karten bleiben für alles, was tatsächlich ein Navigationsziel ist. */
  .c-rows {
    display: grid;
  }

  .c-row {
    display: grid;
    gap: var(--space-xs);
    padding-block: var(--space-xl);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .c-row:first-child {
    padding-block-start: 0;
    border-block-start: 0;
  }

  .c-row__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
  }

  .c-row__index {
    flex: none;
    min-width: 2.5ch;
    color: var(--color-accent);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
  }

  .c-row__title {
    font-size: var(--text-h3);
  }

  .c-row__body {
    max-width: var(--measure);
    color: var(--color-text-muted);
  }

  .c-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
  }

  /* --- Buttons — exakt drei Varianten ---------------------------------- */

  .c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    /* Vorher 44px hoch, 14px Schrift, 8/24px Innenabstand — das war ein
       UI-Button, kein Handlungsangebot einer Unternehmenswebsite. */
    min-height: 48px;
    padding: var(--space-xs) var(--space-md);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    hyphens: manual;
    /* Nur Farbe animieren. Keine Layout-Eigenschaft, kein transform. */
    transition: background-color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }

  .c-btn--primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-contrast);
  }

  .c-btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-accent-contrast);
  }

  .c-btn--secondary {
    background: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .c-btn--secondary:hover {
    background: var(--color-surface);
    border-color: var(--color-accent-hover);
    color: var(--color-accent-hover);
  }

  /* Tertiär: Textlink mit Pfeil. Der Pfeil ist funktional (Weiterführung)
     und wird per CSS-Maske erzeugt — kein Icon-Markup, keine Extra-Datei. */
  .c-btn--tertiary {
    min-height: 44px;
    padding-inline: 0;
    font-size: var(--text-body);
    background: none;
    border-color: transparent;
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .c-btn--tertiary::after {
    content: "";
    width: 0.85em;
    height: 0.85em;
    background: currentColor;
    mask: var(--icon-arrow-right) center / contain no-repeat;
    transition: transform var(--dur-fast) var(--ease);
  }

  .c-btn--tertiary:hover {
    color: var(--color-accent-hover);
  }

  .c-btn--tertiary:hover::after {
    transform: translateX(2px);
  }

  .c-btn--lg {
    min-height: 56px;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-body);
  }

  .c-btn--sm {
    min-height: 40px;
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--text-small);
  }

  .c-btn[disabled],
  .c-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  /* --- Card ------------------------------------------------------------ */

  /* Padding von 24 auf 32px, Abstände innen größer. Vorher waren die Karten
     UI-Kacheln; jetzt haben sie genug Innenraum, um als Inhaltsfläche zu
     lesen. Radius bleibt bewusst bei 8px — größere Radien wären der
     SaaS-Look, den wir nicht wollen. */
  .c-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
    /* Kein Schatten. Struktur kommt aus der Linie. */
    transition: border-color var(--dur-fast) var(--ease);
  }

  /* Auf getönten Abschnitten kehrt sich das Verhältnis um */
  .c-section--surface .c-card {
    background: var(--color-bg);
  }

  /* Rahmenlose Variante: nur eine Linie oben, kein Kasten. Für Inhalte, die
     KEIN Navigationsziel sind und deshalb laut Konvention keine echte Card
     sein dürfen — bisher wurden sie trotzdem in Card-Rahmen gesteckt, was den
     Kachelraster-Eindruck erzeugt hat. */
  .c-card--plain {
    padding: var(--space-md) 0 0;
    background: none;
    border: 0;
    border-block-start: var(--border-width) solid var(--color-border-strong);
    border-radius: 0;
  }

  .c-section--surface .c-card--plain {
    background: none;
  }

  /* Bild am Kopf einer Card (Porträt, Screenshot), über die volle Card-Breite,
     randlos bis an die linke/rechte Kante. Die runden Ecken oben übernimmt
     die Card per overflow: hidden (Modifier .c-card--media). Klasse steht auf
     dem <picture>, nicht dem <img>, damit die negativen Ränder nicht mit dem
     Flex-Gap kollidieren. */
  .c-card__media {
    display: block;
    width: calc(100% + 2 * var(--space-lg));
    /* @layer reset setzt picture { max-width: 100% } — das würde die Breite
       oben sofort wieder auf die Content-Box zurückstutzen. */
    max-width: none;
    margin: calc(-1 * var(--space-lg));
    margin-block-end: 0;
  }

  .c-card__media img {
    width: 100%;
  }

  .c-card--media {
    overflow: hidden;
  }

  .c-card__num {
    color: var(--color-text-muted);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
  }

  .c-card__title {
    font-size: var(--text-h3);
  }

  /* Titel als Linkziel (statt eines separaten Buttons unten): Farbe und
     Unterstreichung des Standard-Links werden neutralisiert, die Karte
     bleibt optisch eine Überschrift. Klickfläche siehe .c-card--linked
     weiter unten. */
  .c-card__title > a {
    color: inherit;
    text-decoration: none;
  }

  .c-card__text {
    color: var(--color-text-muted);
    font-size: var(--text-body);
    line-height: var(--leading-normal);
  }

  /* Meta-Zeile in Sans. Mono war hier falsch: Dauer und Datum sind Angaben,
     keine Messwerte, und die Mono-Häufung hat die Karten technisch aussehen
     lassen. Tabellarische Ziffern bleiben, damit Zahlen ruhig stehen. */
  .c-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
  }

  .c-card__meta > * + *::before {
    content: "· ";
  }

  /* Link unten verankert, damit Karten im Grid gleich ausgerichtet sind */
  .c-card__link {
    margin-block-start: auto;
    padding-block-start: var(--space-2xs);
  }

  /* Ganze Karte klickbar — über ein Pseudo-Element auf dem ECHTEN Anker
     (nicht auf dessen Wrapper, sonst wäre die Fläche nicht klickbar) und
     nicht per JavaScript. Der Link bleibt das semantische Ziel. */
  .c-card--linked {
    position: relative;
  }

  /* WICHTIG: ::before, nicht ::after. Der Link in der Karte ist ein
     .c-btn--tertiary, und dessen Pfeil belegt bereits ::after. Beides auf
     demselben Pseudo-Element würde den Pfeil an die Kartenecke setzen und die
     Klickfläche auf Pfeilgröße schrumpfen. Der echte Anker sitzt entweder im
     Titel (.c-card__title > a) oder in einem Button unten (.c-card__link > a)
     — beide Varianten stretchen dieselbe Klickfläche über die ganze Karte. */
  .c-card--linked .c-card__link > a::before,
  .c-card--linked .c-card__title > a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
  }

  .c-card--linked:hover {
    border-color: var(--color-accent);
  }

  /* Fokus wandert auf die ganze Karte, damit die Trefffläche sichtbar ist */
  .c-card--linked:has(.c-card__link > a:focus-visible),
  .c-card--linked:has(.c-card__title > a:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .c-card--linked .c-card__link > a:focus-visible,
  .c-card--linked .c-card__title > a:focus-visible {
    outline: none;
  }

  /* Case-Karte: eine dominante Kennzahl statt Icon */
  .c-card--case .c-kpi__value {
    font-size: var(--text-h2);
  }

  /* --- KPI ------------------------------------------------------------- */

  .c-kpi {
    display: grid;
    gap: var(--space-3xs);
  }

  /* Die Kennzahl ist auf dieser Website das Argument. Vorher hatte sie
     H2-Größe und neutrale Farbe — sie war damit kleiner und leiser als die
     Überschrift darüber. Jetzt eigene Größenstufe und Akzentfarbe: das ist
     genau der Fall, für den die Regel „Farbe markiert wichtige Information"
     gedacht ist. */
  .c-kpi__value {
    color: var(--color-accent);
    font-size: var(--text-kpi);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    font-variant-numeric: tabular-nums;
  }

  /* In Tabellen und Listen bleiben Zahlen neutral — dort sind sie Daten,
     keine Kernaussage. */
  .c-kpi--quiet .c-kpi__value {
    color: var(--color-text);
  }

  .c-kpi__label {
    max-width: 26ch;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: var(--leading-snug);
  }

  /* --- CTA-Band ------------------------------------------------------- */

  /* Deutlich mehr Höhe, keine Rahmenlinien. Das CTA-Band soll als Fläche
     wirken, nicht als eingerahmter Kasten. */
  .c-cta {
    padding-block: var(--space-3xl);
    background: var(--color-surface);
  }

  .c-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .c-cta__body {
    max-width: var(--measure);
  }

  .c-cta__note {
    margin-block-start: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  /* --- Angebot — Kaufpanel für ein Download-Produkt im Shop ------------
     Gleiche Sprache wie das Tool-Ergebnis-Panel: kräftige Kante, weißer
     Grund, eine dominante Zahl (hier der Preis) in Akzentfarbe. Der Preis
     ist auf einer Verkaufsseite das Kernargument — deshalb die KPI-Größe. */
  .c-offer {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--color-bg);
    /* Kante identifiziert einen Handlungsbereich -> border-strong. */
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius);
  }

  .c-offer__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs);
    color: var(--color-accent);
    font-size: var(--text-kpi);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    font-variant-numeric: tabular-nums;
    hyphens: manual;
  }

  .c-offer__price-note {
    color: var(--color-text-muted);
    font-size: var(--text-small);
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-normal);
  }

  /* Der Kaufknopf füllt das Panel — ein Ziel, unmissverständlich. */
  .c-offer .c-btn--primary {
    width: 100%;
  }

  .c-offer__note {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  /* --- Formulare ------------------------------------------------------ */

  .c-form {
    max-width: 34rem;
  }

  .c-field {
    display: grid;
    gap: var(--space-3xs);
  }

  /* Label immer sichtbar über dem Feld. Kein Floating Label,
     kein Placeholder als Label. */
  .c-field {
    gap: var(--space-2xs);
  }

  .c-field__label {
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
  }

  .c-field__optional {
    color: var(--color-text-muted);
    font-weight: var(--weight-normal);
  }

  .c-field__hint {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  /* Höher und mit mehr Innenabstand als vorher (48px / 8-12px). Ein Feld,
     das man gern ausfüllt, braucht Luft. */
  .c-input,
  .c-textarea,
  .c-select {
    width: 100%;
    min-height: 52px;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-bg);
    /* Grenze, die das Bedienelement identifiziert -> border-strong (3.58:1) */
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius);
    /* 16px Minimum verhindert Auto-Zoom auf iOS */
    font-size: max(1rem, var(--text-body));
    transition: border-color var(--dur-fast) var(--ease);
  }

  /* Der Fokus färbt zusätzlich den Rahmen. Der Ring allein reicht formal,
     aber die Färbung zeigt deutlicher, wo man gerade tippt. */
  .c-input:focus-visible,
  .c-textarea:focus-visible,
  .c-select:focus-visible {
    border-color: var(--color-accent);
  }

  .c-textarea {
    min-height: 7rem;
    padding-block: var(--space-2xs);
    resize: vertical;
  }

  .c-input:hover,
  .c-textarea:hover,
  .c-select:hover {
    border-color: var(--color-text-muted);
  }

  .c-input[aria-invalid="true"],
  .c-textarea[aria-invalid="true"] {
    border-color: var(--color-error);
    border-width: 2px;
  }

  /* Fehler in Textform, mit Symbol — Farbe ist nie der einzige Träger */
  .c-field__error {
    display: flex;
    align-items: start;
    gap: var(--space-3xs);
    color: var(--color-error);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
  }

  .c-field__error::before {
    content: "!";
    display: grid;
    place-items: center;
    flex: none;
    width: 1.15em;
    height: 1.15em;
    margin-block-start: 0.15em;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 0.8em;
    font-weight: var(--weight-semibold);
  }

  /* Honeypot: für Menschen und Screenreader unsichtbar, für Bots sichtbar */
  .c-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .c-form__consent {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  /* Erwartungsmanagement direkt am Absende-Button */
  .c-form__expect {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  /* --- Alert / Validation --------------------------------------------- */

  .c-alert {
    display: grid;
    gap: var(--space-3xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border-strong);
    /* Zustand wird zusätzlich über eine kräftige Kante links markiert,
       nicht nur über Farbe. */
    border-inline-start: 3px solid var(--color-text-muted);
    border-radius: var(--radius);
    font-size: var(--text-small);
  }

  .c-alert__title {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
  }

  .c-alert--success {
    border-inline-start-color: var(--color-success);
  }

  .c-alert--success .c-alert__title {
    color: var(--color-success);
  }

  .c-alert--warning {
    border-inline-start-color: var(--color-warning);
  }

  .c-alert--warning .c-alert__title {
    color: var(--color-warning);
  }

  .c-alert--error {
    border-inline-start-color: var(--color-error);
  }

  .c-alert--error .c-alert__title {
    color: var(--color-error);
  }

  /* Fehler-Banner am Formular: standardmäßig verborgen. Ohne JavaScript
     über :target sichtbar (Server leitet auf …/kontakt/?fehler=1#fehler),
     mit JavaScript über .is-shown (siehe assets/js/lib/form.js). */
  .c-form__banner {
    display: none;
  }

  .c-form__banner:target,
  .c-form__banner.is-shown {
    display: grid;
  }

  /* --- Tabelle -------------------------------------------------------- */

  .c-table {
    font-size: var(--text-small);
  }

  .c-table th,
  .c-table td {
    padding: var(--space-2xs) var(--space-xs);
    border-block-end: var(--border-width) solid var(--color-border);
    text-align: left;
    vertical-align: top;
  }

  .c-table thead th {
    border-block-end-color: var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
  }

  .c-table td[data-numeric],
  .c-table th[data-numeric] {
    font-family: var(--font-mono);
    text-align: right;
  }

  /* Auf schmalen Viewports scrollt die Tabelle sichtbar statt zu sprengen */
  .c-table-scroll {
    overflow-x: auto;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
  }

  .c-table-scroll > .c-table th:first-child,
  .c-table-scroll > .c-table td:first-child {
    padding-inline-start: var(--space-sm);
  }

  /* --- Details / Methodik --------------------------------------------- */

  .c-details {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
  }

  .c-details > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 44px;
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    cursor: pointer;
    list-style: none;
  }

  .c-details > summary::-webkit-details-marker {
    display: none;
  }

  .c-details > summary::before {
    content: "";
    flex: none;
    width: 0.7em;
    height: 0.7em;
    background: currentColor;
    mask: var(--icon-arrow-right) center / contain no-repeat;
    transition: transform var(--dur-fast) var(--ease);
  }

  .c-details[open] > summary::before {
    transform: rotate(90deg);
  }

  .c-details[open] > summary {
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .c-details__body {
    padding: var(--space-sm);
    font-size: var(--text-small);
  }

  /* --- Vertrauenshinweis ---------------------------------------------- */

  .c-trust {
    display: flex;
    align-items: start;
    gap: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .c-trust::before {
    content: "";
    flex: none;
    width: 1em;
    height: 1em;
    margin-block-start: 0.3em;
    background: currentColor;
    mask: var(--icon-shield-check) center / contain no-repeat;
  }

  /* --- Footer -------------------------------------------------------- */

  .c-footer {
    padding-block: var(--space-xl) var(--space-lg);
    background: var(--color-surface);
    border-block-start: var(--border-width) solid var(--color-border);
    font-size: var(--text-small);
  }

  .c-footer__grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  }

  .c-footer__title {
    margin-block-end: var(--space-xs);
    color: var(--color-text);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
  }

  .c-footer__list {
    display: grid;
    gap: var(--space-3xs);
  }

  .c-footer a {
    color: var(--color-text);
    text-decoration: none;
  }

  .c-footer a:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .c-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: space-between;
    margin-block-start: var(--space-lg);
    padding-block-start: var(--space-sm);
    border-block-start: var(--border-width) solid var(--color-border);
    color: var(--color-text-muted);
  }

  /* --- Inhaltsliste --------------------------------------------------- */

  /* Der Reset entfernt Aufzählungszeichen bei jeder Liste MIT Klasse, damit
     Navigationslisten sauber sind. Inhaltslisten, die zusätzlich ein
     Layout-Primitiv tragen (z. B. .l-stack), brauchen sie aber zurück. */
  .c-list {
    list-style: revert;
    padding-inline-start: 1.3em;
  }

  /* --- Prose — Fließtext in Artikeln --------------------------------- */

  .c-prose {
    max-width: var(--measure);
  }

  .c-prose > * + * {
    margin-block-start: var(--space-md);
  }

  .c-prose > h2 {
    margin-block-start: var(--space-xl);
  }

  .c-prose > h3 {
    margin-block-start: var(--space-lg);
  }

  .c-prose ul,
  .c-prose ol {
    padding-inline-start: 1.3em;
  }

  .c-prose li + li {
    margin-block-start: var(--space-2xs);
  }
}

/* ============================================================================
   UTILITIES — kleines, geschlossenes Set. Bewusst kein Utility-Framework.
   ========================================================================== */

@layer utilities {
  .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .u-muted {
    color: var(--color-text-muted);
  }

  .u-mono {
    font-family: var(--font-mono);
  }

  .u-nums {
    font-variant-numeric: tabular-nums;
  }

  .u-small {
    font-size: var(--text-small);
  }

  .u-no-hyphens {
    hyphens: manual;
  }

  .u-mt-0 {
    margin-block-start: 0;
  }

  /* Abstand nach oben in Einzelfällen, in denen kein Layout-Primitiv greift.
     Bewusst kleines, geschlossenes Set — wächst dieses Set, ist das ein
     Hinweis, dass eine Komponente fehlt. */
  .u-mt-sm {
    margin-block-start: var(--space-sm);
  }

  .u-mt-md {
    margin-block-start: var(--space-md);
  }

  .u-mt-lg {
    margin-block-start: var(--space-lg);
  }

  .u-mt-xl {
    margin-block-start: var(--space-xl);
  }
}

/* ============================================================================
   REDUCED MOTION — global, am Ende, außerhalb der Layer.
   Kein Inhalt wird jemals initial per Animation versteckt, deshalb ist das
   Abschalten hier vollständig gefahrlos.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   BREAKPOINTS — genau zwei. Der Rest ist fluid oder auto-fit.
   48rem = 768px, 64rem = 1024px
   ========================================================================== */

@media (width >= 48rem) {
  @layer components {
    .c-nav {
      display: block;
    }

    /* Ab hier übernimmt die Desktop-Navigation; Toggle und Panel entfallen. */
    .c-nav-toggle,
    .c-nav-panel {
      display: none;
    }

    /* Reihen werden zweispaltig: Titel links, Text rechts. Das ist der
       editoriale Charakter, den ein Kachelraster nicht hat. */
    .c-row {
      grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
      gap: var(--space-xl);
      align-items: start;
    }
  }
}

@media (width >= 64rem) {
  @layer components {
    /* Hero zweispaltig und bewusst asymmetrisch (7/5). Der Inhalt trägt die
       Aussage, die schmalere Spalte ein echtes Visual (Tool-UI, Ergebnis-
       Panel, Diagramm) — nie Dekoration. */
    .c-hero__inner {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: var(--space-3xl);
    }

    /* Das Kaufpanel läuft beim Scrollen der Produktbeschreibung mit. */
    .c-offer--sticky {
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-md));
    }
  }
}