/* zen — im Erscheinungsbild von zechendorf.com und dem Tagebuch auf zechendorf.de
   (ext.dev/zechendorf.com assets/css/site.css): Marine, Nachtblau, Elfenbein als Papier,
   Cinzel fuer Auszeichnung, Merriweather fuer Lauftext, die Raute als Ornament, das Siegel
   als Marke. Bewusst fest hell wie die Webseite, kein Dark-Mode-Tausch (Entscheidung
   14.11.2026).

   Die Seite kennt nur EINEN Farbton, Marine. „Du bist dran" traegt deshalb die Form, nicht
   eine zweite Farbe: Handlungsbedarf steht im Leinen-Kasten mit Marine-Kante (wie .peek im
   Tagebuch, .co auf der Family-Office-Seite), mit ◆ vor „Du entscheidest". Information
   steht schlicht auf Papier, in gepunkteten Zeilen wie die Eintraege der Webseite. */

@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/cinzel-400-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/fonts/merriweather-300-900-latin.woff2) format('woff2'); }
@font-face { font-family: 'Merriweather'; font-style: italic; font-weight: 300 900; font-display: swap;
  src: url(/fonts/merriweather-italic-300-900-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --marine: #162C3E; --night: #050C14; --paper: #FFFDF8; --linen: #EFEBE1; --band: #F7F3EA;
  --rule: #C9C1AE; --soft: #E1DACB; --muted: #3A4654; --mist: #C8D1DA; --white: #FFFFFF;
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --body: 'Merriweather', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--night);
  font-family: var(--body); font-weight: 300; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: var(--marine); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { color: var(--night); }
button { font: inherit; color: inherit; cursor: pointer; }
strong, b { font-weight: 700; }
code { font-family: var(--mono); font-size: .85em; background: var(--linen); padding: 1px 5px; border-radius: 2px; }
:focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; }

/* Auszeichnungen in Cinzel-Versalien: eine Stelle fuer alle kleinen Labels. */
.kicker, .meta, .marke, .zahl button, .umschalter button, .knopf, .chip, .weitere-auf, .zurueck, .gitlab,
.zeile .zeit, .zeile .stand, .t-zeit, .t-tag, .t-name, .antwort label, .antwort .klein-titel, .neu-blatt label,
.toast button, .mail-kopf .feld {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
}
.kicker { letter-spacing: .3em; font-size: 11px; color: var(--muted); margin: 0; }

/* ── Login ─────────────────────────────────────────────── */
.login { max-width: 30em; margin: 0 auto; padding: 14vh 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.login .siegel { width: 96px; height: 96px; margin-bottom: 8px; }
.login h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 40px; letter-spacing: .08em; color: var(--marine); }
.login p { margin: 0; color: var(--muted); font-style: italic; }
.login p.kicker { font-style: normal; }

/* ── Rahmen ────────────────────────────────────────────── */
.zen { min-height: 100vh; }
.spalte {
  max-width: 600px; margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 36px;
}
@media (min-width: 1000px) {
  .zen { display: grid; grid-template-columns: minmax(380px, 560px) minmax(0, 1fr); gap: 48px;
         max-width: 1240px; margin: 0 auto; padding: 0 32px; }
  .spalte { margin: 0; padding-left: 0; padding-right: 0; }
  /* Kein Zentrieren ohne Detail: die Liste steht immer links an derselben Stelle,
     sonst springt sie beim Oeffnen/Schliessen eines Tickets hin und her. */
}

/* ── Kopf: Siegel + ZEN wie der Masthead der Webseite, Datum wie die Tagebuch-Monatsansicht ── */
.kopf { display: flex; flex-direction: column; gap: 0; }
.marke { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 40px; height: 40px; }
.brand span { letter-spacing: .32em; font-size: 14px; color: var(--marine); }
.marke-rechts { display: flex; gap: 18px; align-items: baseline; }
.marke button { border: 0; background: none; padding: 4px 0; color: var(--muted); font: inherit; letter-spacing: .2em; font-size: 11px; }
.marke button:hover { color: var(--marine); }
.tag { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 8px; }
.tag h1 { margin: 0; font-family: var(--display); font-weight: 400; color: var(--marine); font-size: 32px; line-height: 1.05; letter-spacing: .04em; }
@media (min-width: 600px) { .tag h1 { font-size: 42px; } }
.tag-nav { display: flex; gap: 4px; flex: none; }
.tag-nav button { border: 1px solid var(--rule); background: var(--paper); color: var(--marine); min-width: 40px; min-height: 40px; padding: 0 10px; font-family: var(--display); font-size: 14px; }
.tag-nav button:hover { background: var(--linen); }
.tag-nav button:disabled { opacity: .35; cursor: default; background: var(--paper); }
.zahl { margin-top: 10px; font-size: 14px; color: var(--muted); font-style: italic; }
.zahl button { border: 0; background: none; padding: 0; color: var(--marine); font-style: normal; letter-spacing: .14em; font-size: 11px; }

