/* Smart Workforce Planning — Demo-Stylesheet.
 * Eine Farbwelt, dieselbe wie im Portal und im Keycloak-Login: seit 2026-09-10 ist das das
 * OptWare Design System (ow-style 3), nicht mehr die von Hand nachgebaute CI-Palette. Die Demo
 * IST seit 2026-09-22 die Seite - `/` wird aus `landing.html` des Portals mit genau dieser Datei
 * gerendert, die Mock-Seiten liegen unter `/mock/` -, und zwei Farbwelten auf einer Domain lesen
 * sich als zwei Produkte.
 *
 * Die Tokens unten behalten ihre Namen — 198 Regeln in dieser Datei lesen sie —, aber jeder Wert
 * zeigt jetzt auf ein Token der Bibliothek. Die Bibliothek selbst kommt aus `ow-tokens.css`, das
 * `../../sync-ow-style.sh` erzeugt und das jede Seite VOR dieser Datei lädt. Schriften stehen
 * dort ebenfalls: Source Sans 3 und Source Code Pro, selbst gehostet. Space Grotesk und
 * JetBrains Mono sind entfallen.
 *
 * Kontrast: die Ink-Korrekturen der Bibliothek stehen gemessen in `../../../theme/
 * _ow-dark-ink.scss` und `_ow-light-ink.scss` und gelten hier mit, weil `ow-tokens.css` sie mit
 * ausliefert.
 *
 * ZWEI GRUENDE SEIT 2026-09-22. Hell ist die Voreinstellung, dunkel die Wahl; `ow-tokens.css`
 * setzt beide Paletten, diese Datei nennt nur die Stellen, an denen ein Token der Bibliothek auf
 * dem einen Grund nicht taugt, was es auf dem anderen tut. Jede solche Stelle steht als Alias
 * unter `:root` bzw. `:root[data-theme="dark"]` weiter unten - die 198 Regeln darunter lesen
 * weiterhin nur `--surface-2`, `--ci-green-ink` und ihresgleichen und wissen von keinem Thema. */

:root {
  /* `color-scheme` steht in `ow-tokens.css`, einmal je Palette: die Datei weiss, welche gerade
     gilt, diese hier nicht. */

  /* AKZENTE. `--brand` war das CI-Mint, `--brand-2` das Azur. Beide sind jetzt die Akzent- und
     Aktionsfarben der Bibliothek; `--brand-strong` ist deren Fokusring, weil genau das seine
     Rolle in dieser Datei ist. */
  --brand: var(--ow-text-accent-default);
  --brand-2: var(--ow-text-action-default);
  --brand-strong: var(--ow-border-action-focus-ring);
  --brand-ink: var(--ow-text-accent-on-accent);
  --brand-soft: var(--surface);

  /* DIE FIRMENFARBE. Nicht der Akzent der Bibliothek - der ist das Blau, aus dem die Anwendung
     gebaut ist -, sondern das Grün der Bildmarke daneben: die drei Punkte des Claims, die Pille
     darüber und das Logo tragen als einzige auf dieser Seite die Farbe der Firma.

     `--ci-green` ist die Marke selbst und bleibt auf beiden Gruenden #99cc00 - eine Firmenfarbe,
     die sich mit dem Thema aendert, ist keine. `--ci-green-ink` ist dieselbe Farbe als SCHRIFT,
     und die muss sich aendern: #99cc00 misst 7,53:1 auf #272a30 und 1,73:1 auf #fafafa. Der helle
     Wert ist #4a6600 (6,32:1 auf #fafafa) - derselbe, den `.tag--live` unten schon immer auf dem
     hellen Szenenbild traegt, aus genau diesem Grund. */
  --ci-green: var(--ow-color-brand-green);
  --ci-green-ink: #4a6600;

  /* GEFÜLLTE SCHALTFLÄCHEN. */
  --primary: var(--ow-background-action-default);
  --primary-hover: var(--ow-background-action-hover);
  --primary-ink: var(--ow-text-action-on-action);

  /* GRÜNDE UND TEXT. Karte dunkler als die Seite, Regler eine Stufe darüber — das ist die
     Staffelung der Bibliothek (`.ow-card` ist sunken auf einer default-farbenen Seite).

     `--surface-2` ist die einzige Stufe, die nicht in beiden Paletten dasselbe Token nehmen kann.
     Dunkel ist `--ow-background-base-raised` #3c4149 und damit eine Stufe HELLER als die Seite,
     also gehoben; hell ist dasselbe Token #9ea4ae und damit eine Stufe viel DUNKLER als die Seite
     - ein mittleres Grau, das als Panel-Grund wie eine abgeschaltete Flaeche liest. Auf dem hellen
     Grund uebernimmt deshalb `--ow-background-base-default-hover` #e1e3e5 die Rolle: eine Stufe
     vom Papier weg, in die Richtung, in die die Palette dort geht. */
  --bg: var(--ow-background-base-default);
  --surface: var(--ow-background-base-sunken);
  --surface-2: var(--ow-background-base-default-hover);
  --ink: var(--ow-text-base-default);
  --ink-soft: var(--ow-text-base-muted);
  --line: var(--ow-border-base-default);

  --font-display: var(--ow-font-family-sans);
  --font-mono: var(--ow-font-family-mono);

  /* AMPEL. Die Ampel der Bibliothek, mit der gemessenen Korrektur für Grün auf dunklem Grund. */
  --ok: var(--ow-text-positive-default);
  --warn: var(--ow-background-warning-default);
  --bad: var(--ow-text-danger-default);

  /* Modal-Rahmen: der Akzent gedämpft plus hauchdünner Glow. `color-mix` statt fester rgb-Werte,
     damit der Rahmen dem Akzent folgt, statt eine zweite Farbe zu sein. */
  --modal-border: color-mix(in srgb, var(--ow-text-accent-default) 35%, transparent);
  --modal-glow: color-mix(in srgb, var(--ow-text-accent-default) 10%, transparent);

  /* Hoehe der klebenden Kopfzeile. Die Team-Spalte des Boards klebt darunter und muss sie
     freihalten. Der Wert ist jetzt der gemessene: 40px Zeilenhoehe (siehe .top__inner) plus
     zweimal 6px Polsterung plus 1px Linie - seit 2026-10-10, vorher 28px und zweimal 12px, also
     dieselbe Summe. Das ging vorher nicht - die Hoehe haderte mit den
     Schaltflaechen, die eine Seite gerade zeigte -, und die 60px hier waren der Aufschlag
     dafuer. */
  --top-h: 53px;

  --radius: var(--ow-radius-16);
  --radius-s: var(--ow-radius-8);
  --shadow: var(--ow-shadow-200);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.10), 0 10px 28px rgb(0 0 0 / 0.12);
  --panel-icon-color: var(--ow-icon-base-default);

  accent-color: var(--brand);
}

/* Die drei Stellen, an denen der dunkle Grund ein anderes Token braucht als der helle. Mehr ist es
   nicht: alles andere in dieser Datei zeigt auf ein Token der Bibliothek, und die liefert beide
   Paletten unter denselben Namen. */
:root[data-theme="dark"] {
  --ci-green-ink: var(--ci-green);
  --surface-2: var(--ow-background-base-raised);
  --brand-soft: var(--ow-background-base-raised);
}

* { box-sizing: border-box; }

