/* ==========================================================================
   Consultants — Gestaltung
   Bild: ein Dossier. Zwei Fachbereiche liegen als Mappen nebeneinander,
   getrennt durch eine Falzkante. Ink-Grund, kühles Alabaster-Papier,
   Rosé für Marketing, Navy für Recht, Messing für „geprüfte Quelle".
   Keine externen Schriften, keine externen Assets.
   ========================================================================== */

:root {
  --ink: #171b2c;
  --ink-2: #232a44;
  --ink-soft: #565e7d;
  --paper: #eceef5;
  --surface: #ffffff;
  --line: rgba(23, 27, 44, 0.14);
  --line-strong: rgba(23, 27, 44, 0.28);

  --rose: #c2385c;
  --rose-deep: #8d2040;
  --rose-wash: #fbeef2;
  --navy: #1d4b8f;
  --navy-deep: #12315e;
  --navy-wash: #ebf0f9;
  --brass: #9a7629;
  --ok: #1c6b52;
  --warn: #a34b12;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step: 4px;
  --radius: 14px;
  --shadow-card: 0 1px 2px rgba(16, 20, 36, 0.08), 0 16px 40px -22px rgba(16, 20, 36, 0.55);
  --page: 1120px;
}

/* --- App-Akzent (Marketing vs. Recht) --------------------------------------
   Body-Custom-Property --app-color entscheidet, welcher Tint über die ganze
   Seite liegt. Wird per document.documentElement.dataset.appColor = 'marketing'
   bzw. 'legal' umgeschaltet; Default ist der neutrale Page-Ton ohne Datum-Select.
   Bilder in der Cast-Box laufen bis zum Layout-Rand. */
