/* goldisch – Basis-Stylesheet nach dem Berger-UI-Kit (Stand 2026-09-03):
   nüchtern, hell, viel Weißraum, dünne Linien statt Schatten, kaum Rundungen.
   Farbe bedeutet Status (success/error/running), sonst Grautöne. Mobile first.
   Farben ausschließlich über die Tokens in :root. Der Reader (reader.css) hat eigene Farbschemata. */

@import url("../vendor/fonts/fonts.378b590ad93c.css");

:root {
  color-scheme: light;
  --bg:        #ffffff;
  --bg-2:      #f5f4f0;
  --bg-3:      #ebeae3;
  --ink:       #1d1d1b;
  --ink-2:     #4a4a47;
  --ink-3:     #8a8a85;
  --ink-4:     #c7c6bf;
  --line:      #e6e5df;
  --line-2:    #cfcec7;
  --accent:    #1d1d1b;
  --running:   #c8770d;
  --success:   #2d7a3f;
  --error:     #c8281c;
  --confirm:   #a07d00;
  --confirm-2: #e0b200;
  --highlight: #fdf5e8;
  --success-bg: #eff6f0;
  --error-bg:   #fbeeec;
  /* goldisch-Ergänzung zum Kit: Gold als Markenfarbe – Primäraktion, Fortschritt, aktive Zustände, Wortmarke. */
  --gold:      #d4a72c;   /* Flächen (mit dunklem Text) */
  --gold-2:    #b08a1e;   /* Rahmen, Hover */
  --gold-3:    #8a6d12;   /* Text auf hellem Grund */
  --gold-soft: #fbf3d9;   /* Tönung */
  /* Regalfarben – sechs ruhige Tönungen; je Regal ein Rand- und ein Flächenton. */
  --shelf-sand:      #b08a1e;  --shelf-sand-bg:      #fbf3d9;
  --shelf-moos:      #4f7a52;  --shelf-moos-bg:      #eef4ee;
  --shelf-himmel:    #4a6f95;  --shelf-himmel-bg:    #edf2f7;
  --shelf-ton:       #a06a4a;  --shelf-ton-bg:       #f8f0eb;
  --shelf-rose:      #a05a72;  --shelf-rose-bg:      #f9eef2;
  --shelf-schiefer:  #5d6068;  --shelf-schiefer-bg:  #f0f0f1;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100dvh; display: flex; flex-direction: column; }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); transition: border-color .15s; }
a:hover { border-bottom-color: var(--gold-2); color: var(--gold-3); }
a.plain, .brand, .nav a, .pill, .book-card a, .book-row-link, .continue-link { border-bottom: 0; }

h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(26px, 5vw, 40px); line-height: 1.05; margin-bottom: 20px; }
h2 { font-size: 17px; letter-spacing: -0.01em; margin-bottom: 12px; }
p { margin: 0 0 12px; }
.lead { margin: 0 0 24px; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 60ch; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; }
[hidden] { display: none !important; }

/* ───── SEITENGERÜST ───── */
.shell {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 16px 0;
  padding-top: max(16px, env(safe-area-inset-top));
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.view { padding-top: 24px; }
.view.narrow { max-width: 480px; }

/* Fußzeile: zwei dezente Links, Trenner in der Schriftfarbe der Zeile. */
.site-footer a { color: inherit; border-bottom: 1px solid var(--line-2); }
.site-footer a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.site-footer .sep { margin: 0 6px; }
.site-footer {
  flex-shrink: 0;
  margin-top: 48px;
  padding: 20px 16px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
}

/* ───── KOPFZEILE ───── */
header.top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); margin-right: auto; min-width: 0; }
/* Marke und Zeichen werden nie zusammengequetscht – nur der Zusatz daneben gibt nach. */
.brand-mark { display: inline-flex; width: 32px; height: 32px; flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-name { font-weight: 600; font-size: 19px; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; flex: none; }
.brand-i { position: relative; display: inline-block; }
.brand-i::after { content: ""; position: absolute; left: 50%; top: .02em; transform: translateX(-50%); width: .19em; height: .19em; border-radius: 50%; background: var(--gold); }
.brand .sub {
  display: none;
  font-weight: 400;
  color: var(--ink-3);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding-left: 12px;
  border-left: 1px solid var(--line-2);
  /* Ein sehr langer Familienname endet mit „…“, statt die Kopfzeile auseinanderzuziehen. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav, .nav-user { display: flex; align-items: center; gap: 4px; }
.nav a { white-space: nowrap; }
.nav a, .nav-user a {
  padding: 8px 10px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav a:hover, .nav-user a:hover { color: var(--ink); }
.nav a[aria-current="page"], .nav-user a[aria-current="page"] { color: var(--ink); border-color: var(--line-2); border-bottom: 2px solid var(--gold); background: var(--bg-2); }
/* Um den Avatar kommt gar kein Rahmen – weder der eckige Kasten des aktiven Menüpunkts noch
   ein Ring (Wunsch des Projektinhabers 2026-09-07). Wo man ist, zeigt die Unternavigation
   der Seite. */
.nav-user .nav-avatar,
.nav-user .nav-avatar[aria-current="page"] { padding: 2px; border: 0; background: transparent; border-radius: 50%; }
/* Marke, Glocke und Profil in der ersten Zeile, die Menüpunkte darunter in so vielen Zeilen wie
   nötig – nichts läuft über den rechten Rand, nichts muss gewischt werden.

   Bis 1279 px, weil nebeneinander alles zusammen 1211 px braucht (Marke mit Familienname 465,
   Menü 632, Glocke und Profil 82, dazu zweimal 16 px Abstand) und die Seite links und rechts
   je 56 px Rand hat. Auf dem iPad (768 bis 1024 px) lief das Menü sonst in den Familiennamen
   (Rückmeldung aus dem Test, 2026-09-07), auf dem Laptop brachen Marke und Menüpunkte um. */
@media (max-width: 1279px) {
  header.top { flex-wrap: wrap; gap: 4px 8px; padding-bottom: 8px; }
  .nav-user { order: 1; }
  .nav { order: 2; flex: 1 1 100%; flex-wrap: wrap; gap: 0; margin: 4px -6px 0; }
  .nav a { padding: 8px 6px; }
}

/* ───── SPRACHWÄHLER ───── */
/* Vor der Anmeldung oben rechts in der Kopfzeile, im Profil als Feld – beide Male Flagge
   und Auswahlliste nebeneinander, gedeckt gehalten wie die Umschalter. Die Auswahlliste
   nimmt nur so viel Breite wie ihr Inhalt (die Formularregeln unten machen sie sonst so
   breit wie das Panel). */
.language-select { display: flex; align-items: center; gap: 8px; }
.language-select select { width: auto; min-width: 0; font-size: 14px; padding: 7px 10px; }
.language-flag { display: inline-flex; flex: none; }
.language-flag img { display: block; width: 20px; height: 15px; border: 1px solid var(--line-2); }
@media (max-width: 1279px) {
  .language-select { order: 1; }
}

/* ───── STATUS-BANNER (Meldungen, Lesestatus) ───── */
.status-banner {
  margin: 0 0 16px;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
}
.status-banner.has-stats { grid-template-columns: auto 1fr auto; }
.status-banner .sb-led { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-4); }
.status-banner .sb-state { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.status-banner .sb-msg { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.3; margin-top: 2px; }
.status-banner .sb-msg p { margin: 0; }
.status-banner .sb-sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.status-banner .sb-stats { display: flex; gap: 24px; align-items: center; }
.status-banner .sb-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.status-banner .sb-stat b { font-size: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0; margin-bottom: 2px; }
.status-banner.running { border-color: var(--running); background: var(--highlight); }
.status-banner.gold { border-color: var(--gold); background: var(--gold-soft); }
.status-banner.gold .sb-led { background: var(--gold); box-shadow: 0 0 0 4px rgb(212 167 44 / 20%); }
.status-banner.gold .sb-state { color: var(--gold-3); }
.status-banner.running .sb-led { background: var(--running); box-shadow: 0 0 0 4px rgb(200 119 13 / 18%); }
.status-banner.running .sb-state { color: var(--running); }
.status-banner.ok { border-color: var(--success); background: var(--success-bg); }
.status-banner.ok .sb-led { background: var(--success); }
.status-banner.ok .sb-state { color: var(--success); }
.status-banner.err { border-color: var(--error); background: var(--error-bg); }
.status-banner.err .sb-led { background: var(--error); box-shadow: 0 0 0 4px rgb(200 40 28 / 15%); }
.status-banner.err .sb-state { color: var(--error); }
.status-banner .sb-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.status-banner .bar-track { margin-top: 8px; }
/* Hinweis ohne JavaScript: eigener .shell-Rahmen, damit er bündig mit der Seite liegt, aber nicht mitwächst. */
.noscript-shell { flex: 0 0 auto; }

/* ───── TOOLBAR UND PILLEN ───── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  margin-bottom: 16px;
}
.toolbar.attached { margin-bottom: 0; border-bottom: none; }
.toolbar .grow { flex: 1; }
.toolbar .search-wrap { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.toolbar .search-wrap .icon { color: var(--ink-3); }
.toolbar .search-wrap input[type="search"] {
  flex: 1; min-width: 0; width: 100%;
  background: transparent; border: none; outline: none;
  color: var(--ink); font-family: var(--sans); font-size: 14px; padding: 6px 0;
}
.toolbar input[type="search"]::placeholder { color: var(--ink-3); }
.toolbar .ctl { display: flex; align-items: center; gap: 8px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; font-weight: 500; white-space: nowrap; }
.toolbar .ctl select, select.ctl-select {
  appearance: none; -webkit-appearance: none;
  background: var(--bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4a47' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  padding: 7px 26px 7px 10px; cursor: pointer; width: auto; max-width: 100%;
}
.toolbar .ctl select:focus { outline: none; border-color: var(--ink); }
/* Smartphone: die Auswahlfelder teilen sich die Breite und brechen um, statt nach rechts zu laufen. */
@media (max-width: 639px) {
  .toolbar .ctl { flex: 1 1 100%; flex-wrap: wrap; }
  .toolbar .ctl select { flex: 1 1 40%; min-width: 0; }
}


.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.3;
  cursor: pointer; white-space: nowrap;
  transition: all .15s;
  text-decoration: none;
}
.pill:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.pill.primary { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.pill.primary:hover { color: var(--ink); background: var(--gold-2); border-color: var(--gold-2); }
.pill.back { font-weight: 600; }
.pill.danger { color: var(--error); border-color: var(--error); }
.pill.danger:hover { background: var(--error); color: var(--bg); }
.pill.quiet { border-color: transparent; background: transparent; }
.pill.quiet:hover { border-color: var(--ink); background: var(--ink); }
/* Inline-Bestätigung (siehe confirm.js): erster Klick schärft den Knopf statt window.confirm zu öffnen.
   Muss nach den Zustandsvarianten (danger/quiet/primary) stehen, damit :hover sie nicht überschreibt. */
.pill.is-armed, .pill.is-armed:hover {
  position: relative; overflow: hidden;
  background: var(--gold-soft); border-color: var(--gold-2); color: var(--gold-3);
}
.pill.is-armed::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--gold);
  animation: confirm-countdown var(--confirm-seconds, 10s) linear forwards;
}
@keyframes confirm-countdown { from { width: 100%; } to { width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pill.is-armed::after { animation: none; width: 50%; }
}
/* ``hidden`` muss auch bei Knöpfen wirken: ``display: inline-flex`` oben schlägt sonst die
   Vorgabe des Browsers (etwa beim „Wechseln“-Knopf des Sprachwählers ohne JavaScript). */
.pill[hidden] { display: none; }
.pill.block { width: 100%; }
.pill.icon-only { padding: 8px; }
.pill:disabled, .pill[aria-disabled="true"] { opacity: 0.5; cursor: default; background: var(--bg); color: var(--ink-3); border-color: var(--line-2); }
.pill .icon { width: 16px; height: 16px; }
.segmented { display: inline-flex; }
.segmented .pill { padding: 8px 10px; }
.segmented .pill + .pill { margin-left: -1px; }
.segmented .pill.is-active { color: var(--ink); background: var(--gold); border-color: var(--gold); z-index: 1; }
/* Unternavigation unter der Überschrift (Feedback-Runde 1): Tabs in der Optik der Umschalter –
   gedeckt, Gold nur für die Seite, auf der man gerade steht. */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 20px; }
