/* Belegablage — Bausteine, die es im Theaterplaner-Grundsystem (style.css) noch
   nicht gibt: Kacheln, Summenband, Diagramme, Inline-Bearbeitung, Ablageflaeche,
   Beleg-Detailseite, PDF-Zurueck-Leiste, Konten-Verwaltung.

   REGEL: ausschliesslich var(--...) aus style.css :root — kein einziges Hex hier,
   sonst blitzt es im Dark Mode weiss auf (siehe Kopf von style.css). Die Klassen-
   NAMEN sind bewusst unveraendert aus der alten stil.css uebernommen (titelzeile,
   knopf, kacheln, tabelle, tipp, ablage, ...) — app.js und hochladen.js greifen
   per Selektor darauf zu, ein Umbenennen haette beides zerschossen. */

/* ---------- Knoepfe (Alias auf .btn, damit alte Templates unveraendert bleiben) */
.knopf, button.knopf {
  cursor: pointer; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 8px; padding: 7px 14px; font-weight: 500; font-size: 13px;
  min-height: 36px; transition: background .12s, border-color .12s;
}
.knopf:hover { background: var(--hover-bg); text-decoration: none; }
.knopf:not(.leise) { background: var(--accent); border-color: var(--accent); color: #fff; }
.knopf:not(.leise):hover { filter: brightness(1.07); }
.knopf.gross { padding: 10px 20px; font-size: 14px; min-height: 44px; }
.knopf.klein { padding: 4px 10px; font-size: 12px; min-height: 32px; }
button:disabled { opacity: .5; cursor: default; filter: none; }

.titelzeile { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.titelzeile h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; }
.zaehler { color: var(--text2); font-size: 13px; align-self: center; font-variant-numeric: tabular-nums; }
.zaehler b { color: var(--text); }
.leise { color: var(--text2); }
.leer { color: var(--text2); padding: 20px 0; }
.fussnote { color: var(--text2); font-size: 12px; margin: 8px 0 0; }
.fussnote.pfad { font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.nowrap { white-space: nowrap; }

.hinweis { padding: 10px 14px; border-radius: var(--radius); margin: 0 0 14px;
  font-size: 13px; border: 1px solid var(--line); background: var(--panel); }
.hinweis.gut  { background: rgba(52,199,89,.1); border-color: rgba(52,199,89,.4); }
.hinweis.warn { background: var(--warn-soft); border-color: rgba(255,159,10,.4); color: var(--warn-text); }
.hinweis.notiz { background: var(--panel); color: var(--text2); }

/* ---------- Braucht deine Hand ---------- */
.handkasten { background: var(--warn-soft); border: 1px solid rgba(255,159,10,.35);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.handkasten.ruhig { background: rgba(52,199,89,.08); border-color: rgba(52,199,89,.3); }
.handkasten h2 { font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text2); margin-bottom: 10px; }
.handkasten p { margin: 0; color: var(--text2); }
.handzahlen { display: flex; gap: 10px; flex-wrap: wrap; }
.handzahl { display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 14px; min-width: 150px;
  min-height: 44px; color: var(--text); text-decoration: none;
  transition: border-color .12s, transform .12s; }
.handzahl:hover { border-color: var(--orange); text-decoration: none; transform: translateY(-1px); }
.handzahl b { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.handzahl span { color: var(--text2); font-size: 12.5px; }
.handzahl.leise b { color: var(--text2); }

/* ---------- Summenband ---------- */
.summenband { display: flex; gap: 14px 32px; flex-wrap: wrap; align-items: flex-end;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.summe-haupt { display: flex; flex-direction: column; }
.summe-schild { color: var(--text2); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 600; }
.summe-zahl { font-size: clamp(1.9rem, 6vw, 2.7rem); line-height: 1.08; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.summe-fuss { color: var(--text2); font-size: 12.5px; }
.summe-neben { display: flex; gap: 22px; flex-wrap: wrap; }
.summe-neben div { display: flex; flex-direction: column; }
.summe-neben span { color: var(--text2); font-size: 11.5px; }
.summe-neben b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* ---------- Kacheln ---------- */
.kacheln { display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kachel { position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--farbe) 8%, var(--panel)), var(--panel) 62%);
  border: 1px solid var(--line); border-left: 3px solid var(--farbe);
  border-radius: var(--radius); padding: 14px; color: var(--text);
  display: block; text-decoration: none; box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s, border-color .12s; }
.kachel:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1);
  border-color: color-mix(in srgb, var(--farbe) 50%, var(--line)); }
.kachel-kopf { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--farbe); display: inline-block; flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe) 18%, transparent); }
.kachel-nr { color: var(--text2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.marke-privat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text2); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.kachel-name { font-weight: 600; }
.kachel-summe { font-size: 1.55rem; font-weight: 680; font-variant-numeric: tabular-nums;
  letter-spacing: -.015em; margin: 5px 0 3px; }
.kachel-fuss { display: flex; gap: 10px; flex-wrap: wrap; color: var(--text2); font-size: 12.5px; }
.kachel-fuss .warn { color: var(--orange); font-weight: 600; }
.kachel-anteil { margin-top: 10px; height: 3px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.kachel-anteil i { display: block; height: 100%; background: var(--farbe); border-radius: 999px; }

/* ---------- Tafeln und Diagramme ---------- */
.doppelt { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .doppelt { grid-template-columns: 1.7fr 1fr; } }
.tafel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); }
.tafel h2 { font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text2); margin-bottom: 12px; }
.svg-huelle { width: 100%; }
.diagramm { width: 100%; height: auto; display: block; overflow: visible; }
.raster { stroke: var(--line-soft); stroke-width: 1; }
.grundlinie { stroke: var(--line); stroke-width: 1; }
.achse { fill: var(--text2); font-size: 11px; }
.achse.klein { font-size: 9px; fill: var(--text2); opacity: .8; }
.monat-feld { fill: transparent; }
.monat:hover .monat-feld { fill: var(--hover-bg); }
.segment { transition: opacity .12s; cursor: default; }
.monat:hover .segment { opacity: .92; }
.diagramm:hover .monat:not(:hover) .segment { opacity: .5; }

