/* ============================================================
   WEBSITE 4.0 — DESIGN FOUNDATION (nur Tokens)
   ============================================================
   Designrichtung:  «Swiss Precision Systems»
   Source of Truth: docs/01-brand/design-system.md

   Diese Datei ist NOCH NICHT global aktiv. Keine bestehende Seite
   bindet sie ein; sie wird erst von neuen Website-4.0-Seiten
   zusätzlich geladen. Alle Tokens tragen das Präfix --v4-, damit
   nichts mit den bestehenden Variablen aus style.css kollidiert.

   Hier stehen ausschliesslich Design-Tokens — keine Komponenten,
   keine Typografieklassen, kein Reset, keine globalen body-Styles.
   Keine eigenmächtigen Abweichungen von den dokumentierten Tokens:
   Wer einen Wert ändern will, ändert zuerst design-system.md.
   ============================================================ */

/* ============================================================
   IBM PLEX — Corporate-Typografie, selbst ausgeliefert
   ============================================================
   Quelle: offizielle IBM-npm-Pakete @ibm/plex-sans 1.1.0 und
   @ibm/plex-mono 2.5.0 (Lizenz: SIL OFL 1.1, liegt als
   LICENSE.txt neben den Dateien). Nur die Gewichte, die die
   V4-Seiten wirklich nutzen: Sans 400/500/600, Mono 400/600.
   Kein Italic, kein 700 — erst ergaenzen, wenn eine Seite es
   braucht. font-display: swap zeigt sofort den System-Fallback
   und tauscht nach dem Laden; die Metrik-Feinarbeit (size-adjust
   wie bei Inter in style.css) folgt erst, wenn Messwerte sie
   rechtfertigen.
   ============================================================ */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/ibm-plex/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('schriften/ibm-plex/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schriften/ibm-plex/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/ibm-plex/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schriften/ibm-plex/IBMPlexMono-SemiBold.woff2') format('woff2');
}

:root {
  /* ---- Markenfarben (verbindlich lt. design-system.md) ---- */
  --v4-navy:     #0B1726;  /* Northstar Navy — Autorität, dunkle Sektionen, Footer, Überschriften */
  --v4-blue:     #175CD3;  /* Bidoli Blue — primäre Aktionen, Links, aktive Zustände */
  --v4-graphite: #303943;  /* Engineering Graphite — Fliesstext */
  --v4-slate:    #667085;  /* System Slate — Sekundärtext */
  --v4-grey:     #D9E0E8;  /* System Grey — Ränder, Trenner */
  --v4-canvas:   #F7F9FB;  /* Technical White — Seitengrund */
  --v4-white:    #FFFFFF;  /* Pure White — Karten, Dokumentflächen */
  --v4-amber:    #D99028;  /* Signal Amber — manuelle Engpässe, Hinweise; normal unter 2 % der Fläche */

  /* ---- Semantische Aliase (zeigen NUR auf Markentokens,
          erfinden keine neuen Farben) ---- */
  --v4-text-primary:   var(--v4-graphite);
  --v4-text-secondary: var(--v4-slate);
  --v4-text-heading:   var(--v4-navy);
  --v4-border:         var(--v4-grey);
  --v4-bg-page:        var(--v4-canvas);
  --v4-bg-surface:     var(--v4-white);
  --v4-bg-dark:        var(--v4-navy);
  --v4-action-primary: var(--v4-blue);
  --v4-signal:         var(--v4-amber);

  /* ---- Abstände: 8-px-System (design-system.md) ---- */
  --v4-space-1:  8px;
  --v4-space-2:  16px;
  --v4-space-3:  24px;
  --v4-space-4:  32px;
  --v4-space-5:  40px;
  --v4-space-6:  48px;
  --v4-space-8:  64px;
  --v4-space-10: 80px;
  --v4-space-12: 96px;
  --v4-space-16: 128px;

  /* ---- Radien: bewusst nur zwei Stufen, keine SaaS-Blasen ---- */
  --v4-radius-control: 6px;   /* Buttons, Eingabefelder */
  --v4-radius-card:    8px;   /* Karten, grosse Bilder (max) */

  /* ---- Layout ---- */
  --v4-content-max: 1240px;   /* 12-Spalten-Raster, max. Inhaltsbreite */
  /* Seiten-Padding: design-system.md nennt Desktop 32–48px,
     Tablet 24px, Mobile 16–20px. Gewählt: 40 / 24 / 16 —
     die Media-Query-Stufen unten folgen den im Bestand
     meistgenutzten Breakpoints (900px, 600px). */
  --v4-page-pad: 40px;

  /* ---- Typografie ----
     IBM Plex wird oben per @font-face selbst ausgeliefert
     (schriften/ibm-plex/). Die Fallback-Ketten bleiben die
     Absicherung, falls der Fontdownload scheitert. */
  --v4-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Arial, sans-serif;
  --v4-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono',
                  Consolas, 'Liberation Mono', monospace;

  /* ---- Motion & Fokus ----
     Dauer/Easing bewusst identisch zum Bestand (--transition in
     style.css: 180ms ease), damit Alt- und Neuseiten sich beim
     Übergang nicht verschieden anfühlen. Keine Animationen hier. */
  --v4-transition:   180ms ease;
  --v4-focus-color:  var(--v4-blue);
  --v4-focus-width:  2px;
  --v4-focus-offset: 2px;
}