/* EINE SKALA MIT DEM PORTAL.
 *
 * Diese Datei bemisst 67 ihrer 74 Schriftgraden in `rem`, also relativ zur Wurzel, und die Wurzel
 * ist im Browser 16px. Das Portal setzt seinen Fliesstext dagegen auf das Token der Bibliothek,
 * 14px. Genau das war der Unterschied: auf den Demo-Seiten wirkte alles eine Stufe groesser als
 * auf denen des Portals,
 * obwohl beide Seiten dieselben Tokens und dieselbe Schrift laden - die Demo rechnete nur von
 * einem anderen Nullpunkt aus.
 *
 * 87,5% sind 14 von 16. Damit zeigt jedes `rem` in dieser Datei auf denselben Nullpunkt wie der
 * Fliesstext des Portals, und die 67 Werte bleiben, wie sie sind - eine in sich stimmige Skala,
 * die jetzt nur anders verankert ist. Als Prozentwert und nicht als Pixelwert, damit eine im
 * Browser eingestellte Schriftgroesse weiterhin greift.
 *
 * Wer hier Pixel sucht: `--ow-typography-body-base-font-size` in `ow-tokens.css` ist die 14. */
html { font-size: 87.5%; }

html, body { margin: 0; padding: 0; }
body {
  /* Derselbe Grund wie im Portal, und der ist seit 2026-09-10 flach: die zwei Radialverlaeufe
     ueber Schwarz waren das alte Key Visual und sind mit ihm entfallen. */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--ow-typography-body-base-font-size);
  font-weight: var(--ow-typography-body-base-font-weight);
  line-height: var(--ow-typography-body-base-line-height);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* 1088px = die 68rem des Portals bei einer 16px-Wurzel. In Pixeln, weil die Wurzel
   dieser Seite auf 14px verankert ist und `rem` hier sonst ein anderes Mass ergaebe. */
main { flex: 1; width: min(1088px, 100% - 40px); margin-inline: auto; }

h1, h2, h3, .app__title {
  letter-spacing: -0.02em;
  font-weight: var(--ow-font-weight-semibold);
}

a { color: var(--brand-2); }
a:hover { color: var(--brand-strong); }
.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important; clip-path: inset(50%) !important; overflow: hidden !important;
  width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
  border: 0 !important; white-space: nowrap !important;
}
:where(a, button):focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 3px; }

/* ── Kopfzeile ─────────────────────────────────────────────────────────────── */
/* Kopfzeile: Werte aus portal.css, damit der Wechsel zwischen Portal und Demo im Header
   nicht sichtbar ist. */
.top {
  position: sticky; top: 0; z-index: 20;
  /* Der Grund der Seite, durchscheinend - nicht `--ow-background-overlay-scrim`, das die
     Bibliothek in BEIDEN Paletten bei #0b0c0e haelt (es ist der Schleier hinter einem Dialog, kein
     Flaechenton). Auf der hellen Seite war die Kopfleiste damit ein schwarzer Balken. */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* Die Hoehe der Leiste steht fest und ergibt sich nicht. Ohne das Minimum ist sie so hoch wie das
   hoechste Bedienelement, das die Seite gerade zeigt: die Registrieren-Schaltflaeche misst 26.8px,
   das Logo 26px, und damit stand die Leiste 51.8px hoch auf der Startseite und 51px auf /register.
   52px sind eine Zeile von 40px plus die 6px darueber und darunter, die mitzaehlen, weil hier
   alles `border-box` ist. Mit der 1px-Linie ist jeder Kopf 53px hoch, und genau das ist `--top-h`.
   Dieselbe Zahl steht im Portal (`objects/_page.scss`), in Pixeln, weil diese Seite ihre `rem`
   auf 14px verankert.

   SEIT 2026-10-10 40px ZEILE STATT 28px. Die Schaltflaeche "Kostenlos starten" war 27px hoch, der
   Hell-Dunkel-Knopf und der Sprachlink 14 bis 16px breit - zu kleine Ziele fuer den wichtigsten
   Knopf der Seite. Die Leiste ist nicht hoeher geworden: 6px Polsterung statt 12px, und die
   gewonnenen 12px gehen an die Bedienelemente. 6px steht ausgeschrieben, weil die Bibliothek
   keine Stufe zwischen 4 und 8 hat. */
.top__inner {
  width: min(1088px, 100% - 40px); margin-inline: auto;
  display: flex; align-items: center; gap: var(--ow-spacing-16);
  min-block-size: 52px;
  padding-block: 6px;
}
.top__logo {
  /* 8px aus dem Token, nicht 0,6rem: das waeren hier 8,4px und im Portal 9,6px, und die Wortmarke
     saesse auf den beiden Seiten an einer anderen Stelle. */
  display: flex; align-items: center; gap: var(--ow-spacing-8);
  font-weight: var(--ow-font-weight-semibold); color: var(--ink);
  text-decoration: none;
}
/* 26px hoch, derselbe Wert wie `.top__logo img` im Portal - der Kopf steht auf beiden Seiten.
   Die Hoehe bestimmt, die Breite folgt: als `inline-size: 26px` war die Marke hier 26px breit
   und im Portal 25,89px, weil das SVG dort sein eigenes Seitenverhaeltnis behalten darf. */
/* 26px hoch, derselbe Wert wie `.top__logo img` im Portal - der Kopf steht auf beiden Seiten.
   Die Hoehe bestimmt, die Breite folgt, damit das SVG sein Seitenverhaeltnis behaelt: als
   `inline-size: 26px` war die Marke hier 26 Pixel breit und im Portal 25,89.
   Die Kachel, die hier stand - Grund, Radius, Gitter, 800er Gewicht - war fuer eine Text-Marke
   gedacht. Jede Seite benutzt ein <img>, und die Regel darunter nahm all das wieder zurueck. */
/* Der Produktname bleibt auf einer Zeile, und zwar bei jeder Breite und nicht erst unter dem
   Telefon-Breakpoint, wo diese Regel vorher stand: die Board-Seiten tragen zwei eigene
   Schaltflaechen in derselben Leiste, und bei 768px reichte das, um den Namen hier auf zwei Zeilen
   zu druecken und im Portal nicht. Dieselbe Regel steht im Portal (`objects/_page.scss`). */
.top__logo span { white-space: nowrap; }
/* SEIT 2026-10-01 „dandori", MIT DEM ALTEN NAMEN ALS UNTERZEILE - wie die Anwendung selbst, die
   „Smart Workforce Planning" unter ihre Wortmarke setzt. Hier auf EINER Zeile daneben und nicht
   darunter: zwei Zeilen wären 30px hoch, und die Leiste hat 28px, ohne an Höhe zu wachsen (siehe
   `.top__inner`). Die Wortmarke klein geschrieben, weil sie es ist; die Unterzeile in der leisen
   Tinte und im Grundgewicht, damit der Name vorn bleibt. Dieselbe Regel steht im Portal. */
.top__subtitle {
  color: var(--ink-soft);
  font-weight: var(--ow-font-weight-regular);
}
.top__mark {
  display: block;
  block-size: 26px; inline-size: auto;
  object-fit: contain;
}
.top__spacer { flex: 1; }
.top__free {
  font-size: var(--ow-typography-body-small-font-size);
  padding: var(--ow-spacing-2) var(--ow-spacing-8);
  border-radius: var(--ow-radius-9999);
  border: 1px solid var(--line); color: var(--brand); white-space: nowrap;
}

/* Die Bedienelemente im Kopf lesen sich wie die Portal-Navigation: Textlinks, kein Rahmen.
   Der Start-Knopf bleibt als gefuellte Flaeche die einzige Ausnahme. */
/* Kein Kasten: `.btn` bringt 2,8px Polsterung und einen 1px-Rahmen mit, und damit waren diese
   Links 24px hohe Kaesten, die 4px tiefer sassen als die schlichten 17px-Links im Portal. Genau
   dieser Versatz liess die Kopfzeile noch unterschiedlich aussehen, nachdem Farbe, Gewicht und
   Groesse schon uebereinstimmten. Zeilenhoehe explizit, weil ein <button> sonst die des Browsers
   nimmt (12px) und der Sprachknopf dadurch anders hoch war als der Link daneben. */
/* Die 40px sind dieselbe Zeile, auf der die Leiste steht, damit ein Link und die
   Registrieren-Schaltflaeche gleich hoch sind. In der Desktop-Zeile faellt das nicht auf - alles
   ist mittig -, aber auf dem Telefon bricht der Kopf um, und dort war eine Zeile aus Links 16.8px
   hoch und eine Zeile mit der Schaltflaeche 26.8px. Dieselbe Regel steht im Portal
   (`objects/_page.scss`). */
.top .btn:not(.top__cta) {
  background: none; border: 0; padding: 0;
  display: inline-flex; align-items: center; min-block-size: 40px;
  font-size: var(--ow-typography-body-small-font-size);
  line-height: var(--ow-typography-body-small-line-height);
  color: var(--ink); border-radius: 0; text-decoration: none;
}
.top .btn:not(.top__cta):hover { background: none; color: var(--brand-strong); text-decoration: underline; }
/* Hell-Dunkel und Sprache: ohne Polsterung waren sie so breit wie ihr Symbol oder ihre zwei
   Buchstaben. Ein Quadrat in der Hoehe der Zeile, der Inhalt in der Mitte. */
.top .btn--icon, .top .theme-toggle { min-inline-size: 40px; justify-content: center; }
.top__cta {
  display: inline-flex; align-items: center;
  min-block-size: 40px;
  padding: var(--ow-spacing-4) var(--ow-spacing-16);
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--primary); color: var(--primary-ink);
  font: inherit; font-size: var(--ow-typography-body-small-font-size);
  font-weight: var(--ow-font-weight-semibold); text-decoration: none; cursor: pointer;
}
.top__cta:hover { background: var(--primary-hover); color: var(--primary-ink); text-decoration: none; }

