/* =========================================================
   Life Archive – Tutorial (0.6.0 beta)

   Karl, die Schicht über der App (Dimmen, Rahmen, Blase), das Dock
   einer angehaltenen Lektion, Karls Einladung, der Abschluss und der
   Hub unter Home › Guide › Tutorial.

   Formensprache wie überall: Flächen mit zwei Eckschnitten (oben
   links, unten rechts), Knöpfe als Rechteck mit Sockel, nichts rund.
   Karl selbst ist eine Zeichnung – er darf Kurven haben wie die Koi
   im App-Symbol, aus dem er stammt.
   ========================================================= */

:root {
  --z-tour: 95;
  --karl-body: #0b0c0f;
  --karl-rim: rgba(255, 255, 255, .26);
  --karl-sheen: rgba(255, 255, 255, .16);
  --karl-eye: #050507;
  --karl-eye-rim: rgba(246, 243, 251, .85);
  --karl-mouth: #ff9fb4;
  --karl-dots: var(--text-muted);
  /* Reader-Braun ist auf dem dunklen Grund zu leise für Flossen. */
  --karl-fin-reader: color-mix(in srgb, var(--c-reader) 62%, #fff);
  --tour-scrim: rgba(var(--o-bg2), .76);
  --tour-nudge: var(--c-journal);
}

/* =========================================================
   Karl
   ========================================================= */

.karl { display: block; width: 100%; height: auto; overflow: visible; }
.karl .karl__body  { fill: var(--karl-body); stroke: var(--karl-rim); stroke-width: 1.4; }
.karl .karl__sheen { fill: none; stroke: var(--karl-sheen); stroke-width: 2.2; stroke-linecap: round; }
.karl .karl__belly { fill: rgba(255, 255, 255, .035); }
.karl .karl__back  { fill: rgba(255, 255, 255, .055); }
.karl .karl__fin   { fill: var(--karl-fin, var(--c-home)); }
.karl .karl__vein  { fill: none; stroke: var(--karl-body); stroke-width: 1.2; stroke-linecap: round; opacity: .35; }
.karl .karl__gill  { fill: none; stroke: var(--karl-fin, var(--c-home)); stroke-width: 1.7; stroke-linecap: round; opacity: .75; }
.karl .karl__scale { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.karl .karl__eye-rim  { fill: var(--karl-eye-rim); }
.karl .karl__eye-ball { fill: var(--karl-eye); }
.karl .karl__glint    { fill: #fff; }
.karl .karl__glint--small { opacity: .8; }
.karl .karl__lid   { fill: none; stroke: var(--karl-eye-rim); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.karl .karl__mouth { fill: none; stroke: var(--karl-mouth); stroke-width: 1.9; stroke-linecap: round; }
.karl .karl__mouth-open { fill: var(--karl-mouth); }
.karl .karl__bub   { fill: none; stroke: var(--karl-fin, var(--c-home)); stroke-width: 1.5; }
.karl .karl__z     { fill: var(--karl-dots); font-family: var(--font-mono); font-weight: 500; }
.karl .karl__dot   { fill: var(--karl-dots); }

.karl g, .karl path, .karl polygon, .karl text { transform-box: view-box; }
.karl .karl__all    { transform-origin: 96px 58px; }
.karl .karl__tail   { transform-origin: 38px 57.5px; }
.karl .karl__eye    { transform-origin: 127px 50px; }
.karl .karl__pect   { transform-origin: 113px 72px; }
.karl .karl__dorsal { transform-origin: 112px 28px; }

/* idle: schwimmt, Schwanz pendelt, Rückenflosse wellt, blinzelt */
.karl--idle .karl__all    { animation: karl-bob 3.4s ease-in-out infinite alternate; }
.karl--idle .karl__tail   { animation: karl-tail 1.5s ease-in-out infinite alternate; }
.karl--idle .karl__eye    { animation: karl-blink 4.6s infinite; }
.karl--idle .karl__dorsal { animation: karl-ripple 2.6s ease-in-out infinite alternate; }
/* talk: der Mund geht auf und zu, kleines Nicken */
.karl--talk .karl__all { animation: karl-nod .84s ease-in-out infinite; }
.karl--talk .karl__tail { animation: karl-tail 1.1s ease-in-out infinite alternate; }
.karl--talk .karl__mouth-open { animation: karl-mouth .42s steps(1) infinite; }
.karl--talk .karl__mouth      { animation: karl-mouth .42s steps(1) infinite reverse; }
.karl--talk .karl__eye  { animation: karl-blink 3.4s infinite; }
/* point: beugt sich vor, tippt mit der Flosse */
.karl--point .karl__all  { animation: karl-lean 1.3s ease-in-out infinite; }
.karl--point .karl__pect { animation: karl-poke 1.3s ease-in-out infinite; }
.karl--point .karl__tail { animation: karl-tail .9s ease-in-out infinite alternate; }
/* think: neigt sich, schaut hoch, die Punkte kommen nacheinander */
.karl--think .karl__all  { animation: karl-tilt 3.2s ease-in-out infinite alternate; }
.karl--think .karl__tail { animation: karl-tail 2.6s ease-in-out infinite alternate; }
.karl--think .karl__d1 { animation: karl-dot 2.1s infinite; }
.karl--think .karl__d2 { animation: karl-dot 2.1s .35s infinite; }
.karl--think .karl__d3 { animation: karl-dot 2.1s .7s infinite; }
/* happy: hüpft, Schwanz schnell, Sechseck-Blasen steigen */
.karl--happy .karl__all  { animation: karl-hop 1s cubic-bezier(.3, .7, .4, 1) 3; }
.karl--happy .karl__tail { animation: karl-tail .32s ease-in-out infinite alternate; }
.karl--happy .karl__b1 { animation: karl-rise 1.8s infinite; }
.karl--happy .karl__b2 { animation: karl-rise 1.8s .6s infinite; }
.karl--happy .karl__b3 { animation: karl-rise 1.8s 1.2s infinite; }
/* sleep: atmet langsam, z steigen */
.karl--sleep .karl__all  { animation: karl-breathe 3.6s ease-in-out infinite; }
.karl--sleep .karl__tail { animation: karl-tail-slow 3.6s ease-in-out infinite alternate; }
.karl--sleep .karl__z1 { animation: karl-float 3s infinite; }
.karl--sleep .karl__z2 { animation: karl-float 3s 1.5s infinite; }

.karl--still, .karl--still * { animation: none !important; }

@keyframes karl-bob    { from { transform: translateY(-2px); } to { transform: translateY(2.5px); } }
@keyframes karl-tail   { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes karl-tail-slow { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes karl-ripple { from { transform: skewX(0deg); } to { transform: skewX(-6deg); } }
@keyframes karl-blink  { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.12); } 96% { transform: scaleY(1); } }
@keyframes karl-nod    { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-1.5px); } }
@keyframes karl-mouth  { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes karl-lean   { 0%, 100% { transform: translateX(0) rotate(0deg); } 45% { transform: translateX(4px) rotate(-2deg); } }
@keyframes karl-poke   { 0%, 100% { transform: rotate(-4deg); } 45% { transform: rotate(8deg) translateX(3px); } }
@keyframes karl-tilt   { from { transform: rotate(2deg); } to { transform: rotate(-4deg) translateY(-1px); } }
@keyframes karl-dot    { 0% { opacity: 0; transform: translateY(3px); } 25%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes karl-hop    { 0% { transform: translateY(0) scale(1.04, .96); } 40% { transform: translateY(-10px) rotate(-4deg) scale(.98, 1.02); } 70% { transform: translateY(0) scale(1.04, .96); } 85%, 100% { transform: translateY(0) scale(1); } }
@keyframes karl-rise   { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px) scale(1.1); } }
@keyframes karl-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03, 1.035); } }
@keyframes karl-float  { 0% { opacity: 0; transform: translate(0, 4px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -14px); } }

