/* =============================================================================
   Dashboard v5 — aus Bausteinen von v1 bis v4 zusammengesetzt.

   Farben und Kontraste folgen v1: Liquid Glass auf dem weichen Verlauf,
   Petrol als Akzent für Fortschritt, Violett für alles Anklickbare.
   Übernommen sind: die Glaskarten und die Persona-Abschnitte aus v1, die
   Business-Themen, die Reise und die Erinnerungen aus v3, die ruhigere
   Typografie aus v2.

   Aufbau: links VETI, Mitte der Fokus, rechts ich und mein Business.
   ========================================================================== */

/* --- Typografie (wie v1, damit die Varianten vergleichbar bleiben) -------- */

.h-md  { font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -0.4px; margin: 0; }
.h-sm  { font-size: 18px; line-height: 22px; font-weight: 600; letter-spacing: -0.36px; margin: 0; }
.h-xs  { font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.32px; margin: 0; }
.body-md  { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.28px; }
.body-sm  { font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: -0.24px; }

.muted   { color: var(--content-base-tertiary); }
.muted-2 { color: var(--content-base-secondary); }
.num     { font-variant-numeric: tabular-nums; }

/* --- Raster -------------------------------------------------------------- */
/* Nicht drei Spalten, sondern ein Raster aus zwei Zeilen: oben, was stehen
   bleibt (VETI · Thema im Fokus · Deine Reise), unten, was weichen darf
   (Letzte Gespräche · Was noch offen ist · Dein Business).

   Der erste Anlauf hatte die Spalten als ganze Elemente über beide Zeilen
   greifen lassen. Ist so ein Element höher als die Summe der Zeilen, verteilt
   Grid den Überschuss AUCH auf die erste — die Reise-Zeile wuchs damit auf
   Spaltenhöhe und das Profil hing weit darunter im Leeren. */

.dash5 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0 var(--sp-10);
  align-items: start;
}
.dash5__teil { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }

@media (min-width: 600px) and (max-width: 1239px) {
  .dash5 { grid-template-columns: 1fr 1fr; }
  .dash5--profil-offen .profil { grid-column: 1 / -1; }
}

@media (min-width: 1240px) {
  .dash5 { grid-template-columns: 320px minmax(0, 1fr) 340px; }

  .dash5__teil--links-oben   { grid-column: 1; grid-row: 1; }
  .dash5__teil--mitte-oben   { grid-column: 2; grid-row: 1; }
  .dash5__teil--rechts-oben  { grid-column: 3; grid-row: 1; }

  /* Gleiche Höhe, damit die zweite Reihe bündig anschließt. Das war schon
     einmal da und sah falsch aus — damals war die Reise-Karte 573 px hoch
     und riss in den Nachbarn dreihundert Pixel Loch auf. Jetzt ist sie
     gestaucht, der Rest ist ein Fingerbreit Luft am Kartenende.

     Das Raster behält trotzdem seine zwei Zeilen — davon hängt ab, dass die
     obere Reihe beim Aufklappen des Profils stehen bleibt und nur die untere
     nach unten rutscht. */
  .dash5__teil--links-oben,
  .dash5__teil--mitte-oben,
  .dash5__teil--rechts-oben { align-self: stretch; align-content: stretch; }

  /* Profil bleibt in der rechten Spalte (dieselbe wie „Deine Reise"); das Radar
     füllt die volle SPALTENbreite (Stefan: volle Breite der Spalte, NICHT des
     ganzen Dashboards). */
  .profil                    { grid-column: 3; grid-row: 2; }
  .dash5__teil--links-unten  { grid-column: 1; grid-row: 2; }
  .dash5__teil--mitte-unten  { grid-column: 2; grid-row: 2; }

  /* Aufgeklappt schiebt sich das Profil als eigene Zeile zwischen beide:
     die obere Reihe bleibt, wo sie ist, die untere rutscht nach unten. */
  .dash5--profil-offen .profil { grid-column: 1 / -1; grid-row: 2; }
  .dash5--profil-offen .dash5__teil--links-unten,
  .dash5--profil-offen .dash5__teil--mitte-unten { grid-row: 3; }
}

