/* =============================================================================
   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; }

/* Tablet (iPad hoch/quer): zwei Spalten ohne Lücke. Früher liefen die Teile
   in DOM-Reihenfolge paarweise durch zwei Zeilen — neben der langen Mitte stand
   links nur VETI + Fokus und darunter eine große Leere. Jetzt: links VETI ·
   Fokus · Reise · Gespräche · Profil, rechts die ganze Mitte über alle Zeilen.
   Die letzte Zeile ist 1fr: ist die rechte Spalte höher, nimmt NUR diese Zeile
   den Überschuss auf (Grid verteilt Platz spannender Elemente zuerst auf
   flexible Spuren) — die linken Karten bleiben dicht untereinander. */
@media (min-width: 600px) and (max-width: 1239px) {
  .dash5 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
  }
  .dash5__teil--links-oben   { grid-column: 1; grid-row: 1; }
  .dash5__teil--mitte-oben   { grid-column: 1; grid-row: 2; }
  .dash5__teil--rechts-oben  { grid-column: 1; grid-row: 3; }
  .dash5__teil--links-unten  { grid-column: 1; grid-row: 4; }
  .profil                    { grid-column: 1; grid-row: 5; }
  .dash5__teil--mitte-unten  { grid-column: 2; grid-row: 1 / 6; }
  .dash5--profil-offen .profil { grid-column: 1 / -1; grid-row: 6; }
}

@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-sg-cyan) 0%, var(--c-sg-hellblau) 30%, var(--c-sg-blauviolett) 62%, var(--c-sg-violett) 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); }

/* Buzz-Chat: kleine „Buzz"-Marke unter dem Titel (Hover-Text am Eintrag).
   Doppelte Klasse, weil .chip weiter unten Hintergrund/Farbe setzt. */
.chip.chip--buzz {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content;
  margin-top: 6px; padding: 4px 8px; font-size: 10px;
  background: rgba(100, 80, 232, 0.1); color: var(--c-brand-purple-600);
}
.chats__item--buzz .chip--buzz + .chats__offen { margin-left: var(--sp-2); }

/* --- Eyebrow (Bereichskopf u. a.) ----------------------------------------- */

.eyebrow {
  margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-brand-cyan-700);
}
/* --- 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) ------------------------------------- */