/* Seiten-Padding je Geräteklasse — reine Token-Umschaltung,
   wirkt erst, wenn eine Seite die Tokens benutzt. */
@media (max-width: 900px) {
  :root { --v4-page-pad: 24px; }
}
@media (max-width: 600px) {
  :root { --v4-page-pad: 16px; }
}

/* ============================================================
   GEMEINSAME V4-KOMPONENTEN
   ============================================================
   Herausgezogen aus dem Wissen-Hub (26.08.2026), unveraendert in
   Werten — nur der Scope wurde von .v4-wissen auf .v4-page
   verallgemeinert. Jede V4-Seite traegt <div class="v4-page ...">
   und bekommt damit Grundflaeche, Typografie, Sektionen, Labels,
   Raster, Karten, Linklisten, Aktionen, CTA-Band und Fokus.
   Seitenspezifisches (z. B. die Wissenslandkarte) bleibt in der
   jeweiligen Seiten-CSS, die NACH dieser Datei laedt.
   ============================================================ */

/* ---- Grundflaeche und Typografie ---- */
.v4-page {
  background: var(--v4-bg-page);
  color: var(--v4-text-primary);
  font-family: var(--v4-font-sans);
  line-height: 1.65;
}
.v4-page .v4-inhalt {
  max-width: var(--v4-content-max);
  margin-inline: auto;
  padding-inline: var(--v4-page-pad);
}
.v4-page h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.12;
  font-weight: 600;
  color: var(--v4-text-heading);
  margin: var(--v4-space-2) 0 var(--v4-space-3);
  text-wrap: balance;
}
.v4-page h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.2;
  font-weight: 600;
  color: var(--v4-text-heading);
  margin: var(--v4-space-1) 0 var(--v4-space-2);
  text-wrap: balance;
}
.v4-page h3 {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--v4-text-heading);
  margin: 0 0 var(--v4-space-1);
}
.v4-page p { margin: 0 0 var(--v4-space-2); }

/* ---- Technische Labels ---- */
.v4-page .v4-label {
  font-family: var(--v4-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v4-blue);
  margin: 0;
}
.v4-page .v4-label-signal { color: var(--v4-signal); }

.v4-page .v4-lede {
  font-size: 18px;
  color: var(--v4-text-primary);
  max-width: 62ch;
}
.v4-page .v4-einleitung {
  color: var(--v4-text-primary);
  max-width: 68ch;
  margin-bottom: var(--v4-space-4);
}

/* ---- Sektionen ---- */
.v4-page .v4-sektion { padding-block: var(--v4-space-8); }
.v4-page .v4-sektion-hell {
  background: var(--v4-bg-surface);
  border-block: 1px solid var(--v4-border);
}

/* ---- Hero-Grundlayout (identisch auf Wissen und Loesungen bewaehrt;
        seitenspezifische Hero-Raster bleiben in den Seiten-CSS) ---- */
.v4-page .v4-hero { padding-block: var(--v4-space-10) var(--v4-space-8); }

/* ---- Raster ---- */
.v4-page .v4-raster-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v4-space-3);
}
.v4-page .v4-raster-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--v4-space-3);
}

