/* The world carries the page; glass is reserved for details. */
.clean-caption, .clean-service-fallback { display: none; }
html[data-ansicht="pur"]:not([data-modus="buehne"]) :is(.station .feld, .fuss) {
  background: none; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-ansicht="pur"]:not([data-modus="buehne"]) :is(.station .feld, .fuss)::before,
html[data-ansicht="pur"]:not([data-modus="buehne"]) :is(.station .feld, .fuss)::after { display: none; }
html[data-ansicht="pur"][data-modus="buehne"] .station .feld,
html[data-ansicht="pur"][data-modus="buehne"] .fuss,
html[data-ansicht="pur"][data-modus="buehne"] .dreh-hinweis { display: none; }
html[data-ansicht="pur"][data-modus="buehne"] .station,
html[data-ansicht="pur"][data-modus="buehne"] .station[data-side],
html[data-ansicht="pur"][data-modus="buehne"] .station[data-hoch] {
  inset: 0; min-height: 0; padding: 0; align-items: flex-start; justify-content: flex-start;
}
html[data-ansicht="pur"][data-modus="buehne"] .clean-caption {
  display: block; position: absolute; top: calc(var(--kopf-unten, var(--kopf-h)) + clamp(16px, 3vh, 48px));   /* V19.23: 3 statt 4 vh */
  left: var(--layout-inset, var(--rand)); right: var(--layout-inset, var(--rand));
  max-width: 44rem; padding: 0 clamp(8px, 2vw, 28px); pointer-events: none;
  color: var(--ci-room-text); text-shadow: 0 2px 4px #000, 0 0 18px #000, 0 0 36px #000;
}
.clean-caption :is(h1,h2) { margin: 0; color: inherit; font-weight: var(--ci-heading-weight); text-wrap: balance; }
.clean-caption h1 { max-width: 14ch; font-size: clamp(36px, 3.9vw, 64px); line-height: 1.08; letter-spacing: -.035em; }
.clean-caption h2 { max-width: 30ch; font-size: clamp(22px, 2vw, 32px); line-height: 1.2; letter-spacing: -.02em; }
.clean-caption .clean-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.clean-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--ci-interaction-red); }
.clean-intro-note { max-width: 58ch; margin: 14px 0 16px; font-size: 16px; line-height: 1.6; }   /* V19.23: 58 statt 35 Zeichen (längerer Text, vier Zeilen) */
.clean-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; pointer-events: none; }
/* Neuigkeiten: a quiet text link under the Station-1 actions, not a third button (approved sketch 24.10.2026). */
.clean-news { margin: 12px 0 0; }
.clean-news a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: 15px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); pointer-events: auto; }
.clean-news a:is(:hover, :focus-visible) { text-decoration-color: var(--ci-interaction-red); }
/* V19.23: Arbeitsbeleg zur Demo, ein ruhiger Textlink mit Grenzzeile (kein Knopf, keine Klasse aktion). */
.clean-beleg { margin: 2px 0 0; }
.clean-beleg a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: 15px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); pointer-events: auto; }
.clean-beleg a:is(:hover, :focus-visible) { text-decoration-color: var(--ci-interaction-red); }
.clean-beleg span { display: block; margin-top: 0; font-size: 13px; line-height: 1.4; opacity: .85; }
.clean-actions .aktion { min-height: 52px; max-width: 100%; padding: 13px 19px; font-size: 14px; pointer-events: auto; }
.clean-actions:has(> :nth-child(2)) { display: grid; width: fit-content; max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clean-actions:has(> :nth-child(2)) > .aktion { min-width: 0; width: 100%; height: 100%; overflow-wrap: normal; hyphens: auto; }   /* V19.13 (Rundgang 24.10., P19): Wörter nicht mitten im Wort brechen */
html[data-ansicht="pur"][data-modus="buehne"] .clean-service-fallback {
  display: flex; position: absolute; bottom: calc(158px + env(safe-area-inset-bottom, 0px));
  left: var(--layout-inset, var(--rand)); right: var(--layout-inset, var(--rand));
  justify-content: center; flex-wrap: wrap; gap: 10px; pointer-events: none;
}
.clean-service-fallback .aktion { min-height: 44px; max-width: 100%; padding: 10px 14px; font-size: 13px; pointer-events: auto; }
.clean-service-short { display: none; }
html[data-ansicht="pur"] .clean-service-fallback[hidden],
html[data-ansicht="pur"] .clean-service-fallback .aktion[hidden] { display: none; }
.clean-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; pointer-events: auto; }
.clean-legal a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: 13px; text-underline-offset: 4px; }
html[data-ansicht="pur"][data-detail-open] :is(.clean-caption,.clean-service-fallback) { opacity: 0; pointer-events: none; visibility: hidden; }
.clean-reader-copy { padding-top: clamp(24px, 4vw, 48px); padding-bottom: 36px; }
.clean-reader-document { max-width: 72ch; margin-inline: auto; }
.clean-reader-document.about-document { max-width: 960px; }
.clean-founder-intro { display: flex; align-items: center; gap: 20px; }
.clean-founder-photo { flex: 0 0 80px; width: 80px; height: 100px; object-fit: cover; border-radius: var(--button-radius, 7px); }
.clean-founder-intro h2 { min-width: 0; max-width: 24ch; }
@media (max-width: 700px) {
  .clean-founder-intro { gap: 14px; }
  .clean-founder-photo { flex-basis: 56px; width: 56px; height: 70px; }
  /* The personal reader clears the two-row legal links on small screens. */
  .clean-reader:has(.about-document) { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 357px) {
  .clean-reader:has(.about-document) { bottom: calc(144px + env(safe-area-inset-bottom, 0px)); }
}
.clean-reader-document :is(h1,h2) { font-size: clamp(28px, 4vw, 48px); line-height: 1.15; }
.clean-reader-document .marke { font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.clean-reader-document .schritte { margin: 24px 0; }
.clean-reader-document .schritte li { margin: 0 0 24px; }
.clean-reader-document :is(.work-all,.own-work) .aktion { margin-block: 12px; }
.clean-reader-document .aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.clean-reader-document .aktionen:has(> :nth-child(2)) { display: grid; width: fit-content; max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clean-reader-document .aktionen:has(> :nth-child(2)) > .aktion { min-width: 0; width: 100%; overflow-wrap: normal; hyphens: auto; }
html[data-ansicht="pur"] .clean-caption :is(a,button):focus-visible,
html[data-ansicht="pur"] .clean-service-fallback a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
@media (max-width: 700px) and (orientation: portrait) {
  /* Keep the phone unobstructed; demos remain in the software detail and Our work. */
  #software .clean-caption .clean-beleg { display: none; }
  html[data-ansicht="pur"][data-modus="buehne"] .clean-caption { top: calc(var(--kopf-unten, var(--kopf-h)) + 14px); padding-inline: 10px; }   /* V19.23: 14 statt 20 px */
  .clean-caption h1 { font-size: clamp(30px, 8.6vw, 42px); max-width: 16ch; }
  .clean-caption h2 { max-width: 29ch; font-size: clamp(20px, 5.4vw, 25px); }
  .clean-caption .clean-eyebrow { margin-bottom: 9px; font-size: 12px; letter-spacing: .1em; }
  /* V19.23 (Schärfen): der längere Text unter der Überschrift läuft über die ganze Breite der Bildunterschrift (vorher 29 Zeichen schmal, 9 Zeilen) */
  .clean-intro-note { margin: 8px 0 10px; font-size: 14px; line-height: 1.45; max-width: none; }
  .clean-actions { gap: 9px; margin-top: 12px; }
  .clean-news { margin-top: 4px; }
  .clean-beleg { margin-top: 0; }
  .clean-beleg span { margin-top: -2px; }
  .clean-actions .aktion { font-size: 12px; padding: 10px 13px; }
}
/* V19.23 (Schärfen): Die Bildunterschrift wird länger (Text, Beleg) und darf EVA-Kugel und Rechtsleiste unten nicht überdecken
   (tools/schnellweg-test.mjs --nur ruhig). Bei Platzmangel entfällt zuerst die Beleg-Zeile, dann der Text. Schwellen an echten
   Fensterhöhen gemessen, DE als längste Sprache (v19.23/pruef/luft.mjs, pruef/matrix/): Telefon mit Browserleiste, Laptop, Tablet quer.
   Beleg und Text stehen weiter in der Kartenfassung und auf den Unterseiten. */
@media (min-width: 701px) and (max-height: 859px) { .clean-beleg { display: none; } }
@media (min-width: 701px) and (max-height: 784px) { .clean-intro-note { display: none; } }
@media (min-width: 1500px) and (max-height: 809px) { .clean-intro-note { display: none; } }   /* breiter = größere Überschrift */
@media (max-width: 700px) and (orientation: portrait) and (max-height: 796px) { .clean-beleg { display: none; } }
@media (max-width: 700px) and (orientation: portrait) and (max-height: 729px) { .clean-intro-note { display: none; } }
/* V19.13 (Rundgang 24.10., P19): bei 400 % Zoom (≈ 320 px Breite) bleiben zwei Knöpfe nebeneinander (sie stapeln sich nicht aus dem
   Bild); weniger Innenabstand, damit das längste Wort („Kontaktdaten“) ganz in die Spalte passt statt mitten im Wort zu brechen. */
@media (max-width: 420px) {
  .clean-actions .aktion, .clean-reader-document .aktionen .aktion { padding-inline: 10px; }
}
@media (max-height: 650px) {
  html[data-ansicht="pur"][data-modus="buehne"] .clean-caption { top: calc(var(--kopf-unten, var(--kopf-h)) + 6px); }   /* V19.23: 6 statt 12 px */
  .clean-caption h1 { font-size: clamp(22px, 6vw, 38px); max-width: none; }   /* V19.23: 22 statt 26 px Untergrenze und volle Breite, die Überschrift nennt jetzt das Angebot (länger) */
  .clean-caption h2 { font-size: 20px; }
  .clean-intro-note { display: none; }
  .clean-actions { margin-top: 8px; }
  .clean-news { margin-top: 0; }
  .clean-actions .aktion { min-height: 46px; padding-block: 10px; }   /* V19.23: auf niedrigen Fenstern 46 statt 52 px (Tippfläche bleibt über 44 px) */
  .clean-caption .clean-eyebrow { margin-bottom: 5px; }
  html[data-ansicht="pur"][data-modus="buehne"] .clean-service-fallback { gap: 6px; }
  .clean-service-fallback .aktion { padding: 8px 7px; font-size: 12px; }
  .clean-service-fallback .clean-service-full { display: none; }
  .clean-service-fallback .clean-service-short { display: inline; }
}

/* A feathered reading light, without a panel edge, separates free typography
   from the moving city. It follows the copy only, never veils the whole world. */
html[data-ansicht="pur"][data-modus="buehne"] .clean-caption { isolation: isolate; }
.clean-caption::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -58px -40px -48px -30px;
  /* Fade to zero at EVERY boundary: a radial alone still has opacity at its top edge. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 52px, #000 calc(100% - 46px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 52px, #000 calc(100% - 46px), transparent);
  background: radial-gradient(ellipse at 27% 42%, rgb(8 10 14 / 78%) 0%, rgb(8 10 14 / 54%) 44%, transparent 74%);
}
html[data-theme="light"] .clean-caption::before {
  background: radial-gradient(ellipse at 27% 42%, rgb(248 249 250 / 96%) 0%, rgb(248 249 250 / 78%) 46%, transparent 76%);
}
.clean-caption .clean-eyebrow { font-size: 12px; }
@media (max-width: 700px) and (orientation: portrait) {
  .clean-caption .clean-eyebrow { font-size: 12px; }
  .clean-actions .aktion { font-size: 13px; }
  html[data-ansicht="pur"][data-modus="buehne"] .clean-service-fallback { bottom: calc(var(--eva-clearance, 190px) + 16px); }
}
@media (forced-colors: active) {
  .clean-caption::before { background: Canvas; }
}

/* Process milestones are real touch/keyboard controls, preserving the compact nameplates. */
.schild-process { pointer-events: auto; cursor: pointer; min-width: 64px; min-height: 44px; border: 0; }
.schild-process:is(:hover,:focus-visible) { box-shadow: inset 0 0 0 1px var(--ci-interaction-red), 0 4px 16px rgb(234 3 19 / 24%); }
.schild-process:focus-visible { outline: 2px solid var(--ci-interaction-red); outline-offset: 3px; }

.schild-process::after { display: none; }
.schild-process-stem { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.schild-process-stem path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .5; }

/* Overview controls float directly above a moving world. Their local neutral
   support protects small labels even above white highlights / black structures.
   Detail buttons retain the approved shared surface; Form A geometry and its
   red outer shadow below the action are unchanged. */
html[data-ansicht="pur"] {
  --overview-control-surface: rgb(0 0 0 / 72%);
  --overview-control-hover: rgb(0 0 0 / 68%);
  --overview-control-active: rgb(0 0 0 / 78%);
}
html[data-theme="light"][data-ansicht="pur"] {
  --overview-control-surface: rgb(255 255 255 / 86%);
  --overview-control-hover: rgb(255 255 255 / 92%);
  --overview-control-active: rgb(242 244 247 / 94%);
}
html[data-ansicht="pur"] :is(.clean-caption,.clean-service-fallback) .aktion,
html[data-ansicht="pur"] .station .feld :is(.aktion,.service-link),
html[data-ansicht="pur"] .schild-process {
  background: var(--overview-control-surface); color: var(--text);
  text-shadow: none;
}
html[data-ansicht="pur"] .schild-process {
  font-weight: 700;
  /* Focus may dim neighbouring 3D districts to 35%; actionable labels must
     stay readable. Preserve their initial arrival fade, not the focus dim. */
  opacity: min(1, calc(var(--f, 0) / 0.35));
}
html[data-ansicht="pur"] :is(.clean-caption,.clean-service-fallback) .aktion:active,
html[data-ansicht="pur"] .station .feld :is(.aktion,.service-link):active,
html[data-ansicht="pur"] .schild-process:active {
  background: var(--overview-control-active);
}
@media (hover: hover) and (pointer: fine) {
  html[data-ansicht="pur"] :is(.clean-caption,.clean-service-fallback) .aktion:hover,
  html[data-ansicht="pur"] .station .feld :is(.aktion,.service-link):hover,
  html[data-ansicht="pur"] .schild-process:hover {
    background: var(--overview-control-hover);
  }
}
@media (forced-colors: active) {
  html[data-ansicht="pur"] :is(.clean-caption,.clean-service-fallback) .aktion,
  html[data-ansicht="pur"] .station .feld :is(.aktion,.service-link),
  html[data-ansicht="pur"] .schild-process {
    background: ButtonFace; color: ButtonText; border-color: ButtonText;
  }
}

/* V19.14 (Owner 24.10.: große Monitore, P43): Bildunterschrift, Knöpfe und Abstände wachsen ab 1920 px im Verhältnis von 1440×900
   mit (--gu, site.css; max(bisher, n × --gu)). Bei 2560×1440: Titel 56 → 90 px, Text 16 → 26 px, Spalte 704 → 1126 px. */
@media (min-width: 1920px) and (min-height: 901px) {
  html[data-ansicht="pur"][data-modus="buehne"] .clean-caption {
    top: calc(var(--kopf-unten, var(--kopf-h)) + max(clamp(20px, 4vh, 48px), calc(36 * var(--gu))));
    max-width: max(44rem, calc(704 * var(--gu))); padding: 0 max(28px, calc(28 * var(--gu))); }
  .clean-caption h1 { font-size: max(64px, calc(56.2 * var(--gu))); }
  .clean-caption h2 { font-size: max(32px, calc(28.8 * var(--gu))); }
  .clean-caption .clean-eyebrow { gap: max(12px, calc(12 * var(--gu))); margin-bottom: max(14px, calc(14 * var(--gu))); font-size: max(12px, calc(12 * var(--gu))); }
  .clean-eyebrow::before { width: max(24px, calc(24 * var(--gu))); }
  .clean-intro-note { margin: max(20px, calc(20 * var(--gu))) 0 max(22px, calc(22 * var(--gu))); font-size: max(16px, calc(16 * var(--gu))); }
  .clean-actions { gap: max(12px, calc(12 * var(--gu))); margin-top: max(22px, calc(22 * var(--gu))); }
  .clean-actions .aktion { min-height: max(52px, calc(52 * var(--gu))); padding: max(13px, calc(13 * var(--gu))) max(19px, calc(19 * var(--gu)));
    font-size: max(14px, calc(14 * var(--gu))); }
  .clean-legal { gap: max(8px, calc(8 * var(--gu))) max(22px, calc(22 * var(--gu))); margin-top: max(18px, calc(18 * var(--gu))); }
  .clean-legal a { min-height: max(44px, calc(44 * var(--gu))); font-size: max(13px, calc(13 * var(--gu))); }
  html[data-ansicht="pur"][data-modus="buehne"] .clean-service-fallback { bottom: calc(max(158px, calc(158 * var(--gu))) + env(safe-area-inset-bottom, 0px));
    gap: max(10px, calc(10 * var(--gu))); }
  .clean-service-fallback .aktion { min-height: max(44px, calc(44 * var(--gu))); padding: max(10px, calc(10 * var(--gu))) max(14px, calc(14 * var(--gu)));
    font-size: max(13px, calc(13 * var(--gu))); }
  /* Leselicht hinter der Schrift: Ränder im selben Verhältnis */
  .clean-caption::before { inset: calc(-58 * var(--gu)) calc(-40 * var(--gu)) calc(-48 * var(--gu)) calc(-30 * var(--gu));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 calc(52 * var(--gu)), #000 calc(100% - 46 * var(--gu)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 calc(52 * var(--gu)), #000 calc(100% - 46 * var(--gu)), transparent); }
}
/* V19.27: Abzeichen „Demnächst“ im Knopf der reinen Ansicht (Grundstil site.css), enger als in der Stationsliste */
.clean-service-fallback .demnaechst { margin-left: 6px; padding: 0 6px; font-size: 12px; line-height: 1.4; }

/* Keep the two software choices beside the phone on compact landscape screens. */
@media (min-width: 701px) and (max-width: 1280px) and (min-aspect-ratio: 1/1) {
  .clean-caption .software-offering-actions {
    grid-template-columns: minmax(0, 1fr); width: min(300px, 32vw);
  }
  .clean-caption:has(.software-offering-actions)::before {
    right: auto; width: min(350px, calc(32vw + 40px));
  }
}

/* Quiet mobile actions across every station; the 3D motif remains the focus. */
.clean-action-compact, .clean-action-arrow { display: none; }
.hero-copy-mobile, .hero-service-mobile, .clean-beleg .hero-demo-mobile { display: none; }
.clean-beleg .hero-demo-full { display: inline; font: inherit; opacity: 1; }
@media (max-width: 700px) {
  html[data-ansicht="pur"][data-modus="buehne"] .clean-caption .clean-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px;
    width: auto; margin-top: 8px;
  }
  html[data-ansicht="pur"][data-modus="buehne"] :is(.clean-caption .clean-actions, .clean-service-fallback, .clean-caption .themen-weiter) .aktion {
    display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px;
    width: auto; height: auto; min-width: 44px; min-height: 44px; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    color: inherit; font-size: 13px; font-weight: 500; line-height: 1.4;
    text-transform: none; text-align: left; text-shadow: inherit; letter-spacing: 0; transform: none;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  }
  html[data-ansicht="pur"][data-modus="buehne"] :is(.clean-caption .clean-actions, .clean-service-fallback, .clean-caption .themen-weiter) .aktion:is(:hover, :focus-visible) {
    color: inherit; background: transparent; box-shadow: none; text-decoration-color: var(--ci-interaction-red);
  }
  .clean-actions .clean-action-full { display: none; }
  html[data-ansicht="pur"][data-modus="buehne"] :is(.clean-caption .clean-actions, .clean-service-fallback, .clean-caption .themen-weiter) .aktion::before,
  html[data-ansicht="pur"][data-modus="buehne"] :is(.clean-caption .clean-actions, .clean-service-fallback, .clean-caption .themen-weiter) .aktion::after { display: none; }
  .clean-actions :is(.clean-action-compact, .clean-action-arrow) { display: inline; }
  .clean-action-arrow { opacity: .8; }
}

@media (max-width: 700px) {
  html[data-ansicht="pur"][data-modus="buehne"] .clean-caption .themen ul {
    display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 0;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
  }
  html[data-ansicht="pur"][data-modus="buehne"] .clean-caption .themen .themen-wahl {
    min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; color: inherit; font-weight: 500;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  }
  html[data-ansicht="pur"][data-modus="buehne"] .clean-caption .themen .themen-wahl::before { display: none; }
  html[data-ansicht="pur"][data-modus="buehne"] .clean-caption .themen .themen-wahl[aria-current] {
    text-decoration-color: var(--ci-interaction-red); text-decoration-thickness: 2px; font-weight: 700;
  }
}
/* A selected topic moves EVA to the centre; keep its label above the legal links. */
@media (max-width: 700px) and (orientation: portrait) {
  html[data-modus="buehne"][data-ansicht="pur"][data-station="7"][data-thema]:not([data-detail-open]) .eva-widget {
    --eva-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 357px) and (orientation: portrait) {
  html[data-modus="buehne"][data-ansicht="pur"][data-station="7"][data-thema]:not([data-detail-open]) .eva-widget {
    --eva-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }
}

/* One entrance on every screen: shared copy, one red action, three service routes. */
  html[data-ansicht="pur"][data-modus="buehne"] #start > .clean-caption {
    display: flex; flex-direction: column; max-width: min(650px, 48vw);
    color: #fff; text-shadow: 0 2px 4px #000, 0 0 18px #000;
  }
  #start .clean-caption::before {
    inset: -30px -18px -30px;
    background: linear-gradient(180deg, rgb(5 7 10 / 91%), rgb(5 7 10 / 85%) 70%, rgb(5 7 10 / 62%));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  }
  #start .hero-copy-full { display: none; }
  #start .hero-copy-mobile { display: inline; }
  #start .clean-caption h1 {
    order: 1; max-width: none; font-size: clamp(36px, 4.2vw, 64px);
    line-height: 1.13; text-wrap: balance; letter-spacing: -.04em; font-weight: 400;
  }
  #start .clean-caption .clean-intro-note {
    display: block; order: 2; max-width: 38ch; margin: 18px 0 0;
    color: #f2f3f5; font-size: 16px; font-weight: 500; line-height: 1.5;
  }
  html[data-ansicht="pur"][data-modus="buehne"] #start .clean-caption .clean-actions {
    display: flex; order: 3; width: 100%; max-width: 440px; margin-top: 22px;
  }
  html[data-ansicht="pur"][data-modus="buehne"] #start .clean-actions .hero-primary {
    display: flex; width: 100%; min-height: 50px; padding: 0 17px; justify-content: space-between;
    color: #fff; background: #b50916; border: 1px solid #fa4b57; border-radius: 3px;
    box-shadow: 0 6px 24px rgb(0 0 0 / 24%); text-shadow: none;
    font-size: 14px; font-weight: 600; text-decoration: none;
    transition: background-color 180ms ease;
  }
  html[data-ansicht="pur"][data-modus="buehne"] #start .clean-actions .hero-primary:is(:hover,:focus-visible) { background: #990b16; }
  #start .hero-primary .clean-action-full { display: none; }
  #start .hero-primary :is(.clean-action-compact,.clean-action-arrow) { display: inline; }
  #start .hero-primary::before, #start .hero-primary::after { display: none; }
  #start .hero-primary .clean-action-arrow { font-size: 23px; opacity: 1; }
  html[data-ansicht="pur"][data-modus="buehne"] #start .clean-actions .hero-pricing,
  #start .clean-news { display: none; }
  #start .clean-caption .themen-start { order: 4; margin-top: 22px; }
  #start .themen-start .themen-titel { margin: 0 0 9px; padding: 0; font-size: 10px; letter-spacing: .12em; }
  #start .themen-start .themen-titel::before { display: none; }
  html[data-ansicht="pur"][data-modus="buehne"] #start .clean-caption .themen-start ul {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 10px;
    touch-action: pan-y pinch-zoom;
  }
  html[data-ansicht="pur"][data-modus="buehne"] #start .themen-start .themen-wahl {
    display: block; width: 100%; padding: 10px 0 9px; min-height: 76px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    border-top: 1px solid rgb(255 255 255 / 45%); text-decoration: none; text-transform: none; letter-spacing: 0;
    transition: border-color 180ms ease, background-color 180ms ease;
  }
  #start .themen-start :is(.themen-name,.themen-kurz) { display: none; }
  #start .hero-service-mobile { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
  #start .hero-service-index { font-size: 11px; font-weight: 600; color: #ff6370; letter-spacing: .08em; }
  #start .hero-service-arrow { font-size: 15px; line-height: 1; }
  #start .hero-service-label { display: grid; grid-column: 1 / -1; gap: 3px; font-size: 15px; font-weight: 600; color: #fff; }
  #start .hero-service-label span + span { font-size: 14px; font-weight: 500; color: #e8eaee; }
  html[data-ansicht="pur"][data-modus="buehne"] #start .themen-start .themen-wahl:is(:hover,:focus-visible) { border-color: var(--ci-interaction-red); background: rgb(255 255 255 / 6%); }