/* NUR IN DER DEMO. Der Satz, der sagt, was hier fest ist und in der Anwendung nicht — er gehört
   zu keiner Komponente des Produkts, trägt deshalb keinen ihrer Klassennamen und steht hier statt
   in app-shell.css, die das Aussehen der Anwendung nachbaut. */
.swp .demo-note {
  margin: 0;
  max-width: 60ch;
  padding: var(--ow-spacing-12) var(--ow-spacing-16);
  border-left: 2px solid var(--brand-2);
  background: var(--surface-2);
  border-radius: var(--radius-s);
  font-size: var(--ow-typography-body-small-font-size);
  color: var(--ink-soft);
}

.btn {
  font: inherit; font-size: 0.875rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-soft); }
.btn--icon { padding: 0.4rem 0.55rem; line-height: 1; }

/* Der Hell-Dunkel-Knopf. Zwei Symbole im selben Knopf, eines davon sichtbar: gezeigt wird, wohin
   der Klick führt — im hellen Thema der Mond, im dunklen die Sonne. `theme.js` schaltet nur das
   Attribut auf `:root` um und setzt `aria-pressed`; welches Symbol das bedeutet, entscheidet das
   Stylesheet, damit zwischen Klick und Anzeige kein zweiter Zustand steht. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
.theme-toggle__icon { display: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle__icon--moon { display: block; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display: block; }
/* Primaer-CTA wie im Portal: gefuellte Flaeche in der Primaerfarbe, kein Verlauf. */
.btn--primary {
  background: var(--primary); border-color: transparent; color: var(--primary-ink);
  border-radius: var(--radius); font-weight: 600;
}
.btn--primary:hover { background: var(--primary-hover); border-color: transparent; color: var(--primary-ink); }

/* ── Landing ──────────────────────────────────────────────────────────────── */
/* Weniger Luft oben als frueher (3-6rem): seit der Abschnitt Fakten und Knoepfe traegt, soll der
   Anfang der Szenen trotzdem noch im ersten Bild stehen. */
.hero { padding: clamp(2rem, 5vw, 3.5rem) 0 2rem; }
/* Kicker wie im Portal: Pille mit Rahmen, Mint-Text, gesperrt und in Grossbuchstaben. */
.hero__eyebrow, .section-kicker {
  display: inline-block; margin-bottom: 1.2rem; padding: 0.3rem 0.7rem;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ci-green-ink); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.section-kicker { margin-bottom: 0.6rem; }
.hero h1 {
  max-width: 24ch; margin: 0.65rem 0 0;
  /* Dasselbe Display-Level wie die Landingpage des Portals: die Stufen 07 bis 09 der
     Bibliotheksskala, fluide dazwischen, im Semibold der Bibliothek. */
  font-size: clamp(var(--ow-font-size-scale-07), 6vw, var(--ow-font-size-scale-09));
  line-height: 1.1; letter-spacing: -0.02em;
}
.hero__dot { color: var(--ci-green-ink); }
.hero__subtitle {
  margin: 1rem 0 0; max-width: 60ch; color: var(--ink);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 400; letter-spacing: -0.01em;
}
/* Was der Name bedeutet: eine Woerterbuchzeile unter den Knoepfen, die leiseste Zeile des
   Abschnitts - ohne Rahmen, damit sie nicht wie ein Hinweis aussieht, den man lesen muss. */
.hero__definition {
  margin: 1.25rem 0 0; max-width: 60ch;
  color: var(--ink-soft); font-size: 0.85rem; line-height: 1.5;
}
.hero__definition dfn { font-style: normal; font-weight: 600; color: var(--ink); }
.hero__definition [lang="ja"] { margin-inline: 0.15rem; color: var(--ink); }
/* Das Angebot in drei Fakten: was es kostet, was man nicht hergeben muss, wie lange man wartet.
   Eine Liste, weil es drei gleichrangige Aussagen sind; der Haken in der Firmenfarbe als Schrift
   (`--ci-green-ink`), damit er auf beiden Gruenden traegt. */
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin: 1.1rem 0 0; padding: 0; list-style: none;
  font-size: 0.95rem; color: var(--ink);
}
.hero__facts li { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.hero__facts li::before {
  content: ""; flex: none; inline-size: 0.35rem; block-size: 0.7rem; margin-inline-start: 0.2rem;
  border: solid var(--ci-green-ink); border-width: 0 2px 2px 0;
  transform: translateY(-0.1rem) rotate(45deg);
}
/* Ein gefuellter Knopf und ein zweiter mit Rahmen: eine Hauptsache je Bild. */
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }
.hero__actions .panel-cta { width: auto; min-width: 11rem; }
@media (max-width: 700px) {
  /* Auf dem Telefon untereinander statt nebeneinander: die drei Fakten waeren sonst ein
     Zeilenbruch mitten in einer Aussage, und die beiden Knoepfe gleich breit. */
  .hero__facts { flex-direction: column; gap: 0.35rem; }
  .hero__actions .panel-cta { flex: 1 1 10rem; min-block-size: 44px; }
}

.pick { scroll-margin-top: calc(var(--top-h) + var(--ow-spacing-16)); }

