/* Atlas ROMI – Gestaltung. Navy und Gold, ruhige Akte. Keine externen Dienste. */
:root {
  --navy: #14213D;
  --navy-tief: #0D162A;
  --gold: #C9A227;
  --gold-hell: #E8D28A;
  --papier: #F6F3EC;
  --papier-dunkel: #ECE7DA;
  --tinte: #1B1B1B;
  --grau: #6B6B6B;
  --linie: #D8D2C2;
  --weiss: #FFFFFF;
  --rot: #9C2F2F;
  --gruen: #3C6E47;
  --schrift: "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
  --schrift-klein: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--schrift);
  font-size: 18px;
  line-height: 1.5;
  color: var(--tinte);
  background: var(--papier);
  min-height: 100vh;
}
a { color: var(--navy); }
h1, h2, h3 { font-weight: 500; letter-spacing: 0.01em; margin: 0 0 .4em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
.leise { color: var(--grau); }
.klein { font-family: var(--schrift-klein); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); }

/* Kopf */
.kopf {
  background: var(--navy);
  color: var(--weiss);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 3px solid var(--gold);
}
.kopf a { color: var(--weiss); text-decoration: none; }
.marke { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--schrift); font-size: 1.35rem; letter-spacing: .14em; }
.marke-wort { font-weight: 500; }
.marke-punkt { color: var(--gold); }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 18px; font-family: var(--schrift-klein); font-size: 13px; letter-spacing: .04em; }
.kopf .benutzer { color: var(--gold-hell); }
.kopf .knopf-leer { border: 1px solid rgba(255,255,255,.4); padding: 5px 12px; border-radius: 3px; }
.kopf .knopf-leer:hover { border-color: var(--gold); color: var(--gold-hell); }

/* Inhalt */
.inhalt { max-width: 1240px; margin: 0 auto; padding: 28px; }
.mitte { max-width: 640px; margin: 10vh auto; padding: 0 20px; text-align: center; }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-top: 3px solid var(--gold); padding: 32px 36px; }
.karte .marke { color: var(--navy); margin-bottom: 18px; }
.fuss { text-align: center; color: var(--grau); font-size: 15px; margin-top: 36px; }
.fuss a { color: var(--grau); }