.subnav .pill.is-active, .subnav .pill.is-active:hover {
  color: var(--ink); background: var(--gold); border-color: var(--gold);
}
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

/* ───── PANEL ───── */
.panel { border: 1px solid var(--line-2); background: var(--bg); display: flex; flex-direction: column; margin-bottom: 16px; }
.panel-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.panel-note { margin-left: auto; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.panel-body { padding: 16px; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-foot { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 12px; color: var(--ink-2); }
.panel-foot p { margin: 0; }
.panel-empty { padding: 40px 16px; text-align: center; }
.panel-empty .lead { margin: 0 auto 8px; }

/* ───── TABELLE ───── */
.table-scroll { overflow: auto; -webkit-overflow-scrolling: touch; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-2); color: var(--ink);
  text-align: left; padding: 10px 12px;
  border-bottom: 2px solid var(--ink);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
table.grid td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover td { background: var(--bg-2); }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
table.grid td.action { text-align: right; white-space: nowrap; }
table.grid tr.is-inactive td { color: var(--ink-3); }
table.grid .cell-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
table.grid .cell-with-avatar { display: flex; align-items: center; gap: 10px; }
table.grid .copy-row { margin-top: 6px; }
/* Offene Einladungen (Schritt 7h): Neben Adresse, Rolle und Ablauf soll der Link noch
   zu lesen sein – die erste Spalte bekommt deshalb den größten Anteil der Breite. */
table.grid.invitations th:first-child { width: 38%; }

/* ───── PAGER ───── */
.pager {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-2); border-top: none;
  background: var(--bg-2);
  font-size: 12px; color: var(--ink-2);
}
.pager.standalone { border-top: 1px solid var(--line-2); margin-top: 20px; }
.pager .pager-info { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.pager nav { display: flex; gap: 8px; align-items: center; }

/* ───── FORMULARE ───── */
.field { margin-bottom: 16px; }
.field label, .field .label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.field .help { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }
.field .error { margin: 6px 0 0; font-size: 12px; color: var(--error); }
.field-error input, .field-error select, .field-error textarea { border-color: var(--error); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], select, textarea {
  width: 100%;
  font: inherit; font-size: 16px; /* 16px verhindert das automatische Zoomen auf iOS */
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: 10px 12px;
}
@media (min-width: 640px) {
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="search"], input[type="url"], select, textarea { font-size: 14px; padding: 9px 12px; }
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-2); }
button:focus-visible, a:focus-visible, .pill:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
input[readonly] { background: var(--bg-2); color: var(--ink-2); font-family: var(--mono); font-size: 12px; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold-2); margin: 0; }
.field-check label { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }

.form-inline { display: grid; gap: 12px; align-items: end; }
.form-inline .field { margin-bottom: 0; }
@media (min-width: 640px) { .form-inline { grid-template-columns: 1fr auto auto; } }
/* Einladen (Schritt 7h): Mit eingerichtetem E-Mail-Versand hat das Formular vier Felder –
   Bezeichnung und Adresse teilen sich den Platz, Rolle und Sprache nehmen nur, was sie
   brauchen; der Knopf rückt in die zweite Zeile. Ohne Versand bleibt es bei .form-inline. */
@media (min-width: 640px) { .form-invite { grid-template-columns: 1fr 1fr auto auto; } }

.copy-row { display: flex; gap: 6px; }
.copy-row input { flex: 1; min-width: 0; }

/* Konfigurationsbeispiele („So verbindest du eine KI“, Schritt 7a). Der Block scrollt für
   sich – auf dem Handy soll eine lange Zeile nicht die ganze Seite verschieben. */
.codeblock {
  margin: 0 0 12px; padding: 12px; border: 1px solid var(--line); background: var(--bg-2);
  font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--ink-2);
  white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; width: 32px; height: 32px; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch span { display: block; width: 100%; height: 100%; background: var(--swatch); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line-2); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--gold-2); }