/* Die drei Szenen als Reiter (seit 2026-10-10, vorher ein Schieber mit Punkten, der von selbst
   weiterlief). Jeder Reiter 44px hoch und mit seinem Namen beschriftet; der gewaehlte gefuellt wie
   ein Hauptknopf, die anderen mit Rahmen. Der Rahmen in der Hover-Stufe der Linienfarbe, weil
   `--line` auf dem hellen Grund nicht zu sehen ist. Kurze Namen, damit alle drei auch bei 390px in
   einer Zeile stehen. */
.scenario-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.scenario-tab {
  min-block-size: 44px; min-inline-size: 44px; padding: 0 1rem;
  border: 1px solid var(--ow-border-base-default-hover); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.scenario-tab:hover { background: var(--surface-2); border-color: var(--ink-soft); }
.scenario-tab[aria-selected="true"] { background: var(--primary); border-color: transparent; color: var(--primary-ink); }
.scenario-tab[aria-selected="true"]:hover { background: var(--primary-hover); }

.scenario-slider__viewport {
  position: relative; overflow: hidden; min-height: clamp(31rem, 61vw, 40rem);
  border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.5); background: var(--surface);
  box-shadow: var(--shadow-lift); isolation: isolate;
}
.scenario-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 650ms ease; }
/* Eine Adresse wie `/#krankenhaus` springt nativ zur Szene, `slider.js` danach zu `.pick`. Mit
   diesem Abstand - Kopf, Luft, Reiterzeile - landen beide an derselben Stelle, und die Reiter
   stehen unter der Kopfzeile statt dahinter. */
.scenario-slide { scroll-margin-top: calc(var(--top-h) + var(--ow-spacing-16) + 44px + 0.75rem); }
.scenario-slide.is-active { z-index: 1; opacity: 1; pointer-events: auto; }
/* GETEILTES SZENENBILD (2026-10-02). Links die Szene, rechts die Planung dazu in der App, getrennt
   von einem schraegen Streifen im CI-Gruen. Rueckmeldung von Besuchern: das Bild allein zeigte,
   fuer wen das Produkt ist, aber nicht, wie es aussieht. Auf jeder Breite steht die ganze App im
   Browserfenster; auf dem Handy unter der Szene statt daneben. Eine Handy-Ansicht im Geraeterahmen
   war probiert und ist wieder raus: auf einem Telefon war das Geraet im Bild 170px breit und die
   App darin nicht mehr zu lesen.

   Die Bilder der App sind Aufnahmen der Mock-Seiten (`images/app-<szene>-desktop-<de|en>.webp`)
   bei 960 x 700, ohne Kopf- und Fusszeile der Demo, das Sommerfest nach "Automatisch besetzen".
   Wer die Mock-Seiten sichtbar aendert, nimmt sie neu auf, sonst zeigt die Startseite eine App,
   die es so nicht mehr gibt.

   --cut-top / --cut-bottom: wo der Schnitt oben und unten sitzt. Die Farben hier sind fest und
   folgen nicht dem Farbschema der Seite: der Grund unter ihnen ist immer das Bild oder die helle
   App. */
.scenario-slide { --cut-top: 50%; --cut-bottom: 40%; --stripe: 2.2%; --app-edge: calc(3.5rem + 1%); }
.scenario-slide__photo {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(0 0, var(--cut-top) 0, var(--cut-bottom) 100%, 0 100%);
}
/* Die Bildhaelfte ist schmaler als das Bild: das Motiv in die Mitte dessen, was davon zu sehen
   bleibt. */
.scenario-slide__image { width: 72%; height: 100%; object-fit: cover; display: block; transform: scale(1.025); transition: transform 7s ease-out; }
.scenario-slide.is-active .scenario-slide__image { transform: scale(1); }
/* Die Szenenbilder sind helle Illustrationen auf weissem Grund. Der Verlauf hellt die linke
   Haelfte deshalb auf, statt sie abzudunkeln, und die Schrift darauf ist dunkel. */
.scenario-slide__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.94) 0%, rgb(255 255 255 / 0.74) 26%, rgb(255 255 255 / 0) 46%);
}
/* Der Grund der App-Haelfte, und davor (::before) der Streifen auf der Schnittkante. */
.scenario-slide__stripe {
  position: absolute; inset: 0; background: linear-gradient(160deg, #eef3f8, #f7f9fb);
  clip-path: polygon(var(--cut-top) 0, 100% 0, 100% 100%, var(--cut-bottom) 100%);
}
.scenario-slide__stripe::before {
  content: ""; position: absolute; inset: 0; background: var(--ci-green);
  clip-path: polygon(var(--cut-top) 0, calc(var(--cut-top) + var(--stripe)) 0, calc(var(--cut-bottom) + var(--stripe)) 100%, var(--cut-bottom) 100%);
}
/* Die Flaeche rechts vom Schnitt, bis vor den Pfeil. Ein Groessen-Container, damit das
   Browserfenster an Breite UND Hoehe Mass nehmen kann. */
.scenario-slide__app {
  position: absolute; inset-block: 0; inset-inline-start: var(--cut-bottom); inset-inline-end: var(--app-edge);
  padding-inline-start: 7%; display: flex; align-items: center; justify-content: center;
  container-type: size;
}
/* Das Browserfenster: Aufnahme 960 x 700 plus 30px Leiste. So breit wie die Flaeche, ausser die
   ist dafuer zu niedrig - dann so hoch wie 88 % davon. */
.app-frame {
  position: relative; overflow: hidden; display: flex; flex-direction: column; background: #fafafa;
  width: min(100cqw, 88cqh * 960 / 730); aspect-ratio: 960 / 730;
  border-radius: 12px; box-shadow: 0 22px 54px rgb(11 26 43 / 0.22), 0 0 0 1px rgb(11 26 43 / 0.08);
  opacity: 0; transform: translateX(5%);
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1) 150ms, opacity 500ms ease 150ms;
}
.scenario-slide.is-active .app-frame { opacity: 1; transform: none; }
.app-frame img { display: block; flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top left; }
.app-frame__bar {
  flex: none; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  background: #eef0f2; border-bottom: 1px solid #e1e3e5; font-size: 0.72rem; color: #5b6570;
}
.app-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3d7db; }
.app-frame__bar span {
  margin-inline-start: 10px; padding: 2px 10px; border-radius: 6px; background: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Der Text endet vor dem Schnitt, nicht an einer festen Breite - sonst liefe er auf mittleren
   Breiten ueber den Streifen in die App. Oben verankert und nicht unten: am unteren Rand stand der
   Knopf der Szene bei 1440 x 900 unter dem ersten Bild. */
.scenario-slide__content {
  --content-start: clamp(4.75rem, 8vw, 6rem);
  position: absolute; z-index: 2; inset-inline-start: var(--content-start);
  inset-block: clamp(1.5rem, 4vw, 3rem) auto;
  width: min(25rem, calc(var(--cut-bottom) - var(--content-start) - 1.5rem)); color: #0b1a2b;
}
/* Zwischen Handy und Desktop: der Schnitt etwas weiter rechts und die Ueberschrift kleiner, damit
   "Produktionshalle" in die schmalere Bildhaelfte passt. */
@media (min-width: 701px) and (max-width: 959px) {
  .scenario-slide { --cut-top: 54%; --cut-bottom: 44%; }
  .scenario-slide__content { --content-start: 3.9rem; }
  .scenario-slide h3 { font-size: var(--ow-font-size-scale-07); }
}
.scenario-slide__count { margin-left: 0.65rem; font-size: 0.78rem; color: rgb(11 26 43 / 0.62); }
/* `hyphens: manual`: mit `auto` brach "Produktionshalle" als "Produktionshal-le" um. Die Stufe 08
   als Obergrenze haelt das Wort auch in der Bildhaelfte des Desktops auf einer Zeile. */
.scenario-slide h3 {
  margin: 0.75rem 0 0; hyphens: manual;
  font-size: clamp(var(--ow-font-size-scale-07), 5vw, var(--ow-font-size-scale-08));
  line-height: 1.1; letter-spacing: -0.03em;
}
.scenario-slide p { margin: 0.9rem 0 1.5rem; color: rgb(11 26 43 / 0.78); font-size: clamp(0.95rem, 1.7vw, 1.1rem); }
/* Auf dem hellen Bild traegt eine weisse Flaeche nicht mehr - der Knopf nimmt darum die
   Aktionsfarbe, dieselbe, die im Portal auf hellem Grund steht. */
.scenario-slide__cta {
  display: inline-flex; align-items: center; gap: 0.75rem; color: var(--primary-ink); background: var(--primary);
  border-radius: var(--radius-s); padding: 0.7rem 0.95rem; font-weight: 750; text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}
.scenario-slide__cta:hover { transform: translateY(-2px); background: var(--primary-hover); }
/* Die Marken sitzen nur auf den Szenenbildern, also auf hellem Grund - feste dunkle Werte, kein
   Token, das mit dem Farbschema der Seite umspringt. `--ok` ist fuer dunklen Grund korrigiert und
   waere hier zu hell, darum steht das CI-Gruen ausgeschrieben. */
.tag {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 999px; padding: 0.15rem 0.55rem;
  background: rgb(11 26 43 / 0.06); color: rgb(11 26 43 / 0.72); border: 1px solid rgb(11 26 43 / 0.18);
}
.tag--live {
  background: rgb(153 204 0 / 0.18);
  color: #4a6600; border-color: rgb(153 204 0 / 0.45);
}
.slider-arrow {
  position: absolute; z-index: 3; inset-block-start: 50%; translate: 0 -50%;
  width: 3rem; height: 3rem; border: 1px solid rgb(11 26 43 / 0.14); border-radius: 999px;
  color: #0b1a2b; background: rgb(255 255 255 / 0.82); box-shadow: 0 4px 18px rgb(11 26 43 / 0.14);
  backdrop-filter: blur(8px); font: inherit; font-size: 1.1rem; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.slider-arrow--prev { inset-inline-start: 0.4rem; }
.slider-arrow--next { inset-inline-end: 0.4rem; }
.slider-arrow:hover { border-color: rgb(11 26 43 / 0.3); color: #0b1a2b; background: #fff; transform: scale(1.06); }
.scenario-slider__ai-note { margin: 0.5rem 0 0; text-align: start; color: var(--ink-soft); font-size: 0.72rem; }

/* ── Auf dem Plan ─────────────────────────────────────────────────────────────
 * Der Abschnitt direkt hinter dem Schieber (2026-10-09): Kicker, Ueberschrift, ein Satz, das Video,
 * vier Punkte. Das Video ist die eine grosse Flaeche dieses Bildschirms; die Punkte darunter tragen
 * keine eigene Farbe, nur das Symbol in der Ikonen-Tinte der Bibliothek.
 *
 * Die Flaeche haelt 16:9 auch ohne Datei. Video und Standbild kommen getrennt (`images/`), und bis
 * dahin steht hier eine ruhige Flaeche in der Groesse, die das Video haben wird - die Seite
 * darunter springt nicht, wenn es eintrifft. `object-fit: contain`, damit ein Video in einem
 * anderen Format nicht beschnitten wird, sondern Raender bekommt. */
.showcase { margin-block: clamp(3rem, 7vw, 5.5rem) 0; scroll-margin-top: calc(var(--top-h) + var(--ow-spacing-16)); }
.showcase__intro { max-width: 46rem; }
.showcase h2 { margin: 0.25rem 0 0; font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.12; letter-spacing: -0.03em; }
.showcase__lead { margin: 0.7rem 0 0; color: var(--ink-soft); font-size: clamp(1rem, 1.8vw, 1.15rem); }
.showcase__media { margin: 1.6rem 0 0; }
.showcase__frame {
  overflow: hidden; aspect-ratio: 16 / 9;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.5);
  box-shadow: var(--shadow-lift);
}
.showcase__frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
/* Das Standbild hat das Seitenverhaeltnis der Ansicht, nicht das eines Films. */
.showcase__frame--still { aspect-ratio: 1920 / 843; }
.showcase__frame--still img { display: block; width: 100%; height: auto; }
/* Die Textfassung des Videos: zugeklappt eine Zeile, aufgeklappt ein Absatz in Lesebreite. */
.showcase__transcript { margin-top: 0.6rem; font-size: 0.85rem; color: var(--ink-soft); }
.showcase__transcript summary { width: fit-content; cursor: pointer; color: var(--brand-strong); }
.showcase__transcript p { max-width: 65ch; margin: 0.5rem 0 0; }
.showcase__more { max-width: 60rem; margin: 1.6rem 0 0; color: var(--ink-soft); font-size: 0.88rem; }
.showcase__more a { color: var(--brand-strong); white-space: nowrap; }

/* Ein Punkt: Symbol links, Titel und ein Satz rechts. Dieselbe Form im Raster darunter
   (`.capability-grid`), damit beide Abschnitte eine Sprache sprechen. */
.feature-points, .capability-grid {
  display: grid; gap: 1.25rem 1.5rem; margin: 0; padding: 0; list-style: none;
}
.feature-points { margin-top: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.feature-points li, .capability-grid li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.feature-points h3, .capability-grid h3 { margin: 0.15rem 0 0.2rem; font-size: 0.98rem; }
.feature-points p, .capability-grid p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.feature-icon {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-s); background: var(--surface-2); color: var(--panel-icon-color);
}
.feature-icon svg {
  width: 1.35rem; height: 1.35rem;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.feature-icon .feature-icon__fill { fill: currentColor; }

/* ── Was dandori ausserdem kann ───────────────────────────────────────────────
 * Ein offenes Raster aus acht Punkten auf dem Grund der Seite, keine Flaeche und keine acht
 * Kacheln: direkt danach steht die Flaeche des kostenlosen Angebots, und zwei gleiche Flaechen
 * hintereinander lasen sich als ein Block; acht Kacheln vor den vier Kacheln weiter unten als eine
 * Tabelle. Eine Linie oben trennt den Abschnitt vom Grundriss davor. Auf dem Telefon eine Spalte. */
.capabilities {
  margin-block: clamp(3rem, 7vw, 5rem) 0; padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
}
.capabilities h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.025em; }
.capabilities__lead { margin: 0.45rem 0 0; color: var(--ink-soft); }
.capability-grid { margin-top: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.5rem 1.75rem; }

.free-promise {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center;
  margin-block: clamp(3rem, 7vw, 5.5rem) 2rem; padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--brand-soft); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.5);
}
.free-promise h2 { margin: 0.25rem 0 0; font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.12; letter-spacing: -0.03em; }
.free-promise p { max-width: 48rem; margin: 0.7rem 0 0; color: var(--ink-soft); }
.free-promise__content { display: flex; flex-direction: column; align-items: flex-start; }
.free-promise__content .btn { margin-top: 1.1rem; text-decoration: none; }
.free-promise__icon {
  display: grid; place-items: center; width: 6rem; height: 6rem;
  color: var(--panel-icon-color); background: transparent;
}
.free-promise__icon svg {
  width: 4.5rem; height: 4.5rem; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.panel-cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: min(100%, 19rem); min-height: 2.75rem; padding: 0.65rem 0.9rem;
  text-align: center; text-decoration: none;
}