.knopf, button.knopf {
  display: inline-block; font-family: var(--schrift-klein); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--navy); color: var(--weiss); border: 0; padding: 10px 18px; border-radius: 3px; cursor: pointer; text-decoration: none;
}
.knopf:hover { background: var(--navy-tief); }
.knopf.gold { background: var(--gold); color: var(--navy-tief); }
.knopf.leer { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.knopf:disabled { opacity: .5; cursor: default; }

/* Regal */
.regal { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
.fall {
  background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--navy); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 8px; min-height: 150px;
}
.fall.ohne { border-left-color: var(--linie); }
.fall .kennung { font-family: var(--schrift-klein); font-size: 12px; letter-spacing: .1em; color: var(--gold); text-transform: uppercase; }
.fall .titel { font-size: 1.25rem; }
.fall .stand { color: var(--grau); font-size: 16px; }
.fall .aktionen { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* Reiter */
.reiter { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--linie); margin: 18px 0 22px; }
.reiter button {
  font-family: var(--schrift-klein); font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; color: var(--grau); cursor: pointer;
}
.reiter button.aktiv { color: var(--navy); border-bottom-color: var(--gold); }
.reiter button .zahl { color: var(--gold); margin-left: 6px; }

/* Tabellen */
table.akte { width: 100%; border-collapse: collapse; background: var(--weiss); border: 1px solid var(--linie); font-size: 16px; }
table.akte th { text-align: left; font-family: var(--schrift-klein); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); padding: 10px 12px; border-bottom: 2px solid var(--linie); background: var(--papier-dunkel); position: sticky; top: 0; }
table.akte td { padding: 9px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.akte tr:hover td { background: #FBF9F4; }
table.akte td.kennung { font-family: var(--schrift-klein); font-size: 12px; color: var(--grau); white-space: nowrap; }
.tabelle-rahmen { overflow: auto; max-height: 70vh; border: 1px solid var(--linie); }
.tabelle-rahmen table { border: 0; }

/* Marken und Status */
.marke-status { display: inline-block; font-family: var(--schrift-klein); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; border: 1px solid var(--linie); color: var(--grau); white-space: nowrap; }
.marke-status.belegt { border-color: var(--gruen); color: var(--gruen); }
.marke-status.aussage { border-color: var(--navy); color: var(--navy); }
.marke-status.hypothese { border-color: var(--rot); color: var(--rot); }
.marke-status.freigegeben { border-color: var(--gold); color: #8A6D0F; }
.marke-status.intern { border-color: var(--linie); color: var(--grau); }
.marke-status.archiviert { background: var(--papier-dunkel); }

/* Übersicht (Fall) */
.fallkopf { background: var(--weiss); border: 1px solid var(--linie); border-top: 3px solid var(--gold); padding: 22px 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 28px; }
.fallkopf .feld .klein { margin-bottom: 2px; }
.fallkopf .feld .wert { font-size: 1.05rem; white-space: pre-wrap; }

/* Akte einer Person */
.akte-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.akte-abschnitt { margin-top: 22px; }
.akte-abschnitt h3 { border-bottom: 1px solid var(--linie); padding-bottom: 4px; }

/* Zeitleiste */
.zeitleiste { border-left: 2px solid var(--navy); margin-left: 12px; padding-left: 26px; }
.ereignis { position: relative; margin-bottom: 22px; }
.ereignis::before { content: ""; position: absolute; left: -33px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--papier); }
.ereignis .wann { font-family: var(--schrift-klein); font-size: 13px; letter-spacing: .04em; color: var(--grau); }
.ereignis .was { font-size: 1.1rem; }
.ereignis .wer { color: var(--grau); font-size: 16px; }

/* Netz */
.netz-rahmen { background: var(--weiss); border: 1px solid var(--linie); overflow: hidden; position: relative; }
.netz-rahmen svg { display: block; width: 100%; height: 640px; }
.netz-rahmen .knoten circle { fill: var(--navy); stroke: var(--weiss); stroke-width: 2; cursor: pointer; }
.netz-rahmen .knoten.org circle { fill: var(--gold); }
.netz-rahmen .knoten.mandant circle { fill: var(--gruen); }
.netz-rahmen .knoten.gegenseite circle { fill: var(--rot); }
.netz-rahmen .knoten text { font-family: var(--schrift-klein); font-size: 12px; fill: var(--tinte); pointer-events: none; }
.netz-rahmen .kante { stroke: #B9B2A0; stroke-width: 1.5; }
.netz-rahmen .kante.hypothese { stroke-dasharray: 4 4; stroke: var(--rot); }
.netz-rahmen .kantentext { font-family: var(--schrift-klein); font-size: 10px; fill: var(--grau); pointer-events: none; }
.legende { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--schrift-klein); font-size: 12px; color: var(--grau); margin: 10px 0 0; }
.legende span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--navy); }
.legende span.org::before { background: var(--gold); }
.legende span.mandant::before { background: var(--gruen); }
.legende span.gegenseite::before { background: var(--rot); }

