/* ═══════════════════════════════════════════════════════════
   Tiefenjournal

   Getrennte Seiten: immer nur eine sichtbar, jede mit eigenem Scroll. Eine
   durchgehende lange Bahn hatte alles gleichzeitig offen — das war zu viel auf
   einmal. Innerhalb einer Seite bleibt es flach: keine Modale, keine Unterseiten.

   Farbe: ungefähr 60 % Grundfläche in gebrochenem Weiß mit einem Hauch Creme —
   nur so viel, dass es nicht klinisch wirkt. Darauf zwei Akzente mit Bedeutung:
   weiches Blau für alles, was du tust (Eingabe, Auswahl, Navigation), gedämpftes
   Grün für alles, was wächst (Bereiche, Ressourcen, Bewegung).

   Bewusst einfarbig hell — ein Journal soll wie Papier wirken.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Grundfläche: gebrochenes Weiß, kaum wahrnehmbar warm */
  --paper:   #f7f3e8;
  --raised:  #fffdf6;
  --sunken:  #ebe5d6;
  --line:    #e3dccb;
  --line-hi: #ccc4ae;

  /* Tinte mit leichtem Blaustich statt neutralem Grau */
  --ink:      #23282c;
  --ink-soft: #565f66;
  --ink-faint:#868d92;

  /* Weiches Blau — Handlung */
  --blue:      #5b8aa6;
  --blue-deep: #3f6b86;
  --blue-soft: #e5eef2;
  --blue-line: #b9d0dc;

  /* Gedämpftes Grün — Wachstum */
  --green:      #6d9077;
  --green-deep: #4f7359;
  --green-soft: #e7eee8;
  --green-line: #bdd2c2;

  --accent:     var(--blue-deep);
  --accent-soft:var(--blue-soft);
  --accent-ink: #fffdf6;

  --warm:  #b08356;
  --warm-deep: #7d5a33;
  --warm-soft: #f6efe3;
  --alert: #a3615a;

  --r:      14px;
  --r-sm:   10px;
  --r-tile: 15px;
  --r-bubble: var(--r);

  /* Gelb-orange Leuchten um alles, was man im Rundgang drücken kann */
  --flare-y: #f7c234;
  --flare-o: #f0801f;

  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --tiles-h: 72px;
  --topbar-h: 34px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .8, .3, 1);

  color-scheme: light;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
p { margin: 0; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; border-radius: 6px; }

.muted { color: var(--ink-faint); }
.lede  { font-size: 1.04rem; color: var(--ink-soft); }

/* ─────────── Sprachwahl: die erste Seite ─────────── */

.welcome {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--paper);
  padding: 28px 20px;
  overflow-y: auto;
}
.welcome__inner {
  width: 100%; max-width: 380px;
  display: grid; gap: 14px; justify-items: center; text-align: center;
}

/* Zwei Farbfelder, die ineinanderlaufen — Blau und Grün, wie im Rest der App */
.welcome__mark {
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(145deg, var(--blue), var(--green));
  margin-bottom: 4px;
}
.welcome__title { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; }

.welcome__line {
  font-family: var(--serif); font-size: .98rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 32ch;
}
.welcome__line[lang="en"] { color: var(--ink-faint); font-size: .92rem; }

.welcome__ask {
  margin-top: 10px;
  font-size: .69rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}

.welcome__choices { display: grid; gap: 10px; width: 100%; }
.welcome__btn {
  display: grid; gap: 3px; justify-items: start; text-align: left;
  width: 100%; padding: 15px 17px;
  border: 1px solid var(--line-hi); border-radius: var(--r);
  background: var(--raised); color: var(--ink);
  font: inherit; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .08s var(--ease);
}
.welcome__btn b { font-size: 1.06rem; font-weight: 650; }
.welcome__btn span { font-size: .82rem; color: var(--ink-faint); line-height: 1.45; }
.welcome__btn:hover { border-color: var(--blue); background: var(--blue-soft); }
.welcome__btn:active { transform: scale(.985); }
#pick-en:hover { border-color: var(--green); background: var(--green-soft); }

.welcome__foot {
  margin-top: 6px; display: grid; gap: 2px;
  font-size: .76rem; color: var(--ink-faint); line-height: 1.45;
}

/* Solange gewählt wird, bleibt der Rest der App weg. */
body.is-choosing .topbar,
body.is-choosing .pages,
body.is-choosing .tiles { display: none; }

/* ─────────── Einführung ───────────
   Die allererste Fläche. Sie darf lang sein — sie erklärt etwas, das man
   sonst erst nach einer Woche versteht — muss aber auf einem Telefon lesbar
   bleiben: eine Spalte, großzügige Zeilenhöhe, nichts nebeneinander. */

.intro-screen {
  position: fixed; inset: 0; z-index: 92;
  background: var(--paper);
  padding: 22px 18px calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.intro-screen__inner {
  width: 100%; max-width: 480px; margin: 0 auto;
  display: grid; gap: 13px; justify-items: start;
}
.intro-screen .welcome__mark { margin-top: 4px; }

.intro-screen__lang {
  justify-self: end;
  display: inline-flex;
  border: 1px solid var(--line-hi); border-radius: 999px; overflow: hidden;
}
.intro-screen__l {
  min-height: 32px; padding: 6px 13px;
  border: 0; background: var(--raised); color: var(--ink-faint);
  font: inherit; font-size: .77rem; cursor: pointer;
}
.intro-screen__l + .intro-screen__l { border-left: 1px solid var(--line-hi); }
.intro-screen__l.on { background: var(--blue-deep); color: var(--accent-ink); font-weight: 650; }

.intro-screen__title {
  font-family: var(--serif); font-size: 1.62rem; font-weight: 600; letter-spacing: -.02em;
}
.intro-screen__tag {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.5; color: var(--ink-soft);
  text-wrap: balance;
}

/* Nummeriert, weil es eine Reihenfolge ist: aus dem Gesprochenen wird
   Benanntes, daraus das Gespräch, daraus die Baustellen. */
.intro-steps {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; gap: 15px; width: 100%;
}
.intro-step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 15px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
}
.intro-step__n {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sunken); color: var(--ink-faint);
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.intro-step h2 { font-size: .99rem; font-weight: 650; line-height: 1.32; margin-bottom: 4px; }
.intro-step p { font-size: .87rem; line-height: 1.62; color: var(--ink-soft); }

/* Das Gespräch ist der Kern, also trägt es Farbe. */
.intro-step--key { border-color: var(--blue-line); background: var(--blue-soft); }
.intro-step--key .intro-step__n { background: var(--blue-deep); color: var(--accent-ink); }
.intro-step__flag {
  display: inline-block; margin-bottom: 5px;
  font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue-deep);
}

.intro-screen__foot {
  margin-top: 4px; font-size: .82rem; line-height: 1.6; color: var(--ink-faint);
}
.intro-screen__go { width: 100%; margin-top: 6px; }

/* Die Sprache des Browsers steht auf der Wahlseite vorn. */
.welcome__btn.is-suggested { border-color: var(--blue); }

/* ─────────── Getrennte Seiten ───────────
   Immer nur eine Seite sichtbar, jede mit eigenem Scroll. Kopf und Fußleiste
   stehen fest; nur der Mittelteil bewegt sich. So bleibt der Blick auf einer
   Sache, statt über eine sehr lange Bahn zu wandern. */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: var(--topbar-h);
  padding-inline: 16px;
  background: var(--paper);
}
.topbar__date {
  font-size: .67rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}

.pages {
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  bottom: calc(var(--tiles-h) + var(--safe-b));
}

.page {
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}
.page.is-active { display: grid; }

.page__head {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.page__head h1 { font-size: 1.24rem; }
.page__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-hi); flex: none; }
.page__dot--blue  { background: var(--blue); }
.page__dot--green { background: var(--green); }
.page__action { margin-left: auto; }

.page__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 22px;
}
.page__lede { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 14px; }

.page__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--raised);
}
.page__foot--chat { align-items: flex-end; }