@media (max-width: 700px) and (orientation: portrait) {
  html[data-ansicht="pur"][data-modus="buehne"] #start > .clean-caption { max-width: none; }
  #start .clean-caption h1 { font-size: clamp(28px, 8.6vw, 44px); text-wrap: nowrap; }
  #start .clean-caption .clean-intro-note { max-width: 32ch; margin-top: 12px; font-size: 14px; }
  html[data-ansicht="pur"][data-modus="buehne"] #start .clean-caption .clean-actions { margin-top: 17px; max-width: none; }
  #start .hero-service-label { font-size: 13px; }
  #start .hero-service-label span + span { font-size: 12px; }
}
@media (min-width: 701px) and (max-height: 720px) {
  #start .clean-caption h1 { font-size: clamp(32px, 3.5vw, 48px); }
  #start .clean-caption .clean-intro-note { display: none; }
  #start .clean-caption .themen-start { margin-top: 16px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #start .clean-caption h1 { font-size: 28px; }
  #start .clean-caption .clean-intro-note { display: none; }
  html[data-ansicht="pur"][data-modus="buehne"] #start .clean-caption .clean-actions { margin-top: 8px; }
  html[data-ansicht="pur"][data-modus="buehne"] #start .clean-actions .hero-primary { min-height: 44px; }
  #start .clean-caption .themen-start { margin-top: 8px; }
}
@media (max-width: 357px) and (orientation: portrait) {
  #start .clean-caption .clean-intro-note { font-size: 13px; }
  #start .hero-service-label { font-size: 12px; }
  #start .hero-service-label span + span { font-size: 11px; }
}
@media (max-width: 700px) and (orientation: portrait) and (max-height: 729px) {
  #start .clean-caption .clean-intro-note { display: none; }
  #start .clean-caption .themen-start { margin-top: 16px; }
}
@media (max-width: 700px) and (orientation: portrait) and (max-height: 650px) {
  html[data-ansicht="pur"][data-modus="buehne"] #start .clean-caption .clean-actions { margin-top: 10px; }
  html[data-ansicht="pur"][data-modus="buehne"] #start .clean-actions .hero-primary { min-height: 44px; }
  #start .clean-caption .themen-start { margin-top: 12px; }
  html[data-ansicht="pur"][data-modus="buehne"] #start .themen-start .themen-wahl { min-height: 70px; padding-block: 7px; }
}
@media (forced-colors: active) {
  #start .clean-actions .hero-primary { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}

/* Mobile station copy gets the hero's contrast, confined to its own bounds.
   The short bottom fade keeps the projected motifs outside the reading backdrop. */
@media (max-width: 700px) and (orientation: portrait) {
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption {
    color: #f2f3f5; text-shadow: 0 2px 4px #000, 0 0 18px #000;
  }
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption::before {
    --station-copy-fade: 12px;
    inset: -22px -18px calc(-1 * var(--station-copy-fade));
    background: linear-gradient(180deg, rgb(5 7 10 / 91%), rgb(5 7 10 / 85%) 70%, rgb(5 7 10 / 62%));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - var(--station-copy-fade)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - var(--station-copy-fade)), transparent);
  }
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption h2 { color: #fff; font-weight: 400; }
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption :is(.clean-eyebrow,.themen-titel) { color: #fff; text-shadow: inherit; }
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption :is(.clean-actions,.themen-weiter) .aktion {
    color: #f2f3f5; font-weight: 600;
    text-decoration-color: rgb(255 255 255 / 80%);
  }
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption .themen-wahl {
    color: #f2f3f5; text-decoration-color: rgb(255 255 255 / 80%);
  }
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption .themen-wahl[aria-current] {
    color: #fff; text-decoration-color: var(--ci-interaction-red);
  }
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption :is(.clean-actions,.themen-weiter) .aktion:is(:hover,:focus-visible) {
    text-decoration-color: var(--ci-interaction-red);
  }
  .station:not(#start) > .clean-caption .clean-action-arrow { opacity: 1; }
}
@media (max-width: 357px) and (orientation: portrait) {
  html[data-ansicht="pur"][data-modus="buehne"] #software .clean-caption .clean-actions { column-gap: 8px; }
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption::before { --station-copy-fade: 8px; }
}
@media (max-width: 700px) and (max-height: 650px) and (orientation: portrait) {
  /* On short phones the service name and both links lead; keep the subtitle
     available to assistive technology without covering the phone display. */
  html[data-ansicht="pur"][data-modus="buehne"] #software .clean-caption h2 {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  html[data-ansicht="pur"][data-modus="buehne"] :is(#design,#operations) .clean-caption h2 { font-size: 16px; }
}
@media (max-width: 700px) and (orientation: portrait) and (forced-colors: active) {
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption::before { background: Canvas; }
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption,
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption :is(h2,.clean-eyebrow,.themen-titel) { color: CanvasText; }
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption :is(.clean-actions,.themen-weiter) .aktion,
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption .themen-wahl,
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption .themen-wahl[aria-current] { color: LinkText; text-decoration-color: LinkText; }
}

/* Desktop station actions keep the CI contour and red backlight, with less
   empty space. Mobile links and the main Hero action keep their approved form. */
@media (min-width: 701px) {
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption .clean-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
    width: fit-content; max-width: 100%;
  }
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption .clean-actions .aktion {
    flex: 0 1 auto; width: auto; height: auto; min-height: 44px;
    padding: 6px 14px; text-decoration: none;
  }
  html[data-ansicht="pur"][data-modus="buehne"] #software .software-offering-actions { margin-top: 10px; }
  html[data-ansicht="pur"][data-modus="buehne"] #software .software-offering-actions .aktion {
    font-size: 15px; font-weight: 600; gap: 9px;
    text-transform: none; letter-spacing: 0;
  }
  #software .software-offering-actions .clean-action-full { display: none; }
  #software .software-offering-actions .clean-action-compact { display: inline; }
  html[data-ansicht="pur"][data-modus="buehne"] :is(#start,#software,#about,#contact) .clean-actions .clean-action-arrow { display: none; }
}
@media (min-width: 701px) and (forced-colors: active) {
  html[data-ansicht="pur"][data-modus="buehne"] .station:not(#start) > .clean-caption .clean-actions .aktion {
    color: ButtonText; background: ButtonFace; border-color: ButtonText; text-shadow: none;
  }
}
@media (forced-colors: active) {
  #start .clean-caption::before { background: Canvas; }
  #start .clean-caption, #start .clean-caption :is(.clean-intro-note,.hero-service-label,.hero-service-label span,.hero-service-index) { color: CanvasText; text-shadow: none; }
  html[data-ansicht="pur"][data-modus="buehne"] #software .software-offering-actions .aktion { color: LinkText; text-decoration-color: LinkText; text-shadow: none; }
}

/* Once a phone visitor picks a topic, the choices and two useful actions lead.
   Their place is stable; the question remains available to assistive technology. */
.thema-weiter-short { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
  html[data-ansicht="pur"][data-modus="buehne"][data-thema] #contact .clean-caption h2 {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  html[data-ansicht="pur"][data-modus="buehne"][data-thema] #contact .clean-caption > .clean-actions {
    position: absolute; right: 10px; bottom: 0; margin: 0; z-index: 1;
  }
  html[data-ansicht="pur"][data-modus="buehne"][data-thema] #contact .clean-actions [data-eva-start] { display: none; }
  html[data-ansicht="pur"][data-modus="buehne"][data-thema] #contact .themen-buehne { margin-top: 6px; }
  html[data-ansicht="pur"][data-modus="buehne"][data-thema] #contact .themen-titel {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  html[data-ansicht="pur"][data-modus="buehne"][data-thema] #contact .themen-weiter { margin: 4px 0 0; }
  .themen-buehne .thema-weiter-full { display: none; }
  .themen-buehne .thema-weiter-short { display: inline; }
}

@media (min-width: 701px) and (forced-colors: none) {
  #start .clean-caption::before {
    /* Keep the full text and service row on the dark field; fade into Olympus
       only beyond the caption. The vertical edge retains its existing mask. */
    --hero-fade-width: clamp(140px, 14vw, 220px);
    right: calc(-32px - var(--hero-fade-width));
    background: linear-gradient(90deg, rgb(5 7 10 / 91%), rgb(5 7 10 / 87%) calc(100% - var(--hero-fade-width)), transparent);
  }
  /* Give the legal links a quiet field where the city lines turn white. */
  html[data-modus="buehne"]:not([data-theme="light"]) .stage-legal { isolation: isolate; }
  html[data-modus="buehne"]:not([data-theme="light"]) .stage-legal::before {
    content: ""; position: absolute; inset: -24px -48px -12px -24px;
    z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgb(5 7 10 / 86%) 30px, rgb(5 7 10 / 92%));
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }
}