: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-knopf { display: none; }
/* Schalter fürs Handymenü: unsichtbar, aber per Tastatur erreichbar (Leertaste klappt auf) */
.menue-schalter { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.menue-schalter:focus-visible + .menue-knopf { outline: 3px solid var(--akzent); outline-offset: 2px; }
/* Sprunglink zum Inhalt: erst beim Ansteuern mit der Tastatur sichtbar */
.sprunglink { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--flaeche); border: 2px solid var(--akzent); border-radius: 6px; }
.sprunglink:focus { top: 8px; }
main:focus { outline: none; }
/* Sichtbarer Fokus für alle, die mit der Tastatur arbeiten */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.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 button.linkknopf { width: auto; }
.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; }
/* Knopf, der wie ein Verweis aussieht (Abmelden nur per POST) */
button.linkknopf { margin: 0; padding: 0; background: none; border: none; border-radius: 0; color: var(--gedaempft); font: inherit; cursor: pointer; }
button.linkknopf:hover { color: var(--akzent); }
.konto button.linkknopf.abmelden { 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; }
nav.untermenue .trenner { width: 1px; align-self: stretch; margin: 4px 6px; background: var(--rand); }

/* Tablet quer und kleine Laptops: niedrige Kopfzeile, damit mehr Inhalt sichtbar bleibt */
@media (min-width: 901px) and (max-height: 820px) {
  header { padding: 6px 18px; gap: 14px; }
  .kopfzeile { gap: 14px; }
  nav { gap: 12px; }
  .marke .version { display: none; }
  nav.untermenue { padding: 2px 18px; }
  nav.untermenue a { padding: 4px 10px; }
}

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; max-width: 640px; }
table.rechte th { font-weight: 600; text-align: left; }
table.rechte td:last-child { width: 170px; }
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); }
  nav.mobil .bereich summary { padding: 12px 4px; min-height: 44px; color: var(--text); font-weight: 600; cursor: pointer; }
  nav.mobil .bereich[open] summary { color: var(--akzent); }
  nav.mobil .bereich:not([open]) a { display: none; }
  nav.mobil a { display: block; padding: 11px 4px 11px 16px; min-height: 44px; border-bottom: 1px solid #eeebe4; font-size: 16px; }
  nav.mobil a.gruppe { border-top: 1px solid var(--rand); }
  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; }
}
/* Verkaufschancen als Tafel (Etappe 34.41): Spalten je Phase, am Handy waagrecht blättern */
.chancentafel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.chancentafel .tagspalte { min-height: 200px; }
.chancekarte { padding: 8px 10px; margin-top: 6px; font-size: 14px; cursor: grab; }
.abschlussspalte { display: flex; flex-direction: column; gap: 8px; }
.abschlussspalte .tagspalte { min-height: 96px; flex: 1; }
.abschlussspalte .gewonnen { border-color: #5aa469; }
.abschlussspalte .verloren { border-color: var(--rot); }

/* 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); }
.kontrollkarte.offline-erfasst { opacity: .6; border-style: dashed; }
.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; }
iframe.mailrahmen { width: 100%; min-height: 420px; border: 1px solid var(--rand); border-radius: 8px; background: #fff; }
.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; flex-wrap: wrap; 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; } }
/* Handy (Etappe 34.30): Total und «Abschliessen» bleiben unten sichtbar, während man den Korb ausfüllt */
@media (max-width: 600px) {
  body.kasse main { padding-bottom: 76px; }
  body.kasse .korb .summe { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 16px; z-index: 20;
    text-align: left; background: var(--flaeche); border-top: 1px solid var(--rand); box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
  body.kasse .korb button.abschluss { position: fixed; right: 12px; bottom: 9px; width: auto; margin: 0; z-index: 21; padding: 10px 18px; }
}

/* 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; }
  /* Gedruckt wird der Inhalt: ohne Kopfzeile, Menüs, Zeitachse und Bedienelemente */
  header, nav.untermenue, .zeitachse, .sprunglink, .menue-schalter, .menue-knopf { display: none !important; }
  button, input[type=submit], input[type=button], input[type=reset], input[type=file], .knopfreihe,
  select, textarea, input:not([type=hidden]):not([type=checkbox]):not([type=radio]) { display: none !important; }
  main { max-width: none; padding: 0; margin: 0; }
  main > table, main > form > table, .spalten table { display: table !important; white-space: normal !important; }
  table, .tabellenrahmen, .grafikrahmen { overflow: visible !important; max-width: none !important; }
  tr, img { page-break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* 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; }
/* Grafischer Tischplan (Etappe 34.31): Lage in Prozent der Fläche */
.saalplan { position: relative; width: 100%; aspect-ratio: 16 / 10; border: 1px dashed var(--rand); border-radius: 10px;
  background: var(--flaeche); margin-bottom: 10px; }
.saalplan .tischform { position: absolute; transform: translate(-50%, -50%); width: 96px; margin: 0; }
.saalplan .tischform .taste { width: 100%; min-height: 64px; }
.saalplan .tischform.rund .taste, .saalplan.bearbeiten .tischform.rund { border-radius: 50%; align-items: center; justify-content: center; text-align: center; }
.saalplan.bearbeiten .tischform { min-height: 54px; padding: 6px; border: 1px solid var(--akzent); border-radius: 10px;
  background: #e9efe4; cursor: grab; touch-action: none; user-select: none; display: flex; align-items: center; justify-content: center; }
.saalplan.bearbeiten .tischform.ohne { opacity: .55; border-style: dashed; }
@media (max-width: 600px) { .saalplan .tischform { width: 72px; } .saalplan .tischform .taste { min-height: 52px; font-size: 13px; padding: 4px; } }
/* Varianten und Zusätze beim Bestellen */
.zusatzwahl { border: 1px solid var(--akzent); border-radius: 10px; padding: 10px; margin: 10px 0; background: var(--flaeche); }
.zusatzwahl label { display: inline-block; margin: 4px 12px 4px 0; }
.zusatzwahl > div { margin: 6px 0; }
/* Handgerät-Modus am Tisch: kleinere Tasten, Rechnung unter dem Raster */
body.handgeraet .tasten { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
body.handgeraet .taste { min-height: 52px; font-size: 14px; padding: 6px; }
body.handgeraet .kassenbildschirm { grid-template-columns: 1fr; }

/* 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; }
/* Ganze Zeile öffnet den Eintrag (Posteingang, Meine E-Mails): der Link der Zeile deckt sie ab,
   andere Links, Knöpfe und der Ziehgriff liegen darüber */
tr.zeilenlink { position: relative; }
tr.zeilenlink a.zeilenziel::after { content: ""; position: absolute; inset: 0; }
tr.zeilenlink a:not(.zeilenziel), tr.zeilenlink form, tr.zeilenlink .ziehgriff { position: relative; z-index: 1; }
tr.zeilenlink .ziehgriff { cursor: grab; padding: 4px 8px 4px 0; font-size: 18px; }

/* Finger statt Maus (auch Tablets im Querformat): Tippflächen mindestens 44 px (Etappe 34.5) */
@media (pointer: coarse) {
  button, .knopf { min-height: 44px; }
  button.mini { min-height: 44px; min-width: 44px; padding: 6px 12px; font-size: 14px; }
  .termin-chip { padding: 6px 7px; font-size: 13px; }
  nav a, nav.untermenue a { display: inline-flex; align-items: center; min-height: 44px; }
  nav.untermenue a { padding: 10px 14px; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select { min-height: 44px; }
  .linkknopf { min-height: 44px; }
  .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; }
/* Verfügbarkeit am Handy (Etappe 34.40): vier Wochen als Tagesknöpfe */
/* Zählliste der Stichtagsinventur am Handy (Etappe 34.46) */
.zaehlfeld { width: 7em; font-size: 18px; text-align: right; }
.zaehlknoepfe { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0; }
.verfuegbarkeit { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 560px; }
.verfuegbarkeit form { display: block; margin: 0; }
.verfuegbarkeit .tagknopf { width: 100%; min-height: 56px; padding: 4px 0; font-size: 12px; line-height: 1.3; background: var(--bg); color: inherit; border: 1px solid var(--rand); }
.verfuegbarkeit .tagknopf.verfuegbar { background: #d8f0dc; border-color: #5aa469; color: #1d4d27; }
.verfuegbarkeit .tagknopf.verhindert { background: #f6dcdc; border-color: #c25b5b; color: #6b1f1f; }
.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); }

/* Seitenaufteilung langer Listen (_blaettern.html) */
.blaettern { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.blaettern a { display: inline-block; padding: 10px 4px; min-height: 44px; box-sizing: border-box; }

/* Webshop (Etappe 34.35): Kacheln fürs Handy, Detailseite */
.shopkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.shopkachel { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); }
.shopkachel .kachelbild { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 8px; background: #f3f5f1; overflow: hidden; font-size: 40px; text-decoration: none; }
.shopkachel .kachelbild img { width: 100%; height: 100%; object-fit: cover; }
.shopkachel .name { font-weight: 600; color: var(--text); text-decoration: none; }
.shopkachel .preis { color: var(--gedaempft); font-size: 14px; }
.shopkachel input { width: 100%; margin: 0; }
.shopkachel .knopf { text-align: center; }
.shopleiste { position: sticky; bottom: 0; background: var(--flaeche); padding: 10px 0; border-top: 1px solid var(--rand); }
.artikeldetail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.artikeldetail .bild img { width: 100%; height: auto; border-radius: 10px; }
.mengenfeld { width: 90px; margin: 0; }
.plzfeld { width: 80px; }
@media (max-width: 600px) {
  .shopkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .artikeldetail { grid-template-columns: 1fr; }
}
.vorschaubild { object-fit: cover; border-radius: 6px; vertical-align: middle; }

/* Zutritt: Tablet am Eingang (Etappe 43) */
body.tablet { background: #14181a; color: #fff; margin: 0; }
.tablet-buehne { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; }
.tablet-buehne h1 { color: #fff; margin: 0; font-size: clamp(24px, 4vw, 44px); }
.tablet-hinweis { color: #cfd6d2; font-size: clamp(16px, 2.4vw, 24px); margin: 0; }
.tablet-buehne video { width: min(92vw, 70vh); max-height: 62vh; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: #000; transform: scaleX(-1); }
.tablet-schicht { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; color: #fff; }
.tablet-schicht.gruen { background: #1f8a3b; }
.tablet-schicht.rot { background: #b3261e; }
.tablet-schicht.foto { background: rgba(0, 0, 0, .35); justify-content: flex-start; }
.tablet-schicht .titel { font-size: clamp(30px, 6.5vw, 76px); font-weight: 700; line-height: 1.1; }
.tablet-schicht .text { font-size: clamp(20px, 3.4vw, 40px); }
.tablet-schicht .zaehler { font-size: clamp(64px, 18vw, 200px); font-weight: 700; }
.tablet-schicht[hidden], .tablet-buehne [hidden] { display: none !important; }
/* Mitgliederbereich (Etappe 43) */
.mitglied-qr { display: block; margin: 8px auto; width: min(80vw, 320px); height: auto; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 12px; }
.mitglied-status { text-align: center; }
/* Editor für formatierten Text (Etappe 44) */
.editor { border: 1px solid var(--rand); border-radius: 8px; background: #e9ebee; margin: 6px 0 12px; }
.editor-leiste { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 8px; background: var(--flaeche); border-bottom: 1px solid var(--rand); border-radius: 8px 8px 0 0; position: sticky; top: 0; z-index: 2; }
.editor-gruppe { display: inline-flex; gap: 2px; align-items: center; }
.editor-leiste button, .editor-menue summary { min-width: 30px; height: 30px; padding: 0 6px; margin: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text); font-size: 15px; cursor: pointer; }
.editor-leiste button:hover, .editor-menue summary:hover { background: #fff; border-color: var(--rand); }
.editor-leiste button.an { background: #dfe8d9; border-color: var(--akzent); }
.editor-leiste select { width: auto; height: 30px; padding: 0 4px; font-size: 13px; margin: 0; }
.editor-farbe { position: relative; display: inline-flex; align-items: center; gap: 2px; margin: 0; font-weight: 700; font-size: 15px; padding: 0 4px; cursor: pointer; }
.editor-farbe input { width: 22px; height: 22px; padding: 0; border: none; margin: 0; background: none; }
.editor-menue { position: relative; display: inline-block; }
.editor-menue summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; }
.editor-menue summary::-webkit-details-marker { display: none; }
.editor-menue > div button { white-space: nowrap; }
.editor-menue > div { position: absolute; top: 34px; left: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, auto); gap: 2px; background: #fff; border: 1px solid var(--rand); border-radius: 6px; padding: 6px; }
.editor-flaeche { position: relative; overflow-x: auto; padding: 0 12px 16px; }
.editor-lineal-oben { position: relative; height: 22px; width: 16cm; margin-left: calc(22px + 1.2cm); border-bottom: 1px solid #b9bec5; background: #fff; }
.lineal-skala { position: absolute; inset: 0; }
.lineal-cm { position: absolute; bottom: 0; font-size: 9px; color: #6b7178; transform: translateX(-50%); border-left: 1px solid #9aa0a6; height: 8px; line-height: 0; padding-top: 0; }
.editor-lineal-oben .lineal-cm { height: 8px; padding-bottom: 12px; line-height: 10px; }
.lineal-halb { position: absolute; bottom: 0; height: 4px; border-left: 1px solid #c3c8cd; }
.lineal-marke { position: absolute; bottom: -1px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid var(--akzent); transform: translateX(-6px); cursor: ew-resize; touch-action: none; }
.editor-mitte { display: flex; gap: 0; }
.editor-lineal-links { position: relative; width: 22px; flex: 0 0 22px; background: #fff; border-right: 1px solid #b9bec5; margin-right: 0.6cm; }
.editor-lineal-links .lineal-cm { left: 2px; bottom: auto; border-left: none; border-top: 1px solid #9aa0a6; width: 8px; height: 0; transform: translateY(-50%); line-height: 12px; padding-left: 9px; }
.editor-seite { width: 16cm; box-sizing: content-box; background: #fff; padding: 0.8cm 0.6cm; outline: none; font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.45; color: #222; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); overflow-wrap: anywhere; }
.editor-seite p { margin: 0 0 8px; }
.editor-seite img { max-width: 100%; height: auto; }
.editor-seite img.gewaehlt { outline: 2px solid var(--akzent); }
.editor-seite table { border-collapse: collapse; }
.editor-seite td, .editor-seite th { min-width: 30px; vertical-align: top; }
.editor-seite blockquote { margin: 0 0 8px 0.6cm; padding-left: 8px; border-left: 3px solid #ccc; color: #555; }
.editor-griff { position: absolute; width: 14px; height: 14px; background: var(--akzent); border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; touch-action: none; z-index: 2; }
.editor-griff[hidden], .editor-tabelle[hidden] { display: none !important; }
@media (max-width: 760px) {
  .editor-lineal-links { display: none; }
  .editor-lineal-oben { margin-left: 0; }
  .editor-seite { width: auto; min-width: 0; padding: 12px; }
}
.editor.einfach .editor-flaeche { padding: 8px; }
.editor.einfach .editor-seite { width: auto; padding: 10px 12px; box-shadow: none; border: 1px solid var(--rand); }