/*
 * Tools-Portal – Grundgestaltung.
 * Farben und Schrift als Variablen, damit sie später an das
 * Design-System der Gemeinde angepasst werden können.
 * Schriften werden nicht von fremden Servern geladen (Datenschutz);
 * Source Sans 3 greift, sobald sie lokal eingebunden oder installiert ist.
 */
:root {
  --ink: #1f2b33;
  --muted: #58666f;
  --line: #d6dde2;
  --wash: #f0f3f5;
  --surface: #ffffff;
  --accent: #235d70;
  --accent-strong: #184554;
  /* Seit 1.33.0: Grau aus dem Schriftzug des Logos (Titel „Tools-Portal“) und Farbe der Menüzeile;
     --band überschreibt /theme.css, wenn eine eigene Farbe eingestellt ist */
  --brand-grey: #4a5454;
  --band: var(--brand-grey);
  --ok: #2c6a3d;
  --ok-bg: #e7f2ea;
  --warn: #85560a;
  --warn-bg: #fbf1dd;
  --danger: #9a2d2d;
  --danger-bg: #f8e6e6;
  /* Seit 1.32.0: Abstufungen der Signalfarbe; alle --danger-Werte überschreibt /theme.css */
  --danger-strong: #7d2222;
  --danger-line: #e6c3c3;
  --font: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 4px;
  /* Seit 1.20.0: Werte der gemeinsamen Bausteine (Vorbild: Übersicht des Wochenblatts) */
  --surface-alt: #f6f8f9;     /* hinterlegte Leisten und Kästen */
  --surface-soft: #fafbfc;    /* Seitenspalte einer Karte */
  --line-soft: #edf1f3;       /* zarte Linien in hinterlegten Kästen */
  --accent-tint: rgba(35, 93, 112, 0.10);
  --accent-tint-soft: rgba(35, 93, 112, 0.03);
  /* Seit 1.31.0: Linien in der Akzentfarbe; alle Akzent-Werte überschreibt /theme.css (Verwaltung > Farbe) */
  --accent-line: rgba(35, 93, 112, 0.25);
  --accent-line-strong: rgba(35, 93, 112, 0.45);
  --info: #24508a;
  --info-bg: #e6eef8;
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(31, 43, 51, 0.05), 0 2px 10px rgba(31, 43, 51, 0.04);
  --shadow-highlight: 0 0 0 1px var(--accent), 0 4px 14px rgba(35, 93, 112, 0.14);
  /* Seit 1.21.0: geänderte, noch nicht gespeicherte Eingaben */
  --changed: #4f7fbf;
  --changed-soft: #8fb0d6;
  --changed-ring: rgba(79, 127, 191, 0.18);
}

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

/* Seit 1.21.0: Das Attribut hidden verbirgt immer, auch wenn eine Klasse display setzt
   (etwa ein Badge .pill oder ein Knopf .button, den ein Skript erst bei Bedarf zeigt) */
[hidden] { display: none !important; }

html { font-size: 106.25%; } /* 17px */

body {
  margin: 0;
  font-family: var(--font);
  line-height: 1.5;
  color: var(--ink);
  background: var(--wash);
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--accent-strong); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

h1, h2 { line-height: 1.2; font-weight: 700; }
h1 { font-size: 1.75rem; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
p { margin: 0 0 1rem; max-width: 68ch; }

/* Kopfzeile */
/* Seit 1.13.0 bleibt die Kopfzeile beim Scrollen oben stehen */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Sprungziele (Anker) nicht unter der stehenden Kopfzeile verstecken */
html { scroll-padding-top: 6.5rem; }
/* Markenstreifen in den Kreuzfarben des Logos, wie in den PDFs (seit 1.6.1) */
.site-header::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg,
    #9CA89C 0 20%, #243C90 20% 40%, #F0B400 40% 60%, #008448 60% 80%, #D81830 80% 100%);
}
.site-header__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.15;
}
.brand__logo { display: block; height: 2.75rem; width: auto; max-width: 9rem; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; }
.brand__name { font-weight: 700; font-size: 1.1rem; }
.brand__church { color: var(--muted); font-size: 0.85rem; }

.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  flex: 1;
}

/* Aufklappmenüs in der Kopfzeile (seit 1.6.0, gestaltet 1.6.1): Werkzeuge und Verwaltung */
.menu { position: relative; }
/* Seit 1.21.1: Ein geschlossenes Menü zeigt sein Panel nie. Sonst vermisst der Browser die
   Kästen darin trotzdem (wegen display: grid), und die Seite wird breiter als der Bildschirm. */
