/* Dunkler futuristischer Entwurf: fast schwarzes Dunkelblau, weiße Schrift, leuchtendes Cyan.
   Alle Farben stehen im Block :root als benannte Werte. Wer eine Farbe ändern will, ändert sie dort und nirgends sonst
   (Prüfung: TestFarbenNurAlsWerte). Ausnahmen, die ihre Farben selbst tragen: die Bilddateien (genie-wirbel.webp,
   genie-zeichen.webp, motiv-….webp, zeichen.svg, App-Symbole) und das Blatt im Drucksorten-Editor (.design-…), das die Farben des gedruckten PDF zeigt. */

/* Schrift der Seiten und der Belege: Figtree (SIL Open Font License), lokal eingebunden */
@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; }

:root {
  color-scheme: dark;
  --schrift: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Schrift */
  --text: #f7fbff;          /* Überschriften und gewöhnlicher Text */
  --gedaempft: #b5c3da;     /* Erklärungen, Beschriftungen */
  --leise: #8998b2;         /* Platzhalter in leeren Feldern, Nebensächliches */
  --auf-akzent: #041220;    /* Schrift auf Knöpfen und gewählten Flächen (Cyan) */
  --auf-farbe: #ffffff;     /* Schrift auf den farbigen Abzeichen der Dateiarten */

  /* Akzent: Knöpfe, Verweise, Gewähltes */
  --akzent: #25e2f0;
  --akzent-hell: #43e9f1;   /* Verlauf der Knöpfe und der zweiten Zeile der großen Überschrift: von hier … */
  --akzent-blau: #1ebdf3;   /* … nach hier */
  --akzent-stark: #73edff;  /* Rand der Knöpfe, Knopf unter der Maus */
  --akzent-weich: #082a3d;  /* gewählte Zeile, Hinweisfläche, eigener Text im Verlauf */

  /* Rahmen */
  --rand: #234b68;          /* Rahmen der Fenster und Karten */
  --rand-stark: #2f6388;    /* Rahmen der Eingabefelder, betonte Linien */
  --linie: #16364c;         /* Trennlinien, Rahmen der Einträge */
  --akzent-rand: #238fba;   /* hervorgehobener Rahmen */

  /* Fenster */
  --grund: #020b16;         /* Hintergrund der Seite – auch grundfarbe in main.go (Browserleiste) */
  --grund-halb: rgba(2, 11, 22, .38);    /* derselbe Grund, durchscheinend: Schleier über dem Wirbel-Bild */
  --flaeche: #061321;       /* Fenster, Leiste */
  --glas: rgba(3, 16, 28, .82);          /* Karten der Startseite über dem Bild */
  --karte: #0a1c2e;         /* Einträge in einem Fenster */
  --feld: #030e1a;          /* Eingabefelder */
  --papier: #ffffff;        /* Belege, Logos, QR-Codes: immer weiß */
  --unterlage: #14263a;     /* Fläche hinter einem Beleg in der Ansicht */
  --schleier: rgba(1, 5, 12, .72);                   /* abgedunkelte Seite hinter dem offenen Menü */
  --schatten: 0 16px 45px rgba(0, 0, 0, .35);        /* Schatten der Fenster */
  --schatten-knopf: 0 0 35px rgba(3, 185, 244, .29); /* Leuchten der Knöpfe */
  --schatten-tief: 0 30px 60px rgba(0, 0, 0, .7);    /* aufgeklapptes Menü */

  /* Grafik */
  --funke: #8aeaff;         /* Funken an der Flasche und nach dem Senden */
  --markierung: #5c4700;    /* Suchtreffer im Text */

  /* Dateiarten */
  --pdf: #c4312b;
  --xlsx: #1d7a47;
  --docx: #2f62b0;
  --sonst: #3d5a78;

  /* Zustände */
  --ok: #5fe3a1;
  --ok-weich: #0d3326;
  --arbeit: #f5c451;
  --fehler: #ff8e84;
}

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

body {
  margin: 0;
  min-height: 100vh;
  font: 16px/1.5 var(--schrift);
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: var(--grund);
}
input[type=checkbox], input[type=radio], progress { accent-color: var(--akzent); }

/* --- Überschriften (die Klasse heißt aus der Zeit der goldenen Schreibschrift noch „gold“) --- */
.gold {
  margin: 0;
  padding: 0 .2em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-align: center;
  text-wrap: balance;
  color: var(--text);
}
.titel { font-size: clamp(2.1rem, 5vw, 4.1rem); }
.untertitel { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.seite > .untertitel, .raster > .untertitel { margin-top: 22px; }
/* Überschrift mit einer Auswahl daneben (Tätigkeit: die Firmen) – beides zusammen in der Mitte; wird es eng, rückt die
   Auswahl unter die Überschrift */
.titel-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; margin-top: 22px; }
.titel-zeile .buch-reiter { margin: 0; }
/* Namen in Großbuchstaben („IT TECH“) und der Name der Plattform: gesperrt wie im Schriftzug */
.gold.schlicht { letter-spacing: .06em; }
.titel.schlicht { font-size: clamp(1.5rem, 3.6vw, 2.3rem); letter-spacing: .13em; }
/* Zeichen der Plattform: der blaue Wirbel aus dem Entwurf (Vorlage „zeichen“, ein Bild mit durchsichtigem Grund); daneben
   der Schriftzug, gesperrt. In der Leiste steht er am Schreibtisch doppelt so groß wie bis 0.135.0 (Benutzer am
   2026-10-08: der Name „bit dppelt so gross in der arbeitsplatz ansicht“, auf die Frage nach der Startseite für
   Besucher: „ja“) – nach der Anmeldung und auf den Seiten für Besucher; das Zeichen ist überall 58 px hoch. Am Handy
   gilt die kleine Größe (weiter unten) */
.zeichen { flex: none; width: auto; height: 36px; }
/* In der Leiste ohne den durchsichtigen Rand links im Bild (12 von 68 Bildpunkten): so steht das Zeichen bündig mit dem
   linken Rand des Inhalts darunter (Benutzer am 2026-10-08: „jetz das logo noch links bündig dann passt es“) */
.leiste .zeichen { height: 58px; aspect-ratio: 56 / 86; object-fit: cover; object-position: right; }
.marke strong { display: block; font-size: 2.5rem; line-height: 1.1; letter-spacing: .13em; }
.marke small { display: block; font-size: .8rem; letter-spacing: .12em; color: var(--leise); }