/* ── Abschnitte: Ueberschrift wie h4 der Webseite ───────── */
.abschnitt { display: flex; flex-direction: column; }
.abschnitt > h2, .strom-kopf h2 {
  margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--marine);
}
.abschnitt > h2 { padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
.abschnitt.du > h2::before { content: "\25C6"; margin-right: .7em; font-size: 10px; }
.leer { margin: 0; padding: 16px 0; color: var(--muted); font-style: italic; }

/* ── Karten (Handlungsbedarf): Leinen-Kasten mit Marine-Kante ── */
.karte { position: relative; background: var(--linen); border-left: 3px solid var(--marine); padding: 18px 20px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 10px; }
.karte.gewaehlt::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--marine); pointer-events: none; }
.karte-text { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.karte-text:focus-visible { outline: 2px solid var(--marine); outline-offset: 4px; }
.meta { letter-spacing: .12em; font-size: 11px; color: var(--muted); line-height: 1.5; }
.titel { font-size: 18px; font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; }
.frage { font-size: 15px; font-style: italic; color: var(--muted); overflow-wrap: anywhere; }
.frage .wer { font-family: var(--display); font-style: normal; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--marine); }
.buendel-liste { margin: 2px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.buendel-liste li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }

/* Mail-Entwurf: so, wie er rausgeht — Kopf klein, Wortlaut ganz, auf Papier im Kasten. */
.mail { background: var(--paper); border: 1px solid var(--soft); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mail-kopf { font-size: 13px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.mail-kopf .feld { display: inline-block; min-width: 5.5em; letter-spacing: .14em; font-size: 10px; color: var(--marine); }
.mail-text { white-space: pre-wrap; font-size: 15px; color: var(--night); overflow-wrap: anywhere; }
.antwort .mail { margin-bottom: 4px; }

/* Knoepfe eckig wie .mn/.gl der Webseite. */
.knopf {
  min-height: 44px; padding: 0 16px; border-radius: 0; letter-spacing: .14em; font-size: 11px; line-height: 1.3;
  border: 1px solid var(--rule); background: var(--paper); color: var(--marine);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center;
}
.knopf:hover { background: var(--white); color: var(--marine); }
.knopf.voll { background: var(--marine); border-color: var(--marine); color: var(--white); }
.knopf.voll:hover { background: var(--night); border-color: var(--night); color: var(--white); }
.knopf:disabled { opacity: .4; cursor: default; }
.chip { min-height: 36px; padding: 0 12px; border: 1px solid var(--rule); background: var(--paper); color: var(--marine); border-radius: 0; letter-spacing: .12em; font-size: 10.5px; }
.chip:hover { border-color: var(--marine); }
/* „Datum …": das Datumsfeld deckt den Chip unsichtbar ab, damit ein Tipp den Kalender
   des Systems oeffnet (zen.js, showPicker). */
.antwort .chip.datum, .chip.datum { margin: 0; position: relative; display: inline-flex; align-items: center; cursor: pointer; color: var(--marine); }
.chip.datum input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }

/* ── Weitere (eingeklappt) ─────────────────────────────── */
.weitere-auf { all: unset; cursor: pointer; padding: 12px 0; color: var(--marine); letter-spacing: .16em; font-size: 11px; font-family: var(--display); text-transform: uppercase; }
.weitere-auf:focus-visible { outline: 2px solid var(--marine); }
.reihe { all: unset; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px dotted var(--rule); font-size: 15px; }
.reihe:hover { background: var(--band); }
.reihe:focus-visible { outline: 2px solid var(--marine); }
.reihe .meta { align-self: center; }

/* ── Strom (Info): gepunktete Zeilen wie die Eintraege der Webseite ── */
.strom-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.umschalter { display: flex; gap: 16px; }
.umschalter button { border: 0; background: none; padding: 4px 0; color: var(--muted); letter-spacing: .14em; font-size: 11px; }
.umschalter button[aria-pressed="true"] { color: var(--marine); border-bottom: 1px solid var(--marine); }
/* Die 🧭-Verdichtung als Einleitung mit Linie und Raute — wie .lead der Webseite. */
.kompass { position: relative; margin: 14px 0 10px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--muted); font-style: italic; }
.kompass::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--marine); }
.kompass::after { content: "\25C6"; position: absolute; left: 64px; bottom: -8px; font-size: 9px; font-style: normal; color: var(--marine); background: var(--paper); padding: 0 6px; }
.zeile { border-bottom: 1px dotted var(--rule); }
.zeile-knopf { all: unset; cursor: pointer; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; padding: 11px 0; font-size: 15px; color: var(--night); width: 100%; }
.zeile-knopf:hover { background: var(--band); }
.zeile-knopf:focus-visible { outline: 2px solid var(--marine); }
.zeile .zeit { font-size: 12px; letter-spacing: .08em; color: var(--marine); padding-top: 3px; font-variant-numeric: tabular-nums; }
.zeile .faden { color: var(--marine); font-weight: 400; }
/* Stand wie die Chips im Tagebuch: hohl = bei jemandem, gefuellt = bei dir. */
.zeile .stand { display: inline-block; margin-left: 4px; letter-spacing: .12em; font-size: 9.5px; padding: 1px 7px 0; border: 1px solid var(--rule); color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.zeile .stand.dran { background: var(--marine); border-color: var(--marine); color: var(--white); }
.zeile.rausch .zeile-knopf { color: var(--muted); }
.zeile-mehr { margin: 0 0 14px 62px; font-size: 15px; color: var(--muted); display: flex; flex-direction: column; gap: 10px; }
.zeile-mehr p { margin: 0; overflow-wrap: anywhere; }

/* ── Detail: ein Blatt auf getoentem Grund, wie ein Tagebuch-Eintrag ── */
.detail {
  position: fixed; inset: 0; z-index: 10; background: var(--paper); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom));
}
.detail-innen { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
/* Desktop: die Seite selbst scrollt nicht, jede Spalte fuer sich (wie ein
   Mailprogramm). Vorher scrollte die Seite UND das Detail — zwei Leisten
   nebeneinander am rechten Rand. */
@media (min-width: 1000px) {
  body:has(.zen:not([hidden])) { overflow: hidden; }
  .zen { height: 100vh; overflow: hidden; }
  .spalte, .detail { height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--soft) transparent; }
  .spalte { padding-right: 16px; margin-right: -16px; }
  .detail { position: static; inset: auto; padding: 32px 32px 80px; background: var(--band); }
  .detail-innen { background: var(--paper); padding: 40px 44px 44px; box-shadow: 0 1px 0 var(--soft), 0 18px 40px -28px rgba(5, 12, 20, .35); }
}
.zurueck { all: unset; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; letter-spacing: .16em; font-size: 11px; color: var(--marine); align-self: flex-start;
  font-family: var(--display); text-transform: uppercase; }