/* ─────────── Bausteine ─────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 10px 17px;
  border: 1px solid var(--line-hi); border-radius: var(--r-sm);
  background: var(--raised); color: var(--ink);
  font: inherit; font-size: .91rem; font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: transform .08s var(--ease), background .15s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--primary { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--accent-ink); }
.btn--green { background: var(--green-deep); border-color: var(--green-deep); color: var(--accent-ink); }
.btn--tiny { min-height: 36px; padding: 7px 12px; font-size: .81rem; }
.btn--icon { padding: 10px; min-width: 44px; }
.btn--danger { color: var(--alert); border-color: var(--alert); }
.btn--ghost { background: transparent; border-style: dashed; color: var(--ink-soft); }

.chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 999px;
  background: var(--green-soft); color: var(--green-deep);
  font-size: .75rem; font-weight: 650; white-space: nowrap;
}

.field {
  width: 100%; padding: 12px 13px;
  border: 1px solid var(--line-hi); border-radius: var(--r-sm);
  background: var(--raised); color: var(--ink);
  font: inherit; font-size: 1rem; line-height: 1.6; resize: vertical;
}
.field:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.field--serif { font-family: var(--serif); font-size: 1.05rem; line-height: 1.66; }
.field::placeholder { color: var(--ink-faint); }

.card {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px; margin-bottom: 12px;
}
.card__head { margin-bottom: 12px; }
.card__head h3 { font-size: 1rem; }
.card__sub { font-size: .82rem; color: var(--ink-faint); margin-top: 2px; }

.card--fold { padding: 0; }
.card--fold > summary {
  display: flex; align-items: baseline; gap: 10px;
  padding: 16px; cursor: pointer; list-style: none; min-height: 52px;
}
.card--fold > summary::-webkit-details-marker { display: none; }
.card--fold > summary::after { content: "+"; margin-left: auto; color: var(--ink-faint); font-size: 1.3rem; }
.card--fold[open] > summary::after { content: "−"; }
.card--fold .sub { font-size: .82rem; color: var(--ink-faint); }
.fold__body { padding: 0 16px 16px; }

.footnote {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--ink-faint); line-height: 1.5;
}

.affirm {
  display: flex; gap: 10px; align-items: stretch;
  margin-bottom: 14px;
  font-family: var(--serif); font-size: 1rem; line-height: 1.55; color: var(--ink-soft);
}
.affirm::before {
  content: ""; flex: none; width: 3px; border-radius: 2px; background: var(--green); opacity: .6;
}

/* ─────────── Gefühlspalette ─────────── */

.searchbox { position: relative; margin-bottom: 10px; }
.searchbox svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-faint);
}
.searchbox input {
  width: 100%; min-height: 44px; padding: 10px 12px 10px 36px;
  border: 1px solid var(--line-hi); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem;
}
.searchbox input:focus { outline: none; border-color: var(--blue); }

.palette__target { font-size: .8rem; color: var(--ink-faint); margin-bottom: 10px; }
.palette__target b { color: var(--blue-deep); font-weight: 650; }

.palette { max-height: 42dvh; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; }

.fam { margin-bottom: 2px; }
.fam__head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 40px; padding: 8px 4px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font: inherit; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
.fam__dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--h) 30% 55%); flex: none; }
.fam__n { margin-left: auto; opacity: .65; font-weight: 500; font-variant-numeric: tabular-nums; }
.fam__body { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 4px 12px; }
.fam.is-shut .fam__body { display: none; }

/* Die Familienfarben laufen gedämpft mit — Sättigung runter, damit das
   Blau-Grün-Gerüst trägt und die Palette nicht bunt wird. */
.emo {
  min-height: 38px; padding: 8px 14px;
  border: 1px solid hsl(var(--h) 22% 62% / .5); border-radius: 999px;
  background: hsl(var(--h) 26% 62% / .13);
  color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer;
  transition: transform .08s var(--ease);
}
.emo:active { transform: scale(.94); }
.emo.is-used { opacity: .35; }
.emo.is-used::after { content: " ✓"; }

/* ─────────── Sätze ─────────── */

.slots { display: grid; gap: 10px; }
.slot { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: var(--paper); }
.slot.is-target { border-color: var(--blue); background: var(--blue-soft); }
.slot.is-set { background: var(--raised); }

.slot__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--serif); font-size: 1.02rem; }
.slot__n {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--sunken);
  font-family: var(--sans); font-size: .72rem; font-weight: 700; color: var(--ink-faint);
}
.slot.is-set .slot__n { background: var(--blue-deep); color: var(--accent-ink); }
.slot__lead { color: var(--ink-soft); }

.slot__pick {
  min-height: 38px; padding: 6px 14px;
  border: 1px dashed var(--line-hi); border-radius: 999px;
  background: transparent; color: var(--ink-faint);
  font-family: var(--sans); font-size: .9rem; font-weight: 550; cursor: pointer;
}
.slot__pick.is-set {
  border-style: solid; border-color: hsl(var(--h) 24% 58% / .6);
  background: hsl(var(--h) 26% 62% / .16); color: var(--ink); font-weight: 650;
}

.dots { display: inline-flex; gap: 5px; }
.dots button {
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-hi); background: transparent; cursor: pointer;
}
.dots button[aria-pressed="true"] { background: hsl(var(--h) 28% 52%); border-color: transparent; }

.slot__x {
  margin-left: auto; min-height: 32px; min-width: 32px; padding: 4px 8px;
  border: 0; background: transparent; color: var(--ink-faint);
  font-family: var(--sans); font-size: .9rem; cursor: pointer;
}
.slot__because { margin-top: 10px; display: none; }
.slot.is-set .slot__because { display: block; }

.saverow__meta { font-size: .8rem; color: var(--ink-faint); min-width: 0; }

/* ─────────── Verlauf ─────────── */

.day__h {
  padding: 10px 0 6px;
  font-size: .73rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}

.entry {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px; margin-bottom: 9px; cursor: pointer;
}
.entry.is-open { border-color: var(--blue-line); background: var(--raised); }
.entry__top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  font-size: .78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.tone { margin-left: auto; width: 48px; height: 5px; border-radius: 3px; background: var(--sunken); position: relative; }
.tone i { position: absolute; top: -1px; bottom: -1px; width: 3px; border-radius: 2px; background: var(--ink-soft); }

.feel { font-family: var(--serif); font-size: .98rem; line-height: 1.55; margin-bottom: 5px; }
.feel b { font-weight: 600; }
.feel em { color: var(--ink-soft); font-style: normal; }

.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tag { padding: 3px 9px; border-radius: 999px; background: var(--sunken); color: var(--ink-faint); font-size: .72rem; font-weight: 550; }
.tag--demo { background: var(--blue-soft); color: var(--blue-deep); }