/* --- Leiste oben: der Schriftzug links, die Bereiche rechts; über die ganze Breite, der Inhalt so breit wie die Seite.
   Die Bereiche sind ein Block für sich (.leiste-liste), der in sich in die nächste Zeile umbricht – so steht der Schriftzug
   in der Mitte der ganzen Leiste, auch bei zwei Zeilen Menü (Benutzer am 2026-10-08: „schrift zug 10mm nach unten ca so
   das er mittig ist zur kopf zeile“, „klebt zuweit oben“ – davor stand er auf Höhe der ersten Menüzeile) --- */
.leiste {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 20px;
  padding: 14px max(16px, calc((100% - 1168px) / 2));
  font-size: .92rem;
  color: var(--gedaempft);
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.leiste a { color: var(--text); text-decoration: none; }
.leiste a:hover, .leiste a[aria-current] { color: var(--akzent); }
.leiste form { margin: 0; }
.leiste form .link { color: var(--gedaempft); }
.leiste form .link:hover { color: var(--akzent); text-decoration: none; }
.leiste-marke { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; padding-right: 12px; white-space: nowrap; }
.leiste a.leiste-marke:hover { color: var(--text); }

/* der Schriftzug groß über der Seite: nur wo es keine Leiste gibt (Anmeldung, erster Start) */
.kopfzeile { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.kopfzeile .zeichen { height: 72px; }
.leiste ~ .seite .kopfzeile { display: none; }

/* --- 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, die direkt untereinander stehen, berühren sich nicht */
:where(.seite) > :where(.fenster) + .fenster { margin-top: 16px; }
.fenster {
  padding: 20px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 16px;
  box-shadow: var(--schatten);
}

.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(--rand-stark);
  border-radius: 12px;
}
textarea { min-height: 10rem; resize: vertical; }
.auswahl {
  margin-bottom: 10px;
  padding-right: 40px;
  appearance: none;
  cursor: pointer;
  /* der Pfeil rechts: zwei kleine Dreiecke in der Schriftfarbe der Beschriftungen */
  background:
    linear-gradient(45deg, transparent 50%, var(--gedaempft) 50%) right 19px center / 5px 5px no-repeat,
    linear-gradient(135deg, var(--gedaempft) 50%, transparent 50%) right 14px center / 5px 5px no-repeat,
    var(--feld);
}
.auswahl optgroup, .auswahl option { color: var(--text); background: var(--flaeche); }
.bezug, .nachtrag.voll {
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: .9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--akzent-weich);
  border: 1px solid var(--akzent-rand);
  border-radius: 10px;
}
.bezug { max-height: 14rem; overflow-y: auto; color: var(--gedaempft); }
textarea::placeholder, .feld::placeholder { color: var(--leise); opacity: 1; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
textarea:focus-visible, .feld:focus-visible { outline-offset: 0; border-color: var(--akzent); }

.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-stark);
  border-radius: 14px;
  transition: border-color .15s, background-color .15s, color .15s;
}
.ablage:hover, .ablage.aktiv {
  color: var(--text);
  border-color: var(--akzent);
  background: var(--akzent-weich);
}
.ablage:has(input:focus-visible) { outline: 2px solid var(--akzent); 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(--akzent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flaschen-symbol .funke { fill: var(--funke); }
.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(--karte);
  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(--rand-stark);
  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(--akzent); background: var(--akzent-weich); }
.wahlen input:focus-visible + .wahl { outline: 2px solid var(--akzent); 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: var(--auf-farbe);
  background: var(--farbe, var(--sonst));
  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: var(--auf-akzent);
  background: linear-gradient(110deg, var(--akzent-hell), var(--akzent-blau));
  border: 1px solid var(--akzent-stark);
  border-radius: 40px;
  cursor: pointer;
  box-shadow: var(--schatten-knopf);
  transition: filter .18s;
}
.knopf:hover { filter: brightness(1.12); }
.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(--text); background: none; border: 1px solid var(--akzent-rand); box-shadow: none; }
.knopf.zweit:hover { color: var(--akzent); background: var(--akzent-weich); filter: none; }
.stern { width: 14px; height: 14px; flex: none; fill: currentColor; }
.link { padding: 0; font: inherit; color: var(--akzent); 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; }
.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: var(--funke);
  animation: fliegen .9s ease-out forwards;
}
.funke-flug.rosa { fill: var(--akzent); }
@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(--karte); border: 1px solid var(--linie); border-radius: 14px; }
.auftrag.erledigt { border-color: var(--akzent-rand); }
.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: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
}
.antwort a { color: var(--akzent); overflow-wrap: anywhere; }
.antwort .wer {
  display: block;
  margin-bottom: 4px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--akzent);
}
.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(--akzent); }
.nachtrag.voll { margin: 10px 0 0; color: var(--text); }
.nachtrag.voll .etikett { color: var(--akzent); }
.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: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  transition: border-color .15s;
}
.download:hover, .kopieren:hover { border-color: var(--akzent); }
.download svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--akzent); 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; }
.download-zeile .csv-knopf { align-self: center; white-space: nowrap; } /* „als CSV“ neben einer Excel-Datei (xlsx_csv.go) */
.kopieren {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  color: var(--akzent);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .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 .flaschen-symbol { width: 64px; height: 64px; margin-bottom: 4px; }
.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(--akzent); 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: .72rem; }
.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(--akzent); 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(--flaeche);
  border: 2px solid var(--leise);
  border-radius: 50%;
}
.ereignis.jeannie::before { border-color: var(--akzent); background: var(--akzent); }
.ereignis.nachtrag-e::before { border-color: var(--akzent-rand); }
.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: var(--sonst); }