.ringzeile { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ring { width: 190px; height: 190px; flex: none; }
.ringgrund { fill: none; stroke: var(--line-soft); stroke-width: 34; }
.ringstueck { transition: opacity .12s; }
.ring:hover .ringstueck { opacity: .55; }
.ring .ringstueck:hover { opacity: 1; }
.ringmitte { fill: var(--text); font-size: 23px; font-weight: 680; }
.ringmitte.klein { font-size: 11px; fill: var(--text2); font-weight: 400; }
.legende { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; }
.legende li { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 9px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.legende li:last-child { border-bottom: 0; }
.legende i { width: 12px; height: 12px; border-radius: 3px; }
.legende .lg-name { color: var(--text); min-height: 22px; display: flex; align-items: center; }
.lg-prozent { color: var(--text2); font-variant-numeric: tabular-nums; }
.lg-betrag { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Filter / Suche ---------- */
.filter { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.suchzeile { display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 4px 4px 4px 12px; box-shadow: var(--shadow); }
.suchzeile:focus-within { border-color: var(--accent); }
.such-symbol { flex: none; fill: none; stroke: var(--text2); stroke-width: 2; stroke-linecap: round; }
.suchzeile input[type=search] { flex: 1; min-width: 96px; border: 0; background: transparent; padding-left: 0; }
.suchzeile input[type=search]:focus { outline: none; box-shadow: none; }
.filterzeile { display: flex; gap: 8px; flex-wrap: wrap; }
.filterzeile select { flex: 1; min-width: 136px; }

/* ---------- Tabelle ---------- */
.tabelle-huelle { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle.klein { font-size: 12px; }
.tabelle th { text-align: left; font-weight: 650; color: var(--text2); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0; background: var(--panel); z-index: 1; }
th.sortbar { cursor: pointer; user-select: none; padding-right: 22px; position: sticky; }
th.sortbar::after { content: '↕'; position: absolute; right: 8px; opacity: .35; font-size: 12px; }
th.sortbar:hover { color: var(--text); }
th.sortbar.sortiert { color: var(--text); }
th.sortbar.sortiert::after { content: '↑'; opacity: 1; color: var(--accent); }
th.sortbar.sortiert.absteigend::after { content: '↓'; }
.tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; height: 40px; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--row-hover); }
.tabelle .rechts, th.rechts { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle .stark { font-weight: 650; }
.tabelle .nr { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabelle .breit { min-width: 11rem; }
.tabelle .schmal { width: 3.6rem; }
.tabelle tr.verworfen td { opacity: .45; text-decoration: line-through; }
.tabelle tr.verworfen select { text-decoration: none; }
.minilink { font-size: 12.5px; margin-left: 8px; white-space: nowrap; }
.tabelle tr.hat-notiz td { border-bottom: 0; }
.notizzeile td { padding: 2px 10px 10px; color: var(--text2); font-size: 12.5px;
  border-bottom: 1px solid var(--line-soft); height: auto; line-height: 1.45; }
.notizzeile:hover { background: transparent; }
.notiz-marke { display: inline-block; margin-right: 7px; padding: 1px 8px;
  border-radius: 999px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 650;
  background: var(--warn-soft); border: 1px solid rgba(255,159,10,.4); color: var(--warn-text); }
.jahrmarke { display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: 11px; white-space: nowrap;
  background: var(--warn-soft); border: 1px solid rgba(255,159,10,.4); color: var(--warn-text); }

/* Marken hinter der Belegnummer: Weiterverrechnen (19.08.2026) und Spesen
   (21.08.2026). Die wv-Klassen wurden am 19.08. im Template vergeben, aber
   nie gestylt -- der Marker stand als nackter Text da. Beide teilen sich
   jetzt eine Regel, damit sie in derselben Zeile auch gleich gross sind. */
.wv-marke { display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: 11px; white-space: nowrap; font-weight: 600;
  border: 1px solid transparent; }
.wv-offen { background: var(--warn-soft); border-color: rgba(255,159,10,.4);
  color: var(--warn-text); }
.spesen-offen { background: var(--accent-soft); border-color: rgba(52,120,246,.35);
  color: var(--accent); }
.wv-ab { background: rgba(52,199,89,.14); border-color: rgba(52,199,89,.4);
  color: #1b7a35; }

/* anklickbare Zellen der Inline-Bearbeitung */
.tipp { cursor: text; }
.tipp:hover { box-shadow: inset 0 0 0 1px var(--line); border-radius: 6px; }
.tipp.luecke { background: var(--warn-soft); }
.tipp input { width: 100%; min-width: 80px; min-height: 32px; padding: 4px 6px;
  background: var(--input-bg); border-color: var(--accent); }
.tipp.gespeichert { animation: blitz 1s ease-out; }
@keyframes blitz { from { background: rgba(52,199,89,.35); } to { background: transparent; } }

.statusform { margin: 0; }
.statusform select { min-height: 32px; padding: 2px 26px 2px 8px; font-size: 12.5px; }
.status-offen     { color: var(--text2); }
.status-geprueft  { color: var(--green); }
.status-unklar    { color: var(--orange); }
.status-verworfen { color: var(--red); }

/* Beleg-Status: Chip (Ansehen) vs. Formular (Bearbeiten) -- beide werden
   IMMER server-seitig gerendert (belege.html), CSS entscheidet ueber
   [data-modus] auf <html>, welche der beiden Varianten sichtbar ist. Kein
   JS-Umbau, kein Flackern -- dataset.modus steht schon vor dem ersten Paint
   (basis.html Kopfskript). Phil 19.08.2026: "UND WENN OFF: KEINE DROPDOWNS
   IN DER LISTE!!! IST DOCH LOGISCH (STATUS...)" -- im Ansehen-Modus darf da
   gar kein <select> im DOM sichtbar sein, auch kein deaktiviertes. */
html[data-modus="ansehen"] .statusform { display: none; }
html[data-modus="bearbeiten"] .status-chip { display: none; }
.status-chip { display: inline-flex; align-items: center; padding: 2px 9px;
  border-radius: 999px; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, var(--panel));
  font-size: 12px; font-weight: 600; }

.kontomarke { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--farbe) 16%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--farbe) 55%, var(--line)); color: var(--text);
  font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kontomarke.gross { font-size: 14px; padding: 4px 12px; }

.fehltliste { white-space: nowrap; }
.fehlt-marke { display: inline-block; margin-right: 4px; padding: 1px 7px;
  border-radius: 999px; font-size: 11.5px;
  background: var(--warn-soft); border: 1px solid rgba(255,159,10,.4); color: var(--warn-text); }
.fehlt-marke.jahr { background: rgba(255,55,95,.12); border-color: rgba(255,55,95,.4); color: var(--red); }

.luecken-gruppe { margin-bottom: 22px; }
.luecken-gruppe h2 { display: flex; align-items: center; gap: 8px;
  color: var(--text); font-size: 15px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.luecken-gruppe h2 .zaehler { margin-left: 4px; }

/* ---------- Detailseite ---------- */
.belegkopf { display: flex; gap: 14px 28px; flex-wrap: wrap; align-items: flex-end;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.belegbetrag { display: flex; flex-direction: column; }
.belegbetrag b { font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.1; font-weight: 680;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.belegbetrag span { color: var(--text2); font-size: 12.5px; }
.belegdaten { display: flex; gap: 20px; flex-wrap: wrap; }
.belegdaten div { display: flex; flex-direction: column; }
.belegdaten span { color: var(--text2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.belegdaten b { font-size: 15px; font-variant-numeric: tabular-nums; }

.detail { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .detail { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.vorschau { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow); position: sticky; top: 72px; }
@media (max-width: 999px) { .vorschau { position: static; } }
.vorschau iframe { width: 100%; height: 74vh; min-height: 400px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.vorschau-fuss { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.keine-vorschau { color: var(--text2); text-align: center; padding: 40px 16px; }

.formularseite { display: flex; flex-direction: column; gap: 14px; }
.felder, .kontowechsel, .jahrwechsel, .stamm, .siegel, .verlauf, .gefahrenzone {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.felder h2, .kontowechsel h2, .jahrwechsel h2, .stamm h2, .siegel h2, .verlauf h2, .gefahrenzone h2 {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text2); margin-bottom: 12px; }
.verlauf { margin-top: 14px; }
.jahrwechsel.betont { border-color: rgba(255,159,10,.5); }
/* Gefahrenzone (Phil 19.08.2026: "bau den Loeschknopf ins Detail Modal
   rein") -- bewusst abgesetzt vom "Speichern"-Knopf oben, roter statt
   grauer Rahmen und ein eigener Knopf-Stil, damit der endgueltige,
   unwiderrufliche Schritt nicht wie ein normales Formularfeld aussieht. */
.gefahrenzone { border-color: rgba(255,55,95,.35); }
.gefahrenzone h2 { color: var(--red); }
.knopf.gefahr { background: transparent; border: 1px solid var(--red); color: var(--red); }
.knopf.gefahr:hover { background: rgba(255,55,95,.1); }
.feldgitter { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
label input, label select, label textarea {
  color: var(--text); font-size: 13.5px; text-transform: none; letter-spacing: 0; font-weight: 400; }
label .leise { text-transform: none; letter-spacing: 0; }
label.voll { margin-top: 10px; }
.kontoreihe { display: flex; gap: 8px; flex-wrap: wrap; }
.kontoreihe select { flex: 1; min-width: 180px; }

.stamm dl, .siegel dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.stamm dt, .siegel dt { color: var(--text2); }
.stamm dd, .siegel dd { margin: 0; }

/* ---------- Ablageflaeche (Hochladen) ---------- */
.aufklapper { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 16px; box-shadow: var(--shadow); overflow: hidden; }
.aufklapper > summary { cursor: pointer; list-style: none; padding: 12px 16px; min-height: 44px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aufklapper > summary::-webkit-details-marker { display: none; }
.aufklapper > summary::before { content: '＋'; color: var(--accent); font-weight: 700; font-size: 16px;
  transition: transform .12s; }
.aufklapper[open] > summary::before { content: '−'; }
.aufklapper > summary:hover { background: var(--hover-bg); }
.aufklapper-titel { font-weight: 650; }
.aufklapper-notiz { color: var(--text2); font-size: 12.5px; }
.aufklapper .ablage-block { padding: 0 16px 16px; }

.ablage-block { display: flex; flex-direction: column; gap: 14px; }
.ablage-vorgaben { display: grid; gap: 11px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ablage-vorgaben .ablage-notiz { grid-column: 1 / -1; margin: 0; }

.ablage { border: 1.5px dashed #c9c9d0; border-radius: var(--radius);
  background: var(--hover-bg); padding: 32px 16px; text-align: center; cursor: pointer;
  min-height: 150px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  transition: border-color .15s, background .15s, transform .12s; }
.ablage:hover { border-color: var(--accent); background: var(--accent-soft); }
.ablage.zieht, .ablage.over { border-color: var(--accent); border-style: solid;
  background: var(--accent-soft); color: var(--accent); transform: scale(1.005); }
.ablage.daneben { border-color: var(--orange); animation: wackeln .4s ease; }
@keyframes wackeln { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.ablage-symbol { color: var(--text2); line-height: 0; }
.ablage.zieht .ablage-symbol, .ablage:hover .ablage-symbol { color: var(--accent); }
.ab-strich { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ablage-gross { font-size: 16px; font-weight: 650; margin: 8px 0 0; }
.ablage-klein { color: var(--text2); font-size: 12.5px; margin: 0; }
.ablage-link { color: var(--accent); text-decoration: underline; }

.ablage-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ab-zeile { background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 9px; padding: 10px 13px;
  transition: border-color .12s; }
.ab-zeile[data-stand="laedt"], .ab-zeile[data-stand="liest"] { border-left-color: var(--accent); }
.ab-zeile[data-stand="fertig"] { border-left-color: var(--green); }
.ab-zeile[data-stand="fehler"] { border-left-color: var(--red); }
.ab-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ab-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--text2); flex: none; }
.ab-zeile[data-stand="liest"] .ab-punkt { background: var(--accent); animation: pulsen 1.2s ease-in-out infinite; }
.ab-zeile[data-stand="fertig"] .ab-punkt { background: var(--green); }
.ab-zeile[data-stand="fehler"] .ab-punkt { background: var(--red); }
@keyframes pulsen { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ab-name { flex: 1; min-width: 8rem; word-break: break-all; font-size: 13px; }
.ab-stand { color: var(--text2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-balken { height: 3px; border-radius: 999px; background: var(--line-soft); margin-top: 8px; overflow: hidden; }
.ab-balken i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .17s linear; }
.ab-zeile[data-stand="fertig"] .ab-balken i { background: var(--green); }
.ab-zeile[data-stand="fehler"] .ab-balken i { background: var(--red); }
.ab-zeile[data-stand="wartet"] .ab-balken { visibility: hidden; }

.ab-ergebnis:empty { display: none; }
.ab-ergebnis { margin-top: 8px; }
.ab-treffer { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.ab-nr { font-variant-numeric: tabular-nums; font-weight: 650; }
.ab-lieferant { flex: 1; min-width: 7rem; }
.ab-betrag { font-variant-numeric: tabular-nums; font-weight: 650; }
.ab-datum { color: var(--text2); font-variant-numeric: tabular-nums; }
.ab-konto { padding: 1px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap;
  background: color-mix(in srgb, var(--farbe, #64748b) 18%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--farbe, #64748b) 55%, var(--line)); }
.ab-oeffnen { font-size: 12.5px; }
.ab-fehler { margin: 8px 0 0; padding: 9px 11px; border-radius: 9px;
  background: rgba(255,55,95,.1); border: 1px solid rgba(255,55,95,.35);
  color: var(--red); font-size: 13px; word-break: break-word; }
.ab-warnung { margin: 8px 0 0; color: var(--warn-text); font-size: 12.5px; }
.ab-frage { margin-top: 9px; padding: 9px 11px; border-radius: 9px;
  background: var(--warn-soft); border: 1px solid rgba(255,159,10,.35);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ab-frage.erledigt { background: rgba(52,199,89,.1); border-color: rgba(52,199,89,.35); }
.ab-frage-text { font-size: 13px; flex: 1; min-width: 12rem; }
.ab-kontowahl { min-height: 32px; padding: 2px 26px 2px 8px; font-size: 13px; }
.ab-frage-meldung { font-size: 12.5px; color: var(--text2); }
.ab-frage-meldung.schlecht { color: var(--red); }

.ablauf { margin: 0; padding-left: 19px; color: var(--text2); font-size: 13.5px; }
.ablauf li { margin-bottom: 7px; }
.ablauf b { color: var(--text); }
.ablage-erklaerung { margin-top: 18px; }

/* ---------- Kurzmeldung nach Inline-Speichern ---------- */
.melder { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 17px; font-size: 13.5px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); z-index: 300; max-width: 92vw; }
.melder.gut  { border-color: var(--green); }
.melder.warn { border-color: var(--orange); }
.melder.schlecht { border-color: var(--red); }

/* ---------- PDF-Ansicht: Leiste mit Zurueck ---------- */
.pdf-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5; }
.pdf-bar .zurueck { display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 8px; padding: 7px 13px; font-weight: 600; font-size: 13.5px;
  text-decoration: none; cursor: pointer; }
.pdf-bar .zurueck:hover { background: var(--hover-bg); }
.pdf-bar .zurueck svg { width: 16px; height: 16px; }
.pdf-bar .pdf-titel { font-weight: 650; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; }
.pdf-bar .grow { flex: 1; }
.pdf-huelle { height: calc(100vh - 57px); }
.pdf-huelle iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* ---------- Konten-Verwaltung (Einstellungen) ---------- */
/* seit Facelift A auch in .stamm-Tabellen und Dialogen — deshalb nicht mehr
   an .konten-tabelle gebunden */
.farbpunkt { width: 14px; height: 14px; border-radius: 4px; display: inline-block;
  background: var(--farbe, var(--text2)); flex: none; }
.konten-formular { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.konten-formular .voll { grid-column: 1 / -1; }
.konten-inaktiv { opacity: .5; }
.konten-inaktiv .kontomarke { text-decoration: line-through; }

/* Umschalter Geschaeftlich/Privat als kleine Pille — es gibt in style.css kein
   fertiges Toggle-Element, deshalb hier neu, aber komplett ueber var(--...). */
.schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  user-select: none; font-size: 13px; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter .spur { width: 38px; height: 22px; border-radius: 999px; background: var(--seg-bg);
  border: 1px solid var(--line); position: relative; transition: background .15s; flex: none; }
.schalter .spur::after { content: ''; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.schalter input:checked + .spur { background: var(--accent); border-color: var(--accent); }
.schalter input:checked + .spur::after { transform: translateX(16px); }
.schalter input:focus-visible + .spur { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Bearbeiten-Schalter in der Topbar (Phil 19.08.2026, ueberarbeitet: "WIESO
   2 BUTTONS???? NUR BEARBEITEN, DEN KANN MAN ON OFF SCHALTEN") -- die
   globale label{...}-Regel oben faerbt Labels grau/klein/grossgeschrieben
   (fuer Formularfeld-Beschriftungen gedacht); hier ueberschrieben, weil das
   ein Schalter in der Kopfzeile ist, keine Feldbeschriftung. */
.modus-schalter { color: var(--text); cursor: pointer; font-size: 13px; }

/* ---------- Berichte-Seite ---------- */
.berichte-karten { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---------- Telegram-Reiter (Facelift Phil 19.08.2026: "alles was ich in TG
   eingeben muss wie Codefenster mit Copy Button schoen dargestellt, mach die
   Anleitung geiler und einfacher") ---------- */
.tg-status-gross { font-size: 14px; padding: 12px 16px; display: flex;
  align-items: center; gap: 8px; }

.tg-schritte { display: flex; flex-direction: column; gap: 10px; margin: 0 0 0 4px; padding-left: 18px; }
.tg-schritte li { line-height: 1.5; font-size: 13.5px; }
.tg-schritt-text { display: block; }

/* Code-Fenster mit Kopier-Knopf -- fuer /newbot (statisch) und /start <code>
   (dynamisch nach dem Code holen), dieselbe Optik fuer beide. */
.tg-code { display: flex; align-items: center; gap: 8px; background: var(--search-bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0 0; }
.tg-code code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: var(--text); }
.tg-copy-knopf { flex-shrink: 0; cursor: pointer; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); border-radius: 6px; padding: 5px 10px;
  font-size: 12px; font-weight: 500; transition: background .12s, border-color .12s, color .12s; }
.tg-copy-knopf:hover { background: var(--hover-bg); }
.tg-copy-knopf.tg-kopiert { background: rgba(52,199,89,.15); border-color: rgba(52,199,89,.4); color: var(--green); }

.tg-restlaufzeit { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums;
  margin: 6px 0 0; }
/* Kein display:none als Vorgabe hier -- das Element steckt sowieso in
   #tg-code-block, das per Inline-style="display:none" im Template startet.
   Ein zweites display:none auf der Klasse hier wuerde telegram.js' simples
   style.display='' (das Standardmuster fuer alle hinweis-Elemente) wieder
   verdecken -- genau der Bug, der beim Klick-Test 19.08.2026 auffiel. */

/* Die drei Schalter in EINER Karte, durch eine Linie getrennt statt drei
   separaten Karten -- "ordentlich gruppiert" statt drei fast leere Kacheln. */
.tg-einstellung { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.tg-einstellung:first-of-type { padding-top: 0; border-top: none; }
.tg-einstellung .fussnote { margin: 6px 0 0; }
.tg-einstellung .hinweis { margin: 8px 0 0; }

@media (min-width: 640px) { /* Platzhalter fuer evtl. spaetere Breakpoints, bewusst leer */ }

/* Wer Bewegung nicht mag, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .ablage.zieht { transform: none; }
  .kachel:hover, .handzahl:hover { transform: none; }
}

/* Aufbewahrungssperre (GeBueV/OR 958f, 20.08.2026): steht anstelle des
   Loeschknopfes, wenn der Beleg aufbewahrungspflichtig ist. Bewusst ruhig
   gehalten -- das ist eine Auskunft, kein Fehler. */
.gefahrenzone .gesperrt {
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg2, transparent);
}
.siegel dd { font-variant-numeric: tabular-nums; }

/* Handbuch (20.08.2026). Nur Layout fuer den Fliesstext -- Panels, Tabellen und
   Fussnoten kommen aus den bestehenden Klassen (.card/.tabelle/.fussnote). */
.hb-inhalt { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 18px; }
.hb-inhalt a { font-size: 13px; color: var(--text2); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.hb-inhalt a:hover { color: var(--text); }
.hb-liste { margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 7px;
  font-size: 14px; line-height: 1.55; }
.hb-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px;
  margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.hb-dl dt { color: var(--text2); font-weight: 600; white-space: nowrap; }
.hb-dl dd { margin: 0; }
.card p { font-size: 14px; line-height: 1.6; }
.card p + p { margin-top: 10px; }
.hb-wichtig { border-color: rgba(255,55,95,.35); }
.hb-warnung { border-left: 3px solid var(--red); padding-left: 12px; margin-top: 12px; }

/* ==========================================================================
   Aufräumen 21.08.2026 — Phil: "UI überarbeiten ist überladen mach alles
   kompakter, dunkelblaue Textfarbe in night mode sehr schlecht ... Räum auf,
   sieht zu wenig leicht und locker aus."

   Bewusst als EIN Block am Ende statt verstreuter Änderungen oben: so ist in
   einem Blick lesbar, was zu diesem Auftrag gehört, und ein Rückbau ist ein
   Löschen statt einer Archäologie.
   ========================================================================== */

/* --- 1. Die dunkelblaue Schrift: es gab NIE eine Regel für Links ----------
   Gemessen am 21.08.2026 im Dark Mode: `.tabelle .nr a` stand auf
   rgb(0,0,238) — das ist die BROWSER-Voreinstellung für Links, nicht unsere
   Farbe. Kontrast gegen den Zeilenhintergrund: 1.81:1 (lesbar wäre ab
   4.5:1). Betroffen war jeder Link ausserhalb von Sidebar (.nav-item),
   Knöpfen (.knopf) und Handbuch-Inhaltsverzeichnis — also u.a. jede
   Belegnummer in der Liste.
   var(--accent) ist im Dark Mode #4c8bff und im Hellen #3478f6, beide
   nachgemessen über 4.5:1. Unterstrichen wird erst beim Zeigen: in einer
   Tabelle voller Nummern wäre eine Dauer-Unterstreichung wieder Unruhe. */
.content a { color: var(--accent); text-decoration: none; }
.content a:hover { text-decoration: underline; }
/* Knöpfe, Sidebar und Reiter tragen ihre eigene Farbe — die dürfen von der
   Regel oben nicht eingefärbt werden. */
.content a.knopf, .content a.nav-item, .content a.s2-tab { text-decoration: none; }
.content a.knopf:not(.leise) { color: #fff; }
.content a.knopf.leise { color: var(--text); }
.content a.s2-tab { color: var(--text2); }
.content a.s2-tab.active { color: var(--text); }
/* Im Fliesstext (Handbuch, Hinweiskästen) darf der Link ruhig sofort als
   solcher erkennbar sein — dort steht er einzeln, nicht hundertfach. */
.hinweis a, .fussnote a, .hb-liste a, .card p a { text-decoration: underline; }

/* --- 2. Kompakter: Höhen und Abstände ------------------------------------
   Jede Zahl hier ist die alte minus rund ein Fünftel. Nicht mehr: eine
   Tabelle, die auf 28px Zeilenhöhe geht, liest sich am Handy nicht mehr,
   und Phils häufigster Arbeitsplatz für die Lückenliste IST das Handy. */
.tabelle td { padding: 6px 10px; height: 34px; }
.tabelle th { padding: 7px 10px; }
.tabelle { font-size: 12.5px; }
.knopf, button.knopf { min-height: 32px; padding: 6px 12px; }
.knopf.gross { min-height: 38px; padding: 8px 16px; font-size: 13.5px; }
.knopf.klein { min-height: 28px; padding: 3px 9px; }
.titelzeile { margin-bottom: 12px; }
.titelzeile h1 { font-size: 20px; }
.tafel, .card { padding: 13px 14px; }
.tafel h2 { margin-bottom: 9px; font-size: 12px; }
.hinweis { padding: 8px 12px; margin-bottom: 10px; }
.fussnote { font-size: 11.5px; margin-top: 6px; }
.berichte-karten { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kacheln { gap: 10px; margin-bottom: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.summenband { padding: 13px 15px; margin-bottom: 12px; gap: 12px 26px; }
/* Die Summenzahl war das lauteste Element der Seite und drückte alles
   andere an den Rand — sie darf gross bleiben, aber nicht so gross. */
.summe-zahl { font-size: clamp(1.55rem, 4.2vw, 2.05rem); }
.filter { margin-bottom: 12px; }
.filterzeile { gap: 6px; }

/* Abstand zwischen den Abschnitten EINER Seite an einer Stelle statt als
   style="margin-top:16px" in jedem Template (dort steht es weiterhin, wird
   hier aber überstimmt — ein Aufräumen der Templates gehört nicht in
   dieselbe Welle wie eine Farbkorrektur). */
.content section.tafel[style], .content section.card[style] { margin-top: 12px !important; }

/* --- 3. Leichter: weniger Kanten und Schatten -----------------------------
   "sieht zu wenig leicht und locker aus" — die Ursache ist nicht zu wenig
   Weissraum, sondern zu viel Rahmen: jede Karte trug gleichzeitig eine
   1px-Linie UND einen doppelten Schlagschatten, und im Dark Mode ist der
   Schatten (rgba(0,0,0,.5)) auf fast schwarzem Grund ohnehin unsichtbar --
   er macht die Kante nur schmutzig. Panels bekommen deshalb entweder Linie
   ODER Schatten, nicht beides. */
.tafel, .card, .tabelle-huelle, .summenband {
  box-shadow: none;
  border-color: var(--line-soft);
}
:root[data-theme="dark"] .tafel,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .tabelle-huelle,
:root[data-theme="dark"] .summenband { border-color: var(--line); }
/* Trennlinien in der Tabelle: die durchgehende Linie unter JEDER Zeile ist
   das, was eine Liste schwer macht. Sie bleibt, wird aber leiser. */
.tabelle td { border-bottom-color: var(--line-soft); }
:root[data-theme="dark"] .tabelle td { border-bottom-color: rgba(255,255,255,.05); }

/* --- 4. Zahlungsart-Auswahl (input + datalist) ---------------------------
   Ein <input list="..."> ist bewusst KEIN <select>: Phil wollte
   "Dropdown ... aber auch freie Eingabe erlauben". Das Feld bleibt also ein
   Textfeld (jede Eingabe zulässig), bekommt aber die Vorschlagsliste des
   Browsers dazu. Ein <select> mit einem "Sonstiges"-Zweig wäre die
   umständlichere Antwort auf dieselbe Frage. */
input[list]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
input[list]:hover::-webkit-calendar-picker-indicator { opacity: .8; }

/* --- 5. Passwort-/Suchfelder waren im Dark Mode weiss ---------------------
   Gemessen 21.08.2026 (Screenshot Telegram-Reiter): das Token-Feld rendert
   weiss auf dunklem Grund. Ursache dieselbe Familie wie bei den Links: die
   Eingabefeld-Regel in style.css:124 zaehlt die Typen einzeln auf
   (text/date/time/number/email) — password und search stehen NICHT drin,
   also faellt jedes solche Feld auf die Browser-Voreinstellung zurueck
   (weisser Hintergrund). Betroffen: Bot-Token, beide Login-Felder, alle
   Passwort-Wechsel-Felder, die Belegsuche. */
input[type=password], input[type=search] {
  width: 100%; padding: 9px 11px; background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 8px; min-height: 38px;
  color: var(--text);
}
input[type=password]:focus, input[type=search]:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Die Suchzeile der Belegliste bringt ihr eigenes rahmenloses Feld mit --
   deren Regeln (suchzeile input[type=search], border:0, transparent) stehen
   weiter oben und gewinnen durch hoehere Spezifitaet. Nachgeprueft. */

/* ==========================================================================
   Facelift A „Werkzeug" (21.08.2026, Phils Wahl) — Kennzahlen-Band,
   Konto-Anteilszeilen, Stammdaten-Dialoge. Wieder EIN Block, s. oben.
   ========================================================================== */

/* Kennzahlen-Band (Übersicht): grosse Zahl + verlinkte Warnzahlen in EINEM
   Panel. Senkrechte Haarlinien trennen die Werte — kein Kasten pro Zahl. */
.kzband { display:flex; align-items:flex-end; flex-wrap:wrap; gap:0;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:16px 6px 14px; margin-bottom:12px; }
:root[data-theme="dark"] .kzband { border-color:var(--line); }
.kzband .kz { display:flex; flex-direction:column; padding:0 20px;
  border-left:1px solid var(--line-soft); text-decoration:none; color:var(--text); }
.kzband .kz:first-child { border-left:0; }
.kzband .kz b { font-size:22px; font-weight:600; line-height:1.15; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; }
.kzband .kz.haupt b { font-size:34px; font-weight:700; letter-spacing:-.02em; }
.kzband .kz span { font-size:11px; color:var(--text2); text-transform:uppercase;
  letter-spacing:.07em; margin-top:2px; }
.kzband a.kz:hover b { color:var(--accent); }
.kzband .warnzahl b { color:var(--warn-text); }
:root[data-theme="dark"] .kzband .warnzahl b { color:#fbbf74; }

/* Konto-Anteilszeilen (Übersicht): eine Zeile pro Konto, Balken = Anteil am
   Total in der Kontofarbe. Ersetzt die Kachel-Wand. */
.konto-band { padding:6px 16px; }
/* .content a faerbt jeden Link in Akzentblau (die Regel vom Vormittag) und
   ist spezifischer als .konto-zeile allein — deshalb hier mit a. davor:
   die Zeile ist zwar ein Link, soll aber wie eine Tabellenzeile aussehen,
   nur der Kontoname reagiert beim Zeigen. */
.content a.konto-zeile { display:grid; grid-template-columns:16px minmax(150px,220px) 1fr minmax(120px,170px) 110px;
  gap:12px; align-items:center; height:42px; text-decoration:none !important;
  color:var(--text); border-bottom:1px solid var(--line-soft); }
.konto-zeile:last-child { border-bottom:0; }
.konto-zeile:hover .kz-konto b { color:var(--accent); }
.konto-zeile > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.konto-zeile .punkt { width:9px; height:9px; border-radius:3px; background:var(--farbe); }
.kz-spur { height:7px; background:var(--line-soft); border-radius:4px; overflow:hidden; }
:root[data-theme="dark"] .kz-spur { background:rgba(255,255,255,.06); }
.kz-spur i { display:block; height:100%; border-radius:4px; min-width:2px;
  transition:width .4s ease; }
.kz-anzahl { text-align:right; color:var(--text2); font-size:12.5px; }
.kz-anzahl .warn { color:var(--warn-text); }
:root[data-theme="dark"] .kz-anzahl .warn { color:#fbbf74; }
.kz-summe { text-align:right; font-weight:650; font-size:14px; }
.num { font-variant-numeric:tabular-nums; }
@media (max-width:640px) {
  /* Spezifität: die Desktop-Regel ist .content a.konto-zeile (0,2,1) —
     .konto-zeile (0,1,0) verlor, auch im schmalen Viewport (gemessen
     22.08.). Deshalb hier dieselbe Selektor-Tiefe. */
  .content a.konto-zeile { grid-template-columns:16px 1fr auto; }
  .content a.konto-zeile .kz-spur, .content a.konto-zeile .kz-anzahl { display:none; }
}

/* Stammdaten-Tabellen (Einstellungen): Anzeige-Zeilen, Stift beim Zeigen.
   .rahmenlos hebt die doppelte Einfassung auf, wenn die Tabelle schon in
   einer .card steckt (sonst Rahmen im Rahmen). */
.tabelle-huelle.rahmenlos { border:0; box-shadow:none; background:transparent; border-radius:0; }
.tabelle.stamm td { height:38px; }
.tabelle.stamm .abschneiden { max-width:260px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.kartkopf { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.kartkopf h3 { margin:0; }
.chip { display:inline-block; padding:1px 9px; border-radius:999px; font-size:11px;
  border:1px solid var(--line); color:var(--text2); white-space:nowrap; }
.chip-an { color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); }
.stiftknopf { opacity:.35; background:none; border:0; color:var(--text); cursor:pointer;
  padding:5px; border-radius:6px; line-height:0; }
tr:hover .stiftknopf, .stiftknopf:focus-visible { opacity:1; }
.stiftknopf:hover { color:var(--accent); background:var(--accent-soft); }

/* Der Bearbeiten-Dialog: natives <dialog>, Formular-Stil wie der Rest. */
.stamm-dialog { border:1px solid var(--line); border-radius:14px; background:var(--panel);
  color:var(--text); padding:18px; width:min(400px, calc(100vw - 40px));
  box-shadow:0 18px 60px rgba(0,0,0,.4);
  /* margin:auto zentriert ein natives <dialog> — das steht zwar schon in den
     Browser-Voreinstellungen, aber der globale *{margin:0}-Reset in style.css
     überschreibt genau diese Voreinstellung: ohne die Zeile klebt das Modal
     oben links (gemessen am Screenshot, nicht geraten). */
  margin:auto; }
.stamm-dialog::backdrop { background:rgba(0,0,0,.45); backdrop-filter:blur(2px); }
.stamm-dialog h3 { font-size:14.5px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.stamm-dialog label { display:block; font-size:11px; color:var(--text2);
  text-transform:uppercase; letter-spacing:.05em; margin:10px 0 0; }
.stamm-dialog label input { display:block; width:100%; margin-top:3px;
  text-transform:none; letter-spacing:0; font-size:13.5px; }
.stamm-dialog label.zeilig { display:flex; align-items:center; gap:8px;
  /* flex-direction ausdruecklich: style.css setzt GLOBAL label{flex-direction:
     column} — nur display:flex zu ueberschreiben liess die Checkbox ueber dem
     Text stehen (per Regel-Suche im Browser gemessen, nicht geraten). */
  flex-direction:row;
  text-transform:none; letter-spacing:0; font-size:13px; color:var(--text); margin-top:12px; }
.stamm-dialog label.zeilig input { width:auto; margin:0; display:inline-block; }
.dialog-fuss { display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-top:16px; }
.rotknopf { color:#e5484d; border-color:transparent; }
.rotknopf:hover { background:rgba(229,72,77,.1); }


/* Konto-Spalte der Belegliste (Facelift A, Teil 2): Punkt + Kurzname statt
   Farb-Pille in jeder Zeile — 84 gleiche Pillen untereinander sind Laerm,
   ein 9px-Punkt traegt dieselbe Information. */
.konto-leise { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.konto-leise .farbpunkt { width:9px; height:9px; border-radius:3px; }


/* Duplikat-Prüfliste (22.08.2026): zwei Belege nebeneinander, ein Urteil. */
.dup-paar { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .dup-paar { grid-template-columns:1fr; } }
.dup-beleg { border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
:root[data-theme="dark"] .dup-beleg { border-color:var(--line); }
.dup-kopf { display:flex; gap:10px; align-items:baseline; }
.dup-mitte { display:flex; justify-content:space-between; gap:10px; width:100%; }
.dup-mitte .abschneiden { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ==========================================================================
   Mobile-Feinschliff (22.08.2026, bei echten 375px im iframe gemessen).
   Kein Overflow-Problem gefunden (alle Tabellen scrollen in .tabelle-huelle) —
   nur zwei enge Stellen auf der Übersicht:
   ========================================================================== */
@media (max-width: 640px) {
  /* Die Kontosumme klebte am Namen (bei ~219px) statt rechtsbündig am
     Zeilenende — am Handy sah es aus, als fehlte sie. Jetzt: Name nimmt den
     Platz, Summe rechts. auto-Spalte statt fixer 90px, damit lange Summen
     nicht abgeschnitten werden. */
  .content a.konto-zeile { grid-template-columns: 16px 1fr auto; }
  .content a.konto-zeile .kz-summe { text-align: right; padding-left: 10px; }
  /* Der privat-Chip war Teil der ellipsis-Zelle und wurde bei langen Namen
     («Seli & Phil») zu «PR…» abgeschnitten. Am Handy weglassen — die
     9000er-Nummer sagt ohnehin schon «privat», und die Berichte trennen
     geschäftlich/privat sauber. */
  .content a.konto-zeile .kz-konto .marke-privat { display: none; }
  /* Filter-Zeile: der «Filtern»-Knopf stand knapp am rechten Rand.
     Volle Breite in der zweiten Reihe, klar tippbar. */
  .filterzeile { gap: 6px; }
  .filterzeile select { min-width: 44%; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Anmeldung / Registrierung — Entwurf A "ruhige Karte" (Phil, 22.08.2026)
   Vorher benutzten die Vorlagen unter templates/auth/ sieben Klassen, fuer die
   es KEINE einzige Regel gab: die Seiten waren praktisch ungestylt.
   (Am 22.08. abends einmal durch eine parallele Session verloren gegangen und
   wieder eingesetzt — falls sie erneut fehlen: hier ist die Quelle.)
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-wrap {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--bg);
}
.auth-card {
  width: 100%; max-width: 380px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 32px 30px 26px;
}
/* Wortmarke als Inline-SVG statt Emoji (Kanon: keine Emojis in der
   Oberflaeche). Faerbt sich ueber currentColor mit. */
.auth-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.auth-logo svg { flex: none; color: var(--accent); }
.auth-logo b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

.auth-titel { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 3px; }
.auth-sub   { font-size: 13px; color: var(--text2); margin-bottom: 22px; }

.auth-feld { margin-bottom: 14px; }
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card input[type=text] {
  font-size: 14px; border-radius: 9px; padding: 10px 12px;
  transition: border-color .12s, box-shadow .12s;
}
/* text-transform/letter-spacing/font-weight ausdruecklich zuruecksetzen: die
   nackte `label`-Regel weiter oben (fuer die Konten-Formulare gedacht) macht
   JEDES Label zu Grossbuchstaben und ueberstimmt `label.fld`, das dazu nichts
   sagt. Auf der Anmeldung stand deshalb "E-MAIL" statt "E-Mail" — am
   Bildschirm gemessen, nicht vermutet. */
.auth-card label.fld {
  font-size: 12.5px; margin-bottom: 5px;
  text-transform: none; letter-spacing: normal; font-weight: 500;
}

.auth-knopf {
  width: 100%; font-size: 14px; font-weight: 600; padding: 11px 16px;
  border-radius: 9px; margin-top: 4px;
}

.auth-trenner {
  display: flex; align-items: center; gap: 10px; margin: 16px 0;
  color: var(--text2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
}
.auth-trenner::before, .auth-trenner::after {
  content: ""; height: 1px; background: var(--line); flex: 1;
}

/* Passkey: sekundaer, und im gesperrten Zustand sagt die Oberflaeche WARUM —
   statt einen Knopf zu zeigen, der ins Leere greift. */
.auth-passkey {
  width: 100%; font: inherit; font-size: 13.5px; font-weight: 500;
  padding: 10px 16px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-passkey:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.auth-passkey:disabled { opacity: .55; cursor: not-allowed; }
.auth-pk-grund {
  font-size: 11.5px; color: var(--warn-text); background: var(--warn-soft);
  border-radius: 7px; padding: 7px 10px; margin-top: 8px; line-height: 1.45;
}
.auth-pk-melden { font-size: 12px; margin-top: 8px; text-align: center; color: var(--text2); }

.auth-fuss { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--text2); }
.auth-fuss a { color: var(--accent); text-decoration: none; }
.auth-fuss a:hover { text-decoration: underline; }

.auth-fehler, .auth-meldung {
  font-size: 13px; border-radius: 9px; padding: 9px 12px; margin-bottom: 16px;
  line-height: 1.45;
}
.auth-fehler  { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.auth-meldung { background: var(--accent-soft); color: var(--accent); }

/* --------------------------------------------------------------------------
   Prüfen — Stapeldurchgang durch die offenen Belege (Phil 27.08.2026).
   Nutzt bewusst dieselben Bausteine wie die Belegseite (.detail/.vorschau/
   .feldgitter/.knopf) — hier stehen nur die paar Stücke, die es dort nicht
   gibt: der Zähler, die Kopfzeile im Formular und die feste Knopfleiste.
   -------------------------------------------------------------------------- */
.pruef-zaehler { font-size: 12.5px; font-weight: 500; color: var(--text2);
  margin-left: 10px; white-space: nowrap; }

.pruefform { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px; }
.pruef-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pruef-status { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; }
.pruef-quelle { font-size: 11.5px; color: var(--text2); margin-left: auto; }
/* Lieferant ist das längste Feld — zwei Spalten des auto-fit-Rasters. */
@media (min-width: 560px) { .pruefform .feldgitter label.voll-2 { grid-column: span 2; } }

/* Die zwei fetten Knöpfe. Sticky, damit sie beim Scrollen im Formular
   erreichbar bleiben (auf dem Handy steht sonst die Bemerkung dazwischen).
   `bottom` liegt auf der iPhone-Sicherheitszone statt auf 0 -- sonst schiebt
   sich die Leiste unter den Home-Indikator und der Daumen trifft die
   System-Geste statt den Knopf (Phil 27.08.2026: "bei iphone kommt das in die
   homebutton leiste rein"). */
.pruefleiste { display: flex; gap: 12px; position: sticky;
  bottom: env(safe-area-inset-bottom, 0px);
  padding: 14px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  margin-top: 6px; background: var(--panel); z-index: 3;
  border-top: 1px solid var(--line);
  /* Die Leiste ist das letzte Element im Formular -- das Polster des
     Formulars darunter wegziehen, sonst klebt sie nicht buendig unten. */
  margin-bottom: -16px; }
/* "viel grösser" (Phil 27.08.2026): Daumengrösse, nicht Mausgrösse. 72 px hoch
   ist gut das Doppelte eines normalen Knopfes -- die beiden sind auf dieser
   Seite die einzigen Bedienelemente, die man im Stapel hundertmal trifft. */
.pruefleiste .knopf { flex: 1 1 0; justify-content: center; gap: 10px;
  font-size: 19px; font-weight: 700; min-height: 72px; padding: 14px 18px;
  border-radius: 12px; }
.pruefleiste .knopf svg { width: 26px; height: 26px; flex: none; }
.knopf.pruef-ja, button.knopf.pruef-ja { background: var(--green);
  border: 1px solid var(--green); color: #fff; }
.knopf.pruef-ja:hover { background: var(--green); filter: brightness(1.07); }
.knopf.pruef-ja:active { filter: brightness(.94); }
/* Beide gleich breit (flex-basis 0 + gleiches Wachstum). Ein Prozent-Basiswert
   fuer "Ueberspringen" waere hier falsch: das Wort ist so lang, dass seine
   Mindestbreite gewinnt -- gemessen 27.08. war der HAUPTknopf dadurch der
   schmalere (142 gegen 178 px). */

/* Rote Umrandung der Felder, die Hand brauchen (Phil 27.08.2026).
   Zwei Stufen, beide rot -- durchgezogen heisst "Pflichtangabe fehlt",
   gestrichelt "die Erkennung war sich nicht sicher". Die Feldrahmen kommen
   aus `input:not([type])` in style.css (Spezifitaet 0,1,1; die Felder hier
   tragen kein type-Attribut, `input[type=text]` greift also NICHT -- am
   lebenden Objekt nachgemessen). Die Selektoren unten liegen mit 0,2,2
   darueber. */
.pruefform label.feld-fehlt > input,
.pruefform label.feld-fehlt > select,
.pruefform label.feld-fehlt > textarea {
  border: 2px solid var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent);
}
.pruefform label.feld-unsicher > input,
.pruefform label.feld-unsicher > select,
.pruefform label.feld-unsicher > textarea {
  border: 2px dashed var(--red);
}
/* Beim Hineinklicken bleibt es rot -- das Feld ist ja noch nicht in Ordnung.
   Nur der Ring wird kraeftiger, damit man trotzdem sieht, wo man tippt. */
.pruefform label.feld-fehlt > :is(input, select, textarea):focus,
.pruefform label.feld-unsicher > :is(input, select, textarea):focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 28%, transparent);
}
.pruefform label.feld-fehlt, .pruefform label.feld-unsicher { color: var(--red); }
/* Kleine Marke neben der Beschriftung -- Farbe allein reicht nicht (rot/grau
   ist genau die Unterscheidung, die eine Rot-Gruen-Schwaeche verschluckt).
   Beschriftung und Marke stehen zusammen in .feldkopf: <label> ist hier ein
   Spalten-Flexbox, ein loser <span> daneben wuerde zur eigenen, ueber die
   volle Breite gestreckten Zeile (gemessen 27.08. -- sah aus wie ein roter
   Balken ueber dem Feld). */
.feldkopf { display: flex; align-items: center; justify-content: space-between;
  gap: 6px; min-width: 0; }
.feldmarke { font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  padding: 1px 5px; border-radius: 5px; flex: none;
  border: 1px solid var(--red); color: var(--red); }
.feldmarke.fehlt { background: var(--red); border-color: var(--red); color: #fff; }

/* Hinweiszeile ueber dem Formular, passend zur roten Markierung darunter. */
.hinweis.pruef-offen { background: color-mix(in srgb, var(--red) 9%, transparent);
  border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.hinweis.pruef-offen b { color: var(--red); }

.pruef-fertig { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 40px 20px; box-shadow: var(--shadow);
  text-align: center; color: var(--text2); }
.pruef-fertig .gross { font-size: 19px; font-weight: 700; color: var(--text);
  margin-bottom: 6px; }
.pruef-fertig .knopf { margin-top: 16px; }

@media (max-width: 640px) {
  /* Auf dem Handy UEBEREINANDER statt nebeneinander, beide ueber die volle
     Breite. Nebeneinander passt "Ueberspringen" nur, indem es dem gruenen
     Knopf die Breite wegnimmt (gemessen bei 390 px: 142 gegen 178 -- der
     Hauptknopf war der kleinere). Gestapelt sind beide so breit wie der
     Bildschirm.
     Reihenfolge mit Absicht: "Ueberspringen" unten, wo der Daumen von selbst
     hinkommt. Ein Fehlgriff dort kostet nichts (der Beleg bleibt offen), ein
     Fehlgriff auf "Geprueft" muesste man suchen und zuruecknehmen. */
  .pruefleiste { flex-direction: column; gap: 10px; }
  .pruefleiste .knopf { width: 100%; min-height: 68px; font-size: 18px; }
  .pruefleiste .knopf.pruef-weiter { min-height: 58px; font-size: 16.5px; }
  .pruefleiste .knopf svg { width: 24px; height: 24px; }
  .pruef-quelle { display: none; }
}


/* --------------------------------------------------------------------------
   iPhone-Sicherheitszonen (Phil 27.08.2026: "oben und unten noch rand bei der
   Oberfläche weil bei iphone kommt das in die homebutton leiste rein").

   basis.html setzt `viewport-fit=cover` -- damit reicht die Seite bewusst bis
   in die Ecken, und die Ränder muss das CSS selbst setzen. Ohne das liegt die
   Kopfleiste unter der Statusleiste/Dynamic Island und der untere Seiteninhalt
   unter dem Home-Indikator; als Web-App auf dem Startbildschirm (ohne
   Browser-Leisten) ist es am schlimmsten.

   Steht hier in belege.css und nicht in style.css: style.css ist die
   übernommene Theaterplaner-Grundlage, belege.css sind unsere eigenen
   Zutaten -- und weil belege.css NACH style.css geladen wird, gewinnt es.
   -------------------------------------------------------------------------- */
/* 100dvh statt 100vh: auf iOS zählt 100vh die Fläche UNTER den ein- und
   ausfahrenden Safari-Leisten mit, dann ist der untere Rand der Seite nicht
   erreichbar. Die 100vh-Zeile in style.css bleibt als Rückfall stehen --
   Browser ohne dvh lassen diese Zeile hier einfach fallen. */
#app { height: 100dvh; }
.topbar {
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.sidebar { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
.content {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
/* Die Handy-Masse aus style.css (Block @media max-width:820px: Kopfleiste
   8px/10px und auto-Hoehe, Inhalt 12px) muessen hier WIEDERHOLT werden --
   diese Datei laedt nach style.css, also wuerden die Regeln oben sonst die
   engeren Handy-Abstaende ueberschreiben und auf dem iPhone 20px Rand
   erzwingen. Gleiche Werte wie dort, nur um die Sicherheitszone ergaenzt. */
@media (max-width: 820px) {
  .topbar {
    height: auto; min-height: 52px;
    padding: calc(8px + env(safe-area-inset-top, 0px))
             max(10px, env(safe-area-inset-right, 0px)) 8px
             max(10px, env(safe-area-inset-left, 0px));
  }
  .content {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}

/* Checkbox mit Text in einer Zeile (Belegseite, Block «Weiterverrechnen», 22.09.2026) */
label.haken { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 6px 0; }
label.haken input[type="checkbox"] { width: auto; min-height: 0; margin: 0; }