/* ============================================================
   pd+ Theme — Premium Industrial Design System (Prompt 8B.4)
   ------------------------------------------------------------
   Loaded AFTER screen.css (see default.hbs). Additive component layer for
   the "Premium Industrial Tech" redesign — does not remove or rename any
   existing screen.css class or existing --pd- / --color- prefixed token (see
   docs/visual-design-system.md for the full rationale). New components use a "p-" prefix (p-hero, p-mega,
   p-bento, ...) to keep a clean namespace and avoid cascade collisions with
   existing classes. Tokens: assets/css/tokens.css §"Premium-Industrial-Erweiterung".

   Design language: dark anthracite/near-black premium sections alternating
   with light content sections; profilsys-green used ONLY for active
   elements, data points, connecting lines and CTAs — never as a full-bleed
   background for body copy. No orange, no blue, no oversized pill buttons,
   no heavy drop shadows, no large border-radius.
   ============================================================ */

/* ---------- 12-column content grid (Prompt 8B.4 §13) ---------- */
.p-grid12 { display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 720px) { .p-grid12 { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .p-grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.p-wrap-wide { width: min(100% - 2 * var(--sp), var(--content-width)); margin-inline: auto; }

/* ---------- Section rhythm: dark / deep / light alternation ---------- */
.p-section { padding-block: var(--space-section); position: relative; }
.p-section--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.p-section--dark h1, .p-section--dark h2, .p-section--dark h3, .p-section--dark h4 { color: var(--color-text-on-dark); }
.p-section--deep { background: var(--color-bg-deep); color: var(--color-text-on-dark); }
.p-section--deep h1, .p-section--deep h2, .p-section--deep h3, .p-section--deep h4 { color: var(--color-text-on-dark); }
.p-section--light { background: var(--color-bg-light); color: var(--color-text-on-light); }
.p-section--white { background: var(--color-surface-light); color: var(--color-text-on-light); }
.p-section--dark .p-eyebrow, .p-section--deep .p-eyebrow { color: var(--color-brand-bright); }
.p-section--dark .p-lead, .p-section--deep .p-lead { color: #aeb3ad; }

/* Fine technical grid backdrop — very subtle, decorative only (aria-hidden where used) */
.p-gridlines {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent);
}

.p-eyebrow {
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-brand-dark); font-weight: 600; margin: 0 0 .6rem; display: inline-flex; align-items: center; gap: .5rem;
}
.p-eyebrow::before { content: ""; width: .5rem; height: 1px; background: currentColor; display: inline-block; }
.p-lead { color: var(--color-text-muted); font-size: var(--step-1); max-width: 56ch; }

/* ---------- Buttons (Prompt 8B.4 §12) — precise radii, not pills ---------- */
.p-btn {
  display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: var(--step-0);
  line-height: 1.25; padding: .8rem 1.35rem; border-radius: var(--radius-small); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
/* Bewusst KEIN white-space:nowrap auf der Basisklasse: in engen Grid-/Flex-Spuren (z. B.
   Bento-Karten bei 768px) zwang nowrap den Button-Text dazu, seine Karte und damit die ganze
   Spur ueber die Viewport-Breite hinaus aufzuspreizen - gefunden im finalen QA-Sweep,
   Prompt 8B.4. Kurze Button-Texte brechen in der Praxis ohnehin nie um; laengere duerfen jetzt
   zweizeilig umbrechen statt die Seite zum Ueberlaufen zu bringen. */
.p-btn:active { transform: translateY(1px); }
.p-btn--primary { background: var(--color-brand); color: #11150c; border-color: var(--color-brand); }
.p-btn--primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.p-btn--secondary { background: transparent; color: var(--color-text-on-light); border-color: var(--color-border-light); }
.p-btn--secondary:hover { border-color: var(--color-brand-dark); color: var(--color-brand-dark); }
.p-section--dark .p-btn--secondary, .p-section--deep .p-btn--secondary, .p-hero .p-btn--secondary { color: var(--color-text-on-dark); border-color: var(--color-border-dark); }
.p-section--dark .p-btn--secondary:hover, .p-section--deep .p-btn--secondary:hover, .p-hero .p-btn--secondary:hover { border-color: var(--color-brand-bright); color: var(--color-brand-bright); }
/* Gefunden Prompt 8B.4D: .p-hero traegt bewusst keine .p-section--dark-Klasse (s. component-library.md
   #4), hat aber selbst einen dunklen Hintergrund - .p-btn--secondary fiel dadurch auf die helle
   Standardfarbe zurueck (dunkler Text auf fast schwarzem Grund, kaum lesbar). Gleiche Fehlerklasse
   wie component-library.md §7 (feste Hintergrundfarbe ohne eigene Textfarben-Zusicherung), hier am
   Hero selbst statt an einer Karte gefunden. .p-hero explizit in den Selektor aufgenommen statt
   jede Verwendungsstelle einzeln zu patchen. */
.p-hero .p-btn--tertiary { color: var(--color-brand-bright); }
/* white-space:normal statt der von .p-btn geerbten nowrap - Textlinks (anders als Boxed-
   Buttons) sollen bei langen Linktexten auf schmalen Bildschirmen umbrechen duerfen statt
   die Seite horizontal zu ueberlaufen (gefunden auf der Plattformseite, Prompt 8B.4). */
.p-btn--tertiary { background: none; border: none; padding: .2rem 0; color: var(--color-brand-dark); font-weight: 600; gap: .4rem; white-space: normal; }
.p-section--dark .p-btn--tertiary, .p-section--deep .p-btn--tertiary { color: var(--color-brand-bright); }
.p-btn--tertiary::after { content: "→"; transition: transform var(--transition-fast); display: inline-block; }
.p-btn--tertiary:hover::after { transform: translateX(3px); }
.p-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-glow); }
.p-btn--block { width: 100%; justify-content: center; }

/* Layout-Utilities (Prompt 8B.4 §4: keine Inline-Styles, wenn eine Klasse sinnvoll ist) */
.p-h-full { height: 100%; }
.p-relative { position: relative; }
.p-section--flush { padding-block: 0; }
.p-max-narrow { max-width: 64ch; }
.section-head.u-center .p-lead { margin-inline: auto; }

/* ---------- Header + Mega-Menu ---------- */
.p-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(20,24,26,.82); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--color-border-dark);
  transition: background var(--transition-normal);
}
.p-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 64px; padding-block: .5rem; transition: padding var(--transition-normal), min-height var(--transition-normal); }
/* Kompakter Header beim Scrollen (Prompt 8B.4F §3) - Klasse wird per rAF-gedrosseltem
   Scroll-Listener in main.js gesetzt (kein Layout-Trashing/Flackern durch zu haeufige Updates,
   und eine kleine Hysterese zwischen Ein-/Ausschaltschwelle verhindert Flackern exakt an der
   Grenze). Nur Innenabstand/Mindesthoehe aendern sich, keine Schriftgroessen - vermeidet
   Reflow-Sprünge im Nav-Text. */
.p-header.is-scrolled .p-header__inner { min-height: 52px; padding-block: .3rem; }
/* Breiterer Innenbereich als der Standard-.wrap (1180px) - bei genau 1280px Viewportbreite
   (Pflicht-Testbreite, Prompt 8B.4 §15) reichte 1180px + Logo + 6 Nav-Punkte + CTA-Button
   nicht aus, der CTA-Button wurde rechts abgeschnitten (gefunden per Playwright-Test). */
.p-header .p-header__inner { width: min(100% - 2 * var(--sp), var(--content-width)); margin-inline: auto; }
.p-header .brand { color: var(--color-text-on-dark); flex: 0 0 auto; }
.p-header .brand__logo { height: 26px; }
.p-header .brand__sub { color: #9a9d97; }
.p-nav { display: none; }
@media (min-width: 1200px) {
  .p-nav { display: flex; align-items: center; gap: .05rem; flex: 1 1 auto; }
}
.p-nav__item { position: relative; }
/* Prompt 8B.4J §6: 7. Hauptpunkt ("Für Ihre Aufgabe" als neues Mega-Menue statt einfachem Link)
   ergaenzt - dadurch reichte der zuvor exakt auf 6 Punkte abgestimmte Platz bei 1280px nicht
   mehr aus (11px horizontaler Overflow, gefunden per Playwright-Ueberlauftest). Innenabstand
   pro Link reduziert statt die Inhaltsbreite/den Container weiter zu vergroessern. */
.p-nav__link {
  display: inline-flex; align-items: center; gap: .3rem; color: #d7d9d4; text-decoration: none;
  font-weight: 500; font-size: var(--step--1); padding: .6rem .42rem; border-radius: var(--radius-small);
  white-space: nowrap; transition: color var(--transition-fast), background var(--transition-fast);
}
.p-nav__link:hover, .p-nav__link:focus-visible { color: var(--color-text-on-dark); background: rgba(255,255,255,.06); }
/* Prompt 8B.4J §6: reine Textfarbe allein wirkte zu unauffaellig als Aktiv-Kennzeichnung -
   zusaetzlich dezente Flaeche + Unterstrich-Akzent, damit die aktuelle Seite auch bei kurzem
   Hinsehen eindeutig erkennbar ist. */
.p-nav__link[aria-current="page"] {
  color: var(--color-brand-bright); background: rgba(195,214,8,.09); position: relative;
}
.p-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .1rem; height: 2px;
  border-radius: 999px; background: var(--color-brand-bright);
}
.p-nav__link .p-nav__caret { width: .6em; height: .6em; opacity: .7; }
.p-header-cta { display: none; flex: 0 0 auto; }
@media (min-width: 1200px) { .p-header-cta { display: inline-flex; } }