/* Reduce motion: Karl steht still in seiner Grundhaltung – die globale
   Regel (base.css) würde die Bilder sonst auf ihrem letzten Bild
   einfrieren, und dort sind Punkte und Blasen unsichtbar. */
@media (prefers-reduced-motion: reduce) {
  .karl, .karl * { animation: none !important; }
  .tour-bubble__karl { transition: none; }
}
html[data-motion="reduce"] .karl,
html[data-motion="reduce"] .karl * { animation: none !important; }
html[data-motion="reduce"] .tour-bubble__karl { transition: none; }

/* =========================================================
   Die Schicht über der App
   ========================================================= */

.tour {
  position: fixed;
  inset: 0;
  z-index: var(--z-tour);
  pointer-events: none;
  --accent: var(--tour-c, var(--c-home));
}

.tour-step { position: absolute; inset: 0; }

.tour-scrim {
  position: fixed;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  animation: tour-in var(--dur) var(--ease-out);
}
/* Das Dimmen lenkt nur den Blick – es sperrt nichts. Jeder Tipp geht an
   die App; die Lektion setzt erst zurück, wenn wirklich etwas bricht
   (engine.js, targetLost). */
.tour-scrim path { fill: var(--tour-scrim); pointer-events: none; }

/* Neben einer laufenden Einheit: nichts dimmen, nichts sperren. */
.tour-step.is-soft .tour-scrim { display: none; }

