/* =========================================================
   Life Archive – Home (Home · Shared · Guide)

   Formsprache wie überall: Flächen tragen das geschnittene Eckpaar
   oben links und unten rechts, Knöpfe sind Rechtecke mit Sockel,
   Sechsecke sind Zeichen. Farbe kommt nur aus Tokens; der Ton eines
   Bereichs steht als --tone (Fläche) und --tone-deep (Zweitton) an
   seiner Kachel.

   Abstände folgen einer Skala: 4 · 8 · 12 · 16 · 20 · 24 · 32. Innen
   in Flächen 14–20, zwischen Abschnitten 28, zwischen Geschwistern 8
   oder 10.

   Aufbau
     .hb        Home: Tageszeile, Now, Chips, Kacheln, Next up, Hinweise
     .hb-*      Bausteine, die auch der Guide nutzt (Abschnittskopf,
                Segmentschalter, leerer Zustand)
     .gd-*      Guide: Start here, Kapitel, Neuigkeiten, Leseseite
     .shr-*     Shared: Platzhalter bis zum Server (app/home/shared.js)
   ========================================================= */

/* =========================================================
   Gemeinsame Bausteine
   ========================================================= */

.hb,
.gd {
  display: grid;
  gap: 28px;
  padding-top: 4px;
}

.hb > *,
.gd > * { min-width: 0; }

/* Abschnittskopf – dieselbe Rolle wie .jr-sec: eine Zeile über einer
   Liste, ohne Karte darum. */
.hb-sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 12px;
}

.hb-sec__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hb-sec__link {
  padding: 4px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-app);
  text-decoration: none;
  white-space: nowrap;
}

.hb-sec__link::after { content: " \2192"; }
.hb-sec__link:hover { text-decoration: underline; }

.hb-empty {
  margin: 0;
  padding: 4px 2px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Ein Zeichen aus der Symbolsammlung, eingefärbt über currentColor. */
.hb-icon {
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* Segmentschalter (Guide: Tutorial · Updates). Der Schnitt sitzt am
   Rahmen, nicht an den Stücken; kein Sockel – er schaltet um, er
   handelt nicht. */
.hb-seg {
  --cut: 10px;
  display: flex;
  gap: 3px;
  padding: 4px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.hb-seg__item {
  flex: 1;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.hb-seg__item:hover { background: rgba(var(--o), .05); color: var(--text); }

.hb-seg__item.is-on {
  background: var(--accent-app);
  color: var(--on-accent);
  font-weight: 600;
}

.hb-seg__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  background: var(--state-over);
  color: var(--on-accent);
  font: 700 max(var(--fs-floor), 10.5px)/18px var(--font-mono);
}

/* =========================================================
   Home
   ========================================================= */

/* ---------- Tageszeile ------------------------------------------------- */

.hb-day {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
}

.hb-day__weekday {
  margin: 0 0 2px;
  font: 500 max(var(--fs-floor), 11px)/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.hb-day__date {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--text-strong);
}

/* Die Zahl bekommt eigene Luft und normale Laufweite – sonst liest
   sich „1 October" als „10ctober". */
.hb-day__num {
  margin-inline-end: .14em;
  letter-spacing: 0;
  font-variant-numeric: lining-nums proportional-nums;
}

/* Der Stand ist ein Knopf (öffnet „Your day"). Die Trefferfläche ist
   44 px hoch; der negative Rand hält das Bild, wo es war. Die Fläche
   beim Zeigen liegt auf ::before, damit der Schnitt die Tooltips der
   Sechsecke nicht mit abschneidet. */
.hb-day__meter {
  --cut: 8px;
  flex: none;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: -12px -10px -8px;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.hb-day__meter::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface);
  clip-path: var(--cut-clip);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.hb-day__meter:hover::before,
.hb-day__meter[aria-expanded="true"]::before { opacity: 1; }
.hb-day__meter:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 0; }
.hb-day__meter:active { transform: translateY(1px); }

/* ▾ – sagt, dass hier etwas aufgeht. */
.hb-day__chev {
  flex: none;
  width: 10px;
  height: 10px;
  margin-inline-start: -4px;
  background: var(--text-subtle);
  -webkit-mask: url("../assets/icons/down_icon.svg") center / contain no-repeat;
          mask: url("../assets/icons/down_icon.svg") center / contain no-repeat;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.hb-day__meter:hover .hb-day__chev { background: var(--text-strong); transform: translateY(1px); }
.hb-day__meter[aria-expanded="true"] .hb-day__chev { transform: rotate(180deg); }

.hb-day__segs { display: flex; gap: 3px; }

.hb-day__seg { position: relative; display: block; }

.hb-day__segs i {
  display: block;
  width: 14px;
  height: 6px;
  background: var(--surface-3);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

/* Am Rechner: jedes Sechseck nennt beim Zeigen Bereich und Stand.
   Am Telefon gibt es kein Zeigen – dort sagt es das Fenster. Die
   äußeren zwei hängen nach innen, damit nichts über den Rand ragt. */
@media (hover: hover) and (pointer: fine) {
  .hb-day__seg:hover i { transform: translateY(-2px); }

  .hb-day__seg::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 50%;
    z-index: 5;
    padding: 6px 9px;
    background: var(--surface-3);
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -3px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }

  .hb-day__seg:nth-child(-n+2)::after { inset-inline-start: 0; transform: translate(0, -3px); }
  .hb-day__seg:nth-last-child(-n+2)::after { inset-inline-start: auto; inset-inline-end: 0; transform: translate(0, -3px); }

  .hb-day__seg:hover::after { opacity: 1; transform: translate(-50%, 0); }
  .hb-day__seg:nth-child(-n+2):hover::after,
  .hb-day__seg:nth-last-child(-n+2):hover::after { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hb-day__chev, .hb-day__segs i, .hb-day__seg::after { transition: none; }
}

.hb-day__segs i.is-done { background: var(--tone); }

.hb-day__count {
  font: 500 12px/1 var(--font-mono);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Now -------------------------------------------------------- */

/* Die eine Karte mit dem einen gefüllten Knopf – der Squint-Test soll
   hier landen. Der Ton des Bereichs liegt als leichter Schein in der
   geschnittenen Ecke oben links, nicht als Balken an der Seite. */
.hb-now {
  --cut: 18px;
  position: relative;
  padding: 18px 18px 20px;
  /* Der Schein kommt aus .la-shine (styles/components.css) – dieselbe
     Geste wie überall, wo die App „jetzt" sagt. */
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.hb-now + .hb-chips { margin-top: -18px; }

.hb-now__eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 max(var(--fs-floor), 11px)/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tone, var(--text-muted));
}

.hb-now__sign .hex { --hex-w: 26px; }
.hb-now__sign .hex__icon { width: 58%; height: 58%; }

.hb-now__title {
  margin: 12px 0 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--text-strong);
  text-wrap: balance;
}

.hb-now__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.hb-now__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: 18px;
}

.hb-now__go {
  --accent: var(--tone);
  padding: 12px 20px;
  font-size: 15px;
}

.hb-now__later { padding: 12px 16px; font-size: 14px; }

/* ⋯ – dasselbe Menü wie beim Halten der Karte. Quadratisch, ganz
   rechts, damit es nicht wie ein dritter Vorschlag liest. */
.hb-now__more {
  margin-inline-start: auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
  color: var(--text-muted);
}
.hb-now__more:hover { color: var(--text-strong); }
.hb-now__more .hb-icon { width: 16px; height: 16px; }

/* ---------- „Your day" – der Stand des Tages, aufgeklappt -------------- */

.hb-daypop__menu { gap: 0; }

.hb-daypop__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.hb-dayrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.hb-dayrow__go {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hb-dayrow__go:hover,
.hb-dayrow__go:focus-visible { background: rgba(var(--o), .07); outline: none; }
.hb-dayrow__go:focus-visible { box-shadow: inset 2px 0 0 var(--tone); }

.hb-dayrow__sign .hex { --hex-w: 28px; }
.hb-dayrow__sign .hex__icon { width: 58%; height: 58%; }
.hb-dayrow:not(.is-done) .hb-dayrow__sign { opacity: .72; }

.hb-dayrow__body { display: grid; gap: 3px; min-width: 0; }

.hb-dayrow__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-strong);
}

.hb-dayrow__done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 max(var(--fs-floor), 10.5px)/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tone);
}
.hb-dayrow__done .hb-icon { width: 11px; height: 11px; }

