/* ═══════════════════════════════════════════════════════════════════════
   S.WERK — style.css
   Kaskadenebenen: tokens → base → layout → components → utilities
   Dokumentation aller Tokens und Komponenten: DESIGN.md
   ═══════════════════════════════════════════════════════════════════════ */

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

/* ═══ TOKENS ═══════════════════════════════════════════════════════════ */
@layer tokens {

  /* — Webfonts, lokal. Variable Schnitte, kein CDN. — */
  /* Open Sans laut Styleguide S.Werk GmbH. Variable Fassung, Achse
     wght 300–800 — deckt alle im Styleguide gelisteten Schnitte von
     Light bis Extrabold in einer Datei ab. */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/open-sans-latin.woff2') format('woff2');
    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: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    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: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  :root {
    /* Akzent — Markenorange laut Styleguide S.Werk GmbH (16.06.2025):
       RGB 251/103/3, CMYK 0/73/100/0. Nur für Flächen und Grafik. */
    --a: #fb6703;
    --a-line: #fdd6bd;  --a-tint: #fff5ef;

    /* Ableitungen für WCAG-AA-Kontrast (siehe DESIGN.md §Farbe).
       Mit Weiß erreicht --a nur 2,9:1. Mit --n900 dagegen 6,1:1 — und
       genau so steht es im Logo: Orange und Schwarz, nie Orange und Weiß.
       Der Primärbutton bleibt deshalb im Markenorange und bekommt dunkle
       Schrift statt einer nachgedunkelten Fläche. */
    --a-btn: #fb6703;        /* = --a, Schrift --n900 — 6,1:1 */
    --a-btn-hover: #e85d00;  /* Hover — 5,0:1 mit --n900 */
    --a-ui: #ee5c00;         /* nur Fokusring — 3,3:1 auf Weiß */
    --a-ink: #b54800;        /* oranger TEXT auf hellem Grund — 5,4:1 */
    --a-on-dark: #fb6703;    /* Markenorange auf --n900 — 6,1:1 */

    /* Neutral, warm */
    --n0: #ffffff;  --n25: #fdfdfc;  --n50: #faf9f8;   --n100: #f5f4f2;
    --n200: #e9e7e4; --n300: #d9d6d2; --n400: #a8a29e;
    --n600: #57534e; --n800: #292524; --n900: #1c1917;

    /* Datenlisten und Tabellen */
    --data-line: #e4e2df;
    --ok: #15803d;

    /* Radien */
    --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-full: 999px;

    /* Tiefe — bewusst minimal */
    --sh: 0 1px 2px rgba(28,25,23,.05);
    --sh-lift: 0 2px 8px rgba(28,25,23,.06), 0 1px 2px rgba(28,25,23,.04);

    /* Schrift */
    --sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Typo-Skala */
    --t-h1: clamp(34px, 4.6vw, 48px);   /* obere Grenze so, dass die H1
                                            zweizeilig in die Textspalte passt */
    --t-h2: clamp(23px, 2.6vw, 26px);
    --t-h3: 18px;
    --t-lead: 18.5px;
    --t-body: 16px;
    --t-sm: 14px;
    --t-mono: 13px;
    --t-eyebrow: 14px;

    /* Raster */
    --maxw: 1180px;
    --gutter: clamp(20px, 5vw, 40px);
    --block: clamp(64px, 9vw, 100px);
    --measure: 68ch;

    /* Bewegung */
    --dur: 150ms;
    --dur-slow: 200ms;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* Kopfzeile */
    --header-h: 72px;
    --z-header: 100;
  }
}

/* ═══ BASE ═════════════════════════════════════════════════════════════ */
@layer base {

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

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
  }

  body {
    margin: 0;
    background: var(--n0);
    color: var(--n900);
    font-family: var(--sans);
    font-size: var(--t-body);
    line-height: 1.6;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }

  img, svg { display: block; max-width: 100%; }
  img { height: auto; }

  a { color: inherit; text-decoration: none; }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  :focus-visible {
    outline: 2px solid var(--a-ui);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }

  ::selection { background: var(--a-line); color: var(--n900); }

  [hidden] { display: none !important; }

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

/* ═══ LAYOUT ═══════════════════════════════════════════════════════════ */
@layer layout {

  .container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section { padding-block: var(--block); }
  .section + .section { border-top: 1px solid var(--n200); }

  .section--tint { background: var(--n50); border-top: 1px solid var(--n200); }
  .section--tint + .section { border-top: 1px solid var(--n200); }

  .section--dark {
    background: var(--n900);
    color: var(--n0);
    border-top: 0;
  }
  .section--dark + .section { border-top: 0; }

  .section__head { margin-bottom: clamp(32px, 4vw, 48px); }
  .section__head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }
  .section__lead {
    margin-top: 14px;
    max-width: var(--measure);
    font-size: var(--t-lead);
    color: var(--n600);
  }
  .section--dark .section__lead { color: var(--n300); }
}

