/* Grundregeln, die auf JEDER Seite gelten.
 *
 * Sie standen bis zum 01.09.2026 als <style>-Block IN web/index.html — und
 * damit nur dort. Die 26 Unterseiten liefen auf css/tokens.css und hatten
 * eigene Grundwerte fuer Hintergrund, Textfarbe und Verweise. Das ist der
 * Grund, warum sie neben der Startseite wie ein anderes Produkt aussahen.
 *
 * Wortgleich aus der Startseite uebernommen, nichts umformuliert.
 */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:88px}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
input,textarea{font-family:var(--font-core)}
@keyframes tha-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-30px,20px,0) scale(1.06)}}
@keyframes tha-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-12px,0)}}
@keyframes tha-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes tha-pop{from{opacity:0;transform:translate3d(0,15px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){[data-chat-panel]{animation:none !important}}

/* Kopfleiste auf dem Telefon: Logo, Burger, Testknopf und Sprachumschalter
   brauchen ~540px und haben 390. Der Testknopf geht — er ist das breiteste
   Element, und dieselbe Aufforderung steht im Burger-Menue noch einmal. Der
   Sprachumschalter bleibt: klein, und das einzige Bedienelement ohne
   Entsprechung im Menue. */
@media (max-width: 620px) {
  header a[data-cta="nav_trial"] { display: none !important; }
}

/* ------------------------------------------------------------
   Einwaende — Startseite, zwischen Preisen und Kontakt (01.09.2026)

   Warum Aufklapper und nicht acht Absaetze: Wer hier ankommt, hat GENAU
   EINEN Einwand und sucht ihn. Eine Liste von Fragen ist ueberfliegbar,
   acht Absaetze sind es nicht.

   Warum <details> und kein JavaScript: Der Inhalt steht im HTML und ist
   auch ohne Skript lesbar und auffindbar — dieselbe Zusage wie beim Rest
   der Seite. Tastatur und Vorleseprogramm bekommen das Verhalten vom
   Browser, geschenkt und richtig.
   ------------------------------------------------------------ */
.einwand {
  border-top: 1px solid var(--border-subtle);
}
.einwand:last-of-type { border-bottom: 1px solid var(--border-subtle); }

.einwand > summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-xl);
  line-height: var(--lh-snug);
  font-family: var(--font-core);
  color: var(--text-heading);
}
.einwand > summary::-webkit-details-marker { display: none; }

/* Das Pluszeichen ist zwei Striche, keine Schrift: In einer Schriftart
   sitzt ein "+" je nach Schnitt anders, und beim Drehen faellt das auf. */
.einwand > summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--accent), var(--accent)) center/14px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/2px 14px no-repeat;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.einwand[open] > summary::after { transform: rotate(45deg); }
.einwand > summary:hover { color: var(--text-link-hover); }
.einwand > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.einwand > div {
  padding: 0 40px 24px 0;
  max-width: 72ch;
  color: var(--text-body);
}
.einwand > div > p { margin: 0 0 12px; }
.einwand > div > p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .einwand > summary::after { transition: none; }
}

/* Klappmenues unterhalb der Burger-Grenze ganz aus dem Layout nehmen.

   BEFUND 01.09.2026: Die drei Klappmenues der Kopfleiste sind geschlossen
   nur `visibility: hidden` und `opacity: 0` — sie liegen also weiter im
   Layout, 453 px breit. Auf einem 390-px-Schirm ragten sie 99 px ueber den
   rechten Rand hinaus und erzeugten eine waagerechte Bildlaufleiste auf
   einer Seite, auf der nichts Sichtbares zu breit ist.

   Auf den aelteren Unterseiten fiel das nicht auf, weil css/styles.css dem
   body ein `overflow-x: hidden` gibt — der Ueberlauf war dort also nicht
   weg, nur abgeschnitten. Das ist kein Zustand, auf den man sich verlaesst.

   Unter 1080 px ersetzt der Burger die Menueleiste (js/chrome.js,
   syncHeader). Die Klappmenues sind dort nicht zu oeffnen; sie gehoeren
   deshalb auch nicht ins Layout. */
@media (max-width: 1079px) {
  header[data-ref="navRef"] [data-menu] { display: none !important; }
}