.menu:not([open]) > .menu__panel { display: none; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
/* Pfeil als gedrehter Winkel, dreht sich beim Öffnen */
.menu > summary::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.15s ease;
}
.menu[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
.menu > summary:hover, .menu[open] > summary { color: var(--ink); }
.menu > summary.is-current { color: var(--ink); border-bottom-color: var(--accent); }
.menu__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: -0.75rem;
  z-index: 20;
  min-width: 18rem;
  /* Die Kopfzeile steht; ein langes Menü rollt in sich statt aus dem Bild (seit 1.54.2 ohne Weiterrollen der Seite am Ende) */
  max-height: calc(100vh - 8rem);
  /* Seit 1.54.3 (Hanno: auf dem Handy verschwand der letzte Menüpunkt hinter der Leiste des Browsers): sichtbare Höhe statt
     100vh (auf dem iPhone die Höhe ohne Browserleisten); app.js misst beim Öffnen den Platz ab der Oberkante des Menüs */
  max-height: calc(100dvh - 8rem);
  max-height: var(--menu-max, calc(100dvh - 8rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(31, 43, 51, 0.14), 0 2px 6px rgba(31, 43, 51, 0.06);
  padding: 0.4rem;
}
.main-nav .menu__panel a {
  display: block;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
}
.main-nav .menu__panel a:hover { background: var(--wash); color: var(--accent-strong); }
.main-nav .menu__panel a[aria-current="page"] {
  background: var(--wash);
  color: var(--accent-strong);
  font-weight: 600;
}
/* Menüs in Kästen (seit 1.10.0 „Werkzeuge“, seit 1.10.2 alle Menüs): jeder Eintrag ein
   Kasten, eine Gruppe ein Kasten mit ihrer Überschrift oben drin; keine Trennlinien */
.menu__panel--kaesten { display: grid; gap: 0.4rem; padding: 0.5rem; background: var(--wash); }
.menu__kasten {
  background: var(--surface);
  border: 1px solid #b7c2ca;
  border-radius: 6px;
  padding: 0.2rem;
}
.menu__panel--kaesten .menu__group { margin: 0.45rem 0.6rem 0.15rem; }
.menu__panel--kaesten .menu__group:first-child { margin-top: 0.45rem; }
.menu__panel--kaesten .menu__kasten a + a { margin-top: 0.1rem; }
.menu__kasten .menu__button { display: block; }
/* Konto-Menü rechts (seit 1.7.0): Name, darunter Abmelden */
.menu--account { margin-left: auto; }
.menu--account > summary { color: var(--ink); }
.menu--account .menu__panel { left: auto; right: -0.75rem; min-width: 12rem; }
.menu__button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.menu__button:hover { background: var(--wash); color: var(--accent-strong); }
.menu__group {
  margin: 0.6rem 0.75rem 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.menu__group:first-child { margin-top: 0.3rem; }
.menu__panel .menu__group:not(:first-child) {
  border-top: 1px solid var(--line);
  padding-top: 0.6rem;
}
.main-nav a, .sub-nav a {
  text-decoration: none;
  color: var(--muted);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover, .sub-nav a:hover { color: var(--ink); }
.main-nav a[aria-current="page"], .sub-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.account__name { color: var(--muted); font-size: 0.9rem; }

/* Inhalt */
.page {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
.narrow { max-width: 36rem; }
.section { margin-bottom: 2.5rem; }
.aside { margin-top: 2rem; }
.back { margin-bottom: 0.5rem; font-size: 0.9rem; }
.meta { color: var(--muted); margin-top: -0.5rem; }

.sub-nav {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

/* Schaltflächen */
.button {
  /* Seit 1.21.1 inline-flex: Text und Symbol stehen mittig, auch wenn ein Knopf in einer
     Flex-Zeile auf die Höhe eines anderen gestreckt wird (etwa .button--quiet neben .button) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
/* Seit 1.35.0 so hoch wie .button (gleicher senkrechter Innenabstand), seitlich etwas knapper;
   Knöpfe nebeneinander stehen damit gleich hoch, ohne dass die Zeile strecken muss (Hanno, 09.10.2026) */
.button--quiet { background: transparent; color: var(--accent); padding: 0.55rem 0.8rem; }
.button--quiet:hover { background: var(--wash); color: var(--accent-strong); }
.button--danger { background: var(--danger); border-color: var(--danger); }
.button--danger:hover { background: var(--danger-strong); border-color: var(--danger-strong); }

/* Meldungen */
.notice {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--accent);
  background: var(--surface);
  max-width: none;
}
.notice--success { border-color: var(--ok); background: var(--ok-bg); }
.notice--error { border-color: var(--danger); background: var(--danger-bg); }
.notice--info { border-color: var(--accent); }
.notice--warning { border-color: var(--warn); background: var(--warn-bg); margin-bottom: 2rem; }
.notice p:last-child { margin-bottom: 0; }

/* Tool-Übersicht */
.tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 44rem;
}
.tool-list li { background: var(--surface); padding: 1rem 1.25rem; }
.tool-list a { font-weight: 700; font-size: 1.1rem; }
.tool-list p { margin: 0.25rem 0 0; color: var(--muted); }

/* Startseite: Werkzeuge als Karten, nach Plugins gruppiert (seit 1.6.0, gestaltet 1.6.1) */
.tool-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: 1rem;
}
.tool-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.tool-card__title {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}
.tool-card__text { display: block; margin: 0; color: var(--muted); max-width: none; }
/* Karte mit einem Eintrag: die ganze Karte ist der Link */
.tool-card--link {
  position: relative;
  padding-right: 2.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tool-card--link .tool-card__title { color: var(--accent); }
.tool-card--link::after,
.tool-card__item::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid var(--line);
  border-right: 2px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
  transition: border-color 0.15s ease, right 0.15s ease;
}
.tool-card--link:hover {
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(31, 43, 51, 0.08);
  transform: translateY(-1px);
}
.tool-card--link:hover::after,
.tool-card__item:hover::after { border-color: var(--accent); right: 1rem; }
/* Karte eines Plugins mit mehreren Einträgen: über die ganze Breite */
.tool-card--group { grid-column: 1 / -1; }
.tool-card__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}
.tool-card__item {
  position: relative;
  display: block;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--wash);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tool-card__item:hover { background: var(--surface); border-color: var(--accent); color: var(--ink); }
.tool-card__label { display: block; font-weight: 700; color: var(--accent); margin-bottom: 0.15rem; }
.tool-card__item .tool-card__text { font-size: 0.95rem; }

/* Startseite: Verwaltung als schlichte Linkzeile */
.admin-links { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.admin-links h2 {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.admin-links p { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; max-width: none; }
.admin-links a {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  text-decoration: none;
  font-size: 0.95rem;
}
.admin-links a:hover { border-color: var(--accent); }

/* Tabellen */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); background: var(--wash); }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; }
.nowrap { white-space: nowrap; }

.status {
  display: inline-block;
  font-size: 0.85rem;
  padding: 0 0.45rem;
  border-radius: var(--radius);
  background: var(--wash);
  color: var(--muted);
}
.status--active { background: var(--ok-bg); color: var(--ok); }
.status--waiting { background: var(--warn-bg); color: var(--warn); }
.status--sensitive { background: var(--danger-bg); color: var(--danger); } /* seit 1.4.0 */

/* Formulare */
.form {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.25rem 1.5rem;
  max-width: 44rem;
  margin-bottom: 2rem;
}
.form fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.form legend { font-weight: 700; margin-bottom: 0.5rem; padding: 0; }
.check { display: flex; gap: 0.6rem; align-items: baseline; margin: 0.35rem 0; cursor: pointer; }
.check input { accent-color: var(--accent); }
/* Auswahl als Kästen nebeneinander (seit 1.8.2), z. B. für Zeiträume:
   <fieldset class="choice-cards"><legend>…</legend><div class="choice-cards__list">
     <label class="choice-card"><input type="radio" …>
       <span class="choice-card__title">…</span><span class="choice-card__meta">…</span></label> …
   </div></fieldset>. Das gewählte Feld ist hervorgehoben; auf schmalen Bildschirmen untereinander. */
.form--wide { max-width: none; }
.choice-cards__list { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.75rem; }
@media (max-width: 60rem) {
  /* Nicht zwei und einer, sondern alle untereinander */
  .choice-cards__list { grid-auto-flow: row; }
}
.choice-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  row-gap: 0.45rem;
  align-items: baseline;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.choice-card:hover { border-color: var(--muted); }
.choice-card:has(input:checked) { border-color: var(--accent); background: var(--wash); box-shadow: inset 0 0 0 1px var(--accent); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-card input { accent-color: var(--accent); margin: 0; }
.choice-card__title { line-height: 1.3; }
.choice-card__meta { grid-column: 2; color: var(--muted); font-size: 0.85rem; line-height: 1.35; }
.form--danger { border-color: var(--danger-line); }
.form--danger h2 { margin-top: 0; }
.input {
  font: inherit;
  width: 100%;
  max-width: 28rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Seit 1.59.0 (Auftrag des Predigtmanuskript-Chats, Hanno auf dem iPad): Datum und Uhrzeit wie die übrigen Felder. WebKit
   (Safari, Chrome und alle Browser auf iPad und iPhone) zeichnet sie sonst höher, mit dem Wert in der Mitte, ohne Symbol und
   mit einer Mindestbreite, die in schmalen Rastern in die Nachbarspalte ragt. Gleiche Höhe wie .input (Zeilenhöhe 1,5 plus
   Innenabstand und Rand), Wert links, Symbol des Kerns (kalender bzw. uhr in --muted) rechts im Feld – überall gleich, auch am
   Rechner: Das Symbol von Chrome bleibt an seiner Stelle unsichtbar darüber liegen, ein Klick darauf öffnet weiter die Auswahl.
   Firefox zeichnet seine Felder selbst passend und behält sein eigenes Symbol. */
.input[type="date"], .input[type="time"] {
  -webkit-appearance: none; appearance: none; min-width: 0; height: calc(1.5em + 0.9rem + 2px); line-height: 1.5;
  text-align: left; vertical-align: top;
}
.input[type="date"]::-webkit-date-and-time-value, .input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.5em; }
.input[type="date"]::-webkit-datetime-edit, .input[type="time"]::-webkit-datetime-edit { padding: 0; }
@supports not (-moz-appearance: none) {
  .input[type="date"], .input[type="time"] {
    position: relative; padding-right: 2.2rem;
    background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 1.05rem 1.05rem;
  }
  .input[type="date"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358666f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
  .input[type="time"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358666f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
  .input[type="date"]::-webkit-calendar-picker-indicator, .input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute; top: 0; right: 0; bottom: 0; width: 2.2rem; height: auto; margin: 0; padding: 0;
    opacity: 0; cursor: pointer;
  }
}
.meta-inline { color: var(--muted); font-size: 0.9rem; }

/* ---------- Felder mit Erklärtext und Zähler (seit 1.64.0, Wunsch des Wochenblatt-Chats, Vorbild Wochenblatt 1.33.2) ----------
   Hanno: „Auch die kleinen Erklärtexte unter den Feldbezeichnungen sehen nicht gut aus“, „verschieben/verändern sich die Felder …
   bei Eingabe von Text“.
   <div class="fields">                                   – mehrere Felder in einer Reihe (sonst untereinander)
     <div class="field">
       <label class="label-caps" for="rubrik">Rubrik</label>
       <span class="field__hint">Erscheint über dem Text</span>          – wahlweise, eigene Zeile, 0,85rem, leise
       <input class="input" id="rubrik" name="rubrik" data-max="60" data-count>
       <span class="hint">…</span>                                      – wahlweise unter dem Feld
     </div>
   </div>
   In einer Reihe teilen sich die Felder die Zeilen (subgrid): Die Eingabefelder stehen auf einer Höhe, auch wenn eine
   Bezeichnung umbricht oder nur ein Feld einen Erklärtext hat. Ein Erklärtext darf auch in der Bezeichnung stehen
   (<label>Rubrik <span class="hint hint--inline">…</span></label>); er steht dann ebenso in eigener Zeile darunter.
   data-count mit data-max="60" (seit 1.65.0; nie maxlength – der Browser schnitte eingefügten Text ohne Rückfrage ab): Zähler
   rechts in der Zeile der Bezeichnung, erst wenn es knapp wird (Vorgabe: noch 20 % oder höchstens 10 Zeichen; data-count="15":
   ab 15 übrigen), bei 0 „keine Zeichen mehr“ (Warnfarbe), darüber „7 Zeichen zu viel“ (Signalfarbe, fett). Seit 1.65.0 rückt
   die Bezeichnung nur so weit ein, wie der Zähler neben ihrer letzten Zeile sonst keinen Platz hätte (app.js misst); beim
   Tippen verschiebt sich nichts. */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); column-gap: 1rem; row-gap: 0; margin: 0 0 1rem; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; align-content: start; min-width: 0; margin: 0 0 1rem; }
.fields > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; margin: 0 0 1rem; }
.fields > .field:last-child { margin-bottom: 0; }
.field > label, .field > .label-caps { grid-row: 1; grid-column: 1; align-self: end; margin: 0 0 0.25rem; }
.field > .field__hint, .field > label .hint--inline {
  display: block; margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 400; line-height: 1.35; letter-spacing: normal;
  text-transform: none; color: var(--muted);
}
.field > .field__hint { grid-row: 2; grid-column: 1; align-self: start; }
.field > label .hint--inline { margin: 0.15rem 0 0.1rem; }
.field > :is(input, select, textarea, .input, .copy-field, .field__control) { grid-row: 3; grid-column: 1; max-width: none; }
.field > :is(.hint, .field__after) { grid-row: 4; grid-column: 1; }
.field__count {
  grid-row: 1; grid-column: 1; justify-self: end; align-self: end; margin: 0 0 0.25rem; font-size: 0.78rem; line-height: 1.3;
  color: var(--muted); white-space: nowrap; visibility: hidden; pointer-events: none;
}
.field__count.is-visible { visibility: visible; }
.field__count.is-full { color: var(--warn); font-weight: 600; }
.field__count.is-over { color: var(--danger); font-weight: 700; }
/* Seit 1.67.0: Feld ohne sichtbare Bezeichnung – Zähler klein rechts unter dem Feld, nur wenn es knapp wird */
.field__count--under { display: none; max-width: 100%; margin: 0.2rem auto 0 0; text-align: right; visibility: visible; justify-self: start; }
.field__count--under.is-visible { display: block; }
.field > .field__count--under { grid-row: 4; grid-column: 1; justify-self: end; align-self: start; }
/* Kein Platz neben der Bezeichnung (seit 1.65.0): Zähler in eigener Zeile darunter, Platz bleibt immer frei */
.field--count-below > .field__count { grid-row: 2; align-self: start; margin: 0 0 0.25rem; }

/* Kurze Formulare: Dateiwahl und Knopf in einer Zeile (seit 1.3.0) */
.form--inline { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.form--inline label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }
.form-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.form-link { margin: -1.25rem 0 2rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; }
input[type="file"] { font: inherit; font-size: 0.9rem; max-width: 100%; }
.brand-preview img {
  display: block;
  max-width: 22rem;
  max-height: 6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0.5rem;
}
/* Seit 1.27.0: Logo und Schriften in Kästen, Hochladen über die Ablagefläche */
.brand-logo__body { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: flex-start; }
.brand-logo__current { flex: 0 1 18rem; min-width: 0; }
.brand-logo__current .brand-preview { margin: 0; }
.brand-logo__current .brand-preview img { max-width: 100%; }
.brand-logo__upload { flex: 1 1 22rem; min-width: 0; }
.brand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.brand-actions .btn-mini--danger-quiet { margin-left: auto; }
.brand-logo .dropzone, .brand-font .dropzone { margin-bottom: 0.75rem; }
.brand-font__file { margin: 0 0 0.75rem; overflow-wrap: anywhere; }
.brand-font__file .hint { margin-top: 0.1rem; }

/* Verbindungstest */
.data-list {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.4rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1rem 1.25rem;
  margin: 0;
}
.data-list dt { font-weight: 600; }
.data-list dd { margin: 0; overflow-wrap: anywhere; }
pre {
  margin: 0;
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  .account { margin-left: 0; width: 100%; justify-content: space-between; }
  .main-nav { flex: 1 0 100%; }
  /* Auf schmalen Bildschirmen öffnet das Menü unter der Kopfzeile über die volle Breite */
  .menu { position: static; }
  .menu__panel { top: auto; left: 0.75rem; right: 0.75rem; min-width: 0; margin-top: 0.5rem; }
  .brand__logo { height: 2.25rem; }
  /* Kompakte stehende Kopfzeile: Logo und Konto in einer Zeile, darunter die Menüs in einer
     Zeile, die bei Bedarf seitlich rollt */
  .site-header__inner { padding: 0.5rem 0.9rem; gap: 0.4rem 1rem; }
  .brand { order: 1; }
  .menu--account { order: 2; margin-left: auto !important; width: auto; }
  .main-nav { order: 3; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 0 0.55rem; padding-bottom: 0.15rem; font-size: 0.9rem; }
  html { scroll-padding-top: 7.5rem; }
  .menu--account .menu__panel { left: 0.75rem; right: 0.75rem; }
  .menu--account { margin-left: 0; }
  .tool-card--group { padding: 1rem; }
  .data-list { grid-template-columns: 1fr; }
  .data-list dd { margin-bottom: 0.5rem; }
}

/* Debug-Bereich (seit 1.6.0): Befunde und aufklappbarer Formularteil */
.befund { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; max-width: 52rem; }
.befund .status { min-width: 6.5rem; text-align: center; margin-right: 0.5rem; }
/* .form-more: seit 1.52.0 wie .expand (Abschnitt „Aufklappbare Erklärungen und Bereiche“ am Ende) */
h3 { font-size: 1.05rem; margin: 1.25rem 0 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .menu > summary::after, .tool-card--link, .tool-card--link::after, .tool-card__item, .tool-card__item::after { transition: none; }
  .tool-card--link:hover { transform: none; }
}


/* ------------------------------------------------------------------------------------
   Kopfzeile seit 1.14.0: zwei Zeilen. Oben Logo (mit genug Raum) und Titel auf Weiß,
   darunter ein farbiges Band mit den Menüs, dem Namen und „Abmelden“. Beides bleibt beim
   Scrollen stehen. Diese Regeln stehen am Ende und gehen den älteren vor.
   ------------------------------------------------------------------------------------ */
html { scroll-padding-top: 9.5rem; }
.site-header { border-bottom: 0; box-shadow: 0 2px 8px rgba(31, 43, 51, 0.10); }
.site-header__inner { padding: 0 1.25rem; gap: 0 1.5rem; flex-wrap: nowrap; }
.site-header__inner--kopf { padding-top: 0.85rem; padding-bottom: 0.85rem; justify-content: space-between; }
.brand { gap: 0; }
.brand__logo { height: 3.1rem; max-width: 100%; width: auto; }
.brand__titel {
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-grey);
  text-decoration: none;
  white-space: nowrap;
}
.brand__titel:hover { color: var(--accent-strong); }
.site-header__band { background: var(--band); color: #fff; }
.site-header__inner--band { min-height: 2.9rem; align-items: center; }
.site-header__band .main-nav { gap: 0 1.6rem; flex-wrap: nowrap; }
.site-header__band .main-nav > a,
.site-header__band .menu > summary {
  color: rgba(255, 255, 255, 0.82);
  padding: 0.7rem 0 0.6rem;
  border-bottom: 3px solid transparent;
}
.site-header__band .main-nav > a:hover,
.site-header__band .menu > summary:hover,
.site-header__band .menu[open] > summary { color: #fff; }
.site-header__band .main-nav > a[aria-current="page"],
.site-header__band .menu > summary.is-current { color: #fff; border-bottom-color: #fff; }
.site-header__band .menu__panel { top: calc(100% + 0.25rem); color: var(--ink); }
.account { margin-left: auto; gap: 0.9rem; flex-shrink: 0; }
.site-header__band .account__name { color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; white-space: nowrap; }
.account__abmelden {
  font: inherit;
  font-size: 0.9rem;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}
.account__abmelden:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.account__abmelden:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 40rem) {
  html { scroll-padding-top: 8.5rem; }
  .site-header__inner { padding: 0 0.9rem; }
  .site-header__inner--kopf { padding-top: 0.6rem; padding-bottom: 0.6rem; gap: 0.75rem; }
  .brand { order: 0; min-width: 0; }
  .brand__logo { height: 2rem; }
  .brand__titel { font-size: 0.95rem; }
  /* Band: Menüs rollen seitlich, Abmelden bleibt rechts sichtbar */
  .site-header__inner--band { gap: 0 0.9rem; }
  .site-header__band .main-nav { order: 0; flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; gap: 0 1rem; font-size: 0.9rem; }
  .site-header__band .main-nav > a, .site-header__band .menu > summary { padding: 0.6rem 0 0.5rem; }
  .site-header__band .account__name { display: none; }
  .account { width: auto; margin-left: 0; justify-content: flex-end; }
  .account__abmelden { font-size: 0.85rem; padding: 0.2rem 0.55rem; }
}
/* Ohne Logo (etwa auf der Anmeldeseite) steht der Gemeindename gut lesbar links */
.site-header__kopf .brand__church { font-size: 1.05rem; font-weight: 600; color: var(--brand-grey); }

/* ------------------------------------------------------------------------------------
   Seit 1.17.0: Rollpfeile für die Menüzeile. Sie erscheinen nur, wenn die Zeile nicht in
   die Breite passt, und nur auf der Seite, auf der es weitergeht. Die Pfeile liegen über
   dem Rand der Menüzeile und nehmen ihr keinen Platz weg (negativer Rand gleicht Breite
   und Abstand aus). Der Verlauf in der Bandfarbe lässt die Menüpunkte zum Rand hin auslaufen.
   ------------------------------------------------------------------------------------ */
.site-header__inner--band { --band-gap: 1.5rem; gap: 0 var(--band-gap); }
.nav-rollen { display: none; }
.site-header__inner--band.rollt .nav-rollen {
  --pfeil: 2.4rem;
  display: flex;
  align-items: center;
  flex: 0 0 var(--pfeil);
  width: var(--pfeil);
  align-self: stretch;
  position: relative;
  z-index: 2;
  padding: 0 0.15rem;
  margin: 0;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.site-header__inner--band.rollt .nav-rollen--links {
  justify-content: flex-start;
  margin-right: calc(-1 * (var(--pfeil) + var(--band-gap)));
  background: linear-gradient(to right, var(--band) 45%, transparent);
}
.site-header__inner--band.rollt .nav-rollen--rechts {
  justify-content: flex-end;
  margin-left: calc(-1 * (var(--pfeil) + var(--band-gap)));
  background: linear-gradient(to left, var(--band) 45%, transparent);
}
.site-header__inner--band.kann-links .nav-rollen--links,
.site-header__inner--band.kann-rechts .nav-rollen--rechts { opacity: 1; pointer-events: auto; }
.nav-rollen svg { display: block; flex-shrink: 0; }
/* Die Leiste rollt ohne sichtbaren Rollbalken; die Pfeile übernehmen den Hinweis */
.site-header__band .main-nav { scrollbar-width: none; }
.site-header__band .main-nav::-webkit-scrollbar { display: none; }

@media (max-width: 40rem) {
  .site-header__inner--band { --band-gap: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-rollen { transition: none; }
}

/* ------------------------------------------------------------------------------------
   Seit 1.18.0: Verwaltung „Menü und Bezeichnungen“
   ------------------------------------------------------------------------------------ */
.plugin-liste { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.6rem; max-width: 52rem; }
.plugin-liste__eintrag {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.plugin-liste__kopf { display: flex; align-items: center; gap: 0.9rem; padding: 0.65rem 0.9rem; }
.plugin-liste__nr {
  flex: 0 0 auto;
  min-width: 1.9rem;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
}
.plugin-liste__titel { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; }
/* Seit 1.66.0: Pfeile mit Text (btn-mini), Felder als Baustein .field mit Zähler, ein Formular mit Speicherleiste */
.plugin-liste__pfeile { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; margin: 0; flex: 0 0 auto; }
.plugin-liste__texte { border-top: 1px solid var(--line); }
.plugin-liste__texte > summary { cursor: pointer; padding: 0.55rem 0.9rem; color: var(--accent); font-size: 0.95rem; }
.plugin-liste__texte[open] > summary { border-bottom: 1px solid var(--line); }
.texte-form { padding: 1rem 0.9rem 1rem; display: grid; gap: 1rem; min-width: 0; }
.texte-form > .fields, .texte-form .texte-form__eintrag > .fields { margin: 0; }
.texte-form .input::placeholder { color: #9aa5ad; }
.texte-form__menue { border: 0; padding: 0; margin: 0; display: grid; gap: 0.75rem; min-width: 0; }
.texte-form__menue legend, .icon-wahl legend { padding: 0; margin: 0 0 0.4rem; }
.texte-form__eintrag { display: grid; gap: 0.6rem; padding: 0.75rem 0.85rem; background: var(--wash); border-radius: var(--radius); }
.texte-form__bereich { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.texte-form__zurueck { margin: 0; }
.texte-form > .notice { margin: 0; }
@media (max-width: 40rem) {
  .plugin-liste__kopf { gap: 0.6rem; padding: 0.6rem 0.7rem; flex-wrap: wrap; }
  .plugin-liste__nr { min-width: 1.4rem; }
  .plugin-liste__pfeile { flex-basis: 100%; justify-content: flex-start; }
}
/* Unternavigation der Verwaltung: Einträge bleiben ganz und brechen als Ganzes um (seit 1.18.0) */
.sub-nav { flex-wrap: wrap; gap: 0.1rem 1.25rem; }
.sub-nav a { white-space: nowrap; }

/* ======================================================================================
   Gemeinsame Bausteine (seit 1.20.0)
   Für alle Plugins, damit Karten, Kästen, Badges und Knöpfe überall gleich aussehen.
   Vorbild ist die Übersicht des Wochenblatts; erprobte Details aus dem Beamer.
   Musterseite mit allen Bausteinen: Verwaltung > System > Fehlersuche > Bausteine.
   ====================================================================================== */

/* ---------- Symbole: Portal\Icons::html('name') ---------- */
.icon { display: inline-block; width: 1rem; height: 1rem; flex-shrink: 0; vertical-align: -0.15rem; }
.icon--sm { width: 0.9rem; height: 0.9rem; }
.icon--lg { width: 1.15rem; height: 1.15rem; }
.icon--xl { width: 2.4rem; height: 2.4rem; }

/* ---------- Leise Texte und Hilfsklassen ---------- */
/* Leiser Zusatztext unter einem Wert oder Feld */
.hint { display: block; margin: 0.35rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.4; max-width: 72ch; }
.hint--inline { display: inline; margin: 0; }
/* Beschriftung in Kapitälchen, etwa über einem Feld */
.label-caps { display: block; margin: 0 0 0.15rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* Für Bildschirmleser lesbar, aber unsichtbar – etwa der erste, unsichtbare Speichern-Knopf eines
   Formulars, damit Enter in einem Feld speichert und nicht die erste andere Schaltfläche auslöst */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Erklärtexte (.meta) unter Feldern und Tabellen ----------
   .meta zieht sich unter Überschriften um 0.5rem nach oben. Direkt nach Feldern, Häkchen und
   Tabellen klebte der Text dadurch am Element; dort bekommt er jetzt Abstand. */
.input + .meta, select + .meta, textarea + .meta, label + .meta, .check + .meta,
.table-wrap + .meta, .choice-cards__list + .meta, .facts + .meta { margin-top: 0.4rem; }

/* ---------- Seitenkopf: Titel und Angaben links, Knöpfe rechts ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 1.25rem; }
.page-head h1 { margin-bottom: 0.3rem; }
.page-head__meta { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: none; line-height: 1.7; }
/* Seit 1.53.2 (Hinweis des Predigtmanuskript-Chats): als Textfluss statt Flex – ein Symbol bleibt vorn in der Zeile, langer Text
   bricht dahinter um, statt als Ganzes unter das Symbol zu rutschen; ein <span> drumherum ist nicht mehr nötig. Mehrere Teile
   (Badges, Angaben in <span>) stehen weiter mit Abstand nebeneinander. */
.page-head__meta > * { margin-right: 0.5rem; }   /* mit dem Leerzeichen dazwischen etwa 0,75rem wie bisher */
.page-head__meta > :last-child { margin-right: 0; }
.page-head__meta > .icon { margin-right: 0.15rem; vertical-align: -0.15em; }
.page-head__meta > span > .icon { margin-right: 0.15rem; vertical-align: -0.15em; }
.page-head__meta > .pill { display: inline-flex; vertical-align: 0.05em; }
.page-head .meta { margin: 0; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }

/* ---------- Badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.08rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.5; white-space: nowrap; background: var(--wash); color: var(--muted); }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--muted { background: var(--wash); color: var(--muted); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--danger { background: var(--danger-bg); color: var(--danger); }
.pill--info { background: var(--info-bg); color: var(--info); }
.pill--accent { background: var(--accent); color: #fff; }
.pill .icon { width: 0.8rem; height: 0.8rem; }

/* ------------------------------------------------------------------------------------
   Schiebeschalter (seit 1.45.0, Portal\Toggle): zwei beschriftete Zustände, der aktive in seiner Farbe
   (hell mit kräftiger Schrift und Rand wie die Badges), Kasten mit farbigem linkem Rand, Titel und Hinweis;
   speichert mit JavaScript sofort, ohne als Formular. Auf dem Handy volle Breite.
   ------------------------------------------------------------------------------------ */
.switch-box {
  --switch-tone: var(--accent); --switch-bg: var(--accent-tint);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0 0 1.25rem; padding: 0.85rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--switch-tone); border-radius: var(--radius-lg);
}
.switch-box--ok { --switch-tone: var(--ok); --switch-bg: var(--ok-bg); }
.switch-box--warn { --switch-tone: var(--warn); --switch-bg: var(--warn-bg); }
.switch-box--info { --switch-tone: var(--info); --switch-bg: var(--info-bg); }
.switch-box--danger { --switch-tone: var(--danger); --switch-bg: var(--danger-bg); }
.switch-box--muted { --switch-tone: var(--muted); --switch-bg: var(--wash); }
.switch-box__title { flex: none; font-weight: 700; font-size: 1.05rem; }
.switch-box__control { flex: none; }
/* Hinweis, Grund und Meldung rechts neben dem Schalter im restlichen Platz, linksbündig (seit 1.45.5) */
.switch-box__notes { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.switch-box__notes:not(:has(> :not([hidden]):not(:empty))) { display: none; }
.switch-box__hint { color: var(--muted); font-size: 0.9rem; }
.switch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; min-width: 16rem; margin: 0; padding: 0.2rem;
  font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.switch::before {
  content: ""; position: absolute; top: 0.2rem; bottom: 0.2rem; left: 0.2rem; width: calc(50% - 0.2rem); box-sizing: border-box;
  background: var(--switch-bg); border: 1.5px solid var(--switch-tone); border-radius: 999px; transition: transform 0.18s ease;
}
.switch[aria-checked="true"]::before { transform: translateX(100%); }
.switch__side { position: relative; padding: 0.55rem 1.1rem; text-align: center; white-space: nowrap; font-weight: 600; color: var(--muted); }
.switch[aria-checked="false"] > .switch__side:first-child,
.switch[aria-checked="true"] > .switch__side:last-child { color: var(--switch-tone); font-weight: 700; }
.switch:hover:not(:disabled) { border-color: var(--accent-line-strong); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:disabled { cursor: not-allowed; }
.switch:disabled > .switch__side { opacity: 0.8; }
/* Meldung neutral wie „Alles gespeichert“ der Speicherleiste (seit 1.45.6), Fehler rot */
.switch-box__status { font-size: 0.85rem; color: var(--muted); min-height: 0; }
.switch-box__status:empty { display: none; }
.switch-box__status--error { color: var(--danger); }
.switch-box__reason { font-size: 0.9rem; color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .switch::before { transition: none; } }
@media (max-width: 40rem) {
  .switch-box__title, .switch-box__control, .switch-box__notes { flex: 1 1 100%; }
  .switch { min-width: 0; width: 100%; }
}

/* ---------- Kleine Knöpfe ---------- */
.btn-mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  font: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1.5;
  min-width: 2rem; padding: 0.25rem 0.55rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--wash); color: var(--accent);
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn-mini:hover:not([disabled]) { border-color: var(--accent); color: var(--accent-strong); }
.btn-mini[disabled], .btn-mini[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.btn-mini .icon { width: 0.9rem; height: 0.9rem; }
.btn-mini--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-mini--primary:hover:not([disabled]), .btn-mini--primary:focus-visible { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.btn-mini--light { background: var(--surface); }
/* Zurückhaltend, erst beim Zeigen deutlich rot – etwa „Löschen“ */
.btn-mini--danger-quiet { background: var(--surface); color: var(--danger); }
.btn-mini--danger-quiet:hover:not([disabled]) { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
/* Formular nur als Hülle eines einzelnen Knopfs */
.form-inline { display: inline; margin: 0; }
/* Formular ohne eigenen Kasten, wenn es nur Kästen (.panel) enthält */
.form--plain { background: transparent; border: 0; padding: 0; max-width: none; box-shadow: none; }

/* ---------- Kästen (Panel): weiße Karte mit Überschrift und Symbol ----------
   Auch als Formulargruppe: <fieldset class="panel"><legend class="panel__title">…</legend>.
   Die Überschrift steht dabei sicher im Kasten statt auf seinem oberen Rahmen. */
.panel, .form fieldset.panel {
  min-width: 0; max-width: none; margin: 0 0 1.25rem; padding: 0.9rem 1.25rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.panel__title, .form legend.panel__title {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  width: 100%; margin: 0 0 1rem; padding: 0 0 0.65rem;
  border-bottom: 1px solid var(--line); font-size: 1.08rem; font-weight: 700; line-height: 1.3;
}
legend.panel__title { float: left; }
.panel__title + * { clear: both; }
.panel__title .icon { width: 1.15rem; height: 1.15rem; color: var(--accent); }
.panel__title .hint, .panel__title .meta-inline { font-weight: 400; margin: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel p { max-width: none; }
.panel--danger, .form fieldset.panel--danger { border-top: 3px solid var(--danger); }
.panel--danger .panel__title .icon { color: var(--danger); }
/* Mehrere Kästen nebeneinander, auf schmalen Bildschirmen untereinander */
.panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; align-items: start; }
.panel-grid > .panel--wide { grid-column: 1 / -1; }

/* ---------- Gruppe: kleiner grauer Kasten in einer Karte, Titel in Kapitälchen ---------- */
.group, .form fieldset.group {
  min-width: 0; margin: 0; padding: 0.55rem 0.75rem 0.65rem;
  background: var(--surface-alt); border: 1px solid var(--line-soft); border-radius: var(--radius-md);
}
.group__title, .form legend.group__title {
  display: flex; align-items: center; gap: 0.35rem; width: 100%; padding: 0; margin: 0 0 0.4rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
legend.group__title { float: left; }
.group__title + * { clear: both; }
.group__title .icon { width: 0.95rem; height: 0.95rem; color: var(--accent); opacity: 0.75; }
.group > :last-child { margin-bottom: 0; }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; }

/* ---------- Angaben: Symbol, Beschriftung in Kapitälchen, Wert ----------
   <dl class="facts"><div><Icon><dt>…</dt><dd>…</dd></div>…</dl> */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.6rem 1.25rem; margin: 0; align-content: start; }
.facts > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 0.45rem; min-width: 0; }
.facts > div > :not(.icon) { grid-column: 2; }
.facts .icon { grid-row: 1 / span 2; margin-top: 0.1rem; color: var(--accent); opacity: 0.75; }
.facts dt { margin: 0 0 0.15rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere; }
.facts dd .hint { margin-top: 0.15rem; }
/* Angaben ohne Symbol: ohne Einzug */
.facts > div:not(:has(> .icon)) { grid-template-columns: minmax(0, 1fr); }
.facts > div:not(:has(> .icon)) > * { grid-column: 1; }
/* Als Kacheln, wie in der Übersicht des Wochenblatts */
.facts--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.facts--tiles > div { padding: 0.55rem 0.65rem; border-radius: var(--radius-md); background: var(--surface-alt); border: 1px solid var(--line-soft); }
.facts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Karten ----------
   <ol class="list-cards"><li class="card">
     <div class="card__head"><span class="card__nr">1</span><h2 class="card__title">…</h2>
       <span class="card__badges"><span class="pill pill--ok">…</span></span></div>
     <div class="card__body"><div class="card__media">…</div><div class="card__main">…</div>
       <div class="card__actions">…</div></div>
     <div class="card__bar card__bar--alt">…</div>
   </li></ol>
   Bild und Aktionen sind freiwillig. Mit .card--split steht rechts eine Seitenspalte über die
   ganze Höhe: <li class="card card--split"><div class="card__content">Kopf, Rumpf, Leisten</div>
   <div class="card__side">Knöpfe</div></li>. */
.list-cards { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.9rem; }
.card {
  min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.card__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem;
  padding: 0.75rem 1.1rem; background: var(--surface-alt); border-bottom: 1px solid var(--line);
}
.card__nr {
  display: inline-block; min-width: 1.7rem; padding: 0 0.3rem; border-radius: var(--radius);
  background: var(--wash); color: var(--accent); font-size: 0.85rem; font-weight: 700; text-align: center;
}
.card__head > .icon { color: var(--accent); }
.card__title { margin: 0; font-size: 1.08rem; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; }
.card__subtitle { color: var(--muted); font-weight: 400; }
.card__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-left: auto; }
/* Badges oben rechts, breit und auf dem Handy (seit 1.41.2, Auftrag des Wochenblatt-Chats; seit 1.41.3 auch breit,
   Hinweis von Hanno): der Kopf bricht nicht um, der Titel (oder ein eigener Titelblock) bricht neben den Badges
   in sich um; alles auf der ersten Textzeile ausgerichtet, auch bei zweizeiligem Titelblock */
.card__head:has(> .card__badges) { flex-wrap: nowrap; align-items: baseline; }
/* Seit 1.53.1 (Auftrag des Predigtplanung-Chats): Ein Symbol hat als Grundlinie seine Unterkante und stand deshalb auf der
   Schriftlinie, sichtbar zu hoch. Etwas nach unten gerückt steht es mittig zur ersten Titelzeile (auch wenn der Titel umbricht). */
.card__head:has(> .card__badges) > .icon { position: relative; top: 0.15em; }
.card__head:has(> .card__badges) > .tile-icon { position: relative; top: 0.12em; }
/* Seit 1.54.1 (Auftrag des Predigtplanung-Chats, Hanno: „Sollte in dieser oberen Zeile nicht alles auf einer horizontalen Linie
   stehen?“): Die kleinere Schrift der Badges stand auf der Grundlinie des Titels, ihr Kasten reichte darunter hinaus – etwas
   angehoben stehen sie mittig zur ersten Titelzeile. */
.card__head > .card__badges { position: relative; top: -0.1em; }
.card__head:has(> .card__badges) > :not(.card__nr, .card__badges, .icon, .tile-icon) { flex: 1 1 0; min-width: 0; }
/* Wörter im Titel bleiben ganz, solange sie in die Zeile passen; mehrere Badges stapeln sich rechts untereinander.
   Seit 1.54.1 (Hanno: „das Badge verteidigt seinen Platz, der Text davor bricht blockweise um“): Ein Badge wird nicht mehr
   gekürzt und ragt nicht mehr aus der Karte (vorher max-width 50 % bei nicht umbrechender Schrift); der Titel daneben wird
   schmaler und bricht um, ein einzelnes zu langes Wort erst im Notfall.
   Seit 1.64.0 ohne Silbentrennung (Auftrag des Predigtplanung-Chats, Hanno: „Tri-/nitatis“ liest sich schlechter): Umbruch nur
   zwischen ganzen Wörtern, ein Wort, das allein nicht in die Zeile passt, im äußersten Notfall ohne Trennstrich. */
.card__head:has(> .card__badges) .card__title { overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
.card__head > .card__nr, .card__head > .icon, .card__head > .tile-icon { flex: none; }
.card__head > .card__badges { flex: 0 0 auto; min-width: 0; max-width: none; justify-content: flex-end; }
.card__body { display: flex; gap: 1rem 1.25rem; padding: 0.9rem 1.1rem 1rem; }
.card__media { flex: 0 0 13rem; min-width: 0; }
.card__media img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.card__main { flex: 1 1 auto; min-width: 0; }
.card__main > :last-child { margin-bottom: 0; }
.card__actions { flex: 0 0 auto; width: 9rem; display: flex; flex-direction: column; gap: 0.4rem; padding-left: 1.1rem; border-left: 1px solid var(--line); }
.card__actions > .btn-mini, .card__actions > .form-inline, .card__actions > .form-inline > .btn-mini { width: 100%; }
.card__actions .btn-mini { padding-top: 0.3rem; padding-bottom: 0.3rem; }
/* Leiste unter dem Rumpf, etwa für Links oder Zähler; --alt hinterlegt sie */
.card__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.55rem 1.1rem; border-top: 1px solid var(--line); font-size: 0.85rem; }
.card__bar--alt { background: var(--surface-alt); }
.card__bar-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
/* Seitenspalte über die ganze Höhe */
.card--split { display: grid; grid-template-columns: minmax(0, 1fr) 12.5rem; }
.card__content { min-width: 0; display: flex; flex-direction: column; }
.card__content > .card__body { flex: 1; }
.card__side { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.9rem 1rem; border-left: 1px solid var(--line); background: var(--surface-soft); }
.card__side > .btn-mini, .card__side > .form-inline, .card__side > .form-inline > .btn-mini { width: 100%; }
.card__side .btn-mini { padding-top: 0.35rem; padding-bottom: 0.35rem; }
/* Hervorgehoben, etwa „gilt jetzt“ oder ein besonderer Eintrag */
.card--highlight { border-color: var(--accent); box-shadow: var(--shadow-highlight); }
.card--highlight .card__head { background: linear-gradient(90deg, var(--accent-tint), var(--accent-tint-soft)); border-bottom-color: var(--accent-line); }
.card--highlight .card__side { background: var(--accent-tint-soft); }
/* Ruhend: Titel und Bild zurückgenommen, Bedienung bleibt deutlich */
.card--muted .card__title, .card--muted .card__title a { color: var(--muted); }
.card--muted .card__media img { opacity: 0.45; filter: grayscale(1); }
/* Abgelaufen oder archiviert: die ganze Karte blasser */
.card--faded { opacity: 0.6; }

/* ---------- Speicherleiste (seit 1.21.0) ----------
   <form data-unsaved>, Felder mit data-saved="<gespeicherter Wert>"; am Ende des Formulars:
   <div class="savebar" data-savebar hidden><div class="savebar__inner">
     <span class="savebar__status" data-savebar-status role="status" aria-live="polite">Ungespeicherte Änderungen</span>
     <span class="savebar__actions"><button type="button" class="button button--quiet" data-discard>Verwerfen</button>
       <button type="submit" class="button">Speichern</button></span></div></div>
   .savebar erscheint nur bei Änderungen unten am Bildschirmrand; daneben bleibt ein normaler
   Speichern-Knopf für Seiten ohne JavaScript. .savebar--sticky (ohne hidden) steht immer am Ende
   des Formulars und bleibt beim Scrollen sichtbar; weitere Knöpfe dürfen hinein. */
.savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(31, 43, 51, 0.12);
  animation: savebar-in 0.18s ease-out;
}
.savebar__inner {
  max-width: 72rem; margin: 0 auto;
  padding: 0.65rem 1.25rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
}
.savebar__status { font-weight: 600; }
.savebar--changed .savebar__status { color: var(--info); }
.savebar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.savebar .button { margin: 0; }
.savebar__lead { font-size: 0.85rem; color: var(--muted); }
/* Platz schaffen, damit die aufgesprungene Leiste nichts verdeckt */
body.has-savebar { padding-bottom: 5rem; }
@keyframes savebar-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* Immer sichtbar: am Ende des Formulars, beim Scrollen am unteren Rand */
.savebar--sticky {
  position: sticky; bottom: 0.5rem; left: auto; right: auto; z-index: 5;
  margin: 0 0 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: 0 -2px 12px rgba(31, 43, 51, 0.08); /* seit 1.41.1 deckend */
  animation: none;
}
.savebar--sticky .savebar__inner { max-width: none; padding: 0.7rem 1rem; justify-content: flex-start; }
.savebar--sticky .savebar__status { order: 2; margin-left: auto; font-weight: 400; font-size: 0.9rem; color: var(--muted); }
.savebar--sticky.savebar--changed .savebar__status { font-weight: 600; color: var(--info); }
.savebar--sticky .savebar__status:empty { display: none; }
.savebar--changed.savebar--sticky { border-color: var(--changed-soft); }
/* Seit 1.37.0: Aufbau der immer sichtbaren Leiste, breit und auf dem Handy nach demselben Muster
   (Vorbild Wochenblatt 1.9.10, Wunsch von Hanno):
   <div class="savebar savebar--sticky" data-savebar data-text-saved="Alles gespeichert"><div class="savebar__inner">
     <div class="savebar__more">  (optional) <span class="savebar__lead">Speichern und …</span> weitere Knöpfe </div>
     <div class="savebar__main">
       <span class="savebar__status" data-savebar-status role="status" aria-live="polite"></span>
       <span class="savebar__actions"><button type="button" class="button button--quiet" data-discard hidden>Verwerfen</button>
         <button type="submit" class="button">Speichern</button></span></div></div></div>
   Links die weiteren Aktionen, rechts der Stand klein über „Verwerfen“ und „Speichern“; „Speichern“
   immer ganz rechts. Auf dem Handy (unter 40rem) bleibt die Leiste unten stehen und zeigt nur Stand,
   „Verwerfen“ und „Speichern“ gleich breit; die weiteren Aktionen erscheinen mit Text am Formularende
   (app.js legt sie dort als .savebar-more an). Ohne JavaScript bleiben sie in der Leiste. */
.savebar--sticky .savebar__inner:has(> .savebar__main) { flex-wrap: nowrap; align-items: flex-end; gap: 0.5rem 1.5rem; }
.savebar__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; flex: 1 1 auto; min-width: 0; }
/* Seit 1.37.1: „Speichern und …“ und der Stand stehen auf einer Linie (gleiche Größe, Zeilenhöhe, Abstand) */
.savebar__more .savebar__lead, .savebar--sticky .savebar__main .savebar__status { flex-basis: 100%; margin: 0; font-size: 0.82rem; line-height: 1.25; }
.savebar__main { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex: 0 0 auto; margin-left: auto; }
.savebar--sticky .savebar__main .savebar__status { order: 0; flex-basis: auto; }
.savebar__main .savebar__actions { flex-wrap: nowrap; }
.savebar-more { display: none; }
/* ---------- Leiste unten (seit 1.38.0 als Aktionsleiste, seit 1.39.0 eine Leiste für alles) ----------
   Portal\ActionBar: <nav class="actionbar" data-actionbar><div class="actionbar__inner">
     <div class="actionbar__page"> Seiten-Aktionen (Links, Knöpfe; die letzte ganz rechts) </div></div></nav>
   Ohne JavaScript steht sie am Inhaltsende; mit JavaScript unten am Rand, so breit wie der Inhalt.
   Seit 1.39.0 übernimmt sie das Speichern der aufspringenden Leisten (app.js hängt .actionbar__save
   an, .actionbar--saving solange etwas geändert ist): rechts der Stand über „Verwerfen“ und
   „Speichern“, links weiter die Seiten-Aktionen; auf dem Handy nur Stand und die beiden Knöpfe.
   Hat die Seite eine .savebar--sticky, wandern die Seiten-Aktionen dorthin (.savebar__page). */
.actionbar {
  margin: 1.5rem 0 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: 0 -2px 12px rgba(31, 43, 51, 0.08);
}
.actionbar__inner { display: flex; align-items: flex-end; gap: 0.5rem 1.5rem; padding: 0.7rem 1rem; }
.actionbar__page { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; }
.actionbar__page > :last-child { margin-left: auto; }
/* Seit 1.46.1: Mit Überschrift („Speichern und …“) gehören alle Seiten-Aktionen zusammen unter sie, auch eine einzelne wie
   „Schließen“ (Hinweis des Wochenblatt-Chats); nur ohne Überschrift steht die letzte als Hauptaktion rechts */
.actionbar__page[data-lead] > :last-child { margin-left: 0; }
.actionbar--saving .actionbar__page > :last-child { margin-left: 0; }
/* Seit 1.53.2: align: 'start' – alle Seiten-Aktionen links; „Schließen“ bleibt rechts */
.actionbar__page[data-align="start"] > :last-child:not([data-close]),
.savebar__page[data-align="start"] > :last-child:not([data-close]) { margin-left: 0; }
.actionbar .button { margin-top: 0; margin-bottom: 0; }
.actionbar--saving { border-color: var(--changed-soft); }
.actionbar .savebar__status { margin: 0; font-size: 0.82rem; line-height: 1.25; font-weight: 600; color: var(--info); }
.js .actionbar {
  position: fixed; z-index: 50; bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
  width: min(61.5rem, calc(100% - 2.5rem)); margin: 0;
}
.js body:has(.actionbar) { padding-bottom: 5rem; }
.js body:has(.actionbar--saving) { padding-bottom: 7rem; }
.js:has(.actionbar) { scroll-padding-bottom: 5.5rem; }
.js:has(.actionbar--saving) { scroll-padding-bottom: 7.5rem; }
/* Seit 1.42.0: Trägt die stehende Speicherleiste Seiten-Aktionen (.savebar--with-page, nur mit JavaScript), steht sie
   fest am unteren Rand über die ganze Seite wie die Leiste unten, auch unterhalb des Formulars (Auftrag des
   Wochenblatt-Chats). app.js misst ihre Höhe (--bar-h); so viel Platz bekommt die Seite unten. */
.js .savebar--with-page {
  position: fixed; z-index: 50; bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); left: 50%; right: auto;
  transform: translateX(-50%); width: min(61.5rem, calc(100% - 2.5rem)); margin: 0;
}
.js body:has(.savebar--with-page) { padding-bottom: calc(var(--bar-h, 6rem) + 1.5rem); }
.js:has(.savebar--with-page) { scroll-padding-bottom: calc(var(--bar-h, 6rem) + 1rem); }
/* Seiten-Aktionen in der stehenden Speicherleiste (seit 1.39.0) */
.savebar__page { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 0 1 auto; }
/* Seit 1.44.0: kleine Überschrift über den Seiten-Aktionen (ActionBar lead:, Attribut data-lead), etwa „Speichern und …“;
   gleiche Größe, Zeilenhöhe und Abstand wie der Stand rechts, damit beide auf einer Linie stehen */
.actionbar__page[data-lead], .savebar__page[data-lead] { row-gap: 0.3rem; }
.actionbar__page[data-lead]::before, .savebar__page[data-lead]::before {
  content: attr(data-lead); flex: 0 0 100%; margin: 0; font-size: 0.82rem; line-height: 1.25; color: var(--muted);
}
/* Solange gespeichert werden kann, ist „Speichern“ der einzige dunkle Knopf: Seiten-Aktionen dann ruhig */
.actionbar--saving .actionbar__page .button:not(.button--quiet),
.savebar__page .button:not(.button--quiet) { background: transparent; color: var(--accent); }
.actionbar--saving .actionbar__page .button:not(.button--quiet):hover,
.savebar__page .button:not(.button--quiet):hover { background: var(--wash); color: var(--accent-strong); }
/* Seit 1.45.0: ab vier Seiten-Aktionen bis 64rem zwei gleich breite je Zeile statt 3 + 1 (Wunsch von Hanno).
   Seit 1.45.3 behalten sie am Rechner immer ihre Symbole (Wunsch von Hanno): Reicht mit „Verwerfen“ der Platz nicht, setzt
   app.js die Leiste zweizeilig (.savebar--stacked / .actionbar--stacked), siehe unten. */
/* Zweizeilig (seit 1.45.3, Aufbau nach Hanno): links die Seiten-Aktionen 2 × 2 unter „Speichern und …“, linksbündig, rechts der
   Stand über „Verwerfen“ und „Speichern“ untereinander, rechtsbündig und gleich breit; Zeilen links und rechts auf gleicher Höhe.
   Zwischen 40 und 64rem stehen vier Seiten-Aktionen auch ohne Änderungen so 2 × 2, damit beim Wechsel nichts springt. */
.actionbar--stacked .actionbar__page,
.savebar--stacked .savebar__page { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; align-content: end; gap: 0.4rem 0.5rem; }
/* Seit 1.51.4 (Hanno): ausgeblendete Knöpfe ([hidden]) zählen nicht mit; mit Speicherstand (automatisch speichern) gibt es
   keinen Wechsel zu „Verwerfen“/„Speichern“, daher dort kein 2 × 2 – alles in einer Zeile, solange es passt */
@media (min-width: 40.01rem) and (max-width: 64rem) {
  .actionbar__inner:not(:has(> .savestate)) > .actionbar__page:has(> :nth-child(4 of :not([hidden]))),
  .savebar__page:has(> :nth-child(4 of :not([hidden]))) { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; align-content: end; gap: 0.4rem 0.5rem; }
  .actionbar__inner:not(:has(> .savestate)) > .actionbar__page:has(> :nth-child(4 of :not([hidden]))) > *, .savebar__page:has(> :nth-child(4 of :not([hidden]))) > * { margin-left: 0; justify-content: center; }
  .actionbar__page[data-lead]:has(> :nth-child(4 of :not([hidden])))::before, .savebar__page[data-lead]:has(> :nth-child(4 of :not([hidden])))::before { grid-column: 1 / -1; }
}
.actionbar--stacked .actionbar__page[data-lead]::before,
.savebar--stacked .savebar__page[data-lead]::before { grid-column: 1 / -1; }
.actionbar--stacked .actionbar__page > *,
.savebar--stacked .savebar__page > * { margin-left: 0; justify-content: center; }
.actionbar--stacked .savebar__main,
.savebar--stacked .savebar__main { gap: 0.4rem; }
.actionbar--stacked .savebar__actions,
.savebar--stacked .savebar__main .savebar__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }
.actionbar--stacked .savebar__main,
.savebar--stacked .savebar__main { margin-left: auto; }
/* Mit Änderungen etwas weniger Abstand zwischen Seiten-Aktionen und „Verwerfen“, damit eine Zeile öfter genügt */
.actionbar--saving .actionbar__inner,
.savebar--changed.savebar--with-page .savebar__inner:has(> .savebar__main) { column-gap: 1rem; }
@media (max-width: 40rem) {
  /* Seit 1.39.1: der Rand des iPhones (safe-area) nur einmal, im Inneren (vorher doppelt, Hinweis von Hanno) */
  .js .actionbar { bottom: 0; width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
  .actionbar__inner { flex-direction: column; align-items: stretch; gap: 0.35rem; padding: 0.5rem 0.65rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
  .actionbar__page, .savebar__page { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .actionbar__page > :last-child { margin-left: 0; }
  /* Überschrift über den Seiten-Aktionen auch auf dem Handy (seit 1.44.1, Wunsch von Hanno): eigene Zeile über den
     Knöpfen; zwei Aktionen bleiben gleich breit nebeneinander (Zeilen statt Spalten, damit die Überschrift Platz hat) */
  .actionbar__page[data-lead], .savebar__page[data-lead] { display: flex; flex-wrap: wrap; }
  .actionbar__page[data-lead]:not(:has(> :nth-child(3 of :not([hidden])))) > *, .savebar__page[data-lead]:not(:has(> :nth-child(3 of :not([hidden])))) > * { flex: 1 1 0; min-width: 0; }
  /* In der stehenden Speicherleiste steht sie links auf derselben Zeile wie der Stand rechts („Alles gespeichert“),
     die Leiste wird dadurch nicht höher: Stand rechtsbündig, Seiten-Aktionen um diese Zeile nach oben gezogen
     (Zeilenhöhe beider 0.82rem × 1.25 = 1.025rem, dazu der Abstand 0.35rem der Leiste) */
  .savebar--with-page:has(.savebar__page[data-lead]) .savebar__main .savebar__status { text-align: right; }
  .savebar--with-page:not(.savebar--changed) .savebar__page[data-lead] { margin-top: calc(-1.025rem - 0.35rem); }
  .actionbar__page > *, .savebar__page > * { align-self: stretch; }
  .actionbar .button, .savebar__page .button { padding-left: 0.5rem; padding-right: 0.5rem; text-align: center; }
  .actionbar--saving .actionbar__page { display: none; }
  .actionbar .savebar__status { text-align: center; }
  /* stehende Speicherleiste mit Seiten-Aktionen: ohne Änderungen die Seiten-Aktionen, sonst „Verwerfen“ und „Speichern“ */
  .js .savebar--sticky.savebar--with-page { bottom: 0; left: 0; transform: none; width: 100%; margin: 0; border-bottom: 0; }
  .savebar--with-page.savebar--changed .savebar__page { display: none; }
  .savebar--with-page:not(.savebar--changed) .savebar__main .savebar__actions { display: none; }
  /* Seit 1.41.1: der Stand steht in beiden Zuständen oben, die Seiten-Aktionen darunter (Hinweis des Wochenblatt-Chats) */
  .savebar--with-page .savebar__main { order: 1; }
  .savebar--with-page .savebar__page { order: 2; }
  /* Drei und mehr Seiten-Aktionen: statt gequetschter Spalten in Zeilen umbrechen, jeder Knopf einzeilig,
     ohne Symbol; zwei Aktionen bleiben nebeneinander gleich breit */
  .actionbar__page:has(> :nth-child(3 of :not([hidden]))), .savebar__page:has(> :nth-child(3 of :not([hidden]))) { display: flex; flex-wrap: wrap; }
  .actionbar__page:has(> :nth-child(3 of :not([hidden]))) > *, .savebar__page:has(> :nth-child(3 of :not([hidden]))) > * { flex: 1 1 auto; white-space: nowrap; }
  .actionbar__page:has(> :nth-child(3 of :not([hidden]))) .icon, .savebar__page:has(> :nth-child(3 of :not([hidden]))) .icon { display: none; }
  /* Seit 1.45.0: ab vier Seiten-Aktionen immer zwei gleich breite je Zeile (2 × 2 statt 3 + 1, Wunsch von Hanno);
     bei ungerader Zahl füllt die letzte ihre Zeile */
  .actionbar__page:has(> :nth-child(4 of :not([hidden]))) > *, .savebar__page:has(> :nth-child(4 of :not([hidden]))) > * { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
}

/* Seit 1.39.1: Felder auf dem Handy nie kleiner als 1rem – Safari auf dem iPhone zoomt sonst beim Antippen hinein
   (etwa in .card__bar oder .copy-field mit 0.85rem; Hinweis des Predigtplanung-Chats) */
@media (max-width: 40rem) {
  .input, select, textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]) {
    font-size: max(1rem, 1em);
  }
}

/* Geänderte Eingaben */
.is-changed:not(.card):not([data-unsaved-group]) { border-color: var(--changed) !important; box-shadow: 0 0 0 2px var(--changed-ring); }
.is-changed-choice { background: var(--info-bg); border-radius: var(--radius); box-shadow: 0 0 0 3px var(--info-bg); }
.card.is-changed, [data-unsaved-group].is-changed { border-color: var(--changed-soft); }
@media (prefers-reduced-motion: reduce) { .savebar { animation: none; } }

/* ---------- Kopieren-Knopf (seit 1.28.0): kurz grün nach dem Kopieren ---------- */
.btn-mini.is-copied, .button.is-copied { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
/* Link zum Kopieren: Feld und Knopf in einer Zeile */
.copy-field { display: flex; gap: 0.4rem; align-items: center; min-width: 0; }
.copy-field .input { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; }


/* ---------- Ablagefläche für Dateien (seit 1.27.0) ----------
   Erzeugt mit Portal\Dropzone::html([...]) (src/Dropzone.php):
   <div class="dropzone" data-dropzone><label class="label-caps dropzone__label">…</label>
     <div class="dropzone__area"><span class="dropzone__icon">…</span><div class="dropzone__body">
       <p class="dropzone__prompt" data-dropzone-prompt hidden>…</p><input type="file" class="dropzone__input">
       <p class="dropzone__hint">…</p><ul class="dropzone__files" data-dropzone-files hidden></ul>
       <p class="dropzone__message" data-dropzone-message hidden></p>
       <button class="btn-mini btn-mini--light dropzone__clear" data-dropzone-clear hidden>…</button></div></div></div>
   Ohne JavaScript steht das normale Dateifeld in der Fläche. Mit Skript (.is-ready) ist die ganze
   Fläche anklickbar und das Feld nur noch für Tastatur und Vorleseprogramme da; Zustände:
   .is-over (Datei darüber), .is-filled (Datei gewählt), .is-invalid (Pflicht fehlt), .is-busy
   (wird gleich abgesendet). --compact ist niedriger, etwa in Listen oder schmalen Kästen. */
.dropzone { min-width: 0; margin: 0 0 1rem; }
.dropzone__label { margin-bottom: 0.35rem; }
.dropzone__area {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  padding: 1rem 1.1rem; border: 2px dashed var(--line); border-radius: var(--radius-md);
  background: var(--surface-alt); transition: border-color 0.15s, background-color 0.15s;
}
.dropzone__icon {
  flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-soft); color: var(--accent);
}
.dropzone__icon .icon { width: 1.25rem; height: 1.25rem; }
.dropzone__body { flex: 1 1 8rem; min-width: 0; }
.dropzone__prompt { margin: 0; max-width: none; line-height: 1.35; }
.dropzone__choose { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.dropzone__hint { margin: 0.2rem 0 0; max-width: none; font-size: 0.82rem; line-height: 1.4; color: var(--muted); }
.dropzone__input { margin: 0.1rem 0 0; }
.dropzone__files { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.45rem 0 0; padding: 0; }
.dropzone__files li {
  display: inline-flex; align-items: baseline; gap: 0.35rem; max-width: 100%; padding: 0.1rem 0.55rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere;
}
.dropzone__files li span { font-weight: 400; color: var(--muted); white-space: nowrap; }
.dropzone__message { margin: 0.4rem 0 0; max-width: none; font-size: 0.85rem; font-weight: 600; color: var(--warn); }
.dropzone__clear { margin-top: 0.5rem; }
.dropzone.is-filled .dropzone__area { align-items: flex-start; }
/* Mit Skript: Fläche anklickbar, Feld unsichtbar, aber erreichbar */
.dropzone.is-ready .dropzone__area { cursor: pointer; }
.dropzone.is-ready:not(.is-filled):not(.is-invalid) .dropzone__area:hover { border-color: var(--accent); }
.dropzone.is-ready .dropzone__input {
  position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0;
}
.dropzone.is-ready .dropzone__area:has(.dropzone__input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.dropzone.is-over .dropzone__area { border-style: solid; border-color: var(--accent); background: var(--accent-tint); }
.dropzone.is-filled .dropzone__area { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.dropzone.is-filled .dropzone__icon { color: var(--ok); }
.dropzone.is-invalid .dropzone__area { border-color: var(--danger); background: var(--danger-bg); }
.dropzone.is-invalid .dropzone__message { color: var(--danger); }
.dropzone.is-busy .dropzone__message { color: var(--info); }
.dropzone.is-busy .dropzone__area { cursor: progress; }
/* Niedrig */
.dropzone--compact .dropzone__area { gap: 0.4rem 0.75rem; padding: 0.55rem 0.75rem; }
.dropzone--compact .dropzone__icon { width: 2rem; height: 2rem; }
.dropzone--compact .dropzone__icon .icon { width: 1rem; height: 1rem; }
.dropzone--compact .dropzone__prompt { font-size: 0.92rem; }
@media (prefers-reduced-motion: reduce) { .dropzone__area { transition: none; } }

/* ---------- Farbe des Portals (seit 1.31.0, Verwaltung > Erscheinungsbild > Farbe) ---------- */
.theme-field { display: flex; align-items: center; gap: 0.75rem; margin: 0.25rem 0 0.5rem; }
.theme-field input[type="color"] { width: 3.25rem; height: 2.5rem; padding: 0.15rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.theme-field label { display: flex; flex-direction: column; }
.theme-field__hex { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; }
.theme-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.5rem; }
.theme-swatch { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); }
/* Automatische Farben voll zeigen (nicht blass): sie gelten so im Portal; seit 1.33.1 */
.theme-field input[type="color"]:disabled { opacity: 1; cursor: default; }
.theme-preview { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin: 0 0 1rem; background: var(--wash); }
.theme-preview__band { display: flex; gap: 1.25rem; padding: 0.55rem 1rem; background: var(--band); color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }
.theme-preview__band .is-current { color: #fff; box-shadow: inset 0 -3px 0 #fff; padding-bottom: 0.2rem; }
.theme-preview__body { padding: 0.9rem 1rem 0.4rem; }
.theme-preview__body .button-row { align-items: center; }
.theme-preview__body .button.theme-preview__hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.theme-preview__icon .icon { color: var(--accent); vertical-align: -0.15em; }
.theme-preview__item { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-md); background: var(--accent-tint); }
.theme-preview__item .icon { color: var(--accent); }
.theme-facts { margin-bottom: 0.75rem; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 64rem) {
  .facts--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card__body { flex-wrap: wrap; }
  .card__media { flex-basis: 11rem; }
  .card__main { flex-basis: 0; flex-grow: 1; min-width: 14rem; }
  .card__actions { flex: 1 1 100%; width: auto; flex-direction: row; flex-wrap: wrap; padding: 0.6rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .card__actions > .btn-mini, .card__actions > .form-inline, .card__actions > .form-inline > .btn-mini { width: auto; }
}
@media (max-width: 46rem) {
  .panel-grid { grid-template-columns: minmax(0, 1fr); }
  .card--split { grid-template-columns: minmax(0, 1fr); }
  .card__side { flex-direction: row; flex-wrap: wrap; border-left: 0; border-top: 1px solid var(--line); }
  .card__side > .btn-mini, .card__side > .form-inline, .card__side > .form-inline > .btn-mini { width: auto; }
  .card__bar-actions { margin-left: 0; }
}
@media (max-width: 40rem) {
  .panel, .form fieldset.panel { padding: 0.8rem 0.85rem 0.9rem; }
  /* Die immer sichtbare Leiste im alten Aufbau (ohne .savebar__main) steht auf dem Handy am Formularende */
  .savebar--sticky:not(:has(.savebar__main)) { position: static; }
  .savebar--sticky:not(:has(.savebar__main)) .savebar__status { margin-left: 0; width: 100%; }
  /* Seit 1.37.0: im neuen Aufbau bleibt sie unten stehen, kompakt (etwa 90 px) */
  .savebar--sticky:has(.savebar__main) { bottom: 0; margin-left: -0.25rem; margin-right: -0.25rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .savebar--sticky .savebar__inner:has(> .savebar__main) {
    flex-direction: column; align-items: stretch; gap: 0.35rem;
    padding: 0.45rem 0.65rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }
  .savebar__main { align-items: stretch; margin-left: 0; }
  .savebar--sticky .savebar__main .savebar__status { text-align: center; }
  /* gleich breit, auch bei verschiedenem Innenabstand; ohne Änderungen füllt „Speichern“ allein die Breite */
  .savebar__main .savebar__actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .js .savebar--sticky .savebar__more { display: none; }
  .js .savebar-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; }
  .savebar-more .savebar__lead { flex-basis: 100%; }
  .savebar-more .button { flex: 1 1 auto; }
  .card__head, .card__body, .card__bar { padding-left: 0.85rem; padding-right: 0.85rem; }
  /* Mehrere Badges auf dem Handy immer untereinander, rechtsbündig (seit 1.41.4, Hinweis von Hanno): so bleibt dem
     Titelblock die Breite, statt dass Titel und Zusatzzeile neben zwei Badges schmal umbrechen */
  .card__head > .card__badges { flex-direction: column; align-items: flex-end; }
  .card__media { flex: 1 1 100%; max-width: 16rem; }
  .card__main { min-width: 0; flex-basis: 100%; }
  .facts--two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  /* Kacheln als Zeilen: Symbol, Beschriftung, Wert */
  .facts--tiles { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-alt); }
  .facts--tiles > div { grid-template-columns: auto 6.6rem minmax(0, 1fr); grid-template-rows: auto; align-items: baseline; border: 0; border-radius: 0; background: transparent; padding: 0.45rem 0.6rem; }
  .facts--tiles > div > :not(.icon) { grid-column: auto; }
  .facts--tiles > div + div { border-top: 1px solid #e6ebee; }
  /* Symbol auf Höhe der ersten Zeile, auch bei mehrzeiligen Werten (seit 1.33.2; vorher mittig) */
  .facts--tiles .icon { grid-row: auto; align-self: start; margin-top: 0.2rem; }
  .facts--tiles dt { margin: 0; }
  .facts--tiles > div:not(:has(> .icon)) { grid-template-columns: 6.6rem minmax(0, 1fr); }
}
@media (max-width: 22rem) {
  /* Seit 1.49.0 (Hinweis des Predigtmanuskript-Chats): sehr schmal Beschriftung über dem Wert, damit Werte wie
     „Gottesdienst“ oder „Matthäus 13,44“ nicht mitten im Wort brechen */
  .facts--tiles > div { grid-template-columns: auto minmax(0, 1fr); }
  .facts--tiles > div > dt { grid-column: 2; margin: 0 0 0.1rem; }
  .facts--tiles > div > dd { grid-column: 2; }
  .facts--tiles .icon { grid-row: span 2; }
  .facts--tiles > div:not(:has(> .icon)) { grid-template-columns: minmax(0, 1fr); }
  .facts--tiles > div:not(:has(> .icon)) > :is(dt, dd) { grid-column: 1; }
}

/* ======================================================================================
   Korrekturen 1.21.1
   ====================================================================================== */

/* Kleine Knöpfe brechen nicht um; sonst rutscht das Symbol an den Rand und der Text steht
   als eigener Block daneben. Spalten mit kleinen Knöpfen wachsen dafür bei Bedarf mit. */
.btn-mini { white-space: nowrap; }
.card__actions { width: auto; min-width: 9rem; }
@media (min-width: 46.01rem) {
  /* Seitenspalte so breit wie ihr breitester Knopf, mindestens 12.5rem, höchstens 18rem;
     längere Texte darin brechen innerhalb dieser Breite um */
  .card--split { grid-template-columns: minmax(0, 1fr) auto; }
  .card--split > .card__side { min-width: 12.5rem; max-width: 18rem; }
  /* Texte in der Spalte bestimmen ihre Breite nicht mit, sie brechen in der Breite der Knöpfe um */
  .card--split > .card__side > :not(.btn-mini):not(.form-inline):not(.button) { width: 0; min-width: 100%; }
}

/* Kopfzeile auf Tablets: Der Name in der Kopfzeile kürzt sich bei Platzmangel, statt die
   Zeile über den Rand zu schieben; bis 48rem rollt die Menüzeile wie auf dem Handy. */
@media (min-width: 48.01rem) {
  .site-header__band .account { min-width: 0; flex-shrink: 1; }
  .site-header__band .account__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .site-header__band .account__abmelden { flex-shrink: 0; }
}
@media (max-width: 48rem) {
  .site-header__band .main-nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; gap: 0 1rem; }
  .site-header__band .account__name { display: none; }
  .site-header__band .menu { position: static; }
  .site-header__band .menu__panel { left: 0.75rem; right: 0.75rem; min-width: 0; }
}

/* ======================================================================================
   Bausteine 1.22.0
   ====================================================================================== */

/* ---------- Seitenkopf mit Seitenknöpfen: $ctx->pageButtons($aktionen) ----------
   <div class="page-head"><div><h1>…</h1><p class="meta">…</p></div>
     <div class="page-head__side">
       <p class="page-head__actions page-head__nav">helle kleine Knöpfe zu den anderen Seiten</p>
       <p class="page-head__buttons">Aktionen der Seite in normaler Größe</p></div></div>
   Die Seitenknöpfe stehen in einer Zeile und brechen nur um, wenn der Platz wirklich fehlt. */
.page-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; margin-left: auto; max-width: 100%; }
.page-head__side .page-head__actions { justify-content: flex-end; max-width: none; }
.page-head__buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; margin: 0; max-width: none; }
@media (max-width: 46rem) {
  .page-head__side { align-items: flex-start; margin-left: 0; }
  .page-head__side .page-head__actions, .page-head__buttons { justify-content: flex-start; }
}

/* ---------- Aufklappbarer Kasten ----------
   <details class="panel panel--collapsible"><summary class="panel__title">…</summary>…</details>
   Für Proben und andere Hilfen, die man nur bei Bedarf braucht; ohne JavaScript bedienbar. */
.panel--collapsible > summary { cursor: pointer; list-style: none; }
.panel--collapsible > summary::-webkit-details-marker { display: none; }
.panel--collapsible > summary::after {
  content: ""; width: 0.45em; height: 0.45em; margin-left: auto; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg); opacity: 0.6;
}
.panel--collapsible[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
.panel--collapsible:not([open]) > summary { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.panel--collapsible > summary:hover::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .panel--collapsible > summary::after { transition: transform 0.15s; }
}

/* ======================================================================================
   1.23.0: Übersicht, Menüs, Verwaltung
   ====================================================================================== */

/* ---------- Seitenkopf: Seitenknöpfe bleiben neben langem Erklärtext ----------
   Der Textblock schrumpft, statt die Knöpfe unter sich zu schieben; erst wenn er schmaler als
   22rem würde, rutschen die Knöpfe darunter (bisher eigene Regel in Beamer und Predigtplanung). */
.page-head > div:first-child { flex: 1 1 22rem; min-width: 0; }
.page-head > div:first-child > .meta { max-width: 68ch; }

/* ---------- Symbol in einem zart getönten Feld ---------- */
.tile-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md);
  background: var(--accent-tint); color: var(--accent);
}
.tile-icon .icon { width: 1.3rem; height: 1.3rem; }
.tile-icon--sm { width: 1.9rem; height: 1.9rem; }
.tile-icon--sm .icon { width: 1.05rem; height: 1.05rem; }

/* ---------- Übersicht ---------- */
.home-head h1 { margin-bottom: 0.2rem; }
.home-tools {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 1rem; margin: 0 0 2rem;
}
.home-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.home-card:hover { border-color: var(--accent-line-strong); box-shadow: 0 2px 4px rgba(31, 43, 51, 0.06), 0 6px 18px rgba(31, 43, 51, 0.08); }
.home-card__main {
  flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: 0.85rem; row-gap: 0.25rem; padding: 1.1rem 1.15rem 1rem;
  color: var(--ink); text-decoration: none;
}
.home-card__main > .tile-icon { grid-row: 1 / span 2; }
.home-card__title { align-self: center; font-size: 1.12rem; font-weight: 700; line-height: 1.25; color: var(--accent-strong); }
.home-card__main:hover .home-card__title { text-decoration: underline; text-underline-offset: 0.15em; }
.home-card__text { font-size: 0.9rem; line-height: 1.45; color: var(--muted); }
.home-card__links {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; max-width: none;
  padding: 0.6rem 1.15rem 0.7rem; border-top: 1px solid var(--line-soft); background: var(--surface-alt);
  font-size: 0.85rem;
}
.home-card__links a { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; color: var(--accent); white-space: nowrap; }
.home-card__links a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 0.15em; }
.home-card__links .icon { opacity: 0.75; }
.home-admin { margin: 0 0 2rem; padding-top: 1rem; border-top: 1px solid var(--line); max-width: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ---------- Menüs: eine Fläche mit Zeilen ---------- */
.menu__panel { white-space: normal; min-width: 19rem; padding: 0.35rem; border-radius: var(--radius-lg); }
/* Seit 1.61.1 (Hanno: am Rechner viel schmaler als auf dem Handy): breit so breit wie der längste Eintrag, höchstens 28rem
   und nie breiter als das Fenster; app.js rückt ein Menü nach links, das sonst rechts aus dem Bild ragte (--menu-dx). Auf
   schmalen Bildschirmen (bis 48rem) wie bisher über die ganze Breite. */
@media (min-width: 48.01rem) {
  .main-nav .menu__panel { width: max-content; max-width: min(28rem, calc(100vw - 1.5rem)); translate: var(--menu-dx, 0) 0; }
}
.main-nav .menu__panel a.menu__item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.45rem 0.6rem 0.45rem 0.45rem; border-radius: var(--radius-md);
  color: var(--ink); font-weight: 400; position: relative;
}
.main-nav .menu__panel a.menu__item:hover { background: var(--surface-alt); color: var(--ink); }
.main-nav .menu__panel a.menu__item[aria-current="page"] { background: var(--accent-tint); color: var(--ink); font-weight: 400; }
.main-nav .menu__panel a.menu__item[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 0.45rem; bottom: 0.45rem; width: 3px; border-radius: 2px; background: var(--accent);
}
.menu__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: var(--radius-md); background: var(--accent-tint-soft); color: var(--accent);
  border: 1px solid var(--line-soft);
}
.menu__item:hover .menu__icon, .menu__item[aria-current="page"] .menu__icon { background: var(--surface); border-color: var(--accent-line); }
.menu__icon .icon { width: 1.05rem; height: 1.05rem; }
.menu__text { display: flex; flex-direction: column; min-width: 0; }
.menu__label { font-weight: 600; line-height: 1.3; }
.menu__heading {
  margin: 0.55rem 0.6rem 0.2rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); max-width: none;
}
.menu__heading:first-child { margin-top: 0.3rem; }
/* Seit 1.23.1: Gruppe als zart hinterlegter Block, Überschrift innen – Anfang und Ende sind sichtbar */
.menu__block {
  /* Seit 1.23.3: Rand und Innenabstand nach außen ausgeglichen, damit Symbole und Texte im Block
     genau unter denen der einzelnen Zeilen stehen */
  margin: 0.3rem calc(-0.2rem - 1px); padding: 0.15rem 0.2rem 0.2rem;
  background: var(--surface-alt); border: 1px solid var(--line-soft); border-radius: var(--radius-md);
}
.menu__block:first-child { margin-top: 0; }
.menu__block:last-child { margin-bottom: 0; }
.menu__block > .menu__heading { margin: 0.4rem 0.45rem 0.15rem; padding-left: 1px; }
.main-nav .menu__panel .menu__block a.menu__item:hover { background: var(--surface); }
.menu__block .menu__icon { background: var(--surface); }
@media (max-width: 48rem) {
  .main-nav .menu__panel a.menu__item { padding-top: 0.55rem; padding-bottom: 0.55rem; }
}

/* ---------- Menüs als Karten (seit 1.34.0) ----------
   Die Fläche hat die Farbe der Seite; jeder einzelne Eintrag ist eine kleine Karte wie auf der
   Übersicht, mehrere zusammengehörige Einträge stehen gemeinsam in einer Karte mit Überschrift. */
.menu__panel { display: grid; gap: 0.45rem; padding: 0.5rem; background: var(--wash); }
.menu__block {
  margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.menu__block { transition: border-color 0.15s, box-shadow 0.15s; }
.main-nav .menu__panel .menu__block a.menu__item { transition: background 0.15s; }
/* Darüberfahren einheitlich (seit 1.34.1, seit 1.34.2 auch einzelne Einträge in einer Karte): die
   Zeile wird leicht grau, die Karte darum färbt ihren Rahmen ein */
.main-nav .menu__panel .menu__block a.menu__item:hover,
.main-nav .menu__panel .menu__block a.menu__item:focus-visible { background: var(--surface-alt); }
.menu__block:has(a.menu__item:hover),
.menu__block:has(a.menu__item:focus-visible) {
  border-color: var(--accent-line-strong);
  box-shadow: 0 2px 4px rgba(31, 43, 51, 0.06), 0 6px 18px rgba(31, 43, 51, 0.08);
}
.menu__block { padding: 0.2rem 0.3rem 0.3rem; }
.menu__block--single { padding: 0.3rem; }
.menu__block > .menu__heading { margin: 0.45rem 0.5rem 0.2rem; padding-left: 0; }
.main-nav .menu__panel .menu__block a.menu__item { padding: 0.4rem 0.5rem 0.4rem 0.3rem; }
.main-nav .menu__panel .menu__block a.menu__item[aria-current="page"] { background: var(--accent-tint); }
.menu__icon, .menu__block .menu__icon { background: var(--accent-tint); border-color: transparent; }
.menu__item:hover .menu__icon, .menu__item[aria-current="page"] .menu__icon { background: var(--accent-tint); border-color: transparent; }
.menu__label { color: var(--accent-strong); }
@media (prefers-reduced-motion: reduce) { .main-nav .menu__panel a.menu__item, .menu__block { transition: none; } }

/* ---------- Verwaltung: Startseite ---------- */
.admin-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 1rem; margin-bottom: 2rem; }
.admin-hub__card {
  display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: 1.1rem 1.15rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.admin-hub__title { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 1.12rem; }
.admin-hub__text { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.admin-hub__status { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.admin-hub__links { list-style: none; margin: auto 0 0; padding: 0.6rem 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 0.15rem; }
.admin-hub__links a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0; text-decoration: none; font-weight: 600; }
.admin-hub__links a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.admin-hub__links .icon { color: var(--accent); opacity: 0.75; }

/* ---------- Verwaltung: Plugins und Versionen, Protokoll ---------- */
.card__head > .tile-icon { margin-right: 0.1rem; }
.card--attention { border-color: rgba(133, 86, 10, 0.45); }
.card .notice { margin: 0.75rem 0 0; }
.plain-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.3rem; }
.log-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin: 0 0 1rem; }
.log-filter label { display: flex; flex-direction: column; min-width: 12rem; }
.log-filter .input { max-width: 22rem; }
.log-filter__knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pager { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 2rem; }
@media (prefers-reduced-motion: reduce) { .home-card { transition: none; } }

/* Symbolwahl in „Menü und Bezeichnungen“ (seit 1.23.0) */
.icon-wahl { border: 0; padding: 0; margin: 0; min-width: 0; }
.icon-wahl__raster { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.icon-wahl__option { position: relative; cursor: pointer; }
.icon-wahl__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.icon-wahl__bild {
  display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--muted);
}
.icon-wahl__bild .icon { width: 1.2rem; height: 1.2rem; }
.icon-wahl__option:hover .icon-wahl__bild { border-color: var(--accent); color: var(--accent); }
.icon-wahl__option input:checked + .icon-wahl__bild { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.icon-wahl__option input:focus-visible + .icon-wahl__bild { outline: 3px solid var(--accent); outline-offset: 2px; }
.plugin-liste__kopf > .tile-icon { margin-right: -0.2rem; }

/* Seit 1.23.3: Kachel ohne eigene Startseite – der Kopf ist kein Link, die Einträge stehen darunter */
div.home-card__main { cursor: default; }
div.home-card__main .home-card__title { color: var(--ink); }
div.home-card__main:hover .home-card__title { text-decoration: none; }

/* ======================================================================================
   1.24.0: Personen und Rechte, Datenbank-Updates
   ====================================================================================== */
.people { list-style: none; margin: 0; padding: 0; }
.person { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0; border-top: 1px solid var(--line-soft); }
.person:first-child { border-top: 0; padding-top: 0.2rem; }
.person__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-strong); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
}
.person__main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.6rem; }
.person__name { font-weight: 700; text-decoration: none; }
.person__name:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.person__badges { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.person__meta { flex-basis: 100%; color: var(--muted); font-size: 0.82rem; }
.person__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
/* Gesperrte Häkchen: angekreuzt, aber ausgegraut */
.check--locked { color: var(--muted); cursor: default; }
.check--locked input { cursor: default; }
@media (max-width: 40rem) {
  .person { align-items: flex-start; }
  .person__actions { flex-basis: 100%; justify-content: flex-start; padding-left: 3.25rem; }
  .person { flex-wrap: wrap; }
}

/* Datenbank-Updates auf „Plugins und Versionen“ (seit 1.24.0) */
.db-updates { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line-soft); }
.db-updates__list { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.db-updates__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.db-updates__row code { font-size: 0.85rem; }
.db-updates__actions { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; margin-left: auto; }
.db-updates__all { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin: 0.6rem 0 0; max-width: none; }

/* Rechte einer Person (seit 1.25.0): Hinweise unter dem Recht statt Badge, brechen normal um */
.check--recht { align-items: flex-start; margin: 0.4rem 0; }
.check--recht input { margin-top: 0.3rem; }
.check--recht .hint { margin-top: 0.1rem; }
.hint--via { color: var(--ok); display: flex; align-items: baseline; gap: 0.3rem; }
.hint--via .icon { align-self: center; }

/* Kästen im Spaltensatz (seit 1.25.1): Sie laufen links von oben nach unten und setzen dann
   rechts fort, ohne die Lücken eines Rasters mit Zeilen. Spalten mindestens 22rem breit, also
   auf schmalen Bildschirmen eine Spalte. Die Reihenfolge liest sich senkrecht. */
.panel-columns { columns: 2 22rem; column-gap: 1.25rem; }
.panel-columns > .panel, .form .panel-columns > fieldset.panel {
  display: block; break-inside: avoid; page-break-inside: avoid; width: 100%; margin: 0 0 1.25rem;
}

/* Rechte im Kasten nebeneinander (seit 1.26.0): Zeile für Zeile, Spalten ab 19rem */
.rights { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 0 1.5rem; }
.rights .check--recht { margin: 0.35rem 0; }

/* ======================================================================================
   Seit 1.47.0: automatisch speichern (form[data-autosave], app.js) – leiser Stand statt Speicherleiste; die Leiste und
   Knöpfe mit [data-autosave-hide] braucht es nur ohne JavaScript. Fenster beim Verlassen, wenn das Speichern scheitert.
   ====================================================================================== */
.js form[data-autosave].is-autosave [data-savebar],
.js form[data-autosave].is-autosave [data-autosave-hide] { display: none; }
.autosave-status { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.autosave-status--error { color: var(--danger); }
.autosave-dialog { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.25rem 1rem; max-width: min(30rem, calc(100vw - 2rem)); box-shadow: var(--shadow-card); background: var(--surface); color: var(--ink); }
.autosave-dialog::backdrop { background: rgba(31, 43, 51, 0.35); }
.autosave-dialog__title { font-weight: 700; margin: 0 0 0.5rem; }
.autosave-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
@media (max-width: 40rem) { .autosave-dialog__actions > * { flex: 1 1 100%; } }

/* Seit 1.47.0: Hinweise zur Anmeldung (app.js): kurz vor der Abmeldung, abgemeldet, wieder angemeldet */
.session-bar {
  position: fixed; top: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 80;
  width: max-content; max-width: min(40rem, calc(100vw - 1.5rem));
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding: 0.75rem 1rem; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius-md); box-shadow: var(--shadow-card), 0 6px 24px rgba(31, 43, 51, 0.12);
}
.session-bar--error { border-left-color: var(--danger); }
.session-bar--ok { border-left-color: var(--ok); }
.session-bar__text { flex: 1 1 16rem; margin: 0; max-width: none; }

/* ======================================================================================
   Seit 1.48.0: Lesemodus zum Blättern (Portal\Reader, $ctx->reader(), app.js). Ohne JavaScript stehen die Seiten
   untereinander; mit JavaScript (Klasse is-active) füllt der Lesemodus das Fenster unter der Kopfzeile, eine Seite je
   Ansicht, ganz eingepasst. Vorbild „Lesen“ im Predigtmanuskript.
   ====================================================================================== */
.reader { margin: 0 0 1.5rem; }
.reader__stage { position: relative; }
/* Seit 1.55.0 (Hinweis des Noten-Chats): keine graue Tipp-Markierung von Safari beim Blättern auf iPad und iPhone */
.reader__stage, .reader__stage button { -webkit-tap-highlight-color: transparent; }
.reader__page { overflow-x: auto; }
.reader__page + .reader__page { margin-top: 1rem; }
.reader__sheet { position: relative; max-width: 100%; }
.reader--sheets .reader__sheet { background: var(--surface); box-shadow: var(--shadow-card), 0 2px 18px rgba(31, 43, 51, 0.10); }
.reader__image { display: block; max-width: 100%; height: auto; }
.reader__count:empty, .reader__arrow, .reader__nav[hidden] { display: none; }

/* Mit JavaScript: fest unter der Kopfzeile, die Seite rollt nicht; bei wenig Höhe (Handy quer) auch über der Kopfzeile */
html.has-reader, html.has-reader body { overflow: hidden; overscroll-behavior: none; }
/* Seit 1.59.0 (Auftrag des Predigtmanuskript-Chats, iPad): auch WebKit rollt die Seite unter dem Lesemodus nicht; Bereiche
   in der Fläche (etwa der Ablauf der Noten) rollen weiter für sich */
html.has-reader body { position: fixed; inset: 0; width: 100%; }
html.has-reader .actionbar { display: none; }
.reader.is-active {
  position: fixed; top: var(--reader-top, 0px); left: 0; right: 0; bottom: 0; z-index: 40; margin: 0;
  display: flex; flex-direction: column; background: var(--wash);
}
/* Seit 1.59.0: Höhe nach dem wirklich sichtbaren Bereich (visualViewport), nicht bis zum unteren Rand des Fensters – WebKit
   meldet beim Öffnen manchmal die Höhe ohne abgezogene Browserleisten, dann ragte die Seite unten heraus */
html.has-reader-h .reader.is-active { bottom: auto; height: var(--reader-h); }
.reader.is-active.is-full { z-index: 60; }
.reader.is-active .reader__stage {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  cursor: default;
}
.reader.is-active .reader__page { position: absolute; inset: 0; overflow: hidden; margin: 0; }
.reader.is-active .reader__page[hidden] { display: none; }
.reader.is-active .reader__sheet {
  position: absolute; left: 50%; top: 0.5rem; max-width: none;
  transform-origin: top center; transform: translateX(-50%) scale(var(--reader-scale, 1));
}
.reader.is-active .reader__image { max-width: none; width: 100%; height: 100%; }
/* Links und Knöpfe in einer Seite bleiben bedienbar und blättern nicht */
.reader.is-active .reader__page :is(a, button, input, select, textarea, label, summary) { -webkit-user-select: auto; user-select: auto; }

/* „‹ Zurück“ / „Weiter ›“ nur für Tastatur und Vorlesesoftware: sichtbar, sobald sie den Fokus haben */
.reader__nav {
  position: absolute; bottom: 0.75rem; z-index: 3;
  padding: 0.5rem 0.9rem; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--surface); color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
}
.reader__nav--prev { left: 0.75rem; }
.reader__nav--next { right: 0.75rem; }
.reader__nav:not(:focus):not(:focus-visible) {
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Pfeil beim Darüberfahren und Hinweis auf die Klickflächen beim Öffnen */
.reader.is-active .reader__arrow { display: block; position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; pointer-events: none; }
.reader__stage[data-side] .reader__arrow::after {
  content: ""; position: absolute; top: 50%; width: 1.4rem; height: 1.4rem; margin-top: -0.7rem;
  border: solid var(--accent); border-width: 0 0 4px 4px; border-radius: 2px;
}
.reader__stage[data-side="prev"] .reader__arrow { left: 0; }
.reader__stage[data-side="prev"] .reader__arrow::after { left: 1.5rem; transform: rotate(45deg); }
.reader__stage[data-side="next"] .reader__arrow { right: 0; }
.reader__stage[data-side="next"] .reader__arrow::after { right: 1.5rem; transform: rotate(-135deg); }
.reader__stage.is-hint .reader__arrow { background: var(--accent-tint); }

/* Seit 1.60.0 keine Zeile oben im Lesemodus mehr (1.49.0 bis 1.59.1 .reader__bar) */

/* Seit 1.58.0: schwebende Knöpfe oben rechts über der Seite (Reader::floatRow(); Auftrag des Predigtmanuskript-Chats, Maße und
   Verhalten aus den Noten 0.10.12). Einzelne Knöpfe, die Lücken dazwischen lassen Tipps durch (blättern). Halb durchsichtig,
   der gerade offene, gedrückte, angetippte oder mit der Tastatur gewählte deckend. „Schließen“ des Kerns ersetzt das „X“ oben
   links (1.54.7 bis 1.57.0): oben links bleibt frei für Text, Zurückblättern und das „X“ von Safari im Vollbild. */
.reader__float { display: none; }
/* Seit 1.60.2 (Hinweis des Predigtmanuskript-Chats): ohne JavaScript bleibt die Bedienung über Links – Knöpfe mit href
   (etwa „Schließen“) stehen oben rechts über den untereinander stehenden Seiten, deckend und beschriftet; Knöpfe, die
   JavaScript brauchen, fehlen */
html:not(.js) .reader__float:has(> a) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin: 0 0 1rem; }
html:not(.js) .reader__float > button { display: none; }
html:not(.js) .reader__float .reader__fbtn { opacity: 1; }
.reader.is-active .reader__float:not([hidden]) {
  position: absolute; top: calc(0.75rem + env(safe-area-inset-top, 0px)); right: calc(0.75rem + env(safe-area-inset-right, 0px));
  z-index: 31; display: flex; gap: 0.5rem; pointer-events: none;
}
.reader__float > * { pointer-events: auto; }
.reader__fbtn[hidden], html:not(.is-fullscreen) .reader__fbtn[data-float-when="fullscreen"] { display: none; }
/* Seit 1.61.2 (Hanno): Farben wie die Anzeige „Seite 2 von 5“ unten – weiße Schrift auf halbdurchsichtigem Grau. Beim
   Erscheinen deckend, erst nach drei Sekunden (mit dem Einklappen zu Symbolen, .is-ruhig) halb durchsichtig – auch auf dem
   Handy, wo es von Anfang an nur Symbole gibt. Offen oder gedrückt in der Akzentfarbe. */