/* --- Karte --------------------------------------------------------------- */

.card {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.card > .h-md, .card > .h-sm { letter-spacing: var(--track); }

/* --- Knöpfe -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-5);
  border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.28px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.btn--full { width: 100%; }
.btn--primary { background: var(--c-brand-purple-500); color: #fff; }
.btn--primary:hover { background: var(--c-brand-purple-600); }
.btn--secondary {
  background: var(--bg-component-primary);
  color: var(--content-base-primary);
  box-shadow: inset 0 0 0 1px var(--border-base-primary);
}
.btn--secondary:hover { background: var(--bg-component-hover); }
.btn:active { transform: scale(0.99); }

.linkbtn {
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.26px;
  color: var(--content-action-primary);
  cursor: pointer; text-decoration: none;
}
.linkbtn:hover { color: var(--content-action-hover); text-decoration: underline; }
/* „Leise" Variante: tertiäre Aktion, die NICHT konkurrieren soll (z. B.
   „Assessment wiederholen" unter dem Profil) — gedämpft, mit kleinem Icon,
   färbt sich erst beim Hover ein. Ersetzt den früheren vollbreiten Knopf. */
.linkbtn--leise {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; color: var(--content-base-tertiary);
}
.linkbtn--leise:hover { color: var(--content-action-primary); }
.linkbtn__ikon { flex: none; }

.ikonknopf {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.66);
  color: var(--content-base-secondary);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.ikonknopf:hover { background: #fff; color: var(--content-action-primary); }

/* --- VETI ---------------------------------------------------------------- */

.veti { align-items: stretch; }
/* Wird die Karte von der Zeile gestreckt, sitzt die Blase in der Mitte
   statt oben — sonst sammelt sich der Platz als Leere darunter. */
.veti .orbit { margin-block: auto; }
.veti__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

/* --- Die Blase ----------------------------------------------------------- */
/* Zwei Schichten, die unterschiedlich schnell wabern und gegeneinander
   laufen — eine einzelne rotierende Form sieht nach Ladeanzeige aus. Der
   Puls liegt auf dem Behälter, damit er beide Schichten gleich trifft.    */

/* Die Bahn liegt waagerecht und wird von der Seite gesehen: der Trabant
   taucht links hinten auf, zieht auf halber Höhe VOR der Blase vorbei und
   verschwindet rechts hinten. Die Tiefe macht der Maßstab — hinten kleiner
   und durchsichtig, vorn voll. Die hintere Hälfte der Bahn liegt hinter der
   Blase und ist deshalb gar nicht zu sehen. */
.orbit {
  position: relative;
  width: 100%; height: 152px;
  display: grid; place-items: center;
}
.orbit__satellit {
  position: absolute; left: 50%; top: 50%;
  z-index: 2;                       /* zieht vorn vorbei, nicht dahinter */
  /* Breiter als die Blase, aber so, dass auch am sichtbaren Rand der Bahn
     (±50 px) nichts aus der Karte läuft. */
  max-width: 184px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 12px;
  border: 1px solid var(--border-base-primary); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 3px 14px rgba(28, 28, 30, 0.12);
  font: inherit;
  font-size: 11px; font-weight: 600; letter-spacing: -0.22px;
  color: var(--content-base-secondary);
  cursor: pointer;
  animation: umlaufbahn 9s cubic-bezier(.42, 0, .58, 1) infinite;
}
.orbit__satellit:hover { color: var(--content-action-primary); border-color: var(--c-brand-purple-200); }
/* „Neuer Chat" ist kein Rückblick, sondern eine Einladung — und sieht anders aus. */
.orbit__satellit--neu {
  color: var(--content-action-primary);
  border-color: var(--c-brand-purple-200);
  background: #fff;
}

/* Unsichtbar ist auch nicht anklickbar — sonst finge der Trabant am Rand
   Klicks ab, die der Blase gelten. */
@keyframes umlaufbahn {
  0%   { transform: translate(-50%, -50%) translate(-88px, 0) scale(.78);
         opacity: 0; pointer-events: none; }
  22%  { transform: translate(-50%, -50%) translate(-50px, 0) scale(.92);
         opacity: 1; pointer-events: auto; }
  50%  { transform: translate(-50%, -50%) translate(  0px, 0) scale(1);
         opacity: 1; pointer-events: auto; }
  78%  { transform: translate(-50%, -50%) translate( 50px, 0) scale(.92);
         opacity: 1; pointer-events: auto; }
  100% { transform: translate(-50%, -50%) translate( 88px, 0) scale(.78);
         opacity: 0; pointer-events: none; }
}

/* Die Blase selbst ist der Weg in ein neues Gespräch. */
.bubble {
  position: relative;
  width: 124px; height: 124px;
  border: 0; padding: 0; background: none;
  cursor: pointer;
  animation: pulsBlase 5.5s ease-in-out infinite;
}
.bubble:focus-visible { outline: 2px solid var(--c-brand-purple-500); outline-offset: 6px; border-radius: 50%; }
.bubble__haut {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, var(--c-brand-cyan-400) 0%,
                              var(--c-brand-purple-400) 55%, var(--c-brand-purple-500) 100%);
  filter: blur(0.4px);
}
.bubble__haut--a {
  border-radius: 58% 42% 46% 54% / 48% 52% 48% 52%;
  animation: wabernA 11s ease-in-out infinite;
  opacity: 0.95;
}
.bubble__haut--b {
  border-radius: 44% 56% 55% 45% / 55% 44% 56% 45%;
  animation: wabernB 15s ease-in-out infinite;
  opacity: 0.55;
  mix-blend-mode: screen;
}
/* Das Glanzlicht sitzt fest — es bewegt sich nicht mit, sonst wirkt die
   Blase wie ein rollender Ball statt wie etwas Lebendiges. */
.bubble__licht {
  position: absolute; left: 22%; top: 16%; width: 38%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%);
}

