/* Editorial Botany — Garten-Wiki Facade
   Refined minimal reading interface. Mobile-first.
   Schriften kommen lokal aus dem jeweiligen Theme (static/themes/*.css),
   keine Anfragen an Google Fonts. */

:root {
  --paper:        #F6F1E7;
  --paper-raised: #FAF7F0;
  --ink:          #1F1A17;
  --ink-soft:     #4A4238;
  --ink-muted:    #8A8175;
  --ink-faint:    #B5AC9E;
  --rule:         #E3DAC8;
  --rule-soft:    #EDE5D5;
  --sage:         #5B6B4A;
  --sage-deep:    #3F4F34;
  --sage-light:   #8FA07A;
  --sage-wash:    #EAEFE0;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --display: 'Fraunces', 'Hoefler Text', Garamond, serif;

  --measure: 34rem;
  --gutter: 1.5rem;

  --side-w: 258px;
  --side-w-collapsed: 62px;
  /* Tatsächliche .side-Hintergrundfarbe als eigene Variable: pkm/philosophie
     kehren sie auf --paper um (siehe dortige Theme-Kommentare). SVG-Icons, die
     ihren Hintergrund "freistellen" (z.B. die Löcher im Einstellungen-Zahnrad),
     müssen darauf verweisen statt fest auf --paper-raised, sonst zeigen sie in
     Themes mit umgekehrter Zuordnung einen sichtbaren Farbsprung. */
  --side-bg: var(--paper-raised);
}

* { box-sizing: border-box; }

/* Root-Schriftgröße in % statt px: 112,5% = 18px bei Browser-Standard, skaliert
   aber mit der vom Nutzer gesetzten Schriftgröße (WCAG 1.4.4 Resize Text). Nur auf
   html — bei html,body zusammen würde sich der %-Wert auf body verdoppeln. */
html { font-size: 112.5%; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.7;
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.07  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ——— Sidebar ——————————————————————————————
   position:fixed über die volle Höhe links; .app-main bekommt margin-left in
   Sidebar-Breite. body bleibt so der einzige Scroll-Container (kein
   verschachteltes internes Scrollen), kompatibel mit Lightbox/Graph-Viewport-
   Tricks, die weiterhin body-relativ arbeiten. */

.side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  background: var(--side-bg);
  border-right: 1px solid var(--rule);
  z-index: 40;
  transition: width 200ms ease;
  overflow: hidden;
}

.side-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1.1rem 0.6rem 0.9rem 1rem;
}

.side-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "wght" 480, "SOFT" 30;
  font-size: 1.05rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: none;
}

.side-brand .sprig {
  width: 24px;
  height: 24px;
  color: var(--sage);
  flex-shrink: 0;
}

.side-brand em {
  font-style: italic;
  color: var(--sage-deep);
  font-variation-settings: "opsz" 36, "wght" 420, "SOFT" 80;
}

.side-brand-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  line-height: 0;
  border-radius: 4px;
  color: var(--ink-muted);
  transition: color 160ms ease, background 160ms ease;
}

.side-toggle:hover { color: var(--ink); background: var(--paper); }

.newchat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.1rem 0.9rem 0.9rem;
  padding: 0.6rem 0.8rem;
  background: var(--sage-deep);
  color: var(--paper);
  border: none;
  border-radius: 4px;
  font-family: var(--serif);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease;
}

.newchat:hover { background: var(--ink); }
.newchat svg { flex-shrink: 0; }

.side-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0 0.6rem 0.6rem;
}

.navgroup { margin-bottom: 0.3rem; }

.navgroup-label {
  margin: 0.9rem 0.4rem 0.3rem;
  font-family: var(--serif);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}

.navgroup-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.55rem;
  border-radius: 4px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 130ms ease, color 130ms ease;
}

.navgroup-item svg { flex-shrink: 0; color: var(--ink-muted); }

/* Sidebar-Hintergrund ist --paper-raised; --paper hebt sich im Hover davon ab. */
.navgroup-item:hover { background: var(--paper); color: var(--ink); }

.navgroup-item[aria-current="page"] {
  background: var(--sage-wash);
  color: var(--sage-deep);
}

.navgroup-item[aria-current="page"] svg { color: var(--sage-deep); }

.navgroup-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navgroup-item-button {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.badge {
  flex-shrink: 0;
  margin-left: auto;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  border-radius: 999px;
  font-size: 0.68rem;
  padding: 0 0.45em;
  line-height: 1.5;
}

.navgroup-item[aria-current="page"] .badge { background: var(--paper-raised); }

.chatlist { margin-top: 0.2rem; }

/* Gruppen-Label (Heute/Diese Woche/Älter) — gleicher Stil wie .navgroup-label,
   die Klasse wird direkt wiederverwendet (siehe _layout.html). */

.chatlist-item {
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: background 130ms ease;
}

.chatlist-item:hover,
.chatlist-item:focus-within { background: var(--paper); }

.chatlist-item.is-active { background: var(--sage-wash); }
.chatlist-item.is-active .chatlist-item-link { color: var(--sage-deep); }

.chatlist-item-link {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.82rem;
}

.chatlist-item-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatlist-del { flex-shrink: 0; margin-right: 0.25rem; }

/* Desktop: der "×" erscheint erst bei Hover/Fokus der Zeile, sonst versteckt
   (Sidebar bleibt ruhig); auf Touch (kein Hover) dauerhaft sichtbar, da dort
   kein Hover-Vorzustand existiert. Immer per Tastatur fokussierbar. */
.chatlist-del-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 130ms ease, background 130ms ease, color 130ms ease;
}

.chatlist-del-btn:hover { background: var(--rule-soft); color: var(--ink); }

.chatlist-item:hover .chatlist-del-btn,
.chatlist-del-btn:focus-visible { opacity: 1; }

@media (hover: none) {
  .chatlist-del-btn { opacity: 0.6; }
}

.chatlist-empty {
  margin: 0.2rem 0.55rem;
  color: var(--ink-faint);
  font-size: 0.8rem;
}

.side-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--rule);
  padding: 0.6rem 0.6rem 0.7rem;
}

.side-foot .navgroup-item { font-size: 0.88rem; }

/* ——— Content-Träger ————————————————————— */

.app-main {
  margin-left: var(--side-w);
  min-height: 100dvh;
  transition: margin-left 200ms ease;
}

/* Nur der mobile Drawer benutzt den Scrim; Desktop bleibt display:none. */
.scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(31, 26, 23, 0.38);
}

/* Erst im Mobile-Breakpoint sichtbar (siehe @media (max-width: 600px)). */
.topbar { display: none; }