/* Mega-menu panel (Prompt 8B.4F - Neufassung, s. docs/navigation-interaction-spec.md).
   FRUEHERER FEHLER: Sichtbarkeit lief ausschliesslich ueber ":hover"/":focus-within" auf
   .p-nav__item. .p-mega ist "position:absolute" mit "top: calc(100% + .6rem)" - die 0,6rem
   hohe Luecke zwischen Trigger-Unterkante und Panel-Oberkante gehoert visuell zu KEINEM
   Element (weder .p-nav__item's eigene Content-Box, die nur bis zur Link-Hoehe reicht, noch
   .p-mega selbst, das erst danach beginnt). Bewegte die Maus direkt vom Trigger ins Panel,
   verliess sie kurz jede hoverbare Flaeche - :hover fiel weg, das Panel schloss. Jetzt ist
   [data-open="true"] (von main.js gesetzt, mit Hover-Intent-Timer + Klick-Umschaltung statt
   rohem :hover) die einzige Sichtbarkeits-Quelle; :focus-within bleibt als reine
   Tastatur-/Kein-JS-Rueckfallebene bestehen (dort besteht das Luecken-Problem nicht, da
   Fokus nicht an Mausposition/Geometrie gebunden ist). */
.p-mega {
  position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(-50%) translateY(4px);
  width: min(640px, 88vw); background: var(--color-surface-dark); border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-medium); box-shadow: var(--shadow-soft); padding: 1.4rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 110;
}
.p-nav__item:focus-within .p-mega,
.p-nav__item[data-open="true"] .p-mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) { .p-mega { transition: none; } }
.p-mega--wide { width: min(760px, 92vw); }
.p-mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.p-mega__colhead { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: #9a9d97; margin: 0 0 .5rem; padding: 0 .8rem; }
.p-mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem .8rem; }
.p-mega__col .p-mega__grid { grid-template-columns: minmax(0,1fr); gap: .2rem; }
.p-mega__link { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border-radius: var(--radius-small); text-decoration: none; color: var(--color-text-on-dark); }
.p-mega__link:hover, .p-mega__link:focus-visible { background: rgba(255,255,255,.06); }
.p-mega__link strong { font-size: var(--step--1); color: var(--color-text-on-dark); }
.p-mega__link span { font-size: .78rem; color: #9a9d97; }
.p-mega__foot { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--color-border-dark); }
/* Trigger + separater Toggle-Chevron (Prompt 8B.4F): der Linktext navigiert immer direkt zur
   Hub-Seite; der Chevron-Button daneben oeffnet/schliesst ausschliesslich das Mega-Menue -
   die Hauptseite bleibt so unabhaengig vom Menuestatus per Klick erreichbar. */
.p-nav__trigger { display: inline-flex; align-items: center; }
.p-nav__chevron {
  display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  margin-left: .1rem; border: none; background: transparent; color: #d7d9d4; border-radius: var(--radius-small);
  cursor: pointer;
}
.p-nav__chevron:hover, .p-nav__chevron:focus-visible { color: var(--color-text-on-dark); background: rgba(255,255,255,.06); }
.p-nav__chevron svg { width: .65em; height: .65em; transition: transform var(--transition-fast); }
.p-nav__item[data-open="true"] .p-nav__chevron svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .p-nav__chevron svg { transition: none; } }

/* Mobile: fullscreen drawer */
.p-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--color-border-dark); border-radius: var(--radius-small); background: transparent;
  color: var(--color-text-on-dark); cursor: pointer; flex: 0 0 auto;
}
.p-nav-toggle:hover { border-color: var(--color-brand-bright); color: var(--color-brand-bright); }
@media (min-width: 1200px) { .p-nav-toggle { display: none; } }
.p-drawer {
  position: fixed; inset: 0; z-index: 200; background: var(--color-bg-deep);
  display: flex; flex-direction: column; overflow-y: auto;
}
.p-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--sp); border-bottom: 1px solid var(--color-border-dark); }
.p-drawer__close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-dark); border-radius: var(--radius-small); background: transparent; color: var(--color-text-on-dark); cursor: pointer;
}
.p-drawer__close:hover { border-color: var(--color-brand-bright); color: var(--color-brand-bright); }
.p-drawer__body { padding: .5rem var(--sp) 1.5rem; flex: 1 1 auto; }
.p-drawer__link, .p-drawer__group summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  padding: .9rem 0; border-bottom: 1px solid var(--color-border-dark); color: var(--color-text-on-dark);
  text-decoration: none; font-weight: 600; font-size: var(--step-1); cursor: pointer; list-style: none;
}
.p-drawer__group summary::-webkit-details-marker { display: none; }
.p-drawer__group summary::after { content: "+"; color: var(--color-brand-bright); font-weight: 400; }
.p-drawer__group[open] summary::after { content: "–"; }
.p-drawer__sub { display: grid; gap: .1rem; padding: .3rem 0 .8rem 1rem; }
.p-drawer__sub a { display: block; padding: .7rem 0; color: #b7bab4; text-decoration: none; min-height: 44px; font-size: var(--step--1); }
/* Aktive Seite im Mobil-Drawer (Prompt 8B.4J §6/§8) - dieselbe [data-nav-path]-Logik in main.js
   setzt aria-current bereits auch auf Drawer-Links, nur das visuelle Kennzeichen fehlte bisher. */
.p-drawer__link[aria-current="page"], .p-drawer__group summary[aria-current="page"] { color: var(--color-brand-bright); }
.p-drawer__sub a:hover, .p-drawer__sub a:focus-visible { color: var(--color-brand-bright); }
.p-drawer__cta { margin-top: 1.2rem; }
.p-drawer[hidden] { display: none; }
/* Escape-to-close, Fokus-Trap und Body-Scroll-Lock jetzt in main.js umgesetzt (Prompt 8B.4F -
   die vorherige Annahme "kein Fokus-Trap noetig" hat den fehlenden initialen Fokus-Sprung in
   den Drawer nicht beruecksichtigt; ohne Trap konnte Tab aus dem sichtbaren Vollbild-Drawer
   heraus zu verdeckten Hintergrundelementen springen). */
body.nav-open { overflow: hidden; }

/* ---------- Hero (dark, technical) ---------- */
.p-hero { background: radial-gradient(120% 90% at 85% 0%, rgba(195,214,8,.08), transparent 55%), var(--color-bg-dark); color: var(--color-text-on-dark); position: relative; overflow: hidden; }
/* Foto-Hero mit Vollbild-Visual, Basisregel (Groesse/Position/Mindesthoehe). Konkretes Bild und
   ggf. ein Text-Scrim kommen ueber eine Modifier-Klasse (z.B. .p-hero--imgbg-retrofit), da
   verschiedene Seiten unterschiedliche Motive nutzen. */
.p-hero--imgbg { background-size: cover; background-position: left center; min-height: clamp(320px, 42vw, 560px); display: flex; align-items: flex-end; }
/* width:100% wurde entfernt (Fund 10.09.2026): ueberschrieb die .wrap-Seitenraender per
   Spezifitaet (Compound-Selektor schlaegt .wrap), wodurch Hero-Inhalt (H1, Buttons) komplett
   an den linken Viewport-Rand gedrueckt wurde, waehrend alle anderen Sektionen normal eingerueckt
   blieben -- .wrap regelt Breite/Zentrierung bereits selbst, keine eigene width-Regel noetig. */
.p-hero--imgbg .p-hero__inner { padding-block: clamp(1.4rem, 1rem + 3vw, 2.8rem); }
/* Retrofit-Hero: Visual ohne eingebrannten Text - h1/Eyebrow/Claim bleiben daher sichtbar
   und bekommen ueber ::before einen Verlaufs-Scrim, damit der Text auf dem helleren
   Bildbereich rechts lesbar bleibt (dasselbe Motiv wie zuvor kurz im Referenzen-Hero). */
.p-hero--imgbg-retrofit { background-image: url("../images/profilsys-media/referenzen-hero-visual.jpg"); }
.p-hero--imgbg-retrofit::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,14,10,.82) 0%, rgba(10,14,10,.55) 40%, rgba(10,14,10,0) 68%);
}
.p-hero--imgbg-retrofit .p-hero__inner { position: relative; z-index: 1; }
.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* .p-hero traegt bewusst NICHT die Klasse .p-section--dark (eigenes Layout/Padding) - die
   globale screen.css-Regel "h1,h2,h3,h4{color:var(--ink)}" wuerde die Ueberschrift sonst
   dunkel auf dunklem Grund faerben (gefunden per Playwright-Kontrasttest, Prompt 8B.4). */