/* Der Hintergrund von Kopf- und Fusszeile — als CSS, nicht aus JavaScript.
 *
 * BEFUND (01.09.2026, Arpad an der Vorschau): Auf den Unterseiten war die
 * untere Haelfte der Seite unsichtbar. Weisse Schrift auf weissem Grund.
 *
 * URSACHE. Die dunkelgruene Flaeche der Fusszeile kommt nicht von der
 * Sektion selbst (die traegt `background: none`), sondern von einem
 * `<div class="plx-bg">` darin. Positioniert wird dieses Div von einer
 * Regel, die `js/parallax.js` zur LAUFZEIT als <style>-Element in den Kopf
 * schreibt. Die Startseite laedt parallax.js, die 32 Unterseiten nicht —
 * dort blieb das Div ein normaler Block ohne Hoehe, die Flaeche fehlte, und
 * die weisse Schrift stand auf Weiss.
 *
 * Ein Hintergrund, der von einer Skriptdatei abhaengt, ist ohnehin falsch
 * herum: Ohne JavaScript waere die Fusszeile auch auf der Startseite
 * unlesbar gewesen. Die Regeln stehen deshalb jetzt hier, woertlich aus
 * parallax.js uebernommen. Die Datei darf sie weiter setzen — zwei
 * identische Regeln schaden nicht.
 *
 * NICHT uebernommen: die Bewegung (`@keyframes plx-drift` und die
 * animation-timeline-Regel). Die ist Zierde und gehoert zum Skript.
 */
.plx-frame { overflow: hidden; }
.plx-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -48px;
  bottom: -48px;
  z-index: -1;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Abstand zwischen den Sektionen — eine Stellschraube, kein Streufeld.

   Vorher trug jeder Sektions-Wrapper sein eigenes `padding: 96px 32px`
   inline (facts 80, download 56). Zwei benachbarte Sektionen ergaben
   damit 192 px Luft, und die Ausreisser machten den Rhythmus ungleich.
   Jetzt zieht jeder Wrapper --sektion-y; zum Nachjustieren reicht die
   eine Zeile hier.
   ------------------------------------------------------------------ */
:root { --sektion-y: 64px; }          /* Lücke zwischen zwei Sektionen: 128px */
@media (max-width: 900px) { :root { --sektion-y: 52px; } }
@media (max-width: 620px) { :root { --sektion-y: 40px; } }

/* ------------------------------------------------------------------
   Hero-Deko auf schmalen Schirmen.

   BEFUND 02.09.2026, gemessen bei 375 px: die drei schwebenden Karten
   sind absolut positioniert und rechts neben der 820-px-Textspalte
   gedacht. Auf einem Telefon gibt es kein Rechts — gemessen lagen
   "Clause 14.2" (y 193–309) auf der H1 (ab y 220), "Your own rule"
   (y 441–532) auf dem Fliesstext und "Answered from 3 of your
   documents" (y 636–699) auf dem CTA-Knopf (y 658–710).

   Sie sind Dekoration; ihre Aussage steht im Fliesstext. Unterhalb von
   900 px verschwinden sie, die Verlaufs-Ebenen darunter bleiben — die
   sorgen fuer die Lesbarkeit ueber dem Foto.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  #hero .hero-deko { display: none !important; }
}

/* ------------------------------------------------------------------
   Solution-Karussell.

   Vorher: fuenf Karten mit vollem Fliesstext in einem 3+2-Raster. Auf
   dem Desktop eine Textwand, auf dem Telefon fuenf Bloecke
   untereinander -- der laengste Abschnitt der Seite fuer den Inhalt,
   den am wenigsten Leute komplett lesen.

   Jetzt: eine waagerecht scrollende Spur mit Symbol, Titel und einem
   Anriss. Das volle Argument steht in genau einem Panel darunter und
   wird durch Anklicken gewechselt.

   Ohne JavaScript sind alle Panels sichtbar -- der Text bleibt fuer
   Suchmaschinen und Vorleseprogramme vollstaendig da. Erst wenn das
   Skript `uc-bereit` setzt, wird verborgen.
   ------------------------------------------------------------------ */
.uc-karussell { margin-top: 28px; }

.uc-spur {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
  margin: 0 -2px;
}
.uc-spur::-webkit-scrollbar { display: none; }