/* ── Was im kostenlosen Angebot enthalten ist ─────────────────────────────────
 * Vier Kacheln, nur auf der Startseite. `.free-card` und nicht `.card`: `.card` gehoert in
 * `app-shell.css` der Anwendung und in `legacy-board.css` dem alten Entwurf, beide mit anderer
 * Bedeutung. Auf DIESER Seite ist keine der beiden Dateien geladen, der Name waere also heute
 * frei - er bliebe es nur so lange, bis jemand hier eine der beiden einbindet. */
.free-details { margin-block: clamp(2rem, 5vw, 3rem) 0; }
.free-details h2 { margin: 0 0 1.4rem; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.025em; }
.free-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.free-card {
  padding: 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.free-card h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.free-card p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }

.claims {
  display: grid; gap: 1rem; margin-block: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.claim { border-left: 3px solid var(--brand); padding-left: 0.9rem; }
.claim h3 { margin: 0 0 0.2rem; font-size: 0.98rem; }
.claim p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }

.optware-cta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center; margin-block: 3.5rem 1rem; padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.5);
  box-shadow: var(--shadow);
}
/* Der Ansprechpartner statt der Bildmarke: Portrait, darunter Name und Aufgabe. Die Spalte
   ist so breit wie die laengste Zeile darunter und nicht wie das Bild, sonst bricht "Head of
   Customer Service" mitten im Wort. Ein abgerundetes Rechteck und kein Kreis (Wunsch des
   Abgebildeten, 2026-10-08): das Foto ist eng um Kopf und Schultern geschnitten, und ein Kreis
   kappte die Schultern und den Haaransatz. Der Radius ist der der Flaechen auf dieser Seite. */
.optware-cta__person { display: grid; justify-items: center; gap: 0.6rem; width: 9rem; margin: 0; }
.optware-cta__person img {
  width: 7rem; height: 7rem; display: block;
  border-radius: var(--radius); object-fit: cover;
  border: 1px solid var(--line);
}
.optware-cta__person figcaption { text-align: center; font-size: 0.78rem; line-height: 1.35; color: var(--ink-soft); }
.optware-cta__person strong { display: block; font-size: 0.88rem; color: var(--ink); }
.optware-cta__copy h2 { margin: 0.2rem 0 0; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.025em; }

/* ── Der Weg zur eigenen Umgebung ─────────────────────────────────────────────
 * Der eine Abschnitt, den die alte Landingpage hatte und die Demo nicht: der Weg von der Anfrage
 * bis zum Start. Er steht zwischen den Behauptungen und dem OptWare-Verweis, also genau da, wo
 * jemand entweder anfangen oder weiterreden will.
 *
 * Die nummerierte Liste `.steps`, die hier stand, gibt es weiter im Portal in
 * `objects/_sections.scss` - `/check-email` laedt sie. Diese Seite zeigt den Weg stattdessen als
 * Schiene, ohne Ziffern und ohne einen Satz je Schritt. */
.setup { margin-block: clamp(2.5rem, 6vw, 4rem) 1rem; }
.setup h2 { margin: 0.25rem 0 1.4rem; font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.12; letter-spacing: -0.03em; }
/* Der Weg als Schiene statt als nummerierte Liste: je Station ein Punkt auf einer Linie, darunter
   die Station und die Zeit, die sie kostet. Die Reihenfolge steht in der Linie, also braucht keine
   Ziffer sie zu wiederholen - `<ol>` bleibt das Markup, weil die Reihenfolge Inhalt ist und nicht
   Dekoration. Auf schmalen Schirmen brechen die Stationen um und die Linie bricht mit ihnen. */
.flow { display: flex; flex-wrap: wrap; gap: 1.4rem 1.6rem; padding: 0.2rem 0 0; margin: 0; list-style: none; }
.flow li { position: relative; flex: 1 1 8.5rem; padding-top: 1.5rem; color: var(--ink-soft); font-size: 0.85rem; }
/* Die Schiene liegt unter dem Punkt und laeuft bis zur naechsten Station, die Luecke eingerechnet.
   Bei der letzten hoert sie am Punkt auf, sonst zeigte sie ins Leere. */
.flow li::before {
  content: ""; position: absolute; inset-block-start: 0.3rem; inset-inline-start: 0;
  inline-size: calc(100% + 1.6rem); block-size: 2px; background: var(--line);
}
.flow li:last-child::before { inline-size: 0.65rem; }
.flow li::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 0.65rem; block-size: 0.65rem; border-radius: 999px; background: var(--primary);
}
.flow strong { display: block; margin-bottom: 0.15rem; color: var(--ink); font-size: 0.95rem; }
.setup__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }

/* Der Hinweis, wenn die kostenlose Umgebung gerade ausgebucht ist. Die Regel ist die des Portals
   (`components/_panels.scss`), auf die Tokens dieser Datei gezogen - sie steht nur auf dieser
   einen Seite, und die laedt `portal.css` nicht. */
.notice {
  margin: 1.5rem 0 0; padding: var(--ow-spacing-12) var(--ow-spacing-16);
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 0.85rem;
}
.notice--info {
  border-color: var(--line);
  background: color-mix(in srgb, var(--ow-background-info-default) 12%, transparent);
  color: var(--ink-soft);
}

.optware-cta__copy p { max-width: 43rem; margin: 0.45rem 0 0; color: var(--ink-soft); }
.optware-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; margin-top: 1.1rem; }

