/*
  Markenfarben daevo.

  --brand ist das Logoblau aus dem Personal Coach Aaron Logo. Es hat auf Weiß
  nur einen Kontrast von 1.57 zu 1 und taugt dort nicht für Text oder Knopf
  Beschriftungen. Auf dunklem Grund liegt es bei 12.05 zu 1 und ist dort ideal.
  --brand-deep ist die abgedunkelte Variante für helle Oberflächen,
  Kontrast 4.51 zu 1 gegen Weiß, damit erfüllt sie WCAG AA.

  Deshalb zeigt --accent im dunklen Modus das Logoblau und im hellen Modus den
  dunklen Ton. --on-accent ist jeweils die Schriftfarbe darauf.
*/
:root {
  /* ---------- Marke ---------- */
  --brand: #96d8f0;
  --brand-deep: #1e7fa8;
  /* Für Text auf hellem Grund. --brand-deep erreicht auf #f6f8fa nur 4.24 zu 1
     und ist dort für Fliesstext zu schwach. Dieser Ton liegt bei 4.98. */
  --brand-text: #1b7399;

  /* ---------- Flächen ----------
   *
   * Die Neutraltöne sind nicht neutral. Sie tragen einen leichten Blaustich in
   * Richtung des Logoblaus, rund vier Prozent Sättigung. Ein reines Grau neben
   * einer kühlen Markenfarbe wirkt schmutzig, und die Palette fällt in zwei
   * Hälften auseinander: hier die Marke, da der Rest. Der Stich ist zu gering,
   * um als Farbe gelesen zu werden, und genau darum geht es.
   */
  --bg: #0b0e14;
  --panel: #131822;
  --panel-2: #0f141c;
  /* Für Elemente, die auf einem Panel liegen und sich davon abheben müssen. */
  --erhoben: #1a2130;
  --border: #232b3a;
  /* Trennlinien innerhalb einer Fläche. Schwächer als ein Rahmen, weil sie
     gliedern und nicht abgrenzen. */
  --linie: rgba(255, 255, 255, 0.07);
  --text: #e8edf5;
  --muted: #8d97a8;
  --accent: var(--brand);
  --accent-text: var(--brand);
  --on-accent: #0b0d10;
  --good: #3fb950;
  --warn: #d29922;
  --alt: #a371f7;
  --water: #2ec5d3;
  --bad: #f85149;

  /* ---------- Typografie ----------
   *
   * Eine modulare Skala mit dem Verhältnis 1.2. Vorher standen elf Grössen
   * zwischen 12 und 20 Pixeln im Stylesheet, darunter 12.5, 13.5, 14.5, 15.5
   * und 16.5. Jede für sich plausibel, zusammen ohne System, und genau das
   * liest man einer Oberfläche an, ohne es benennen zu können.
   */
  --t-2xs: 11px;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-md: 15px;
  --t-lg: 17px;
  --t-xl: 20px;
  --t-2xl: 24px;
  --t-3xl: 30px;
  --t-4xl: 40px;

  /* Grosse Schrift braucht engere Laufweite, kleine eine weitere. Ohne das
     wirken Überschriften auseinandergezogen und Kleinstschrift gedrängt. */
  --track-eng: -0.02em;
  --track-normal: 0;
  --track-weit: 0.02em;
  --track-versal: 0.08em;

  /* ---------- Abstände ----------
   *
   * Alles auf einem Vierer Raster. Ein Layout, in dem 13, 18 und 26 Pixel
   * nebeneinander stehen, hat keinen Rhythmus, und Rhythmus ist der halbe
   * Unterschied zwischen zusammengesetzt und entworfen.
   */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ---------- Ecken ---------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --radius: var(--r-md);

  /* ---------- Tiefe ----------
   *
   * Drei Stufen statt zufälliger Schatten. Im dunklen Modus kommt zu jedem
   * Schatten ein Lichtsaum an der Oberkante: dunkle Oberflächen erzeugen
   * Tiefe über Licht, nicht über Schatten, weil ein Schatten auf Schwarz
   * unsichtbar ist. Dieses Detail unterscheidet eine gebaute Oberfläche von
   * einer zusammengesetzten.
   */
  --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --schatten-2: 0 4px 16px -4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --schatten-3: 0 16px 40px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---------- Bewegung ----------
   *
   * Eine Kurve für alles. Sie startet schnell und läuft weich aus, wie eine
   * Bewegung mit Masse. Lineare Übergänge wirken maschinell.
   */
  --kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
  --schnell: 140ms;
  --normal: 220ms;

  --bar: 52px;
  --composer: 64px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/*
  Das Attribut hidden muss jede Anzeigeregel schlagen. Ohne diese Zeile
  gewinnt zum Beispiel .setup mit display flex gegen die Vorgabe des Browsers,
  weil Angaben aus dem eigenen Stylesheet immer vor denen des Browsers kommen.
  Folge wäre: das Onboarding bleibt nach dem Speichern sichtbar.
*/
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior-y: none;
}

body { padding-top: env(safe-area-inset-top); }

.screen { max-width: 620px; margin: 0 auto; }

/*
  Startbildschirm.

  Er liegt über allem und blendet sich selbst aus. Die Zeiten stehen auch in
  js/app.js, weil das Skript ihn aus dem Baum nimmt. Ändert man eine Zahl,
  gehört die andere mit geändert: 1300 ms stehen, 400 ms blenden.
*/
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  animation: splash-auf 420ms ease-out both;
}
.splash.geht { opacity: 0; transition: opacity 400ms ease; }
.splash-inner img { height: auto; max-width: 66vw; }
.splash-inner { animation: splash-hoch 620ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }

@keyframes splash-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-hoch {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .splash, .splash-inner { animation: none; }
}

/* Einkaufsliste */
.ek-stand {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); margin-bottom: 4px;
  border: 1px solid var(--border); color: var(--muted);
}
.ek-stand.gekauft { border-color: var(--good); color: var(--good); }
.ek-stand.zuhause { border-color: var(--accent); color: var(--accent); }
.list li.erledigt .li-title { text-decoration: line-through; opacity: 0.55; }
.list li.erledigt .li-sub { opacity: 0.55; }
.ek-knoepfe { display: flex; gap: 6px; }
.ek-knoepfe button { padding: 6px 10px; font-size: 12.5px; font-weight: 500; }