.tour-ring {
  position: fixed;
  overflow: visible;
  pointer-events: none;
}
.tour-ring__line { fill: none; stroke: var(--tour-c); stroke-width: 2.5; }
.tour-ring__glow {
  fill: none;
  stroke: var(--tour-c);
  stroke-width: 1.5;
  opacity: .45;
  transform-box: fill-box;
  transform-origin: center;
  animation: tour-pulse 1.6s var(--ease-out) 3;
}
@keyframes tour-pulse { 0% { opacity: .7; transform: scale(.96); } 70% { opacity: 0; transform: scale(1.06); } 100% { opacity: .45; transform: scale(1); } }
@keyframes tour-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Die Blase ---------- */

.tour-bubble {
  --cut: 16px;
  position: fixed;
  pointer-events: auto;
  filter: drop-shadow(0 14px 30px rgba(var(--o-deep), .55));
  animation: tour-pop var(--dur) var(--ease-out);
}
@keyframes tour-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tour-bubble__panel {
  position: relative;
  padding: 14px 16px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  outline: none;
}
.tour-bubble__panel::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; inset-inline-end: 0; top: 0;
  height: 2px;
  background: var(--tour-c);
}
.tour-step.is-nudge .tour-bubble__panel::before { background: var(--tour-nudge); }

.tour-bubble__top { display: flex; align-items: center; gap: 10px; }
.tour-bubble__eyebrow {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 500 max(var(--fs-floor), 10.5px)/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tour-c);
}
.tour-step.is-nudge .tour-bubble__eyebrow { color: var(--tour-nudge); }

.tour-bubble__count { margin-inline-start: auto; flex: none; font: 500 max(var(--fs-floor), 10.5px) var(--font-mono); letter-spacing: .04em; color: var(--text-subtle); }
.tour-pips { display: inline-flex; gap: 4px; flex: none; }
.tu-cont .tour-pips, .tour-bubble__top > .tour-pips:first-child { margin-inline-start: auto; }
.tour-pips i { width: 11px; height: 10px; background: var(--line-strong); clip-path: var(--hex-clip); }
.tour-pips i.is-done { background: var(--tour-c, var(--accent-app)); }
.tour-pips i.is-now { background: color-mix(in srgb, var(--tour-c, var(--accent-app)) 50%, transparent); }

.tour-bubble__say {
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--text-strong);
}
.tour-bubble__say em { font-style: normal; font-weight: 600; color: var(--tour-c); }

.tour-bubble__task {
  --cut: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 9px 11px;
  background: rgba(var(--o), .05);
  clip-path: var(--cut-clip);
}
.tour-bubble__task i { width: 14px; height: 12px; flex: none; background: var(--tour-c); clip-path: var(--hex-clip); }
.tour-bubble__task span {
  flex: none;
  font: 500 max(var(--fs-floor), 10.5px) var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tour-bubble__task b { min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--text-strong); }

.tour-bubble__foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tour-bubble__grow { flex: 1; }