/* ——— Sidebar einklappen (Desktop-Konzept) —————
   Nur außerhalb des Mobile-Breakpoints wirksam: dort gilt ausschließlich der
   Off-Canvas-Drawer, ein evtl. aus einer früheren Desktop-Session
   persistierter side-collapsed-Zustand darf die mobile Darstellung nicht
   überschreiben (siehe .side-toggle{display:none} im 600px-Query). */
@media (min-width: 601px) {
  html.side-collapsed .side { width: var(--side-w-collapsed); }
  html.side-collapsed .app-main { margin-left: var(--side-w-collapsed); }

  html.side-collapsed .side-head { flex-direction: column; gap: 0.4rem; padding: 0.7rem 0 0.3rem; }
  html.side-collapsed .side-brand { justify-content: center; padding: 0; }
  html.side-collapsed .newchat { margin: 0.3rem 0.5rem 0.8rem; padding: 0.55rem 0; }
  html.side-collapsed .navgroup-item { justify-content: center; padding: 0.55rem 0; }

  /* Gruppenüberschriften und Gesprächsliste im Kompaktmodus vollständig
     entfernen (auch für AT) — die <nav aria-label="…">-Landmarken tragen die
     Gruppenbedeutung bereits, die Gesprächsliste passt konzeptionell nicht in
     eine Icon-Leiste. */
  html.side-collapsed .navgroup-label,
  html.side-collapsed .chatlist { display: none; }

  /* Text/Badge NICHT display:none, sondern nur visuell ausblenden (sr-only-
     Technik): sonst hätten Katalog/Suche/Eingang/…/Abmelden im eingeklappten
     Zustand keinen Accessible Name mehr — die SVG-Icons sind aria-hidden, ein
     entferntes Text-Kind zählt nicht mehr zur Namensberechnung (WCAG 4.1.2).
     Als Nebeneffekt bleiben Badge-Zahlen (z.B. "Eingang 3") weiter Teil des
     vorgelesenen Linknamens. */
  html.side-collapsed .side-brand-text,
  html.side-collapsed .newchat-text,
  html.side-collapsed .navgroup-item-text,
  html.side-collapsed .badge {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ——— Article column ———————————————————— */

.column {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem var(--gutter) 5rem;
  animation: rise 700ms cubic-bezier(.2,.7,.2,1) both;
}

/* Reines Aufblenden ohne transform: ein Transform (auch die von fill-mode:both
   hinterlassene Identitäts-Matrix) würde .column zum Bezugsrahmen für
   position:fixed machen und die fixe TOC-Randleiste mitscrollen lassen. */
@keyframes rise {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kicker {
  font-family: var(--serif);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--sage-deep);
  margin: 0 0 0.9rem;
}

h1.title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 20;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 0.75rem;
  color: var(--ink);
}

h1.title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 360, "SOFT" 100, "WONK" 1;
  color: var(--sage-deep);
}

.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0;
  font-family: var(--serif);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin: 0 0 2.4rem;
}

.meta .dot { color: var(--ink-faint); margin: 0 0.55rem; }

/* ——— Gliederung (TOC, Etappe 5) ————————————
   Zweispaltig erst ab 1180px (genug Raum neben --measure für eine ruhige
   14rem-Spalte); darunter verhält sich .column.has-toc wie normales .column
   (einspaltig, TOC ausgeblendet) — ohne dass eine weitere Regel nötig wäre. */

@media (min-width: 1180px) {
  /* Die Gliederung sitzt als fixe Leiste ganz rechts am Fensterrand, so breit
     wie die linke Sidebar. Die Lesespalte füllt nicht mehr ein Grid, sondern
     zentriert sich im Bereich zwischen linker Sidebar und rechter TOC-Leiste –
     da beide Leisten gleich breit sind, sitzt sie mittig im Fenster. */
  .column.has-toc {
    max-width: none;
    padding-right: calc(var(--side-w) + var(--gutter));
  }
  .column.has-toc .doc-main {
    max-width: calc(var(--measure) * 1.2);
    margin: 0 auto;
  }
}

.toc { display: none; }

@media (min-width: 1180px) {
  .toc {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: var(--side-w);
    height: 100vh;
    overflow-y: auto;
    padding: 3rem 1.4rem;
    border-left: 1px solid var(--rule);
    background: var(--side-bg);
    z-index: 10;
  }
}

.toc-label {
  font-family: var(--serif);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  /* --ink-soft statt --ink-muted: die TOC-Leiste hat jetzt --side-bg als
     Hintergrund (leicht dunkler als die Seite); --ink-muted verfehlt darauf im
     Garten-Theme AA (3,58:1), --ink-soft ist in allen Themes sicher. */
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}

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

.toc-item { margin: 0.1rem 0; }

/* --ink-muted liegt im Garten-/PKM-Theme nahe der AA-Grenze (4,5:1) — der
   Normalzustand des Links nutzt darum --ink-soft, das in allen drei Themes
   sicher AA-konform ist. */
.toc-link {
  display: block;
  padding: 0.2rem 0 0.2rem 0.6rem;
  border-left: 2px solid transparent;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.86rem;
  line-height: 1.4;
  transition: color 130ms ease, border-color 130ms ease, background 130ms ease;
}

.toc-link:hover { color: var(--sage-deep); }

.toc-l3 .toc-link { padding-left: 1.3rem; font-size: 0.8rem; }

.toc-link.is-current {
  color: var(--sage-deep);
  font-weight: 600;
  border-left-color: var(--sage-deep);
  background: var(--sage-wash);
}

/* ——— Titel/Sektion bearbeiten ——————————— */

.meta-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 28rem;
  margin: 0 0 0.6rem;
}

.meta-edit-form label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-top: 0.5rem;
}

.meta-edit-form select,
.meta-edit-form input[type="text"] {
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.4rem 0.65rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  background: var(--paper-raised);
  color: var(--ink);
}

.meta-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.meta-edit-hint {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin: 0 0 2.4rem;
}

.ornament {
  display: block;
  margin: 2.2rem auto;
  color: var(--sage-light);
  width: 60px;
  opacity: 0.85;
}

article p { margin: 0 0 1.15rem; }

article p.lede::first-letter {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 420, "SOFT" 0;
  float: left;
  font-size: 4.2rem;
  line-height: 0.88;
  padding: 0.4rem 0.55rem 0 0;
  color: var(--sage-deep);
}

article h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "wght" 460, "SOFT" 30;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 2.6rem 0 0.9rem;
  color: var(--ink);
}

article h3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 30, "wght" 520, "SOFT" 0;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 2rem 0 0.7rem;
  color: var(--sage-deep);
}

article ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.3rem;
}

article ul li {
  position: relative;
  padding-left: 1.4rem;
  margin: 0.35rem 0;
}

article ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--sage-light);
  font-weight: 300;
}

article a.wikilink {
  color: var(--sage-deep);
  text-decoration: none;
  border-bottom: 1px dotted var(--sage-light);
  padding-bottom: 1px;
  transition: background 160ms ease, border-color 160ms ease;
}

article a.wikilink:hover {
  background: var(--sage-wash);
  border-bottom-color: var(--sage-deep);
}

article a.wikilink::before {
  content: "⌘ ";
  color: var(--sage-light);
  font-size: 0.85em;
  margin-right: 0.05em;
}

blockquote {
  margin: 1.6rem 0;
  padding: 0.4rem 0 0.4rem 1.3rem;
  border-left: 2px solid var(--sage-light);
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--display);
  font-variation-settings: "opsz" 30, "wght" 360, "SOFT" 60;
}

code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  background: var(--paper-raised);
  padding: 0.1em 0.35em;
  border-radius: 2px;
  color: var(--ink-soft);
}

pre {
  background: var(--paper-raised);
  padding: 0.8rem 1rem;
  border-radius: 4px;
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.85em;
}

em.bildunterschrift {
  display: block;
  font-style: italic;
  font-size: 0.82em;
  color: var(--ink-faint);
  text-align: center;
}

/* ——— Tabellen ——————————————————————————— */

article table,
.tabelle-overlay table {
  border-collapse: collapse;
  font-size: 0.94rem;
}

/* Standardfall: Tabelle füllt die Spalte. Innerhalb des Scroll-Wrappers
   (breite Tabellen) und im Overlay wird das unten überschrieben. */
article table {
  width: 100%;
  margin: 1.6rem 0;
}

article th,
.tabelle-overlay th {
  text-align: left;
  font-family: var(--serif);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--rule);
}

article td,
.tabelle-overlay td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
  vertical-align: top;
}

article tr:last-child td,
.tabelle-overlay tr:last-child td { border-bottom: none; }

/* Breite Tabellen: horizontal scrollbarer Container statt Spaltenüberlauf.
   Wirkt komplett ohne JS (auch mobil); die Zoom-Schaltfläche ist optional. */
article .tabelle-figur {
  margin: 1.6rem 0;
}

article .tabelle-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* min-width:100% füllt weiterhin die Spalte; width:auto lässt die Tabelle bei
   Bedarf über die Spalte hinauswachsen → Scrollbalken statt Überlauf. */
article .tabelle-wrap table {
  width: auto;
  min-width: 100%;
  margin: 0;
}

.tabelle-zoom {
  margin-top: 0.5rem;
  font-family: var(--serif);
  font-size: 0.8rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
}

.tabelle-zoom:hover { border-color: var(--ink-soft); }
.tabelle-zoom[hidden] { display: none; }

/* Vollansicht-Overlay (natives <dialog>: Escape/Fokusfalle/Backdrop nativ). */
.tabelle-overlay {
  position: relative;
  width: min(96vw, 1400px);
  max-width: 96vw;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.tabelle-overlay::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* Rundes ✕ oben rechts (bleibt fix, während der Tabellen-Body scrollt). */
.tabelle-overlay-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 1;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.tabelle-overlay-close:hover { border-color: var(--ink-soft); }

.tabelle-overlay-body {
  overflow: auto;
  max-height: 92vh;
  padding: 3rem 1.2rem 1.4rem;
}

.tabelle-overlay-body table {
  width: auto;
  min-width: 100%;
  margin: 0;
}

/* ——— See also & Footer meta ————————————— */

.see-also {
  margin: 3rem 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--rule);
}

.see-also h4 {
  font-family: var(--serif);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  margin: 0 0 0.8rem;
  font-weight: 500;
}

.see-also ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.see-also li {
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--rule);
}

.see-also li:last-child { border-bottom: none; }

.see-also a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-variation-settings: "opsz" 24, "wght" 440, "SOFT" 30;
  font-size: 1.02rem;
}

.see-also a:hover { color: var(--sage-deep); }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-top: 2rem;
}

.tag-chip {
  font-size: 0.78rem;
  padding: 0.2em 0.65em;
  border-radius: 99px;
  background: var(--sage-wash);
  color: var(--sage-deep);
  border: 1px solid var(--sage-light);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.tag-chip:hover {
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
}

.colophon {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-align: center;
}

.empty-state {
  color: var(--ink-muted);
  font-style: italic;
}

/* ——— Index ———————————————————————————— */

/* Dezenter, zugeklappter Hinweis auf zuletzt ingestierte Seiten (aus /eingang
   hierher verschoben — im Katalog passender als im Eingang-Tab). */
.recent-ingested-katalog {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
}

.recent-ingested-katalog > summary {
  cursor: pointer;
  list-style: none;
  color: var(--ink-muted);
}

.recent-ingested-katalog > summary::-webkit-details-marker { display: none; }

.recent-ingested-katalog ul {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
}

.recent-ingested-katalog a {
  color: var(--ink-soft);
}

.recent-ingested-katalog a:hover {
  color: var(--sage-deep);
}

.index-controls {
  display: flex;
  gap: 0.5rem;
  margin: 2rem 0 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.index-toggle-all {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 0.45rem 0.9rem;
  border-radius: 2px;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.index-toggle-all:hover {
  border-color: var(--sage);
  color: var(--sage-deep);
  background: var(--sage-wash);
}

.index-section {
  margin: 0;
  border-bottom: 1px solid var(--rule-soft);
}

.index-section:first-of-type {
  border-top: 1px solid var(--rule-soft);
}

details.index-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 0.4rem 1.4rem 0.2rem;
  transition: background 0.12s;
}

details.index-section > summary::-webkit-details-marker { display: none; }

details.index-section > summary:hover {
  background: var(--sage-wash);
}

.index-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--sage);
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 0.18s ease, color 0.15s;
  transform: rotate(0deg);
  flex-shrink: 0;
}

.index-chevron::before { content: "▸"; }

details.index-section > summary:hover .index-chevron {
  color: var(--sage-deep);
}

details.index-section[open] > summary .index-chevron {
  transform: rotate(90deg);
  color: var(--sage-deep);
}

.index-section h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 48, "wght" 460, "SOFT" 40;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--sage-deep);
  margin: 0;
  flex: 1;
  min-width: 0;
  text-transform: none;
  font-variant: normal;
  line-height: 1.2;
}