/* Mikro-Belege unter den Hero-CTAs (30.08.2026): leise Zeile mit
   drei Punkten, die belegbar sind — Vertrauen ohne Behauptung. */
.v4-page .v4-belege {
  list-style: none;
  margin: var(--v4-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.v4-page .v4-belege li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  color: var(--v4-text-secondary);
  line-height: 1.5;
}
.v4-page .v4-belege li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v4-blue);
}
@media (max-width: 560px) {
  .v4-page .v4-belege { flex-direction: column; gap: 8px; }
}

/* Vierer-Raster für die Preisübersicht (30.08.2026) */
.v4-page .v4-raster-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--v4-space-3);
}
.v4-page .v4-preisraster { margin-bottom: var(--v4-space-6); }
.v4-page .v4-preiskarte-preis {
  font-family: var(--v4-font-mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--v4-navy);
  margin: 2px 0 6px;
}
.v4-page .v4-preiskarte h3 {
  font-size: 15.5px;
  margin: 0 0 6px;
}
@media (max-width: 1000px) {
  .v4-page .v4-raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .v4-page .v4-raster-4 { grid-template-columns: 1fr; }
}

/* ---- Karten: Rand vor Schatten ---- */
.v4-page .v4-karte {
  display: block;
  background: var(--v4-bg-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-card);
  padding: var(--v4-space-3);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--v4-transition);
}
.v4-page .v4-karte:hover { border-color: var(--v4-slate); }
.v4-page .v4-karte p { color: var(--v4-text-primary); font-size: 15.5px; }
.v4-page .v4-karte-label {
  font-family: var(--v4-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v4-text-secondary);
  margin: 0 0 var(--v4-space-1);
}
.v4-page .v4-weiter {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--v4-blue);
}

/* ---- Kompakte Linkliste ---- */
.v4-page .v4-listentitel { margin-top: var(--v4-space-4); }
.v4-page .v4-linkliste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}
.v4-page .v4-linkliste li { border-top: 1px solid var(--v4-border); }
.v4-page .v4-linkliste li:last-child { border-bottom: 1px solid var(--v4-border); }
.v4-page .v4-linkliste a {
  display: flex;
  justify-content: space-between;
  gap: var(--v4-space-2);
  padding-block: var(--v4-space-2);
  color: var(--v4-text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--v4-transition);
}
.v4-page .v4-linkliste a:hover { color: var(--v4-blue); }

/* ---- Aktionen: Textlinks und Buttons ---- */
.v4-page .v4-textlink {
  color: var(--v4-blue);
  font-weight: 600;
  text-decoration: none;
}
.v4-page .v4-textlink:hover { text-decoration: underline; }
.v4-page .v4-mehr { margin: var(--v4-space-3) 0 0; }
.v4-page .v4-btn {
  display: inline-block;
  background: var(--v4-action-primary);
  color: var(--v4-white);
  font-weight: 600;
  text-decoration: none;
  padding: 12px var(--v4-space-3);
  border-radius: var(--v4-radius-control);
  transition: filter var(--v4-transition);
}
.v4-page .v4-btn:hover { filter: brightness(1.1); }

/* ---- CTA-Band: Navy-Abschluss jeder V4-Seite ---- */
.v4-page .v4-cta {
  background: var(--v4-bg-dark);
  padding-block: var(--v4-space-10);
}
.v4-page .v4-cta h2 { color: var(--v4-white); max-width: 24ch; }
.v4-page .v4-cta-text { color: var(--v4-grey); max-width: 55ch; }
/* Aktionsgruppe: gilt fuer Hero UND CTA (frueher getrennt als
   v4-hero-aktionen/v4-cta-aktionen — layoutidentisch, daher eins) */
.v4-page .v4-aktionen {
  display: flex;
  align-items: center;
  gap: var(--v4-space-4);
  flex-wrap: wrap;
  margin-top: var(--v4-space-4);
}
.v4-page .v4-textlink-hell { color: var(--v4-grey); }
.v4-page .v4-textlink-hell:hover { color: var(--v4-white); }