.swatch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ───── AVATAR ───── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  position: relative; overflow: hidden;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--avatar-color, var(--ink));
  color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
}
/* Ein Profilbild liegt über den Initialen (die bleiben im DOM als Rückfall): lädt es nicht
   – kein Netz, kein Bild gesetzt –, bleiben einfach die Initialen sichtbar. Kein JavaScript
   dafür nötig. */
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Mit Profilbild: kein Kreis – weder als Maske noch als farbige Fläche dahinter (Wunsch des
   Projektinhabers 2026-09-07). Das Bild ist schon quadratisch beschnitten und steht für sich. */
.avatar.has-image { border-radius: 0; background: transparent; color: transparent; }
.avatar-lg { width: 96px; height: 96px; font-size: 28px; }

/* ───── LISTEN ───── */
.link-list { list-style: none; padding: 0; margin: 0 0 16px; }
.link-list li { padding: 6px 0; }
dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 13px; }
dl.meta dt { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
dl.meta dd { margin: 0; overflow-wrap: anywhere; }
.badge {
  display: inline-block; padding: 2px 7px;
  border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  vertical-align: middle;
}
.badge.ok { color: var(--success); border-color: var(--success); }
.badge.err { color: var(--error); border-color: var(--error); }
.badge.running { color: var(--running); border-color: var(--running); }
.badge.gold { color: var(--gold-3); border-color: var(--gold-2); }
.badge.quiet { color: var(--ink-3); border-color: var(--line-2); }
/* „Neu“ – dezent in Gold, die Markenfarbe, ohne die Karte zu übertönen. */
.badge.new { color: var(--gold-3); border-color: var(--gold-2); background: var(--gold-soft); }

/* ───── FORTSCHRITT ───── */
.bar-track { display: block; background: var(--bg-3); height: 6px; overflow: hidden; }
.bar-fill { display: block; background: var(--gold); height: 100%; min-width: 2px; transition: width .3s ease; }

/* ───── BIBLIOTHEK ───── */
/* Bilder werden in den 2:3-Rahmen eingepasst, nie beschnitten: Ein quadratisches
   Hörbuch-Cover bekommt oben und unten Rand, aber der Titel bleibt vollständig lesbar. */
.cover {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
}
.cover-placeholder {
  display: flex; align-items: flex-end;
  padding: 10px;
  color: var(--gold-3);
  background: var(--gold-soft);
  border: 1px solid var(--line-2);
  font-weight: 600; font-size: 13px; line-height: 1.25; letter-spacing: -0.01em;
}
.cover-placeholder span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cover-wrap { position: relative; display: block; }
.cover-badge {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px;
  background: var(--success); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.cover-badge .icon { width: 14px; height: 14px; }
.cover-wrap .bar-track { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgb(255 255 255 / 70%); }

.book-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 24px 16px;
}
@media (min-width: 640px) { .book-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 28px 20px; } }
.book-card > a { display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.book-card > a:hover .cover { border-color: var(--gold-2); }
.book-card.is-finished .cover { opacity: .8; }
.book-title { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-authors { font-size: 12px; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.book-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-2); }
.book-row + .book-row { border-top: 1px solid var(--line); }
.book-row-link { display: flex; gap: 14px; align-items: center; padding: 10px 12px; color: var(--ink); transition: background .15s; }
.book-row-link:hover { background: var(--bg-2); }
.book-row-link .cover { width: 44px; flex: none; }
.book-row-link .cover-placeholder { font-size: 7px; padding: 4px; }
.book-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.book-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.result-count { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin: 0 0 12px; }

/* Weiterlesen */
.continue { margin-bottom: 28px; }
.section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
/* Jede Karte gleich groß (grid-auto-rows: 1fr), der Rahmen liegt am Listeneintrag und
   umfasst auch die Anbieter-Pille „Bei Audible weiterhören“; die Pille sitzt unten. */
.continue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 1fr; }
.continue-item { border: 1px solid var(--line-2); background: var(--bg); padding: 12px; transition: border-color .15s, background .15s; }
.continue-item:hover { border-color: var(--gold-2); background: var(--gold-soft); }
.continue-link { display: flex; gap: 14px; color: var(--ink); flex: 1; }
.continue-item .open-link { margin-top: auto; align-self: flex-start; }
.continue-cover { width: 56px; flex: none; }
.continue-cover .cover-placeholder { font-size: 8px; padding: 4px; }
.continue-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.continue-main .bar-track { margin-top: 6px; }
.continue-main .percent { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* Detailseite */
.book-detail { display: grid; gap: 20px; }
@media (min-width: 640px) { .book-detail { grid-template-columns: 200px 1fr; gap: 32px; } }
@media (min-width: 1024px) { .book-detail { grid-template-columns: 260px 1fr; gap: 48px; } }
.book-detail-cover { max-width: 200px; margin: 0; width: 100%; }
/* Coverfeld im Formular: aktuelles Bild neben der Dateiauswahl. */
.cover-field { display: flex; gap: 16px; align-items: flex-start; }
.cover-field .cover-current { width: 90px; flex: none; }
.cover-field .cover-current .cover-placeholder { font-size: 8px; padding: 6px; }
.cover-field .cover-inputs { flex: 1; min-width: 0; }
/* Cover-Wahl auf „Eintragen“: Vorschau des Bildes, das gespeichert würde, darunter die Wahl. */
.cover-choice { margin-bottom: 10px; }
.cover-choice .label { display: block; margin-bottom: 6px; }
.cover-choice-preview { display: block; max-width: 120px; height: auto; margin-bottom: 6px; border: 1px solid var(--line-2); background: var(--bg-2); }
.cover-choice-empty { width: 60px; height: 90px; }
.cover-choice-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
/* Die Wahl steht in einem Feld – dessen Beschriftungsregel (Versalien) gilt hier nicht. */
.cover-choice .cover-choice-option {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px;
  border: 1px solid var(--line-2); cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.cover-choice-option input { accent-color: var(--gold-2); flex: none; }
.cover-choice-option:has(input:checked) { border-color: var(--gold-2); background: var(--gold-soft); color: var(--gold-3); }
.cover-choice-option > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cover-choice-option .muted { font-weight: 400; overflow-wrap: anywhere; }
.cover-choice-busy-row { margin: 0 0 8px; min-height: 3px; }
@media (min-width: 640px) { .book-detail-cover { max-width: none; } }
.book-detail h1 { margin-bottom: 8px; }
.book-detail .lead { margin-bottom: 16px; }
.book-description { margin: 0 0 20px; max-width: 65ch; color: var(--ink-2); font-size: 14px; line-height: 1.65; }

/* Recherche (7f): der Kasten auf der Buchseite. Der Text kommt aus Markdown und ist auf
   Absätze, Überschriften, Listen und Links beschränkt – siehe apps/notes/research.py. */
.research-entry { border-bottom: 1px solid var(--line); }
.research-entry:last-of-type { border-bottom: 0; }
.research-entry > h3 { margin: 0 0 2px; font-size: 15px; }
.research-text { max-width: 65ch; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.research-text h3, .research-text h4, .research-text h5, .research-text h6 { margin: 14px 0 4px; font-size: 14px; color: var(--ink); }
.research-text p, .research-text ul, .research-text ol { margin: 0 0 10px; }
.research-text ul, .research-text ol { padding-left: 20px; }
.research-text a { color: var(--gold-3); }
.research-spoiler { margin: 10px 0; border: 1px solid var(--line); background: var(--bg-2); }
.research-spoiler > summary { padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.research-spoiler[open] > summary { border-bottom: 1px solid var(--line); }
.research-spoiler > .research-text { padding: 10px 12px 2px; }
.research-sources { margin-top: 10px; }
.research-sources h4 { margin: 0 0 4px; font-size: 13px; }
.research-sources ul { margin: 0; padding-left: 20px; font-size: 13px; }

/* Upload */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 36px 16px;
  margin-bottom: 16px;
  border: 1px dashed var(--line-2);
  background: var(--bg-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--gold-2); background: var(--gold-soft); }
.dropzone .icon { width: 28px; height: 28px; color: var(--ink-3); margin-bottom: 4px; }
.dropzone-title { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.dropzone .muted { font-size: 12px; }
.upload-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
#files { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Profilbild auf der Profilseite: große Vorschau, dann Dateiauswahl und „Bild entfernen“
   nebeneinander – jedes ein eigenes Formular (siehe accounts/profile.html), aber optisch
   eine Zeile. */
.avatar-preview { margin-bottom: 12px; }
.avatar-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
progress { width: 100%; height: 6px; margin-bottom: 12px; accent-color: var(--gold); appearance: none; -webkit-appearance: none; border: 0; background: var(--bg-3); }
progress::-webkit-progress-bar { background: var(--bg-3); }
progress::-webkit-progress-value { background: var(--gold); }
progress::-moz-progress-bar { background: var(--gold); }

.upload-results { list-style: none; padding: 0; margin: 0 0 16px; border: 1px solid var(--line-2); }
.upload-result { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; }
.upload-result + .upload-result { border-top: 1px solid var(--line); }
.upload-result-icon { flex: none; display: inline-flex; margin-top: 1px; }
.upload-result.is-ok .upload-result-icon { color: var(--success); }
.upload-result.is-duplicate .upload-result-icon { color: var(--running); }
.upload-result.is-error .upload-result-icon { color: var(--error); }
.upload-result-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.upload-result-main strong { font-weight: 600; }

/* ───── HINWEISKARTE ───── */
.maint-card {
  margin: 0 0 16px;
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  padding: 24px;
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--running);
  background: var(--bg-2);
}
.maint-card.info { border-left-color: var(--gold); }
.maint-card.info .maint-icon { color: var(--gold-3); }
.maint-icon { color: var(--running); display: inline-flex; margin-top: 2px; }
.maint-icon .icon { width: 32px; height: 32px; }
.maint-title { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; margin-bottom: 8px; }
.maint-text { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; }
.maint-text:last-child { margin-bottom: 0; }
.maint-hint { margin: 0; color: var(--ink-3); font-size: 12px; font-family: var(--mono); }
.maint-card .actions { margin: 12px 0 0; }

/* ───── allauth-Seiten (Passwort ändern, Zwei-Faktor) und Django-Formulare ───── */
.view.narrow form:not(.form) { border: 1px solid var(--line-2); padding: 16px; margin-bottom: 16px; background: var(--bg); }
.view.narrow form:not(.form) > div, .view.narrow fieldset { margin-bottom: 16px; }
.view.narrow fieldset { border: 0; padding: 0; margin-left: 0; margin-right: 0; }
.view.narrow form:not(.form) label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.view.narrow form:not(.form) button, .view.narrow form:not(.form) input[type="submit"] {
  display: inline-flex; align-items: center; padding: 8px 14px; margin-top: 4px;
  border: 1px solid var(--gold); background: var(--gold); color: var(--ink);
  font-family: var(--sans); font-size: 12px; font-weight: 500; cursor: pointer;
}
.view.narrow form:not(.form) button:hover { background: var(--gold-2); border-color: var(--gold-2); }
.view.narrow ul.errorlist { margin: 6px 0 0; padding-left: 16px; color: var(--error); font-size: 12px; }
.view.narrow .helptext { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.view.narrow table { width: 100%; border-collapse: collapse; font-size: 13px; }
.view.narrow th, .view.narrow td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); }
.view.narrow img { max-width: 100%; }

/* ───── RESPONSIVE ───── */
@media (min-width: 640px) {
  .shell { padding: 24px 24px 0; }
  .site-footer { padding: 24px; }
  .brand .sub { display: inline; }
}
@media (min-width: 1024px) {
  .shell { padding: 32px 56px 0; }
  .view { padding-top: 40px; }
  .site-footer { padding: 24px 56px; margin-top: 64px; }
}
/* Erst hier ist die Kopfzeile breit genug für eine einzige Reihe – dann darf sie auch Luft haben.
   Das Menü gibt dabei nicht nach (flex: none); zu wenig Platz merkt man am gekürzten Zusatz
   neben der Marke, nicht an umgebrochenen Menüpunkten. */
@media (min-width: 1280px) {
  header.top { padding-bottom: 24px; }
  .nav { flex: none; }
  .nav, .nav-user { gap: 8px; }
  .nav a, .nav-user a { padding: 8px 12px; }
}

/* ───── GRUPPE, NOTIZEN (Phase 4) ───── */
.hl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.hl-gold { background: #d4a72c; } .hl-green { background: #2d7a3f; } .hl-blue { background: #2f6fb5; } .hl-rose { background: #c8567a; }
/* Als Block, sonst gilt die Breite nicht (span) und das Cover füllt die Tabellenzelle. */
.mini-cover { display: block; width: 40px; flex: none; }
.mini-cover .cover { width: 40px; }
.mini-cover .cover-placeholder { font-size: 6px; padding: 3px; }
.quote { font-style: italic; color: var(--ink-2); border-left: 2px solid var(--line-2); padding-left: 10px; margin: 0 0 6px; }
.note-text { white-space: pre-line; }
.member-books { list-style: none; margin: 0; padding: 0; }
.member-book { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.member-book:first-child { border-top: 0; padding-top: 0; }
.member-book-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.member-book-main .bar-track { margin-top: 4px; }
.group-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.group-grid .panel { margin-bottom: 0; }
.panel-head .avatar { width: 24px; height: 24px; font-size: 9px; }
.panel-head .head-member { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 14px; }
.panel-head .cell-with-avatar { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
table.grid .bar-track { min-width: 90px; }
table.grid .cell-main .quote { font-size: 13px; }
table.grid .cell-main .note { font-size: 13px; color: var(--ink-2); white-space: pre-line; }
table.grid .cell-with-avatar > .icon { color: var(--gold-3); }
/* Antwort der Entwicklung zu einer Rückmeldung (Feedback-Hub, Schritt 7b): gedämpft und
   am goldenen Strich als fremde Stimme erkennbar. */
.hub-reply { border-left: 2px solid var(--gold-2); padding-left: 10px; color: var(--ink-3); margin-top: 4px; }
/* Kopf einer Hub-Antwort: Profilbild des KI-Assistenten (partials/avatar_ki.html) neben der
   Zeile „Antwort der Entwicklung (KI), Datum“. Kein pre-line hier, sonst würde jeder Umbruch
   der Vorlage zur Leerzeile. */
.hub-reply-head { display: flex; align-items: center; gap: 8px; white-space: normal; margin-bottom: 2px; }
.avatar-ki { width: 26px; height: 26px; background: var(--gold-soft); color: transparent; }
.avatar-ki svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Bilder an einer Rückmeldung (2026-09-11): eine Reihe Vorschaubilder unter dem Text, der
   Klick zeigt die Datei in voller Größe. Die Höhe ist fest, die Breite richtet sich nach dem
   Bild – so steht ein Hochformat neben einem Querformat, ohne die Zeile zu sprengen. */
.feedback-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; white-space: normal; }
.feedback-images a, .feedback-edit-image a { display: block; line-height: 0; border: 0; text-decoration: none; }
.feedback-thumb { display: block; height: 96px; width: auto; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; background: var(--bg-2); }
.feedback-images a:hover .feedback-thumb { border-color: var(--gold-2); }
.feedback-edit-images { display: flex; flex-wrap: wrap; gap: 12px; }
.feedback-edit-image { display: flex; flex-direction: column; gap: 4px; }
.feedback-edit-image .feedback-remove { display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); cursor: pointer; }

/* ───── MEDIENKATALOG (Schritt 5a) ───── */
.badge.kind { display: inline-flex; align-items: center; gap: 5px; }
.badge.kind .icon { width: 13px; height: 13px; }
.badge.kind-audiobook { color: var(--gold-3); border-color: var(--gold-2); }
h1 .badge.kind { vertical-align: middle; margin-left: 8px; }

.link-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* Schnellweg zum Anbieter („Bei Audible weiterhören“) auf Karte, Zeile, Weiterlesen,
   Fortschrittskarte und Bandliste. Die Pille steht immer neben dem Link auf die
   Detailseite, nie in ihm – sonst läge ein <a> im <a> und der Klick ginge an beide. */
.open-link { align-self: flex-start; max-width: 100%; min-width: 0; padding: 6px 12px; font-size: 11px; }
.open-link .icon { width: 13px; height: 13px; flex: none; }
.book-card .card-open { display: flex; min-width: 0; }
/* Auf schmalen Karten darf die Beschriftung umbrechen, statt aus der Karte zu laufen. */
.book-card .open-link { white-space: normal; text-align: left; justify-content: flex-start; }
/* In der Zeile in einer Flucht mit Status und Regal-Knopf – das „align-self: flex-start“ der
   Pille gilt nur für Karten (Rückmeldung des Projektinhabers 2026-09-07). */
.book-row .open-link { flex: none; align-self: center; font-size: 10px; padding: 4px 8px; }
.book-row .open-link .icon { width: 12px; height: 12px; }
/* „Kein Interesse“ und Co. in der Zeile ebenso klein wie Status und Regal-Knopf – eine
   Flucht, eine Höhe (Rückmeldung des Projektinhabers 2026-09-10: die Öffnen-Pille war
   28 px hoch, Status und Regal-Knopf 23–24 px). */
.book-row .card-actions .pill { font-size: 10px; padding: 4px 8px; }
.continue-item { display: flex; flex-direction: column; gap: 10px; }
.progress-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.volume-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

.saved-hint { color: var(--success); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; animation: saved-fade 3s forwards; }
@keyframes saved-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .saved-hint { animation: none; } }

.progress-card .progress-state { margin: 0 0 8px; font-size: 15px; }
.progress-card .bar-track { height: 10px; margin-bottom: 16px; }
.progress-card .progress-form { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.progress-card .progress-form .actions { grid-column: 1 / -1; margin: 0 0 12px; }
.progress-card .progress-step { display: flex; }
.progress-card .error { color: var(--error); margin: 0 0 12px; font-size: 13px; }

/* Fortschritt über Ausgaben (6i): „Im Hörbuch bist du weiter …“ auf der Detailseite, dazu
   das Angebot, die andere Ausgabe gleich als gelesen zu vermerken. */
.crossover-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -8px 0 16px; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--gold-soft); color: var(--ink); font-size: 13px; }
.crossover-finish { margin: -8px 0 16px; }

.rating-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--line-2); background: var(--bg-2); }
.rating-label, .finished-on label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.stars { display: inline-flex; align-items: center; gap: 2px; }
.star { position: relative; display: inline-flex; padding: 6px; cursor: pointer; color: var(--ink-4); }
.star input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.star .icon { width: 22px; height: 22px; }
.star:hover { color: var(--gold-2); }
.star.is-on { color: var(--gold); }
.star.is-on .icon { fill: var(--gold); }
.star.star-none { margin-left: 8px; }
.star.star-none .icon { width: 16px; height: 16px; fill: none; }
.star.star-none.is-on { color: var(--ink-2); }
.star input:focus-visible + .sr-only + .icon { outline: 2px solid var(--ink); outline-offset: 2px; }
.finished-on { display: inline-flex; align-items: center; gap: 8px; }
.finished-on input { padding: 6px 8px; border: 1px solid var(--line-2); background: var(--bg); font: inherit; font-size: 13px; }

