/**
 * SKYPhoenix Enterprise public slice — ADR 0004
 *
 * Every literal spacing, type size, radius, border, shadow and duration maps to an
 * extracted base/light token. Colours map to extracted base/light tokens, the
 * owner-approved ADR 0004 dark mapping, or the supplied logo palette documented in
 * docs/product/brand-assets-2026-07-22.md.
 */

:root {
  color-scheme: light;

  /* Extracted brand and semantic colours. */
  /* --ent-logo-ink: #231815 stand hier bis zum 2026-08-05. Sein letzter
     Verbraucher war der Sprunglink, und dort war er falsch: fast schwarz auf
     --ent-action misst 2,27:1 hell und 3,06:1 dunkel, beides unter AA. Nach der
     Umstellung auf --ent-on-brand hatte der Wert keinen Verbraucher mehr, und
     CSS-002 hat das sofort gemeldet -- zu Recht, denn diese Datei beschreibt,
     was ausgeliefert wird, und ausgeliefert wurde er nicht mehr.
     Der Markenton selbst ist damit nicht verschwunden: er steht als
     brand/logo-ink in der Figma-Sammlung "Brand" und in den Kommentaren unten,
     die den Hexwert mitfuehren und deshalb ohne die Deklaration lesbar
     bleiben. */
  --ent-phoenix: #b92d26;
  --ent-ember: #ed6d1f;
  --ent-accent-display: #ed6d1f;
  /* Eyebrows waren fast schwarz, waehrend die Markenfarbe im Sprachumschalter
     und in 8px-Punkten sass. Ab jetzt traegt Phoenix genau drei Aufgaben:
     Links, Eyebrows, primaerer Schalter. */
  --ent-accent-text: var(--ent-phoenix);
  /* Frueher --ent-logo-ink, also fast schwarz und ohne Unterstreichung: Links
     waren von Fliesstext nicht zu unterscheiden. Phoenix liegt bei 6,06:1 auf
     weiss, besteht also AA in Fliesstextgroesse -- Ember mit 3,08:1 nicht. Damit
     bekommt die Markenfarbe zum ersten Mal eine Bedeutung: anklickbar. */
  --ent-link: var(--ent-phoenix);
  --ent-focus: #2563eb;
  /* Warme Neutraltoene statt kuehler.

     Gemessen, nicht geschaetzt: die Marke liegt bei Farbton 3 Grad (Phoenix),
     23 Grad (Ember) und 13 Grad (Logo-Tinte). Die bisherige Leiter kam aus
     Tailwind-Slate und lag bei 210 bis 221 Grad -- also rund 190 bis 218 Grad
     entfernt und damit fast genau auf der Gegenfarbe zu Phoenix. Zwei Folgen,
     beide unerwuenscht: nebeneinander treiben sich Rot und Blaugrau gegenseitig
     auseinander, und Slate mit einem roten Akzent ist das meistverwendete
     Farbschema des B2B-Webs.

     Der Ausweg lag in der eigenen Marke. --ent-logo-ink #231815 ist ein warmes
     Fast-Schwarz aus der Logodatei und wurde bisher ausschliesslich als Schrift
     auf Markenflaechen benutzt, waehrend jede Ueberschrift der Seite ein
     blaustichiges #111827 trug. Die neue Leiter ist aus dieser Tinte
     abgeleitet, Farbton 9 bis 24 Grad, Saettigung niedrig genug, dass kein
     Schritt farbig wirkt.

     Und die Stufen sind jetzt wahrnehmbar. Karte gegen Seite lag bei 1,046:1,
     ein Helligkeitsschritt von 1,5 -- unter der Schwelle, ab der auf einem
     nicht kalibrierten Buerobildschirm ueberhaupt etwas zu sehen ist. Genau das
     ist der Grund, warum die flache Fassung nicht gut aussah: nicht die
     Flachheit, sondern das Fehlen messbarer Ebenen. Neu: 1,110:1 und 1,124:1.

     Eine Tonleiter, vier echte Stufen. Vorher trugen --ent-bg und --ent-surface
     hier beide #ffffff, waehrend [data-theme='default'] sie vertauschte -- die
     Folge war, dass Seite, Hero, Abschnitte, Karten und Footer denselben
     Pixelwert hatten und nur 1px-Linien uebrig blieben, um irgendetwas zu
     trennen. #eef2f7 ist keine neue Farbe, es ist --color-navy-50 aus
     phoenix.css. */
  --ent-bg: #f7f2f0;
  --ent-bg-subtle: #ebe5e1;
  --ent-surface: #ffffff;
  --ent-surface-sunken: #e2dbd6;
  --ent-text: #3b2e2b;
  --ent-text-secondary: #524440;
  /* Der fruehere Wert lag auf dem neuen, dunkleren Band bei 4,30:1 und damit
     unter AA -- das Abdunkeln hat ihn mitgerissen. Gerechnet, nicht geschaetzt.
     Der neue Wert ist --color-slate-600 aus phoenix.css und liegt auf allen drei
     Flaechen zwischen 6,74:1 und 7,58:1. */
  --ent-muted: #6a5b56;
  --ent-heading: #170e0d;
  /* #e5e7eb lag auf weisser Flaeche bei 1,24:1. Solange der Verlauf die Flaeche
     trug, war das eine Verfeinerung; seit dem Entschlacken war es das einzige
     Trennmittel und damit unter der 3:1-Vorgabe aus WCAG 1.4.11. Kontrast kommt
     jetzt aus Ton UND Kante. */
  --ent-border: #d8cfca;
  /* Die Unterkante einer Flaeche ist im Licht dunkler als ihre Oberkante. Zwei
     Hexwerte Unterschied, einzeln nicht zu bemerken, in der Summe der Grund,
     warum eine Karte wie ein Gegenstand aussieht und nicht wie ein Rechteck. */
  --ent-border-shade: #c3b8b3;
  /* Formularfelder und Bedienelemente brauchen 3:1; der vorige Wert erreichte
     nur 2,45 bis 2,56:1. Der neue ist --color-slate-500 aus phoenix.css und
     liegt bei 4,55 bis 4,76:1. */
  --ent-border-strong: #877873;
  --ent-on-brand: #ffffff;
  /* Der Zustandsmarker "hier stehen Sie". Frueher stand an fuenf Stellen roh
     var(--ent-phoenix); im dunklen Profil erreichte das 2,13 bis 2,93:1 und lag
     damit unter der 3:1-Vorgabe aus WCAG 1.4.11 -- die Navigationsanzeige war
     dort schlicht nicht lesbar. --ent-link und --ent-accent-text waren laengst
     umgehaengt, diese Literale wurden dabei uebersehen. */
  --ent-indicator: var(--ent-phoenix);
  /* Die Handlungsfarbe ist nicht dieselbe wie die Markenfarbe. Phoenix #b92d26
     ist die Farbe der Logodatei und bleibt unangetastet; als grossflaechige
     Schalterfuellung wirkt sie allerdings laut statt einladend. Diese Fassung
     ist derselbe Farbton (3 Grad), nur tiefer und weniger gesaettigt -- 55
     statt 66 Prozent. Weiss darauf liegt bei 7,62:1 gegen vorher 6,06:1, die
     Beschriftung wird also zugleich ruhiger und besser lesbar. */
  --ent-action: #96302b;
  --ent-action-hover: #7e3833;

  /* Das Band. Signaturelement der Richtung C (Entscheidung des Eigentuemers 2026-08-03).
     Ein Abschnitt, der die Gegenflaeche traegt, statt nur eine Tonstufe abzuweichen.

     Im hellen Profil ist das Band die DUNKELSTE Flaeche: L* 7,47 gegen Papier 96,07,
     also dL* 88,6. Im dunklen Profil kehrt sich das Geraet um -- dort ist das Band die
     ANGEHOBENE Flaeche, weil eine noch dunklere gegen --ent-bg #14161a nur dL* 2,55
     erreichen wuerde und damit unter der 3,5er-Schwelle laege. Gemessen, nicht geschaetzt:
     #1f242c liegt bei dL* 6,83 ueber dem Seitengrund.

     Das Band ist keine zweite Marke: die Markenfarbe bleibt --ent-on-band-accent und
     traegt dort dieselben drei Aufgaben wie sonst. */
  --ent-band: #1c1512;
  --ent-on-band-heading: #faf7f5;
  --ent-on-band-text: #e8e0db;
  --ent-on-band-muted: #b3a49e;
  --ent-on-band-accent: #f0824a;
  --ent-on-band-surface: #2a211d;
  --ent-on-band-border: #3b302b;

  /* Extracted typography. */
  --ent-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ent-text-xs: 0.75rem;
  --ent-text-sm: 0.875rem;
  --ent-text-body: 1rem;
  --ent-text-card: 1.25rem;
  /* 2026-08-03, Richtung C: 1.875rem gegen eine h1 von 52 px war ein Groessenunterschied
     von 1,7 -- lesbar, aber nicht sprechend. Bei 2.5rem gegen 66 px bleibt das Verhaeltnis
     gleich, beide Stufen sind aber deutlich. Die Untergrenzen der clamp()-Rampen bleiben
     unangetastet, es waechst also nur ab etwa 1024 px. */
  --ent-text-section: 2.5rem;
  /* Fruehere Stufe --ent-text-display-compact entfaellt: sie trug denselben Wert
     wie --ent-text-section, wodurch die h1 unter 375 px exakt so gross war wie
     jede h2 -- die Seite hatte dort keine erste Ueberschrift mehr. Die Groesse
     regelt jetzt ein clamp() an der h1 selbst.
     Neu dazwischen: eine Lead-Stufe fuer Einleitungsabsaetze und eine
     Zwischenueberschrift. --ent-text-card bediente bisher elf Aufrufstellen in
     drei verschiedenen Rollen. --ent-text-subhead spiegelt --text-h3 aus
     phoenix.css. */
  /* 2026-08-03, Richtung C: der Auftritt waechst am Schreibtisch. 1.125rem war die
     Stufe des zurueckhaltenden Entwurfs; die Einleitung traegt jetzt sichtbar mehr. */
  --ent-text-lead: 1.3125rem;
  /* Die im Kommentar oben angekuendigte Stufe war nie angelegt worden, weshalb
     h2 und h3 auf fuenfzehn Routen beide mit 20px rendern -- im Lauf vom
     2026-07-27 hundertfuenfzigmal gemessen. */
  --ent-text-subhead: 1.5rem;

  /* Extracted spacing and sizing. */
  --ent-space-1: 0.25rem;
  --ent-space-2: 0.5rem;
  --ent-space-3: 0.75rem;
  --ent-space-4: 1rem;
  --ent-space-6: 1.5rem;
  --ent-space-8: 2rem;
  --ent-space-12: 3rem;
  --ent-space-16: 4rem;
  --ent-space-20: 5rem;
  --ent-space-24: 6rem;
  --ent-container: 80rem;
  --ent-container-wide: 100rem;
  --ent-container-ultrawide: 125rem;
  /* 4rem war fuer eine Kopfleiste mit Logo, sechs Menuepunkten, Sprach- und
     Themenwahl zu knapp -- die Leiste wirkte wie eine Naht, nicht wie eine
     Leiste. */
  --ent-header: 5.25rem;
  --ent-touch: 44px;

  /* Extracted component geometry and motion. */
  --ent-radius-sm: 0.375rem;
  --ent-radius-md: 0.5rem;
  --ent-radius-lg: 0.75rem;
  --ent-radius-pill: 9999px;
  --ent-border-default: 1px;
  --ent-border-strong-width: 2px;
  --ent-border-accent: 4px;
  /* Fruehere Hebung: 25 px Weichzeichnung, 10 px Versatz. Das ist die Sprache von
     Produktkacheln, nicht die eines Anbieters, der Systeme absichert. Der Schatten
     hat weiterhin eine Aufgabe -- er sagt "anklickbar" --, erledigt sie aber jetzt
     knapp statt auffaellig. */
  /* Schwarzer Schatten ueber warmen Neutraltoenen rendert grauviolett und ist
     das sicherste Anzeichen einer aus zwei Systemen zusammengesetzten Palette.
     Getoent mit der Logo-Tinte rgb(23, 14, 13). */
  --ent-shadow-hover:
    0 1px 2px -1px rgba(23, 14, 13, 0.06),
    0 6px 16px -6px rgba(23, 14, 13, 0.10),
    0 14px 30px -14px rgba(23, 14, 13, 0.06);
  /* Fuer Ueberlagerungen: Kopfleiste beim Rollen, Menues, Auswahllisten. */
  --ent-shadow-overlay:
    0 2px 4px -2px rgba(23, 14, 13, 0.08),
    0 18px 36px -14px rgba(23, 14, 13, 0.14);
  --ent-duration-fast: 0.15s;
  --ent-duration-base: 0.2s;
  --ent-hover-lift: translateY(-2px);

  /* Owner-approved Slice 8 compositions, derived from the governed palette. */
  /* Der Vierfarbverlauf sass als border-box an neun Stellen. Die Regel dagegen
     stand bereits in dieser Datei -- ein Vierfarbverlauf auf 48x4 px ist nicht
     als Verlauf erkennbar, nur als unsaubere Farbe -- und war am Eyebrow
     befolgt, an den uebrigen acht nicht. Statt neun Regeln einzeln anzufassen,
     traegt das Token jetzt eine flache Kante; alle Verwender werden davon still
     richtig. --ent-gradient-interactive-surface entfaellt: null Verwender. */
  --ent-gradient-action: linear-gradient(var(--ent-border), var(--ent-border));
  /* W-B09: --ent-gradient-action-primary wurde am 2026-07-27 entfernt, mit dem Kommentar,
     alle Verwender wuerden davon "still richtig". Das war falsch. Fuenf Deklarationen
     nutzten es weiter, und eine unaufloesbare var() in einem Kurzschreibweise-Wert macht
     die GANZE Deklaration ungueltig -- die Ziffernmarken des Evidence Path rendern seither
     ohne jeden Hintergrund. Das Token existiert wieder, jetzt als Vollton der
     Handlungsfarbe. */
  --ent-gradient-action-primary: linear-gradient(var(--ent-action), var(--ent-action));
  /* Zwei Farbwolken plus Verlauf als Seitenhintergrund. Flaeche statt Effekt:
     der Hintergrund traegt Inhalt, er konkurriert nicht mit ihm. */
  --ent-gradient-canvas: var(--ent-bg);
  /* Karten trugen einen Verlauf mit Markeneinschlag. Eine ruhige Flaeche mit
     sichtbarer Kante ordnet besser als eine Farbverlaufskante. */
  --ent-gradient-surface: var(--ent-surface);
  /* Fruehere Glasflaeche. Durchscheinende Flaechen ueber bewegtem Hintergrund
     wirken verspielt und kosten Lesbarkeit: der Kontrast eines Textes haengt
     dann davon ab, was zufaellig hinter ihm liegt. Eine Flaeche ist jetzt eine
     Flaeche. Das Token bleibt bestehen, damit die rund drei Dutzend Verwender
     nicht einzeln angefasst werden muessen. */
  --ent-glass: var(--ent-surface);

  /* Zustaende brauchen eigene Werte, keine Aliasse auf die Ruheflaeche. Aus
     --ent-heading abgeleitet, damit sie in hell wie dunkel von selbst stimmen:
     im hellen Profil dunkelt der Ton ab, im dunklen hellt er auf. */
  --ent-surface-hover: color-mix(in srgb, var(--ent-heading) 5%, var(--ent-surface));
  --ent-surface-selected: color-mix(in srgb, var(--ent-heading) 9%, var(--ent-surface));

  /* Wechselband der Abschnitte. Zeigte auf --ent-gradient-canvas und war damit
     identisch mit dem Seitengrund -- die Abwechslung, die
     content-page-enterprise.php ausgibt, war unsichtbar. */
  --ent-section-subtle: var(--ent-bg-subtle);

  /* Zwei Stufen statt einer. Der Kommentar behauptete das schon; die beiden
     Werte waren dennoch zeichengleich, sodass jedes Ueberfahren den Schatten
     gegen genau denselben Schatten tauschte und nur das Anheben uebrig blieb.
     Obergrenze fuer den Ruhezustand: Deckkraft 0,06, Weichzeichnung 8px,
     Versatz 2px. Darueber wird eine Flaeche zur Produktkachel. */
  --ent-shadow-raised:
    0 1px 1px -0.5px rgba(23, 14, 13, 0.04),
    0 2px 6px -2px rgba(23, 14, 13, 0.05);

  /* Zeilenlaenge. Bei 2560 px liefen Absaetze sonst auf 150 bis 200 Zeichen. */
  --ent-measure: 68ch;

  /* Hoehe der Pfadnavigation, gemessen 45 px bei 390 und bei 1440. Sie ist ein
     Token, seit die Abschnittsnavigation darunter klebt und ihren Abstand
     ausrechnen muss. --ent-header wird unter 640 px ueberschrieben, also
     rechnet sich der Abstand von selbst mit. */
  --ent-breadcrumb: 2.8125rem;
}

/* systemTheme() in enterprise.js liefert 'light' oder 'dark'. Wer kein dunkles
   Betriebssystem hat, bekommt also data-theme='light' -- und dafuer gab es
   keinen einzigen Tokenblock. Die Folge war ein Durchfallen auf :root und eine
   vollstaendig weisse Seite. Beide hellen Profile teilen jetzt ausdruecklich
   dieselbe Leiter wie :root, statt Werte gegeneinander zu vertauschen. */
:root[data-theme='light'],
:root[data-theme='default'] {
  color-scheme: light;
  --ent-bg: #f7f2f0;
  --ent-bg-subtle: #ebe5e1;
  --ent-surface: #ffffff;
  --ent-surface-sunken: #e2dbd6;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  /* Phoenix erreicht auf den dunklen Flaechen nur 2,1 bis 2,9:1 und faellt damit
     unter WCAG 1.4.11; die zweite Markenfarbe traegt hier den Zustand. Etwas
     abgemildert gegenueber dem vollen Ember, damit sie auf dunklem Grund nicht
     blendet: 5,7:1 statt 4,9:1. */
  --ent-indicator: #f0824a;
  --ent-accent-display: #f0824a;
  --ent-accent-text: #f0824a;
  --ent-link: #f0824a;
  --ent-focus: #60a5fa;
  /* Neutral, nicht warm. Die warme Leiter war im hellen Profil richtig -- dort
     ist sie das Papier, auf dem gedruckt wird -- und im dunklen falsch: dieselbe
     Toenung, die hell wie Buetten wirkt, wirkt dunkel wie Rost. Diese Leiter
     liegt bei Saettigung 11 bis 13 Prozent und ist damit fast unbunt; die
     frueheren Tailwind-Werte lagen bei 56 Prozent und waren deutlich blau.
     Vier unterscheidbare Ebenen: 1,072 / 1,112 / 1,161. */
  --ent-bg: #14161a;
  --ent-bg-subtle: #1a1d22;
  --ent-surface: #22262c;
  --ent-surface-sunken: #2c3138;
  --ent-text: #eef1f4;
  --ent-text-secondary: #d2d7dd;
  --ent-muted: #a8b0ba;
  /* Reines Weiss halogeniert auf OLED; #f8fafc liegt bei 14,53:1, weit ueber AAA. */
  --ent-heading: #f8fafc;
  --ent-border: #3d434c;
  --ent-border-shade: #2f343b;
  --ent-border-strong: #7b828d;
  /* Die Handlungsfarbe muss im Dunkeln heller liegen als im Hellen, sonst
     verschwindet der Schalter in der Flaeche. */
  --ent-action: #b93a32;
  --ent-action-hover: #cc463d;
  /* Das Band kehrt sich im Dunkeln um: angehobene statt dunkelste Flaeche. Eine
     dunklere Flaeche gegen --ent-bg #14161a erreichte nur dL* 2,55; #1f242c liegt bei
     6,83. Text darauf: Ueberschrift 14,90:1, Fliesstext 12,91:1, gedaempft 7,12:1,
     Akzent 5,94:1. Karten auf dem Band stehen bei #2b323c, dL* 6,49 ueber dem Band. */
  --ent-band: #1f242c;
  --ent-on-band-heading: #f8fafc;
  --ent-on-band-text: #e6eaf0;
  --ent-on-band-muted: #a8b0ba;
  --ent-on-band-accent: #f0824a;
  --ent-on-band-surface: #2b323c;
  --ent-on-band-border: #39414c;
  /* Auf dunklen Flaechen richtet ein Schlagschatten nichts aus -- dort traegt
     eine helle Oberkante die Erhebung. */
  --ent-shadow-raised: inset 0 1px 0 0 rgba(255, 255, 255, 0.045);
  --ent-shadow-hover:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.07),
    0 8px 20px -8px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    /* Phoenix erreicht auf den dunklen Flaechen nur 2,1 bis 2,9:1 und faellt damit
       unter WCAG 1.4.11; die zweite Markenfarbe traegt hier den Zustand. Etwas
       abgemildert gegenueber dem vollen Ember, damit sie auf dunklem Grund nicht
       blendet: 5,7:1 statt 4,9:1. */
    --ent-indicator: #f0824a;
    --ent-accent-display: #f0824a;
    --ent-accent-text: #f0824a;
    --ent-link: #f0824a;
    --ent-focus: #60a5fa;
    /* Neutral, nicht warm. Die warme Leiter war im hellen Profil richtig -- dort
       ist sie das Papier, auf dem gedruckt wird -- und im dunklen falsch: dieselbe
       Toenung, die hell wie Buetten wirkt, wirkt dunkel wie Rost. Diese Leiter
       liegt bei Saettigung 11 bis 13 Prozent und ist damit fast unbunt; die
       frueheren Tailwind-Werte lagen bei 56 Prozent und waren deutlich blau.
       Vier unterscheidbare Ebenen: 1,072 / 1,112 / 1,161. */
    --ent-bg: #14161a;
    --ent-bg-subtle: #1a1d22;
    --ent-surface: #22262c;
    --ent-surface-sunken: #2c3138;
    --ent-text: #eef1f4;
    --ent-text-secondary: #d2d7dd;
    --ent-muted: #a8b0ba;
    /* Reines Weiss halogeniert auf OLED; #f8fafc liegt bei 14,53:1, weit ueber AAA. */
    --ent-heading: #f8fafc;
    --ent-border: #3d434c;
    --ent-border-shade: #2f343b;
    --ent-border-strong: #7b828d;
    /* Die Handlungsfarbe muss im Dunkeln heller liegen als im Hellen, sonst
       verschwindet der Schalter in der Flaeche. */
    --ent-action: #b93a32;
    --ent-action-hover: #cc463d;
    /* Siehe :root[data-theme='dark'] -- das Band ist im Dunkeln die angehobene Flaeche. */
    --ent-band: #1f242c;
    --ent-on-band-heading: #f8fafc;
    --ent-on-band-text: #e6eaf0;
    --ent-on-band-muted: #a8b0ba;
    --ent-on-band-accent: #f0824a;
    --ent-on-band-surface: #2b323c;
    --ent-on-band-border: #39414c;
    /* Auf dunklen Flaechen richtet ein Schlagschatten nichts aus -- dort traegt
       eine helle Oberkante die Erhebung. */
    --ent-shadow-raised: inset 0 1px 0 0 rgba(255, 255, 255, 0.045);
    --ent-shadow-hover:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.07),
      0 8px 20px -8px rgba(0, 0, 0, 0.55);
  }
}

.enterprise-page {
  margin: 0;
  background-color: var(--ent-bg);
  color: var(--ent-text);
  font-family: var(--ent-font);
  font-size: var(--ent-text-body);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.625;
  transition: background-color var(--ent-duration-base), color var(--ent-duration-base);
}

.enterprise-page main :where(h1, h2, h3, p, li, strong, span, a, label, legend) {
  transition: color var(--ent-duration-base);
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--ent-duration-base);
  animation-timing-function: ease;
}

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

:where(.enterprise-page a) {
  color: inherit;
}

.enterprise-visually-hidden {
  position: absolute;
  width: var(--ent-border-default);
  height: var(--ent-border-default);
  padding: 0;
  margin: calc(var(--ent-border-default) * -1);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.enterprise-container {
  width: 100%;
  max-width: var(--ent-container);
  margin-inline: auto;
  padding-inline: var(--ent-space-4);
}

@media (min-width: 640px) {
  .enterprise-container {
    padding-inline: var(--ent-space-6);
  }
}

@media (min-width: 1024px) {
  /* Nur hier ist der Hero zweispaltig. Darunter stand das Panel rechtsbuendig
     in einer einspaltigen Bahn und liess links eine tote Luecke. */
  .enterprise-hero__grid > .evidence-system {
    justify-self: end;
  }

  .enterprise-container {
    padding-inline: var(--ent-space-8);
  }
}

.enterprise-skip-link {
  position: fixed;
  inset-block-start: var(--ent-space-2);
  inset-inline-start: var(--ent-space-2);
  z-index: 100;
  padding: var(--ent-space-2) var(--ent-space-4);
  border-radius: var(--ent-radius-md);
  /* Schrift und Rand standen auf --ent-logo-ink #231815, also fast schwarz, auf
     --ent-action. Am 2026-08-05 im Browser gemessen, mit gesetztem Fokus und
     gerechneten Farben, nicht aus der Deklaration geschlossen:

         hell    rgb(35,24,21) auf rgb(150,48,43)   2,27:1
         dunkel  rgb(35,24,21) auf rgb(185,58,50)   3,06:1

     AA verlangt 4,5:1. Beide Themen verfehlen das, nicht nur das dunkle -- und
     zwar auf dem ERSTEN Element, das eine Tastaturbedienung erreicht. Ein
     Sprunglink, den man nicht lesen kann, ist genau so gut wie keiner.

     --ent-on-brand ist die Farbe, die fuer genau diesen Untergrund existiert und
     in beiden Themen dafuer gemessen wurde: 7,62:1 hell, 5,65:1 dunkel. Es
     braucht dafuer keinen neuen Wert und keine dunkle Ueberschreibung von
     --ent-logo-ink, das als Markenton richtig bleibt, wo er auf hellen Flaechen
     steht. Gepinnt von SKIP-001 bis SKIP-003. */
  border: var(--ent-border-strong-width) solid var(--ent-on-brand);
  background: var(--ent-gradient-action-primary);
  color: var(--ent-on-brand);
  transform: translateY(-200%);
}

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

.enterprise-page :focus-visible {
  outline: var(--ent-border-strong-width) solid var(--ent-focus);
  outline-offset: var(--ent-border-strong-width);
}

.enterprise-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  min-height: var(--ent-header);
  border-bottom: var(--ent-border-default) solid var(--ent-border);
  background: var(--ent-glass);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base), box-shadow var(--ent-duration-base);
}

.enterprise-header__row {
  min-height: var(--ent-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ent-space-4);
}

.enterprise-breadcrumb {
  position: sticky;
  inset-block-start: var(--ent-header);
  z-index: 40;
  /* Die Hoehe war bisher ein Nebenprodukt der Polsterung und lag gemessen bei
     45 px. Sobald ein drittes klebendes Element darunter kommt, muss sie ein
     Wert sein, den man ausrechnen kann, und kein Zufall. --ent-breadcrumb ist
     genau diese 45 px, hier als Untergrenze gesetzt, damit das Token die
     Wahrheit ist und nicht eine Schaetzung daneben. */
  min-height: var(--ent-breadcrumb);
  border-bottom: var(--ent-border-default) solid var(--ent-border);
  background: var(--ent-glass);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base);
}

.enterprise-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ent-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.enterprise-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--ent-space-2);
  min-width: 0;
}

.enterprise-breadcrumb li + li::before {
  color: var(--ent-muted);
  content: '›';
  font-weight: 700;
}

.enterprise-breadcrumb a,
.enterprise-breadcrumb span {
  min-height: var(--ent-touch);
  display: inline-flex;
  align-items: center;
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-sm);
  text-decoration: none;
}

.enterprise-breadcrumb a:hover {
  color: var(--ent-heading);
  text-decoration: underline;
  text-underline-offset: var(--ent-space-1);
}

.enterprise-breadcrumb [aria-current='page'] {
  color: var(--ent-heading);
  font-weight: 600;
  overflow-wrap: break-word;
  hyphens: auto;
}

.enterprise-brand {
  display: inline-grid;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.enterprise-brand__logo {
  grid-area: 1 / 1;
  display: block;
  width: auto;
  height: var(--ent-space-12);
  opacity: 0;
  transition: opacity var(--ent-duration-base);
}

.enterprise-logo--light {
  opacity: 1;
}

:root[data-theme='default'] .enterprise-logo--light,
:root[data-theme='dark'] .enterprise-logo--light,
:root[data-theme='dark'] .enterprise-logo--default {
  opacity: 0;
}

:root[data-theme='default'] .enterprise-logo--default,
:root[data-theme='dark'] .enterprise-logo--dark {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .enterprise-logo--light,
  :root:not([data-theme]) .enterprise-logo--default {
    opacity: 0;
  }

  :root:not([data-theme]) .enterprise-logo--dark {
    opacity: 1;
  }
}

.enterprise-desktop-nav {
  display: none;
}

.enterprise-desktop-nav__list {
  display: flex;
  align-items: center;
  gap: var(--ent-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.enterprise-nav-link,
.enterprise-nav-group > summary {
  min-height: var(--ent-touch);
  display: inline-flex;
  align-items: center;
  gap: var(--ent-space-2);
  padding: var(--ent-space-2) var(--ent-space-3);
  border-radius: var(--ent-radius-sm);
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ent-duration-fast), color var(--ent-duration-fast), box-shadow var(--ent-duration-fast);
}

.enterprise-nav-link:hover,
.enterprise-nav-group > summary:hover {
  background: var(--ent-surface-hover);
  color: var(--ent-heading);
}

/* Die aktuelle Seite muss sich vom blossen Ueberfahren unterscheiden, sonst
   sagen beide Zustaende dasselbe. */
.enterprise-nav-link[aria-current='page'],
.enterprise-nav-group--current > summary {
  background: var(--ent-surface-selected);
  color: var(--ent-heading);
}

/* Frueher ein 1px-Ring aus Ember und Rahmenfarbe: je nach Kontextfamilie
   1,36 bis 2,15:1 und damit unter der 3:1-Vorgabe fuer Bedienelemente. Ein
   durchgehender Strich in Phoenix liegt bei 6,06:1 und ist ausserdem das
   Zeichen, das man ohne Nachdenken als "hier stehe ich" liest. */
.enterprise-nav-link[aria-current='page'],
.enterprise-nav-group--current > summary {
  box-shadow: inset 0 -2px 0 0 var(--ent-indicator);
}

.enterprise-nav-group {
  position: relative;
}

.enterprise-nav-group > summary {
  list-style: none;
}

.enterprise-nav-group > summary::-webkit-details-marker {
  display: none;
}

.enterprise-nav-group > summary::after {
  content: '';
  width: var(--ent-space-2);
  height: var(--ent-space-2);
  border-right: var(--ent-border-default) solid currentColor;
  border-bottom: var(--ent-border-default) solid currentColor;
  transform: rotate(45deg) translateY(calc(var(--ent-space-1) * -1));
  transition: transform var(--ent-duration-fast);
}

.enterprise-nav-group[open] > summary::after {
  transform: rotate(225deg) translateY(calc(var(--ent-space-1) * -1));
}

.enterprise-nav-panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  width: 20rem;
  max-height: calc(100vh - var(--ent-header) - var(--ent-space-8));
  overflow-y: auto;
  padding: var(--ent-space-3);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  background: var(--ent-gradient-surface);
  box-shadow: var(--ent-shadow-hover);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base), color var(--ent-duration-base);
}

.enterprise-nav-panel a {
  display: block;
  padding: var(--ent-space-3);
  border-radius: var(--ent-radius-md);
  color: var(--ent-text-secondary);
  text-decoration: none;
}

/* Die Eintraege im Aufklappmenue der Hauptnavigation tragen aria-current, aber
   keine Klasse -- .enterprise-nav-link[aria-current] hat sie deshalb nie
   erreicht. Auf den acht Loesungs- und Werkzeugseiten war der aktuelle Eintrag
   damit von seinen Nachbarn in keiner einzigen Eigenschaft zu unterscheiden.
   Gefunden vom GUI-Lauf, nachdem er jede Navigation einzeln statt nur die erste
   geprueft hat. */
.enterprise-nav-panel a[aria-current='page'] {
  box-shadow: inset 2px 0 0 0 var(--ent-indicator);
  background: var(--ent-surface-selected);
}

.enterprise-nav-panel a[aria-current='page'] strong {
  color: var(--ent-heading);
  font-weight: 700;
}

.enterprise-nav-panel a:hover {
  background: var(--ent-bg-subtle);
  color: var(--ent-heading);
}

.enterprise-nav-panel strong,
.enterprise-nav-panel span {
  display: block;
}

.enterprise-nav-panel strong {
  color: var(--ent-heading);
  font-size: var(--ent-text-sm);
}

.enterprise-nav-panel span {
  margin-top: var(--ent-space-1);
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
  line-height: 1.5;
}

.enterprise-nav-panel__label {
  margin: var(--ent-space-3) var(--ent-space-3) var(--ent-space-1);
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.enterprise-nav-panel__group,
.enterprise-mobile-status-group {
  display: grid;
  gap: var(--ent-space-1);
}

.enterprise-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ent-space-2);
}

.enterprise-language {
  min-height: var(--ent-touch);
  display: inline-flex;
  align-items: stretch;
  padding: var(--ent-space-1);
  border: var(--ent-border-default) solid var(--ent-muted);
  border-radius: var(--ent-radius-md);
  background: var(--ent-glass);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base);
}

.enterprise-language a {
  min-width: var(--ent-space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--ent-space-2);
  border-radius: var(--ent-radius-sm);
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-xs);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.enterprise-language a:hover {
  color: var(--ent-heading);
}

/* Vorher eine Vollton-Orange-Pille: das lauteste Markenelement im Kopf war
   damit der Sprachumschalter. Er sagt jetzt dasselbe wie jeder andere
   Aktiv-Zustand. */
.enterprise-language a[aria-current='page'] {
  background: var(--ent-surface-selected);
  color: var(--ent-heading);
}

.enterprise-theme {
  display: none;
  align-items: center;
  margin: 0;
  border: var(--ent-border-default) solid var(--ent-muted);
  border-radius: var(--ent-radius-md);
  background: var(--ent-glass);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base);
}

.enterprise-js .enterprise-theme {
  display: flex;
}

.enterprise-theme select {
  min-height: var(--ent-touch);
  max-width: 7rem;
  padding: var(--ent-space-2) var(--ent-space-3);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--ent-text-secondary);
  font-family: inherit;
  font-size: var(--ent-text-xs);
  font-weight: 600;
  cursor: pointer;
}

.enterprise-theme select:focus-visible {
  outline: var(--ent-border-strong-width) solid var(--ent-focus);
  outline-offset: var(--ent-border-default);
}

.enterprise-mobile-navigation {
  position: static;
}

.enterprise-mobile-trigger {
  min-width: var(--ent-touch);
  min-height: var(--ent-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--ent-border-default) solid var(--ent-muted);
  border-radius: var(--ent-radius-md);
  background: var(--ent-glass);
  color: var(--ent-heading);
  cursor: pointer;
  transition: background-color var(--ent-duration-fast), border-color var(--ent-duration-base), color var(--ent-duration-base);
}

.enterprise-mobile-trigger::-webkit-details-marker {
  display: none;
}

.enterprise-mobile-navigation[open] .enterprise-mobile-trigger {
  background: var(--ent-bg-subtle);
}

.enterprise-mobile-trigger svg {
  width: var(--ent-space-6);
  height: var(--ent-space-6);
}

.enterprise-mobile-panel {
  position: fixed;
  inset-block-start: var(--ent-header);
  inset-inline: 0;
  max-height: calc(100dvh - var(--ent-header));
  overflow-y: auto;
  padding: 0 var(--ent-space-4) var(--ent-space-4);
  border-top: var(--ent-border-default) solid var(--ent-border);
  background: var(--ent-gradient-canvas);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base);
}

.enterprise-mobile-navigation:not([open]) .enterprise-mobile-panel {
  display: none;
}

.enterprise-mobile-panel nav {
  display: grid;
  gap: var(--ent-space-1);
  padding-top: var(--ent-space-3);
}

.enterprise-mobile-panel a {
  min-height: var(--ent-touch);
  display: flex;
  align-items: center;
  padding: var(--ent-space-2) var(--ent-space-3);
  border-radius: var(--ent-radius-md);
  color: var(--ent-text-secondary);
  font-weight: 600;
  text-decoration: none;
}

.enterprise-mobile-panel a:hover {
  background: var(--ent-surface-hover);
  color: var(--ent-heading);
}

.enterprise-mobile-panel a[aria-current='page'] {
  background: var(--ent-surface-selected);
  color: var(--ent-heading);
}

.enterprise-mobile-group {
  border-block: var(--ent-border-default) solid var(--ent-border);
}

.enterprise-mobile-group + .enterprise-mobile-group {
  border-top: 0;
}

.enterprise-mobile-group > summary {
  min-height: var(--ent-touch);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ent-space-3);
  padding: var(--ent-space-2) var(--ent-space-3);
  border-radius: var(--ent-radius-md);
  color: var(--ent-heading);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.enterprise-mobile-group > summary::-webkit-details-marker {
  display: none;
}

.enterprise-mobile-group > summary::after {
  width: var(--ent-space-2);
  height: var(--ent-space-2);
  border-right: var(--ent-border-default) solid currentColor;
  border-bottom: var(--ent-border-default) solid currentColor;
  content: '';
  transform: rotate(45deg) translateY(calc(var(--ent-space-1) * -1));
  transition: transform var(--ent-duration-fast);
}

.enterprise-mobile-group[open] > summary {
  background: var(--ent-bg-subtle);
}

.enterprise-mobile-group[open] > summary::after {
  transform: rotate(225deg) translateY(calc(var(--ent-space-1) * -1));
}

.enterprise-mobile-group__links {
  display: grid;
  gap: var(--ent-space-1);
  padding: var(--ent-space-1) 0 var(--ent-space-3) var(--ent-space-3);
}

.enterprise-mobile-group__links .enterprise-mobile-panel__label {
  margin-left: var(--ent-space-3);
}

.enterprise-mobile-panel__label {
  margin: var(--ent-space-3) var(--ent-space-3) var(--ent-space-1);
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

/* Ohne den Glanz-Sweep braucht der Schalter weder Stapelkontext noch
   Beschneidung; overflow: hidden war ausserdem eine latente Gefahr fuer den
   Fokusring. */
.enterprise-button {
  position: relative;
  min-height: var(--ent-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ent-space-2);
  padding: var(--ent-space-3) var(--ent-space-6);
  border: var(--ent-border-strong-width) solid transparent;
  border-radius: var(--ent-radius-md);
  appearance: none;
  font-size: var(--ent-text-body);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  transition: transform var(--ent-duration-fast), box-shadow var(--ent-duration-base), border-color var(--ent-duration-fast), background-color var(--ent-duration-base), color var(--ent-duration-base);
}

/* Der diagonale Glanz-Sweep ueber den Schalter ist am 2026-07-27 entfallen. Er
   war zusammen mit Anheben, Schatten und wanderndem Verlauf der vierte
   gleichzeitige Hover-Effekt und die Sprache einer Produktseite, nicht die eines
   Anbieters, der Releases absichert. */
.enterprise-button:hover {
  transform: var(--ent-hover-lift);
  box-shadow: var(--ent-shadow-hover);
}

.enterprise-button:active {
  transform: translateY(0);
}

.enterprise-button--primary {
  border-color: transparent;
  /* Vorher lagen hier drei Schichten uebereinander: ein Glanzpunkt aus einem
     radialen Verlauf mit 44 Prozent Weiss in der linken oberen Ecke, ein
     vierstufiger Ember-Verlauf als Flaeche und ein weiterer als Kante -- und
     beim Ueberfahren wanderte die Position aller drei von 0 auf 100 Prozent.
     Auf einer sonst flachen Seite war das das lauteste Element ueberhaupt und
     der einzige glaenzende Rest des frueheren Auftritts.

     Die Farbwahl war ausserdem ein Umweg: Weiss auf Ember erreicht nur 3,08:1,
     weshalb die Beschriftung auf das fast schwarze --ent-logo-ink ausweichen
     musste. Weiss auf Phoenix liegt bei 6,06:1 und besteht AA. Damit traegt die
     dominante Farbe des Logos die dominante Handlung der Seite. */
  background: var(--ent-action);
  color: var(--ent-on-brand);
  box-shadow: var(--ent-shadow-raised);
}

.enterprise-button--primary:hover {
  border-color: transparent;
  background: var(--ent-action-hover);
  color: var(--ent-on-brand);
  box-shadow: var(--ent-shadow-hover);
}

.enterprise-button--secondary {
  border-color: transparent;
  /* Der Zweitschalter trug den Palettenkonflikt in einem einzigen Objekt aus:
     eine kuehle Fuellung, eine warme Verlaufskante und ein weiterer Glanzpunkt.
     Im dunklen Profil war die Fuellung ausserdem zeichengleich mit
     --ent-surface, sodass auf einer Karte nur die Kante uebrig blieb. */
  border-color: var(--ent-border-strong);
  background: var(--ent-surface);
  color: var(--ent-heading);
}

.enterprise-button--secondary:hover {
  border-color: var(--ent-border-strong);
  background: var(--ent-bg-subtle);
  color: var(--ent-heading);
  box-shadow: var(--ent-shadow-raised);
}

:root[data-theme='dark'] .enterprise-button--secondary {
  border-color: var(--ent-border-strong);
  color: var(--ent-heading);
}

:root[data-theme='dark'] .enterprise-button--secondary:hover {
  color: var(--ent-heading);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .enterprise-button--secondary {
    border-color: var(--ent-border-strong);
    color: var(--ent-heading);
  }

  :root:not([data-theme]) .enterprise-button--secondary:hover {
    color: var(--ent-heading);
  }
}

.enterprise-header .enterprise-button {
  display: none;
  min-height: var(--ent-touch);
  padding: var(--ent-space-2) var(--ent-space-4);
  font-size: var(--ent-text-sm);
}

.enterprise-hero {
  padding-block: var(--ent-space-20);
  border-bottom: var(--ent-border-default) solid var(--ent-border);
  background: var(--ent-gradient-canvas);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base);
}