.hb-dayrow__status {
  font: 500 max(var(--fs-floor), 11.5px)/1.3 var(--font-mono);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hb-dayrow__bar { display: block; height: 3px; margin-top: 2px; background: rgba(var(--o), .07); }
.hb-dayrow__bar i { display: block; height: 100%; width: var(--p); background: var(--tone); }

/* „+" je Zeile – trägt ein, ohne den Bereich erst zu öffnen. */
.hb-dayrow__act {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-end: 2px;
  border: 0;
  background: none;
  color: var(--tone);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hb-dayrow__act:hover { background: color-mix(in srgb, var(--tone) 16%, transparent); }
.hb-dayrow__act:focus-visible { outline: 2px solid var(--tone); outline-offset: -4px; }
.hb-dayrow__act .hb-icon { width: 16px; height: 16px; }

.hb-daypop__foot {
  margin: 6px 0 0;
  padding: 9px 10px 4px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-subtle);
  text-wrap: pretty;
}

/* Die Karte als Weg in ihren Bereich: der Link im Titel spannt seine
   Fläche über die ganze Karte; die Knöpfe liegen eine Ebene darüber.
   Beim Zeigen hellt die Tönung auf und der Pfeil rückt nach – leise,
   denn die Hauptsache bleibt der Knopf. */
.hb-now__open { color: inherit; text-decoration: none; }
.hb-now__open::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.hb-now__open:focus-visible { outline: none; }
.hb-now.is-linked:has(.hb-now__open:focus-visible) {
  outline: 2px solid var(--tone);
  outline-offset: -2px;
}
.hb-now__acts { position: relative; z-index: 1; }

.hb-now__chev {
  display: inline-block;
  margin-inline-start: 8px;
  font-weight: 400;
  color: var(--tone);
  transition: transform var(--dur) var(--ease-out);
}

.hb-now.is-linked { transition: background-color var(--dur) var(--ease-out); }
.hb-now.is-linked:hover {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tone) 20%, var(--surface)) 0%,
      var(--surface) 64%);
}
.hb-now.is-linked:hover .hb-now__chev { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .hb-now__chev { transition: none; }
}

.hb-now.is-quiet { background: var(--surface); }
.hb-now.is-quiet .hb-now__eyebrow { color: var(--text-subtle); }
.hb-now.is-quiet .hb-now__title { font-size: 19px; }

/* ---------- Today (seit 13.10.2026, app/home/today.js) ------------------

   Eine Fläche für den ganzen Tag. Oben Kopf und Zahl („7 open · 1 late"),
   dann – falls da – was von früheren Tagen offen blieb, dann je nach
   Ordnung der Schritt mit Zeilen (Queue), Reiter (Tabs) oder Kacheln
   (Board), unten die Zeile „Daily". Höchstens EINE leuchtende Fläche:
   der nächste Schritt. Spät ist Amber (--late), nie Rot. */

.hb-td {
  --cut: 18px;
  position: relative;
  min-width: 0;
  padding: 14px 14px 8px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.hb-td__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 2px;
  padding-inline-start: 4px;
}