.kind-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 8px; }
.kind-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; text-align: center; }
.kind-tile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kind-tile .icon { width: 26px; height: 26px; color: var(--ink-3); }
.kind-tile .kind-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.kind-tile .kind-hint { font-size: 11px; color: var(--ink-3); }
.kind-tile:hover { border-color: var(--gold-2); }
.kind-tile:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.kind-tile:has(input:checked) .icon { color: var(--gold-3); }
.kind-tile:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.book-row-meta .badge.kind { font-size: 10px; }
.cover-kind { position: absolute; left: 6px; top: 6px; display: inline-flex; padding: 4px; background: rgb(255 255 255 / 92%); border: 1px solid var(--line-2); color: var(--ink-2); }
.cover-kind .icon { width: 13px; height: 13px; }
.form-columns { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.form-columns > div[hidden] { display: none; }
.continue-link .badge.kind { align-self: flex-start; }
.book-card .book-authors + .book-authors { color: var(--ink-3); }

/* ───── AUSLEIHMODUS ───── */
/* Dezent statt schreiend: getönter Grund in Gold, kein voller Farbklecks. */
.badge.lent { color: var(--gold-3); border-color: var(--gold-2); background: var(--gold-soft); text-transform: none; letter-spacing: 0.02em; }
.book-card .badge.lent { margin-top: 4px; align-self: flex-start; }
.continue-link .badge.lent { align-self: flex-start; }
.lending-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; }
.lending-hint .icon { width: 14px; height: 14px; }