/* Aufklappen statt Modal: das Detail bleibt im selben Raum. */
.entry__more { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.entry__more h4 {
  margin: 0 0 6px; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.entry__prose { font-family: var(--serif); font-size: .98rem; line-height: 1.65; white-space: pre-wrap; margin-bottom: 10px; }

.blank { text-align: center; color: var(--ink-faint); padding: 34px 8px; display: grid; gap: 9px; justify-items: center; }
.blank h3 { color: var(--ink); font-size: 1rem; }
.blank p { max-width: 34ch; font-size: .9rem; }

/* ─────────── Bereiche ─────────── */

.tree { display: grid; gap: 8px; }

.node {
  background: var(--raised); border: 1px solid var(--line);
  border-left: 3px solid var(--green); border-radius: var(--r);
  padding: 13px 14px;
}
.node--child { margin-left: 16px; border-left-color: var(--green-line); }
.node--grandchild { margin-left: 32px; border-left-color: var(--line-hi); }

.node__top { display: flex; align-items: center; gap: 9px; }
.node__title { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; }
.node__count { font-size: .74rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.node__menu { margin-left: auto; display: flex; gap: 6px; }
.node__note { font-size: .85rem; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
.node__themes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.node__actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }

.newnode { display: grid; gap: 9px; margin-top: 10px; }
.newnode__row { display: flex; gap: 8px; }
.newnode__row .field { flex: 1; }

.nudge {
  display: grid; gap: 10px;
  padding: 13px 14px; margin: 12px 0;
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  border-radius: var(--r);
}
.nudge p { font-size: .89rem; line-height: 1.55; color: var(--ink); }
.nudge b { font-weight: 650; }
.nudge__row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─────────── Projekte ─────────── */

.purpose {
  padding: 15px 16px; margin-bottom: 14px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
  font-size: .88rem; line-height: 1.6; color: var(--ink-soft);
}
.purpose b { color: var(--ink); font-weight: 600; }

/* Der Ertrag der Gespräche. Blau wie der Dialog, damit sichtbar bleibt, woher
   das hier kommt — und nicht in Projektfarbe, als hätte die App es gefunden. */
.yield {
  border: 1px solid var(--blue-line); border-left: 3px solid var(--blue);
  border-radius: var(--r); background: var(--blue-soft);
  padding: 15px 16px; margin-bottom: 18px;
}
.yield .block__head { margin-bottom: 12px; }
.yield .block__sub { color: var(--ink-soft); }
.yield__i {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 14px; margin-bottom: 9px;
}
.yield__meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline;
  font-size: .73rem; color: var(--ink-faint); margin-bottom: 5px;
}
.yield__meta b { color: var(--blue-deep); font-weight: 650; }
.yield__head { font-family: var(--serif); font-size: 1rem; line-height: 1.4; margin-bottom: 6px; }
.yield__line { font-size: .86rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: 4px; }
.yield__i .btn { margin-top: 9px; }

.proj {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px; margin-bottom: 12px;
}
.proj.is-adopted { border-color: var(--green-line); box-shadow: inset 3px 0 0 var(--green); }
.proj__top {
  display: flex; align-items: flex-start; gap: 10px; justify-content: space-between;
  width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.proj__head { display: grid; gap: 5px; min-width: 0; flex: 1; }
.proj__title { display: block; font-family: var(--serif); font-size: 1.14rem; font-weight: 600; line-height: 1.3; }
.proj__frame { display: block; font-size: .73rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.proj__peek { display: block; font-size: .8rem; color: var(--ink-soft); }
/* Pfeil nach unten, aufgeklappt nach oben */
.proj__chev {
  flex: none; width: 30px; height: 30px; margin-top: 1px;
  border: 1px solid var(--line-hi); border-radius: 50%;
  background: var(--paper) no-repeat center / 14px;
  position: relative;
}
.proj__chev::before {
  content: ""; position: absolute; left: 50%; top: 45%;
  width: 7px; height: 7px; border: solid var(--ink-soft); border-width: 0 1.7px 1.7px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .18s var(--ease);
}
.proj.is-open .proj__chev::before { top: 58%; transform: translate(-50%, -50%) rotate(-135deg); }
.proj__body { margin-top: 4px; }

.proj__meter { display: flex; gap: 4px; margin: 12px 0 10px; }
.proj__meter i { height: 5px; flex: 1; border-radius: 3px; background: var(--sunken); }
.proj__meter i.on { background: var(--green); }

.proj__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.fact {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--sunken); font-size: .77rem; color: var(--ink-soft); white-space: nowrap;
}
.fact b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

.proj__move { font-size: .86rem; line-height: 1.55; padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: 11px; }
.move-leichter { background: var(--green-soft); color: var(--ink); }
.move-schwerer { background: color-mix(in srgb, var(--warm) 13%, var(--raised)); color: var(--ink); }
.move-stabil, .move-unklar { background: var(--sunken); color: var(--ink-soft); }

.proj__frameblock { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; font-size: .85rem; line-height: 1.55; color: var(--ink-soft); }
.proj__frameblock h4 { margin: 0 0 5px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.proj__ref { font-size: .74rem; font-style: italic; color: var(--ink-faint); margin-top: 6px; }
.proj__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }

/* ─────────── Ziele: die Ebene unter dem Projekt ─────────── */

.goals {
  margin-top: 13px; padding-top: 13px;
  border-top: 1px solid var(--line);
  display: grid; gap: 8px; justify-items: start;
}
.goals__h {
  margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.goals__empty { font-size: .83rem; color: var(--ink-faint); line-height: 1.5; }
.goals__hint { font-size: .78rem; color: var(--ink-faint); margin: 2px 0 6px; }
.goals__chips { display: grid; gap: 6px; }
.goals__chips .btn { text-align: left; justify-content: flex-start; white-space: normal; line-height: 1.4; }
.goals .newnode { width: 100%; }

.goal {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 10px 11px; border-radius: var(--r-sm);
  background: var(--green-soft); border: 1px solid var(--green-line);
}
.goal.is-done { background: var(--sunken); border-color: var(--line); }
.goal.is-done .goal__text { text-decoration: line-through; color: var(--ink-faint); }

.goal__tick {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1.5px solid var(--green); border-radius: 7px;
  background: var(--raised); color: var(--green-deep);
  font-size: .82rem; font-weight: 700; cursor: pointer;
}
.goal__tick[aria-pressed="true"] { background: var(--green-deep); border-color: var(--green-deep); color: var(--accent-ink); }
.goal__body { flex: 1; min-width: 0; }
.goal__text { font-family: var(--serif); font-size: .99rem; line-height: 1.45; }
.goal__note { font-size: .8rem; color: var(--ink-soft); margin-top: 3px; }

/* ─────────── Muster ─────────── */

.block { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 12px; }
.block__head { margin-bottom: 12px; }
.block__head h2 { font-size: 1rem; }
.block__sub { font-size: .81rem; color: var(--ink-faint); margin-top: 3px; line-height: 1.45; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.stat { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; }
.stat__v { font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__l { font-size: .76rem; color: var(--ink-faint); margin-top: 3px; }
.stat__n { font-size: .7rem; color: var(--ink-faint); opacity: .8; margin-top: 4px; }

.note {
  display: flex; gap: 11px; padding: 13px 14px; margin-bottom: 9px;
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--blue); border-radius: var(--r);
}
.note:last-child { margin-bottom: 0; }
.note--resource   { border-left-color: var(--green); background: var(--green-soft); }
.note--repetition { border-left-color: var(--warm); }
.note--absence    { border-left-color: var(--line-hi); }
.note p { font-size: .89rem; line-height: 1.55; }
.note__lit { font-size: .73rem; color: var(--ink-faint); margin-top: 6px; font-style: italic; }

.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.bar__l { font-size: .88rem; }
.bar__n { font-size: .76rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.bar__t { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.bar__f { height: 100%; border-radius: 3px; background: var(--blue); }
.bar__terms { grid-column: 1 / -1; font-size: .71rem; color: var(--ink-faint); }
.bar__terms code { background: var(--sunken); padding: 1px 5px; border-radius: 4px; margin-right: 4px; }

.levels { display: flex; height: 26px; border-radius: 7px; overflow: hidden; margin: 8px 0 12px; }
.levels div { display: grid; place-items: center; font-size: .7rem; font-weight: 650; color: #fffdf6; }
.lv-reif { background: var(--green-deep); } .lv-neurotisch { background: var(--blue); } .lv-unreif { background: var(--warm); }

/* Legende: was die drei Ebenen überhaupt bedeuten */
.levelkey { display: grid; gap: 8px; margin-bottom: 4px; }
.levelkey__i {
  padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--sunken); border-left: 3px solid var(--line-hi);
  font-size: .81rem; line-height: 1.5; color: var(--ink-soft);
}
.levelkey__i b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 2px; font-size: .84rem; }
.levelkey__i--reif { border-left-color: var(--green-deep); }
.levelkey__i--neurotisch { border-left-color: var(--blue); }
.levelkey__i--unreif { border-left-color: var(--warm); }

/* Antippbare Begriffe mit ausklappbarer Definition */
.bar--tappable { row-gap: 4px; }
.bar__l--btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; font-size: .88rem; color: var(--ink);
  text-align: left; cursor: pointer;
}
.bar__caret {
  display: grid; place-items: center;
  width: 17px; height: 17px; flex: none;
  border-radius: 50%; background: var(--sunken); color: var(--ink-faint);
  font-size: .68rem; font-weight: 700;
}
.bar__l--btn[aria-expanded="true"] .bar__caret { background: var(--blue-deep); color: var(--accent-ink); }
.bar__f--reif { background: var(--green-deep); }
.bar__f--neurotisch { background: var(--blue); }
.bar__f--unreif { background: var(--warm); }

.def {
  grid-column: 1 / -1;
  margin-top: 6px; padding: 12px 13px;
  background: var(--raised); border: 1px solid var(--line);
  border-left: 3px solid var(--blue); border-radius: var(--r-sm);
}
.def__text { font-size: .88rem; line-height: 1.6; color: var(--ink); }
.def__level { font-size: .82rem; line-height: 1.55; color: var(--ink-soft); margin-top: 8px; }
.def__note {
  font-size: .8rem; line-height: 1.55; color: var(--ink-soft);
  margin-top: 8px; padding: 8px 10px;
  background: var(--sunken); border-radius: 7px;
}
.def__ref { font-size: .73rem; font-style: italic; color: var(--ink-faint); margin-top: 9px; }

.chart { width: 100%; height: auto; }
.chart .axis { stroke: var(--line-hi); stroke-width: 1; }
.chart .zero { stroke: var(--line-hi); stroke-dasharray: 3 3; }
.chart .line { fill: none; stroke: var(--blue-deep); stroke-width: 2; }
.chart .area { fill: var(--blue); opacity: .14; }
.chart .dot  { fill: var(--blue-deep); stroke: var(--raised); stroke-width: 1.5; }
.chart text  { font-size: 11px; fill: var(--ink-faint); font-family: var(--sans); stroke: none; }

.co { display: grid; gap: 6px; }
.co__i { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--sunken); border-radius: var(--r-sm); font-size: .87rem; }
.co__i span:last-child { margin-left: auto; color: var(--ink-faint); font-size: .8rem; font-variant-numeric: tabular-nums; }

.files { display: flex; flex-wrap: wrap; gap: 6px; }
.file { padding: 4px 10px; border-radius: 6px; background: var(--sunken); color: var(--ink-soft); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; }

/* ─────────── Dialog ─────────── */

.intro { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 22px 8px 12px; }
.intro p:not(.lede) { font-size: .89rem; color: var(--ink-faint); line-height: 1.6; max-width: 40ch; }
.intro__projects { display: grid; gap: 8px; width: 100%; max-width: 420px; }

.stage-track { display: flex; gap: 4px; align-items: center; margin-bottom: 14px; }
.stage-track i { flex: 1; height: 3px; border-radius: 2px; background: var(--line-hi); }
.stage-track i.on { background: var(--blue); }
.stage-track span { font-size: .7rem; color: var(--ink-faint); margin-left: 6px; white-space: nowrap; }

.chatlist { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chatlist__b {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line-hi); background: var(--raised);
  font: inherit; font-size: .8rem; color: var(--ink-soft); cursor: pointer;
}
.chatlist__b.on { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-deep); font-weight: 600; }
.chatlist__x { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: .9rem; padding: 0 2px; }

.msgs { display: grid; gap: 16px; }
.msg { display: grid; gap: 4px; }
.msg__w { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.msg__b { font-family: var(--serif); font-size: 1.04rem; line-height: 1.66; white-space: pre-wrap; }
.msg--user .msg__b { background: var(--blue-soft); border-radius: var(--r-bubble); padding: 12px 14px; }
.msg--crisis .msg__b {
  border: 1px solid var(--alert); border-radius: var(--r); padding: 13px 14px;
  background: color-mix(in srgb, var(--alert) 9%, var(--raised));
  font-family: var(--sans); font-size: .92rem;
}
.msg__lit { font-size: .75rem; color: var(--ink-faint); border-left: 2px solid var(--line-hi); padding-left: 10px; margin-top: 4px; }

.typing { display: inline-flex; gap: 5px; padding: 8px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: bob 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.page__foot--chat .field { max-height: 30dvh; }

.finishbar { display: flex; justify-content: center; padding: 16px 0 2px; }

.summary {
  background: var(--raised); border: 1px solid var(--green-line);
  border-left: 3px solid var(--green); border-radius: var(--r);
  padding: 16px; margin-top: 18px;
}
.summary h3 { font-size: .71rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.summary__head { font-family: var(--serif); font-size: 1.06rem; margin-bottom: 8px; }
.summary p { font-size: .89rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 5px; }
.summary__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }

/* ─────────── Einstellungen ─────────── */

.set { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; margin-bottom: 10px; }
.set__l { font-weight: 600; font-size: .94rem; }
.set__d { font-size: .82rem; color: var(--ink-faint); margin-top: 3px; line-height: 1.5; }
.set__c { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.seg { display: flex; border: 1px solid var(--line-hi); border-radius: var(--r-sm); overflow: hidden; width: 100%; }
.seg button {
  flex: 1; min-height: 42px; padding: 9px 10px;
  border: 0; background: var(--raised); color: var(--ink-soft);
  font: inherit; font-size: .87rem; cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--line-hi); }
.seg button.on { background: var(--blue-deep); color: var(--accent-ink); font-weight: 650; }

/* ─────────── Zwei Arten, einen Eintrag zu schreiben ───────────
   Der Umschalter steht ganz oben auf „Heute" und entscheidet, was darunter
   überhaupt sichtbar ist. Vorher standen drei Kästen gleichzeitig da. */

.modeswitch {
  display: flex; width: 100%; margin-bottom: 12px;
  border: 1px solid var(--line-hi); border-radius: var(--r-sm); overflow: hidden;
}
.modeswitch__b {
  flex: 1; min-width: 0;
  min-height: 42px; padding: 9px 10px;
  border: 0; background: var(--raised); color: var(--ink-soft);
  font: inherit; font-size: .88rem; cursor: pointer;
}
.modeswitch__b + .modeswitch__b { border-left: 1px solid var(--line-hi); }
.modeswitch__b.on { background: var(--blue-deep); color: var(--accent-ink); font-weight: 650; }

#journal-host .card__head { margin-bottom: 10px; }

/* ─────────── Diktieren ───────────
   Der Knopf muss mit dem Daumen ohne Hinsehen zu treffen sein, während man
   spricht — deshalb 60 Pixel und direkt am Feld. Der Ring zeigt den Pegel;
   dass sich etwas bewegt, ist die einzige Rückmeldung, die beim Sprechen
   ankommt. */

.dict-hint {
  margin-bottom: 12px;
  font-size: .8rem; line-height: 1.55; color: var(--ink-faint);
}

.mic-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.mic {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 60px; height: 60px; padding: 0;
  border: 1px solid var(--blue-line); border-radius: 50%;
  background: var(--blue-soft); color: var(--blue-deep);
  cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: background .14s var(--ease), transform .1s var(--ease);
}
.mic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; }
.mic__cap {
  position: absolute; bottom: 7px; left: 0; right: 0; z-index: 1;
  font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  opacity: .72;
}
.mic svg { transform: translateY(-5px); }

/* Der Pegelring: wächst mit der Lautstärke, sitzt hinter dem Symbol. */
.mic__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--blue); opacity: 0;
  transform: scale(calc(.55 + var(--level, 0) * .45));
  transition: opacity .15s var(--ease);
}
.mic.is-live { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--accent-ink); }
.mic.is-live .mic__ring { opacity: .34; }
.mic:active { transform: scale(.95); }

.mic.is-working { background: var(--sunken); border-color: var(--line-hi); color: var(--ink-faint); }
.mic.is-working svg { animation: micpulse 1.1s ease-in-out infinite; }
@keyframes micpulse { 50% { opacity: .35; } }

/* Erst NACHDEM der Browser wirklich abgelehnt hat — vorher sieht der Knopf
   normal aus, weil wir es nicht vorher wissen können. */
.mic--off { background: var(--sunken); border-color: var(--line); color: var(--ink-faint); }

.mic__status { font-size: .8rem; line-height: 1.45; color: var(--ink-faint); }
.mic__status--live { color: var(--blue-deep); font-weight: 600; }
.mic__status--bad  { color: var(--alert); }

@media (prefers-reduced-motion: reduce) {
  .mic, .mic__ring { transition: none; }
  .mic.is-working svg { animation: none; }
}

/* Die beiden Erklärflächen zum Mikrofon */
.mic-sheet {
  position: fixed; inset: 0; z-index: 98;
  display: grid; place-items: end center;
  background: rgb(38 34 28 / .3);
  opacity: 0; transition: opacity .18s var(--ease);
}
.mic-sheet.is-in { opacity: 1; }
.mic-sheet__card {
  width: 100%; max-width: 520px;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  background: var(--raised);
  border-radius: var(--r) var(--r) 0 0;
  border-top: 3px solid var(--blue);
  transform: translateY(14px); transition: transform .18s var(--ease);
}
.mic-sheet.is-in .mic-sheet__card { transform: none; }
.mic-sheet__card h3 { font-family: var(--serif); font-size: 1.14rem; margin-bottom: 9px; }
.mic-sheet__card p { font-size: .88rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 9px; }
.mic-sheet__good {
  padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--green-soft); color: var(--green-deep) !important;
}
.mic-sheet__note { font-size: .8rem !important; color: var(--ink-faint) !important; }
.mic-sheet__row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.mic-bar { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; margin: 4px 0 8px; }
.mic-bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s linear; }