.uc-karte {
  flex: 0 0 clamp(230px, 24vw, 288px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 18px;
  cursor: pointer;
  font-family: var(--font-core);
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.uc-karte:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.uc-karte:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Drei Stufen, damit man sieht, was fluechtig ist und was bleibt:
   ruhig -> Vorschau (Maus liegt drauf) -> gewaehlt (angeklickt).
   Die Vorschau hebt an und faerbt den Rand; nur die gewaehlte Karte traegt
   den kraeftigen Akzentrand und die Marke am linken Rand. Sonst weiss man
   nach dem Wegziehen der Maus nicht mehr, wo man stand. */
.uc-karte.uc-vorschau {
  border-color: var(--accent);
  background: var(--surface-hover);
  transform: translateY(-2px);
}
.uc-karte.uc-gewaehlt {
  border-color: var(--accent);
  background: var(--surface-hover);
  box-shadow: inset 3px 0 0 0 var(--accent);
}
.uc-karte { transition: border-color var(--dur-fast) var(--ease-standard),
                        background var(--dur-fast) var(--ease-standard),
                        transform var(--dur-fast) var(--ease-standard),
                        box-shadow var(--dur-fast) var(--ease-standard); }

/* Der Panelwechsel unter der Spur passiert beim blossen Darueberfahren.
   Ohne ein kurzes Aufblenden wirkt das wie ein Sprung. */
.uc-karussell.uc-bereit .uc-panel.uc-aktiv {
  animation: uc-auf var(--dur-fast, .18s) var(--ease-out, ease-out);
}
@keyframes uc-auf {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-karte.uc-vorschau { transform: none; }
  .uc-karussell.uc-bereit .uc-panel.uc-aktiv { animation: none; }
}

.uc-symbol { display: block; }
.uc-titel {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-l);
  line-height: var(--lh-snug);
  color: var(--text-heading);
}
.uc-anriss {
  font-size: var(--fs-body-m);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.uc-mehr {
  margin-top: auto;
  padding-top: 6px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.uc-panels { margin-top: 22px; }
.uc-panel { max-width: 72ch; }
.uc-panel + .uc-panel { margin-top: 20px; }          /* nur ohne JavaScript */
.uc-karussell.uc-bereit .uc-panel { display: none; }
.uc-karussell.uc-bereit .uc-panel.uc-aktiv { display: block; }
.uc-panel-titel {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-xl);
  line-height: var(--lh-snug);
  font-family: var(--font-core);
  color: var(--text-heading);
  margin: 0 0 8px;
}
.uc-panel-text {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0 0 14px;
}
.uc-panel-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (max-width: 620px) {
  .uc-karte { flex-basis: 78vw; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-karte { transition: none; }
}

/* ------------------------------------------------------------------
   Bedienung des Karussells.

   BEFUND 02.09.2026: Die fuenfte Karte wurde am rechten Rand
   angeschnitten. Gemeint war das als Hinweis "hier geht es weiter" --
   gelesen wurde es als Layoutfehler. Ein Karussell ohne sichtbare
   Bedienung ist keins; es sieht nur kaputt aus.

   Drei Zutaten, die zusammen sagen "das laesst sich schieben":
   Pfeilknoepfe, ein weicher Rand ueber der Maske (farbunabhaengig,
   funktioniert also auf hellem wie dunklem Grund) und beides nur auf
   der Seite, auf der wirklich noch etwas liegt.
   ------------------------------------------------------------------ */
.uc-rahmen { position: relative; }

.uc-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-heading);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--elevation-2, 0 2px 10px rgba(0, 0, 0, .18));
  transition: background var(--dur-fast) var(--ease-standard);
}
.uc-pfeil:hover { background: var(--surface-hover); }
.uc-pfeil:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.uc-pfeil[hidden] { display: none; }
.uc-pfeil-links  { left: -12px; }
.uc-pfeil-rechts { right: -12px; }

/* Der weiche Rand sitzt auf der Spur selbst, nicht als farbige Blende
   darueber -- so muss er die Hintergrundfarbe nicht kennen. */