@media (max-width: 700px) {
  /* Der Kopf in zwei Zeilen: Marke und Wortmarke oben, die Links darunter. Dieselbe Regel steht
     im Portal (`objects/_page.scss`), weil derselbe Kopf auf beiden Seiten steht und
     sync-demo.sh die Portal-Links hier einsetzt - ohne sie lag die Navigation bei 375px
     ausserhalb des Bildschirms und die Seite scrollte seitwaerts. Breakpoint in Pixeln, damit er
     auf beiden Seiten bei derselben Breite greift: die Wurzeln der beiden Seiten sind
     unterschiedlich verankert. */
  .top__inner { flex-wrap: wrap; row-gap: var(--ow-spacing-8); column-gap: var(--ow-spacing-8); }
  /* Auf dem Telefon 44px statt 40px: Ziele fuer den Finger, nicht fuer den Zeiger. */
  .top__cta, .top .btn:not(.top__cta) { min-block-size: 44px; }
  .top .btn--icon, .top .theme-toggle { min-inline-size: 44px; }
  .top__spacer { display: none; }
  .top__free { display: none; }
  /* Marke und Wortmarke allein in der ersten Zeile, alles danach in der zweiten - egal, worin es
     steckt. Das Portal haelt seine Links in einem <nav>, hier setzt sie sync-demo.sh als lose
     Kinder ein, und ohne diese Zeile brach derselbe Kopf dort anders um als hier. */
  .top__logo { flex: 0 0 100%; }
  /* Zwei Zeilen, und auf den Board-Seiten mit ihren zwei zusaetzlichen Schaltflaechen drei.
     Gemessen, nicht geschaetzt: 26px Wortmarke + 8px Zeilenabstand + 44px Linkzeile + zweimal
     6px Polsterung + 1px Linie = 91px, und mit einer dritten Zeile (8px + 44px) 143px. Die 112px,
     die hier einmal standen, waren fuer die Board-Seiten 11px zu wenig - die klebende Team-Spalte
     lief unter den Kopf. */
  :root { --top-h: 91px; }
  .board-page { --top-h: 143px; }
  .top nav, .top__nav { width: 100%; flex-wrap: wrap; gap: var(--ow-spacing-8); }
  /* Die eingesetzten Portal-Links sind direkte Kinder von .top__inner, nicht eines <nav>. */
  .top__inner > .btn, .top__inner > .top__cta { flex: 0 0 auto; }
  .free-promise { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
  .free-promise__icon { width: 5rem; height: 5rem; margin-inline: auto; }
  .free-promise__content { align-items: center; }
  .optware-cta { grid-template-columns: 1fr; text-align: center; }
  .optware-cta__person { width: auto; margin-inline: auto; }
  .optware-cta__person img { width: 6rem; height: 6rem; }
  .optware-cta__copy p { margin-inline: auto; }
  .optware-cta__actions { width: 100%; align-items: center; }
  /* Geteiltes Szenenbild untereinander: oben die Szene mit dem Text, dann der Streifen quer, darunter
     die App im Browserfenster ueber die ganze Breite. Die Bildflaeche endet beim Schnitt (34 %
     rechts, 42 % links), damit das Motiv in dem Teil steht, der zu sehen ist; ihr Schnitt ist in
     ihren eigenen Massen angegeben. */
  .scenario-slider__viewport { min-height: 34rem; }
  .scenario-slide__photo { inset-block-end: 56%; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 96%); }
  .scenario-slide__image { width: 100%; object-position: 62% center; }
  .scenario-slide__photo::after { background: linear-gradient(180deg, rgb(255 255 255 / 0.94) 0%, rgb(255 255 255 / 0.66) 40%, rgb(255 255 255 / 0) 80%); }
  .scenario-slide__stripe { clip-path: polygon(0 42%, 100% 34%, 100% 100%, 0 100%); }
  .scenario-slide__stripe::before { clip-path: polygon(0 42%, 100% 34%, 100% 36%, 0 44%); }
  .scenario-slide__app { inset: 40% 0 0 0; padding: 0.75rem; }
  .scenario-slide__content { inset-inline: 1.25rem; inset-block: 1.25rem auto; width: auto; }
  /* Kein Platz fuer den Satz ueber der Szene. Was er sagt, zeigt die App darunter. */
  .scenario-slide p { display: none; }
  .scenario-slide__cta { margin-top: 0.9rem; }
  /* Der Weg steht hier untereinander statt nebeneinander. Als Zeilenumbruch einer waagerechten
     Schiene ergab er zwei Zweierreihen, und die las sich als Tabelle: die dritte Station stand
     unter der ersten und sah aus, als gehoerte sie zu ihr. Senkrecht bleibt die Reihenfolge eine
     Linie von oben nach unten, und jede Station hat die Breite des Bildschirms fuer ihren Text. */
  .flow { flex-direction: column; gap: 0.85rem; }
  .flow li { flex: 0 0 auto; padding-top: 0; padding-inline-start: 1.5rem; }
  /* Die Schiene faellt vom Punkt zum naechsten Punkt, Luecke eingerechnet, und liegt auf seiner
     Mitte: der Punkt ist 0.65rem breit, also 0.325rem minus die halbe Linienbreite. */
  .flow li::before {
    inset-block-start: 1rem; inset-inline-start: calc(0.325rem - 1px);
    inline-size: 2px; block-size: calc(100% + 0.85rem - 1rem);
  }
  .flow li:last-child::before { block-size: 0; }
  .flow li::after { inset-block-start: 0.3rem; }
  .slider-arrow { width: 2.75rem; height: 2.75rem; inset-block-start: 42%; }
  .slider-arrow--prev { inset-inline-start: 0.3rem; }
  .slider-arrow--next { inset-inline-end: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .scenario-slide__image { transform: none !important; }
}

/* ── Unterseiten-Platzhalter (P0) ─────────────────────────────────────────── */
.wip {
  margin-block: 3rem;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 2rem; text-align: center;
}
.wip h1 { margin: 0 0 0.4rem; font-size: 1.4rem; }
.wip p { color: var(--ink-soft); margin: 0 0 1.2rem; }
.wip__stats { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.stat {
  background: var(--surface-2); border-radius: var(--radius-s);
  padding: 0.7rem 1.2rem; min-width: 8rem;
}
.stat b { display: block; font-size: 1.5rem; color: var(--brand-strong); }
.stat span { font-size: 0.8rem; color: var(--ink-soft); }

/* ── Fusszeile ────────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}
.foot__inner {
  width: min(1120px, 100% - 2rem); margin-inline: auto;
  padding-block: 1rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--ink-soft);
}
/* Impressum, Datenschutz, Nutzungsbedingungen, AVV, Cookie-Einstellungen. Auf der Startseite
   Pflicht und nicht Zierde - sie ist die Seite, auf die die Anzeige fuehrt. Die Mock-Seiten tragen
   dieselbe Leiste, gestaltet in `app-shell.css` unter `.swp`, weil dort die Anwendung drumherum
   steht; diese Regeln hier sind fuer die Startseite, die `app-shell.css` nicht laedt. */
.foot__inner .foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.foot__inner .foot__note { margin: 0; flex: 1 1 100%; }
/* `--brand-strong` ist der Fokusring der Bibliothek: hell #004ad4 (7,29:1 auf #fafafa), dunkel
   #689eff (5,43:1 auf #272a30). Beide tragen den normalgrossen Footer-Link ueber AA. */
.foot__inner a { color: var(--brand-strong); }

/* ── NUR IN DER DEMO: Board, Automatik, Veröffentlichen (FG12, FG14, FG15) ────
 * Was die Demo am Board anders zeigt als die Anwendung; jede Zeile steht in der Liste BEWUSSTE
 * ABWEICHUNGEN im Kopf von app-shell.css. Auf `.swp` geschachtelt wie dort. */

/* „offen" in der Leiste fasst teilweise und leer zusammen: die Marke ist halb Warnfarbe, halb Bahn. */
.swp .legend__item[data-kind='gap']::before {
  border: 1px solid var(--warning-color);
  background: linear-gradient(90deg, var(--warning-color) 50%, transparent 50%);
}

/* Die Handeinsätze, geteilt in die des Besuchers und die des Beispielplans. */
.swp .count__split {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-sm);
  color: var(--text-color);
  font-variant-numeric: tabular-nums;
}

/* Wofür die Zahlen gelten, in Lesegrösse. */
.swp .sheet__sub.generate__sub {
  font-size: var(--font-size-md);
  color: var(--text-color);
}

/* „Einteilen": das runde `+` als Pille mit Wort, ein ganzes Tippziel hoch. */
.swp .req__action.req__action--labelled {
  display: inline-flex;
  gap: 4px;
  width: auto;
  height: auto;
  min-height: var(--ow-control-height-button-m);
  padding-inline: 12px;
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .swp .req__action.req__action--labelled {
    min-height: var(--ow-touch-target);
  }
}

/* Von der Automatik gesetzt: zum gestrichelten Rand der Anwendung eine Tönung und ein Zeichen, damit
   es nicht an der Farbe allein hängt. */
.swp .chip.is-generated:not(.is-held, .is-flagged, .is-conflict) {
  border-color: var(--primary-color);
  background-color: var(--ow-fill-primary);
}

.swp .chip__pick .chip__auto {
  font-size: 14px;
  color: var(--primary-color);
}

/* Mehrfachwahl: ein Kästchen statt eines Kreises. */
.swp .picks--multi .pick__tick {
  border-radius: var(--border-radius-extra-small);
}

/* Die offenen Zeilen in der Bestätigung: ein Hinweis, kein Halt. */
.swp .confirm-facts__open {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-left: 2px solid var(--warning-color);
  border-radius: var(--border-radius-extra-small);
  background-color: var(--ow-fill-warning);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

/* Wie die Nachricht beim Empfänger ankäme: eine Sprechblase, so schmal wie im Messenger. */
.swp .share-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.swp .share-preview__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}

.swp .share-preview__bubble {
  align-self: flex-start;
  max-width: 32ch;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-small) var(--border-radius-small) var(--border-radius-small) 0;
  background: var(--surface-2);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* In der Farbe eines Links, aber ohne Unterstrich: die Vorschau ist ein Bild der Nachricht, und ein
   Unterstrich verspräche einen Klick, der nirgendwohin führt. */
.swp .share-preview__link {
  color: var(--brand-strong);
}

/* ── Was hier NICHT mehr steht ────────────────────────────────────────────────
 * Der alte Board-Entwurf (App-Fenster, Tagesspalten, Schicht-Karten, Team-Spalte, Detail-Dialog,
 * JSON-Peek) ist nach `legacy-board.css` gezogen. Die vier Board-Seiten zeigen jetzt die
 * Anwendung selbst und laden `app-shell.css`; nur die drei entlinkten Tool-Stubs laden noch die
 * Ablage. Das ist keine Aufräumarbeit, sondern Bedingung: die beiden Dateien benutzen dieselben
 * Klassennamen — `.board`, `.card`, `.chip`, `.ring`, `.day`, `.pane` — für verschiedene Dinge,
 * und `.board { align-items: flex-start }` von dort hat die Karten der Anwendung
 * zusammengeschoben, solange beide geladen waren. */

/* Toast fuer Reset-Bestaetigung */
.toast {
  position: fixed; z-index: 40; inset-block-end: 1.25rem; inset-inline-start: 50%;
  translate: -50% 0;
  background: var(--ink); color: var(--bg);
  border-radius: 999px; padding: 0.5rem 1.1rem;
  font-size: 0.9rem; box-shadow: var(--shadow-lift);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.toast.is-on { opacity: 1; }

/* ── NUR IN DER DEMO: Vorschau-Brücke, Toast mit „Rückgängig", Telefon (C-FG4, C-FG5, C-FG6) ──
   Ein eigener Block am Ende, damit er die Kopfzeilen- und Startseiten-Blöcke oben nicht berührt. */

/* C-FG4. Wer aus einer Vorschau kommt, liest über dem Hinweis, warum er jetzt im Vereinsfest steht. */
.swp .demo-note__bridge {
  display: block;
  margin-block-end: var(--ow-spacing-4);
  color: var(--ink);
  font-size: var(--ow-typography-body-base-font-size);
  font-weight: var(--ow-font-weight-semibold);
}

/* C-FG5. Der Toast nimmt die Breite, die sein Satz braucht - von der Mitte aus (`left: 50%`) hatte
   er nur die halbe Seite und brach lange Sätze früh um. Mit „Rückgängig" ist er eine Zeile aus Satz
   und Knopf; der Knopf in der Tinte des Satzes, fett, am Ende, wie die Snackbar der Anwendung
   (`_ow-material.scss`: `button-color: var(--text-color)`), und 44px hoch. */
.toast {
  inset-inline: 1rem;
  margin-inline: auto;
  translate: none;
  inline-size: fit-content;
  max-inline-size: 36rem;
}
.toast.has-action {
  display: flex;
  align-items: center;
  gap: var(--ow-spacing-8);
  padding-block: var(--ow-spacing-2);
  padding-inline-end: var(--ow-spacing-4);
  border-radius: var(--radius);
}
.toast.has-action.is-on { pointer-events: auto; }
.toast__action {
  flex: none;
  min-block-size: 44px;
  padding: 0 var(--ow-spacing-12);
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--ow-font-weight-bold);
  cursor: pointer;
}
.toast__action:hover { text-decoration: underline; }
.toast__action:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
/* Solange ein Sheet offen ist, liegen dessen Knöpfe unten: der Toast geht nach oben, über den Schleier. */
body.has-sheet .toast {
  z-index: 42;
  inset-block: max(0.75rem, env(safe-area-inset-top)) auto;
}

/* C-FG6. Die Leiste am unteren Rand des Telefons (board.js `renderMobileActions`): „Automatisch
   besetzen" und „Veröffentlichen" nebeneinander, im Griff des Daumens, an jeder Scroll-Stelle des
   Plans. Ab dem Tablet stehen beide an ihren Plätzen in Kopf und Werkzeugzeile, und die Leiste ist
   weg - `display: none`, nicht nur unsichtbar, damit ein Screenreader nichts zweimal liest.
   Festgesteckt und nicht `sticky`: klebend stand sie über der Fusszeile mal hier, mal da, und der Toast
   darüber wusste nicht, wie hoch er stehen muss. Die Fusszeile hält dafür unten ihre Höhe frei. */
.swp .demo-actionbar { display: none; }
@media (max-width: 767px) {
  .swp .demo-actionbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 30;
    display: flex;
    gap: var(--ow-spacing-8);
    padding: var(--ow-spacing-8) var(--ow-shell-gutter) calc(var(--ow-spacing-8) + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  /* Zwei gleich breite Hälften; die Beschriftung darf umbrechen statt über den Rand zu laufen, und das
     Funkeln von „Automatisch besetzen" bleibt der Werkzeugzeile - hier fehlt ihm der Platz. */
  .swp .demo-actionbar > .mbtn {
    flex: 1 1 0;
    min-inline-size: 0;
    min-block-size: 44px;
    height: auto;
    padding-inline: var(--ow-spacing-8);
    justify-content: center;
    font-size: var(--font-size-md);
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .swp .demo-actionbar > .mbtn > .ow-icon { display: none; }
  body.has-sheet .swp .demo-actionbar { display: none; }
  body.swp-page:has(.demo-actionbar) .swp .foot {
    padding-block-end: calc(4.5rem + env(safe-area-inset-bottom));
  }
  /* Der Toast steht über der Leiste, nicht auf ihr - wie die Anwendung ihn über ihre Tab-Leiste hebt
     (`_ow-toast.scss`). */
  body.swp-page:not(.has-sheet):has(.demo-actionbar) .toast {
    inset-block-end: calc(5rem + env(safe-area-inset-bottom));
  }
}

/* C-FG6. Die Demo-Leiste der Board-Seiten auf dem Telefon in zwei Zeilen statt drei: „Alle
   Szenarien" fällt weg (die Seite trägt „Zurück zu den Planungen"), und „Demo zurücksetzen" wird ein
   Symbol mit seinem Namen als aria-label und Tooltip, 44x44 wie die übrigen Symbolknöpfe. Nur unter
   `.swp-page`: das Portal und die Startseite behalten ihren Kopf. */
.top__reset .top__icon { display: none; }
@media (max-width: 700px) {
  .swp-page .top__inner { column-gap: var(--ow-spacing-8); }
  .swp-page .top [data-i18n="chrome.backToCases"] { display: none; }
  .swp-page .top .top__reset {
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
  }
  .swp-page .top__reset .top__label { display: none; }
  .swp-page .top__reset .top__icon {
    display: inline-block;
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
}