/* ─────────── Mehr in der Kopfleiste ─────────── */

.topbar__more {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 11px 5px 9px; margin-left: auto;
  border: 1px solid var(--line-hi); border-radius: 999px;
  background: var(--raised); color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: .79rem; font-weight: 600; white-space: nowrap;
}
.topbar__more svg { width: 15px; height: 15px; flex: none; }
.topbar__more:active { background: var(--sunken); }

/* ─────────── Projekte / Bereiche auf einer Seite ─────────── */

/* Drei Knöpfe müssen auch auf einem schmalen Telefon nebeneinander passen.
   „Widersprüche halten" geht dabei über zwei Zeilen — abgeschnitten wäre es
   unbrauchbar, und der Name soll ganz dastehen. Alle drei bekommen deshalb
   dieselbe Höhe und mittige Ausrichtung. */
.subnav {
  display: flex; width: 100%; margin-bottom: 14px;
  border: 1px solid var(--line-hi); border-radius: var(--r-sm); overflow: hidden;
  align-items: stretch;
}
.subnav__b {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 7px 8px;
  border: 0; background: var(--raised); color: var(--ink-soft);
  font: inherit; font-size: .79rem; line-height: 1.28; cursor: pointer;
  text-align: center; overflow-wrap: break-word;
}
/* „Widersprüche halten" / „Holding Contradictions" ist deutlich länger als
   die zwei Einwortnamen daneben. Ein gleicher Drittel-Anteil würde es
   abschneiden, also bekommt es anteilig mehr Platz statt einer kleineren
   Schrift — der Name soll lesbar dastehen, nicht hineingequetscht. */