/* Zähler ist kein h2-Kind mehr, sondern Geschwister im Flex-Layout des
   <summary> (align-items:center dort hält ihn mittig zur großen Titelzeile);
   margin-left:auto schiebt ihn rechtsbündig. */
.index-section .count {
  font-family: var(--serif);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  margin-left: auto;
  flex: none;
  white-space: nowrap;
}

.index-section .rule {
  display: none;
}

.index-list {
  list-style: none;
  padding: 0 0 1rem 2.05rem;
  margin: 0;
}

.index-list li {
  padding: 0.85rem 0;
  border-bottom: 1px dotted var(--rule);
}

.index-list li:last-child { border-bottom: none; }

.index-list a.entry-title {
  display: inline;
  font-family: var(--display);
  font-variation-settings: "opsz" 24, "wght" 460, "SOFT" 20;
  font-size: 1.08rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.005em;
}

.index-list a.entry-title:hover { color: var(--sage-deep); }

.index-list .entry-desc {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}

/* ——— Ask / Fragen ————————————————————— */

.ask-form {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.2rem 1.2rem 1rem;
  margin: 2rem 0 0;
}

.ask-form textarea,
.ask-form input[type="search"] {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--display);
  font-variation-settings: "opsz" 24, "wght" 380, "SOFT" 30;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
  outline: none;
  padding: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.ask-form textarea {
  resize: none;
  overflow: hidden;
}

.ask-form textarea::placeholder,
.ask-form input[type="search"]::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

.ask-status {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  color: var(--ink-faint);
  padding: 0.5rem 0 0.1rem;
}

.ask-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dotted var(--rule);
}

.ask-actions .hint {
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

.btn {
  font-family: var(--serif);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--paper);
  background: var(--sage-deep);
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 160ms ease;
}

.btn:hover:not(:disabled) { background: var(--ink); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--sage-deep);
  border: 1px solid var(--sage-light);
  padding: 0.5rem 1rem;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--sage-wash);
  color: var(--sage-deep);
}

.save-row {
  margin-top: 0.9rem;
  text-align: right;
}

/* Chat-Umbau: dezenter Text-Link statt gefülltem Button — pro Antwort-Blase
   sitzt eine Speichern-Aktion, als großer Button wäre sie im Verlauf zu laut. */
.save-btn {
  font-family: var(--serif);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  background: none;
  border: none;
  padding: 0.2rem 0;
  cursor: pointer;
  transition: color 160ms ease;
}

.save-btn:hover:not(:disabled) { color: var(--sage-deep); }

.save-btn:disabled { opacity: 0.5; cursor: default; }

.usage-info {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--muted, #888);
  letter-spacing: 0.01em;
}

.fragen-error {
  color: #8B3A2A;
  font-size: 0.9rem;
  margin-top: 1rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid #C07060;
  background: #FDF3F0;
}

.fragen-hint {
  margin-top: 2rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
  font-style: italic;
}

/* LLM-1: "Neuer Chat" — schlichter Reset-Link über dem Formular, nur bei
   laufendem Gespräch sichtbar (server-seitig per {% if thread %} gesteuert). */
.fragen-newchat {
  margin: 0.8rem 0 0;
}

/* LLM-24: "Frühere Gespräche" — ausklappbare Liste der zuletzt aktualisierten
   Gespräche (details/summary wie .index-section, aber flacher: keine
   Sektions-Hierarchie nötig). */
.fragen-recent {
  margin: 1.2rem 0 0;
  font-size: 0.9rem;
}

.fragen-recent > summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0;
}

.fragen-recent > summary::-webkit-details-marker { display: none; }

.fragen-recent-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.fragen-recent-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.fragen-recent-item:last-child { border-bottom: none; }

.fragen-recent-title {
  font-family: var(--display);
  font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 20;
  color: var(--ink);
  text-decoration: none;
  flex: 1;
}

.fragen-recent-title:hover { color: var(--sage-deep); }

.fragen-recent-date {
  font-size: 0.78rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.fragen-recent-delete {
  display: inline;
}

.fragen-recent-delete .btn-ghost {
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
}

/* ——— Chat-Shell (Messenger-Layout für /fragen) —————————
   Kompletter Chat lebt in .chat-shell (siehe fragen.html) — scoped alle
   Regeln unten automatisch auf diese eine Seite, .column bleibt für den Rest
   des Wikis unverändert. Eingabe klebt via position:sticky am unteren Rand,
   der Verlauf (.chat-log) wächst darüber (flex:1). */

.chat-shell {
  display: flex;
  flex-direction: column;
  /* Näherung aus Spaltenpadding oben + kompaktem Kopfbereich, je Breakpoint
     unten leicht korrigiert. Die Sidebar nimmt keine vertikale Höhe mehr weg
     (sie sitzt links, nicht oben) — anders als die frühere Masthead-Höhe
     (~5.2rem), die hier einst mit einkalkuliert war. dvh statt vh:
     berücksichtigt ein-/ausblendende mobile Adressleisten, die vh sonst zu
     hoch ansetzt. */
  --chat-shell-offset: 7rem;
  min-height: calc(100dvh - var(--chat-shell-offset));
}

.chat-head { flex: none; }

.chat-head .kicker { margin-bottom: 0.5rem; }

.chat-head h1.title {
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  margin-bottom: 0.4rem;
}

.chat-head .meta { margin-bottom: 0.9rem; }

/* Gesprächskopf (Thread geladen): Titel + Zeit statt des großen Hero-Texts.
   Linksbündig (Default — nur .chat-head-empty zentriert explizit, siehe
   unten), daher kein eigenes text-align nötig. */
.thread-head h1.title {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin-bottom: 0.4rem;
}

.thread-head time {
  display: block;
  font-family: var(--serif);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 0.9rem;
}

/* Leerer Zustand (kein Thread): ruhige, zentrierte Startansicht statt eines
   linksbündigen Kopfs über einem leeren Verlauf. Kopf + Eingabe rücken
   vertikal in die Mitte (chat-shell-empty), die Aktionszeile wird mittig
   ausgerichtet — sonst zöge sie linksbündig aus dem zentrierten Kopf. */
.chat-head-empty { text-align: center; }
/* .meta und .chat-head-actions sind Flex-Container — text-align:center greift
   auf ihren Inhalt nicht, sie brauchen justify-content zum Zentrieren. */
.chat-head-empty .meta { justify-content: center; }
.chat-head-empty .chat-head-actions { justify-content: center; }

.chat-shell-empty { justify-content: center; }

/* Ohne Verlauf soll der leere .chat-log die Eingabe nicht nach ganz unten
   drücken; die Kompose-Leiste steht mittig im Fluss (nicht sticky) und ohne
   Absetz-Kante, da kein Verlauf dahinter durchscrollt. */
.chat-shell-empty .chat-log { flex: 0 0 auto; padding: 0; }

.chat-shell-empty .chat-compose {
  position: static;
  border-top: none;
  box-shadow: none;
  margin-top: 1.4rem;
}

.chat-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
}