.uc-spur.uc-mehr-rechts {
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.uc-spur.uc-mehr-links {
  mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
}
.uc-spur.uc-mehr-links.uc-mehr-rechts {
  mask-image: linear-gradient(to right, transparent, #000 56px,
                              #000 calc(100% - 56px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px,
                              #000 calc(100% - 56px), transparent);
}

/* Auf dem Telefon wird gewischt, nicht geklickt -- und 40-px-Knoepfe am
   Rand einer 78-vw-Karte stehen dort nur im Weg. */
@media (max-width: 760px) {
  .uc-pfeil { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-pfeil { transition: none; }
}

/* Konnektoren in der Beschreibung: eine eigene Zeile, damit die Namen
   auffindbar sind, ohne den Absatz zu zerreissen. Die Marke sagt den
   Reifegrad -- laut Wissensbasis 6.11 steht der Verbindungsunterbau, der
   Datenaustausch ist in Erprobung. Ein Wort, und die Aussage stimmt. */
.uc-konnektoren {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-body-m);
  line-height: 1.9;
  color: var(--text-muted);
}
.uc-beta {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--accent);
  border: 1px solid var(--border-accent, var(--accent));
  border-radius: 999px;
  vertical-align: 2px;
}

/* ==================================================================
   Anwendungsfall-Seiten: Buehne, Film und zwei Karussells.

   BEFUND 02.09.2026: Die neuen Seiten sahen aus wie Textseiten. Das
   Beispiel stand als nachgebaute Karte da, obwohl es echte Aufnahmen des
   Assistenzfensters gibt (Filmmaterial/clips, 840x1520, 20 s, je Sprache).
   Und die drei Erklaerkarten standen untereinander, sodass man scrollen
   musste, um sie neben dem Beispiel zu sehen.

   Jetzt: ein dunkelgruenes Band wie auf der Startseite, darin links der
   Film und rechts die Karten als Karussell. Die Farbe ist dieselbe wie in
   der Kopfleiste (--surface-inverse, rgb(6,78,59)) -- deshalb wirkt es
   als ein Streifen und nicht als zweiter Kasten.
   ================================================================== */
.fall-buehne {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-inverse);
  color: var(--white);
  padding: 56px 0 64px;
}
/* Das Bild traegt keine Aussage, es traegt Stimmung -- deshalb sehr weit
   heruntergeblendet und mit einem Verlauf, damit der Text an jeder Stelle
   den gleichen Kontrast hat. */
.fall-buehne__bild {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: 50% 35%;
  opacity: .16;
}
.fall-buehne__schleier {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, var(--surface-inverse) 34%,
              rgba(6, 78, 59, .72) 100%);
}
/* Die Schriftfarben brauchen dieselbe Spezifitaet wie seiten.css, sonst
   bleibt die Ueberschrift dunkel auf dunklem Grund. seiten.css schreibt
   `body[data-page] main .section__title` -- ein blosses `.fall-buehne h1`
   verliert dagegen. Gemessen: H1 und Fliesstext waren auf dem gruenen Band
   praktisch unlesbar. */