.subnav__b:last-child { flex-grow: 1.9; }
.subnav__b + .subnav__b { border-left: 1px solid var(--line-hi); }
.subnav__b.on { background: var(--green-deep); color: var(--accent-ink); font-weight: 650; }

/* ─────────── Spannungsfelder ───────────
   Das Bild trägt die Aussage, deshalb bekommt es Luft und die Karte um es
   herum bleibt ruhig. Blau und Grün stehen wie überall für die zwei
   Richtungen; die Mitte bekommt das Warm — die einzige Stelle in der App,
   an der diese Farbe etwas bedeutet. */

.tf {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px; margin-bottom: 14px;
}
.tf__head { margin-bottom: 9px; }
.tf__title { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.3; }
.tf__frame { font-size: .76rem; color: var(--ink-faint); margin-top: 2px; }
.tf__blurb { font-size: .9rem; line-height: 1.62; color: var(--ink-soft); }
.tf__none {
  margin-top: 12px; padding: 11px 13px;
  background: var(--sunken); border-radius: var(--r-sm);
  font-size: .84rem; line-height: 1.55; color: var(--ink-faint);
}

.tf__venn { margin: 16px 0 4px; }
.venn { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto; }

/* Durchscheinend statt deckend: Wo sich die Kreise überlagern, entsteht die
   Mitte von selbst. Dünne Ränder, damit nichts nach Messgerät aussieht. */
.venn__c { stroke-width: 1; }
.venn__c--a { fill: var(--blue); fill-opacity: .17; stroke: var(--blue-line); }
.venn__c--b { fill: var(--green); fill-opacity: .17; stroke: var(--green-line); }

/* Klein und zurückgenommen — die Zahl ist hier Beiwerk, nicht die Aussage. */
.venn__n {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  fill: var(--ink-faint); font-variant-numeric: tabular-nums;
}

/* Der Name des Themas: weich getönt, in der Mitte, über beiden Kreisen.
   Bewusst leichter als die Kreise selbst — er benennt, er betont nicht. */
.venn__subject {
  font-family: var(--serif); font-size: 12px; font-weight: 500;
  fill: var(--ink-soft); fill-opacity: .5;
}

.tf__keys { display: grid; gap: 5px; margin-top: 12px; }
.tf__key { display: flex; align-items: baseline; gap: 8px; font-size: .82rem; }
.tf__key b { font-weight: 600; color: var(--ink); }
.tf__key i { font-style: normal; color: var(--ink-faint); margin-left: auto; white-space: nowrap; }
/* Die Füllung entspricht dem Kreis, der Rand trägt die kräftige Farbe:
   bei 12 Pixeln unterscheiden sich zwei so blasse Flächen sonst nicht. */
.tf__swatch {
  flex: none; width: 12px; height: 12px; border-radius: 3px;
  border: 2px solid var(--line-hi); transform: translateY(1px);
}
.tf__key--a .tf__swatch { background: var(--blue-soft); border-color: var(--blue); }
.tf__key--b .tf__swatch { background: var(--green-soft); border-color: var(--green); }
/* „beides" ist keine eigene Farbe mehr, sondern das Übereinander der zwei. */
.tf__key--both .tf__swatch {
  background: linear-gradient(105deg, var(--blue-soft) 45%, var(--green-soft) 55%);
  border-color: var(--line-hi);
}
.tf__key--both b { color: var(--warm-deep); }

.tf__mid { margin-top: 16px; }
.tf__mid h3,
.tf__belief h3 {
  font-size: .71rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 8px;
}
.tf__pair {
  border-left: 2px solid var(--line-hi); padding-left: 11px; margin-bottom: 11px;
}
.tf__pair--one { border-left-color: var(--warm); }
.tf__when { display: block; font-size: .72rem; color: var(--ink-faint); margin-bottom: 4px; }
.tf__pair blockquote {
  /* Der Browser gibt blockquote von sich aus einen breiten Einzug — hier
     trägt die Linie links schon die Auszeichnung. */
  margin: 0;
  font-family: var(--serif); font-size: .92rem; line-height: 1.56; color: var(--ink-soft);
}
.tf__pair .tf__b { margin-top: 5px; }

.tf__belief { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.tf__disclaim {
  font-size: .81rem; line-height: 1.58; color: var(--ink-faint); margin-bottom: 11px;
}
.tf__sentence {
  display: block; width: 100%; text-align: left;
  padding: 12px 13px; margin-bottom: 8px;
  border: 1px solid var(--line-hi); border-radius: var(--r-sm);
  background: var(--paper); color: inherit; font: inherit; cursor: pointer;
}
.tf__sentence.is-marked { border-color: var(--warm); background: var(--warm-soft); }
.tf__quote {
  display: block; font-family: var(--serif); font-size: .95rem; line-height: 1.5;
}
.tf__mark {
  display: block; margin-top: 7px;
  font-size: .73rem; letter-spacing: .04em; color: var(--ink-faint);
}
.tf__sentence.is-marked .tf__mark { color: var(--warm-deep); font-weight: 650; }

.tf__lit {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .8rem; line-height: 1.55; color: var(--ink-soft);
}
.tf__lit i { display: block; margin-top: 4px; font-size: .73rem; color: var(--ink-faint); }

/* ─────────── Die vier Ebenen: eigene Leseebene ─────────── */

body.is-reading { overflow: hidden; }

.guide {
  position: fixed; inset: 0; z-index: 96;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--paper);
}
.guide__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.guide__back {
  border: 0; background: none; color: var(--ink-soft);
  font: inherit; font-size: .88rem; cursor: pointer; padding: 6px 2px;
}
.guide__crumb {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-left: auto; margin-right: auto; padding-right: 42px;
}
.guide__body {
  overflow-y: auto; padding: 22px 18px 40px;
  max-width: 660px; margin-inline: auto; width: 100%;
}
.guide__title { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; }
.guide__sub { font-size: .92rem; color: var(--ink-faint); margin: 4px 0 20px; }
.guide__p { font-size: .96rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 13px; }
.guide__h {
  font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
  margin: 28px 0 6px;
}
.guide__lede { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 16px; }
.guide__list { margin: 0; padding-left: 20px; }
.guide__list li { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 10px; }

/* Eine Karte je Ebene — eine vierspaltige Tabelle wäre auf dem Telefon
   unlesbar, und der Vergleich entsteht ohnehin durch das gleiche Beispiel. */