/* Mindeststandards */
.std-quote {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.std-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.std-bar i { display: block; height: 100%; background: var(--accent); }
.std-bar i.schwach { background: var(--warn); }
.std-bar i.rot { background: var(--bad); }
.std-zahl { font-size: 12px; color: var(--muted); min-width: 42px; text-align: right; }

/* Onboarding */
.setup { min-height: 100dvh; display: flex; align-items: stretch; padding: 0; }
.setup-inner { width: 100%; }

/*
  Der Anamnesebogen fuellt den Bildschirm. Kopf und Fuss stehen fest, nur die
  Mitte scrollt. So bleibt der Weiter Knopf auf dem Handy immer erreichbar,
  auch wenn die Tastatur offen ist.
*/
.setup-flow {
  width: 100%; min-height: 100dvh;
  display: flex; flex-direction: column;
}
.setup-head { padding: 18px 18px 0; }
.setup-fortschritt {
  height: 4px; border-radius: 2px; background: var(--border); overflow: hidden;
}
.setup-fortschritt i { display: block; height: 100%; background: var(--accent); transition: width 0.35s ease; }
.setup-zaehler { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.setup-body { flex: 1; overflow-y: auto; padding: 18px 18px 8px; -webkit-overflow-scrolling: touch; }
.setup-body h1 { font-size: 25px; }
.setup-lockup { margin: 0 0 20px; }
.setup-lockup img { height: auto; max-width: 58vw; }
.setup-fuss {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: var(--bg);
}
.setup-fuss .primary { margin-left: auto; min-width: 132px; }
.setup-hinweis { min-height: 20px; font-size: 13.5px; color: var(--warn); margin-top: 10px; }

/* Auswahlkarten, eine pro Zeile, damit der Text nie umbricht und ueberlappt. */
.opts { display: grid; gap: 9px; }
.opt {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  padding: 13px 15px; font-weight: 500;
}
.opt b { font-weight: 600; font-size: 15.5px; }
.opt span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.opt.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt.on span { color: var(--text); opacity: 0.75; }
.opt-zaehler { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* Freie Mehrfachauswahl, zum Beispiel Unvertraeglichkeiten. */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-pill); padding: 8px 14px; font-size: 14px; font-weight: 500;
}
.pill.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Körperfett schätzen. Vier Figuren, deshalb zwei mal zwei statt drei nebeneinander. */
.figuren { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.figur {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  padding: 12px 8px 10px;
}
/* Die Höhe führt, nicht die Breite. Sonst passt der Browser das Bild in eine
   Box, die breiter ist als nötig, und die Figur wird winzig in der Mitte. */
.figur-bild {
  height: 190px; width: auto; max-width: 100%; display: block; margin: 0 auto;
  opacity: 0.86; transition: opacity 160ms ease, transform 160ms ease;
}
.figur b { font-size: 15px; font-weight: 700; }
.figur span { font-size: 12px; color: var(--muted); line-height: 1.25; text-align: center; }
.figur.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.figur.on .figur-bild, .figur:hover .figur-bild { opacity: 1; }
.figur.on .figur-bild { transform: scale(1.03); }
.figur.on span { color: var(--text); }
.figur-hinweis {
  margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.45;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 11px 13px;
}

@media (min-width: 560px) {
  .figuren { grid-template-columns: repeat(4, 1fr); }
}
.brand-lockup { margin: 0 0 26px; }
.brand-lockup img { height: auto; max-width: 62vw; }
.head-mark { height: 17px; width: auto; margin-bottom: 9px; opacity: 0.95; }
h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -0.02em; }
.lead { color: var(--muted); margin: 0 0 22px; }

/* Formulare */
.field { margin-bottom: 14px; flex: 1; min-width: 0; }
.field-row { display: flex; gap: 12px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  appearance: none;
}
/* Kein Ziehgriff. Er sitzt an der abgerundeten Ecke und sieht dort aus wie
   ein Fehler. Die Zeilenzahl steht ohnehin am Element. */
textarea { resize: none; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

button {
  font: inherit; font-weight: 600; font-size: 16px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  padding: 12px 18px; cursor: pointer;
}
button.primary { background: var(--accent); color: var(--on-accent); }
button.ghost { background: transparent; border-color: var(--border); color: var(--text); }
button.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
button.big { width: 100%; margin-bottom: 12px; }
button:active { transform: scale(0.985); }
button:disabled { opacity: 0.5; }

.fineprint { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 10px 0 24px; }

/* App Layout */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 12px 0 18px; }
.page-head h1 { font-size: 24px; margin: 0; }
.sub { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.badge {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 13px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 26px 0 10px; }

/* Ring */
.ring-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; display: flex; gap: 18px; align-items: center;
}
.ring-wrap { position: relative; width: 132px; height: 132px; flex: 0 0 132px; }
.ring { width: 132px; height: 132px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
/* Die Spur nimmt dieselbe Farbe wie der Ring, nur gedimmt. So sieht der
   Kalorienring genauso aus wie der Ring im Logo. */
.ring-bg { stroke: var(--brand); stroke-opacity: 0.18; }
.ring-fg { stroke: var(--accent); stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 0.5s ease; }
.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.ring-num { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ring-label { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.ring-side { flex: 1; min-width: 0; }
.mini { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.mini:last-child { border-bottom: none; }
.mini-k { color: var(--muted); }
.mini-v { font-weight: 650; font-variant-numeric: tabular-nums; }

/* Balken */
.bars { margin-top: 16px; }
.bar-row { margin-bottom: 13px; }
.bar-head { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
.bar-head span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: 4px; background: #21262d; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--good); border-radius: 4px; transition: width 0.4s ease; }
.bar > i.warn { background: var(--warn); }
.bar > i.alt { background: var(--alt); }
.bar > i.water { background: var(--water); }
.bar > i.over { background: var(--bad); }

.quick { display: flex; gap: 9px; margin-top: 16px; }
.chip {
  flex: 1; background: var(--panel); border: 1px solid var(--border); color: var(--text);
  font-size: 14.5px; font-weight: 600; padding: 11px 6px;
}

/* Menuegruppen */
.menu-gruppe { margin-bottom: 9px; }
.menu-kopf {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 15px 16px; color: var(--text); text-align: left;
}
.menu-kopf b { font-size: 16px; font-weight: 650; }
.menu-kopf .chev-ab {
  display: block; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.menu-kopf[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.menu-kopf[aria-expanded="true"] .chev-ab { transform: rotate(-135deg) translate(-3px, -3px); }
.menu-unter { padding: 8px 0 2px 12px; }
.menu-unter .menu-item { margin-bottom: 7px; }
.menu-item.gross b { font-size: 17px; }
.menu-item.leise { margin-top: 6px; opacity: 0.85; }

/* Ringe und das Balance Board */
.seg {
  display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 4px; margin-bottom: 16px;
}
.seg-btn {
  flex: 1; background: transparent; border: 0; color: var(--muted);
  font-size: 14px; font-weight: 600; padding: 9px 4px; border-radius: var(--r-sm);
}
.seg-btn.is-on { background: var(--panel-2); color: var(--text); }

.ring-buehne {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; margin-bottom: 6px;
}
/* Ein leerer Platzhalter darf den Ring nicht aus der Mitte schieben. */
.ring-buehne > div:empty { display: none; }
.ring-stapel svg, .ring-tag svg { display: block; color: var(--text); }

/* Flex statt Grid, damit die zweite Reihe mittig steht statt links zu kleben.
   Fünf Kacheln auf drei Spalten sehen sonst aus wie ein Fehler. */
.ring-kacheln {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin: 14px 0 6px;
}
/* Feste Hoehe, weil "Familie und Beziehung" zweizeilig umbricht und die
   untere Reihe sonst hoeher steht als die obere. */
.ring-kachel {
  flex: 0 1 calc(33.333% - 7px); min-width: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 6px 10px; text-align: center; color: var(--text);
}
/* Nur wo eine Wertzeile steht, also auf dem Balance Board. Auf Heute gibt es
   keine, dort wuerde die feste Hoehe nur Leerraum erzeugen. */
.ring-kachel:has(.k-wert) { min-height: 158px; }
.ring-kachel svg { margin: 0 auto; }
.ring-kachel .k-name { font-size: 12.5px; font-weight: 600; margin-top: 7px; }
.ring-kachel .k-wert { font-size: 12px; color: var(--muted); margin-top: 2px; }

.ziel-zeile {
  display: flex; align-items: center; gap: 10px; margin-bottom: 9px;
}
.ziel-zeile span { flex: 1; font-size: 14.5px; }
.ziel-zeile input { width: 92px; }

/* Die Wertung, Kennzahlen oben, grosser Ring darunter */
.wertung {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 0 10px;
}
.metriken {
  display: flex; justify-content: center; gap: 26px; width: 100%;
  margin-bottom: 2px;
}
.metrik { text-align: center; color: var(--text); }
.metrik.klickbar { cursor: pointer; }
.metrik.klickbar:active { opacity: 0.6; }
.metrik-name { font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.metrik-zeile { display: flex; align-items: center; justify-content: center; gap: 5px; }
.metrik-zeile svg { display: block; }
.metrik-wert { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.metrik-pfeil {
  display: block; width: 9px; height: 9px;
  border-top: 1.6px solid var(--muted); border-right: 1.6px solid var(--muted);
}
.metrik-pfeil.hoch { transform: rotate(-45deg); border-color: var(--good); }
.metrik-pfeil.runter { transform: rotate(135deg); border-color: var(--warn); }
/*
 * Unverändert ist ein Strich, kein Pfeil.
 *
 * Um 45 Grad gedreht ergab die Pfeilform einen Winkel nach rechts, und der
 * liest sich als "hier tippen", nicht als "gleich geblieben". In einer Zeile
 * neben echten Richtungspfeilen sah das aus, als wären die Symbole zufällig
 * gewählt.
 */
.metrik-pfeil.gleich {
  width: 10px; height: 0; border-right: 0;
  border-top: 1.6px solid var(--muted); opacity: 0.55; transform: translateY(4px);
}
.wertung svg { color: var(--text); display: block; }
.wertung-satz {
  font-size: 13.5px; color: var(--muted); text-align: center;
  line-height: 1.5; margin: 2px 0 0; max-width: 34ch;
}

/* Listen */
/* Der Knopf fürs Kopf leeren. Text statt Symbol, weil ein Symbol dafür
   niemand versteht und die Funktion sonst unbenutzt bleibt. */
.icon-btn.dump {
  width: auto; flex: 0 0 auto; padding: 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--muted);
}
.icon-btn.dump[aria-pressed="true"] { color: var(--accent); }

.list { list-style: none; padding: 0; margin: 0; }
.list li {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 13px 14px; margin-bottom: 9px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.li-main { min-width: 0; }
.li-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.li-sub { font-size: 13px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.li-side { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.li-side b { display: block; color: var(--text); font-size: 15px; }
/* Die Einstufung unter einer Aufgabe ist ein Knopf, kein Text: ein Tipp
   schaltet sie weiter. Sie sieht trotzdem nicht wie ein Knopf aus, sonst
   wirkt jede Zeile wie eine Aufforderung. */
.stufe {
  background: none; border: none; padding: 3px 0 0; margin: 0;
  font-size: 13px; font-weight: 400; color: var(--muted); text-align: left;
  border-bottom: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent);
}
.stufe[data-stufe="3"] { color: var(--text); }

.empty { color: var(--muted); font-size: 14px; padding: 4px 2px 8px; }

/* Vorformatierter Text, etwa die Wochenuebersicht aus dem Kalender.
   Umbruch erlaubt, damit auf einem schmalen Telefon nichts seitlich rausläuft. */
.pre {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 13px 14px; margin: 0 0 9px;
  font-family: inherit; font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Composer */
.composer { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.composer textarea { background: var(--panel-2); }
/* Vier Knoepfe passen auf einem Telefon nicht in eine Zeile. Ohne Umbruch
   schiebt der letzte die ganze Seite nach rechts, und dann scrollt die App
   seitlich. Die Grundbreite von 0 laesst die Knoepfe schrumpfen, statt die
   Zeile zu sprengen. */
.composer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 11px; }
.composer-actions button { flex: 1 1 0; min-width: 84px; white-space: nowrap; }
.feedback {
  margin-top: 14px; padding: 13px 14px; border-radius: var(--r-md);
  background: rgba(76, 141, 255, 0.1); border: 1px solid rgba(76, 141, 255, 0.35);
  font-size: 14.5px; line-height: 1.55;
}
.feedback.err { background: rgba(248, 81, 73, 0.1); border-color: rgba(248, 81, 73, 0.4); }
.feedback.ok { background: rgba(63, 185, 80, 0.1); border-color: rgba(63, 185, 80, 0.4); }

.feelings { display: flex; gap: 9px; flex-wrap: wrap; }
.feelings button {
  flex: 1 1 auto; background: var(--panel); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; font-weight: 500; padding: 10px 12px;
}
.feelings button.on { border-color: var(--accent); color: var(--accent); }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px;
}
.card h3 { margin: 0 0 10px; font-size: 17px; }
.card ol, .card ul { margin: 10px 0 0; padding-left: 20px; }
.card li { margin-bottom: 6px; font-size: 14.5px; }
.kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.kv:last-child { border-bottom: none; }
.kv span { color: var(--muted); }
.kv b { font-variant-numeric: tabular-nums; }

/*
 * Der Hinweis sitzt am unteren Rand, nicht darüber.
 *
 * Der Abstand war fest auf die Höhe der Chateingabe gesetzt. Auf jeder anderen
 * Ansicht gibt es die nicht, und der Hinweis schwebte dort achtzig Pixel über
 * dem Rand, also mitten im Inhalt. Nur wenn der Assistent offen ist, weicht er
 * der Eingabe aus.
 */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  padding: 11px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500;
  z-index: 40; max-width: 90vw; text-align: center;
  box-shadow: var(--schatten-3);
}
body:has([data-view="assistant"]:not([hidden])) .toast {
  bottom: calc(var(--composer) + env(safe-area-inset-bottom) + 18px);
}

/*
  Die App ist dunkel gedacht. :root trägt deshalb die dunkle Palette.
  Der helle Satz gilt in zwei Fällen: wenn das System hell steht und keine
  ausdrückliche Wahl getroffen wurde, oder wenn data-theme auf light steht.
  Der letzte Fall ist nötig, weil manche Umgebungen das Thema am Wurzelelement
  stempeln statt über prefers-color-scheme zu melden.
*/
:root[data-theme="light"] {
    --bg: #f5f7fb; --panel: #ffffff; --panel-2: #edf1f7; --erhoben: #ffffff;
    --border: #dce3ed; --linie: rgba(20, 26, 36, 0.08);
    --text: #141a24; --muted: #5b6675;
    --accent: var(--brand-deep);
    --accent-text: var(--brand-text);
    --on-accent: #ffffff;
    --schatten-1: 0 1px 2px rgba(20, 26, 36, 0.06);
    --schatten-2: 0 4px 16px -6px rgba(20, 26, 36, 0.14);
    --schatten-3: 0 16px 40px -14px rgba(20, 26, 36, 0.2);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f7fb; --panel: #ffffff; --panel-2: #edf1f7; --erhoben: #ffffff;
    --border: #dce3ed; --linie: rgba(20, 26, 36, 0.08);
    --text: #141a24; --muted: #5b6675;
    --accent: var(--brand-deep);
    --accent-text: var(--brand-text);
    --on-accent: #ffffff;
    /* Auf hellem Grund trägt der Schatten die Tiefe, nicht das Licht. */
    --schatten-1: 0 1px 2px rgba(20, 26, 36, 0.06);
    --schatten-2: 0 4px 16px -6px rgba(20, 26, 36, 0.14);
    --schatten-3: 0 16px 40px -14px rgba(20, 26, 36, 0.2);
  }
}

:root[data-theme="light"] .ring-bg { stroke: var(--brand-deep); stroke-opacity: 0.25; }
:root[data-theme="light"] .bar { background: #e4e8ec; }
:root[data-theme="light"] .toast { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ring-bg { stroke: var(--brand-deep); stroke-opacity: 0.25; }
  :root:not([data-theme="dark"]) .bar { background: #e4e8ec; }
  :root:not([data-theme="dark"]) .toast { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14); }
}

/* Logo Umschaltung, dieselbe Logik wie bei den Farben. */
img.only-dark { display: block; }
img.only-light { display: none; }
:root[data-theme="light"] img.only-dark { display: none; }
:root[data-theme="light"] img.only-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) img.only-dark { display: none; }
  :root:not([data-theme="dark"]) img.only-light { display: block; }
}

.li-side button { padding: 7px 13px; font-size: 13.5px; font-weight: 500; }


/* ==========================================================================
   Assistent
   Der Kreis ist das Erste, was man sieht. Alles andere ordnet sich unter.
   ========================================================================== */

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

.view {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

/*
 * Die App steht auf einem Verlauf statt auf einer Fläche.
 *
 * Oben der dunkle Grundton der Marke, unten das Logoblau, stark abgedunkelt.
 * Der Verlauf endet nicht in einer fremden Farbe, sondern in der eigenen:
 * derselbe Ton, aus dem auch der Kreis leuchtet.
 *
 * Auf allen Ansichten derselbe Verlauf, damit die App nicht in eine schöne
 * Seite und mehrere graue zerfällt. Auf dem Assistenten liegt er kräftiger,
 * weil dort nichts anderes um Aufmerksamkeit konkurriert.
 */
.view {
  background:
    radial-gradient(115% 55% at 50% 112%, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--panel-2) 0%, var(--bg) 42%, color-mix(in srgb, var(--brand-deep) 11%, var(--bg)) 100%);
}
#assistant {
  background:
    radial-gradient(120% 62% at 50% 108%, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, var(--panel-2) 0%, var(--bg) 48%, color-mix(in srgb, var(--brand-deep) 22%, var(--bg)) 100%);
}

/* Der Verlauf gehört unter den ganzen Inhalt, nicht hinter jede Karte. */
.view > .scroll { background: none; }

.bar {
  flex: 0 0 auto; height: var(--bar);
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px;
}
.bar h1 { font-size: 17px; margin: 0; font-weight: 650; }
.bar-spacer { width: 40px; }
.bar-status {
  flex: 1; text-align: center; font-size: 12.5px; color: var(--muted);
  letter-spacing: 0.05em; text-transform: lowercase;
}

.icon-btn {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  background: none; border: none; padding: 0; color: var(--text);
}
.icon-btn .bars, .icon-btn .bars::before, .icon-btn .bars::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
}
.icon-btn .bars { position: relative; }
.icon-btn .bars::before, .icon-btn .bars::after { content: ""; position: absolute; left: 0; }
.icon-btn .bars::before { top: -6px; }
.icon-btn .bars::after { top: 6px; }
.icon-btn .close, .icon-btn .close::before {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transform: rotate(45deg);
}
.icon-btn .close::before { content: ""; transform: rotate(-90deg); }
.icon-btn .chev {
  display: block; width: 11px; height: 11px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-left: 4px;
}
.icon-btn .speaker {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor;
}
.icon-btn[aria-pressed="false"] { color: var(--muted); }
.icon-btn[aria-pressed="false"] .speaker { border-style: dashed; }

/* Bühne mit dem Kreis */
.stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 4px 20px 0;
  transition: flex-basis 0.35s ease;
}
#assistant.has-chat .stage { flex: 0 0 auto; padding: 8px 20px 2px; }

.orb {
  position: relative;
  width: min(68vw, 290px); aspect-ratio: 1;
  background: none; border: none; padding: 0;
  transition: width 0.35s ease;
  --glow: 0.25; --level: 0; --orb-scale: 1;
}
.orb-canvas { transform: scale(var(--orb-scale)); transform-origin: center; }
#assistant.has-chat .orb { width: min(34vw, 140px); }
.orb::after {
  content: ""; position: absolute; inset: -22%;
  transform: scale(var(--orb-scale));
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 45%, transparent) 0%, transparent 66%);
  opacity: calc(var(--glow) * 0.5);
  filter: blur(26px);
  transition: opacity 0.12s linear;
  pointer-events: none;
}
.orb-canvas {
  position: relative; display: block; width: 100%; height: 100%;
  filter:
    drop-shadow(0 0 calc(3px + var(--glow) * 7px) color-mix(in srgb, var(--brand) 85%, transparent))
    drop-shadow(0 0 calc(10px + var(--glow) * 22px) color-mix(in srgb, var(--brand) 45%, transparent));
}

.orb-hint { color: var(--muted); font-size: 13.5px; margin: 0; text-align: center; }
#assistant.has-chat .orb-hint { display: none; }

/*
 * Der Verlauf.
 *
 * Die Antwort steht ohne Blase da, als Text auf dem Grund. Eine Sprechblase um
 * zehn Zeilen Coaching macht daraus eine Chatnachricht, und eine Chatnachricht
 * liest man quer. Die eigene Nachricht behält eine Blase, damit man beim
 * Scrollen sofort sieht, wo man selbst gesprochen hat.
 */
.transcript {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 8px 16px 2px;
  display: flex; flex-direction: column; gap: 12px;
  -webkit-overflow-scrolling: touch;
}
#assistant:not(.has-chat) .transcript { flex: 0 0 auto; max-height: 34vh; }
.msg { overflow-wrap: anywhere; }
.msg.user { white-space: pre-wrap; }
.msg.user {
  align-self: flex-end; max-width: 84%;
  padding: 12px 16px; border-radius: var(--r-lg);
  font-size: 15.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--text);
}
.msg.assistant {
  align-self: stretch; max-width: 100%;
  padding: 2px 2px 10px;
  display: flex; flex-direction: column; gap: 9px;
  color: var(--text);
}
.msg-text {
  font-size: 16.5px; line-height: 1.62;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/*
 * Die Marke über der Antwort.
 *
 * Klein, in der Markenfarbe, mit demselben Schimmer wie der Kreis. Sie steht
 * auch über der Antwort, die noch entsteht, und pulsiert dann ruhig. Ein
 * Absender ohne Marke sieht aus wie ein Systemhinweis.
 */
.marke {
  width: 22px; height: auto; display: block; flex: 0 0 auto;
  color: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 55%, transparent));
}
.msg.pending .marke { animation: markePuls 1.6s ease-in-out infinite; }
@keyframes markePuls {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .msg.pending .marke { animation: none; opacity: 0.7; }
}
.msg.assistant + .msg.user { margin-top: 8px; }
.msg.pending .msg-text { color: var(--muted); font-style: italic; font-size: 15px; }
.msg-done { display: block; margin-top: 9px; font-size: 12px; color: var(--muted); }

.chips {
  flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto;
  padding: 8px 16px; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: 0 0 auto; background: var(--panel); border: 1px solid var(--border);
  color: var(--text); font-size: 13.5px; font-weight: 500; padding: 8px 14px; border-radius: var(--r-pill);
}
#assistant.has-chat .chips { display: none; }

/* Anhänge */
.anhang-leiste {
  flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 8px 12px 0;
}
.anhang-leiste::-webkit-scrollbar { display: none; }
.anhang {
  position: relative; flex: 0 0 auto; width: 64px; height: 64px;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--panel); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.anhang img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anhang .anhang-typ {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); text-align: center;
  padding: 0 4px; line-height: 1.2; overflow-wrap: anywhere;
}
.anhang.laedt::after {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45);
  backdrop-filter: blur(1px);
}
.anhang.fehler { border-color: var(--bad); }
.anhang-weg {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0;
  border-radius: 50%; border: none; background: rgba(0,0,0,0.62); color: #fff;
  font-size: 14px; line-height: 20px; font-weight: 700;
}