.p-hero h1, .p-hero h2 { color: var(--color-text-on-dark); }
.p-hero__inner { position: relative; z-index: 1; padding-block: clamp(2.5rem, 1.6rem + 5vw, 6rem); display: grid; gap: clamp(2rem, 1.4rem + 2vw, 3rem); grid-template-columns: minmax(0,1fr); }
/* Kompakte Variante fuer Unterseiten-Heros (Loesungen/Anwendungsfaelle/Referenzen) - weniger
   vertikaler Raum als der grosse Startseiten-Hero, da hier kein Datenfluss-Visual daneben steht. */
.p-hero--compact .p-hero__inner { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.p-hero--compact h1 { font-size: clamp(1.8rem, 1.5rem + 1.6vw, 2.6rem); max-width: 28ch; }
@media (min-width: 960px) { .p-hero__inner { grid-template-columns: 1.05fr .95fr; align-items: center; } }
/* Prompt 8B.4F §5: Hero-Visual soll ca. 45-55% der Desktopbreite einnehmen statt ganzseitig
   unter dem Text zu stehen (so noch in Prompt 8B.4D, s. Git-Historie/vorherige Berichte) - die
   Standard-Zweispalter-Aufteilung oben (1.05fr/.95fr, sprich rund 52%/48%) erreicht das bereits
   von selbst. .p-hull__modules bleibt deshalb bewusst bei 2 Spalten in der ca. 48% breiten
   Hero-Spalte (die 4-Spalten-Regel bei >=1100px Viewportbreite greift dort nie, da die Spalte
   selbst bei 1920px Viewport nie 1100px breit wird) - fuer die volltseitige Verwendung auf der
   Plattformseite (#architektur) greift die 4-Spalten-Regel weiterhin normal. */
/* Prompt 8B.4I: EIN responsives Diagramm statt separater Mobile-/Desktop-Darstellungen (die
   beiden liefen frueher fachlich auseinander, s. docs/phase8b4i-architecture-diagram-correction-report.md).
   .p-arch ist jetzt in der Hero-Spalte auf allen Breiten sichtbar; .p-arch selbst passt Abstaende/
   Schriftgroessen ueber eigene Media Queries an (s. dortige Regeln weiter unten). */
.p-hero h1 { font-size: clamp(2.1rem, 1.7rem + 2.6vw, 3.4rem); max-width: 17ch; text-wrap: balance; letter-spacing: -.015em; }
.p-hero__claim { font-size: var(--step-1); color: #c3c6c0; max-width: 46ch; margin-top: .6rem; }
.p-hero__status { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .05em; color: #9a9d97; margin-top: 1.4rem; }
.p-hero__status .p-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 3px var(--color-glow); animation: p-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .p-hero__status .p-dot { animation: none; } }
@keyframes p-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Hero-Visual-Rahmen (schematisch, keine erfundenen Screenshots) */
.p-hero__visual { position: relative; }
/* Foto-Hero (Retrofit, Prompt-Nachbesserung "muss scheppern"): echtes Projektfoto als
   dominantes Visual statt reiner Text-Karten. Foto oben groß, Vorher/Nachher darunter
   als kompakter Streifen - Karten bleiben Text (keine erfundenen Screenshots), aber
   treten hinter dem Foto zurück statt den ganzen Visual-Bereich zu füllen. */
.p-hero__visual--photo { display: grid; gap: 1rem; }
.p-hero__visual--photo .p-mediafig { box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); border-color: var(--color-border-dark); }
.p-hero__visual--photo .beforeafter--compact { gap: .6rem; }
.p-hero__visual--photo .beforeafter--compact .p-techcard { padding: .8rem .9rem; }
.p-hero__visual--photo .beforeafter--compact h3 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .04em; color: var(--color-brand-bright); margin-bottom: .3rem; }
.p-hero__visual--photo .beforeafter--compact .prozess-kette { font-size: .78rem; line-height: 1.4; }
@media (max-width: 719px) { .p-hero__visual--photo .beforeafter--compact { grid-template-columns: minmax(0,1fr) !important; } }
/* p-flow-move wird von .p-arch__connector::before weiterverwendet (dezente Datenfluss-Animation,
   s. Prompt 8B.4H §8) - die .p-flow/.p-flow__*-Klassen selbst wurden mit dem alten, fachlich
   irrefuehrenden Mobile-Flow in Prompt 8B.4I entfernt (s. docs/phase8b4i-architecture-diagram-correction-report.md). */
@keyframes p-flow-move { from { background-position-y: 0; } to { background-position-y: 8px; } }

/* ---------- Plattformhuelle: zwei ineinanderliegende Ebenen (Prompt 8B.4D §3/§4) ----------
   Ersetzt die frueher fälschlich als "extern" dargestellte SPS-/Automation-Ebene: sie liegt
   jetzt sichtbar INNERHALB der aeusseren profilsys-Huelle, neben (nicht anstatt) dem pd+-Kern.
   Nur echte Drittsysteme (Fremd-ERP, CAD/PDM/PLM, vorhandene Maschinen, nicht ersetzte Fremd-SPS)
   erscheinen als eigene Tier ausserhalb der Huelle (ueber die bestehenden .p-arch__tier/-connector
   Klassen). Maximal 3 visuelle Hierarchieebenen: aussen (Extern) -> Huelle (profilsys) -> Kern (pd+). */
.p-hull__outer {
  border: 1px solid var(--color-brand-dark); border-radius: var(--radius-medium);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand) 6%, var(--color-surface-dark)), var(--color-surface-dark));
  padding: 1.6rem 1.4rem;
}
/* Prompt 8B.4H §8: Labels/Module/Chips durchgaengig vergroessert (Font-Groessen + Innenabstaende)
   - "weniger kleine Texte", ohne die bestehenden 3 Hierarchieebenen (Extern -> Huelle -> Kern)
   zu veraendern. */
.p-hull__outer-label {
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-brand-bright); text-align: center; display: block; margin-bottom: 1.2rem; font-weight: 700;
}
.p-hull__core {
  border: 1px solid var(--color-brand); border-radius: var(--radius-medium);
  background: color-mix(in srgb, var(--color-brand) 14%, var(--color-bg-deep));
  padding: 1.2rem 1.1rem;
}
.p-hull__core-label {
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-brand-bright); text-align: center; display: block; margin-bottom: .9rem; font-weight: 700;
}
/* Prompt 8B.4I §4: auto-fit statt fester Spaltenzahl pro Breakpoint - jede Karte behaelt eine
   garantierte Mindestbreite (minmax(...)), der Browser entscheidet selbst, wie viele Spalten in
   die jeweils verfuegbare Breite passen (schmale Hero-Spalte vs. volle Wrap-Breite auf
   Loesungs-/Referenz-/Plattformseiten - beide Kontexte nutzen dieselbe Partial, s.
   docs/phase8b4i-architecture-diagram-correction-report.md "Ursache der Ueberlappungen"). Damit
   entfaellt die Notwendigkeit, pro Kontext eigene Breakpoints zu pflegen; min-width:0 verhindert,
   dass ein Grid-Kind seine eigene minimale Inhaltsbreite erzwingt und damit Nachbarkarten
   verdraengt (die eigentliche Ursache der zuvor gefundenen Ueberlappungen). */