:root,
:root[data-app-color=""] {
  /* Neutraler Grundton der App: kühles Alabaster-Papier — NICHT transparent,
     sonst faellt die Shell auf Weiss zurueck, sobald kein Team gewaehlt ist. */
  --app-tint: var(--paper);
  --app-tint-text: var(--ink);
  --app-card: var(--surface);
  --app-border: rgba(255,255,255,0.4);
  --accent: var(--rose);
  --accent-deep: var(--rose-deep);
  --accent-wash: var(--rose-wash);
}
:root[data-app-color="marketing"] {
  /* Marketing: warmes Korall-Rot, kein klassisches Boston-Rot. */
  --app-tint: #c2385c;
  --app-tint-text: #fff;
  --app-card: #ffffff;
  --app-border: rgba(255,255,255,0.32);
  --accent: #c2385c;
  --accent-deep: #8d2040;
  --accent-wash: #fbeef2;
}
:root[data-app-color="legal"] {
  /* Recht: Tinten-Indigo mit kleinem Lila-Anteil — seriös, aber nicht
     1985er-Anwalts-Schwert. */
  --app-tint: #1d4b8f;
  --app-tint-text: #fff;
  --app-card: #ffffff;
  --app-border: rgba(255,255,255,0.32);
  --accent: #1d4b8f;
  --accent-deep: #12315e;
  --accent-wash: #ebf0f9;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Background-Tint auf html, nicht body. Body erbt als transparenter Layer.
   So funktioniert die Faerbung garantiert, weil Browser den Background auf
   html immer durchzeichnet. */
html { background: var(--app-tint); min-height: 100%; }

/* Analysen/Thread/Account: Listen-Inhalte bleiben auf Papier-Optik —
   helle Karten mit dunkler Schrift, auch wenn die Shell getönt ist. */
html[data-app-color="marketing"] .report,
html[data-app-color="legal"] .report,
html[data-app-color="marketing"] .timeline,
html[data-app-color="legal"] .timeline {
  background: var(--app-card);
  border-radius: var(--radius);
  padding: 16px;
}
html[data-app-color="marketing"] .report h2,
html[data-app-color="legal"] .report h2,
html[data-app-color="marketing"] .timeline h2,
html[data-app-color="legal"] .timeline h2,
html[data-app-color="marketing"] .report h3,
html[data-app-color="legal"] .report h3,
html[data-app-color="marketing"] .timeline h3,
html[data-app-color="legal"] .timeline h3,
html[data-app-color="marketing"] .report p,
html[data-app-color="legal"] .report p,
html[data-app-color="marketing"] .timeline p,
html[data-app-color="legal"] .timeline p,
html[data-app-color="marketing"] .report li,
html[data-app-color="legal"] .report li,
html[data-app-color="marketing"] .timeline li,
html[data-app-color="legal"] .timeline li {
  color: var(--ink);
}

/* Analysen-Verlauf: JEDE Analyse ist eine eigene helle Card mit dunklem
   Text (Saso: "card hell und text dunkel"). Liste selbst transparent —
   nur Grid + Gap, kein Container-Kasten. */
.analysen-state { background: transparent; padding: 0; }
.thread-item {
  background: var(--app-card);
  border: 1px solid rgba(23, 27, 44, 0.1);
  box-shadow: 0 10px 26px -20px rgba(23, 27, 44, 0.45);
}
.thread-item .thread-item__title { color: var(--ink); }
html[data-app-color] .thread-item .muted,
html[data-app-color] .thread-item .thread-item__date {
  /* Muss die Tint-Override-Regel schlagen, sonst weisses Datum auf weisser Card. */
  color: var(--ink-soft);
  opacity: 1;
}
/* Auf getönter Shell (Team gewählt/Analyse läuft) tragen Begleittexte,
   Footer und Nav semi-transparentes Weiss statt dunkler Farbe — Kontrast
   auf jedem Team-Tint. */
html[data-app-color="marketing"] .muted,
html[data-app-color="legal"] .muted,
html[data-app-color="marketing"] .intro,
html[data-app-color="legal"] .intro,
html[data-app-color="marketing"] .app-footer,
html[data-app-color="legal"] .app-footer {
  color: rgba(255, 255, 255, 0.72);
}
html[data-app-color="marketing"] .topbar nav a,
html[data-app-color="legal"] .topbar nav a {
  color: rgba(255, 255, 255, 0.9);
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
  min-height: 100vh;
}

a { color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2rem, 7vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 4.5vw, 2rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.shell { width: min(100% - 32px, var(--page)); margin-inline: auto; }
/* App-Shell: KEIN padding hier — Views tragen ihren eigenen Top-Spacing
   (z. B. .app-header hat padding-top: 24px). Frueher hatte main.shell
   ein 24px padding-top, was zu doppeltem Abstand unter dem globalen
   Topbar fuehrte (Saso: 'div outlet hat wohl ein padding top. weg damit'). */
main.shell { padding-bottom: 24px; }

/* Wenn der Body eingefaerbt ist, sollen die nativen Sektionsueberschriften
   weiss lesbar werden. */
:root[data-app-color="marketing"] #app-content h1,
:root[data-app-color="marketing"] #app-content .eyebrow,
:root[data-app-color="legal"] #app-content h1,
:root[data-app-color="legal"] #app-content .eyebrow {
  color: #fff;
}
:root[data-app-color="marketing"] #app-content .notice,
:root[data-app-color="legal"] #app-content .notice {
  /* Quota-Box und Hinweise werden auf der getoenten Flaeche halb-transparent. */
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.stack > * + * { margin-top: 16px; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.85rem; }
.hidden { display: none !important; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(23, 27, 44, 0.94);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: saturate(140%) blur(8px);
}
.topbar__inner {
  width: min(100% - 32px, var(--page)); margin-inline: auto;
  display: flex; align-items: center; gap: 16px; min-height: 60px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__word { font-family: var(--display); font-size: 1.2rem; letter-spacing: 0.02em; }
.brand__word b { font-weight: 600; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* --- Kopfzeile: mobil Hamburger-Menü --------------------------------------
   Vier Links + Logout + Logo passten nicht in 390px. Der fruhere Notbehelf
   (Logout auf 'Exit' kuerzen, Schrift stauchen) machte die Navigation
   unleserlich. Seit 0.32.1: unter 520px zeigt die Topbar nur Logo,
   Hamburger und Abmelden; die Links liegen im Overlay .nav-menu. */
#nav-burger { display: none; }
.nav-menu { display: contents; }

@media (max-width: 519px) {
  .topbar__inner { gap: 8px; min-height: 56px; }
  .brand__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar nav { flex-wrap: nowrap; gap: 4px; min-width: 0; margin-left: auto; }
  #nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; font-size: 1.25rem; line-height: 1;
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
  }
  #nav-burger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); }
  .topbar nav button#logout { font-size: 0.8rem; padding: 8px 8px; }
  /* Overlay: volle Links untereinander, unterhalb der Topbar. */
  .nav-menu {
    display: none;
    position: absolute; top: 100%; left: 12px; right: 12px;
    background: var(--ink, #171b2c);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    padding: 6px;
    z-index: 30;
  }
  html.nav-open .nav-menu { display: flex; flex-direction: column; gap: 2px; }
  .nav-menu a { font-size: 1rem; padding: 12px 14px; border-radius: 8px; }
  .nav-menu a[aria-current="page"] { background: rgba(255, 255, 255, 0.14); }
}
.topbar nav a, .topbar nav button {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none; font-size: 0.9rem;
  padding: 8px 10px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  font-family: inherit;
}
.topbar nav a:hover, .topbar nav button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.topbar nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.14); }

/* --- Hero und Split ----------------------------------------------------- */

.hero {
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(194, 56, 92, 0.22), transparent 58%),
    radial-gradient(100% 70% at 92% 8%, rgba(29, 75, 143, 0.28), transparent 60%),
    var(--ink);
  color: #fff;
  padding: 40px 0 0;
}
.hero__lead { width: min(100% - 32px, var(--page)); margin-inline: auto; max-width: 42rem; }
.hero .eyebrow { color: rgba(255, 255, 255, 0.6); }
.hero h1 { color: #fff; }
.hero__sub { color: rgba(255, 255, 255, 0.78); font-size: 1.05rem; margin-top: 16px; }

/* --- Auswahlbox: zwei Ansprechpersonen ----------------------------------
   Bild: eine Filmszene mit zwei Gesprächspartnern. Links Marketing, rechts
   Recht, dazwischen eine harte Mittellinie. Beide Spalten sind exakt gleich
   breit (1fr | 2px | 1fr); die ganze Hälfte ist ein Link, nicht nur der Text.
   Das Bildformat ist fest (aspect-ratio), damit ein fehlendes oder noch nicht
   geladenes Porträt das Layout nicht springen lässt.
   ------------------------------------------------------------------------ */

.cast { width: min(100% - 32px, 720px); margin: 0 auto 36px; color: #fff; }
.cast .eyebrow { color: rgba(255, 255, 255, 0.6); }
.cast__title { color: #fff; font-size: clamp(1.15rem, 4.8vw, 1.7rem); margin-bottom: 14px; }

.cast__stage {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 26px 60px -32px rgba(0, 0, 0, 0.85);
}

/* Die Mittellinie: eigene Spalte, damit sie exakt mittig sitzt. */
.cast__divider {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.9) 14%,
    rgba(255, 255, 255, 0.9) 86%,
    rgba(255, 255, 255, 0.16) 100%
  );
}

.cast__half {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 44px;
  text-decoration: none; color: inherit;
  background: var(--half-bg);
  transition: background 160ms ease, transform 160ms ease;
}
.cast__half--marketing {
  --accent: var(--rose);
  --half-bg: linear-gradient(180deg, rgba(194, 56, 92, 0.34), rgba(194, 56, 92, 0.06));
}
.cast__half--legal {
  --accent: var(--navy);
  --half-bg: linear-gradient(180deg, rgba(29, 75, 143, 0.36), rgba(29, 75, 143, 0.06));
}
.cast__half:active { background: var(--accent); }

.cast__frame {
  display: block; position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  /* Trägt die Fläche auch dann, wenn das Porträt (noch) fehlt. */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(23, 27, 44, 0.5));
}
/* Beide Team-Bilder (Marketing und Recht) sind immer gespiegelt — die
   Porträts schauen so zur Mitte statt nach aussen weg. */