/* --- 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(--akzent); font-weight: 700; }
.hinweis-box {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--akzent-weich);
  border: 1px solid var(--akzent-rand);
  border-radius: 12px;
}
.hinweis-box .stern { fill: var(--akzent); }
.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(--akzent); 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(--karte);
  border: 1px solid var(--rand-stark);
  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; }
.datum-feld .auswahl { width: auto; margin: 0; padding-right: 38px; } /* Monatsauswahl der Auswertungen: Platz für den Pfeil */
.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(--karte); 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(--akzent); }
.abzeichen.art { --farbe: var(--sonst); 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: var(--text); background: var(--markierung); 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; }
/* Freigeben mit dem Häkchen „künftig ohne Kontrolle buchen“ (Vorschläge aus dem Archiv): Knopf und Häkchen nebeneinander, am Handy untereinander */
.freigeben-mit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.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(--akzent); }
.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(--karte); 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: var(--akzent-weich); 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(--text); }
.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: var(--auf-akzent); 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(--text); }
.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); }
#freigaben, #benutzer, #startseite, #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 var(--linie); 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(--akzent); border-color: var(--akzent); }
/* Buchungsjournal: Monate eines Jahres mit ihrem Ergebnis – plus grün, minus rot, ohne Buchungen blass */
.journal-monate .link.leer { color: var(--gedaempft); }
.journal-monate .lage-plus { color: var(--ok); }
.journal-monate .lage-minus { color: var(--fehler); }
.journal-monate .link { gap: 6px; }
.journal-monate span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dokument-titel.weiterer-teil { margin-top: 36px; }
.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(--akzent); }
.einladen { margin-top: 16px; }
.rechte-kurz span { display: inline-block; margin: 0 4px 4px 0; padding: 2px 10px; font-size: .85rem; 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; }
.rechte-form .rechte-alle { grid-column: 1 / -1; }
.haken:has(input:disabled) { color: var(--leise); }
/* Zugriffspunkte nach Themen (Rechteverwaltung): je Thema ein Block zum Aufklappen, je Punkt die Auswahl der Stufe */
.rechte-themen { grid-column: 1 / -1; display: grid; gap: 8px; }
.rechte-thema { padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; }
.rechte-form .rechte-thema > summary { font-size: 1.05rem; color: var(--text); }
.rechte-stand { margin-left: 8px; font-size: .95rem; color: var(--gedaempft); }
.rechte-thema > .hinweis, .rechte-ganz { margin-top: 8px; }
.rechte-punkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 16px; margin-top: 12px; }
.recht-punkt small { display: block; margin-top: 4px; font-size: .95rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.rechte-kurz .rechte-offen { border-color: var(--arbeit); color: var(--arbeit); }
.rechte-adressen summary { cursor: pointer; color: var(--akzent); white-space: nowrap; }
.rechte-wer { white-space: nowrap; }
.rechte-adressen ul { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.rechte-adressen code { overflow-wrap: anywhere; }
.rechte-adressen small { color: var(--gedaempft); }
.link-box .geheimnis, .geheimnis { display: block; margin: 8px 0; padding: 10px 12px; font-size: .85rem; overflow-wrap: anywhere; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; }
.qr { width: min(260px, 100%); margin: 8px auto 14px; padding: 10px; background: var(--papier); border: 1px solid var(--linie); 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(--akzent); }
.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(--akzent); }
.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(--akzent); }
.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(--akzent); }
.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(--akzent); }
.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(--text); text-decoration: none; background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: 999px; }
.reiter-knopf:hover { border-color: var(--akzent); }
/* Rechnungen aus der Verrechnung: der Knopf zum Umstellen des Zahlstands unter dem Stand */
.rg-umstellen { margin: 6px 0 0; }
.reiter-knopf.aktiv { font-weight: 600; color: var(--auf-akzent); background: var(--akzent); border-color: var(--akzent); }
.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(--text); border-bottom-color: var(--rand-stark); }
.bericht .z-summe td { font-weight: 600; }
.bericht .z-ergebnis td { font-weight: 700; border-top: 1px solid var(--rand-stark); border-bottom: 1px solid var(--rand-stark); }
.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; }
/* Zwei Belege: links die Bank (Kontoauszug), rechts der Beleg, den die Zahlung ausgleicht – ab 700 px nebeneinander,
   am Handy untereinander; am Schreibtisch bekommt die Ansicht dafür mehr von der Breite */
.beleg-teil + .beleg-teil { margin-top: 14px; }
.beleg-ueber { margin: 0 0 4px; }
@media (min-width: 700px) {
  .beleg-ansicht.beleg-zwei:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .beleg-ansicht.beleg-zwei .beleg-teil + .beleg-teil { margin-top: 0; }
}
@media (min-width: 1100px) {
  .beleg-geteilt.beleg-offen.beleg-zwei { grid-template-columns: minmax(0, 1fr) minmax(600px, 60%); }
  .beleg-ansicht.beleg-zwei .beleg-rahmen { height: calc(100vh - 96px); }
}
.beleg-rahmen { display: block; width: 100%; height: calc(100vh - 64px); min-height: 480px; border: 1px solid var(--linie); border-radius: 12px; background: var(--papier); }
@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: var(--unterlage); }
.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: var(--papier); }
.beleg-blatt canvas + canvas { margin-top: 8px; }
.beleg-mehr { margin: 0; padding: 12px; color: var(--text); 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(--akzent); outline-offset: 3px; }
/* Sprungziele: Nach einem Knopf rollt die Seite zum nächsten Eintrag (app.js) – etwas Luft darüber, damit die Umrandung ganz zu sehen ist */
.weiter-meldung, .treffer[id], .tabelle tr[id] { scroll-margin-top: 14px; }
.beleg-zeile td { padding: 0; }
.nur-mit-beleg { display: none; }
.beleg-geteilt:has([data-beleg]) .nur-mit-beleg { display: block; }
/* Bank: was die Bank zu einer Bewegung liefert – Name links, Wert rechts; lange Werte brechen um */
.bank-angaben { display: grid; gap: 2px; margin: 6px 0; font-size: .85rem; }
.bank-angaben div { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 10px; }
.bank-angaben dt { color: var(--gedaempft); }
.bank-angaben dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .bank-angaben div { grid-template-columns: minmax(0, 1fr); gap: 0; } .bank-angaben dd { margin-bottom: 4px; } }
/* Bank, „Rechnung zuweisen“: je vorgeschlagener Rechnung eine Zeile mit „Rechnung ansehen“ und „Zuweisen“ */
.bank-zuweisen { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 12px; }
.bank-zuweisen h4 { margin: 0 0 6px; }
.bank-kandidat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 8px 0; border-top: 1px solid var(--linie); }
.bank-kandidat p { margin: 0; flex: 1 1 15rem; min-width: 0; overflow-wrap: anywhere; }
.bank-kandidat small { color: var(--gedaempft); }
.bank-kandidat label { flex: 1 1 15rem; margin: 0; }
.bank-kandidat-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bank-kandidat-knoepfe .knopf { width: auto; margin: 0; }
.bank-belege { margin: 6px 0 0; }
.bank-von-hand { margin: 8px 0; }
.bank-von-hand > summary { cursor: pointer; padding: 6px 0; }
.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: var(--flaeche); 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; }
/* Zahlung zu einem offenen Posten eintragen (buch_op_zahlung.html): Felder, die zum gewählten Weg nicht gehören, sind
   ausgeblendet. Ein Browser ohne :has() zeigt alle Felder – die Beschriftungen sagen, wozu sie gehören. */