.icon-btn.clip { border-radius: 50%; background: none; border: none; }
/* Büroklammer aus zwei Bögen. Eine Grafik dafür zu laden wäre Verschwendung. */
.icon-btn.clip .clip-icon {
  display: block; width: 9px; height: 17px;
  border: 2px solid currentColor; border-radius: 9px;
  transform: rotate(35deg);
}
.icon-btn.clip .clip-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 2px; height: 8px; background: currentColor; border-radius: 1px;
  transform: translate(-1px, -8px);
}
.icon-btn.clip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.anhang-menue {
  position: absolute; left: 12px; right: 12px;
  bottom: calc(var(--composer) + env(safe-area-inset-bottom) + 10px);
  z-index: 30; display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.anhang-menue button { width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }

/* Bilder in einer Nachricht */
.msg-bilder { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.msg-bilder img {
  width: 108px; height: 108px; object-fit: cover; border-radius: var(--r-sm); display: block;
  border: 1px solid var(--border);
}
.msg-dateien { font-size: 12.5px; opacity: 0.75; margin-bottom: 4px; }

/*
 * Die Eingabe ist eine Pille, keine Zeile mit Knöpfen daneben.
 *
 * Alles sitzt in einem Element: Mikrofon, Klammer, Kopf, Feld und Pfeil. Das
 * spart eine Trennlinie über die ganze Breite und lässt den Verlauf bis nach
 * unten durchlaufen, statt ihn abzuschneiden.
 */
.composer-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2px;
  margin: 6px 12px calc(10px + env(safe-area-inset-bottom));
  padding: 5px 6px 5px 8px;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: blur(14px);
}
.composer-bar input {
  flex: 1; min-width: 0;
  border: none; background: none; border-radius: 0;
  padding: 11px 8px; font-size: 15.5px;
}
.composer-bar input:focus { outline: none; box-shadow: none; }
.icon-btn.mic, .icon-btn.send { border-radius: 50%; background: none; border: none; }
.icon-btn.send { width: 34px; height: 34px; }
.icon-btn.clip .clip-icon { position: relative; }
.icon-btn.mic .mic-dot {
  display: block; position: relative;
  width: 11px; height: 15px; border-radius: 6px; background: currentColor;
}
.icon-btn.mic .mic-dot::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  width: 17px; height: 8px;
  border: 2px solid currentColor; border-top: none;
  border-radius: 0 0 10px 10px;
}
.icon-btn.mic[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.icon-btn.send { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.icon-btn.send .arrow {
  display: block; width: 10px; height: 10px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(-45deg); margin-left: -3px;
}

/* Bereiche mit eigenem Scrollbereich */
.scroll > .sub:first-child { margin: 4px 0 18px; }
/* Ein Absatz direkt vor einem Feld braucht Luft, sonst klebt die Beschriftung
   des Feldes am letzten Satz und liest sich wie seine Fortsetzung. */
.sub + .field, .sub + .field-row { margin-top: 14px; }
.scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px calc(28px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }

/* Menue */
.menu {
  position: absolute; inset: 0; z-index: 30;
  background: var(--bg);
  padding: env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 9px;
  overflow-y: auto;
}
.menu-head { display: flex; align-items: center; justify-content: space-between; height: var(--bar); margin-bottom: 8px; }
.menu-head img { height: 17px; width: auto; }
.menu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-md); padding: 15px 16px; text-align: left; width: 100%;
}
.menu-item b { font-size: 16.5px; font-weight: 650; }
.menu-item span { font-size: 13px; color: var(--muted); font-weight: 400; }