.lvl {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--raised); padding: 15px 16px; margin-bottom: 11px;
  border-left: 4px solid var(--line-hi);
}
.lvl--i   { border-left-color: #9a8fa6; }
.lvl--ii  { border-left-color: var(--warm); }
.lvl--iii { border-left-color: var(--blue); }
.lvl--iv  { border-left-color: var(--green-deep); }

.lvl__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.lvl__roman {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  color: var(--ink-faint); min-width: 26px;
}
.lvl__name { font-size: 1.08rem; font-weight: 650; }
.lvl__reality { font-size: .95rem; line-height: 1.55; color: var(--ink); margin-bottom: 11px; }

.lvl__row { margin-bottom: 10px; }
.lvl__label {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px;
}
.lvl__defs { font-size: .87rem; color: var(--ink-soft); }
.lvl__example {
  font-family: var(--serif); font-size: .97rem; line-height: 1.6; color: var(--ink);
}
.lvl__note {
  font-size: .82rem; line-height: 1.55; color: var(--ink-faint);
  border-top: 1px solid var(--line); padding-top: 9px; margin-top: 4px;
}

.guide__source {
  margin-top: 28px; padding: 14px 15px;
  background: var(--sunken); border-radius: var(--r);
}
.guide__source h3 {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
}
.guide__source p { font-size: .82rem; line-height: 1.55; color: var(--ink-soft); }
.guide__sourcenote { margin-top: 7px; font-style: italic; }
.guide__end { display: flex; justify-content: center; margin-top: 24px; }

/* ─────────── Rückfrage an Ort und Stelle ───────────
   Tritt an die Stelle des Knopfes, den man gedrückt hat. Kein Overlay, kein
   Dialog — die Frage steht dort, wo die Handlung ausgelöst wurde. */

.ask {
  display: grid; gap: 9px;
  padding: 12px 13px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--alert) 7%, var(--raised));
  border: 1px solid color-mix(in srgb, var(--alert) 30%, var(--line));
}
.ask__q { font-size: .88rem; line-height: 1.5; color: var(--ink); }
.ask__row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─────────── Liste oder Karte ─────────── */

.viewtoggle {
  display: inline-flex; margin-bottom: 14px;
  border: 1px solid var(--line-hi); border-radius: var(--r-sm); overflow: hidden;
}
.viewtoggle__b {
  min-height: 38px; padding: 8px 16px;
  border: 0; background: var(--raised); color: var(--ink-soft);
  font: inherit; font-size: .85rem; cursor: pointer;
}
.viewtoggle__b + .viewtoggle__b { border-left: 1px solid var(--line-hi); }
.viewtoggle__b.on { background: var(--green-deep); color: var(--accent-ink); font-weight: 650; }

.mapwrap {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px; margin-bottom: 4px;
}
.mindmap { width: 100%; height: auto; display: block; }
.mm__link { fill: none; stroke: var(--line-hi); stroke-width: 1.6; }
.mm__link--thin { stroke-width: 1.2; opacity: .8; }
.mm__seed { fill: var(--green-line); }
.mm__node rect, .mm__node circle { fill: var(--raised); stroke: var(--green-line); stroke-width: 1.4; }
.mm__node text {
  font-family: var(--sans); font-size: 13px; fill: var(--ink); stroke: none;
  dominant-baseline: middle;
}
.mm__node--root rect { fill: var(--green-soft); stroke: var(--green); }
.mm__node--child rect { fill: var(--raised); stroke: var(--line-hi); }
.mm__node--child text { font-size: 12px; fill: var(--ink-soft); }
.mm__node--centre circle { fill: var(--blue-deep); stroke: var(--blue-deep); }
.mm__node--centre text { fill: var(--accent-ink); font-weight: 650; font-size: 14px; }

/* ─────────── Ohne Worte ─────────── */

/* „Ohne Worte": eine eigene Art, den Tag festzuhalten — deshalb kräftig und
   in der warmen Farbe, die sonst keine Handlung trägt, statt gestrichelt. */
.expressbtn {
  display: flex; align-items: center; gap: 13px; width: 100%;
  min-height: 64px; margin-bottom: 14px; padding: 12px 16px;
  border: 1.5px solid var(--warm); border-radius: var(--r);
  background: var(--warm-soft); color: var(--warm-deep);
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 2px 0 var(--warm);
  transition: transform .08s var(--ease), box-shadow .08s var(--ease);
}
.expressbtn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--warm); }
.expressbtn__icon {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--warm); color: var(--accent-ink);
}
.expressbtn__icon svg { width: 20px; height: 20px; }
.expressbtn__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.expressbtn__text b { font-size: 1rem; font-weight: 650; }
.expressbtn__text span { font-size: .8rem; line-height: 1.4; color: var(--ink-soft); }
.expressbtn__go { flex: none; font-size: 1.2rem; }

.entry--express { background: var(--paper); }
.express__img {
  display: block; width: 100%; height: auto; border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.express__slot { min-height: 20px; }

/* Die Fläche selbst: der einzige Ort ohne Seitenstruktur */
body.is-expressing { overflow: hidden; }
.express {
  position: fixed; inset: 0; z-index: 95;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--paper);
}
.express__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.express__back {
  border: 0; background: none; color: var(--ink-soft);
  font: inherit; font-size: .88rem; cursor: pointer; padding: 6px 2px;
}
.express__title {
  font-family: var(--serif); font-size: 1rem; font-weight: 600;
  margin-left: auto; margin-right: auto; padding-right: 48px;
}

.express__choice {
  display: grid; gap: 12px; align-content: start;
  padding: 26px 18px; max-width: 420px; margin: 0 auto; width: 100%;
}
.express__lede {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.55;
  color: var(--ink-soft); margin-bottom: 6px; text-align: center;
}
.express__opt {
  display: grid; gap: 4px; justify-items: start; text-align: left; width: 100%;
  padding: 16px 17px; border-radius: var(--r);
  border: 1px solid var(--line-hi); background: var(--raised); color: var(--ink);
  font: inherit; cursor: pointer;
}
.express__opt b { font-size: 1.04rem; font-weight: 650; }
.express__opt span { font-size: .83rem; color: var(--ink-faint); line-height: 1.5; }
.express__opt.is-off { cursor: default; opacity: .72; border-style: dashed; }

.express__stage {
  overflow: hidden; display: grid; place-items: center;
  padding: 10px; background: var(--sunken);
}
.express__canvas {
  max-width: 100%; max-height: 100%; width: auto; height: 100%;
  background: var(--raised); border-radius: var(--r-sm);
  border: 1px solid var(--line); touch-action: none; cursor: crosshair;
}

.express__tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--line); background: var(--raised);
}
.express__inks, .express__widths { display: flex; gap: 6px; }
.express__ink {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: var(--c); border: 2px solid transparent;
}
.express__ink.on { border-color: var(--ink); }
.express__width {
  width: 30px; height: 30px; border-radius: var(--r-sm); cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line-hi); background: var(--raised);
}
.express__width.on { border-color: var(--ink); }
.express__width i { display: block; border-radius: 50%; background: var(--ink); }
.express__acts { display: flex; gap: 7px; margin-left: auto; }

.express__voice {
  display: grid; gap: 14px; justify-items: center; align-content: center;
  padding: 30px 20px; text-align: center;
}
.express__rec {
  position: relative; width: 86px; height: 86px; border-radius: 50%;
  border: 0; background: var(--blue-deep); cursor: pointer;
}
.express__rec[aria-pressed="true"] { background: var(--alert); }
.express__pulse {
  position: absolute; inset: 50% auto auto 50%;
  width: 28px; height: 28px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--accent-ink);
}
.express__rec[aria-pressed="true"] .express__pulse {
  border-radius: 6px; width: 24px; height: 24px;
}
.express__clock {
  font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
}
.express__state { font-size: .88rem; color: var(--ink-faint); max-width: 34ch; line-height: 1.5; }
.express__player { width: 100%; max-width: 340px; }

/* ─────────── Mitnehmen ─────────── */

.take { display: grid; gap: 10px; margin-top: 12px; }
.take__opt {
  display: grid; gap: 5px; justify-items: start;
  padding: 13px 14px; border-radius: var(--r-sm);
  background: var(--paper); border: 1px solid var(--line);
}
.take__opt b { font-size: .92rem; font-weight: 650; }
.take__opt span { font-size: .82rem; color: var(--ink-faint); line-height: 1.5; }
.take__opt .btn { margin-top: 4px; }
.take__status {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--blue-soft); color: var(--blue-deep);
  font-size: .8rem; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.take__why {
  margin-top: 10px; font-size: .78rem; line-height: 1.55; color: var(--ink-faint);
  padding-top: 10px; border-top: 1px solid var(--line);
}
/* Der Weg, der auf dem Telefon wirklich funktioniert — das muss auffallen. */
.take__why--warn {
  color: var(--ink-soft); background: var(--blue-soft);
  border: 1px solid var(--blue-line); border-radius: var(--r-sm);
  padding: 11px 13px;
}