.hb-td__title {
  margin: 0;
  font: 600 max(var(--fs-floor), 12px)/1.3 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.hb-td__count {
  margin: 0;
  font: 500 max(var(--fs-floor), 12px)/1.3 var(--font-mono);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.hb-td__count b { font-weight: 600; color: var(--text-strong); }
.hb-td__count em { font-style: normal; color: var(--late); }

/* Der eine Schritt (Queue): die alte Now-Karte, als Fläche in der Karte.
   .hb-now bleibt die Klasse – die Wahl „Now card" unter Look gilt hier. */
.hb-td .hb-nowwrap { margin: 10px -4px 2px; }

.hb-td .hb-now {
  --cut: 12px;
  padding: 13px 14px 14px;
}

.hb-td .hb-now__title {
  display: flex;
  align-items: baseline;
  margin: 8px 0 2px;
  font-size: 20px;
}

.hb-td .hb-now__acts { margin-top: 12px; gap: 10px 12px; }
.hb-td .hb-now__go { padding: 11px 18px; }
.hb-td .hb-now__later { padding: 11px 15px; }
.hb-td .hb-now .hb-icon { width: 15px; height: 15px; }

/* Der Titel ist ein Knopf (öffnet das Fenster des Eintrags), seine
   Fläche legt sich über den ganzen Schritt – die Knöpfe liegen darüber. */
button.hb-now__open {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  cursor: pointer;
}

.hb-td__next { margin-inline-start: auto; padding: 11px 14px; font-size: 14px; }

.hb-td__focus.is-late .hb-now__eyebrow { color: var(--late); }

/* --- Zeilen ------------------------------------------------------------- */

.hb-td__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-td__row {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px;
  min-height: 48px;
  border-top: 1px solid var(--line);
}

.hb-td .hb-nowwrap + .hb-td__list > .hb-td__row:first-child,
.hb-td__group + .hb-td__list > .hb-td__row:first-child,
.hb-td__pinned .hb-td__row:first-child,
.hb-td__panel .hb-td__row:first-child,
.hb-td__earlier .hb-td__row:first-child { border-top-color: transparent; }

/* Die eine hervorgehobene Zeile (Tabs): der nächste Schritt. */
.hb-td__row.is-focus {
  --cut: 8px;
  margin-inline: -6px;
  padding-inline: 6px;
  border-top-color: transparent;
  clip-path: var(--cut-clip);
  background-color: color-mix(in srgb, var(--tone) 7%, transparent);
}
.hb-td__row.is-focus + .hb-td__row { border-top-color: transparent; }

.hb-td__main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 46px;
  padding: 5px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.hb-td__main:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -2px; }

.hb-td__when {
  font: 600 max(var(--fs-floor), 12px)/1.2 var(--font-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hb-td__when.is-late { color: var(--late); }
.hb-td__when.is-soft { font-weight: 500; color: var(--text-subtle); }

.hb-td__txt { display: grid; min-width: 0; }

.hb-td__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hb-td__meta {
  font-size: max(var(--fs-floor), 12.5px);
  line-height: 1.3;
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hb-td__row.is-done .hb-td__name,
.hb-td__row.is-later .hb-td__name { color: var(--text-muted); font-weight: 500; }
.hb-td__row.is-done .hb-td__name { text-decoration: line-through; text-decoration-color: rgba(var(--o), .35); }

.hb-td__sign { display: grid; place-items: center; width: 40px; }
.hb-td__sign .hex { --hex-w: 22px; }
.hb-td__sign .hex__icon { width: 58%; height: 58%; }
.hb-td__hex { --hex-color: var(--c-home); --hex-stroke: var(--c-home-stroke); }

.hb-td__verb { --accent: var(--tone); margin-inline-start: 6px; }

/* Das Sechseck, das abhakt: ein Ring im Ton des Bereichs, gefüllt mit
   Haken, wenn es erledigt ist. 40 × 44 – groß genug für den Daumen. */
.hb-td__chk {
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hb-td__chk i {
  position: relative;
  display: block;
  width: 25px;
  height: 22px;
  clip-path: var(--hex-clip);
  background: var(--tone);
}

.hb-td__chk i::before {
  content: "";
  position: absolute;
  inset: 2px 2.3px;
  clip-path: var(--hex-clip);
  background: var(--surface);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.hb-td__chk.is-late i { background: var(--late); }
.hb-td__chk:hover i::before,
.hb-td__chk:focus-visible i::before { background: color-mix(in srgb, var(--tone) 26%, var(--surface)); }
.hb-td__chk.is-late:hover i::before,
.hb-td__chk.is-late:focus-visible i::before { background: color-mix(in srgb, var(--late) 26%, var(--surface)); }
.hb-td__chk:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -4px; }

.hb-td__chk.is-done i::before { background: var(--tone); }
.hb-td__chk.is-done i::after {
  content: "";
  position: absolute;
  inset-inline-start: 9px;
  top: 4px;
  width: 6px;
  height: 10px;
  border: solid var(--on-accent, #14161b);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

@media (hover: hover) {
  .hb-td__row:not(.is-focus):hover { background: rgba(var(--o), .03); }
}

/* --- Gruppen, „mehr", Daily ---------------------------------------------- */

.hb-td__group {
  margin: 12px 0 0;
  padding-inline-start: 4px;
  font: 600 max(var(--fs-floor), 10.5px)/1.3 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.hb-td__group b { font-weight: 500; color: var(--text-disabled); }

.hb-td__more {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  padding: 8px 4px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--text);
  font: 600 max(var(--fs-floor), 12px)/1.3 var(--font-mono);
  text-align: start;
  cursor: pointer;
}
.hb-td__more small { font: inherit; font-weight: 500; color: var(--text-subtle); }
.hb-td__more:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -2px; }

.hb-td__chev {
  margin-inline-start: auto;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
[aria-expanded="true"] > .hb-td__chev { transform: translateY(2px) rotate(-135deg); }

/* Gewohnheiten: eine Zeile am Fuß, am Telefon seitwärts (CLAUDE.md,
   „Seitwärts-Reihen"), ab 720 px umbrechend. */
.hb-td__daily {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px -14px -8px;
  padding: 8px 14px 10px;
  background: rgba(var(--o-bg2, 0, 0, 0), .16);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.hb-td__daily::-webkit-scrollbar { display: none; }

.hb-td__dlabel {
  flex: none;
  font: 600 max(var(--fs-floor), 10.5px)/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.hb-td__dlist { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hb-td__dlist > li { flex: none; }

.hb-td__dchip {
  --cut: 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px 0 10px;
  border: 0;
  background: rgba(var(--o), .055);
  clip-path: var(--cut-clip);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hb-td__dchip:hover,
.hb-td__dchip:focus-visible { background: rgba(var(--o), .1); }
.hb-td__dchip:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -2px; }
.hb-td__dchip i { flex: none; width: 11px; height: 10px; clip-path: var(--hex-clip); background: var(--tone); }

@media (min-width: 720px) {
  .hb-td__daily { flex-wrap: wrap; overflow: visible; }
  .hb-td__dlist { flex-wrap: wrap; }
}

/* --- Von früheren Tagen: eine Entscheidung ------------------------------- */

.hb-td__earlier {
  --cut: 12px;
  margin: 10px -4px 4px;
  padding: 11px 14px 12px;
  background: color-mix(in srgb, var(--late) 8%, transparent);
  clip-path: var(--cut-clip);
}

.hb-td__eyebrow {
  margin: 0;
  font: 600 max(var(--fs-floor), 11px)/1.3 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--late);
}

.hb-td__elist {
  margin: 5px 0 1px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hb-td__etext { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--text-muted); }

.hb-td__eacts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 10px; }
.hb-td__eacts .btn3d { min-height: 40px; font-size: 13.5px; }
.hb-td__did { --accent-app: var(--late); }
.hb-td__did .hb-icon { width: 14px; height: 14px; }
.hb-td__earlier .hb-td__list { margin-top: 8px; }

/* --- Tabs --------------------------------------------------------------- */

.hb-td__pinned {
  --cut: 8px;
  margin: 10px -4px 0;
  padding: 0 4px;
  background: color-mix(in srgb, var(--late) 6%, transparent);
  clip-path: var(--cut-clip);
}

.hb-td__tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  margin: 10px 0 2px;
  background: rgba(var(--o-bg2, 0, 0, 0), .22);
  box-shadow: inset 0 0 0 1px var(--line);
}

.hb-td__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.hb-td__tab b { font: 600 max(var(--fs-floor), 11px)/1 var(--font-mono); color: var(--text-subtle); }
.hb-td__tab[aria-selected="true"] { background: var(--surface-3); color: var(--text-strong); box-shadow: inset 0 -2px 0 var(--text-strong); }
.hb-td__tab[aria-selected="true"] b { color: var(--text); }
.hb-td__tab:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -2px; }

.hb-td__dot {
  position: absolute;
  top: 9px;
  inset-inline-end: 8px;
  width: 8px;
  height: 7px;
  clip-path: var(--hex-clip);
  background: var(--late);
}

.hb-td__empty { margin: 0; padding: 14px 4px 10px; font-size: 13.5px; color: var(--text-muted); }

/* --- Board -------------------------------------------------------------- */

.hb-td__board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 6px;
  padding: 0;
  list-style: none;
}

.hb-td__tile {
  --cut: 10px;
  position: relative;
  min-width: 0;
  min-height: 88px;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--tone) 9%, rgba(var(--o), .03));
  transition: background-color var(--dur) var(--ease-out);
}

.hb-td__tbtn {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 88px;
  padding: 9px 9px 9px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.hb-td__tbtn:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -3px; }

.hb-td__ttop { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hb-td__tsign .hex { --hex-w: 19px; }
.hb-td__tsign .hex__icon { width: 58%; height: 58%; }
.hb-td__ttop small {
  font: 600 max(var(--fs-floor), 10.5px)/1 var(--font-mono);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hb-td__ttop small.is-late { color: var(--late); }

.hb-td__tname {
  align-self: end;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Das Sechseck zum Abhaken sitzt dort, wo sonst das Zeichen steht. */
.hb-td__tslot { flex: none; width: 21px; height: 19px; }
.hb-td__tchk { position: absolute; inset-inline-start: 0; top: 0; width: 40px; height: 38px; }
.hb-td__tchk i { width: 21px; height: 19px; }
.hb-td__tchk.is-done i::after { inset-inline-start: 7.5px; top: 3.5px; width: 5px; height: 9px; border-width: 0 2px 2px 0; }

.hb-td__tile.is-late { box-shadow: inset 0 3px 0 var(--late); }
.hb-td__tile.is-done { background: color-mix(in srgb, var(--tone) 30%, rgba(var(--o), .02)); }
.hb-td__tile.is-done .hb-td__tname { color: var(--text); opacity: .8; }
.hb-td__tile.is-later { opacity: .55; }
.hb-td__tile.is-more { display: grid; background: rgba(var(--o), .05); }
.hb-td__tmore { align-self: center; justify-self: center; font: 600 max(var(--fs-floor), 13px)/1 var(--font-mono); color: var(--text); }
.hb-td__tile.is-more .hb-td__tbtn { grid-template-rows: 1fr; }

/* --- Ruhig: nichts offen -------------------------------------------------- */

.hb-td__quiet { padding: 10px 4px 8px; }
.hb-td__qtitle { margin: 8px 0 4px; font-size: 19px; font-weight: 700; color: var(--text-strong); }
.hb-td__qtext { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); }

/* --- Was den ganzen Tag gilt, neben dem Datum ----------------------------- */

.hb-day__info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-basis: 100%;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.hb-day__chip {
  --cut: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 10px 4px 8px;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--tone) 11%, transparent);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.hb-day__chip:hover { background: color-mix(in srgb, var(--tone) 18%, transparent); }
.hb-day__chip .hb-icon { width: 13px; height: 13px; background: var(--tone); }

/* --- Das Fenster eines Eintrags ------------------------------------------- */

.hb-tdpop-panel { width: min(440px, 100%); }

.hb-tdpop { display: grid; gap: 10px; padding: 18px 20px 14px; }

.hb-tdpop__eb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 600 max(var(--fs-floor), 11px)/1.3 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tone);
}
.hb-tdpop__eb.is-late { color: var(--late); }
.hb-tdpop__sign .hex { --hex-w: 22px; }
.hb-tdpop__sign .hex__icon { width: 58%; height: 58%; }

.hb-tdpop__title { margin: 2px 0 0; font-size: 23px; font-weight: 700; line-height: 1.2; color: var(--text-strong); text-wrap: balance; }
.hb-tdpop__title.is-done { text-decoration: line-through; text-decoration-color: rgba(var(--o), .35); }
.hb-tdpop__text { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-muted); }
.hb-tdpop__why { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.hb-tdpop__why b { color: var(--text); font-weight: 600; }

.hb-tdpop__dl {
  display: grid;
  grid-template-columns: minmax(80px, auto) minmax(0, 1fr);
  gap: 6px 14px;
  margin: 2px 0 0;
}
.hb-tdpop__dl dt { font: 600 max(var(--fs-floor), 11px)/1.6 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.hb-tdpop__dl dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }

.hb-tdpop__sub { margin: 0; padding: 0; list-style: none; }
.hb-tdpop__sub li { display: flex; align-items: center; gap: 4px; min-height: 40px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--text); }
.hb-tdpop__sub li.is-done span { color: var(--text-muted); text-decoration: line-through; }
.hb-tdpop__dot { flex: none; width: 8px; height: 7px; margin: 0 12px 0 4px; clip-path: var(--hex-clip); background: var(--tone); }

.hb-tdpop__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 6px; }
.hb-tdpop__acts--end { justify-content: flex-end; }
.hb-tdpop__acts .btn3d--accent { --accent: var(--tone); }
.hb-tdpop__acts .hb-icon { width: 15px; height: 15px; }