.op-offen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 10px 0 4px; }
.op-offen strong { font-size: 1.3rem; }
.op-form .op-weg, .op-form .hinweis, .op-form .op-knoepfe { grid-column: 1 / -1; }
.op-form .hinweis { margin: 0; }
.op-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.op-form:has(select[name=weg] option:checked:not([value=bank])) .nur-bank,
.op-form:has(select[name=weg] option:checked:not([value=konto])) .nur-konto,
.op-form:has(select[name=weg] option:checked:not([value=klaerung])) .nur-klaerung,
.op-form:has(select[name=weg] option[value=bank]:checked) .nicht-bank { display: none; }
.bericht td.aktion { padding-top: 6px; padding-bottom: 6px; text-align: right; white-space: nowrap; vertical-align: middle; }
@media (max-width: 700px) { .stapel td.aktion:empty { display: none; } }
/* Mahnwesen (buch_mahnwesen.html): je Stufe ein Block mit Tagen und Spesen; Knöpfe in den Listen */
.mahn-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; align-items: start; margin: 12px 0; }
.mahn-stufe { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--linie); border-radius: 10px; }
.mahn-stufe legend { padding: 0 4px; font-weight: 600; color: var(--text); }
.mahn-stufe .feld { margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); }
.mahn-knopf { grid-column: 1 / -1; }
@media (min-width: 701px) { .mahn-knopf .knopf { width: auto; min-width: 220px; } }
.tabelle td.aktion form { display: inline-block; margin: 0; }
.mahn-aktionen form + form { margin-left: 8px; }
.mahn-liste { margin: 8px 0; padding: 0; list-style: none; }
.mahn-liste li { padding: 8px 0; border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; }
.mahn-zeit { color: var(--gedaempft); font-size: .88rem; margin-right: 6px; }
@media (max-width: 700px) {
  .tabelle.stapel td.aktion { text-align: left; white-space: normal; }
  .mahn-aktionen form { display: block; margin: 6px 0 0; }
  .mahn-aktionen form + form { margin-left: 0; }
}
.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(--akzent); }
.reiter a[aria-current="page"] { font-weight: 600; color: var(--akzent); 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(--grund); }
.hilfe-gruppe { margin-top: 12px; }
.hilfe-titel { font-weight: 600; color: var(--akzent); text-decoration: none; }
.hilfe-titel:hover { text-decoration: underline; }
.hilfe-eintrag.passend { border-color: var(--akzent); }
.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: var(--papier); border: 1px solid var(--linie); 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, oben eingebunden), damit die Blöcke so breit sind wie gedruckt. */
.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; letter-spacing: -.02em; color: var(--text); }
.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(--flaeche); border: 2px solid var(--rand-stark); border-radius: 14px; }
.beleg-knopf input:checked + span, button.beleg-knopf.aktiv { color: var(--auf-akzent); background: var(--akzent); border-color: var(--akzent); }
.beleg-knopf input:focus-visible + span { outline: 3px solid var(--akzent-stark); outline-offset: 2px; }
.beleg-foto span { min-height: 5.5rem; font-size: 1.3rem; border-style: dashed; border-color: var(--akzent); }
.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: var(--auf-akzent); background: linear-gradient(110deg, var(--akzent-hell), var(--akzent-blau)); border: 1px solid var(--akzent-stark); border-radius: 40px; 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: var(--ok); background: var(--ok-weich); border-radius: 14px; }
.beleg-einrichten { margin: 0 0 18px; padding: 14px; background: var(--flaeche); border: 1px solid var(--akzent); 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; }

/* Genie meldet sich (melder.html): dieselbe Handy-Seite wie „Beleg abgeben“, dazu Karten für Stand und letzte Meldungen */
.melder-karte { margin: 0 0 18px; padding: 14px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px; }
.melder-karte h2 { margin: 0 0 8px; font-size: 1.15rem; }
.melder-stand { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.45; }
.melder-stand.an { font-weight: 600; color: var(--ok); }
.melder-karte .beleg-spaeter { min-height: 2.75rem; margin-top: 12px; }
.melder-liste { margin: 0; padding: 0; list-style: none; }
.melder-liste li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--rand); overflow-wrap: anywhere; }
.melder-liste li:first-child { padding-top: 0; border-top: 0; }
.melder-liste small { color: var(--gedaempft); }
.beleg-qr { max-width: 14rem; margin: 10px 0; padding: 8px; background: var(--papier); border: 1px solid var(--linie); border-radius: 8px; }

/* Forderungsanmeldung (forderung_anmeldung.html): Zeilen der Forderung, Angaben zum Kopieren */
.forderung-form h4, .forderung-gruppe { margin: 18px 0 0; color: var(--text); }
.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(--akzent); }
.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; font-weight: 700; color: var(--text); }
.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; }

/* --- Startseite für Besucher (besucher.html) nach dem dunklen Entwurf: links die große Überschrift, rechts der leuchtende
   Wirbel (genie-wirbel.webp, ein Bild ohne Schrift), darunter drei Karten, der Ablauf in drei Schritten und der Kontakt. --- */
.besuch-seite { position: relative; isolation: isolate; overflow-x: clip; }
/* Größen, die mit der Breite wechseln (bis 1100 px kleiner, siehe unten) – als Werte, weil ab 801 px zusätzlich die Höhe
   des Bildschirms sie begrenzt (Abschnitt „auf einem Schirm“) */
.besuch-seite { --leiste-max: 34px; --leiste-rand: var(--leiste-max); --held-satz: clamp(1.3rem, 2vw, 1.875rem); --knopf-rand: 16px; --knopf-schrift: 1.25rem; --motiv: 174px; --karte-titel: 1.56rem; --karte-satz: 1.1rem; }
/* Der Hintergrund bis 800 px Breite und auf der Anmeldung (ab 801 px hängt das Bild der Startseite am Abschnitt der
   Überschrift, siehe „Auf einem Schirm“): das ganze Bild (2 : 1) über die volle Breite, nichts davon abgeschnitten (Benutzer am 2026-10-07: „hinter
   grund auf der landingpage auch voll format füllend“, zur Anmeldung: „nichts von der grafic abschneiden“). Links ist das Bild
   von sich aus dunkel – dort steht die Überschrift; ein leichter Schleier links sichert die Lesbarkeit, unten läuft es aus. */
.besuch-seite::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 2 / 1;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--grund-halb), transparent 45%), url("genie-wirbel.webp");
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent);
  mask-image: linear-gradient(to bottom, black 80%, transparent);
}
/* die Leiste der Startseite und der Anmeldung hat denselben Seitenrand wie der Inhalt darunter (.besuch-held): Zeichen und
   Überschrift stehen links auf einer Linie, „Anmelden“ rechts über dem Rand der Karten – auch am breiten Bildschirm */