/* ---- Fokus: sichtbar, tokenbasiert ---- */
.v4-page a:focus-visible,
.v4-page .v4-btn:focus-visible {
  outline: var(--v4-focus-width) solid var(--v4-focus-color);
  outline-offset: var(--v4-focus-offset);
  border-radius: 3px;
}
.v4-page .v4-cta a:focus-visible {
  outline-color: var(--v4-white);
}

/* ---- Responsive: gleiche Stufen wie der Bestand (900/600) ---- */
@media (max-width: 900px) {
  .v4-page .v4-raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .v4-page .v4-sektion { padding-block: var(--v4-space-6); }
  .v4-page .v4-hero { padding-block: var(--v4-space-8) var(--v4-space-6); }
  .v4-page .v4-raster-2,
  .v4-page .v4-raster-3 { grid-template-columns: 1fr; }
  .v4-page .v4-cta { padding-block: var(--v4-space-8); }
}

/* ---- Prozesskette: nummerierte Ablauf-/Methodenschritte ----
   Signature Visual (design-system.md: Prozessdiagramme als
   Markenelement). Semantisch eine <ol>; jeder Schritt traegt eine
   Linie mit quadratischem Marker in der Aktionsfarbe — Engineering-
   Dokumentation, keine Stepper-Blasen. Desktop nebeneinander,
   unter 900px als vertikale Kette. */
.v4-page .v4-prozesskette {
  list-style: none;
  margin: var(--v4-space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--v4-space-3);
}
.v4-page .v4-prozessschritt {
  position: relative;
  border-top: 2px solid var(--v4-border);
  padding-top: var(--v4-space-2);
}
.v4-page .v4-prozessschritt::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--v4-action-primary);
}
.v4-page .v4-prozessnummer {
  display: block;
  font-family: var(--v4-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--v4-blue);
  margin-bottom: 4px;
}
.v4-page .v4-prozesstitel {
  font-weight: 600;
  font-size: 17px;
  color: var(--v4-text-heading);
  margin: 0 0 var(--v4-space-1);
}
.v4-page .v4-prozesstext {
  color: var(--v4-text-primary);
  font-size: 14.5px;
  margin: 0;
}
@media (max-width: 900px) {
  .v4-page .v4-prozesskette { grid-template-columns: 1fr; gap: var(--v4-space-2); }
  .v4-page .v4-prozessschritt {
    border-top: none;
    border-left: 2px solid var(--v4-border);
    padding: 0 0 var(--v4-space-1) var(--v4-space-3);
  }
  .v4-page .v4-prozessschritt::before {
    top: 2px;
    left: -5px;
  }
}

/* ---- Technische Liste: liniengetrennte Eintraege ----
   Zweiter realer Anwendungsfall (Loesungen-Reibungsliste/-Felder und
   Branchen-Pain-Points), daher generalisiert. Basis = schlichte
   Zeilen mit Linie; .v4-liste-2sp legt sie zweispaltig, die
   nummerierte Variante traegt eine Mono-Nummer und Titel + Text.
   Kontextabstaende (margin) setzen die Seiten selbst. */
.v4-page .v4-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 900px;
}
.v4-page .v4-liste li {
  border-top: 1px solid var(--v4-border);
  padding-block: var(--v4-space-1);
  color: var(--v4-text-primary);
}
.v4-page .v4-liste-2sp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--v4-space-6);
}
.v4-page .v4-liste-nummeriert li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--v4-space-2);
  padding-block: var(--v4-space-2);
}
.v4-page .v4-liste-nummeriert li:last-child {
  border-bottom: 1px solid var(--v4-border);
}
.v4-page .v4-liste-nummer {
  font-family: var(--v4-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--v4-blue);
  padding-top: 5px;
}
.v4-page .v4-liste-nummeriert h3 { font-size: 17px; margin-bottom: 2px; }
.v4-page .v4-liste-nummeriert p {
  margin: 0;
  color: var(--v4-text-primary);
  font-size: 15px;
}
@media (max-width: 600px) {
  .v4-page .v4-liste-2sp { grid-template-columns: 1fr; }
}

/* ============================================================
   GEMEINSAME TEXTBAUSTEINE (aus den Seiten-CSS zentralisiert)
   ============================================================
   Kernsatz: die eine hervorgehobene Aussage einer Sektion.
   Nachsatz: betonter Abschluss einer Sektion.
   Hinweis:  klein und ehrlich (Beispiel-Kennzeichnung, Regeln,
   Anrechnung). Seiten ueberschreiben einzig Kontextabstaende
   oder Breiten — ihr Seiten-CSS laedt nach dieser Datei. */