.enterprise-hero__grid {
  display: grid;
  gap: var(--ent-space-12);
  align-items: center;
}

.enterprise-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ent-space-3);
  margin: 0 0 var(--ent-space-4);
  color: var(--ent-accent-text);
  font-size: var(--ent-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enterprise-eyebrow::before {
  content: '';
  width: var(--ent-space-12);
  height: var(--ent-border-accent);
  border-radius: var(--ent-radius-pill);
  /* Ein Vierfarbverlauf auf 48x4 px ist nicht als Verlauf erkennbar, nur als
     unsaubere Farbe. Flach. */
  background: var(--ent-indicator);
}

.enterprise-hero h1 {
  /* 14ch waren rund 400 px, waehrend der Lead-Absatz darunter bei 42rem lief:
     die Zeile der Einleitung war laenger als die der Schlagzeile. */
  max-width: 20ch;
  margin: 0;
  color: var(--ent-heading);
  /* Ersetzt drei !important-Regeln und den 375px-Bruchpunkt. */
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

/* 36rem statt 42rem, damit die Einleitung schmaler bleibt als die Schlagzeile
   darueber und die Rangfolge stimmt. Eigene Lead-Stufe statt --ent-text-card,
   das den Kartentiteln gehoert. */
.enterprise-hero__lead {
  max-width: 36rem;
  margin: var(--ent-space-6) 0 0;
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-lead);
  line-height: 1.6;
}

.enterprise-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ent-space-3);
  margin-top: var(--ent-space-8);
}

.enterprise-hero__note {
  margin: var(--ent-space-4) 0 0;
  color: var(--ent-muted);
  font-size: var(--ent-text-sm);
}

.enterprise-content-hero__copy {
  max-width: 48rem;
}

.enterprise-context-navigation {
  --ent-context-accent: var(--ent-accent-display);
  display: none;
  padding: var(--ent-space-6);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  background:
    radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--ent-context-accent) 16%, transparent),
      transparent 46%
    ),
    var(--ent-gradient-surface);
  box-shadow: var(--ent-shadow-hover);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base), box-shadow var(--ent-duration-base), transform var(--ent-duration-fast);
}

.enterprise-context-mobile {
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  background: var(--ent-gradient-surface);
  box-shadow: var(--ent-shadow-hover);
  overflow: clip;
}

.enterprise-context-mobile > summary {
  min-height: var(--ent-touch);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ent-space-3);
  padding: var(--ent-space-3) var(--ent-space-4);
  color: var(--ent-heading);
  cursor: pointer;
  list-style: none;
}

.enterprise-context-mobile > summary::-webkit-details-marker {
  display: none;
}

.enterprise-context-mobile > summary::after {
  width: var(--ent-space-2);
  height: var(--ent-space-2);
  border-right: var(--ent-border-default) solid currentColor;
  border-bottom: var(--ent-border-default) solid currentColor;
  content: '';
  transform: rotate(45deg) translateY(calc(var(--ent-space-1) * -1));
  transition: transform var(--ent-duration-fast);
}

.enterprise-context-mobile[open] > summary::after {
  transform: rotate(225deg) translateY(calc(var(--ent-space-1) * -1));
}

.enterprise-context-mobile__summary {
  min-width: 0;
  display: grid;
  gap: var(--ent-space-1);
}

.enterprise-context-mobile__summary small {
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enterprise-context-mobile__summary strong {
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: var(--ent-text-body);
}

.enterprise-context-mobile nav {
  padding: 0 var(--ent-space-3) var(--ent-space-3);
  border-top: var(--ent-border-default) solid var(--ent-border);
}

.enterprise-context-mobile ul {
  display: grid;
  gap: var(--ent-space-1);
  margin: var(--ent-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.enterprise-context-mobile__item {
  min-height: var(--ent-touch);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ent-space-3);
  padding: var(--ent-space-2) var(--ent-space-3);
  border-radius: var(--ent-radius-md);
  color: var(--ent-text-secondary);
  text-decoration: none;
}

.enterprise-context-mobile__item > span {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  font-weight: 600;
}

.enterprise-context-mobile__item small {
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
}

.enterprise-context-mobile a:hover {
  background: var(--ent-surface-hover);
}

.enterprise-context-mobile [aria-current='page'] {
  background: var(--ent-surface-selected);
  color: var(--ent-heading);
}

.enterprise-context-mobile [aria-current='page'] {
  box-shadow: inset 2px 0 0 0 var(--ent-indicator);
}

/* Die mobile Kontextnavigation markierte die aktuelle Seite, die stehende nicht:
   fuer sie gab es ueberhaupt keine aria-current-Regel. Auf den acht
   Dienstleistungsseiten war der aktuelle Eintrag damit von seinen Nachbarn nicht
   zu unterscheiden -- gefunden im GUI-Lauf vom 2026-07-27, der Zustandsfarbe und
   Zustandsgewicht gegen die Geschwister vergleicht. */
.enterprise-context-navigation__item[aria-current='page'] {
  box-shadow: inset 2px 0 0 0 var(--ent-indicator);
  background: var(--ent-surface-selected);
  color: var(--ent-heading);
  font-weight: 600;
}

.enterprise-context-navigation--services {
  --ent-context-accent: var(--ent-accent-display);
}

.enterprise-context-navigation--tools,
.enterprise-context-navigation--references {
  --ent-context-accent: var(--ent-ember);
}

.enterprise-context-navigation--company {
  --ent-context-accent: var(--ent-indicator);
}

.enterprise-context-navigation--legal {
  --ent-context-accent: var(--ent-border-strong);
}

.enterprise-context-navigation__family {
  margin: 0;
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.enterprise-context-navigation h2 {
  margin: var(--ent-space-2) 0 0;
  color: var(--ent-heading);
  font-size: var(--ent-text-card);
  font-weight: 700;
}

.enterprise-context-navigation ul {
  display: grid;
  margin: var(--ent-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.enterprise-context-navigation li + li {
  border-top: var(--ent-border-default) solid var(--ent-border);
}

.enterprise-context-navigation__item {
  min-height: var(--ent-touch);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ent-space-3);
  padding: var(--ent-space-2) var(--ent-space-3);
  color: var(--ent-text-secondary);
  text-decoration: none;
  transition: background-color var(--ent-duration-fast), color var(--ent-duration-fast);
}

.enterprise-context-navigation__item > span {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  font-weight: 600;
}

.enterprise-context-navigation__item small {
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
}

.enterprise-context-navigation a:hover {
  background: var(--ent-bg-subtle);
  color: var(--ent-heading);
}

.enterprise-context-navigation [aria-current='page'] {
  background: var(--ent-surface-selected);
  /* Der Ring aus Akzent und Rahmenfarbe lag je nach Familie zwischen 1,36:1
     (Recht) und 3,16:1 (Unternehmen). Ein Strich in der Familienfarbe ist
     eindeutig und kraeftig genug. */
  box-shadow: inset 2px 0 0 0 var(--ent-context-accent);
  color: var(--ent-heading);
}

.enterprise-content-card__label,
.enterprise-notice__label {
  color: var(--ent-accent-text);
  font-size: var(--ent-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.evidence-system {
  position: relative;
  padding: var(--ent-space-6);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  background: var(--ent-gradient-surface);
  box-shadow: var(--ent-shadow-hover);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base), box-shadow var(--ent-duration-base);
}

.enterprise-hero__grid > .evidence-system {
  width: 100%;
  max-width: calc(var(--ent-space-20) * 8);
}

.evidence-system--path::before {
  content: '';
  position: absolute;
  inset-block: var(--ent-space-6);
  inset-inline-start: calc(var(--ent-space-6) + (var(--ent-touch) / 2) - var(--ent-border-default));
  width: var(--ent-border-strong-width);
  background: var(--ent-border-strong);
}

.evidence-system__header {
  margin: 0 0 var(--ent-space-6);
  padding-left: calc(var(--ent-touch) + var(--ent-space-4));
}

.evidence-system__header span,
.evidence-system__header strong {
  display: block;
}

.evidence-system__header span {
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.evidence-system__header strong {
  margin-top: var(--ent-space-1);
  color: var(--ent-heading);
  font-size: var(--ent-text-card);
}

.evidence-flow {
  position: relative;
  display: grid;
  gap: var(--ent-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.evidence-flow li {
  position: relative;
  display: grid;
  grid-template-columns: var(--ent-touch) minmax(0, 1fr);
  gap: var(--ent-space-4);
  align-items: start;
}

.evidence-flow__index {
  width: var(--ent-touch);
  height: var(--ent-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--ent-touch);
  padding: 0;
  /* Die Ziffer stand auf --ent-logo-ink #231815, also fast schwarz, auf einer vollen
     Flaeche der Handlungsfarbe #96302b: gerechnet 2,27:1 und damit weit unter jeder
     Vorgabe. Weiss darauf liegt bei 7,62:1.

     Zur Zentrierung: der durchsichtige 2px-Rahmen stammt aus der Zeit der Verlaufskante
     und verkleinert die Inhaltsbox auf 40 px, waehrend Breite und Hoehe 44 px bleiben --
     zusammen mit line-height 1 sass die Ziffer dadurch sichtbar zu hoch. Rahmen raus,
     Zentrierung uebernimmt allein der Flexbereich. */
  border: 0;
  border-radius: var(--ent-radius-pill);
  background: var(--ent-action);
  color: var(--ent-on-brand);
  font-size: var(--ent-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-indent: 0;
  z-index: 1;
}

.evidence-flow__content {
  padding: var(--ent-space-2) var(--ent-space-3) var(--ent-space-3);
  border-bottom: var(--ent-border-default) solid var(--ent-border);
}

.evidence-flow li:last-child .evidence-flow__content {
  border-bottom: 0;
}

/* Diese beiden Regeln zielen auf die Textzeilen eines Schritts -- die Ziffernkachel ist
   aber ebenfalls ein <span> darin, und `.evidence-flow span` hat mit (0,1,1) die hoehere
   Spezifitaet als `.evidence-flow__index` mit (0,1,0). Sie hat der Kachel deshalb
   display:block und die gedaempfte Textfarbe aufgezwungen: die Ziffer sass oben links
   statt in der Mitte und stand mit 1,18:1 auf der Markenflaeche. Die Kachel wird hier
   ausdruecklich ausgenommen, statt ihre Spezifitaet hochzuschrauben. */
.evidence-flow strong,
.evidence-flow span:not(.evidence-flow__index) {
  display: block;
}

.evidence-flow strong {
  color: var(--ent-heading);
  font-size: var(--ent-text-body);
}

.evidence-flow span:not(.evidence-flow__index) {
  margin-top: var(--ent-space-1);
  color: var(--ent-muted);
  font-size: var(--ent-text-sm);
}

.enterprise-section {
  padding-block: var(--ent-space-16);
}

.enterprise-section[id] {
  scroll-margin-top: calc(var(--ent-header) + var(--ent-touch) + var(--ent-space-4));
}

.enterprise-section--compact {
  padding-block: var(--ent-space-8);
}

/* Der Ton traegt die Gliederung, nicht die Linie. Vorher zeigte das hier auf
   --ent-gradient-canvas, also auf den Seitengrund -- das Band war unsichtbar,
   und die Haarlinie musste die ganze Arbeit machen. Nur noch eine Oberkante:
   die Unterkante liefert der naechste Abschnitt, sonst standen zwischen
   Referenzband und Folgeabschnitt zwei Linien uebereinander. */
.enterprise-section--subtle {
  border-block-start: var(--ent-border-default) solid var(--ent-border);
  background: var(--ent-section-subtle);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base);
}

/* Die ISO-Zertifizierung als eigene Gruppe statt als Satz in einer Aufzaehlung.
   Plaketten, weil eine Zertifizierung eine Marke ist und kein Argument: sie wird gesehen
   und geglaubt oder nicht, sie wird nicht gelesen. */
.enterprise-trust__certs-label {
  margin: var(--ent-space-6) 0 var(--ent-space-3);
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enterprise-trust__certs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ent-space-2);
  margin: 0 0 var(--ent-space-6);
  padding: 0;
  list-style: none;
}

.enterprise-cert {
  padding: var(--ent-space-2) var(--ent-space-4);
  border: var(--ent-border-default) solid var(--ent-border-strong);
  border-radius: var(--ent-radius-pill);
  color: var(--ent-heading);
  font-size: var(--ent-text-sm);
  font-weight: 700;
  white-space: nowrap;
}

/* Auf dem Band tragen Beschriftung und Plaketten die Bandrollen. */
.enterprise-page .enterprise-section--band .enterprise-trust__certs-label {
  color: var(--ent-on-band-muted);
}

.enterprise-page .enterprise-section--band .enterprise-cert {
  border-color: var(--ent-on-band-border);
  background: var(--ent-on-band-surface);
  color: var(--ent-on-band-heading);
}

/* Zweispaltige Fassung des Evidence Path -- Entscheidung des Eigentuemers 2026-08-03,
   nach drei gerenderten Varianten.

   Die einreihige Fassung war 534 px hoch, also der zweitkleinste Inhaltsabschnitt der
   Seite, waehrend das Referenzband 1527 px belegt. Der Weg IST die benannte Methode des
   Hauses und laut analysis/14 das, was diese Seite von den Wettbewerbern trennt; als
   Streifen mit fuenf schmalen Spalten las er sich wie eine Bildunterschrift.

   Links die Aussage samt Handlung, rechts der Weg als Liste. Jeder Schritt bekommt eine
   ganze Zeile Fliesstext statt zweieinhalb umgebrochener Woerter, und die leere Flaeche
   unter der Ueberschrift traegt jetzt den Schalter.

   Unter 1024 px bleibt alles gestapelt: die Liste ist dort ohnehin einspaltig, und zwei
   Spalten auf einem Telefon waeren zwei zu enge Spalten. */
@media (min-width: 1024px) {
  .enterprise-evidence-split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--ent-space-20);
    align-items: start;
  }

  /* Die Ueberschrift traegt sonst 48 rem Hoechstbreite und einen Abstand nach unten, der
     im Raster zu einer Luecke zwischen den Spalten wird. */
  .enterprise-evidence-split .enterprise-section__heading {
    max-width: none;
    margin-bottom: 0;
  }

  /* In der zweispaltigen Fassung laeuft der Weg untereinander, nicht nebeneinander:
     die rechte Spalte ist schmaler als die volle Bahn, fuenf Spalten waeren dort
     Wortstapel. Die Trennlinie zwischen den Schritten ersetzt die Oberkante. */
  .enterprise-evidence-split .evidence-flow--spine {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .enterprise-evidence-split .evidence-flow--spine li {
    grid-template-columns: var(--ent-space-12) minmax(0, 1fr);
    gap: var(--ent-space-6);
    align-items: start;
    padding-block: var(--ent-space-6);
  }

  .enterprise-evidence-split .evidence-flow--spine li::before {
    display: none;
  }

  .enterprise-evidence-split .evidence-flow--spine li + li {
    border-block-start: var(--ent-border-default) solid var(--ent-on-band-border);
  }

  .enterprise-evidence-split .evidence-flow__content {
    padding: 0;
    border-bottom: 0;
  }

  .enterprise-evidence-split .evidence-flow__index {
    width: auto;
    height: auto;
    justify-content: flex-start;
    font-size: var(--ent-text-card);
    letter-spacing: 0.06em;
  }

  .enterprise-evidence-split .evidence-flow__content strong {
    font-size: var(--ent-text-card);
  }
}

/* Der Schalter in der linken Spalte bekommt Luft zur Ueberschrift. */
.enterprise-evidence-split .enterprise-section__heading .enterprise-button {
  margin-block-start: var(--ent-space-8);
}

/* Der Evidence Path als Rueckgrat, nicht als Randtafel.
   .evidence-flow bleibt unveraendert -- Kontakt- und Readiness-Seite benutzen es weiter
   in der schmalen Form. --spine ist die breite Fassung fuer den eigenen Abschnitt: ab
   1024 px stehen die fuenf Schritte nebeneinander, weil ein Weg von links nach rechts
   gelesen wird und untereinander nur eine Liste ist. Darunter bleibt es gestapelt. */
@media (min-width: 1024px) {
  .evidence-flow--spine {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--ent-space-6);
  }

  .evidence-flow--spine li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ent-space-3);
    /* Ohne das hier verrutscht der Weg. Die fuenf Schritte sind Rasterelemente und
       werden auf die Zeilenhoehe gestreckt; innen hat jeder drei automatische Zeilen,
       und uebrige Hoehe wird auf sie verteilt. Der Schritt mit dem laengsten Text hat am
       wenigsten zu verteilen, also standen Linie, Ziffer und Titel bei 04 hoeher als bei
       den anderen vier. Gefunden im Bildschirmabzug, nicht in einer Messung. */
    align-content: start;
  }

  /* Die Verbindungslinie. Sie laeuft durch alle fuenf Schritte und macht aus fuenf
     Kaesten einen Weg. Als Oberkante des Schrittes, nicht als eigenes Element: eine
     durchgehende Linie hinter Text waere im Aufklappzustand falsch positioniert. */
  .evidence-flow--spine li::before {
    content: '';
    display: block;
    height: var(--ent-border-default);
    background: var(--ent-on-band-border);
  }

  .evidence-flow--spine .evidence-flow__content {
    padding: 0;
    border-bottom: 0;
  }
}

/* Textrollen des Evidence Path auf dem Band. Ohne diese Regeln erben Ziffer, Titel und
   Fliesstext die Seitenfarben und stehen fast unsichtbar auf der Gegenflaeche. */
.enterprise-page .enterprise-section--band .evidence-flow__index {
  color: var(--ent-on-band-accent);
  background: transparent;
}

.enterprise-page .enterprise-section--band .evidence-flow__content strong {
  color: var(--ent-on-band-heading);
}

.enterprise-page .enterprise-section--band .evidence-flow__content span {
  color: var(--ent-on-band-text);
}

.enterprise-page .enterprise-section--band .evidence-flow__content {
  border-bottom-color: var(--ent-on-band-border);
}

.enterprise-page .enterprise-section--band .evidence-system__steps summary {
  color: var(--ent-on-band-heading);
}

/* Das Kennzahlenband. Steht direkt unter dem Hero, weil dort die Frage "warum euch"
   zuerst auftaucht. Nur Ober- und Unterkante, keine Flaeche: es soll den Hero nicht
   wiederholen, sondern ihn belegen. */
.enterprise-metrics {
  padding-block: var(--ent-space-8);
  border-block: var(--ent-border-default) solid var(--ent-border);
  transition: border-color var(--ent-duration-base);
}

.enterprise-metrics__label {
  margin: 0 0 var(--ent-space-6);
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enterprise-metrics__list {
  display: grid;
  gap: var(--ent-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.enterprise-metric {
  display: flex;
  flex-direction: column;
  gap: var(--ent-space-1);
}

/* Die Zahl traegt die Ueberschriftfarbe, nicht die Markenfarbe: drei grosse rote
   Zahlen nebeneinander lesen sich als Warnung, nicht als Beleg. */
.enterprise-metric__value {
  color: var(--ent-heading);
  /* Eigene Rampe statt --ent-text-section. Am Token haengend waere die Kennzahl beim
     Anheben auf 2.5rem AUCH auf dem Telefon von 30 auf 40 px gewachsen, wo "Leader"
     seine Spalte sprengt. Im Vorschaulauf gegen Staging gemessen, bevor es ausgeliefert
     wurde. */
  font-size: clamp(1.875rem, 1.6vw + 1.2rem, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.enterprise-metric__title {
  color: var(--ent-text);
  font-size: var(--ent-text-body);
  font-weight: 700;
}

.enterprise-metric__body {
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-sm);
  line-height: 1.55;
}

/* Die Quellenzeile ist der eigentliche Punkt. Eine Zahl ohne Herkunft ueberlebt keine
   Beschaffungspruefung; mit Herkunft braucht sie keine Zustimmung eines Kunden. */
.enterprise-metric__source {
  margin-top: var(--ent-space-2);
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
  line-height: 1.5;
}

/* Das Band -- Richtung C, Entscheidung des Eigentuemers 2026-08-03.
   --subtle weicht um eine Tonstufe ab; --band traegt die Gegenflaeche. Es ist bewusst ein
   eigener Modifier und kein Umbau von --subtle: so entscheidet jede Seite einzeln, welcher
   Abschnitt das Band bekommt, statt dass ein Tokenwechsel alle Abschnitte auf einmal
   umlegt. Keine Kante noetig -- der Tonsprung IST die Kante. */
.enterprise-section--band {
  background: var(--ent-band);
  color: var(--ent-on-band-text);
  transition: background-color var(--ent-duration-base), color var(--ent-duration-base);
}

/* Die Textrollen innerhalb des Bandes.
   Alle Bandregeln tragen den .enterprise-page-Praefix. Das ist kein Zierrat: die
   Komponentenregeln, die hier ueberschrieben werden mussen -- .enterprise-trust__facts li
   (Zeile ~2300), .enterprise-section__heading h2, .enterprise-outcome span -- haben
   dieselbe Spezifitaet 0,1,1 UND stehen weiter unten in der Datei. Ohne den Praefix
   gewinnt bei Gleichstand die spaetere Regel, und das Band waere wirkungslos gewesen.
   Mit Praefix liegt jede Bandregel bei 0,2,x und gewinnt unabhaengig von der Reihenfolge. */
.enterprise-page .enterprise-section--band .enterprise-eyebrow,
.enterprise-page .enterprise-section--band .enterprise-pathway__type {
  color: var(--ent-on-band-accent);
}

.enterprise-page .enterprise-section--band h2,
.enterprise-page .enterprise-section--band h3,
.enterprise-page .enterprise-section--band strong {
  color: var(--ent-on-band-heading);
}

.enterprise-page .enterprise-section--band p,
.enterprise-page .enterprise-section--band li,
.enterprise-page .enterprise-section--band .enterprise-split__intro {
  color: var(--ent-on-band-text);
}

/* Vererbung verliert IMMER gegen eine direkt gesetzte Deklaration, unabhaengig von der
   Spezifitaet. Die Bandregeln oben faerben p, li und strong; der eigentliche Fliesstext
   der nummerierten Folgen steht aber in <span>-Elementen, die ihre Farbe selbst setzen
   (.enterprise-deliverables span:not(.enterprise-deliverables__mark) und
   .enterprise-method span). Die haben nie geerbt.

   Gemessen im GUI-Lauf gegen Staging am 2026-08-03: rgb(82,68,64) auf rgb(42,33,29),
   also --ent-text-secondary auf --ent-on-band-surface, 1,69:1 gegen die geforderten
   4,5:1. Vierzig Befunde auf acht Routen, ausschliesslich im hellen Profil -- im dunklen
   faellt derselbe Fehler nicht auf, weil --ent-text-secondary dort hell ist und zufaellig
   Kontrast erzeugt. Genau deshalb reicht eine Messung in einem Profil nicht. */
.enterprise-page .enterprise-section--band .enterprise-deliverables span:not(.enterprise-deliverables__mark),
.enterprise-page .enterprise-section--band .enterprise-method span {
  color: var(--ent-on-band-text);
}

.enterprise-page .enterprise-section--band .enterprise-deliverables strong,
.enterprise-page .enterprise-section--band .enterprise-method strong {
  color: var(--ent-on-band-heading);
}

.enterprise-page .enterprise-section--band .enterprise-outcome span,
.enterprise-page .enterprise-section--band .enterprise-trust__facts li small {
  color: var(--ent-on-band-muted);
}

/* Der Punkt vor jeder Tatsache stand auf --ent-indicator, also Phoenix #b92d26. Auf dem
   hellen Band (#1c1512) sind das 1,9:1 -- derselbe Befund, den die Datei an anderer Stelle
   schon festhaelt: Phoenix NIEMALS auf dunklem Grund. Auf dem Band traegt Ember die Rolle. */
.enterprise-page .enterprise-section--band .enterprise-trust__facts li::before {
  background: var(--ent-on-band-accent);
}

/* Karten auf dem Band brauchen eine eigene Flaeche: die Kartenfarbe des Seitengrunds
   ist hier entweder unsichtbar (hell) oder zu hell (dunkel).

   .enterprise-trust gehoert ausdruecklich dazu. Es traegt selbst eine Kartenflaeche
   (--ent-gradient-surface, Zeile ~2132) plus die gemeinsame Kartenbehandlung weiter
   unten. Ohne diese Regel rendert der ganze Block als WEISSE Karte auf dem Band, und der
   fast weisse Bandtext steht darauf unsichtbar. Die Messung der berechneten Farben hat
   das NICHT gefunden -- sie prueft Textfarben, nicht die Flaeche des Containers
   darunter. Gefunden hat es erst der Bildschirmabzug aus dem chromedriver-Lauf. */
.enterprise-page .enterprise-section--band .enterprise-outcome,
.enterprise-page .enterprise-section--band .enterprise-pathway,
.enterprise-page .enterprise-section--band .enterprise-content-card,
.enterprise-page .enterprise-section--band .enterprise-trust,
.enterprise-page .enterprise-section--band .enterprise-deliverables li,
.enterprise-page .enterprise-section--band .enterprise-method li {
  background: var(--ent-on-band-surface);
  border-color: var(--ent-on-band-border);
  border-bottom-color: var(--ent-on-band-border);
}

/* Links und der Zweitschalter tragen im Band die Bandrollen, sonst verschwinden sie. */
.enterprise-page .enterprise-section--band .enterprise-text-link {
  color: var(--ent-on-band-accent);
}

.enterprise-page .enterprise-section--band .enterprise-button--secondary {
  border-color: var(--ent-on-band-border);
  background: var(--ent-on-band-surface);
  color: var(--ent-on-band-heading);
}

.enterprise-page .enterprise-section--band .enterprise-button--secondary:hover {
  border-color: var(--ent-on-band-accent);
  background: var(--ent-on-band-surface);
  color: var(--ent-on-band-heading);
}


.enterprise-section__heading {
  max-width: 48rem;
  margin-bottom: var(--ent-space-12);
}

.enterprise-section__heading h2,
.enterprise-split h2,
.enterprise-trust h2,
.enterprise-cta h2 {
  margin: 0;
  color: var(--ent-heading);
  font-size: var(--ent-text-section);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

.enterprise-section__heading p,
.enterprise-split__intro,
.enterprise-cta p {
  margin: var(--ent-space-4) 0 0;
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-card);
  line-height: 1.6;
}

.enterprise-notice {
  display: grid;
  gap: var(--ent-space-4);
  padding: var(--ent-space-6);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--ent-ember) 14%, transparent),
      transparent 42%
    ),
    var(--ent-gradient-surface);
  box-shadow: var(--ent-shadow-hover);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base);
}

.enterprise-notice__label {
  margin: 0;
}

.enterprise-notice h2 {
  margin: 0;
  color: var(--ent-heading);
  font-size: var(--ent-text-card);
  font-weight: 700;
}

.enterprise-notice div p {
  margin: var(--ent-space-2) 0 0;
  color: var(--ent-text-secondary);
}

.enterprise-content-grid {
  display: grid;
  gap: var(--ent-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--ent-space-24) * 3)), 1fr));
}