.warn {
  padding: 15px 16px; margin-bottom: 10px;
  background: var(--raised); border: 1px solid var(--line);
  border-left: 3px solid var(--warm); border-radius: var(--r);
  font-size: .85rem; line-height: 1.6; color: var(--ink-soft);
}
.warn h3 { font-size: .92rem; color: var(--ink); margin-bottom: 6px; }
.warn ul { margin: 8px 0 0; padding-left: 18px; }
.warn li { margin-bottom: 4px; }
.warn--alert { border-left-color: var(--alert); }
.warn--info  { border-left-color: var(--blue); }

/* ─────────── Kachelleiste: Wegpunkte, keine Türen ─────────── */

.tiles {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 6px; justify-content: center;
  padding: 7px 10px calc(7px + var(--safe-b));
  background: var(--paper);
  border-top: 1px solid var(--line);
}

/* Vier Kacheln statt sechs — mehr Platz für jede. */
.tile {
  flex: 1 1 0; max-width: 96px;
  display: grid; place-items: center; gap: 3px;
  aspect-ratio: 1 / .86;
  padding: 6px 3px;
  border: 1px solid var(--line); border-radius: var(--r-tile);
  background: var(--raised); color: var(--ink-faint);
  font: inherit; font-size: .62rem; font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .08s var(--ease);
}
.tile svg { width: 20px; height: 20px; }
.tile:active { transform: scale(.94); }
/* „Du bist hier" — kein Zustandswechsel, nur ein Standort. */
.tile.is-here { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-deep); }
.tile[data-goto="projekte"].is-here { background: var(--green-soft); border-color: var(--green-line); color: var(--green-deep); }

/* Der Dialog ist nicht eine Ansicht unter vieren, sondern der Ort, an dem aus
   Einträgen etwas wird. Deshalb trägt er dauerhaft Farbe, nicht erst wenn man
   dort steht. */
.tile--key {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--accent-ink);
}
.tile--key.is-here {
  background: var(--blue-deep);
  border-color: var(--ink);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-ink);
}

/* ─────────── Toast ─────────── */

.toast {
  position: fixed; left: 50%; z-index: 80;
  bottom: calc(var(--tiles-h) + var(--safe-b) + 12px);
  transform: translate(-50%, 14px);
  max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: var(--r);
  background: var(--ink); color: var(--paper);
  font-size: .86rem; font-weight: 500; line-height: 1.45; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ─────────── Größere Schirme ─────────── */

@media (min-width: 720px) {
  .topbar, .page__head, .page__body, .page__foot {
    max-width: 740px; margin-inline: auto; width: 100%; padding-inline: 24px;
  }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .tile { max-width: 92px; }
}

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


/* ═══════════════════════════════════════════════════════════
   Farbpaletten
   Je zwei Komplementärfarben: „blue" bleibt der Name für das, was du tust,
   „green" für das, was wächst — auch wenn es jetzt Indigo und Ocker sind.
   ═══════════════════════════════════════════════════════════ */

:root[data-palette="ocker"] {
  --blue: #5865a8; --blue-deep: #3d4a8c; --blue-soft: #e8eaf5; --blue-line: #c3c8e6;
  --green: #b58a3c; --green-deep: #7f5c1c; --green-soft: #f5eddc; --green-line: #e2cf9f;
  --ink-faint: #80868c;
}
:root[data-palette="koralle"] {
  --paper: #f6f4ee; --raised: #fffefa; --sunken: #e9e6dc; --line: #e1ddd0; --line-hi: #c9c4b4;
  --ink: #21292a; --ink-soft: #536061; --ink-faint: #7f8888;
  --blue: #3a8a8c; --blue-deep: #226466; --blue-soft: #e0f0ef; --blue-line: #a9d3d2;
  --green: #d27a62; --green-deep: #a14d38; --green-soft: #f8e6df; --green-line: #ebbcae;
}
:root[data-palette="pflaume"] {
  --paper: #f7f4ef; --raised: #fffdf9; --sunken: #ebe6dd; --line: #e2dccf; --line-hi: #cbc3b3;
  --ink: #28232c; --ink-soft: #5d5764; --ink-faint: #878290;
  --blue: #87639e; --blue-deep: #62437c; --blue-soft: #efe7f4; --blue-line: #d2c0de;
  --green: #8d9e45; --green-deep: #5d6c26; --green-soft: #eef1dd; --green-line: #ccd69f;
}
/* Dunkel: helle Akzente mit dunkler Schrift darauf, damit Knöpfe lesbar bleiben. */
:root[data-palette="nacht"] {
  --paper: #181b20; --raised: #22262d; --sunken: #12151a; --line: #2e333b; --line-hi: #434a54;
  --ink: #ece6da; --ink-soft: #b9b3a8; --ink-faint: #8f939a;
  --blue: #7fa6d6; --blue-deep: #9dbde6; --blue-soft: #1f2b3a; --blue-line: #3b5272;
  --green: #e0a458; --green-deep: #e7b56f; --green-soft: #33291b; --green-line: #6a5130;
  --accent-ink: #14171c;
  --warm: #d19a62; --warm-deep: #e7b56f; --warm-soft: #2d241a;
  --alert: #e08a80;
}

/* ═══════════════════════════════════════════════════════════
   Formen
   ═══════════════════════════════════════════════════════════ */

:root[data-shape="rund"]   { --r: 24px; --r-sm: 18px; --r-tile: 26px; --r-bubble: 22px; }
:root[data-shape="kantig"] { --r: 4px;  --r-sm: 3px;  --r-tile: 5px;  --r-bubble: 4px; }
:root[data-shape="blatt"]  { --r: 20px; --r-sm: 12px; --r-tile: 18px; --r-bubble: 22px 22px 4px 22px; }
:root[data-shape="blase"]  { --r: 20px; --r-sm: 14px; --r-tile: 20px; --r-bubble: 20px 20px 4px 20px; }

/* Blatt: zwei runde, zwei spitze Ecken. */
:root[data-shape="blatt"] :is(.card, .set, .intro-step, .walk__sheet, .welcome__btn) { border-radius: 24px 6px 24px 6px; }
:root[data-shape="blatt"] .tile { border-radius: 20px 5px 20px 5px; }
:root[data-shape="blatt"] .btn  { border-radius: 14px 4px 14px 4px; }

/* Sprechblase: jede Karte ist eine kleine Äußerung, mit Zipfel unten links. */
:root[data-shape="blase"] :is(.card, .set, .intro-step, .walk__sheet) { border-radius: 22px 22px 22px 5px; }
:root[data-shape="blase"] .btn { border-radius: 999px; }
:root[data-shape="blase"] .msg:not(.msg--user) .msg__b {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: 20px 20px 20px 4px; padding: 12px 14px;
}

/* ═══════════════════════════════════════════════════════════
   Optionen hinter den drei Punkten
   ═══════════════════════════════════════════════════════════ */

.topbar__opts {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 32px; margin-left: 2px;
  border: 1px solid var(--line-hi); border-radius: 999px;
  background: var(--raised); color: var(--ink-soft); cursor: pointer;
}
.topbar__opts svg { width: 16px; height: 16px; }
.topbar__opts[aria-expanded="true"] { background: var(--sunken); }
body.is-choosing .opts, body.is-choosing .walk { display: none; }

.opts {
  position: fixed; z-index: 70;
  top: calc(var(--topbar-h) + 4px); right: 12px;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--topbar-h) - var(--tiles-h) - 24px);
  overflow-y: auto;
  padding: 16px;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--line-hi); border-radius: var(--r);
  box-shadow: 0 12px 32px rgb(0 0 0 / .18);
}
.opts__h {
  font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.opts__h + .opts__d { margin-top: 2px; }
.opts__d { font-size: .8rem; color: var(--ink-soft); line-height: 1.45; margin-bottom: 10px; }
.opts__swatches + .opts__h { margin-top: 18px; }

.opts__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.swatch, .shapebtn {
  display: grid; justify-items: center; gap: 6px;
  padding: 10px 6px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: .76rem; line-height: 1.25; text-align: center; cursor: pointer;
}
.swatch.on, .shapebtn.on { border-color: var(--blue-deep); box-shadow: 0 0 0 1px var(--blue-deep); font-weight: 650; }
.swatch__dots {
  display: flex; gap: 0; padding: 6px 8px; border-radius: 999px;
  border: 1px solid var(--line-hi);
}
.swatch__dots i { width: 20px; height: 20px; border-radius: 50%; display: block; }
.swatch__dots i + i { margin-left: -6px; }

.opts__shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.shapebtn__p {
  width: 40px; height: 28px; display: block;
  background: var(--blue-soft); border: 1.5px solid var(--blue);
}
.shapebtn__p--weich  { border-radius: 8px; }
.shapebtn__p--rund   { border-radius: 14px; }
.shapebtn__p--kantig { border-radius: 2px; }
.shapebtn__p--blatt  { border-radius: 14px 3px 14px 3px; }
.shapebtn__p--blase  { border-radius: 12px 12px 12px 2px; }
.opts__row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; margin-top: 18px; }