.besuch-seite .leiste { padding-block: var(--leiste-rand); padding-inline: max(4.2vw, calc((100% - 1408px) / 2)); background: none; border-bottom-color: transparent; font-size: 1rem; }
.sprung { position: absolute; left: 16px; top: -100px; z-index: 40; padding: 12px; color: var(--auf-akzent); background: var(--akzent); border-radius: 8px; }
.sprung:focus { top: 12px; }
.symbol { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.besuch-vorschau { margin: 0; padding: 10px 16px; font-size: .9rem; text-align: center; color: var(--gedaempft); background: var(--akzent-weich); }
/* die Höhe wächst mit dem Bild, damit die Karten immer an seinem unteren Rand beginnen; Überschrift, Satz und Knopf stehen
   oben unter der Leiste, im dunklen Teil des Bildes – nicht mehr in der Mitte, wo sie über den Felsen lagen (Benutzer am
   2026-10-08: „diesn block mitte auf der seite nach oben in den schwarzen bereich“) */
.besuch-held { display: flex; align-items: flex-start; min-height: max(420px, calc(50vw - 170px)); padding: 24px max(4.2vw, calc((100% - 1408px) / 2)) 52px; }
.besuch-wort { position: relative; max-width: 770px; }
.besuch-wort h1 { margin: 0 0 20px; font-size: clamp(2.1rem, 6.65vw, 6.25rem); line-height: .99; letter-spacing: -.035em; }
.besuch-wort h1 span { display: block; color: var(--akzent); background: linear-gradient(90deg, var(--akzent-hell), var(--akzent-blau)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.besuch-wort p { margin: 0 0 36px; font-size: var(--held-satz); line-height: 1.2; color: var(--gedaempft); }
.knopf.besuch-knopf { justify-content: space-between; gap: 28px; min-width: 293px; padding: var(--knopf-rand) 39px; font-size: var(--knopf-schrift); }
.besuch-leistungen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0 max(4.2vw, calc((100% - 1408px) / 2)) 45px; }
.besuch-leistung { position: relative; min-height: 315px; padding: 18px 32px 22px; overflow: hidden; background: var(--glas); border: 1px solid var(--rand); border-radius: 16px; }
/* die Motive der Karten: Bilder aus dem Entwurf mit durchsichtigem Grund */
.besuch-bild { display: flex; align-items: center; justify-content: center; height: var(--motiv); margin: -6px -20px 0; }
.besuch-bild img { width: auto; max-width: 100%; height: 100%; }
.besuch-leistung h2 { margin: 8px 0 10px; font-size: var(--karte-titel); line-height: 1.25; letter-spacing: -.02em; }
.besuch-leistung p { margin: 0; padding-right: 60px; font-size: var(--karte-satz); line-height: 1.35; color: var(--gedaempft); }
.besuch-pfeil { position: absolute; right: 18px; bottom: 22px; display: grid; place-items: center; width: 51px; height: 51px; color: var(--text); border: 1px solid var(--rand); border-radius: 50%; }
.besuch-pfeil:hover { color: var(--akzent); border-color: var(--akzent); background: var(--akzent-weich); }
.besuch-unten { margin: 45px max(4.2vw, calc((100% - 1408px) / 2)); padding: 42px 0 0; border-top: 1px solid var(--rand); }
.besuch-auge { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); }
.besuch-unten h2 { margin: 15px 0 26px; font-size: 2.25rem; line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.besuch-kontakt p { margin: 0; font-size: 1.06rem; color: var(--gedaempft); }
.besuch-kontakt { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.besuch-kontakt h2 { margin-bottom: 12px; }
.besuch-kontakt .besuch-adresse { max-width: 26rem; padding: 18px 22px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px; }
.besuch-adresse a { display: block; padding-block: 10px 8px; font-size: 1.15rem; font-weight: 700; color: var(--akzent); text-decoration: none; overflow-wrap: anywhere; }
.besuch-adresse a:hover { text-decoration: underline; }
.besuch-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 0 max(4.2vw, calc((100% - 1408px) / 2));
  padding: 20px 0 calc(24px + env(safe-area-inset-bottom)); font-size: .88rem; color: var(--gedaempft); border-top: 1px solid var(--rand); }
.besuch-fuss nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.besuch-fuss nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--gedaempft); text-decoration: none; }
.besuch-fuss nav a:hover { color: var(--akzent); }
/* Anmeldung: die ganze Grafik, nichts davon abgeschnitten, das Fenster in der Mitte, das Logo bleibt oben links (Benutzer am
   2026-10-07: „verwende die grafik bildschirm füllend anmelde fenster in die mitte logo wo es ist ok“, „nichts von der
   grafic abschneiden“). Das Bild (2 : 1) liegt so groß wie möglich in der Mitte des Bildschirms – so breit wie der
   Bildschirm, höchstens doppelt so breit wie er hoch ist – und läuft an den Rändern weich in den Grund aus. Am hochkant
   gehaltenen Handy steht es in voller Breite oben, das Fenster darunter in der Mitte. */
.anmelde-seite { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.besuch-seite.anmelde-seite::before {
  top: 50%; left: 50%; right: auto; width: min(100%, 200vh); height: auto; aspect-ratio: 2 / 1; transform: translate(-50%, -50%);
  opacity: .9; background-image: url("genie-wirbel.webp"); background-size: 100% 100%; background-position: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 9%, black 91%, transparent), linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 9%, black 91%, transparent), linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.besuch-seite.anmelde-seite .leiste { position: relative; background: none; border-bottom-color: transparent; }