.p-hull__modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: .7rem; }
.p-hull__module {
  min-width: 0; border: 1px solid var(--color-border-dark); border-radius: var(--radius-small); background: rgba(255,255,255,.05);
  padding: .8rem .7rem; text-align: center; font-size: .88rem; line-height: 1.3; font-weight: 600; color: var(--color-text-on-dark);
  overflow-wrap: break-word; hyphens: auto;
}
.p-hull__automation {
  margin-top: 1.2rem; border: 1px solid var(--color-border-dark); border-radius: var(--radius-small);
  padding: 1rem 1.1rem; background: rgba(255,255,255,.025);
}
.p-hull__automation-label {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-brand-bright); display: block; margin-bottom: .65rem; line-height: 1.4;
}
.p-hull__automation-label small {
  display: block; font-size: .82em; letter-spacing: .02em; text-transform: none; color: #9a9d97; font-weight: 400; margin-top: .2rem;
}
/* 4 gebuendelte Chips statt zuvor 7 einzelner (Prompt 8B.4H §8: "Module nicht in zu viele kleine
   Kaestchen zerlegen") - inhaltlich unveraendert (dieselben 7 Begriffe), nur zu sinnvollen
   Paaren zusammengefasst und damit auf Augenhoehe mit der Modulreihe des Kerns. Gleiches
   auto-fit-Prinzip wie .p-hull__modules (s. Kommentar dort). */
.p-hull__automation-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: .5rem; }
.p-hull__chip {
  min-width: 0; border: 1px solid var(--color-border-dark); border-radius: var(--radius-small); padding: .55rem .6rem; font-size: .82rem;
  line-height: 1.3; color: var(--color-text-on-dark); background: rgba(255,255,255,.04); text-align: center;
  overflow-wrap: break-word; hyphens: auto;
}

/* ---------- Echtes Bildmaterial (Prompt 8B.4G) ----------
   Konsistenter Rahmen fuer alle aus profilsys.de migrierten, geprueften Medien - ein
   einheitliches Erscheinungsbild unabhaengig vom Quellbild, "Bilder als Beweise, nicht als
   Dekoration" (Auftrag §11): technische Bildunterschrift statt reiner Dekoration, kontrolliertes
   Seitenverhaeltnis via object-fit, klare Kennzeichnung historischer/nicht-pd+-eigener Screens
   ueber .p-mediafig__badge. */
.p-mediafig { margin: 0; border: 1px solid var(--color-border-light); border-radius: var(--radius-medium); overflow: hidden; background: var(--color-surface-light); }
.p-section--dark .p-mediafig, .p-section--deep .p-mediafig { border-color: var(--color-border-dark); background: var(--color-surface-dark); }
.p-mediafig picture, .p-mediafig img { display: block; width: 100%; height: auto; }
.p-mediafig--frameless { border: none; background: none; border-radius: 0; }
.p-mediafig figcaption { padding: .6rem .8rem; font-size: .8rem; color: var(--color-text-muted); border-top: 1px solid var(--color-border-light); }
.p-section--dark .p-mediafig figcaption, .p-section--deep .p-mediafig figcaption { color: #aeb3ad; border-top-color: var(--color-border-dark); }
.p-mediafig__badge {
  display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--color-brand) 16%, transparent); color: var(--color-brand-dark);
}
.p-section--dark .p-mediafig__badge, .p-section--deep .p-mediafig__badge { color: var(--color-brand-bright); }
/* Badge-Varianten (Prompt 8B.4H, einheitliches Produkt-Screenshot-System, s.
   docs/product-screenshot-system.md): vier klar unterscheidbare Kennzeichnungen statt einer
   einzigen Optik fuer alles - "aktuell" und "historisch"/"schematisch" muessen sich auf den
   ersten Blick unterscheiden, sonst verwischt genau die Unterscheidung, die die Kennzeichnung
   leisten soll. */