.switch { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; font-size: 15px; }
.switch input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--accent); }

.reco { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; margin-bottom: 11px; }
.reco h3 { margin: 0 0 6px; font-size: 16px; }
.reco p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; }
.reco .grund { font-size: 12.5px; color: var(--muted); }

.mem-kind {
  display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px 8px; margin-bottom: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .orb, .stage, .orb::after { transition: none; }
}

/* Barcode. Das Videobild bleibt flach, damit die Seite nicht springt, wenn die
   Kamera erst nach einer halben Sekunde ein Bild liefert. */
.scan {
  margin: 10px 0 4px; padding: 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 10px;
}
.scan video {
  width: 100%; height: 190px; object-fit: cover;
  background: #000; border-radius: var(--r-md);
}
.scan-hinweis { font-size: 13.5px; color: var(--muted); }
.scan-eingabe { display: flex; gap: 8px; }
.scan-eingabe input { flex: 1; min-width: 0; }

/* Zeiten je Wochentag. Drei Spalten mit fester Tagesspalte, damit die
   Zeitfelder untereinander stehen und die Zeile nicht springt, sobald ein
   Wochentagskürzel zwei statt drei Zeichen hat. */
.wochenkopf, .wochenzeile {
  display: grid; grid-template-columns: 34px 1fr 1fr; gap: 8px; align-items: center;
}
.wochenkopf { margin-bottom: 6px; }
.wochenkopf span { font-size: 12px; color: var(--muted); text-align: center; }
.wochenzeiten { display: flex; flex-direction: column; gap: 7px; }
.wochenzeile .wt-tag { font-size: 13.5px; font-weight: 600; color: var(--text); }
.wochenzeile input { width: 100%; min-width: 0; }
.feld-hilfe { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 9px 0 0; }