.v4-page .v4-kernsatz {
  border-left: 3px solid var(--v4-action-primary);
  padding-left: var(--v4-space-3);
  font-size: 18px;
  font-weight: 500;
  color: var(--v4-text-heading);
  max-width: 58ch;
  margin: 0 0 var(--v4-space-2);
}
.v4-page .v4-nachsatz {
  margin: var(--v4-space-3) 0 0;
  font-weight: 500;
  color: var(--v4-text-heading);
}
.v4-page .v4-hinweis {
  font-family: var(--v4-font-mono);
  font-size: 13px;
  color: var(--v4-text-secondary);
  max-width: 68ch;
  /* Oberabstand seit 30.08.2026 (Abnahme-Befund): folgt der Hinweis
     auf ein Element ohne Unterabstand, klebte er daran; angrenzende
     Absatz-Margen kollabieren, doppelt wird nichts. */
  margin: var(--v4-space-2) 0 var(--v4-space-3);
}

/* Preiszeile: deutlich, aber ruhig — Zahl gross, Regel daneben.
   Zweiter Anwendungsfall (Prozessanalyse und Ablauf & Preise),
   daher aus prozessanalyse-v4.css hierher generalisiert. */
.v4-page .v4-preis {
  border: 1px solid var(--v4-border);
  border-left: 3px solid var(--v4-action-primary);
  padding: var(--v4-space-2) var(--v4-space-3);
  max-width: 58ch;
  margin: 0 0 var(--v4-space-3);
  color: var(--v4-text-heading);
}
.v4-page .v4-preis strong {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* FAQ: native details/summary, liniengetrennt wie .v4-liste.
   Zweiter Anwendungsfall (Ablauf & Preise und Prozessautomatisierung),
   daher aus angebot-v4.css hierher generalisiert. */
.v4-page .v4-faq {
  max-width: 900px;
  margin-top: var(--v4-space-3);
}
.v4-page .v4-faq details { border-top: 1px solid var(--v4-border); }
.v4-page .v4-faq details:last-child { border-bottom: 1px solid var(--v4-border); }
.v4-page .v4-faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--v4-space-2);
  font-weight: 600;
  color: var(--v4-text-heading);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--v4-space-2);
}
.v4-page .v4-faq summary::-webkit-details-marker { display: none; }
.v4-page .v4-faq summary::after {
  content: "+";
  font-family: var(--v4-font-mono);
  color: var(--v4-blue);
  flex-shrink: 0;
}
.v4-page .v4-faq details[open] summary::after { content: "–"; }
.v4-page .v4-faq summary:focus-visible {
  outline: var(--v4-focus-width) solid var(--v4-focus-color);
  outline-offset: var(--v4-focus-offset);
}
.v4-page .v4-faq details p {
  margin: 0 0 var(--v4-space-2);
  max-width: 68ch;
  color: var(--v4-text-primary);
}

/* ============================================================
   DYNAMIK (Design-Pruefung 29.08.2026)
   ============================================================
   1) Spuerbare Hover-Zustaende: Karten heben sich mit blauem Rand
      und dezentem Schatten (design-system.md erlaubt Schatten, wo
      echte Tiefe noetig ist — Hover ist genau dieser Fall), Pfeile
      und Linklisten reagieren sichtbar.
   2) Amber-Reibungsmarker: Problemlisten tragen den manuellen
      Engpass in der Signalfarbe — Amber = Problem, Blau = Loesung;
      bleibt weit unter den 2 % Flaechenbudget.
   3) Dunkle Sektion: genau EIN Navy-Band pro langer Seite als
      visueller Anker (Vorbild: der Rechner-Block).
   4) Gestaffeltes Erscheinen: Prozessketten und Kartenraster bauen
      sich 01→02→03 auf, sobald shared.js die Sektion aufdeckt.
      Alles Bewegte haengt an prefers-reduced-motion.
   ============================================================ */