.chat-head-actions .fragen-recent { margin: 0; }

/* Vorschlags-Chips im leeren Chat (UI-Umbau Etappe 2): deterministische
   Prefill-Links auf zuletzt aufgenommene Seiten — kein JS, kein LLM-Aufruf.
   Sitzt als letztes Kind von .chat-shell UNTER der Kompose-Leiste (dezent,
   nicht mehr im .chat-head). .chip-label nimmt per flex-basis:100% die ganze
   Zeile ein, die Chips wickeln darunter in eigene Zeile(n); nur im leeren
   Chat gerendert, dort per justify-content zentriert wie .meta/.chat-head-actions. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0.6rem;
}

.chat-shell-empty .chip-row { justify-content: center; }

.chip-label {
  flex-basis: 100%;
  margin: 0 0 0.15rem;
  font-family: var(--serif);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  text-align: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.chip:hover {
  border-color: var(--sage-light);
  background: var(--sage-wash);
  color: var(--sage-deep);
}

.chat-log {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.4rem 0;
}

.chat-msg { display: flex; width: 100%; }
.chat-msg-user { justify-content: flex-end; }
.chat-msg-assistant { justify-content: flex-start; }

.chat-bubble {
  border-radius: 16px;
  padding: 0.85rem 1.1rem;
}

/* Frage rechtsbündig, gefüllt: --sage-deep + --paper-Text ist der stärkere
   der beiden vorgeschlagenen Kontraste (dunkler Grund/helle Schrift) und
   liest sich eindeutig als "gesendete" Nachricht. */
.chat-msg-user .chat-bubble {
  max-width: 72%;
  margin-left: auto;
  background: var(--sage-deep);
  color: var(--paper);
  border-radius: 16px 16px 4px 16px;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Antwort linksbündig, hell/randbetont — breiter als die Frage, da Antworten
   lang sind und Markdown/Code/Formeln enthalten. */
.chat-msg-assistant .chat-bubble {
  max-width: 90%;
  margin-right: auto;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 16px 16px 16px 4px;
}

/* Die bestehenden article-Regeln (Überschriften, Listen, Code, Wikilinks,
   KaTeX) greifen unverändert innerhalb der Blase; nur das erste/letzte Kind
   verliert seinen Außenabstand, sonst polstert er zusätzlich zum Blasen-Padding. */
.chat-bubble article { margin: 0; }
.chat-bubble article > *:first-child { margin-top: 0; }
.chat-bubble article > *:last-child { margin-bottom: 0; }

/* Quellenlinks in der Antwort in runde Klammern setzen — sonst wirken sie im
   Fließtext wie normaler Text. Nur im Chat (höhere Spezifität als die globale
   article a.wikilink::before-Regel), ersetzt dort das ⌘-Präfix; die Klammern
   dezent in Textfarbe, damit sie den Link rahmen statt Teil zu wirken. */
.chat-bubble a.wikilink::before {
  content: "(";
  color: var(--ink-muted);
  font-size: 1em;
  margin-right: 0;
}

.chat-bubble a.wikilink::after {
  content: ")";
  color: var(--ink-muted);
}

.chat-thinking {
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-muted);
}

.chat-compose {
  position: sticky;
  bottom: 0;
  flex: none;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -10px 18px -16px rgba(31, 26, 23, 0.28);
  padding: 1rem 0 calc(0.9rem + env(safe-area-inset-bottom));
  margin-top: 0.5rem;
}

.chat-compose .ask-form { margin: 0; }

@media (max-width: 600px) {
  .chat-shell { --chat-shell-offset: 5.5rem; }
  .chat-msg-user .chat-bubble { max-width: 88%; }
  .chat-msg-assistant .chat-bubble { max-width: 96%; }
}

@media (min-width: 900px) {
  .chat-shell { --chat-shell-offset: 8.5rem; }
}

/* ——— Gliederung im Chat (Etappe 5) ———————————————
   Reine Progressive Enhancement: die Aside wird ausschließlich per JS
   eingefügt (siehe fragen.html) und die Klasse has-chat-toc ebenfalls per JS
   auf #main gesetzt — ohne JS bleibt die Seite einspaltig, keine Leerspalte.
   Wiederverwendet .toc/.toc-label/.toc-list/.toc-link aus der Gliederungs-
   Spalte oben für einheitliche Optik. */

.chat-toc { display: none; }

@media (min-width: 1180px) {
  /* Analog zum Artikel-TOC: fixe Leiste rechts, Chat-Lesespalte zentriert
     zwischen Sidebar und Leiste (mittig im Fenster). */
  .column.has-chat-toc {
    max-width: none;
    padding-right: calc(var(--side-w) + var(--gutter));
  }

  .column.has-chat-toc .chat-shell {
    max-width: calc(var(--measure) * 1.2);
    margin: 0 auto;
    min-width: 0;
  }

  .column.has-chat-toc .chat-toc {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: var(--side-w);
    height: 100vh;
    overflow-y: auto;
    padding: 3rem 1.4rem;
    border-left: 1px solid var(--rule);
    background: var(--side-bg);
    z-index: 10;
  }
}

/* Frage-Einträge (Top-Level) etwas kräftiger als die eingerückten
   Antwort-Überschriften darunter — hebt die Gesprächsstruktur hervor. */
.chat-toc .toc-question > .toc-link { color: var(--ink); font-weight: 600; }

/* ——— Inbox / Eingang ——————————————————— */

.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.8rem;
}

.tab-nav .tab {
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.tab-nav .tab:hover { color: var(--ink); }

.tab-nav .tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3em;
  padding: 0 0.3em;
  height: 1.3em;
  border-radius: 999px;
  background: var(--rule);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  margin-left: 0.3em;
  vertical-align: middle;
}

.inbox-summary {
  display: flex;
  gap: 1.4rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin: 0 0 2.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule);
}

.inbox-summary .num {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "wght" 460, "SOFT" 30;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: block;
  text-transform: none;
  margin-top: 0.15rem;
  font-feature-settings: "onum", "lnum" 0;
}

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

.inbox-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.inbox-item:last-child { border-bottom: none; }

.item-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
  flex-wrap: wrap;
}

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--serif);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 0.18rem 0.55rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.type-badge.link {
  background: var(--sage-wash);
  color: var(--sage-deep);
  border: 1px solid var(--sage-light);
}