.p-mediafig__badge--current { background: color-mix(in srgb, var(--color-brand) 32%, transparent); color: var(--color-brand-dark); font-weight: 700; }
.p-section--dark .p-mediafig__badge--current, .p-section--deep .p-mediafig__badge--current { color: var(--color-brand-bright); }
.p-mediafig__badge--historic { background: transparent; border: 1px solid var(--color-border-light); color: var(--color-text-muted); }
.p-section--dark .p-mediafig__badge--historic, .p-section--deep .p-mediafig__badge--historic { border-color: var(--color-border-dark); color: #aeb3ad; }
.p-mediafig__badge--schematic { background: transparent; border: 1px dashed var(--color-border-light); color: var(--color-text-muted); }
.p-section--dark .p-mediafig__badge--schematic, .p-section--deep .p-mediafig__badge--schematic { border-color: var(--color-border-dark); color: #aeb3ad; }
/* Kontrollierte Bildverhaeltnisse in Grid-Kontexten (Startseite/Plattform-Mosaik). Kein CSS
   aspect-ratio noetig: die width/height-HTML-Attribute auf <img> (s. partials/media-figure.hbs)
   reichen modernen Browsern bereits, das intrinsische Seitenverhaeltnis automatisch zu reservieren
   und Layout-Shifts zu vermeiden (Auftrag §7/§12). */
.p-mediagrid { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); align-items: stretch; }
@media (min-width: 720px) { .p-mediagrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Prompt 8B.4K: zwei Bilder mit unterschiedlichem Seitenverhaeltnis (z.B. 600x600 neben 640x480)
   liessen die kuerzere Karte eine grosse leere Flaeche unter sich lassen - object-fit:cover
   allein reichte nicht, da die uebergeordnete Kartenhoehe selbst nicht an die Nachbarkarte
   angeglichen war (gefunden bei der visuellen Abnahme). .p-mediafig als Flex-Spalte macht das
   Bild zum wachsenden Element, die Bildunterschrift bleibt in natuerlicher Groesse am Ende -
   beide Karten einer Reihe erreichen dadurch automatisch dieselbe Gesamthoehe. */
.p-mediagrid .p-mediafig { display: flex; flex-direction: column; height: 100%; }
.p-mediagrid .p-mediafig picture { flex: 1 1 auto; min-height: 0; }
.p-mediagrid .p-mediafig img { object-fit: cover; width: 100%; height: 100%; }

/* ---------- Product screenshot / device frame (Prompt 8B.4 §6/§14) ---------- */
.p-screenframe {
  border: 1px solid var(--color-border-dark); border-radius: var(--radius-medium); background: var(--color-surface-dark);
  padding: .5rem; box-shadow: var(--shadow-soft);
}
.p-screenframe__bar { display: flex; align-items: center; gap: .35rem; padding: .4rem .5rem .6rem; }
.p-screenframe__bar span { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255,255,255,.18); }
.p-screenframe__body { border-radius: var(--radius-small); overflow: hidden; background: #0e1214; border: 1px solid var(--color-border-dark); }
.p-screenframe img { display: block; width: 100%; height: auto; }

/* Schematic UI mock (used when no real screenshot exists — abstract bars/gauges,
   never claims a specific unverified feature; see docs/media-guideline.md) */
.p-uimock { width: 100%; padding: 1rem; display: grid; gap: .7rem; }
.p-uimock__toprow { display: flex; gap: .5rem; }
.p-uimock__pill { height: .5rem; border-radius: 999px; background: rgba(255,255,255,.08); }
.p-uimock__pill--accent { background: var(--color-brand); opacity: .85; }
.p-uimock__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.p-uimock__card { border: 1px solid var(--color-border-dark); border-radius: var(--radius-small); padding: .6rem; display: grid; gap: .4rem; }
.p-uimock__bar { height: .4rem; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.p-uimock__bar span { display: block; height: 100%; background: var(--color-brand); }
.p-uimock__rows { display: grid; gap: .35rem; margin-top: .2rem; }
.p-uimock__row { height: .45rem; border-radius: 4px; background: rgba(255,255,255,.06); }
/* Vordefinierte Fuellgrade fuer schematische Balken/Pillen - vermeidet Inline-Styles fuer
   Breitenwerte (Prompt 8B.4 §4: "keine Inline-Styles, wenn eine wiederverwendbare Klasse
   sinnvoll ist"), bei gleichzeitig visuell abwechslungsreichen Mock-Datenpunkten. */
.p-w-a { width: 30%; } .p-w-b { width: 35%; } .p-w-c { width: 40%; } .p-w-d { width: 45%; }
.p-w-e { width: 55%; } .p-w-f { width: 60%; } .p-w-g { width: 70%; } .p-w-h { width: 80%; }

/* ---------- Sticky page-navigation (technical/platform-type pages) ---------- */
.p-pagenav {
  position: sticky; top: 64px; z-index: 80; background: rgba(20,24,26,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-dark); overflow-x: auto;
}
.p-pagenav__inner { display: flex; gap: 1.6rem; padding-block: .8rem; white-space: nowrap; }
.p-pagenav a { color: #b7bab4; text-decoration: none; font-size: var(--step--1); font-weight: 600; padding: .3rem 0; border-bottom: 2px solid transparent; }
.p-pagenav a:hover, .p-pagenav a:focus-visible { color: var(--color-brand-bright); }
.p-pagenav a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-glow); border-radius: var(--radius-small); }
/* Scroll-Ziele nicht unter dem kombinierten Sticky-Header+Pagenav verschwinden lassen */
[id]:is(#architektur, #module, #schnittstellen, #security-betrieb, #details, #inhalt, #verwandte-loesungen) { scroll-margin-top: 132px; }

/* ---------- Trust-facts / KPI strip ---------- */
.p-kpistrip { display: grid; gap: var(--gap); grid-template-columns: minmax(0,1fr); border-top: 1px solid var(--color-border-dark); border-bottom: 1px solid var(--color-border-dark); padding-block: 1.6rem; }
@media (min-width: 640px) { .p-kpistrip { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .p-kpistrip { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.p-kpi { display: flex; flex-direction: column; gap: .2rem; padding-inline: .5rem; border-left: 1px solid var(--color-border-dark); }
.p-kpi:first-child { border-left: none; }
@media (max-width: 639px) { .p-kpi { border-left: none; border-top: 1px solid var(--color-border-dark); padding-top: 1rem; } .p-kpi:first-child { border-top: none; padding-top: 0; } }
/* Gefunden Prompt 8B.4F: .p-kpi__num nutzte unbedingt --color-brand-bright (fuer dunkle
   Hintergruende gedacht, s. visual-design-system.md §2), obwohl .p-kpistrip ausschliesslich in
   .p-section--light-Kontexten verwendet wird - helles Gruengelb auf nahezu weissem Grund ergab
   unzureichenden Kontrast. Gleiche Fehlerklasse wie component-library.md §7 (feste Farbe ohne
   Ruecksicht auf den tatsaechlichen Verwendungskontext). --color-brand-dark ist die fuer helle
   Flaechen vorgesehene, AA-konforme Variante derselben Markenfarbe; expliziter Dark-Override
   zur Absicherung, falls die Komponente kuenftig auch in dunklen Sektionen verwendet wird. */
.p-kpi__num { font-size: var(--step-2); font-weight: 700; color: var(--color-brand-dark); letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-decoration: none; }
a.p-kpi__num:hover, a.p-kpi__num:focus-visible { text-decoration: underline; }
.p-section--dark .p-kpi__num, .p-section--deep .p-kpi__num { color: var(--color-brand-bright); }
.p-kpi__icon { width: 1.6rem; height: 1.6rem; color: var(--color-brand-dark); margin-bottom: .4rem; display: block; }
.p-section--dark .p-kpi__icon, .p-section--deep .p-kpi__icon { color: var(--color-brand-bright); }
/* Textvariante der Beweisleiste (Prompt 8B.4D §7) statt einer Zahl - kleinere Schrift, damit
   laengere Begriffe wie "Vom ERP bis zur Feldebene" nicht umbrechen/ueberlaufen. */
.p-kpi__num--text { font-size: var(--step-0); font-variant-numeric: normal; text-wrap: balance; }
.p-kpi__label { font-size: .8rem; color: #9a9d97; }

/* ---------- Bento grid (situations, module landscape) ---------- */
.p-bento { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) { .p-bento { grid-template-columns: repeat(6, minmax(0,1fr)); } }
/* min-width:0 auf dem Grid-Item selbst: minmax(0,1fr) allein reicht nicht, wenn der Inhalt
   (hier: ein nicht umbrechender .p-btn-Text) intrinsisch breiter waere - Grid-/Flex-Items
   haben per Default min-width:auto (= Inhalts-Mindestbreite), das die Spur trotz minmax(0,...)
   aufspreizen kann. Gefunden bei 768px im QA-Sweep (Prompt 8B.4), dieselbe Bug-Klasse wie in
   frueheren Phasen (docs/solution-page-template.md-Historie), hier an der Bento-Quelle behoben. */
.p-bento__cell { grid-column: span 6; min-width: 0; }
.p-bento__cell .p-techcard { min-width: 0; }
@media (min-width: 720px) {
  .p-bento__cell--wide { grid-column: span 4; }
  .p-bento__cell--narrow { grid-column: span 2; }
  .p-bento__cell--half { grid-column: span 3; }
}

/* ---------- Technical cards ---------- */
.p-techcard {
  border: 1px solid var(--color-border-light); border-radius: var(--radius-medium); background: var(--color-surface-light);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; height: 100%;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.p-techcard:hover { border-color: var(--color-brand-dark); }
.p-section--dark .p-techcard, .p-section--deep .p-techcard {
  background: var(--color-surface-dark); border-color: var(--color-border-dark); color: var(--color-text-on-dark);
}
.p-section--dark .p-techcard:hover, .p-section--deep .p-techcard:hover { border-color: var(--color-brand-bright); }
.p-techcard__index { font-family: var(--font-mono); font-size: .74rem; color: var(--color-brand-dark); letter-spacing: .06em; }
.p-section--dark .p-techcard__index, .p-section--deep .p-techcard__index { color: var(--color-brand-bright); }
.p-techcard h3 { font-size: var(--step-1); margin: 0; }
.p-techcard p { margin: 0; color: var(--color-text-muted); font-size: var(--step--1); }
.p-section--dark .p-techcard p, .p-section--deep .p-techcard p { color: #aeb3ad; }
.p-section--dark .p-techcard .prozess-kette, .p-section--deep .p-techcard .prozess-kette { color: #aeb3ad; }
.p-techcard__link { margin-top: auto; font-weight: 600; font-size: var(--step--1); color: var(--color-brand-dark); text-decoration: none; }
.p-section--dark .p-techcard__link, .p-section--deep .p-techcard__link { color: var(--color-brand-bright); }
.p-techcard--link { text-decoration: none; color: inherit; }

/* ---------- Architecture diagram v2 (layered system, dark) ---------- */
.p-arch { display: flex; flex-direction: column; gap: 0; max-width: 980px; margin-inline: auto; min-width: 0; }
.p-arch__tier {
  min-width: 0; border: 1px solid var(--color-border-dark); border-radius: var(--radius-medium); background: var(--color-surface-dark);
  padding: 1rem 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: center;
}
.p-arch__tier--core { border-color: var(--color-brand-dark); background: color-mix(in srgb, var(--color-brand) 7%, var(--color-surface-dark)); }
.p-arch__label { width: 100%; text-align: center; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: #9a9d97; margin-bottom: .35rem; }
.p-arch__tier--core .p-arch__label { color: var(--color-brand-bright); }
.p-arch__node {
  min-width: 0; max-width: 100%; border: 1px solid var(--color-border-dark); border-radius: var(--radius-small);
  background: rgba(255,255,255,.03); padding: .6rem 1rem; font-weight: 600; font-size: .9rem; line-height: 1.3;
  color: var(--color-text-on-dark); text-align: center; overflow-wrap: break-word;
}
.p-arch__connector { display: flex; align-items: center; justify-content: center; height: 2.4rem; position: relative; }
.p-arch__connector::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--color-brand-dark); background: linear-gradient(var(--color-brand) 0 50%, transparent 0) ; background-size: 1px 6px; }
/* Dezente Datenfluss-Animation (Prompt 8B.4H §8): rein dekorativ, das Diagramm ist auch ganz ohne
   Animation vollstaendig verstaendlich (statische Linie + Beschriftung reichen). */
@media (prefers-reduced-motion: no-preference) { .p-arch__connector::before { animation: p-flow-move 1.2s linear infinite; } }
.p-arch__connector span { position: relative; background: var(--color-bg-deep); padding: 0 .7rem; font-family: var(--font-mono); font-size: .78rem; color: var(--color-brand-bright); font-weight: 600; text-align: center; }
.p-arch__caption { text-align: center; color: #9a9d97; font-size: .86rem; max-width: 60ch; margin: 1rem auto 0; }
.p-section--light .p-arch__caption, .p-section--white .p-arch__caption { color: var(--color-text-muted); }
.p-arch__subnote { text-align: center; color: #7d8079; font-size: .74rem; max-width: 56ch; margin: .8rem auto 0; line-height: 1.5; }

/* Prompt 8B.4I §5: dasselbe Diagramm laeuft jetzt auch unter 900px (kein separater Mobile-Flow
   mehr) - kompaktere Abstaende/Schrift auf schmalen Screens, damit es nicht mehrere
   Bildschirmhoehen einnimmt, ohne dabei unter die geforderten 15-16px fuer zentrale Labels zu
   fallen. Ab 320px getestet (s. Testmatrix im Abschlussbericht). */
@media (max-width: 480px) {
  .p-hull__outer { padding: 1.1rem .9rem; }
  .p-hull__core { padding: .9rem .8rem; margin-bottom: .1rem; }
  .p-hull__automation { margin-top: .9rem; padding: .8rem .9rem; }
  .p-arch__tier { padding: .8rem .9rem; gap: .45rem; }
  .p-arch__node { padding: .5rem .75rem; font-size: .85rem; }
  .p-arch__connector { height: 1.8rem; }
}

/* ---------- Data-flow strip (compact, inline within content) ---------- */
.p-dataflow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .8rem; }
.p-dataflow__step { border: 1px solid var(--color-border-light); border-radius: var(--radius-small); padding: .35rem .7rem; background: var(--color-surface-light); }
.p-section--dark .p-dataflow__step, .p-section--deep .p-dataflow__step { border-color: var(--color-border-dark); background: var(--color-surface-dark); color: var(--color-text-on-dark); }
.p-dataflow__arrow { color: var(--color-brand-dark); }
.p-section--dark .p-dataflow__arrow, .p-section--deep .p-dataflow__arrow { color: var(--color-brand-bright); }
.p-dataflow__step strong { display: block; font-family: var(--font-body, inherit); font-size: .82rem; margin-bottom: .1rem; }
.p-dataflow__step small { display: block; font-size: .72rem; color: var(--color-text-muted); font-weight: 400; }

/* ---------- Schematische Prozessdiagramme (Prompt 8B.4H §5/§6): fuer Produktbereiche ohne
   reales Bildmaterial - nutzt denselben .p-mediafig-Rahmen wie echte Fotos (konsistentes
   Framing), zeigt aber bewusst KEINEN erfundenen Bildschirminhalt, nur eine abstrakte
   Stationenkette (.p-dataflow). Kennzeichnung ausschliesslich ueber badgeType="schematic",
   s. docs/product-screenshot-system.md. ---------- */
.p-mediafig .p-dataflow { padding: 1.6rem 1.4rem; justify-content: center; gap: .3rem .4rem; }
.p-mediafig .p-dataflow__step { text-align: left; min-width: 8.5rem; }

/* ---------- Project timeline (horizontal on desktop) ---------- */
.p-timeline { display: grid; gap: 1.4rem; grid-template-columns: minmax(0,1fr); counter-reset: ptl; }
@media (min-width: 860px) { .p-timeline { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; } }
@media (min-width: 860px) { .p-timeline--3col { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.p-timeline__item { position: relative; padding-top: 2.2rem; }
.p-timeline__item::before {
  counter-increment: ptl; content: counter(ptl);
  position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; border-radius: var(--radius-small);
  background: var(--color-brand); color: #11150c; font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.p-timeline__item::after {
  content: ""; position: absolute; top: 1rem; left: 2rem; right: -1rem; height: 1px; background: var(--color-border-light);
}
.p-section--dark .p-timeline__item::after, .p-section--deep .p-timeline__item::after { background: var(--color-border-dark); }
@media (max-width: 859px) { .p-timeline__item::after { display: none; } }
.p-timeline__item:last-child::after { display: none; }
.p-timeline__item h3 { font-size: var(--step-0); margin: 0 0 .3rem; }
.p-timeline__item p { margin: 0; color: var(--color-text-muted); font-size: var(--step--1); }
.p-section--dark .p-timeline__item p, .p-section--deep .p-timeline__item p { color: #aeb3ad; }

/* ---------- Vorher/Nachher-Vergleich (Prompt 8B.4H §10, Case Studies) ---------- */
.p-compare { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) { .p-compare { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; } }
.p-compare__col { border: 1px solid var(--color-border-light); border-radius: var(--radius-medium); padding: 1.2rem 1.3rem; }
.p-section--dark .p-compare__col, .p-section--deep .p-compare__col { border-color: var(--color-border-dark); }
.p-compare__col--after { border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 6%, transparent); }
.p-compare__label { display: block; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: .5rem; }
.p-compare__col--after .p-compare__label { color: var(--color-brand-dark); font-weight: 700; }
.p-section--dark .p-compare__col--after .p-compare__label, .p-section--deep .p-compare__col--after .p-compare__label { color: var(--color-brand-bright); }
.p-compare__col p { margin: 0; font-size: var(--step--1); }

/* Timeline-Optik direkt auf der Projektphasen-Liste im Case-Study-Fliesstext (Prompt 8B.4H §10):
   .p-casestory enthaelt je Referenz genau eine <ul> (die "Projektphasen"-Liste, s.
   scripts/ghost-content.mjs) - keine Template-/Datenaenderung noetig, reine CSS-Umdeutung
   derselben, bereits redaktionell geprueften Liste in eine nummerierte Ablaufkette (dieselbe
   Optik wie .p-timeline an anderer Stelle im Theme). */
.p-casestory ul { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; gap: 1.3rem; grid-template-columns: minmax(0,1fr); counter-reset: pcs; }
@media (min-width: 720px) { .p-casestory ul { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } }
.p-casestory ul li { position: relative; padding-top: 2.3rem; font-size: var(--step--1); color: var(--color-text-muted); }
.p-casestory ul li::before {
  counter-increment: pcs; content: counter(pcs);
  position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; border-radius: var(--radius-small);
  background: var(--color-brand); color: #11150c; font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Company-history timeline (vertical, year-marker variant) */
.p-histline { display: grid; gap: 0; border-left: 1px solid var(--color-border-light); margin-left: .5rem; }
.p-section--dark .p-histline, .p-section--deep .p-histline { border-color: var(--color-border-dark); }
.p-histline__item { position: relative; padding: 0 0 1.8rem 1.6rem; }
.p-histline__item::before { content: ""; position: absolute; left: -5px; top: .3rem; width: 9px; height: 9px; border-radius: 50%; background: var(--color-brand); }
.p-histline__year { font-family: var(--font-mono); font-weight: 700; color: var(--color-brand-dark); font-size: .82rem; letter-spacing: .04em; }
.p-section--dark .p-histline__year, .p-section--deep .p-histline__year { color: var(--color-brand-bright); }
.p-histline__item h3 { font-size: var(--step-0); margin: .2rem 0 .3rem; }
.p-histline__item p { margin: 0; color: var(--color-text-muted); }
.p-section--dark .p-histline__item p, .p-section--deep .p-histline__item p { color: #aeb3ad; }

/* ---------- Competence / role matrix ---------- */
.p-matrix { display: grid; gap: 1px; background: var(--color-border-light); border: 1px solid var(--color-border-light); border-radius: var(--radius-medium); overflow: hidden; grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) { .p-matrix { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* .p-matrix__cell hat IMMER einen hellen Kartenhintergrund, unabhaengig von der umgebenden
   Sektion (hell oder dunkel) - Ueberschrift/Text brauchen daher eine eigene, feste Farbe statt
   die (auf dunklem Grund helle) vererbte Ueberschriftenfarbe zu uebernehmen. Sonst helle
   Schrift auf weisser Karte = praktisch unlesbar (gefunden auf der Unternehmensseite,
   Prompt 8B.4 - das Gegenstueck zum zuvor behobenen Hero-Kontrastfehler). */
.p-matrix__cell { background: var(--color-surface-light); padding: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.p-matrix__cell h3 { font-size: var(--step-0); margin: 0; color: var(--color-text-on-light); }
.p-matrix__cell p { margin: 0; color: var(--color-text-muted); font-size: var(--step--1); }

/* ---------- Bento / role tabs (Entscheider-Nutzen) ---------- */
.p-tabs { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid var(--color-border-light); margin-bottom: 1.2rem; }
.p-section--dark .p-tabs, .p-section--deep .p-tabs { border-color: var(--color-border-dark); }
.p-tabs__btn {
  background: none; border: none; border-bottom: 2px solid transparent; padding: .7rem .9rem; font-weight: 600;
  font-size: var(--step--1); color: var(--color-text-muted); cursor: pointer; margin-bottom: -1px;
}
.p-tabs__btn[aria-selected="true"] { color: var(--color-brand-dark); border-bottom-color: var(--color-brand-dark); }
.p-section--dark .p-tabs__btn, .p-section--deep .p-tabs__btn { color: #9a9d97; }
.p-section--dark .p-tabs__btn[aria-selected="true"], .p-section--deep .p-tabs__btn[aria-selected="true"] { color: var(--color-brand-bright); border-bottom-color: var(--color-brand-bright); }
.p-tabs__panel[hidden] { display: none; }

/* ---------- CTA band ---------- */
.p-ctaband { background: var(--color-bg-dark); color: var(--color-text-on-dark); border-radius: var(--radius-medium); padding: clamp(2rem, 1.4rem + 3vw, 3.2rem); position: relative; overflow: hidden; border: 1px solid var(--color-border-dark); }
.p-ctaband::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-brand); }
.p-ctaband h2 { color: #fff; max-width: 26ch; }
.p-ctaband p { color: #b7bab4; max-width: 54ch; }
/* .p-ctaband ist IMMER dunkel, unabhaengig von der umgebenden Sektion (haeufig in einer
   .p-section--light eingebettet, s. partials/cta.hbs) - .p-btn--secondary braucht daher hier
   eine eigene Farbregel statt sich auf die (dann nicht zutreffende) .p-section--dark-Vererbung
   zu verlassen. Gefunden im finalen QA-Sweep, dieselbe Bug-Klasse wie .p-matrix__cell/
   .p-trustblock-card, hier umgekehrt: dunkle Karte in heller Sektion statt umgekehrt. */
.p-ctaband .p-btn--secondary { color: var(--color-text-on-dark); border-color: var(--color-border-dark); }
.p-ctaband .p-btn--secondary:hover { border-color: var(--color-brand-bright); color: var(--color-brand-bright); }

/* ---------- Form container ---------- */
.p-formpanel {
  border: 1px solid var(--color-border-light); border-radius: var(--radius-medium); background: var(--color-surface-light);
  padding: clamp(1.4rem, 1.1rem + 1.5vw, 2.2rem); max-width: 640px;
}
.p-formpanel--dark { background: var(--color-surface-dark); border-color: var(--color-border-dark); color: var(--color-text-on-dark); }
/* Formularfelder bleiben bewusst hell (Wiedererkennung/Tipp-Kontrast) - nur Labels/Hinweistexte
   werden fuer den dunklen Panel-Hintergrund angepasst (sonst zu wenig Kontrast). */
.p-formpanel--dark .field label,
.p-formpanel--dark .form__step-label { color: var(--color-text-on-dark); }
.p-formpanel--dark .field__hint,
.p-formpanel--dark .form__note,
.p-formpanel--dark .form__consent,
.p-formpanel--dark .form__step2 summary { color: #c3c6c0; }
.p-formpanel--dark .form__step2 { border-color: var(--color-border-dark); background: rgba(255,255,255,.02); }
.p-formpanel--dark .form__consent a { color: var(--color-brand-bright); }
.p-trustblock { display: grid; gap: .7rem; margin-bottom: 1.4rem; }
.p-trustblock__item { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--step--1); color: var(--color-text-muted); }
.p-trustblock__item::before { content: ""; width: .5rem; height: .5rem; border-radius: 1px; background: var(--color-brand); margin-top: .35rem; flex: 0 0 auto; }
.p-formpanel--dark .p-trustblock__item { color: #b7bab4; }
/* Geordnete Prozessschritte (z. B. "Was nach Ihrer Anfrage passiert"): native Nummerierung
   statt Quadrat-Bullet, da hier die Reihenfolge selbst die Information ist. */
ol.p-trustblock { list-style: decimal; padding-left: 1.3rem; gap: .5rem; }
ol.p-trustblock .p-trustblock__item { display: list-item; padding-left: .3rem; }
ol.p-trustblock .p-trustblock__item::before { content: none; }
/* Immer heller Kartenhintergrund unabhaengig von der Sektion - Ueberschrift/Text brauchen
   deshalb feste Farben statt der (auf dunklem Grund hellen) vererbten Ueberschriftenfarbe
   (derselbe Fehlermuster wie .p-matrix__cell, s. dort - hier proaktiv vorab behoben, da dieser
   Block auf der Systemcheck-Seite innerhalb einer .p-section--dark eingebunden ist). */
.p-trustblock-card {
  border: 1px solid var(--color-border-light); border-radius: var(--radius-medium); background: var(--color-surface-light);
  padding: 1.3rem 1.4rem; color: var(--color-text-on-light);
}
.p-trustblock-card h3 { font-size: var(--step-1); margin: 0 0 .8rem; color: var(--color-text-on-light); }
.p-trustblock-card .p-trustblock__item { color: var(--color-text-muted); }
.p-trustblock-card .field__hint { color: var(--color-text-muted); }

/* ---------- FAQ (premium accordion, native details/summary) ---------- */
.p-faq { display: grid; gap: .6rem; }
.p-faq details { border: 1px solid var(--color-border-light); border-radius: var(--radius-small); background: var(--color-surface-light); }
.p-section--dark .p-faq details, .p-section--deep .p-faq details { background: var(--color-surface-dark); border-color: var(--color-border-dark); }
.p-faq summary { cursor: pointer; padding: 1rem 2.6rem 1rem 1.1rem; font-weight: 600; position: relative; list-style: none; color: inherit; }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--color-brand-dark); }
.p-section--dark .p-faq summary::after, .p-section--deep .p-faq summary::after { color: var(--color-brand-bright); }
.p-faq details[open] summary::after { content: "–"; }
.p-faq__body { padding: 0 1.1rem 1.1rem; color: var(--color-text-muted); }
.p-section--dark .p-faq__body, .p-section--deep .p-faq__body { color: #b7bab4; }

/* ---------- Case-study cards (Prompt 8B.4D §8 - Neufassung) ----------
   Fehler in der Vorversion: fester .9fr/1.1fr-Innenraster JE Karte, kombiniert mit einem
   3-Spalten-Aussenraster (.grid.grid-3) auf Startseite/Referenzen-Hub, quetschte den Textbereich
   auf ca. 18% der Viewportbreite - Ueberschriften/Text wurden abgeschnitten bzw. wirkten
   gequetscht. Neu: eigenes Aussenraster .p-refgrid mit garantierter Mindestspaltenbreite statt
   fester Spaltenzahl, und die Karte selbst layoutet vertikal (Visual oben, Text darunter in
   voller Kartenbreite) statt intern nochmals zu splitten. Der frueher rein dekorative, informationslose
   schwarze .p-uimock-Block wurde durch eine kompakte, tatsaechlich aussagekraeftige Mini-Datenfluss-
   Visualisierung ersetzt (zeigt die tatsaechlich eingesetzten Ebenen). */
/* minmax(min(320px,100%),1fr) statt minmax(320px,1fr): auf sehr schmalen Viewports (320px)
   ist .wrap durch die Seitenabstaende schmaler als 320px - eine feste 320px-Mindestspalte
   sprengte dort die Seite (gefunden per Playwright-Ueberlauftest, Prompt 8B.4D). min(...,100%)
   erlaubt der Spalte, auf 100% der verfuegbaren Breite zu schrumpfen, wenn selbst eine einzige
   Spalte nicht ganz 320px Platz haette. */
.p-refgrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
@media (min-width: 700px) { .p-refgrid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } }

/* Kunden-Logowand (287 Firmenlogos, s. partials/kunden-logowand.hbs). Graustufen mit Farbe
   erst bei Hover/Focus - haelt die Wand ruhig trotz der grossen Anzahl unterschiedlicher
   Markenfarben, Farbe beim Interagieren bestaetigt "hier steckt ein echter Kunde dahinter". */
.p-logowall { display: grid; gap: 1px; background: var(--color-border-light); border: 1px solid var(--color-border-light); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); border-radius: var(--radius-medium); overflow: hidden; }
.p-logowall__item {
  display: flex; align-items: center; justify-content: center; background: var(--color-surface-light);
  aspect-ratio: 3 / 2; padding: 14px;
}
.p-logowall__item img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .68; transition: filter .2s, opacity .2s;
}
.p-logowall__item:hover img, .p-logowall__item:focus-within img { filter: grayscale(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .p-logowall__item img { transition: none; } }
.p-casecard {
  display: flex; flex-direction: column; height: 100%; border: 1px solid var(--color-border-light);
  border-radius: var(--radius-medium); overflow: hidden; background: var(--color-surface-light);
  text-decoration: none; color: inherit;
}
.p-casecard__visual { background: var(--color-bg-deep); padding: .9rem 1.1rem; display: flex; align-items: center; height: 9rem; }
/* Reales Foto statt abstraktem Flow (Prompt 8B.4H §9, nur Möbelindustrie-Karte): fester
   Bildausschnitt in derselben Kartenhoehe wie die schematischen Flow-Karten, damit alle 3
   Karten pro Reihe die gleiche Grundhoehe behalten (Auftrag §9 Desktop-Anforderung). */
.p-casecard__visual--photo { padding: 0; height: 9rem; overflow: hidden; }
.p-casecard__visual--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-casecard__flow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: .7rem; color: var(--color-text-on-dark); }
.p-casecard__flow span:not(.p-casecard__flow-arrow) { border: 1px solid var(--color-border-dark); border-radius: 999px; padding: .25rem .6rem; background: rgba(255,255,255,.05); }
.p-casecard__flow-arrow { color: var(--color-brand-bright); }
.p-casecard__body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.p-casecard__tag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand-dark); }
.p-casecard__body h3 { font-size: var(--step-1); margin: 0; text-wrap: balance; }
.p-casecard__body p { margin: 0; color: var(--color-text-muted); }
.p-casecard__type { font-size: var(--step--1); font-weight: 600; color: var(--color-text-on-light); }
.p-casecard__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.p-casecard__more { margin-top: auto; padding-top: .4rem; font-weight: 600; color: var(--color-brand-dark); font-size: var(--step--1); }
.p-casecard:hover { border-color: var(--color-brand-dark); }
.p-casecard:hover .p-casecard__more::after { content: "→"; margin-left: .3rem; }

/* ---------- Kompakte Projektfakten (Case-Study-Detailseite, Prompt 8B.4D §9) ---------- */
.p-factgrid { display: grid; gap: 1px; background: var(--color-border-light); border: 1px solid var(--color-border-light); border-radius: var(--radius-medium); overflow: hidden; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px) { .p-factgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .p-factgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.p-factgrid__cell { background: var(--color-surface-light); padding: 1rem 1.1rem; }
.p-factgrid__cell span { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: #8a8d87; margin-bottom: .3rem; }
.p-factgrid__cell strong { font-size: var(--step-0); color: var(--color-text-on-light); font-weight: 600; }

/* ---------- Case-Story: engere, konsistente Ueberschriftenabstaende statt grosser Leerfelder ---------- */
.p-casestory h2 { margin-top: 2.2rem; margin-bottom: .6rem; font-size: var(--step-1); }
.p-casestory h2:first-child { margin-top: 0; }
.p-casestory p, .p-casestory ul { margin-top: 0; margin-bottom: .9rem; }

/* ---------- Sticky CTA v2 (Prompt 8B.4H: kompakter, garantiert einzeilig) ---------- */
.p-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: .4rem var(--sp) calc(.4rem + env(safe-area-inset-bottom, 0px));
  background: rgba(10,13,14,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--color-border-dark);
  transition: transform var(--transition-normal);
}
/* Kurzer, fest gekuerzter Buttontext ("Systemcheck starten", s. default.hbs) + nowrap:
   garantiert eine einzeilige Leiste von ca. 48-56px + Safe-Area auf allen getesteten
   Breiten (320-430px) statt der zuvor moeglichen zweizeiligen ~100px+ Variante. */
.p-sticky-cta .p-btn--block { padding-block: .55rem; font-size: .9rem; white-space: nowrap; }
@media (min-width: 1200px) { .p-sticky-cta { display: none; } }
/* Vollstaendige Deaktivierung auf den 5 Formular-/Conversion-Seiten (Prompt 8B.4H §4): body_class
   setzt fuer jede Ghost-Seite automatisch "page-{slug}" - darueber lassen sich diese 5 Seiten
   zuverlaessig identifizieren, ohne den Slug-Vergleich (der im Layout-Template nicht im Scope
   ist, s. default.hbs) nachzubilden. display:none statt nur transform: die Leiste soll dort
   ueberhaupt nicht existieren, nicht nur unsichtbar am Bildschirmrand liegen. */
body.page-systemcheck .sticky-cta, body.page-systemcheck .p-sticky-cta,
body.page-demo .sticky-cta, body.page-demo .p-sticky-cta,
body.page-kontakt .sticky-cta, body.page-kontakt .p-sticky-cta,
body.page-loesungsfinder .sticky-cta, body.page-loesungsfinder .p-sticky-cta,
body.page-roi-rechner .sticky-cta, body.page-roi-rechner .p-sticky-cta {
  display: none;
}
body.page-systemcheck.has-sticky-cta, body.page-demo.has-sticky-cta, body.page-kontakt.has-sticky-cta,
body.page-loesungsfinder.has-sticky-cta, body.page-roi-rechner.has-sticky-cta {
  padding-bottom: 0;
}

/* ---------- Footer v2 ---------- */
.p-footer { background: var(--color-bg-deep); color: #9a9d97; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 2rem; }
.p-footer a { color: #c3c6c0; text-decoration: none; }
.p-footer a:hover { color: var(--color-brand-bright); }
.p-footer h4 { color: var(--color-text-on-dark); font-size: var(--step-0); margin-bottom: .7rem; }

/* ---------- Focus-visible on dark premium surfaces ---------- */
.p-section--dark :focus-visible, .p-section--deep :focus-visible, .p-header :focus-visible, .p-drawer :focus-visible, .p-footer :focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--color-glow);
}

/* ---------- Reduced motion: disable all premium animations globally ---------- */
@media (prefers-reduced-motion: reduce) {
  .p-hero__status .p-dot, .p-arch__connector::before { animation: none !important; }
  .p-mega, .p-drawer, .p-header, .p-header__inner, .p-sticky-cta, .p-btn, .p-nav__link, .p-techcard { transition: none !important; }
}

/* ---------- IT-/Architekturzentrum (Prompt 8B.4J §5) ----------
   Premium-Karten statt Roh-Tabelle. Baut auf bestehenden Komponenten auf: .p-techcard als
   Kartenrahmen, .p-matrix fuer den Betriebsmodell-Vergleich (beide bereits an anderer Stelle
   im Theme etabliert) - kein Parallelsystem. */
.p-trustbadges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.p-trustbadge {
  display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--color-border-dark);
  border-radius: 999px; padding: .4rem .85rem; font-size: .78rem; color: var(--color-text-on-dark);
  background: rgba(255,255,255,.04);
}
.p-trustbadge::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--color-brand); flex-shrink: 0; }

/* Anker-Navigation zu den 9 Architekturbereichen - selbe Optik wie .p-pagenav, aber als
   eigenstaendige Komponente, da .p-pagenav sticky ist und hier eine nicht-sticky Uebersicht
   direkt im Einstiegsbereich gewuenscht ist. */
.p-archnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.p-archnav a {
  border: 1px solid var(--color-border-light); border-radius: 999px; padding: .45rem 1rem;
  font-size: .82rem; font-weight: 600; color: var(--color-text-on-light); text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.p-archnav a:hover { border-color: var(--color-brand-dark); color: var(--color-brand-dark); }

.p-archcard__statusrow { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.p-archcard__status {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.p-archcard__status--standard { background: color-mix(in srgb, var(--color-brand) 20%, transparent); color: var(--color-brand-dark); }
.p-archcard__status--konfigurierbar { background: rgba(0,0,0,.05); border: 1px solid var(--color-border-light); color: var(--color-text-muted); }
.p-archcard__status--projektspezifisch { background: transparent; border: 1px dashed var(--color-border-light); color: var(--color-text-muted); }
.p-archcard__points { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.p-archcard__points li { position: relative; padding-left: 1rem; font-size: var(--step--1); color: var(--color-text-muted); }
.p-archcard__points li::before { content: "–"; position: absolute; left: 0; color: var(--color-brand-dark); }

/* Betriebsmodell-Vergleich: .p-matrix-Zelle bekommt eine kompakte Definitionsliste statt nur
   Ueberschrift+Absatz (Prompt 8B.4J §5.E: Betrieb/Updates/Monitoring/Backup/Verantwortlichkeiten
   je Modell, keine leeren Zellen). */
.p-matrix__cell dl { margin: .4rem 0 0; display: grid; gap: .5rem; }
.p-matrix__cell dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: #8a8d87; }
.p-matrix__cell dd { margin: .1rem 0 0; font-size: var(--step--1); color: var(--color-text-muted); }

/* Kundenliste (Referenzen-Hub): reine Textliste ohne Logos. Ghost entfernt eigene
   class-Attribute aus per Content-API eingespieltem HTML (source=html -> Lexical), daher
   Anker ueber die von Ghost automatisch vergebene Ueberschriften-ID statt einer eigenen
   Klasse; kleine Karten statt Pillen, passend zum Verzicht auf grosse Radien im Theme. */
#unternehmen-die-wir-begleitet-haben-auswahl ~ ul {
  margin: 1.1rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
#unternehmen-die-wir-begleitet-haben-auswahl ~ ul li {
  font-size: var(--step--1); color: var(--color-text-muted);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-small);
  padding: .4rem .7rem; background: var(--color-surface-light);
}