/* ═══ COMPONENTS ═══════════════════════════════════════════════════════ */
@layer components {

  /* ── Typografische Bausteine ───────────────────────────────────────── */
  .h2 {
    font-size: var(--t-h2);
    font-weight: 620;
    letter-spacing: -.018em;
    line-height: 1.2;
  }
  .h3 {
    font-size: var(--t-h3);
    font-weight: 600;
    letter-spacing: -.013em;
    line-height: 1.35;
  }
  .lead {
    font-size: var(--t-lead);
    color: var(--n600);
    max-width: var(--measure);
  }
  /* Rubrik über der H2. Bewusst in der Grundschrift, normal geschrieben:
     gesperrte Mono-Versalien über jeder Überschrift sind das Erkennungs-
     zeichen generierter Landingpages. */
  .eyebrow {
    font-size: var(--t-eyebrow);
    font-weight: 600;
    color: var(--a-ink);
    margin-bottom: 8px;
  }
  .section--dark .eyebrow { color: var(--a-on-dark); }

  .placeholder {
    color: var(--n600);
    text-decoration: underline dotted var(--n400);
    text-underline-offset: 3px;
  }

  /* ── Skip-Link ─────────────────────────────────────────────────────── */
  .skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 999;
    transform: translateY(-200%);
    padding: 10px 16px;
    background: var(--n900);
    color: var(--n0);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    font-weight: 500;
  }
  .skip-link:focus { transform: none; }

  /* ── Buttons ───────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 20px;
    border-radius: var(--r);
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 550;
    letter-spacing: -.006em;
    text-align: center;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
  }
  .btn--sm { min-height: 38px; padding: 8px 15px; font-size: var(--t-sm); }

  .btn--primary { background: var(--a-btn); color: var(--n900); }
  .btn--primary:hover { background: var(--a-btn-hover); }

  .btn--ghost {
    background: var(--n0);
    color: var(--n900);
    border-color: var(--n300);
  }
  .btn--ghost:hover { border-color: var(--n900); }

  .btn--ghost-dark {
    background: transparent;
    color: var(--n0);
    border-color: rgba(255,255,255,.28);
  }
  .btn--ghost-dark:hover { border-color: var(--n0); background: rgba(255,255,255,.06); }

  .cta-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }
  .cta-pair--section { margin-top: clamp(36px, 4vw, 48px); }

  /* ── Pfeil-Link ────────────────────────────────────────────────────── */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--t-sm);
    font-weight: 550;
    color: var(--a-ink);
    transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .link-arrow::after {
    content: '';
    width: 14px;
    height: 8px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'><path d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'><path d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  }
  .link-arrow:hover { gap: 11px; color: var(--a-btn-hover); }
  .section--dark .link-arrow { color: var(--a-on-dark); }

  /* ── Pill-Label ────────────────────────────────────────────────────── */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 11px;
    border: 1px solid var(--a-line);
    background: var(--a-tint);
    border-radius: var(--r-full);
    font-size: var(--t-sm);
    font-weight: 450;
    color: var(--n800);
  }
  .pill__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--a);
    flex: none;
  }

  /* ── Zielgruppen-Einstieg ──────────────────────────────────────────────
     Die beiden zentralen Handlungsaufforderungen der Startseite. Sie
     führen auf je eine Seite, auf der sich S.WERK in der Sprache der
     jeweiligen Person vorstellt. Kein Umschalter, keine versteckte
     Ebene — zwei Links, zwei Ziele. */
  .split {
    display: grid;
    gap: 12px;
    margin-top: clamp(26px, 3vw, 34px);
  }
  .split__card {
    display: grid;
    gap: 7px;
    align-content: start;
    padding: 20px 22px 18px;
    background: var(--n0);
    border: 1px solid var(--n300);
    border-radius: var(--r-lg);
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
  }
  .split__card:hover { border-color: var(--n900); box-shadow: var(--sh-lift); }
  .split__label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--a-ink);
  }
  .split__head {
    font-size: 16.5px;
    font-weight: 550;
    letter-spacing: -.013em;
    line-height: 1.35;
    color: var(--n900);
    text-wrap: pretty;
  }
  .split__go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    font-size: 13.5px;
    color: var(--n600);
    transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .split__go::after {
    content: '';
    width: 14px;
    height: 8px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'><path d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'><path d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  }
  .split__card:hover .split__go { gap: 11px; color: var(--n900); }

  /* ── Kennzahlen ────────────────────────────────────────────────────── */
  .kpi-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--n200);
  }
  /* Wert steht in der Quelle nach dem Label, wird aber oben gesetzt —
     so liegen alle Werte einer Reihe auf einer Linie, auch wenn ein
     Label umbricht. */
  .kpi { display: grid; align-content: start; gap: 3px; }
  .kpi__value {
    order: -1;
    font-size: 19px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
    color: var(--n900);
  }
  .kpi__label {
    font-size: 12.5px;
    color: var(--n600);
  }
  .kpi-row--big { border-top: 0; padding-top: 0; margin-top: clamp(40px, 5vw, 56px); }
  .kpi-row--big .kpi {
    padding: 22px 0 0;
    border-top: 1px solid var(--n300);
  }
  .kpi-row--big .kpi__value { font-size: clamp(22px, 2.6vw, 28px); }

  /* ── Header ────────────────────────────────────────────────────────── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--n0);
    border-bottom: 1px solid transparent;
    transition: transform var(--dur-slow) var(--ease),
                border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
  }
  .site-header.is-scrolled { border-bottom-color: var(--n200); }
  .site-header.is-hidden { transform: translateY(-100%); }

  .site-header__bar {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--header-h);
    transition: height var(--dur-slow) var(--ease);
  }
  .site-header.is-scrolled .site-header__bar { height: 60px; }

  /* Originallogo aus dem CI, inklusive Claim. Eine Fassung ohne Claim
     liefert der Styleguide nicht — und selbst zuschneiden hieße, das Logo
     zu verändern. Höhe deshalb so, dass der Claim noch lesbar bleibt. */
  .brand {
    display: inline-flex;
    align-items: center;
    flex: none;
  }
  .brand img {
    height: 42px;
    width: auto;
    transition: height var(--dur-slow) var(--ease);
  }
  .site-header.is-scrolled .brand img { height: 34px; }
  .site-footer__logo { height: 44px; width: auto; margin-bottom: 4px; }

  /* ── Navigation, Desktop ───────────────────────────────────────────── */
  .nav {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    min-width: 0;
  }
  .nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
  }
  .nav__item { position: static; }
  .nav__item--drop { position: relative; }

  .nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: 15px;
    font-weight: 500;
    color: var(--n800);
    letter-spacing: -.006em;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .nav__link:hover { color: var(--n900); background: var(--n100); }
  .nav__link[aria-expanded='true'] { color: var(--a-ink); background: var(--n100); }
  .nav__chev {
    width: 12px; height: 12px;
    flex: none;
    opacity: .55;
    transition: transform var(--dur) var(--ease);
  }
  .nav__link[aria-expanded='true'] .nav__chev { transform: rotate(180deg); }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    flex: none;
  }
  .nav__support {
    font-size: var(--t-sm);
    color: var(--n600);
    transition: color var(--dur) var(--ease);
  }
  .nav__support:hover { color: var(--n900); text-decoration: underline; text-underline-offset: 3px; }

  /* ── Mega-Menü ─────────────────────────────────────────────────────── */
  .mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--n0);
    border-top: 1px solid var(--n200);
    border-bottom: 1px solid var(--n200);
    box-shadow: var(--sh-lift);
  }
  .mega__inner {
    display: grid;
    grid-template-columns: 1fr 1fr .78fr;
    gap: 0 clamp(24px, 3vw, 48px);
    padding-block: 32px 36px;
  }
  .mega__grid {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px clamp(16px, 2vw, 32px);
    align-content: start;
  }
  .mega__grid a {
    display: block;
    padding: 11px 12px;
    margin-inline: -12px;
    border-radius: var(--r-sm);
    transition: background-color var(--dur) var(--ease);
  }
  .mega__grid a:hover { background: var(--n50); }
  .mega__title {
    display: block;
    font-size: 15.5px;
    font-weight: 550;
    letter-spacing: -.006em;
    color: var(--n900);
  }
  .mega__desc {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--n600);
  }

  .mega__aside {
    padding: 22px;
    border: 1px solid var(--n200);
    border-radius: var(--r);
    background: var(--n50);
    align-self: start;
  }
  .mega__aside--accent { background: var(--a-tint); border-color: var(--a-line); }
  .mega__aside .eyebrow { margin-bottom: 8px; }
  .mega__aside-head {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.013em;
    margin-bottom: 4px;
  }
  .mega__aside-text {
    font-size: var(--t-sm);
    color: var(--n600);
    margin-bottom: 14px;
    max-width: 34ch;
  }

  /* ── Dropdown, einspaltig ──────────────────────────────────────────── */
  .dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 250px;
    padding: 8px;
    background: var(--n0);
    border: 1px solid var(--n200);
    border-radius: var(--r);
    box-shadow: var(--sh-lift);
  }
  .dropdown__list a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    color: var(--n800);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .dropdown__list a:hover { background: var(--n50); color: var(--n900); }

  /* ── Burger ────────────────────────────────────────────────────────── */
  .burger {
    display: none;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    padding: 8px 12px;
    border: 1px solid var(--n200);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    font-weight: 500;
  }
  .burger__lines { display: grid; gap: 4px; width: 16px; }
  .burger__lines i {
    display: block;
    height: 1.5px;
    background: var(--n900);
    transition: transform var(--dur) var(--ease);
  }
  /* Schließer und Wortmarke müssen über dem Overlay liegen */
  html[data-nav-open] .burger,
  html[data-nav-open] .brand {
    position: relative;
    z-index: calc(var(--z-header) + 2);
  }
  html[data-nav-open] .burger__lines i:first-child { transform: translateY(2.75px) rotate(45deg); }
  html[data-nav-open] .burger__lines i:last-child  { transform: translateY(-2.75px) rotate(-45deg); }

  /* ── Hero ──────────────────────────────────────────────────────────── */
  .hero { padding-block: clamp(44px, 6vw, 76px) var(--block); }
  .hero__inner { display: grid; gap: clamp(40px, 5vw, 64px); }
  .hero__h1 {
    margin-top: 22px;
    font-size: var(--t-h1);
    font-weight: 640;
    letter-spacing: -.022em;
    line-height: 1.06;
    text-wrap: pretty;
  }
  .hero__lead { margin-top: clamp(18px, 2.2vw, 24px); max-width: 60ch; }
  .hero__direct {
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--n600);
  }
  .hero__direct a {
    color: var(--a-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .hero__direct a:hover { color: var(--a-btn-hover); }

  /* ── Hero-Variante: vollbreites Hintergrundbild (Test) ──────────────
     Das Bild liegt als <img> im DOM statt als background-image — nur so
     lässt es sich vorrangig laden (fetchpriority) und zählt sauber als
     LCP-Element. Der Verlauf darüber hält die Textspalte auf Weiß, damit
     die dunkle Typografie ihre Kontraste behält. */
  .hero--bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(56px, 8vw, 104px) clamp(76px, 9vw, 120px);
  }
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
  }
  .hero--bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, var(--n0) 0, rgba(255,255,255,0) 150px),
      linear-gradient(0deg,   var(--n0) 0, rgba(255,255,255,0) 130px),
      /* Schmale Schirme lassen Text und Bild nicht gleichzeitig atmen:
         der Verlauf hält bis unter die Kennzahlen dicht und öffnet erst
         im letzten Viertel. */
      linear-gradient(180deg, rgba(255,255,255,.87) 0%,
                              rgba(255,255,255,.8) 76%,
                              rgba(255,255,255,.83) 88%,
                              rgba(255,255,255,.55) 100%);
  }
  /* Bildkachel entfällt in dieser Variante, bleibt aber im DOM */
  .hero--bg .hero__figure { display: none; }
  .hero--bg .hero__copy { max-width: 660px; }

  .hero__figure { position: relative; }
  .hero__frame { position: relative; }
  .hero__photo {
    width: 100%;
    border: 1px solid var(--n200);
    border-radius: var(--r-lg);
    background: var(--n100);
  }
  /* Der Einschub hält das Rechenzentrum im Bild, während die Landschaft
     die Region trägt. Weißer Steg als harter Ring statt Schlagschatten. */
  .hero__inset {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 36%;
    max-width: 160px;
    border: 1px solid var(--n200);
    border-radius: var(--r);
    background: var(--n100);
    box-shadow: 0 0 0 5px var(--n0);
  }
  .hero__figure figcaption {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--n400);
  }

  /* ── Vertrauensleiste ──────────────────────────────────────────────── */
  .trust {
    padding-block: clamp(30px, 4vw, 44px);
    border-block: 1px solid var(--n200);
    background: var(--n25);
  }
  /* Feste Spaltenzahl statt auto-fit — sonst brechen acht Logos als
     7 + 1 um. Ab 900 stehen alle in einer Reihe; die Logohöhe skaliert
     mit, damit die Reihe nicht überläuft. */
  .trust__logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 36px) clamp(14px, 1.8vw, 26px);
    align-items: center;
  }
  .trust__logos li { display: grid; justify-items: center; }
  /* Logos liegen als graue PNG mit Alpha vor. Die Deckkraft nimmt sie
     zurück, ohne dass sie ihre Form verlieren — kein Filter nötig. */
  .trust__logos img {
    width: auto;
    height: 42px;
    max-width: 100%;
    object-fit: contain;
    opacity: .72;
    transition: opacity var(--dur) var(--ease);
  }
  .trust__logos li:hover img { opacity: 1; }

  /* ── Karten ────────────────────────────────────────────────────────── */
  .cards { display: grid; gap: clamp(16px, 2vw, 24px); }
  .card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(22px, 2.6vw, 30px);
    border: 1px solid var(--n200);
    border-radius: var(--r-lg);
    background: var(--n0);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .card:hover { border-color: var(--n300); box-shadow: var(--sh-lift); }
  .card__quote {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.013em;
    line-height: 1.35;
    text-wrap: pretty;
  }
  .card__body { font-size: var(--t-sm); color: var(--n600); flex: 1; }
  .card .link-arrow { margin-top: 4px; }

  /* ── Stufen (KI-Block) ─────────────────────────────────────────────── */
  .steps { display: grid; gap: clamp(20px, 2.4vw, 28px); }
  .step {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.16);
  }
  .step__meta {
    font-size: 13px;
    color: var(--n400);
  }
  .step__no { color: var(--a-on-dark); font-weight: 500; }
  .step__body { font-size: var(--t-sm); color: var(--n300); flex: 1; }

  /* ── Anwendungen (KI-Block) ───────────────────────────────────────────
     Vier Beispiele, je Titel und ein Satz. Mehr nicht: Der Block muss in
     zehn Sekunden gelesen sein. Details gehören auf /ki/souveraene-ki. */
  .usecases { display: grid; gap: 0 clamp(24px, 3vw, 40px); }
  .usecase {
    display: grid;
    gap: 6px;
    align-content: start;
    padding-block: 20px;
    border-top: 1px solid rgba(255,255,255,.16);
  }
  .usecase .h3 { color: var(--n0); }
  .usecase__body { font-size: var(--t-sm); color: var(--n300); }
  .usecases__note { margin-top: 8px; font-size: 13px; color: var(--n400); }
  /* Lange Fassung auf /ki/souveraene-ki: höchstens zwei Spalten */
  .usecase__model { font-size: 13px; color: var(--n400); }
  .usecases--long .usecase__body { font-size: 15.5px; max-width: 60ch; }

  /* ── Modellliste (/ki/souveraene-ki) ──────────────────────────────────
     Zeilen mit Hairlines wie eine Tabelle, aber ohne <table>, damit sie
     auf dem Handy stapeln. Nur die Parameterzahl steht in Mono. */
  .models__head { display: none; }
  .models__list { border-top: 1px solid var(--n300); }
  .model {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 16px;
    padding-block: 14px;
    border-bottom: 1px solid var(--data-line);
  }
  .model__name { font-size: 16px; font-weight: 600; }
  .model__size {
    grid-column: 2; grid-row: 1;
    font-family: var(--mono);
    font-size: var(--t-mono);
    color: var(--n600);
    text-align: right;
    align-self: center;
  }
  .model__origin { grid-column: 1 / -1; font-size: 13px; color: var(--n600); }
  .model__use { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--n800); }
  .models__note { margin-top: 16px; font-size: 13.5px; color: var(--n600); max-width: var(--measure); }

  /* ── Kacheln (Leistungen) ──────────────────────────────────────────── */
  .tiles {
    display: grid;
    gap: 1px;
    background: var(--n200);
    border: 1px solid var(--n200);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .tile {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: clamp(22px, 2.4vw, 28px);
    background: var(--n0);
    transition: background-color var(--dur) var(--ease);
  }
  .tile:hover { background: var(--n25); }
  .tile p { font-size: var(--t-sm); color: var(--n600); flex: 1; }

  /* ── Standortkarten ────────────────────────────────────────────────── */
  .locations { display: grid; gap: clamp(20px, 2.4vw, 28px); }
  .loc {
    border: 1px solid var(--n200);
    border-radius: var(--r-lg);
    background: var(--n0);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease);
  }
  .loc:hover { border-color: var(--n300); }
  .loc img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-bottom: 1px solid var(--n200); }
  .loc__body { padding: clamp(22px, 2.4vw, 28px); display: grid; gap: 14px; }
  .loc__body p { font-size: var(--t-sm); color: var(--n600); }

  /* ── Spezifikationslisten ──────────────────────────────────────────── */
  .specs { display: grid; gap: 0; }
  .specs__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 12px;
    padding-block: 9px;
    border-top: 1px solid var(--data-line);
    align-items: baseline;
  }
  .specs__row:first-child { border-top: 0; }
  .specs dt {
    font-size: 12.5px;
    color: var(--n600);
  }
  .specs dd {
    font-family: var(--mono);
    font-size: var(--t-mono);
    line-height: 1.5;
    color: var(--n900);
  }
  .specs--compact .specs__row { padding-block: 7px; }
  /* Breite Panels: Begriff kurz halten, Wert nah daran */
  .specs--2col .specs__row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .specs .is-ok { color: var(--ok); }
  .specs .is-strong { color: var(--n900); font-weight: 500; }

  /* ── Datentabellen ─────────────────────────────────────────────────── */
  .table-scroll { overflow-x: auto; }
  .dtable {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: var(--t-mono);
  }
  .dtable th, .dtable td {
    text-align: left;
    vertical-align: top;
    padding: 11px 16px 11px 0;
    border-top: 1px solid var(--data-line);
  }
  .dtable thead th {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 9px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--n600);
    border-bottom: 1px solid var(--n300);
  }
  .dtable tbody th {
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--n900);
    padding-right: 24px;
  }
  .dtable td {
    font-family: var(--mono);
    line-height: 1.55;
    color: var(--n600);
  }
  .dtable td.is-strong { color: var(--n900); }
  .dtable--compare tbody td:last-child {
    background: rgba(251,103,3,.05);
    padding-inline: 14px;
  }

  .section--dark .dtable th, .section--dark .dtable td { border-color: rgba(255,255,255,.11); }
  .section--dark .dtable thead th { color: var(--n400); border-bottom-color: rgba(255,255,255,.22); }
  .section--dark .dtable tbody th { color: var(--n0); }
  .section--dark .dtable td { color: var(--n400); }
  .section--dark .dtable td.is-strong { color: var(--n0); }
  .section--dark .dtable--compare tbody td:last-child { background: rgba(251,103,3,.12); }

  /* ── Zitat ─────────────────────────────────────────────────────────── */
  .quote { display: grid; gap: clamp(24px, 3vw, 34px); max-width: 900px; }
  .quote__text p {
    font-size: clamp(21px, 2.9vw, 30px);
    font-weight: 500;
    letter-spacing: -.018em;
    line-height: 1.3;
    text-wrap: pretty;
  }
  .quote__by {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .quote__by img {
    width: 64px; height: 64px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--n200);
    object-fit: cover;
  }
  .quote__name { font-size: 15px; font-weight: 600; letter-spacing: -.006em; }
  .quote__role { font-size: 13.5px; color: var(--n600); margin-bottom: 4px; }

  /* ── Region ────────────────────────────────────────────────────────── */
  .region { display: grid; gap: clamp(36px, 5vw, 56px); align-items: center; }
  .region__list {
    display: grid;
    gap: 0;
    margin-top: 28px;
  }
  .region__list li {
    display: grid;
    gap: 2px;
    padding-block: 14px;
    border-top: 1px solid var(--n200);
  }
  .region__city { font-size: 15.5px; font-weight: 550; letter-spacing: -.006em; }
  .region__role { font-size: 13px; color: var(--n600); }

  .region__map svg {
    width: 100%;
    height: auto;
    border: 1px solid var(--n200);
    border-radius: var(--r-lg);
    background: var(--n0);
  }
  .region__map figcaption {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--n400);
  }
  .map__region {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    fill: var(--n400);
  }
  .map__pin circle, .map__pin rect { fill: var(--n800); }
  .map__pin--dc circle, .map__pin--dc rect { fill: var(--a); }
  .map__halo { fill: none; stroke: var(--a); stroke-width: 1; opacity: .45; }
  .map__pin text {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 550;
    fill: var(--n900);
  }
  .map__pin .map__sub {
    font-size: 9.5px;
    font-weight: 400;
    fill: var(--n600);
  }

  /* ── Fotos ─────────────────────────────────────────────────────────────
     Echte Aufnahmen aus dem Rechenzentrum München (Dreh 17.09.2026).
     Kein Rahmen, kein Schatten, kein Overlay: das Foto steht für sich. */
  .photo { margin: 0; }
  .photo img {
    width: 100%;
    height: auto;
    border-radius: var(--r-lg);
    background: var(--n200);
  }
  .photo figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: var(--n600);
    max-width: var(--measure);
  }
  /* Bildband zwischen zwei Sektionen, Containerbreite */
  .photo-band { padding-bottom: var(--block); }
  .photo-band img { aspect-ratio: 2 / 1; object-fit: cover; }

  /* ── Beiträge ──────────────────────────────────────────────────────── */
  .posts { display: grid; gap: clamp(24px, 3vw, 32px); }
  .post a { display: grid; gap: 12px; }
  .post img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--n200);
    border: 1px solid var(--n200);
    border-radius: var(--r);
    transition: border-color var(--dur) var(--ease);
  }
  .post a:hover img { border-color: var(--n300); }
  .post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 12.5px;
    color: var(--n600);
  }
  .post__cat { color: var(--a-ink); font-weight: 600; }
  .post__teaser { font-size: var(--t-sm); color: var(--n600); }
  .post a:hover .h3 { text-decoration: underline; text-underline-offset: 3px; }

  /* ── Abschluss ─────────────────────────────────────────────────────── */
  .closing__inner { display: grid; gap: clamp(36px, 5vw, 56px); align-items: start; }
  .closing__hint { margin-top: 22px; font-size: 13.5px; color: var(--n600); }
  .closing__hint a { color: var(--a-ink); text-decoration: underline; text-underline-offset: 3px; }

  .person {
    padding: clamp(24px, 2.6vw, 30px);
    border: 1px solid var(--n200);
    border-radius: var(--r-lg);
    background: var(--n50);
  }
  .person img {
    width: 96px; height: 96px;
    border-radius: 50%;
    border: 1px solid var(--n200);
    object-fit: cover;
    margin-bottom: 16px;
  }
  .person__name { font-size: 16px; font-weight: 600; letter-spacing: -.006em; }
  .person__role { font-size: 13.5px; color: var(--n600); margin-bottom: 18px; }
  .person__contact { display: grid; gap: 0; }
  .person__contact > div {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 12px;
    padding-block: 8px;
    border-top: 1px solid var(--n200);
    align-items: baseline;
  }
  .person__contact dt { font-size: 12.5px; color: var(--n600); }
  .person__contact dd { font-family: var(--mono); font-size: var(--t-mono); }
  .person__contact a { text-decoration: underline; text-underline-offset: 2px; }
  .person__note { margin-top: 16px; font-size: 12.5px; color: var(--n600); }

  /* ── Reaktionszusage · .promise ────────────────────────────────────────
     Die härteste Zahl auf der Seite: kein Wettbewerber schreibt hin, wann
     er zurückruft. Gehört auf jede Seite mit Formular oder Terminbutton,
     immer im selben Wortlaut und immer mit der Zahl in Mono. */
  /* Kein Flex-Container: der würde jeden Textabschnitt zu einem eigenen
     Umbruchkandidaten machen — „in" und das Komma landen dann allein auf
     einer Zeile. Der Punkt hängt deshalb absolut daneben. */
  .promise {
    margin-top: 18px;
    padding: 16px 0 0;
    border-top: 1px solid var(--n200);
    font-size: 13px;
    line-height: 1.5;
    color: var(--n600);
    text-wrap: pretty;
  }
  /* Kein grüner „Online“-Punkt mehr – der Satz trägt sich selbst. */
  .promise__dot { display: none; }
  .promise__value {
    font-weight: 650;
    color: var(--n900);
  }
  .section--dark .promise { border-top-color: rgba(255,255,255,.16); color: var(--n300); }
  .section--dark .promise__value { color: var(--n0); }

  /* ── Footer ────────────────────────────────────────────────────────── */
  .site-footer {
    padding-top: clamp(48px, 6vw, 72px);
    border-top: 1px solid var(--n200);
    background: var(--n25);
  }
  .site-footer__grid {
    display: grid;
    gap: clamp(28px, 4vw, 40px);
    padding-bottom: clamp(40px, 5vw, 56px);
  }
  .site-footer__brand p { font-size: 13.5px; color: var(--n600); margin-top: 12px; max-width: 34ch; }
  .site-footer__dc { font-size: 13px; font-weight: 600; color: var(--n800); }
  .site-footer__head {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--n900);
    margin-bottom: 14px;
  }
  .site-footer__col ul { display: grid; gap: 9px; }
  .site-footer__col a {
    font-size: var(--t-sm);
    color: var(--n600);
    transition: color var(--dur) var(--ease);
  }
  .site-footer__col a:hover { color: var(--n900); }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-block: 20px;
    border-top: 1px solid var(--n200);
    font-size: 12.5px;
    color: var(--n600);
  }
  .site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 20px; }
  .site-footer__legal a:hover { color: var(--n900); text-decoration: underline; text-underline-offset: 3px; }
}

