/* =============================================================================
   Variante A „Ein Zuhause" (Stefan 12.10.2026) — Startseite „Heute" (seit
   15.10. zugleich die Seite des gewählten Bereichs) und die Ansichten
   Gespräche · Profil. Nur das Dashboard lädt diese Datei; der Chat (shell.css)
   bleibt unberührt.

   Aufbau je Ansicht: zwei Spalten (Hauptspalte + schmale Seitenspalte), auf dem
   Handy untereinander. Das alte Drei-Spalten-Raster (.dash5__teil) entfällt.
   ========================================================================== */

/* --- Kopf: Marke · Hauptnavigation · Avatar ----------------------------- */
.apphead--nav {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "titel nav avatar";
  min-height: 64px;
  padding: var(--sp-2) 0;
}
.apphead--nav .hauptnav { grid-area: nav; }
.hauptnav {
  display: flex; align-items: center; gap: 4px;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
  padding-left: var(--sp-6);
}
.hauptnav::-webkit-scrollbar { display: none; }
.hauptnav__item {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; letter-spacing: -0.28px;
  color: var(--content-base-secondary);
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.hauptnav__item:hover { background: rgba(255, 255, 255, 0.7); color: var(--content-base-primary); }
.hauptnav__item[aria-current='page'] { background: var(--content-base-primary); color: #fff; }
a.apphead__avatar { text-decoration: none; }

/* Handy: Navigation als eigene Zeile unter Marke/Avatar, gleich breit verteilt. */
@media (max-width: 719px) {
  .apphead--nav {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titel avatar" "nav nav";
    row-gap: var(--sp-2);
  }
  .hauptnav { padding-left: 0; }
  .hauptnav__item { flex: 1 0 auto; justify-content: center; padding: 0 10px; }
}
@media (pointer: coarse) { .hauptnav__item { min-height: 44px; } }

/* --- Ansichten und Spalten ---------------------------------------------- */
.dash5.ansichten { display: block; padding: var(--sp-4) 0 var(--sp-10); }
/* minmax(0, 1fr): Auf dem Handy werden .spalten/.spalten__haupt/.spalten__seite zu
   display: contents — die Karten sind dann direkte Grid-Items hier. Mit der impliziten
   auto-Spalte hätte ein einziges unbrechbares Wort/URL (Firmenname, Website, Deutung) die
   ganze Spalte breiter gemacht und .stage hätte alle Karten rechts abgeschnitten
   (Fabian 29.10., „overflow fail" im Business-/Firmenprofil). */
.ansicht { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.ansicht[hidden] { display: none; }
.spalten { display: grid; gap: var(--sp-4); align-items: start; }
.spalten__haupt, .spalten__seite { display: grid; gap: var(--sp-4); min-width: 0; align-content: start; }
@media (min-width: 960px) {
  .spalten { grid-template-columns: minmax(0, 1fr) 360px; }
}
.ansichten .dash5--profil-offen .profil { grid-column: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Bereichsmarke („Business · forty2") ------------------------------- */
.bereichsmarke {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 4px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0;
  background: rgba(100, 80, 232, 0.10); color: var(--c-brand-purple-600);
}
.bereichsmarke--personality { background: rgba(20, 150, 160, 0.12); color: var(--c-brand-cyan-700); }
.bereichsmarke--finance { background: rgba(184, 118, 20, 0.13); color: var(--c-yellow-700, #8A590F); }

/* --- Heute: VETI spricht zuerst ---------------------------------------- */
.heute-hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
}
.heute-hero .orbit { height: 132px; margin: 0; }
.heute-hero .bubble { width: 104px; height: 104px; }
.heute-hero__text { min-width: 0; display: grid; gap: var(--sp-3); }
.heute-hero__datum { margin: 0; font-size: 13px; color: var(--content-base-tertiary); }
.heute-hero__gruss {
  margin: 0;
  font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.6px;
  color: var(--content-base-primary);
}
.heute-hero__satz { margin: 0; font-size: 16px; line-height: 1.55; color: var(--content-base-primary); max-width: 62ch; }
.heute-hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (min-width: 720px) {
  .heute-hero { grid-template-columns: minmax(0, 1fr); padding: var(--sp-6); }   /* ohne Blase (Stefan 19.10.) */
  .heute-hero .orbit { height: 170px; }
  .heute-hero .bubble { width: 120px; height: 120px; }
  .heute-hero__gruss { font-size: 34px; }
}

/* Schnelleingabe — dieselbe Eingabeleiste wie im Chat (composer.css,
   js/composer.js), hier eingebettet in die Karte statt fix am Fuß. Senden
   führt ins Gespräch (neu oder das der VETI-Nachricht). */
.schnell { max-width: 720px; }
.schnell__leiste { width: 100%; }
.schnell .leiste__hinweis { text-align: left; margin: 6px 0 0 var(--sp-4); }
.schnell .leiste__hinweis:empty { display: none; }
.schnell .anhang__nochmal {
  flex: none; border: 0; border-radius: var(--r-pill); cursor: pointer;
  padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600;
  background: var(--c-brand-purple-500); color: #fff;
}

/* Der zeitgesteuerte Hinweis (Blase/Karte) ist durch den festen Impuls ersetzt. */
.heute-hero .vetinudge { display: none; }

/* --- Heute: Über Dich ---------------------------------------------------- */
.ueberdich .identitaet__tags { margin: 0; }
.kurzliste { list-style: none; margin: 0; padding: 0; display: grid; }
.kurzliste li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 8px 0; border-top: 1px solid var(--border-base-primary);
  font-size: 14px; color: var(--content-base-primary);
}
.kurzliste li:first-child { border-top: 0; }
.kurzliste__wert { flex: none; font-size: 12px; font-weight: 600; color: var(--content-base-secondary); }
.ueberdich .gruppe__titel { margin: var(--sp-1) 0 0; }

/* --- Gespräche: Bereich in der zweiten Zeile ----------------------------- */
.chats__info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.chats__info .chats__offen { margin-top: 0; }
.chats__bereich { padding: 3px 8px; font-size: 10px; }
.zusage__inhalt .bereichsmarke { margin-top: 6px; }

/* --- Heute: Kopf des gewählten Bereichs --------------------------------- */
.bereichkopf {
  flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-6);
}
.bereichkopf__text { display: grid; gap: var(--sp-2); min-width: 0; }
.bereichkopf__titel { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.6px; }
.bereichkopf .identitaet { margin: 0; }
.ring { position: relative; flex: none; width: 96px; height: 96px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; }
.ring__zahl { font-size: 28px; font-weight: 700; line-height: 1; margin-top: -8px; }
.ring__von { position: absolute; bottom: 24px; font-size: 9px; color: var(--content-base-tertiary); white-space: nowrap; }
@media (max-width: 599px) {
  .bereichkopf { padding: var(--sp-5); }
  .bereichkopf__titel { font-size: 24px; }
}

/* --- Profil ---------------------------------------------------------- */
.profilkopf { display: flex; align-items: center; gap: var(--sp-3); }
.profilkopf__avatar { width: 52px; height: 52px; font-size: 16px; flex: none; }

/* Der Trabant mit Gesprächstiteln gehört zur alten schmalen VETI-Karte; hier
   stehen die Gespräche direkt daneben — die Blase bleibt ruhig. */
.heute-hero .orbit__satellit { display: none; }

/* Platzierungen aus dem alten Drei-Spalten-Raster (dashboard.css) aufheben —
   in den Ansichten fließen die Karten einfach in ihrer Spalte. */
.ansichten .profil,
.ansichten.dash5--profil-offen .profil { grid-column: auto; grid-row: auto; }
/* Das Netz war für die schmale Spalte gebaut — in der breiten Hauptspalte
   nicht größer als nötig. */
@media (max-width: 719px) {
  .heute-hero { padding-top: var(--sp-5); }
  .heute-hero .orbit { height: 84px; justify-items: start; place-items: center start; }
  .heute-hero .bubble { width: 72px; height: 72px; }
  .heute-hero__gruss { font-size: 26px; }
}

/* =============================================================================
   Look nach Mockup A „Ein Zuhause" (Stefan 15.10.2026: „gerne noch mehr wie im
   Mockup (A) stylen, auch von der Top-Navigation, dennoch an die Basics des
   INUVETA-Styleguides von Maxi halten, Farben, Fonts etc.").
   Aufbau/Proportionen aus dem Mockup, Farben (--c-sg-*, --c-brand-*) und
   Schriften (--font-titel, --font-lese) aus dem Styleguide.

   Flackern der ersten Karte (Stefan 15.10.): Die animierte Blase
   (mix-blend-mode: screen) lag in derselben Ebene wie die backdrop-filter-
   Glasfläche — Chrome zeichnete die Karte bei jeder Bewegung neu. Die Karten
   bekommen deshalb keinen backdrop-filter (deckendes Weiß über dem ruhigen
   Nebel sieht gleich aus), die Blase eine eigene Ebene.
   ========================================================================== */

.stage:has(.ansichten) { overflow: clip; }     /* „hidden" würde sticky brechen */
.stage__inner:has(.ansichten) { max-width: 1240px; }
@media (min-width: 1024px) { .stage__inner:has(.ansichten) { padding-top: 0; } }

/* Bühne: weicher Nebel in den Styleguide-Farben statt flachem Grau. */
body:has(.ansichten) { background: #F5F5F7; }
body:has(.ansichten)::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 30% at 34% 16%, rgba(144, 127, 255, 0.16), transparent 70%),
    radial-gradient(42% 34% at 44% 30%, rgba(110, 197, 255, 0.16), transparent 72%),
    radial-gradient(40% 40% at 72% 62%, rgba(187, 36, 255, 0.06), transparent 70%),
    radial-gradient(60% 50% at 12% 88%, rgba(0, 255, 255, 0.06), transparent 70%);
}

/* --- Kopfleiste: klebt oben, über die ganze Breite, Haarlinie unten ------ */
.apphead--nav {
  position: sticky; top: 0; z-index: 30;
  min-height: 64px; padding: 12px 0; margin-bottom: var(--sp-2);
}
.apphead--nav::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: rgba(245, 245, 247, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(28, 28, 30, 0.06);
}
.hauptnav { padding-left: 28px; }
.hauptnav__item { min-height: 36px; padding: 0 14px; font-weight: 500; font-size: 14px; letter-spacing: -0.14px; }
.hauptnav__item[aria-current='page'] { font-weight: 600; background: var(--c-neutral-900); }
.apphead--nav .apphead__avatar {
  width: 36px; height: 36px; font-size: 13px; font-weight: 700;
  background: var(--brand-gradient-deep, linear-gradient(135deg, var(--c-sg-hellblau), var(--c-brand-purple-500)));
  box-shadow: 0 2px 10px rgba(100, 80, 232, 0.25);
}
@media (min-width: 1024px) {
  .apphead--nav { padding: 14px 0; }
}

/* --- Karten: Glas-Look ohne backdrop-filter ---------------------------- */
@media (min-width: 960px) {
  .spalten { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; }
  .spalten__haupt, .spalten__seite { gap: 22px; }
  .ansicht { gap: 22px; }
}
.ansichten .glass {
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
}
.ansichten .glass::before {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}
.ansichten .glass::after { opacity: 0; }
.ansichten .card { padding: 26px 28px; gap: var(--sp-4); }
/* Nutzer- und VETI-Inhalte (Firmenname, Website-URLs, Deutungen, lange Komposita) brechen
   notfalls mitten im Wort statt überzustehen. „anywhere" (nicht break-word), weil es auch die
   min-content-Breite senkt — sonst wachsen die auto-Spalten der Grids in der Karte (.gross,
   .profilx …) mit und die Karte wird rechts abgeschnitten. Bedienelemente bleiben ganz. */
.ansichten .card { overflow-wrap: anywhere; }
.ansichten .card :is(button, .btn, .linkbtn, .chip) { overflow-wrap: normal; }
@media (max-width: 640px) { .ansichten .card { padding: 20px 18px; } }

/* Kartenköpfe: linksbündig, fett, Hausschrift. */
.ansichten .themen__kopf, .ansichten .reise__kopf { text-align: left; }
.ansichten .h-md, .ansichten .h-sm, .ansichten .reise__stufe {
  font-family: var(--font-titel); font-size: 19px; line-height: 24px;
  font-weight: 700; letter-spacing: -0.02em; color: var(--content-base-primary);
}
.ansichten .themen__kopf .muted { margin-top: 4px !important; font-size: 13px; }
.eyebrow { font-size: 11.5px; letter-spacing: 0.08em; }

/* --- Hero: VETI spricht zuerst ---------------------------------------- */
.ansichten .heute-hero { overflow: hidden; }
.ansichten .heute-hero::after {
  opacity: 1; inset: auto; right: -80px; top: -120px; width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.13), transparent 65%);
}
.heute-hero .orbit { contain: paint; }
.heute-hero .bubble { isolation: isolate; will-change: transform; transform: translateZ(0); }
.heute-hero__datum { font-size: 13px; font-weight: 500; }
.heute-hero__gruss { font-family: var(--font-titel); font-weight: 700; letter-spacing: -0.02em; }
.heute-hero__satz { font-family: var(--font-lese); font-size: 17px; line-height: 1.55; color: var(--content-base-primary); max-width: 720px; }
@media (min-width: 720px) {
  .heute-hero { grid-template-columns: auto minmax(0, 1fr); gap: 28px; padding: 30px 34px; }
  .heute-hero .orbit { height: 140px; width: 140px; }
  .heute-hero .bubble { width: 120px; height: 120px; }
  .heute-hero__gruss { font-size: 34px; }
}

/* Primärknöpfe wie im Mockup: Pille mit weichem Schatten in der Handlungsfarbe. */
.ansichten .btn--primary { box-shadow: 0 6px 18px rgba(100, 80, 232, 0.25); }

/* --- Zusagen ---------------------------------------------------------- */
.zusagen__liste { gap: 12px; }
.ansichten .zusage {
  padding: 18px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(28, 28, 30, 0.10);
}
.ansichten .zusage--widerrufen { opacity: 0.7; }
.ansichten .zusage__titel { font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.ansichten .zusage__check { width: 22px; height: 22px; border-radius: 7px; accent-color: var(--c-brand-cyan-600); }
.zusage__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--sp-4); margin-top: 12px; }
.zusage__chat { font-size: 13px; }