@keyframes pulsBlase {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes wabernA {
  0%, 100% { border-radius: 58% 42% 46% 54% / 48% 52% 48% 52%; transform: rotate(0deg); }
  33%      { border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%; transform: rotate(6deg); }
  66%      { border-radius: 52% 48% 40% 60% / 42% 58% 42% 58%; transform: rotate(-5deg); }
}
@keyframes wabernB {
  0%, 100% { border-radius: 44% 56% 55% 45% / 55% 44% 56% 45%; transform: rotate(0deg) scale(0.96); }
  40%      { border-radius: 60% 40% 45% 55% / 42% 60% 40% 58%; transform: rotate(-8deg) scale(1.02); }
  75%      { border-radius: 48% 52% 58% 42% / 58% 42% 58% 42%; transform: rotate(7deg) scale(0.98); }
}

/* --- Letzte Gespräche ---------------------------------------------------- */

.chats__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.chats__item {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--border-base-primary); border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.72);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer; font: inherit;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.chats__item:hover {
  border-color: var(--c-brand-purple-400);
  background: #fff;
  transform: translateY(-1px);
}
.chats__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.chats__titel { font-size: 14px; font-weight: 600; color: var(--content-base-primary); }
.chats__wann  { font-size: 11px; color: var(--content-base-tertiary); flex: none; }
.chats__text  { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--content-base-secondary); }
.chats__offen {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 11px; font-weight: 600; color: var(--c-brand-cyan-700);
}
.chats__punkt { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--c-brand-cyan-600); }

/* Fester Onboarding-Anker: dezent abgesetzt, gestrichelter Rand, halbtransparent. */
.chats__item--onboarding {
  background: transparent;
  border-style: dashed;
}
.chats__item--onboarding .chats__titel { color: var(--content-base-secondary); }