.anmelde-seite .besuch-held { flex: 1; align-items: center; justify-content: center; min-height: 0; padding-block: 16px 72px; }
.anmelde-seite .besuch-wort { width: min(400px, 100%); max-width: none; text-align: center; }
.anmelde-seite .besuch-wort h1 { margin-bottom: 20px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.anmelde-seite .anmeldung { width: 100%; text-align: left; background: var(--glas); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-aspect-ratio: 1/1) {
  .besuch-seite.anmelde-seite::before { top: 84px; width: 100%; transform: translateX(-50%); }
  .anmelde-seite .besuch-held { padding-top: calc(50vw - 40px); align-items: flex-start; }
}
/* Impressum und Datenschutz: der hinterlegte Text, Zeile für Zeile */
.besuch-text { max-width: 760px; margin: 18px auto 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .besuch-seite { --leiste-max: 26px; --held-satz: 1.5rem; --knopf-rand: 14px; --knopf-schrift: 1.1rem; --motiv: 150px; --karte-titel: 1.4rem; --karte-satz: 1rem; }
  .knopf.besuch-knopf { min-width: 245px; padding-inline: 28px; }
  .besuch-leistungen { gap: 16px; }
  .besuch-leistung { min-height: 305px; padding: 18px 22px; }
  .besuch-leistung p { padding-right: 46px; }
  .besuch-pfeil { right: 12px; width: 44px; height: 44px; }
}
/* Auf einem Schirm: Ab 801 px Breite (Schreibtisch, Tablet quer) passt die ganze Startseite auf den Bildschirm – Leiste,
   Überschrift, die drei Karten und die Fußzeile, ohne zu rollen (Benutzer am 2026-10-08 zu den Karten: „diesen block soweit
   nach oben das die seite nicht scrolen muss um komplett su sein auf einen dektop“):
   – Die Seite ist eine Spalte in der Höhe des Bildschirms. Der Abschnitt mit der Überschrift nimmt, was übrig bleibt –
     höchstens so viel, dass die Karten noch am unteren Rand des Bildes beginnen (hoher Bildschirm).
   – Schrift, Abstände und Motive werden mit der Höhe des Bildschirms kleiner (vh), von rund 1020 bis 600 px Höhe. Ist der
     Bildschirm noch niedriger oder steht unter den Karten der Kontakt, rollt die Seite.
   – Das Bild bleibt ganz: so groß, dass die leuchtenden Ringe gerade über den Karten stehen (sie enden bei 84 % seiner
     Höhe), höchstens 82 % der Breite – so bleiben die Felsen rechts von Überschrift und Satz, beide stehen im Dunkeln.
     Es steht rechts bündig (am sehr breiten Bildschirm wie bei 1920 px um die Mitte) und läuft links weich in den Grund
     aus. Dafür hängt es am Abschnitt der Überschrift statt an der Seite; --kopf ist die Höhe der Leiste darüber (zweimal
     ihr Rand, dazu Schriftzug und Linie).
   Die Leiste der Anmeldung bekommt denselben Rand, damit das Zeichen beim Wechsel nicht springt. */
@media (min-width: 801px) {
  .besuch-seite { --leiste-rand: clamp(10px, calc(5.8vh - 21px), var(--leiste-max)); --kopf: calc(2 * var(--leiste-rand) + 65px); }
  .start-seite { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  .start-seite::before { content: none; }
  .start-seite .besuch { display: flex; flex: 1 0 auto; flex-direction: column; }
  .start-seite .besuch-held { position: relative; flex: 1 1 0; min-height: auto; max-height: max(420px, calc(39vw - 104px)); padding-block: clamp(4px, calc(5.2vh - 25px), 24px) clamp(16px, 3.4vh, 52px); }
  .start-seite .besuch-held::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(28px - var(--kopf));
    right: max(0px, calc((100% - 1920px) / 2));
    height: min(41vw, calc(25vw + 480px), calc((100% + var(--kopf) - 36px) / .84));
    aspect-ratio: 2 / 1;
    pointer-events: none;
    background-image: linear-gradient(90deg, var(--grund-halb), transparent 45%), url("genie-wirbel.webp");
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent), linear-gradient(to right, transparent, black 12%);
    mask-image: linear-gradient(to bottom, black 80%, transparent), linear-gradient(to right, transparent, black 12%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .start-seite .besuch-wort h1 { margin-bottom: clamp(10px, 2.1vh, 20px); font-size: clamp(2.1rem, min(6.65vw, 10.5vh), 6.25rem); }
  .start-seite .besuch-wort p { margin-bottom: clamp(16px, 3.8vh, 36px); font-size: clamp(1.15rem, 3.15vh, var(--held-satz)); }
  .start-seite .knopf.besuch-knopf { padding-block: clamp(11px, 1.7vh, var(--knopf-rand)); font-size: clamp(1.05rem, 2.1vh, var(--knopf-schrift)); }
  .start-seite .besuch-leistungen { padding-bottom: clamp(10px, 2.4vh, 45px); }
  .start-seite .besuch-leistung { min-height: 0; padding-block: clamp(10px, 1.9vh, 18px) clamp(12px, 2.3vh, 22px); }
  .start-seite .besuch-bild { height: clamp(48px, calc(27vh - 108px), var(--motiv)); }
  .start-seite .besuch-leistung h2 { margin-block: clamp(4px, .85vh, 8px) clamp(5px, 1.05vh, 10px); font-size: clamp(1.25rem, 2.6vh, var(--karte-titel)); }
  .start-seite .besuch-leistung p { font-size: clamp(.95rem, 1.85vh, var(--karte-satz)); }
  .start-seite .besuch-fuss { padding-block: clamp(4px, 1.2vh, 20px) clamp(6px, 1.5vh, 24px); }
}
/* schmaler Schreibtisch: der Satz in zwei Zeilen wie im Entwurf („… und Automatisierung / für deinen Alltag.“), damit er
   links von den Felsen bleibt */
@media (min-width: 801px) and (max-width: 1100px) { .start-seite .besuch-wort p { max-width: 17em; } }
/* sehr breiter Bildschirm: das Bild endet vor dem rechten Rand – auch dort läuft es weich aus */
@media (min-width: 1921px) {
  .start-seite .besuch-held::before {
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent), linear-gradient(to right, transparent, black 12%, black 92%, transparent);
    mask-image: linear-gradient(to bottom, black 80%, transparent), linear-gradient(to right, transparent, black 12%, black 92%, transparent);
  }
}
@media (max-width: 800px) {
  .besuch-held { min-height: calc(50vw - 70px); padding-top: 25px; }
  .besuch-wort h1 { font-size: clamp(2.7rem, 7.5vw, 3.75rem); letter-spacing: -.03em; }
  .besuch-wort p { max-width: 440px; font-size: 1.45rem; }
  .besuch-leistungen { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .besuch-leistung { display: flex; flex-direction: column; justify-content: center; min-height: 240px; padding: 28px 32px 28px 42%; }
  .besuch-bild { position: absolute; left: 2%; top: 30px; width: 38%; height: 170px; margin: 0; }
  .besuch-leistung h2 { font-size: 1.56rem; }
  .besuch-leistung p { max-width: 420px; padding-right: 40px; font-size: 1.06rem; }
  .besuch-pfeil { right: 18px; bottom: 25px; }
  .besuch-kontakt { flex-direction: column; align-items: stretch; }
  .besuch-kontakt .besuch-adresse { max-width: none; }
  .besuch-unten h2 { font-size: 1.95rem; }
}
@media (max-width: 520px) {
  /* am Handy: erst die Überschrift, darunter das ganze Bild in voller Breite */
  .besuch-seite::before { top: 318px; background-image: url("genie-wirbel.webp"); -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 82%, transparent); mask-image: linear-gradient(to bottom, transparent, black 12%, black 82%, transparent); }
  .besuch-held { min-height: calc(292px + 50vw); padding-top: 30px; }
  .besuch-wort h1 { margin-bottom: 19px; font-size: clamp(2.1rem, 9.5vw, 3rem); line-height: 1.04; }
  .besuch-wort p { margin-bottom: 26px; font-size: 1.3rem; line-height: 1.3; }
  .knopf.besuch-knopf { min-width: 245px; padding: 14px 29px; font-size: 1.06rem; }
  .besuch-leistungen { padding-bottom: 10px; }
  .besuch-leistung { display: block; min-height: 310px; padding: 14px 23px 25px; }
  .besuch-bild { position: relative; left: auto; top: auto; width: auto; height: 170px; margin: -4px -12px 0; }
  .besuch-leistung h2 { margin-top: 12px; font-size: 1.5rem; }
  .besuch-leistung p { padding-right: 52px; }
  .besuch-pfeil { right: 17px; bottom: 22px; width: 44px; height: 44px; }
  .besuch-unten { margin-block: 28px; padding-top: 30px; }
  .besuch-unten h2 { font-size: 1.75rem; }
}

/* --- Live-Karte (livekarte.html, statisch/karte/karte.mjs): die Karte groß, daneben die Fahrzeuge; am Handy untereinander.
   Die Bedienelemente des Kartenprogramms (maplibre-gl.css) bekommen die Farben der Plattform. --- */
.seite.karten-seite { max-width: 1760px; }
.karten-wege { text-align: center; }
.karten-fenster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px; padding: 16px; }
.karten-spalte { position: relative; min-width: 0; }
.karten-flaeche { position: relative; height: calc(100vh - 290px); height: calc(100dvh - 290px); min-height: 420px; overflow: hidden; background: var(--grund); border: 1px solid var(--rand); border-radius: 12px; }
.karten-flaeche .karte { width: 100%; height: 100%; font: inherit; }
.karten-liste { display: flex; flex-direction: column; min-height: 0; max-height: max(420px, calc(100dvh - 290px)); }
.karten-liste .stand { margin: 10px 0 0; }
.karten-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-size: .85rem; color: var(--gedaempft); }
.karten-legende span { display: inline-flex; align-items: center; gap: 6px; }
.karten-fahrzeuge { display: grid; align-content: start; gap: 8px; min-height: 0; margin: 12px 0 0; padding: 0 4px 0 0; overflow-y: auto; list-style: none; }
.karten-eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; text-align: left; color: var(--text); background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; cursor: pointer; }
.karten-eintrag:hover, .karten-eintrag[aria-pressed="true"] { background: var(--akzent-weich); border-color: var(--akzent); }
.karten-eintrag small { grid-column: 2; font-size: .85rem; color: var(--gedaempft); overflow-wrap: anywhere; }
.karten-punkt { display: inline-block; flex: none; width: 12px; height: 12px; background: var(--akzent); border-radius: 50%; }
.karten-eintrag .karten-punkt { margin-top: 5px; }
.karten-punkt.f { background: var(--ok); }
.karten-punkt.s { background: var(--arbeit); }
.karten-punkt.a { background: var(--leise); }
.karten-auswahl { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: min(360px, calc(100% - 24px)); padding: 14px 16px; background: var(--glas); border: 1px solid var(--akzent-rand); border-radius: 12px; box-shadow: var(--schatten); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.karten-auswahl h3 { margin: 0 0 4px; font-size: 1.1rem; }
.karten-auswahl-live { margin: 0 0 6px; font-weight: 700; color: var(--akzent); }
.karten-auswahl ul { margin: 0 0 8px; padding: 0; font-size: .9rem; color: var(--gedaempft); list-style: none; }
.karten-auswahl .link { min-height: 44px; }
/* Gerät ohne Karten-Grafik: statt der Karte ein Satz, die Liste über die ganze Breite */
.karten-fenster.ohne-karte { grid-template-columns: minmax(0, 1fr); }
.ohne-karte .karten-flaeche { height: auto; min-height: 0; padding: 16px; }
.ohne-karte .karten-flaeche .karte { display: none; }
.ohne-karte .karten-auswahl { position: static; width: auto; margin-top: 12px; }
.karten-flaeche .maplibregl-ctrl-group { background: var(--flaeche); border: 1px solid var(--rand); box-shadow: none; }
.karten-flaeche .maplibregl-ctrl-group button { width: 44px; height: 44px; }
.karten-flaeche .maplibregl-ctrl-group button + button { border-top: 1px solid var(--linie); }
.karten-flaeche .maplibregl-ctrl-group button:not(:disabled):hover { background-color: var(--akzent-weich); }
.karten-flaeche .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1); }
.karten-flaeche .maplibregl-ctrl-attrib, .karten-flaeche .maplibregl-ctrl-attrib.maplibregl-compact { font-size: .75rem; color: var(--gedaempft); background: var(--glas); }
.karten-flaeche .maplibregl-ctrl-attrib a { color: var(--gedaempft); }
.karten-flaeche .maplibregl-ctrl-attrib-button { filter: invert(1); }