/* ───── BENACHRICHTIGUNGEN ───── */
.notify { position: relative; display: inline-flex; }
.nav-notify {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 8px; border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer;
}
.nav-notify:hover { color: var(--ink); }
.nav-notify .icon { width: 18px; height: 18px; }
.nav-notify .badge-count {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  font-family: var(--mono); font-size: 9px; line-height: 15px; text-align: center;
  background: var(--gold); color: var(--ink); border-radius: 8px;
}
.notify-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(320px, calc(100vw - 32px));
  border: 1px solid var(--line-2); background: var(--bg); box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
  max-height: min(420px, 70vh); overflow-y: auto; text-align: left;
}
.notify-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2);
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.notify-list { list-style: none; margin: 0; padding: 0; }
.notify-item + .notify-item { border-top: 1px solid var(--line); }
.notify-item a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 0; color: var(--ink); font-size: 13px; }
.notify-item a:hover { background: var(--gold-soft); color: var(--ink); }
.notify-item.is-unread { border-left: 2px solid var(--gold); }
.notify-item.is-unread .notify-text { font-weight: 600; }
.notify-empty { padding: 16px 12px; margin: 0; }


/* ───── GRUPPIERUNG: WERKE, REIHEN, REGALE (Schritt 5b) ───── */

/* Sammelkarten – ein angedeuteter Stapel hinter dem Cover zeigt: da sind mehrere drin. */
.book-card.is-group .cover-wrap { margin-right: 4px; }
.cover-stack {
  position: absolute; top: 4px; right: -4px; bottom: 4px; width: 4px;
  background: var(--bg-3); border: 1px solid var(--line-2); border-left: 0;
}
.cover-kind {
  position: absolute; top: 8px; left: 8px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(255 255 255 / 88%); border: 1px solid var(--line-2); color: var(--ink-2);
}
.cover-kind .icon { width: 14px; height: 14px; }
.cover-group { color: var(--gold-3); border-color: var(--gold-2); }
.book-row.is-group .book-title .icon { width: 14px; height: 14px; color: var(--ink-3); }

/* Statusmenü auf Karte und Zeile – <details> statt Dialog, ganz ohne eigenes JavaScript. */
.book-card { display: flex; flex-direction: column; gap: 6px; }
.book-card .card-status { margin-top: 2px; }
.book-row { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.book-row .book-row-link { flex: 1; min-width: 0; }
.status-menu { position: relative; }
.status-menu > summary { list-style: none; cursor: pointer; display: inline-flex; }
.status-menu > summary::-webkit-details-marker { display: none; }
.status-menu > summary .icon { width: 14px; height: 14px; }
.status-menu[open] > summary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.status-choices {
  position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); min-width: 160px;
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--line-2); background: var(--bg); box-shadow: 0 2px 0 rgb(0 0 0 / 4%);
}
.book-row .status-choices { left: auto; right: 0; }
/* Schmal (Smartphone): Die Knöpfe der Zeile rücken in eine zweite Zeile, sonst quetschen sie
   den Titel auf ein Zeichen je Zeile zusammen (Nebenfund 2026-09-11). Steht hinter den Zeilenregeln oben, weil eine Media-Query
   keine höhere Spezifität hat – die spätere Regel gewinnt. */
@media (max-width: 639px) {
  .book-row { flex-wrap: wrap; padding-right: 0; padding-bottom: 8px; }
  .book-row .book-row-link { flex: 1 1 100%; }
  .book-row .open-link { margin-left: 12px; }
  .book-row .status-menu, .book-row .card-actions { margin-left: 4px; }
}
.status-choices button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer;
}
.status-choices form:last-child button { border-bottom: 0; }
.status-choices button:hover, .status-choices button:focus-visible { background: var(--gold-soft); color: var(--gold-3); }
.status-choices button.is-current { color: var(--gold-3); font-weight: 600; }
.status-pill { font-size: 10px; padding: 4px 8px; }
.status-pill.status-finished { color: var(--success); border-color: var(--success); }
.status-pill.status-reading { color: var(--gold-3); border-color: var(--gold-2); background: var(--gold-soft); }
.status-pill.status-none { color: var(--ink-3); }
.status-pill.status-not_interested { color: var(--ink-3); border-style: dashed; }
.status-menu[open] > summary.status-pill { color: var(--bg); background: var(--ink); border-color: var(--ink); }