/* --- Fokus --------------------------------------------------------------- */

.fokus { gap: var(--sp-2); }
.eyebrow {
  margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-brand-cyan-700);
}
.fokus__name {
  margin: 0;
  font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.5px;
  color: var(--content-base-primary);
}
.fokus__satz { margin: 0; font-size: 14px; line-height: 1.55; color: var(--content-base-secondary); }
/* Der Fuß hängt sich an die Unterkante, wenn die Karte gestreckt wird. */
.fokus__fuss { margin-top: var(--sp-2); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.fokus__stand { font-size: 12px; color: var(--content-base-tertiary); }

/* --- Die weiteren Säulen ------------------------------------------------- */

.saeulen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.saeulen__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; text-align: left; font: inherit;
  border: 1px solid var(--border-base-primary); border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.72);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.saeulen__item:hover { border-color: var(--c-brand-purple-400); background: #fff; }
.saeulen__name { display: block; font-size: 14px; font-weight: 600; color: var(--content-base-primary); }
.saeulen__satz { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--content-base-tertiary); }
.saeulen__stand {
  flex: none; font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--bg-component-secondary); color: var(--content-base-secondary);
}
/* „Bereich starten"-Aufruf auf einer noch nicht gestarteten Bereichskarte. */
.saeulen__cta {
  flex: none; font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--bg-action-primary); color: var(--content-on-action);
}
.saeulen__item:hover .saeulen__cta { filter: brightness(1.05); }

/* --- Business-Themen ----------------------------------------------------- */

.themen { gap: var(--sp-3); }
.themen__kopf { text-align: center; }