/* --- Demo-Betrieb (demo.html, demo_hinweis.html): Leitsatz, Wege in die Demo, was dazukommt, Beta-Test --- */
.demo-seite { display: grid; gap: 20px; }
.demo-held { padding: 28px 0 8px; }
.demo-held h1 { margin: 12px 0 14px; font-size: clamp(2.1rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.demo-held h1 span { display: block; color: var(--akzent); background: linear-gradient(90deg, var(--akzent-hell), var(--akzent-blau)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.demo-satz { margin: 0 0 24px; font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.25; color: var(--gedaempft); }
.demo-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.demo-knoepfe .knopf { gap: 12px; padding: 13px 24px; font-size: 1.05rem; }
.demo-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 14px; }
.demo-karte { display: grid; align-content: start; gap: 6px; padding: 16px 18px; color: var(--text); text-decoration: none; background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; }
.demo-karte strong { font-size: 1.1rem; }
.demo-karte span { font-size: .95rem; line-height: 1.4; color: var(--gedaempft); }
a.demo-karte { border-color: var(--akzent-rand); }
a.demo-karte:hover { background: var(--akzent-weich); border-color: var(--akzent); }
.demo-mitmachen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; border-color: var(--akzent-rand); }
.demo-mitmachen p { max-width: 46rem; margin: 6px 0 0; color: var(--gedaempft); }
.demo-mitmachen .knopf { gap: 12px; padding: 13px 24px; font-size: 1.05rem; }
.demo-hinweis p { margin: 8px 0 20px; color: var(--gedaempft); }
/* Anmeldung zum Beta-Test (mitmachen.html): ein Fenster in der Mitte, die Felder untereinander */
.mitmachen-seite { display: grid; justify-items: center; gap: 20px; padding-top: 16px; }
.mitmachen { width: min(640px, 100%); }
.mitmachen .untertitel { margin: 0 0 10px; }
.mitmachen-form { display: grid; gap: 14px; margin-top: 16px; }
.mitmachen-form .feld { margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); }
.mitmachen-form .haken { align-items: flex-start; font-size: 1rem; color: var(--text); }
.mitmachen-form .haken input { flex: none; width: 22px; height: 22px; margin: 1px 4px 0 0; }

/* ============================================================================================
   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 stehen rechts als eigener Block, der in sich umbricht (der Schriftzug steht damit mittig zur ganzen Leiste); Menü-Knopf und Filter-Knopf gibt es nicht */
.leiste-liste { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px 20px; min-width: 0; }
.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;
  }
  .leiste-marke { min-height: 44px; margin-right: 0; padding-right: 8px; gap: 10px; }
  /* am Handy bleibt alles klein: nach der Anmeldung und im Impressum das Zeichen mit 36 px, auf Startseite und Anmeldung 58 px */
  .leiste .zeichen { height: 36px; }
  .besuch-seite .leiste .zeichen { height: 58px; }
  .marke strong { font-size: 1.05rem; line-height: 1.25; letter-spacing: .1em; }
  .marke small { font-size: .7rem; }
  /* die Leiste der Startseite bleibt am Handy beim Blättern stehen und braucht darum einen deckenden Grund */
  .besuch-seite .leiste { padding-block: calc(6px + env(safe-area-inset-top)) 6px; padding-inline: max(4.2vw, env(safe-area-inset-left)) max(4.2vw, env(safe-area-inset-right)); background: var(--grund); border-bottom-color: var(--linie); }
  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--rand-stark);
    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: var(--auf-akzent); background: var(--akzent); border-color: var(--akzent); }
  /* 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: var(--schleier); 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));
    justify-content: normal;
    align-items: normal;
    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: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-tief);
  }
  .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: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 12px;
  }
  .leiste-liste > a[aria-current] { color: var(--auf-akzent); background: var(--akzent); border-color: var(--akzent); }
  .leiste-liste > a.knopf { grid-column: 1 / -1; justify-content: center; color: var(--auf-akzent); background: var(--akzent); border-color: var(--akzent); }
  /* 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; }

  .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: 14px; font-size: 1.6rem; }
  .gold.schlicht { font-size: 1.45rem; }
  .seite > * + .fenster, .seite > .fenster + * { margin-top: 14px; }
  .fenster { padding: 16px 14px; border-radius: 16px; }
  .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; }
  .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; }
  /* „als CSV“ in eine eigene Zeile: Daneben bliebe vom Dateinamen nichts übrig */
  .download-zeile { flex-wrap: wrap; }
  .download-zeile .csv-knopf { order: 3; flex: 1 1 100%; justify-content: center; text-align: center; }

  /* --- 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, black calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, black 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; }
  .titel-zeile { margin-top: 14px; }
  .titel-zeile .untertitel { font-size: 1.6rem; }
  .titel-zeile .buch-reiter { justify-content: center; margin: 0; padding: 2px 0; }
  .kacheln.portal-bereiche { grid-template-columns: minmax(0, 1fr); }
  .reiter a { background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: 999px; }
  .reiter a[aria-current="page"] { font-weight: 600; color: var(--auf-akzent); background: var(--akzent); border-color: var(--akzent); }

  /* --- 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(--akzent); background: var(--flaeche); border: 1px solid var(--akzent-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(--akzent); outline-offset: 2px; }
  .filter-schalter:not(:checked) ~ .filter-teil { display: none; }
  .filter-knopf.aktiv { background: var(--akzent-weich); }
  .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 .monat-feld { flex: 1 1 100%; } /* „September 2026“ samt Pfeil braucht die ganze Breite: von und bis untereinander */
  .datum-feld .auswahl { width: 100%; }
  .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-size: 1.35rem; line-height: 1.3; letter-spacing: -.01em; }
  .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; }
  /* Lange Listen mit einem Betrag je Zeile (Buchungsjournal, Bericht.Dicht): Datum und Betrag in einer Zeile, darunter der Text,
     Beleg und Konten klein nebeneinander – so braucht eine Buchung ein Drittel der Höhe einer gewöhnlichen Karte */
  .tabelle.stapel.dicht tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 10px 0; }
  .tabelle.stapel.dicht td { padding: 0; }
  .tabelle.stapel.dicht td:first-child { flex: 1 1 40%; }
  .tabelle.stapel.dicht td.zahl[data-titel] { display: block; order: 1; flex: none; font-weight: 600; white-space: nowrap; }
  .tabelle.stapel.dicht td.zahl[data-titel]::before { content: none; }
  .tabelle.stapel.dicht td:not([data-titel]):not(:first-child) { order: 2; flex: 0 0 100%; }
  .tabelle.stapel.dicht td.paar[data-titel] { display: block; order: 3; flex: 0 1 auto; font-size: .8rem; color: var(--gedaempft); text-align: left; }
  .tabelle.stapel.dicht td.paar[data-titel]::before { content: attr(data-titel) " "; font-size: inherit; letter-spacing: 0; text-transform: none; }
  .tabelle.stapel.dicht td:empty, .tabelle.stapel.dicht td.paar[data-titel]:empty, .tabelle.stapel.dicht td.zahl[data-titel]:empty { display: none; }
  .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 var(--linie); }
  .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(--text); }
  .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-stark); border-bottom: 1px solid var(--rand-stark); }

  /* 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 var(--linie); }
  .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; }

  /* Live-Karte: die Karte oben über die ganze Breite, die Fahrzeuge darunter in voller Länge */
  .karten-fenster { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px; }
  .karten-flaeche { height: 62vh; height: 62dvh; min-height: 320px; }
  .karten-liste { max-height: none; }
  .karten-fahrzeuge { overflow: visible; padding: 0; }
  .karten-auswahl { position: static; width: auto; margin-top: 10px; padding: 12px 14px; box-shadow: none; }
  /* Demo: Knöpfe über die ganze Breite */
  .demo-held { padding-top: 16px; }
  .demo-knoepfe .knopf, .demo-mitmachen .knopf { width: 100%; justify-content: center; }
}