/* Atlas-Kopf: Titel, Kennzahlen, Gruppenfilter */
.atlas-kopf { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.atlas-kopf-rechts { margin-left: auto; padding-top: 6px; }
.atlas-titel { font-size: 2rem; margin: 0 0 2px; }
.atlas-titel em { font-style: italic; color: var(--navy); font-weight: 400; }
.atlas-zahlen { font-family: var(--schrift-klein); font-size: 12px; letter-spacing: .03em; color: var(--grau); margin-bottom: 10px; }
.atlas-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-filter .filter { font-family: var(--schrift-klein); font-size: 12px; letter-spacing: .03em; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 4px 11px 4px 8px; cursor: pointer; color: var(--tinte); display: inline-flex; align-items: center; gap: 6px; }
.atlas-filter .filter i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.atlas-filter .filter span { color: var(--grau); }
.atlas-filter .filter.aus { opacity: .45; text-decoration: line-through; }
.atlas-filter .filter:hover { border-color: var(--gold); }

/* Kugel und Tafel */
.atlas-buehne { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.atlas-buehne.mit-tafel { grid-template-columns: minmax(0, 1fr) 380px; }
.kugel-rahmen { background: var(--weiss); border: 1px solid var(--linie); position: relative; overflow: hidden; }
.kugel-rahmen svg { display: block; width: 100%; touch-action: none; cursor: grab; user-select: none; }
.kugel-rahmen svg:active { cursor: grabbing; }
.kugel-rahmen .bahn { fill: none; stroke: var(--linie); stroke-width: 1; opacity: .7; }
.kugel-rahmen .kante { stroke-linecap: round; }
.kugel-rahmen .knoten { cursor: pointer; }
.kugel-rahmen .knoten .initialen { font-family: var(--schrift-klein); font-weight: 600; pointer-events: none; letter-spacing: .02em; }
.kugel-rahmen .knoten .name { font-family: var(--schrift-klein); fill: var(--tinte); pointer-events: none; paint-order: stroke; stroke: var(--weiss); stroke-width: 3px; stroke-linejoin: round; }
.kugel-hinweis { position: absolute; left: 12px; bottom: 8px; font-family: var(--schrift-klein); font-size: 11px; color: var(--grau); letter-spacing: .03em; pointer-events: none; }
.linien-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--schrift-klein); font-size: 11px; color: var(--grau); margin-top: 10px; letter-spacing: .03em; }
.linien-legende span { display: inline-flex; align-items: center; gap: 6px; }