.filter {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--r-pill);
  align-self: center;
}
.filter__item {
  border: 0; background: none; font: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: -0.26px;
  color: var(--content-base-secondary);
  padding: 7px var(--sp-5); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.filter__item:hover { color: var(--content-base-primary); }
.filter__item[aria-selected='true'] {
  background: var(--bg-component-primary);
  color: var(--content-base-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.themen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.thema {
  border: 1px solid var(--border-base-primary); border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.72);
  padding: var(--sp-4);
}
.thema__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.thema__name { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; font-weight: 600; }
.thema__punkt { width: 9px; height: 9px; border-radius: var(--r-pill); flex: none; }
.thema__punkt--open { background: var(--c-brand-cyan-400); }
.thema__punkt--partial { background: var(--c-yellow-400); }
.thema__punkt--done { background: var(--c-teal-500); }
.thema__stand { font-size: 11px; color: var(--content-base-tertiary); flex: none; }
.thema__text { margin: var(--sp-2) 0 0; font-size: 13px; line-height: 1.55; color: var(--content-base-secondary); }
.thema__cta { margin-top: var(--sp-2); }
.themen__leer { margin: 0; padding: var(--sp-5); text-align: center; font-size: 13px; color: var(--content-base-tertiary); }

/* --- Zusagen (Selbstverpflichtungen) ------------------------------------- */

.zusagen__liste { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.zusage {
  border: 1px solid var(--border-base-primary); border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.72);
  padding: var(--sp-4);
}
.zusage--faellig { border-color: var(--c-yellow-400); background: rgba(250, 204, 21, 0.08); }
.zusage__box { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.zusage__check { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--c-teal-500); cursor: pointer; }
.zusage__inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zusage__titel { font-size: 14px; font-weight: 600; color: var(--content-base-primary); }
.zusage__text { font-size: 13px; line-height: 1.5; color: var(--content-base-secondary); }
.zusage__faellig { font-size: 11px; color: var(--content-base-tertiary); }
.zusage--faellig .zusage__faellig { color: var(--c-yellow-700, #a16207); font-weight: 600; }
.zusage--erledigt { opacity: 0.62; }
.zusage--erledigt .zusage__titel { text-decoration: line-through; color: var(--content-base-tertiary); }
.zusage--erledigt .zusage__box { cursor: default; }

/* Vorschlag (Freigabe vor Eintrag): dezent hervorgehoben, mit zwei Aktionen. */
.zusage--vorschlag {
  border-style: dashed;
  border-color: var(--c-teal-300);
  background: rgba(20, 184, 166, 0.05);
}
.zusage__vorschlag-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--c-teal-500);
}
.zusage__aktionen { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.zusage__btn {
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer;
}
.zusage__btn:disabled { opacity: 0.55; cursor: default; }
.zusage__btn--ja { background: var(--c-teal-500); color: #fff; }
.zusage__btn--nein {
  background: transparent; color: var(--content-base-secondary);
  border-color: var(--border-base-primary);
}

/* --- 7-Tage-Challenge ---------------------------------------------------- */

.chip {
  font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; flex: none;
  padding: 5px 9px; border-radius: var(--r-pill);
  background: var(--bg-component-hover); color: var(--content-base-secondary);
}
.chip--warn { background: rgba(184, 118, 20, 0.12); color: var(--c-yellow-700, #8A590F); }
.chip--ok { background: rgba(13, 140, 66, 0.12); color: var(--c-green-700, #0D8C42); }

.streak { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.day {
  flex: 1 1 0; min-width: 0; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-card); border: 1px solid var(--border-base-primary);
  background: rgba(255, 255, 255, 0.6);
  font-size: 12px; font-weight: 600; color: var(--content-base-tertiary);
}
.day--now {
  border-color: var(--c-brand-purple-500); color: var(--c-brand-purple-600);
  box-shadow: 0 0 0 1px var(--c-brand-purple-200);
}
.day--done { background: var(--c-teal-500); border-color: var(--c-teal-500); color: #fff; }
.day--locked { opacity: 0.5; }

.task {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border-radius: var(--r-card); border: 1px solid var(--border-base-primary);
  background: var(--bg-component-secondary);
}
.task--warten { background: rgba(45, 212, 191, 0.06); border-color: var(--c-teal-300, #5EEAD4); }
.task__tag {
  margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--content-base-tertiary);
}
.task__titel { margin: 0; font-size: 14px; font-weight: 600; color: var(--content-base-primary); }
.task__text { margin: 6px 0 12px; font-size: 13px; line-height: 1.55; color: var(--content-base-secondary); }
.actions { display: flex; }
.challenge-notiz {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--border-base-primary); border-radius: var(--r-card);
  padding: var(--sp-3); font: inherit; font-size: 13px;
  background: var(--bg-component-primary); color: var(--content-base-primary);
}
.challenge-notiz:focus { outline: none; border-color: var(--c-brand-purple-500); }

/* --- Die Reise ----------------------------------------------------------- */

/* min-width:0, sonst zwingt der Inhalt (die dreispaltige Etappenliste mit
   langen Wörtern) die Karte über die 340-px-Spalte hinaus — dann ragte „Deine
   Reise" rechts weiter raus als das „Business-Profil" darunter (gleiche Spalte,
   aber Reise breiter). Mit min-width:0 bleibt die Karte spaltenbündig. */
.reise { gap: var(--sp-2); min-width: 0; }
.reise__kopf { text-align: center; }
.reise__stufe {
  margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.36px;
  color: var(--c-brand-cyan-700);
}
.reise__meta { margin: 2px 0 0; font-size: 12px; color: var(--content-base-tertiary); }

.reise__balkenzeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.reise__label { font-size: 12px; color: var(--content-base-secondary); }
.reise__prozent { font-size: 12px; font-weight: 600; color: var(--c-brand-cyan-700); }
.bar {
  display: block; height: 8px; border-radius: var(--r-pill);
  background: var(--c-neutral-200); overflow: hidden;
}
.bar__fill {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: var(--c-teal-500);
  transition: width 640ms cubic-bezier(.16, 1, .3, 1);
}

/* Einfache Liste statt Raster: jede Etappe steht auf einer eigenen Zeile,
   von oben nach unten in Reihenfolge lesbar (Stefan-Wunsch 2026-09-14). */
.etappen {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.etappe {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-inner);
  background: rgba(255, 255, 255, 0.78);
  font-size: 11px; font-weight: 600; color: var(--content-base-primary);
  line-height: 1.25;
  /* min-width:0 + Umbruch, damit lange Etappennamen in der Zelle umbrechen
     statt die Spur (und damit die Karte) breiter zu ziehen. */
  min-width: 0; overflow-wrap: anywhere;
}
.etappe--offen { color: var(--content-base-tertiary); font-weight: 500; }
.etappe__haken {
  flex: none; width: 16px; height: 16px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--c-teal-500); color: #fff;
}
.etappe--offen .etappe__haken { background: var(--c-neutral-200); }

/* --- Persönlichkeitsprofil ----------------------------------------------- */

.profil__flaeche {
  border: 1px solid var(--border-base-primary); border-radius: var(--r-card);
  background: var(--bg-component-primary);
  padding: var(--sp-4) 0;
  cursor: pointer; font: inherit; width: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
/* Aufgeklappt ist die Karte kein Knopf mehr, sondern der Arbeitsplatz. */
.profil--offen .gross { animation: profilAuf 280ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes profilAuf {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.profil__flaeche:hover {
  border-color: var(--c-brand-purple-400);
  box-shadow: 0 4px 18px rgba(86, 63, 192, 0.12);
  transform: translateY(-1px);
}
.websites__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.website-liste { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.website-row { display: flex; align-items: center; gap: 8px; }
.website-input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-base-primary); border-radius: 10px; font: inherit; }
.website-remove { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(28, 28, 30, .06); font-size: 18px; line-height: 1; cursor: pointer; }
.website-remove:hover { background: rgba(28, 28, 30, .12); }
.websites__link { display: inline-block; word-break: break-all; color: var(--c-brand-purple-600); text-decoration: none; }
.websites__link:hover { text-decoration: underline; }
.websites__findings { margin: 10px 0 0; padding-left: 18px; }
.websites__findings li { font-size: 13px; color: var(--content-base-secondary); margin: 3px 0; }
.websites__summary { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--content-base-secondary); }
.websites__summary--pending { color: var(--content-base-tertiary); font-style: italic; }
.radar { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; }
/* Das Radar skaliert auf 100 % der Kartenbreite (viewBox → SVG-Box = Kartenbreite).
   overflow:hidden STATT visible: die Achsenbeschriftung darf die Karte NIE
   verlassen (auf dem Smartphone hingen die langen Labels — „Marketing &
   Sichtbarkeit" etc. — über den Kartenrand hinaus). Das Netz ist bewusst KLEINER
   gehalten (mehr Polsterung in der viewBox) und die Labels brechen um, damit
   alles innerhalb der viewBox — und damit innerhalb der Karte — bleibt, ohne zu
   clippen. Gilt für jede Breite (Desktop wie 360/390 px mobil). */
.radar svg { overflow: hidden; width: 100%; max-width: 100%; height: auto; }
/* Zeile für die tertiäre Profil-Aktion („Assessment wiederholen") — zentriert,
   dezent, kein vollbreiter Knopf. */
.profil__aktion { display: flex; justify-content: center; }
.radar__legend { display: flex; gap: var(--sp-4); }
.radar__legenditem { display: inline-flex; align-items: center; gap: 6px; color: var(--content-base-secondary); }

/* --- Dialog -------------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--sp-4); }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(28, 28, 30, 0.34);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: dialogGrund 240ms ease both;
}
.modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(820px, calc(100svh - var(--sp-8)));
  display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-glass);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: 0 24px 64px rgba(28, 28, 30, 0.24);
  overflow: hidden;
  animation: dialogAuf 300ms cubic-bezier(.16, 1, .3, 1) both;
}
/* Das große Profil braucht Platz für Netz und Text nebeneinander. */
.modal__panel--breit { width: min(1000px, 100%); }

.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.modal__body { padding: 0 var(--sp-5) var(--sp-5); overflow-y: auto; display: grid; gap: var(--sp-4); }

@keyframes dialogGrund { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialogAuf {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* --- Persönlichkeitsprofil und Motive ------------------------------------ */

.tests { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .tests { grid-template-columns: 1fr 1fr; align-items: start; } }
.test { gap: var(--sp-3); }
.test__text { margin: 0; line-height: 1.55; }
.test__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.test__zeile { display: grid; gap: 4px; }
.test__name { font-size: 13px; font-weight: 600; color: var(--content-base-primary); }
.test__gruppe { margin: 0; font-size: 11px; color: var(--content-base-tertiary); }
.test__satz { margin: 0; font-size: 13px; line-height: 1.5; color: var(--content-base-secondary); }
.test__fuss { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-1); }
.test__fuss a.btn { text-decoration: none; }
.test .abschnitt { padding: var(--sp-3) var(--sp-4); }
.test .abschnitt__text { margin-top: 4px; }
.profil__fokusfelder { margin: 0; text-align: center; }

/* --- Bausteine in den Dialogen ------------------------------------------- */

.gruppe { display: grid; gap: var(--sp-2); }
.gruppe__titel {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--content-base-tertiary);
}

.feldkarte {
  border: 1px solid var(--border-base-primary); border-radius: var(--r-card);
  background: var(--bg-component-primary);
  padding: var(--sp-3) var(--sp-4);
}
.feldkarte__was { font-size: 12px; color: var(--content-base-tertiary); }
.feldkarte__wert { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--content-base-primary);
                   overflow-wrap: anywhere; }
.feldkarte__leer { margin: 2px 0 0; }

.raster2 { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width: 520px) { .raster2 { grid-template-columns: 1fr 1fr; } }

.abschnitt {
  border: 1px solid var(--border-base-primary); border-radius: var(--r-card);
  background: var(--bg-component-primary);
  padding: var(--sp-4);
}
.abschnitt__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.abschnitt__text { margin: var(--sp-2) 0 0; font-size: 13px; line-height: 1.6; color: var(--content-base-secondary); }

.merkliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.merkliste li {
  border-radius: var(--r-card);
  background: var(--bg-component-primary);
  border: 1px solid var(--border-base-primary);
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px; line-height: 1.55; color: var(--content-base-secondary);
}

.note {
  margin: 0; padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-brand-cyan-600);
  border-radius: var(--r-inner);
  background: rgba(17, 174, 189, 0.07);
  font-size: 13px; line-height: 1.6; color: var(--content-base-secondary);
}

/* --- Das große Profil ---------------------------------------------------- */

.gross { display: grid; gap: var(--sp-5); }
@media (min-width: 860px) { .gross { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; } }

.gross__text { display: grid; gap: var(--sp-4); align-content: start; }
.gross__summary { margin: 0; font-size: 15px; line-height: 1.65; color: var(--content-base-primary); }
.spalten2 { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .spalten2 { grid-template-columns: 1fr 1fr; } }

.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.punkt { display: grid; grid-template-columns: 16px 1fr; gap: var(--sp-2); align-items: start; }
.punkt__pfeil { color: var(--c-teal-500); font-weight: 700; line-height: 1.4; }
.punkt--minus .punkt__pfeil { color: var(--c-brand-purple-400); }
.punkt__name { font-size: 13px; font-weight: 600; color: var(--content-base-primary); }
.punkt__text { font-size: 13px; line-height: 1.55; color: var(--content-base-secondary); }

/* --- Bewegung aus ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bubble, .bubble__haut--a, .bubble__haut--b { animation: none; }
  /* Ein kreisender Text ist bei reduzierter Bewegung nicht zu retten. */
  .orbit__satellit { display: none; }
  .modal__backdrop, .modal__panel { animation: none; }
  .bar__fill { transition: none; }
  .chats__item:hover, .profil__flaeche:hover { transform: none; }
  .profil--offen .gross { animation: none; }
}