/* Karin’s Jeannie – Märchennacht: Sternenhimmel, Gold und Zauberflasche */

@font-face {
  font-family: "Great Vibes"; /* SIL Open Font License, lokal eingebunden */
  src: url("great-vibes-latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --text: #f1eadb;
  --gedaempft: #b3a9c9;
  --gold: #d4af37;
  --rand: rgba(212, 175, 55, .3);
  --linie: #3a2f5c;
  --flaeche: rgba(24, 17, 48, .74);
  --feld: #0e0a1f;
  --magie: #d77bd6;
  --pdf: #c4312b;
  --xlsx: #1d7a47;
  --docx: #2f62b0;
  --ok: #7fe0a8;
  --arbeit: #f0c75e;
  --fehler: #ff9a8f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: radial-gradient(ellipse at 50% -10%, #2c1b57 0%, #150e30 45%, #07060f 85%) fixed #07060f;
}

/* Sternenhimmel: zwei Ebenen, die abwechselnd funkeln */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  animation: funkeln 5s ease-in-out infinite alternate;
}
body::before {
  background-image:
    radial-gradient(1.5px 1.5px at 8% 14%, #fff, transparent),
    radial-gradient(1px 1px at 22% 38%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 37% 9%, #ffe9a8, transparent),
    radial-gradient(1px 1px at 51% 27%, #fff, transparent),
    radial-gradient(2px 2px at 66% 12%, #fff, transparent),
    radial-gradient(1px 1px at 79% 33%, #f3c6ff, transparent),
    radial-gradient(1.5px 1.5px at 92% 7%, #fff, transparent),
    radial-gradient(1px 1px at 13% 71%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 83%, #ffe9a8, transparent),
    radial-gradient(1px 1px at 71% 64%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 88%, #fff, transparent);
}
body::after {
  animation-delay: -2.5s;
  background-image:
    radial-gradient(1px 1px at 4% 42%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 17% 22%, #f3c6ff, transparent),
    radial-gradient(1px 1px at 29% 58%, #fff, transparent),
    radial-gradient(2px 2px at 46% 18%, #fff, transparent),
    radial-gradient(1px 1px at 58% 47%, #ffe9a8, transparent),
    radial-gradient(1.5px 1.5px at 74% 22%, #fff, transparent),
    radial-gradient(1px 1px at 86% 52%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 96% 30%, #fff, transparent),
    radial-gradient(1px 1px at 33% 93%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 62% 78%, #f3c6ff, transparent);
}
@keyframes funkeln { from { opacity: .25; } to { opacity: 1; } }

/* --- Schrift in Gold --- */
.gold {
  margin: 0;
  padding: 0 .2em;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  background: linear-gradient(135deg, #8a6a1f 0%, #d4af37 25%, #fff3b0 50%, #d4af37 70%, #8a6a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, .3));
}
.titel { font-size: clamp(2.5rem, 9vw, 6.5rem); }
.untertitel { font-size: clamp(2rem, 5vw, 3.25rem); }
/* Gold in gewöhnlicher Schrift – für Namen in Großbuchstaben („IT TECH“), die in der Schreibschrift unleserlich sind */
.gold.schlicht { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 700; letter-spacing: .06em; }

/* --- Kopf mit schwebender Flasche --- */
.leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 18px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px 0;
  font-size: .9rem;
  color: var(--gedaempft);
}
.leiste a { color: var(--gold); text-decoration: none; }
.leiste a:hover { text-decoration: underline; }
.leiste form { margin: 0; }

.kopfzeile {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(4px, 2vw, 20px);
  margin-top: 8px;
}
.flasche {
  width: auto;
  height: clamp(72px, 14vw, 150px);
  filter: drop-shadow(0 0 18px rgba(215, 123, 214, .35));
  animation: schweben 6s ease-in-out infinite;
}
@keyframes schweben {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

/* --- Seitenaufbau --- */
.seite { max-width: 1200px; margin: 0 auto; padding: 0 16px 48px; }
.raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "untertitel ." "eingabe ausgabe";
  gap: 8px 28px;
  margin-top: 8px;
}
.raster > .untertitel { grid-area: untertitel; }
.eingabe { grid-area: eingabe; }
.ausgabe { grid-area: ausgabe; }
@media (max-width: 860px) {
  .raster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "untertitel" "eingabe" "ausgabe";
    gap: 16px;
  }
}

.fenster {
  padding: 20px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(4, 2, 14, .6), 0 0 40px rgba(215, 123, 214, .08);
  backdrop-filter: blur(6px);
}

.etikett {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

/* --- Eingabe --- */
textarea, .feld {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  background: var(--feld);
  border: 1px solid var(--linie);
  border-radius: 12px;
}
textarea { min-height: 10rem; resize: vertical; }
.auswahl {
  margin-bottom: 10px;
  padding-right: 40px;
  appearance: none;
  cursor: pointer;
  background: var(--feld) url("pfeil.svg") no-repeat right 14px center / 14px;
}
.auswahl optgroup, .auswahl option { color: var(--text); background: #1a1333; }
.bezug, .nachtrag.voll {
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: .9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: rgba(215, 123, 214, .08);
  border: 1px solid rgba(215, 123, 214, .3);
  border-radius: 10px;
}
.bezug { max-height: 14rem; overflow-y: auto; color: var(--gedaempft); }
textarea::placeholder { color: #756b8f; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
textarea:focus-visible, .feld:focus-visible { outline-offset: 0; border-color: var(--gold); }

.ablage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 16px;
  padding: 20px 16px;
  text-align: center;
  color: var(--gedaempft);
  cursor: pointer;
  border: 2px dashed var(--rand);
  border-radius: 14px;
  transition: border-color .15s, background-color .15s, color .15s;
}
.ablage:hover, .ablage.aktiv {
  color: var(--text);
  border-color: var(--gold);
  background: radial-gradient(ellipse at center, rgba(215, 123, 214, .14), rgba(212, 175, 55, .04) 70%);
}
.ablage:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.ablage strong { color: var(--text); }
.ablage small { font-size: .82rem; }
.ablage input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.flaschen-symbol { width: 46px; height: 46px; overflow: visible; }
.flaschen-symbol .linie { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flaschen-symbol .funke { fill: var(--magie); }
.ablage.aktiv .flaschen-symbol { animation: wackeln .5s ease-in-out infinite alternate; }
@keyframes wackeln { from { transform: rotate(-8deg); } to { transform: rotate(8deg) scale(1.08); } }

/* minmax(0, 1fr): lange Dateinamen dürfen die Spalte nicht verbreitern */
.dateiliste, .auftraege, .downloads { grid-template-columns: minmax(0, 1fr); }
.dateiliste { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.dateiliste:empty { display: none; }
.dateiliste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-size: .9rem;
  background: var(--feld);
  border: 1px solid var(--linie);
  border-radius: 10px;
}
.dateiliste .name, .download .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
small { color: var(--gedaempft); }

.formate { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.wahlen { display: flex; flex-wrap: wrap; gap: 8px; }
.wahlen label { position: relative; cursor: pointer; }
.wahlen input { position: absolute; opacity: 0; }
.wahl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--feld);
  border: 1px solid var(--linie);
  border-radius: 999px;
  transition: border-color .15s, background-color .15s;
}
.wahl::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--farbe); }
.wahlen input:checked + .wahl { border-color: var(--gold); background: rgba(212, 175, 55, .14); }
.wahlen input:focus-visible + .wahl { outline: 2px solid var(--gold); outline-offset: 2px; }
.pdf { --farbe: var(--pdf); }
.xlsx { --farbe: var(--xlsx); }
.docx { --farbe: var(--docx); }

.abzeichen {
  display: inline-block;
  min-width: 3.4em;
  padding: 3px 6px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  color: #fff;
  background: var(--farbe, #555);
  border-radius: 6px;
}

/* --- Knöpfe --- */
.knopf {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  padding: 14px 20px;
  font: inherit;
  font-weight: 600;
  color: #1d1606;
  background: linear-gradient(135deg, #b38a2a, #f1d57a 50%, #c79e37);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(212, 175, 55, .25);
  transition: box-shadow .2s, filter .2s;
}
.knopf:hover { filter: brightness(1.07); box-shadow: 0 4px 26px rgba(215, 123, 214, .45); }
.knopf:disabled { opacity: .6; cursor: progress; }
.knopf.klein { display: inline-flex; width: auto; margin: 0; padding: 9px 16px; font-size: .92rem; }
.knopf.zweit { color: var(--gold); background: none; border: 1px solid var(--rand); box-shadow: none; }
.stern { width: 14px; height: 14px; flex: none; fill: currentColor; }
.link { padding: 0; font: inherit; color: var(--gold); background: none; border: 0; cursor: pointer; }
.link:hover { text-decoration: underline; }
a.knopf { text-decoration: none; }

progress { display: block; width: 100%; height: 8px; margin-top: 14px; accent-color: var(--magie); }
.meldung { margin: 12px 0 0; }
.meldung:empty { margin: 0; }
.meldung.ok { color: var(--ok); }
.meldung.fehler { color: var(--fehler); }

/* Funkenregen nach dem Senden (app.js) */
.funke-flug {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  pointer-events: none;
  fill: #fff3b0;
  animation: fliegen .9s ease-out forwards;
}
.funke-flug.rosa { fill: var(--magie); }
@keyframes fliegen {
  from { transform: translate(0, 0) scale(.4) rotate(0); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(180deg); opacity: 0; }
}

/* --- Ausgabe --- */
.auftraege { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ausgabe .auftraege { max-height: 36rem; overflow-y: auto; padding-right: 4px; }
.auftrag { padding: 14px; background: var(--feld); border: 1px solid var(--linie); border-radius: 14px; }
.auftrag.erledigt { border-color: var(--rand); box-shadow: 0 0 18px rgba(212, 175, 55, .12); }
.auftrag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .85rem; color: var(--gedaempft); }
.auftrag-kopf .status { margin-left: auto; }
.auftrag-text { margin: 8px 0 0; overflow-wrap: anywhere; }
.voll { white-space: pre-wrap; }
.status { padding: 2px 10px; font-size: .75rem; font-weight: 600; border: 1px solid currentColor; border-radius: 999px; }
.status.offen { color: var(--gedaempft); }
.status.in-arbeit { color: var(--arbeit); }
.status.erledigt { color: var(--ok); }
.status.fehler { color: var(--fehler); }
.hinweis.fehler { color: var(--fehler); font-style: normal; }
.antwort {
  margin: 10px 0 0;
  padding: 12px 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: linear-gradient(135deg, rgba(212, 175, 55, .1), rgba(215, 123, 214, .08));
  border: 1px solid var(--rand);
  border-radius: 12px;
}
.antwort a { color: var(--gold); overflow-wrap: anywhere; }
.antwort .wer {
  display: block;
  margin-bottom: 4px;
  font-family: "Great Vibes", cursive;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--gold);
}
.hinweis { margin: 0; font-size: .88rem; font-style: italic; color: var(--gedaempft); }
.nachtrag { margin: 6px 0 0; font-size: .88rem; color: var(--gedaempft); overflow-wrap: anywhere; }
.nachtrag span { color: var(--magie); }
.nachtrag.voll { margin: 10px 0 0; color: var(--text); }
.nachtrag.voll .etikett { color: var(--magie); }
.nachtrag.voll small { display: block; margin-top: 6px; }
.karten-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; }
.weiter { margin-left: auto; font-size: .88rem; }

.downloads { display: grid; gap: 6px; margin-top: 10px; }
.download {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--text);
  text-decoration: none;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--linie);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.download:hover, .kopieren:hover { border-color: var(--gold); box-shadow: 0 0 16px rgba(212, 175, 55, .2); }
.download svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Abhol-Link kopieren, falls der Download nicht klappt */
.download-zeile { display: flex; gap: 6px; }
.download-zeile .download { flex: 1; min-width: 0; }
.kopieren {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  color: var(--gold);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--linie);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.kopieren svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kopieren .symbol-ok, .kopieren.kopiert .symbol-kopieren { display: none; }
.kopieren.kopiert .symbol-ok { display: block; }
.kopieren.kopiert { color: var(--ok); border-color: var(--ok); }
#ausgabe-meldung { margin: 0 0 10px; }
#ausgabe-meldung:empty { margin: 0; }

.leer { display: grid; justify-items: center; gap: 4px; padding: 16px 8px; text-align: center; color: var(--gedaempft); }
.leer img { width: auto; height: 110px; opacity: .85; animation: schweben 6s ease-in-out infinite; }
.leer p { margin: 0; }

/* --- Projektübersicht (rechts auf der Startseite) --- */
.projekt-titel { margin: 8px 0 0; font-size: 1.05rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.projekt-titel a { color: var(--text); text-decoration: none; }
.projekt-titel a:hover { color: var(--gold); text-decoration: underline; }
.karten-meta { margin: 4px 0 0; font-size: .82rem; color: var(--gedaempft); }
.antwort.vorschau { padding: 8px 12px; font-size: .88rem; white-space: normal; color: var(--gedaempft); }
.antwort.vorschau .wer { font-size: 1.1rem; }
.oeffnen { margin-left: auto; font-size: .88rem; text-decoration: none; }
.oeffnen + .weiter { margin-left: 0; }

/* --- Projektseite --- */
.brotkrumen { margin: 18px 0 0; font-size: .92rem; }
.brotkrumen a { color: var(--gold); text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }
.projekt-kopf { margin: 8px 0 18px; }
.projekt-name { font-size: clamp(2rem, 5vw, 3.2rem); text-align: left; text-wrap: balance; }
.projekt-kopf .auftrag-kopf { margin-top: 6px; }
.projekt-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px 28px;
}
.projekt-haupt, .projekt-spalte { display: grid; gap: 20px; min-width: 0; }
.projekt-spalte { position: sticky; top: 16px; }
@media (max-width: 860px) {
  .projekt-raster { grid-template-columns: minmax(0, 1fr); }
  .projekt-spalte { position: static; order: -1; }
}
.zeitleiste { display: grid; gap: 14px; margin: 0; padding: 0 0 0 22px; list-style: none; border-left: 2px solid var(--linie); }
.ereignis { position: relative; }
.ereignis::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 14px;
  width: 12px;
  height: 12px;
  background: var(--feld);
  border: 2px solid var(--gedaempft);
  border-radius: 50%;
}
.ereignis.jeannie::before { border-color: var(--gold); background: var(--gold); }
.ereignis.nachtrag-e::before { border-color: var(--magie); }
.ereignis.warten::before { border-color: var(--arbeit); }
.ereignis .antwort, .ereignis .nachtrag.voll { margin: 0; }
.ereignis.start p, .ereignis.warten p { margin: 0; padding-top: 8px; }
.ereignis .wann { display: block; padding-top: 8px; font-size: .8rem; color: var(--gedaempft); }
.ereignis.start p { padding-top: 0; }
.projekt-spalte .downloads { margin-top: 0; }
.abzeichen.andere { --farbe: #5b4f7d; }

/* --- Anmeldung --- */
.mitte { display: grid; align-content: center; justify-items: center; gap: 20px; min-height: 100vh; padding-top: 16px; }
.anmeldung { width: min(380px, 100%); }
.anmeldung .feld, .willkommen .feld { margin-bottom: 14px; }

/* --- Erster Start --- */
.willkommen { width: min(580px, 100%); }
.willkommen .untertitel { margin-bottom: 10px; }
.gross { text-transform: capitalize; }
.einleitung { margin: 0 0 10px; }
.schritte { display: grid; gap: 6px; margin: 0 0 20px; padding-left: 1.4em; color: var(--gedaempft); }
.schritte strong { color: var(--text); }
.schritte li::marker { color: var(--gold); font-weight: 700; }
.hinweis-box {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: rgba(212, 175, 55, .08);
  border: 1px solid var(--rand);
  border-radius: 12px;
}
.hinweis-box .stern { fill: var(--gold); }
.feldhinweis { display: block; margin: -8px 0 14px; font-size: .82rem; }

/* --- Werkstatt (Bearbeitung) --- */
.werkstatt { margin-top: 20px; gap: 16px; }
.werkstatt .auftrag { padding: 18px; }
.anlagen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: .92rem; }
.anlagen .etikett { margin: 0; }
.anlagen a { color: var(--gold); text-decoration: none; overflow-wrap: anywhere; }
.anlagen a:hover { text-decoration: underline; }
.ergebnis { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ergebnis form { margin: 0; }
.ergebnis .link { font-size: .85rem; color: var(--gedaempft); }
.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}
.aktionen form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
input[type=file] { max-width: 100%; font: inherit; font-size: .9rem; color: var(--gedaempft); }
input[type=file]::file-selector-button {
  margin-right: 10px;
  padding: 8px 14px;
  font: inherit;
  color: var(--text);
  background: var(--feld);
  border: 1px solid var(--linie);
  border-radius: 8px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Archiv --- */
.archiv { margin-top: 16px; }
.suchleiste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 900px) {
  .suchleiste { grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr)); }
  .suchleiste .suchfeld { grid-column: 1 / -1; }
  .suchleiste.gleich { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* viele Filter: vier gleich breite Spalten */
}
.suchleiste .auswahl { margin: 0; }
.datum-feld { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--gedaempft); }
.datum-feld .feld { padding: 9px 10px; }
.suchleiste .knopf { justify-self: start; }
.stand { margin: 14px 0 6px; font-size: .88rem; color: var(--gedaempft); }
.arbeit { color: var(--arbeit); }
.trefferliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.treffer { padding: 12px 14px; background: var(--feld); border: 1px solid var(--linie); border-radius: 12px; }
.treffer-kopf, .dokument-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.treffer-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); text-decoration: none; }
.treffer-titel:hover { color: var(--gold); }
.abzeichen.art { --farbe: #5b4a8a; min-width: 6.5em; }
.treffer-daten { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: .82rem; color: var(--gedaempft); overflow-wrap: anywhere; }
.treffer-daten .fehler { color: var(--fehler); }
.auszug { margin: 8px 0 0; font-size: .9rem; color: var(--gedaempft); overflow-wrap: anywhere; }
.treffer-mail { margin: 6px 0 0; font-size: .86rem; overflow-wrap: anywhere; }
.suchhilfe { margin: 4px 0 10px; font-size: .86rem; color: var(--gedaempft); }
.suchhilfe summary { cursor: pointer; }
.suchhilfe code { font-size: .82rem; white-space: nowrap; }
.merkmale { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0 0; font-size: .88rem; }
.merkmale dt { color: var(--gedaempft); }
.merkmale dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
mark { padding: 0 2px; color: #1d1606; background: #e8c95b; border-radius: 3px; }
.treffer-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; font-size: .9rem; }
.treffer-aktionen .link, .blaettern .link, .zurueck .link { text-decoration: none; }
.blaettern { display: flex; justify-content: space-between; margin-top: 14px; }
.hinzufuegen { margin-top: 18px; }
.hinzufuegen summary, .aendern summary, .text-vorschau summary { cursor: pointer; font-weight: 600; color: var(--gold); }
.hinzufuegen[open] summary { margin-bottom: 14px; }
.hinzufuegen .zeile { display: flex; flex-wrap: wrap; gap: 12px; }
.hinzufuegen .zeile .etikett { flex: 1 1 220px; }
.hinzufuegen .zeile .auswahl { margin: 6px 0 0; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); }
.ordner-wahl { margin-top: 10px; }
.dokument { margin-top: 12px; }
.dokument-titel { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.dokument .treffer-aktionen { margin-top: 14px; }
.aendern, .text-vorschau { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }
.aendern-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; margin-top: 12px; }
.aendern-form .feld { margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.text-vorschau pre { max-height: 32rem; overflow: auto; margin: 12px 0 0; padding: 12px; font-size: .82rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--feld); border-radius: 10px; }
.zurueck { margin: 8px 0 0; }
.bezug-zeile { margin: 14px 0 0; font-size: .9rem; }
.antwort a.dok { padding: 0 4px; border-radius: 4px; background: rgba(212, 175, 55, .12); text-decoration: none; }

/* --- Einrichtung und Quellen --- */
.einrichtung p { margin-top: 0; }
.einrichtung-form { display: grid; gap: 16px; }
.gruppe { display: grid; gap: 10px; margin: 0; padding: 16px; border: 1px solid var(--linie); border-radius: 12px; }
.gruppe legend { padding: 0 6px; font-weight: 600; color: var(--gold); }
.gruppe .etikett .feld, .gruppe .etikett .auswahl { margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); }
.feld.klein { min-height: 4.5rem; }
.haken { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--gedaempft); }
.pruefungen { margin: 0 0 18px; padding: 14px; border: 1px solid var(--rand); border-radius: 12px; }
.pruefung { margin: 6px 0 0; overflow-wrap: anywhere; }
.pruefung.ok { color: var(--ok); }
.pruefung.fehler, .quellenliste .fehler { color: var(--fehler); }
.quellen { margin-top: 18px; }
.quellenliste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .92rem; }

/* --- Admin, Rechte, zweiter Faktor, Fassungen --- */
.zaehler { display: inline-block; min-width: 1.4em; padding: 0 6px; font-size: .75rem; font-weight: 700; text-align: center; color: #1d1606; background: var(--arbeit); border-radius: 999px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 16px 0; }
.kachel { display: grid; gap: 4px; padding: 16px; color: var(--text); text-decoration: none; }
.kachel strong { font-size: 1.6rem; color: var(--gold); }
.kachel span { font-size: .85rem; color: var(--gedaempft); }
/* Übersicht der Portale: Kacheln mit Namen und einem Satz */
.portal-bereiche { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.portal-bereiche .kachel strong { font-size: 1.15rem; }
.kachel.achtung { border-color: var(--arbeit); box-shadow: 0 0 22px rgba(240, 199, 94, .18); }
#freigaben, #benutzer, #quellen, #protokoll, .link-box { margin-top: 16px; }
.freigabe-karte { margin-top: 12px; }
.ablehnen { flex: 1 1 320px; }
.ablehnen .feld { flex: 1; min-width: 180px; padding: 9px 12px; }
.leer-text { margin: 6px 0 0; color: var(--gedaempft); }
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th { padding: 8px; text-align: left; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gedaempft); border-bottom: 1px solid var(--linie); }
.tabelle td { padding: 8px; vertical-align: top; border-bottom: 1px solid rgba(58, 47, 92, .5); overflow-wrap: anywhere; }
.tabelle.klein { font-size: .8rem; }

/* --- Rechnungen --- */
.rg-jahre { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.rg-jahre .link { padding: 3px 12px; text-decoration: none; border: 1px solid var(--linie); border-radius: 999px; }
.rg-jahre .link.gewaehlt { color: var(--gold); border-color: var(--gold); }
.rg-summen .kachel strong { font-size: 1.3rem; }
.rg-betrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabelle th.rg-betrag { text-align: right; }
.rg-neben { display: block; font-size: .8rem; color: var(--gedaempft); }
.rg-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.rg-kopf .stand { margin: 0; }
.rg-gruppen { margin-top: 16px; }
.rg-datum { white-space: nowrap; }
.rg-bezahlt { color: var(--ok); }
.rg-offen { color: var(--fehler); }
.rg-aus { color: var(--gedaempft); font-weight: 600; }
a.rg-aus { text-decoration: underline; }
.rg-schmal { display: none; }
@media (max-width: 700px) {
  .rg-breit { display: none; }
  .rg-schmal { display: inline; }
  .rg-summen .kachel strong { font-size: 1.15rem; }
}
.bearbeiten-zeile td { padding-top: 0; }
.bearbeiten-zeile summary, .einladen summary { cursor: pointer; font-size: .85rem; color: var(--gold); }
.einladen { margin-top: 16px; }
.rechte-kurz span { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; font-size: .75rem; border: 1px solid var(--linie); border-radius: 999px; }
.zustand { font-size: .8rem; font-weight: 600; }
.zustand.aktiv { color: var(--ok); }
.zustand.eingeladen, .zustand.ohne { color: var(--arbeit); }
.zustand.gesperrt { color: var(--fehler); }
.rechte-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: start; margin: 12px 0; }
.rechte-form .feld, .rechte-form .auswahl { margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); }
.rechte { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; }
.rechte legend { padding: 0 4px; }
.link-box .geheimnis, .geheimnis { display: block; margin: 8px 0; padding: 10px 12px; font-size: .85rem; overflow-wrap: anywhere; background: var(--feld); border: 1px solid var(--linie); border-radius: 8px; }
.qr { width: min(260px, 100%); margin: 8px auto 14px; padding: 10px; background: #fff; border-radius: 12px; }
.qr svg { display: block; width: 100%; height: auto; }
.code-feld { font-size: 1.4rem; letter-spacing: .3em; text-align: center; margin-bottom: 14px; }
.fassungen { margin-top: 14px; }
.fassungen ol { margin: 6px 0 0; padding-left: 1.4em; display: grid; gap: 4px; }
.fassungen .aktuell > a { font-weight: 700; }
.fassungen a { color: var(--gold); }
.freigabe-hinweis { margin: 12px 0 0; }
.admin-meldung { margin-top: 12px; }

/* --- Telefon --- */
.telefon { margin-top: 16px; }
.telefon-suche { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.nummern { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.nummer { padding-top: 10px; border-top: 1px solid var(--linie); }
.nummer-kopf { overflow-wrap: anywhere; }
.nummer-art { margin-right: 6px; font-size: .8rem; color: var(--gedaempft); }
.nummer-wert { font-weight: 600; font-variant-numeric: tabular-nums; }
.nummer-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; font-size: .9rem; }
.anruf { margin-top: 16px; border-color: var(--gold); }
.anruf-nummer { margin: 4px 0 0; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.anruf-text { margin: 10px 0 12px; font-size: 1.15rem; font-weight: 600; }
.anruf[data-status="klingelt"] .anruf-text, .anruf[data-status="waehlt"] .anruf-text, .anruf[data-status="verbindet"] .anruf-text { color: var(--arbeit); }
.anruf[data-status="verbunden"] .anruf-text { color: var(--ok); }
.anruf[data-status="fehler"] .anruf-text, .anruf[data-status="nicht-erreicht"] .anruf-text { color: var(--fehler); }
.leitung { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }
.anleitung summary { cursor: pointer; color: var(--gold); }
.anleitung .schritte { margin: 10px 0 0; }

/* --- Hausregeln, Abläufe, Fahrzeuge --- */
.regel-form textarea, .ablauf-form textarea { min-height: 6rem; }
.regel-wahl { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 12px; }
.regel-wahl .etikett { flex: 1 1 200px; }
.regel-wahl .auswahl { margin: 6px 0 0; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); }
.ablauf-form .rechte-form { margin-top: 14px; }
.ablauf-form .formate { margin: 0; }
.ablauf-form .haken { margin: 0 0 14px; }
.regel-text { margin: 8px 0 0; overflow-wrap: anywhere; }
.regel-pruefung { margin: 6px 0 0; font-size: .9rem; color: var(--gedaempft); overflow-wrap: anywhere; }
.regel-pruefung strong { font-weight: 600; color: var(--text); }
.regel-pruefung.frage strong { color: var(--arbeit); }
.regel-pruefung a, .vorgehen a { color: var(--gold); }
.status.aktiv { color: var(--ok); }
.status.pruefung, .status.freigabe, .status.rueckfrage { color: var(--arbeit); }
.status.aus, .status.pausiert, .status.abgelehnt, .status.gestoppt { color: var(--gedaempft); }
.stoppen { margin-top: 10px; }
.ki-hinweis { margin: 4px 2px 0; font-size: .75rem; color: var(--gedaempft); }
.vorgehen { margin: 4px 2px 0; font-size: .85rem; color: var(--gedaempft); }
.vorgehen summary { cursor: pointer; color: var(--gold); }
.vorgehen ol { margin: 6px 0 0; padding-left: 1.4em; overflow-wrap: anywhere; }
.rechte-kurz form { display: inline; margin: 0; }

/* --- Buchhaltung --- */
/* buch-reiter: eigener Name, die Schaltzentrale hat „.reiter“ mit anderem Aussehen */
.buch-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.buch-reiter.unter { margin: 10px 0 16px; font-size: .9rem; }
.reiter-knopf { padding: 6px 14px; color: var(--gold); text-decoration: none; border: 1px solid var(--linie); border-radius: 999px; }
.reiter-knopf:hover { border-color: var(--rand); }
.reiter-knopf.aktiv { font-weight: 600; color: #1d1606; background: var(--gold); border-color: var(--gold); }
.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle th.zahl { text-align: right; }
.bericht .z-gruppe td { padding-top: 18px; font-weight: 600; color: var(--gold); border-bottom-color: var(--linie); }
.bericht .z-summe td { font-weight: 600; }
.bericht .z-ergebnis td { font-weight: 700; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.buch-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 8px 0; }
.buch-filter .feld { width: auto; flex: 1 1 150px; }
.buch-filter .knopf { width: auto; margin-top: 0; }
.rechte-form .buch-zwischen { grid-column: 1 / -1; margin: 6px 0 0; }
.buch-fest { white-space: nowrap; flex-shrink: 0; }
/* Beleg daneben: Buchung links, ihr PDF rechts (am Handy unter der Buchung) */
.beleg-geteilt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.seite:has(.beleg-offen) { max-width: 1760px; }
@media (min-width: 1100px) {
  .beleg-geteilt.beleg-offen { grid-template-columns: minmax(0, 1fr) minmax(420px, 45%); }
  .beleg-geteilt.beleg-offen > .beleg-ansicht { position: sticky; top: 12px; }
}
.beleg-ansicht { margin: 16px 0 0; }
.beleg-rahmen { display: block; width: 100%; height: calc(100vh - 64px); min-height: 480px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; }
@media (max-width: 1099px) { .beleg-rahmen { height: 78vh; } }
/* Beleg-Ansicht (Foto, PDF): auf die Breite eingepasst, ohne Rollbalken – Rad vergrößert, die Hand verschiebt (app.js) */
.beleg-bild { overflow: hidden; cursor: grab; background: #6f6a80; }
.beleg-bild.zieht { cursor: grabbing; }
.beleg-blatt { transform-origin: 0 0; user-select: none; -webkit-user-select: none; }
.beleg-blatt img, .beleg-blatt canvas { display: block; width: 100%; height: auto; background: #fff; }
.beleg-blatt canvas + canvas { margin-top: 8px; }
.beleg-mehr { margin: 0; padding: 12px; color: #fff; font-size: .9rem; }
.beleg-oeffnen { display: inline-block; margin-top: 6px; font-size: .85rem; }
@media (hover: none) { .beleg-bild { height: auto; min-height: 0; cursor: auto; } }
[data-beleg] { cursor: pointer; }
[data-beleg].beleg-aktiv { outline: 2px solid var(--gold); outline-offset: 3px; }
.beleg-zeile td { padding: 0; }
.nur-mit-beleg { display: none; }
.beleg-geteilt:has([data-beleg]) .nur-mit-beleg { display: block; }
.schnellwahl { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 12px; font-size: .88rem; }
.buchzeilen { display: grid; gap: 2px; margin: 6px 0; padding: 0; list-style: none; font-size: .85rem; color: var(--gedaempft); }
.buchzeilen li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: 8px; }
.seite-soll { color: var(--ok); }
.seite-haben { color: var(--arbeit); }
.storno td { opacity: .6; }
.inline { display: inline; }
.kacheln.geld .kachel strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* LV, „Mitarbeiter ändern“: die Kostenübersicht steht als eigener Block über dem Formular */
.lv-kosten { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.lv-netto { grid-template-columns: minmax(0, 320px); }
.treffer.aus { opacity: .6; }
.regel-buch-form .tabelle td { min-width: 9rem; }
.tabelle .feld { padding: 8px 10px; margin: 2px 0; }
.pdf-knopf { width: auto; margin-top: 0; }
.historie { margin-top: 18px; }
/* Ganze Wörter statt zerhackter Spalten: schmale Bildschirme schieben die Tabelle seitlich (tabelle-rahmen) */
.tabelle.ganz th, .tabelle.ganz td { overflow-wrap: normal; }
.tabelle.ganz td:not(.zahl) { -webkit-hyphens: auto; hyphens: auto; }
.eng { white-space: nowrap; }
.eng small { display: block; }
.nur-schmal, .nur-schmal-block { display: none; }
.buch-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.buch-aktionen span { margin: 0; }
/* Sammelrechnung: Kunde und Knopf bleiben beim Blättern durch die Aufträge unten sichtbar */
.sammel-leiste { position: sticky; bottom: 0; z-index: 2; margin-top: 8px; padding: 10px 0; background: #181130; border-top: 1px solid var(--rand); }
.buch-leiste { align-items: center; }
.schnellwahl form, .buch-aktionen form { margin: 0; }
.vergleich td small { display: block; }
.hinweis-box.probe { margin: 16px 0 0; border-color: var(--arbeit); }
.bank-form { margin-top: 10px; }
.bank-form > div, .bank-form > .haken { grid-column: 1 / -1; }
.bank-konten li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; overflow-wrap: anywhere; }
.bank-konten form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
/* Zwischenseite „Weiter zur Bank“: ein Fenster in Lesebreite, Luft zwischen Knopf und Hinweis */
.bank-weiter { max-width: 560px; }
.bank-weiter .knopf { margin-bottom: 12px; }
.klein-feld { width: auto; padding: 6px 28px 6px 10px; font-size: .85rem; }
/* Fahrzeugliste: die Fahrgestellnummer bleibt in einer Zeile; am Handy stehen die Zeilen untereinander (stapel) */
.fz-fin { white-space: nowrap; }
@media (max-width: 700px) {
  .tabelle.ganz { font-size: .82rem; }
  .tabelle.ganz th, .tabelle.ganz td { padding: 6px 5px; }
  .tabelle.ganz th.zahl { white-space: normal; }
  /* Buchungsliste und Umbuchen: jede Zeile als Block untereinander statt in gequetschten Spalten */
  .stapel thead { display: none; }
  .stapel, .stapel tbody, .stapel tr, .stapel td { display: block; }
  .stapel tr { padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .stapel td { padding: 2px 0; text-align: left; border: 0; overflow-wrap: anywhere; }
  .stapel td:empty { display: none; }
  .stapel td[data-titel]::before { content: attr(data-titel); display: block; margin-top: 8px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gedaempft); }
  .stapel .eng small { display: inline; margin-left: 8px; }
  .stapel .zahl { font-weight: 600; }
  .stapel .rechte-kurz { margin-top: 6px; }
  .nur-schmal { display: inline; }
  .nur-breit { display: none; }
  .nur-schmal-block { display: block; margin-bottom: 6px; }
}

/* --- Reiter der Schaltzentrale, geoCapture-Funktionen, Schnellzugriff --- */
.reiter { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 16px; border-bottom: 1px solid var(--linie); }
.reiter a { padding: 8px 16px; color: var(--gedaempft); text-decoration: none; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; }
.reiter a:hover { color: var(--gold); }
.reiter a[aria-current="page"] { color: var(--gold); background: var(--flaeche); border-color: var(--linie); }
.gruppe-titel { margin: 18px 0 0; }
.funktion.teil { margin-left: 28px; }
.funktion.aus { opacity: .72; }
.funktion .schalter { font-size: 1rem; color: var(--text); }
.funktion .schalter input { width: 18px; height: 18px; }
.funktion-ort { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin-top: 10px; }
.funktion-ort .auswahl { margin: 6px 0 0; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); }
.funktion-ort .hinweis { grid-column: 1 / -1; }
.schnellzugriff { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
@media (max-width: 600px) { .funktion.teil { margin-left: 12px; } }
/* --- Hilfe (eigenes Fenster) --- */
.hilfe { padding-top: 12px; }
.hilfe-suche { position: sticky; top: 0; z-index: 2; padding: 8px 0; background: var(--feld); }
.hilfe-gruppe { margin-top: 12px; }
.hilfe-titel { font-weight: 600; color: var(--gold); text-decoration: none; }
.hilfe-titel:hover { text-decoration: underline; }
.hilfe-eintrag.passend { border-color: var(--rand); }
.hilfe-woerter { display: block; margin-top: 6px; font-size: .75rem; color: var(--gedaempft); overflow-wrap: anywhere; }

/* Verkauf: Positionen einer Rechnung (Bezeichnung, Menge, Preis; darunter die Beschreibung) */
.verk-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 7.5rem; gap: 8px; margin: 0 0 14px; }
.verk-zeile .feld { margin-top: 0; }
.verk-zeile .verk-text { grid-column: 1 / -1; min-height: 3.4rem; }
.verk-zeile .verk-fuss { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: -4px; font-size: .85rem; color: var(--gedaempft); }
.verk-fuss output { font-variant-numeric: tabular-nums; color: var(--text); }
.verk-kontrolle { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 12px; }
.verk-kontrolle .stand { margin-top: 0; }
.sammel-summen { flex-basis: 100%; margin: 0; }
.verkauf > .fenster { margin-top: 16px; }
.verkauf .gruppe + .gruppe { margin-top: 12px; }
.verkauf .buch-aktionen { margin: 10px 0; }
.verk-logo { max-width: 168px; max-height: 100px; padding: 6px; background: #fff; border-radius: 6px; }
@media (max-width: 560px) {
  .verk-zeile { grid-template-columns: 1fr 1fr; }
  .verk-zeile [name="p_name"] { grid-column: 1 / -1; }
}
.verkauf fieldset.rechte-form { min-width: 0; padding: 0; border: 0; }
.verkauf form > h3.etikett { margin-top: 22px; }
.verkauf input[type="color"] { height: 2.9rem; padding: 4px; }
/* Schutz vor selbsttätigen Eintragungen: ein Feld, das Menschen nicht sehen und nicht erreichen */
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Drucksorten-Editor: das Blatt (US-Letter) in der Breite des Fensters; Lage und Größe der Blöcke setzt app.js.
   Dieselbe Schrift wie im PDF (Figtree, SIL Open Font License), damit die Blöcke so breit sind wie gedruckt. */
@font-face { font-family: Figtree; font-weight: 400; src: url("/schrift/Figtree-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: Figtree; font-weight: 700; src: url("/schrift/Figtree-Bold.ttf") format("truetype"); font-display: swap; }
.design-rahmen { max-width: 720px; margin: 12px 0 16px; }
.design-seite { position: relative; width: 100%; aspect-ratio: 612 / 792; overflow: hidden; font-family: Figtree, "Helvetica Neue", Arial, sans-serif; line-height: 1.236;
  color: #000; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px var(--linie); user-select: none; -webkit-user-select: none; }
.design-block { position: absolute; box-sizing: border-box; white-space: nowrap; cursor: grab; touch-action: none; outline: 1px dashed #b08a3c; outline-offset: 1px; }
.design-block:focus-visible, .design-block.zieht { outline: 2px solid #c8102e; background: rgba(200, 160, 60, .14); }
.design-block.zieht { cursor: grabbing; }
.design-block.rechts { text-align: right; }
.design-zeile { display: block; height: 1.236em; }
.design-zeile.fett, .design-paar b { font-weight: 700; }
.design-block[data-block="titel"] .design-zeile { height: 1em; font-size: 3em; line-height: 1; }
.design-block[data-block="kunde"] .design-zeile:first-child { color: #8c959a; }
.design-block img { width: 100%; height: 100%; object-fit: contain; object-position: left top; pointer-events: none; }
.design-leer { display: grid; place-items: center; height: 100%; color: #777; background: #eee; }
.design-paar { display: grid; grid-template-columns: 107fr 105.6fr; height: 1.636em; align-items: center; }
.design-paar b { padding-right: .57em; text-align: right; }
.design-block.mit-betrag .design-paar:last-child { height: 1.836em; background: #f4f5f5; }
.design-block.mit-betrag .design-paar:last-child span { font-weight: 700; }
.design-linie { position: absolute; left: 0; right: 0; height: 1px; background: #dee1e2; }
.design-balken, .design-tabelle p { display: grid; grid-template-columns: 263fr 116fr 116fr 117fr; align-items: center; margin: 0; }
.design-balken { position: absolute; left: 0; right: 0; font-weight: 700; color: #fff; }
.design-balken span, .design-tabelle span, .design-tabelle b { padding: 0 2.15em; }
.design-balken span + span, .design-tabelle span { text-align: right; }
.design-tabelle { position: absolute; left: 0; right: 0; }
.design-tabelle p { height: 2.636em; }

/* --- Belege vom Handy: eine Seite ohne Anmeldung, große Flächen zum Antippen --- */
.beleg-seite { margin: 0; }
.beleg { max-width: 30rem; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
.beleg-titel { margin: 8px 0 0; font-size: 1.7rem; color: var(--gold); }
.beleg-wer { margin: 2px 0 18px; color: var(--gedaempft); }
.beleg fieldset { min-width: 0; margin: 0 0 18px; padding: 14px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px; }
.beleg legend { padding: 0 8px; font-size: 1.15rem; font-weight: 600; }
.beleg-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.beleg-knopf { position: relative; display: block; }
.beleg-knopf input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.beleg-knopf span, button.beleg-knopf { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 4.2rem; padding: 10px;
  font: inherit; font-size: 1.15rem; font-weight: 600; text-align: center; color: var(--text); background: var(--feld); border: 2px solid var(--linie); border-radius: 14px; }
.beleg-knopf input:checked + span, button.beleg-knopf.aktiv { color: #1d1606; background: var(--gold); border-color: var(--gold); }
.beleg-knopf input:focus-visible + span { outline: 3px solid var(--magie); }
.beleg-foto span { min-height: 5.5rem; font-size: 1.3rem; border-style: dashed; border-color: var(--gold); }
.beleg-vorschau { display: block; max-width: 100%; max-height: 16rem; margin: 12px auto 0; border-radius: 10px; }
.beleg-klein { display: block; margin-top: 12px; font-size: .9rem; color: var(--gedaempft); }
.beleg-klein input { display: block; max-width: 100%; margin-top: 6px; color: var(--gedaempft); }
.beleg-senden { display: block; width: 100%; min-height: 4.2rem; font: inherit; font-size: 1.3rem; font-weight: 700; color: #1d1606; background: var(--gold); border: 0; border-radius: 14px; cursor: pointer; }
.beleg-senden:disabled { opacity: .6; }
.beleg-danke { margin: 0 0 18px; padding: 18px; font-size: 1.3rem; font-weight: 600; text-align: center; color: #06250f; background: var(--ok); border-radius: 14px; }
.beleg-einrichten { margin: 0 0 18px; padding: 14px; background: var(--flaeche); border: 1px solid var(--gold); border-radius: 16px; }
.beleg-einrichten h2 { margin: 0 0 6px; font-size: 1.15rem; }
.beleg-einrichten p { margin: 0 0 10px; }
.beleg-einrichten ol { margin: 12px 0; padding-left: 1.4rem; font-size: 1.05rem; line-height: 1.5; }
.beleg-spaeter { display: block; margin: 8px auto 0; }
.beleg-qr { max-width: 14rem; margin: 10px 0; padding: 8px; background: #fff; border-radius: 8px; }

/* Forderungsanmeldung (forderung_anmeldung.html): Zeilen der Forderung, Angaben zum Kopieren */
.forderung-form h4, .forderung-gruppe { margin: 18px 0 0; color: var(--gold); }
.forderung-form { align-items: end; }
.forderung-form textarea { min-height: 4.5rem; }
.forderung-zeile { display: grid; grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.forderung-mehr > summary { cursor: pointer; color: var(--gold); }
.forderung-mehr .forderung-zeile { margin-top: 12px; }
.forderung-zeilensumme { margin: 0; text-align: right; }
.forderung-summe { max-width: 30rem; margin-left: auto; padding: 10px 14px; border: 1px solid var(--rand); border-radius: 12px; }
.forderung-summe p { display: flex; justify-content: space-between; gap: 16px; margin: 4px 0; }
.forderung-summe .gesamt { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rand); font-size: 1.1rem; color: var(--gold); }
.forderung-schritte { margin: 10px 0; padding-left: 1.4rem; line-height: 1.6; }
.forderung-angaben { margin: 6px 0 0; padding: 0; list-style: none; }
.forderung-angaben li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.forderung-angaben li > span:nth-child(2) { overflow-wrap: anywhere; white-space: pre-line; }

/* ============================================================================================
   Handy-Ansicht
   Die Seite erkennt das Gerät selbst: schmaler Bildschirm (Handy hochkant) oder Bedienung mit dem
   Finger bei mittlerer Breite (Handy quer, kleines Tablet). Am Schreibtisch bleibt alles, wie es ist.
   ============================================================================================ */

/* Am Schreibtisch: die Menüpunkte liegen wie bisher direkt in der Leiste, Menü-Knopf und Filter-Knopf gibt es nicht */
.leiste-liste { display: contents; }
.leiste-marke, .menue-knopf, .filter-knopf, .filter-schalter, .nur-handy { display: none; }

@media (max-width: 760px), (pointer: coarse) and (max-width: 960px) {
  html { scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html.menue-offen { overflow: hidden; }
  body { min-height: 100dvh; }
  .nur-handy { display: revert; }
  .nur-tisch { display: none; }

  /* --- Leiste oben: bleibt beim Blättern stehen; „Menü“ klappt alle Bereiche als große Flächen auf --- */
  .leiste {
    position: sticky;
    top: 0;
    z-index: 30;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    max-width: none;
    padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
    font-size: 1rem;
    background: #0e0a1f;
    border-bottom: 1px solid var(--rand);
  }
  .leiste a:hover { text-decoration: none; }
  .leiste-marke { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 8px; font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; }
  .leiste-marke img { width: auto; height: 32px; }
  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    font: inherit;
    font-weight: 600;
    color: var(--gold);
    background: rgba(212, 175, 55, .08);
    border: 1px solid var(--rand);
    border-radius: 12px;
    cursor: pointer;
  }
  .menue-striche { width: 18px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .leiste.offen .menue-knopf { color: #1d1606; background: var(--gold); border-color: var(--gold); }
  /* Offenes Menü: Die Seite dahinter ist abgedunkelt; ein Tipp daneben schließt es (app.js) */
  .leiste.offen::after { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(4, 2, 14, .72); cursor: pointer; }
  .leiste-liste { display: none; }
  .leiste.offen .leiste-liste {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: calc(100dvh - 58px - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px max(12px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: #0e0a1f;
    border-bottom: 1px solid var(--rand);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .75);
  }
  .leiste-liste > span { grid-column: 1 / -1; font-size: .9rem; }
  .leiste-liste > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 54px;
    padding: 8px 10px;
    font-size: .95rem;
    font-weight: 600;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    background: #181130;
    border: 1px solid var(--linie);
    border-radius: 12px;
  }
  .leiste-liste > a[aria-current] { color: #1d1606; background: var(--gold); border-color: var(--gold); }
  /* Abkürzungen ausschreiben: „LV“ heißt im Menü „Lohnverrechnung“ */
  .leiste-liste > a[title] { justify-content: flex-start; gap: 0; font-size: 0; }
  .leiste-liste > a[title]::after { content: attr(title); min-width: 0; font-size: .95rem; }
  .leiste-liste > form { grid-column: 1 / -1; }
  .leiste-liste > form .link { width: 100%; min-height: 48px; color: var(--gedaempft); border: 1px solid var(--linie); border-radius: 12px; }

  /* Der große Schriftzug mit der Flasche steht am Handy klein in der Leiste; die Überschrift der Seite bleibt */
  .leiste ~ .seite .kopfzeile { display: none; }
  .seite { padding: 0 max(12px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .seite > .untertitel, .raster > .untertitel { margin-top: 12px; font-size: 2.1rem; }
  .gold.schlicht { font-size: 1.6rem; }
  .seite > * + .fenster, .seite > .fenster + * { margin-top: 14px; }
  .fenster { padding: 16px 14px; border-radius: 16px; backdrop-filter: none; }
  .mitte { min-height: 100dvh; padding-top: calc(16px + env(safe-area-inset-top)); }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
  .kachel { padding: 14px; }
  .kachel strong { font-size: 1.45rem; overflow-wrap: anywhere; }
  .schnellzugriff { justify-content: flex-start; margin: 12px 0 0; }
  .hinweis-box { padding: 12px; }
  /* Feldgruppen dürfen nie breiter werden als der Bildschirm (ein fieldset richtet sich sonst nach seinem breitesten Feld) */
  fieldset, .gruppe .etikett { min-width: 0; }
  .gruppe { padding: 14px 12px; }
  .einrichtung code, .hinweis code { overflow-wrap: anywhere; }

  /* --- Eingaben: 16 px Schrift (sonst vergrößert das iPhone beim Antippen die ganze Seite), Flächen für den Finger --- */
  .feld, .auswahl, textarea, .klein-feld, .tabelle .feld, .datum-feld .feld, .ablehnen .feld { min-height: 48px; font-size: 16px; }
  input[type=date].feld, input[type=time].feld, input[type=month].feld { -webkit-appearance: none; appearance: none; min-width: 0; }
  .knopf { min-height: 52px; }
  .knopf.klein { min-height: 46px; padding: 10px 18px; font-size: 1rem; }
  .klein-feld { padding: 10px 34px 10px 12px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; flex: none; accent-color: var(--gold); }
  .haken { min-height: 44px; gap: 12px; font-size: 1rem; }
  .wahl { min-height: 46px; padding: 8px 18px; }
  input[type=file] { width: 100%; min-height: 48px; }
  input[type=file]::file-selector-button { padding: 12px 16px; }
  summary { padding: 11px 0; }
  .fenster > summary, summary.etikett { padding: 13px 0; margin: -8px 0; }
  .etikett { font-size: .8rem; }
  /* Verweise und kleine Knöpfe im Text: gleiche Schrift, aber eine Trefffläche von gut 44 px Höhe */
  .link, .brotkrumen a, .anlagen a, .zurueck a, .hilfe-titel, .projekt-titel a, .antwort a { padding-block: 12px; }
  .abzeichen:empty { display: none; }
  button.link { padding-block: 10px; }
  .treffer-aktionen, .karten-fuss, .nummer-aktionen, .buch-aktionen, .blaettern, .aktionen, .anlagen { gap: 8px 22px; }
  .schnellwahl { gap: 8px; margin: 10px 0 14px; font-size: .95rem; }
  .schnellwahl .link { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; text-decoration: none; border: 1px solid var(--linie); border-radius: 999px; }
  .schnellwahl .knopf { flex: 1 1 100%; }
  .brotkrumen { margin-top: 12px; font-size: 1rem; }
  .kopieren { width: 48px; }
  .download { min-height: 48px; }

  /* --- Reiter (Buchhaltung, IT TECH, Schaltzentrale): eine Zeile zum seitlichen Wischen statt vier Zeilen --- */
  .buch-reiter, .reiter {
    flex-wrap: nowrap;
    gap: 8px;
    margin-inline: -12px;
    padding: 2px 44px 2px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  }
  .buch-reiter::-webkit-scrollbar, .reiter::-webkit-scrollbar { display: none; }
  .buch-reiter { margin-top: 12px; }
  .buch-reiter.unter { margin: 8px -12px 14px; font-size: 1rem; }
  .reiter { margin-bottom: 14px; border-bottom: 0; }
  .reiter-knopf, .reiter a { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 16px; white-space: nowrap; }
  /* kurz: wenige kurze Namen (Portale) – alle sichtbar: schmälere Knöpfe, keine Reserve fürs Wischen; passt es nicht, bricht die Zeile um */
  .buch-reiter.kurz { flex-wrap: wrap; gap: 6px; padding-right: 12px; overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
  .buch-reiter.kurz .reiter-knopf { padding: 0 12px; }
  .kacheln.portal-bereiche { grid-template-columns: minmax(0, 1fr); }
  .reiter a { border: 1px solid var(--linie); border-radius: 999px; }
  .reiter a[aria-current="page"] { font-weight: 600; color: #1d1606; background: var(--gold); border-color: var(--gold); }

  /* --- Suchen und Filtern: Suchfeld und Knopf zuerst, alles Weitere hinter „Filter“ --- */
  .suchleiste, .buch-filter.klappbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
  .suchleiste > *, .buch-filter.klappbar > * { grid-column: 1 / -1; min-width: 0; }
  .suchleiste > .datum-feld, .buch-filter.klappbar > .halb { grid-column: auto; }
  .suchleiste > .knopf, .buch-filter.klappbar > .knopf { width: 100%; justify-self: stretch; }
  .datum-feld { flex-direction: column; align-items: stretch; gap: 4px; font-size: .88rem; }
  .filter-schalter { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .filter-knopf { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; font-weight: 600; color: var(--gold); border: 1px solid var(--rand); border-radius: 12px; cursor: pointer; }
  .filter-knopf::after { content: "▾"; }
  .filter-knopf .zu, .filter-schalter:checked ~ .filter-knopf .auf { display: none; }
  .filter-schalter:checked ~ .filter-knopf .zu { display: inline; }
  .filter-schalter:checked ~ .filter-knopf::after { content: "▴"; }
  .filter-schalter:focus-visible ~ .filter-knopf { outline: 2px solid var(--gold); outline-offset: 2px; }
  .filter-schalter:not(:checked) ~ .filter-teil { display: none; }
  .filter-knopf.aktiv { background: rgba(212, 175, 55, .14); }
  .buch-filter { gap: 10px; }
  .buch-filter .feld { flex: 1 1 100%; width: 100%; }
  .buch-filter .datum-feld { flex: 1 1 40%; min-width: 0; }
  .buch-filter .knopf { width: 100%; }
  .buch-filter .etikett { flex: 1 1 100%; margin: 0; }
  .buch-filter .etikett .feld { margin-top: 6px; }
  .telefon-suche { grid-template-columns: minmax(0, 1fr); }
  .rg-kopf .knopf, .buch-aktionen > .knopf, .buch-aktionen > form > .knopf, .aktionen .knopf, .ordner-wahl .knopf, .treffer-aktionen .knopf, #quellen .knopf { width: 100%; }
  .aktionen form, .buch-aktionen > form { width: 100%; }
  .rg-jahre { gap: 8px; }
  .rg-jahre .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }

  /* --- Startseite, Projekt, Werkstatt --- */
  .ausgabe .auftraege { max-height: none; overflow: visible; padding-right: 0; }
  .projekt-haupt > .eingabe { grid-area: auto; }
  .projekt-kopf { margin: 4px 0 14px; }
  .projekt-name { padding: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
  .projekt-raster, .projekt-haupt, .projekt-spalte { gap: 14px; }
  .auftrag-kopf { font-size: .9rem; }
  .status { padding: 4px 12px; font-size: .82rem; }
  .oeffnen, .weiter { font-size: 1rem; }
  .karten-fuss .knopf, .karten-fuss .link { margin-left: 0; }
  .ablage { padding: 18px 12px; }
  .aktionen form { gap: 10px; }
  .ablehnen .feld { min-width: 0; flex: 1 1 100%; }
  textarea { min-height: 8rem; }

  /* --- Archiv, Belege, Telefon --- */
  .treffer { padding: 12px 12px 4px; }
  .hilfe-eintrag, .regel-karte { padding-bottom: 12px; }
  .treffer-titel { padding-block: 9px; white-space: normal; overflow-wrap: anywhere; }
  .treffer-kopf, .dokument-kopf { align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; }
  .treffer-aktionen { font-size: 1rem; }
  .merkmale { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .merkmale dt { margin-top: 10px; font-size: .8rem; }
  .aendern-form, .rechte-form, .funktion-ort, .leitung { grid-template-columns: minmax(0, 1fr); }
  /* Forderungsanmeldung: die Beschreibung über die ganze Breite, Datum und Datum nebeneinander; Angaben mit dem Knopf rechts */
  .forderung-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
  .forderung-zeile > label:first-child, .forderung-zeile > label:last-child { grid-column: 1 / -1; }
  .forderung-angaben li { grid-template-columns: minmax(0, 1fr) auto; }
  .forderung-angaben li > .hinweis { grid-column: 1 / -1; }
  .beleg-rahmen { height: 70dvh; min-height: 360px; }
  .nummer-aktionen { font-size: 1rem; }
  .code-feld { font-size: 1.6rem; }
  .geheimnis { font-size: .9rem; }
  .verk-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .verk-zeile [name="p_name"] { grid-column: 1 / -1; }
  /* Sammelrechnung: unten bleiben nur Summe, Kunde und Knopf stehen – so wenig Höhe wie möglich */
  .sammel-leiste { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; margin-inline: -14px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
  .sammel-leiste .sammel-summen { font-size: .85rem; line-height: 1.4; }
  .sammel-leiste > .etikett { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 0; }
  .sammel-leiste > .etikett .feld { margin: 0; }
  .sammel-leiste > .knopf { grid-column: 2; grid-row: 1; width: auto; margin: 0; }
  .hilfe-suche { top: 0; padding-top: calc(8px + env(safe-area-inset-top)); }
  .bank-konten form { width: 100%; }
}

/* Listen und Berichte am Handy: nichts wird abgeschnitten, nichts muss seitlich geschoben werden */
@media (max-width: 700px) {
  .tabelle { font-size: .95rem; }
  .tabelle.ganz { font-size: .95rem; }
  .tabelle.stapel tr { padding: 12px 0; }
  .tabelle.stapel td { padding: 3px 0; overflow-wrap: anywhere; -webkit-hyphens: manual; hyphens: manual; }
  .tabelle.stapel td.paar > span { min-width: 0; }
  .fz-liste .rechte-kurz { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; margin-top: 4px; }
  .stapel td[data-titel]::before { margin-top: 6px; font-weight: 400; }
  .stapel td.kopf-zelle small { font-weight: 400; }
  .tabelle td:first-child > a.link, .tabelle td.kopf-zelle a.link { display: inline-block; min-width: 44px; }
  .tabelle.stapel td.kopf-zelle { font-size: 1.05rem; font-weight: 600; }
  .tabelle.stapel tbody th { display: block; padding: 3px 0; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--text); border: 0; }
  .stapel tbody th[data-titel]::before { content: attr(data-titel); font-size: .75rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--gedaempft); }
  /* Beschriftung links, Wert rechts in einer Zeile: Zahlen und kurze Angaben (Klasse paar) */
  .tabelle.stapel td.zahl[data-titel], .tabelle.stapel tbody th.zahl[data-titel], .tabelle.stapel td.paar[data-titel] {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px; white-space: normal; text-align: right; }
  .tabelle.stapel td.zahl[data-titel]::before, .tabelle.stapel td.paar[data-titel]::before { display: inline; flex: none; margin: 0; text-align: left; }
  .tabelle.stapel td[data-titel]:empty { display: none; }
  .stapel td.zahl { white-space: normal; }
  .stapel tr:has(+ .bearbeiten-zeile) { padding-bottom: 0; border-bottom: 0; }
  .tabelle.stapel .bearbeiten-zeile { padding-top: 0; }
  .stapel tr.summe, .stapel tr.z-summe, .stapel tr.z-ergebnis { font-weight: 600; }
  .bericht.stapel tr.z-gruppe { padding: 18px 0 6px; }
  .bericht.stapel .z-ergebnis td, .bericht.stapel .z-gruppe td { border: 0; }
  .stapel input[type=checkbox] { width: 26px; height: 26px; }
  /* Summenzeilen (Beschriftung über mehrere Spalten, dann der Betrag): beides in einer Zeile */
  .stapel tr:has(> td[colspan]:first-child + td.zahl) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .stapel .zeilen-aktionen { margin-top: 4px; line-height: 2.5; }
  /* Aufträge für die Sammelrechnung ankreuzen: der Haken steht links neben der Karte */
  .tabelle.stapel.mit-haken tr { position: relative; padding-left: 50px; }
  .tabelle.stapel.mit-haken .haken-zelle { position: absolute; left: -6px; top: 6px; padding: 0; }
  .haken-flaeche { display: grid; place-items: center; width: 46px; height: 46px; }
  /* Tabelle bleibt Tabelle (wenige, kurze Spalten), nimmt aber nie mehr als die Breite des Bildschirms */
  .tabelle.fest th, .tabelle.fest td { padding: 9px 6px; overflow-wrap: anywhere; }
  .tabelle.fest td:first-child, .tabelle.fest th:first-child { padding-left: 0; white-space: nowrap; }
  .tabelle.fest td:last-child, .tabelle.fest th:last-child { padding-right: 0; white-space: nowrap; }
  .tabelle.fest td:first-child:has(+ td.rg-betrag) { white-space: normal; }

  /* Berichte mit einer Hauptzahl (Saldenliste, Gewinn & Verlust, Bilanz): Konto, Bezeichnung und Betrag in einer Zeile,
     die übrigen Zahlen klein darunter */
  .eins thead { display: none; }
  .eins, .eins tbody { display: block; }
  .eins tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 0 10px calc(4.2rem + 10px); border-bottom: 1px solid rgba(58, 47, 92, .5); }
  .tabelle.eins td { display: block; padding: 0; border: 0; }
  .tabelle.eins td:first-child { flex: 0 0 4.2rem; margin-left: calc(-4.2rem - 10px); font-variant-numeric: tabular-nums; }
  .tabelle.eins td:nth-child(2) { flex: 1 1 calc(100% - 6.4rem - 12px); min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  .tabelle.eins td.haupt { order: 1; flex: 0 0 6.4rem; font-weight: 600; white-space: nowrap; }
  .tabelle.eins td.zahl:not(.haupt) { order: 2; font-size: .8rem; color: var(--gedaempft); white-space: nowrap; text-align: left; }
  .eins td.zahl:not(.haupt)::before { content: attr(data-titel) " "; }
  .tabelle.eins td.zahl:empty { display: none; }
  .tabelle.eins tr.z-gruppe { display: block; padding: 18px 0 6px; }
  .tabelle.eins tr.z-gruppe td { margin: 0; font-weight: 600; color: var(--gold); }
  .tabelle.eins tr.z-summe td, .tabelle.eins tr.z-ergebnis td { font-weight: 700; }
  .tabelle.eins tr.z-ergebnis { border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }

  /* Rechnungen: oben Datum und Betrag, darunter der Lieferant mit allen Angaben */
  .rg-liste thead { display: none; }
  .rg-liste, .rg-liste tbody { display: block; }
  .rg-liste tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid rgba(58, 47, 92, .5); }
  .rg-liste td { display: block; padding: 0; border: 0; }
  .rg-liste td.rg-breit { display: none; }
  .rg-liste td.rg-datum { font-size: .85rem; color: var(--gedaempft); }
  .rg-liste td.rg-betrag { font-weight: 600; }
  .rg-liste td.rg-wer { grid-column: 1 / -1; grid-row: 2; }
  .rg-liste td.rg-wer > .link { font-size: 1.05rem; font-weight: 600; }
  .rg-neben { margin-top: 2px; font-size: .85rem; line-height: 1.5; }
}