/* Reihe, Werk und Regale auf der Detailseite */
.group-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; }
.group-line-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.group-line-nav { display: flex; gap: 6px; margin-left: auto; }
.group-line-nav .pill { font-size: 10px; padding: 5px 8px; }
.shelf-pills { gap: 6px; }

/* Ausgaben eines Werks */
.edition-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.edition-link { display: flex; gap: 12px; padding: 8px; border: 1px solid var(--line-2); color: var(--ink); }
.edition-link:hover { border-color: var(--gold-2); background: var(--gold-soft); }
.edition-link .cover { width: 44px; flex: none; }
.edition-link .cover-placeholder { font-size: 7px; padding: 4px; }
.edition-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.edition-unlink { margin-top: 12px; }
.edition-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.edition-panel { margin-bottom: 0; }
.edition-body { display: flex; gap: 14px; }
.edition-body .edition-cover { width: 80px; flex: none; border-bottom: 0; }
.edition-body .edition-main { flex: 1; }
.edition-body .actions { margin: 12px 0 8px; }

/* Reihenseite */
.series-count { margin-bottom: 8px; }
.series-bar { max-width: 320px; margin-bottom: 20px; }
.volume-list { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--line-2); }
.volume-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.volume-row + .volume-row { border-top: 1px solid var(--line); }
.volume-row.is-unnumbered { background: var(--bg-2); }
.volume-number {
  flex: none; width: 40px; text-align: center;
  font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--gold-3);
}
.volume-link { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; color: var(--ink); border-bottom: 0; }
.volume-link:hover .book-title { color: var(--gold-3); }
.volume-link .cover { width: 40px; flex: none; }
.volume-link .cover-placeholder { font-size: 7px; padding: 3px; }
.volume-actions { flex: none; }
.number-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.number-table th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 4px 8px 4px 0; }
.number-table td { padding: 4px 8px 4px 0; border-top: 1px solid var(--line); }
.number-table input { width: 70px; padding: 6px 8px; border: 1px solid var(--line-2); background: var(--bg); font: inherit; font-family: var(--mono); }

/* Aufklappbare Bearbeiten-Formulare (Reihe, Werk, Regal) */
.inline-edit { margin: 0 0 20px; }
.inline-edit > summary { list-style: none; cursor: pointer; display: inline-flex; }
.inline-edit > summary::-webkit-details-marker { display: none; }
.inline-edit-form { margin-top: 10px; max-width: 560px; }

/* Regale */
.shelf-list { list-style: none; margin: 0 0 20px; padding: 0; border: 1px solid var(--line-2); }
.shelf-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-left: 3px solid var(--shelf-color, var(--line-2)); }
.shelf-row + .shelf-row { border-top: 1px solid var(--line); }
.shelf-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--ink); border-bottom: 0; }
.shelf-link:hover .book-title { color: var(--gold-3); }
.shelf-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; background: var(--shelf-bg, var(--bg-2)); color: var(--shelf-color, var(--ink-2)); }
.shelf-main { display: flex; flex-direction: column; min-width: 0; }
.shelf-order { display: flex; gap: 4px; flex: none; }
.shelf-title { display: flex; align-items: center; gap: 10px; }
.shelf-title .icon { width: 28px; height: 28px; color: var(--shelf-color, var(--gold-3)); }
.pill.shelf { border-color: var(--shelf-color, var(--line-2)); color: var(--shelf-color, var(--ink-2)); background: var(--shelf-bg, var(--bg)); }
.pill.shelf:hover { background: var(--shelf-color, var(--ink)); color: var(--bg); }

.shelf-sand     { --shelf-color: var(--shelf-sand);     --shelf-bg: var(--shelf-sand-bg); }
.shelf-moos     { --shelf-color: var(--shelf-moos);     --shelf-bg: var(--shelf-moos-bg); }
.shelf-himmel   { --shelf-color: var(--shelf-himmel);   --shelf-bg: var(--shelf-himmel-bg); }
.shelf-ton      { --shelf-color: var(--shelf-ton);      --shelf-bg: var(--shelf-ton-bg); }
.shelf-rose     { --shelf-color: var(--shelf-rose);     --shelf-bg: var(--shelf-rose-bg); }
.shelf-schiefer { --shelf-color: var(--shelf-schiefer); --shelf-bg: var(--shelf-schiefer-bg); }