.v4-page .v4-karte {
  transition: border-color var(--v4-transition),
              transform var(--v4-transition),
              box-shadow var(--v4-transition);
}
.v4-page .v4-karte:hover {
  border-color: var(--v4-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(11, 23, 38, 0.08);
}
.v4-page .v4-weiter {
  display: inline-block;
  transition: transform var(--v4-transition), color var(--v4-transition);
}
.v4-page .v4-karte:hover .v4-weiter {
  transform: translateX(4px);
  color: var(--v4-blue);
}
.v4-page .v4-linkliste a {
  transition: padding-left var(--v4-transition), color var(--v4-transition);
}
.v4-page .v4-linkliste a:hover { padding-left: 6px; }
.v4-page .v4-btn {
  transition: filter var(--v4-transition), transform var(--v4-transition);
}
.v4-page .v4-btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .v4-page .v4-karte:hover,
  .v4-page .v4-karte:hover .v4-weiter,
  .v4-page .v4-btn:hover { transform: none; }
}

/* Amber-Reibungsmarker */
.v4-page .v4-liste-reibung li {
  position: relative;
  padding-left: 18px;
}
.v4-page .v4-liste-reibung li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--v4-space-1) + 0.45em);
  width: 6px;
  height: 6px;
  background: var(--v4-signal);
}

/* Dunkle Sektion: Navy-Anker in der Seitenmitte */
.v4-page .v4-sektion-dunkel {
  background: var(--v4-bg-dark);
  padding-block: var(--v4-space-10);
}
.v4-page .v4-sektion-dunkel h2 { color: var(--v4-white); }
.v4-page .v4-sektion-dunkel .v4-einleitung,
.v4-page .v4-sektion-dunkel p { color: var(--v4-grey); }
.v4-page .v4-sektion-dunkel .v4-preis {
  border-color: rgba(255, 255, 255, 0.22);
  border-left-color: var(--v4-blue);
  color: var(--v4-white);
}
.v4-page .v4-sektion-dunkel a:focus-visible {
  outline-color: var(--v4-white);
}

/* Gestaffeltes Erscheinen von Ketten und Rastern.
   shared.js deckt die ganze .v4-inhalt auf (reveal-da); die Kinder
   ziehen hier mit eigenem Verzug nach. Ohne JavaScript existiert
   data-reveal nicht, alles bleibt sichtbar; reveal-sofort zeigt ohne
   Uebergang. */
@media (prefers-reduced-motion: no-preference) {
  .v4-page .v4-prozesskette > li,
  .v4-page .v4-raster-2 > *,
  .v4-page .v4-raster-3 > * {
    transition: opacity 0.45s ease, transform 0.45s ease;
  }
  .v4-inhalt[data-reveal]:not(.reveal-da):not(.reveal-sofort) .v4-prozesskette > li,
  .v4-inhalt[data-reveal]:not(.reveal-da):not(.reveal-sofort) .v4-raster-2 > *,
  .v4-inhalt[data-reveal]:not(.reveal-da):not(.reveal-sofort) .v4-raster-3 > * {
    opacity: 0;
    transform: translateY(10px);
  }
  .v4-page :is(.v4-prozesskette, .v4-raster-2, .v4-raster-3) > :nth-child(2) { transition-delay: 0.08s; }
  .v4-page :is(.v4-prozesskette, .v4-raster-2, .v4-raster-3) > :nth-child(3) { transition-delay: 0.16s; }
  .v4-page :is(.v4-prozesskette, .v4-raster-2, .v4-raster-3) > :nth-child(4) { transition-delay: 0.24s; }
  .v4-page :is(.v4-prozesskette, .v4-raster-2, .v4-raster-3) > :nth-child(5) { transition-delay: 0.32s; }
  .v4-page :is(.v4-prozesskette, .v4-raster-2, .v4-raster-3) > :nth-child(6) { transition-delay: 0.4s; }
}

/* Preis-/Groessen-Spannen (generalisiert 29.08.2026, dritter
   Anwendungsfall: Ablauf & Preise, Websysteme, Onlineshops): Name / Preis (Mono) / Erklaerung als ruhige
   Zeilen — Engineering-Dokumentation, keine Angebotskarten */