.tempo-marken {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted); margin-top: 3px;
}

/* Wochen Check-in. Die Fragen stehen einzeln, mit Luft dazwischen: ein Bogen
   aus achtzehn eng gesetzten Fragen wird durchgeklickt, nicht beantwortet. */
.wc-wahl { display: flex; gap: 8px; margin-bottom: 14px; }
.wc-wahl button { flex: 1; }
.wc-frage {
  padding: 15px 14px; margin-bottom: 11px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.wc-frage > label, .wc-frage > .wc-text {
  display: block; font-size: 15.5px; font-weight: 600; line-height: 1.4; margin-bottom: 3px;
}
.wc-frage .wc-hinweis { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; line-height: 1.45; }
.wc-frage.pflicht > .wc-text::after { content: " *"; color: var(--accent); }
.wc-frage input[type="text"], .wc-frage textarea, .wc-frage select { width: 100%; margin-top: 8px; }
.wc-skala { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.wc-skala input[type="range"] { flex: 1; min-width: 0; }
.wc-skala .wc-wert {
  min-width: 46px; text-align: center; font-size: 16px; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.wc-enden { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 2px; }
.wc-dauer { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.wc-dauer input { width: 74px; }
.wc-dauer span { font-size: 13.5px; color: var(--muted); }
.wc-aktionen { margin: 6px 0 18px; }
.wc-aktionen button { width: 100%; }

/* Schieberegler. Ohne eigene Formatierung zeichnen die Browser eine Spur in
   Systemfarbe, die auf dem dunklen Panel praktisch verschwindet: sichtbar
   bleibt nur der Punkt, und ein Punkt ohne Schiene sieht nicht aus, als
   liesse er sich ziehen. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: transparent; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fuellung, 50%),
    rgba(255, 255, 255, 0.14) var(--fuellung, 50%), rgba(255, 255, 255, 0.14) 100%);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.14);
}
input[type="range"]::-moz-range-progress {
  height: 6px; border-radius: var(--r-pill); background: var(--accent);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9px;
  border-radius: 50%; background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
}
/* Solange nichts gewaehlt wurde, ist die Spur durchgehend grau und der Griff
   ohne Farbe. Sonst sieht ein Regler in der Mitte aus wie eine Antwort. */
.wc-skala.offen input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.14);
}
.wc-skala.offen input[type="range"]::-webkit-slider-thumb { border-color: rgba(255, 255, 255, 0.3); }
.wc-skala.offen .wc-wert { color: var(--muted); }

/* Gespräche. Die Liste ist nach Ordnern gruppiert, aber flach gehalten: eine
   zweite Klickebene für sechs Ordner mit je zwei Gesprächen kostet mehr Wege,
   als sie spart. */
.suchzeile { margin-bottom: 12px; }
.suchzeile input { width: 100%; }
.gs-ordner { margin: 18px 0 9px; display: flex; align-items: center; gap: 8px; }
.gs-ordner .punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.gs-ordner b { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.gs-ordner .anzahl { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.gs-eintrag {
  display: flex; align-items: flex-start; gap: 11px;
  width: 100%; text-align: left; padding: 13px 14px; margin-bottom: 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--text);
}
.gs-eintrag.on { border-color: var(--accent); }
.gs-eintrag .gs-text { flex: 1; min-width: 0; }
.gs-eintrag b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.gs-eintrag .gs-meta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.gs-eintrag .gs-stelle {
  display: block; font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.45;
}
.gs-eintrag .gs-weg {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: transparent; border: 0; color: var(--muted); font-size: 17px; line-height: 1;
}
.gs-leer { color: var(--muted); font-size: 14.5px; line-height: 1.6; padding: 22px 2px; }
.icon-btn .stapel, .icon-btn .plus { display: block; width: 20px; height: 20px; position: relative; }
.icon-btn .stapel::before, .icon-btn .stapel::after {
  content: ""; position: absolute; left: 2px; right: 2px; height: 2px; border-radius: 2px;
  background: currentColor;
}
.icon-btn .stapel::before { top: 5px; box-shadow: 0 5px 0 currentColor; }
.icon-btn .stapel::after { top: 15px; }
.icon-btn .plus::before, .icon-btn .plus::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
}
.icon-btn .plus::before { left: 9px; top: 2px; width: 2px; height: 16px; }
.icon-btn .plus::after { top: 9px; left: 2px; height: 2px; width: 16px; }

/* ---------- Struktur in langen Ansichten ---------- */

/*
 * Zwei Ebenen von Überschriften, die man auf einen Blick auseinanderhält.
 *
 * `.section-title` war beides zugleich: klein, grau, versal. In einer Ansicht
 * mit acht davon sieht jede aus wie die nächste, und der Nutzer muss lesen,
 * statt zu sehen. `.abschnitt` ist jetzt die obere Ebene: gross, in Textfarbe,
 * mit einer Linie darüber. Die Linie trennt stärker als jeder Abstand.
 */
.abschnitt {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
  color: var(--text); margin: 34px 0 14px; padding-top: 22px;
  border-top: 1px solid var(--border);
}
/* Die erste Überschrift einer Ansicht braucht keine Trennlinie nach oben. */
.scroll > .abschnitt:first-child { margin-top: 6px; padding-top: 0; border-top: 0; }

/* Ein Knopf, der einen Abschnitt abschliesst, steht auf voller Breite. Ein
   halbbreiter Knopf mitten im Formular sieht aus, als gehörte er zum Feld
   daneben. */
.breit { width: 100%; margin-bottom: 4px; }

/* Feldzeilen brechen um. Ohne das quetscht ein drittes Feld die beiden anderen
   zusammen, statt in die nächste Zeile zu rutschen. */
.field-row { flex-wrap: wrap; }
.field-row > .field { flex: 1 1 140px; }

/* Mehr Luft zwischen den Feldern. Ein Formular mit vierzehn Zeilen auf einem
   Telefon liest sich nur mit Abstand. */
.field { margin-bottom: 18px; }
label { font-size: 13.5px; margin-bottom: 7px; }

/* ============================================================
   Feinschliff. Steht am Ende, damit es die gewachsenen Regeln
   darüber überschreibt, ohne dass jede einzelne angefasst wird.
   ============================================================ */

/*
 * Zahlen laufen tabellarisch.
 *
 * In der Standardeinstellung ist eine 1 schmaler als eine 8. Eine Liste mit
 * 1900, 2884 und 138 zappelt dadurch, und ein Zähler, der von 9 auf 10
 * springt, verschiebt alles daneben. Tabellarische Ziffern sind gleich breit.
 * Das ist die unauffälligste Verbesserung mit der grössten Wirkung.
 */
body { font-variant-numeric: tabular-nums; }

/*
 * Überschriften.
 *
 * Grosse Schrift bekommt engere Laufweite und mehr Fettung, kleine bleibt
 * offen. Ohne das wirkt eine 30 Pixel Zeile auseinandergezogen und eine 12
 * Pixel Zeile gedrängt, egal wie gut die Schrift ist.
 */
h1 { font-size: var(--t-lg); font-weight: 650; letter-spacing: var(--track-eng); }
.abschnitt {
  font-size: var(--t-xl); font-weight: 680; letter-spacing: var(--track-eng);
  line-height: 1.2; color: var(--text);
  margin: var(--s-10) 0 var(--s-4); padding-top: var(--s-6);
  border-top: 1px solid var(--linie);
}
.scroll > .abschnitt:first-child { margin-top: var(--s-2); padding-top: 0; border-top: 0; }
.section-title {
  font-size: var(--t-xs); font-weight: 620; text-transform: uppercase;
  letter-spacing: var(--track-versal); color: var(--muted);
  margin: var(--s-6) 0 var(--s-3);
}
.sub { font-size: var(--t-md); line-height: 1.6; color: var(--muted); }

/*
 * Eingaben.
 *
 * Sechzehn Pixel sind Pflicht, darunter zoomt iOS beim Antippen in das Feld
 * hinein. Der Rahmen ist eine Linie und kein Kasten: eine Fläche mit eigenem
 * Hintergrund neben einer Fläche mit eigenem Hintergrund erzeugt genau den
 * Baukasteneindruck, den niemand will.
 */
input, select, textarea {
  font-size: var(--t-lg);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  transition: border-color var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
label { font-size: var(--t-sm); font-weight: 550; color: var(--muted); letter-spacing: var(--track-weit); }

/*
 * Knöpfe.
 *
 * Ein Knopf, der beim Tippen nichts tut, fühlt sich tot an. Achtundneunzig
 * Prozent Grösse für hundertvierzig Millisekunden ist zu wenig, um es bewusst
 * zu sehen, und genug, um es zu spüren.
 */
button {
  font-size: var(--t-md); font-weight: 620; letter-spacing: var(--track-weit);
  border-radius: var(--r-sm);
  transition: transform var(--schnell) var(--kurve), background var(--schnell) var(--kurve),
              border-color var(--schnell) var(--kurve), opacity var(--schnell) var(--kurve);
}
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.45; transform: none; }
.primary { box-shadow: var(--schatten-1); }

/*
 * Karten und Listen.
 *
 * Vorher hatte fast jedes Element seinen eigenen Kasten mit Rahmen. Zwanzig
 * gerahmte Flächen untereinander lesen sich als Liste von Behältern, nicht als
 * Inhalt. Die Karte bleibt, wird aber ruhiger: weicher Rahmen, eine Stufe
 * Tiefe, mehr Innenabstand.
 */
.card, .list > li, .ring-card {
  border-color: var(--linie);
  box-shadow: var(--schatten-1);
}
.card { padding: var(--s-5); border-radius: var(--r-lg); }

/* Die Kennzahl Zeilen in einer Karte werden durch Linien gegliedert, nicht
   durch Abstand. Das ist dichter und ruhiger zugleich. */
.kv { border-color: var(--linie); }

/* Pillen und Kacheln bekommen dieselbe Reaktion wie Knöpfe. */
.pill, .opt, .menu-item, .gs-eintrag, .wc-frage { transition: all var(--schnell) var(--kurve); }
.pill:active, .opt:active, .menu-item:active { transform: scale(0.98); }

/*
 * Der Rahmen um ein aktives Element ist zwei Pixel breit und liegt innen.
 * Ein einzelner Pixel verschwindet auf einem Telefon, und ein Rahmen, der die
 * Grösse des Elements ändert, lässt das Layout springen.
 */
.pill.on, .opt.on, .gs-eintrag.on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Bereichsüberschrift in der Kopfzeile: dieselbe Behandlung wie eine
   Überschrift, nur kleiner. Vorher war sie fett und eng wie ein Titel. */
.bar h1 { font-size: var(--t-lg); }

/* Kleinstschrift bleibt lesbar. 11 Pixel ohne weitere Laufweite verschmiert
   auf einem hochauflösenden Display zu einer grauen Linie. */
.fineprint, .meta, .feld-hilfe, .gs-meta {
  font-size: var(--t-xs); letter-spacing: var(--track-weit); line-height: 1.55;
}

/*
 * Die Ringkacheln stehen ohne Kasten.
 *
 * Fünf gerahmte Flächen mit je einem Kreis darin lesen sich als Tabelle von
 * Behältern. Der Ring ist die Form, er braucht keinen zweiten Rahmen um sich.
 * Was die Kachel zusammenhält, ist der Abstand zu ihren Nachbarn, nicht eine
 * Linie.
 */
.ring-kachel {
  background: transparent; border: 0; box-shadow: none;
  padding: var(--s-3) var(--s-1) var(--s-2);
}
.ring-kachel:has(.k-wert) { min-height: 150px; }
/* Hierarchie in der Kachel: der Name führt, der Wert stützt. Vorher waren
   beide fett, dadurch trug keiner. */
.ring-kachel .k-name {
  font-size: var(--t-sm); font-weight: 600; color: var(--text);
  margin-top: var(--s-2); letter-spacing: var(--track-normal);
}
.ring-kachel .k-wert {
  font-size: var(--t-xs); font-weight: 500; color: var(--muted); margin-top: 2px;
}
.ring-kacheln { gap: var(--s-2) var(--s-1); margin: var(--s-4) 0 var(--s-2); }

/* Die Kennzahlzeile über dem grossen Ring bekommt Luft und eine ruhige
   Beschriftung. Vorher standen vier fette Wörter dicht an dicht. */
#tagMetriken { gap: var(--s-2); }
#tagMetriken .m-name {
  font-size: var(--t-xs); font-weight: 550; color: var(--muted);
  letter-spacing: var(--track-weit);
}

/*
 * Eine gewählte Pille wird getönt, nicht gefüllt.
 *
 * Vollflächig in der Akzentfarbe hat sie dasselbe Gewicht wie der Knopf, der
 * die Aktion auslöst. Wenn vier Pillen und ein Knopf gleich laut sind, führt
 * keiner. Die Tönung reicht völlig, um "ausgewählt" zu zeigen, und lässt die
 * Hauptaktion die Hauptaktion sein.
 */
.pill.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 620;
}