.tour-bubble__tail {
  position: absolute;
  width: 18px;
  height: 12px;
  background: var(--surface-2);
}
.tour-bubble.is-below .tour-bubble__tail { top: -11px; clip-path: polygon(0 100%, 100% 100%, 30% 0); }
.tour-bubble.is-above .tour-bubble__tail { bottom: -11px; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.tour-step.is-free .tour-bubble__tail { display: none; }

.tour-bubble__karl {
  position: absolute;
  width: 84px;
  pointer-events: none;
}
/* Die Drehung zum Ziel setzt coach.js (style.transform) – hier nur der Platz. */
.tour-bubble__karl { transform-origin: 50% 55%; transition: transform var(--dur) var(--ease-out); }
.tour-bubble .tour-bubble__karl.is-flip .karl { transform: scaleX(-1); }
/* Kein Platz neben der Blase (das Ziel füllt das Bild): Karl sitzt klein
   auf ihrer oberen Kante, die Blase macht ihm darunter Platz. */
.tour-bubble.is-tucked .tour-bubble__karl { width: 58px; z-index: 1; }
.tour-bubble.is-tucked .tour-bubble__panel { padding-top: 40px; }
.tour-step.is-free .tour-bubble__karl { transform: none !important; }

.tour-step.is-shake .tour-bubble { animation: tour-shake .42s var(--ease-out); }
@keyframes tour-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* ---------- Angehalten ---------- */

.tour-dock {
  --cut: 10px;
  position: fixed;
  inset-inline-start: 12px;
  bottom: calc(92px + var(--safe-bottom));
  max-width: calc(100% - 24px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 4px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  filter: drop-shadow(0 8px 20px rgba(var(--o-deep), .5));
  pointer-events: auto;
  animation: tour-pop var(--dur) var(--ease-out);
}
.tour-dock__karl { width: 54px; flex: none; }
.tour-dock__text { display: grid; min-width: 0; font-size: 13px; line-height: 1.25; color: var(--text-muted); }
.tour-dock__text b { color: var(--text-strong); font-weight: 600; }
.tour-dock__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ein Knopf zum Schließen – Rechteck mit Sockel, das Kreuz gezeichnet. */
.tour-x,
.tu-search__clear {
  --depth: 2.5px;
  --btn-face: var(--btn-quiet);
  --btn-lift: var(--btn-quiet-lift);
  position: relative;
  isolation: isolate;
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.tour-x::before, .tour-x::after,
.tu-search__clear::before, .tu-search__clear::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.tour-x::before, .tu-search__clear::before { background: var(--btn-lift); transform: translate(var(--depth), var(--depth)); transition: opacity var(--dur-fast) var(--ease-out); }
.tour-x::after, .tu-search__clear::after { background: var(--btn-face); }
.tour-x:active, .tu-search__clear:active { transform: translate(var(--depth), var(--depth)); }
.tour-x:active::before, .tu-search__clear:active::before { opacity: 0; }
.tour-x:focus-visible, .tu-search__clear:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; }
.tour-x span, .tu-search__clear span, .tu-x {
  position: relative;
  width: 14px;
  height: 14px;
  display: block;
}
.tour-x span::before, .tour-x span::after,
.tu-search__clear span::before, .tu-search__clear span::after,
.tu-x::before, .tu-x::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tour-x span::after, .tu-search__clear span::after, .tu-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Einladung ---------- */

.tour-invite {
  --cut: 14px;
  position: fixed;
  inset-inline-start: 12px;
  inset-inline-end: 12px;
  bottom: calc(92px + var(--safe-bottom));
  max-width: 460px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  padding: 12px 12px 12px 8px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  filter: drop-shadow(0 10px 24px rgba(var(--o-deep), .5));
  pointer-events: auto;
  animation: tour-pop var(--dur-slow) var(--ease-out);
}
.tour-invite::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px; background: var(--tour-c); }
.tour-invite__karl { grid-row: 1 / span 2; width: 66px; }
.tour-invite__text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text); }
.tour-invite__text b { font-weight: 600; color: var(--text-strong); }
.tour-invite__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tour-invite .btn3d--primary { --accent: var(--tour-c); }

@media (min-width: 720px) {
  .tour-invite { inset-inline-start: auto; inset-inline-end: 24px; }
}

/* ---------- Abschluss ---------- */