/* Ohne eigene Erhebung ruhte die Trennung zur Seite allein auf einer Linie. */
.enterprise-content-card {
  box-shadow: var(--ent-shadow-raised);
  min-height: 100%;
  padding: var(--ent-space-6);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  background: var(--ent-gradient-surface);
  /* Hier stand box-shadow: none -- zwei Zeilen unter dem box-shadow, das die
     Erhebung herstellen sollte, gleiche Regel, gleiche Spezifitaet, spaeter
     gewinnt. Inhaltskarten rendern dadurch voellig ohne Schatten und hingen an
     einer 1,48:1-Linie ueber einem 1,046:1-Grund. */
  transition: transform var(--ent-duration-fast), background-color var(--ent-duration-base), border-color var(--ent-duration-base), box-shadow var(--ent-duration-base);
}

.enterprise-content-card h3 {
  margin: 0;
  color: var(--ent-heading);
  font-size: var(--ent-text-card);
  line-height: 1.35;
  font-weight: 700;
}

.enterprise-content-card__label + h3 {
  margin-top: var(--ent-space-3);
}

.enterprise-content-card p {
  margin: var(--ent-space-3) 0 0;
  color: var(--ent-text-secondary);
  max-width: var(--ent-measure);
}

.enterprise-content-card ul,
.enterprise-pathway__points {
  display: grid;
  gap: var(--ent-space-2);
  margin: var(--ent-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.enterprise-content-card li,
.enterprise-pathway__points li {
  position: relative;
  padding-left: var(--ent-space-6);
  color: var(--ent-text-secondary);
}

.enterprise-content-card li::before,
.enterprise-pathway__points li::before {
  content: '';
  position: absolute;
  top: var(--ent-space-2);
  left: var(--ent-space-1);
  width: var(--ent-space-2);
  height: var(--ent-space-2);
  border-radius: var(--ent-radius-pill);
  /* Ember liegt auf --ent-bg-subtle bei 2,74:1 und damit unter der
     3:1-Vorgabe; Phoenix erreicht dort 4,85:1. */
  background: var(--ent-indicator);
}

.enterprise-content-section__action {
  margin-top: var(--ent-space-8);
}

.enterprise-content-card__link {
  display: inline-flex;
  margin-top: var(--ent-space-6);
}

.enterprise-contact-direct {
  margin-top: var(--ent-space-6);
}

.enterprise-contact-heading {
  margin-bottom: var(--ent-space-8);
}

.enterprise-contact-feedback,
.enterprise-contact-form {
  padding: var(--ent-space-6);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  background: var(--ent-gradient-surface);
  color: var(--ent-text);
  box-shadow: var(--ent-shadow-hover);
}

.enterprise-contact-feedback {
  margin-bottom: var(--ent-space-6);
}

.enterprise-contact-feedback--error {
  border-width: var(--ent-border-strong-width);
  border-color: var(--ent-muted);
}

.enterprise-contact-feedback h3,
.enterprise-contact-feedback p {
  margin: 0;
}

.enterprise-contact-feedback h3 {
  color: var(--ent-heading);
  font-size: var(--ent-text-card);
  font-weight: 700;
}

.enterprise-contact-feedback p,
.enterprise-contact-feedback ul {
  color: var(--ent-text-secondary);
}

.enterprise-contact-feedback p {
  margin-top: var(--ent-space-2);
}

.enterprise-contact-feedback ul {
  margin: var(--ent-space-3) 0 0;
  padding-inline-start: var(--ent-space-6);
}

.enterprise-contact-required {
  margin: 0;
  color: var(--ent-muted);
  font-size: var(--ent-text-sm);
}

.enterprise-contact-form__grid {
  display: grid;
  gap: var(--ent-space-6);
  margin-top: var(--ent-space-6);
}

.enterprise-contact-field {
  margin-top: var(--ent-space-6);
}

.enterprise-contact-form__grid .enterprise-contact-field {
  margin-top: 0;
}

.enterprise-contact-field > label:not(.enterprise-contact-consent) {
  display: block;
  margin-bottom: var(--ent-space-2);
  color: var(--ent-heading);
  font-weight: 600;
}

.enterprise-contact-field :where(input:not([type='checkbox']), select, textarea) {
  width: 100%;
  min-height: var(--ent-touch);
  padding: var(--ent-space-3);
  border: var(--ent-border-default) solid var(--ent-muted);
  border-radius: var(--ent-radius-md);
  background: var(--ent-surface);
  color: var(--ent-text);
  font: inherit;
}

.enterprise-contact-field textarea {
  resize: vertical;
}

.enterprise-contact-field [aria-invalid='true'] {
  border-width: var(--ent-border-strong-width);
  border-color: var(--ent-heading);
}

.enterprise-contact-field__error {
  margin: var(--ent-space-2) 0 0;
  color: var(--ent-text);
  font-size: var(--ent-text-sm);
  font-weight: 600;
}

.enterprise-contact-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--ent-space-3);
  min-height: var(--ent-touch);
}

.enterprise-contact-consent input {
  flex: 0 0 auto;
  margin-top: var(--ent-space-1);
}

.enterprise-contact-submit {
  width: 100%;
  margin-top: var(--ent-space-8);
}

.enterprise-outcomes {
  display: grid;
  gap: var(--ent-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.enterprise-outcome {
  min-width: 0;
  padding: var(--ent-space-6);
  border: var(--ent-border-default) solid transparent;
  border-radius: var(--ent-radius-lg);
  /* Ruheflaeche, nicht Hover-Ton. Das Interaktions-Token zeigt seit dem
     2026-07-27 auf --ent-surface-hover; als Ruhewert eingesetzt liess es die
     Karten dauerhaft im Hover-Zustand liegen, und das Ueberfahren sagte nichts
     mehr. Im GUI-Lauf sichtbar geworden. */
  /* W-B08: Diese Karte trug var(--ent-surface) als Fuellung und stand auf Seiten, deren
     Grund ebenfalls --ent-surface ist -- gemessen rgb(247,242,240) auf rgb(247,242,240),
     also gar keine Flaeche. Genau der Befund, den der Umbau beheben sollte. Sie steht
     jetzt eine Stufe ueber ihrem Untergrund, unabhaengig davon, worauf sie liegt. */
  background: var(--ent-surface);
  border-color: var(--ent-border);
  border-bottom-color: var(--ent-border-shade);
  box-shadow: var(--ent-shadow-raised);
  transition: transform var(--ent-duration-fast), box-shadow var(--ent-duration-base);
}

/* Liegt sie auf einer weissen Flaeche, weicht sie nach unten aus statt zu verschwinden. */
.enterprise-section--subtle .enterprise-outcome,
.enterprise-outcome:where(:not(.enterprise-section--subtle *)) {
  background: var(--ent-surface);
}

:root[data-theme='light'] .enterprise-outcome,
:root[data-theme='default'] .enterprise-outcome,
:root:not([data-theme]) .enterprise-outcome {
  background: var(--ent-surface);
}

.enterprise-section:not(.enterprise-section--subtle) .enterprise-outcome {
  background: var(--ent-surface-sunken);
}

.enterprise-outcome span {
  display: block;
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enterprise-outcome h3 {
  margin: var(--ent-space-3) 0 0;
  color: var(--ent-heading);
  font-size: var(--ent-text-card);
  line-height: 1.35;
  overflow-wrap: break-word;
  hyphens: auto;
  font-weight: 700;
}

.enterprise-outcome p {
  margin: var(--ent-space-3) 0 0;
  color: var(--ent-text-secondary);
  max-width: var(--ent-measure);
}

.enterprise-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ent-space-12);
}

.enterprise-split > * {
  min-width: 0;
}

.enterprise-split__aside {
  align-self: start;
}

.enterprise-split__aside .enterprise-button {
  margin-top: var(--ent-space-6);
}

.enterprise-deliverables {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ent-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.enterprise-deliverables li {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--ent-touch) minmax(0, 1fr);
  gap: var(--ent-space-4);
  padding: var(--ent-space-6);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  background: var(--ent-gradient-surface);
  transition: transform var(--ent-duration-fast), background-color var(--ent-duration-base), border-color var(--ent-duration-base), box-shadow var(--ent-duration-base);
}

.enterprise-deliverables li > div {
  min-width: 0;
}

.enterprise-deliverables__mark {
  width: var(--ent-touch);
  height: var(--ent-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  padding: 0;
  /* Die Ziffer stand auf --ent-logo-ink #231815, also fast schwarz, auf einer vollen
     Flaeche der Handlungsfarbe #96302b: gerechnet 2,27:1 und damit weit unter jeder
     Vorgabe. Weiss darauf liegt bei 7,62:1.

     Zur Zentrierung: der durchsichtige 2px-Rahmen stammt aus der Zeit der Verlaufskante
     und verkleinert die Inhaltsbox auf 40 px, waehrend Breite und Hoehe 44 px bleiben --
     zusammen mit line-height 1 sass die Ziffer dadurch sichtbar zu hoch. Rahmen raus,
     Zentrierung uebernimmt allein der Flexbereich. */
  border: 0;
  border-radius: var(--ent-radius-pill);
  background: var(--ent-action);
  color: var(--ent-on-brand);
  font-size: var(--ent-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-indent: 0;
}

/* Dieselbe Falle wie beim Evidence Path: die Ziffernkachel ist ein <span> in derselben
   Liste, und `.enterprise-deliverables span` ist spezifischer als
   `.enterprise-deliverables__mark`. Ausdruecklich ausnehmen. */
.enterprise-deliverables strong,
.enterprise-deliverables span:not(.enterprise-deliverables__mark) {
  display: block;
  overflow-wrap: break-word;
  hyphens: auto;
}

.enterprise-deliverables strong {
  color: var(--ent-heading);
  font-size: var(--ent-text-card);
}

.enterprise-deliverables span:not(.enterprise-deliverables__mark) {
  margin-top: var(--ent-space-2);
  color: var(--ent-text-secondary);
}

.enterprise-deliverables--content .enterprise-text-link {
  display: inline-flex;
  margin-top: var(--ent-space-4);
}

.enterprise-pathways {
  display: grid;
  gap: var(--ent-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.enterprise-pathway {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--ent-space-6);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  background: var(--ent-gradient-surface);
  transition: transform var(--ent-duration-fast), box-shadow var(--ent-duration-base), background-color var(--ent-duration-base), border-color var(--ent-duration-base);
}

.enterprise-pathway:hover {
  transform: var(--ent-hover-lift);
  box-shadow: var(--ent-shadow-hover);
}

.enterprise-pathway__type {
  color: var(--ent-accent-text);
  font-size: var(--ent-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enterprise-pathway h3 {
  margin: var(--ent-space-4) 0 0;
  color: var(--ent-heading);
  font-size: var(--ent-text-card);
  line-height: 1.35;
  font-weight: 700;
}

.enterprise-pathway p {
  margin: var(--ent-space-3) 0 var(--ent-space-6);
  color: var(--ent-text-secondary);
  max-width: var(--ent-measure);
}

.enterprise-text-link {
  min-height: var(--ent-touch);
  display: inline-flex;
  align-items: center;
  gap: var(--ent-space-2);
  margin-top: auto;
  color: var(--ent-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  font-weight: 700;
  text-underline-offset: var(--ent-space-1);
}

.enterprise-text-link::after {
  content: '→';
  line-height: 1;
  transition: transform var(--ent-duration-fast);
}

.enterprise-text-link:hover::after {
  transform: translateX(var(--ent-space-1));
}

.enterprise-method {
  display: grid;
  gap: var(--ent-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: enterprise-method;
}

.enterprise-method li {
  counter-increment: enterprise-method;
  padding: var(--ent-space-6);
  border: var(--ent-border-default) solid var(--ent-border);
  border-top: var(--ent-border-accent) solid var(--ent-border-strong);
  border-radius: var(--ent-radius-lg);
  background: var(--ent-gradient-surface);
  transition: transform var(--ent-duration-fast), background-color var(--ent-duration-base), border-color var(--ent-duration-base), box-shadow var(--ent-duration-base);
}

.enterprise-method li::before {
  content: '0' counter(enterprise-method);
  width: var(--ent-touch);
  height: var(--ent-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ent-space-3);
  padding: 0;
  /* Die Ziffer stand auf --ent-logo-ink #231815, also fast schwarz, auf einer vollen
     Flaeche der Handlungsfarbe #96302b: gerechnet 2,27:1 und damit weit unter jeder
     Vorgabe. Weiss darauf liegt bei 7,62:1.

     Zur Zentrierung: der durchsichtige 2px-Rahmen stammt aus der Zeit der Verlaufskante
     und verkleinert die Inhaltsbox auf 40 px, waehrend Breite und Hoehe 44 px bleiben --
     zusammen mit line-height 1 sass die Ziffer dadurch sichtbar zu hoch. Rahmen raus,
     Zentrierung uebernimmt allein der Flexbereich. */
  border: 0;
  border-radius: var(--ent-radius-pill);
  background: var(--ent-action);
  color: var(--ent-on-brand);
  font-size: var(--ent-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-indent: 0;
}

.enterprise-method strong {
  display: block;
  color: var(--ent-heading);
  font-size: var(--ent-text-card);
}

.enterprise-method span {
  display: block;
  margin-top: var(--ent-space-2);
  color: var(--ent-text-secondary);
}

.enterprise-trust {
  display: grid;
  gap: var(--ent-space-8);
  align-items: center;
  padding: var(--ent-space-8);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  background: var(--ent-gradient-surface);
  box-shadow: var(--ent-shadow-hover);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base);
}

.enterprise-reference-section {
  overflow: hidden;
  border-bottom: var(--ent-border-default) solid var(--ent-border);
  background: var(--ent-section-subtle);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base);
}

.enterprise-reference-section__header {
  /* Traegt seit 2026-08-03 nur noch die Ueberschrift. Der Schalter fuer das
     Laufband ist heraus und steht bei dem Band, das er anhaelt. Die
     Flex-Verteilung darf bleiben, sie kostet bei einem Kind nichts und haelt
     die Zeile offen, falls je ein zweites Element danebengehoert. */
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--ent-space-4);
  margin-bottom: var(--ent-space-8);
}

/* Die Zeile mit dem Schalter fuer das Laufband.

   Naehe entscheidet die Zuordnung. Im Kopfbereich sass der Schalter buendig mit
   der Unterkante des Ueberschriftenblocks -- Abstand null nach oben, 32 px nach
   unten zum Band -- und bei 1440 px begann er 265 px rechts vom Ende des
   Ueberschriftentextes. Damit gehoerte er optisch zur Ueberschrift und stand
   ansonsten allein im Weissraum.

   Hier ist der Abstand nach unten ein Achtel des Abstands nach oben. Das ist die
   ganze Aussage: dieser Schalter gehoert zu dem, was direkt darunter laeuft. */
.enterprise-reference-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--ent-space-2);
}

/* Ohne Laufband kein Schalter: unterhalb der Umbruchschwelle und unter
   prefers-reduced-motion steht das Band still und der Knopf traegt das
   hidden-Attribut. Die Zeile darf dann auch keinen Abstand mehr stellen, sonst
   klafft ueber dem Logoraster eine Luecke, die niemand erklaeren kann. */
.enterprise-reference-controls:has(> [hidden]) {
  display: none;
}

.enterprise-reference-section__header .enterprise-section__heading {
  margin-bottom: 0;
}

.enterprise-reference-carousel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Das Band laeuft breiter als sein Behaelter; geschnitten wird hier, damit
     die Seite selbst keinen waagrechten Bildlauf bekommt. */
  /* Hart geschnitten, nicht abgeblendet. Das ist der Kern der Sache.

     Hier stand lange eine Maske (mask-image nach transparent), die die
     aeusserste Kachel halbdurchsichtig machte. Eine Kachel traegt eine eigene
     Flaeche und einen eigenen Rahmen; halbdurchsichtig wird daraus kein
     Verschwinden, sondern ein Grauschleier. Gemessen aus Bildabzuegen, Kachel
     gegen Nachbarkachel: helles Profil 3 bis 4 RGB-Stufen (unsichtbar), dunkles
     Profil 38 bis 50 Stufen -- schmutziggraue Rechtecke an beiden Enden.

     Der erste Reparaturversuch am 2026-08-03 tauschte die Maske gegen eine
     Ueberblendung in der Abschnittsfarbe. Das war wirkungslos, und zwar
     rechnerisch zwingend: eine Kachel nach transparent auszublenden und die
     Seitenfarbe ueber die Kachel zu legen ergeben dieselbe Mischung. Nachher
     gemessen 46 statt 51 Stufen -- der Abzug sah unveraendert aus, weil er es
     war. Der Fehler lag nie an der Technik der Abblendung, sondern daran, DASS
     abgeblendet wurde.

     Eine halb sichtbare Kachel bei voller Deckkraft liest sich als "hier geht
     es weiter". Eine halb durchsichtige liest sich als kaputt. Der frueher hier
     notierte Einwand, eine angeschnittene Karte wirke wie ein Fehler, hat sich
     an den Abzuegen nicht bestaetigt; der Schleier tat es. */
  overflow: hidden;
}

.enterprise-reference-carousel__track {
  display: flex;
  width: max-content;
  animation: none;
}

/* W-B01: Die Animation laeuft nur, wenn JavaScript sie auch anhalten kann. Zuvor war sie
   reines CSS und lief unbedingt, waehrend der Pausenschalter als hidden im Markup lag und
   ausschliesslich von JavaScript freigestellt wurde. Ohne JavaScript bewegte sich das Band
   also unbegrenzt und es gab KEINE Moeglichkeit, es anzuhalten -- WCAG 2.2.2 Level A.
   Das Attribut setzt enterprise.js erst, nachdem der Schalter sichtbar ist. */
:root[data-marquee-ready] .enterprise-reference-carousel__track {
  animation: ent-marquee 60s linear infinite;
}

/* Anhalten, sobald jemand hinsieht: unter dem Zeiger und unter dem
   Tastaturfokus steht das Band still, damit das Logo, das gerade gelesen wird,
   sich nicht wegbewegt. */
.enterprise-reference-carousel:hover .enterprise-reference-carousel__track,
.enterprise-reference-carousel:focus-within .enterprise-reference-carousel__track,
.enterprise-reference-carousel[data-marquee-paused] .enterprise-reference-carousel__track {
  animation-play-state: paused;
}

@keyframes ent-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Die frueheren .enterprise-js-Ueberschreibungen sind am 2026-07-27 entfallen:
   sie kehrten das Ergebnis um. Ohne JavaScript lieferte diese Basisregel ein
   gleichmaessiges Raster, mit JavaScript ein Flex-Umbruch mit fester Breite, der
   bei 1216 px auf 7+3 auslief -- die bessere Fassung bekam also niemand. */
.enterprise-reference-carousel__group {
  display: flex;
  flex: 0 0 auto;
  gap: var(--ent-space-4);
  margin: 0;
  padding: 0 var(--ent-space-2) 0 0;
  list-style: none;
}

.enterprise-reference-carousel__group li {
  flex: 0 0 calc(var(--ent-space-20) * 2);
}

.enterprise-reference-carousel__group li {
  min-height: var(--ent-space-20);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ent-space-4);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-md);
  /* Der Verlauf endete rechnerisch 1,005:1 neben seinem
     eigenen Anfang -- physikalisch nicht wahrnehmbar. */
  background: var(--ent-surface);
  transition: border-color var(--ent-duration-base), box-shadow var(--ent-duration-base);
}

.enterprise-reference-carousel__group img {
  width: 100%;
  max-width: calc(var(--ent-space-20) * 2);
  height: var(--ent-space-12);
  object-fit: contain;
}

/* Frueher ein endlos vorbeiziehendes Logo-Band. Dauerbewegung im Randbereich
   zieht Aufmerksamkeit von dem ab, was gelesen werden soll, und man sieht immer
   nur einen Ausschnitt der Referenzen. Alle Logos gleichzeitig zu zeigen ist das
   staerkere Argument -- die Menge ist die Aussage. Das Markup bleibt unveraendert;
   die gespiegelte Gruppe fuer den nahtlosen Umlauf wird nicht mehr gebraucht. */
.enterprise-trust__facts {
  display: grid;
  gap: var(--ent-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.enterprise-trust__facts li {
  display: flex;
  gap: var(--ent-space-3);
  align-items: flex-start;
  color: var(--ent-text-secondary);
  max-width: var(--ent-measure);
}

.enterprise-trust__facts li::before {
  content: '';
  width: var(--ent-space-2);
  height: var(--ent-space-2);
  flex: 0 0 auto;
  margin-top: var(--ent-space-2);
  border-radius: var(--ent-radius-pill);
  /* Vorher ein Vierfarbverlauf mit background-size: 180% auf 8x8 px. */
  background: var(--ent-indicator);
}

.enterprise-trust__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ent-space-3);
}

.enterprise-cta {
  text-align: center;
  padding: var(--ent-space-12);
  border: var(--ent-border-default) solid transparent;
  border-radius: var(--ent-radius-lg);
  background:
    var(--ent-gradient-surface) padding-box,
    var(--ent-gradient-action) border-box;
  color: var(--ent-text);
  box-shadow: var(--ent-shadow-hover);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base), box-shadow var(--ent-duration-base), color var(--ent-duration-base);
}