.v4-page .v4-spannen li {
  display: grid;
  grid-template-columns: minmax(0, 15ch) minmax(0, 20ch) minmax(0, 1fr);
  gap: var(--v4-space-3);
  padding-block: var(--v4-space-2);
  align-items: baseline;
}
.v4-page .v4-spannen li:last-child { border-bottom: 1px solid var(--v4-border); }
.v4-page .v4-spannen p { margin: 0; }
.v4-page .v4-spanne-name {
  font-weight: 600;
  color: var(--v4-text-heading);
}
.v4-page .v4-spanne-preis {
  font-family: var(--v4-font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--v4-blue);
}
.v4-page .v4-spanne-text {
  color: var(--v4-text-secondary);
  font-size: 15px;
}
@media (max-width: 600px) {
  .v4-page .v4-spannen li { grid-template-columns: 1fr; gap: 2px; }
}


/* Ketten-Spaltenvarianten (generalisiert 29.08.2026 — vierter
   Anwendungsfall; die Foundation-Kette hat fuenf Spalten, Seiten
   mit 4 oder 6 Schritten setzen die Klasse dazu). Unter 900px
   greift die vertikale Fassung der Basisregel. */
/* Wie bei v4-kette-3 unten: nur auf breiten Schirmen. Ohne die
   Begrenzung schlagen diese Regeln die Zusammenlegung aus der
   Medienabfrage (Zeile 453), weil sie spaeter in der Datei stehen.
   Gemessen am 06.09.2026 auf 390 px: onlineshop.php und webdesign.php
   zeigten vier Spalten zu je 78 px. */
@media (min-width: 901px) {
  .v4-page .v4-kette-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v4-page .v4-kette-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Drei Spalten NUR auf breiten Schirmen. Die Regel stand bis zum
   06.09.2026 ohne Begrenzung hier unten und schlug damit die
   Zusammenlegung auf eine Spalte aus der Medienabfrage weiter oben
   (Zeile 453) — gleiche Spezifitaet, aber spaeter in der Datei.
   Folge: Auf einem 390 px breiten Handy blieben drei Spalten zu je
   109 px stehen, und «Kostenloses Erstgespraech» brach in «Kostenlos /
   es / Erstgespr / aech». Betroffen waren kontakt.php,
   digitale-prozesse-unternehmen.php, llm-fall-seite.php und
   partner.php. Die Begrenzung auf min-width haelt die Reihenfolge in
   der Datei egal. */
@media (min-width: 901px) {
  .v4-page .v4-kette-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sprungleiste unter dem Hero sehr langer Seiten (Abnahme-Befund
   30.08.2026): Mono-Zeile mit Ankern, damit niemand 9000px blind
   scrollen muss. */
.v4-page .v4-sprungleiste {
  font-family: var(--v4-font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--v4-text-secondary);
  margin: var(--v4-space-3) 0 0;
}
.v4-page .v4-sprungleiste a {
  color: var(--v4-text-secondary);
  text-decoration: none;
}
.v4-page .v4-sprungleiste a:hover { color: var(--v4-blue); }

/* Anmerkung: mehrzeilige Nebentexte in Sans (Abnahme-Befund
   30.08.2026 — Mono gehoert an Labels, Zahlen und Befehle, nicht an
   ganze Saetze; kurze technische Zeilen bleiben .v4-hinweis). */
.v4-page .v4-anmerkung {
  font-size: 13.5px;
  color: var(--v4-text-secondary);
  max-width: 68ch;
  margin: var(--v4-space-2) 0 var(--v4-space-3);
}

/* ============================================================
   HERO-DIAGRAMME (generalisiert 30.08.2026)
   ============================================================
   Zweispaltiger Hero: links Text, rechts das Signature-Visual
   (Prozessfluss in der V4-Bildsprache: weisse Systemknoten, blaue
   Fluesse, Amber = manueller Engpass, gruener Statuspunkt).
   SMIL-Animationen; shared.js entfernt sie bei
   prefers-reduced-motion (.v4-hero-grafik ist dort registriert).
   Unter 900px faellt die Grafik weg — auf dem Handy traegt der
   Text (Konvention der alten Hero-Grafiken). */
.v4-page .v4-hero-zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: var(--v4-space-8);
  align-items: center;
}
.v4-page .v4-hero-grafik svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .v4-page .v4-hero-zweispaltig { grid-template-columns: 1fr; }
  .v4-page .v4-hero-grafik { display: none; }
}