/* ═══ BREAKPOINTS ══════════════════════════════════════════════════════
   Bewusst in `components`, nicht in `layout`: Kaskadenebenen schlagen
   Media Queries. Läge dieser Block in `layout`, würde jede Basisregel aus
   `components` die Breakpoint-Regel überschreiben.
   ═══════════════════════════════════════════════════════════════════ */
@layer components {

  /* ── ab 640 ────────────────────────────────────────────────────────── */
  @media (min-width: 640px) {
    .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Umbruch der H1 am Gedankenstrich erzwingen. Darunter ist die Spalte
       zu schmal dafür, da bricht die Zeile natürlich um. */
    .hero__h1 span { display: block; }
    .trust__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .trust__logos img { height: 38px; }
    .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kpi-row--big { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .models__head, .model {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 2fr) 6.5rem;
      gap: 20px;
      align-items: baseline;
    }
    .models__head {
      padding-bottom: 10px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--n600);
      border-bottom: 1px solid var(--n300);
    }
    .models__head span:last-child { text-align: right; }
    .models__list { border-top: 0; }
    .model__name, .model__origin, .model__use, .model__size { grid-column: auto; grid-row: auto; }
    .model__origin { font-size: var(--t-sm); }
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote__by img { width: 76px; height: 76px; }
  }

  /* ── ab 900: Desktop-Navigation ────────────────────────────────────── */
  @media (min-width: 900px) {
    .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .locations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Alle acht Logos in eine Reihe; Höhe fährt mit der Breite mit */
    .trust__logos { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .trust__logos img { height: clamp(28px, 2.9vw, 42px); }
    .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
    .hero__inset { right: 16px; bottom: 16px; width: 34%; max-width: 176px; }

    /* Auf Breitbild läuft der Verlauf quer: Text links auf Weiß,
       Landschaft rechts sichtbar. */
    .hero--bg .hero__inner { grid-template-columns: minmax(0, 1fr); }
    .hero--bg::after {
      background:
        linear-gradient(180deg, var(--n0) 0, rgba(255,255,255,0) 160px),
        linear-gradient(0deg,   var(--n0) 0, rgba(255,255,255,0) 140px),
        linear-gradient(93deg,  rgba(255,255,255,.885) 0%,
                                rgba(255,255,255,.875) 44%,
                                rgba(255,255,255,.84)  58%,
                                rgba(255,255,255,.52)  78%,
                                rgba(255,255,255,.15)  100%);
    }
    .region { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .closing__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
    .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  }

  /* ── unter 900: mobile Navigation als Vollbild-Overlay ─────────────── */
  @media (max-width: 899px) {
    .burger { display: inline-flex; }

    .nav {
      display: block;
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-header) + 1);
      padding: 84px var(--gutter) 40px;
      background: var(--n0);
      overflow-y: auto;
      overscroll-behavior: contain;
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
    }
    html[data-nav-open] .nav { opacity: 1; visibility: visible; }
    html[data-nav-open] { overflow: hidden; }

    .nav__list { display: block; margin-left: 0; }
    .nav__item { border-bottom: 1px solid var(--n200); }
    .nav__link {
      width: 100%;
      justify-content: space-between;
      padding: 16px 0;
      border-radius: 0;
      font-size: 17px;
      font-weight: 550;
      letter-spacing: -.013em;
    }
    .nav__link:hover, .nav__link[aria-expanded='true'] { background: none; }
    .nav__chev { width: 14px; height: 14px; }

    .mega, .dropdown {
      position: static;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding: 0 0 12px;
      min-width: 0;
      background: none;
    }
    .mega__inner {
      display: block;
      padding: 0;
      max-width: none;
    }
    .mega__grid { display: block; }
    .mega__grid a { margin-inline: 0; padding: 10px 0; }
    .mega__grid a:hover { background: none; }
    .mega__desc { display: none; }
    .mega__aside { margin-top: 14px; }
    .dropdown__list a { padding: 10px 0; font-size: 15px; }
    .dropdown__list a:hover { background: none; }

    .nav__actions {
      display: grid;
      gap: 12px;
      justify-items: stretch;
      margin: 28px 0 0;
    }
    .nav__actions .btn { width: 100%; }
    .nav__support { padding: 6px 0; }
  }

  /* ── 900 bis 1199: Desktop-Navigation, aber schmal ─────────────────────
     Sechs Punkte, Support und Kontakt müssen in eine Zeile passen. */
  @media (min-width: 900px) and (max-width: 1199px) {
    .nav { gap: 10px; }
    .nav__list { margin-left: 0; gap: 0; }
    .nav__link { padding-inline: 7px; font-size: 14.5px; }
    .nav__actions { gap: 10px; }
  }
  @media (min-width: 1200px) {
    .usecases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .usecases--long { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mega__grid { gap: 2px 40px; }
  }
}