.zurueck:focus-visible { outline: 2px solid var(--marine); }
.detail header { display: flex; flex-direction: column; gap: 10px; }
.detail h2.gross { margin: 0; font-family: var(--display); font-weight: 400; color: var(--marine); font-size: 26px; line-height: 1.2; letter-spacing: .03em; overflow-wrap: anywhere; }
@media (min-width: 600px) { .detail h2.gross { font-size: 30px; } }
.detail .frage-gross { position: relative; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule); font-size: 16px; font-style: italic; color: var(--muted); }
.detail .frage-gross::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--marine); }
.detail .frage-gross::after { content: "\25C6"; position: absolute; left: 64px; bottom: -8px; font-size: 9px; font-style: normal; color: var(--marine); background: var(--paper); padding: 0 6px; }
.verlauf { display: flex; flex-direction: column; }
.eintrag { border-bottom: 1px dotted var(--rule); }
.eintrag-knopf { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 12px 0; width: 100%; }
.eintrag-knopf:hover { background: var(--band); }
.eintrag-knopf:focus-visible { outline: 2px solid var(--marine); }
.eintrag-knopf .meta { color: var(--marine); }
.eintrag-knopf .k { font-size: 15px; overflow-wrap: anywhere; }
.eintrag-knopf .mehr { color: var(--marine); font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; }
.eintrag.du .k { color: var(--muted); font-style: italic; }
.eintrag.du .meta { color: var(--muted); }
.voll-text { padding: 0 0 16px; font-size: 15px; overflow-wrap: anywhere; }
.voll-text > :first-child { margin-top: 0; }
.voll-text p, .voll-text ul, .voll-text ol { margin: 0 0 12px; }
.voll-text h1, .voll-text h2, .voll-text h3 { font-family: var(--display); font-weight: 400; color: var(--marine); letter-spacing: .04em; font-size: 16px; margin: 20px 0 8px; }
.voll-text pre { overflow-x: auto; background: var(--marine); color: var(--paper); padding: 12px 16px; font-size: 13px; border-radius: 0; }
.voll-text pre code { background: none; padding: 0; color: inherit; }
.voll-text table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.voll-text th { text-align: left; font-family: var(--display); font-weight: 400; letter-spacing: .12em; font-size: 10.5px; text-transform: uppercase; color: var(--white); background: var(--marine); padding: 6px 10px; }
.voll-text td { padding: 6px 10px; border-bottom: 1px solid var(--soft); vertical-align: top; }
.voll-text img { max-width: 100%; height: auto; }
.voll-text blockquote { margin: 0 0 12px; padding: 10px 16px; background: var(--linen); border-left: 3px solid var(--marine); color: var(--night); }
.gitlab { padding-top: 14px; letter-spacing: .16em; font-size: 11px; text-decoration: none; }