.tafel { background: var(--weiss); border: 1px solid var(--linie); border-top: 3px solid var(--gold); padding: 16px 20px 18px; font-size: 16px; max-height: 720px; overflow: auto; }
.tafel:empty { display: none; }
.tafel-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gruppe-marke { display: inline-block; font-family: var(--schrift-klein); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--weiss); padding: 3px 8px; border-radius: 2px; }
.tafel-zu { background: transparent; border: 0; font-size: 22px; line-height: 1; color: var(--grau); cursor: pointer; padding: 0 4px; }
.tafel-zu:hover { color: var(--navy); }
.tafel-name { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tafel-name h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; flex: none; font-family: var(--schrift-klein); font-weight: 600; font-size: 15px; color: var(--weiss); background: var(--navy); border: 2px solid transparent; }
.avatar.gross { width: 60px; height: 60px; font-size: 20px; }
.tafel-text { margin: 0 0 10px; }
.tafel-felder { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0 0 12px; font-size: 15px; }
.tafel-felder dt { font-family: var(--schrift-klein); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--grau); padding-top: 3px; }
.tafel-felder dd { margin: 0; }
.tafel h3 { font-size: 1rem; margin: 14px 0 6px; border-bottom: 1px solid var(--linie); padding-bottom: 3px; }
.tafel-liste { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.tafel-liste li { padding: 3px 0; border-bottom: 1px dotted var(--papier-dunkel); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tafel-liste li svg { flex: none; }
.tafel-fuss { margin: 16px 0 0; }

/* Tafeln (Kartenliste) */
.gruppen-titel { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font-size: 1.25rem; }
.gruppen-titel i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.tafeln { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.tafel-karte { display: flex; gap: 14px; background: var(--weiss); border: 1px solid var(--linie); padding: 14px 16px; text-decoration: none; color: var(--tinte); }
.tafel-karte:hover { border-color: var(--gold); box-shadow: 0 1px 6px rgba(20,33,61,.08); }
.tafel-karte-text { min-width: 0; }
.tafel-karte-name { font-size: 1.15rem; line-height: 1.2; }
.tafel-karte-beschreibung { font-size: 15px; color: #3A3A3A; margin: 6px 0 8px; }
.tafel-karte-fuss { font-size: 14px; }

/* Schematische Karte der Orte */
.karte-rahmen { background: var(--weiss); border: 1px solid var(--linie); position: relative; margin-bottom: 14px; }
.karte-rahmen svg { display: block; width: 100%; height: auto; }
.karte-rahmen .gitter { stroke: var(--papier-dunkel); stroke-width: 1; }
.karte-rahmen .gitter-text { font-family: var(--schrift-klein); font-size: 10px; fill: #BDB7A8; }
.karte-rahmen .ort { cursor: pointer; }
.karte-rahmen .ort circle { fill: var(--navy); stroke: var(--weiss); stroke-width: 2; }
.karte-rahmen .ort .zeiger { stroke: #BDB7A8; stroke-width: 1; }
.karte-rahmen .ort text { font-family: var(--schrift); font-size: 17px; fill: var(--tinte); paint-order: stroke; stroke: var(--weiss); stroke-width: 4px; stroke-linejoin: round; }
.karte-rahmen .ort.markiert circle { fill: var(--gold); }
.karte-rahmen .ort .zahl { font-family: var(--schrift-klein); font-size: 10px; font-weight: 600; fill: var(--weiss); stroke: none; paint-order: normal; }
.karte-rahmen .ort.markiert text { font-weight: 600; }
.karte-fuss { font-family: var(--schrift-klein); font-size: 11px; color: var(--grau); padding: 6px 12px; border-top: 1px solid var(--papier-dunkel); letter-spacing: .03em; }
table.akte tr.markiert td { background: #FFF8E1; }
.zeitleiste .jahr { font-family: var(--schrift-klein); font-size: 12px; letter-spacing: .1em; color: var(--gold); margin: 0 0 10px; }

@media (max-width: 900px) {
  .atlas-buehne.mit-tafel { grid-template-columns: 1fr; }
  .tafel { max-height: none; }
}

/* Suche */
.reiter-zeile { display: flex; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--linie); margin: 18px 0 22px; }
.reiter-zeile .reiter { border-bottom: 0; margin: 0; flex: 1; }
.suche { font-family: var(--schrift); font-size: 16px; padding: 7px 12px; border: 1px solid var(--linie); background: var(--weiss); min-width: 220px; margin-bottom: 8px; }
.suche:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
mark { background: #FFF1B8; color: inherit; padding: 0 1px; }
.such-blatt { font-size: 1.15rem; margin: 22px 0 8px; }
.such-liste { display: grid; gap: 6px; }
.such-treffer { display: block; background: var(--weiss); border: 1px solid var(--linie); padding: 10px 14px; text-decoration: none; color: var(--tinte); }
.such-treffer:hover { border-color: var(--gold); }
.such-treffer .klein { display: block; }
.such-titel { font-size: 1.05rem; display: block; }
.such-rest { display: block; font-size: 14px; color: #3A3A3A; margin-top: 3px; }
.such-feld { margin-right: 10px; }

/* Fragen und Auswertung */
.fragen-liste { list-style: none; margin: 0 0 24px; padding: 0; }
.fragen-liste li { background: var(--weiss); border: 1px solid var(--linie); padding: 10px 14px; margin-bottom: 6px; }
.fragen-liste li .klein { display: block; margin-bottom: 2px; }
.fragen-liste li.ueberfaellig { border-left: 4px solid var(--rot); }
.fragen-liste.kompakt li { font-size: 15px; padding: 7px 12px; }
.auswertung { background: var(--weiss); border: 1px solid var(--linie); border-top: 3px solid var(--gold); padding: 18px 22px; margin-bottom: 28px; }
.auswertung h2 { margin-top: 0; }
.auswertung .formular { padding: 0; border: 0; margin-bottom: 8px; }
.auswertung textarea { width: 100%; font-family: var(--schrift); font-size: 16px; padding: 8px 10px; border: 1px solid var(--linie); background: var(--papier); }
.auswertung-optionen { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; font-size: 15px; }
.kontroll { display: inline-flex; align-items: center; gap: 6px; }
.kontroll select { font-family: var(--schrift); font-size: 15px; padding: 4px 6px; border: 1px solid var(--linie); background: var(--weiss); }
.schnell .knopf { padding: 6px 10px; font-size: 11px; }
.auswertung-ergebnis { border-top: 1px solid var(--linie); padding-top: 14px; margin-top: 14px; }
.auswertung-frage { font-style: italic; margin: 4px 0 10px; }
.auswertung-text p { margin: 0 0 .7em; }
.auswertung-text ul { margin: 0 0 .8em 1.2em; padding: 0; }
.auswertung-text h3 { margin: .8em 0 .3em; font-size: 1.05rem; }

/* Bilder */
.avatar.mit-bild { overflow: hidden; background: var(--papier-dunkel); padding: 0; }
.avatar.mit-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bildnachweis { font-family: var(--schrift-klein); font-size: 11px; color: var(--grau); margin: 8px 0 0; }
.kugel-rahmen .knoten image { pointer-events: none; }

@media (max-width: 700px) {
  .reiter-zeile { flex-direction: column; align-items: stretch; }
  .suche { min-width: 0; }
}

/* Geldflüsse */
.summen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.summe { background: var(--weiss); border: 1px solid var(--linie); padding: 14px 18px; }
.summe .betrag { font-size: 1.5rem; color: var(--navy); }

/* Hinweise */
.hinweis { background: #FFF8E1; border: 1px solid var(--gold-hell); padding: 12px 16px; margin: 0 0 18px; font-size: 16px; }
.fehler { background: #FBEAEA; border: 1px solid #E3B4B4; color: var(--rot); padding: 12px 16px; margin: 0 0 18px; }
.laden { color: var(--grau); padding: 40px 0; text-align: center; }

/* Bearbeiten */
.werkzeugzeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.werkzeugzeile input[type=search], .werkzeugzeile select {
  font-family: var(--schrift); font-size: 16px; padding: 8px 10px; border: 1px solid var(--linie); background: var(--weiss);
}
td.bearbeitbar { cursor: text; }
td.bearbeitbar:hover { outline: 1px dashed var(--gold); outline-offset: -2px; }
td.bearbeitbar[contenteditable=true] { outline: 2px solid var(--gold); background: #FFFDF5; }
td.intern-spalte { background: #F3F1EA; }
table.akte th.intern-spalte { color: var(--rot); }
.gespeichert { color: var(--gruen); font-family: var(--schrift-klein); font-size: 13px; }
.formular { background: var(--weiss); border: 1px solid var(--linie); padding: 18px 22px; margin-bottom: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 18px; }
.formular label { display: block; }
.formular label span { display: block; font-family: var(--schrift-klein); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); margin-bottom: 3px; }
.formular input, .formular select, .formular textarea { width: 100%; font-family: var(--schrift); font-size: 16px; padding: 7px 9px; border: 1px solid var(--linie); background: var(--papier); }
.formular textarea { min-height: 70px; resize: vertical; }
.formular .breit { grid-column: 1 / -1; }

/* Anmeldung */
.anmeldeformular label { display: block; margin-bottom: 14px; }
.anmeldeformular label span { display: block; font-family: var(--schrift-klein); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); margin-bottom: 4px; }
.anmeldeformular input { width: 100%; font-family: var(--schrift); font-size: 17px; padding: 9px 11px; border: 1px solid var(--linie); background: var(--papier); }
.anmeldeformular input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.anmeldeformular h2 { margin-top: 0; }

/* Text */
.text { max-width: 760px; }
.text h2 { margin-top: 1.4em; }

/* Druck: nur Inhalt, keine Bedienung */
@media print {
  .kopf, .reiter, .werkzeugzeile, .knopf, .fuss { display: none !important; }
  body { background: #fff; font-size: 12pt; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .kopf { padding: 12px 16px; gap: 12px; }
  .inhalt { padding: 16px; }
  .kopf .rechts .name { display: none; }
  .kopf-mandant { display: none; }
  .kopf .klein { font-size: 11px; }
}

/* Handy und Tablet: Kopfzeile umbrechen, Reiter als wischbare Leiste */
@media (max-width: 1024px) {
  .kopf { flex-wrap: wrap; row-gap: 10px; }
  .kopf .rechts { flex-wrap: wrap; justify-content: flex-end; gap: 8px 10px; }
  .kopf .klein { white-space: nowrap; }
}
@media (max-width: 700px) {
  .marke { font-size: 1.15rem; letter-spacing: .12em; }
  .kopf .rechts { width: 100%; margin-left: 0; justify-content: flex-start; gap: 8px; }
  .kopf .knopf-leer { padding: 6px 10px; font-size: 12px; }
  .kopf .benutzer { display: none; }
  .reiter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; }
  .reiter::-webkit-scrollbar { display: none; }
  .reiter button { flex: 0 0 auto; white-space: nowrap; padding: 10px 10px; }
  .reiter-zeile { gap: 10px; }
}

/* Belege: Verweise, Beleg-Ansicht, Links zum Original */
.beleg-verweis { display: inline-block; font-family: var(--schrift-klein); font-size: 12px; letter-spacing: .02em; line-height: 1.3; padding: 1px 6px; border: 1px solid var(--gold-hell); border-radius: 3px; background: #FFFCF2; color: var(--navy); text-decoration: none; white-space: nowrap; }
.beleg-verweis:hover, .beleg-verweis:focus { border-color: var(--gold); background: #FFF3CC; }
.beleg-kette { margin-left: 4px; }
.beleg-kette .beleg-verweis { margin: 1px 0; }
.beleg-symbol { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; height: 60px; padding: 0 10px; background: var(--navy); color: var(--gold-hell); font-family: var(--schrift-klein); font-weight: 600; letter-spacing: .04em; border-radius: 4px; flex: none; }
.beleg-kopf h1 { font-size: 1.5rem; margin: 0 0 4px; }
.beleg-oeffnen { margin: 14px 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.quelle-link { text-decoration: none; }
.beleg-liste li { padding: 6px 0; }
.beteiligte-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border: 1px solid var(--linie); border-radius: 22px; background: var(--weiss); color: var(--tinte); text-decoration: none; font-size: 15px; }
.chip:hover { border-color: var(--gold); }
.avatar.klein { width: 28px; height: 28px; font-size: 11px; }
@media (max-width: 700px) {
  .beleg-symbol { min-width: 60px; height: 48px; font-size: 13px; }
  .beleg-kopf h1 { font-size: 1.2rem; }
}
.beleg-fehlt { display: inline-block; font-family: var(--schrift-klein); font-size: 12px; padding: 1px 6px; border: 1px dashed var(--rot); border-radius: 3px; color: var(--rot); white-space: nowrap; }
/* Geldflüsse: lange Namen in den Summenkarten umbrechen */
.summe .klein { overflow-wrap: anywhere; hyphens: auto; }
.kugel-steuer { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.kugel-steuer button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--linie); background: var(--weiss); color: var(--tinte); font-family: var(--schrift-klein); font-size: 20px; line-height: 1; cursor: pointer; }
.kugel-steuer button:hover, .kugel-steuer button:focus-visible { border-color: var(--tinte); }