.tour-done {
  --cut: 20px;
  position: fixed;
  inset-inline-start: 50%;
  top: 50%;
  width: min(420px, calc(100% - 28px));
  max-height: calc(100% - 40px);
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 0 18px 18px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  pointer-events: auto;
  animation: tour-pop var(--dur-slow) var(--ease-out);
}
.tour-done::before { content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 0; height: 2px; background: var(--tour-c); }
.tour-done__karl { display: block; width: 150px; margin: 8px auto -2px; }
.tour-done__eyebrow { margin: 0; text-align: center; font: 500 max(var(--fs-floor), 10.5px) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tour-c); }
.tour-done__title { margin: 6px 0 12px; text-align: center; font: italic 400 29px/1.08 var(--font-serif); color: var(--text-strong); text-wrap: balance; }
.tour-done__keep {
  --cut: 10px;
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}
.tour-done__keep p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.tour-done__keep div { display: flex; gap: 8px; }
.tour-done__keep .btn3d { flex: 1; }
.tour-done__kept { color: var(--text-strong) !important; }
.tour-done__acts { display: grid; gap: 10px; margin-top: 14px; }
.tour-done .btn3d--primary { --accent: var(--tour-c); }

/* Die drei Versprechen einer Lektion – auf der Karte und im Abschluss. */
.tour-learn { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tour-learn li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.tour-learn li::before { content: ""; width: 10px; height: 9px; margin-top: 6px; background: var(--tour-c, var(--accent, var(--accent-app))); clip-path: var(--hex-clip); }

/* =========================================================
   Hub · Guide › Tutorial
   ========================================================= */

.tu-search {
  --cut: 12px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 8px 0 14px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}
.tu-search::after { content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; height: 2px; background: var(--accent-deep); opacity: .75; }
.tu-search:focus-within::after { opacity: 1; height: 2.5px; }
.tu-search__icon {
  width: 19px; height: 19px; flex: none;
  fill: none;
  stroke: var(--text-subtle);
  stroke-width: 2;
  stroke-linecap: square;
}
.tu-search:focus-within .tu-search__icon { stroke: var(--accent-app); }
.tu-search__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-strong);
  font: 400 16px var(--font);
  outline: none;
}
.tu-search__input::placeholder { color: var(--text-subtle); }
.tu-search__input::-webkit-search-cancel-button { display: none; }
.tu-search__clear { width: 30px; height: 30px; }

.tu-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -16px; }
.tu-recent__label { font: 500 max(var(--fs-floor), 10.5px) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
.tu-chip {
  --depth: 2px;
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 6px 10px;
  color: var(--text-muted);
  font: 500 12.5px var(--font);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.tu-chip::before, .tu-chip::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.tu-chip::before { background: var(--btn-quiet-lift); transform: translate(var(--depth), var(--depth)); }
.tu-chip::after { background: var(--surface-2); }
.tu-chip:active { transform: translate(var(--depth), var(--depth)); }
.tu-chip:active::before { opacity: 0; }
.tu-chip:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; }

.tu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.tu-head__title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tu-head__count { font: 500 max(var(--fs-floor), 11px) var(--font-mono); color: var(--text-subtle); letter-spacing: .04em; }
.tu-lede { margin: -4px 2px 12px; font-size: 13.5px; color: var(--text-subtle); }

/* Karls Gruß */
.tu-hero {
  --cut: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 4px 10px;
  align-items: center;
  padding: 18px 16px 18px 18px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--t-meditation), .14), transparent 60%), var(--surface);
  clip-path: var(--cut-clip);
}
.tu-hero__eyebrow { grid-column: 1 / -1; margin: 0; font: 500 max(var(--fs-floor), 11px) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-app); }
.tu-hero__title { grid-column: 1; grid-row: 2; margin: 2px 0 4px; font: italic 400 27px/1.08 var(--font-serif); color: var(--text-strong); text-wrap: balance; }
.tu-hero__karl { grid-column: 2; grid-row: 2; width: 140px; margin: -6px -10px 0 0; }
.tu-hero__text { grid-column: 1 / -1; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-muted); }
.tu-hero__acts { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 14px; }
.tu-hero__acts .btn3d { flex: 1; }