/* --- Deine Reise: Fortschritt im Markenverlauf, ruhige Etappenliste ---- */
.reise .bar { height: 6px; background: rgba(28, 28, 30, 0.08); }
.reise .bar__fill { background: var(--brand-gradient); }
.reise .etappen { gap: 0; }
.reise .etappe { background: none; padding: 7px 0; border-radius: 0; font-size: 13px; border-top: 1px solid rgba(28, 28, 30, 0.06); }
.reise .etappe:first-child { border-top: 0; }
.reise .etappe__haken { width: 18px; height: 18px; }

/* --- Letzte Gespräche: Zeilen mit Haarlinie statt Kästchen ------------ */
.ansichten .chats__liste { gap: 0; }
.ansichten .chats__item {
  border: 0; border-top: 1px solid rgba(28, 28, 30, 0.06); border-radius: 0;
  background: none; padding: 12px 0;
}
.ansichten .chats__liste > li:first-child .chats__item { border-top: 0; }
.ansichten .chats__item:hover { background: none; transform: none; }
.ansichten .chats__item:hover .chats__titel { color: var(--content-action-primary); }
.ansichten .chats__titel { font-weight: 500; }
.ansichten .chats__item--onboarding { border-style: solid; }

/* --- Über Dich -------------------------------------------------------- */
.ansichten .gruppe__titel { font-size: 12px; letter-spacing: 0.07em; }
.kurzliste li { font-size: 14px; padding: 7px 0; border-top-color: rgba(28, 28, 30, 0.06); }
.kurzliste__wert { font-size: 13px; color: var(--content-base-primary); font-variant-numeric: tabular-nums; }