.enterprise-cta h2 {
  color: var(--ent-heading);
}

.enterprise-cta p {
  max-width: 42rem;
  margin-inline: auto;
  color: var(--ent-text-secondary);
}

.enterprise-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ent-space-3);
  margin-top: var(--ent-space-8);
}

/* Vorher 9 rem gleichfarbiger Leerraum vor einer 1px-Linie, in einem Footer,
   der ebenfalls die Seitenfarbe trug: die Seite franste aus statt zu enden.
   Die Abschnittspolsterung ist bereits der Abstand. */
.enterprise-footer {
  border-top: var(--ent-border-default) solid var(--ent-border);
  background: var(--ent-section-subtle);
  color: var(--ent-text-secondary);
  transition: background-color var(--ent-duration-base), border-color var(--ent-duration-base), color var(--ent-duration-base);
}

.enterprise-footer__grid {
  display: grid;
  gap: var(--ent-space-8);
  padding-block: var(--ent-space-12);
}

.enterprise-footer__brand a {
  display: inline-grid;
  align-items: center;
}

.enterprise-footer__logo {
  grid-area: 1 / 1;
  display: block;
  width: auto;
  height: var(--ent-header);
  opacity: 0;
  transition: opacity var(--ent-duration-base);
}

.enterprise-footer__brand p {
  max-width: 42rem;
  margin: var(--ent-space-4) 0 0;
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-sm);
}

/* Keep theme visibility after the footer's shared opacity declaration. */
.enterprise-footer__logo.enterprise-logo--light {
  opacity: 1;
}

:root[data-theme='default'] .enterprise-footer__logo.enterprise-logo--light,
:root[data-theme='dark'] .enterprise-footer__logo.enterprise-logo--light,
:root[data-theme='dark'] .enterprise-footer__logo.enterprise-logo--default {
  opacity: 0;
}

:root[data-theme='default'] .enterprise-footer__logo.enterprise-logo--default,
:root[data-theme='dark'] .enterprise-footer__logo.enterprise-logo--dark {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .enterprise-footer__logo.enterprise-logo--light,
  :root:not([data-theme]) .enterprise-footer__logo.enterprise-logo--default {
    opacity: 0;
  }

  :root:not([data-theme]) .enterprise-footer__logo.enterprise-logo--dark {
    opacity: 1;
  }
}

.enterprise-footer h2 {
  margin: 0 0 var(--ent-space-3);
  color: var(--ent-heading);
  font-size: var(--ent-text-body);
  font-weight: 700;
}

.enterprise-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.enterprise-footer li + li {
  margin-top: var(--ent-space-2);
}

/* Footer-Links trugen dieselbe Farbe, Groesse und Dekoration wie der
   Footer-Fliesstext und waren bis zum Ueberfahren nicht als Link erkennbar. Die
   Unterstreichung ist zurueckhaltend gedeckelt, damit die Fusszeile ruhig
   bleibt. */
.enterprise-footer a {
  min-height: var(--ent-touch);
  display: inline-flex;
  align-items: center;
  color: var(--ent-text-secondary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  font-size: var(--ent-text-sm);
  text-underline-offset: var(--ent-space-1);
}

.enterprise-footer a:hover {
  color: var(--ent-heading);
}

.enterprise-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--ent-space-3);
  padding-block: var(--ent-space-6);
  border-top: var(--ent-border-default) solid var(--ent-border);
  font-size: var(--ent-text-sm);
}

.enterprise-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ent-space-4);
}

/* Testing Readiness Check (WEB-V3-02): the component was rebuilt off phoenix.css
   onto readiness-* classes. Its rules now live together near the end of this file,
   next to where the old .assessment-token-bridge used to sit. Three rules that
   still read .assessment-* stayed there rather than moving here, because a test
   file outside this task's owned files pins their exact text; see the comment at
   that block for which ones and why. */

@media (min-width: 768px) {
  .enterprise-contact-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enterprise-trust {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .enterprise-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .enterprise-notice {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1.6fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .enterprise-desktop-nav {
    display: flex;
  }

  .enterprise-mobile-navigation {
    display: none;
  }

  .enterprise-header .enterprise-button {
    display: inline-flex;
  }

  .enterprise-hero {
    padding-block: var(--ent-space-24);
  }

  .enterprise-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--ent-space-16);
  }

  .enterprise-content-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: var(--ent-space-16);
  }

  .enterprise-context-navigation {
    display: block;
  }

  .enterprise-context-mobile {
    display: none;
  }

  .enterprise-section {
    padding-block: var(--ent-space-20);
  }


  .enterprise-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--ent-space-16);
  }
}

@media (max-width: 639px) {
  .enterprise-hero {
    padding-block: var(--ent-space-16);
  }

  .enterprise-hero__grid {
    gap: var(--ent-space-8);
  }

  .enterprise-eyebrow {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: var(--ent-space-8) minmax(0, 1fr);
    overflow-wrap: break-word;
  hyphens: auto;
  }

  .enterprise-eyebrow::before {
    width: var(--ent-space-8);
  }

  .enterprise-header__row {
    gap: var(--ent-space-2);
  }

  .enterprise-brand__logo {
    height: var(--ent-touch);
  }

  .enterprise-language a {
    min-width: var(--ent-space-6);
    padding-inline: var(--ent-space-1);
  }

  .enterprise-js .enterprise-theme select {
    width: var(--ent-space-24);
    padding-inline: var(--ent-space-2);
  }

  .enterprise-hero__actions .enterprise-button,
  .enterprise-cta__actions .enterprise-button,
  .enterprise-trust__actions .enterprise-button {
    width: 100%;
  }

  .enterprise-cta {
    padding: var(--ent-space-8) var(--ent-space-6);
  }

  .enterprise-reference-section__header {
    align-items: stretch;
  }

  .enterprise-footer__logo {
    height: var(--ent-space-12);
  }

  .evidence-system {
    padding: var(--ent-space-4);
  }

  .evidence-system--path::before {
    inset-block: var(--ent-space-4);
    inset-inline-start: calc(var(--ent-space-4) + (var(--ent-touch) / 2) - var(--ent-border-default));
  }

  .evidence-flow li {
    gap: var(--ent-space-3);
  }

  .evidence-flow__content {
    padding-inline: 0;
  }
}

@media (min-width: 1920px) {
  .enterprise-container {
    max-width: var(--ent-container-wide);
  }
}

@media (min-width: 2560px) {
  .enterprise-container {
    max-width: var(--ent-container-ultrawide);
  }
}

@media (hover: hover) and (pointer: fine) {
  .enterprise-content-card:has(a):hover,
  .enterprise-content-card:has(a):focus-within,
  .enterprise-deliverables li:has(a):hover,
  .enterprise-deliverables li:has(a):focus-within,
  .enterprise-method li:hover,
  .enterprise-pathway:hover,
  .enterprise-pathway:focus-within {
    border-color: color-mix(in srgb, var(--ent-ember) 62%, var(--ent-border));
    box-shadow: var(--ent-shadow-hover);
    transform: var(--ent-hover-lift);
  }

  .enterprise-outcome:hover,
  .enterprise-outcome:focus-within {
    box-shadow: var(--ent-shadow-hover);
    transform: var(--ent-hover-lift);
  }
}

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

  .enterprise-button:hover,
  .enterprise-content-card:hover,
  .enterprise-deliverables li:hover,
  .enterprise-method li:hover,
  .enterprise-pathway:hover,
  .enterprise-outcome:hover,
  .enterprise-text-link:hover::after {
    transform: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms;
  }

}

@media (forced-colors: active) {
  .enterprise-eyebrow::before,
  .enterprise-trust__facts li::before,
  .enterprise-content-card li::before {
    background: CanvasText;
  }

  .evidence-flow__index,
  .enterprise-deliverables__mark,
  .enterprise-method li::before {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .enterprise-reference-carousel__group li,
  .enterprise-button,
  .enterprise-button {
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }
}

@media print {
  .enterprise-page,
  .enterprise-header,
  .enterprise-footer,
  .enterprise-hero__actions,
  .enterprise-cta,
  .enterprise-page,
  .enterprise-hero,
  .enterprise-section,
  .enterprise-section--subtle,
  /* Das Band druckt weiss wie jeder andere Abschnitt: eine vollflaechig dunkle Seite
     kostet Toner und wird auf Papier nicht besser lesbar. */
  .enterprise-section--band,
  .enterprise-pathway,
  .enterprise-deliverables li,
  .enterprise-trust {
    background: #ffffff;
    color: #111827;
  }

  .enterprise-reference-section,
  .enterprise-reference-carousel {
    overflow: visible;
  }

  /* Die Bandregeln oben tragen .enterprise-page und liegen damit bei 0,2,x -- sie
     schlagen die 0,1,0-Regel dieses Blocks. Ohne diese Rueckholung druckt der
     Bandabschnitt fast weissen Text auf weissem Papier, also nichts. */
  .enterprise-page .enterprise-section--band,
  .enterprise-page .enterprise-section--band h2,
  .enterprise-page .enterprise-section--band h3,
  .enterprise-page .enterprise-section--band p,
  .enterprise-page .enterprise-section--band li,
  .enterprise-page .enterprise-section--band strong,
  .enterprise-page .enterprise-section--band .enterprise-split__intro,
  .enterprise-page .enterprise-section--band .enterprise-outcome span {
    background: #ffffff;
    color: #111827;
  }

  .enterprise-page .enterprise-section--band .enterprise-eyebrow,
  .enterprise-page .enterprise-section--band .enterprise-text-link,
  .enterprise-page .enterprise-section--band .enterprise-pathway__type {
    color: #111827;
  }

  .enterprise-page .enterprise-section--band .enterprise-trust__facts li::before {
    background: #111827;
  }
}

/* Zweitonige Haarlinie und eine echte Ruhestufe fuer alle Kartenflaechen.
   Die Datei kannte bisher sieben verschiedene Kartenbehandlungen -- mal Kante
   ohne Schatten, mal Schatten ohne Kante, mal eine Verlaufskante. Ohne eine
   gemeinsame Sprache fuer "Flaeche" gibt es auch keine fuer "auf einer Flaeche",
   und genau deshalb hatte die flache Fassung keinen Rhythmus. */
.enterprise-content-card,
.enterprise-pathway,
.enterprise-outcome,
.enterprise-deliverables li,
.enterprise-method li,
.enterprise-trust {
  border-bottom-color: var(--ent-border-shade);
  box-shadow: var(--ent-shadow-raised);
}

/* Zwischenueberschriften bekommen ihre eigene Stufe, statt sich die der
   Kartentitel zu teilen. */
.enterprise-content-card h3,
.enterprise-outcome h3,
.enterprise-pathway h3 {
  font-size: var(--ent-text-card);
}

.enterprise-content-section h3,
.enterprise-section__heading + h3 {
  font-size: var(--ent-text-subhead);
}

/* Einleitungsabsaetze liefen auf Kartentitelgroesse ueber 48rem, also rund 85
   bis 95 Zeichen je Zeile. */
.enterprise-section__heading p {
  max-width: var(--ent-measure);
  font-size: var(--ent-text-lead);
}

/* Der Pausenschalter ist im Markup verborgen und wird von enterprise.js
   eingeblendet: ohne JavaScript laeuft die Bewegung zwar, aber ein Schalter,
   der sie dann nicht anhalten koennte, verspraeche eine Kontrolle, die es nicht
   gibt. */
.enterprise-marquee-toggle {
  min-height: var(--ent-touch);
  align-self: end;
  padding: var(--ent-space-2) var(--ent-space-4);
  border: var(--ent-border-default) solid var(--ent-border-strong);
  border-radius: var(--ent-radius-pill);
  background: var(--ent-surface);
  color: var(--ent-text-secondary);
  font-family: inherit;
  font-size: var(--ent-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--ent-duration-fast), color var(--ent-duration-fast),
              border-color var(--ent-duration-fast);
}

.enterprise-marquee-toggle:hover {
  background: var(--ent-surface-hover);
  color: var(--ent-heading);
}

/* Die Partner tragen seit 2026-08-03 einen eigenen Abschnitt, keinen abgesetzten
   Block am Fuss der Kundenreferenzen. Damit entfallen die beiden Regeln, die diese
   Absetzung hergestellt haben:

     .enterprise-partner-band        Aussenabstand, Innenabstand, Trennlinie oben
     .enterprise-partner-band__title kleine Grossbuchstaben-Ueberschrift fuer ein h3

   Der Abstand kommt jetzt vom Abschnittspolster, die Trennung von der Unterkante
   des vorigen Abschnitts, und die Ueberschrift ist ein h2 im normalen
   Abschnittskopf. Nichts davon muss hier noch einmal gesagt werden. */

/* Eine Aufzaehlung, keine zweite Galerie.

   Hier stand bis 2026-08-03 dasselbe Kachelraster wie oben bei den Kunden -- der
   Kommentar an dieser Stelle sagte es woertlich: "wie die Kundenkacheln, nur etwas
   grosszuegiger". Damit trug EIN Abschnitt zwei Logoreihen mit demselben Mittel
   untereinander, und die zweite war zusaetzlich uneinheitlich, weil nur fuer drei
   der fuenf Partner eine Bilddatei vorliegt.

   Jetzt tragen Namen die Reihe. Sie flieszt in einer Zeile statt in gleich breiten
   Spalten, hat keine eigene Flaeche und keinen Rahmen, und unterscheidet sich damit
   auf den ersten Blick von den Kundenkacheln darueber. Was sie behauptet, ist auch
   etwas anderes: die Kunden sind der Beleg, die Partner sind die Nachbarschaft. */
.enterprise-partner-band__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ent-space-2) var(--ent-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.enterprise-partner-band__list a {
  /* Die Flaeche bleibt greifbar, auch ohne Kachel: a11y-touch-target verlangt auf
     schmalen Schirmen 40 px Hoehe, und ein Textlink faellt sonst darunter. */
  min-height: var(--ent-touch);
  display: inline-flex;
  align-items: center;
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-card);
  font-weight: 600;
  text-decoration: none;
  /* Der Unterstrich sitzt tief genug, dass er die Unterlaengen nicht schneidet. */
  text-underline-offset: 0.25em;
  transition: color var(--ent-duration-base);
}