/* Continue · Next for you */
.tu-cont {
  --cut: 14px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px 12px 8px;
  background: color-mix(in srgb, var(--ac) 8%, var(--surface));
  clip-path: var(--cut-clip);
}
.tu-cont__karl { width: 64px; }
.tu-cont__body { display: grid; gap: 2px; min-width: 0; }
.tu-cont__eyebrow { font: 500 max(var(--fs-floor), 10.5px) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ac); }
.tu-cont__title { font-size: 16px; font-weight: 600; color: var(--text-strong); }
.tu-cont__meta { font-size: 13px; color: var(--text-subtle); }
.tu-cont .tour-pips { margin: 6px 0 0; --tour-c: var(--ac); }
.tu-cont .btn3d--primary { --accent: var(--ac); }

/* Zeilen */
.tu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tu-row {
  --cut: 12px;
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px 12px 12px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  clip-path: var(--cut-clip);
  color: var(--text);
  text-align: start;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.tu-row:hover { background: var(--surface-2); }
.tu-row:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -3px; }
.tu-row__sign {
  width: 38px;
  height: 33px;
  display: grid;
  place-items: center;
  clip-path: var(--hex-clip);
  background: color-mix(in srgb, var(--row-c, var(--accent-app)) 22%, var(--surface-2));
  color: var(--row-c, var(--accent-app));
  font: 600 13px var(--font-mono);
}
.tu-row.is-done .tu-row__sign { background: var(--row-c, var(--accent-app)); }
.tu-row.is-done .tu-row__sign::before {
  content: "";
  width: 12px;
  height: 7px;
  border-inline-start: 2.5px solid var(--on-accent);
  border-bottom: 2.5px solid var(--on-accent);
  transform: translateY(-2px) rotate(-45deg);
}
.tu-row__body { display: grid; gap: 2px; min-width: 0; }
.tu-row__title { font-size: 15.5px; font-weight: 500; color: var(--text-strong); }
.tu-row__meta { font-size: 12.5px; color: var(--text-subtle); }

.tu-mark { padding: 4px 7px; font: 500 max(var(--fs-floor), 10px) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); background: var(--surface-2); white-space: nowrap; }
.tu-mark--now { color: var(--on-accent); background: var(--row-c, var(--accent-app)); }
.tu-mark--done { color: var(--state-good); background: color-mix(in srgb, var(--state-good) 14%, transparent); }
.tu-mark--changed { color: var(--c-journal); background: color-mix(in srgb, var(--c-journal) 14%, transparent); }

/* First steps, alle erledigt: eine Zeile zum Aufklappen */
.tu-fold { display: grid; gap: 8px; }
.tu-fold__sum {
  --cut: 14px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  clip-path: var(--cut-clip);
  cursor: pointer;
  list-style: none;
}
.tu-fold__sum::-webkit-details-marker { display: none; }
.tu-fold__sum:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -3px; }
.tu-fold__seal { width: 32px; height: 28px; clip-path: var(--hex-clip); background: var(--state-good); }
.tu-fold__text { display: grid; gap: 2px; }
.tu-fold__eyebrow { font: 500 max(var(--fs-floor), 10.5px) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--state-good); }
.tu-fold__title { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.tu-fold__chev { width: 10px; height: 10px; border-inline-end: 2px solid var(--text-subtle); border-bottom: 2px solid var(--text-subtle); transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
.tu-fold[open] .tu-fold__chev { transform: rotate(-135deg); }

/* Bereiche */
.tu-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .tu-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tu-area {
  --cut: 14px;
  display: grid;
  gap: 10px;
  padding: 14px 12px 12px;
  background: var(--surface);
  clip-path: var(--cut-clip);
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.tu-area:hover { background: var(--surface-2); }
.tu-area:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -3px; }
.tu-area__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tu-area__hex { width: 34px; height: 30px; flex: none; display: grid; place-items: center; clip-path: var(--hex-clip); background: var(--ac); }
.tu-area__hex span, .tu-ahead__hex span { width: 17px; height: 17px; background: var(--on-accent); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.tu-area__text { display: grid; gap: 1px; min-width: 0; }
.tu-area__name { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.tu-area__meta { font: 500 max(var(--fs-floor), 10.5px) var(--font-mono); color: var(--text-subtle); letter-spacing: .03em; }

.tu-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 5px; }
.tu-bar i { background: var(--line-strong); }
.tu-bar i.is-on { background: var(--ac); }

/* Seite eines Bereichs */
.tu-ahead { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: center; }
.tu-ahead__hex { width: 62px; height: 54px; display: grid; place-items: center; clip-path: var(--hex-clip); background: var(--ac); }
.tu-ahead__hex span { width: 28px; height: 28px; }
.tu-ahead__eyebrow { display: block; font: 500 max(var(--fs-floor), 11px) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ac); }
.tu-ahead__title { margin: 2px 0 0; font: italic 400 30px/1.05 var(--font-serif); color: var(--text-strong); }
.tu-ahead + .tu-bar { margin-top: -14px; }
.tu-soft {
  --cut: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--ac) 10%, var(--surface));
  clip-path: var(--cut-clip);
  font-size: 13px;
  color: var(--text-muted);
}
.tu-soft i { width: 11px; height: 10px; flex: none; background: var(--ac); clip-path: var(--hex-clip); }
.tu-group { margin: 16px 2px 8px; font: 500 max(var(--fs-floor), 11px) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }

/* Suchergebnisse */
.tu-results { display: grid; gap: 18px; }
.tu-res-group { display: grid; gap: 8px; }
.tu-res-group .tu-head { margin-bottom: 2px; }
.tu-res {
  --cut: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}
.tu-res__path { grid-column: 1; font: 500 max(var(--fs-floor), 10.5px)/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--rc, var(--text-subtle)); }
.tu-res__title { grid-column: 1; font-size: 15.5px; font-weight: 500; color: var(--text-strong); }
.tu-res__snip { grid-column: 1; font-size: 13px; line-height: 1.4; color: var(--text-subtle); }
.tu-res__go { grid-column: 2; grid-row: 1 / span 3; }
.tu-res mark, .tu-results mark { background: color-mix(in srgb, var(--accent-app) 30%, transparent); color: var(--text-strong); padding: 0 1px; }
.tu-dym { margin: 0 2px; font-size: 13.5px; color: var(--text-subtle); }
.tu-dym b { color: var(--accent-app); font-weight: 500; }
.tu-empty { --cut: 12px; margin: 0; padding: 16px; background: var(--surface); clip-path: var(--cut-clip); font-size: 14px; color: var(--text-muted); }

/* Karte einer Lektion */
.tu-card { gap: 16px; }
.tu-card__head { margin: 0; text-align: center; font-size: 16px; }
.tu-shot {
  --cut: 14px;
  position: relative;
  height: 190px;
  overflow: hidden;
  clip-path: var(--cut-clip);
  background: var(--surface-2);
}
/* Ein Bild der Lektion: 375 × 340 aus dem echten Bildschirm, ganz gezeigt. */
.tu-shot:not(.tu-shot--karl) { height: auto; aspect-ratio: 375 / 340; max-height: 300px; }
.tu-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tu-shot--karl { display: grid; place-items: center; background: radial-gradient(70% 80% at 50% 55%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 70%), var(--bg); }
.tu-shot__stage { width: 190px; }
.tu-shot__tag { position: absolute; inset-inline-start: 10px; bottom: 10px; padding: 4px 8px; font: 500 max(var(--fs-floor), 10px) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(var(--o-bg), .84); color: var(--text-muted); }
.tu-card__eyebrow { margin: 0; font: 500 max(var(--fs-floor), 10.5px) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ac); }
.tu-card__title { margin: 4px 0 0; font: italic 400 28px/1.08 var(--font-serif); color: var(--text-strong); text-wrap: balance; }
.tu-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tu-fact { --cut: 10px; padding: 10px 12px; background: var(--surface-2); clip-path: var(--cut-clip); }
.tu-fact b { display: block; font: 500 max(var(--fs-floor), 10px) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
.tu-fact span { display: block; margin-top: 3px; font-size: 14px; color: var(--text); }
.tu-data { --cut: 10px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin: 0; padding: 11px 12px; background: rgba(var(--t-journal), .08); clip-path: var(--cut-clip); font-size: 13.5px; line-height: 1.4; color: var(--text-muted); }
.tu-data i { width: 18px; height: 16px; margin-top: 1px; background: var(--c-journal); clip-path: var(--hex-clip); }
.tu-card__done { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--state-good); }
.tu-card__done i { width: 12px; height: 11px; background: var(--state-good); clip-path: var(--hex-clip); }
.tu-card__acts { display: grid; gap: 10px; }
.tu-pop .tour-learn li::before { background: var(--accent, var(--accent-app)); }