.hb-tdpop__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.hb-tdpop__step {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--text-strong);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.hb-tdpop__step:disabled { color: var(--text-disabled); cursor: default; }
.hb-tdpop__step:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -2px; }
.hb-tdpop__pos { font: 500 max(var(--fs-floor), 12px)/1 var(--font-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }

.hb-tdpop__time { display: grid; gap: 6px; font-size: 13px; color: var(--text-muted); }
.hb-tdpop__time input {
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-strong);
  font: 600 20px/1 var(--font-mono);
  color-scheme: dark;
}
.hb-tdpop__time input:focus-visible { outline: 2px solid var(--tone); outline-offset: 0; }

@media (prefers-reduced-motion: reduce) {
  .hb-td__chk i::before, .hb-td__chev, .hb-td__tile, .hb-td__dchip { transition: none; }
}

/* ---------- Bereichskacheln -------------------------------------------- */

.hb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-tile {
  --cut: 14px;
  position: relative;
  min-width: 0;
  background: var(--surface);
  clip-path: var(--cut-clip);
  transition: background-color var(--dur) var(--ease-out);
}

.hb-tile:hover { background: var(--surface-2); }

.hb-tile__link {
  min-height: 120px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 14px 20px;
  color: inherit;
  text-decoration: none;
}

a.hb-tile__link:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: -4px;
}

.hb-tile__sign .hex { --hex-w: 40px; }
.hb-tile__sign .hex__icon { width: 56%; height: 56%; }

.hb-tile__name {
  margin-top: auto;
  padding-top: 14px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-strong);
}

.hb-tile__status {
  margin-top: 4px;
  /* Ein langer Name im Stand („Workout …") zog die Kachel über den Rand
     (10.10.2026): umbrechen statt schieben. */
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 400 max(var(--fs-floor), 11.5px)/1.45 var(--font-mono);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.hb-tile.is-done .hb-tile__status { color: var(--tone); }

/* Der Handgriff rechts oben: eintragen oder starten, ohne erst in den
   Bereich zu gehen. Ein Knopf – eckig, mit Sockel, sinkt ein. */
.hb-tile__act {
  --depth: 3px;
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  isolation: isolate;
  width: 40px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tone);
  transition: transform var(--dur-fast) var(--ease-out);
}

.hb-tile__act::before,
.hb-tile__act::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Getönt (zweite Stufe, styles/components.css): ein Hauch der
   Bereichsfarbe als Fläche, die Kante in voller Stärke, der Sockel in
   ihrem tiefen Ton. Dieselbe Form tragen die Knöpfe der Verknüpfungen
   und alle „+" im Editor (styles/doc.css). */
.hb-tile__act::before {
  background: color-mix(in srgb, var(--tone) var(--btn-tinted-lift), transparent);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.hb-tile__act::after {
  background: color-mix(in srgb, var(--tone) var(--btn-tinted), var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone) var(--btn-tinted-edge), transparent);
  transition: background-color var(--dur) var(--ease-out);
}

.hb-tile__act:hover::after,
.hb-tile__act:focus-visible::after {
  background: color-mix(in srgb, var(--tone) var(--btn-tinted-hover), var(--surface));
}
.hb-tile__act:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; }
.hb-tile__act:active { transform: translate(var(--depth), var(--depth)); }
.hb-tile__act:active::before { opacity: 0; }

.hb-tile__act .hb-icon { width: 16px; height: 16px; }

/* Der Tagesstand an der Unterkante – ohne Radius, in voller Breite. */
.hb-tile__bar,
.hb-tile__segs {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  height: 4px;
  pointer-events: none;
}

.hb-tile__bar { background: var(--surface-3); }

.hb-tile__bar i {
  display: block;
  width: var(--p, 0%);
  height: 100%;
  background: var(--tone);
}

.hb-tile__segs { display: flex; gap: 2px; }
.hb-tile__segs i { flex: 1; background: var(--surface-3); }
.hb-tile__segs i.is-done { background: var(--tone); }

/* ---------- Next up ------------------------------------------------------ */

.hb-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-row {
  --cut: 10px;
  min-height: 54px;
  display: grid;
  grid-template-columns: 50px 8px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  clip-path: var(--cut-clip);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}

.hb-row:hover { background: var(--surface-2); }
.hb-row:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -3px; }

.hb-row__when {
  font: 500 12px/1 var(--font-mono);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.hb-row.is-late .hb-row__when { color: var(--state-over); }

.hb-row__dot { width: 8px; height: 8px; background: var(--tone); }

.hb-row__body { display: grid; gap: 2px; min-width: 0; }

.hb-row__title,
.hb-row__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hb-row__title { font-size: 14.5px; font-weight: 500; color: var(--text-strong); }
.hb-row__meta { font-size: 12.5px; color: var(--text-subtle); }

/* ---------- What's new · Start here ------------------------------------ */

.hb-note__card {
  --cut: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--accent-app) 9%, var(--surface));
  clip-path: var(--cut-clip);
}

.hb-note:not(.hb-note--news) .hb-note__card { background: var(--surface); }

.hb-note__tag {
  padding: 4px 7px;
  background: var(--accent-app);
  color: var(--on-accent);
  font: 700 max(var(--fs-floor), 11px)/1.2 var(--font-mono);
}

.hb-note__tag--quiet { background: var(--surface-3); color: var(--text); }

.hb-note__body {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.hb-note__body:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 4px; }

.hb-note__title { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.hb-note__text { font-size: 13px; line-height: 1.45; color: var(--text-muted); }

.hb-note__btn { padding: 9px 13px; font-size: 13px; }

/* „Keep your data" (app/home/hub.js, 10.10.2026): Text oben, darunter
   die zwei Knöpfe – eine Spalte statt Marke · Text · Knopf. */
.hb-note--keep .hb-note__card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hb-note__acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Edit-Modus ---------------------------------------------------- */

.hb-hint {
  --cut: 10px;
  margin: 0;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--accent-app) 10%, transparent);
  clip-path: var(--cut-clip);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Im Edit-Modus stehen Zeichen, Name und darunter der Knopf – die
   Kachel wächst mit ihrem Inhalt, statt eine feste Höhe zu füllen. */
.hb-tile--edit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hb-tile--edit .hb-tile__link {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  padding-bottom: 14px;
}

.hb-tile--edit .hb-tile__toggle {
  margin: 0 14px 16px;
  padding: 8px 14px;
  font-size: 13px;
}

.hb-tile--edit.is-hidden .hb-tile__sign,
.hb-tile--edit.is-hidden .hb-tile__name { opacity: .5; }

/* Ziehen: die Kachel an ihrem Platz wird zur Lücke (leicht getönte
   Fläche, kein Inhalt), die am Zeiger hebt sich mit einem Schatten
   ab. So ist immer klar, wo sie landet, wenn man loslässt. */
.hb-tile--edit.is-dragging {
  background: color-mix(in srgb, var(--tone) 10%, transparent);
}

.hb-tile--edit.is-dragging > * { visibility: hidden; }

.hb-tile.is-ghost {
  opacity: 1;               /* doc.css macht Geister halb durchsichtig */
  background: var(--surface-3);
  filter: drop-shadow(0 12px 18px rgba(var(--o-deep), .45));
  cursor: grabbing;
}

body.is-sorting,
body.is-sorting * { cursor: grabbing; user-select: none; }

.hb-reset {
  justify-self: start;
  padding: 10px 16px;
  font-size: 13.5px;
}

.hb-layout { display: grid; gap: 28px; }

/* Der Griff: sechs Punkte – eckig wie alles. Eine Trefferfläche von
   44 × 44, auch wenn die Punkte klein sind. */
.hb-grip {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 44px;
  height: 44px;
  display: grid;
  grid-template-columns: repeat(2, 4px);
  align-content: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: grab;
  touch-action: none;
}

.hb-grip i { width: 4px; height: 4px; background: var(--text-subtle); }
.hb-grip:hover i,
.hb-grip:focus-visible i { background: var(--text-strong); }
.hb-grip:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -4px; }

.hb-sections { display: grid; gap: 6px; }
.hb-sections .hb-sec { margin-bottom: 6px; }

.hb-switch {
  --cut: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface);
  clip-path: var(--cut-clip);
  cursor: pointer;
}

.hb-switch__body { display: grid; gap: 3px; min-width: 0; }
.hb-switch__name { font-size: 15px; font-weight: 500; color: var(--text-strong); }
.hb-switch__hint { font-size: 13px; color: var(--text-muted); }

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

@media (prefers-reduced-motion: no-preference) {
  /* Nur beim Betreten von Home – im Edit-Modus wandern Kacheln durchs
     DOM, und jede Verschiebung spielte die Animation sonst neu ab. */
  .hb-grid .hb-tile:not(.hb-tile--edit) {
    animation: hb-rise var(--dur-slow) var(--ease-out) backwards;
  }
  .hb-grid .hb-tile:nth-child(2) { animation-delay: 40ms; }
  .hb-grid .hb-tile:nth-child(3) { animation-delay: 80ms; }
  .hb-grid .hb-tile:nth-child(4) { animation-delay: 120ms; }
  .hb-grid .hb-tile:nth-child(5) { animation-delay: 160ms; }
  .hb-grid .hb-tile:nth-child(6) { animation-delay: 200ms; }
  .hb-grid .hb-tile:nth-child(n+7) { animation-delay: 240ms; }

  .hb-tile__bar i { animation: hb-grow 700ms var(--ease-out) 200ms backwards; }

  .hb-now { animation: hb-rise var(--dur-slow) var(--ease-out) backwards; }
}

@keyframes hb-rise {
  from { transform: translateY(8px); opacity: .001; }
}

@keyframes hb-grow {
  from { width: 0; }
}

/* =========================================================
   Shared – bis zum Server ein Platzhalter

   Drei Teile: die Karte mit Karl (was kommt), die Bereiche (was man
   teilen können wird), die vier Stufen (wer es sieht). Alles sind
   Flächen zum Lesen, nichts ist ein Knopf – darum überall das Eckpaar
   und kein Sockel. Die Flächen nehmen den Look von Home an
   (.shr-card in styles/look.css, Cards).
   ========================================================= */

/* Die Seite trägt .hb (für den Look), aber nicht dessen zwei Spalten ab
   900 px: hier gibt es nichts nebeneinanderzustellen, und eine schmale
   Spalte links mit leerer Fläche rechts sähe aus wie ein Fehler. Eine
   Lesespalte; die Bereiche darin legen sich selbst in Spalten. */
.hb.shr:not(.is-editing) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 920px;
}

.shr-card {
  --cut: 14px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.shr-hero {
  --cut: 18px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px 18px 20px;
}

.shr-hero__karl { display: block; width: 76px; }
.shr-hero__karl .karl { width: 100%; height: auto; }
.shr-hero__body { display: grid; gap: 6px; min-width: 0; }

.shr-hero__eyebrow {
  margin: 0;
  font: 500 max(var(--fs-floor), 11px)/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.shr-hero__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-strong);
  text-wrap: balance;
}

.shr-hero__text {
  margin: 0;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Schmal: Karl über dem Text, damit die Zeilen nicht zu kurz werden. */
@media (max-width: 380px) {
  .shr-hero { grid-template-columns: minmax(0, 1fr); }
  .shr-hero__karl { width: 64px; }
}

/* ---------- Teilen als Datei – geht heute schon ------------------------
   Eine Fläche mit zwei Knöpfen. Nur „Share as a file" ist voll gefüllt –
   die eine volle Fläche des Bildschirms; „Open a shared file" ist getönt. */

.shr-file {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}

.shr-file__body { display: grid; gap: 6px; min-width: 0; }

.shr-file__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-strong);
}

.shr-file__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.shr-file__acts .btn3d { flex: 1 1 180px; }

@media (min-width: 720px) {
  .shr-file { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .shr-file__acts .btn3d { flex: 0 0 auto; }
}

/* ---------- Was man teilen können wird -------------------------------- */

.shr-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shr-area {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 16px 12px 14px;
}

.shr-area__sign .hex { --hex-w: 30px; }
.shr-area__sign .hex__icon { width: 56%; height: 56%; }
.shr-area__text { display: grid; gap: 2px; min-width: 0; }
.shr-area__name { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.shr-area__what { font-size: 13px; line-height: 1.45; color: var(--text-muted); }

/* ---------- Wer es sieht ----------------------------------------------- */

.shr-levels {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shr-level {
  display: grid;
  grid-template-columns: 44px 104px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 13px 16px;
}

/* Vier Kästchen – so viele sind gefüllt, wie viele lesen dürfen. Eckig
   wie alles; zu klein für das Eckpaar (Größenuntergrenze). */
.shr-level__pips { display: inline-flex; gap: 3px; align-self: center; }
.shr-level__pips i { display: block; width: 8px; height: 8px; background: var(--surface-3); }
.shr-level__pips i.is-on { background: var(--text-muted); }
.shr-level__name { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.shr-level__text { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 480px) {
  .shr-level { grid-template-columns: 44px minmax(0, 1fr); row-gap: 2px; }
  .shr-level__text { grid-column: 2; }
}

.shr-foot { margin-top: 10px; }

/* Papier: ruhige Flächen, die Kästchen schwarz auf Grau. */
html[data-eink] .shr-card { background: var(--surface); }
html[data-eink] .shr-level__pips i { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; }
html[data-eink] .shr-level__pips i.is-on { background: #000000; }

/* =========================================================
   Guide
   ========================================================= */

/* ---------- Start here --------------------------------------------------- */

.gd-start {
  --cut: 18px;
  padding: 20px 18px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.gd-start__eyebrow {
  margin: 0;
  font: 500 max(var(--fs-floor), 11px)/1.4 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.gd-start__title {
  margin: 8px 0 6px;
  font: italic 400 25px/1.2 var(--font-serif);
  color: var(--text-strong);
  text-wrap: balance;
}

.gd-start__text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.gd-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gd-step {
  --cut: 9px;
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  color: var(--text);
  text-align: start;
  font-size: 14.5px;
  transition: background-color var(--dur) var(--ease-out);
}

.gd-step:hover { background: var(--surface-3); }
.gd-step:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -3px; }

.gd-step__check {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--text-muted);
  font: 700 12px/1 var(--font-mono);
}

.gd-step.is-done .gd-step__check {
  background: var(--state-good);
}

.gd-step.is-done .gd-step__check::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--on-accent);
  -webkit-mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
          mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
}

.gd-step.is-done .gd-step__label {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--text-subtle);
}

.gd-step__hint {
  font: 500 max(var(--fs-floor), 11.5px)/1 var(--font-mono);
  color: var(--text-subtle);
  white-space: nowrap;
}

.gd-progress {
  height: 4px;
  margin-top: 16px;
  background: var(--surface-3);
}

.gd-progress i {
  display: block;
  width: var(--p, 0%);
  height: 100%;
  background: var(--accent-app);
  transition: width var(--dur-slow) var(--ease-out);
}

/* ---------- Start here, erledigt: eine Zeile, die aufgeht ---------------- */

.gd-start--done { padding: 0; }

.gd-start__sum {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur) var(--ease-out);
}
.gd-start__sum::-webkit-details-marker { display: none; }
.gd-start__sum:hover { background: var(--surface-2); }
.gd-start__sum:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -3px; }

/* Dasselbe Häkchen wie an einem erledigten Schritt – nur als Siegel. */
.gd-start__seal {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--state-good);
}
.gd-start__seal::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--on-accent);
  -webkit-mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
          mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
}

.gd-start__sumtext { display: grid; gap: 3px; min-width: 0; }
.gd-start__sumtext .gd-start__eyebrow { color: var(--state-good); }

.gd-start__sumtitle {
  font: italic 400 19px/1.2 var(--font-serif);
  color: var(--text-strong);
}

.gd-start__more {
  width: 16px;
  height: 16px;
  justify-self: end;
  background: var(--text-muted);
  -webkit-mask: url("../assets/icons/down_icon.svg") center / contain no-repeat;
          mask: url("../assets/icons/down_icon.svg") center / contain no-repeat;
  transition: transform var(--dur) var(--ease-out);
}
.gd-start--done[open] .gd-start__more { transform: rotate(180deg); }

.gd-start__open {
  padding: 0 18px 18px;
  animation: gd-start-open var(--dur) var(--ease-out);
}

@keyframes gd-start-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gd-start__open { animation: none; }
  .gd-start__more { transition: none; }
}

/* ---------- Kapitel-Liste ------------------------------------------------ */

.gd-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gd-row {
  --cut: 10px;
  min-height: 60px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--surface);
  clip-path: var(--cut-clip);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}

.gd-row:hover { background: var(--surface-2); }
.gd-row:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -3px; }

.gd-row__sign .hex { --hex-w: 34px; }
.gd-row__sign .hex__icon { width: 56%; height: 56%; }

.gd-row__body { display: grid; gap: 2px; min-width: 0; }

.gd-row__title { font-size: 15px; font-weight: 600; color: var(--text-strong); }

.gd-row__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-subtle);
}

.gd-mark {
  padding: 4px 7px;
  background: var(--surface-3);
  color: var(--text-muted);
  font: 500 max(var(--fs-floor), 10.5px)/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gd-mark--new {
  background: color-mix(in srgb, var(--accent-app) 22%, transparent);
  color: var(--accent-app);
}

.gd-mark--read {
  background: color-mix(in srgb, var(--state-good) 18%, transparent);
  color: var(--state-good);
}

/* ---------- Neuigkeiten --------------------------------------------------- */

.gd-update {
  display: grid;
  gap: 6px;
  padding: 16px 2px 18px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.gd-update:hover .gd-update__title { text-decoration: underline; text-underline-offset: 3px; }
.gd-update:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

.gd-update__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 max(var(--fs-floor), 11.5px)/1 var(--font-mono);
  color: var(--text-subtle);
}

/* Gelesen / ungelesen. Ungelesen trägt DIESELBE Farbe wie die Zahl am
   Reiter und am Segment (--state-over) – so verbindet das Auge die „1"
   mit genau dieser Zeile. Eine Kante links, ein Hauch Fläche, das Wort
   „Unread". Gelesen tritt zurück: grüne Marke, gedämpfter Titel. */
.gd-update { position: relative; }

.gd-update.is-unread {
  padding-inline: 14px 10px;
  background: color-mix(in srgb, var(--state-over) 7%, transparent);
  box-shadow: inset 3px 0 0 var(--state-over);
  animation: gd-unread-in var(--dur-slow, .42s) var(--ease-out) both;
}

.gd-update:not(.is-unread) .gd-update__title { color: var(--text); }
.gd-update:not(.is-unread) .gd-update__text { color: var(--text-subtle); }

.gd-update__state {
  margin-inline-start: auto;
  padding: 3px 7px;
  background: var(--state-over);
  color: var(--on-accent);
  font: 700 max(var(--fs-floor), 10px)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gd-update__state.is-read {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-subtle);
  font-weight: 500;
}

@keyframes gd-unread-in {
  from { box-shadow: inset 0 0 0 var(--state-over); background: transparent; }
}

/* Kopf der Updates-Liste: was ungelesen ist, mit Namen, und zwei Wege. */
.gd-inbox {
  --cut: 12px;
  display: grid;
  gap: 10px;
  margin: 18px 0 6px;
  padding: 16px 16px 18px;
  background: color-mix(in srgb, var(--state-over) 9%, var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-over) 40%, transparent);
  clip-path: var(--cut-clip);
}

.gd-inbox__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}

.gd-inbox__count,
.gd-notice__count {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  background: var(--state-over);
  color: var(--on-accent);
  font: 700 12.5px/1 var(--font-mono);
}

.gd-inbox__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 16px/1.4 var(--font-serif);
  color: var(--text);
}

.gd-inbox__list li { display: flex; align-items: baseline; gap: 8px; }

.gd-inbox__ver {
  flex: none;
  padding: 2px 6px;
  background: var(--surface-3);
  color: var(--text-muted);
  font: 500 max(var(--fs-floor), 11px)/1.3 var(--font-mono);
}

.gd-inbox__actions,
.gd-next__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* Nichts offen: eine ruhige Zeile mit Siegel, kein Kasten. */
.gd-inbox--clear {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  font-size: 13.5px;
  color: var(--text-muted);
}

.gd-inbox__seal {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--state-good);
}
.gd-inbox__seal::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--on-accent);
  -webkit-mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
          mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
}

/* Ende eines Beitrags: der nächste ungelesene als Karte, die man antippt. */
.gd-next {
  display: grid;
  gap: 14px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.gd-next__card {
  --cut: 12px;
  display: grid;
  gap: 4px;
  padding: 14px 16px 16px;
  background: color-mix(in srgb, var(--state-over) 8%, var(--surface-2));
  box-shadow: inset 3px 0 0 var(--state-over);
  clip-path: var(--cut-clip);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.gd-next__card:hover { background: color-mix(in srgb, var(--state-over) 14%, var(--surface-2)); }
.gd-next__card:active { transform: translateY(1px); }
.gd-next__card:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

.gd-next__eyebrow,
.gd-notice__eyebrow {
  font: 600 max(var(--fs-floor), 10.5px)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--state-over);
}

.gd-next__title { font-size: 17px; font-weight: 600; color: var(--text-strong); }
.gd-next__title::after { content: "  ›"; color: var(--state-over); }
.gd-next__meta { font: 500 max(var(--fs-floor), 11.5px)/1.2 var(--font-mono); color: var(--text-subtle); }

/* Tutorial: wofür die Zahl am Reiter steht – eine Zeile, ein Tipp. */
.gd-notice {
  --cut: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 4px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--state-over) 8%, var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-over) 35%, transparent);
  clip-path: var(--cut-clip);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}
.gd-notice:hover { background: color-mix(in srgb, var(--state-over) 14%, var(--surface-2)); }
.gd-notice:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

.gd-notice__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.gd-notice__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}
.gd-notice__go {
  flex: none;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--state-over);
}
.gd-notice__go::after { content: " ›"; }

@media (prefers-reduced-motion: reduce) {
  .gd-update.is-unread { animation: none; }
}

html[data-eink] .gd-update.is-unread,
html[data-eink] .gd-inbox,
html[data-eink] .gd-next__card,
html[data-eink] .gd-notice { background: #ffffff; box-shadow: inset 0 0 0 2px #000000; }
html[data-eink] .gd-update__state,
html[data-eink] .gd-inbox__count,
html[data-eink] .gd-notice__count { background: #000000; color: #ffffff; }

.gd-update__version {
  padding: 3px 6px;
  background: var(--surface-3);
  color: var(--text);
}

.gd-update__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-strong);
}

.gd-update__text {
  font: 400 16px/1.5 var(--font-serif);
  color: var(--text-muted);
}

.gd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.gd-tag {
  padding: 3px 7px;
  background: var(--surface-3);
  color: var(--text-muted);
  font: 500 max(var(--fs-floor), 10.5px)/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gd-tag--new {
  background: color-mix(in srgb, var(--state-good) 18%, transparent);
  color: var(--state-good);
}

.gd-tag--improved {
  background: color-mix(in srgb, var(--c-calendar) 18%, transparent);
  color: var(--c-calendar);
}

.gd-tag--fixed {
  background: color-mix(in srgb, var(--state-warn) 18%, transparent);
  color: var(--state-warn);
}

/* ---------- Leseseite ------------------------------------------------------ */

.gd-back {
  justify-self: start;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  font-size: 13.5px;
}

.gd-back + .gd-article { margin-top: -8px; }

.gd-article {
  width: 100%;
  max-width: var(--flow);
  margin-inline: auto;
}

.gd-article__head { display: grid; justify-items: start; gap: 8px; margin-bottom: 20px; }

.gd-article__sign .hex { --hex-w: 52px; }
.gd-article__sign .hex__icon { width: 56%; height: 56%; }

.gd-article__eyebrow {
  margin: 8px 0 0;
  font: 500 max(var(--fs-floor), 11.5px)/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.gd-article__title {
  margin: 0;
  font: 500 32px/1.15 var(--font-serif);
  letter-spacing: -.01em;
  color: var(--text-strong);
  text-wrap: balance;
}

.gd-article__lede {
  margin: 0 0 16px;
  font: italic 400 20px/1.45 var(--font-serif);
  color: var(--text-strong);
}

.gd-article__h {
  margin: 28px 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-strong);
}

.gd-article__p {
  margin: 0 0 14px;
  max-width: 64ch;
  font: 400 17.5px/1.6 var(--font-serif);
  color: var(--text);
}

/* Bildschirmfotos eines Updates: eine Reihe zum Wischen. Jedes Bild
   in einer Fläche mit den zwei Schnitten, darunter die Unterschrift.
   Auf dem Telefon ragt das nächste Bild ins Feld – so sieht man, dass
   es weitergeht, ohne dass ein Pfeil es sagen muss. */
.gd-figs {
  display: flex;
  gap: 14px;
  margin: 22px calc(-1 * var(--gutter)) 8px;
  padding: 0 var(--gutter) 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.gd-figs::-webkit-scrollbar { display: none; }

.gd-fig {
  flex: 0 0 min(62%, 232px);
  margin: 0;
  scroll-snap-align: start;
}

.gd-fig__frame {
  --cut: 14px;
  display: block;
  padding: 6px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.gd-fig--video .gd-fig__frame { position: relative; }
.gd-fig__tag {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  padding: 3px 8px;
  background: var(--text-strong);
  color: var(--bg);
  font: 600 max(var(--fs-floor), 11px) / 1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

.gd-fig__frame img,
.gd-fig__frame video {
  display: block;
  background: #000;
  width: 100%;
  height: auto;
  aspect-ratio: 464 / 1004;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.gd-fig__cap {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Ab Tablet-Breite ist Platz für alle Bilder nebeneinander – dann wird
   nicht gewischt, sondern gezeigt. Die Reihe tritt dafür aus der engen
   Textspalte (--flow, 560px) heraus, sonst wären vier Bildschirmfotos
   kaum breiter als ein Daumen; reicht die Breite nicht für alle,
   brechen sie in eine zweite Zeile um statt seitwärts zu laufen.
   Regel: ein Wischstreifen ist eine Telefon-Form. Wo eine Maus ist,
   darf nichts nur seitwärts erreichbar sein. */
@media (min-width: 720px) {
  .gd-figs {
    --figs-w: min(calc(100vw - 2 * var(--gutter)), 920px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    width: var(--figs-w);
    margin-inline: calc((100% - var(--figs-w)) / 2);
    padding: 0 0 10px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .gd-fig { min-width: 0; }
}

html[data-eink] .gd-fig__frame { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; }

/* Die Änderungen eines Updates: je Art eine Gruppe (New · Changed ·
   Fixed · Removed), die Marke als Überschrift, darunter eine Liste.
   Jeder Punkt beginnt mit einem kleinen Quadrat in der Farbe der Art –
   eckig wie alles in der App. */
.gd-tag--removed {
  background: color-mix(in srgb, var(--state-bad, var(--text-muted)) 18%, transparent);
  color: var(--state-bad, var(--text-muted));
}

.gd-changes { --kind: var(--text-muted); }
.gd-changes--new      { --kind: var(--state-good); }
.gd-changes--improved { --kind: var(--c-calendar); }
.gd-changes--fixed    { --kind: var(--state-warn); }
.gd-changes--removed  { --kind: var(--state-bad, var(--text-muted)); }

.gd-changes__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.gd-changes__head .gd-tag { font-size: max(var(--fs-floor), 11.5px); padding: 4px 9px; }
.gd-changes__count { font: 500 12px/1 var(--font-mono); color: var(--text-subtle); }

.gd-changes__list { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.gd-changes__item {
  position: relative;
  max-width: 64ch;
  padding-inline-start: 20px;
  font: 400 16px/1.55 var(--font-serif);
  color: var(--text);
}
.gd-changes__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--kind);
}
html[data-eink] .gd-changes__item::before { background: var(--text); }

/* =========================================================
   Breitere Fenster
   ========================================================= */

@media (min-width: 600px) {
  .hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ab 900 steht Home in zwei Spalten: links was ansteht (Now, Next up,
   Hinweise), rechts die Bereiche. Dasselbe Markup, nur umgelegt. */
@media (min-width: 900px) {
  .hb:not(.is-editing) {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }

  .hb:not(.is-editing) > .hb-day { grid-column: 1 / -1; }
  .hb:not(.is-editing) > * { grid-column: 1; }
  .hb:not(.is-editing) > .hb-areas { grid-column: 2; grid-row: 2 / span 8; }

  .hb:not(.is-editing) .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .hb:not(.is-editing) .hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb.is-editing .hb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Großer Bildschirm: --shell ist jetzt breit (styles/base.css), also
   wächst auch, was darin steht. Die Spalte links bekommt Platz für die
   Now-Karte, die Kacheln werden höher und ihre Schrift größer – aus
   Abstand gelesen soll Home so voll wirken wie auf dem Telefon. */
@media (min-width: 1280px) {
  .hb:not(.is-editing) {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    column-gap: 40px;
  }

  .hb-day__date { font-size: 30px; }
  .hb-day__weekday { font-size: 12.5px; }

  .hb-now { padding: 24px 24px 26px; }
  .hb-now__title { font-size: 27px; }
  .hb-now__text { font-size: 15.5px; }

  .hb-grid { gap: 14px; }
  .hb-tile { --cut: 18px; }
  .hb-tile__link { min-height: 156px; padding: 18px 18px 22px; }
  .hb-tile__sign .hex { --hex-w: 44px; }
  .hb-tile__name { font-size: 18px; }
  .hb-tile__status { font-size: 12.5px; }
  .hb-tile__act { top: 16px; inset-inline-end: 16px; width: 46px; height: 42px; }

  .hb-row__title { font-size: 15.5px; }
}

@media (min-width: 1600px) {
  .hb:not(.is-editing) {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    column-gap: 48px;
  }

  .hb:not(.is-editing) .hb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hb.is-editing .hb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .hb-day__date { font-size: 34px; }
  .hb-now__title { font-size: 30px; }
  .hb-tile__link { min-height: 176px; }
  .hb-tile__name { font-size: 19px; }
}