.enterprise-partner-band__list a:hover,
.enterprise-partner-band__list a:focus-visible {
  color: var(--ent-heading);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung faellt das Band auf das umbrechende Raster zurueck, und die
     Zweitkopie -- die es nur gibt, damit die Schleife nahtlos schliesst --
     verschwindet, weil sie dann jedes Logo doppelt zeigen wuerde. */
  .enterprise-reference-carousel {
    overflow: visible;
  }

  .enterprise-reference-carousel__track {
    display: block;
    width: 100%;
    animation: none;
  }

  .enterprise-reference-carousel__group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--ent-space-20) * 2), 1fr));
    width: 100%;
    padding: 0;
  }

  .enterprise-reference-carousel__group li {
    flex: initial;
  }

  .enterprise-reference-carousel__group[aria-hidden='true'] {
    display: none;
  }

  .enterprise-marquee-toggle {
    display: none;
  }
}

/* Einblenden beim Heranrollen.

   Das Attribut data-reveal setzt enterprise.js am Wurzelelement, und zwar erst
   nachdem der Beobachter wirklich steht. Ohne JavaScript greift die Regel
   deshalb nie, und niemand bekommt eine Seite voller unsichtbarer Abschnitte zu
   sehen -- der uebliche Fehler bei dieser Technik.

   Eine Eigenschaft, eine Richtung, einmal: Deckkraft und acht Pixel Weg. Kein
   Versatz je Karte, der laenger dauert als ein Blick, nichts, was beim
   Zurueckrollen erneut anlaeuft. Bewegung darf hier sagen "hier faengt etwas
   Neues an"; alles darueber hinaus waere wieder Dekoration. */
/* :where(li) statt li ist hier KEIN Stilgeschmack, sondern der Unterschied
   zwischen sichtbar und dauerhaft weg.

   Der Ausgangszustand und die Aufdeckung unten muessen sich in der Spezifitaet
   messen koennen. .enterprise-section liegt bei (0,3,0) und trifft damit
   [data-revealed] genau; bei Gleichstand gewinnt die spaetere Regel, also die
   Aufdeckung. Ein blankes li haengt aber einen Typselektor an und hebt die
   Zeile auf (0,3,1) -- damit schlaegt der Ausgangszustand die Aufdeckung, und
   das Element bekommt zwar sein data-revealed, bleibt aber fuer immer bei
   opacity: 0.

   Genau so war es am 2026-08-03 in Betrieb: der Beobachter arbeitete korrekt,
   und trotzdem blendete jedes evidence-flow li, jedes deliverables li und jedes
   method li nach gemessenen 414 ms aus und kam nie zurueck -- die Schritte des
   Evidence Path eingeschlossen. Sichtbar auf jeder Seite, gemeldet vom
   Eigentuemer beim ersten Oeffnen des Readiness Check.

   :where() traegt keine Spezifitaet. Alle sieben Zeilen liegen dadurch
   einheitlich bei (0,3,0), und die Aufdeckung gewinnt ueberall aus demselben
   Grund. REVEAL-001 rechnet das nach, statt es zu glauben. */
:root[data-reveal='on'] .enterprise-section,
:root[data-reveal='on'] .enterprise-content-card,
:root[data-reveal='on'] .enterprise-outcome,
:root[data-reveal='on'] .enterprise-pathway,
:root[data-reveal='on'] .evidence-flow :where(li),
:root[data-reveal='on'] .enterprise-deliverables :where(li),
:root[data-reveal='on'] .enterprise-method :where(li) {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

/* Gestaffelt, aber nur dort, wo die Reihenfolge etwas bedeutet: der Evidence Path,
   die Leistungsbausteine und Assess/Build/Operate sind Folgen, keine Sammlungen. Ein
   Kartenraster wird NICHT gestaffelt -- drei gleichrangige Karten nacheinander
   einzublenden behauptet eine Ordnung, die es nicht gibt, und das waere Dekoration.

   60 ms je Schritt, bei acht gedeckelt. Darueber wartet man auf die Seite, statt sie
   zu lesen. Unter prefers-reduced-motion faellt das Ganze weg -- initReveal steigt dann
   schon vor dem Setzen von data-reveal aus, der Block unten ist der zweite Riegel. */
:root[data-reveal='on'] .evidence-flow li:nth-child(1),
:root[data-reveal='on'] .enterprise-deliverables li:nth-child(1),
:root[data-reveal='on'] .enterprise-method li:nth-child(1) { transition-delay: 0s; }
:root[data-reveal='on'] .evidence-flow li:nth-child(2),
:root[data-reveal='on'] .enterprise-deliverables li:nth-child(2),
:root[data-reveal='on'] .enterprise-method li:nth-child(2) { transition-delay: 0.06s; }
:root[data-reveal='on'] .evidence-flow li:nth-child(3),
:root[data-reveal='on'] .enterprise-deliverables li:nth-child(3),
:root[data-reveal='on'] .enterprise-method li:nth-child(3) { transition-delay: 0.12s; }
:root[data-reveal='on'] .evidence-flow li:nth-child(4),
:root[data-reveal='on'] .enterprise-deliverables li:nth-child(4) { transition-delay: 0.18s; }
:root[data-reveal='on'] .evidence-flow li:nth-child(5),
:root[data-reveal='on'] .enterprise-deliverables li:nth-child(5) { transition-delay: 0.24s; }
:root[data-reveal='on'] .evidence-flow li:nth-child(n + 6),
:root[data-reveal='on'] .enterprise-deliverables li:nth-child(n + 6) { transition-delay: 0.3s; }

:root[data-reveal='on'] [data-revealed] {
  opacity: 1;
  transform: none;
}

/* Die Kopfleiste bekommt beim Rollen eine Kante, damit sie als Leiste ueber dem
   Inhalt liegt und nicht als Naht darin. */
.enterprise-header[data-scrolled] {
  box-shadow: var(--ent-shadow-overlay);
}

@media (prefers-reduced-motion: reduce) {
  /* Wortgleich zum Ausgangszustand oben, :where() eingeschlossen. Weichen die
     beiden Listen voneinander ab, faellt genau ein Selektor durch das Raster
     und bewegt sich weiter, obwohl der Leser Ruhe verlangt hat. REVEAL-004
     vergleicht sie Zeile fuer Zeile. */
  :root[data-reveal='on'] .enterprise-section,
  :root[data-reveal='on'] .enterprise-content-card,
  :root[data-reveal='on'] .enterprise-outcome,
  :root[data-reveal='on'] .enterprise-pathway,
  :root[data-reveal='on'] .evidence-flow :where(li),
  :root[data-reveal='on'] .enterprise-deliverables :where(li),
  :root[data-reveal='on'] .enterprise-method :where(li) {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* ---------------------------------------------------------------------------
   Befunde aus dem GUI-Lauf vom 2026-07-27, letzte Runde.
   --------------------------------------------------------------------------- */

/* h1 gegen h2: auf 390 px stand die h1 bei 32 px und die h2 bei 30 px -- die
   erste Ueberschrift war zwei Pixel groesser als die zweite und damit keine
   Rangfolge, sondern ein Zufall. Beide skalieren jetzt, mit deutlichem Abstand
   auf jeder Breite. */
.enterprise-page h1 {
  /* Obergrenze 2026-08-03 von 3.25rem auf 4.125rem. Die Untergrenze bleibt 2.25rem:
     WEB-V2-04 haelt fest, dass die Startseite auf 390 px 11,8 Bildschirme lang ist, und
     groessere Schrift dort macht genau das schlimmer. Gemessen: 36 px bei 390 und 768
     unveraendert, 66 px ab 1440. */
  font-size: clamp(2.25rem, 3.6vw + 1rem, 4.125rem);
}

.enterprise-page main h2 {
  font-size: clamp(1.5rem, 2.2vw + 0.6rem, var(--ent-text-section));
}

/* h2 gegen h3: auf /datenschutz.php und /tools/ trugen beide 20 px, weil h3
   ausserhalb von Karten gar keine eigene Groesse hatte. Kartentitel behalten
   ihre kleinere Stufe -- dort ist die Karte der Rahmen, nicht die Groesse. */
.enterprise-page main h3 {
  font-size: var(--ent-text-subhead);
  font-weight: 700;
}

.enterprise-content-card h3,
.enterprise-outcome h3,
.enterprise-pathway h3,
.enterprise-deliverables h3,
.enterprise-method h3 {
  font-size: var(--ent-text-card);
  font-weight: 700;
}

/* Die Ueberschrift der Auswertungs-Randspalte bekam wie die uebrigen
   Assessment-Titel nur eine Farbe und erbte damit ueber Tailwinds Preflight
   16 px und Gewicht 400. */
.enterprise-page .evidence-system h2 {
  font-size: var(--ent-text-subhead);
  font-weight: 700;
  line-height: 1.25;
}

/* Zeilenlaenge: auf 1024 px und breiter liefen Fliesstextabsaetze auf 110 bis
   118 Zeichen. --ent-measure war zwar definiert, aber nur an wenigen Stellen
   angelegt. Absaetze in Karten und Rastern sind durch ihre Spalte ohnehin
   begrenzt und bleiben unberuehrt. */
.enterprise-page main > .enterprise-section p:not([class]),
.enterprise-page .enterprise-notice p,
.enterprise-page .enterprise-prose p,
.enterprise-page .enterprise-prose li {
  max-width: var(--ent-measure);
}

/* Der Sprachumschalter war 24 x 34 px und damit auf dem Telefon unter jeder
   brauchbaren Beruehrflaeche -- und das auf jeder einzelnen Seite. */
.enterprise-language a {
  min-height: var(--ent-touch);
  min-width: var(--ent-touch);
}

/* Formularkaestchen waren 13 x 13 px. Die Beschriftung daneben faengt den Klick
   zwar auf, das Kaestchen selbst blieb aber ein zu kleines Ziel. */
.enterprise-page input[type='checkbox'],
.enterprise-page input[type='radio'] {
  width: var(--ent-space-6);
  height: var(--ent-space-6);
}

/* h3 muss auf schmalen Fenstern mitschrumpfen: mit fester Zwischenstufe trafen
   sich h2 und h3 auf 390 px beide bei 24 px. */
.enterprise-page main h3 {
  font-size: clamp(1.25rem, 1.4vw + 0.6rem, var(--ent-text-subhead));
}

/* Die Textspalte des Evidence-Path lief ueber die volle Zeilenbreite. */
.evidence-flow__content,
.enterprise-deliverables li > div,
.enterprise-method li > div {
  max-width: var(--ent-measure);
}

/* Eingabefelder waren 26 px hoch. Auf dem Telefon ist das kein Ziel, sondern
   eine Linie -- und anders als beim Kaestchen faengt hier keine Beschriftung
   den Fehlgriff auf, weil der Klick ins Feld selbst gehen muss. */
.enterprise-page input[type='text'],
.enterprise-page input[type='email'],
.enterprise-page input[type='tel'],
.enterprise-page input[type='search'],
.enterprise-page select {
  min-height: var(--ent-touch);
}

/* Kundenlogos sind jetzt Verweise. Die Kachel bleibt die Flaeche, der Verweis
   fuellt sie aus -- sonst waere das Ziel das Logo statt der Kachel. */
.enterprise-reference-carousel__group li > a {
  width: 100%;
  height: 100%;
  min-height: var(--ent-touch);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ent-radius-sm);
}

.enterprise-reference-carousel__group li:hover {
  border-color: var(--ent-border-strong);
  box-shadow: var(--ent-shadow-hover);
}

/* Ein Rollbalken zaehlt bei window.innerWidth mit, bei clientWidth nicht. */

/* Der letzte zu lange Absatz. Readiness-eigene Absaetze (readiness-privacy-note p,
   readiness-result-summary, readiness-disclaimer) tragen die gleiche Breitenregel
   jetzt direkt in ihrem eigenen Regelblock weiter unten in dieser Datei. */
.enterprise-page .evidence-system p {
  max-width: var(--ent-measure);
}

/* Projektskizzen. Die Referenzseite trug bisher neun Logos und einen Satz -- fuer eine
   Zielgruppe, die Belege prueft, war das die schwaechste Seite des Auftritts. */
.enterprise-cases {
  margin-block-start: var(--ent-space-12);
  padding-block-start: var(--ent-space-8);
  border-block-start: var(--ent-border-default) solid var(--ent-border);
}

.enterprise-cases__title {
  margin: 0 0 var(--ent-space-2);
  color: var(--ent-muted);
  font-size: var(--ent-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.enterprise-cases__intro {
  max-width: var(--ent-measure);
  margin: 0 0 var(--ent-space-6);
  color: var(--ent-text-secondary);
}

.enterprise-cases__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--ent-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.enterprise-case {
  display: flex;
  flex-direction: column;
  gap: var(--ent-space-2);
  padding: var(--ent-space-6);
  border: var(--ent-border-default) solid var(--ent-border);
  border-bottom-color: var(--ent-border-shade);
  border-radius: var(--ent-radius-lg);
  background: var(--ent-surface);
  box-shadow: var(--ent-shadow-raised);
}

.enterprise-case__sector {
  margin: 0;
  color: var(--ent-indicator);
  font-size: var(--ent-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.enterprise-case__title {
  margin: 0;
  color: var(--ent-heading);
  font-size: var(--ent-text-card);
  font-weight: 700;
  line-height: 1.25;
}

.enterprise-case__body {
  flex: 1 1 auto;
  margin: 0;
  color: var(--ent-text-secondary);
  line-height: 1.55;
}

.enterprise-case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ent-space-1) var(--ent-space-4);
  margin: var(--ent-space-2) 0 0;
  padding-block-start: var(--ent-space-3);
  border-block-start: var(--ent-border-default) solid var(--ent-border);
  color: var(--ent-muted);
  font-size: var(--ent-text-sm);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Sprachwahl als Weltkugel-Aufklappmenue
   -------------------------------------------------------------------------- */

.enterprise-language {
  position: relative;
}

.enterprise-language > summary {
  min-height: var(--ent-touch);
  display: inline-flex;
  align-items: center;
  gap: var(--ent-space-2);
  padding-inline: var(--ent-space-3);
  border: var(--ent-border-default) solid var(--ent-border-strong);
  border-radius: var(--ent-radius-md);
  background: var(--ent-surface);
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-sm);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--ent-duration-fast), color var(--ent-duration-fast),
              border-color var(--ent-duration-fast);
}

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

.enterprise-language > summary:hover {
  background: var(--ent-surface-hover);
  color: var(--ent-heading);
}

.enterprise-language__globe {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.enterprise-language__chevron {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  transition: transform var(--ent-duration-fast);
}

.enterprise-language[open] > summary .enterprise-language__chevron {
  transform: rotate(180deg);
}

.enterprise-language__panel {
  position: absolute;
  z-index: 40;
  inset-block-start: calc(100% + var(--ent-space-2));
  inset-inline-end: 0;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  padding: var(--ent-space-2);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-md);
  background: var(--ent-surface);
  box-shadow: var(--ent-shadow-overlay);
}

.enterprise-language__panel a {
  min-height: var(--ent-touch);
  display: flex;
  align-items: center;
  padding-inline: var(--ent-space-3);
  border-radius: var(--ent-radius-sm);
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-sm);
  text-decoration: none;
}

.enterprise-language__panel a:hover {
  background: var(--ent-surface-hover);
  color: var(--ent-heading);
}

.enterprise-language__panel a[aria-current='page'] {
  background: var(--ent-surface-selected);
  color: var(--ent-heading);
  font-weight: 600;
  box-shadow: inset 2px 0 0 0 var(--ent-indicator);
}

/* --------------------------------------------------------------------------
   Themenwahl, jetzt im Footer
   -------------------------------------------------------------------------- */

.enterprise-footer .enterprise-theme {
  display: flex;
  align-items: center;
  gap: var(--ent-space-2);
}

.enterprise-theme__label {
  /* Nicht schrumpfen und nicht umbrechen. In der Fusszeile steht die Themenwahl bei
     768 px in einer Flexzeile neben der Rechtsleiste; die englische Beschriftung
     "Select theme" wurde dort auf 41 px gequetscht und lief ueber zwei Zeilen, die
     deutsche ("Darstellung") passte knapp. Ein Etikett, das je nach Sprache umbricht,
     ist kein Sprachproblem, sondern ein Layoutfehler. */
  flex: 0 0 auto;
  color: var(--ent-muted);
  font-size: var(--ent-text-sm);
  white-space: nowrap;
}

.enterprise-footer .enterprise-theme select {
  min-height: var(--ent-touch);
  padding-inline: var(--ent-space-3);
  border: var(--ent-border-default) solid var(--ent-border-strong);
  border-radius: var(--ent-radius-md);
  background: var(--ent-surface);
  color: var(--ent-text-secondary);
  font-family: inherit;
  font-size: var(--ent-text-sm);
}

/* --------------------------------------------------------------------------
   Sprachwechsel darf das Layout nicht verschieben
   --------------------------------------------------------------------------

   Deutsche Beschriftungen sind durchgehend laenger als englische -- gemessen bei 1440 px:
   die Hauptnavigation 422 gegen 378 px, der Kopf-Schalter 169 gegen 153 px. Weil beide
   inhaltsbreit in einer Flexzeile sassen, sprang beim Umschalten die halbe Kopfleiste
   (Navigation 30 px nach rechts, Schalter 16 px). Inhaltsbereich und Ueberschriften waren
   schon stabil.

   Beide bekommen jetzt eine Mindestbreite, die die laengere Sprache traegt. Die kuerzere
   fuellt den Rest mit Weissraum, statt alles daneben zu verschieben. Kein Rollbalken im
   Spiel: er liegt in beiden Sprachen bei 15 px. */

@media (min-width: 1024px) {
  .enterprise-desktop-nav {
    min-width: 27rem;
  }

  .enterprise-header__actions .enterprise-button--primary {
    min-width: 11rem;
    justify-content: center;
  }
}

/* Und der Rollbalken darf ebenfalls nicht springen, wenn eine Sprachfassung kuerzer ist
   als die andere und die Seite dadurch unter die Fensterhoehe faellt. */
html {
  scrollbar-gutter: stable;
}

/* --------------------------------------------------------------------------
   Enger werdende Fenster: nicht quetschen, sondern umbrechen
   --------------------------------------------------------------------------

   Zwei getrennte Probleme, die dieselbe Wurzel haben.

   Erstens der Ueberlauf. Raster- und Flexkinder haben von sich aus min-width:auto und
   schrumpfen deshalb NICHT unter ihre Inhaltsbreite. Auf 320 px -- das entspricht 400 %
   Zoom auf einem 1280er Schirm und ist die Vorgabe aus WCAG 1.4.10 -- lief die Seite
   dadurch auf 346 bzw. 366 px und verlangte Bildlauf in zwei Richtungen. Gemessen, nicht
   vermutet: ein klassenloses div mit min-width:auto in einem 305 px breiten Behaelter.

   Zweitens das Gequetsche dazwischen. Die Abstaende waren feste Werte, die auf einem
   Telefon genauso gross blieben wie auf einem 27-Zoll-Schirm, waehrend der Platz daneben
   verschwand. Sie skalieren jetzt mit der Fensterbreite. */

/* Kein Raster- oder Flexkind darf sich gegen das Schrumpfen wehren. */
.enterprise-page :where(
  .enterprise-container, .enterprise-content-grid, .enterprise-outcomes,
  .enterprise-pathways, .enterprise-method, .enterprise-deliverables,
  .enterprise-cases__list, .enterprise-partner-band__list,
  .evidence-flow, .readiness-scale
) > * {
  min-width: 0;
}

/* Lange Zeichenketten -- Produktnamen, Adressen, Behoerdennamen -- duerfen die Spalte
   nicht aufspannen. */
.enterprise-page :where(h1, h2, h3, h4, p, li, dd, figcaption) {
  overflow-wrap: break-word;
}

/* Der Behaelter atmet mit: 1rem auf dem Telefon, 2,5rem ab dem Laptop. */
.enterprise-container {
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* Abschnittsabstaende ebenso -- vorher stand auf 320 px derselbe Weissraum wie auf 2560. */
.enterprise-section {
  padding-block: clamp(var(--ent-space-12), 7vw, var(--ent-space-24));
}

@media (max-width: 480px) {
  /* Auf dem Telefon steht die Kachelreihe untereinander statt in Spalten, die nur noch
     ein Wort breit sind. */
  .enterprise-cases__list,
  .enterprise-content-grid,
  .enterprise-outcomes,
  .enterprise-pathways {
    grid-template-columns: 1fr;
  }

  .enterprise-case,
  .enterprise-content-card,
  .enterprise-outcome {
    padding: var(--ent-space-4);
  }

  /* Die Ziffernkacheln des Evidence Path duerfen auf schmalen Fenstern nicht die halbe
     Zeile beanspruchen. */
  .evidence-flow__index,
  .enterprise-deliverables__mark {
    width: var(--ent-space-8);
    height: var(--ent-space-8);
    flex-basis: var(--ent-space-8);
    font-size: var(--ent-text-xs);
  }
}

/* Grosse Schirme: die Zeile darf nicht ins Uferlose laufen, aber der Raum soll genutzt
   werden -- mehr Spalten statt breiterer Spalten. */
@media (min-width: 1920px) {
  .enterprise-cases__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

/* <fieldset> traegt eine eingebaute Mindestbreite aus der Inhaltsgroesse und ignoriert
   dabei min-width:0 am Elternteil -- eine alte Eigenheit, die genau bei 320 px zuschlaegt.
   Der Fragebogen des Readiness-Checks lief dadurch auf 393 px. min-inline-size loest es
   dort, wo min-width nicht greift. */
.enterprise-page fieldset {
  min-width: 0;
  min-inline-size: 0;
}

.enterprise-page legend {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ==========================================================================
   Geraeteklassen: echtes Umbauen statt Zusammenstauchen
   ==========================================================================

   Vorher gab es verstreute Breakpoints, die im Wesentlichen Werte verkleinert haben --
   dieselbe Anordnung, nur enger. Das ist der Grund fuer den Eindruck, die Seite werde auf
   kleinen Fenstern gequetscht: sie WURDE gequetscht, sie hat sich nicht umgebaut.

   Hier stehen jetzt vier Geraeteklassen mit jeweils eigener Anordnung. Die Reihenfolge ist
   mobile-first, damit jede groessere Klasse nur ergaenzt und nichts zurueckdreht.

     Telefon    bis 639    eine Spalte, alles gestapelt, Bedienung mit dem Daumen
     Tablet     640-1023   zwei Spalten, Hero weiterhin gestapelt, Menue eingeklappt
     Laptop     1024-1439  Hero nebeneinander, drei Spalten, volle Navigation
     Desktop    ab 1440    vier Spalten wo sinnvoll, Zeilenlaenge gedeckelt
   ========================================================================== */

/* ------------------------------------------------ Telefon: bis 639 px */
@media (max-width: 639px) {
  /* Der Hero wird eine Saeule: Text, dann Handlung, dann Panel. Nebeneinander bleibt bei
     dieser Breite von beidem zu wenig uebrig. */
  .enterprise-hero__grid {
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-6);
  }

  .enterprise-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-3);
  }

  /* Ein Schalter, der die Zeile fuellt, ist mit dem Daumen sicher zu treffen. */
  .enterprise-hero__actions .enterprise-button,
  .enterprise-cta__actions .enterprise-button {
    width: 100%;
    justify-content: center;
  }

  .enterprise-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-3);
  }

  /* Der Evidence Path laeuft senkrecht mit schmaler Ziffernspalte statt als Raster. */
  .evidence-flow li {
    grid-template-columns: var(--ent-space-8) minmax(0, 1fr);
    align-items: start;
  }

  /* Der Footer stapelt statt in vier Spalten zu zerfallen, die je ein Wort breit sind. */
  .enterprise-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--ent-space-8);
  }

  .enterprise-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ent-space-4);
  }

  /* Die Brotkrume wird auf schmalen Fenstern zur Ruecktaste: der volle Pfad kostet dort
     mehr Platz als er einbringt. */
  .enterprise-breadcrumb ol > li:not(:nth-last-child(2)):not(:last-child) {
    display: none;
  }
}