/* Zum Lesen */
.tu-read .tour-learn { margin: 14px 0 22px; }
.tu-read .tour-learn li::before { background: var(--ac); }
.tu-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: tu; }
.tu-steps li {
  --cut: 10px;
  counter-increment: tu;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 12px 14px 12px 10px;
  background: var(--surface);
  clip-path: var(--cut-clip);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.tu-steps li::before {
  content: counter(tu);
  grid-row: 1 / span 2;
  width: 28px;
  height: 24px;
  display: grid;
  place-items: center;
  clip-path: var(--hex-clip);
  background: color-mix(in srgb, var(--ac) 22%, var(--surface-2));
  color: var(--ac);
  font: 600 12px var(--font-mono);
}
.tu-steps b { color: var(--text-strong); font-weight: 600; }
.tu-steps em { font-style: normal; color: var(--text-strong); }
.tu-read__acts { display: grid; gap: 10px; margin-top: 22px; }
.tu-read .btn3d--primary { --accent: var(--ac); }

/* Home › Start here mit Karl */
.hb-karl { grid-template-columns: 68px minmax(0, 1fr); }
.hb-karl__fish { width: 68px; grid-row: 1 / span 2; }
.hb-karl__body { display: grid; gap: 3px; min-width: 0; }
.hb-karl__eyebrow { font: 500 max(var(--fs-floor), 10.5px) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-app); }
.hb-karl__acts { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; }

/* =========================================================
   E-ink: Papier statt Schleier, Kanten statt Leuchten
   ========================================================= */

html[data-eink] {
  --tour-scrim: rgba(220, 219, 217, .86);
  --karl-rim: #000;
  --karl-sheen: rgba(255, 255, 255, .4);
}
html[data-eink] .tour-dock,
html[data-eink] .tour-invite { filter: none; }
/* Die Kante der Blase: ein Rand ginge am Eckschnitt verloren (clip-path
   schneidet ihn ab). Vier harte Schatten am ungeschnittenen Halter
   zeichnen sie entlang der Schnittkante nach. */
html[data-eink] .tour-bubble {
  filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000)
          drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000);
}
html[data-eink] .tour-bubble__panel { background: var(--surface); }
html[data-eink] .tour-done,
html[data-eink] .tour-dock,
html[data-eink] .tour-invite { background: var(--surface); box-shadow: inset 0 0 0 2px #000; }
html[data-eink] .tour-bubble__panel::before,
html[data-eink] .tour-done::before { background: #000; height: 3px; }
html[data-eink] .tour-ring__line { stroke: #000; stroke-width: 3; }
html[data-eink] .tour-ring__glow { display: none; }
html[data-eink] .tour-bubble__tail { background: #000; }
html[data-eink] .tour-bubble__eyebrow,
html[data-eink] .tour-bubble__say em { color: #000; }
html[data-eink] .tour-pips i.is-done,
html[data-eink] .tour-bubble__task i { background: #000; }
html[data-eink] .tu-chip::before { background: #000; }
html[data-eink] .tour-x::before,
html[data-eink] .tu-search__clear::before { background: #000; }
html[data-eink] .tu-bar i.is-on,
html[data-eink] .tu-row.is-done .tu-row__sign { background: #000; }
html[data-eink] .tu-row.is-done .tu-row__sign::before { border-color: #fff; }
html[data-eink] .karl, html[data-eink] .karl * { animation: none !important; }
html[data-eink] .tour-bubble__karl { transition: none; }

/* Sehr schmale Telefone (< 360 px): die Blase etwas dichter, damit über
   oder unter dem Ziel noch Platz für sie bleibt. */
@media (max-width: 359px) {
  .tour-bubble__panel { padding: 12px 13px; }
  .tour-bubble__say { font-size: 14.5px; line-height: 1.4; }
  .tour-bubble__task { margin-top: 10px; padding: 7px 10px; }
  .tour-bubble__foot { margin-top: 10px; }
}

/* Während Karl zeigt, treten die leisen Hinweise der App zur Seite
   (neue Fassung, Speicherhinweis) – nur ein Fehler bleibt stehen. */
html.is-touring .la-alert:not(.la-alert--fatal) { visibility: hidden; }