/* Eine Beschriftung über einer Gruppe von Pillen. Sie gehört zur Gruppe wie
   ein Label zu einem Eingabefeld, ist aber keins, deshalb eine eigene Klasse. */
.feld-label {
  display: block; font-size: var(--t-sm); font-weight: 550;
  color: var(--muted); letter-spacing: var(--track-weit); margin-bottom: var(--s-2);
}

/*
 * Antworten mit Zeilenumbrüchen behalten sie.
 *
 * Der Coach liefert Aufzählungen mit echten Zeilenumbrüchen. Ohne diese Regel
 * fasst HTML alles zu einem Absatz zusammen, und aus einer Aufteilung auf drei
 * Mahlzeiten wird eine Textwand, die niemand liest. Der Umbruch ist hier die
 * Information.
 */
.feedback { white-space: pre-line; }

/* Luft zwischen den Gruppen im Bereich "Rest des Tages". Eine Beschriftung,
   die am Element darüber klebt, wirkt wie dessen Fussnote statt wie die
   Überschrift dessen, was folgt. */
#restSatz { margin-bottom: var(--s-5); }
.feld-label { margin-top: var(--s-5); }
.feld-label:first-of-type { margin-top: 0; }
#restMahlzeiten { margin-bottom: var(--s-5); }
#btnRestPlanen { margin-top: var(--s-2); }

/*
 * Das Coaching Angebot.
 *
 * Es steht am Ende einer Ansicht, nicht darüber, und sieht bewusst anders aus
 * als der Rest: ein Angebot, das wie ein Bedienelement aussieht, wird
 * versehentlich angetippt, und ein versehentlicher Klick auf einen
 * Buchungslink ärgert beide Seiten.
 */
.angebot {
  margin: var(--s-8) 0 var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.angebot-teil {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.angebot-teil b { display: block; font-size: var(--t-lg); font-weight: 650; letter-spacing: var(--track-eng); }
.angebot-teil span {
  display: block; font-size: var(--t-md); color: var(--muted);
  line-height: 1.55; margin: var(--s-2) 0 var(--s-4);
}
.angebot-knopf {
  display: block; text-align: center; text-decoration: none;
  padding: 13px 16px; border-radius: var(--r-sm);
  font-size: var(--t-md); font-weight: 620;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
}
.angebot-knopf.primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}

/* Eine Vorlage in der Verwaltung. Drei Felder, die zusammengehören, deshalb
   ein gemeinsamer Rahmen statt drei einzelner Zeilen. */
.plan-zeile {
  padding: var(--s-4); margin-bottom: var(--s-3);
  background: var(--panel); border: 1px solid var(--linie); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.plan-zeile-unten { display: flex; align-items: center; gap: var(--s-2); }
.plan-zeile-unten input { width: 72px; }
.plan-zeile-unten span { font-size: var(--t-sm); color: var(--muted); flex: 1; }

.angebot-grund {
  display: block; font-size: var(--t-sm); color: var(--accent-text);
  line-height: 1.5; margin-bottom: var(--s-4);
}
.angebot-mail {
  display: block; text-align: center; margin-top: var(--s-3);
  font-size: var(--t-sm); color: var(--muted); text-decoration: none;
}
.plan-zeile .switch { margin: var(--s-1) 0 0; font-size: var(--t-sm); }
.plan-zeile-unten select { flex: 1; min-width: 0; }