/* INU-755 „Offene Schritte aus Deinen Gesprächen" */
.schritte__liste { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.schritt {
  display: grid; gap: 2px; width: 100%; text-align: left; text-decoration: none;
  padding: var(--sp-2) var(--sp-3); border-radius: 10px;
  border: 1px solid var(--border-base-subtle, rgba(28, 28, 30, 0.08));
  color: inherit;
}
.schritt:hover, .schritt:focus-visible { border-color: var(--c-teal-500); }
.schritt__text { font-size: 14px; font-weight: 600; color: var(--content-base-primary); }
.schritt__quelle { font-size: 12px; color: var(--content-base-tertiary); }
.zusagen__liste { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
/* Die Zusagen-Karte selbst (auch im Chat): zusage.css */

/* --- 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(100, 80, 232, 0.12);
  transform: translateY(-1px);
}
/* --- Firmen-DNA (INU-711) ------------------------------------------------ */
/* Offene Aufgabe: Chip „Aufgabe offen" + Knopf; die Karte steht oben in der Mitte. */
.dna { gap: var(--sp-3); }
.dna__intro { margin: 0; }
.dna__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.dna__zeile { display: grid; gap: 2px; }
.dna__was { font-size: 12px; line-height: 16px; color: var(--content-base-tertiary); }
.dna__wert {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--content-base-primary);
  overflow-wrap: anywhere; white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.dna__fehlt { margin: 0; color: var(--c-yellow-700, #8A590F); }
.dna__bearbeiten { align-self: flex-start; }
.dna .btn { align-self: flex-start; }

.dna-form { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.dna-form__feld { display: grid; gap: 4px; }
.dna-form__label { font-size: 13px; font-weight: 600; color: var(--content-base-primary); }
.dna-form__optional { font-weight: 400; color: var(--content-base-tertiary); }
.dna-form__hinweis { margin: 0; font-size: 12px; line-height: 16px; color: var(--content-base-secondary); }
.dna-form__wert { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.dna-form__eingabe {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 8px 10px; border: 1px solid var(--border-base-primary); border-radius: 10px;
  background: #fff; font: inherit; font-size: 14px; line-height: 1.5; color: var(--content-base-primary);
}
.dna-form__eingabe:focus { outline: none; border-color: var(--c-brand-purple-500); box-shadow: 0 0 0 3px var(--c-brand-purple-200); }
.dna-form .website-liste { margin-bottom: 4px; }
@media (max-width: 599px) {
  .dna-form__eingabe, .dna-form .website-input { font-size: 16px; }   /* < 16 px zoomt iOS */
}

.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 ------------------------------------ */

/* Zwei Karten nebeneinander NUR, wenn die Spalte wirklich breit ist. Früher
   schaltete das ab Viewport 760 px auf zwei Spalten — auf dem iPad hoch
   (820/1024 px) sitzt .tests aber in einer halben Rasterspalte (600–1239 px
   = 2 Spalten) → Inhalt 1130 px breit in 820 px, rechtes Drittel
   abgeschnitten. Bewusst Viewport- statt Container-Query: Container Queries
   gibt es erst ab Safari 16, Jürgens altes iPad kann sie nicht.
   <600 px: 1 Spalte (Handy) · 600–1239: halbe Spalte → 1 Spalte ·
   1240–1439: Mittelspalte ≈ 460–620 px → 1 Spalte · ≥1440: 2 Spalten. */
.tests { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.tests > * { min-width: 0; }
@media (min-width: 1440px) { .tests { grid-template-columns: minmax(0, 1fr) minmax(0, 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; }

/* Konto-Aktionen in „Mein Profil": Link-Knöpfe nebeneinander, auf dem
   Handy umbrechend (die Touch-Trefferfläche bleibt per coarse-Regel groß). */
.konto__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); }
.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(0, 169, 204, 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); }
/* Zwei Spalten nach der Breite der KARTE, nicht des Fensters: Seit „Heute" und „Bereiche"
   vereint sind, steht die aufgeklappte Profil-Karte auf dem Desktop in der Hauptspalte
   (~650 px). Die Fenster-Abfrage teilte sie trotzdem in 420 px + Rest, Stärken/Entwicklungs-
   felder liefen rechts aus der Karte (Fabian 29.10., „overflow fail"). */
.profil { container: profil / inline-size; }
@container profil (min-width: 820px) { .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); }
@container profil (min-width: 520px) { .spalten2 { grid-template-columns: minmax(0, 1fr) minmax(0, 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; }
}

/* --- Touch-Ziele (iPad/iPhone) ------------------------------------------- */
/* Apple HIG: ≥ 44 × 44 px. Link-Knöpfe bekommen eine unsichtbar größere
   Trefferfläche (Padding + negativer Rand), das Layout bleibt gleich. */
@media (pointer: coarse) {
  .linkbtn { display: inline-block; padding: 12px 11px; margin: -12px -11px; }
  .linkbtn--leise { display: inline-flex; }
  .ikonknopf { width: 44px; height: 44px; }
  .filter__item { min-height: 44px; padding-block: 12px; }
  /* Der wandernde Trabant ist auf Touch kaum zu treffen → ruhiger Knopf. */
  .orbit__satellit { min-height: 44px; padding: 12px 16px; font-size: 13px; }
}

/* --- Identitätszeile im Fokus (agent.identity) ---------------------------- */
.identitaet { margin: 4px 0 var(--sp-2); }
.identitaet__claim { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--content-base-primary); }
.identitaet__tags { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; }
.identitaet__tags > li { margin: 0 6px 6px 0; }

/* --- Klartext-Bänder („Deine Selbsteinschätzung") ------------------------ */
.baender { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 6px; }
.baender__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: 13px; }
.baender__name { min-width: 0; }
.baender__band { flex: none; }
.baender__band--high { background: rgba(20, 184, 166, 0.14); color: #0f766e; }
.baender__band--low  { background: rgba(245, 158, 11, 0.14); color: #92400e; }
/* „noch nicht bewertbar" (Trifft (noch) nicht zu): neutral, gestrichelt — keine Wertung */
.baender__band--offen { background: transparent; border: 1px dashed var(--content-base-tertiary); color: var(--content-base-secondary); }
.radar--balken { align-items: stretch; padding: var(--sp-4) var(--sp-2); }

/* Bis die Daten da sind: Karten unsichtbar statt leer (kein 0,3-s-Flackern). */
.dash5 { transition: opacity 180ms ease; }
.dash5--laedt { opacity: 0; }

/* Business: das Business-Ergebnis zuerst, die personenbezogenen Tests
   (Persönlichkeitsprofil, Motive) danach — auf dem Handy stand das eigentliche
   Business-Ergebnis sonst erst nach ~5 Bildschirmen. */
[data-area='business'] .dash5__teil--mitte-unten > .tests { order: 3; }
[data-area='business'] .dash5__teil--mitte-unten > .zusagen { order: 2; }
[data-area='business'] .dash5__teil--mitte-unten > .schritte { order: 2; }
@media (max-width: 599px) {
  /* Handy (eine Spalte): Profil-Netz direkt unter „Thema im Fokus". */
  .dash5__teil--links-oben  { order: 1; }
  .dash5__teil--mitte-oben  { order: 2; }
  .profil                   { order: 3; }
  .dash5__teil--links-unten { order: 4; }
  .dash5__teil--mitte-unten { order: 5; }
  .dash5__teil--rechts-oben { order: 6; }
}

/* --- „Was VETI über Dich weiß" ------------------------------------------- */
/* Letzte Karte der mittleren Spalte (iPad: rechte Spalte, Handy: in der
   Reihenfolge der Mitte) — direkt über „Lass uns sprechen". Im Business-
   Bereich sortieren .zusagen/.tests per order um; order 4 hält die Karte
   dort trotzdem am Ende der Spalte. */
.wissen { order: 4; gap: var(--sp-3); }
.wissen__kopf { display: grid; gap: var(--sp-1); }
.wissen__kopf .h-md { letter-spacing: var(--track); }
.wissen__intro { margin: 0; }
.wissen__datenschutz { margin: 6px 0 0; font-size: 12.5px; }
.wissen__gruppe { display: grid; gap: var(--sp-2); }
.wissen__gruppe + .wissen__gruppe { margin-top: var(--sp-2); }
.wissen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.wissen__zeile {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  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);
}
.wissen__inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.wissen__label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--content-base-primary); }
.wissen__wert {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--content-base-secondary);
  overflow-wrap: anywhere; white-space: pre-line;
}
/* Zugeklappt: lange Texte auf drei Zeilen kürzen, aufgeklappt ganz zeigen. */
.wissen__liste--kurz .wissen__wert {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.wissen__quelle { font-size: 11px; line-height: 14px; color: var(--content-base-tertiary); }
.wissen__aktionen { display: flex; gap: 4px; flex: none; margin: -4px -8px -4px 0; }
.wissen__knopf {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--content-base-tertiary);
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.wissen__knopf:hover { background: rgba(28, 28, 30, 0.06); color: var(--content-action-primary); }
.wissen__knopf--weg:hover { color: var(--c-red-600, #C62828); }
.wissen__knopf:disabled { opacity: 0.45; cursor: default; }
.wissen__knopf:focus-visible { outline: 2px solid var(--c-brand-purple-500); outline-offset: 1px; }

.wissen__zeile--edit { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.wissen__feld {
  width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical;
  padding: 8px 10px; border: 1px solid var(--border-base-primary); border-radius: 10px;
  background: #fff; font: inherit; font-size: 14px; line-height: 1.5; color: var(--content-base-primary);
}
.wissen__feld:focus { outline: none; border-color: var(--c-brand-purple-500); box-shadow: 0 0 0 3px var(--c-brand-purple-200); }
.wissen__edit-aktionen { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.wissen__speichern { background: var(--c-brand-purple-500); color: #fff; }
.wissen__speichern:hover:not(:disabled) { background: var(--c-brand-purple-600); }
.wissen__fehler { margin: 0; font-size: 12px; line-height: 16px; color: var(--c-red-600, #C62828); }
.wissen__mehr { align-self: flex-start; }

@media (pointer: coarse) {
  .wissen__knopf { width: 44px; height: 44px; }
  .wissen__feld { font-size: 16px; }   /* < 16 px zoomt iOS beim Fokussieren */
  .wissen__aktionen { margin: -10px -12px -10px 0; gap: 0; }
  .wissen__edit-aktionen .zusage__btn { min-height: 44px; padding-inline: 18px; }
}

/* --- Fließtext in Lexend (Workshop 15.09., INU-711) ----------------------
   Wie im Chat: Lexend für Sätze, die man liest; Überschriften, Titel,
   Beschriftungen, Chips, Knöpfe und Zahlen bleiben in Inter. */
.chats__text, .fokus__satz, .saeulen__satz, .thema__text, .zusage__text,
.task__text, .websites__summary, .websites__findings li, .test__text,
.test__satz, .abschnitt__text, .merkliste li, .note, .gross__summary,
.punkt__text, .sprechen__satz, .wissen__wert {
  font-family: var(--font-lese);
}

/* --- Ausführliches Profil (INU-715) --------------------------------------
   Unter dem großen Netz, volle Kartenbreite. Überschriften Montserrat,
   Fließtext Lexend (Marke). Je Block eine Gruppe, je Bereich eine Zeile mit
   Name, Band und Deutung; auf breiten Schirmen zwei Spalten. */
.profilx {
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid var(--border-base-primary);
  display: grid; gap: var(--sp-6);
}
.profilx__kopf { max-width: 760px; }
.profilx__eyebrow {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-brand-purple-500);
}
.profilx__titel {
  margin: var(--sp-2) 0 0; font-family: var(--font-titel);
  font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em;
  color: var(--content-base-primary);
}
.profilx__intro {
  margin: var(--sp-3) 0 0; font-family: var(--font-lese);
  font-size: 15px; line-height: 1.7; color: var(--content-base-secondary);
}
.profilx__gruppen { display: grid; gap: var(--sp-6); }
.profilx__gruppe { display: grid; gap: var(--sp-3); }
.profilx__gruppentitel {
  margin: 0; font-family: var(--font-titel);
  font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--content-base-primary);
}
.profilx__gruppentext {
  margin: 0; max-width: 760px; font-family: var(--font-lese);
  font-size: 13px; line-height: 1.6; color: var(--content-base-tertiary);
}
.profilx__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3); grid-template-columns: 1fr;
}
@media (min-width: 860px) { .profilx__liste { grid-template-columns: 1fr 1fr; } }
.profilx__einheit {
  border: 1px solid var(--border-base-primary); border-radius: var(--r-card);
  background: var(--bg-component-primary);
  padding: var(--sp-4);
  display: grid; gap: var(--sp-2); align-content: start;
}
.profilx__einheitkopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.profilx__einheitkopf > .profilx__name { min-width: 0; }
.profilx__name {
  margin: 0; font-family: var(--font-titel);
  font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--content-base-primary);
}
.profilx__chip--angabe { background: rgba(144, 127, 255, 0.12); color: var(--c-brand-purple-600); }
.profilx__text {
  margin: 0; font-family: var(--font-lese);
  font-size: 14px; line-height: 1.65; color: var(--content-base-secondary);
}
.profilx__text--leise { font-size: 13px; color: var(--content-base-tertiary); }
.profilx__schluss {
  display: grid; gap: var(--sp-3);
  border-radius: var(--r-card);
  background: linear-gradient(135deg, rgba(144, 127, 255, 0.08), rgba(0, 169, 204, 0.07));
  padding: var(--sp-6);
}
.profilx__schluss .profilx__text { color: var(--content-base-primary); max-width: 820px; }
.profilx__schritt {
  margin-top: var(--sp-2); padding-top: var(--sp-4);
  border-top: 1px solid rgba(144, 127, 255, 0.18);
  display: grid; gap: var(--sp-3); justify-items: start;
}
.profilx__schritttitel {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-brand-purple-500);
}
@media print {
  .profilx__schritt .btn { display: none; }
}

/* „Eigene Anweisungen an VETI" — Dialog aus „So spricht VETI mit Dir" (19.10.) */
.anweisungen__text {
  width: 100%; min-height: 110px; resize: vertical;
  font: 400 14px/1.5 var(--font-lese); color: var(--content-base-primary);
  border: 1px solid var(--border-base-secondary); border-radius: var(--r-card);
  padding: 10px 12px; background: var(--bg-component-primary);
}
.anweisungen__text:focus { outline: 2px solid var(--content-action-primary); outline-offset: 1px; border-color: transparent; }
.anweisungen__fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.ansprache__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.anw { display: grid; gap: 10px; }
.anw__label { font-weight: 600; font-size: 14px; }
.anw__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.anw__titel { margin: 0; font-weight: 600; }
.anw__titel--leise { font-weight: 500; font-size: 14px; color: var(--content-base-secondary); }
.anw__meldung { margin: 0; padding: 8px 12px; border-radius: var(--r-card); background: rgba(214, 120, 40, 0.10); font-size: 14px; }
.anw-liste { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.anw-liste--leise { font-size: 13px; color: var(--content-base-secondary); }
/* leise Fassung in der Karte: klein, gedämpft, keine eigene Fläche */
.anw-kurz { font-size: 13px; color: var(--content-base-secondary); }
.anw-kurz__titel { margin: 0 0 2px; }
.anw-kurz__liste { margin: 0; padding-left: 1.1em; }
@media (max-width: 420px) {
  .anw__knoepfe { width: 100%; }
  .anw__knoepfe .btn { flex: 1 1 auto; }
}
/* Zweite Zeile im Gesprächseintrag: Anzahl Nachrichten · offene Zusagen */
.chats__info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.chats__info .chats__offen { margin-top: 0; }
.chats__anzahl { font-size: 11.5px; color: var(--content-base-tertiary); }

/* INU-877 (27.10.2026): „Deine weitergegebenen Wünsche" (js/wuensche.js) — Stand je Wunsch,
   Antwort des Teams, eingeklappt seine Worte. */
.wue__unterzeile { margin: 2px 0 var(--sp-3); }
.wue__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.wue__item { border-top: 1px solid var(--border-base-primary); padding-top: var(--sp-3); min-width: 0; }
.wue__item:first-child { border-top: 0; padding-top: 0; }
.wue__zeile { display: flex; gap: var(--sp-2); align-items: flex-start; justify-content: space-between; }
.wue__titel { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--content-base-primary); overflow-wrap: anywhere; min-width: 0; }
.wue__meta { margin: 2px 0 0; font-size: 12px; color: var(--content-base-tertiary); }
.wue__stand--pruefung { background: rgba(144, 127, 255, 0.14); color: var(--c-brand-purple-600, #5B47D6); }
.wue__stand--geplant { background: rgba(184, 118, 20, 0.12); color: var(--c-yellow-700, #8A590F); }
.wue__stand--umgesetzt { background: rgba(13, 140, 66, 0.12); color: var(--c-green-700, #0D8C42); }
.wue__stand--nein { background: var(--bg-component-hover); color: var(--content-base-tertiary); }
.wue__antwort {
  margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--content-base-primary);
  background: rgba(144, 127, 255, 0.07); border-radius: 10px; padding: 8px 10px; overflow-wrap: anywhere;
}
.wue__antwort-label { font-weight: 600; }
.wue__details summary { cursor: pointer; font-size: 12px; color: var(--content-base-secondary); margin-top: 4px; }
.wue__wortlaut { margin: 4px 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--content-base-secondary); }
.wue__zurueck { font-size: 12px; }
.wue__mehr { margin-top: var(--sp-2); }
.wue__meldung { margin: var(--sp-2) 0 0; font-size: 12px; color: var(--c-yellow-700); }
.wue__meldung:empty { display: none; }

/* --- INU-879 (27.10.): „Deine Ideen" (js/ideen.js) ------------------------- */
.idn__unterzeile { margin: 2px 0 var(--sp-3); }
.idn__form { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.idn__formzeile { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.idn__feld {
  width: 100%; min-width: 0; font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--border-base-primary); background: rgba(255, 255, 255, 0.85); color: var(--content-base-primary);
}
.idn__feld:focus { outline: 2px solid var(--c-brand-purple-400); outline-offset: 1px; }
.idn__feld--projekt { flex: 1 1 160px; width: auto; }
.idn .btn--sm, .idn__formzeile .btn { padding: 8px 14px; font-size: 13px; min-height: 36px; }
.idn__sprechen { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.idn__gruppe + .idn__gruppe { margin-top: var(--sp-4); }
.idn__projekt { margin: 0 0 var(--sp-2); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--content-base-tertiary); }
.idn__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.idn__item { border-top: 1px solid var(--border-base-primary); padding-top: var(--sp-3); min-width: 0; }
.idn__item:first-child { border-top: 0; padding-top: 0; }
.idn__item--zu .idn__titel { color: var(--content-base-secondary); }
.idn__zeile { display: flex; gap: var(--sp-2); align-items: flex-start; justify-content: space-between; }
.idn__titel { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--content-base-primary); overflow-wrap: anywhere; min-width: 0; }
.idn__text { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--content-base-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.idn__meta { margin: 2px 0 0; font-size: 12px; color: var(--content-base-tertiary); }
.idn__aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.idn__ausarbeiten { padding: 6px 12px; font-size: 13px; min-height: 32px; }
.idn__wahl select {
  font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 10px;
  border: 1px solid var(--border-base-primary); background: #fff; color: var(--content-base-secondary);
}
.idn__aktionen .linkbtn { font-size: 12px; }
.idn__stand--arbeit { background: rgba(144, 127, 255, 0.14); color: var(--c-brand-purple-600, #5B47D6); }
.idn__stand--fertig { background: rgba(13, 140, 66, 0.12); color: var(--c-green-700, #0D8C42); }
.idn__stand--weg { background: var(--bg-component-hover); color: var(--content-base-tertiary); }
.idn__leer { margin: 0; }
.idn__mehr { margin-top: var(--sp-3); }
.idn__meldung { margin: var(--sp-2) 0 0; font-size: 12px; color: var(--content-base-secondary); }
.idn__meldung:empty { display: none; }