.reader__fbtn { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; height: 2.4rem;
  gap: 0.4rem; padding: 0 0.9rem; border: 1px solid transparent; border-radius: 999px; background: rgba(31, 43, 51, 0.72);
  color: #fff; font: inherit; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: 1; transition: opacity 0.3s ease, background-color 0.2s ease, padding 0.45s ease, gap 0.45s ease; }
.reader__float.is-ruhig .reader__fbtn { opacity: 0.55; }
.reader__fbtn:hover, .reader__fbtn:focus-visible, .reader__fbtn:active,
.reader__float.is-ruhig .reader__fbtn:is(:hover, :focus-visible, :active, [aria-expanded="true"], [aria-pressed="true"]) {
  opacity: 1; background: rgba(31, 43, 51, 0.88); color: #fff; outline: none; }
.reader__fbtn:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.reader__fbtn[aria-expanded="true"], .reader__fbtn[aria-pressed="true"],
.reader__float.is-ruhig .reader__fbtn:is([aria-expanded="true"], [aria-pressed="true"]) { background: var(--accent); }
.reader__fbtn[disabled], .reader__float.is-ruhig .reader__fbtn[disabled] { cursor: default; opacity: 0.3; background: rgba(31, 43, 51, 0.72); }
.reader__fbtn-text { display: inline-block; max-width: 12rem; overflow: hidden; white-space: nowrap;
  transition: max-width 0.45s ease, opacity 0.3s ease; }
/* Nur Symbole: runde Knöpfe, 2,4rem */
.reader__float.is-eng .reader__fbtn { gap: 0; padding: 0 calc(0.7rem - 1px); }
.reader__float.is-eng .reader__fbtn-text { max-width: 0; opacity: 0; }
.reader__float.ohne-uebergang .reader__fbtn, .reader__float.ohne-uebergang .reader__fbtn-text { transition: none; }
@media (prefers-reduced-motion: reduce) { .reader__fbtn, .reader__fbtn-text { transition: none; } }
/* Punkt auf der Ecke (portalLeser.knopf(name, {punkt: 'warn'})), verschiebt nichts */
.reader__fbtn-punkt { position: absolute; top: -0.2rem; right: -0.2rem; width: 0.75rem; height: 0.75rem; box-sizing: border-box;
  border: 2px solid #fff; border-radius: 50%; background: var(--accent); }
.reader__fbtn-punkt[hidden] { display: none; }
.reader__fbtn-punkt--warn { background: var(--warn); }
.reader__fbtn-punkt--danger { background: var(--danger); }

/* „Seite 2 von 5“ kurz unten mittig */
.reader.is-active .reader__count {
  display: block; position: absolute; left: 50%; bottom: 0.75rem; z-index: 3; transform: translateX(-50%);
  margin: 0; padding: 0.3rem 0.75rem; border-radius: 999px; max-width: none; white-space: nowrap;
  background: rgba(31, 43, 51, 0.72); color: #fff; font-size: 0.85rem; pointer-events: none;
  opacity: 0; transition: opacity 0.4s ease;
}
.reader.is-active .reader__count.is-visible { opacity: 1; transition: opacity 0.1s ease; }

/* Meldungen des Kerns schweben über dem Lesemodus und verschwinden nach einigen Sekunden */
html.has-reader main.page > .notice {
  position: fixed; z-index: 45; left: 50%; top: calc(var(--reader-top, 0px) + var(--reader-bar-h, 0px) + 0.5rem);
  transform: translateX(-50%); width: max-content; max-width: min(40rem, calc(100vw - 1.5rem)); margin: 0;
  box-shadow: var(--shadow-card), 0 6px 24px rgba(31, 43, 51, 0.12); transition: opacity 0.4s ease;
}
html.has-reader main.page > .notice.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .reader.is-active .reader__count, html.has-reader main.page > .notice { transition: none; }
}

/* ======================================================================================
   Umschalter der Modi (seit 1.50.0); seit 1.60.0 nur noch in der Leiste unten – die Zeile oben (1.49.0 bis 1.59.1,
   .topbar) entfällt (Hanno: „Nach dem Umzug wird die Action-Bar oben nicht mehr gebraucht“).
   ====================================================================================== */
/* Umschalter der Modi: breit eine zusammenhängende Gruppe, der aktive Modus gefüllt; auf dem Handy ein Aufklappmenü */
.modeswitch { display: flex; min-width: 0; }
.modeswitch__row { display: inline-flex; border: 1px solid var(--accent); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.modeswitch__item {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 0.85rem; color: var(--accent); text-decoration: none;
  white-space: nowrap; background: transparent;
}
.modeswitch__item + .modeswitch__item { border-left: 1px solid var(--accent-line-strong); }
.modeswitch__item:hover { background: var(--accent-tint); color: var(--accent-strong); }
.modeswitch__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.modeswitch__item[aria-current] { background: var(--accent); color: #fff; }
.modeswitch__menu { display: none; }
.modeswitch__button { gap: 0.4rem; }
.modeswitch__current { display: inline-grid; }
.modeswitch__label { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.35rem; visibility: hidden; }
.modeswitch__label.is-current { visibility: visible; }
.menu-chevron { width: 1rem; height: 1rem; margin-left: -0.1rem; }
.modeswitch__tick { margin-left: auto; line-height: 0; visibility: hidden; color: var(--accent); }
.modeswitch__option[aria-current] .modeswitch__tick { visibility: visible; }
.modeswitch__option[aria-current] { font-weight: 600; }
@media (max-width: 40rem) {
  .modeswitch__row { display: none; }
  .modeswitch__menu { display: block; }
}
@media (max-width: 40rem) {
  .modeswitch__current .icon { display: none; }
}

/* Seit 1.60.0: Modi in der Leiste unten (die Zeile oben entfällt) – Gruppe so hoch wie die Knöpfe daneben, auf dem Handy
   wie bisher oben: Pfeil an den Aufklappmenüs bleibt, Symbol des Modus entfällt */
.actionbar__page > .modeswitch { align-self: stretch; }
.actionbar .modeswitch__row { align-items: stretch; }
.actionbar .modeswitch__item { font-weight: 600; }
@media (max-width: 40rem) {
  .actionbar__page .menu-chevron { display: inline-block !important; width: 0.85rem; height: 0.85rem; margin-left: 0; }
  .actionbar .toolmenu__button, .actionbar .modeswitch__button { gap: 0.2rem; }
  /* wie bisher die Zeile oben auf dem Handy: knapper gesetzt, damit Modi, „Werkzeuge“ und „Schließen“ in eine Zeile passen */
  .actionbar__page[data-modes-bar] { gap: 0.3rem; }
  .actionbar__page[data-modes-bar] .button { font-size: 0.9rem; padding-left: 0.45rem; padding-right: 0.45rem; }
  .actionbar__inner:has(> .savestate):has(> .actionbar__page[data-modes-bar]) { padding-right: 2.6rem; }
  /* bricht die Zeile um, füllen die Aufklappknöpfe ihre Spalte (keine Lücke zwischen Modi und „Werkzeuge“) */
  .actionbar__page[data-modes-bar] > .modeswitch > .modeswitch__menu, .actionbar__page[data-modes-bar] > .toolmenu { display: flex; }
  .actionbar__page[data-modes-bar] > .modeswitch > .modeswitch__menu { flex: 1 1 auto; }
  .actionbar__page[data-modes-bar] .modeswitch__button, .actionbar__page[data-modes-bar] > .toolmenu > .toolmenu__button { flex: 1 1 auto; justify-content: center; }
}

/* Menü „Werkzeuge“ */
.toolmenu { position: relative; }
.toolmenu > summary { list-style: none; cursor: pointer; }
.toolmenu > summary::-webkit-details-marker { display: none; }
.toolmenu__button { display: inline-flex; align-items: center; gap: 0.35rem; }
.toolmenu[open] > .toolmenu__button { background: var(--accent-tint); }
.toolmenu__button.is-hint { box-shadow: 0 0 0 3px var(--accent-line-strong); background: var(--accent-tint); }
.toolmenu__panel {
  position: absolute; top: calc(100% + 0.35rem); left: 0; z-index: 70; min-width: 15rem; max-width: calc(100vw - 1rem);
  display: flex; flex-direction: column; padding: 0.35rem; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card), 0 8px 24px rgba(31, 43, 51, 0.14);
}
.toolmenu__item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.6rem; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.toolmenu__item[hidden] { display: none; }
.toolmenu__item:hover, .toolmenu__item:focus-visible { background: var(--surface-alt); color: var(--accent-strong); outline: none; }
.toolmenu__item .icon, .toolmenu__space { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; color: var(--accent); }
.toolmenu__label { flex: 1 1 auto; }
.toolmenu__keys { flex: 0 0 auto; margin-left: 1rem; font: inherit; font-size: 0.78rem; color: var(--muted); }
.actionbar .toolmenu__panel { top: auto; bottom: calc(100% + 0.35rem); left: auto; right: 0; }
/* Seit 1.60.1 (Hanno): in der Leiste unten öffnen die Menüs nach oben, also zeigen auch die Pfeile nach oben */
.actionbar .menu-chevron { transform: rotate(180deg); }
/* Seit 1.60.0: die Modi stehen links – ihr Menü öffnet nach oben, am linken Rand des Knopfs ausgerichtet */
.actionbar .modeswitch__menu .toolmenu__panel { left: 0; right: auto; }
/* Auf dem Handy öffnen die Menüs der Leiste über ihrer ganzen Breite (sie stehen dort mal links, mal mittig, mal rechts) */
@media (max-width: 40rem) {
  .js .actionbar .toolmenu, .js .actionbar__inner { position: static; }
  .js .actionbar .toolmenu__panel, .js .actionbar .modeswitch__menu .toolmenu__panel { left: 0.5rem; right: 0.5rem; min-width: 0; max-width: none; }
}

/* Speicherstand als Symbol (automatisch speichern): Haken, Punkt, Sanduhr, Warnzeichen; Text im Tooltip und nach Antippen */
.savestate { position: relative; display: inline-flex; align-items: center; padding-left: 0.6rem; margin-left: 0.1rem; border-left: 1px solid var(--line); }
.savestate[hidden] { display: none; }
.savestate__button {
  display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0;
  border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
}
.savestate__button:hover, .savestate__button:focus-visible { border-color: var(--line); background: var(--surface-alt); outline: none; }
.savestate__icon { display: none; line-height: 0; }
.savestate__icon .icon { width: 1.25rem; height: 1.25rem; }
.savestate[data-state="saved"] .savestate__icon--saved { display: inline; color: var(--ok); }
.savestate[data-state="pending"] .savestate__icon--pending { display: inline; color: var(--muted); }
.savestate[data-state="saving"] .savestate__icon--saving { display: inline; color: var(--muted); }
.savestate[data-state="error"] .savestate__icon--error { display: inline; color: var(--danger); }
.savestate__icon--pending .icon { width: 0.8rem; height: 0.8rem; }
.savestate__pop {
  display: none; position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 70; width: max-content; max-width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.5rem 0.7rem; background: var(--surface); color: var(--ink); font-size: 0.85rem; line-height: 1.35;
  border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card), 0 6px 20px rgba(31, 43, 51, 0.12);
}
.savestate.is-open .savestate__pop, .savestate[data-state="error"] .savestate__pop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.savestate[data-state="error"] .savestate__pop { border-left: 4px solid var(--danger); }
.savestate__text { flex: 1 1 12rem; }
.actionbar .savestate { align-self: stretch; } /* seit 1.51.3 Spalte über die volle Höhe der Knöpfe, wie oben */
/* Seit 1.51.2 (Hanno: oben und unten gleich): Abstand zwischen letztem Knopf und Trennlinie wie in der Zeile oben (0,6rem),
   unabhängig vom größeren Abstand zwischen den Gruppen der Leiste unten */
.actionbar__inner { --ab-gap: 1.5rem; }
.actionbar--saving .actionbar__inner { --ab-gap: 1rem; }
.actionbar__inner > .savestate { margin-left: calc(0.6rem - var(--ab-gap)); }
.actionbar .savestate__pop { top: auto; bottom: calc(100% + 0.4rem); }
html.has-savestate [data-autosave-status] { display: none; }
@media (max-width: 40rem) {
  .actionbar__inner:has(> .savestate) { position: relative; padding-right: 3rem; }
  .actionbar__inner > .savestate { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); border-left: 0; padding-left: 0; }
}

/* Seit 1.51.0: offene Datenbank-Updates (Hinweis für Verwalter auf jeder Seite, „Alle offenen einspielen“) */
.db-hinweis, .db-offen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.db-hinweis p, .db-offen p { margin: 0; flex: 1 1 18rem; max-width: none; }
.db-hinweis .button, .db-offen .button { margin: 0; }

/* ======================================================================================
   Seit 1.51.0 (Auftrag des Wochenblatt-Chats, Hanno: „Bitte immer schön einheitlich.“): Die Leisten unten sehen aus wie
   die Zeile oben, nur am unteren Rand – ein Band über die volle Breite, bündig am Rand, Trennlinie oben statt Rahmen und
   runder Ecken, Inhalt auf 64rem zentriert, Knöpfe 2,5rem hoch in derselben Schrift, „Schließen“ rechts, der
   Speicherstand ganz rechts. Gilt für die Leiste unten (actionBar()), die stehende Speicherleiste (.savebar--sticky, mit
   und ohne Seiten-Aktionen) und die aufspringende Leiste (.savebar). Auf dem Handy randlos wie bisher.
   ====================================================================================== */
.js .actionbar,
.js .savebar--with-page,
.js .savebar--sticky:has(.savebar__main) {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; top: auto; transform: none; width: auto; margin: 0;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface);
  box-shadow: 0 -2px 6px rgba(31, 43, 51, 0.06);
}
.savebar { border-top: 1px solid var(--line); box-shadow: 0 -2px 6px rgba(31, 43, 51, 0.06); }
.js .actionbar.actionbar--saving,
.js .savebar--sticky.savebar--changed:has(.savebar__main),
.savebar.savebar--changed:not(.savebar--sticky) { border-top-color: var(--changed-soft); }
.js .actionbar .actionbar__inner,
.js .savebar--sticky:has(.savebar__main) .savebar__inner,
.savebar:not(.savebar--sticky) .savebar__inner {
  max-width: 64rem; margin: 0 auto; box-sizing: border-box;
  padding: 0.5rem 1.25rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
}
/* gleiche Höhe und Schrift wie in der Zeile oben */
.actionbar .button, .savebar .button {
  box-sizing: border-box; height: 2.5rem; padding-top: 0; padding-bottom: 0; font-size: 0.95rem; line-height: 1;
}
.actionbar .savestate__button { width: 2.5rem; height: 2.5rem; }
/* „Schließen“ rechts, wie oben (der Speicherstand steht dahinter ganz rechts); auch mit Überschrift „Speichern und …“ und
   in der stehenden Speicherleiste (dort vor Stand und „Speichern“) */
@media (min-width: 40.01rem) {
  .actionbar__page > [data-close], .actionbar__page[data-lead] > [data-close],
  .savebar__page > [data-close], .savebar__page[data-lead] > [data-close] { margin-left: auto; }
  .savebar--with-page .savebar__page:has(> [data-close]) { flex: 1 1 auto; }
}
/* Platz unten für die fest stehende Speicherleiste ohne Seiten-Aktionen (app.js misst ihre Höhe als --bar-h) */
.js body:has(.savebar--sticky .savebar__main) { padding-bottom: calc(var(--bar-h, 6rem) + 1.5rem); }
.js:has(.savebar--sticky .savebar__main) { scroll-padding-bottom: calc(var(--bar-h, 6rem) + 1rem); }
.js body:has(form.is-autosave .savebar--sticky) { padding-bottom: 5rem; }
@media (max-width: 40rem) {
  .js .actionbar .actionbar__inner,
  .js .savebar--sticky:has(.savebar__main) .savebar__inner,
  .savebar:not(.savebar--sticky) .savebar__inner { padding: 0.45rem 0.65rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
  .js .savebar--sticky:has(.savebar__main) { margin: 0; }
  /* Seit 1.51.1 (Hanno): Speicherstand als schmales Symbol rechts neben den Knöpfen, auch bei zwei Zeilen – das Band aus
     1.51.0 hatte den Platz rechts überschrieben, der Stand lag hinter den Knöpfen */
  /* seit 1.51.2 wie in der Zeile oben: Trennlinie, gleiche Abstände, 9 px zum Rand */
  .js .actionbar .actionbar__inner:has(> .savestate) { padding-right: 3.26rem; }
  .js .actionbar .actionbar__inner > .savestate {
    right: 0.55rem; top: 0.45rem; bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); transform: none;
    margin-left: 0; padding-left: 0.35rem; border-left: 1px solid var(--line);
  }
  .actionbar .savestate__button { width: 1.9rem; }
}

/* ======================================================================================
   Aufklappbare Erklärungen und Bereiche (seit 1.52.0, Auftrag des Wochenblatt-Chats; Hanno: Erklärtexte immer
   zugeklappt und in kleinerer Schrift, überall gleich; Vorbild Wochenblatt „Auszeichnung im Text“)
     <details class="explain"><summary>So wirkt die Schriftgröße</summary><p>…</p></details>
       Erklärung: Überschrift als kleine Zeile in Akzentfarbe mit Pfeil, Inhalt 0,9rem (Absätze, Listen)
     <details class="expand"><summary>Neue Links erzeugen</summary> Felder, Knöpfe … </details>
       Bereich mit Aktionen: dieselbe Überschrift, Inhalt in normaler Größe (auch .form-more sieht so aus)
   Ohne JavaScript bedienbar. Abstände: davor und danach 1rem wie zwischen anderen Teilen eines Kastens, mehrere
   untereinander bilden eine Gruppe (0,4rem dazwischen), am Anfang und Ende eines Kastens kein zusätzlicher Abstand.
   ====================================================================================== */
.explain, .expand, .form-more { margin: 1rem 0; }
:is(.explain, .expand, .form-more):has(+ :is(.explain, .expand, .form-more)) { margin-bottom: 0; }
:is(.explain, .expand, .form-more) + :is(.explain, .expand, .form-more) { margin-top: 0.4rem; }
:is(.explain, .expand, .form-more):first-child { margin-top: 0; }
:is(.explain, .expand, .form-more):last-child { margin-bottom: 0; }
:is(.explain, .expand, .form-more) > summary {
  display: inline-flex; align-items: baseline; gap: 0.45em; margin: 0; padding: 0.1rem 0;
  cursor: pointer; list-style: none; color: var(--accent); font-weight: 600; font-size: 0.9rem; line-height: 1.35;
}
:is(.explain, .expand, .form-more) > summary::-webkit-details-marker { display: none; }
:is(.explain, .expand, .form-more) > summary::after {
  content: ""; flex-shrink: 0; width: 0.42em; height: 0.42em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-0.2em) rotate(45deg); opacity: 0.7;
}
:is(.explain, .expand, .form-more)[open] > summary::after { transform: translateY(0.05em) rotate(-135deg); }
:is(.explain, .expand, .form-more) > summary:hover { text-decoration: underline; text-underline-offset: 0.15em; }
:is(.explain, .expand, .form-more) > summary:hover::after { opacity: 1; }
:is(.explain, .expand, .form-more) > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  :is(.explain, .expand, .form-more) > summary::after { transition: transform 0.15s; }
}
/* Erklärung: Inhalt klein und eng */
.explain > :not(summary) { font-size: 0.9rem; }
.explain > p, .explain > ul, .explain > ol { margin: 0.35rem 0 0.5rem; max-width: 60rem; }
.explain > ul, .explain > ol { padding-left: 1.2rem; }
.explain li + li { margin-top: 0.15rem; }
.explain > :last-child { margin-bottom: 0; }
/* Bereich mit Aktionen: Inhalt normal groß, etwas Luft unter der Überschrift */
.expand[open] > summary, .form-more[open] > summary { margin-bottom: 0.6rem; }

/* Kirchenjahr in der Verwaltung (seit 1.53.0): nächste Sonn- und Feiertage, je Tag Wortlaut und Bibelstelle */
.kj-tage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: 0.2rem 1.5rem; }
.kj-tage__datum { display: inline-block; min-width: 7.2rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.kj-tage .pill { margin-left: 0.3rem; }
/* Seit 1.56.0: Verwaltung → Gottesdienste */
.gd-naechste__titel { margin: 1rem 0 0.4rem; }
.gd-hinweis { margin: 0 0 1rem; }
.gd-hinweis .button-row { margin-top: 0.6rem; }
.kj-spruch { padding: 0.6rem 0 0.2rem; border-top: 1px dashed var(--line); scroll-margin-top: 6rem; }
.kj-spruch:first-of-type { border-top: 0; padding-top: 0; }
.kj-spruch:target { background: var(--surface-alt); }
.kj-spruch__name { font-weight: 600; margin-bottom: 0.3rem; }
.kj-spruch__name .pill { margin-left: 0.3rem; font-weight: 400; }
.kj-spruch__felder > div { position: relative; min-width: 0; }
.kj-spruch__felder .input { width: 100%; max-width: none; box-sizing: border-box; }
.kj-spruch__felder { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 0.5rem; align-items: start; margin-bottom: 0.5rem; }
@media (max-width: 40rem) {
  .kj-spruch__felder { grid-template-columns: 1fr; }
}

/* ======================================================================================
   Suche in Listen mit Fundstellen (seit 1.54.0, Portal\Search; übernommen aus dem Predigtmanuskript 1.18.2, gleiches Aussehen)
     .search          Suchzeile über der Liste (Feld, Häkchen „auch im Text“, „Suchen“, „Alle zeigen“)
     .search-count    Anzahl über der Liste („3 Manuskripte passen zur Suche“)
     .search-hits     Fundstellen in der Karte unter dem Inhalt, Zitate mit <mark>
     .is-search-hit   Feld, zu dem „Im Text ansehen“ gesprungen ist
   ====================================================================================== */
.search { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1rem; }
.search .input { flex: 1 1 18rem; max-width: 32rem; }
.search__fulltext { margin: 0; white-space: nowrap; }
.search-count { margin: 0 0 0.5rem; }
.search-hits { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.search-hits .meta { margin: 0 0 0.3rem; }
.search-hits__item { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--ink); }
.search-hits__item mark { background: var(--accent-tint); color: inherit; padding: 0 0.1em; border-radius: 2px; font-weight: 600; }
.search-hits__note { margin-left: 0.25rem; color: var(--muted); font-size: 0.85rem; }
.is-search-hit { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Seit 1.54.2 (Hanno: auf einer langen Seite ließ sich bei offenem Hauptmenü der Text darunter rollen, „wirkt merkwürdig“):
   Solange ein Menü der Kopfzeile offen ist, steht die Seite; ein langes Menü rollt weiter in sich. Ein sichtbarer Rollbalken
   (Windows) wird durch gleich breiten Rand ersetzt (--scrollbar-w aus app.js), damit die Seite nicht zur Seite springt. */
html.has-menu-open { overflow: hidden; padding-right: var(--scrollbar-w, 0px); }
/* Seit 1.54.3: Ein offenes Menü liegt über der Leiste unten (beide sonst auf derselben Ebene), damit sie seine letzten Einträge
   nicht verdeckt */
.site-header:has(details[data-menu][open]) { z-index: 65; }