/* ═══════════════════════════════════════════════════════════
   Leuchten: gelb-orange um alles, was man drücken kann
   ═══════════════════════════════════════════════════════════ */

@keyframes flare-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--flare-y), 0 0 10px 3px rgb(240 128 31 / .45); }
  50%      { box-shadow: 0 0 0 3px var(--flare-o), 0 0 22px 8px rgb(247 194 52 / .55); }
}
@keyframes flare-pulse-in {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--flare-y), inset 0 0 10px 2px rgb(240 128 31 / .45); }
  50%      { box-shadow: inset 0 0 0 3px var(--flare-o), inset 0 0 16px 4px rgb(247 194 52 / .6); }
}
.flare {
  position: relative; z-index: 1;
  animation: flare-pulse 1.8s ease-in-out infinite;
}
/* In Leisten mit overflow:hidden würde ein äußeres Leuchten abgeschnitten. */
:is(.subnav__b, .modeswitch__b, .seg button).flare { animation-name: flare-pulse-in; }
/* Nebenknöpfe leuchten ruhig, damit nur der nächste Schritt pulsiert. */
.flare-soft { box-shadow: 0 0 0 2px var(--flare-y), 0 0 8px 1px rgb(240 128 31 / .35); }

@media (prefers-reduced-motion: reduce) {
  .flare, :is(.subnav__b, .modeswitch__b, .seg button).flare { animation: none; box-shadow: 0 0 0 3px var(--flare-o), 0 0 14px 4px rgb(247 194 52 / .5); }
}

/* ═══════════════════════════════════════════════════════════
   Rundgang: ein Blatt über der echten App
   ═══════════════════════════════════════════════════════════ */

.walk {
  position: fixed; z-index: 60; left: 0; right: 0;
  bottom: calc(var(--tiles-h) + var(--safe-b) + 10px);
  display: flex; justify-content: center;
  padding: 0 12px;
  pointer-events: none;
}
.walk__sheet {
  pointer-events: auto;
  width: 100%; max-width: 540px;
  max-height: min(64dvh, calc(100dvh - var(--topbar-h) - var(--tiles-h) - 90px));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px 14px;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--line-hi); border-radius: var(--r);
  box-shadow: 0 -6px 30px rgb(0 0 0 / .16), 0 0 0 1px rgb(240 128 31 / .25);
  animation: walk-in .28s var(--ease);
}
@keyframes walk-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.walk__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.walk__eyebrow {
  font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--flare-o);
}
:root[data-palette="nacht"] .walk__eyebrow { color: var(--flare-y); }
.walk__skip {
  min-height: 32px; padding: 4px 12px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: .78rem; cursor: pointer;
}
.walk__title { font-family: var(--serif); font-size: 1.28rem; line-height: 1.28; margin-bottom: 8px; }
.walk__p { font-family: var(--serif); font-size: .98rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 8px; }

.walk__list { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 8px; }
.walk__list li { display: flex; gap: 10px; align-items: flex-start; }
.walk__list b { display: block; font-size: .93rem; }
.walk__list span:not(.walk__n) { font-size: .85rem; color: var(--ink-soft); }
.walk__n {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue-deep); color: var(--accent-ink);
  font-size: .75rem; font-weight: 700;
}

.walk__why {
  margin: 4px 0 10px; padding: 11px 13px;
  background: var(--paper); border-left: 3px solid var(--flare-o); border-radius: var(--r-sm);
}
.walk__why-h { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.walk__why > p:not(.walk__why-h) { font-size: .86rem; line-height: 1.58; color: var(--ink-soft); }

/* Die Quellen: leise, aber vollständig zum Aufklappen. */
.walk__refs { margin-top: 8px; }
.walk__refs summary {
  font-size: .72rem; color: var(--ink-faint); cursor: pointer; line-height: 1.45;
  list-style: none;
}
.walk__refs summary::-webkit-details-marker { display: none; }
.walk__refs summary::before { content: "▸ "; }
.walk__refs[open] summary::before { content: "▾ "; }
.walk__refs ul { margin: 6px 0 0; padding-left: 16px; }
.walk__refs li { font-size: .7rem; line-height: 1.5; color: var(--ink-faint); margin-bottom: 4px; }

.walk__hint { font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.walk__hint::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--flare-o); box-shadow: 0 0 6px 2px rgb(247 194 52 / .6); vertical-align: 1px; }

.walk__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.walk__dots { display: flex; gap: 6px; }
.walk__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-hi); }
.walk__dots i.on { background: var(--flare-o); width: 18px; border-radius: 4px; }
.walk__btns { display: flex; gap: 8px; }

/* ─────────── Sicherungserinnerung ───────────
   Leise: gleiche Fläche wie eine Karte, grüne Kante wie alles, was bewahrt. */
.backup {
  margin-bottom: 14px; padding: 14px 16px;
  background: var(--raised); border: 1px solid var(--green-line);
  border-left: 3px solid var(--green); border-radius: var(--r);
}
.backup__t { font-size: .95rem; margin-bottom: 4px; }
.backup__p { font-size: .85rem; line-height: 1.55; color: var(--ink-soft); }
.backup__row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }

/* Sprachwahl ganz oben auf „Mehr" */
.set--lang { border-color: var(--blue-line); }
.set--lang .set__c { margin-top: 10px; }

/* ─────────── Gespeichert-Blase nach dem ersten Eintrag ───────────
   Eine Sprechblase, die vom Speichern-Knopf her kommt: gleiche Ecke,
   Zipfel nach unten rechts. */
.savedtip { position: fixed; inset: 0; z-index: 85; }
.savedtip__shade { position: absolute; inset: 0; background: rgb(20 20 20 / .32); animation: tipfade .2s ease; }
.savedtip__bubble {
  position: absolute; right: 16px; left: 16px;
  bottom: calc(var(--tiles-h) + var(--safe-b) + 74px);
  max-width: 440px; margin-left: auto;
  max-height: calc(100dvh - var(--tiles-h) - 120px); overflow-y: auto;
  padding: 18px 18px 16px;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--line-hi); border-radius: 22px 22px 6px 22px;
  box-shadow: 0 14px 40px rgb(0 0 0 / .22);
  animation: tippop .28s var(--ease);
}
.savedtip__bubble::after {
  content: ""; position: absolute; right: 34px; bottom: -9px;
  width: 16px; height: 16px; background: var(--raised);
  border-right: 1px solid var(--line-hi); border-bottom: 1px solid var(--line-hi);
  transform: rotate(45deg);
}
.savedtip__icon {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px;
  border-radius: 50%; background: var(--green-soft); color: var(--green-deep);
  font-weight: 700;
}
.savedtip__title { font-family: var(--serif); font-size: 1.2rem; margin-bottom: 10px; }
.savedtip__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.savedtip__list li {
  position: relative; padding-left: 18px;
  font-size: .92rem; line-height: 1.55; color: var(--ink-soft);
}
.savedtip__list li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}
.savedtip__ios {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--blue-soft); color: var(--ink); font-size: .86rem; line-height: 1.5;
}
.savedtip__row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
@keyframes tippop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tipfade { from { opacity: 0; } to { opacity: 1; } }

/* Rundgang, Ansehen-Phase: das Blatt schrumpft zu einer schmalen Leiste,
   damit die Seite darüber frei liegt und sich ausprobieren lässt. */
.walk__bar {
  pointer-events: auto;
  width: 100%; max-width: 540px;
  padding: 11px 14px 10px;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--line-hi); border-radius: var(--r);
  box-shadow: 0 -4px 22px rgb(0 0 0 / .14), 0 0 0 1px rgb(240 128 31 / .25);
  animation: walk-in .22s var(--ease);
}
.walk__bar-text { display: grid; gap: 2px; }
.walk__bar-hint { font-size: .88rem; font-weight: 600; line-height: 1.4; }
.walk__bar-line { font-size: .76rem; line-height: 1.4; color: var(--ink-faint); }
.walk__bar .walk__foot { margin-top: 8px; }