/* ------------------------------------------------ Tablet: 640 bis 1023 px */
@media (min-width: 640px) and (max-width: 1023px) {
  /* Zwei Spalten sind hier die ehrliche Zahl. Drei ergeben Spalten, in die kein Satz
     passt -- das war der 768px-Befund aus dem Audit. */
  .enterprise-content-grid,
  .enterprise-outcomes,
  .enterprise-pathways,
  .enterprise-cases__list,
  .enterprise-method {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  /* Der Hero bleibt gestapelt, bekommt aber die Breite fuer eine ordentliche Zeile. */
  .enterprise-hero__lead {
    max-width: 34rem;
  }

  .enterprise-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ent-space-3);
  }

  .enterprise-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------ Laptop: ab 1024 px */
@media (min-width: 1024px) {
  /* Erst hier steht der Hero nebeneinander -- ab hier ist fuer beide Seiten Platz. */
  .enterprise-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--ent-space-12);
  }

  .enterprise-content-grid,
  .enterprise-outcomes,
  .enterprise-pathways,
  .enterprise-method {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .enterprise-cases__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Die Markenspalte traegt Logo, Slogan und Beschreibungssatz und braucht deshalb
     mehr Breite als eine Liste aus drei Links. Bei vier gleichen Spalten (gemessen:
     276px bei 1440) brach der Slogan auf zwei Zeilen um. */
  .enterprise-footer__grid {
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------ Desktop: ab 1440 px */
@media (min-width: 1440px) {
  .enterprise-cases__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Mehr Platz heisst mehr Spalten, nicht laengere Zeilen. Fliesstext bleibt bei der
     Zeilenlaenge, die er auf dem Laptop hatte. */
  .enterprise-section__heading p,
  .enterprise-hero__lead {
    max-width: var(--ent-measure);
  }
}

/* ==========================================================================
   Testing Readiness Check (WEB-V3-02, 2026-08-05)
   ==========================================================================
   The page used to be one 8000+ pixel block styled by phoenix.css's pre-redesign
   .assessment-* component (109 selectors) with a token bridge right here mapping
   13 old --color-navy-*/--color-slate-* names onto --ent-* for it. The markup no
   longer wraps the page in that bridge div and no longer carries those classes
   except where noted below, so the bridge itself is removed: there is nothing
   left under it that reads an old color name. The page is now built from
   .enterprise-section / --band / --subtle and the readiness-* rules below, all
   on this stylesheet's own tokens, the same way every other route is built.

   Three rules keep their old .assessment-* selector and exact declaration text
   rather than moving onto readiness-* names, because something outside this
   task's owned files pins them literally:
     - tests/js/enterprise.test.cjs, test "modern typography, opaque surfaces and
       compact route orientation stay first-party and progressive", regex-matches
       the exact selector and declaration text of all three.
     - the middle one is also live, not just pinned text: testing-readiness-check.js
       still adds and removes the literal class assessment-question--error on the
       question fieldset, because quality/playwright/specs/readiness.journey.spec.mjs
       and quality/webdriver/gui-checks.mjs assert on exactly that class name in the
       live DOM, and neither file is owned by this task either. The other two
       (the checked-option gradient border and the result background) are no
       longer matched by any element the current markup renders; they stay only
       so the pinned text keeps being true. */
.enterprise-page .assessment-options label:has(input:checked) {
  border-color: transparent;
  background:
    var(--ent-surface-selected) padding-box,
    var(--ent-gradient-action) border-box;
  color: var(--ent-heading);
  box-shadow: var(--ent-shadow-hover);
}

.enterprise-page .assessment-question--error {
  border-width: var(--ent-border-strong-width);
  border-color: var(--color-danger-text);
}

.enterprise-page .assessment-result {
  border-color: var(--ent-border);
  background: var(--ent-gradient-canvas);
}

.readiness-privacy-note {
  margin-top: var(--ent-space-6);
  padding: var(--ent-space-4);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-md);
  background: var(--ent-gradient-surface);
  color: var(--ent-text-secondary);
}

.readiness-privacy-note strong {
  display: block;
  margin-bottom: var(--ent-space-1);
  color: var(--ent-heading);
}

.readiness-privacy-note p {
  margin: 0;
  max-width: var(--ent-measure);
}

.readiness-progress-card {
  margin-bottom: var(--ent-space-6);
  padding: var(--ent-space-4);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-md);
  background: var(--ent-gradient-surface);
}

.readiness-progress-card label {
  display: block;
  margin-bottom: var(--ent-space-2);
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-sm);
  font-weight: 600;
}

.readiness-progress-card progress,
.readiness-result progress {
  width: 100%;
  accent-color: var(--ent-ember);
}

/* The noscript notice and the validation alert share one look: a stronger border
   and heavier text carry "something needs attention" without a dedicated danger
   surface, the same restrained way .enterprise-contact-feedback--error does it. */
.readiness-error {
  margin-bottom: var(--ent-space-6);
  padding: var(--ent-space-4);
  border: var(--ent-border-strong-width) solid var(--ent-muted);
  border-radius: var(--ent-radius-md);
  background: var(--ent-gradient-surface);
  color: var(--ent-text);
  font-weight: 600;
}

.readiness-error[hidden],
.readiness-result[hidden] {
  display: none;
}

.readiness-question {
  margin: 0 0 var(--ent-space-4);
  padding: var(--ent-space-4);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  background: var(--ent-surface);
  box-shadow: var(--ent-shadow-raised);
}

.readiness-question legend {
  padding: 0 var(--ent-space-2);
  color: var(--ent-heading);
  font-size: var(--ent-text-card);
  font-weight: 700;
}

.readiness-question legend span {
  color: var(--ent-accent-text);
  font-variant-numeric: tabular-nums;
}

.readiness-question > p {
  margin: var(--ent-space-2) 0 var(--ent-space-3);
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-sm);
  line-height: 1.5;
}

/* The compact 0-3 control (WEB-V3-02). Four native radios in a row instead of
   four fully expanded option cards: same accessible contract (one name per
   option, one fieldset/legend group per dimension, keyboard-operable, no
   JavaScript needed to answer), a fraction of the height. Each option's full
   descriptive sentence stays in the accessible name via .enterprise-visually-hidden
   rather than being deleted, so screen-reader users keep the same information
   sighted users previously read on the card. */
.readiness-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ent-space-2);
}

.readiness-scale__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ent-space-1);
  min-width: var(--ent-touch);
  min-height: var(--ent-touch);
  padding: var(--ent-space-2) var(--ent-space-1);
  border: var(--ent-border-default) solid var(--ent-border);
  border-radius: var(--ent-radius-md);
  background: var(--ent-bg-subtle);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ent-duration-fast), background-color var(--ent-duration-base), box-shadow var(--ent-duration-base);
}

.readiness-scale__option input {
  margin: 0;
}

/* Selection is never colour alone: the native radio's own filled/unfilled shape
   is the primary signal, and checking also widens the border, not just tints it. */
.readiness-scale__value {
  display: block;
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-xs);
  line-height: 1.25;

  /* Am 2026-08-05 auf der ausgelieferten Seite gemessen, nicht geschaetzt:
     14 Beschriftungen liefen bei 390 px aus ihrer Zelle, 18 bei 360 px und
     22 bei 320 px. Beispiel: "Personenabhaengig" ist 106 px breit in einer
     75 px breiten Zelle, scrollWidth == clientWidth, der Text lief also nach
     rechts heraus und stiess in die Nachbarspalte, statt abgeschnitten zu
     werden. Auf 768 und 1440 Pixeln war nichts davon zu sehen.

     Ursache: die Regel weiter oben setzt overflow-wrap nur fuer
     h1-h4, p, li, dd und figcaption. Dies hier ist ein span, und deutsche
     Zusammensetzungen wie "Wiederverwendbar" bieten keine normale
     Trennstelle an. Ohne Umbruchserlaubnis bleibt das Wort eine Zeile und
     die Zelle verliert.

     'anywhere' und nicht 'break-word': nur 'anywhere' geht auch in die
     min-content-Breite ein, und genau die bestimmt hier ueber
     minmax(0, 1fr), wie breit die Spalte werden darf.
     hyphens: auto traegt die Sprache aus dem lang-Attribut der Seite und
     trennt nach deutschen Regeln statt mitten im Wort. */
  max-width: 100%;
  /* DIE eigentliche Ursache, gemessen am 2026-08-05 auf der ausgelieferten
     Seite: die Beschriftung war 81 px breit und dreizeilig -- auch bei 1440 px,
     wo ihre Zelle 286 px breit ist. Es lag also nie an der Spaltenzahl.

     .readiness-scale__option ist flex-direction: column mit
     align-items: center. Damit bekommen die Kinder auf der Querachse ihre
     Inhaltsbreite und nicht die Zellenbreite, und "Inhaltsbreite" heisst bei
     erlaubtem Umbruch: so schmal, wie der Browser gerade mag.

     align-self: stretch gibt der Beschriftung die volle Zelle zurueck. Erst
     dadurch wirkt die Spaltenbreite ueberhaupt auf den Textumbruch.
     Die erste Fassung hat den Ueberlauf gegen zu schmale Zeilen getauscht und
     die zweite die Spalten halbiert, ohne dass sich etwas aenderte -- beides
     hat an einem Symptom gearbeitet. */
  align-self: stretch;
  /* break-word statt anywhere. Der GUI-Lauf hat 'anywhere' als type-word-break
     gemeldet, und der Kommentar der Pruefung sagt auch warum: break-word ist
     "fuer sich genommen richtig", anywhere bricht auch dort, wo es nicht noetig
     waere. Noetig ist es hier nicht mehr. */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* -----------------------------------------------------------------------------
 * Telefon: zwei Spalten statt vier.
 *
 * Der GUI-Lauf hat auf dieser Route 30 Befunde gemeldet, davon 10x
 * type-line-too-narrow: "Gesteuert" stand in 56 px bei 12 px Schrift ueber drei
 * Zeilen, "Ad hoc" in 40 px. Die Pruefung schlaegt an, wenn mehrzeiliger Text
 * schmaler als das Fuenffache seiner Schriftgroesse bleibt, also unter 60 px --
 * "fuenf Zeichen je Zeile unterschreitet keine absichtliche Textspalte."
 *
 * Vier Spalten lassen auf 390 px rund 75 px je Zelle. Die laengsten
 * Beschriftungen haben 15 bis 17 Zeichen. Das geht nicht auf, und die erste
 * Fassung hat den Ueberlauf nur gegen zu schmale Zeilen getauscht.
 *
 * Zwei Spalten geben rund 175 px, und damit steht jede Beschriftung wieder auf
 * einer Zeile. Gemessene Kosten: rund 190 px Seitenhoehe, weil die Kaesten von
 * drei Zeilen auf eine schrumpfen und die zweite Reihe das nicht ganz auffrisst.
 * Ab 640 px bleiben es vier Spalten; dort war nie etwas zu beanstanden.
 * ----------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .readiness-scale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tailwinds Preflight setzt h1 bis h6 auf font-weight: inherit, und
   tailwind.css wird vor dieser Datei geladen (header.php). Eine Ueberschrift
   ohne ausdrueckliches Gewicht erbt deshalb 400 und faellt bei
   type-heading-weight durch, das mindestens 600 verlangt. Die alte Regel
   .assessment-result h2 hat das mitgebracht; beim Umbau ist es mitgegangen.
   Das ist eine Falle fuer jede neue Komponente, nicht nur fuer diese. */
.readiness-result h2 {
  font-size: var(--ent-text-subhead);
  font-weight: 700;
  color: var(--ent-heading);
}

.readiness-scale__value strong {
  display: block;
  color: var(--ent-heading);
  font-size: var(--ent-text-body);
  font-variant-numeric: tabular-nums;
}

.readiness-scale__option:has(input:checked) {
  border-width: var(--ent-border-strong-width);
  border-color: var(--ent-border-strong);
  background: var(--ent-surface-selected);
  box-shadow: var(--ent-shadow-raised);
}

.readiness-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ent-space-4);
  margin-top: var(--ent-space-8);
}

.readiness-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ent-space-8);
}