.antwort { display: flex; flex-direction: column; gap: 12px; }
.antwort label, .antwort .klein-titel { letter-spacing: .2em; font-size: 12px; color: var(--marine); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.antwort textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--paper); color: var(--night); font: inherit; font-size: 16px; resize: vertical; min-height: 100px;
}
.antwort textarea:focus { outline: none; border-color: var(--marine); }
.antwort .hinweis { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }
.antwort .hinweis.warn { color: var(--marine); font-style: normal; font-weight: 700; }
.optionen { display: flex; flex-direction: column; gap: 8px; }
.optionen .knopf { justify-content: flex-start; text-align: left; padding: 10px 16px; }
.laedt { color: var(--muted); font-style: italic; }

/* ── Toast: Marine-Band ────────────────────────────────── */
.toast {
  position: fixed; z-index: 20; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto; min-height: 52px; padding: 0 6px 0 20px; border-radius: 0;
  background: var(--marine); color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--marine);
}
.toast button { border: 0; background: none; min-height: 44px; padding: 0 14px; color: var(--mist); letter-spacing: .16em; font-size: 11px; }
.toast button:hover { color: var(--white); }
.toast.fehler { background: var(--night); }

/* ── Neuer Auftrag: Plus-Knopf (Telefon) / „+ Neu" im Kopf (Desktop) ── */
.marke .neu-kopf { display: none; color: var(--marine); }
.fab {
  position: fixed; z-index: 15; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 0; border: 0; padding: 0;
  background: var(--marine); color: var(--white); font-size: 28px; line-height: 1; font-family: var(--display);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--marine);
}
.fab[hidden] { display: none; }
/* Steht ein Toast unten, rueckt der Knopf darueber; im offenen Ticket (Telefon)
   und im offenen Eingabeblatt verschwindet er. */
body:has(.toast:not([hidden])) .fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
body:has(.zen:not(.ohne-detail)) .fab, body.neu-offen .fab { display: none; }
.spalte { padding-bottom: 96px; }

.neu { position: fixed; inset: 0; z-index: 30; }
.neu[hidden] { display: none; }
.neu-grund { position: absolute; inset: 0; background: rgba(5, 12, 20, .32); }
.neu-blatt {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  background: var(--paper); border-top: 3px solid var(--marine); padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
}
.neu-blatt label { letter-spacing: .2em; font-size: 12px; color: var(--marine); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.neu-blatt textarea {
  width: 100%; box-sizing: border-box; min-height: 140px; resize: vertical; font: inherit; font-size: 16px;
  color: var(--night); background: var(--paper); border: 1px solid var(--rule); border-radius: 0; padding: 12px 14px;
}
.neu-blatt textarea:focus { outline: none; border-color: var(--marine); }
.neu-blatt .hinweis { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }

@media (min-width: 1000px) {
  .fab { display: none !important; }
  .marke .neu-kopf { display: inline; }
  .spalte { padding-bottom: 40px; padding-top: 18px; }
  .neu-blatt { left: 50%; right: auto; bottom: auto; top: 14vh; width: 560px; transform: translateX(-50%); padding: 26px;
    border: 0; box-shadow: 0 1px 0 var(--soft), 0 18px 40px -20px rgba(5, 12, 20, .45); }
  .neu-blatt::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--soft); pointer-events: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .karte, .zeile, .knopf, .reihe, .zeile-knopf { transition: background-color .15s ease, opacity .15s; }
}

/* ── Kalender: eine Zeile wie ein Eintrag der Webseite, Uhrzeit in Cinzel ── */
.termine { gap: 0; }
.termin { all: unset; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 16px; }
.termin:disabled { cursor: default; }
.termin:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }
.t-zeit { letter-spacing: .08em; font-size: 13px; color: var(--marine); white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-titel.leise { color: var(--muted); font-style: italic; }
.t-ort, .t-wer { color: var(--muted); font-style: italic; }
.t-pfeil { color: var(--marine); font-size: 12px; }
.t-liste { padding: 8px 0 12px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.t-tag, .t-name { letter-spacing: .18em; font-size: 11px; color: var(--marine); }
.t-gruppe { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.t-gruppe ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.t-gruppe li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 15px; overflow-wrap: anywhere; }
.t-fehlt { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }