:root {
  --bg: #f6f5f2;
  --flaeche: #ffffff;
  --rand: #ddd9d0;
  --text: #23211d;
  --gedaempft: #6d675d;
  --akzent: #4a6b3f;
  --rot: #a33a2c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
header {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 12px 24px; background: var(--flaeche); border-bottom: 1px solid var(--rand);
}
.kopfzeile { display: flex; align-items: center; gap: 24px; flex: 1; flex-wrap: wrap; }
.menue-schalter, .menue-knopf { display: none; }
.marke { font-weight: 600; letter-spacing: .02em; }
.marke span { color: var(--akzent); }
.marke .version { font-size: 11px; font-weight: 400; color: var(--gedaempft); line-height: 1.2; font-variant-numeric: tabular-nums; }
nav { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; }
nav a { padding: 4px 0; }
nav a { color: var(--gedaempft); text-decoration: none; }
nav a:hover { color: var(--akzent); }
.mandantenwahl select { padding: 5px 8px; border: 1px solid var(--rand); border-radius: 6px; background: #fff; }
main { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 28px 0 8px; }
.hinweis { color: var(--gedaempft); font-size: 13px; margin: 0 0 20px; }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 8px; }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 14px 16px; }
.karte .wert { font-size: 22px; font-variant-numeric: tabular-nums; }
.karte .beschriftung { color: var(--gedaempft); font-size: 13px; }
table { width: 100%; border-collapse: collapse; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; }
th, td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--rand); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gedaempft); font-weight: 600; }
tr:last-child td { border-bottom: none; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tr.summe td { font-weight: 600; border-top: 2px solid var(--rand); background: #fbfaf7; }
tr.gruppe td { background: #f2f0ea; font-weight: 600; }
.storniert { color: var(--gedaempft); text-decoration: line-through; }
form.buchung { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 18px; max-width: 640px; }
label { display: block; font-size: 13px; color: var(--gedaempft); margin: 12px 0 4px; }
input, select { width: 100%; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px; font: inherit; background: #fff; }
button { margin-top: 18px; padding: 9px 18px; border: none; border-radius: 6px; background: var(--akzent); color: #fff; font: inherit; cursor: pointer; }
button.mini { margin: 0; padding: 3px 10px; font-size: 12px; background: transparent; color: var(--rot); border: 1px solid var(--rand); }
button.zweitrangig { background: transparent; color: var(--akzent); border: 1px solid var(--akzent); }
.reihe { display: flex; gap: 12px; }
.reihe > * { flex: 1; }
.fehler { background: #fbeae7; border: 1px solid #e4bdb5; color: var(--rot); padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .spalten { grid-template-columns: 1fr; } }
a { color: var(--akzent); }

/* Anmeldung, Ersteinrichtung, Passwort */
body.schmal { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.anmeldebox { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 28px; width: 100%; max-width: 380px; }
.marke.gross { font-size: 20px; margin-bottom: 18px; }
.anmeldebox button { width: 100%; }
.anmeldebox .hinweis { margin-bottom: 14px; }

/* Kopfzeile: angemeldeter Benutzer */
.konto { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.konto a { color: var(--gedaempft); text-decoration: none; }
.konto a:hover { color: var(--akzent); }
.konto .abmelden { border-left: 1px solid var(--rand); padding-left: 12px; }

/* Benutzerverwaltung */
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
form.inline select, form.inline input { width: auto; padding: 4px 8px; font-size: 13px; }
.hinweisbox { background: #eef3ea; border: 1px solid #c8d8bf; color: #3d5a32; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.klein { font-size: 12px; color: var(--gedaempft); }
.gut { color: var(--akzent); }
.warn { color: var(--rot); }

/* Bankbewegungen prüfen */
.bewegung { background: var(--flaeche); border: 1px solid var(--rand); border-left: 4px solid var(--rand); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.bewegung.eingang { border-left-color: var(--akzent); }
.bewegung.ausgang { border-left-color: #b98a4a; }
.bewegung .kopf { display: flex; gap: 14px; align-items: baseline; }
.bewegung .datum { color: var(--gedaempft); font-size: 13px; }
.bewegung .betrag { font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 600; }
.bewegung .richtung { font-size: 12px; color: var(--gedaempft); text-transform: uppercase; letter-spacing: .04em; }
.bewegung .zweck { margin: 6px 0 12px; }
.kontierung { display: grid; grid-template-columns: 2fr 1fr 2fr 1.5fr auto; gap: 10px; align-items: end; }
.kontierung label { margin: 0 0 4px; }
.kontierung button { margin: 0; }
.rechts { float: right; margin-top: 8px; }
@media (max-width: 900px) { .kontierung { grid-template-columns: 1fr; } }
.kontierung.breit { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 14px 16px; }

/* Navigation in zwei Zeilen: oben die Bereiche (Tagesgeschäft links, Buchhaltung und
   Einstellungen rechts), darunter die Einträge des gewählten Bereichs */
nav.hauptmenue a.bereich.rechts { margin-left: auto; }
nav.hauptmenue a.bereich.rechts ~ a.bereich.rechts { margin-left: 0; }
nav.hauptmenue a.aktiv { color: var(--akzent); font-weight: 600; border-bottom: 2px solid var(--akzent); }
nav.mobil { display: none; }
nav.untermenue {
  display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 24px; background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}
nav.untermenue a { padding: 6px 12px; border-radius: 6px; color: var(--gedaempft); text-decoration: none; font-size: 14px; }
nav.untermenue a:hover { background: var(--bg); color: var(--akzent); }
nav.untermenue a.aktiv { background: var(--bg); color: var(--akzent); font-weight: 600; }

form.rolle { max-width: none; margin-bottom: 14px; }
form.buchung label.klein { display: inline-flex; align-items: center; gap: 6px; margin: 6px 16px 6px 0; }
form.buchung label.klein input { width: auto; margin: 0; }
table.rechte { margin: 8px 0; }
table.rechte th { font-weight: 600; }
table.rechte select { width: 100%; }
.knopfreihe { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.knopfreihe button { margin: 0; }
details.aufklapp summary { cursor: pointer; font-weight: 600; margin: 10px 0; }
.wochentage { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.kaestchen { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 14px; color: var(--text); }
.kaestchen input { width: auto; }
h3 { font-size: 14px; margin: 18px 0 6px; }

/* Betreiber: Ampeln und Etiketten für Systemstatus und Lizenzen */
.ampel { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--rand); vertical-align: middle; margin-right: 6px; }
.ampel.gross { width: 18px; height: 18px; }
.ampel.stufe-gruen { background: var(--akzent); }
.ampel.stufe-gelb { background: #d4a017; }
.ampel.stufe-rot { background: var(--rot); }
.ampel.stufe-grau { background: #b5b0a6; }
.ampelreihe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ampelfeld { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 20px; text-decoration: none; color: var(--text); font-size: 13px; }
.ampelfeld .klein { margin-left: 4px; }
.ampelfeld:hover { border-color: var(--akzent); }
.karte-gruen { border-left: 4px solid var(--akzent); }
.karte-gelb { border-left: 4px solid #d4a017; }
.karte-rot { border-left: 4px solid var(--rot); }
.karte-grau { border-left: 4px solid #b5b0a6; }
.karte .klein-wert { font-size: 15px; }
.etikett { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: #eeebe4; color: var(--gedaempft); }
.etikett.gruen { background: #e5efe0; color: var(--akzent); }
.etikett.gelb { background: #f8efd6; color: #7a5b0a; }
.etikett.rot { background: #fbeae7; color: var(--rot); }

/* Schmale Bildschirme: Menü aufklappbar, Formulare untereinander, Tabellen scrollbar,
   Knöpfe und Felder gross genug für den Finger. Kein JavaScript nötig. */
@media (max-width: 900px) {
  header { padding: 10px 16px; gap: 12px; }
  .menue-knopf {
    display: inline-block; margin-left: auto; padding: 8px 14px; border: 1px solid var(--rand);
    border-radius: 6px; color: var(--text); cursor: pointer; font-size: 14px;
  }
  .kopfzeile { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding-top: 8px; }
  .menue-schalter:checked ~ .kopfzeile { display: flex; }
  nav.hauptmenue, nav.untermenue { display: none; }
  nav.mobil { display: flex; flex-direction: column; gap: 0; }
  nav.mobil .bereich { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rand); padding: 6px 0; }
  nav.mobil .bereich strong { padding: 8px 4px 2px; color: var(--gedaempft); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
  nav.mobil a { padding: 11px 4px 11px 12px; border-bottom: 1px solid #eeebe4; font-size: 16px; }
  nav.mobil a.aktiv { color: var(--akzent); font-weight: 600; }
  .konto { justify-content: space-between; padding-top: 6px; }
  .mandantenwahl select { width: 100%; padding: 10px; font-size: 16px; }
  main { padding: 16px 12px 48px; }
  h1 { font-size: 20px; }
  .reihe { flex-direction: column; gap: 0; }
  form.buchung { padding: 14px; max-width: none; }
  input, select, textarea { font-size: 16px; padding: 10px; }  /* 16px verhindert das Zoomen auf iOS */
  button { min-height: 44px; width: 100%; }
  button.mini { min-height: 36px; width: auto; }
  form.inline { flex-wrap: wrap; }
  .knopfreihe form.inline button { width: auto; }
  main > table, main > form > table, .spalten table { display: block; overflow-x: auto; white-space: nowrap; }
  th, td { padding: 8px 10px; }
  .karte .wert { font-size: 20px; }
  .ampelfeld { width: 100%; border-radius: 10px; }
  .kontierung { grid-template-columns: 1fr; }
  .rechts { float: none; margin-top: 8px; }
}

/* Zeitachse der Geschäftsjahre: auf breiten Bildschirmen als senkrechte Achse am
   rechten Rand, sonst als Reihe von Jahresknöpfen über dem Inhalt. Kein JavaScript. */
.zeitachse { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.zeitachse-titel { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gedaempft); margin-right: 4px; }
.zeitachse .jahr { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--rand); border-radius: 999px; background: var(--flaeche); color: var(--gedaempft); text-decoration: none; font-variant-numeric: tabular-nums; }
.zeitachse .jahr:hover { color: var(--akzent); border-color: var(--akzent); }
.zeitachse .jahr.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
.zeitachse .punkt { display: none; }
.zeitachse .schloss { font-size: 11px; }
@media (min-width: 1400px) {
  .zeitachse { position: fixed; right: 28px; top: 110px; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; padding-left: 16px; border-left: 2px solid var(--rand); }
  .zeitachse-titel { margin: 0 0 8px; }
  .zeitachse .jahr { position: relative; border: none; background: transparent; padding: 7px 0; border-radius: 0; font-size: 16px; }
  .zeitachse .jahr:hover { color: var(--akzent); }
  .zeitachse .jahr.aktiv { background: transparent; color: var(--akzent); }
  .zeitachse .punkt { display: block; position: absolute; left: -23px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--rand); border: 2px solid var(--bg); }
  .zeitachse .jahr.zu .punkt { background: var(--gedaempft); }
  .zeitachse .jahr.aktiv .punkt { background: var(--akzent); transform: scale(1.35); }
}

/* Datenübernahme: Vorschau der eingelesenen Zeilen */
.uebernahme-ziele { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.uebernahme-ziele form.buchung { max-width: none; }
textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px; font: inherit; background: #fff; min-height: 120px; }
tr.neu td:first-child { border-left: 4px solid var(--akzent); }
tr.vorhanden td { color: var(--gedaempft); }
tr.fehlerhaft td:first-child { border-left: 4px solid var(--rot); }
/* Herdenplanung: eigenes Werkzeug mit Unternavigation, breitere Fläche */
body.werkzeug main { max-width: 1400px; }
.werkzeugleiste { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: -12px 0 22px; padding: 10px 0; border-bottom: 2px solid var(--akzent); }
.werkzeugtitel { font-weight: 600; font-size: 17px; }
.werkzeugtitel .klein { font-weight: 400; margin-left: 8px; }
.werkzeugnav { display: flex; gap: 4px; flex-wrap: wrap; }
.werkzeugnav a { padding: 6px 12px; border-radius: 6px; color: var(--gedaempft); text-decoration: none; }
.werkzeugnav a:hover { background: var(--flaeche); color: var(--akzent); }
.werkzeugnav a.aktiv { background: var(--akzent); color: #fff; }
.stallkarten { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.karte.stall .stallkopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.stallherde { margin: 8px 0; }
.stallherde.leer { color: var(--gedaempft); }
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.kennzahlen .wert { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.kennzahlen .beschriftung { display: block; font-size: 11px; color: var(--gedaempft); }
form.buchung.breit { max-width: none; margin-bottom: 14px; }
form.filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; align-items: end; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 16px 16px; margin-bottom: 18px; }
form.filter label { margin: 0 0 4px; }
form.filter button { margin: 0; width: 100%; }
.grafikrahmen { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; overflow-x: auto; }
svg .raster { stroke: var(--rand); stroke-width: 1; }
svg .achse { fill: var(--gedaempft); font-size: 11px; }
svg .achse.klein { font-size: 10px; }
svg .zeilenname { fill: var(--text); font-size: 13px; font-weight: 600; }
svg .herdenbalken { fill: var(--akzent); fill-opacity: .85; }
svg .herdenbalken.offen { fill-opacity: .45; }
svg .herdenbalken.geplant { stroke: var(--akzent); stroke-dasharray: 4 3; fill-opacity: .25; }
svg .balkentext { fill: #fff; font-size: 11px; pointer-events: none; }
svg .herdenbalken.geplant + .balkentext { fill: var(--text); }
svg .mauser { stroke: var(--rot); stroke-width: 2; }
svg .heute { stroke: var(--rot); stroke-width: 1.5; stroke-dasharray: 3 3; }
svg .saeule { fill: var(--akzent); }
svg .soll { fill: none; stroke: var(--akzent); stroke-width: 1.5; }
.legende { display: inline-block; width: 14px; height: 10px; vertical-align: middle; border: 1.5px solid var(--akzent); }
.legende.ist { background: var(--akzent); }
svg .saeule:hover { fill: #3a5731; }
svg .kurve { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linejoin: round; }
svg .kurvenpunkt { fill: var(--flaeche); stroke: var(--akzent); stroke-width: 2; }
table.kurventabelle input { padding: 4px 8px; font-size: 14px; }
table.kurventabelle td { padding: 3px 6px; }
table.kurventabelle tr.neu td { background: #fbfaf7; }
textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px; font: inherit; background: #fff; }
@media (max-width: 900px) {
  .kennzahlen { grid-template-columns: repeat(2, 1fr); }
  .werkzeugleiste { margin-top: 0; }
}

/* Kalender */
.kalenderwahl { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.farbpunkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.termin-chip { display: block; font-size: 12px; line-height: 1.3; border-left: 3px solid var(--akzent); background: var(--flaeche); padding: 2px 5px; margin: 3px 0; border-radius: 3px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.termin-chip:hover { background: #eef3ea; }
.termin-chip .zeit { color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.termin-chip.abgesagt { text-decoration: line-through; color: var(--gedaempft); }
.woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tagspalte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; padding: 6px; min-height: 160px; }
.tagkopf { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.tagkopf a { color: var(--text); text-decoration: none; }
table.monat { table-layout: fixed; }
table.monat td { vertical-align: top; height: 96px; padding: 4px 5px; }
table.monat .tagnummer { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
table.monat .tagnummer a { color: var(--text); text-decoration: none; }
table.monat td.fremdmonat { color: var(--gedaempft); background: #fbfaf7; }
.heute-zelle { background: #eef3ea !important; }
@media (max-width: 900px) {
  .woche { grid-template-columns: 1fr; }
  .tagspalte { min-height: 0; }
  table.monat td { height: 60px; }
  .termin-chip { white-space: normal; }
}

/* Cockpit auf der Startseite */
.cockpit { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 8px; }
.cockpit .karte h2 { margin: 0 0 8px; font-size: 15px; display: flex; justify-content: space-between; align-items: baseline; }
.cockpit .karte h3 { margin: 12px 0 4px; font-size: 13px; color: var(--gedaempft); }
.cockpit .zeile { font-size: 13px; padding: 3px 0; border-top: 1px solid var(--rand); }
.cockpit .zeile:first-of-type { border-top: none; }
.cockpit .zeit { display: inline-block; min-width: 64px; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.cockpit .kennzahlen { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 0 0 8px; }
.cockpit .kennzahlen .wert { font-size: 17px; }

/* Hygiene: Kontrollkarten für Tablet und Smartphone */
.kontrollkarte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.kontrollkarte.ueberfaellig { border-color: var(--rot); }
.kontrollkopf { margin-bottom: 8px; }
form.erfassen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
form.erfassen input { width: auto; min-width: 120px; flex: 1; margin: 0; }
form.erfassen input[type="number"] { max-width: 140px; flex: 0 1 140px; font-size: 18px; }
form.erfassen label { margin: 0; }
button.gross { margin: 0; min-height: 44px; padding: 8px 22px; font-size: 15px; }
button.gross.rot { background: var(--rot); }
tr.abweichung td { background: #fbeeee; }
@media (max-width: 900px) {
  form.erfassen { flex-direction: column; align-items: stretch; }
  form.erfassen input, form.erfassen input[type="number"] { max-width: none; width: 100%; }
}

/* Kundenportal */
body.portal nav a.aktiv { color: var(--akzent); font-weight: 600; }

/* Dateiablage */
.suchzeile { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.suchzeile input[type=search] { flex: 1; max-width: 480px; }
.pfad a.aktiv { font-weight: 600; }
.ordnerliste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.ordnerliste a.ordner { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; padding: 8px 12px; text-decoration: none; }
.ablagefeld.ziel { outline: 2px dashed var(--akzent); outline-offset: -6px; }
.vorschau { width: 100%; min-height: 480px; border: 1px solid var(--rand); border-radius: 8px; background: #fff; }
img.vorschau { min-height: 0; height: auto; }

/* Posteingang */
pre.mailtext { white-space: pre-wrap; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; padding: 12px; font: inherit; }
.beitrag { border-left: 3px solid var(--rand); padding: 6px 10px; margin: 8px 0; }
.beitrag.aus { border-left-color: var(--akzent); }
.beitrag .auszug { white-space: pre-wrap; color: inherit; }
.fehlertext { color: var(--rot); }

/* Kasse */
.kassenbildschirm { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.kassenbildschirm .raster h2 { font-size: 15px; margin: 10px 0 6px; color: var(--gedaempft); }
.tasten { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.taste { min-height: 64px; padding: 8px; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); color: var(--text); font-size: 15px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; cursor: pointer; margin: 0; }
.taste:active { background: #e9efe4; }
.taste .preis { color: var(--gedaempft); font-size: 13px; }
.korb { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 14px 16px; position: sticky; top: 10px; }
.korb table { width: 100%; }
.korb td.menge { white-space: nowrap; }
.korb td.menge input { width: 56px; text-align: center; margin: 0 2px; }
.korb input.rabatt { width: 54px; }
.korb .summe { font-size: 20px; text-align: right; margin: 10px 0; }
.korb .zahlarten label { display: inline-block; margin: 4px 10px 4px 0; }
.korb .scheine { display: flex; gap: 6px; margin: 6px 0; }
.korb button.abschluss { width: 100%; font-size: 18px; padding: 12px; margin-top: 8px; }
@media (max-width: 900px) { .kassenbildschirm { grid-template-columns: 1fr; } .korb { position: static; } }

/* Terminbuchung */
main.buchen { max-width: 900px; }
.tasten.leistungen .taste { text-decoration: none; }
.tasten.leistungen .taste.aktiv { border-color: var(--akzent); background: #e9efe4; }
.zeitfenster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.zeitfenster .tag { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; padding: 8px; }
.zeitfenster .slot { display: block; padding: 4px 0; cursor: pointer; }
.zeitfenster .slot input { width: auto; margin-right: 6px; }

/* Suche in der Kopfzeile */
.suchfeld { margin: 0; }
.suchfeld input[type=search] { width: 200px; padding: 5px 9px; border: 1px solid var(--rand); border-radius: 6px; font-size: 13px; margin: 0; }
kbd { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 4px; padding: 0 5px; font-size: 12px; }
@media (max-width: 900px) { .suchfeld input[type=search] { width: 100%; } }

/* Auswertungen */
.karte.auswertung { margin-bottom: 16px; }
.grafik { width: 100%; height: auto; display: block; margin: 6px 0 10px; }
.karte.auswertung details summary { cursor: pointer; color: var(--gedaempft); font-size: 13px; }

/* Einrichtung */
tr.erledigt td { color: var(--gedaempft); }

/* Dienstplan */
.schicht-chip { border-left-color: var(--gedaempft) !important; background: #f2f0ea; }
.karte.schicht { padding: 8px; margin: 6px 0; }
.karte.schicht.unterbesetzt { border-left: 4px solid var(--rot); }

/* QR-Codes: Scanner, Etiketten, Ausweise */
.scanner video { width: 100%; max-width: 480px; border: 1px solid var(--rand); border-radius: 10px; background: #000; display: block; margin-bottom: 8px; }
.scanner-zeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
body.druckbogen main { max-width: none; padding: 16px; }
body.druckbogen .nurbildschirm { margin: 10px 16px 0; }
.etiketten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.etiketten.gross { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.etikette { display: flex; gap: 10px; align-items: center; border: 1px dashed var(--rand); border-radius: 8px; padding: 8px; background: #fff; break-inside: avoid; }
.etikette img { flex: 0 0 auto; }
.etikette .text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.etikette .text strong { font-size: 18px; }
.ausweis { width: 340px; border: 1px solid var(--rand); border-radius: 12px; padding: 16px; background: #fff; display: flex; gap: 14px; align-items: center; break-inside: avoid; margin: 0 auto; }
.ausweis .text { display: flex; flex-direction: column; gap: 2px; }
.ausweis .text strong { font-size: 18px; }
.ausweis .firma { color: var(--akzent); font-weight: 600; }
body.stempeluhr main { max-width: 640px; text-align: center; }
body.stempeluhr .scanner video { margin: 0 auto 8px; }
body.stempeluhr .scanner-zeile { justify-content: center; }
body.stempeluhr form.erfassen { justify-content: center; }
@media print {
  .nurbildschirm { display: none !important; }
  body { background: #fff; }
  .etikette, .ausweis { border-color: #999; }
}

/* Selbstbedienungskasse */
body.hofladen main { max-width: 1100px; }
body.hofladen .taste { min-height: 76px; font-size: 17px; }
body.hofladen .korb button.abschluss { margin-top: 8px; }
body.hofladen main.beleg { max-width: 640px; }
body.hofladen main.beleg .taste { text-decoration: none; justify-content: center; min-height: 44px; }

/* Gastronomie: Tischplan */
.tischplan form { margin: 0; }
.tischplan .taste { width: 100%; text-decoration: none; }
.taste.besetzt { border-color: var(--akzent); background: #e9efe4; }

/* Terminalzahlung (Fahrplan 8.4) */
.terminal-dialog { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.terminal-dialog .kasten { background: var(--flaeche); border-radius: 12px; padding: 20px 24px; max-width: 360px; width: calc(100% - 32px); text-align: center; }
.terminal-dialog .betrag { font-size: 22px; font-weight: 600; }
.terminal-dialog img.qr { width: 220px; height: 220px; image-rendering: pixelated; }

/* Küchenbildschirm (Gastronomie): Tickets je Gang, Ampel nach Wartezeit, Warteschlange */
.kds-kopf { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: baseline; margin-bottom: 12px; }
.kds-kopf h1 { margin: 0; }
.kds-stellen { display: flex; flex-wrap: wrap; gap: 6px; }
.kds-stellen a { padding: 6px 12px; border: 1px solid var(--rand); border-radius: 999px; text-decoration: none; background: var(--flaeche); }
.kds-stellen a.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.kds { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .kds { grid-template-columns: 1fr; } }
.kds-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.kds-ticket { background: var(--flaeche); border: 1px solid var(--rand); border-top: 8px solid #6b9a5b; border-radius: 10px; padding: 10px 12px; }
.kds-ticket.gelb { border-top-color: #d9a520; }
.kds-ticket.rot { border-top-color: var(--rot); }
.kds-ticketkopf { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 17px; }
.kds-zeit { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 14px; }
.kds-teil { margin: 6px 0; padding: 4px 8px; border-radius: 6px; background: #fbf1d9; font-size: 13px; }
.kds-teil.vollstaendig { background: #e9f1e4; }
.kds-ticket ul { list-style: none; margin: 6px 0 0; padding: 0; }
.kds-ticket li { border-bottom: 1px solid var(--rand); }
.kds-pos { display: block; width: 100%; margin: 0; padding: 8px 4px; background: transparent; color: var(--text); text-align: left; font-size: 17px; border-radius: 0; }
.kds-pos em { display: block; color: var(--rot); font-size: 14px; }
.kds-ticket button[type=submit]:not(.kds-pos) { width: 100%; margin-top: 10px; }
.kds-seite h2 { font-size: 16px; }
.kds-warte { background: var(--flaeche); border: 1px dashed var(--rand); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 14px; }

/* Umschalter Laden | Gastro an der Kasse */
.umschalter { display: inline-flex; border: 1px solid var(--rand); border-radius: 999px; overflow: hidden; margin-bottom: 12px; background: var(--flaeche); }
.umschalter a { padding: 7px 18px; text-decoration: none; color: var(--text); }
.umschalter a.aktiv { background: var(--akzent); color: #fff; }

/* Splitten: Tisch links, diese Zahlung rechts; Stück antippen oder wischen */
.teilen[hidden] { display: none; }
.teilen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.teilen .klein { grid-column: 1 / -1; }
.teilen-spalte { border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; min-height: 120px; }
.teilen-spalte.zahlung { border-color: var(--akzent); background: #f3f7f0; }
.teilen-spalte h3 { margin: 0 0 6px; font-size: 15px; display: flex; justify-content: space-between; }
.teilen-spalte ul { list-style: none; margin: 0 0 8px; padding: 0; }
.teilen-spalte li { padding: 10px 8px; margin-bottom: 6px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; cursor: pointer; user-select: none; touch-action: pan-y; }
button.zweit { background: transparent; color: var(--akzent); border: 1px solid var(--akzent); }

/* QR-Code zum papierlosen Beleg */
.beleg-qr { display: flex; gap: 14px; align-items: center; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.beleg-qr img { flex: none; image-rendering: pixelated; }

/* Reservationen: Tischbelegung als Zeitachse (Viertelstunden) */
.belegung { display: grid; grid-template-columns: 90px 1fr; gap: 2px 8px; overflow-x: auto; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 10px; }
.beleg-achse, .beleg-zeile { display: grid; grid-template-columns: repeat(var(--spalten), minmax(14px, 1fr)); min-width: calc(var(--spalten) * 14px); }
.beleg-achse span { font-size: 12px; color: var(--gedaempft); border-left: 1px solid var(--rand); padding-left: 2px; }
.beleg-zeile { min-height: 30px; border-top: 1px solid var(--rand); align-items: center; }
.beleg-name { font-size: 14px; align-self: center; }
.beleg-balken { grid-row: 1; background: #dfe9d9; border: 1px solid #9ab98c; border-radius: 6px; padding: 3px 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); text-decoration: none; }
.beleg-balken.anfrage { background: #fbf1d9; border-color: #d9a520; border-style: dashed; }
.beleg-balken.angekommen { background: var(--akzent); color: #fff; }
.beleg-balken.fix { box-shadow: inset 3px 0 0 var(--akzent); }
button.mini.gruen { color: var(--akzent); }
.zeitraster .tag { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; border: none; padding: 0; }
.zeitraster .slot { display: flex; align-items: center; gap: 4px; margin: 0; padding: 8px; border: 1px solid var(--rand); border-radius: 8px; background: #fff; }

/* Kennzahlen: Filterzeile und Kacheln */
.filterzeile { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; margin-bottom: 14px; }
.filterzeile label { display: flex; flex-direction: column; font-size: 13px; color: var(--gedaempft); }
.filterzeile input, .filterzeile select { width: auto; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.grafik g.balken:hover path { opacity: .8; }

/* Bonus: Fortschritt zum Ziel mit Stufenmarken */
.zielbalken { position: relative; height: 14px; background: var(--rand); border-radius: 7px; margin: 10px 0 18px; overflow: visible; }
.zielbalken .stand { height: 100%; background: var(--akzent); border-radius: 7px; max-width: 100%; }
.zielbalken .marke { position: absolute; top: -3px; width: 2px; height: 20px; background: var(--text); opacity: .5; }
.zielbalken .marke.erreicht { background: var(--akzent); opacity: 1; }


/* Produktion (Etappe 21): Rezepte, Werkstatt am Tablet, Allergene */
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: #eef3ea; color: var(--akzent); border: 1px solid #d5e0cd; white-space: nowrap; }
.chip-allergen { background: #fbeeee; color: var(--rot); border-color: #efd0cb; }
.chip-spur { background: #fff; color: var(--gedaempft); border-color: var(--rand); border-style: dashed; }
.chip-kontrolle { background: #fdf6e3; color: #7a5a00; border-color: #eadbb0; }
strong.allergen { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.vorformatiert { white-space: pre-line; }
.nowrap { white-space: nowrap; }
.mitte { text-align: center; }
details.aufklapp.inline { display: inline-block; }
.fortschritt { height: 8px; background: #ece8df; border-radius: 4px; overflow: hidden; margin: 8px 0 2px; }
.fortschritt span { display: block; height: 100%; background: var(--akzent); }
a.werkkarte { display: block; color: inherit; text-decoration: none; }
a.werkkarte:hover { border-color: var(--akzent); }
.werkkopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.werkstattkopf { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.werkstattkopf h1 .wert { color: var(--akzent); margin-left: 8px; }
.werkfortschritt { min-width: 220px; }
.werkstatt h2 { margin-top: 0; }
.zutatzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; margin-bottom: 8px; }
.zutatzeile.erledigt { background: #f3f7f0; border-color: #d5e0cd; }
.zutatzeile .gross { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 6px; }
.zutatform { display: flex; gap: 6px; align-items: center; margin: 0; }
.zutatform input { margin: 0; width: auto; }
button.haken { margin: 0; min-width: 48px; min-height: 44px; font-size: 20px; }
.schrittliste { padding-left: 20px; }
.schrittliste li.schritt { margin-bottom: 12px; }
.schrittkopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.schrittkarte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.schrittkarte.aktuell { border: 2px solid var(--akzent); box-shadow: 0 2px 10px rgba(74, 107, 63, .15); }
.schrittkarte.erledigt { background: #f3f7f0; }
.schrittkarte.abweichung { border-color: var(--rot); background: #fbeeee; }
.schrittkarte .nummer { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--akzent); color: #fff; font-weight: 600; }
.schrittkarte.erledigt .nummer { background: #b5b0a6; }
.schrittkarte .anweisung { font-size: 17px; line-height: 1.45; margin: 8px 0; }
.schrittkarte .schrittform button { margin-top: 8px; min-height: 48px; }
.schrittkarte button.zeitmesser { color: var(--akzent); }
input.messwert { font-size: 22px; max-width: 160px; }
input.messwert.ausserhalb { border-color: var(--rot); background: #fbeeee; }
.zeitanzeige { position: fixed; right: 16px; bottom: 16px; z-index: 40; background: var(--akzent); color: #fff; font-size: 28px; font-weight: 600; padding: 10px 18px; border-radius: 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.zeitanzeige.abgelaufen { background: var(--rot); }
.naehrwertraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
.tabellenrahmen { overflow-x: auto; }
table.allergenmatrix th.senkrecht { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: none; letter-spacing: 0; padding: 8px 4px; white-space: nowrap; }
table.allergenmatrix td { padding: 6px 4px; }
@media print { table.allergenmatrix { font-size: 11px; } }
form.zeilenform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
form.zeilenform label { margin: 0; }
form.zeilenform input { width: auto; margin: 0; }
form.zeilenform button { margin: 0; }
.zutatzeile { flex-wrap: wrap; }
.zutatzeile .zutatname { flex: 1 1 180px; }
.zutatzeile .gross { white-space: nowrap; }


/* Vermögensübersicht (Fahrplan 17.2) */
.teilbalken { display: flex; gap: 2px; height: 22px; margin: 4px 0 6px; }
.teilbalken .teil { border-radius: 4px; min-width: 2px; }
.teil.fremd, .anteilbalken.fremd, .legende-punkt.fremd { background: #b5b0a6; }
.teil.eigen, .anteilbalken.eigen, .legende-punkt.eigen { background: var(--akzent); }
.legende-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.legende-punkt.brutto { background: #8fae7f; }
table.anteile td.balkenzelle { width: 35%; }
.anteilbalken { display: block; height: 10px; border-radius: 0 4px 4px 0; }
svg .verlauf { fill: none; stroke-width: 2; stroke-linejoin: round; }
svg .verlauf.brutto { stroke: #8fae7f; stroke-dasharray: 6 4; }
svg .verlauf.netto { stroke: var(--akzent); }
svg .punkt { stroke: var(--flaeche); stroke-width: 2; }
svg .punkt.brutto { fill: #8fae7f; }
svg .punkt.netto { fill: var(--akzent); }
svg .treffer { fill: transparent; }
svg .messpunkt:hover .punkt { r: 6; }
svg .nulllinie { stroke: var(--gedaempft); stroke-width: 1; }
table.anteile td.zahl { white-space: nowrap; }
.stichtagwahl { max-width: 460px; align-items: flex-end; margin-bottom: 16px; }
.stichtagwahl button { margin-top: 0; }
@media (max-width: 900px) { .stichtagwahl { align-items: stretch; } }

/* Ziehen und Ablegen, Antippen, Eingabehilfen (bedienung.js, Etappe 28) */
[data-ziehen] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: grab; }
body.zieht, body.zieht * { cursor: grabbing !important; }
.ziehgeist { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: .92; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); margin: 0 !important; }
.wird-gezogen { opacity: .35; }
.ablage-moeglich { outline: 2px dashed var(--akzent); outline-offset: -2px; }
.ablage-ueber { outline: 3px solid var(--akzent); background-color: #e9efe4 !important; }
.gewaehlt { outline: 3px solid var(--akzent); outline-offset: 1px; background-color: #e9efe4 !important; }
.wahlleiste { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 90; display: flex; gap: 12px; align-items: center; max-width: calc(100% - 24px); padding: 10px 14px; background: var(--text); color: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); font-size: 14px; }
.wahlleiste button.mini { background: #fff; color: var(--text); width: auto; }
body.wird-gespeichert { cursor: progress; }
body.wird-gespeichert main { opacity: .6; pointer-events: none; }
.eingabegruppe { display: inline-flex; gap: 4px; align-items: center; flex-wrap: nowrap; width: 100%; }
.eingabegruppe.schnell { flex-wrap: wrap; }
.eingabegruppe input { flex: 1 1 4em; width: auto; min-width: 0; }
.eingabegruppe button.eingabeknopf { flex: 0 0 auto; color: var(--text); min-width: 36px; font-size: 15px; }
.reihe > div { min-width: 0; }
form.inline .eingabegruppe, td .eingabegruppe { width: auto; }
.ziehgriff { color: var(--gedaempft); font-size: 13px; margin-right: 2px; }

/* Finger statt Maus (auch Tablets im Querformat): Tippflächen mindestens rund 40 px */
@media (pointer: coarse) {
  button.mini { min-height: 40px; min-width: 40px; padding: 6px 12px; font-size: 14px; }
  .termin-chip { padding: 6px 7px; font-size: 13px; }
  nav.untermenue a { padding: 10px 14px; }
  .kaestchen input, input[type=checkbox], input[type=radio] { min-width: 22px; min-height: 22px; }
  details > summary { padding: 8px 0; }
}

/* Dienstplan: Leiste mit Personen und Schichtbausteinen zum Ziehen */
.planleiste { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--rand); }
.planleiste .zeile { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 3px 0; -webkit-overflow-scrolling: touch; }
.planleiste .zeile > strong { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gedaempft); flex: 0 0 auto; margin-right: 4px; }
.planleiste .zeile.ablage-moeglich { outline-offset: 2px; }
.personchip, .baustein { flex: 0 0 auto; margin: 0; padding: 6px 12px; border: 1px solid var(--rand); border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: 14px; white-space: nowrap; min-height: 36px; width: auto; }
.personchip .klein { margin-left: 4px; }
.personchip.voll { border-color: #d4a017; }
.personchip.ueber { border-color: var(--rot); }
.baustein { border-radius: 8px; border-style: dashed; border-color: var(--akzent); }
.einsatzchip { display: inline-flex; align-items: center; gap: 4px; margin: 3px 4px 0 0; padding: 2px 4px 2px 10px; border: 1px solid var(--rand); border-radius: 999px; background: #fbfaf7; font-size: 13px; }
.einsatzchip form.inline button.mini { border: none; padding: 0 6px; }
.karte.schicht .schichtkopf { cursor: grab; }
.tagspalte.ablage-moeglich, .karte.schicht.ablage-moeglich { outline-offset: -3px; }
.hilfezeile { font-size: 13px; color: var(--gedaempft); margin: 0 0 8px; }
@media (max-width: 900px) {
  .personchip, .baustein { min-height: 42px; font-size: 15px; }
  .planleiste { top: 0; }
}

/* Nur während des Ziehens oder nach dem Antippen sichtbar (z.B. «erledigt» bei den Pendenzen) */
.nur-beim-ziehen { display: none; }
body.zieht .nur-beim-ziehen { display: block; }
.ablagezone { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 95; padding: 14px 28px; border-radius: 12px; background: var(--flaeche); border: 2px dashed var(--akzent); color: var(--akzent); font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }

/* Pendenzen nach Fälligkeit, Ordner im Postfach */
table.pendenzliste tbody.ablage-moeglich { outline-offset: -3px; }
table.pendenzliste tr.leer td { color: var(--gedaempft); padding-top: 10px; padding-bottom: 10px; }
ul.ordnerziele { list-style: none; padding: 0; margin: 0 0 12px; }
ul.ordnerziele li { padding: 6px 10px; border-radius: 6px; }

/* Bewegungen prüfen: offene Rechnungen als Ziel daneben */
.pruefraster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.pruefraster aside.zuordnung { width: 300px; position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; }
.pruefraster aside.zuordnung h2 { margin-top: 0; }
.karte.zielkarte { padding: 10px 12px; margin: 0 0 8px; }
.bewegung .kopf[data-ziehen] { cursor: grab; }
@media (max-width: 900px) {
  .pruefraster { grid-template-columns: 1fr; }
  .pruefraster aside.zuordnung { width: auto; position: static; max-height: none; }
}

/* Tabellen mit Eingaben je Zeile: auf dem Handy eine Karte je Zeile, Felder untereinander mit Beschriftung */
@media (max-width: 760px) {
  main > table.zeilenkarten, table.zeilenkarten { display: block; overflow: visible; white-space: normal; border: none; background: transparent; }
  table.zeilenkarten tbody, table.zeilenkarten tr, table.zeilenkarten td { display: block; }
  table.zeilenkarten tr:first-child { display: none; }
  table.zeilenkarten tr { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
  table.zeilenkarten td { border: none; padding: 4px 0; }
  table.zeilenkarten td[data-titel]::before { content: attr(data-titel); display: block; font-size: 12px; color: var(--gedaempft); margin-bottom: 2px; }
  table.zeilenkarten td input, table.zeilenkarten td select { width: 100%; }
  table.zeilenkarten form.inline { display: flex; flex-wrap: wrap; width: 100%; }
}

/* Kennzahlen: Tafeln mit Kacheln (Fahrplan 32) */
.tafelliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tafelliste a.karte { text-decoration: none; color: inherit; }
.tafelliste form.karte button { margin: 10px 0 0; }
.tafelfilter a { margin-left: 8px; }
.tafelkacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0; align-items: start; }
.tafelkachel { min-width: 0; }
.tafelkachel.breit { grid-column: span 2; }
.tafelkachel.leer { opacity: .6; }
.tafelkachel h2 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--gedaempft); }
.tafelkachel .wert { font-size: 28px; font-weight: 600; }
.kachelwert { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.veraenderung { font-size: 13px; color: var(--gedaempft); margin-left: auto; }
.veraenderung.besser { color: var(--akzent); }
.veraenderung.schlechter { color: var(--rot); }
.kreisfeld { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.kreisfeld .grafik { width: 150px; flex: none; }
.tafelanteile { list-style: none; margin: 0; padding: 0; font-size: 13px; flex: 1; min-width: 140px; }
.tafelanteile li { margin: 3px 0; }
.tafelanteile i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.linie { display: inline-block; width: 18px; border-top: 2px solid var(--akzent); vertical-align: middle; margin: 0 4px 0 8px; }
.linie.gestrichelt { border-top: 2px dashed #a8a298; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.katalog { margin-bottom: 10px; }
.katalog summary { cursor: pointer; }
.knopfzelle { white-space: nowrap; }
@media (max-width: 1100px) { .tafelkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tafelkacheln { grid-template-columns: 1fr; } .tafelkachel.breit { grid-column: auto; } }
.ablaufspur { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; padding: 12px; font-size: 12px; overflow-x: auto; white-space: pre; }

/* Kennzahlen im Bildschirmmodus (Fahrplan 32.2): ohne Navigation, grosse Zahlen, ganze Breite */
body.bildschirm { margin: 0; padding: 18px 24px; }
body.bildschirm main { max-width: none; padding: 0; }
body.bildschirm header.bildschirmkopf { position: static; background: none; border: 0; padding: 0; }
.bildschirmkopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.bildschirmkopf h1 { margin: 0; }
body.bildschirm .tafelkacheln { margin-top: 16px; }
body.bildschirm .tafelkachel .wert { font-size: 40px; }
body.bildschirm .tafelkachel h2 { font-size: 16px; }
@media (min-width: 1600px) { body.bildschirm .tafelkacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Kennzahlen: Filter und Zielwerte (Fahrplan 32.4) */
.tafelfilter { flex-wrap: wrap; }
.filterfeld { order: 10; flex-basis: 100%; }
.filterfeld summary { cursor: pointer; padding: 4px 0; display: inline-block; }
.filterfeld[open] { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.filterfeld[open] summary { flex-basis: 100%; }
.filterfeld label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.filterfeld select { width: auto; margin: 0; }
.ampeltext { margin: 6px 0 0; }
.ampeltext.gruen { color: var(--akzent); }
.ampeltext.gelb { color: #8a6d00; }
.ampeltext.rot { color: var(--rot); }