/* ═══ UTILITIES ════════════════════════════════════════════════════════ */
@layer utilities {

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

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

/* ═══ DRUCK ════════════════════════════════════════════════════════════
   Die Vergleichstabelle Cloud/eigenes RZ wird ausgedruckt und in
   Geschäftsführungen gelegt. Sie muss auf Papier funktionieren.
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  @page { margin: 16mm; }

  .site-header, .site-footer, .skip-link, .hero__figure, .hero__bg,
  .trust, .cta-pair, .split, .hero__direct, .burger { display: none !important; }
  .hero--bg::after { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }

  .section, .section--dark, .section--tint {
    background: #fff !important;
    color: #000 !important;
    padding-block: 0 !important;
    border: 0 !important;
    break-inside: avoid;
  }
  .section { margin-bottom: 10mm; }

  .section--dark .section__lead, .section--dark .step__body,
  .section--dark .specs dt, .section--dark .specs dd,
  .section--dark .dtable td, .section--dark .dtable tbody th,
  .section--dark .dtable thead th { color: #000 !important; }

  .eyebrow, .section--dark .eyebrow { color: #000 !important; }


  .table-scroll { overflow: visible !important; }
  .dtable { min-width: 0 !important; font-size: 9.5pt; }
  .dtable th, .dtable td, .section--dark .dtable th, .section--dark .dtable td {
    border-color: #bbb !important;
  }
  .dtable--compare tbody td:last-child,
  .section--dark .dtable--compare tbody td:last-child {
    background: #f2f2f2 !important;
  }
  .dtable thead { display: table-header-group; }
  tr { break-inside: avoid; }

  a[href^='/']::after, a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 8pt;
    color: #555;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   UNTERSEITEN — Komponenten, die es nur außerhalb der Startseite gibt.
   Bewusst ans Ende der Datei gehängt und in `components` eingeordnet,
   damit die Breakpoint-Regeln darüber weiter greifen.
   ═══════════════════════════════════════════════════════════════════ */
@layer components {

  /* ── Entwurfsleiste ────────────────────────────────────────────────────
     Nur für die Abstimmung mit dem Kunden. Vor dem Livegang das <a> aus
     allen Seiten entfernen — eine Zeile je Datei, siehe DESIGN.md §13. */
  .draftbar {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    background: var(--n900);
    color: var(--n0);
    border-radius: var(--r-full);
    font-size: 12.5px;
    box-shadow: var(--sh-lift);
    transition: background-color var(--dur) var(--ease);
  }
  .draftbar:hover { background: var(--n800); }
  .draftbar__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--a);
    flex: none;
  }
  .draftbar span:last-child { color: var(--n400); }

  /* ── Kopf einer Unterseite ─────────────────────────────────────────── */
  .page-hero { padding-block: clamp(36px, 5vw, 60px) clamp(40px, 5vw, 64px); }
  .page-hero--tint { background: var(--n50); border-bottom: 1px solid var(--n200); }
  .page-hero__h1 {
    font-size: clamp(30px, 3.6vw, 42px);
    font-weight: 640;
    letter-spacing: -.022em;
    line-height: 1.12;
    max-width: 20ch;
    text-wrap: pretty;
  }
  .page-hero .lead { margin-top: 18px; }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 12.5px;
    color: var(--n600);
  }
  .breadcrumb a:hover { color: var(--n900); text-decoration: underline; text-underline-offset: 3px; }
  .breadcrumb li::after { content: '/'; margin-left: 8px; color: var(--n400); }
  .breadcrumb li:last-child::after { content: none; }
  .breadcrumb li { display: flex; align-items: center; gap: 8px; }
  .breadcrumb [aria-current] { color: var(--n900); }

  /* ── Nummerierter Ablauf ───────────────────────────────────────────── */
  .process { display: grid; gap: 0; counter-reset: schritt; }
  .process li {
    display: grid;
    gap: 6px 20px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding-block: 22px;
    border-top: 1px solid var(--n200);
  }
  .process li::before {
    counter-increment: schritt;
    content: counter(schritt, decimal-leading-zero);
    grid-row: span 2;
    font-family: var(--mono);
    font-size: var(--t-mono);
    color: var(--a-ink);
    padding-top: 2px;
  }
  .process h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.013em; }
  .process p { font-size: var(--t-sm); color: var(--n600); max-width: 62ch; }

  /* ── Formular ──────────────────────────────────────────────────────── */
  .form { display: grid; gap: 18px; max-width: 640px; }
  .form__row { display: grid; gap: 7px; }
  .form__row label { font-size: 13.5px; font-weight: 550; }
  .form input, .form select, .form textarea {
    font: inherit;
    font-size: 15px;
    padding: 11px 13px;
    color: var(--n900);
    background: var(--n0);
    border: 1px solid var(--n300);
    border-radius: var(--r-sm);
    width: 100%;
  }
  .form textarea { min-height: 120px; resize: vertical; }
  .form input:hover, .form select:hover, .form textarea:hover { border-color: var(--n400); }
  .form__hint { font-size: 12.5px; color: var(--n600); }
  .form__check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
  .form__check input { width: 18px; height: 18px; padding: 0; margin-top: 2px; }
  .form__check span { font-size: 13px; color: var(--n600); }
  .form__two { display: grid; gap: 18px; }

  /* ── Kalender-Platzhalter ──────────────────────────────────────────── */
  .booking {
    display: grid;
    gap: 14px;
    justify-items: start;
    padding: clamp(24px, 3vw, 34px);
    border: 1px dashed var(--n300);
    border-radius: var(--r-lg);
    background: var(--n50);
  }
  .booking__label {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--n600);
  }
  .booking h2 { font-size: 19px; font-weight: 620; letter-spacing: -.018em; }
  .booking p { font-size: var(--t-sm); color: var(--n600); max-width: 58ch; }

  /* ── Übersichtsseite ───────────────────────────────────────────────── */
  .overview { display: grid; gap: clamp(16px, 2vw, 22px); }
  .overview__card {
    display: grid;
    gap: 9px;
    align-content: start;
    padding: clamp(22px, 2.4vw, 28px);
    border: 1px solid var(--n200);
    border-radius: var(--r-lg);
    background: var(--n0);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .overview__card:hover { border-color: var(--n900); box-shadow: var(--sh-lift); }
  .overview__card p { font-size: var(--t-sm); color: var(--n600); }
  .overview__path { font-family: var(--mono); font-size: 12px; color: var(--n400); }
  .tag {
    justify-self: start;
    padding: 3px 9px;
    border-radius: var(--r-full);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .tag--done { background: var(--a-tint); color: var(--a-ink); border: 1px solid var(--a-line); }
  .tag--stub { background: var(--n100); color: var(--n600); border: 1px solid var(--n200); }

  /* ── Platzhalterseite ──────────────────────────────────────────────── */
  .stub { padding-block: clamp(60px, 9vw, 110px); }
  .stub__inner { max-width: 660px; }
  .stub__note {
    margin-top: 26px;
    padding: 20px 22px;
    border: 1px solid var(--n200);
    border-radius: var(--r);
    background: var(--n50);
    font-size: var(--t-sm);
    color: var(--n600);
  }
  .stub__list { display: grid; gap: 8px; margin-top: 14px; }
  .stub__list a { color: var(--a-ink); font-weight: 550; }
  .stub__list a:hover { text-decoration: underline; text-underline-offset: 3px; }

  @media (min-width: 640px) {
    .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form__two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 900px) {
    .overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .process li { grid-template-columns: 52px minmax(0, 1fr); }
  }
}

@media print { .draftbar { display: none !important; } }