@media (min-width: 1024px) {
  .readiness-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The score figure reuses the homepage metric's own clamp() rather than sizing
   itself off --ent-text-section, which TYPE-004 reserves for h2. A number tied
   straight to that token would also grow on a 390px phone, which is the same
   overflow TYPE-005 already guards against for the metrics band. */
.readiness-score {
  margin-bottom: var(--ent-space-2);
  font-variant-numeric: tabular-nums;
}

.readiness-result-summary {
  margin-top: var(--ent-space-4);
  max-width: var(--ent-measure);
}

.readiness-priority-list {
  display: grid;
  gap: var(--ent-space-4);
  margin: var(--ent-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.readiness-priority-list li {
  padding-left: var(--ent-space-4);
  border-left: var(--ent-border-accent) solid var(--ent-indicator);
}

.readiness-priority-list li strong {
  display: block;
  margin-bottom: var(--ent-space-1);
  color: var(--ent-heading);
}

.readiness-priority-list li span {
  display: block;
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-sm);
  line-height: 1.55;
}

.readiness-disclaimer {
  margin-top: var(--ent-space-6);
  max-width: var(--ent-measure);
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-sm);
}

/* .no-print existed in the markup before this redesign but matched no rule
   anywhere, so the submit/reset/contact/print controls printed like any other
   button. Scoped here because the readiness page is the only current user. */
@media print {
  .no-print {
    display: none;
  }
}
/* End of Testing Readiness Check (WEB-V3-02) rules. */

/* Der Firmenslogan. Steht bei Logo und Firmierung, in Markenfarbe und etwas gesperrt,
   damit er als Slogan lesbar ist und nicht als weiterer Fliesstext untergeht. Wortlaut
   unveraendert und in beiden Sprachfassungen identisch -- ein Slogan wird nicht
   uebersetzt. */
/* Mit dem Footer-Kontext im Selektor: .enterprise-footer p ist mit (0,1,1) spezifischer
   als die Klasse allein mit (0,1,0) und hat Groesse und Farbe ueberschrieben -- gemessen
   14px grau statt 20px in Markenfarbe. Dieselbe Falle wie bei den Ziffernkacheln. */
.enterprise-footer .enterprise-footer__slogan {
  margin: var(--ent-space-4) 0 var(--ent-space-2);
  color: var(--ent-indicator);
  font-size: var(--ent-text-card);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Partnerreihe auf einen Ton bringen
   --------------------------------------------------------------------------

   Gerendert standen dort fuenf Kacheln in vier verschiedenen Registern: Tricentis als
   farbiges Logo, Nexoneer als nahezu weisses SVG auf weisser Kachel (also fast
   unsichtbar), Active Solution als rote Schrift, die mit der eigenen Markenfarbe
   konkurriert, und zwei Wortmarken in Grau. Die Reihe las sich als Sammelsurium, und
   die fehlenden Bilddateien fielen dabei doppelt auf.

   Ein Ton fuer alle loest beides zugleich: die Reihe wirkt als Register statt als
   Aufkleberbogen, die eigene Markenfarbe bleibt die einzige Farbe auf der Seite, und ob
   ein Partner als Bild oder als Wortmarke steht, faellt nicht mehr ins Auge. Beim
   Ueberfahren und bei Tastaturfokus kommt die Farbe zurueck -- wer hinsieht, sieht das
   echte Logo.

   Uebliches Vorgehen fuer Partner- und Kundenwaende, und hier zusaetzlich der Grund,
   warum die beiden fehlenden Dateien nicht mehr als Luecke gelesen werden. */

/* Die Partnerreihe fuehrt seit 2026-08-03 weder Bildmarken noch die
   Wortmarken-Ausweichform. Hier standen bis dahin: eine Silhouetten-Filterkette
   fuer die drei vorhandenen Logodateien (brightness(0) hell, invert(1) dunkel),
   ihre Hover-Ruecknahme, ihre Abschaltung unter prefers-reduced-motion und unter
   forced-colors, sowie die Farbangleichung der Wortmarken an die Bilder daneben.

   Alle diese Regeln beschrieben Elemente, die es nicht mehr gibt. Stehen zu
   bleiben waere schlimmer als nutzlos: sie haetten die naechste Leserin glauben
   lassen, die Reihe zeige noch Logos. */

/* --------------------------------------------------------------------------
   Kundenreihe auf denselben Ton bringen
   --------------------------------------------------------------------------

   Anlass: in der Reihe standen sechs verschiedene Rot- und Orangetoene nebeneinander,
   darunter das Rot des Bundesrechenzentrums mit #BB171D, das von Phoenix #b92d26 kaum zu
   unterscheiden ist. Ausgerechnet der Abschnitt, der Vertrauen tragen soll, war der, in
   dem die eigene Marke am schlechtesten zu erkennen war.

   ANDERE BEHANDLUNG ALS BEI DEN PARTNERN, und der Unterschied ist wichtig. Bei den
   Partnern macht brightness(0) aus jedem Logo eine saubere Silhouette. Hier nicht: WienIT
   und Wiener Stadtwerke sind als helle Zeichnung auf gefuellter Flaeche angelegt, und
   brightness(0) macht daraus einen schwarzen Klotz. Im ersten Anlauf standen genau diese
   beiden als Balken in der Reihe -- schlechter als vorher.

   Deshalb hier: Graustufen ohne brightness, die innere Helligkeitsstruktur bleibt also
   erhalten. Damit das in beiden Themen traegt, behaelt die Kachel ihren hellen Grund --
   ein Logo-Register auf weissen Chips ist die uebliche Form und die einzige, die
   unabhaengig von der Zeichnung des Logos funktioniert. */

.enterprise-reference-carousel__group li {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--ent-border) 70%, #ffffff);
}

.enterprise-reference-carousel__group img {
  filter: grayscale(1) contrast(0.85);
  opacity: 0.72;
  transition: filter var(--ent-duration-base), opacity var(--ent-duration-base);
}

/* Das Band haelt unter Zeiger und Tastaturfokus ohnehin an -- wer hinsieht, bekommt ein
   stehendes Logo in seiner echten Farbe. */
.enterprise-reference-carousel__group li:hover img,
.enterprise-reference-carousel__group li:focus-within img {
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .enterprise-reference-carousel__group img {
    transition: none;
  }
}

@media (forced-colors: active) {
  .enterprise-reference-carousel__group img {
    filter: none;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Versalien-Etiketten ausduennen
   --------------------------------------------------------------------------

   Auf der Referenzseite standen siebzehn gesperrte Versalzeilen: sieben
   Abschnitts-Eyebrows, vier Sektorlabels auf den Projektskizzen und sechs auf den
   Leistungskarten. Damit trug die lauteste Auszeichnung des Typosystems durchgehend die
   am wenigsten tragende Information -- die Farbanalyse vom 2026-07-27 hatte das benannt,
   und ich hatte es nur halb umgesetzt.

   Ab jetzt gilt: EINE Versalzeile je Seite, naemlich die des Hero. Sie ist der Ort, an
   dem eine Kategorie tatsaechlich Orientierung gibt. Alle uebrigen Etiketten stehen in
   normaler Schreibweise, gedaempft und ohne Sperrung -- sie sind Kategorien, keine
   Ausrufe. Der farbige Strich davor entfaellt dort ebenfalls; er verdoppelte nur, was
   die Position ohnehin sagt. */

.enterprise-page :where(
  .enterprise-section .enterprise-eyebrow,
  .enterprise-outcome span,
  .enterprise-pathway__type,
  .evidence-system__header span,
  .enterprise-case__sector,
  .enterprise-cases__title,
  .enterprise-notice__label,
  .enterprise-context-navigation__family,
  .enterprise-context-mobile__summary small
) {
  color: var(--ent-muted);
  font-size: var(--ent-text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Der Hero behaelt die Versalzeile: dort ist sie die einzige und ordnet die Seite ein. */
.enterprise-page .enterprise-hero .enterprise-eyebrow {
  color: var(--ent-accent-text);
  font-size: var(--ent-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Der Strich gehoert zur Hero-Zeile, nicht zu jeder Kategorie darunter.

   Dass er weg ist, reicht nicht: unter 640 px steht `.enterprise-eyebrow` als Raster aus
   zwei Spalten, einer festen von 2rem fuer den Strich und dem Rest fuer den Text. Faellt
   der Strich weg, rutscht der Text in die 32-px-Spalte und bricht silbenweise um --
   "Akt / uell / e / Ku / nd / en". Ohne Strich gibt es also auch kein zweispaltiges
   Raster mehr. */
.enterprise-page .enterprise-section .enterprise-eyebrow::before {
  display: none;
}

.enterprise-page .enterprise-section .enterprise-eyebrow {
  display: block;
  width: auto;
  grid-template-columns: none;
}

/* --------------------------------------------------------------------------
   Footer-Logo: Ueberlappung mit der Nachbarspalte
   --------------------------------------------------------------------------

   Gemessen am 2026-07-28 auf Staging bei 1440 und 768 Breite: das sichtbare Logo lag bei
   353..481 px, sein eigener Link aber bei 97..373 px -- es ragte also 108 px in die
   Spalte "Leistungen" hinein und lief quer durch deren Ueberschrift.

   Ursache: `.enterprise-footer__brand a` setzt `display: inline-grid`, damit die drei
   Themenvarianten des Logos uebereinander in derselben Rasterzelle liegen. Die
   allgemeine Regel `.enterprise-footer a` hat dieselbe Spezifitaet (0,1,1), steht aber
   spaeter in der Datei und gewinnt damit mit `display: inline-flex`. In Flex hat
   `grid-area` keine Wirkung: die drei Bilder standen nebeneinander statt uebereinander,
   der Link wurde dreimal so breit wie ein Logo, und das einzige sichtbare Bild -- je nach
   Thema das zweite oder dritte -- landete ausserhalb der Spalte.

   Der Markenlink ist kein Textlink. Er bekommt hier den Footer-Kontext in den Selektor
   (0,2,1) und damit sein eigenes Verhalten zurueck, statt sich auf die Reihenfolge in der
   Datei zu verlassen. */

.enterprise-footer .enterprise-footer__brand a {
  display: inline-grid;
  align-items: center;
  justify-items: start;
  min-height: 0;
  text-decoration: none;
}

/* ==========================================================================
   Telefon: was sich aendern muss, damit es kein schmaler Schreibtisch ist
   ==========================================================================

   Gemessen am 2026-07-28 gegen Staging, dieselben Groessen bei 390, 768 und 1440:

     Spalten 3/4/4 -> 2 -> 1        h1 52 -> 44 -> 36        Polsterung 96 -> 54 -> 48
     Woerter 673 -> 673 -> 673      Abschnitte 7 -> 7 -> 7   Bilder 27 -> 27 -> 27

   Das Raster antwortet also, der Inhalt nicht. 673 Woerter, die fuer 1440 px geschrieben
   sind, kommen unveraendert auf 390 px an: 13,2 Bildschirme Bahn gegen 7 auf dem
   Schreibtisch. Was hier folgt, sind die fuenf Stellen, an denen das Telefon eine eigene
   Entscheidung braucht statt einer schmaleren Kopie. */

@media (max-width: 639px) {
  /* 1) Der Kopf blieb bei 84 px. Auf einem 844-px-Bildschirm sind das zehn Prozent der
        Flaeche, dauerhaft, weil er klebt. Auf jedem der dreizehn Bildschirme. */
  :root {
    --ent-header: 3.75rem;
  }

  /* 2) Nur die Ueberschriften skalierten: h1 minus 31 Prozent, Fliesstext null. Der
        Abstand zwischen Schlagzeile und Text fiel dadurch von 3,25 auf 2,25 -- die
        Hierarchie wurde ausgerechnet dort flacher, wo der Bildschirm sie am noetigsten
        braucht. Der Lead geht auf Fliesstextgroesse zurueck; das bringt die Zeile von
        37 auf rund 42 Zeichen, also aus dem stockenden Bereich heraus. */
  .enterprise-hero__lead {
    font-size: 1rem;
  }

  /* 3) Aus dem Laufband wird ein Logoraster. Bei 358 px Breite war genau EIN Logo
        gleichzeitig zu sehen, bei 60 Sekunden je Durchlauf. Der Zweck der Zeile -- auf
        einen Blick zeigen, wer die Kunden sind -- ist so nicht erreichbar. Neun Logos in
        drei Spalten sind auf einen Blick da. Die zweite Gruppe existiert nur fuer die
        nahtlose Schleife und faellt mit der Schleife weg. */
  :root .enterprise-reference-carousel__track {
    display: block;
    width: auto;
    animation: none;
  }

  .enterprise-reference-carousel__group[aria-hidden='true'] {
    display: none;
  }

  .enterprise-reference-carousel__group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ent-space-2);
    padding: 0;
  }

  .enterprise-reference-carousel__group li {
    flex: initial;
    min-height: var(--ent-space-16);
    padding: var(--ent-space-2);
  }

  /* 4) Der Evidence Path stand voll ausgeschrieben unter dem Hero: 709 px, fuenf Schritte
        mit je zwei Zeilen Beschreibung. Auf dem Schreibtisch ist er ein Panel NEBEN der
        Schlagzeile, also Beiwerk. Auf dem Telefon wurde daraus das Erste nach dem Hero --
        noch vor den Kunden. */
  /* Die senkrechte Linie gehoert im zugeklappten Zustand nicht mehr zur Tafel, sondern
     zu den Schritten. Sie hing bisher an .evidence-system--path und spannte ueber die
     ganze Tafel; zugeklappt lief sie quer durch die Zusammenfassungszeile. An der Liste
     verschwindet sie mit ihr -- ohne :has(), also ohne Wette auf Engine-Unterstuetzung. */
  .evidence-system--path::before {
    display: none;
  }

  .evidence-flow::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc((var(--ent-touch) / 2) - var(--ent-border-default));
    width: var(--ent-border-strong-width);
    background: var(--ent-border-strong);
  }

  /* Ohne die Linie braucht die Bildunterschrift ihre Einrueckung nicht mehr; sie stand
     sonst um 64 px versetzt ueber einer buendigen Zusammenfassungszeile. */
  .evidence-system__header {
    padding-left: 0;
  }

  .evidence-system__steps > summary {
    min-height: var(--ent-touch);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ent-space-2);
    /* display:flex nimmt dem summary die Aufklappmarke. Statt sie zu faerben, was ins
       Leere lief, wird sie hier ausdruecklich abgeschaltet und durch einen eigenen
       Winkel ersetzt -- sonst las sich die Zeile als Satz und nicht als Schalter. */
    list-style: none;
    color: var(--ent-text-secondary);
    font-size: var(--ent-text-sm);
    font-weight: 600;
    cursor: pointer;
  }

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

  .evidence-system__steps > summary::after {
    content: '';
    flex: 0 0 auto;
    width: var(--ent-space-2);
    height: var(--ent-space-2);
    border-right: var(--ent-border-strong-width) solid var(--ent-indicator);
    border-bottom: var(--ent-border-strong-width) solid var(--ent-indicator);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--ent-duration-fast);
  }

  .evidence-system__steps[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  /* 5) Der Referenzabschnitt war mit 2577 px der laengste Block der Seite, knapp ein
        Viertel der gesamten Bahn. Zwei Skizzen zeigen, worum es geht. */
  .enterprise-cases__list[data-cases-collapsed] > li:nth-child(n + 3) {
    display: none;
  }

  .enterprise-cases__more {
    min-height: var(--ent-touch);
    width: 100%;
    margin-top: var(--ent-space-4);
    padding-inline: var(--ent-space-4);
    border: var(--ent-border-default) solid var(--ent-border-strong);
    border-radius: var(--ent-radius-md);
    background: var(--ent-surface);
    color: var(--ent-heading);
    font-family: inherit;
    font-size: var(--ent-text-sm);
    font-weight: 600;
    cursor: pointer;
  }
}

/* Ab der Tabletbreite gibt es nichts zuzuklappen: die Schritte stehen als Panel neben der
   Schlagzeile und der Zusammenfassungstext waere eine Zeile ohne Aufgabe. Das details
   bleibt im Markup, damit nur eine Fassung ausgeliefert wird -- sichtbar ist es nicht. */
@media (min-width: 640px) {
  .evidence-system__steps > summary {
    display: none;
  }
}


/* -----------------------------------------------------------------------------
 * Telefon: nicht jede Fallskizze auf einmal. ERLEDIGT WEITER OBEN.
 *
 * Hier stand vom 2026-08-05 bis zum selben Abend eine zweite Regel:
 *
 *     @media (max-width: 767px) {
 *       .enterprise-route-home .enterprise-cases > *:nth-child(n + 3) { display: none }
 *     }
 *
 * Sie war als "auf dem Telefon werden zwei Skizzen gezeigt" gemeint und hat
 * etwas ganz anderes getan. Die direkten Kinder von .enterprise-cases sind
 * (reference-carousel-enterprise.php:117-146):
 *
 *     1. h3      Ueberschrift "Aus der Arbeit"
 *     2. p       Einleitung "Anonymisierte Projektskizzen ..."
 *     3. ul      DIE Fallskizzen
 *     4. button  "Weitere Projektskizzen ansehen"
 *
 * nth-child(n + 3) traf also die Liste UND den Aufklappknopf, nicht die
 * Listeneintraege 3 und 4. Am 2026-08-05 im Browser gemessen, Startseite auf
 * 390 Pixel: h3 sichtbar 33 px, p sichtbar 234 px, ul display:none 0 px,
 * button display:none 0 px. Auf dem Telefon las man eine Ueberschrift und
 * einen Absatz, der Projektskizzen ankuendigt, und darunter nichts -- auf dem
 * Abschnitt, dessen einzige Aufgabe der Beleg ist.
 *
 * Die Regel ist ersatzlos entfernt und nicht repariert worden, weil die
 * gewuenschte Wirkung bereits vollstaendig existiert:
 * .enterprise-cases__list[data-cases-collapsed] > li:nth-child(n + 3) in
 * @media (max-width: 639px) weiter oben kuerzt auf zwei Eintraege, und
 * initCaseTruncation (enterprise.js:376) blendet dazu den Knopf ein, mit dem
 * man die uebrigen sichtbar macht. Auf /referenzen.php hat genau das am selben
 * Tag korrekt gemessen: li 2/4 sichtbar, Knopf 44 px sichtbar.
 *
 * Gepinnt von CASES-001 bis CASES-003 in quality/contracts/mobile-case-block.test.mjs.
 * ----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * Telefon: die Startseite auf acht Bildschirme bringen (WEB-V2-04)
 *
 * Entscheidung des Eigentuemers vom 2026-08-05. Gemessen auf 390 Pixel, nach
 * dem Zusammenfuehren der Leistungsabschnitte: 7674 px = 9,09 Bildschirme. Um
 * auf acht zu kommen, mussten rund 900 px weg, und Zusammenfuehren half nicht
 * mehr -- verschobener Inhalt ist genauso hoch. Also wird auf dem TELEFON
 * weggelassen, was dort am wenigsten traegt. Auf Tablet und Desktop bleibt
 * alles unveraendert stehen.
 *
 * Was ein Telefon nicht mehr sieht, und warum:
 *
 *   Partnerreihe (320 px)   Namen von Technologiepartnern. Auf einem Telefon
 *                           eine Liste ohne Handlung; sie steht weiterhin auf
 *                           der Referenzseite und ab 768 px wieder hier.
 *   Trust-Stichpunkte       Drei Saetze zur Arbeitsweise. Die ISO-Nachweise und
 *   (~250 px)               beide Handlungen BLEIBEN -- an ihnen haengt der
 *                           Beleg, nicht an der Aufzaehlung.
 *
 * NICHT MEHR ausgeblendet: der Evidence Path. Er war es vom 2026-08-05 bis zum
 * selben Abend, und das war ein Fehler. Der Entwurf in Figma
 * (C - Evidence-led - 390, Abschnitt "proof", 1172 px) macht ihn zum GROESSTEN
 * Inhaltsabschnitt der mobilen Seite, und das Entscheidungsbrett hat Richtung C
 * genau deswegen gewaehlt: "It promotes the Evidence Path from a hero side-panel
 * to the organising spine ... using an asset SKYPhoenix already owns."
 * Ausgerechnet das Element wegzulassen, wegen dem die Richtung gewaehlt wurde,
 * spart 378 px und kostet die Unterscheidbarkeit. Entscheidung des Eigentuemers
 * vom 2026-08-05, nachdem der Entwurf zum ersten Mal danebengelegt wurde.
 *
 * Bewusst NICHT weggelassen: Kennzahlen, Referenzen, Leistungen, ISO,
 * Handlungsaufforderung. Wer auf dem Telefon liest, soll kuerzer lesen, nicht
 * weniger erfahren.
 * ----------------------------------------------------------------------------- */
/* Nur die STARTSEITE. Am 2026-08-05 standen diese Regeln ohne Routen-Bindung da
 * und haben damit ueberall gegriffen. Aufgefallen ist es erst beim Abgleich mit
 * Figma: auf /referenzen.php mass die Partnerreihe 0 px, obwohl der Entwurf
 * "C - References - 390" sie fuehrt und der Kommentar hier ausdruecklich
 * behauptete, sie bleibe dort stehen. Sie blieb nicht. Die Kuerzungen sind an
 * der Startseite gemessen worden und gelten nur dort. */
@media (max-width: 767px) {
    .enterprise-route-home #technology-partners {
        display: none;
    }

    .enterprise-route-home .enterprise-trust__facts {
        display: none;
    }
}

/* -----------------------------------------------------------------------------
 * Abschnittsnavigation auf langen Seiten (W2.4)
 *
 * Gemessen am 2026-08-05 auf 390 Pixel:
 *     /datenschutz.php     9942 px   11,78 Bildschirme   12 Abschnitte
 *     /referenzen.php      6505 px    7,71               7
 *     /dienstleistungen/   7192 px    8,52               6
 *     /tools/              6914 px    8,19               7
 * Wer auf dem Telefon acht bis zwoelf Bildschirme scrollt, hat keinen Weg
 * zurueck ausser Wischen. UiPath loest das mit einer klebenden Ankerleiste;
 * keiner der DACH-Mitbewerber tut es.
 *
 * Der Klebestapel, jetzt vollstaendig ausrechenbar:
 *     .enterprise-header      0                                    z 50
 *     .enterprise-breadcrumb  var(--ent-header)                    z 40
 *     .enterprise-section-nav var(--ent-header) + --ent-breadcrumb z 30
 *
 * Ohne JavaScript sind es gewoehnliche Sprungmarken, und die sind der
 * eigentliche Dienst. JavaScript setzt nur aria-current auf den Abschnitt, in
 * dem man gerade steht.
 * ----------------------------------------------------------------------------- */
.enterprise-section-nav {
  position: sticky;
  inset-block-start: calc(var(--ent-header) + var(--ent-breadcrumb));
  z-index: 30;
  border-bottom: var(--ent-border-default) solid var(--ent-border);
  background: var(--ent-glass);
}

.enterprise-section-nav__list {
  display: flex;
  gap: var(--ent-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Auf dem Telefon passen sechs bis zwoelf Namen nicht nebeneinander. Sie
     laufen waagrecht, statt die Leiste vier Zeilen hoch werden zu lassen. */
  overflow-x: auto;
  scrollbar-width: thin;
}

/* NICHT min-width: 0. Das ist die Regel fuer Rasterkinder, die schrumpfen
   sollen, und hier war sie genau falsch: die Eintraege sind schmaler geworden
   als ihr Text, waehrend der Text auf nowrap steht, und die Beschriftungen
   sind uebereinander gelaufen. Am 2026-08-05 auf 390 Pixel im Bild gesehen --
   die Messungen haben es NICHT gemeldet, weil die Liste intern scrollt und das
   Dokument deshalb keinen Ueberlauf hat.
   flex: 0 0 auto laesst jeden Eintrag seine Breite behalten; das waagrechte
   Scrollen der Liste erledigt den Rest. */
.enterprise-section-nav__list > li {
  flex: 0 0 auto;
}

.enterprise-section-nav a {
  display: flex;
  align-items: center;
  min-height: var(--ent-touch);
  padding-inline: var(--ent-space-3);
  border-bottom: var(--ent-border-accent) solid transparent;
  color: var(--ent-text-secondary);
  font-size: var(--ent-text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.enterprise-section-nav a:hover {
  color: var(--ent-heading);
}

/* Nicht Farbe allein: der aktuelle Abschnitt traegt zusaetzlich die Unterkante. */
.enterprise-section-nav a[aria-current='true'] {
  border-bottom-color: var(--ent-indicator);
  color: var(--ent-heading);
}

/* Ein Sprungziel darf nicht unter dem Klebestapel landen. Der Abstand ist
   derselbe Ausdruck wie oben, plus etwas Luft. */
.enterprise-page main > .enterprise-section[id],
.enterprise-page main > .enterprise-hero[id] {
  scroll-margin-top: calc(var(--ent-header) + var(--ent-breadcrumb) + var(--ent-touch) + var(--ent-space-4));
}

/* Weiches Scrollen ist eine Zugabe und verschwindet, wenn Bewegung
   unerwuenscht ist. Die Datei haelt das an allen anderen Stellen genauso. */
@media (prefers-reduced-motion: no-preference) {
  .enterprise-page:has(.enterprise-section-nav) {
    scroll-behavior: smooth;
  }
}