body[data-page] main .fall-buehne .eyebrow { color: #86efd6; }
body[data-page] main .fall-buehne .section__title,
body[data-page] main .fall-buehne h1,
body[data-page] main .fall-buehne h2 { color: var(--white); }
body[data-page] main .fall-buehne .section__lead,
body[data-page] main .fall-buehne p { color: rgba(255, 255, 255, .84); }
body[data-page] main .fall-buehne a { color: #86efd6; }

.fall-buehne__raster {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 36px;
}
@media (max-width: 900px) {
  .fall-buehne__raster { grid-template-columns: 1fr; gap: 28px; }
}

/* Der Film ist hochkant (840x1520). Er bekommt einen Rahmen wie ein
   Fenster, keinen Videospieler-Rahmen: es SOLL aussehen wie das Programm,
   nicht wie ein eingebettetes Video. */
.fall-film {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
  background: #0d1117;
  line-height: 0;
}
.fall-film video { width: 100%; height: auto; display: block; }
/* Die Tafel ist der Platz des Films auf Seiten, die keinen haben: die
   Download-Seite stellt dort ihre beiden Systemkarten hinein. Sie bleiben
   hell auf dem gruenen Band -- ein weisser Block, in dem etwas zu tun ist,
   neben einem gruenen Band, auf dem etwas zu lesen ist. Die Karten selbst
   sind WOERTLICH die alten: js/download.js fuellt sie ueber ihre ids, und
   tests/test_download_page.py prueft dieselben ids nach. */
.fall-tafel {
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
  background: rgba(255, 255, 255, .06);
}
/* In einer 360-px-Spalte ist ein zweispaltiges Raster kein Raster mehr. */
.fall-tafel .cards,
.fall-tafel .cards--three { display: grid; grid-template-columns: 1fr; gap: 14px; }
.fall-tafel .card { background: var(--surface); color: var(--text-body); }
body[data-page] main .fall-buehne .fall-tafel .card__title,
body[data-page] main .fall-buehne .fall-tafel h2 { color: var(--text-heading); }
body[data-page] main .fall-buehne .fall-tafel p,
body[data-page] main .fall-buehne .fall-tafel summary { color: var(--text-body); }
body[data-page] main .fall-buehne .fall-tafel .muted { color: var(--text-muted); }
body[data-page] main .fall-buehne .fall-tafel a { color: var(--text-heading); }
/* Die Schrittfolge auf der Installationsseite steht dort, wo auf den
   anderen Seiten der Film steht: links, schmal, von oben nach unten zu
   lesen. Nummeriert, weil die Reihenfolge hier wirklich zaehlt -- wer auf
   dem Mac vor der Freigabe anmeldet, hoert sein Gegenueber nicht. */
.fall-tafel__kopf {
  margin: 2px 2px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.fall-schritte { margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.fall-schritte li {
  padding: 12px 2px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-body-m, .95rem);
  line-height: 1.55;
}
.fall-schritte li:first-child { border-top: 0; padding-top: 2px; }
body[data-page] main .fall-buehne .fall-schritte li { color: rgba(255, 255, 255, .84); }
body[data-page] main .fall-buehne .fall-schritte strong { color: var(--white); }

.fall-tafel__zeile {
  margin: 12px 2px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}
/* Der Hinweis auf das erkannte System steht ueber den Karten und ist auf
   dem gruenen Grund sonst kaum zu sehen. */
.fall-tafel .notice:not([hidden]) {
  display: block;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
}
body[data-page] main .fall-buehne .fall-tafel .notice { color: var(--white); }

.fall-film__zeile {
  padding: 10px 14px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
  border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Karussell auf der Buehne -- gleiche Mechanik wie unter "Loesungen",
   eigene Farben, weil der Grund hier dunkel ist. */
.fall-spur {
  display: flex; gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px; margin: 0 -2px;
}
.fall-spur::-webkit-scrollbar { display: none; }
.fall-karte {
  flex: 0 0 clamp(240px, 30%, 300px);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left; padding: 18px; cursor: pointer;
  font-family: var(--font-core); color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-card);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.fall-karte:hover, .fall-karte.fall-vorschau {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .4);
  transform: translateY(-2px);
}
.fall-karte[aria-selected="true"] {
  background: rgba(255, 255, 255, .12);
  border-color: var(--cyan-200, #86efd6);
  box-shadow: inset 3px 0 0 0 var(--cyan-200, #86efd6);
}
.fall-karte:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fall-karte__titel {
  font-weight: var(--fw-semibold); font-size: var(--fs-body-l);
  line-height: var(--lh-snug); color: var(--white);
}
.fall-karte__anriss { font-size: var(--fs-body-m); line-height: var(--lh-snug); }

/* BEFUND 02.09.2026: Der Text unter den Karten hoerte auf halber Breite auf
   und liess rechts eine Luecke -- er las sich wie abgeschnitten, nicht wie
   ein Absatz. Ursache war ein max-width von 62ch, waehrend die Kartenspur
   darueber die volle Spalte einnimmt.

   Jetzt laeuft der Absatz bis an dieselbe Kante wie die Karten und steht im
   Blocksatz mit Silbentrennung. Blocksatz ohne Trennung reisst Loecher; mit
   Trennung ergibt er den geraden rechten Rand, der einen Textblock als Block
   lesbar macht. Unter 900 px zurueck auf Flattersatz -- bei schmalen Spalten
   findet der Umbruch sonst keine brauchbaren Trennstellen. */
.fall-panels { margin-top: 22px; max-width: 100%; }
body[data-page] main .fall-buehne .fall-panel,
.fall-panel { color: rgba(255, 255, 255, .84); font-size: var(--fs-body-l);
              line-height: var(--lh-body); max-width: 92ch; }
@media (min-width: 900px) {
  .fall-panel { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
}

/* Gleich hohe Karten, damit die Reihe eine gerade Unterkante hat. Der
   Anriss wird nach drei Zeilen abgeschnitten -- ein vierzeiliger Anriss
   neben zwei zweizeiligen sieht aus wie ein Fehler. */
.fall-spur { align-items: stretch; }
.fall-karte__anriss {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fall-panel + .fall-panel { margin-top: 18px; }     /* nur ohne JavaScript */
.fall-bereit .fall-panel { display: none; }
.fall-bereit .fall-panel.fall-aktiv { display: block;
  animation: uc-auf var(--dur-fast, .18s) var(--ease-out, ease-out); }

/* Das zweite Karussell steht auf hellem Grund und benutzt deshalb die
   Karten aus dem Loesungs-Karussell unveraendert weiter. */
.fall-hell .fall-karte {
  background: var(--surface-card); border-color: var(--border-subtle);
  color: var(--text-body);
}
.fall-hell .fall-karte:hover, .fall-hell .fall-karte.fall-vorschau {
  background: var(--surface-hover); border-color: var(--border-strong);
}
.fall-hell .fall-karte[aria-selected="true"] {
  border-color: var(--accent); box-shadow: inset 3px 0 0 0 var(--accent);
  background: var(--surface-hover);
}
.fall-hell .fall-karte__titel { color: var(--text-heading); }
body[data-page] main .fall-hell .fall-panel,
.fall-hell .fall-panel { color: var(--text-body); }

@media (max-width: 620px) { .fall-karte { flex-basis: 78vw; } }
@media (prefers-reduced-motion: reduce) {
  .fall-karte { transition: none; }
  .fall-bereit .fall-panel.fall-aktiv { animation: none; }
}

/* Die Konnektorzeile stammt aus dem Loesungs-Karussell auf hellem Grund und
   traegt dort --text-muted. Auf der dunkelgruenen Buehne ist das fast
   unsichtbar. Gemessen auf use-cases/sales.html: dunkelgraue Namen auf
   dunkelgruenem Grund. */
body[data-page] main .fall-buehne .uc-konnektoren { color: rgba(255, 255, 255, .7); }
body[data-page] main .fall-buehne .uc-beta {
  color: #86efd6;
  border-color: rgba(134, 239, 214, .55);
}

/* Die Loesungskarten sind seit 02.09.2026 Verweise und keine Knoepfe mehr:
   ein Klick fuehrt auf die ausfuehrliche Seite. Ein <a> bringt Unterstreichung
   und Linkfarbe mit, die hier beide falsch waeren -- die Karte ist die
   Klickflaeche, nicht der Text darin. */
a.uc-karte, a.uc-karte:hover, a.uc-karte:focus { text-decoration: none; }
a.uc-karte { color: var(--text-body); cursor: pointer; }
a.uc-karte .uc-titel { color: var(--text-heading); }

/* ============================================================
   Der Handlungsknopf, sichtbarer — 03.09.2026

   ZWEI BEFUNDE, beide gemessen und beide klein zu beheben:

   1. Die Aufschrift trug Weiss auf #10B981: 2,54:1. Behoben in
      thalassa-0831-palette.css (`--text-on-action` ist jetzt Tinte,
      7,54:1). Die Flaeche selbst bleibt unangetastet.

   2. Der Knopf reagierte auf NICHTS. `.ch15` in chrome.css hat weder
      :hover noch :active noch :focus-visible — ein Knopf, der sich beim
      Ueberfahren nicht ruehrt, liest sich wie ein Etikett. Das steht hier
      und nicht dort, weil chrome.css von scripts/chrome/extract_chrome.py
      ERZEUGT wird; eine Regel dort waere beim naechsten Lauf weg.

   Warum der Hover DUNKLER wird und nicht heller: Mit Tinte als Aufschrift
   traegt primary-600 noch 5,08:1, primary-400 dagegen 9,95:1 — heller
   waere kontrastreicher, sieht aber aus, als sei der Knopf gesperrt
   worden. Gedrueckt bleibt derselbe Ton und sinkt nur um ein Pixel;
   primary-700 laege mit Tinte bei 3,49:1 und faellt damit aus.
   ============================================================ */
.ch15:hover {
  background: var(--color-primary-600);
  box-shadow: var(--shadow-md);
}
.ch15:active {
  background: var(--color-primary-600);
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}
.ch15:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-sm);
}

/* ============================================================
   Der Kauf-Knopf am Fuss der Fallbuehne — 03.09.2026

   WO UND WARUM. Die Fallbuehne ist zweispaltig: links laeuft der Film,
   rechts stehen die drei Karten und der Beschreibungstext. Der Film ist
   hoeher als die rechte Spalte, deshalb steht rechts unten eine grosse
   leere Flaeche — auf jeder der sechs Seiten, in beiden Sprachen. Genau
   dort endet das Lesen, und genau dort stand bisher nichts.

   Der Knopf sitzt deshalb IN der rechten Spalte, nach dem Text, und
   nimmt die Flaeche ein statt sie zu fuellen: `margin-top: auto` schiebt
   ihn an den Fuss der Spalte, damit er unabhaengig von der Textlaenge
   immer an derselben Kante steht.

   KEIN PREIS AUF DEM KNOPF. Er stuende dann an einer dritten Stelle
   neben Katalog und Preisseite — und heute frueh war genau das der
   Fehler, der dem Chatbot fuenf Euro zu wenig in den Mund gelegt hat.
   Der Knopf nennt das Paket, die Preisseite nennt den Preis.
   ============================================================ */
.fall-kauf {
  margin-top: auto;
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.fall-kauf__hinweis {
  font: var(--type-caption);
  color: rgba(255, 255, 255, .72);
  margin: 0;
}
/* Betont, aber nicht laut: dieselbe Handlungsfarbe wie die Kopfleiste,
   dieselbe dunkle Tinte (7,54:1), nur groesser und mit mehr Luft. */
.fall-kauf__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--radius-control);
  background: var(--color-primary-500);
  color: var(--color-neutral-800);
  font: var(--fw-semibold) var(--fs-body-l)/1 var(--font-core);
  letter-spacing: var(--tracking-heading);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  transition: var(--transition-control),
              transform var(--dur-instant) var(--ease-standard);
}
.fall-kauf__knopf:hover {
  background: var(--color-primary-600);
  color: var(--color-neutral-800);
  box-shadow: var(--shadow-lg);
}
.fall-kauf__knopf:active {
  background: var(--color-primary-600);
  transform: translateY(1px);
  box-shadow: var(--shadow-md);
}
.fall-kauf__knopf:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-md);
}
/* Auf dem Telefon faellt das Raster in eine Spalte; dort gibt es keine
   freie Flaeche mehr, und der Knopf soll die volle Breite nehmen statt
   links zu kleben. */
@media (max-width: 767px) {
  .fall-kauf { padding-top: var(--space-6); }
  .fall-kauf__knopf { width: 100%; white-space: normal; text-align: center; }
}

/* Die Zielkarte auf der Preisseite, wenn man ueber ?plan=… dorthin kommt.
   Ohne Hervorhebung landet man in einer Reiterleiste mit drei bis vier
   Karten und sucht die, die man gerade angeklickt hat. */
.plan.is-ziel {
  outline: var(--border-width-strong) solid var(--color-primary-500);
  outline-offset: 4px;
  border-radius: var(--radius-card);
}

/* ------------------------------------------------------------------
   Zwei Handlungen in der Kopfleiste  (Arpad, 04.09.2026)
   ------------------------------------------------------------------

   NEU: „Buy a package" / „Paket kaufen" fuehrt direkt auf die Preisseite.
   Bis heute fuehrte die einzige Handlung in der Kopfleiste auf den
   Download — wer kaufen wollte, musste erst ein Menue oeffnen.

   WARUM DER TESTKNOPF SEIN AUSSEHEN AENDERT. Zwei gefuellte Knoepfe
   nebeneinander sind keine Rangfolge, sondern zwei gleich laute Rufe; das
   Auge waehlt dann keinen von beiden. Der Kauf traegt jetzt die Flaeche,
   die Probe die Kontur. Der Text bleibt unveraendert, nur die Fuellung
   geht weg — und die Reihenfolge sagt den Rest: Kaufen steht zuerst.

   Diese Regeln stehen hier und nicht in `chrome.css`: Jene Datei wird von
   `scripts/chrome/extract_chrome.py` aus den Inline-Stilen ERZEUGT und
   beim naechsten Lauf ueberschrieben. Was von Hand kommt, gehoert hierher.
   ------------------------------------------------------------------ */

.nav-kauf .ch15 {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.nav-kauf:hover .ch15 {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.nav-probe .ch15 {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .38);
  box-shadow: none;
}

.nav-probe:hover .ch15 {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .62);
}

/* Auf dem Telefon war bisher der Testknopf der erste, der weichen musste
   (siehe die Regel weiter oben: unter 620 px fehlt der Platz). Jetzt
   weicht er zugunsten des Kaufknopfs — von den beiden ist der Kauf der,
   der Geld bringt, und im Klappmenue stehen ohnehin beide. */
@media (max-width: 620px) {
  header a[data-cta="nav_buy"] { display: flex !important; }
}