.cast__half--marketing .cast__photo,
.cast__half--legal .cast__photo {
  transform: scaleX(-1);
}
.cast__half--marketing[aria-pressed="true"] .cast__photo,
.cast__half--legal[aria-pressed="true"] .cast__photo {
  transform: scaleX(-1) scale(1.02);
}
.cast__photo {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
}

.cast__caption { display: grid; gap: 3px; padding: 12px 12px 16px; }
.cast__role { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; }
.cast__sub { font-size: 0.76rem; color: rgba(255, 255, 255, 0.74); line-height: 1.35; }
.cast__cue {
  margin-top: 10px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff;
}
.cast__cue::after { content: " \2192"; }

/* --- Charakterauswahl in der App: Filmstreifen-Layout ---------------------
   Bilder sitzen nackt im Layout — keine Box, keine Card, keine Borders aussenrum.
   Sie wirken wie eingebettete Tapeten direkt am Content-Rand. Die Auswahl wird
   ueber einen feinen 1px Akzent-Rahmen + soften Glow auf dem aktiven Bild
   signalisiert, nicht ueber ein Card-Glasur.
   Marketing-Portraet ist serverseitig gespiegelt, daher ohne CSS-Transform. */
.cast--game {
  /* Volle Section-Breite wie die Form-Felder darunter — kein Extra-Einzug.
     Frueher hatte .cast--game min(100% - 32px, ...) was 32px Rand bedeutete,
     während die Form 100% Section-Breite nutzte → Cast sichtbar enger
     (Saso: 'damit sind die bilder kleiner (enger) als die anderen form fields'). */
  width: 100%;
  margin: 0 0 28px;
  color: var(--app-tint-text);
}
.cast--game .cast__stage {
  /* Stage ohne Card-Hintergrund, Bilder sitzen direkt am Rand mit weicher
     Akzent-Schatten nach unten. */
  background: transparent;
  border-radius: calc(var(--radius) + 6px);
}
.cast--game .cast__divider {
  /* Heller Trennstrich, der sich am Tint orientiert. */
  background: rgba(255, 255, 255, 0.28);
}
.cast--game .cast__title {
  color: var(--app-tint-text);
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  letter-spacing: -0.01em;
  opacity: 0.96;
}
.cast--game .eyebrow {
  color: var(--app-tint-text);
  opacity: 0.78;
  margin-bottom: 6px;
}

/* Die Stage ist jetzt kein eigener Card-Wrapper mehr — sie ist nur ein Grid, das
   die beiden Bilder Strich an Strich aneinander legt. Die Bilder erhalten
   jeweils einen eigenen duennen Rand, weil sie *direkt* aneinander sitzen. */
.cast--game .cast__stage {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  align-items: stretch;
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.55);
  min-height: 0;
}
.cast--game .cast__divider {
  /* Heller Trennstrich, damit die Bilder selbst im dunklen Tint visuell
     getrennt sind. */
  background: rgba(255, 255, 255, 0.18);
  width: 2px;
}

.cast--game .cast__half--btn {
  position: relative;
  border: 0; font: inherit; color: inherit; cursor: pointer;
  background: transparent;
  padding: 0;
  text-align: left;
  display: flex; flex-direction: column;
  transition: filter 240ms ease;
  -webkit-tap-highlight-color: transparent;
}
/* Das Bild sitzt ohne inner-Rahmen und ohne Caption-Eigenstyle direkt am
   Layout. Aspect 3:4, object-fit: cover. */
.cast--game .cast__half--btn .cast__frame {
  outline: 1.5px solid rgba(255, 255, 255, 0.2);
  outline-offset: -1.5px;
  background: #0e1320;
  aspect-ratio: 3 / 4;
  width: 100%;
  position: relative;
  overflow: hidden;
  transition: outline-color 200ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.cast--game .cast__photo {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  transition: transform 380ms ease, filter 380ms ease, opacity 380ms ease;
}
.cast--game .cast__caption {
  /* Caption ist weisser Glas-Streifen unter dem Bild, ohne Card-Optik.
     Nimmt den Tint-Variations-Ton aus dem Bild auf (Marketing vs. Recht),
     damit man die Wahl ueber die ganze App visuell anfaerbt. */
  padding: 14px 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--accent);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.cast--game .cast__role {
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: #fff;
}
.cast--game .cast__sub {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.86);
  line-height: 1.4;
}
.cast--game .cast__check {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.5);
  outline: 3px solid rgba(255,255,255,0.55);
  pointer-events: none;
}
/* Stroke-Farbe muss am <path> greifen, nicht am SVG — der Path nutzt
   currentColor (vom weissen .cast__check-Span), das ignoriert eine am
   <svg> gesetzte stroke-Property. Explizit auf den <path> zielen. */
.cast--game .cast__check svg { display: block; width: 18px; height: 18px; }
.cast--game .cast__check svg path { stroke: #1e9e5a; }

/* States — das gewaehlte Team leuchtet nicht mehr ueber einen Shape-Rahmen,
   sondern ueber einen weichen Akzent-Glow um das Bild. */
.cast--game .cast__half--btn[aria-pressed="false"] {
  filter: saturate(50%) brightness(80%);
}
.cast--game .cast__half--btn[aria-pressed="false"] .cast__photo {
  filter: saturate(60%) brightness(94%);
}
.cast--game .cast__half--btn[aria-pressed="true"] .cast__frame {
  outline-color: rgba(255,255,255,0.95);
  outline-width: 2px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.4),
    0 18px 56px -16px var(--accent),
    0 0 28px -8px var(--accent);
}
.cast--game .cast__half--btn[aria-pressed="true"] .cast__photo {
  transform: scale(1.03);
  filter: saturate(110%) brightness(105%);
}
.cast--game .cast__half--btn[aria-pressed="true"] .cast__check { display: inline-flex; }
.cast--game .cast__half--btn:focus-visible {
  outline: 3px solid #fff; outline-offset: 2px;
}

/* Visually-hidden helper für die versteckten Radios im Picker-Formular. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}

/* Footer: kleine Versions-Anzeige am unteren Rand der App-Seiten. */
.app-footer {
  padding: 20px 0 32px;
  text-align: center;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.app-footer [data-app-version] {
  font-family: var(--mono);
  font-size: 0.78rem;
  margin-left: 4px;
  opacity: 0.7;
}

@media (min-width: 820px) {
  .cast--game .cast__half--btn:hover .cast__photo { filter: saturate(105%) brightness(96%); }
  .cast--game .cast__half--btn[aria-pressed="false"]:hover .cast__photo { filter: saturate(75%) brightness(85%); }
}

@media (min-width: 820px) {
  /* Box bleibt kompakt und mittig, auch im Desktop. */
  .cast { width: min(92vw, 620px); margin: 0 auto 44px; }
  .cast__stage { max-width: 620px; }
  .cast__caption { padding: 16px 18px 20px; }
  .cast__role { font-size: 1.4rem; }
  .cast__sub { font-size: 0.84rem; }
  .cast__half:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04)); }
}

/* Der Split: mobil zwei gestapelte Mappen mit Falzkante, ab 820px vertikal geteilt. */
.split {
  width: min(100% - 32px, var(--page));
  margin: 32px auto 0;
  display: grid;
  gap: 0;
  position: relative;
  padding-bottom: 48px;
}
.card {
  position: relative;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 26px 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.card:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.card:last-child { border-radius: 0 0 var(--radius) var(--radius); border-top: 0; }
.card::before {
  content: attr(data-tab);
  position: absolute; top: -1px; left: 22px;
  transform: translateY(-100%);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--accent);
  padding: 5px 12px 4px; border-radius: 6px 6px 0 0;
}
.card--marketing { --accent: var(--rose); --accent-deep: var(--rose-deep); --wash: var(--rose-wash); }
.card--legal { --accent: var(--navy); --accent-deep: var(--navy-deep); --wash: var(--navy-wash); }
.card__art { width: 100%; height: 168px; border-radius: 10px; background: var(--wash); display: block; }
.card h2 { font-size: 1.5rem; }
.card__role { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.card__list li { display: flex; gap: 10px; font-size: 0.95rem; }
.card__list li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px;
  background: var(--accent); transform: rotate(45deg);
}
.card__note {
  font-size: 0.82rem; color: var(--ink-soft);
  border-left: 3px solid var(--accent); padding-left: 12px;
}
.card .btn { margin-top: auto; }

/* Falzkante zwischen den Mappen */
.seam { position: relative; height: 0; }
.seam::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
}

@media (min-width: 820px) {
  .split { grid-template-columns: 1fr 1px 1fr; gap: 0; padding-bottom: 64px; }
  .card:first-child { border-radius: var(--radius) 0 0 var(--radius); }
  .card:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-top: 1px solid var(--line); border-left: 0; }
  .seam { height: auto; width: 1px; background: none; }
  .seam::after {
    content: ""; position: absolute; inset: 0; left: 0; width: 1px; height: auto;
    background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px);
  }
  .seam__label {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--ink-soft); background: var(--surface); padding: 6px 10px; white-space: nowrap;
  }
  .card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16,20,36,.1), 0 26px 50px -26px rgba(16,20,36,.6); }
}
.seam__label { display: none; }
@media (min-width: 820px) { .seam__label { display: block; } }

/* --- Buttons und Formulare ---------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  padding: 12px 18px; min-height: 46px;
  border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; text-align: center;
  background: var(--ink); color: #fff;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--ink-2); }
/* Analyse-Start-Button: helle Glas-Karte mit Akzent-Stroke und Tint-Text.
   Auf jedem Team-Tint sichtbar — auf Papier weiss mit Shadow, auf Tint
   weisser BG mit dunkler Schrift und 2px Stroke in Tint-Farbe.
   (Vorher: background = var(--accent), ging im Tint unter.) */
.btn--accent {
  background: var(--app-card);
  color: var(--accent, var(--ink));
  border: 2px solid var(--accent, var(--line-strong));
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.28);
}
.btn--accent:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: rgba(23, 27, 44, 0.06); }
.btn--danger {
  background: #fff;
  color: var(--rose-deep);
  border-color: var(--rose);
}
.btn--danger:hover { background: var(--rose-wash); }
/* Loeschen-Button unter dem Feedback-Panel: weisser Grund (lesbar auf
   Team-Tint), zentriert, mit Luft nach oben — Saso 2026-08-20. */
.thread-delete {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.thread-delete .btn--danger { max-width: 100%; }
.btn--wide { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }

/* Form-Label speziell fuer die Commission-Form auf getoentem Hintergrund:
   Label ist weisser Text mit Tracking, damit es vor dem Tint klar lesbar
   bleibt; der eigentliche Input bekommt eigenen weissen Hintergrund. */
.form-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--app-tint-text);
  opacity: 0.85;
  margin: 0 0 8px;
}
/* Anliegen-Textarea darf gross und atmen — nicht in eine Box gequetscht. */
#brief {
  width: 100%;
  min-height: 160px;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.55;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  resize: vertical;
  box-shadow: 0 12px 40px -22px rgba(0,0,0,0.55);
}
/* Kommission-Form Layout: Anliegen-Slot nutzt 100% App-Breite, Jurisdiktion
   ist schmal daneben auf Desktop, darunter auf Mobil. */
.commission-form {
  display: grid;
  gap: 22px;
}
.commission-form > .form-label {
  margin-top: 4px;
}
.jurisdiction-row {
  display: grid;
  gap: 8px;
}
@media (min-width: 720px) {
  .jurisdiction-row {
    grid-template-columns: 220px 1fr;
    align-items: end;
  }
}
/* Commission-Form-Startbutton: volle Breite, helle Glas-Karte mit
   Tint-Stroke. Konsistent mit .btn--accent — die alte Regel (background
   = var(--accent)) wurde vom .commission-start-Selector ueberschrieben
   und liess den Button im Tint untergehen. */
.commission-start {
  width: 100%;
  margin-top: 8px;
  background: var(--app-card);
  color: var(--accent, var(--ink));
  border: 2px solid var(--accent, var(--line-strong));
  border-radius: 14px;
  padding: 16px 22px;
  font: 600 1rem/1 var(--body);
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.28);
}
.commission-start:hover {
  background: var(--accent-deep);
}
.commission-start:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Zahlungswahl im Auftrag (Saso 07.09.2026): Credits-Button (Primary) und
   Direktkauf untereinander auf Mobil, nebeneinander ab 720px. Der
   Direktkauf ist bewusst schlichter (sekundaer) — Credits sind der
   Normalfall. */
.pay-row { display: grid; gap: 10px; }
@media (min-width: 720px) { .pay-row { grid-template-columns: 1fr auto; align-items: stretch; } }
.commission-buy {
  background: var(--app-card);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 14px 18px;
  font: 600 0.92rem/1 var(--body);
  cursor: pointer;
}
.commission-buy:hover { border-color: var(--accent, var(--line-strong)); }
.commission-buy:disabled { opacity: 0.55; cursor: not-allowed; }

input[type="email"], input[type="text"], textarea, select {
  width: 100%; font: inherit; color: var(--ink);
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface);
}
textarea { min-height: 130px; resize: vertical; }
input:disabled, textarea:disabled, select:disabled { background: #f2f3f7; color: var(--ink-soft); cursor: not-allowed; }
fieldset { border: 0; padding: 0; margin: 0; }

/* --- Flächen ------------------------------------------------------------ */

.section { padding: 0; }
.section--tight { padding: 32px 0; }

/* --- App-Layout (Dashboard / Thread / Konto) -------------------------------
   Die App besteht aus zwei klar getrennten Sections:
     1. Verlauf (laufende / abgeschlossene Analysen)
     2. Auftragserteilung (Cast + Anliegen-Form)
   Beide teilen sich keine Card, keine Box; Inhalt nutzt die volle App-Breite
   auf dem getoenten Background. Nur Header-Texte und Form-Eingabefelder bleiben
   als weisse Karten lesbar — die Karten-Hierarchie ist jetzt:
   BODY = Tint, HEADER = Eyebrow+H1+Quota in weiss auf Tint,
   LISTS = direkter Textinhalt auf Tint, FORM-FIELDS = weisse Inputs. */
.app-header {
  padding: 24px 0 8px;
  color: var(--app-tint-text);
}
/* Login-Maske: die Card soll nicht direkt am Topbar kleben. Etwas Luft
   zwischen dunkler Topbar und weisser Card (Saso 09.09.2026:
   'login card, braucht etwas margin nach oben. ist zu sehr am header geklebt').
   32px reicht, ohne dass der Header-Inhalt (Eyebrow + H1) zu tief sitzt. */
.login-section { margin-top: 32px; }
.app-header h1 {
  color: var(--app-tint-text);
  margin-top: 6px;
  font-family: var(--display);
  font-size: clamp(1.6rem, 6vw, 2.6rem);
}
.app-header .eyebrow {
  color: var(--app-tint-text);
  opacity: 0.78;
  margin: 0;
}
.app-header .notice {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.22);
  color: var(--app-tint-text);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 16px;
  max-width: 32rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.app-section {
  /* Volle Layout-Breite, keine Card, keine Border. Section trennt sich nur
     durch Padding + Eyebrow vom naechsten Block. */
  padding: 32px 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.app-section + .app-section {
  /* Section-Trennlinie als weiche Hairline auf Tint. */
  border-top: 1px solid rgba(255,255,255,0.12);
}
.app-section__head {
  margin-bottom: 20px;
  max-width: 36rem;
}
.app-section__head h2 {
  font-family: var(--display);
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  margin: 4px 0 0;
  color: var(--app-tint-text);
  letter-spacing: -0.01em;
}
.app-section__head .eyebrow {
  color: var(--app-tint-text);
  opacity: 0.7;
  margin: 0;
}

/* Verlauf / Liste unterlaufender Analysen. */
.thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  /* Volle App-Breite fuer die Vorschau-Karten. */
}
.empty-state {
  color: var(--app-tint-text);
  opacity: 0.7;
  margin: 0;
  font-style: italic;
}

/* Analysen-Seite: dedizierte Card-Liste auf neutralem Grund. */
.analysen-section { padding: 0; }
.analysen-state { display: grid; gap: 12px; }
.analysen-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.analysen-item__link {
  display: block;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.analysen-item__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -22px rgba(0,0,0,0.35);
  border-color: var(--line-strong);
}
.analysen-item__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.analysen-item__title {
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 0 0 4px;
  color: var(--ink);
  line-height: 1.3;
}
.analysen-item__meta { line-height: 1.4; }
.analysen-empty-card {
  padding: 32px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  display: grid; gap: 16px; justify-items: center;
}
.analysen-empty-card p { margin: 0; color: var(--ink-soft); }

/* Domain-Chip im Analysen-Header: leicht getoentem Surface, klar lesbar. */
.domain-chip {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.domain-chip--marketing { background: var(--rose-wash); border-color: var(--rose); color: var(--rose-deep); }
.domain-chip--legal { background: var(--navy-wash); border-color: var(--navy); color: var(--navy-deep); }

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-card);
}
.grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } }

.steps { counter-reset: step; display: grid; gap: 18px; }
.steps li { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 50%;
  width: 34px; height: 34px; display: grid; place-items: center;
}
.steps h3 { margin-bottom: 2px; }

/* --- Statusanzeigen ----------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-soft);
  white-space: nowrap;
  /* Weisser Grund: Status-Chips bleiben auch auf Team-Tint (blau/rosa) lesbar
     (Saso: 'fehlgeschlagen kann man nicht lesen auf blau'). */
  background: #fff;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip--pending, .chip--running { color: var(--warn); border-color: rgba(163, 75, 18, 0.4); }
.chip--running::before { animation: pulse 1.1s ease-in-out infinite; }
.chip--awaiting_input { color: var(--navy); border-color: rgba(29, 75, 143, 0.4); }
.chip--completed { color: var(--ok); border-color: rgba(28, 107, 82, 0.4); }
.chip--failed { color: var(--rose-deep); border-color: rgba(141, 32, 64, 0.4); background: #fff; }
.chip--marketing { color: var(--rose-deep); border-color: rgba(194, 56, 92, 0.4); }
.chip--legal { color: var(--navy); border-color: rgba(29, 75, 143, 0.4); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.notice { border-radius: 10px; padding: 14px 16px; font-size: 0.92rem; border: 1px solid; }
.notice--info { background: var(--navy-wash); border-color: rgba(29, 75, 143, 0.28); color: var(--navy-deep); }
.notice--error { background: var(--rose-wash); border-color: rgba(194, 56, 92, 0.34); color: var(--rose-deep); }
.notice--ok { background: #e9f4ef; border-color: rgba(28, 107, 82, 0.3); color: var(--ok); }
.notice--warn { background: #fdf0e6; border-color: rgba(163, 75, 18, 0.32); color: var(--warn); }
.notice a { color: inherit; }

/* --- Listen und Threads ------------------------------------------------- */

.thread-list { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.thread-item {
  display: block; text-decoration: none; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--accent, var(--ink-soft));
  border-radius: 12px; padding: 16px 18px;
}
.thread-item:hover { border-color: var(--line-strong); }
.thread-item--marketing { --accent: var(--rose); }
.thread-item--legal { --accent: var(--navy); }
.thread-item__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.thread-item__title { font-family: var(--display); font-size: 1.1rem; }
.thread-item__meta { font-size: 0.8rem; color: var(--ink-soft); margin-top: 6px; }

.timeline { display: grid; gap: 14px; }
.msg { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.msg--user { background: #f7f8fc; }
.msg--agent { border-left: 4px solid var(--accent, var(--ink)); }
.msg__meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.msg__body { white-space: pre-wrap; }

.report h3 { margin-top: 22px; font-family: var(--display); }
.report ul { padding-left: 20px; }
.report li { margin-bottom: 6px; }
.source {
  border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; font-size: 0.9rem;
}
.source__meta { font-size: 0.78rem; color: var(--ink-soft); font-family: var(--mono); }
.source__trust { color: var(--brass); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 0.9rem; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; }

.rating { display: flex; gap: 6px; margin-bottom: 14px; }
.rating button {
  font: inherit; width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer;
}
.rating button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

footer.site {
  background: var(--ink); color: rgba(255, 255, 255, 0.72);
  padding: 32px 0; font-size: 0.85rem; margin-top: 48px;
}
footer.site a { color: #fff; }
footer.site .shell { display: grid; gap: 10px; }

.reveal { opacity: 0; transform: translateY(12px); animation: rise 620ms cubic-bezier(0.22, 0.8, 0.3, 1) forwards; }
.reveal--2 { animation-delay: 90ms; }
.reveal--3 { animation-delay: 180ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --- Auswahlkacheln ----------------------------------------------------- */

.label-legend { font-size: 0.85rem; font-weight: 600; }
.choice {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px;
  cursor: pointer; font-weight: 400; margin: 0; background: var(--surface);
}
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input { margin-top: 4px; accent-color: var(--ink); }
.choice span { display: block; }

.thread-item__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.report__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 16px; }
.knowledge-item { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.curated-group { margin-bottom: 20px; }
.curated-item { border-top: 1px solid var(--line); padding: 10px 0; }
.spinner-row { display: flex; align-items: center; gap: 10px; }

/* --- Google-Anmeldung ---------------------------------------------------- */

.google-block { display: grid; gap: 10px; }
.btn--google {
  background: var(--surface); color: var(--ink);
  border-color: var(--line-strong); font-weight: 600;
}
.btn--google:hover { background: #f4f5f9; }
.google-mark { flex: none; }
/* Ohne href ist der Link weder fokussierbar noch klickbar — genau das ist der
   Disabled-Zustand. Kein Fake-Login, kein toter Klick. */
.btn--google[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; background: #f2f3f7; color: var(--ink-soft);
}
.btn--google[aria-disabled="true"] .google-mark { filter: grayscale(1); }

/* --- Prozess-Diagramm (/app/prozesse) ------------------------------------ */

.prozesse { display: grid; gap: 18px; }
/* .prozesse__policy entfiel in 0.32.4 — die Text-Politik-Hinweisbox ist weg. */
.prozesse__team {
  background: var(--app-card, #fff); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; box-shadow: 0 8px 24px -18px rgba(0,0,0,.25);
}
.prozesse__teamhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.prozesse__teamhead h2 { margin: 0; font-size: 1.05rem; }
.prozesse__count { color: var(--ink-soft); font-size: .82rem; }
/* Diagramm und Stufen nebeneinander, sobald Platz da ist — vorher stand die
   Liste unter dem Diagramm und wiederholte es Zeile für Zeile. */
.prozesse__split { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .prozesse__split { grid-template-columns: 320px 1fr; } }
/* Mobil: Diagramm ueber der Stufenliste gestapelt (Saso 04.09.2026). Frueher
   wurde .prozesse__canvas unter 900px ausgeblendet — die Legende stand dann
   ohne Diagramm da ("macht keinen Sinn"). Das kompakte SVG ist mobile-fit
   (320er viewBox), es gibt keinen Grund es zu verstecken. */
.prozesse__canvas { min-width: 0; max-width: 360px; margin-inline: auto; }
@media (min-width: 900px) { .prozesse__canvas { margin-inline: 0; } }
.prozesse__stages .stage-list { margin-top: 0; }
.flow__node { fill: #fff; stroke: var(--line-strong, #c9ced9); stroke-width: 1.5; }
.flow__node[data-role="start"] { stroke: #1e9e5a; }
.flow__node[data-role="review"] { stroke: #b7791f; }
.flow__node[data-role="text"] { stroke: #a4456a; }
.flow__edge { stroke: #8a93a6; stroke-width: 1.6; }
.flow__edge--dashed { stroke-dasharray: 5 4; }
.flow__arrow { fill: #8a93a6; }
.flow__dot--start { fill: #1e9e5a; }
.flow__dot--end { fill: none; stroke: #5b6b8c; stroke-width: 2; }
.flow__dot--end-inner { fill: #5b6b8c; stroke: none; }
.flow__num { font: 600 12px/1 system-ui; fill: #5b6b8c; }
/* 12px: bei 13px lief die laengste Beschriftung ("Marken- und
   Registerprüfung") aus der Box. */
.flow__label { font: 600 12px/1.3 system-ui; fill: var(--ink, #1c2130); }
.flow__name { font: 400 10.5px/1 system-ui; fill: #8a93a6; }
.flow__note { fill: #fbf7ef; stroke: #b7791f; stroke-dasharray: 4 3; stroke-width: 1.2; }
.flow__notetext { font: 500 10px/1.2 system-ui; fill: #7a5410; }
.flow__notetext--small { font-size: 9px; fill: #93713a; }
.flow-legend { display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: .8rem;
  /* Lesbarkeit auf getönten Hintergründen (Saso 08.09.2026): jedes Item als
     eigene weisse Pille mit feinem Rand — der Text-Kontrast kippt nicht mehr,
     egal ob die Sektion auf rose-/navy-wash oder weiss steht. */
  color: var(--ink, #1c2130);
}
.flow-legend__item { display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line, #e3e6ee); border-radius: 999px;
  padding: 4px 10px 4px 8px; }
.flow-legend__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1.5px solid; }
.flow-legend__swatch[data-role="start"] { border-color: #1e9e5a; background: #e8f0e8; }
.flow-legend__swatch[data-role="work"] { border-color: #5b6b8c; background: #eef1f8; }
.flow-legend__swatch[data-role="review"] { border-color: #b7791f; background: #fdf3e7; }
.flow-legend__swatch[data-role="text"] { border-color: #a4456a; background: #f5edf3; }
.flow-legend__swatch[data-role="ghost"] { border-color: #9aa0ab; background: #f4f4f6; }

/* Stage-Liste (mobil kompakt, a11y) */
.stage-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.stage-item { display: flex; gap: 10px; align-items: flex-start; background: #fafbfd; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.stage-item__num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 600 11px system-ui; color: #fff; background: #5b6b8c;
}
.stage-item--start .stage-item__num { background: #1e9e5a; }
.stage-item--review .stage-item__num { background: #b7791f; }
.stage-item--text .stage-item__num { background: #a4456a; }
.stage-item__body { display: grid; gap: 2px; }
.stage-item__body strong { font-size: .88rem; }
.stage-item__name { font-size: .72rem; color: #8a93a6; font-family: ui-monospace, monospace; }
/* Was die Stufe tut — stand bisher nur in stage-meta.ts und wurde nie gezeigt. */
.stage-item__desc { margin: 2px 0 0; font-size: .78rem; line-height: 1.45; color: var(--ink-soft, #5b6b8c); }
.stage-item__policy { font-size: .72rem; color: #a4456a; font-style: normal; }
.stage-item__policy--review { color: #b7791f; }
.prozesse__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- Flow-SVG mobile-fit + Live-Progress ---------------------------------
   Einzige .flow-svg-Regel. Vorher stand weiter oben ein `min-width: 480px`,
   das diese max-width aushebelte (min-width gewinnt in CSS) — dadurch war das
   Diagramm immer 480 px breit, scrollte auf dem Handy seitlich und wurde bei
   10 Stufen 1632 px hoch. */
.flow-svg { width: 100%; max-width: 420px; display: block; margin: 0 auto; height: auto; }
.flow__node--running { stroke: var(--warn, #a34b12); stroke-width: 2.5; }
.flow__node--done { stroke: #1e9e5a; stroke-width: 2; }
.flow__check { fill: none; stroke: #1e9e5a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.flow__live-dot { fill: var(--warn, #a34b12); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Live-Progress-Strip (Thread + Auftrag) */
.flow-progress { display: grid; gap: 10px; }
.flow-progress__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 0.82rem; color: var(--ink-soft);
}
.flow-progress__head strong { font-size: 0.9rem; color: var(--ink); }

/* Timeline: wann wurde welche Stufe erledigt (0.7.13). */
.timeline {
  background: var(--app-card, #fff); border: 1px solid var(--rule, #e3e6ee);
  border-radius: 12px; padding: 12px 16px; font-size: 0.82rem;
}
.timeline summary {
  cursor: pointer; color: var(--ink-soft); font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.timeline summary::before { content: '▸'; transition: transform .15s ease; font-size: .7rem; }
.timeline[open] summary::before { transform: rotate(90deg); }
.timeline ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.timeline__row {
  display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center;
  gap: 8px; padding: 5px 0; border-bottom: 1px dashed color-mix(in srgb, var(--rule, #e3e6ee) 70%, transparent);
}
.timeline__row:last-child { border-bottom: none; }
.timeline__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rule, #cbd2e0); justify-self: center;
}
.timeline__row--completed .timeline__dot { background: #1e9e5a; }
.timeline__row--running .timeline__dot { background: var(--accent, #1d4b8f); animation: tl-pulse 1.4s ease infinite; }
.timeline__row--failed .timeline__dot { background: #c0392b; }
.timeline__row--skipped .timeline__dot { background: var(--rule, #cbd2e0); }
.timeline__label { color: var(--ink); }
.timeline__row--pending .timeline__label { color: var(--ink-soft); }
.timeline__time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.timeline__dur { color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
@keyframes tl-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* --- Credits und Kaufen (UX-Ueberarbeitung 2026-08-27) ------------------- */

/* Erklaer-Tiles: was bekommt man fuer 1/2 Credits */
.credit-tile {
  background: var(--app-card, #fff); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px;
}
.credit-tile__head {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-wash); border-radius: 999px; padding: 3px 10px;
}
.credit-tile__title { font-weight: 700; margin-top: 8px; color: var(--ink); }

/* Kauf-Cards: Pakete + Einzelkaeufe */
.credit-grid { display: grid; gap: 14px; }
/* Trenner zwischen Credit-Paketen und Einzelanalysen: volle Breite,
   erzwingt Zeilenumbruch im Grid (grid-column: 1 / -1). */
.credit-grid-sep { grid-column: 1 / -1; height: 0; border-top: 1px solid var(--line); margin: 4px 0; }
@media (min-width: 720px) {
  .credit-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.credit-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--app-card, #fff); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px;
}
.credit-card__head { font-weight: 700; color: var(--ink); }
.credit-card__price { font-size: 1.5rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.credit-card__meta { font-size: 0.85rem; color: var(--ink-soft); }
.credit-card .btn { margin-top: 10px; }
.credit-card .btn[disabled] { opacity: .6; cursor: wait; }

/* ---------------------------------------------------------------- Skeletons
   Ladezustand statt Leerraum (2026-08-31). Vorher malten die Views ihre
   Container leer und warteten dann auf den Fetch — auf einer langsamen
   Verbindung sah das aus wie eine kaputte Seite.
   Nutzt die vorhandene pulse-Animation, keine neue Keyframe-Definition. */
.skeleton {
  background: var(--line);
  border-radius: 6px;
  height: 1em;
  margin: 8px 0;
  animation: pulse 1.4s ease-in-out infinite;
}
.skeleton--title { height: 1.6em; width: 60%; }
.skeleton--line  { width: 100%; }
.skeleton--short { width: 40%; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* Ablaufwarnung in der Analysen-Liste: die Aufbewahrungsfrist laeuft bald ab.
   Nutzt die vorhandene chip-Basis, nur eine eigene Farbe. */
.chip--expiring {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}

/* --- Rechnungen (Konto): lazy DataTable (0.33.1) --------------------------
   Panel ist <details> — laedt erst beim Aufklappen. Tabelle horizontal
   scrollbar auf Mobil statt Spalten zu quetschen (Saso: 'lazy loading
   datatable'). */
.inv-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.inv-table th {
  text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); padding: 8px 10px;
  border-bottom: 2px solid var(--line);
}
.inv-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.inv-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-table th.inv-num { text-align: right; }
.inv-dl { white-space: nowrap; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 519px) {
  .inv-table { font-size: .82rem; }
  .inv-dl a { display: inline-block; }
}

/* [hidden] muss display:static Buttons schlagen koennen (0.33.1): .btn setzt
   display:inline-flex und ueberschreibt damit den Browser-Default fuer
   [hidden] — der 'Weitere laden'-Button blieb nach der letzten Seite sichtbar. */
[hidden] { display: none !important; }

/* --- Design-Confirm-Dialog (0.34.0) ---------------------------------------
   Ersetzt window.confirm() (Saso: 'das confirm popup mit html im design
   bauen'). <dialog> mit showModal(): nativer Fokus-Trap + Escape, Optik im
   App-Design statt Browser-Grau. */
.app-dialog {
  border: 0;
  padding: 0;
  border-radius: 16px;
  background: var(--app-card, #fff);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.45);
  max-width: min(92vw, 460px);
  width: 100%;
}
.app-dialog::backdrop {
  background: rgba(17, 21, 34, 0.55);
  backdrop-filter: blur(3px);
}
.app-dialog__inner { display: grid; gap: 14px; padding: 22px; }
.app-dialog__title { margin: 0; font-size: 1.15rem; font-family: var(--display); }
.app-dialog__body { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; display: grid; gap: 8px; }
.app-dialog__body strong { color: var(--ink); }
.app-dialog__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.app-dialog__cancel { min-width: 110px; }
.app-dialog__ok { min-width: 130px; }
@media (max-width: 519px) {
  .app-dialog__actions { flex-direction: column-reverse; }
  .app-dialog__actions .btn { width: 100%; }
}