/* Formular: Regale als Pillen-Kästchen, Symbol- und Farbkacheln */
.form-group { border: 0; margin: 0 0 8px; padding: 0; }
.form-group > legend { padding: 0; margin-bottom: 10px; }
.pill-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pill-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-2); cursor: pointer; font-size: 12px; }
.pill-check input { accent-color: var(--gold-2); }
.pill-check:has(input:checked) { border-color: var(--gold-2); background: var(--gold-soft); color: var(--gold-3); }
.icon-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-2); cursor: pointer; color: var(--ink-2); }
.icon-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.icon-tile:has(input:checked) { border-color: var(--gold-2); background: var(--gold-soft); color: var(--gold-3); }
.icon-tile:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.color-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.color-tile { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-2); cursor: pointer; font-size: 12px; }
.color-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.color-dot { width: 14px; height: 14px; background: var(--shelf-color); border: 1px solid var(--line-2); }
.color-tile:has(input:checked) { border-color: var(--shelf-color); background: var(--shelf-bg); }
.color-tile:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ───── MEIN REGAL UND ALLE BÜCHER (Schritt 5h) ───── */
.page-title { display: flex; align-items: center; gap: 10px; }
.page-title .icon { width: 26px; height: 26px; color: var(--gold-3); }
/* Der Zähler neben „Alle Bücher“ sitzt in der Zeile, nicht über einem Knopf. */
.nav-all { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.new-count {
  min-width: 15px; height: 15px; padding: 0 4px;
  font-family: var(--mono); font-size: 9px; line-height: 15px; text-align: center;
  background: var(--gold); color: var(--ink); border-radius: 8px;
}
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.book-card .card-actions { margin-top: 2px; }
.book-row .card-actions { flex: none; }
.pill.shelf-toggle { font-size: 10px; padding: 4px 8px; }
.pill.shelf-toggle .icon { width: 13px; height: 13px; }
.pill.shelf-toggle.is-active { color: var(--gold-3); border-color: var(--gold-2); background: var(--gold-soft); }
.pill.shelf-toggle.is-active:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.shelf-list.personal-shelf { margin-bottom: 12px; }
.upload-result-actions { display: inline-flex; margin-top: 6px; }

/* Regalleiste über der Bibliothek */
.shelf-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.shelf-bar .pill.is-active { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.shelf-bar .pill.shelf.is-active { border-color: var(--shelf-color); background: var(--shelf-color); color: #fff; }
.shelf-count { font-family: var(--mono); font-size: 10px; opacity: .75; }

/* ───── STAMMDATENSUCHE ───── */
.kind-panel { margin-bottom: 20px; }
.lookup-panel { margin-bottom: 20px; }
.lookup-panel > summary.panel-head { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; }
.lookup-panel > summary.panel-head::-webkit-details-marker { display: none; }
.lookup-panel > summary.panel-head .icon { width: 15px; height: 15px; }
.lookup-field label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.lookup-input { display: flex; gap: 8px; align-items: stretch; }
.lookup-input input[type="search"] { flex: 1 1 auto; min-width: 0; }
.lookup-input .pill { flex: 0 0 auto; white-space: nowrap; }
#lookup-hint { display: flex; align-items: center; gap: 8px; }

/* Ladeanzeige: ein schmaler goldener Balken, der nur während der Abfrage läuft. */
.lookup-busy { display: none; width: 28px; height: 3px; background: var(--bg-3); overflow: hidden; }
.lookup-busy.htmx-request { display: inline-block; }
.lookup-busy::after { content: ""; display: block; width: 40%; height: 100%; background: var(--gold); animation: lookup-slide 1s linear infinite; }
@keyframes lookup-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .lookup-busy::after { animation: none; width: 100%; } }

.lookup-hits { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--line); }
.lookup-hit-row { border-bottom: 1px solid var(--line); }
.lookup-hit {
  display: flex; gap: 12px; width: 100%; padding: 12px 8px;
  background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.lookup-hit:hover, .lookup-hit:focus-visible { background: var(--bg-2); }
.lookup-hit.is-taken { background: var(--gold-soft); }
.lookup-cover { flex: 0 0 48px; width: 48px; height: 72px; object-fit: cover; background: var(--bg-2); border: 1px solid var(--line-2); }
.lookup-cover-fit { object-fit: contain; }
.cover-portrait-start { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
.cover-portrait-hits .lookup-hit { display: flex; align-items: center; gap: 12px; width: 100%; }
.cover-portrait-hits .lookup-hit .pill { margin-left: auto; }
.lookup-cover-empty { display: flex; align-items: center; justify-content: center; color: var(--gold-3); background: var(--gold-soft); }
.lookup-cover-empty .icon { width: 18px; height: 18px; }
.lookup-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lookup-title { font-weight: 600; line-height: 1.3; }
.lookup-subtitle, .lookup-people { color: var(--ink-2); font-size: 13px; }
.lookup-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-3); font-size: 12px; }
.lookup-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.lookup-again, .lookup-known { margin: 0 0 12px 68px; }
.lookup-known { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lookup-note { margin: 0 0 12px; }
.lookup-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }

/* ───── STAMMDATEN NACHLADEN ───── */
.enrich-panel { margin-bottom: 20px; }
.enrich-panel > .panel-head .icon { width: 15px; height: 15px; }
.enrich-start { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.enrich-lead { margin: 0 0 12px; }
.enrich-empty { margin: 12px 0 0; }
.enrich-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.enrich-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.enrich-row.is-same, .enrich-row.is-none { color: var(--ink-3); }
.enrich-row.is-fill { background: var(--gold-soft); }
.enrich-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.enrich-pick { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.enrich-pick input[disabled] { cursor: default; }
.enrich-field { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.enrich-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .enrich-pair { grid-template-columns: 1fr; } }
.enrich-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.enrich-side-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
/* Lange Beschreibungen bleiben lesbar, ohne die Zeile zu sprengen. */
.enrich-value { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.enrich-value.is-empty { color: var(--ink-3); }
.enrich-cover { border-bottom: 0; }
.enrich-cover-img { width: 72px; height: 108px; object-fit: cover; background: var(--bg-2); border: 1px solid var(--line-2); }
.enrich-progress { margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.enrich-progress + .bar-track { margin-bottom: 12px; }

/* Kurze Eingaben (Sprachcode): das Feld muss nicht die ganze Zeile füllen. */
.input-short { max-width: 14rem; }

/* Regale für eine ganze Reihe: gestrichelt = bisher nur manche Bände stehen darin. */
.pill-check.is-partial { border-style: dashed; }

/* --- Hörbuch erzeugen und anhören (Phase 6c) --------------------------------------- */

.audio-job .audio-state { margin: 0 0 8px; }
.audio-job .bar-track { margin-bottom: 12px; }
.audio-job .audio-form .field { max-width: 22rem; }

.audio-player .player-chapter { margin: 0 0 8px; font-weight: 600; }
.audio-player .bar-track { margin-bottom: 16px; }
/* Verfall erzeugter Hörbücher (Phase 6j): Frist und Verlängern-Knopf in einer Zeile. */
.audio-expiry { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.audio-expiry form { margin: 0; }
.player-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.player-row + .player-row { margin-top: 12px; }
.player-big { min-width: 56px; justify-content: center; }
.player-big .icon { width: 20px; height: 20px; }
/* Die Sekundenzahl steht klein am Pfeil – „15“ neben dem Sprung. */
.player-skip { font-family: var(--mono); font-size: 11px; }
.player-play .icon-pause { display: none; }
.player-play[data-state="playing"] .icon-play { display: none; }
.player-play[data-state="playing"] .icon-pause { display: inline; }
.player-group { display: flex; align-items: center; gap: 6px; min-width: 0; }
.player-label, .player-unit {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.player-value { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.player-sleep-btn { font-family: var(--mono); font-size: 12px; padding: 6px 10px; }
.player-sleep-btn[aria-pressed="true"] { color: var(--ink); background: var(--gold); border-color: var(--gold); }

.player-chapters { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.player-chapters li { border-bottom: 1px solid var(--line); }
.player-jump {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 4px;
  background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.player-jump:hover { background: var(--bg-2); }
.player-jump.is-current { background: var(--gold-soft); font-weight: 600; }
.player-number { color: var(--ink-3); min-width: 2.5ch; }
.player-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .player-label { display: none; }
}

/* ───── KOMMENTARE UND ANTWORTEN (Phase 6d) ───── */
/* Knöpfe am Ende einer Zeile: „Ändern“ und das Löschformular nebeneinander. */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.row-actions form { margin: 0; }
.row-actions .pill { padding: 4px 10px; font-size: 12px; }

/* Antwortfaden – flach, eine Ebene, eingerückt unter der Notiz. */
.thread { margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--line-2); }
.reply { padding: 8px 0; border-top: 1px solid var(--line); }
.reply:first-child { border-top: 0; padding-top: 0; }
.reply-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.reply-head .avatar { width: 22px; height: 22px; font-size: 8px; }
.reply-text { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.reply-form { margin-top: 8px; }
.reply-form textarea { width: 100%; max-width: 40rem; }
.reply-form .field { margin-bottom: 8px; }
.reply-form .actions { margin: 6px 0 0; }

/* Formular „Notiz zum Buch“ – unten im Panel und inline beim Ändern. */
.comment-new h3 { margin: 0 0 4px; font-size: 13px; }
.comment-new .muted { margin: 0 0 12px; }
.comment-form { max-width: 40rem; }
.comment-form textarea { width: 100%; }
.comment-form .actions { margin: 0; }
.comment-form .field-row { display: flex; flex-wrap: wrap; gap: 16px; }
.comment-form .field-row .field { flex: 1 1 12rem; }
table.grid .comment-form { margin-top: 8px; }

/* Offline (Phase 6e) – Schalter „Offline verfügbar“, Liste auf /offline/, Installieren-Banner. */
.offline-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.offline-toggle .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.offline-toggle .switch input { width: 16px; height: 16px; margin: 0; accent-color: var(--gold-2); }
.offline-toggle progress { width: 120px; height: 6px; margin: 0; flex: none; }
.offline-toggle .offline-state { flex: none; }
.reader-settings .offline-toggle { flex-direction: column; align-items: flex-start; gap: 6px; }
.reader-settings .offline-toggle progress { width: 100%; }

#offline-books .book-row .pill { flex: none; }
#offline-storage { margin: 12px 0 24px; }

/* „Als App installieren“ – einmal wegklickbar, danach nie wieder (localStorage). */
.install-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--line-2); background: var(--bg-2); }
.install-banner .install-text { flex: 1 1 16rem; min-width: 0; font-size: 13px; }
.install-banner strong { display: block; font-size: 14px; letter-spacing: -0.01em; }
.install-banner .install-actions { display: flex; gap: 8px; align-items: center; }

/* --- Statistik und Jahresrückblick (Phase 6f) --------------------------------------- */

/* Kennzahlen-Kacheln: eine große Zahl in Gold, darunter, wofür sie steht. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 0 0 16px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 16px; border: 1px solid var(--line-2); background: var(--bg); }
.stat-value { font-family: var(--mono); font-size: 30px; line-height: 1.1; font-weight: 600; color: var(--gold-3); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.stat-note { font-size: 12px; color: var(--ink-3); }

/* Zwei Panels nebeneinander, sobald Platz ist – „Meiste Autoren“ und „Fünf Sterne“. */
.stat-columns { display: grid; gap: 16px; }
@media (min-width: 720px) { .stat-columns { grid-template-columns: 1fr 1fr; } }
.stat-columns .panel { margin-bottom: 0; }

/* Balken je Monat – reines CSS, keine Diagrammbibliothek. Die Höhe kommt als
   Prozentwert in --wert aus dem Template; die Zahl steht über dem Balken. Der Balken ist
   schmaler als seine Spalte und darin zentriert (chart-col: align-items: center), damit
   die Monatsbeschriftung darunter mittig unter dem Balken bleibt. padding-top an
   .chart-bars schafft oberhalb des höchsten Balkens (100 %) Platz für dessen Zahl, ohne
   die Balkenhöhen selbst zu beeinflussen – sonst überschreibt die Zahl den Titel darüber. */
.chart { display: block; margin-bottom: 24px; }
.chart:last-child { margin-bottom: 0; }
.chart-title { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.chart-bars { display: flex; align-items: flex-end; gap: 4px; padding-top: 16px; }
.chart-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.chart-bar {
  position: relative;
  display: block;
  width: 100%;
  max-width: 22px;
  /* --wert ist eine Zahl 0–100 ohne Einheit: CSS erlaubt in calc() keine Division durch einen
     Prozentwert – mit „--wert: 75%“ war die Höhe ungültig und jeder Balken blieb 2 px hoch
     (Fund 2026-09-08). */
  height: calc(80px * var(--wert, 0) / 100);
  min-height: 2px;
  background: var(--gold);
  border-bottom: 1px solid var(--gold-2);
}
.chart-bar.soft { background: var(--gold-soft); border-bottom-color: var(--gold); }
.chart-num { position: absolute; left: 0; right: 0; bottom: 100%; padding-bottom: 2px; text-align: center; font-size: 10px; color: var(--ink-3); }
.chart-x { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 520px) { .chart-bars { padding-top: 0; } .chart-num { display: none; } .chart-x { font-size: 9px; } }

/* Verteilung nach Art – eine Balkenzeile je Art. */
.kind-row { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 12px; margin-bottom: 10px; }
.kind-row:last-child { margin-bottom: 0; }
.kind-name { font-size: 13px; color: var(--ink-2); }
.kind-count { font-size: 13px; color: var(--ink); }
.kind-row .bar-track { height: 10px; }

/* Jahresrückblick: Cover-Raster in Lesereihenfolge und die Liste der Besonderheiten. */
.review-covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 12px; }
@media (min-width: 640px) { .review-covers { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px; } }
.review-cover { display: block; border-bottom: none; }
.review-cover .cover { width: 100%; }
.review-cover:hover .cover { border-color: var(--gold-2); }
.review-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; }
.review-facts > div { display: flex; flex-direction: column; gap: 2px; }
.review-facts dt { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.review-facts dd { margin: 0; font-size: 15px; }
.review-facts dd .small { display: block; }
.year-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ───── WIKI (Nutzerdokumentation in der App, Schritt 7e) ───── */

/* Zwei Spalten ab dem Tablet: Kapitel links, Text rechts. Darunter steht die Kapitelliste
   als Aufklapper über dem Text – beides steht im HTML, sichtbar ist immer nur eines. */
.wiki-layout { display: grid; gap: 24px; }
.wiki-side { display: none; }
.wiki-drawer { border: 1px solid var(--line-2); background: var(--bg); margin-bottom: 8px; }
.wiki-drawer > summary {
  padding: 10px 16px; cursor: pointer; background: var(--bg-2);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.wiki-drawer-body { padding: 16px; }
@media (min-width: 900px) {
  .wiki-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
  .wiki-drawer { display: none; }
  .wiki-side { display: block; position: sticky; top: 16px; }
}

/* Suchfeld – dieselbe Form wie die übrigen Eingaben, Knopf daneben. */
.wiki-search { display: flex; gap: 8px; margin-bottom: 16px; }
.wiki-search input { flex: 1 1 auto; min-width: 0; }

/* Kapitelliste: schlichte Zeilen, das aktuelle Kapitel fett mit goldener Kante. */
.wiki-chapters, .wiki-chapter-pages { list-style: none; margin: 0; padding: 0; }
.wiki-chapters > li { margin-bottom: 2px; }
.wiki-chapters a {
  display: block; padding: 4px 8px; border-bottom: 0; border-left: 2px solid transparent;
  color: var(--ink-2); font-size: 13px;
}
.wiki-chapters a:hover { color: var(--gold-3); background: var(--bg-2); }
.wiki-chapters a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--gold); background: var(--bg-2); }
.wiki-chapter-pages { margin: 2px 0 8px 10px; }
.wiki-chapter-pages a { font-size: 12px; }

/* Startseite: eine Kachel je Kapitel. */
.wiki-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.wiki-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; border: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--bg);
}
.wiki-tile:hover { border-color: var(--gold-2); background: var(--gold-soft); color: var(--ink); }
.wiki-tile-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.wiki-tile-text { color: var(--ink-2); font-size: 13px; line-height: 1.5; }

/* Kapitelseite, Suchtreffer, verwandte Seiten – dieselbe ruhige Liste. */
.wiki-crumb { font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.wiki-pagelist, .wiki-hits, .wiki-related ul { list-style: none; margin: 0; padding: 0; }
.wiki-pagelist > li, .wiki-hits > li { padding: 10px 0; border-top: 1px solid var(--line); }
.wiki-pagelist > li > a, .wiki-hits > li > a { display: block; font-size: 15px; border-bottom: 0; }
.wiki-pagelist .small, .wiki-hits .small { display: block; }
.wiki-snippet { display: block; margin-top: 4px; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.wiki-snippet mark { background: var(--gold-soft); color: var(--ink); padding: 0 2px; }

/* Inhaltsverzeichnis der Seite – aus den Überschriften der Ebenen 2 und 3. */
.wiki-toc { border-left: 2px solid var(--line-2); padding: 2px 0 2px 12px; margin-bottom: 24px; }
.wiki-toc-head { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.wiki-toc ul { list-style: none; margin: 0; padding: 0; }
.wiki-toc ul ul { margin-left: 12px; }
.wiki-toc a { display: block; padding: 2px 0; border-bottom: 0; color: var(--ink-2); font-size: 13px; }
.wiki-toc a:hover { color: var(--gold-3); }

/* Der Text selbst: Lesebreite rund 70 Zeichen, ruhige Abstände. */
.wiki-prose { max-width: 70ch; font-size: 15px; line-height: 1.7; color: var(--ink); }
.wiki-prose > :first-child { margin-top: 0; }
.wiki-prose h2 { font-size: 20px; line-height: 1.2; margin: 32px 0 10px; }
.wiki-prose h3 { font-size: 16px; margin: 24px 0 8px; }
.wiki-prose p { margin: 0 0 14px; }
.wiki-prose ul, .wiki-prose ol { margin: 0 0 14px; padding-left: 22px; }
.wiki-prose li { margin-bottom: 6px; }
.wiki-prose li > ul, .wiki-prose li > ol { margin-top: 6px; }
.wiki-prose strong { font-weight: 600; }
.wiki-prose code { font-family: var(--mono); font-size: 13px; background: var(--bg-2); border: 1px solid var(--line); padding: 0 4px; }
.wiki-prose pre { overflow-x: auto; background: var(--bg-2); border: 1px solid var(--line); padding: 12px; margin: 0 0 14px; }
.wiki-prose pre code { background: none; border: 0; padding: 0; }
.wiki-prose blockquote { margin: 0 0 14px; padding-left: 14px; border-left: 2px solid var(--gold); color: var(--ink-2); }
.wiki-prose table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.wiki-prose th, .wiki-prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.wiki-prose th { background: var(--bg-2); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.wiki-prose hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.wiki-intro { margin-bottom: 24px; color: var(--ink-2); }

/* Bildschirmfotos: Rahmen wie eine Karte, Bildunterschrift aus dem Alt-Text. */
.wiki-figure { margin: 0 0 20px; }
.wiki-img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line-2); background: var(--bg-2); }
.wiki-figure figcaption { margin-top: 6px; font-size: 12px; color: var(--ink-3); }

/* Fuß der Seite: verwandte Seiten, vor und zurück, Rückmeldung. */
.wiki-related { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.wiki-related li { margin-bottom: 4px; }
.wiki-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.wiki-helpful { margin-top: 20px; font-size: 13px; color: var(--ink-3); }
.wiki-help-link { border-bottom: 0; }