.type-badge.md {
  background: var(--paper-raised);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}

.type-badge.doc {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}

.type-badge svg { width: 10px; height: 10px; }

/* Typ-Tags Inline-Popover */
.type-tags {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  vertical-align: middle;
}

.type-badge-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 0.18rem 0.55rem;
  border-radius: 2px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-soft);
  cursor: pointer;
  line-height: inherit;
}

.type-badge-btn:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}

.type-add-btn {
  font-family: var(--serif);
  font-size: 0.75rem;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.2rem;
  line-height: inherit;
}

.type-add-btn:hover { color: var(--ink-soft); }

.type-popover {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 200;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.6rem 0.75rem 0.75rem;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.type-popover.open { display: block; }

.type-popover-form { display: flex; flex-direction: column; gap: 0; }

.popover-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.popover-option:hover { color: var(--ink); }
.popover-option input { cursor: pointer; margin: 0; }

.popover-footer {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}

.btn-small {
  font-family: var(--serif);
  font-size: 0.8rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
}

.btn-small:hover { border-color: var(--ink-soft); }

.item-title {
  font-family: var(--display);
  font-variation-settings: "opsz" 30, "wght" 460, "SOFT" 20;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}

.item-title:hover { color: var(--sage-deep); }

.item-origin {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin: 0 0 0.6rem;
  font-style: italic;
}

.tdm-warn {
  font-size: 0.8rem;
  color: #8a5a00;
  background: rgba(180, 120, 0, 0.08);
  border-left: 3px solid #b47800;
  padding: 0.35rem 0.6rem;
  margin: 0 0 0.6rem;
  border-radius: 0 3px 3px 0;
}

.tdm-warn summary {
  cursor: pointer;
  list-style: none;
}

.tdm-warn summary::-webkit-details-marker {
  display: none;
}

.tdm-warn summary::after {
  content: " ⓘ";
  opacity: 0.7;
}

.tdm-warn[open] summary::after {
  content: " ▴";
}

.tdm-warn .tdm-explain {
  margin: 0.45rem 0 0;
  color: var(--ink-muted);
  line-height: 1.5;
}

.freigabe-action {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-left: 0.6rem;
  flex-shrink: 0;
}

.item-summary {
  margin: 0 0 0.9rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.55;
}

.commit-details {
  margin: 0 0 0.8rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.commit-details > summary {
  cursor: pointer;
  user-select: none;
  color: var(--ink-faint);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.commit-details > summary::before {
  content: '▸';
  font-size: 0.7em;
  transition: transform 120ms;
}

.commit-details[open] > summary::before {
  transform: rotate(90deg);
}

.commit-files {
  margin: 0.5rem 0 0;
  line-height: 1.7;
  word-break: break-all;
}

.item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.item-foot .meta-line { font-variant-caps: small-caps; letter-spacing: 0.12em; }

.expiry { color: var(--ink-muted); }
.expiry.soon { color: #9a5a2a; }

.item-actions {
  display: inline-flex;
  gap: 0.45rem;
}

/* ——— Buttons / Actions ————————————————— */

.action {
  font-family: var(--serif);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.4rem 0.75rem;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  transition: all 160ms ease;
}

.action:hover {
  background: var(--paper-raised);
  color: var(--ink);
}

.action.primary {
  border-color: var(--sage-deep);
  background: var(--sage-deep);
  color: var(--paper);
}

.action.primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.action.danger:hover {
  border-color: #b25a4a;
  color: #b25a4a;
  background: transparent;
}

.action.danger-confirm {
  background: #b25a4a;
  color: var(--paper);
  border-color: #b25a4a;
}

.action.danger-confirm:hover { background: #7a3024; border-color: #7a3024; }

/* ——— Triage (Eingang-Item) ————————————— */

.triage-bar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.triage-btn {
  font-family: var(--serif);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.5em 1.2em;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 2px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.triage-btn:hover {
  background: var(--sage-wash);
  color: var(--sage-deep);
  border-color: var(--sage-light);
}

.triage-btn.primary {
  background: var(--sage-deep);
  color: var(--paper);
  border-color: var(--sage-deep);
}

.triage-btn.primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}

/* ——— Review ————————————————————————— */

.interval-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 0.18rem 0.55rem;
  border-radius: 2px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  flex-shrink: 0;
}

.interval-badge.fresh { color: var(--sage-deep); border-color: var(--sage-light); background: var(--sage-wash); }
.interval-badge.aging { color: #6f5418; border-color: #d6c08a; background: #f5edd6; }
.interval-badge.stale { color: #b25a4a; border-color: #d8a89c; background: #f5e5e0; }

.review-meta {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: 0 0 0.7rem;
  font-variant-caps: small-caps;
  letter-spacing: 0.12em;
}

.review-meta .sep { color: var(--ink-faint); margin: 0 0.5rem; }

.review-snippet {
  margin: 0 0 0.9rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  font-style: italic;
}

.confirm-row {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  background: #f5e5e0;
  border: 1px solid #d8a89c;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.confirm-row .warning {
  font-size: 0.88rem;
  color: #7a3024;
  font-style: italic;
}

.confirm-row .actions {
  display: inline-flex;
  gap: 0.45rem;
}

/* ——— Delete Zone ——————————————————————— */

.delete-zone {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* ——— KI-Bildbeschreibung ——————————————— */

blockquote.ki-bildbeschreibung {
  margin: 1.8rem 0;
  padding: 0.85rem 1.05rem;
  background: var(--sage-wash);
  border: 1px solid var(--sage-light);
  border-left: 3px solid var(--sage);
  border-radius: 0 3px 3px 0;
  font-style: normal;
  font-family: var(--serif);
  font-variation-settings: normal;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}

aside.ki-bildbeschreibung {
  margin: 1.8rem 0;
  padding: 0.85rem 1.05rem;
  background: var(--sage-wash);
  border: 1px solid var(--sage-light);
  border-left: 3px solid var(--sage);
  border-radius: 0 3px 3px 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}

blockquote.ki-bildbeschreibung::before,
aside.ki-bildbeschreibung::before {
  content: "Automatisch erzeugte Bildbeschreibung";
  display: block;
  font-family: var(--serif);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sage-deep);
  margin-bottom: 0.6rem;
  font-style: normal;
  font-variation-settings: normal;
}

aside.ki-bildbeschreibung blockquote {
  margin: 0.5rem 0;
  padding: 0;
  border-left: none;
  background: none;
  font-style: normal;
  font-family: inherit;
  font-variation-settings: normal;
  color: inherit;
  font-size: inherit;
}

aside.ki-bildbeschreibung p:last-child {
  margin: 0.6rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px dotted var(--sage-light);
  font-size: 0.82rem;
  color: var(--ink-muted);
}

/* ——— Ingest-Log ——————————————————————— */

/* ——— PDF-Upload (Eingang) ————————————————— */
.pdf-upload {
  /* margin-top: sitzt jetzt unter der Item-Liste (UI-Entzerrung Eingang/Aufnehmen),
     braucht daher Abstand nach oben statt nur nach unten. */
  margin: 2.5rem 0;
  padding: 1.3rem 1.5rem 1.5rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.pdf-upload__eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--serif);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sage-deep);
}

.pdf-dropzone {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.3rem 1.4rem;
  border: 1.5px dashed var(--sage-light);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.pdf-dropzone:hover,
.pdf-dropzone:focus-within {
  border-color: var(--sage-deep);
  background: var(--sage-wash);
}

.pdf-dropzone.is-dragover {
  border-style: solid;
  border-color: var(--sage-deep);
  background: var(--sage-wash);
}

/* Datei-Input unsichtbar, aber tastaturfokussierbar (Fokusring via focus-within) */
.pdf-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pdf-dropzone__icon {
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--sage-deep);
}

.pdf-dropzone__lead {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--ink);
}

.pdf-dropzone__lead u {
  text-decoration-color: var(--sage-light);
  text-underline-offset: 3px;
}

.pdf-dropzone__hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  /* --ink-faint statt --ink-muted: in pkm/philosophie/garten auf AA (>= 4,5:1)
     auf der erhöhten Fläche (--paper-raised) getunt; --ink-muted unterschritt
     dort den Kontrast (PKM 4,39:1, Garten 3,58:1). */
  color: var(--ink-faint);
}

.pdf-upload__files {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.pdf-upload__files li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.pdf-upload__files li:last-child { border-bottom: none; }

.pdf-upload__files .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-upload__files .size {
  flex: none;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.pdf-upload__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.pdf-upload__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
}

@media (max-width: 40rem) {
  .pdf-dropzone { flex-direction: column; text-align: center; }
  .pdf-upload__foot { flex-direction: column; align-items: stretch; }
  .pdf-upload__foot .btn { width: 100%; }
}

.ingest-log {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: #d4cfca;
  border-radius: 6px;
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.7rem;
  line-height: 1.55;
  max-height: 280px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ——— Einstellungen ————————————————————— */

.settings-saved {
  background: var(--sage-wash);
  color: var(--sage-deep);
  border: 1px solid var(--sage-light);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
}

.settings-form { display: flex; flex-direction: column; gap: 0; }

.settings-section {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.settings-section h2 {
  font-family: var(--serif);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin: 0 0 1.2rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.field:last-child { margin-bottom: 0; }

.field label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.field input[type="text"],
.field input[type="number"],
.field select {
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.4rem 0.65rem;
  font-family: var(--serif);
  font-size: 0.9rem;
  background: var(--paper-raised);
  color: var(--ink);
  max-width: 28rem;
}

.field input[type="number"] { max-width: 6rem; }

.field input:focus,
.field select:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
  border-color: transparent;
}

.field-hint {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: 0;
}

.field-hint-inline {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.85rem 2rem;
}

.review-grid .field { margin-bottom: 0; }

.review-grid input[type="number"] { max-width: 5rem; }

.ri-hint {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.settings-actions {
  padding: 1.5rem 0 0;
}

.cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cost-card {
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg-soft, transparent);
}

.cost-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.cost-value {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin: 0.25rem 0;
}

.cost-meta {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.cost-breakdown {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 0.85rem;
}

.cost-breakdown th,
.cost-breakdown td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.cost-breakdown th {
  font-weight: normal;
  color: var(--ink-faint);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cost-range-form {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.cost-range-form .field { margin-bottom: 0; }

.cost-range-result { margin-top: 0.75rem; }

.tools-section { border-bottom: none; }

/* Kompakte, gleichförmige Werkzeug-Zeile (Wartung): Name + Kurzbeschreibung
   links, Aktionsknopf rechts, vertikal mittig; dezente Trennlinie zwischen
   den Zeilen statt einzelner <hr>/Abstands-Inlinestyles. */
.toolrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

.toolrow:last-child { border-bottom: none; }

.toolrow-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.toolrow-text b { font-size: 0.9rem; font-weight: 600; color: var(--ink); }

.toolrow-text small {
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

.toolrow .btn { flex-shrink: 0; }

/* ——— Responsive ———————————————————————— */

@media (max-width: 600px) {
  html { font-size: 106.25%; }   /* 17px-Äquivalent; ganzes UI skaliert proportional */
  .item-foot { align-items: flex-start; flex-direction: column; gap: 0.7rem; }
  .column { padding: 2rem var(--gutter) 3.5rem; }
  h1.title { font-size: 2rem; }
  article p.lede::first-letter { font-size: 3.4rem; }
  .toolrow { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  /* Sidebar wird zum Off-Canvas-Drawer: außerhalb des Bildschirms per
     transform, öffnet über html.side-open (siehe _layout.html-Script).
     visibility (mit transition-delay) zusätzlich zu transform: ein reiner
     transform-Slide verschiebt nur die Optik, die Links/Buttons bleiben
     unsichtbar per Tab erreichbar. visibility:hidden nimmt sie aus der
     Tab-Reihenfolge, der delay lässt die Slide-Animation beim Öffnen/Schließen
     trotzdem sichtbar ablaufen (sofort sichtbar beim Öffnen, erst nach der
     Animation unsichtbar beim Schließen). */
  .side {
    width: 280px;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 200ms ease, visibility 0s linear 200ms;
    box-shadow: 12px 0 32px -18px rgba(31, 26, 23, 0.35);
  }

  html.side-open .side {
    transform: translateX(0);
    visibility: visible;
    transition: transform 200ms ease, visibility 0s linear 0s;
  }
  html.side-open .scrim { display: block; }

  /* Einklappen ist ein Desktop-Konzept, mobil gilt nur der Drawer. */
  .side-toggle { display: none; }

  /* Sidebar liegt als Overlay über dem Inhalt, reserviert keinen Platz mehr. */
  .app-main { margin-left: 0; }

  .topbar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.65rem 0.9rem;
  }

  .topbar-burger,
  .topbar-newchat {
    display: inline-flex;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-soft);
    padding: 0.2rem;
    line-height: 0;
    text-decoration: none;
  }

  .topbar-brand {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 480, "SOFT" 30;
    font-size: 0.95rem;
    color: var(--ink);
    text-decoration: none;
  }

  .topbar-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-brand .sprig { width: 20px; height: 20px; color: var(--sage); flex-shrink: 0; }
  .topbar-brand em { font-style: italic; color: var(--sage-deep); }
}

@media (min-width: 900px) {
  .column { padding: 4.5rem var(--gutter) 6rem; }
}

/* ——— Log-Viewer ————————————————————— */

.log-page-header {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.log-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.log-search {
  flex: 1 1 14rem;
  min-width: 10rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.85rem;
}

.log-level-select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 0.85rem;
}

.log-count {
  font-size: 0.78rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.log-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-top: 2rem;
}

.log-table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.72rem;
  line-height: 1.45;
}

.log-table thead th {
  background: var(--paper-raised);
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.log-table tbody tr {
  border-bottom: none;
}

.log-table tbody tr:nth-child(odd)  { background: var(--paper); }
.log-table tbody tr:nth-child(even) { background: var(--paper-raised); }

.log-table td {
  padding: 0.55rem 0.75rem;
  vertical-align: top;
  border-top: 1px solid var(--rule-soft);
}

.log-table tbody .log-row.log-error   { background: #fff0f0; }
.log-table tbody .log-row.log-warning { background: #fef9e7; }
.log-table tbody .log-row.log-debug   { color: var(--ink-muted); }

.level-badge {
  display: inline-block;
  padding: 0.1em 0.45em;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.level-error   { background: #fde8e8; color: #c0392b; }
.level-warning { background: #fef3cd; color: #7d5a00; }
.level-info    { background: var(--sage-wash); color: var(--sage-deep); }
.level-debug   { background: var(--rule-soft); color: var(--ink-muted); }

.col-ts     { white-space: nowrap; color: var(--ink-muted); width: 11rem; }
.col-level  { white-space: nowrap; width: 5.5rem; }
.col-logger { white-space: nowrap; color: var(--ink-muted); width: 9rem; }
.col-msg    { word-break: break-word; }

.exc-detail {
  margin-top: 0.3rem;
}

.exc-detail summary {
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.exc-detail pre {
  margin: 0.3rem 0 0;
  padding: 0.5rem;
  background: var(--ink);
  color: #d4cfca;
  border-radius: 4px;
  font-size: 0.68rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.log-msg-text {
  word-break: break-word;
  font-weight: 600;
}

.log-extras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.15rem 1.5rem;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule-soft);
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.68rem;
}

.log-extra-pair {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  overflow: hidden;
}

.log-extras dt {
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.log-extras dd {
  margin: 0;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 120ms ease;
  border-radius: 3px;
  padding: 0 0.2em;
}

.log-extras dd[data-copy]:hover {
  background: var(--sage-wash, rgba(0, 0, 0, 0.05));
}

.log-extras dd.copied {
  color: var(--sage, #4a7c59);
  font-weight: 500;
}

.log-footer {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

/* Archivierte Seiten */

.banner-archiviert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--sage-wash);
  border-left: 3px solid var(--sage);
  padding: 0.75rem 1rem;
  margin-bottom: 2.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.archiv-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.archiv-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.archiv-item:last-child { border-bottom: none; }

.archiv-item-title {
  font-family: var(--display);
  font-variation-settings: "opsz" 30, "wght" 420, "SOFT" 20;
  color: var(--ink);
  text-decoration: none;
  flex: 1;
}

.archiv-item-title:hover { color: var(--sage-deep); }

.archiv-item-meta {
  font-size: 0.8rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

article a.wikilink.wikilink-archived {
  color: #C06420;
  border-bottom-color: #C06420;
}

article a.wikilink.wikilink-archived:hover {
  background: #fdf0e6;
  border-bottom-color: #C06420;
}

.wikilink-archived .archived-marker {
  font-size: 0.78em;
  opacity: 0.7;
}

.archived-chip {
  opacity: 0.7;
  font-style: italic;
}

.suche-archiv-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
}

/* ——— Suche: eigene Suchbox mit Lupe, getrennte Aktionszeile ——————
   Anders als .ask-form (Chat-Eingabebox) trägt hier .searchbox die
   Box-Optik (Rahmen/Hintergrund) direkt um das Eingabefeld; .search-actions
   liegt bewusst schlicht darunter, ohne gepunktete Oberkante wie
   .ask-actions, da sie nicht mehr Teil derselben Box ist. */
.suche-form { margin: 2rem 0 0; }

.searchbox {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.7rem 1rem;
}

.searchbox svg {
  width: 17px;
  height: 17px;
  color: var(--ink-muted);
  flex: none;
}

.searchbox input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.searchbox input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

.search-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.9rem;
}

/* ——— Such-Autocomplete (E6) ————————————— */

.suche-ac { position: relative; }

.suche-vorschlaege {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--paper-raised, var(--paper));
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  max-height: 16rem;
  overflow-y: auto;
}

.suche-vorschlaege[hidden] { display: none; }

.suche-vorschlag {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  border-radius: 6px;
}

.suche-vorschlag:hover,
.suche-vorschlag.is-active {
  background: var(--sage-wash);
  color: var(--sage-deep);
}

.suche-vorschlag-art {
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.suche-vorschlag:hover .suche-vorschlag-art,
.suche-vorschlag.is-active .suche-vorschlag-art {
  color: var(--sage-deep);
}

/* ——— Artikel-Bilder + Lightbox ————————— */

article img {
  max-width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
  border-radius: 2px;
  margin: 1.2rem 0;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 26, 23, 0.92);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  cursor: zoom-out;
}

.lightbox-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
}

/* ——— Barrierefreiheit ———————————————————————
   Theme-übergreifend (alle Wikis): Skip-Link, sichtbarer Tastatur-Fokus,
   Reduced-Motion. Nutzt die --sage-Variablen des jeweils geladenen Themes. */

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3.5rem;
  z-index: 1000;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--sage);
  border-radius: 4px;
  padding: 0.5em 0.9em;
  font-family: var(--display);
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 120ms ease;
}

.skip-link:focus {
  top: 0.5rem;
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

/* Programmatischer Sprungfokus auf <main> braucht keinen Ring. */
main:focus {
  outline: none;
}

/* Globaler Tastatur-Fokus — gilt für alle interaktiven Elemente, die sonst
   keinen eigenen sichtbaren Fokus haben (Links, Buttons, Nav, Tabs). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* --- TeX-Formeln (KaTeX) --- */
/* Vor dem Client-Rendering zeigen die Spans den rohen TeX-Quelltext (Fallback
   ohne JS); Display-Formeln stehen als Block, überbreite scrollen horizontal. */
.math-display {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0;
}