/* --- Bereichs-Umschalter oben rechts (Stefan 15.10.) --------------------
   Ersetzt die Pillen-Zeilen (Bereiche + Firmen) über der Bereichsseite. */
.apphead--nav .apphead__right { display: flex; align-items: center; gap: var(--sp-2); }
.bwahl {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 260px; min-height: 36px; padding: 0 12px 0 14px;
  border: 1px solid rgba(28, 28, 30, 0.12); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--content-base-primary);
  cursor: pointer; white-space: nowrap;
  transition: border-color 150ms, background 150ms;
}
.bwahl:hover { background: #fff; border-color: rgba(28, 28, 30, 0.22); }
.bwahl[aria-expanded='true'] { border-color: var(--c-brand-purple-400); background: #fff; }
.bwahl:focus-visible { outline: 2px solid var(--c-brand-purple-500); outline-offset: 2px; }
.bwahl__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bwahl__pfeil { flex: none; color: var(--content-base-tertiary); }
@media (max-width: 719px) { .bwahl { max-width: 52vw; font-size: 13px; padding: 0 10px 0 12px; } }
/* Handy (Stefan 23.10., Feedback-Knopf jetzt auch hier): rechts stehen Bereich ·
   Feedback · Avatar. Die rechte Spalte darf schrumpfen (Bereichsname kürzt mit „…"),
   statt die Marke zu überdecken; unter 480 px nur die Bildmarke wie im Chat. */
@media (max-width: 719px) {
  .apphead--nav { grid-template-columns: auto minmax(0, 1fr); }
  .apphead--nav .apphead__right { min-width: 0; }
  .apphead--nav .bwahl { min-width: 0; flex: 0 1 auto; }
  .apphead--nav .apphead__avatar { flex: none; }
}
@media (max-width: 480px) {
  .apphead--nav .apphead__wortmarke { display: none; }
}
@media (pointer: coarse) { .bwahl { min-height: 40px; } }

/* Gruppen im Menü (Business mit Firmen) */
.kmenu__gruppe {
  margin: 6px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--content-base-tertiary);
}
.kmenu__trenner { height: 1px; margin: 6px 0; background: rgba(28, 28, 30, 0.06); }
.kmenu__eintrag { justify-content: space-between; gap: var(--sp-3); }
.kmenu__eintrag.is-aktiv { font-weight: 600; }
.kmenu__haken { color: var(--content-action-primary); font-weight: 700; }
.kmenu__eintrag--leise { color: var(--content-base-secondary); font-size: 13.5px; }
.kmenu__unter { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--content-base-tertiary); }
.kmenu--bereiche .kmenu__eintrag:has(.kmenu__unter) { padding-block: 8px; }

/* =============================================================================
   „Heute" und „Bereiche" vereint (Stefan 15.10.2026)
   Desktop: zwei Bänder mit je Haupt- und Seitenspalte — oben über alle
   Bereiche (Zusagen, Gespräche, Reise, Über Dich), darunter der gewählte
   Bereich (Kopf über die volle Breite, dann Schritte, Themen, Ziele, Profil,
   DNA, Websites, Challenge). Welche Karte in welcher Spalte steht, verteilt
   dashboard.js (spaltenAusgleichen) so, dass keine Lücken entstehen. Handy: eine Spalte in eigener Reihenfolge — erst was
   ansteht, dann der Bereich, Rückblick und Tests zuletzt.
   ========================================================================== */
@media (max-width: 959px) {
  .ansicht--heute > .spalten,
  .ansicht--heute .spalten__haupt,
  .ansicht--heute .spalten__seite { display: contents; }
  .ansicht--heute .heute-hero      { order: 0; }
  .ansicht--heute #zusagen-karte   { order: 1; }
  .ansicht--heute #jetzt-karte     { order: 1; }
  .ansicht--heute #baustellen-karte { order: 1; }
  .ansicht--heute #chats-karte     { order: 2; }
  .ansicht--heute #bereich-kopf    { order: 3; }
  .ansicht--heute #schritte-karte  { order: 4; }
  .ansicht--heute #themen-karte    { order: 5; }
  .ansicht--heute #ziele-karte     { order: 6; }
  .ansicht--heute #dna-karte       { order: 7; }
  .ansicht--heute #fehlt-karte     { order: 7; }
  .ansicht--heute #websites-karte  { order: 8; }
  .ansicht--heute #profil-karte    { order: 9; }
  .ansicht--heute #challenge-karte { order: 10; }
  .ansicht--heute #reise           { order: 11; }
}
/* Abstand zwischen den Bändern: der Bereichskopf trennt sie sichtbar. */
@media (min-width: 960px) {
  .ansicht--heute #bereich-kopf { margin-top: 10px; }
}

/* --- Bereichskopf: Name, VETIs Satz zum Bereich, Weiterarbeiten ---------- */
.bereichkopf { align-items: flex-start; }
.bereichkopf__eyebrow { margin: 0; }
.bereichkopf__satz {
  margin: 0; max-width: 680px;
  font-family: var(--font-lese); font-size: 15px; line-height: 1.6;
  color: var(--content-base-secondary);
}
.bereichkopf__satz .linkbtn { font-size: 14px; }
.bereichkopf .ring__von { bottom: 16px; text-align: center; line-height: 1.15; }
.bereichkopf__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; }
@media (max-width: 599px) {
  .bereichkopf { gap: var(--sp-3); }
  .bereichkopf .ring, .bereichkopf .ring svg { width: 72px; height: 72px; }
  .bereichkopf .ring__zahl { font-size: 22px; margin-top: -6px; }
  .bereichkopf .ring__von { bottom: 11px; font-size: 8px; }
  .bereichkopf__aktionen .btn { flex: 1 1 auto; }
}

/* --- Themen: Stand im Kopf (vorher in der Fokus-Karte) ------------------- */
.themen__titelzeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.themen__stand { flex: none; font-size: 12.5px; font-weight: 600; color: var(--content-base-tertiary); }

/* --- Hero: „Neue Nachricht von VETI" ------------------------------------ */
.vnachricht { display: grid; gap: 10px; max-width: 720px; }
.vnachricht__kopf {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--content-base-tertiary);
}
.vnachricht--neu .vnachricht__von { color: var(--c-brand-purple-600); }
.vnachricht__punkt {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-brand-purple-500);
  box-shadow: 0 0 0 3px rgba(100, 80, 232, 0.16);
}
.vnachricht__zeit { margin-left: -4px; font-weight: 500; color: var(--content-base-tertiary); }
/* KI-Kennzeichnung (B1.7) */
.vnachricht__ki { margin-left: -4px; font-weight: 500; color: var(--content-base-tertiary); }
/* Blase wie im Chat (chat.css .blase--veti): Ecke unten links eckig. */
.vnachricht__blase {
  padding: 14px 18px;
  border-radius: 18px 18px 18px 6px;
  background: rgba(28, 28, 30, 0.035);
  border: 1px solid rgba(28, 28, 30, 0.07);
}
.vnachricht--neu .vnachricht__blase {
  background: rgba(100, 80, 232, 0.06);
  border-color: rgba(100, 80, 232, 0.16);
}
.vnachricht__text + .vnachricht__text { margin-top: 10px; }
.vnachricht__text {
  margin: 0; font-family: var(--font-lese);
  font-size: var(--msg-schrift, 16px); line-height: var(--msg-zeile, 1.5); color: var(--content-base-primary);   /* = Chat-Blase */
  overflow-wrap: anywhere;
}


/* --- Profil: „So spricht VETI mit Dir" — der Charaktertext --------------- */
.charakter {
  margin: 0; padding: 14px 18px;
  display: grid; gap: 10px;
  border-left: 3px solid rgba(100, 80, 232, 0.35);
  border-radius: 0 14px 14px 0;
  background: rgba(100, 80, 232, 0.045);
}
.charakter p {
  margin: 0; font-family: var(--font-lese);
  font-size: 15px; line-height: 1.6; color: var(--content-base-primary);
}

/* --- Feiern (js/feier.js) ----------------------------------------------- */
.zusagen { position: relative; }
.feierzeile {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  margin: 0; padding: 5px 12px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  background: rgba(0, 229, 255, 0.14); color: var(--c-brand-cyan-700, #0E7490);
  transition: opacity 200ms;
}
.feierzeile:empty { padding: 0; opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .feierzeile { top: 18px; right: 16px; } }
.reise__geschafft {
  margin: 0; padding: 10px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--content-base-primary);
  background: rgba(0, 229, 255, 0.08);
}
.reise__geschafft--jetzt { animation: reiseGeschafft 0.5s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes reiseGeschafft { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* Konfetti — derselbe Emoji-Ausbruch wie im Chat (chat/veti.css), hier für
   das Dashboard: über allem, fängt keine Klicks ab, bei reduzierter Bewegung aus. */
.konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; }
.konfetti__teil {
  position: absolute; font-size: 20px; line-height: 1;
  will-change: transform, opacity;
  animation: konfettiFlug 2.4s cubic-bezier(.16, .6, .3, 1) forwards;
}
@keyframes konfettiFlug {
  0%   { transform: translate(-50%, 0) scale(.4) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1) rotate(var(--dr)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .konfetti { display: none; }
  .reise__geschafft--jetzt { animation: none; }
}

/* --- „Neue Frage" (Stefan 16.10.): neu hinzugekommene Fragen zu „VETI einstellen" ---
   Gleicher Aufbau wie im Onboarding (Frage, vier Karten, optional eigener Satz), im
   Ton der „Neuen Nachricht von VETI": violetter Punkt, ruhige Karte unter dem Gruß. */
.neuefragen { display: grid; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); }
.neuefragen[hidden] { display: none; }
.neuefragen__marke { margin: 0; }
.neuefragen .vnachricht__von { color: var(--c-brand-purple-600); }
.neuefragen__titel { margin: 0; }
.neuefragen__zaehler { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--content-base-tertiary); }
.neuefragen__frage { margin: 0; font-family: var(--font-lese); font-size: 17px; line-height: 1.45; color: var(--content-base-primary); }
.neuefragen__opts { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); max-width: 880px; }
.neuefragen__opt {
  text-align: left; cursor: pointer; font: inherit; font-size: 15px; line-height: 1.35;
  padding: 12px var(--sp-4); border-radius: 14px;
  border: 1.5px solid var(--border-base-primary); background: #fff; color: var(--content-base-primary);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.neuefragen__opt:hover { border-color: var(--c-brand-purple-400); transform: translateY(-1px); }
.neuefragen__opt[aria-checked="true"] {
  border-color: var(--c-brand-purple-500);
  box-shadow: inset 0 0 0 1px var(--c-brand-purple-500);
  background: rgba(100, 80, 232, 0.06);
}
.neuefragen__frei { display: grid; gap: var(--sp-2); max-width: 680px; }
.neuefragen__frei .linkbtn { justify-self: start; }
.neuefragen__freitext {
  font: inherit; font-size: 15px; padding: 10px 14px; border-radius: 12px; resize: vertical;
  border: 1px solid var(--border-base-primary); background: #fff;
}
.neuefragen__freitext:focus { outline: none; border-color: var(--c-brand-purple-400); }
.neuefragen__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.neuefragen__danke { margin: 0; font-family: var(--font-lese); font-size: 16.5px; color: var(--content-base-primary); }
.neuefragen__fehler { margin: 0; font-size: 14px; color: var(--content-danger, #b42318); }
@media (max-width: 599px) {
  .neuefragen { padding: var(--sp-4); }
  .neuefragen__opts { grid-template-columns: 1fr; }
}

/* --- Profil: Deine Einstellungen + gelernter Stil (Stefan 16.10.) --------- */
#stil-karte { display: grid; gap: var(--sp-3); }
#stil-karte[hidden] { display: none; }
.stil__quelle { display: block; margin-top: 2px; font-size: 11.5px; color: var(--content-base-tertiary); }
.stil__gelernt { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border-base-primary); }


/* =============================================================================
   Release 19.10.2026 (Dashboard): Kurs-Check, Baustellen, „Was VETI noch fehlt",
   Selbsteinschätzung als Balken, „Veti sieht"-Kennzeichnung, Bereichs-Icons.
   ========================================================================== */

/* --- „Veti sieht" (D2): KI-Einschätzung sichtbar von Fakten getrennt -------- */
.vetisieht {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-brand-purple-500);
}

/* --- B3.2 Kurs-Check --------------------------------------------------------- */
.kurs { gap: var(--sp-3); border-left: 0; }
.kurs::after { opacity: 0; }
.kurs__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.kurs__urteil { font-size: 12px; padding: 6px 11px; }
.kurs__urteil--kurs { background: rgba(13, 140, 66, 0.12); color: var(--c-green-700, #0D8C42); }
.kurs__urteil--teils { background: rgba(100, 80, 232, 0.10); color: var(--c-brand-purple-600); }
.kurs__urteil--weg { background: rgba(184, 118, 20, 0.14); color: var(--c-yellow-700, #8A590F); }
.kurs__kernsatz {
  margin: 0; max-width: 860px;
  font-family: var(--font-lese); font-size: 17px; line-height: 1.5; font-weight: 600;
  color: var(--content-base-primary);
}
.kurs__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 960px) { .kurs__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kurs__punkt {
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(28, 28, 30, 0.08);
  border-left: 3px solid var(--c-brand-purple-400);
  display: flex; flex-direction: column; gap: 6px;
}
.kurs__punkt--kurs { border-left-color: var(--c-green-700, #0D8C42); }
.kurs__punkt--abweichung { border-left-color: var(--c-yellow-600); }
.kurs__punkt--offen { border-left-color: var(--c-brand-purple-400); }
.kurs__text { margin: 0; font-family: var(--font-lese); font-size: 14.5px; line-height: 1.5; color: var(--content-base-primary); }
.kurs__belege { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 12px; }
.kurs__belege-label { color: var(--content-base-tertiary); }
.kurs__beleg {
  font: inherit; font-size: 12px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--content-action-primary); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(100, 80, 232, 0.35); text-align: left;
}
.kurs__beleg:hover { color: var(--content-action-hover); text-decoration-color: currentColor; }
.kurs__frage {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 14px; border-radius: 12px; background: rgba(144, 127, 255, 0.07);
}
.kurs__frage-text { margin: 0; flex: 1 1 280px; font-family: var(--font-lese); font-size: 15px; line-height: 1.45; }
.kurs__frage-label {
  display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-brand-purple-500);
}
.kurs__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.kurs__fuss:empty { display: none; }
.kurs__hinweis { font-size: 12px; color: var(--content-base-tertiary); }
.kurs__leer { margin: 0; font-family: var(--font-lese); font-size: 15px; line-height: 1.55; color: var(--content-base-secondary); max-width: 760px; }
.kurs__neu:disabled { opacity: 0.55; cursor: default; }

/* --- B3.3 Zusagen-Zähler + Baustellen --------------------------------------- */
.zusagen__zaehler { font-size: 12px; }
.baustellen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.baustelle { padding: 10px 0; border-top: 1px solid rgba(28, 28, 30, 0.06); display: grid; gap: 2px; }
.baustelle:first-child { border-top: 0; padding-top: 2px; }
.baustelle__name { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--content-base-primary); }
.baustelle__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--content-base-secondary); }
.baustelle__los { justify-self: start; font-size: 13px; }

/* --- D1 „Was VETI noch fehlt" ------------------------------------------------ */
.fehlt__liste { list-style: none; margin: 0; padding: 0; }
.fehlt__zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: 9px 0; border-top: 1px solid rgba(28, 28, 30, 0.06);
}
.fehlt__zeile:first-child { border-top: 0; padding-top: 2px; }
.fehlt__label { font-size: 14px; color: var(--content-base-primary); }

/* --- E16 Vorschläge in Ziele/DNA --------------------------------------------- */
.pv-liste { display: grid; gap: var(--sp-2); }
.dna__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

/* --- D2/E10 Selbsteinschätzung als Balken ------------------------------------ */
.selbst { display: grid; gap: var(--sp-3); width: 100%; text-align: left; }
.selbst__kopf { display: flex; align-items: center; gap: var(--sp-2); }
.selbst__kopf .gruppe__titel { margin: 0; }
.selbst__chip { background: rgba(184, 118, 20, 0.12); color: var(--c-yellow-700, #8A590F); }
.selbst__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.selbst__zeile { display: grid; gap: 5px; }
.selbst__name { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: 13.5px; color: var(--content-base-primary); }
.selbst__name > span:first-child { min-width: 0; }
.selbst__band { flex: none; font-size: 12px; font-weight: 600; color: var(--content-base-tertiary); }
.selbst__band--high { color: var(--c-green-700, #0D8C42); }
.selbst__band--low { color: var(--c-yellow-700, #8A590F); }
.selbst__band--offen { font-weight: 500; font-style: italic; }
.selbst__bar { height: 6px; background: rgba(28, 28, 30, 0.08); }
.selbst__bar .bar__fill { background: var(--brand-gradient); opacity: 0.85; }
.selbst__hinweis { margin: 0; font-size: 12px; color: var(--content-base-tertiary); }
.ansichten .profil__flaeche { display: block; width: 100%; cursor: default; padding: 16px 18px; }
.ansichten .profil__flaeche:hover { transform: none; box-shadow: none; border-color: var(--border-base-primary); }

/* --- B3.6 Bereichs-Icons ------------------------------------------------------ */
.bereich-icon { flex: none; display: inline-block; vertical-align: -0.2em; margin-right: 6px; }
.bereichsmarke .bereich-icon { margin-right: 4px; }
.bereichkopf__eyebrow { display: inline-flex; align-items: center; }
.bwahl__ikon { display: inline-flex; flex: none; color: var(--content-base-secondary); }
.bwahl__ikon .bereich-icon { margin-right: 0; }
.kmenu__mitikon { display: inline-flex; align-items: center; }
.kmenu__gruppe { display: flex; align-items: center; }

/* Stefan 19.10. (73fb2b): Nachricht aus einem Gespräch → ganze Blase führt dorthin. */
.vnachricht__blase--link {
  display: block; color: inherit; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.vnachricht__blase--link:hover { border-color: rgba(100, 80, 232, 0.35); box-shadow: 0 4px 14px rgba(100, 80, 232, 0.10); }
.vnachricht__blase--link:active { transform: scale(0.99); }
.vnachricht__blase--link:focus-visible { outline: 2px solid var(--c-brand-purple-500, #6450E8); outline-offset: 3px; }
.vnachricht__oeffnen {
  display: block; margin-top: 10px; font-size: 13px; font-weight: 600;
  color: var(--c-brand-purple-500, #6450E8);
}

/* „Neues Thema" statt Antwort (Stefan 19.10., efba21) — oben rechts in der Hero-Karte (e89ea9). */
.heute-hero { position: relative; }
.schnell__modus { position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 1; margin: 0; }
.schnell__modus[hidden] { display: none; }
.schnell__neu { font-size: 14px; font-weight: 600; min-height: 36px; padding: 6px 10px; color: var(--c-brand-purple-500, #6450E8);
  border-radius: 999px; background: rgba(100, 80, 232, 0.07); text-decoration: none; }
.schnell__neu:hover { background: rgba(100, 80, 232, 0.13); }
.vnachricht--beiseite .vnachricht__blase { opacity: .55; }
@media (max-width: 599px) { .schnell__modus { top: var(--sp-3); right: var(--sp-3); } .schnell__neu { min-height: 40px; font-size: 13px; } }

/* Nachricht in fester Höhe (~4 Zeilen), scrollbar, unten verankert (e89ea9, 19:00). */
.vnachricht__inhalt {
  max-height: calc(var(--msg-schrift, 16px) * var(--msg-zeile, 1.5) * 4 + 12px);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.vnachricht__inhalt--gekuerzt {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.2em);
          mask-image: linear-gradient(to bottom, transparent 0, #000 2.2em);
}

/* Start-Hero ohne die große Blase (Stefan 19.10., b21fcf): enger oben. */
.ansichten .heute-hero { padding-top: var(--sp-5); }
@media (max-width: 599px) { .ansichten .heute-hero { padding-top: var(--sp-4); } }

/* „Neue Frage von VETI" als Popup (Stefan 19.10., 35ab9e) — gleiche Form wie die
   Fragebogen-Box im Chat (chat.css .bogen): Mitte auf Desktop, Blatt unten auf dem Handy. */
.neuefragen__blase { max-width: 720px; }
.nfpop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--sp-4); }
.nfpop__scrim { position: absolute; inset: 0; background: rgba(28, 28, 30, 0.34); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nfpop__panel {
  position: relative; width: min(560px, 100%); max-height: min(720px, calc(100svh - var(--sp-6)));
  display: flex; flex-direction: column; overflow: hidden; outline: none;
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 24px; background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 64px rgba(28, 28, 30, 0.24);
  animation: nfpopRein .26s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes nfpopRein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.nfpop__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.nfpop__zaehler { margin: 2px 0 0; font-size: 13px; color: var(--content-base-tertiary); }
.nfpop__marke { width: 28px; height: 28px; flex: none; display: block; }
.nfpop__bar { height: 3px; margin: 0 var(--sp-5); border-radius: 2px; background: rgba(100, 80, 232, 0.12); overflow: hidden; }
.nfpop__fill { display: block; height: 100%; width: 0; background: var(--brand-gradient-deep, #6450E8); transition: width .4s ease; }
.nfpop__leib { padding: var(--sp-4) var(--sp-5); overflow-y: auto; display: grid; gap: var(--sp-3); }
.nfpop__frage { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--content-base-primary); }
.nfpop__opts { display: grid; gap: var(--sp-2); }
.nfpop__weiter { display: flex; justify-content: flex-end; }
.nfpop__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-4); border-top: 1px solid rgba(28, 28, 30, 0.06); }
body.nfpop-offen { overflow: hidden; }
@media (max-width: 599px) {
  .nfpop { padding: 0; place-items: end stretch; }
  .nfpop__panel { width: 100%; max-height: 92svh; border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .nfpop__frage { font-size: 17px; }
  .nfpop__kopf, .nfpop__leib, .nfpop__fuss { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .nfpop__bar { margin: 0 var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) { .nfpop__panel { animation: none; } }

/* --- INU-879 (27.10.): „Start anpassen" (js/start-anpassen.js) -------------
   Ausgeblendete Karten (seine Anordnung) — gewinnt gegen das hidden-Umschalten der Renderer. */
.ansicht--heute .start--aus { display: none !important; }
/* seine Reihenfolge auf dem Handy (eine Spalte): gesetzt nur, wenn er angepasst hat */
@media (max-width: 959px) {
  .ansicht--heute [style*="--sa-order"] { order: var(--sa-order) !important; }
}
.sa { display: flex; flex-direction: column; gap: var(--sp-3); }
.sa[hidden] { display: none; }
.sa__leiste { display: flex; justify-content: flex-end; }
.sa__oeffnen { font-size: 13px; color: var(--content-base-secondary); }
.sa__editor, .sa__vorschlag, .sa__hinweis {
  border-radius: 18px; padding: 16px 18px;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(28, 28, 30, 0.10);
}
.sa__vorschlag { background: rgba(100, 80, 232, 0.06); border-color: rgba(100, 80, 232, 0.18); }
.sa__vkopf { margin: 0 0 4px; font-weight: 600; font-size: 14px; }
.sa__vfuss, .sa__fuss { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.sa__hinweis { margin: 0; font-size: 13px; padding: 10px 14px; background: rgba(184, 118, 20, 0.08); border-color: rgba(184, 118, 20, 0.2); }
.sa__kopf p { margin: 2px 0 0; }
.sa__band { margin: var(--sp-4) 0 var(--sp-2); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--content-base-tertiary); }
.sa__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sa__zeile { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 8px; border-radius: 12px; background: rgba(28, 28, 30, 0.03); }
.sa__zeile--aus .sa__titel { color: var(--content-base-tertiary); }
.sa__titel { flex: 1; min-width: 0; font-size: 14px; }
.sa__aus { font-size: 11px; color: var(--content-base-tertiary); margin-left: 4px; }
.sa__auge, .sa__pfeil {
  flex: none; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 16px;
  border: 1px solid rgba(28, 28, 30, 0.12); background: #fff; color: var(--content-base-primary);
}
.sa__auge[aria-pressed="false"] { background: rgba(28, 28, 30, 0.05); color: var(--content-base-tertiary); }
.sa__auge:disabled, .sa__pfeil:disabled { opacity: .35; cursor: default; }
.sa__auge:focus-visible, .sa__pfeil:focus-visible { outline: 2px solid var(--c-brand-purple-400); outline-offset: 2px; }
.sa__meldung { margin: var(--sp-2) 0 0; font-size: 12px; color: var(--content-base-secondary); }
.sa__meldung:empty { display: none; }