/* KUKANILEA Dokumenteditor — eigenstaendiges CSS (kein vendored Lexical-CSS, Lexical liefert
   selbst keine Styles mit, alles Nachfolgende ist Haus-eigenes Design). System-Font-Stack statt
   Web-Font (Local-First-Policy, keine Netzwerk-Font-Requests).

   "Papier & Tinte" seit 2026-09-25 (wie musterbrief.kukanilea.de): Creme #faf9f6 als
   Grund, weisses Blatt mit feiner Kante, Tinte #1e293b als Schrift, tiefes Kupfer
   #8a5a1c als Akzent (5,9:1 auf Weiss -- das helle Kupfer #c6842e erreicht nur 3,1:1
   und traegt deshalb nur Linien). */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #faf9f6;
  color: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* <main> ist die Hauptlandmarke (Ueberschrift + Anwendung, axe 2026-09-25);
   die Hoehenkette laeuft durch sie hindurch zu #root. */
.editor-main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#root {
  flex: 1 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── App-Rahmen ─────────────────────────────────────────────────────────── */

.editor-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.editor-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.editor-logo {
  color: #1e293b;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.editor-logo:hover,
.editor-logo:focus {
  text-decoration: underline;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #1e293b;
  font-size: 0.85rem;
  cursor: pointer;
}
.toolbar-btn:hover {
  background: #f5f3ef;
}
.toolbar-btn:focus-visible {
  outline: 2px solid #8a5a1c;
  outline-offset: 1px;
}
.toolbar-btn.is-active {
  background: #f6ecdd;
  border-color: #e8d3b5;
  color: #6b4413;
}
.toolbar-export {
  border: 1px solid #8a5a1c;
  color: #8a5a1c;
  font-weight: 600;
}
.toolbar-export:hover {
  background: #8a5a1c;
  color: #fff;
}

.toolbar-select {
  height: 34px;
  padding: 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  font-size: 0.85rem;
  color: #1e293b;
}

.toolbar-divider {
  width: 1px;
  height: 22px;
  background: #e2e8f0;
  margin: 0 4px;
}

.toolbar-spacer {
  flex: 1 1 auto;
}

.toolbar-status {
  font-size: 0.75rem;
  color: #5a6678;
  min-width: 92px;
}

/* ── A4-Blattstapel ─────────────────────────────────────────────────────────
   Der Bildschirm zeigt echte DIN-A4-Blaetter (210 x 297 mm) mit den eingestellten
   Raendern, sichtbar voneinander getrennt. Vorher war die Flaeche 820 px breit und
   1000 px hoch -- ein Format, das es auf keinem Drucker gibt: Zeilenumbruch,
   Umbruchstelle und Seitenzahl der Vorschau hatten mit dem PDF nichts zu tun.
   Die Rechnung dahinter steht in src/seitenlayout.js, die Messung in
   src/useSeitenumbruch.js. Alle Masse hier muessen mit dem Druckteil unten
   uebereinstimmen, sonst bricht die Paritaet. */

.editor-container {
  flex: 1 1 auto;
  padding: 24px 16px 80px;
  display: flex;
  justify-content: center;
  background: #faf9f6;
}

.editor-buehne {
  --a4-rand-mm: 25mm;
  --seiten: 1;
  --fit-skala: 1;
  --blatt-abstand: 28px;
  width: 210mm;
  max-width: 100%;
}

/* Fit Width: auf schmalen Bildschirmen wird das Blatt als Ganzes verkleinert
   dargestellt. `transform` veraendert nur die Darstellung, nicht das Layout --
   Zeilenumbruch, Umbruchstelle und Seitenzahl bleiben deshalb auf dem Telefon
   dieselben wie am Schreibtisch und im PDF. */
.editor-buehne.ist-eingepasst {
  height: calc((var(--seiten) * 297mm + (var(--seiten) - 1) * var(--blatt-abstand)) * var(--fit-skala));
  overflow: hidden;
}
.editor-buehne.ist-eingepasst .editor-blattstapel {
  transform: scale(var(--fit-skala));
  transform-origin: top left;
}

.editor-blattstapel {
  position: relative;
  width: 210mm;
  min-height: calc(var(--seiten) * 297mm + (var(--seiten) - 1) * var(--blatt-abstand));
}

.editor-blaetter {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.editor-blatt {
  position: absolute;
  left: 0;
  top: calc(var(--blatt) * (297mm + var(--blatt-abstand)));
  width: 210mm;
  height: 297mm;
  background: #ffffff;
  box-shadow: 0 0 0 1px #e2e8f0, 0 2px 8px rgba(15, 23, 42, 0.06);
  border-radius: 1px;
}

/* Die Seitenmarke steht in der Luecke ZWISCHEN den Blaettern, nicht auf dem Papier:
   sie ist Bedienoberflaeche und darf nicht so aussehen, als wuerde sie mitgedruckt. */
.editor-blatt-trenner {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--blatt) * (297mm + var(--blatt-abstand)) - var(--blatt-abstand));
  height: var(--blatt-abstand);
  line-height: var(--blatt-abstand);
  text-align: center;
  font-size: 0.72rem;
  color: #4b5563;
}

.editor-inhalt {
  position: relative;
  z-index: 1;
  padding: var(--a4-rand-mm) var(--a4-rand-mm) 0;
}

/* Nullhoher Bezugspunkt fuer die Messung -- offsetTop des ersten echten Blocks
   haengt sonst von Browser-Eigenheiten der offsetParent-Kante ab. */
.editor-inhalt-anker {
  height: 0;
}

.editor-input {
  /* Klickflaeche im leeren Dokument. Muss im Druck denselben Wert haben, sonst
     verschiebt sich der Briefabschluss zwischen Vorschau und PDF. */
  min-height: 16em;
  outline: none;
  font-size: 1rem;
  line-height: 1.65;
  color: #1e293b;
}

/* Bezugsflaeche des Platzhalters. Ohne sie stand "Text eingeben …" an der oberen
   Kante der Inhaltsflaeche -- im Briefmodus quer ueber der Absenderanschrift
   (gemessen am 2026-09-02 in Chrome: Platzhalter bei 94 px, Eingabefeld bei 297 px). */
.editor-eingabe {
  position: relative;
}

.editor-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  /* #9aa1ad ergab 2,6:1 auf Weiss. Der Platzhalter ist der erste Text, den ein
     Nutzer im leeren Dokument sieht -- er muss lesbar sein (WCAG 1.4.3). */
  color: #5a6678;
  pointer-events: none;
  font-size: 1rem;
}

/* Bild nie hoeher als eine Seite: sonst ragt es in der Vorschau ueber die
   Blattkante und der Drucker skaliert es stillschweigend anders. */
.editor-image img,
.editor-inhalt img {
  max-width: 100%;
  max-height: calc(297mm - 2 * var(--a4-rand-mm));
  height: auto;
}

/* Versatz auf den Anfang der naechsten Seite. Gesetzt wird er von
   useSeitenumbruch.js als benutzerdefinierte Eigenschaft; er wirkt ausschliesslich
   am Bildschirm. Im Druck traegt derselbe Block stattdessen `break-before: page`
   (siehe @media print) -- gleiche Stelle, gleiche Seitenzahl. */
@media screen {
  .editor-inhalt [data-seitenstart] {
    padding-top: var(--kuk-seitenversatz, 0px);
  }
}

/* ── KUKANILEA-Herkunftszeichen (document-output-standard.md, Abschnitt 6) ── */
.wasserzeichen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.wasserzeichen-marke {
  position: absolute;
  font-size: 6pt;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #64748b;
  opacity: 0.25;
  white-space: nowrap;
}
.wasserzeichen-marke.ist-oben-links { top: 9mm; left: 9mm; }
.wasserzeichen-marke.ist-unten-rechts { bottom: 9mm; right: 9mm; }
.wasserzeichen-druck { display: none; }

/* Anhangseite (App.jsx): nur im Druck, als letztes Blatt. */
.druck-anhang { display: none; }
@media print {
  .druck-anhang {
    display: block; break-before: page; page-break-before: always;
    font-family: Arial, Helvetica, sans-serif; color: #0f1729;
  }
  .kuk-anhang-kopf { font-size: 9pt; font-weight: 700; color: #64748b; margin: 0 0 1mm; }
  .kuk-anhang-kennung {
    font-size: 7.5pt; color: #64748b; margin: 0 0 8mm;
    padding-bottom: 1.5mm; border-bottom: 0.5pt solid #b2bfcc;
  }
  .kuk-anhang-titel { font-size: 16pt; margin: 0 0 4mm; color: #0f1729; }
  .kuk-anhang-punkte { list-style: none; margin: 0; padding: 0; font-size: 10pt; line-height: 1.45; color: #4a5769; }
  .kuk-anhang-punkte li { margin: 0 0 3mm; }
  .kuk-anhang-punkte strong { color: #0f1729; }
  .kuk-anhang-werbung {
    display: flex; gap: 8mm; align-items: flex-start; break-inside: avoid;
    margin-top: 14mm; padding-top: 5mm; border-top: 0.5pt solid #b2bfcc;
  }
  .kuk-anhang-werbetext { flex: 1; font-size: 10pt; line-height: 1.45; color: #4a5769; }
  .kuk-anhang-werbetext p { margin: 0 0 1.5mm; }
  .kuk-anhang-werbetitel { font-size: 12pt; font-weight: 700; color: #1d4ed8 !important; }
  .kuk-anhang-url { font-size: 11pt; font-weight: 700; color: #1d4ed8 !important; }
  .kuk-anhang-qr svg { display: block; width: 28mm; height: 28mm; }
}

.editor-paragraph {
  margin: 0 0 0.85em;
}

.editor-heading-h1 {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 1.1em 0 0.5em;
  line-height: 1.25;
  color: #6b4413;
}
.editor-heading-h2 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 1em 0 0.45em;
  line-height: 1.3;
  color: #6b4413;
}
.editor-heading-h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0.9em 0 0.4em;
  line-height: 1.35;
  color: #6b4413;
}

.editor-quote {
  margin: 0.8em 0;
  padding: 4px 16px;
  border-left: 3px solid #8a5a1c;
  color: #4b5563;
  font-style: italic;
}

.editor-list-ul,
.editor-list-ol {
  margin: 0 0 0.85em;
  padding-left: 1.6em;
}
.editor-listitem {
  margin: 0.2em 0;
}
.editor-nested-listitem {
  list-style-type: none;
}

.editor-link {
  color: #8a5a1c;
  text-decoration: underline;
}

.editor-text-bold {
  font-weight: 700;
}
.editor-text-italic {
  font-style: italic;
}
.editor-text-underline {
  text-decoration: underline;
}
.editor-text-strikethrough {
  text-decoration: line-through;
}

.editor-table {
  border-collapse: collapse;
  margin: 0.9em 0;
  width: 100%;
}
.editor-table-row {
  border: 0;
}
.editor-table-cell {
  border: 1px solid #e2e8f0;
  padding: 6px 10px;
  vertical-align: top;
  min-width: 60px;
}
.editor-table-cell-header {
  background: #faf9f6;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  padding: 6px 10px;
  text-align: left;
}

.editor-image {
  margin: 0.6em 0;
}

/* ── Legal-Bar (Kanon: alle Shard-Tools) ───────────────────────────────── */

#kukanilea-legal-bar {
  position: fixed !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 9999 !important;
  display: flex !important;
  gap: 10px !important;
  padding: 4px 8px !important;
  background: rgba(20, 20, 20, 0.72) !important;
  border-radius: 4px !important;
  font: 11px/1.4 system-ui, sans-serif !important;
  pointer-events: auto !important;
}
#kukanilea-legal-bar a {
  color: #e5e7eb !important;
  text-decoration: none !important;
  opacity: 0.85;
}
#kukanilea-legal-bar a:hover,
#kukanilea-legal-bar a:focus {
  opacity: 1;
  text-decoration: underline !important;
}
@media (max-width: 640px) {
  #kukanilea-legal-bar {
    right: 4px !important;
    bottom: 4px !important;
    font-size: 10px !important;
  }
  /* Auf dem Telefon zaehlt jeder Millimeter Breite fuer die Fit-Width-Darstellung. */
  .editor-container {
    padding: 12px 8px 72px;
  }
}

.editor-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a6678;
  font-size: 0.95rem;
}

/* ── Manueller Seitenumbruch ────────────────────────────────────────────── */
.editor-page-break {
  margin: 1.2em 0;
  border-top: 1px dashed #e8d3b5;
  position: relative;
  height: 0;
}
.editor-page-break::after {
  content: "Seitenumbruch";
  position: absolute;
  top: -0.7em;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 0 8px;
  font-size: 0.7rem;
  color: #5a6678;
}

/* ── Geschaeftsbriefmodus-Felder ────────────────────────────────────────── */
.letter-fields {
  display: grid;
  gap: 8px;
  margin-bottom: 1.2em;
}
.letter-fields-header {
  grid-template-columns: 1fr 1fr;
}
.letter-fields-header .letter-field:nth-child(1),
.letter-fields-header .letter-field:nth-child(2) {
  grid-column: span 1;
}
.letter-fields-footer {
  margin-top: 1.6em;
  max-width: 320px;
  /* Platz fuer die handschriftliche Unterschrift zwischen Grussformel und Name --
     am Bildschirm wie im PDF derselbe Abstand. */
  row-gap: 16mm;
}
.letter-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
}
.letter-field-label {
  color: #5a6678;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.letter-field-input {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
  color: #1e293b;
}
/* Mehrzeilige Felder wachsen mit (LetterFields.jsx) -- eigenes Ziehen wuerde die
   berechnete Hoehe sofort wieder ueberschreiben. */
textarea.letter-field-input {
  resize: none;
  overflow: hidden;
}
.letter-field-input:focus-visible {
  outline: 2px solid #8a5a1c;
  outline-offset: 1px;
}

/* ── Workspace-/Vorlagen-Panel (Meine Dokumente, Backup/Restore, Vorlagenwahl) ─────────── */
.workspace-panel,
.find-replace-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: #fff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  z-index: 100;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.find-replace-overlay {
  width: min(340px, 100vw);
}
.workspace-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.workspace-panel-header h2 {
  font-size: 1rem;
  margin: 0;
}
.workspace-notice {
  font-size: 0.78rem;
  /* Auf einer getoenten Flaeche die dunklere Tinte: #4b5563 auf #faf9f6
     liegt deutlich ueber 4,5:1 (WCAG 1.4.3). */
  color: #4b5563;
  background: #faf9f6;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0;
}
.workspace-notice-warn {
  background: #fdf1e8;
  color: #7a4a12;
}
.workspace-actions,
.workspace-backup {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.workspace-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.workspace-doc-empty {
  color: #9aa1ad;
  font-size: 0.85rem;
  padding: 8px 0;
}
.workspace-doc-item {
  border: 1px solid #f5f3ef;
  border-radius: 6px;
  padding: 6px 8px;
}
.workspace-doc-item.is-current {
  border-color: #8a5a1c;
  background: #faf9f6;
}
.workspace-doc-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.workspace-doc-name {
  font-weight: 600;
  font-size: 0.88rem;
}
.workspace-doc-date {
  font-size: 0.72rem;
  color: #9aa1ad;
}
.workspace-doc-ops {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.workspace-doc-ops .toolbar-btn {
  font-size: 0.72rem;
  height: 26px;
  padding: 0 8px;
}
.workspace-storage p {
  font-size: 0.8rem;
  color: #4b5563;
  margin: 0 0 6px;
}
.workspace-danger {
  border-color: #c0392b;
  color: #c0392b;
}
.workspace-danger:hover {
  background: #c0392b;
  color: #fff;
}
.workspace-message {
  font-size: 0.82rem;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0;
}
.workspace-message-ok {
  background: #e7f4ea;
  color: #1e6b34;
}
.workspace-message-error {
  background: #fbe9e7;
  color: #a4291b;
}
.workspace-restore-confirm {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.template-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.template-list-item {
  width: 100%;
  text-align: left;
  border: 1px solid #f5f3ef;
  border-radius: 6px;
  padding: 8px 10px;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.template-list-item:hover {
  background: #faf9f6;
}
.template-list-title {
  font-weight: 600;
  font-size: 0.88rem;
}
.template-list-category {
  font-size: 0.72rem;
  color: #9aa1ad;
}
.template-risk-badge {
  align-self: flex-start;
  font-size: 0.68rem;
  color: #a4291b;
  background: #fbe9e7;
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 2px;
}
/* Eigene Vorlagen: dieselbe Zeilenform wie die mitgelieferten, damit die Liste
   eine Liste bleibt -- nur mit einer zweiten Schaltflaeche je Eintrag. */
.template-own {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.template-own-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a6678;
  margin: 0 0 6px;
}
.template-own-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.template-own-item {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.template-own-item .template-list-item {
  flex: 1;
}
.template-own-empty {
  font-size: 0.78rem;
  color: #5a6678;
  line-height: 1.45;
}

.template-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.template-hints {
  font-size: 0.78rem;
  /* wie .workspace-notice: grauer Grund verlangt den dunkleren Ton */
  color: #4b5563;
  background: #faf9f6;
  border-radius: 6px;
  padding: 8px 10px 8px 22px;
  margin: 0;
}
.template-disclaimer {
  font-size: 0.76rem;
  color: #7a4a12;
  background: #fdf1e8;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0;
}
.template-form-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Import-Dialog: Treue-Matrix vor dem Import, Verlustbilanz danach ──── */
.import-treue,
.import-bilanz {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.import-treue-titel {
  font-size: 0.82rem;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.import-treue-titel::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aa1ab;
  flex: none;
}
.import-treue-titel.ist-gut::before { background: #1d7a4c; }
.import-treue-titel.ist-teilweise::before { background: #b6791b; }
.import-treue-titel.ist-verlust::before { background: #a3262c; }
.import-treue-liste {
  font-size: 0.78rem;
  color: #4b5563;
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.import-treue-liste .ist-verlust {
  color: #a3262c;
  font-weight: 600;
}
.import-hinweise summary {
  font-size: 0.78rem;
  color: #4b5563;
  cursor: pointer;
}

@media (max-width: 640px) {
  .workspace-panel,
  .find-replace-overlay {
    width: 100vw;
  }
}

/* ── Druck (PDF-Export ueber Browser-Druckdialog) ────────────────────────
   Das Gegenstueck zum Blattstapel oben. Die Seitengroesse und die Raender stehen
   nicht hier, sondern in einer @page-Regel, die App.jsx aus dem eingestellten
   Seitenrand erzeugt -- @page kennt keine benutzerdefinierten Eigenschaften.
   Frueher stand hier `@page { margin: 0 }` und der Rand kam als Polsterung vom
   Blatt: damit hatte nur die ERSTE gedruckte Seite einen oberen Rand, jede
   weitere begann an der Papierkante. */
@media print {
  .editor-header,
  .toolbar,
  .workspace-panel,
  .find-replace-overlay,
  .editor-blaetter,
  #kukanilea-legal-bar {
    display: none !important;
  }
  html,
  body {
    background: #fff;
  }
  .editor-container {
    display: block;
    padding: 0;
    background: #fff;
  }
  .editor-buehne,
  .editor-buehne.ist-eingepasst {
    width: auto;
    max-width: none;
    height: auto;
    overflow: visible;
  }
  .editor-buehne.ist-eingepasst .editor-blattstapel {
    transform: none;
  }
  .editor-blattstapel {
    width: auto;
    min-height: 0;
  }
  .editor-inhalt {
    padding: 0;
  }
  /* Genau die Bloecke, die in der Vorschau auf ein neues Blatt geschoben wurden. */
  .editor-inhalt [data-seitenstart] {
    break-before: page;
  }
  .editor-page-break {
    border-top: none;
    break-after: page;
  }
  .editor-page-break::after {
    content: "";
  }
  /* Chromes Vorgabe orphans/widows = 2 verschiebt Umbrueche um bis zu zwei Zeilen
     gegenueber der zeilenweise gierigen Rechnung des Seitenmodells. */
  .editor-inhalt,
  .editor-input,
  .editor-paragraph,
  .editor-listitem {
    orphans: 1;
    widows: 1;
  }
  /* Herkunftszeichen: `position: fixed` wiederholt Chrome auf jeder gedruckten
     Seite; die Marken liegen im Randbereich ausserhalb der Textflaeche. */
  .wasserzeichen-druck {
    display: block;
    position: fixed;
    inset: 0;
  }
  .wasserzeichen-druck .wasserzeichen-marke.ist-oben-links { top: -9mm; left: -9mm; }
  .wasserzeichen-druck .wasserzeichen-marke.ist-unten-rechts { bottom: -9mm; right: -9mm; }
  /* Brieffelder sind im Druck Text, kein Formular: ohne diese Regel druckt der
     Browser Eingabefelder samt Rahmen -- und ein zweizeiliges Textfeld druckt nur
     die zwei sichtbaren Zeilen, der Rest der Anschrift fehlt im PDF.
     Verborgen, aber platzgleich: `display: none` am Etikett und `border: 0` am Feld
     wuerden den Briefrahmen im Druck niedriger machen als am Bildschirm. Genau das
     ist eine Paritaetsverletzung -- der Text darunter saesse im PDF hoeher als in
     der Vorschau, und bei genuegend Text bricht die Seitenzahl auseinander. */
  .letter-field-label {
    visibility: hidden;
  }
  .letter-field-input {
    border-color: transparent;
    background: transparent;
    resize: none;
    overflow: visible;
  }
}

/* KUK-ZIELGROESSEN:ANFANG -- ERZEUGT, NICHT VON HAND AENDERN.
   Quelle: scripts/ops/sync_webtool_common.py
   Zielgroessen fuer Pointer und Touch: WCAG 2.2 SC 2.5.8 verlangt 24x24,
   das Produktziel sind rund 44 Pixel fuer haeufig benutzte Schaltflaechen. */
.btn-sm,
.chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vz-radio-group label,
.chip-group > label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Die Vorlagenleiste auf schmalen Bildschirmen.
   Gemessen am 2026-09-16 auf `prozent` bei 390 Pixeln: die Leiste bricht auf
   vier Zeilen um und wird 200 Pixel hoch -- ein Viertel des Bildschirms, VOR
   dem ersten Eingabefeld. Das erste Feld begann dadurch erst nach 1,12
   Bildschirmhoehen; der Mensch musste scrollen, bevor er die Aufgabe
   ueberhaupt sah. Die Hoehe kommt nicht von der Schrift, sondern von der
   44-Pixel-Zielgroesse oben: sie multipliziert sich mit jeder Umbruchzeile.

   Zwei Varianten gemessen, bevor eine gebaut wurde:

       Ausgang           200 px    erstes Feld bei 1,12x
       eine Zeile         44 px    erstes Feld bei 0,93x
       Leiste ausgeblendet 0 px    erstes Feld bei 0,86x

   Das Ausblenden bringt 0,07 Bildschirme mehr und kostet die Vorlagen ganz.
   Eine Zeile bringt das Feld in den ersten Viewport und laesst sie stehen --
   fuer wiederkehrende Nutzer sind sie echte Beschleuniger, kein Beiwerk.

   Der Tastaturweg traegt ohne Zutun: die Knoepfe sind fokussierbar, und der
   Browser scrollt sie beim Tabben in den Blick (gemessen: 480 Pixel). Anders
   als bei den breiten Tabellen, deren Inhalt NICHT fokussierbar ist und die
   deshalb einen eigenen Tabstopp brauchten, waere hier ein Handler Ueberbau.

   Nur bis 600 Pixel. Wo Platz ist, bleiben die Vorlagen vollstaendig
   sichtbar -- dieselbe Funktion, andere Darstellung. */
@media (max-width: 600px) {
  .preset-bar { flex-wrap: nowrap; overflow-x: auto; }
  .preset-bar > * { flex: none; }
}

/* Die Fusszeilen-Navigation.
   Am 2026-09-16 ueber vier Archetypen gemessen: "Impressum", "Datenschutz"
   und "KUKANILEA Buerosoftware" sind 20 Pixel hoch bei `padding: 0`, und sie
   stehen untereinander so dicht, dass der 24-Pixel-Kreis des Erfolgs-
   kriteriums den Nachbarn beruehrt.
   Damit greift KEINE der beiden Ausnahmen von SC 2.5.8: Spacing nicht, weil
   die Kreise sich schneiden -- und Inline nicht, weil `nav.ft-links` eine
   Navigation ist und kein Satz. Der Kommentar oben nimmt Inline-Links im
   Fliesstext bewusst aus; diese hier sind keine.
   Drei Werkzeuge von vieren trugen den Befund, das vierte nur deshalb nicht,
   weil seine Fusszeile weiter auseinanderstand. Ein gemeinsamer Owner, ein
   Fix: vier Pixel Innenabstand machen aus 20 genau 24, ohne dass sich die
   Schrift oder das Bild der Seite aendert. */
.ft-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Waagerechtes Scrollen im Hauptweg.
   Ein Grid-Kind traegt von sich aus `min-width: auto` und kann deshalb nicht
   unter die Mindestbreite seines Inhalts schrumpfen. Eine einzige lange
   Auswahloption genuegt, um die ganze Spalte breiter zu machen als den
   Bildschirm -- gemessen am 2026-09-12 auf fristen.kukanilea.de: 421 Pixel
   Scrollbreite bei 390 Pixeln Viewport, verursacht von einem <select>, dessen
   breiteste Option 409 Pixel misst. `min-width: 0` gibt dem Kind das
   Schrumpfen zurueck; die Option bricht dann in der Liste um, statt die Seite
   zu verschieben. */
.tool-layout > *,
.tool-card-stack > *,
.form-grid > *,
.vz-form > *,
.pp-form > *,
/* Und das Kind selbst, statt jeden Container einzeln aufzuzaehlen.
   Am 2026-09-12 gemessen: acht Werkzeuge scrollten bei 390 Pixeln waagerecht,
   und jedes hatte seinen EIGENEN Grid-Container -- eg-form, es-form, gh-grid,
   kz-form, ab-grid. Das nicht schrumpfende Kind hiess aber ueberall gleich.
   Wer die Container aufzaehlt, vergisst den naechsten; wer das Kind nimmt,
   erwischt auch den, den es noch nicht gibt. */
.form-field,
/* Und dieselbe Lehre ein zweites Mal, an einem anderen Kind.
   Am 2026-09-16 scrollte fahrtenbuch.kukanilea.de bei 320 Pixeln waagerecht:
   drei `.tool-card` waren 363 Pixel breit und trugen `min-width: auto`. Die
   Regel darueber zaehlt Container auf -- `.tool-layout`, `.tool-card-stack`,
   `.form-grid` --, und der Grid-Container dieser Karten war keiner davon.
   Genau der Fall, den der Kommentar daneben vorhergesagt hat: wer die
   Container aufzaehlt, vergisst den naechsten. `.tool-card` ist die
   durchgehende Klasse in allen Werkzeugen. */
.tool-card {
  min-width: 0;
}

/* Ein Schieberegler in einer Flex-Zeile hat dasselbe Problem aus derselben
   Ursache. Auf kfz-steuer.kukanilea.de steht neben ihm ein Zahlenfeld, das
   auf schmalen Schirmen ABSICHTLICH breiter wird, damit es die 44 Pixel
   Zielmass erreicht -- der Regler daneben konnte aber nicht nachgeben und
   schob die Seite auf 400 Pixel. Beide Anforderungen vertragen sich, sobald
   der Regler schrumpfen darf. */
.slider-row input[type="range"] {
  min-width: 0;
}

/* Deutsche Komposita in Ueberschriften.
   "Weihnachtsgeld-/Urlaubsgeld-Rechner" bietet dem Browser keine
   Umbruchstelle: nach einem Bindestrich, auf den ein Schraegstrich folgt,
   wird nicht getrennt. Das Wort war 398 Pixel breit in einer 350 Pixel
   breiten Ueberschrift. Diese Regel greift nur, wenn ein Wort sonst gar
   nicht passt -- an vier Kontrollwerkzeugen gemessen blieb die Hoehe der
   Ueberschrift auf das Pixel gleich, und auch beim Anlassfall kam keine
   Zeile hinzu. */
h1, h2, h3 {
  overflow-wrap: break-word;
}

/* Kontrollkaestchen und Radiofelder.
   Gemessen am 2026-09-12 ueber 242 Werkzeuge bei 390 Pixeln Breite: 73 trugen
   Ziele unter 24 CSS-Pixeln, und 103 davon waren Kontrollkaestchen oder
   Radiofelder. Gezaehlt wurde bereits das GROESSTE Ziel -- Element,
   umschliessendes Label oder label[for] -- diese blieben trotzdem darunter.
   Ein Browser zeichnet sie von sich aus mit ungefaehr dreizehn Pixeln; auf
   dem Telefon ist das mit dem Daumen nicht sicher zu treffen. WCAG 2.2
   SC 2.5.8 nennt 24 x 24 als Untergrenze. */
input[type="checkbox"],
input[type="radio"] {
  min-width: 24px;
  min-height: 24px;
}

/* Und die uebrigen Bedienelemente auf dieselbe Untergrenze. In den meisten
   Werkzeugen sind sie ohnehin um die 39 Pixel hoch -- das hebt nur die
   Ausreisser, etwa die 21 Pixel hohen Felder des SEPA-Formulars. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="file"],
input[type="range"],
select,
textarea {
  min-height: 24px;
}

/* Das Dateifeld schiebt die Seite waagerecht, und zwar aus einem Grund, den
   man ihm nicht ansieht: ein `input[type="file"]` traegt `white-space: pre`.
   Seine Mindestbreite ist damit der Text "Datei auswaehlen | Keine
   ausgewaehlt", der nicht umbrechen darf -- rund 320 Pixel, unabhaengig davon,
   wieviel Platz da ist.
   Am 2026-09-16 auf fahrtenbuch.kukanilea.de gemessen: das Sicherungsfeld war
   321 Pixel breit in einem 320 Pixel breiten Fenster und schob das ganze
   Dokument auf 383 Pixel. Derselbe Fehler hatte kurz zuvor die PDF-Werkstatt
   getroffen; 95 index.html tragen Dateifelder.
   `min-width: 0` allein genuegt nicht -- die Mindestbreite kommt aus dem
   Inhalt, nicht aus der Eigenschaft. */
input[type="file"] {
  max-width: 100%;
  min-width: 0;
}

/* Aufklapper sind Bedienelemente, keine Ueberschriften.
   Am 2026-09-16 auf elterngeld.kukanilea.de bei 390 und 430 Pixeln gemessen:
   die FAQ-Zeilen waren 23 Pixel hoch -- einen Pixel unter der Grenze des
   WCAG 2.2 SC 2.5.8. Bei 320 und 360 Pixeln fiel es nicht auf, weil der Text
   dort umbricht und die Zeile dadurch hoeher wird; genau deshalb ist so ein
   Fehler ohne Messung an mehreren Breiten unsichtbar.
   Die Inline-Ausnahme des Erfolgskriteriums greift hier NICHT: ein <summary>
   ist ein eigenes Bedienelement, kein Verweis in einem Satz.
   Nur `min-height`, bewusst ohne `display: flex`: sobald `display` gesetzt
   wird, verschwindet die Aufklappmarkierung des Browsers -- und die zeichnen
   nicht alle Werkzeuge selbst nach. Fuer das Zielmass genuegt die Hoehe. */
summary {
  min-height: 24px;
}
/* KUK-ZIELGROESSEN:ENDE */

/* KUK-SHELL:CSS:ANFANG -- ERZEUGT, NICHT VON HAND AENDERN.
   Owner: scripts/ops/sync_webtool_shell.py

   `.tool-weiter` ist die kontextuelle Produktnavigation, die beim Umbau
   aus dem Footer geloest wurde. Sie sieht dem Footer bewusst aehnlich --
   sie steht an derselben Stelle der Seite --, ist aber ein eigener
   Bereich mit eigenem zugaenglichen Namen.

   Sie faellt weg, wenn sie leer ist: ein Werkzeug ohne verwandte
   Werkzeuge bekommt keine leere Leiste. */
.tool-weiter {
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  margin-top: 40px;
}
.tool-weiter + .site-footer { margin-top: 20px; }
.tool-weiter:empty { display: none; }
.weiter-row {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: baseline;
  font-size: 13px; color: var(--ink-4);
}

/* ── Volle Fensterbreite fuer Kopf und Fuss ──────────────────────────
   `.container` zentriert auf `--maxw` und setzt 20 px Rand. Fuer den
   Seiteninhalt ist das richtig -- eine Textspalte ueber 1600 px waere
   unlesbar. Fuer die Shell ist es falsch: eine App-Bar, die in der Mitte
   schwebt, sieht aus wie ein Seitenkopf, nicht wie die Leiste einer
   Anwendung. Auf 1440 px begann die Marke erst bei rund 300 px.

   Kopf und Fuss laufen deshalb ueber die volle Breite, und ihr Rand
   waechst stufenlos mit dem Fenster statt in Sprüngen: `clamp` geht von
   14 px auf schmalen Geraeten bis 48 px auf sehr breiten. Der Inhalt
   darunter behaelt seine zentrierte Spalte. */
.site-header > .container,
.site-header .header-lokal > .container,
.site-footer > .container,
.tool-weiter > .container {
  max-width: none;
  width: 100%;
  padding-inline: clamp(14px, 2.4vw, 48px);
}

/* ── App-Bar ─────────────────────────────────────────────────────────
   Eine Zeile, und sie bleibt eine Zeile. Der Werkzeugname darf kuerzen,
   die Marke nicht verschwinden, und der Knopf nicht umbrechen. */
.header-row { flex-wrap: nowrap; min-height: 56px; }
.brand { flex: 0 0 auto; }
.kuk-trenner {
  flex: 0 0 auto; width: 1px; height: 22px;
  background: currentColor; opacity: .25; margin: 0 4px;
}
/* Der Werkzeugname darf kuerzen, aber erst spaet: er ist die Antwort auf
   "wo bin ich". Deshalb `flex: 1 1 auto` erst NACH einer Mindestbreite --
   und keine Navigation mehr daneben, die ihn verdraengen koennte. */
.kuk-kontext {
  flex: 1 1 auto; min-width: 6ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none; color: inherit; font-weight: 600;
}
.kuk-kontext:hover { text-decoration: underline; }
.header-actions { flex: 0 0 auto; }

/* Die lokale Ebene einer Werkstatt: eigene Zeile unter der App-Bar,
   nicht darin. Sie existiert nur, wo es sie gibt -- ein Rechner bekommt
   sie nicht. */
.header-lokal {
  border-top: 1px solid var(--line);
  background: var(--white, #fff);
}
.header-lokal .site-nav {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  padding: 8px 0; font-size: 14px;
}
.kuk-tools {
  font: inherit; font-size: 14px; font-weight: 600;
  color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 8px;
  padding: 7px 14px; min-height: 40px; cursor: pointer;
}
.kuk-tools:hover { border-color: var(--blue); color: var(--blue); }
@media (pointer: coarse) { .kuk-tools { min-height: 44px; } }

/* Unterhalb des gemessenen Umbruchpunkts verlaesst die
   Werkstattnavigation den Kopf. Sie wird nicht versteckt -- `kuk-shell.js`
   verschiebt den echten Knoten in den Launcher. Diese Regel ist nur die
   Ruecklage fuer den Fall, dass kein JavaScript laeuft: dann bleibt sie
   sichtbar und bricht um. Ein umgebrochener Kopf ist haesslich; eine
   verschwundene Navigation waere ein Verlust. */
@media (max-width: 840px) {
  .header-lokal { display: none; }
}
.kuk-launcher .site-nav {
  display: flex; flex-direction: column; gap: 2px;
}

/* ── Launcher ────────────────────────────────────────────────────────
   Auf schmalen Breiten ein Blatt am unteren Rand -- dort ist der Daumen.
   Auf breiten ein Popover unter dem Knopf. Dieselbe Information, andere
   Komposition. */
.kuk-launcher {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 24, 32, .38);
  display: flex; align-items: flex-end; justify-content: center;
}
.kuk-launcher[hidden] { display: none; }
.kuk-launcher-blatt {
  width: 100%; max-height: 86vh; overflow-y: auto;
  background: var(--white, #fff);
  border-radius: 16px 16px 0 0;
  padding: 8px 18px 24px;
  box-shadow: 0 -8px 32px rgba(16, 24, 32, .18);
}
.kuk-launcher-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 4px;
}
.kuk-launcher-titel { font-weight: 700; }
.kuk-launcher-zu {
  font: inherit; font-size: 24px; line-height: 1;
  background: transparent; border: 0; cursor: pointer;
  min-width: 44px; min-height: 44px; color: inherit;
}
.kuk-launcher-bereich { padding: 8px 0; }
.kuk-launcher-bereich[hidden] { display: none; }
.kuk-launcher-label {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-4);
}
.kuk-launcher-ziel, .kuk-launcher .site-nav a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 0; min-height: 44px; justify-content: center;
  text-decoration: none; color: inherit;
}
.kuk-launcher-ziel:hover, .kuk-launcher .site-nav a:hover {
  color: var(--blue);
}
.kuk-launcher-hinweis { font-size: 12px; color: var(--ink-4); }
.kuk-launcher-offen { overflow: hidden; }

@media (min-width: 841px) {
  /* Das Popover steht buendig unter dem Knopf -- also am selben
     fliessenden Rand wie die App-Bar darueber. */
  .kuk-launcher {
    background: transparent; inset: 0 0 auto auto;
    padding: 8px clamp(14px, 2.4vw, 48px) 0; justify-content: flex-end;
  }
  .kuk-launcher-blatt {
    width: min(360px, calc(100vw - 36px));
    border-radius: 12px; margin-top: 56px;
    border: 1px solid var(--line);
    box-shadow: 0 12px 32px rgba(16, 24, 32, .16);
  }
}

/* ── Der Kopf tritt beim Lesen zurueck ───────────────────────────────
   Nur auf schmalen Breiten: dort kostet ein dauerhaft klebender Kopf
   68 von 844 Pixeln, also acht Prozent der Hoehe, waehrend jemand
   arbeitet. Verschoben wird mit `transform` -- der Kopf bleibt im
   Fluss, und der Inhalt darunter springt nicht.

   `kuk-kopf-weg` setzt `kuk-shell.js`; ohne JavaScript bleibt der Kopf
   stehen, wie er es immer getan hat. */
@media (max-width: 840px) {
  .site-header { transition: transform .22s ease; will-change: transform; }
  .kuk-kopf-weg .site-header { transform: translateY(-100%); }
}
/* Wer Bewegung reduziert haben will, bekommt den Wechsel ohne Fahrt --
   aber er bekommt ihn: der Platzgewinn ist kein Effekt, sondern der
   Zweck. */
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* Ein klebender Kopf verdeckt jedes Sprungziel.
   Der Skip-Link fuehrt zu `#main`, Inhaltsverzeichnisse fuehren zu
   Abschnitten -- landet das Ziel unter der App-Bar, ist der Fokus zwar
   gesetzt, aber nicht zu sehen. W3C nennt Scroll-Padding ausdruecklich
   als Technik dagegen. Der Wert deckt App-Bar und lokale Ebene ab. */
html { scroll-padding-top: 112px; }
@media (max-width: 840px) {
  html { scroll-padding-top: 76px; }
}

/* Der Skip-Link ist im Ruhezustand nicht zu sehen und im Tastaturfokus
   deutlich -- W3C G1. Er darf dabei nicht unter der App-Bar liegen. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 70;
  background: var(--white, #fff); color: inherit;
  border: 2px solid currentColor; border-radius: 8px;
  padding: 10px 16px; text-decoration: none;
  transition: top .12s ease-out;
}
.skip-link:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}
/* Die Zielgroesse gilt, wo grob gezeigt wird -- hier stehen Links eng
   beieinander, und ein Fehlgriff fuehrt auf ein fremdes Werkzeug. */
@media (pointer: coarse) {
  .weiter-row .ft-links a,
  .site-footer .ft-links a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}
/* KUK-SHELL:CSS:ENDE */

/* ── Seit 2026-09-25: zwei Leistenzeilen, Statusleiste, Ablage, Checkliste,
   Trennlinie, Endlos-Ansicht ─────────────────────────────────────────────── */

/* Zweite Zeile: das Dokument (Modus, Rand, Ansicht, Titel, Dateien). Die erste
   klebt oben; diese scrollt mit, damit die Schreibflaeche Platz behaelt. */
.toolbar-dokument {
  position: static;
  background: #faf9f6;
  padding-top: 6px;
  padding-bottom: 6px;
}
.toolbar-gruppe { display: inline-flex; gap: 2px; }
.toolbar-schmal { width: 84px; }
.toolbar-select:focus-visible { outline: 2px solid #0f172a; outline-offset: 1px; }

.status-leiste {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 7px 16px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  font-size: 0.78rem;
  color: #475569;
}
.status-leiste-leise { color: #5a6678; }
.status-leiste-speicher { margin-left: auto; }

/* Ziehen und Ablegen: ein ruhiger Rahmen um das Fenster, keine Animation. */
.ablage-hinweis {
  position: fixed;
  inset: 8px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #c6842e;
  border-radius: 12px;
  background: rgba(250, 249, 246, 0.86);
  pointer-events: none;
}
.ablage-hinweis span {
  padding: 10px 16px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-weight: 600;
}

/* Trennlinie */
.editor-hr {
  border: 0;
  border-top: 1px solid #cbd5e1;
  margin: 1em 0;
  cursor: pointer;
}
.editor-hr.selected { outline: 2px solid #c6842e; outline-offset: 2px; }

/* Checkliste: das Kaestchen ist die Vorsatzflaeche des Eintrags; ein Klick
   darauf schaltet ihn um (CheckListPlugin). */
.editor-checklist { padding-left: 0; }
.editor-listitem-checked,
.editor-listitem-unchecked {
  position: relative;
  list-style: none;
  margin-left: 0;
  padding-left: 26px;
  outline: none;
}
.editor-listitem-checked::before,
.editor-listitem-unchecked::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 16px;
  height: 16px;
  border: 1.5px solid #475569;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
.editor-listitem-checked::before { background: #8a5a1c; border-color: #8a5a1c; }
.editor-listitem-checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(0.3em + 2px);
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.editor-listitem-checked { text-decoration: line-through; color: #5a6678; }

/* Endlos: ein fortlaufendes Blatt ohne Seitenkanten -- nur am Bildschirm.
   Druck und PDF bleiben A4 mit denselben Umbruechen. */
@media screen {
  .editor-buehne.ist-endlos .editor-blaetter { display: none; }
  .editor-buehne.ist-endlos .editor-blattstapel {
    min-height: 297mm;
    background: #ffffff;
    box-shadow: 0 0 0 1px #e2e8f0, 0 2px 8px rgba(15, 23, 42, 0.06);
    padding-bottom: var(--a4-rand-mm);
  }
  .editor-buehne.ist-endlos .editor-inhalt [data-seitenstart] { padding-top: 0; }
}
@media print {
  .status-leiste, .ablage-hinweis { display: none !important; }
}

/* Die Rechtsleiste in der Statuszeile (StatusLeiste.jsx haengt sie ein). Die
   ID-plus-Klasse-Regel schlaegt die schwebende Grundregel samt !important. */
.status-leiste #kukanilea-legal-bar {
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 12px !important;
  font: inherit !important;
}
.status-leiste #kukanilea-legal-bar a {
  color: #475569 !important;
  opacity: 1;
}
.status-leiste #kukanilea-legal-bar a:hover,
.status-leiste #kukanilea-legal-bar a:focus { color: #1e293b !important; }

/* Endlos auf dem Telefon: eingepasst wie die Seitenansicht. Die Umbrueche fuer
   Druck und PDF werden am Bildschirmlayout gemessen (useSeitenumbruch.js) --
   ein auf Telefonbreite umbrochener Text ergaebe andere PDF-Seiten. Am
   2026-09-25 lief der Text stattdessen 794 px breit rechts aus dem Bild. Das
   weisse Blatt fuellt die eingepasste Hoehe, damit keine Kante entsteht. */
@media screen {
  .editor-buehne.ist-endlos.ist-eingepasst .editor-blattstapel {
    min-height: calc(var(--seiten) * 297mm + (var(--seiten) - 1) * var(--blatt-abstand));
  }
}

/* Telefon: jede Leiste eine wischbare Zeile statt fuenf umbrochener. Gemessen
   bei 390 x 844: Formatleiste 203 px (klebend), Dokumentleiste 199 px, das
   Blatt begann bei 56 % der Hoehe. Die Statusleiste klebt hier nicht -- sie
   steht am Ende wie ein Seitenfuss, samt Rechtsweg. */
@media (max-width: 759px) {
  .toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding: 6px 8px;
  }
  .toolbar > * { flex: none; }
  .toolbar-spacer { display: none; }
  .status-leiste { position: static; }
}