/* VinaZia-Konsole — dünne Schicht AUF dem Corporate Design.
   Reihenfolge im Kopf: zianeo-corporate.css (einzige Quelle der Variablen),
   widget_header.css (Navy-Kopf-Standard), dann diese Datei.
   Hier stehen NUR Layout und die Konsolen-eigenen Bausteine — Farben,
   Radien, Schriften kommen aus den --cd-/Design-Variablen. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-primary, #f7fafc);
  /* zcore-Textton (#2d3748), NICHT das fast schwarze --text-primary */
  color: var(--text, #2d3748);
  font-family: var(--font-body, 'Poppins', sans-serif);
  /* 16-px-Basis wie zcore/BauNeo — die Kompaktheit kommt aus den
     rem-Faktoren der Bausteine, NICHT aus kleinerer Grundschrift
     (Fund 18.08.2026: 14 px machte alles sichtbar fremd). */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* ── Schale nach dem ZCore-Muster: Sidebar + Navy-Köpfe (56 px) ──── */
.app-schale {
  display: grid; grid-template-columns: 232px 1fr;
  height: 100vh; height: 100dvh; overflow: hidden;
}
.sidebar {
  background: var(--bg-card, #fff);
  border-right: 1px solid rgba(154, 171, 166, .65);
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
.sidebar-header {
  height: 56px; min-height: 56px; box-sizing: border-box;
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  /* Navy FEST, nicht var(--cd-navy) (13.09.2026): markeAnziehen() schreibt die
     Kopffarbe des Betriebs in diese Variable, und Feilbach führt #1f2823 —
     ein Dunkelgrün. Neben dem navyblauen Kopfbalken standen so zwei
     verschiedene Dunkeltöne. Die Ansage vom 12.09.2026 („App und Gutsbüro
     sind ZiaNeo-Design, nicht Kundendesign") galt für Kopfleiste, Kennzahlen
     und Wochentabelle — die Seitenleiste war übersehen worden. */
  background: #0f1f36;
}
.sidebar-header .logo {
  width: 32px; height: 32px; border-radius: 0; flex-shrink: 0;
  background: var(--cd-sage-bg, rgba(154,171,166,.2));
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-header .logo svg { width: 18px; height: 18px; stroke: var(--cd-sage);
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-header .brand h1 {
  margin: 0; font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 1.1rem; font-weight: 700; color: #fff; line-height: 1.15;
}
.sidebar-header .brand span { font-size: .7rem; color: rgba(255,255,255,.6); }

/* Einklappen: Werte 1:1 aus zcore.css .sidebar-collapse-btn —
   mittig am Rand, 28 px rund, mit Schatten */
.sidebar { position: relative; overflow: visible; }
.sidebar-collapse-btn {
  all: unset; cursor: pointer; position: absolute;
  right: -14px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card, #fff);
  border: 1px solid rgba(154, 171, 166, .65);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  color: var(--cd-sage); font-size: .7rem; z-index: 5; box-sizing: border-box;
}
.sidebar-collapse-btn svg { width: 12px; height: 12px; stroke: currentColor;
  fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s; }
.sidebar.eingeklappt .sidebar-collapse-btn svg { transform: rotate(180deg); }
.sidebar.eingeklappt { width: 64px; }
.app-schale:has(.sidebar.eingeklappt) { grid-template-columns: 64px 1fr; }
/* 11.09.2026: Hier stand eine Selektorliste OHNE eigenen Regelblock — „.brand"
   und „.nav-label" hingen dadurch an der Zentrier-Regel darunter und wurden nie
   ausgeblendet. In der 64 px schmalen Leiste ragten Schriftzug („VinaZia
   Gutsbüro") und Menütexte über den Inhalt; bei 1280 px Fensterbreite lag der
   Schriftzug auf der Überschrift. Am Handy hebt die 800er-Regel weiter unten
   das Ausblenden bewusst wieder auf — dort ist die Leiste ein waagerechter
   Balken und braucht ihre Beschriftungen. */
.sidebar.eingeklappt .brand,
.sidebar.eingeklappt .nav-label { display: none; }

.sidebar.eingeklappt .nav-group-header { justify-content: center; padding: 9px 0; }



/* Zahlungsmittel-Kasten in der Einrichtung (07.09.2026). */
.zm-stand { font-size: .95rem; color: var(--cd-navy-text, #0f1f36); margin-bottom: 6px; }
/* Pflichtlinks unter den Knoepfen — klein, in der Farbe der Menue-Eintraege. */
.sidebar-footer .rechtszeile { margin: 8px 0 0; text-align: center; font-size: .66rem;
  color: var(--cd-mid, #718096); }
.sidebar-footer .rechtszeile a { color: inherit; text-decoration: none; }
.sidebar-footer .rechtszeile a:hover { text-decoration: underline; }
.sidebar.eingeklappt .rechtszeile { display: none; }
/* Fusszeile und die vier Knoepfe stehen in zcore-fusszeile.css — dem
   Schnitt aus dem ZCore-Baustein. Hier bleibt nur, was VinaZia eigen ist. */
/* Zeichen und Beschriftung tragen dieselbe Farbe wie die Menue-Eintraege
   darueber (.nav-group-header, Z. 95): --cd-mid, beim Ueberfahren --text. */
.sidebar-footer .help-mode-toggle { color: var(--cd-mid, #718096); }
.sidebar-footer .help-mode-toggle:hover { color: var(--text, #2d3748); }
.sidebar-footer .help-mode-toggle.help-active { color: #fff; }
#ft-abmelden:hover { border-color: var(--cd-rost, #a0341a);
  color: var(--cd-rost, #a0341a); }
.main-nav { padding: 12px; display: flex; flex-direction: column; gap: 4px;
  flex: 1; overflow-y: auto; min-height: 0; }
/* Werte 1:1 aus zcore.css .nav-group-header — heller Grundton (cd-mid),
   aktiv SAGE, Radius nur rechts */
.nav-group-header {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border-radius: 0;
  
  font-family: inherit; font-size: .92rem; color: var(--cd-mid, #718096);
  transition: all .2s;
}
.nav-group-header:hover { background: rgba(154, 171, 166, .1);
  color: var(--text, #2d3748); }
.nav-group-header.active {
  background: rgba(154, 171, 166, .15); color: var(--cd-sage);
  font-weight: 600;
}
.nav-icon { width: 18px; display: inline-flex; }
.nav-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-footer { padding: 10px 16px;
  border-top: 1px solid rgba(154, 171, 166, .4); }
.abo { font-size: .75rem; color: var(--text-muted); }

.main-content { display: flex; flex-direction: column; overflow: hidden;
  min-width: 0; }
.content-header {
  height: 56px; min-height: 56px; box-sizing: border-box;
  padding: 12px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  background: var(--cd-navy, #0f1f36);
}
.content-header h2 {
  margin: 0; display: flex; align-items: center; gap: 8px;
  /* BauNeo gemessen: Poppins 16px/600 — die App-Schale kennt KEIN Playfair */
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 1rem; font-weight: 600; color: #fff; line-height: 1.4;
}
.titel-zeichen { display: inline-flex; }
.titel-marke { width: 36px; height: 36px; margin: -4px -4px -4px -8px; flex: none; display: block; }
.titel-blatt { font-weight: 400; color: rgba(255, 255, 255, .7); margin-left: 6px; }
.titel-blatt::before { content: '· '; }
.titel-zeichen svg { width: 18px; height: 18px; stroke: var(--cd-sage);
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.content-header-actions { display: flex; align-items: center; gap: 8px; }

/* Umschalter im Kopf (Ansicht, Module/Cockpit) — wie BauNeo */
.vm-hdr-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  padding: 6px 14px; border-radius: 0;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-family: inherit; font-size: .85rem; font-weight: 500;
  transition: all .15s;
}
.vm-hdr-btn:hover { background: rgba(255,255,255,.25); }
.vm-hdr-btn.active { background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.45); font-weight: 600; }
.vm-hdr-role { position: relative; }
.vm-hdr-role-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 0;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-family: inherit; font-size: .85rem; font-weight: 500;
}
.vm-hdr-role-btn:hover { background: rgba(255,255,255,.25); }
.vm-hdr-role-btn svg { width: 14px; height: 14px; stroke: currentColor;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vm-hdr-role-btn .pfeil { font-size: .65rem; opacity: .8; }
.vm-hdr-role-dropdown[hidden] { display: none; }
.vm-hdr-role-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  background: var(--bg-card, #fff); border: 1px solid var(--cd-sage);
  border-radius: 0; box-shadow: 0 10px 30px rgba(15,31,54,.2);
  min-width: 150px; overflow: hidden; display: flex; flex-direction: column;
}
.vm-hdr-role-dropdown button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  padding: 9px 14px; font-family: inherit; font-size: .85rem;
  color: var(--text-primary);
}
.vm-hdr-role-dropdown button:hover { background: rgba(154,171,166,.12); }
.vm-hdr-role-dropdown button.active { background: rgba(154,171,166,.18);
  font-weight: 600; }

/* Demo-Banner im Inhalt — wie BauNeo (Navy zu Sage) */
.demo-banner {
  background: linear-gradient(135deg, var(--cd-navy, #0f1f36) 0%, var(--cd-sage) 100%);
  color: #fff; padding: 16px 20px; border-radius: 0; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.demo-banner strong { display: block; font-size: .95rem; margin-bottom: 2px; }
.demo-banner span { font-size: .85rem; opacity: .9; }
.demo-banner button {
  all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap;
  padding: 9px 14px; border-radius: 0;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-family: inherit; font-size: .85rem; font-weight: 500;
}
.demo-banner button:hover { background: rgba(255,255,255,.3); }
.hilfe-text p { margin: 0 0 12px; font-size: .88rem; line-height: 1.55; }

/* ── Cockpit (Vorbild BauNeo) ────────────────────────────────────── */
.cockpit-statzeile {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.cockpit-stat {
  background: var(--cd-navy, #0f1f36); color: #fff;
  border-radius: 0; padding: 16px 18px;
  position: relative; overflow: hidden;
}
.cockpit-stat::after {
  content: ''; position: absolute; right: -18px; top: -18px;
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.cockpit-stat .wert { margin: 0; font-size: 1.45rem; font-weight: 700;
  color: #fff; } /* gegen die globale Absatzfarbe aus corporate.css */
.cockpit-stat .wort { margin: 2px 0 0; font-size: .68rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.65); }
.cockpit-stat.warn .wert { color: var(--cd-amber, #f59e0b); }

.aufgaben-zeile {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.aufgabe-karte {
  background: var(--bg-card, #fff); border: 1px solid rgba(154,171,166,.65);
  border-radius: 0; padding: 14px 16px;
}
.aufgabe-kopf { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; }
.aufgabe-kopf strong { font-size: .9rem; }
.aufgabe-zahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; border-radius: 50%; padding: 0 6px;
  border: 2px solid var(--cd-navy); font-weight: 700; font-size: .8rem;
  box-sizing: border-box;
}
.aufgabe-zahl.gruen { border-color: var(--status-success, #3d9970);
  color: var(--status-success, #3d9970); }
.aufgabe-leer { margin: 4px 0 0; font-size: .82rem;
  color: var(--status-success, #3d9970); }
.aufgabe-zeile {
  all: unset; box-sizing: border-box; cursor: pointer; display: block;
  width: 100%; padding: 7px 8px; margin: 0 -8px; border-radius: 0;
  font-family: inherit; font-size: .84rem; color: var(--text, #2d3748);
  line-height: 1.4; transition: background .15s;
}
.aufgabe-zeile:hover { background: rgba(154,171,166,.12); }

.modul-karten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.modul-karte {
  background: var(--bg-card, #fff); border: 1px solid rgba(154,171,166,.65);
  border-radius: 0; overflow: hidden; cursor: pointer;
  transition: box-shadow .15s;
}
.modul-karte:hover { box-shadow: 0 4px 14px rgba(15,31,54,.12); }
.modul-kopf {
  background: var(--cd-navy, #0f1f36); color: #fff;
  padding: 10px 16px; font-weight: 600; font-size: .9rem;
}
.modul-karte ul { list-style: none; margin: 0; padding: 12px 16px 14px;
  display: flex; flex-direction: column; gap: 6px; }
.modul-karte li { font-size: .84rem; color: var(--text-muted); }
.modul-karte li strong { color: var(--text, #2d3748); }
.content-header-actions select {
  background: rgba(255,255,255,.15); color: #fff;
  border: 1px solid rgba(255,255,255,.2); border-radius: 0;
  padding: 6px 10px; font-family: inherit; font-size: .85rem; width: auto;
}
.content-header-actions select option { color: var(--cd-navy-text, #0f1f36); background: var(--bg-card, #fff); }

.tab-bar {
  display: flex; gap: 2px; padding: 0 20px; background: var(--bg-card, #fff);
  border-bottom: 1px solid rgba(154, 171, 166, .5);
  overflow-x: auto; flex-shrink: 0;
}
/* `display:flex` aus der Klasse schlaegt das `hidden`-Attribut des Browsers
   (dessen Regel ist nur ein Element-Treffer). Ohne diese Zeile blieb die
   Reiterzeile ueber dem Cockpit stehen, obwohl das Skript sie seit jeher
   auf hidden setzt — aufgefallen 21.08.2026. */
.tab-bar[hidden] { display: none; }
.tab-item {
  all: unset; box-sizing: border-box; cursor: pointer;
  padding: 11px 14px 9px; font-family: inherit; font-size: .85rem;
  color: var(--text-muted); border-bottom: 2px solid transparent;
  white-space: nowrap; transition: all .15s;
}
.tab-item:hover { color: var(--text-primary); }
.tab-item.active { color: var(--cd-navy-text, #0f1f36); font-weight: 600;
  border-bottom-color: var(--cd-sage); }

.content-body { flex: 1; overflow-y: auto; padding: 28px; min-height: 0; }
#blatt { min-width: 0; }

/* ── Karten (kasten = card des Corporate Designs) ────────────────── */
.kasten {
  background: var(--bg-card, #fff);
  border: 2px solid var(--cd-sage, #9aaba6);
  border-radius: var(--radius-lg, 8px);
  padding: 20px; margin-bottom: 20px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 31, 54, .05));
}
.kasten h3 {
  /* Kartentitel wie in BauNeo: Poppins halbfett, kein Playfair im Inhalt */
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: .95rem; font-weight: 600; color: var(--cd-navy-text, #0f1f36);
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}

.unterzeile { color: var(--text-muted, #718096); font-size: .9rem; margin: 0 0 14px; }
.leerhinweis { color: var(--text-muted, #718096); margin: .5rem 0; }
.hinweiskasten {
  background: var(--cd-sage-bg, rgba(154, 171, 166, .12));
  border-radius: 0 var(--radius-md, 6px) var(--radius-md, 6px) 0;
  padding: .7rem .9rem; margin: 0 0 14px;
  font-size: .88rem; color: var(--text-primary);
}

/* ── Formulare ───────────────────────────────────────────────────── */
.gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .8rem 1rem;
}
label { display: block; font-size: .78rem; color: var(--text-muted);
  margin-bottom: .25rem; letter-spacing: .02em; }
input, select, textarea {
  width: 100%; padding: .5rem .65rem;
  border: 2px solid var(--cd-sage); border-radius: var(--radius-md, 6px);
  background: var(--bg-card, #fff); color: var(--text-primary);
  font-family: inherit; font-size: .9rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cd-sage-dark, #7a8f89);
}
textarea { min-height: 4.5rem; resize: vertical; }
.tastenreihe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
/* Tastenreihe IN einer Tabellenzelle: kein Abstand nach oben, die
   Knöpfe sollen auf der Zeilenhöhe sitzen (18.09.2026, Benutzer). */
.tastenreihe-zelle { margin-top: 0; align-items: center; gap: .5rem; }

/* ── Einlesen: Adresse und Tasten in einer Zeile ──────────────────── */
/* Eine Web-Adresse ist kurz. Sie über die ganze Breite zu ziehen, sieht
   nach Formular aus, obwohl es nur ein Handgriff ist. */
.einleszeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.einlesfeld { flex: 1 1 20rem; max-width: 28rem; min-width: 12rem; }
.einleszeile .tat, .einleszeile .leise { flex: 0 0 auto; }
@media (max-width: 640px) {
  .einlesfeld { flex-basis: 100%; max-width: none; }
  .einleszeile .tat, .einleszeile .leise { flex: 1 1 auto; justify-content: center; }
}

/* ── Was gelesen wurde ────────────────────────────────────────────── */
/* Eine Tafel mit den Beschriftungen des Formulars darunter — nicht die
   technischen Feldnamen des Lesers. */
.gelesen {
  margin-top: .9rem; border: 2px solid var(--cd-sage, #9aaba6);
  border-radius: var(--radius-md, 6px); overflow: hidden;
}
.gelesen-kopf {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem;
  padding: .55rem .85rem; background: var(--cd-navy, #0f1f36);
  color: #fff; font-size: .84rem; line-height: 1.5;
}
.gelesen-kopf span { color: var(--cd-sage, #9aaba6); }
/* Beschriftung über dem Wert — dieselbe Ordnung wie bei den Formularfeldern
   darunter. Nebeneinander wird es bei „Straße und Hausnummer" zu eng. */
.gelesen-liste {
  margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* Keine Linien zwischen den Zellen: Die letzte Rasterzeile ist selten voll,
   dann endet der Strich mitten im Nichts. Die Ordnung trägt die Schrift. */
.gelesen-zeile {
  display: flex; flex-direction: column; gap: .15rem; padding: .6rem .85rem;
}
.gelesen-zeile dt {
  color: var(--text-muted, #718096);
  font-size: .74rem; letter-spacing: .02em; line-height: 1.5;
}
.gelesen-zeile dd {
  margin: 0; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere;
}
.gelesen-zeile.breit {
  grid-column: 1 / -1; border-top: 1px solid var(--border-subtle, #e2e8f0);
}
.gelesen-zeile.breit dd { font-weight: 400; line-height: 1.65; hyphens: auto; }
.gelesen-tabelle { width: 100%; }
.gelesen-tabelle th:first-child, .gelesen-tabelle td:first-child { padding-left: .85rem; }
.gelesen-tabelle th:last-child, .gelesen-tabelle td:last-child { padding-right: .85rem; }
.gelesen-tabelle tbody tr:last-child td { border-bottom: 0; }
.gelesen-fuss {
  margin: 0; padding: .6rem .85rem; font-size: .82rem; line-height: 1.6;
  color: var(--text-muted, #718096);
  background: var(--cd-sage-bg, rgba(154, 171, 166, .12));
  border-top: 1px solid var(--border-subtle, #e2e8f0);
}

/* Tasten: tat = btn-primary, leise = btn (Standard) des Corporate Designs */
.tat, .leise {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-md, 6px);
  font-family: var(--font-body); font-size: .9rem; font-weight: 500;
  cursor: pointer; line-height: 1.4; transition: all .2s ease;
}
.tat {
  background: var(--cd-navy); color: #fff; border: 1px solid var(--cd-navy);
}
.tat:hover { background: var(--cd-navy-light, #1a365d);
  border-color: var(--cd-navy-light, #1a365d); }
.leise {
  background: var(--bg-card, #fff); color: var(--text-primary);
  border: 1px solid var(--cd-sage);
}
.leise:hover { background: var(--bg-hover, #f1f5f9);
  border-color: var(--cd-sage-dark, #7a8f89); }
.leise[disabled], .tat[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Tabellen ────────────────────────────────────────────────────── */
.tabellenrahmen { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th {
  text-align: left; font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); padding: .45rem .6rem .45rem 0;
  border-bottom: 1px solid var(--cd-sage);
}
tbody td {
  padding: .55rem .6rem .55rem 0;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  vertical-align: top;
}
tbody tr:hover { background: var(--bg-hover, #f8fafc); }
th.zahl, td.zahl { text-align: right; white-space: nowrap; }
tr.leer td { color: var(--text-muted); text-decoration: line-through; }
td a { color: var(--cd-navy-text, #0f1f36); }

/* Merker = badge-neutral des Corporate Designs; Status-Farben nur inline
   als bewusstes Handlungssignal (überfällig, Ausfall). */
.merker {
  display: inline-block; padding: .1rem .5rem;
  border: 1px solid var(--cd-sage); border-radius: var(--radius-sm, 4px);
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-primary); background: var(--cd-sage-bg, rgba(154,171,166,.12));
}

/* ── Kacheln (Herbst-Zahlen; früher auch Übersicht, die es seit
      18.08.2026 nicht mehr gibt) ──────────────────────────────────── */
.kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem; margin-bottom: 20px;
}
.kachel {
  background: var(--bg-card, #fff); border: 2px solid var(--cd-sage);
  border-radius: var(--radius-lg, 8px); padding: 1rem 1.1rem;
}
.kachel .zahl {
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 1.5rem; font-weight: 700; color: var(--cd-navy-text, #0f1f36); margin: 0;
}
.kachel .beschriftung { font-size: .8rem; color: var(--text-muted); margin: 0; }

/* ── Laden und Meldungen ─────────────────────────────────────────── */
.laedt { display: grid; place-items: center; min-height: 60vh;
  color: var(--text-muted); }
/* Eigener display-Wert schlaegt sonst das hidden-Attribut — die Falle
   vom 16.08.2026, nicht noch einmal. */
.laedt[hidden] { display: none; }
/* Dieselbe Falle beim Gerüst: `.app-schale` setzt `display:grid` und schlug
   damit das `hidden`-Attribut. Wenn der Start scheiterte, stand deshalb die
   Fehlermeldung OBEN und darunter die leere Konsole — der „komisch geteilte
   Bildschirm" (Fund 31.08.2026, gemeldet vom Nutzer). */
.app-schale[hidden] { display: none; }
/* Ueber ALLES, auch ueber das Seitenpanel. Bis zum 29.08.2026 stand hier
   z-index 50 — jede Rueckmeldung aus dem Panel war damit unsichtbar. Der
   Winzer drueckte „Erntemeldung", das Backend antwortete „Fuer 2026 sind
   noch keine Lesedaten erfasst", und auf dem Schirm passierte scheinbar
   nichts.
   1100, weil das Seitenpanel aus zcore-cockpit.css auf 1000 liegt — 200
   reichte nicht, das war der zweite Anlauf. Unter dem Dialog-Schleier
   (9999) bleibt der Hinweis absichtlich: Wer gefragt wird, soll antworten,
   nicht lesen. */
.meldung {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1100;
  background: var(--cd-navy); color: #fff;
  border-radius: var(--radius-md, 6px); padding: .7rem 1.1rem;
  font-size: .9rem; box-shadow: var(--shadow-lg, 0 8px 24px rgba(15,31,54,.25));
}
.meldung.fehler { background: var(--cd-rust, #a0341a); }

/* ── Demo/Live (ZCoreDataMode-Standard, Klassen wie in zcore.css) ── */
.data-mode-toggle { display: flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 0; cursor: pointer; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25); transition: all 0.2s; user-select: none; }
.data-mode-toggle:hover { background: rgba(255,255,255,0.22); }
.data-mode-dot { width: 8px; height: 8px; border-radius: 50%; transition: background 0.3s; }
.data-mode-dot.demo { background: var(--cd-sage); box-shadow: 0 0 6px rgba(154,171,166,0.5); }
.data-mode-dot.live { background: var(--cd-white, #fff); box-shadow: 0 0 6px rgba(255,255,255,0.5); }
.data-mode-label { color: #fff; font-size: 0.75rem; font-weight: 600;
  font-family: var(--font-body); letter-spacing: 0.5px; text-transform: uppercase; }

.dm-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 9999; display: flex; align-items: center; justify-content: center; }
.dm-modal { background: var(--bg-card, #fff); border-radius: 0; width: 420px;
  max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; }
.dm-modal-header { background: var(--cd-navy, #0f1f36); color: #fff; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; }
.dm-modal-header h3 { margin: 0; font-family: var(--font-heading);
  font-size: 1.1rem; border: none; padding: 0; color: #fff; }
.dm-modal-header button { all: unset; cursor: pointer; color: #fff;
  font-size: 1.1rem; line-height: 1; padding: 2px 6px; }
.dm-modal-body { padding: 20px; }
.dm-mode-card { padding: 14px 16px; border-radius: 0;
  border: 2px solid var(--cd-sage); margin-bottom: 10px; cursor: pointer;
  transition: all 0.2s; display: flex; align-items: center; gap: 14px; }
.dm-mode-card:hover { border-color: var(--cd-sage-dark, #7a8f89);
  background: rgba(154,171,166,0.04); }
.dm-mode-card.active { border-color: var(--cd-navy);
  background: rgba(26,54,93,0.04); }
.dm-mode-card .dm-icon { width: 40px; height: 40px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--cd-sage-bg, rgba(154,171,166,0.15)); flex-shrink: 0; }
.dm-mode-card .dm-icon svg { width: 20px; height: 20px; stroke: var(--cd-sage);
  stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dm-mode-card .dm-info { flex: 1; }
.dm-mode-card .dm-info strong { display: block; font-size: 0.9rem; margin-bottom: 2px; }
.dm-mode-card .dm-info small { color: var(--text-muted); font-size: 0.78rem; }
.dm-mode-card .dm-haken { color: var(--cd-navy-text, #0f1f36); font-weight: 700; }
.dm-divider { border: none; border-top: 1px solid var(--border-subtle, #e2e8f0);
  margin: 16px 0; }
.dm-actions { display: flex; flex-direction: column; gap: 8px; }
.dm-action-btn { padding: 10px 14px; border: 1px solid var(--cd-sage);
  border-radius: 0; background: var(--bg-card, #fff); cursor: pointer;
  text-align: left; display: flex; align-items: center; gap: 10px;
  transition: all 0.15s; font-size: 0.85rem; font-family: inherit;
  color: var(--text-primary); }
.dm-action-btn:hover { background: rgba(154,171,166,0.06);
  border-color: var(--cd-sage-dark, #7a8f89); }
.dm-action-btn.danger { color: #c53030; border-color: #fed7d7; }
.dm-action-btn.danger:hover { background: var(--bg-card, #fff); border-color: #fc8181; }

/* ── Schmale Bildschirme ─────────────────────────────────────────── */
@media (max-width: 800px) {
  .app-schale { grid-template-columns: 1fr; grid-template-rows: auto 1fr;
    height: auto; min-height: 100vh; overflow: visible; }
  /* Rasterkinder duerfen das Raster nicht aufblaehen (min-width:auto-Falle) */
  .app-schale > * { min-width: 0; }
  .sidebar { border-right: none; }
  .main-nav { flex-direction: row; overflow-x: auto; padding: 6px 10px;
    border-bottom: 1px solid rgba(154, 171, 166, .5); }
  .nav-group-header { border-left: none; border-bottom: 3px solid transparent;
    border-radius: 0; white-space: nowrap; width: auto; }
  .nav-group-header.active { border-bottom-color: var(--cd-sage);
    background: transparent; }
  /* Am Handy war die Fußleiste ganz ausgeblendet — Hilfe, Feedback, Theme
     und Abmelden waren unerreichbar (Fund 04.09.2026). Jetzt eine kompakte
     Zeile unter der Modulleiste: vier Knöpfe nebeneinander. Am Handy zählt
     „eingeklappt" nicht — die Leiste ist ohnehin ein waagerechter Balken,
     also die Desktop-Schmalregeln hier ausdrücklich zurücknehmen (sonst
     stapeln die Knöpfe senkrecht und die Leiste wird über 1000 px hoch). */
  .sidebar.eingeklappt { width: auto; }
  .app-schale:has(.sidebar.eingeklappt) { grid-template-columns: 1fr; }
  .sidebar.eingeklappt .nav-label { display: inline; }
  /* Am Handy gilt die VinaZia-Fusszeile, nicht der eingeklappte ZCore-Fall:
     dessen Regeln tragen !important, also hier ebenso. */
  .sidebar.eingeklappt .sidebar-footer-grid .help-mode-toggle span {
    display: inline !important; }
  .sidebar-footer,
  .sidebar.eingeklappt .sidebar-footer { display: block; margin-top: 0;
    padding: 8px 10px; border-top: 1px solid var(--border-subtle, rgba(154,171,166,.4)); }
  .sidebar .sidebar-footer-grid,
  .sidebar.eingeklappt .sidebar-footer-grid {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important; padding: 0 !important; }
  .sidebar .sidebar-footer .help-mode-toggle,
  .sidebar.eingeklappt .sidebar-footer .help-mode-toggle {
    flex-direction: row; gap: 7px; padding: 9px 6px !important;
    justify-content: center; font-size: 1rem !important; }
  .sidebar-footer .help-mode-toggle svg { width: 18px; height: 18px; }
  .sidebar-footer .help-mode-toggle span { font-size: .7rem; display: inline !important; }
  .main-content { overflow: visible; }
  .content-body { overflow: visible; padding: 1.25rem 1rem 3rem; }
  /* Kopf darf am Handy zweizeilig werden — 524 px Aktionen passen nicht
     in 390 px (Fund 18.08.2026) */
  .content-header { height: auto; min-height: 56px; max-height: none;
    flex-wrap: wrap; padding: 10px 12px; row-gap: 6px; }
  .content-header h2 { font-size: .9rem; }
  .content-header-actions { flex-wrap: wrap; justify-content: flex-end;
    row-gap: 6px; }
  .content-header-actions select { max-width: 150px; }
}

/* Zeichen im Modul-Kopf, wie das Icon-Quadrat in BauNeo */
.modul-kopf { display: flex; align-items: center; gap: 10px; }
.modul-zeichen { width: 26px; height: 26px; border-radius: 0; flex-shrink: 0;
  background: rgba(154, 171, 166, .25);
  display: inline-flex; align-items: center; justify-content: center; }
.modul-zeichen svg { width: 15px; height: 15px; stroke: var(--cd-sage);
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Blätter im Seitenpanel ───────────────────────────────────────────
   Das Panel ist schmaler als die Fläche. Die Blätter kommen unverändert
   hinein (dieselbe Anzeige, dieselbe Verdrahtung), deshalb behalten ihre
   Tabellen hier ihre natürliche Breite und der Rahmen rollt waagerecht —
   sonst schneidet die letzte Spalte ihre Knöpfe ab (18.08.2026).
   Die Panel-Hülle selbst kommt aus ZCore (.zc-side-panel), nicht von hier. */
#sp-koerper table { min-width: max-content; }
#sp-koerper .tabellenrahmen { overflow-x: auto; }

/* ── Tafel: wer macht wann was ────────────────────────────────────────
   Vorbild Hafentafel (MOLOFY). Raster statt Tabelle, weil eine Zelle
   mehrere Blöcke tragen muss und Tabellenzellen dabei ausreissen.
   Die Spaltenbreite steht am Element (grid-template-columns), damit die
   Anzahl der Tage aus dem Skript kommt und nicht hier festgenagelt ist. */
.tafel { display: grid; gap: 1px; background: var(--cd-sage, #9aaba6);
  border: 2px solid var(--cd-sage, #9aaba6); border-radius: 0;
  overflow-x: auto; margin-bottom: 1rem; }
/* `min-width: 0` an beiden Stellen: Rasterfelder und Flex-Kinder rechnen
   sonst mit ihrer Inhaltsbreite und schieben den Block aus der Spalte. Der
   Arbeitsblock trägt mehr Text als ein Termin (Zeiten, wie viele eingeteilt
   sind, wer da war) und lief dabei quer über den Nachbartag. */
.tf-zelle { background: var(--bg-card, #fff); padding: 6px; min-height: 3.2rem; min-width: 0;
  display: flex; flex-direction: column; gap: 4px; }
.tf-zelle > * { min-width: 0; }
.tf-kopfzelle, .tf-tagkopf { background: var(--cd-navy, #0f1f36); color: #fff;
  font-family: var(--font-head, 'Playfair Display', serif); font-size: .82rem;
  align-items: center; justify-content: center; min-height: 2.4rem; }
.tf-tagkopf span { display: block; font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: .7rem; font-weight: 400; color: rgba(255,255,255,.7); }
.tf-zeilenkopf { justify-content: center; background: var(--bg-input, #f7fafc);
  font-weight: 500; font-size: .82rem; line-height: 1.2; }
.tf-zeilenkopf span { font-weight: 400; font-size: .7rem; color: var(--text-muted, #64748b); }
/* Der heutige Tag hebt sich ab. Die Farbe muss DECKEND sein: eine
   durchscheinende Fläche liesse das Sage des Rasters durch, und die Spalte
   sähe aus wie ein grauer Riegel (Fund beim ersten Lauf, 19.08.2026). */
.tf-zelle.tf-heute { background: var(--bg-input, #f7fafc); }
.tf-tagkopf.tf-heute { background: #a0341a; }

.tf-block { border-radius: 0; padding: 5px 6px; font-size: .74rem;
  line-height: 1.25; cursor: pointer; 
  background: rgba(154,171,166,.16); overflow-wrap: anywhere; }
.tf-block:hover { outline: 2px solid var(--cd-navy, #0f1f36); }
.tf-block .tf-zeit { font-weight: 600; }
.tf-block .tf-zahl { float: right; font-weight: 600; }
.tf-block .tf-unten { display: block; color: var(--text-muted, #64748b);
  font-size: .68rem; }
.tf-block.ampel-frei  { }
.tf-block.ampel-knapp {  background: rgba(245,158,11,.12); }
.tf-block.ampel-voll  {  background: rgba(160,52,26,.10); }
.tf-block.tf-ausschank { background: rgba(15,31,54,.08); }
.tf-block.tf-veranstaltung { background: rgba(160,52,26,.08); }

.tf-leiste { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
/* Die Knöpfe der Leiste UND der Steuerzeile bleiben einzeilig (14.09.2026):
   „Settimana ›" brach um, wo „Woche ›" passt, und machte die ganze Reihe
   19 px höher. Die Reihe selbst darf weiter umbrechen — nur die einzelne
   Beschriftung nicht. */
.tf-leiste button, .tf-leiste label,
.tf-steuer button, .tf-steuer label { white-space: nowrap; }
.tf-chip { background: var(--cd-navy, #0f1f36); color: #fff; font-size: .64rem;
  padding: 1px 6px; border-radius: 0; cursor: pointer; }
.tf-chip:hover { background: #a0341a; }

.tf-steuer { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem;
  flex-wrap: wrap; }

/* Ein Termin, der gerade umzieht, und die Zelle, die ihn aufnimmt.
   Vorbild GastroNeo (`sb-chip` / `sb-drag-over`). */
.tf-block[draggable="true"] { cursor: grab; }
.tf-block.faehrt { opacity: .4; }
.tf-zelle.tf-ziel.drueber { background: rgba(154,171,166,.28);
  outline: 2px dashed var(--cd-sage, #9aaba6); outline-offset: -2px; }
.tf-luecke { display: block; margin-top: 3px; font-size: .66rem; color: var(--rostrot, #a0341a);
  border: 1px dashed rgba(160,52,26,.5); border-radius: 0; padding: 1px 4px;
  cursor: pointer; }
.tf-luecke:hover, .tf-luecke.aktiv { background: rgba(160,52,26,.10); }

/* Die Personenliste unter der Tafel — GastroNeos `sb-pool`. */
.tf-pool { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  padding: .6rem; margin: .8rem 0; background: var(--bg-card, #fff);
  border: 2px solid var(--cd-sage, #9aaba6); border-radius: 0; }
.tf-pool.aktiv { border-color: #a0341a; background: rgba(160,52,26,.03);
  flex-direction: column; align-items: stretch; }
.tf-poolkopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tf-poolkopf strong { font-size: .85rem; }
.tf-poolreihe { display: flex; flex-wrap: wrap; gap: .4rem; }
.tf-personkarte { display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; background: var(--bg-card, #fff); border: 1px solid var(--cd-sage, #9aaba6);
  border-radius: 0; padding: .35rem .6rem; font: inherit; cursor: pointer;
  color: var(--text, #2d3748); text-align: left; }
.tf-personkarte .name { font-size: .82rem; font-weight: 500; }
.tf-personkarte .rolle, .tf-personkarte .hinweis { font-size: .66rem;
  color: var(--text-muted, #64748b); }
.tf-personkarte:hover { border-color: var(--cd-navy, #0f1f36); }
.tf-personkarte.gesperrt { opacity: .55; background: var(--bg-input, #f7fafc); }
.tf-personkarte .grund { font-size: .64rem; color: var(--rostrot, #a0341a); }

.tf-crewleiste { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  padding: .6rem; margin-bottom: .8rem; background: var(--bg-card, #fff);
  border: 2px solid var(--cd-sage, #9aaba6); border-radius: 0; }
.tf-crewwort { font-size: .72rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted, #64748b); margin-right: .3rem; }
.tf-person { background: transparent; border: 1px solid var(--cd-sage, #9aaba6);
  border-radius: 0; padding: 4px 10px; font: inherit; font-size: .8rem;
  cursor: grab; color: var(--text, #2d3748); }
.tf-person small { color: var(--text-muted, #64748b); }
.tf-personname { display: none; }
.tf-personvoll { display: inline; }

.tf-person.aktiv { background: var(--cd-navy, #0f1f36); color: #fff;
  border-color: var(--cd-navy, #0f1f36); }
.tf-person.aktiv small { color: rgba(255,255,255,.7); }
.tf-hinweis { font-size: .72rem; color: var(--text-muted, #64748b); flex-basis: 100%; }

/* Deckend, nicht durchscheinend — sonst zeigt sich das Sage des Rasters
   und die Namensspalte wirkt wie ein grauer Riegel. */
.tf-zelle.tf-crewkopf { position: relative; background: var(--bg-input, #f7fafc); }
.tf-weg-taste { position: absolute; right: 5px; top: 5px; font-size: .64rem;
  padding: 1px 6px; border: 1px solid var(--cd-sage, #9aaba6); border-radius: 0;
  background: var(--bg-card, #fff); cursor: pointer; color: var(--text-muted, #64748b); }
/* Beide Tasten sassen absolut an derselben Stelle — „frei" lag unter
   „Lohn" und war nicht anklickbar (Fund 31.08.2026). Jetzt untereinander. */
.tf-weg-taste[data-person-bearbeiten] { top: 24px; }
.tf-crewzelle { min-height: 2.2rem; }
.tf-crewzelle.tf-weg { background: repeating-linear-gradient(45deg,
  #eef2f5, #eef2f5 6px, #e2e8f0 6px, #e2e8f0 12px); }
.tf-wegwort { font-size: .68rem; color: var(--text-muted, #64748b); }
.tf-job { font-size: .68rem; background: rgba(154,171,166,.2); border-radius: 0;
  padding: 1px 4px; }

/* Dienst: der Balken in der Mitarbeiterzeile — wer ist wann da.
   Gegenstück zum `sb-chip` der GastroNeo-Plantafel. */
.tf-dienst { display: inline-block; background: var(--cd-navy, #0f1f36); color: #fff;
  font-size: .66rem; font-weight: 600; border-radius: 0; padding: 1px 6px;
  cursor: grab; white-space: nowrap; }
.tf-dienst:hover { background: #a0341a; }
.tf-dienst.faehrt { opacity: .4; }
.tf-zelle.tf-ziel-crew.drueber { background: rgba(154,171,166,.28);
  outline: 2px dashed var(--cd-sage, #9aaba6); outline-offset: -2px; }
.tf-dienst-weg { margin-left: .35rem; opacity: .7; font-weight: 400; }
.tf-dienst-weg:hover { opacity: 1; }

/* ── Kasse nach CeraStyle-Bauart (CeraPOS) ───────────────────────────
   Leisten übereinander: Kunde, Aufnehmen, Positionen, Rabatt, Summen,
   Zahlung. Farben und Radien kommen aus den --cd-Variablen. */
.kasse { background: var(--bg-card, #fff); border: 2px solid var(--cd-sage, #9aaba6);
  border-radius: 0; padding: 1rem; margin-bottom: 1.2rem; }
.ka-leiste { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .55rem 0; }
.ka-leiste + .ka-leiste, .ka-positionen + .ka-leiste {
  border-top: 1px solid var(--border-subtle, #e2e8f0); }
.ka-leiste label { font-size: .78rem; color: var(--text-muted, #64748b);
  min-width: 6.5rem; }
/* Die Konsole setzt Felder global auf volle Breite (Zeile 327) — in einer
   Leiste stehen sie sonst untereinander statt nebeneinander. Hier zaehlt
   der Inhalt, nicht die Zeile. */
.ka-leiste select, .ka-leiste input { padding: .5rem .6rem; font: inherit;
  border: 2px solid var(--cd-sage, #9aaba6); border-radius: 0;
  background: var(--bg-card, #fff); color: var(--text, #2d3748); width: auto; }
.ka-leiste select { min-width: 9rem; }
.ka-kunde select { max-width: 13rem; }
.ka-leiste input[type="number"] { width: 6rem; text-align: right; }
.ka-kunde input[type="text"] { width: 16rem; }
.ka-kundenwort { font-size: .82rem; color: var(--cd-navy-text, #0f1f36); font-weight: 500; }
.ka-rabatt .oder { font-size: .78rem; color: var(--text-muted, #64748b); }
.ka-rabatt-quelle { font-size: .72rem; color: var(--rostrot, #a0341a); }

.ka-suchfeld { position: relative; }
.ka-suchfeld.weit { flex: 1; min-width: 14rem; }
.ka-suchfeld input { width: 100%; }
/* Die eigenen Vorschlagsregeln der Kasse sind am 21.09.2026 entfallen —
   der Kasten kommt jetzt aus zcore-suche.css (.zs-kasten). */

.ka-positionen { margin: .6rem 0; }
.ka-leerhinweis { color: var(--text-muted, #64748b); font-size: .85rem;
  padding: 1.2rem; text-align: center; background: var(--bg-input, #f7fafc); border-radius: 0; }
.ka-tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ka-tabelle th { text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted, #64748b); padding: .3rem .4rem;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.ka-tabelle th.zahl, .ka-tabelle td.zahl { text-align: right; }
.ka-tabelle th.nr, .ka-tabelle td.nr { width: 2rem; color: var(--text-muted, #64748b); }
.ka-tabelle td { padding: .4rem; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
/* zianeo-corporate.css setzt `input[type="number"]` auf 100 % — das ist
   eine Klasse PLUS Element und schlaegt `.ka-inline` allein. Deshalb hier
   mit Tabelle davor, sonst fuellt das Mengenfeld die ganze Zelle. */
.ka-tabelle input.ka-inline { width: 4.5rem; padding: .25rem .4rem; font: inherit;
  font-size: .85rem; text-align: right; border: 1px solid var(--cd-sage, #9aaba6);
  border-radius: 0; }
.ka-weg { background: transparent; border: none; color: var(--rostrot, #a0341a); font-size: 1.1rem;
  cursor: pointer; line-height: 1; padding: 0 .3rem; }

.ka-summen { display: flex; justify-content: flex-end; gap: 1.6rem; flex-wrap: wrap;
  padding: .7rem 0; border-top: 1px solid var(--border-subtle, #e2e8f0); }
.ka-summe { text-align: right; }
.ka-summe .wort { display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted, #64748b); }
.ka-summe .zahl { font-size: 1rem; }
.ka-summe.nachlass .zahl { color: var(--rostrot, #a0341a); }
.ka-summe.gesamt .zahl { font-family: var(--font-head, 'Playfair Display', serif);
  font-size: 1.5rem; color: var(--cd-navy-text, #0f1f36); }

.ka-zahlung { display: flex; gap: .6rem; margin-top: .4rem; }
.ka-zahltaste { flex: 1; padding: 1rem; font: inherit; font-size: 1rem; font-weight: 500;
  border-radius: 0; cursor: pointer; border: 2px solid transparent; }
.ka-zahltaste.bar { background: var(--cd-navy, #0f1f36); color: #fff; }
.ka-zahltaste.karte { background: #3d9970; color: #fff; }
.ka-zahltaste.leer { flex: 0 0 12rem; background: var(--bg-card, #fff); color: var(--text-muted, #64748b);
  border-color: var(--cd-sage, #9aaba6); }
.ka-zahltaste:disabled { opacity: .4; cursor: not-allowed; }
.ka-zahltaste:not(:disabled):hover { filter: brightness(1.1); }

@media (max-width: 800px) {
  .ka-zahlung { flex-wrap: wrap; }
  .ka-zahltaste.leer { flex: 1 1 100%; }
  .ka-leiste label { min-width: 100%; }
}

/* Was im Cockpit ein Ziel hat, sieht auch danach aus. */
.cockpit-stat.anfassbar { cursor: pointer; }
.cockpit-stat.anfassbar:hover { outline: 2px solid var(--cd-sage, #9aaba6);
  outline-offset: 2px; }
.modul-karte li.anfassbar { cursor: pointer; display: flex; align-items: baseline;
  gap: .3rem; border-radius: 0; padding: 1px 4px; margin-left: -4px; }
.modul-karte li.anfassbar:hover { background: rgba(154, 171, 166, .18); }
.modul-karte li.anfassbar .pfeil { margin-left: auto; color: var(--cd-sage, #9aaba6); }

/* ── Nachrichten: Faden und Vorlagen (19.08.2026) ──────────────────
   Bewusst ohne neue Farben — Navy für das eigene Wort, Sage-Rahmen für
   das des Gastes, wie überall sonst in der Konsole. */
.faden {
  display: grid; gap: 10px; max-height: 46vh; overflow-y: auto;
  padding: 4px 4px 8px; margin: 14px 0;
}
.blase {
  padding: 10px 14px; border-radius: 0; max-width: 82%;
  font-size: .92rem; line-height: 1.6;
}
.blase.gast {
  background: var(--bg-card, #fff); border: 1px solid var(--cd-sage);
  border-bottom-left-radius: 3px;
}
.blase.betrieb, .blase.vorlage {
  background: var(--cd-navy); color: #fff; margin-left: auto;
  border-bottom-right-radius: 3px;
}
.blase.system {
  background: none; color: var(--text-muted); text-align: center;
  max-width: 100%; font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase;
}
.blase .wann {
  display: block; margin-top: 5px; font-size: .68rem; opacity: .65;
  letter-spacing: .04em;
}
.zeile-eingabe { display: flex; gap: 10px; align-items: center; }
.zeile-eingabe input { flex: 1; }
tr.dringend td { background: var(--cd-sage-bg, rgba(154,171,166,.12)); }

.vorlage { padding: 14px 0; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.vorlage:last-of-type { border-bottom: 0; }
.vorlage-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 8px;
}
.schalter {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--text-muted); cursor: pointer;
}
.schalter input { width: auto; margin: 0; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* Kleintext. NICHT `.leise` benutzen — das ist die Nebentaste des Hauses
   und rahmt alles ein, was man hineinschreibt (Fund 21.08.2026). */
.klein { color: var(--text-muted, #718096); font-size: .78rem; }
.blase .klein { color: rgba(255,255,255,.72); }

/* ══════════════════════════════════════════════════════════════════
   Auftritt — Stilwahl, drei Farbfelder, Vorschau der App
   ══════════════════════════════════════════════════════════════════ */

.stilgitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .6rem;
}
.stilkarte {
  display: flex; flex-direction: column; align-items: stretch; gap: .5rem;
  padding: .6rem; text-align: left; cursor: pointer;
  background: var(--bg-card, #fff);
  border: 2px solid var(--border-subtle, #e2e8f0);
  border-radius: var(--radius-md, 6px);
  font-family: inherit; color: var(--text-primary);
  position: relative;
}
.stilkarte:hover { border-color: var(--cd-sage); }
.stilkarte.gewaehlt { border-color: var(--cd-navy); }  /* umlaut-ok (Klassenname) */
.stilkarte.gewaehlt::after {
  content: ''; position: absolute; inset: -2px; border-radius: var(--radius-md, 6px);
  box-shadow: inset 0 0 0 2px var(--cd-navy); pointer-events: none;
}
/* Die drei Farben als Streifen — Kopf, Leitfarbe, Grund. Man erkennt den
   Stil an der Farbe, nicht an der Nummer. */
.stilproben { display: flex; height: 34px; border-radius: 0; overflow: hidden; }
.stilproben i { flex: 1; display: block; }
.stilproben i:nth-child(2) { flex: .8; }
.stilname { font-size: .82rem; font-weight: 500; line-height: 1.25; }
/* Die Nummer stand ueber dem dritten Farbstreifen und war auf hellen
   Grundtoenen unlesbar. Sie gehoert neben den Namen, nicht auf die Farbe. */
.stilnr {
  font-size: .68rem; font-variant-numeric:lining-nums tabular-nums;
  color: var(--text-muted); margin-left: auto;
}
.stilkarte { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
.stilproben { flex: 1 1 100%; }
/* Der Name darf schrumpfen, die Nummer nicht — sonst rutscht sie bei
   „Gegenueberstellung" in eine zweite Zeile und die Karte wird hoeher. */
.stilname { flex: 1 1 auto; min-width: 0;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.stilnr { flex: 0 0 auto; }

/* ── Die drei Farbfelder ───────────────────────────────────────── */
.farbfeld { min-width: 0; }
.farbzeile { display: flex; gap: .4rem; align-items: center; }
/* Element+Klasse schlaegt die 100-Prozent-Regel aus dem Corporate-CSS. */
.farbzeile input[type="color"] {
  width: 46px; height: 40px; flex: none; padding: 2px;
  border: 2px solid var(--cd-sage); border-radius: var(--radius-md, 6px);
  background: var(--bg-card, #fff); cursor: pointer;
}
input.farbwert {
  flex: 1; min-width: 0; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: .85rem; text-transform: lowercase;
}
.farbzweck { font-size: .74rem; color: var(--text-muted); margin: .35rem 0 0; }
.farbfeld.abweichend label::after {
  content: ' · Ihre Farbe'; color: var(--cd-navy-text, #0f1f36); font-weight: 500;
}
.farbzurueck {
  margin-top: .35rem; padding: 0; background: none; border: none;
  font-family: inherit; font-size: .74rem; color: var(--cd-navy-text, #0f1f36);
  text-decoration: underline; cursor: pointer;
}

/* ── Vorschau: die App, nur eingefärbt ─────────────────────────── */
/* Das Handy steht links, der Satz daneben — mittig in einer breiten Karte
   stuende es in einem Loch aus leerer Flaeche. */
.handyrahmen {
  display: flex; gap: 1.6rem; align-items: flex-start; flex-wrap: wrap;
  padding: .3rem 0;
}
.handywort { flex: 1 1 16rem; max-width: 30rem; font-size: .88rem;
  color: var(--text-muted); }
.handywort strong { color: var(--text-primary); font-weight: 500; }
.handy {
  width: 260px; border: 2px solid var(--cd-navy); border-radius: 0;
  overflow: hidden; box-shadow: var(--shadow-md, 0 6px 20px rgba(15, 31, 54, .14));
}
.hy-schirm { display: flex; flex-direction: column; min-height: 400px; }
.hy-kopf {
  padding: .7rem .8rem .65rem; border-bottom: 3px solid;
  display: flex; flex-direction: column; gap: .1rem;
}
.hy-datum { font-size: .58rem; color: rgba(255, 255, 255, .62); }
.hy-hof {
  font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  font-size: 1.05rem; font-weight: 600; color: #fff; line-height: 1.15;
}
.hy-block {
  background: var(--bg-card, #fff); margin: .7rem .7rem 0; border-radius: 0;
  border: 1px solid var(--border-subtle, #e2e8f0); overflow: hidden;
}
.hy-zeile {
  display: flex; gap: .5rem; align-items: baseline;
  padding: .45rem .6rem; font-size: .62rem; color: var(--cd-navy-text, #0f1f36);
  border-top: 1px solid #eef2f5;
}
.hy-zeile:first-child { border-top: none; }
.hy-zeile b { min-width: 2.1rem; font-variant-numeric:lining-nums tabular-nums; font-weight: 500; }
.hy-zeile.gross { padding: .6rem; }
.hy-zeile.gross b {
  font-family: var(--font-heading, 'Playfair Display', Georgia, serif); font-size: .85rem;
}
.hy-taste {
  margin: auto .7rem .6rem; padding: .6rem; border-radius: 0;
  color: #fff; font-size: .72rem; font-weight: 500; text-align: center;
}
.hy-navi {
  display: flex; background: var(--bg-card, #fff); border-top: 1px solid var(--border-subtle, #e2e8f0);
}
.hy-navi span {
  flex: 1; text-align: center; padding: .5rem .1rem; font-size: .52rem;
  color: #94a3b8;
}
.hy-navi span.an { color: var(--cd-navy-text, #0f1f36); font-weight: 500; }

/* Die eigene Adresse der App — gross genug zum Abschreiben und Vorlesen. */
.hofadresse {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 1.05rem; color: var(--cd-navy-text, #0f1f36); margin: .3rem 0 .7rem;
  padding: .55rem .8rem; background: var(--cd-sage-bg, rgba(154,171,166,.12)); border-radius: 0;
  word-break: break-all;
}

/* Ein Wert, den man an Ort und Stelle aendert — sieht aus wie eine Zahl,
   verhaelt sich wie ein Knopf. */
.wertknopf {
  background: none; border: none; border-bottom: 1px dashed var(--cd-sage);
  font: inherit; color: var(--cd-navy-text, #0f1f36); cursor: pointer; padding: 0 0 1px;
  font-variant-numeric:lining-nums tabular-nums;
}
.leise.klein { padding: 4px 10px; font-size: .8rem; }

/* Die angebrochene Flasche: gehoert zum Bestand, ist aber keine ganze. */
.anbruch { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }

/* Ausschanktage: Zeiten und Hinweis direkt in der Zeile. */
input.astzeit { width: 7.5rem; padding: .35rem .5rem; font-size: .85rem; }
input.asthinweis { padding: .35rem .5rem; font-size: .85rem; min-width: 10rem; }

/* Wochentage als Knöpfe — eine Mehrfachauswahl trifft niemand. */
.wochenwahl { display: flex; flex-wrap: wrap; gap: .35rem; }
.wochenwahl .wochentag {
  min-width: 3rem; min-height: 40px; padding: .4rem .7rem;
  border: 1px solid var(--cd-sage); border-radius: 0; background: var(--bg-card, #fff);
  font: inherit; font-size: .85rem; color: var(--text-muted); cursor: pointer;
}
.wochenwahl .wochentag.an {
  background: var(--cd-navy); border-color: var(--cd-navy); color: #fff; font-weight: 500;
}

/* Datum und Uhrzeit immer deutsch — das native Feld bleibt samt Kalender,
   seine Schrift wird unsichtbar, darüber liegt unsere Anzeige. */
.dfeld { position: relative; display: block; }
.dfeld input[type="date"], .dfeld input[type="time"] { color: transparent; width: 100%; }
.dfeld input::-webkit-datetime-edit { color: transparent; }
.dfeld .dtext {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--text-primary); font-size: .9rem;
  font-variant-numeric:lining-nums tabular-nums; white-space: nowrap;
}
.dfeld .dtext.leer { color: var(--text-muted); }
td .dfeld .dtext { left: .55rem; font-size: .85rem; }

/* ── Posteingang als Raster ────────────────────────────────────────
   Jeder Entwurf eine Karte, nebeneinander statt untereinander. */
.entwurfgitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 14px;
}
.entwurf-karte {
  background: var(--bg-card, #fff);
  border: 1px solid rgba(154, 171, 166, .65);
  border-radius: 0; padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: .5rem;
}
.entwurf-karte header {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.entwurf-karte .art {
  font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  font-size: 1.05rem; color: var(--cd-navy-text, #0f1f36);
}
.entwurf-karte .wann {
  font-size: .72rem; color: var(--text-muted); white-space: nowrap;
  font-variant-numeric:lining-nums tabular-nums;
}
.entwurf-karte .gesagt {
  color: var(--text-primary); font-size: .9rem; margin: 0;
}
.entwurf-karte .werte { display: grid; gap: 2px; margin: 0; }
.entwurf-karte .werte > div {
  display: flex; gap: .5rem; align-items: baseline;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0); padding: .25rem 0;
}
.entwurf-karte .werte dt {
  font-size: .74rem; color: var(--text-muted); min-width: 6.5rem;
}
.entwurf-karte .werte dd { margin: 0; font-size: .88rem; font-weight: 500; }
.entwurf-karte .tastenreihe { margin-top: auto; padding-top: .4rem; }
.entwurf-karte .tat, .entwurf-karte .leise { padding: 8px 14px; font-size: .85rem; }

/* Der eine Griff in der Bestelltabelle — klein, aber eindeutig. */
.tat.klein { padding: 5px 12px; font-size: .8rem; margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════════
   COCKPIT: nur was offen ist (24.08.2026)
   Dieselbe Sprache wie die Winzer-App — eine Sache wird am Sinnbild
   erkannt, nicht an einer Ueberschrift. Kennzahl-Kacheln und Modulkarten
   sind entfallen: KONZEPT 5.1, er kauft keine Erkenntnis, er kauft
   Erledigung. Wohin man navigiert, sagt das Menue links.
   ══════════════════════════════════════════════════════════════════════ */
.offen-kopf { padding: 4px 2px 14px; }
.offen-kopf h2 {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
  font-size: 30px; line-height: 1.08; color: var(--cd-navy-text, #0f1f36); margin: 0;
}
.offen-leer {
  padding: 48px 2px; font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600; font-size: 24px; color: var(--grau);
}
.aufgabe-zeile {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
}
.aufgabe-bild {
  flex: 0 0 44px; width: 44px; height: 44px;
  background: var(--grau-hell, #eef1f4); border: 2px solid var(--sage);
  border-radius: 0; display: flex; align-items: center; justify-content: center;
  color: var(--leit-fest, var(--navy));
}
.aufgabe-bild svg { width: 32px; height: 32px; display: block; }
/* Zweite Ebene ausgespart, nicht abgeschwaecht — sonst verschwindet sie
   auf der gleichfarbigen Hauptform (Fund am 23.08. in der App). */
.aufgabe-bild svg .zweit { fill: var(--grau-hell, #eef1f4); }
.aufgabe-wort { flex: 1; min-width: 0; line-height: 1.3; }

/* ══════════════════════════════════════════════════════════════════════
   COCKPIT 29.08.2026 — EIN Schirm, kein Scrollen

   Ansage: „Das Cockpit muss auf einer Seite sein." Vorher standen vier
   Bloecke untereinander und der Schirm war zweieinhalb Bildschirme lang.
   Jetzt ist es ein Raster, das genau so hoch ist wie der Platz, den es hat:

     tun   Aufgabenzeile, volle Breite
     kpi   die vier Zahlen, volle Breite
     lauf  Jahrgangslauf links, fuellt die Resthoehe
     wege  Ring mit Legende rechts

   Die Weinliste ist der einzige Teil, der wachsen kann (ein Betrieb mit
   vierzig Weinen). Sie bekommt deshalb ihren eigenen Ueberlauf — die SEITE
   scrollt nie, hoechstens diese eine Liste, und bei den ueblichen zwoelf
   bis achtzehn Weinen tut auch sie es nicht.
   ══════════════════════════════════════════════════════════════════════ */

/* Der Inhaltsbereich scrollt sonst; im Cockpit darf er es nicht — und das
   Blatt darin muss die Resthoehe wirklich BEKOMMEN. Ohne die zwei Zeilen
   darunter stand das Raster auf seiner Inhaltshoehe und wurde unten
   abgeschnitten statt zu schrumpfen (Befund 29.08.2026 bei 1440x900):
   abgeschnitten ist schlimmer als gescrollt. */
.content-body:has(.cockpit-raster) {
  overflow: hidden; display: flex; flex-direction: column; min-height: 0;
}
.content-body:has(.cockpit-raster) > #demo-banner { flex: none; }
.content-body:has(.cockpit-raster) > #blatt { flex: 1 1 auto; min-height: 0; }

/* Drei Zeilen untereinander: Kennzahlen, Arbeitsvorrat, und darunter die
   zwei Hälften (links die Tafel, rechts die Bänder). Bis zum 31.08.2026
   stand hier noch das alte Raster mit den Bereichen „lauf wege" — die neue
   .ck-zwei kannte darin keinen Platz, fiel in die erste Spalte (1.5fr) und
   liess rechts ein Drittel des Schirms leer. */
.cockpit-raster {
  height: 100%; min-height: 0;
  display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "kpi" "tun" "zwei";
}
.ck-tun { grid-area: tun; min-width: 0; }
.cockpit-raster .cockpit-kpi-strip { grid-area: kpi; margin: 0; }
/* Ein Cockpit, EINE Kante (Ansage Neo 31.08.2026: „sehr kantig, sehr
   symmetrisch"): alle Kacheln 2 px Rundung. Die 10 px der ZCore-Vorgabe
   und die 3/6/7 px der Einzelkacheln standen vorher nebeneinander. */
.cockpit-raster .cockpit-kpi { border-radius: 0; padding: 15px 18px; }
/* 07.09.2026 auf Ansage: „da ist so viel Platz und wir verwenden den nicht".
   Zahl 1.5 -> 2.15 rem, Wort 11 -> 13.5 px, Beizeile 10 -> 13 px. Die
   Beizeile trug den halben Inhalt („aus 152,5 Litern der letzten 90 Tage")
   und war die kleinste Schrift der ganzen Seite. */
.cockpit-raster .cockpit-kpi .kpi-value { font-size: 2.15rem; line-height: 1.06; }
.cockpit-raster .cockpit-kpi .kpi-label {
  font-size: .845rem; letter-spacing: .04em; margin-top: 6px;
  color: rgba(255,255,255,.7);
}
.cockpit-raster .cockpit-kpi .kpi-trend {
  font-size: .815rem; line-height: 1.4; margin-top: 6px;
  color: rgba(255,255,255,.84);
}
.ck-zwei { grid-area: zwei; }
/* ── Der Arbeitsvorrat: zehn Quadrate in EINER Zeile ────────────────
   Dritter Anlauf am 29.08.2026. Die Ansage war eindeutig: alle Felder in
   eine Zeile, Quadrate statt Rechtecke, weisser Hintergrund, und der
   Zustand nur als Punkt oben rechts — rot fuer dringend, gruen fuer „auch,
   aber nicht dramatisch".

   Was daraus folgt: Bei zehn Kacheln bleiben rund 105 px Kantenlaenge. Ein
   ganzer Satz passt da nicht hinein, also traegt die Kachel die Kurzform
   (Zahl, Wort, Beizeile) und den vollen Satz in der Sprechblase.

   `grid-auto-flow: column` statt fester Spaltenzahl: So passen auch acht
   oder zwoelf Aufgaben in eine Zeile, ohne dass jemand die Zahl nachtraegt.
   ══════════════════════════════════════════════════════════════════ */
.ck-tun { min-width: 0; display: flex; flex-direction: column; }
/* Eine Zeile, immer — aber die Kacheln werden NICHT auf die volle Breite
   gestreckt. Genau daran lag das Missverstaendnis vom 30.08.2026: Bei
   sechs offenen Sachen wurden aus zehn kleinen Quadraten sechs riesige mit
   zwei Zeilen Text darin, und es sah aus, als passten nur fuenf hinein.
   `max-width` deckelt sie; sind es viele, schrumpfen sie und bleiben in
   der Zeile; sind es wenige, bleibt rechts Platz frei. Das ist ehrlicher
   als aufgeblasene Kacheln. */
.tun-raster {
  display: grid; gap: 8px; justify-content: start;
  /* auto-fit statt fester Spaltenzahl: So viele Kacheln in die Zeile, wie
     LESBAR hineinpassen. Untergrenze 96 px — darunter wird aus dem Satz
     eine Briefmarke (Belastungsprobe 30.08.2026: bei achtzehn Kacheln auf
     einer erzwungenen Zeile waren 55 px uebrig und JEDER Text abgeschnitten).
     Obergrenze 132 px, damit sechs Aufgaben nicht zu sechs Plakaten
     aufgeblasen werden. Ab elf offenen Sachen gibt es eine zweite Reihe —
     lieber zwei Reihen, die man lesen kann, als eine, die man raet. */
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
/* KEIN Breitendeckel mehr (Ansage Neo 30.08.2026: „ich moechte nicht, dass
   da dieser freie Raum ist"). Die Kacheln fuellen die Zeile aus; kommt eine
   dazu, wird sie hinten angehaengt und alle werden etwas schmaler. Was
   BLEIBT, ist die Hoehe — die Groesse hat gepasst, und ohne feste Hoehe
   wuerden sechs Kacheln wieder zu sechs Plakaten. Aus dem Quadrat wird
   damit je nach Anzahl ein leicht liegendes oder stehendes Rechteck. */
.tun-kachel {
  position: relative; display: flex; flex-direction: column;
  height: clamp(96px, 11.5vh, 124px); min-height: 0;
  text-align: left; padding: 0; cursor: pointer; min-width: 0;
  font-family: inherit; color: inherit;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 0; overflow: hidden;
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.tun-kachel:hover {
  transform: translateY(-2px); border-color: var(--cd-sage, #9aaba6);
  box-shadow: 0 6px 18px rgba(15, 31, 54, .1);
}
/* Der Kopf nennt das Blatt, in das die Kachel fuehrt — dieselbe Rangordnung
   wie bei den Zahlen oben (Wort klein, Sache gross). */
.tun-kopf {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 5px 8px; background: var(--cd-navy, #0f1f36);
}
.tun-modul {
  font-size: .6rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255, 255, 255, .78);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Der Punkt bleibt der Zustand: rot fuer dringend, gruen fuer den Rest.
   Auf Navy darf er kleiner sein als die 16 px auf Weiss. */
.tun-punkt {
  flex: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--status-success, #3d9970);
}
.tun-0 .tun-punkt { background: var(--status-danger, #c0392b); }
.tun-1 .tun-punkt { background: var(--status-warning, #c6922a); }
.tun-koerper {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  padding: 8px 10px 7px; display: flex; flex-direction: column; gap: 3px;
}
/* Das Zeichen des Blattes, blass hinter dem Satz — dieselbe Form wie im
   Menue. Kein zusaetzlicher Text, trotzdem hat jede Kachel ein Gesicht. */
.tun-wappen {
  position: absolute; right: -6px; bottom: -8px; width: 52px; height: 52px;
  stroke: var(--cd-sage, #9aaba6); fill: none; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .16; pointer-events: none;
}
.tun-0 .tun-wappen { stroke: var(--status-danger, #c0392b); opacity: .14; }
.tun-1 .tun-wappen { stroke: var(--status-warning, #c6922a); opacity: .14; }
.tun-lesbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.tun-text {
  position: relative; font-size: .875rem; font-weight: 500; line-height: 1.3;
  color: var(--cd-navy-text, #0f1f36);
  hyphens: none; overflow-wrap: normal; word-break: normal;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tun-frist {
  position: relative; margin-top: auto; font-size: .68rem; font-weight: 500;
  letter-spacing: .02em; color: var(--text-muted, #64748b);
  hyphens: none; overflow-wrap: normal; word-break: normal;
}
.tun-0 .tun-frist { color: var(--status-danger, #c0392b); font-weight: 600; }
.tun-1 .tun-frist { color: var(--status-warning, #c6922a); font-weight: 600; }
.tun-leer { font-size: .86rem; color: var(--text-muted, #64748b); margin: 0; }

/* ── Rechnungen (07.09.2026) ──────────────────────────────────────
   Der laufende Monat als Navy-Balken wie die Modulsumme, darunter die
   abgerechneten Monate zum Aufklappen. */
.re-lauf {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; border-radius: 0; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--cd-navy, #0f1f36) 0%,
              var(--cd-navy-light, #1a3358) 100%);
}
.re-lauf-wort { display: block; font-size: .845rem; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255,255,255,.7); }
.re-lauf-sub { display: block; margin-top: 4px; font-size: .815rem;
  color: rgba(255,255,255,.84); }
.re-lauf-zahl { font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  font-size: 2.15rem; font-weight: 800; color: #fff; line-height: 1.06; }
.re-auf, .re-monat {
  border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 0;
  margin-bottom: 8px; background: var(--bg-card, #fff);
}
.re-auf > summary, .re-monat > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 11px 14px; font-size: .9rem; color: var(--cd-navy-text, #0f1f36);
}
.re-monat > summary strong { flex: 1; font-weight: 600; }
.re-summe { font-variant-numeric:lining-nums tabular-nums; font-weight: 600; }
.re-zustand {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 0;
  background: var(--cd-sage-bg, rgba(154,171,166,.18));
  color: var(--text-muted, #64748b);
}
.re-zustand.bezahlt { background: var(--status-success-bg, rgba(61,153,112,.1));
  color: var(--status-success, #3d9970); }
.re-zustand.gestellt { background: var(--status-warning-bg, rgba(198,146,42,.1));
  color: var(--status-warning, #c6922a); }
.re-zustand.storniert { background: var(--status-danger-bg, rgba(192,57,43,.1));
  color: var(--status-danger, #c0392b); }
.re-posten { width: 100%; border-collapse: collapse; font-size: .85rem; }
.re-posten th, .re-posten td {
  padding: 7px 14px; border-top: 1px solid var(--border-subtle, #e2e8f0);
  text-align: left;
}
.re-posten th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted, #64748b); font-weight: 600; }
.re-posten .zahl { text-align: right; font-variant-numeric:lining-nums tabular-nums; }

/* Der Streifen ueber einem Blatt, dessen Modul nicht gebucht ist
   (07.09.2026). Weich: das Blatt bleibt sichtbar, der Streifen sagt, was
   fehlt und was es kostet. */
.mod-streifen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px;
  border-radius: 0; background: var(--cd-sage-bg, rgba(154,171,166,.14));
  border: 1px solid var(--cd-sage, #9aaba6);
}
.mod-streifen strong { display: block; font-size: .95rem; color: var(--cd-navy-text, #0f1f36); }
.mod-streifen span { display: block; margin-top: 2px; font-size: .82rem;
  color: var(--text-muted, #64748b); }
.mod-streifen .tat { flex: none; }

/* ── Module als Kacheln (07.09.2026) ───────────────────────────────
   Vorher eine Liste aus Zeilen mit Schalter — „das schaut schrecklich aus".
   Jetzt dieselbe Bauform wie der Arbeitsvorrat: Navy-Kopf mit dem Preis und
   dem Schalter, darunter Name und Satz, hinten blass das Zeichen. */
.mod-raster {
  display: grid; gap: 8px; margin: 0 0 14px;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* Zwei Blöcke statt einer Wand: was im Grundpaket steckt, steht oben
   (Ansage 07.09.2026 — „Bewertungen" lag mittendrin). */
.mod-gruppe {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem; color: var(--cd-navy-text, #0f1f36);
  margin: 0 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.mod-gruppe + .mod-raster { margin-bottom: 18px; }
.mod-staffel {
  margin: 6px 0 0; font-size: .78rem; line-height: 1.35;
  color: var(--cd-rost, #a0341a);
}
.mod-kachel {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 0; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.mod-kachel.an { border: 2px solid var(--cd-sage, #9aaba6); }
.mod-kachel:hover { box-shadow: 0 6px 18px rgba(15, 31, 54, .1); }
.mod-kopf {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 10px; background: var(--cd-navy, #0f1f36);
}
.mod-preis {
  font-size: .62rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255, 255, 255, .8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mod-fest { color: var(--cd-sage, #9aaba6); font-size: .9rem; line-height: 1; }
/* Der Schalter: ein Kippschalter im Hausmass, kein Browser-Kaestchen. */
.mod-schalter { position: relative; flex: none; display: inline-flex;
  width: 34px; height: 18px; cursor: pointer; }
.mod-schalter input { position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer; }
.mod-schalter span {
  position: absolute; inset: 0; border-radius: 0;
  background: rgba(255, 255, 255, .22); transition: background .18s;
}
.mod-schalter span::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--bg-card, #fff);
  transition: transform .18s;
}
.mod-schalter input:checked + span { background: var(--cd-sage, #9aaba6); }
.mod-schalter input:checked + span::after { transform: translateX(16px); }
.mod-schalter input:focus-visible + span { outline: 2px solid #fff; outline-offset: 1px; }
/* Alle Kacheln gleich hoch (Ansage 07.09.2026): Der Koerper fasst genau
   zwei Zeilen Ueberschrift und drei Zeilen Text — 2 x 19.8 + 3 x 18.6 px
   plus Abstand. Wird die Ueberschrift zweizeilig, bleiben dem Satz drei
   Zeilen; die Beschreibungen in vin_modul sind darauf gekuerzt (laengste
   80 Zeichen). Der volle Wortlaut steht in der Hilfe. */
.mod-koerper {
  position: relative; flex: none; height: 122px; box-sizing: border-box;
  padding: 9px 11px 11px; overflow: hidden;
  display: flex; flex-direction: column;
}
.mod-wappen {
  position: absolute; right: -8px; bottom: -10px; width: 58px; height: 58px;
  stroke: var(--cd-sage, #9aaba6); fill: none; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round; opacity: .15; pointer-events: none;
}
.mod-kachel.an .mod-wappen { opacity: .22; }
.mod-name {
  position: relative; flex: none; font-size: .95rem; font-weight: 600;
  color: var(--cd-navy-text, #0f1f36); line-height: 1.3;
  hyphens: none; overflow-wrap: normal; word-break: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mod-frist {
  position: relative; margin: 4px 0 0; font-size: .72rem; font-weight: 600;
  color: var(--status-warning, #c6922a);
}
.mod-satz {
  position: relative; flex: 1; min-height: 0; margin: 4px 0 0;
  font-size: .8rem; line-height: 1.45; color: var(--text-muted, #64748b);
  hyphens: none; overflow-wrap: normal; word-break: normal;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Die Summe liest sich wie eine Zahl im Cockpit, nicht wie eine Tabellenzeile. */
.mod-summe {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; border-radius: 0;
  background: linear-gradient(135deg, var(--cd-navy, #0f1f36) 0%,
              var(--cd-navy-light, #1a3358) 100%);
}
.mod-summe-wort {
  display: block; font-size: .845rem; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.mod-summe-sub { display: block; margin-top: 4px; font-size: .815rem;
  color: rgba(255, 255, 255, .84); }
.mod-summe-zahl {
  font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  font-size: 2.15rem; font-weight: 800; color: #fff; line-height: 1.06;
}

/* ── Die zwei Felder darunter ──────────────────────────────────────── */
.ck-feld {
  min-height: 0; min-width: 0; display: flex; flex-direction: column;
  background: var(--bg-card, #fff); border: 2px solid var(--cd-sage, #9aaba6);
  border-radius: 0; padding: 12px 14px 10px;
}
.ck-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; flex: none;
}
.ck-kopf h3 {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
  font-size: 18px; color: var(--cd-navy-text, #0f1f36); margin: 0;
}
/* Der lange Erklaersatz sitzt im Titel-Attribut. Auf einem Schirm ohne
   Scrollen kostet jeder Erklaerabsatz einen Wein, den man nicht mehr sieht;
   die gepunktete Linie zeigt, dass hier etwas zu holen ist. */
.ck-hinweis {
  font-size: .74rem; color: var(--text-muted, #64748b); white-space: nowrap;
  border-bottom: 1px dotted var(--cd-sage, #9aaba6); cursor: help;
}

/* ── Band 2: der Jahrgangslauf ─────────────────────────────────────
   Alle Weine auf EINER Zeitachse. Der Balken laeuft von heute bis zu dem
   Tag, an dem der Wein nach dem gemessenen Tempo leer ist; der senkrechte
   Strich sitzt dort, wo der Folgejahrgang kommt. Balken kuerzer als der
   Strich heisst: vorher weg. Balken laenger: bleibt liegen.

   Farbe ist NIE der einzige Traeger — jede Zeile sagt ihr Urteil auch in
   Worten („zu frueh weg", „bleibt liegen"). */
.jl-achse {
  position: relative; height: 15px; flex: none; margin-bottom: 22px;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.jl-achse .jl-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: .66rem; color: var(--text-muted, #94a3b8);
  font-variant-numeric:lining-nums tabular-nums; white-space: nowrap;
}
.jl-achse .jl-heute {
  position: absolute; left: 0; top: 0; font-size: .66rem; font-weight: 600;
  color: var(--cd-navy-text, #0f1f36);
}
.jl-liste { flex: 1; min-height: 0; overflow-y: auto; }
.jl-zeile {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) 7.4rem 3.6rem;
  align-items: center; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none;
  border-bottom: 1px solid var(--border-subtle, #eef1f4);
  /* 3 px, nicht 5: Bei vierzehn Weinen sind das 56 px, und genau die
     fehlten auf einem 1440x900-Schirm zum vollstaendigen Bild. */
  padding: 3px 2px; font-family: inherit; color: inherit;
}
.jl-zeile:last-child { border-bottom: none; }
.jl-zeile:hover { background: rgba(154, 171, 166, .1); }
.jl-name {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  overflow: hidden; white-space: nowrap;
}
.jl-name b {
  font-size: .95rem; font-weight: 600; color: var(--cd-navy-text, #0f1f36);
  overflow: hidden; text-overflow: ellipsis;
}
.jl-jg {
  font-size: .82rem; color: var(--text-muted, #64748b); flex: none;
  font-variant-numeric:lining-nums tabular-nums;
}
.jl-spur {
  position: relative; display: block; height: 10px; border-radius: 0;
  background: var(--grau-hell, #eef1f4);
}
.jl-fuell {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0;
  background: var(--cd-sage, #9aaba6);
}
/* Laeuft der Wein ueber das Ende der Achse hinaus, franst der Balken aus,
   statt am Rand zu enden — sonst sieht „reicht bis 2029" aus wie „reicht
   genau bis zum Rand". */
.jl-fuell.jl-weiter {
  border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}
/* Ohne belastbares Tempo gibt es keinen Balken, sondern eine Schraffur —
   sichtbar anders als eine gemessene Zahl. */
.jl-duenn {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 0;
  background: repeating-linear-gradient(45deg,
    rgba(154,171,166,.35) 0 5px, transparent 5px 10px);
}
.jl-marke { position: absolute; top: -3px; bottom: -3px; width: 0; }
.jl-marke i {
  position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: var(--cd-navy, #0f1f36);
}
.jl-urteil {
  font-size: .84rem; color: var(--text-muted, #64748b); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.jl-wann {
  font-size: .84rem; color: var(--text-muted, #64748b); white-space: nowrap;
  text-align: right; font-variant-numeric:lining-nums tabular-nums;
}

.jl-zu_frueh .jl-fuell { background: #a0341a; }
.jl-zu_frueh .jl-urteil { color: var(--rostrot, #a0341a); font-weight: 600; }
.jl-bleibt_liegen .jl-fuell { background: #f59e0b; }
.jl-bleibt_liegen .jl-urteil { color: #b7791f; font-weight: 600; }
.jl-auslauf .jl-fuell { background: #b6c2be; }
.jl-zu_wenig .jl-urteil, .jl-leer .jl-urteil { color: var(--text-muted); }

/* ── Band 3: die Absatzwege als Ring ───────────────────────────────
   Die sechs Datenfarben sind NICHT die Hausfarben. Sie stammen aus einer
   geprueften Reihe fuer Datenfarben (Helligkeitsband, Buntheit, Trennung
   bei Farbenblindheit und bei normalem Sehen — alles bestanden auf der
   Flaeche #f7fafc). Rostrot und Amber bleiben frei: Die tragen im
   Jahrgangslauf eine Bedeutung und duerfen daneben nicht als blosse
   Kennfarbe auftauchen. */
.ck-wege {
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #4a3aa7;
  --serie-5: #e87ba4;
  --serie-6: #008300;
}
.weg-koerper {
  flex: 1; min-height: 0; display: flex; align-items: center;
  justify-content: center; gap: 14px; flex-wrap: wrap;
}
/* Der Halter braucht ein FESTES Mass, sonst loest sich die Prozentbreite
   des Rings gegen nichts auf: Bei 1920 stand die Zahl in der Mitte neben
   dem Ring statt darin (Befund 29.08.2026). */
.ring-halter {
  position: relative; line-height: 0;
  flex: 0 0 clamp(120px, 21%, 158px); width: clamp(120px, 21%, 158px);
}
/* Waechst mit dem Feld, bleibt aber lesbar: unter 120 px verschmelzen die
   duennen Stuecke, ueber 170 px draengt er die Legende in den Umbruch. */
.ring { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.ring-stueck { transition: opacity .15s; }
.ring-halter:hover .ring-stueck { opacity: .55; }
.ring-halter .ring-stueck:hover { opacity: 1; }
.ring-mitte {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.2;
  pointer-events: none; text-align: center;
}
.ring-mitte b {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem;
  color: var(--cd-navy-text, #0f1f36); font-variant-numeric:lining-nums tabular-nums;
}
.ring-mitte i { font-style: normal; font-size: .66rem; color: var(--text-muted, #64748b); }

/* Die Legende ist eine kleine Tabelle mit Kopfzeile: „25,57 €/l" neben
   „Tour" war ohne Ueberschrift eine Zahl ohne Frage (Befund 29.08.2026).
   Der Umsatz steht vorn, weil den jeder sofort versteht. */
/* Die Namensspalte bekommt den Rest: „Wiederverkäufer" und „Ausschank im
   Glas" wurden sonst zu „Wiederver…" abgeschnitten (Befund 29.08.2026). */
.weg-tafel { flex: 1 1 16rem; min-width: 0; }
.weg-titel, .weg-zeile {
  display: grid; grid-template-columns: 11px minmax(0, 1fr) 4.2rem 4.6rem;
  align-items: center; gap: 7px;
}
.weg-titel {
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted, #94a3b8); padding-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.weg-titel span:nth-child(3), .weg-titel span:nth-child(4) { text-align: right; }
.weg-liste { list-style: none; margin: 0; padding: 0; }
.weg-zeile { padding: 5px 0; border-bottom: 1px solid var(--border-subtle, #eef1f4); }
.weg-zeile:last-child { border-bottom: none; }
.weg-tupfen { width: 12px; height: 12px; border-radius: 0; }
/* Umbrechen statt kuerzen: „Ausschank im Glas" ist der Name, der den
   Unterschied zu „Flasche ab Hof" erklaert — abgeschnitten als
   „Ausschan…" erklaert er gar nichts. */
.weg-wort {
  font-size: .84rem; font-weight: 600; color: var(--cd-navy-text, #0f1f36);
  line-height: 1.25; overflow-wrap: anywhere;
}
.weg-umsatz {
  font-size: .82rem; white-space: nowrap; text-align: right;
  color: var(--cd-navy-text, #0f1f36); font-variant-numeric:lining-nums tabular-nums;
}
.weg-liter {
  font-size: .82rem; white-space: nowrap; text-align: right; font-weight: 600;
  color: var(--cd-navy-text, #0f1f36); font-variant-numeric:lining-nums tabular-nums;
}
/* Der Satz sagt in Worten, was die zweite Spalte bedeutet — eine Legende
   mit Ueberschrift ist gut, ein Beispiel ist besser. */
.weg-satz {
  margin: 8px 0 0; font-size: .78rem; line-height: 1.45;
  color: var(--text-muted, #64748b);
}
.weg-satz b { color: var(--cd-navy-text, #0f1f36); font-weight: 600; }

/* Schmal: aus zwei Spalten wird eine, und dann DARF die Seite scrollen —
   auf einem Handy ist ein Cockpit ohne Scrollen nicht zu haben. */
@media (max-width: 62rem) {
  .content-body:has(.cockpit-raster) { overflow-y: auto; display: block; }
  .content-body:has(.cockpit-raster) > #blatt { min-height: auto; }
  .cockpit-raster {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kpi" "tun" "lauf" "wege";
  }
  .jl-liste { overflow: visible; }
  /* Fuenf feste Spalten waeren auf dem Handy fuenf Streifen. Hier zaehlt
     die Mindestbreite, nicht die Anzahl. */
  /* Schmal: Zehn Quadrate nebeneinander waeren zehn Briefmarken. Hier
     bricht das Raster um, und die Kacheln werden wieder Rechtecke. */
  .tun-raster {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  }
  .tun-kachel { height: auto; min-height: 5.2rem; }
  .jl-zeile { grid-template-columns: minmax(0, 1fr) 7.4rem 3.6rem; }
  .jl-spur { grid-column: 1 / -1; order: 3; margin-top: 3px; }
  .jl-achse .jl-tick:nth-child(odd) { display: none; }
}

/* „Ein Tap" in der Ausschanktabelle: welche Groesse die Kachel in der
   Winzer-App bei einmaligem Antippen boniert (24.08.2026). Radiotasten,
   weil es je Wein genau eine sein muss. */
.tapwahl { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.tapwahl input { width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--navy); }
.tapwahl span { font-size: .82rem; color: var(--grau); }
.tapwahl input:checked + span { color: var(--cd-navy-text, #0f1f36); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   KACHELWAND DER KASSE (25.08.2026, Ansage Neo)
   Dieselbe Bedienung wie in der Winzer-App: Klick auf die Kachel boniert
   die Standardgroesse, Klick auf die kleine Groessenzeile oeffnet die
   uebrigen. Am Rechner ist Platz fuer mehr Spalten als am Handy. */
.ka-kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .5rem; margin: .8rem 0;
}
/* Die Weinfarbe umrandet die GANZE Kachel (Ansage Neo 31.08.2026) — nicht
   nur die linke Kante. Eckig statt abgerundet: 4 px, wie das Corporate
   Design es für Container vorgibt. Beim Überfahren wird die eigene Farbe
   kräftiger statt durch Sage ersetzt — sonst verlöre die Kachel im
   wichtigsten Moment genau das Merkmal, nach dem man sie gesucht hat. */
.ka-kachel {
  position: relative; min-height: 84px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .12rem;
  background: var(--bg-card, #fff); border: 2px solid var(--sage, var(--cd-sage, #9aaba6)); border-radius: 0;
  font: inherit; color: var(--cd-navy-text, #0f1f36); padding: .5rem .45rem; cursor: pointer;
}
.ka-kachel:hover { filter: brightness(.97); }
.ka-kachel:active { transform: scale(.97); }
.ka-kachel[data-farbe="weiss"] { border-color: #cbb84f; }
.ka-kachel[data-farbe="rose"]  { border-color: #d98b8b; }
.ka-kachel[data-farbe="rot"]   { border-color: #7d2233; }
.ka-kachel[data-farbe="sekt"]  { border-color: var(--cd-sage, #9aaba6); }
.ka-kachel .name {
  font-size: .82rem; font-weight: 600; line-height: 1.15; text-align: center;
}
.ka-kachel .jahr { font-size: .72rem; color: var(--grau); }
.ka-kachel .std {
  display: inline-flex; align-items: center; gap: .15rem;
  margin-top: .2rem; padding: .12rem .4rem; border-radius: 0;
  background: var(--grau-hell, #eef1f4); color: var(--grau); font-size: .72rem;
}
.ka-kachel .std:hover { background: var(--sage); color: #fff; }
.ka-kachel .std .mehr { font-style: normal; font-size: .66rem; opacity: .8; }
.ka-kachel .anzahl {
  position: absolute; right: -6px; top: -6px;
  min-width: 24px; height: 24px; padding: 0 5px;
  background: var(--navy); color: #fff; border: 2px solid #fff;
  border-radius: 0; font-size: .76rem; font-weight: 600;
  line-height: 20px; text-align: center;
}

#ka-glaswahl .ka-glaswahl-schatten {
  position: fixed; inset: 0; background: rgba(15,31,54,.45); z-index: 80;
}
#ka-glaswahl .ka-glaswahl-blatt {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 81; min-width: 320px; max-width: 90vw;
  background: var(--bg-card, #fff); border-radius: 0; padding: 1.1rem 1.2rem;
  box-shadow: 0 20px 60px rgba(15,31,54,.35);
}
#ka-glaswahl .ka-glaswahl-name { font-weight: 600; margin: 0 0 .7rem; }
#ka-glaswahl .ka-glaswahl-taste {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 48px; margin-top: .4rem;
  border: 2px solid var(--sage); border-radius: 0; background: var(--bg-card, #fff);
  font: inherit; font-size: 1rem; font-weight: 600; padding: .4rem .8rem;
  cursor: pointer; color: var(--cd-navy-text, #0f1f36);
}
#ka-glaswahl .ka-glaswahl-taste:hover { background: var(--navy); color: #fff; }
#ka-glaswahl .ka-glaswahl-taste .rechts { font-weight: 400; font-size: .85rem; }

/* ── Flache Schirme (bis 1440x900) ─────────────────────────────────────
   Die Aufgabenkacheln sind das Wichtigste und behalten ihre Groesse; das
   Polster ringsherum geht weg. Zahlenreihe niedriger, die zwei
   Auswertungsfelder duenner, Weinzeilen dichter. Der Inhalt bleibt
   derselbe.

   Die Grenze steht auf 960 px: 1440x900 ist der haeufigste Schirm im Haus,
   und genau dort wurde es knapp. */
@media (min-width: 62.001rem) and (max-height: 960px) {
  .cockpit-raster { gap: 8px; }
  .tun-raster { gap: 7px; }
  .tun-koerper { padding: 7px 9px 6px; }
  .tun-text { font-size: .82rem; line-height: 1.28; -webkit-line-clamp: 3; }
  .tun-wappen { width: 44px; height: 44px; }
  .cockpit-raster .cockpit-kpi { padding: 11px 15px; }
  .cockpit-raster .cockpit-kpi .kpi-value { font-size: 1.72rem; }
  .cockpit-raster .cockpit-kpi .kpi-label { font-size: .78rem; margin-top: 4px; }
  .cockpit-raster .cockpit-kpi .kpi-trend { font-size: .76rem; margin-top: 4px; }
  /* Die zwei Auswertungsfelder duenner — den Platz bekommen die Kacheln
     darueber. Ansage Neo: „Die zwei grossen Grids einfach enger machen." */
  .ck-feld { padding: 7px 12px 6px; }
  .ck-kopf { margin-bottom: 3px; }
  .ck-kopf h3 { font-size: 16px; }
  .jl-zeile { padding: 0 2px; }
  .jl-name b { font-size: .89rem; }
  .jl-urteil, .jl-wann { font-size: .79rem; }
  .jl-achse { height: 12px; margin-bottom: 16px; }
}

/* Sehr flach (768er Laptop): die letzten Pixel. */
@media (min-width: 62.001rem) and (max-height: 800px) {
  .ck-feld { padding: 7px 12px 6px; }
  .jl-achse { height: 12px; margin-bottom: 16px; }
  .ring-halter { flex-basis: clamp(110px, 22%, 140px); width: clamp(110px, 22%, 140px); }
  /* Ein Pixel je Weinzeile — bei vierzehn Weinen sind das die letzten,
     die auf einem 768er zum vollstaendigen Bild fehlen. */
  .jl-name b { font-size: .85rem; }
  .jl-urteil, .jl-wann { font-size: .76rem; }
}

/* ── Meldungen als Liste statt Tabelle (Ansage Neo 29.08.2026) ─────────
   Sechs Tabellenspalten passten im Seitenpanel nicht nebeneinander; die
   Spalte mit dem Haken lag rechts ausserhalb und man musste waagerecht
   schieben. Eine Liste bricht um und braucht das nicht. */
.meld-liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.meld-zeile {
  background: var(--bg-card, #fff); border: 2px solid var(--cd-sage, #9aaba6);
  border-radius: 0; padding: 11px 13px; margin-bottom: 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
}
.meld-kopf { flex: 1 1 14rem; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
/* „in 13 Tagen" brach auf zwei Zeilen und riss die Zeile auseinander. */
.meld-kopf .merker { white-space: nowrap; }
.meld-kopf b { font-size: .95rem; color: var(--cd-navy-text, #0f1f36); }
.meld-zeug {
  flex: 1 1 100%; font-size: .8rem; color: var(--text-muted, #64748b);
  order: 3;
}
.meld-tun { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.meld-tun .leise { font-size: .82rem; }
.meld-tun .tat { font-size: .82rem; padding: 6px 12px; }
/* Erledigtes tritt zurueck, verschwindet aber nicht: Der Nachweis, dass
   und wann abgegeben wurde, ist das halbe Meldewesen. */
.meld-zeile.erledigt { border-color: var(--border-subtle, #e2e8f0); background: transparent; }
.meld-zeile.erledigt .meld-kopf b { color: var(--text-muted, #64748b); }

/* ── Bewertungen (29.08.2026) ──────────────────────────────────────────
   Neu gebaut, weil es das Blatt vorher gar nicht gab: Das Cockpit zaehlte
   „2 Bewertungen ohne Antwort" und sprang auf die Kundenliste, in der keine
   Bewertung steht. Unbeantwortetes steht oben und traegt eine kraeftige
   linke Kante; Beantwortetes tritt zurueck, verschwindet aber nicht. */
.bw-liste { list-style: none; margin: 0; padding: 0; }
.bw-zeile {
  background: var(--bg-card, #fff); border: 2px solid var(--cd-sage, #9aaba6);
  border-radius: 0; padding: 12px 14px; margin-bottom: 10px;
}
.bw-zeile.beantwortet { }
.bw-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.bw-kopf b { font-size: .95rem; color: var(--cd-navy-text, #0f1f36); }
.bw-sterne { color: #b7791f; letter-spacing: 1px; }
.bw-note { font-size: .76rem; color: var(--text-muted, #64748b); }
.bw-wann { margin-left: auto; font-size: .76rem; color: var(--text-muted, #64748b); }
.bw-text { margin: 7px 0 5px; font-size: .9rem; line-height: 1.45; }
.bw-teile { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 9px; }
.bw-teil { font-size: .75rem; color: var(--text-muted, #64748b); }
.bw-antwort > label {
  display: block; font-size: .78rem; color: var(--text-muted, #64748b);
  margin-bottom: 4px;
}
.bw-antwort textarea {
  width: 100%; font-family: inherit; font-size: .88rem; line-height: 1.4;
  padding: 8px 10px; border: 2px solid var(--cd-sage, #9aaba6); border-radius: 0;
  background: var(--bg-primary, #f7fafc); color: inherit; resize: vertical;
}
.bw-antwort textarea:focus { outline: 2px solid var(--cd-navy, #0f1f36); outline-offset: 1px; }
.bw-tun { display: flex; align-items: center; gap: 12px; margin-top: 7px; }

/* ── Neue Buchungen sichtbar machen (29.08.2026) ───────────────────────
   „Sechs neue Buchungen — wo sehe ich, welche neu sind?" Antwort: an der
   linken Kante und am Wort „neu", nicht an der Sortierung. Dazu eine
   Umschaltleiste, die auf die neuen einschraenkt. */
.filterreihe { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.filtertaste {
  font-family: inherit; font-size: .82rem; cursor: pointer;
  padding: 6px 13px; border-radius: 0; color: inherit;
  background: var(--bg-card, #fff); border: 2px solid var(--cd-sage, #9aaba6);
}
.filtertaste:hover { background: rgba(154, 171, 166, .14); }
.filtertaste.an {
  background: var(--cd-navy, #0f1f36); border-color: var(--cd-navy, #0f1f36);
  color: #fff; font-weight: 500;
}
tr.frisch > td { background: rgba(15, 31, 54, .035); }
.frisch-merker {
  background: var(--cd-navy, #0f1f36); color: #fff; border-color: var(--cd-navy, #0f1f36);
}

/* ── Der Hinweis bleibt bei Fehlern stehen (29.08.2026) ────────────────
   Erfolg verschwindet nach fuenf Sekunden, ein Fehler nicht: Er trennt
   sich vom Rest durch Farbe UND Kreuz, und er wartet, bis man ihn gelesen
   hat. Wer den Grund verpasst, drueckt denselben Knopf noch dreimal. */
/* `display: flex` schlaegt das HTML-Attribut `hidden` — ohne die zweite
   Zeile stand der leere schwarze Kasten dauerhaft in der Ecke, sichtbar im
   Bildschirmfoto vom 29.08.2026. Ein klassischer Fehler, und einer, den man
   nur sieht, wenn man wirklich hinschaut. */
.meldung { display: flex; align-items: flex-start; gap: 12px; max-width: 30rem; }
.meldung[hidden] { display: none; }
.meldung-wort { line-height: 1.4; }
.meldung-zu {
  flex: 0 0 auto; background: none; border: none; color: rgba(255,255,255,.75);
  font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 0 0 2px;
  font-family: inherit;
}
.meldung-zu:hover { color: #fff; }

/* Ein Erloes je Liter aus einer einzigen Bestellung ist keine Erkenntnis
   ueber den Absatzweg, sondern ueber diese Bestellung. Solche Werte stehen
   blass da und werden im Beispielsatz uebergangen (29.08.2026). */
.weg-liter.duenn { color: var(--text-muted, #94a3b8); font-weight: 400; }
.weg-fussnote { display: block; margin-top: 3px; font-size: .74rem; }

/* ── Arbeit im Weinberg, Anwesenheit, Tage-Zähler (30.08.2026) ──────
   Der Arbeitsblock trägt bewusst KEINE Ampelfarbe: Bei einem Termin heisst
   rostrot „voll, nimm keinen mehr an", bei einer Lesekolonne hiesse es
   „genug Leute" — dieselbe Farbe mit umgekehrtem Sinn. Was fehlt, steht
   als Satz auf dem Block, in derselben Schrift wie „niemand eingeteilt". */
.tf-block.tf-arbeit { background: rgba(154,171,166,.16); }
.tf-schlagkopf { background: var(--bg-input, #f7fafc); }
.tf-zelle.tf-schlagzelle { background: var(--bg-card, #fff); }
.tf-zelle.tf-schlagzelle:hover .tf-plus { opacity: 1; }
/* Das Plus steht dauerhaft da, nur leise. Ein Griff, den man erst beim
   Darüberfahren sieht, ist keiner — man muss wissen, WO man klicken kann,
   bevor man die Maus dorthin bewegt. */
.tf-plus { display: block; text-align: center; font-size: 1.1rem; line-height: 1.6;
  color: var(--cd-sage, #9aaba6); opacity: .5; cursor: pointer;
  transition: opacity .15s; }
.tf-dawaren { display: block; margin-top: 3px; font-size: .66rem; color: #3d9970;
  font-weight: 500; }
.tf-stempel { display: block; margin-top: 4px; width: 100%; padding: 2px 6px;
  font-family: inherit; font-size: .64rem; font-weight: 500; cursor: pointer;
  color: var(--cd-navy-text, #0f1f36); background: var(--bg-card, #fff); border-radius: 0;
  border: 1px solid var(--cd-sage, #9aaba6); }
.tf-stempel:hover { background: var(--cd-navy, #0f1f36); color: #fff; }

/* Der Zähler steht am Menschen. Bernstein heisst „diese Woche noch reden",
   rostrot „die Grenze ist erreicht" — beide ziehen eine Handlung nach sich,
   grün ist nur eine Zahl. */
.tf-zaehler { display: inline-block; margin-top: 3px; padding: 1px 6px;
  font-family: inherit; font-size: .64rem; font-weight: 600; cursor: pointer;
  border-radius: 0; border: 1px solid var(--cd-sage, #9aaba6);
  background: var(--bg-card, #fff); color: var(--cd-navy-text, #0f1f36); }
.tf-zaehler.stand-knapp { border-color: #f59e0b; background: rgba(245,158,11,.14); }
.tf-zaehler.stand-voll { border-color: #a0341a; background: rgba(160,52,26,.12);
  color: var(--rostrot, #a0341a); }

/* Der Kasten „Wer war da": erst die Zeiten, dann die Haken. Alle sind
   vorgehakt — abgewählt werden die, die nicht gekommen sind. */
.tf-zeitfelder { display: flex; gap: .6rem; margin-bottom: .8rem; }
.tf-zeitfelder label { flex: 1; display: block; font-size: .75rem;
  color: var(--text-muted, #64748b); }
.tf-hakenliste { display: flex; flex-direction: column; gap: .1rem;
  max-height: 15rem; overflow-y: auto; border: 1px solid #e2e8f0;
  border-radius: 0; padding: .4rem; }
.tf-haken { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem;
  font-size: .85rem; border-radius: 0; cursor: pointer; }
.tf-haken:hover { background: rgba(154,171,166,.14); }
.tf-haken input { width: 1.05rem; height: 1.05rem; accent-color: var(--cd-navy, #0f1f36); }
.tf-haken span { margin-left: auto; font-size: .7rem; color: var(--text-muted, #64748b); }
.hinweisliste { margin: 0; padding-left: 1.1rem; }
.hinweisliste li { font-size: .85rem; margin-bottom: .3rem; }

/* Der Krankenversicherungsnachweis. Rostrot heisst „nicht eingetragen" —
   dann fehlt die Angabe für die Anmeldung; bernstein heisst „Angabe da,
   Beleg fehlt". Zwei Zustände, zwei Farben, beide anklickbar: Eine Marke,
   die nur meldet, wäre eine Warnung ohne Handlung. */
.tf-kv { display: inline-block; margin-top: 3px; padding: 1px 6px;
  font-family: inherit; font-size: .64rem; font-weight: 600; cursor: pointer;
  border-radius: 0; background: var(--bg-card, #fff); }
.tf-kv.stand-fehlt { border: 1px solid #a0341a; background: rgba(160,52,26,.12);
  color: var(--rostrot, #a0341a); }
.tf-kv.stand-ohne_beleg { border: 1px solid #f59e0b;
  background: rgba(245,158,11,.14); color: var(--cd-navy-text, #0f1f36); }
.tf-kv-schau { font-family: inherit; font-size: .68rem; cursor: pointer;
  padding: 1px 6px; border-radius: 0; background: var(--bg-card, #fff);
  border: 1px solid var(--cd-sage, #9aaba6); color: var(--cd-navy-text, #0f1f36); }
.tf-kv-schau:hover { background: var(--cd-navy, #0f1f36); color: #fff; }

/* ── Anklickbare Tabellenzeilen (31.08.2026) ───────────────────────────
   Eine Zeile, die etwas öffnet, muss das zeigen — sonst probiert es
   niemand. Beim Angebot war der Weg zum Ändern vorhanden, nur unsichtbar
   (Ansage Neo). Kein Rahmen, kein Knopf: nur der Zeiger und ein Hauch
   Fläche, damit die Tabelle eine Tabelle bleibt. */
tr.anklickbar{cursor:pointer}
tr.anklickbar:hover{background:var(--flaeche-leicht,rgba(15,31,54,.045))}

/* ── Gruppenbänder in der Tafel (31.08.2026, Ansage Neo) ───────────────
   „Ich habe Kellerführung und das ist nicht getrennt von der Weinprobe
   klassisch, den Ausschank und Veranstaltungen nicht getrennt." Getrennt
   WAREN die Zeilen — man sah es nur nicht: acht Zeilen in einer Folge,
   ohne Hinweis, dass drei verschiedene Dinge gemeint sind.

   Das Band läuft über alle acht Spalten (Kopf + sieben Tage). `grid-column:
   1 / -1` genügt dafür; die Spaltenzahl steht als Inline-Stil an `.tafel`
   und darf hier nicht doppelt gepflegt werden. */
.tafel .tf-gruppe{
  grid-column:1 / -1;
  position:sticky;left:0;
  background:var(--navy,var(--cd-navy, #0f1f36));color:#fff;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding:.5rem .75rem;
  /* Etwas Luft ÜBER dem Band, damit die Gruppe darüber sichtbar endet —
     aber nicht vor dem ersten. */
  margin-top:14px;
  border-bottom:1px solid var(--rostrot,#a0341a)}
.tafel .tf-gruppe:first-child{margin-top:0}

/* ── Ausschank: Zeile, nicht Tageskopf (31.08.2026) ────────────────────
   Ein Zwischenschritt hat Ausschank und Füllstand in den Tageskopf gelegt.
   Das war unübersichtlich („das will ich dort so nicht") und ist wieder
   zurückgenommen: Der Ausschank ist die oberste ZEILE, dort wird
   eingeteilt — wie in der MOLOFY-Hafentafel. Der Kopf färbt nur noch mit,
   damit man die offenen Tage von oben nach unten wiedererkennt. */
.tafel .tf-tagkopf.tf-offen{box-shadow:inset 0 -3px 0 var(--gruen,#3d9970)}
.tafel .tf-ziel.tf-offen{background:rgba(61,153,112,.05)}

/* Der Füllstand in der Ausschankzelle — die eine Zahl, die ein Wirt sehen
   will: geht noch was? Die Farbe richtet sich nach dem FREIEN Anteil, nicht
   danach, ob überhaupt etwas belegt ist (Muster der MOLOFY-Hafentafel). */
.tafel .tf-voll{display:block;margin-top:4px}
.tafel .tf-voll-wort{display:block;font-size:.68rem;color:var(--grau,#64748b);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tafel .tf-vollbalken{display:block;height:5px;border-radius: 0;margin-top:2px;
  background:rgba(15,31,54,.1);overflow:hidden}
.tafel .tf-vollbalken i{display:block;height:100%;background:var(--gruen,#3d9970)}
.tafel .tf-voll.knapp .tf-vollbalken i{background:var(--amber,#f59e0b)}
.tafel .tf-voll.voll .tf-vollbalken i{background:var(--rostrot,#a0341a)}
.tafel .tf-voll.voll .tf-voll-wort{color:var(--rostrot,#a0341a)}

/* ── Gruppen auf- und zuklappen (31.08.2026, Ansage Neo) ───────────────
   „Den Weinberg brauche ich einmal im Jahr" — also ist er zu, bis jemand
   ihn aufmacht. Das Band ist deshalb ein Knopf, kein Schild. */
.tafel .tf-gruppe{grid-column:1 / -1;position:sticky;left:0;
  display:flex;align-items:center;gap:.55rem;width:100%;
  background:var(--cd-navy,var(--cd-navy, #0f1f36));color:#fff;border:0;
  font-family:inherit;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;text-align:left;
  padding:.55rem .75rem;margin-top:14px;cursor:pointer;
  border-bottom:1px solid var(--rostrot,#a0341a)}
.tafel .tf-gruppe:first-child{margin-top:0}
.tafel .tf-gruppe:hover{background:#16294a}
.tafel .tf-gruppepfeil{display:inline-block;transform:rotate(90deg);
  transition:transform .18s;font-size:1rem;line-height:1;opacity:.8}
.tafel .tf-gruppe.zu .tf-gruppepfeil{transform:rotate(0deg)}
.tafel .tf-gruppe.zu{border-bottom-color:rgba(255,255,255,.18)}
.tafel .tf-gruppezahl{margin-left:auto;opacity:.55;letter-spacing:.06em}

/* ── Der Kopf am Handy (31.08.2026, Ansage Neo) ────────────────────────
   „Mein Header ist in der Mitte und der Bildschirm ist komisch geteilt."
   Grund war `flex-wrap:wrap` mit rechtsbündigen Aktionen: Der Titel bekam
   eine eigene Zeile, die vier Bedienelemente brachen in zwei weitere und
   standen rechts — das sah aus wie drei halbe Kopfzeilen.

   Jetzt: Titel oben links, darunter EINE Reihe, die sich seitlich schieben
   lässt. Nichts bricht mehr um, nichts steht mittig. */
@media (max-width: 600px) {
  .content-header { flex-direction: column; align-items: stretch;
    flex-wrap: nowrap; row-gap: 8px; padding: 10px 12px; }
  .content-header h2 { font-size: 1rem; }
  .content-header-actions { flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 6px; padding-bottom: 2px; }
  .content-header-actions::-webkit-scrollbar { display: none; }
  .content-header-actions > * { flex: 0 0 auto; }
  .content-header-actions select { max-width: 46vw; }
  /* Die Reiterzeile genauso — sie trug bis zu neun Blätter und schob die
     ganze Seite nach rechts (14 px Überlauf, gemessen 31.08.2026). */
  .tab-bar { overflow-x: auto; scrollbar-width: none; }
  .tab-bar::-webkit-scrollbar { display: none; }
  /* Nichts darf die Seite breiter machen als den Schirm. */
  .app-schale, .main-content, .content-body { max-width: 100%; overflow-x: hidden; }
}

/* Der Sprung in der Tafelsteuerung (31.08.2026): ein Datum wählen, die
   Tafel zeigt dessen Woche. Ohne ihn waren drei Monate dreizehn Klicks. */
.tf-steuer .tf-sprung{display:inline-flex;align-items:center;gap:.4rem;
  font-size:.78rem;color:var(--grau,#64748b);margin-left:auto;white-space:nowrap}
.tf-steuer .tf-sprung input{font:inherit;font-size:.8rem;padding:5px 8px;
  border:1px solid var(--linie,#e2e8f0);border-radius: 0;
  background: var(--bg-card, #fff);color:var(--tinte,var(--cd-navy, #0f1f36))}

/* ── Registerzeile der Verbund-Blätter (31.08.2026) ─────────────────
   28 Tabs wurden 15; was zusammengehört, steht in einem Blatt und wird
   hier umgeschaltet. Bewusst leiser als die Tabzeile darüber: Das ist die
   zweite Ebene, nicht eine zweite Navigation. */
.blattregister { display: flex; gap: .4rem; flex-wrap: wrap;
  margin-bottom: 1.1rem; padding-bottom: .7rem;
  border-bottom: 1px solid #e2e8f0; }
.blattregister button { padding: .38rem .9rem; font-family: inherit;
  font-size: .8rem; font-weight: 500; cursor: pointer; border-radius: 0;
  border: 1px solid var(--cd-sage, #9aaba6); background: var(--bg-card, #fff);
  color: var(--cd-navy-text, #0f1f36); }
.blattregister button:hover { background: rgba(154,171,166,.14); }
.blattregister button[aria-selected="true"] { background: var(--cd-navy, #0f1f36);
  border-color: var(--cd-navy, #0f1f36); color: #fff; }

/* ── Pflege überall (31.08.2026): anklickbare Zeilen und Bild-Kacheln ──
   Eine Zeile, die sich ändern lässt, sagt das mit dem Zeiger — sonst
   probiert es niemand aus. */
tr.zeigbar { cursor: pointer; }
tr.zeigbar:hover td { background: rgba(154,171,166,.10); }

/* Die Kassen-Kachel trägt jetzt das Flaschenbild wie in der Winzer-App:
   Bild links, Wort rechts — die Form der Flasche sagt die Weinart, bevor
   man den Namen liest. */
.ka-kachel { flex-direction: row; align-items: stretch; gap: .55rem;
  text-align: left; min-height: 104px; padding: .55rem .6rem; }
.ka-kachel img.flasche { width: 30px; align-self: center; flex-shrink: 0;
  max-height: 96px; object-fit: contain; }
.ka-kachel .ka-wort { display: flex; flex-direction: column;
  align-items: flex-start; gap: .1rem; min-width: 0; }
.ka-kachel .ka-wort .name { font-weight: 600; line-height: 1.15; }
.ka-kachel .ka-wort .jahr { font-size: .74rem; color: var(--text-muted, #64748b); }
.ka-kachel .ka-wort .dazu { font-size: .68rem; color: var(--text-muted, #64748b);
  line-height: 1.2; }
.ka-kacheln { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }

/* ── Cockpit: zwei Hälften (31.08.2026, Ansage Neo) ────────────────────
   Links die Tafel — „das wichtigste Werkzeug, auch im Cockpit" —, rechts
   die beiden Bänder „Reicht bis zum nächsten Jahrgang" und „Woher das
   Geld kommt" untereinander. Vorher lagen die zwei quer über die volle
   Breite, und die Tafel gab es im Cockpit gar nicht. */
/* Beide Hälften enden an der Unterkante des Schirms, mit sichtbarem Rand:
   Vorher standen die Kinder auf „start" und wuchsen über die Rasterzeile
   hinaus — das overflow:hidden des Rumpfs schnitt dann Tafel und
   Geld-Kachel unten ab, der Rahmen fehlte (Ansage Neo 31.08.2026). Jetzt
   bekommen beide Spalten die Zeilenhöhe und rollen IN sich. */
.ck-zwei{display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(0,1fr);height:100%;column-gap:8px;
  align-items:stretch;min-height:0;padding-bottom:2px}
/* Ohne die feste Zeile wuchs die Zeile mit dem Inhalt: Wer im Cockpit
   den Weinberg aufklappte, schob die Tafel unter den Schirmrand und
   nichts rollte mehr (Ansage Neo 31.08.2026). */
.ck-zwei > *{min-height:0}
/* Der Abstand zwischen den Kacheln ist DERSELBE wie zwischen den
   Arbeitskacheln oben (8 px, .tun-raster) — ein Mass für das ganze
   Cockpit (Ansage Neo 31.08.2026, zweiter Anlauf). */
.ck-rechts{display:flex;flex-direction:column;gap:8px;min-width:0;
  min-height:0;overflow-y:auto}
/* Das Geld-Band bleibt IMMER vollständig: Vorher teilten sich beide Bänder
   die Höhe frei, die Weinliste drückte die Geld-Zeilen in den Schlusssatz
   hinein — Zeile und Satz lagen übereinander (Fund Neo 31.08.2026).
   Jetzt behält das Geld-Band seine natürliche Höhe, und die Jahrgangs-
   Liste darüber rollt in sich, wenn der Platz nicht reicht. */
.ck-rechts .ck-wege{flex:0 1 auto;min-height:0;overflow:hidden}
/* 15.09.2026: Der Ausschank-Streifen über den Kacheln kostet 46 px, und
   die trug bis dahin allein die Reichweitenliste — bei Neo schob das
   Cockpit über den Schirmrand. Das Geld-Band gibt jetzt mit nach
   (Ansage Neo: „vielleicht das woher das Geld kommt etwas kleiner
   machen"), rollt in sich statt zu wachsen. */
.ck-rechts .ck-wege .weg-koerper{overflow-y:auto;min-height:0}
/* Untergrenze für beide Bänder: Auf einem 1366x768-Laptop schrumpfte das
   Geldband sonst auf Kopf und Schlusssatz zusammen, die Balken waren weg
   (gemessen 15.09.2026 bei 640 px Fensterhöhe). Jetzt behält jedes Band
   mindestens vier Zeilen; reicht der Platz nicht, rollt die rechte
   Spalte in sich — die SEITE bleibt ein Schirm. */
.ck-rechts .ck-wege{min-height:150px}
.ck-rechts .ck-lauf{min-height:150px}
.ck-rechts .ck-lauf{flex:1 1 auto;min-height:0;overflow:hidden}
.ck-rechts .ck-lauf .jl-liste{overflow-y:auto;min-height:0;flex:1 1 auto}

/* Das kleine Plus vorn in der Personen-Leiste — nur im Cockpit. Im
   Modul-Blatt bleibt der wörtliche „+ Person"-Knopf am Ende der Leiste. */
.tf-plus{font-family:inherit;width:26px;height:26px;border:none;border-radius: 0;cursor:pointer;
  background:var(--cd-navy,var(--cd-navy, #0f1f36));color:#fff;font-size:1.05rem;line-height:1;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tf-plus:hover{background:#1d3557}
/* In der Tafelzelle ist das Plus der einzige Inhalt — die Zelle ist eine
   Spalte, also klebte es oben links in der Ecke und sass sichtbar schief im
   Raster (Ansage Neo 18.09.2026). Mittig gesetzt steht es da, wo der Blick
   beim Suchen hingeht. In der Crew-Leiste bleibt es vorn stehen. */
.tf-zelle > .tf-plus { align-self: center; margin: auto 0; }
.tf-plus-vorn{display:none}
.ck-tafel .tf-plus-vorn{display:flex}
.ck-tafel #tf-neu{display:none}

/* Das Cockpit ist die ÜBERSICHT, das Modul-Blatt der Arbeitsplatz
   (Ansage Neo 31.08.2026): Lohn, frei/Urlaub und die Zuständigkeit
   gehören ins Modul — im Cockpit überdeckten die Tasten sogar die Namen. */
.ck-tafel .tf-crewkopf > span{display:none}
.ck-tafel .tf-weg-taste{display:none}
.ck-tafel .tf-kv,.ck-tafel .tf-zaehler{display:none}
.ck-tafel{min-width:0;background: var(--bg-card, #fff);border:2px solid var(--cd-sage,var(--cd-sage, #9aaba6));
  border-radius: 0;padding:12px 14px 10px;display:flex;flex-direction:column}
.ck-tafel h3{margin:0 0 10px;font-family:var(--font-head,'Playfair Display',serif);
  font-size:1.05rem;font-weight:600;color: var(--cd-navy-text, #0f1f36))}
/* Die Tafel ist breiter als eine Bildschirmhälfte — sie schiebt sich in
   sich selbst, statt die Seite breiter zu machen. Die Höhe richtet sich
   nach den zwei Bändern daneben; was darunter liegt, wird gerollt. */
.ck-tafel{min-height:0;max-height:100%;overflow:hidden}
/* Gerollt wird im Halter #ck-tafel-flaeche — das ist das Flex-Kind der
   Kachel. #tf-flaeche ist nur die Hülle DARIN; wer dem die Rolle gibt,
   rollt nichts, und die Tafel wächst unter den Schirmrand
   (Fund 31.08.2026 nach dem Aufklappen des Weinbergs). */
.ck-tafel #ck-tafel-flaeche{overflow:auto;min-height:0;flex:1 1 auto}
/* Im Cockpit sind die Spalten deutlich schmaler: Sieben Tage auf einer
   halben Bildschirmbreite. Was dann noch übersteht, schiebt sich in sich
   selbst — die Seite wird davon nicht breiter. */
.ck-tafel .tafel{grid-template-columns:5.6rem repeat(7,minmax(4rem,1fr)) !important;
  min-width:0}
.ck-tafel .tf-zeilenkopf{font-size:.78rem;padding:.5rem .5rem}
.ck-tafel .tf-zelle{padding:4px}
.ck-tafel .tf-block{font-size:.7rem}
/* Die Steuerung bleibt EINE Zeile: Im Cockpit genügen Woche vor, Woche
   zurück und „Diese Woche" — Monatssprünge und Datumsfeld stehen im Blatt
   „Tafel", wo Platz dafür ist. */
.ck-tafel .tf-steuer{flex-wrap:nowrap;gap:6px;align-items:center}
.ck-tafel .tf-steuer strong{font-size:.82rem;white-space:nowrap}
.ck-tafel .tf-steuer button{font-size:.78rem;padding:6px 10px}
/* Die Monatspfeile bleiben seit 20.09.2026 sichtbar: Im Cockpit steht
   jetzt ein MONAT, und ohne sie käme man nicht aus ihm heraus. */
.ck-tafel .tf-hinweis,.ck-tafel .tf-sprung,.ck-tafel .unterzeile{display:none}
/* Die Personenreihe kompakt — sie ist hier ein Griff, keine Liste. */
/* Die Personenreihe bleibt EINE Zeile und schiebt sich seitlich — drei
   Reihen Namen über der Tafel fressen die halbe Höhe (31.08.2026). */
.ck-tafel .tf-pool{gap:5px 6px;padding:7px 9px;flex-wrap:wrap;overflow:visible}
.ck-tafel .tf-pool > *{flex:0 0 auto}
.ck-tafel .tf-pool .tf-person{font-size:.8rem;padding:4px 9px;gap:5px}
/* Im Cockpit die Kurzform, sonst passen sechs Namen nicht nebeneinander. */
.ck-tafel .tf-pool .tf-personname{display:inline}
.ck-tafel .tf-pool .tf-personvoll{display:none}
.ck-tafel .tf-pool .tf-person small{display:none}
.ck-tafel .tf-zeilenkopf{font-size:.72rem;line-height:1.2}

@media (max-width: 1100px){
  .ck-zwei{grid-template-columns:1fr}
}

/* Der Startfehler: ein Satz, ein Knopf, die Nummer klein darunter. */
.start-fehler{max-width:34rem;text-align:center;padding:0 1.5rem}
.start-fehler h2{font-family:var(--font-head,'Playfair Display',serif);
  font-size:1.35rem;font-weight:600;color: var(--cd-navy-text, #0f1f36));margin:0 0 .6rem}
.start-fehler p{margin:0 0 1.2rem;color:var(--text-muted,#64748b)}
.start-fehler button{font:inherit;font-size:.9rem;padding:11px 22px;border-radius: 0;
  border:1px solid var(--cd-navy,var(--cd-navy, #0f1f36));background:var(--cd-navy,var(--cd-navy, #0f1f36));
  color:#fff;cursor:pointer}
.start-fehler button:hover{background:#1a3054}
.start-fehler-code{display:block;margin-top:1rem;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted,#94a3b8)}

/* Demo-Zugang: gesperrter Bereich (01.09.2026) */
/* Die Sperr-Tafel der Demo — eine Einladung, kein Verbotsschild
   (Ansage 03.09.2026: „nicht zu plump, wir wollen ja verkaufen"). Farben
   kommen aus der Betriebsmarke (--accent/--bg-primary), nicht fest. */
.demo-sperre{max-width:30rem;margin:12vh auto 3rem;text-align:center;
  padding:clamp(2rem,5vw,3rem) clamp(1.4rem,4vw,2.4rem);
  background:var(--bg-primary,#fff);border:1px solid var(--cd-sage-bg-strong,rgba(0,0,0,.12));
  border-radius: 0;box-shadow:0 18px 50px rgba(0,0,0,.08)}
.demo-sperre .siegel{width:44px;height:44px;margin:0 auto 1.1rem;border-radius:50%;
  border:1.5px solid var(--accent,#a0341a);display:flex;align-items:center;
  justify-content:center;color:var(--accent,#a0341a)}
.demo-sperre h2{margin-bottom:.7rem;font-size:1.35rem;line-height:1.3}
.demo-sperre p{color:var(--text-muted,#64748b);font-size:.95rem;line-height:1.65;
  max-width:26rem;margin:0 auto .5rem}
.demo-sperre .demo-termin{display:inline-block;margin-top:1.1rem;padding:.8rem 1.5rem;
  background:var(--accent,#a0341a);color:#fff;border-radius: 0;font-weight:600;
  font-size:.95rem;text-decoration:none}
.demo-sperre .demo-termin:hover{filter:brightness(1.12)}
.demo-sperre .demo-leise{display:block;margin-top:.9rem;font-size:.85rem;
  color:var(--text-muted,#64748b);text-decoration:underline;text-underline-offset:3px}
.demo-sperre .demo-leise:hover{color:var(--accent,#a0341a)}
.demo-kosten-frage{display:inline-block;margin-top:1.4rem;border:0;background:none;
  padding:0;cursor:pointer;font:inherit;font-size:.8rem;color:var(--text-muted,#64748b);
  text-decoration:underline dotted;text-underline-offset:3px}
.demo-kosten-frage:hover{color:var(--accent,#a0341a)}
.demo-kosten{margin-top:.9rem;padding:1rem 1.1rem;text-align:left;
  border:1px solid var(--cd-sage-bg-strong,rgba(0,0,0,.12));border-radius: 0;
  background:var(--cd-sage-bg,rgba(0,0,0,.03))}
.demo-kosten p{font-size:.85rem;line-height:1.6;margin:0 0 .5rem}
.demo-kosten p:last-child{margin-bottom:0}
.demo-kosten a{color:var(--accent,#a0341a)}

/* ── Gastfelder (03.09.2026): Beschriftung im Feld, 56 px hoch, wie auf der Hofseite ── */
.gastfelder { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gastfeld { display: block; position: relative; }
.gastfeld span { position: absolute; left: .8rem; top: .5rem; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); pointer-events: none; }
.gastfeld input { height: 56px; padding: 1.35rem .8rem .5rem; font-size: 1rem; }

/* Kein Kursiv, nirgends (Ansage 03.09.2026) */
em, i, cite, dfn, address { font-style: normal; }

/* Kein Kursiv, nirgends — Ansage 03.09.2026, Wächter: kursiv-guard.sh */
*,*::before,*::after{font-style:normal!important}

/* ══ HILFE-MODUS (03.09.2026) ═══════════════════════════════════════════
   Eigenständig in konsole.css, weil die Konsole die volle zcore.css NICHT
   lädt (nur Ausschnitte). Optik wie die geteilte ZiaCoreUI-Hilfe: erklärte
   Felder bekommen im Hilfe-Modus einen gestrichelten Rahmen im Akzent, ein
   Tipp öffnet die Karte. Farben aus den Theme-Variablen — folgt Hell/Dunkel. */
/* Seit 23.09.2026 hat JEDES Feld seine Hilfe — ein Dauerrahmen um alle
   wäre ein Gitter über dem ganzen Schirm. Der Rahmen erscheint deshalb
   unter dem Zeiger, die Zeigerhand wird überall zum Fragezeichen. */
body.help-mode-active #app :is(button, a[href], input, select, textarea, summary,
  [role=button], [role=tab], [data-help], [data-tab], [data-register], [data-bericht]),
body.help-mode-active #seitenpanel :is(button, a[href], input, select, textarea, summary,
  [role=button], [data-help]),
body.help-mode-active [style*="cursor: pointer"] { cursor: help !important; }
body.help-mode-active #app :is(button, a[href], input, select, textarea, summary,
  [role=button], [role=tab], [data-help], [data-tab], [data-register], [data-bericht]):hover,
body.help-mode-active #seitenpanel :is(button, a[href], input, select, textarea, summary,
  [role=button], [data-help]):hover {
  outline: 2px dashed var(--accent, var(--cd-sage, #9aaba6)) !important;
  outline-offset: 2px;
}
#ft-hilfe.help-active { background: var(--accent, var(--cd-rost, #a0341a)); color: #fff; }

.help-tooltip-card {
  position: fixed; z-index: 10000; background: var(--bg-card, #fff);
  border: 1px solid var(--border, rgba(154,171,166,.65)); border-radius: 0;
  box-shadow: 0 20px 50px rgba(0,0,0,.22); max-width: 380px; min-width: 300px;
  overflow: hidden; animation: hilfeAuf .22s ease;
}
@keyframes hilfeAuf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.help-tooltip-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: var(--cd-navy, #0f1f36); color: #fff;
}
.help-tooltip-header h4 { flex: 1; margin: 0; font-size: 1rem; font-weight: 600;
  color: #fff; font-family: 'Playfair Display', serif; }
.help-tooltip-close {
  width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.2); color: #fff; font-size: 1.1rem; line-height: 1;
}
.help-tooltip-close:hover { background: rgba(255,255,255,.32); }
.help-tooltip-body { padding: 18px; }
.help-tooltip-section { margin-bottom: 14px; }
.help-tooltip-section:last-child { margin-bottom: 0; }
.help-tooltip-section h5 {
  margin: 0 0 6px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent, var(--cd-sage, #7a8f89));
}
.help-tooltip-section p { margin: 0; font-size: .9rem; line-height: 1.55;
  color: var(--text, #2d3748); }
.help-tooltip-section p b { color: var(--cd-navy-text, var(--cd-navy, #0f1f36)); }
.help-tooltip-tips { display: flex; flex-direction: column; gap: 7px; }
.help-tooltip-tip { display: flex; gap: 8px; font-size: .85rem; line-height: 1.45;
  color: var(--text, #2d3748); }
.help-tooltip-tip::before { content: '•'; color: var(--accent, var(--cd-sage)); }

/* Zeichen je Person (Form + Farbe, 04.09.2026) — dasselbe wie in der App */
.pz { display: inline-block; vertical-align: -2px; margin-right: 5px; flex: 0 0 auto; }
.tf-chip .pz { filter: brightness(0) invert(1); }

/* Erledigt-Marken und Beobachtungen (04.09.2026) */
.tf-erledigt { display: inline-block; margin-left: 6px; font-size: .64rem; color: #3d9970; font-weight: 600; }
.ok { color: #3d9970; font-weight: 500; }
tr.blass td { opacity: .55; }
button.leise.klein { padding: 2px 8px; font-size: .8rem; margin-left: 4px; }

/* Griffe am Tischblock der Tafel und kleine Zeilenknöpfe (04.09.2026) */
.tf-griffe { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.tf-griffe button { font-size: .62rem; padding: 1px 6px; }
tr.gewaehlt td { background: var(--bg-input, #f7fafc); }

/* Heute-offen-Zeile (Stufe A9, 08.09.2026): im Cockpit über den Aufgaben,
   im Blatt Öffnungszeiten als eigener Kasten. */
.heute-offen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.heute-offen.klein { margin: 0 0 8px; padding: 6px 10px; border: 2px solid #9aaba6; border-radius: 0; background: var(--bg-card, #fff); }
.heute-offen .ho-punkt { width: 10px; height: 10px; border-radius: 50%; background: #9aaba6; flex: 0 0 auto; }
.heute-offen .ho-punkt.an { background: #2f855a; }
.heute-offen .ho-wort { flex: 1 1 auto; min-width: 140px; }
.heute-offen input[type="time"] { width: auto; padding: 4px 6px; }

/* ── Sprechen am Schreibtisch und Diktieren (08.09.2026) ─────────────── */
.sprech-hdr { display: inline-flex; align-items: center; gap: 6px; }
.sprech-hdr svg { width: 14px; height: 14px; }
.sprech-hdr.laeuft { background: var(--cd-rust, #a0341a); border-color: var(--cd-rust, #a0341a); }
.sprech-dialog { max-width: 560px; max-height: 92vh; overflow: auto; }
.sprech-ziel { margin: 0 0 .5rem; font-weight: 600; color: var(--cd-navy-text, #0f1f36); font-size: 1.05rem; }
.sprech-mitschrift { background: var(--bg-card, #fff); border: 2px solid var(--cd-sage, #9aaba6); border-radius: 0;
  padding: .9rem 1rem; min-height: 4.2rem; font-size: 1.02rem; line-height: 1.5; color: var(--cd-navy-text, #0f1f36); }
.sprech-mitschrift.leer { color: var(--text-muted, #6b7280); }
.sprech-mitschrift .sprech-leer { margin: .5rem 0 0; color: var(--cd-rust, #a0341a); }
.sprech-fertig { display: block; width: 100%; margin: .8rem 0; padding: .85rem; border: none; border-radius: 0;
  background: var(--cd-navy, #0f1f36); color: #fff; font-family: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; }
.sprech-fertig.laeuft { background: var(--cd-rust, #a0341a); }
.sprech-wohin { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.sprech-wohin[hidden] { display: none; }
.sprech-wohin .frage { flex: 1 1 100%; margin: 0 0 .2rem; font-weight: 600; color: var(--cd-navy-text, #0f1f36); }
.sprech-entwurf h4 { margin: .4rem 0 .2rem; font-family: 'Playfair Display', serif; font-weight: 600; }
.sprech-felder { display: grid; gap: .45rem; margin: .5rem 0; }
.sprech-felder label { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: .6rem; font-size: .9rem; }
.sprech-felder input { padding: .45rem .6rem; border: 2px solid var(--cd-sage, #9aaba6); font-family: inherit; font-size: .95rem; }
.sprech-hinweis { margin: .6rem 0 0; color: var(--text-muted, #6b7280); }
.diktat-halter { position: relative; display: block; }
.diktat-halter textarea { width: 100%; box-sizing: border-box; padding-right: 2.4rem; }
.diktat-taste { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--cd-sage, #9aaba6); border-radius: 50%; background: var(--bg-card, #fff); color: var(--cd-navy-text, #0f1f36);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.diktat-taste svg { width: 15px; height: 15px; }
.diktat-taste:hover { background: var(--bg-hover, #f1f5f9); }
.diktat-taste.laeuft { background: var(--cd-rust, #a0341a); border-color: var(--cd-rust, #a0341a); color: #fff; }

/* ── Chronik (08.09.2026) ─────────────────────────────────────────── */
.chr-leiste { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0 0 1rem; }
.chr-zeitraum, .chr-arten { display: flex; flex-wrap: wrap; gap: .35rem; }
.leise.klein.an { background: var(--cd-navy, #0f1f36); color: #fff;
  border-color: var(--cd-navy, #0f1f36); }
table.chronik td.chr-rechts, table.chronik th.chr-rechts { text-align: right; }
.chr-wann { white-space: nowrap; color: var(--text-muted, #6b7280); font-size: .82rem; }
.chr-art { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cd-navy-text, #0f1f36); font-weight: 500; white-space: nowrap; }
/* Die Marke steht IMMER unter dem Vorgang — inline brach sie je nach Wortlänge
   mal um und mal nicht, die Spalte sah dadurch unsortiert aus (08.09.2026). */
.chr-gesagt { display: inline-block; margin-top: .15rem; padding: 0 .3rem;
  border: 1px solid var(--cd-sage, #9aaba6); border-radius: 0;
  font-size: .68rem; color: var(--text-muted, #6b7280); }
.chr-wortlaut { display: block; margin-top: .15rem; font-size: .8rem;
  color: var(--text-muted, #6b7280); }
.chr-wer { white-space: nowrap; font-size: .85rem; color: var(--text-muted, #6b7280); }
.chr-fest { font-size: .75rem; color: var(--cd-rust, #a0341a); }

/* Stufe C6 (08.09.2026): Unverträglichkeiten in der Buchungsliste, Rostrot auf hell. */
.allergie { color: var(--rostrot, #a0341a); font-size: .8rem; font-weight: 500; }

/* Sprachwahl im Kopf (09.09.2026): gleiche Bauart wie die Rollenwahl, nur
   schmaler — das Kürzel steht im Knopf, der volle Name in der Liste. */
#sprach-halter .vm-hdr-role-btn { padding: 6px 10px; letter-spacing: .04em; }
#sprach-halter .vm-hdr-role-dropdown { min-width: 160px; right: auto; left: 0; }
#sprach-halter .sprachkuerzel {
  display: inline-block; min-width: 2.1em; font-weight: 600;
  color: var(--cd-navy-text, #0f1f36); letter-spacing: .04em;
}

/* ── Drei Stufen mit Deckel (09.09.2026): Hof · Hof und Gäste · Alles ─────────
   Dieselbe Bauform wie die Modulkacheln, nur breiter, mit Satz und Taste. */
.stufe-raster {
  display: grid; gap: 10px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.stufe-karte {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-card, #fff);
  border: 2px solid var(--cd-sage, #9aaba6); border-radius: 0; overflow: hidden;
}
.stufe-karte.an { border-color: var(--cd-navy, #0f1f36); box-shadow: 0 6px 18px rgba(15, 31, 54, .12); }
.stufe-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 12px; background: var(--cd-navy, #0f1f36); color: #fff;
}
.stufe-kopf strong { font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; font-weight: 600; }
.stufe-preis { font-size: .8rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; color: rgba(255,255,255,.85); }
.stufe-satz { flex: 1; margin: 0; padding: 10px 12px 6px; font-size: .84rem; line-height: 1.45; color: var(--text-secondary, #4a5568); }
.stufe-tasten { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 12px; }
.stufe-gewaehlt { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cd-sage, #9aaba6); }
.stufe-tasten .tat[disabled] { opacity: .5; cursor: not-allowed; }


/* ── Handy mit fester Seitenbreite ───────────────────────────────────
   Gesetzt von konsole/index.html, sobald die kurze Bildschirmseite unter
   900 px liegt. Das Cockpit ist für genau EINE Bildschirmhöhe gebaut
   (.content-body:has(.cockpit-raster) { overflow: hidden }) — am Handy war
   damit alles unterhalb der ersten Seite unerreichbar, Wischen tat nichts
   (Befund 11.09.2026, Querformat). Hier wächst die Seite stattdessen nach
   unten und scrollt als Ganzes, so wie man es am Handy erwartet.
   Die Rechner-Ansicht ist nicht betroffen: ohne die Kennzeichnung greift
   keine dieser Regeln. */
html.handy-festbreite .app-schale { height: auto; min-height: 100vh; overflow: visible; }
html.handy-festbreite .main-content { overflow: visible; }
html.handy-festbreite .content-body,
html.handy-festbreite .content-body:has(.cockpit-raster) { overflow: visible; height: auto; }
html.handy-festbreite .cockpit-raster { height: auto; }


/* ══════════════════════════════════════════════════════════════════════
   GUTSBÜRO IM CORPORATE DER STARTSEITE — abgenommener Entwurf 12.09.2026
   (tenants/vino/entwurf-design-2026-09-12/entwuerfe/corporate-gutsbuero/
   desk.html, desk.png, LIES.md)

   Die Farbrollen des Hauses, nicht mehr die Farben des Betriebs: Navy
   #0f1f36 trägt Kopfleiste und Kennzahlen, Salbei #9aaba6 ist Label auf
   Navy und die Marke DEMO, Rostrot #a0341a gehört allein dem Knopf
   „Sprechen" und dem Wort „dringend", Grün #276749 dem „heute"/„neu seit
   gestern" und dem Statuspunkt, Amber kommt nicht mehr vor.

   Dieser Block steht bewusst am ENDE der Datei: Er überschreibt die älteren
   Regeln, ohne sie zu zerschneiden. Darüber gilt weiter, was für die Module
   gebaut wurde.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 Kopfleiste ─────────────────────────────────────────────────────
   Ein gefüllter Knopf, sonst nur Text. Das aktive Blatt trägt einen
   Salbei-Unterstrich statt eines hellen Kastens — sechs Kästen nebeneinander
   lasen sich wie sechs gleich wichtige Knöpfe. */
.content-header { background: #0f1f36; }
.titel-guts {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: .005em;
}
.content-header-actions { gap: 2px; }
.content-header-actions .vm-hdr-btn,
.content-header-actions .vm-hdr-role-btn,
.content-header-actions select {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px; border-radius: 0;
  background: transparent; border: 0; box-shadow: none;
  color: #f7fafc; font-size: 14px; font-weight: 400;
}
.content-header-actions select { padding-right: 6px; }
.content-header-actions .vm-hdr-btn:hover,
.content-header-actions .vm-hdr-role-btn:hover,
.content-header-actions select:hover { background: rgba(255,255,255,.10); }
.content-header-actions .vm-hdr-role-btn svg,
.content-header-actions .vm-hdr-btn svg { color: #c5cdd8; stroke: currentColor; }
.content-header-actions .vm-hdr-btn.active {
  position: relative; background: transparent; border: 0;
  color: #fff; font-weight: 600;
}
.content-header-actions .vm-hdr-btn.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; border-radius: 0; background: #9aaba6;
}
/* Sprechen ist der EINE gefüllte Knopf — Rostrot auf Navy, 7,0:1. */
.content-header-actions #vm-sprechen,
.content-header-actions #vm-sprechen.active,
.content-header-actions #vm-sprechen.laeuft {
  background: #a0341a; border: 0; color: #fff; font-weight: 600;
  padding: 0 16px; margin: 0 8px;
}
.content-header-actions #vm-sprechen:hover { background: #8b2d17; }
.content-header-actions #vm-sprechen::after { content: none; }
.content-header-actions #vm-sprechen svg { color: #fff; width: 18px; height: 18px; }
/* DEMO: Marke in Salbei, keine Kapsel mehr. */
.content-header-actions .data-mode-toggle {
  height: 24px; padding: 0 8px; margin-left: 8px; gap: 6px;
  border-radius: 0; background: transparent; border: 1px solid #9aaba6;
}
.content-header-actions .data-mode-toggle:hover { background: rgba(154,171,166,.16); }
.content-header-actions .data-mode-label {
  color: #9aaba6; font-size: 12px; letter-spacing: .08em;
}
.content-header-actions .data-mode-dot { width: 6px; height: 6px; box-shadow: none; }
.content-header-actions .data-mode-dot.demo { background: #9aaba6; box-shadow: none; }
.sidebar { border-right: 1px solid #e2e8f0; }

/* ── 2 Die vier Kennzahlen ────────────────────────────────────────────
   Navy statt Grüngrau, kein Kreis-Dekor, und die Reihenfolge stimmt jetzt:
   erst das Label in Salbei, dann die Zahl in Poppins (nicht in Playfair —
   eine Serifenziffer in 28 px liest sich als Überschrift, nicht als Wert),
   zuletzt die Erklärzeile. */
.cockpit-raster .cockpit-kpi-strip { gap: 12px; }
.cockpit-raster .cockpit-kpi {
  display: flex; flex-direction: column; gap: 2px;
  background: #0f1f36; border: 0; border-radius: 0;
  padding: 10px 18px; min-height: 78px;
}
.cockpit-raster .cockpit-kpi::after { content: none; }
.cockpit-raster .cockpit-kpi .kpi-label {
  margin: 0; color: #9aaba6; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; line-height: 16px;
}
.cockpit-raster .cockpit-kpi .kpi-value {
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 28px; font-weight: 600; line-height: 34px;
  letter-spacing: -.01em; color: #fff;
}
.cockpit-raster .cockpit-kpi .kpi-trend {
  margin: 0; color: #c9d3e0; font-size: 14px; line-height: 19px;
}

/* ── 3 Die Statuszeile mit Uhrzeit ───────────────────────────────────
   Haarlinie statt 2-px-Salbei, und der Knopf heißt, was er tut. */
.ck-tun .heute-offen.klein {
  margin: 0 0 8px; padding: 0 8px 0 16px; height: 38px; gap: 10px;
  border: 1px solid #e2e8f0; border-radius: 0; background: var(--bg-card, #fff);
  flex-wrap: nowrap;
}
.ck-tun .heute-offen.klein .ho-punkt { width: 8px; height: 8px; background: #276749; }
.ck-tun .heute-offen.klein .ho-wort { font-size: 14px; color: var(--cd-navy-text, #0f1f36); }
.ck-tun .heute-offen.klein [data-ho-bis] {
  height: 32px; width: auto; margin: 0; padding: 0 10px;
  border: 1px solid #e2e8f0; border-radius: 0; background: var(--bg-card, #fff);
  color: var(--cd-navy-text, #0f1f36); font-family: inherit; font-size: 14px; font-weight: 600;
  font-variant-numeric:lining-nums tabular-nums;
}
.ck-tun .heute-offen.klein .tat.klein,
.ck-tun .heute-offen.klein .leise.klein {
  height: 32px; margin: 0; padding: 0 12px;
  border: 1px solid #e2e8f0; border-radius: 0; background: var(--bg-card, #fff);
  color: var(--cd-navy-text, #0f1f36); font-size: 14px; font-weight: 600;
}
.ck-tun .heute-offen.klein .tat.klein:hover,
.ck-tun .heute-offen.klein .leise.klein:hover { background: var(--bg-input, #f7fafc); }

/* ── 4 Der Arbeitsvorrat: eine Liste in EINEM Blatt ──────────────────
   Zehn einzeln gerahmte Kärtchen mit Ampelpunkt und blassem Wappen waren
   zehn Plakate. Jetzt trennt eine Haarlinie, die Farbe sitzt als 3-px-Kante
   links, und der Text bekommt so viele Zeilen, wie er braucht — abgeschnitten
   ist eine Aufgabe keine Aufgabe mehr. */
/* ── Der Arbeitsvorrat als Rondell (Ansage Neo 13.09.2026) ──────────
   „Wenn es mehrere gibt, die die Zeile zu einem Umbruch zwingen, dann möchte
   ich, dass das so wie ein Rondell ist — links und rechts scrollen, aber
   nicht eine zweite Zeile, weil ich möchte, dass alles auf einer Seite ohne
   Scroll ist."
   Also: EINE Zeile, waagerecht scrollbar, mit zwei Pfeilen. Die Kacheln
   behalten ihre Breite (230 px), sie werden nicht gequetscht — wer sieben
   Aufgaben hat, sieht fünf und scrollt zu den anderen. Der Balken bleibt
   verborgen; die Pfeile erscheinen nur, wenn es wirklich mehr gibt als
   Platz. */
.tun-rondell { position: relative; }
.tun-raster {
  /* 16.09.2026: Jede Meldung ist eine eigene Karte, kein Tabellenfluss mehr.
     Vorher trennte eine 1-px-Fuge auf grauem Grund die Kacheln — das las
     sich als eine durchgehende Fläche. Jetzt tragen die Karten selbst den
     Rahmen und die Fase des Hauses. Alle Karten einer Reihe sind gleich
     hoch (stretch) — inhaltshohe Karten wirkten in der Reihe unruhig. */
  gap: 10px; background: none;
  border: 0; border-radius: 0;
  align-items: stretch;
  grid-auto-flow: column;
  /* 300 px, nicht 230 (13.09.2026 nachgemessen): Bei 230 wurde aus
     „PFLANZENSCHUTZ  dringend" ein „PFLANZENSCHU… dringend" — der Bereichsname
     ist die erste Information der Kachel und darf nicht abreissen. Bei wenigen
     Aufgaben dehnen sich die Kacheln über 1fr auf die volle Breite. */
  /* 16.09.2026: 210 statt 300 px — 30 % schmaler auf Ansage. Damit der
     Bereichsname dabei nicht abreisst (Fund 13.09.), darf der Kopf jetzt
     umbrechen und der Text drei Zeilen tragen. */
  grid-auto-columns: minmax(210px, 1fr);
  grid-template-columns: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tun-raster::-webkit-scrollbar { display: none; }
.tun-raster > .tun-kachel { scroll-snap-align: start; }
/* Die Pfeile: erst sichtbar, wenn in dieser Richtung noch etwas liegt.
   28 px rund wie der Einklapp-Knopf der Seitenleiste — eine Form im Haus. */
.tun-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--cd-sage, #9aaba6); background: var(--bg-card, #fff);
  color: var(--cd-navy-text, #0f1f36); cursor: pointer; z-index: 3;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(15, 31, 54, .18); padding: 0;
}
.tun-pfeil[data-mehr="ja"] { display: inline-flex; }
.tun-pfeil:hover { background: var(--bg-input, #f7fafc); }
.tun-pfeil svg { width: 14px; height: 14px; stroke: currentColor;
  fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tun-pfeil.links { left: -12px; }
.tun-pfeil.rechts { right: -12px; }
@media (prefers-reduced-motion: reduce) { .tun-raster { scroll-behavior: auto; } }
.tun-kachel {
  height: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px 11px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #9aaba6);
  transition: border-color .12s, background .12s;
}
.tun-kachel:hover {
  transform: none; box-shadow: none;
  background: var(--bg-card, #fff);
  border-color: var(--cd-navy, #0f1f36);
}
[data-theme="dark"] .tun-kachel:hover { border-color: var(--cd-sage, #b8c5c1); }
.tun-0, .tun-0:hover { }
.tun-1, .tun-1:hover, .tun-2, .tun-2:hover { }
.tun-kopf {
  display: flex; align-items: baseline; gap: 4px 8px; padding: 0;
  flex-wrap: wrap;
  background: transparent; font-size: 13px; line-height: 17px;
}
.tun-modul {
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted, #718096);
  /* Der Bereichsname schrumpft nicht — im Flex-Kopf gab die lange Frist
     („neu seit gestern") ihm sonst die Reste. */
  flex: 0 0 auto; white-space: nowrap;
}
/* 16.09.2026: Die Frist steht nicht mehr als Wort da („dringend",
   „neu seit gestern"), sondern als Punkt in der Farbe der Stufe — rot
   drängt, grün ist in Ordnung. Der Text bleibt im Markup stehen, damit
   Vorleseprogramme und der Mauszeiger ihn weiter finden; sichtbar ist
   nur der Punkt. Die Farbe kommt aus den Stufenregeln darunter, deshalb
   currentColor — eine Farbe, an einer Stelle gepflegt. */
.tun-frist {
  margin: 0 0 0 auto; align-self: center;
  flex: 0 0 auto; width: 10px; height: 10px;
  font-size: 0; line-height: 0; white-space: nowrap;
  color: var(--text-muted, #718096);
}
.tun-frist::before {
  content: ''; display: block; width: 10px; height: 10px;
  border-radius: 50%; background: currentColor;
}
.tun-0 .tun-frist { color: var(--rostrot, #a0341a); }
.tun-1 .tun-frist, .tun-2 .tun-frist { color: var(--gruen, #276749); }
.tun-text {
  font-size: 14px; line-height: 18px; font-weight: 400; color: var(--cd-navy-text, #0f1f36);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.tun-leer { font-size: 14px; color: var(--text-muted, #718096); }

/* ── 5 „Woher das Geld kommt": Balken statt Torte ────────────────────
   Sechs bunte Kuchenstücke standen neben Rostrot und Amber und täuschten
   eine Bedeutung vor. Jetzt: waagerechte Balken in Navy-Stufen, dunkel für
   den stärksten Weg, die Beträge rechts. */
.ck-wege .weg-koerper { display: block; flex: 1; min-height: 0; }
.ck-wege .weg-titel,
.ck-wege .weg-zeile {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 4.4rem 4.6rem;
}
.ck-wege .weg-titel {
  font-size: 13px; letter-spacing: .08em; color: var(--text-muted, #718096);
  padding-bottom: 4px; border-bottom: 0; margin-bottom: 0;
}
.ck-wege .weg-zeile {
  height: 25px; padding: 0; border-bottom: 0; border-top: 1px solid #e2e8f0;
}
.ck-wege .weg-spur { position: relative; display: block; height: 12px; }
.ck-wege .weg-balken { display: block; height: 12px; border-radius: 0; min-width: 3px; }
.ck-wege .weg-wort {
  font-size: 14px; font-weight: 400; color: var(--cd-navy-text, #0f1f36);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-wege .weg-umsatz { font-size: 14px; color: var(--cd-navy-text, #0f1f36); }
.ck-wege .weg-liter { font-size: 14px; font-weight: 600; color: var(--cd-navy-text, #0f1f36); }
.ck-wege .weg-liter.duenn { font-weight: 400; color: var(--text-muted, #718096); }
.ck-wege .weg-satz { font-size: 13px; line-height: 18px; color: var(--text-muted, #718096); }

/* ── 6 Die Woche ─────────────────────────────────────────────────────
   Heller Kopf statt Navy-Riegel, der heutige Tag als Navy-8-%-Fläche statt
   als rostroter Balken, die Dienste als Navy-8-%-Kästchen mit Navy-Schrift
   statt als schwarze Kästen. Die 8-%-Fläche steht als DECKENDE Mischung
   (#ecedef) da — durchscheinend liesse sie die Haarlinie des Rasters durch. */
.tafel { background: var(--bg-input, #f7fafc); border: 1px solid #e2e8f0; border-radius: 0; }
.tf-kopfzelle, .tf-tagkopf {
  background: var(--bg-input, #f7fafc); color: var(--cd-navy-text, #0f1f36);
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 13px; font-weight: 600;
}
.tf-tagkopf span { color: var(--text-muted, #718096); font-size: 13px; font-weight: 400; }
.tf-tagkopf.tf-heute { background: var(--bg-input, #f7fafc); color: var(--cd-navy-text, #0f1f36); }
.tf-zelle.tf-heute { background: var(--bg-input, #f7fafc); }
.tf-zeilenkopf { background: var(--bg-card, #fff); font-size: 13px; }
.tf-zelle.tf-crewkopf { background: var(--bg-card, #fff); }
.tf-zeilenkopf span { font-size: 13px; color: var(--text-muted, #718096); }
.tf-dienst {
  background: var(--bg-input, #f7fafc); color: var(--cd-navy-text, #0f1f36); font-weight: 400; font-size: 13px;
  border-radius: 0; padding: 3px 7px;
}
.tf-dienst:hover { background: #dfe2e7; color: var(--cd-navy-text, #0f1f36); }
.tf-block { font-size: 13px; border-radius: 0; }
.tf-block .tf-unten { font-size: 13px; color: var(--text-muted, #718096); }
.tf-chip { font-size: 13px; border-radius: 0; padding: 1px 7px; }
.tafel .tf-gruppe, .tafel .tf-gruppe:first-child {
  background: var(--bg-card, #fff); color: var(--cd-navy-text, #0f1f36); border-bottom: 1px solid #e2e8f0;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; margin-top: 0;
}
.tafel .tf-gruppe:hover { background: var(--bg-input, #f7fafc); }
.tafel .tf-gruppezahl { color: var(--text-muted, #718096); opacity: 1; }
.tafel .tf-gruppepfeil { opacity: .7; }
.tf-person { border: 1px solid #e2e8f0; border-radius: 0; }
.tf-crewwort { font-size: 13px; color: var(--text-muted, #718096); }

/* ── 7 Haarlinien statt 2-px-Salbei, Radien 4–6 px ───────────────────
   „Sehr kantig, sehr symmetrisch" bleibt — aber die Kante ist jetzt eine
   Linie und kein Band. */
.ck-feld, .ck-tafel {
  border: 1px solid #e2e8f0; border-radius: 0;
}
.ck-tafel h3, .ck-kopf h3 { font-size: 18px; }
.ck-hinweis { font-size: 14px; color: var(--text-muted, #718096); border-bottom-color: #cbd5e0; }
.ck-tafel .tf-steuer strong, .ck-tafel .tf-steuer button { font-size: 14px; }
.ck-tafel .tf-steuer button { border-radius: 0; }
.ck-tafel .tf-zeilenkopf { font-size: 13px; }
.ck-tafel .tf-block { font-size: 13px; }
.ck-tafel .tf-pool .tf-person { font-size: 14px; }

/* Die Reichweite: Navy für „bleibt liegen", Rostrot für „zu früh weg".
   Amber ist aus dem Gutsbüro verschwunden — es trug hier dieselbe Rolle wie
   Rostrot und war doch eine zweite Warnfarbe. */
.jl-fuell { background: #0f1f36; }
.jl-bleibt_liegen .jl-fuell { background: #0f1f36; }
.jl-bleibt_liegen .jl-urteil { color: var(--text-muted, #718096); font-weight: 400; }
.jl-zu_frueh .jl-fuell { background: #a0341a; }
.jl-zu_frueh .jl-urteil { color: var(--rostrot, #a0341a); font-weight: 600; }
.jl-achse .jl-tick, .jl-achse .jl-heute { font-size: 13px; }
.jl-achse .jl-tick { color: var(--text-muted, #718096); }
.jl-urteil, .jl-wann { font-size: 13px; color: var(--text-muted, #718096); }
.jl-jg { font-size: 13px; color: var(--text-muted, #718096); }
.jl-name b { font-size: 14px; }
.jl-spur { background: var(--bg-input, #f7fafc); border: 1px solid #e2e8f0; height: 8px; }

/* ── Nachzug 12.09.2026 nach dem ersten Bildschirmfoto ───────────────── */

/* Das Uhrfeld ist kein <input type="time"> mehr (siehe konsole.js): Der
   Browser schrieb dort „06:00 PM", sobald seine Oberfläche englisch war.
   Jetzt ein schmales Textfeld in deutscher Schreibweise. */
.ck-tun .heute-offen.klein [data-ho-bis],
.heute-offen.klein [data-ho-bis] {
  width: 4.6rem; text-align: center; letter-spacing: .02em;
}

/* Die Dienste standen über den Rand der Spalte hinaus und wurden bei
   „16:00–23:0" abgeschnitten. Als Block füllen sie die Zelle und bleiben
   ganz. */
.tf-dienst {
  display: block; text-align: center; letter-spacing: -.04em;
  padding: 4px 2px; margin: 0;
}
.tf-dienst + .tf-dienst { margin-top: 3px; }
.tf-dienst-weg { margin-left: .25rem; }

/* Marke und Name nebeneinander, nicht untereinander — im Entwurf steht der
   Name in EINER Zeile links neben seinem Zeichen. */
.ck-tafel .tf-zelle.tf-crewkopf {
  flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 7px; text-align: left; padding: 6px 8px;
}
/* Die Personenreihe ist ein Griff, kein Kasten: kein Rahmen darum. */
.ck-tafel .tf-pool {
  border: 0; padding: 0 0 2px; margin: 0 0 8px; background: transparent;
}
.tf-crewleiste { border: 1px solid #e2e8f0; border-radius: 0; }
.tf-pool { border: 1px solid #e2e8f0; border-radius: 0; }

/* Etwas mehr Platz für die Weine: Die Achse trägt jetzt 13-px-Marken und
   brauchte darunter keine 22 px Luft mehr. */
.jl-achse { margin-bottom: 16px; }

/* Das Kreuz am Dienst schob die Zeit über den Spaltenrand („15:00–22:0").
   Im Gutsbüro erscheint es beim Darüberfahren; auf dem Blatt „Die Woche"
   steht es weiter dauerhaft da, denn dort wird eingeteilt. */
.ck-tafel .tf-dienst .tf-dienst-weg { display: none; }
.ck-tafel .tf-dienst:hover .tf-dienst-weg { display: inline; }
/* Der Name gehört in EINE Zeile — 5,6 rem reichten für „Lena Hofmann" nicht. */
.ck-tafel .tafel { grid-template-columns: 8rem repeat(7, minmax(4rem, 1fr)) !important; }
/* Jede eingesparte Zeile ist ein Wein mehr, den man ohne Rollen sieht. */
.jl-achse { height: 14px; margin-bottom: 15px; }
.jl-zeile { padding: 3px 2px; }
/* Die Zelle gibt dem Dienst ihre Breite: Bei sieben Tagen auf einer halben
   Schirmbreite bleiben je Spalte rund 73 px — 6 px Polster ringsum liessen
   von der Zeitspanne zwei Ziffern am Rand stehen. */
.ck-tafel .tf-zelle { padding: 3px 1px; }
.ck-tafel .tf-dienst { padding: 4px 0; }

/* Der Arbeitsvorrat trägt seit dem Umbau zwei Reihen mit vollem Text — das
   kostet Höhe, und die geht der Reichweitenliste ab (gemessen 12.09.2026:
   Arbeitsvorrat 223 px statt 170, Reichweite 182 px statt 245). Also überall
   dort ein paar Pixel geholt, wo sie niemand vermisst: engere Zeilen in der
   Reichweite und im Geldblatt, weniger Polster in den Blättern. Die Liste
   bleibt rollbar und steht nach Dringlichkeit sortiert — oben die Weine,
   bei denen etwas zu entscheiden ist. */
.ck-feld { padding: 10px 14px 8px; }
.jl-zeile { padding: 2px 2px; }
.jl-name, .jl-name b { line-height: 1.25; }
.jl-urteil, .jl-wann, .jl-jg { line-height: 1.25; }
.ck-wege .weg-zeile { height: 23px; }

/* In der Heute-Spalte liegt Navy 8 % auf Navy 8 % — der Dienst verschwand
   in der Fläche. Dort eine Stufe dunkler. */
.tf-zelle.tf-heute .tf-dienst { background: #dfe2e7; }
.tf-zelle.tf-heute .tf-dienst:hover { background: #d2d7de; }


/* ============================================================
   15.09.2026 — Das Hofbüro folgt dem neuen Global-CSS.
   Vorher hatte es sein eigenes Vokabular und blieb deshalb beim
   alten Bild: Sage-Text im aktiven Menü, sechs Streifen am linken
   Rand, Tasten ohne Druckpunkt. Steht am Dateiende, damit es die
   Regeln oben schlägt.
   ============================================================ */

/* Kein farbiger Streifen links — der Zustand ist eine Fläche. */
.nav-group-header, .nav-subitem, .tf-block, .modul-karte, .aufgabe-karte {
  border-left-width: 0 !important;
}
.nav-group-header.active, .nav-subitem.active {
  background: var(--cd-navy, #0f1f36) !important;
  color: #fff !important;
  font-weight: 600;
}
.nav-group-header.active .nav-icon,
.nav-group-header.active svg,
.nav-subitem.active svg { color: var(--cd-sage, #9aaba6) !important;
  stroke: var(--cd-sage, #9aaba6) !important; }
[data-theme="dark"] .nav-group-header.active,
[data-theme="dark"] .nav-subitem.active {
  background: var(--cd-sage, #9aaba6) !important;
  color: #0f1f36 !important;
}
[data-theme="dark"] .nav-group-header.active .nav-icon,
[data-theme="dark"] .nav-group-header.active svg,
[data-theme="dark"] .nav-subitem.active svg { color: #0f1f36 !important;
  stroke: #0f1f36 !important; }

/* Die Haupttaste bekommt Verlauf und Druckpunkt wie im ZCore. */
.tat {
  background: linear-gradient(172deg, #1c3557, var(--cd-navy, #0f1f36));
  border: none;
  box-shadow: 0 2px 0 #061019;
  transition: background .15s, transform .08s, box-shadow .08s;
}
.tat:hover { background: linear-gradient(172deg, #24437a, #16294a); border: none; }
.tat:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,0); }
.leise:active, .vm-hdr-btn:active, .dm-action-btn:active { transform: translateY(1px); }
[data-theme="dark"] .tat {
  background: linear-gradient(172deg, #c4d0cc, #9aaba6);
  color: #0f1f36; box-shadow: 0 2px 0 #5f736e;
}
[data-theme="dark"] .tat:hover { background: linear-gradient(172deg, #d2dcd9, #a8b8b3); }

/* Tastatur sieht aus wie Maus. */
.tat:focus-visible, .leise:focus-visible, .vm-hdr-btn:focus-visible,
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--cd-navy, #0f1f36);
  outline-offset: 2px;
}
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] a:focus-visible { outline-color: var(--cd-sage, #9aaba6); }



/* Schrift auf Farbflächen: im Dunkeln trägt die Fläche, Navy schreibt.
   Weiß auf Sage ergibt 1,95:1, weiß auf Rostrot 3,0:1 — beides fällt durch. */
[data-theme="dark"] .badge-accent,
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .tun-punkt,
[data-theme="dark"] .marke-sage {
  color: #0f1f36 !important;
  font-weight: 600;
}
[data-theme="dark"] .btn-danger { background: #dd6c51 !important; }


/* ══ 15.09.2026 — Das Cockpit ist EIN Schirm, auch mit dem Ausschank-Streifen
   Ansage Neo: „Ich will, dass der Desktop, wenn ich im Cockpit bin, nicht zu
   scrollen ist, dass es ein Screen ist." Die Zeile „Heute nach den
   regelmässigen Zeiten … Ausschank eintragen" (heuteOffenZeile, konsole.js)
   kam über die Arbeitskacheln und kostet 46 px. Die holt sich das Blatt hier
   zurück, verteilt auf die zwei Bänder rechts — Schriftgrössen bleiben
   lesbar, es geht nur an Zeilenhöhe und Polster. Steht am DATEIENDE, weil die
   Detailmasse der Bänder weiter oben stehen und sonst gewinnen.  ══ */
@media (min-width: 62.001rem) and (max-height: 1000px) {
  /* Woher das Geld kommt: Zeilen 23 -> 20 px, Titelpolster weg.
     Sechs Wege = 18 px gespart, ohne dass eine Zahl kleiner wird. */
  .ck-wege .weg-zeile { height: 20px; }
  .ck-wege .weg-titel { padding-bottom: 2px; font-size: 12px; }
  .ck-wege .weg-satz { font-size: 12px; line-height: 16px; }
  .ck-feld { padding: 7px 12px 6px; }
  /* Der Ring daneben schrumpft mit, sonst bestimmt er allein die Höhe. */
  .ring-halter { flex-basis: clamp(96px, 20%, 124px); width: clamp(96px, 20%, 124px); }
  /* Der Streifen selbst: eine Zeile, dichter gesetzt. */
  .ck-tun .heute-offen.klein { padding: 4px 9px; margin: 0 0 6px; }
}


/* ══ DIE FASE ═══════════════════════════════════════════════════════════
   Ein Winkel, drei Größen — und die Größe richtet sich nach der Höhe des
   Elements, nicht nach seinem Namen. Chrome hat jede Klasse gerendert und
   ihre Höhe gemeldet: 31 Elemente sind bis 30 px hoch, 40 bis 56 px,
   16 darüber. Vorher trug der Demo-Schalter im Kopf (24 px hoch) dieselben
   14 px Fase wie eine Kachel — der Schnitt fraß die halbe Höhe, und die
   Kanten sahen ungleich aus.

   Die drei Werte stehen hier. Eine Änderung hier ändert alles.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --fase-weit: 14px;    /* Karten, Kacheln, Tafeln */
  --fase-mittel: 8px;   /* Tasten, Felder, Register */
  --fase-klein: 5px;    /* Marken, Chips, kleine Schalter */
}

@supports (corner-shape: bevel) {
  /* nach Höhe gemessen — weit */
  .card, .demo-kosten, .demo-sperre, .ka-kachel, .ka-leerhinweis,
  .ka-zahltaste, .kachel, .kasten, .modal, .sprech-mitschrift,
  .zc-sp-card, .zn-card, .zn-card-flat, .zn-content-scroll,
  /* Die Berichte standen in KEINER dieser Listen und trugen deshalb als
     einzige Fläche im Gutsbüro runde 6-px-Ecken (Ansage Neo 18.09.2026:
     „warum verwendest du unser Global CSS nicht"). Kacheln und Tafeln des
     Berichts sind weit, seine Tasten stehen unten bei mittel. */
  .br-zahl, .br-karte, .br-satz, .br-bild,
  .zn-stat {
    border-radius: var(--fase-weit) 0 var(--fase-weit) 0 !important;
    corner-shape: bevel !important;
  }

  /* nach Höhe gemessen — mittel, dazu alle Tasten und Felder */
  .aufgabe-karte, .blattregister, .btn, .btn-sm, .ck-feld,
  .ck-tafel, .cockpit-card-footer, .cockpit-kpi, .cockpit-stat, .dm-action-btn,
  .dm-mode-card, .entwurf-karte, .filtertaste, .hinweiskasten, .hofadresse,
  .ka-summen, .leise, .meldung, .mod-streifen, .mod-summe,
  .modal-footer, .re-lauf, .sidebar-footer, .sprech-fertig, .stilkarte,
  .stilproben, .tat, .tf-crewleiste, .tf-hakenliste, .tf-personkarte,
  .tf-pool, .tf-zelle, .vm-hdr-btn, .vm-hdr-role-btn, .wp-card-foot,
  .zc-sp-close, .zc-sp-radio, .zc-sp-textarea, .zn-card-footer, .zn-nav-item,
  .tun-kachel,
  /* Die Plus in den Tafelzellen sind <span>, kein <button> — der Klick geht
     auf die ganze Zelle. Seit die Fase am Elementtyp hängt (16.09.2026)
     fielen genau sie heraus und standen als einziges Eck kantig im Raster
     (Ansage Neo 18.09.2026). */
  .tf-plus,
  /* Die Tasten der Berichte: Register, Zeitraum, der Knopf im Satz und
     „Als PDF" (18.09.2026, siehe oben bei den Kacheln). */
  .br-reiter-knopf, .br-zeit-knopf, .br-tue, .br-blatt, .gb-reg-knopf,
  button:not([class*="dot"]):not([class*="zeichen"]):not(.rund),
  .btn, .tat, .leise, .taste, .knopf, [role="button"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea {
    border-radius: var(--fase-mittel) 0 var(--fase-mittel) 0 !important;
    corner-shape: bevel !important;
  }

  /* nach Höhe gemessen — klein */
  .abo-marke, .badge, .blatt, .chip, .cockpit-report-card-badge,
  .data-mode-toggle, .dialog-kasten, .dm-modal, .einlesfeld, .karte,
  .klein, .knopf, .kreis, .marke, .merker,
  .modul-karte, .nav-badge, .panel, .re-zustand, .rund,
  .sprech-felder, .sub-badge, .sucher, .tafel, .taste,
  .tf-chip, .tf-dienst, .tf-weg-taste, .wertknopf, .zc-badge-editable,
  .zc-sp-tabs,
  .btn-sm, .marke, .chip, .badge, .nav-badge, .sub-badge {
    border-radius: var(--fase-klein) 0 var(--fase-klein) 0 !important;
    corner-shape: bevel !important;
  }

  /* Was rund ist, bleibt rund */
  .avatar, .data-mode-dot, .modul-zeichen, .tf-person, .punkt,
  [class*="-dot"], [class*="spinner"], [class*="kreis"] {
    border-radius: 50% !important;
    corner-shape: round !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   KASTEN · PANEEL · STREIFEN — die drei Bausteine (KONZEPT 6f, 17.09.2026)

   Ansage Neo: „Das sind keine Kästchen, das ist unübersichtlich … Ich
   hätte gern, dass da dann das rechte Paneel aufgeht, und das gilt für
   alle anderen Sachen auch."

   Die Regel: Jedes Blatt ist eine Liste von Kästen. Jeder Kasten öffnet
   rechts das Paneel. Im Paneel steht alles, und im Paneel passiert alles.
   Kein Formular im Blatt, kein Dialog in der Mitte, kein Knopf in der
   Zeile außer dem Zustandswort.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Der Kasten ──────────────────────────────────────────────────
   Kein Raster mit 1-px-Linien mehr (so stand die Tafel da, so standen
   die Meldungen bis zum 16.09.). Echter Abstand, eigener Rahmen.
   `align-items: stretch` hält die Kästen einer Reihe gleich hoch. */
.kastenliste {
  display: grid; gap: 10px; align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  margin-bottom: 1rem;
}
.satz-kasten {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; width: 100%; min-width: 0;
  padding: 11px 13px;
  background: var(--bg-card, #fff);
  border: 2px solid var(--cd-sage, #9aaba6);
  border-radius: var(--fase-gross, 14px) 0 var(--fase-gross, 14px) 0;
  cursor: pointer; font: inherit; color: inherit;
  transition: border-color .12s, transform .12s;
}
@supports (corner-shape: bevel) { .satz-kasten { corner-shape: bevel; } }
.satz-kasten:hover { border-color: var(--cd-navy, #0f1f36); }
.satz-kasten:active { transform: translateY(1px); }
.satz-kasten:focus-visible {
  outline: 2px solid var(--cd-navy, #0f1f36); outline-offset: 2px;
}
/* Der Name: Playfair, Navy, eine Zeile — und er darf umbrechen, sonst
   schiebt ein langer Weinname den Kasten aus der Spalte. */
.sk-kopf {
  font-family: var(--font-head, 'Playfair Display', serif);
  font-size: .98rem; color: var(--text-heading, #0f1f36);
  line-height: 1.25; overflow-wrap: anywhere;
}
.sk-zeile { font-size: .78rem; color: var(--text-muted, #64748b); line-height: 1.4; }
.sk-zeile strong { color: var(--text-body, #1a202c); font-weight: 600; }
/* Das Zustandswort ist das EINZIGE, was aus der Liste heraus noch etwas
   sagt — getan wird alles im Paneel. */
.sk-fuss { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.sk-zustand {
  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--cd-sage, #9aaba6);
  color: var(--text-muted, #64748b);
  border-radius: var(--fase-klein, 5px) 0 var(--fase-klein, 5px) 0;
}
@supports (corner-shape: bevel) { .sk-zustand { corner-shape: bevel; } }
.sk-zustand.gut { border-color: var(--cd-navy, #0f1f36); color: var(--cd-navy, #0f1f36); }
.sk-zustand.warnt { border-color: var(--rostrot, #a0341a); color: var(--rostrot, #a0341a); }
.sk-punkt {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  background: var(--rostrot, #a0341a); flex: 0 0 auto;
}
.satz-kasten.blass { opacity: .55; }
/* Die Kopfzeile eines Blattes: links der eine Knopf „Neu", rechts die
   Filter. Ein Primärknopf je Ansicht. */
.blattkopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: .9rem;
}
.blattkopf .filterreihe { margin: 0; }

/* ── 2 · Das Paneel ──────────────────────────────────────────────────
   Die Hülle kommt aus zcore-cockpit.css (.zc-side-panel). Neu ist der
   Inhalt: Kopf, dann IMMER dieselben drei Abschnitte. */
.sp-satz { padding: 0 0 5rem; }
.sp-abschnitt { border-top: 1px solid var(--border-subtle, #e2e8f0); padding: 14px 0 4px; }
.sp-abschnitt:first-child { border-top: none; padding-top: 4px; }
.sp-abschnitt > h4 {
  margin: 0 0 9px; font-family: var(--font-head, 'Playfair Display', serif);
  font-size: .9rem; color: var(--text-heading, #0f1f36); font-weight: 600;
}
/* Angaben: Beschriftung links, Wert rechts, direkt tippbar. Gesichert
   wird beim Verlassen des Feldes — nie wieder ein leerer Änderungskasten. */
.sp-feld { display: grid; grid-template-columns: 8.5rem 1fr; gap: 8px; align-items: center; margin-bottom: 7px; }
.sp-feld > label { font-size: .8rem; color: var(--text-muted, #64748b); }
.sp-feld > input, .sp-feld > select, .sp-feld > textarea { width: 100%; min-width: 0; }
.sp-feld > .sp-fest { font-size: .88rem; color: var(--text-body, #1a202c); }
.sp-feld.gesichert > input, .sp-feld.gesichert > select {
  border-color: var(--cd-navy, #0f1f36);
}
/* Dazu: was dranhängt. Jede Zeile führt beim Klick dorthin. */
.sp-dazu { display: flex; flex-direction: column; gap: 1px; }
.sp-dazu-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 8px 10px; background: var(--bg-input, #f7fafc);
  border: 1px solid var(--border-subtle, #e2e8f0); cursor: pointer;
}
.sp-dazu-zeile:hover { border-color: var(--cd-sage, #9aaba6); }
.sp-dazu-zeile span:last-child { color: var(--text-muted, #64748b); font-size: .8rem; white-space: nowrap; }
.sp-dazu-leer { font-size: .82rem; color: var(--text-muted, #64748b); margin: 0; }
/* Tun: die Handlungen. Ein Primärknopf, der Rest Kontur. */
.sp-tun { display: flex; flex-wrap: wrap; gap: 7px; }
.sp-tun > button { flex: 0 0 auto; }
.sp-hinweis {
  font-size: .78rem; color: var(--text-muted, #64748b);
  margin: 8px 0 0; line-height: 1.45;
}

/* ── 3 · Der Streifen ────────────────────────────────────────────────
   Nach jeder Handlung unten: was passiert ist, und der Weg zurück.
   Acht Sekunden. Er ersetzt die Meldung für alles, was umkehrbar ist. */
.streifen {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 1200; display: flex; align-items: center; gap: 14px;
  max-width: min(92vw, 640px);
  padding: 11px 16px; background: var(--cd-navy, #0f1f36); color: #fff;
  font-size: .86rem; line-height: 1.35;
  border-radius: var(--fase-mittel, 8px) 0 var(--fase-mittel, 8px) 0;
  box-shadow: 0 6px 20px rgba(15, 31, 54, .28);
}
@supports (corner-shape: bevel) { .streifen { corner-shape: bevel; } }
.streifen[hidden] { display: none; }
.streifen-wort { flex: 1 1 auto; min-width: 0; }
.streifen-zurueck {
  flex: 0 0 auto; background: none; border: 1px solid rgba(255, 255, 255, .45);
  color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  padding: 5px 12px; border-radius: 0;
}
.streifen-zurueck:hover { background: rgba(255, 255, 255, .14); }
.streifen.fehler { background: var(--rostrot, #a0341a); }

/* Am Handy: Kästen einspaltig, Streifen über die ganze Breite. */
@media (max-width: 640px) {
  .kastenliste { grid-template-columns: 1fr; }
  .sp-feld { grid-template-columns: 1fr; gap: 3px; align-items: start; }
  .streifen { left: 12px; right: 12px; transform: none; max-width: none; }
}

/* Ist das Paneel offen, gehört dem Streifen nur noch die linke Hälfte —
   sonst liegt er halb darunter und der Weg zurück ist nicht zu sehen
   (beim ersten Prüflauf am 17.09.2026 gemessen). Ohne `:has()` bleibt er
   mittig; das ist kein Bruch, nur weniger schön. */
body:has(#seitenpanel.active) .streifen {
  left: calc((100vw - clamp(420px, 50vw, 860px)) / 2);
}
@media (max-width: 768px) {
  body:has(#seitenpanel.active) .streifen { left: 12px; }
}

/* ── Nachschliff am 17.09.2026 (Ansage Neo) ──────────────────────────
   Drei Punkte nach dem ersten Blick auf das neue Blatt Buchungen. */

/* 1 · Gleiche Breite. „Irgendwie ist mir das zu unruhig, wenn die
   unterschiedliche Breite haben." Achtundzwanzig verschieden breite
   Zustandswörter ergeben eine zappelige Wand — also bekommen sie alle
   dieselbe Breite, Text mittig. 8,6rem trägt das längste Wort
   („nicht erschienen") ohne Umbruch. */
.sk-zustand {
  min-width: 8.6rem; justify-content: center; text-align: center;
  display: inline-flex; align-items: center; box-sizing: border-box;
}
/* Die Filtertasten ebenso: gleiche Höhe, gleiche Mindestbreite, die Zahl
   immer an derselben Stelle. */
.filtertaste {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; box-sizing: border-box;
}

/* 2 · Die Zahl als Kreis — dieselbe Marke wie im Cockpit
   (`.aufgabe-zahl`, Zeile 240): rund, zwei Pixel Rand, fett. Rostrot
   trägt nur, was liegen bleibt; der Rest ist Navy. */
.filterzahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box;
  border: 2px solid var(--cd-navy, #0f1f36);
  border-radius: 50%; corner-shape: round;
  font-weight: 700; font-size: .76rem; line-height: 1;
}
.filterzahl.dringend {
  border-color: var(--rostrot, #a0341a); color: var(--rostrot, #a0341a);
}
/* Auf der dunklen Fläche der aktiven Taste dreht sich das um. */
.filtertaste.an .filterzahl { border-color: rgba(255, 255, 255, .55); color: #fff; }
/* Auf Navy trägt Rostrot nicht (2,0:1) — dort gilt der helle Zwilling
   #dd6c51 aus der Farbregel vom 14.09.2026. Amber ist seit demselben Tag
   aus dem Haus. */
.filtertaste.an .filterzahl.dringend { border-color: #dd6c51; color: #dd6c51; }

/* 3 · Im Dunkeln bleibt der Kreis lesbar. */
[data-theme="dark"] .filterzahl { border-color: var(--cd-sage, #9aaba6); }
[data-theme="dark"] .filterzahl.dringend {
  border-color: #dd6c51; color: #dd6c51;
}

/* ── Farben der Filterzahlen (Ansage Neo 17.09.2026) ─────────────────
   „Kommende könnte man in unserem Grün machen … für Storniert dann den
   Einser in Grau, ausgegraut."

   Gemessen (WCAG, gegen Weiß): Haus-Grün #3d9970 = 3,51:1. Für den Rand
   reicht das (Bedienelemente brauchen 3:1), für die kleine fette Ziffer
   nicht (die braucht 4,5:1). Deshalb trägt der RAND unser Grün, die
   ZIFFER eine Stufe dunkler: #2f7a58 = 5,19:1. Derselbe Ton, nur tiefer.
   Grau #64748b liegt bei 4,76:1 und darf beides. */
.filterzahl.gut {
  border-color: var(--status-success, #3d9970);
  color: #2f7a58;
}
.filterzahl.ruht {
  border-color: var(--text-muted, #64748b);
  color: var(--text-muted, #64748b);
  opacity: .75;
}
/* Auf der dunklen Fläche der aktiven Taste. */
.filtertaste.an .filterzahl.gut { border-color: #6fd0a0; color: #6fd0a0; }
.filtertaste.an .filterzahl.ruht { border-color: rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .75); }

/* Im Dunkelmodus liegt die Karte bei #12243f: dort trägt #3d9970 nur
   4,44:1 und Grau #64748b nur 3,27:1 — beide bekommen ihren hellen
   Zwilling (7,1:1 und 6,1:1). */
[data-theme="dark"] .filterzahl.gut { border-color: #5cc28f; color: #5cc28f; }
[data-theme="dark"] .filterzahl.ruht {
  border-color: #94a3b8; color: #94a3b8;
}

/* ── Die Tafel bekommt Kästen (KONZEPT 6f, 17.09.2026) ───────────────
   Ansage Neo: „Das sind keine Kästchen, das ist unübersichtlich … Ich
   finde es schrecklich, dass das nicht abgegrenzt ist."

   Das Raster stand auf `gap: 1px` über einem Sage-Grund — dieselbe
   Bauart, die am 16.09. schon bei den Cockpit-Meldungen wegmusste. Jetzt
   hat jede Zelle Abstand und jeder Block einen eigenen Rahmen. */
.tafel {
  gap: 4px !important;
  background: transparent !important;
  border: none !important;
  padding: 0;
}
.tf-zelle {
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: var(--fase-mittel, 8px) 0 var(--fase-mittel, 8px) 0;
}
@supports (corner-shape: bevel) { .tf-zelle { corner-shape: bevel; } }
/* Kopf- und Zeilenköpfe behalten ihre Farbe, bekommen aber dieselbe Form. */
.tf-kopfzelle, .tf-tagkopf, .tf-zeilenkopf { border-color: transparent; }
/* Jeder Block ist ein Kasten: eigener Rahmen, Fase, Druckpunkt beim Ziehen. */
.tafel .tf-block {
  border: 2px solid var(--cd-sage, #9aaba6) !important;
  border-radius: var(--fase-klein, 6px) 0 var(--fase-klein, 6px) 0;
  padding: 5px 7px;
  background: var(--bg-card, #fff);
}
@supports (corner-shape: bevel) { .tafel .tf-block { corner-shape: bevel; } }
.tafel .tf-block:hover { border-color: var(--cd-navy, #0f1f36) !important; }
/* Die Ampel sitzt jetzt am Rahmen, nicht als Fläche dahinter. */
.tafel .tf-block.ampel-gruen { border-color: var(--gruen, #3d9970) !important; }
.tafel .tf-block.ampel-knapp { border-color: #b5651d !important; }
.tafel .tf-block.ampel-voll { border-color: var(--rostrot, #a0341a) !important; }
/* Die Gruppenzeile trennt jetzt, statt eine Rasterlinie zu sein. */
.tafel .tf-gruppe { border-radius: var(--fase-klein, 6px) 0 0 0; }

/* Der Dienst ist auch ein Kasten — vorher eine randlose Navy-Pille, die
   im Raster verschwamm (17.09.2026). Jetzt Kontur auf Weiß, damit man
   sieht, wo einer anfängt und der nächste aufhört. */
.tafel .tf-dienst {
  display: inline-flex; align-items: center;
  background: var(--bg-card, #fff) !important;
  color: var(--cd-navy, #0f1f36) !important;
  border: 2px solid var(--cd-navy, #0f1f36);
  border-radius: var(--fase-klein, 6px) 0 var(--fase-klein, 6px) 0;
  padding: 3px 8px; font-size: .7rem;
}
@supports (corner-shape: bevel) { .tafel .tf-dienst { corner-shape: bevel; } }
.tafel .tf-dienst:hover {
  background: var(--cd-navy, #0f1f36) !important; color: #fff !important;
}
.tafel .tf-dienst-weg { opacity: .55; }
/* Abwesenheit (schraffiert) bekommt dieselbe Form. */
.tafel .tf-frei, .tafel .tf-abwesend {
  border: 2px dashed var(--cd-sage, #9aaba6);
  border-radius: var(--fase-klein, 6px) 0 var(--fase-klein, 6px) 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Die Berichte (KONZEPT 6g, 18.09.2026)

   Frage · Satz · Bild · Knopf. Die Farben kommen aus den Variablen des
   Corporate Design, damit Hell und Dunkel ohne zweite Liste stimmen. Kein
   Verlauf, keine Unschärfe, kein Kursiv (Farbregel 14.09.2026).
   ══════════════════════════════════════════════════════════════════════ */
.br-wurzel { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; }

/* Die Leiste: vier Berichte links, der Zeitraum rechts. */
.br-leiste {
  display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
  justify-content: space-between;
}
/* ══ Die zwei Register des Gutsbüros: Heute und Berichte (18.09.2026) ══
   Dieselbe Bauart wie die vier Register innerhalb der Berichte, damit man
   nicht zwei Arten von Registern lernen muss: gleich breit, Hauskante, das
   gewählte in Navy. Sie sitzen über dem Inhalt, nicht im Kopf — im Kopf
   stehen die zwei WELTEN (Module, Gutsbüro), hier die zwei Sichten auf
   dieselbe Welt. */
.gb-register {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; max-width: 520px; margin: 0 0 16px;
}
/* Im Cockpit ist der Inhaltsbereich ein Flex-Stapel für genau eine
   Bildschirmhöhe — ohne diese Zeile würde die Registerzeile gestaucht. */
.content-body:has(.cockpit-raster) > .gb-register { flex: none; }
.gb-register[hidden] { display: none; }
.gb-reg-knopf {
  display: block; width: 100%; padding: 9px 14px;
  border: 2px solid var(--border, #9aaba6); background: var(--bg-card, #fff);
  color: var(--text-primary, #1a202c); cursor: pointer;
  font-family: inherit; text-align: left; line-height: 1.2;
  transition: background .12s, border-color .12s;
}
.gb-reg-wort { display: block; font-weight: 650; font-size: .95rem; }
.gb-reg-frage {
  display: block; font-size: .72rem; margin-top: 1px;
  color: var(--text-muted, #718096);
}
.gb-reg-knopf.aktiv {
  background: var(--cd-navy, #0f1f36); border-color: var(--cd-navy, #0f1f36);
  color: #fff;
}
.gb-reg-knopf.aktiv .gb-reg-frage { color: var(--cd-sage, #9aaba6); }

/* Vier gleich breite Register (Ansage Neo 18.09.2026: „die Felder gleich
   breit machen, es ist immer so Unruhe drin"). Vorher wuchs jedes mit
   seinem Wort — „Geld" schmal, „Weinberg" breit, dazu vier Zeichen, die
   die Unruhe verdoppelten. Die FRAGE bleibt: sie ist der Grund, warum
   diese Register anders sind als eine Reiterzeile. */
.br-reiter {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; flex: 1 1 520px;
}
.br-reiter-knopf {
  display: block; width: 100%;
  padding: 9px 14px; border: 2px solid var(--border, #9aaba6);
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1a202c); cursor: pointer;
  font-family: inherit; text-align: left; line-height: 1.2;
  transition: background .12s, border-color .12s, transform .08s;
}
/* Die vier Zeichen (Kurve, Glas, Kopf, Säulen) sind gestrichen. Sie sagten
   nichts, was das Wort mit seiner Frage nicht schon sagt — und Zeichen
   kommen im Haus nur dorthin, wo sie ausdrücklich bestellt sind. */
.br-reiter-knopf svg { display: none; }
.br-reiter-wort { font-weight: 650; font-size: .95rem; display: block; }
.br-reiter-frage {
  display: block; font-size: .72rem; color: var(--text-muted, #718096);
  margin-top: 1px;
}
.br-reiter-knopf > span { display: block; }
.br-reiter-knopf:hover { transform: translateY(-1px); }
.br-reiter-knopf.aktiv {
  background: var(--cd-navy, #0f1f36); border-color: var(--cd-navy, #0f1f36);
  color: #fff;
}
.br-reiter-knopf.aktiv svg { stroke: var(--cd-sage, #9aaba6); }
.br-reiter-knopf.aktiv .br-reiter-frage { color: var(--cd-sage, #9aaba6); }

.br-zeit { display: flex; gap: 0; align-items: center; }
.br-zeit-knopf {
  padding: 9px 15px; border: 2px solid var(--border, #9aaba6);
  border-right-width: 0; background: var(--bg-card, #fff);
  color: var(--text-primary, #1a202c); cursor: pointer;
  font-family: inherit; font-size: .85rem; font-weight: 600;
}
/* Vorher waren die drei zu einem Block verschweisst, mit runden Ecken
   aussen. Das ist die einzige Stelle im Gutsbüro, die so gebaut war — und
   die Fase kann an einem verschweissten Block nicht sitzen. Jetzt drei
   eigene Tasten, jede mit der Hauskante, wie jede andere Taste auch. */
.br-zeit { gap: 6px; }
.br-zeit-knopf { border-right-width: 2px; }
.br-zeit-knopf.aktiv {
  background: var(--cd-navy, #0f1f36); border-color: var(--cd-navy, #0f1f36);
  color: #fff;
}
.br-zeit-knopf.aktiv + .br-zeit-knopf { border-left-color: var(--cd-navy, #0f1f36); }

/* Die Fläche rollt, die Leiste bleibt stehen. */
.br-flaeche {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; align-content: start; padding-right: 4px;
}

/* Die grossen Zahlen: aus zwei Metern lesbar, jede mit Vergleich. */
.br-zahlen {
  grid-column: 1 / -1; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.br-zahl {
  background: var(--bg-card, #fff); border: 2px solid var(--border, #9aaba6);
  padding: 12px 14px 11px;
}
.br-zahl-wert {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.8rem; font-weight: 700; line-height: 1.1;
  color: var(--cd-navy-text, #0f1f36);
  font-variant-numeric:lining-nums tabular-nums;
}
[data-theme="dark"] .br-zahl-wert { color: var(--text-primary, #e2e8f0); }
.br-zahl-wort {
  display: block; font-size: .8rem; margin-top: 3px;
  color: var(--text-muted, #718096);
}
.br-zahl-vergleich {
  display: block; font-size: .74rem; margin-top: 4px; font-weight: 600;
  color: var(--text-muted, #718096);
}
/* Die fünf Pixel Farbe am linken Rand sind weg (Ansage Neo 18.09.2026:
   „wir haben wieder links diese komischen Ränder, farblich markiert — das
   hat nichts mit unserem CSS mehr zu tun"). Sie brachen die Fase auf, denn
   ein dicker Rand auf einer Seite kann nicht angeschrägt sein, und sie
   erfanden eine vierte Kastenart neben Karte, Kachel und Tafel.
   Der Zustand steht weiter da, wo er hingehört: in der Vergleichszeile. */
.br-zahl.br-gut .br-zahl-vergleich { color: #276749; }
.br-zahl.br-warn .br-zahl-vergleich { color: #b7791f; }
.br-zahl.br-alarm .br-zahl-vergleich { color: var(--rostrot, #a0341a); }
[data-theme="dark"] .br-zahl.br-gut .br-zahl-vergleich { color: #5fae83; }
[data-theme="dark"] .br-zahl.br-alarm .br-zahl-vergleich { color: #dd6c51; }

/* Der Satz in Klartext, und der Knopf, der ihn erledigt. */
.br-satz {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px;
  justify-content: space-between;
  background: var(--cd-navy, #0f1f36);
  padding: 14px 18px;
}
.br-satz p {
  margin: 0; color: #fff; font-size: 1rem; line-height: 1.45;
  font-family: 'Playfair Display', Georgia, serif;
}
.br-tue {
  flex: none; padding: 10px 18px; border: none;
  background: var(--rostrot, #a0341a); color: #fff; cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 650;
  transition: filter .12s;
}
.br-tue:hover { filter: brightness(1.12); }

/* Eine Karte je Bild. */
.br-karte {
  background: var(--bg-card, #fff); border: 2px solid var(--border, #9aaba6);
  padding: 14px 16px 16px; min-width: 0;
}
.br-karte.br-breit { grid-column: 1 / -1; }
.br-kopf { margin-bottom: 10px; }
.br-kopf h3 {
  margin: 0; font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.02rem; font-weight: 700; color: var(--text-primary, #1a202c);
}
.br-frage {
  margin: 2px 0 0; font-size: .78rem; color: var(--text-muted, #718096);
}
.br-bild { width: 100%; }
.br-bild.br-eng { max-width: 340px; }
.br-svg { width: 100%; height: auto; display: block; overflow: visible; }
.br-fuss {
  margin: 8px 0 0; font-size: .74rem; color: var(--text-muted, #718096);
}
.br-leer {
  margin: 0; padding: 18px 0; font-size: .85rem; line-height: 1.5;
  color: var(--text-muted, #718096);
}

/* Schriftgrössen im Bild — eine Stufe kleiner als im Fliesstext, damit sie
   sich unterordnen, aber nie unter 10 px. */
.br-achse { font-size: 10px; font-family: 'Poppins', sans-serif; }
.br-name { font-size: 11.5px; font-family: 'Poppins', sans-serif; }
.br-wert {
  font-size: 11px; font-family: 'Poppins', sans-serif; font-weight: 600;
  font-variant-numeric:lining-nums tabular-nums;
}
.br-feldwort { font-size: 9.5px; font-family: 'Poppins', sans-serif; }
.br-punktname { font-size: 10px; font-family: 'Poppins', sans-serif; }
.br-trichterzahl {
  font-size: 12px; font-family: 'Poppins', sans-serif; font-weight: 650;
}
.br-saeule, .br-balken, .br-punkt { transition: fill-opacity .12s; }
.br-klick { cursor: pointer; }
.br-klick:hover { fill-opacity: 1; stroke-width: 2.4; }

.br-legende { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.br-leg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; color: var(--text-muted, #718096);
}
.br-leg i { width: 11px; height: 11px; border-radius: 0; display: block; }
.br-leg-linie i {
  height: 0; border-top: 2px dashed var(--text-muted, #718096);
  border-radius: 0; width: 14px;
}

/* Die schlafenden Kunden: zwei Zahlen und die Namen dazu. */
.br-schlaf { display: flex; gap: 18px; flex-wrap: wrap; }
.br-schlaf-zahlen {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  align-items: baseline; flex: 1; min-width: 190px;
}
.br-schlaf-zahl {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem;
  font-weight: 700; color: var(--rostrot, #a0341a); line-height: 1.1;
}
[data-theme="dark"] .br-schlaf-zahl { color: #dd6c51; }
.br-schlaf-zahl.br-navy { color: var(--cd-navy-text, #0f1f36); }
[data-theme="dark"] .br-schlaf-zahl.br-navy { color: var(--text-primary, #e2e8f0); }
.br-schlaf-zahlen span:not(.br-schlaf-zahl) {
  font-size: .78rem; color: var(--text-muted, #718096);
}
.br-schlaf-liste {
  list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px;
  max-height: 168px; overflow-y: auto;
}
.br-schlaf-liste li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0; font-size: .8rem;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.br-schlaf-liste li span:last-child {
  font-weight: 600; font-variant-numeric:lining-nums tabular-nums;
}

/* Schmales Fenster: alles untereinander. Die Zahlen bleiben zu zweit, vier
   nebeneinander wären unter 1100 px nicht mehr lesbar. */
@media (max-width: 1200px) {
  .br-flaeche { grid-template-columns: minmax(0, 1fr); }
  .br-karte, .br-karte.br-breit { grid-column: 1; }
  .br-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-reiter-frage { display: none; }
}
@media (max-width: 700px) {
  .br-zahlen { grid-template-columns: minmax(0, 1fr); }
  .br-satz { flex-direction: column; align-items: flex-start; }
}

/* Wechselt der Zeitraum, bleibt das alte Bild stehen und wandert danach zum
   neuen Wert. Waehrend gerechnet wird, tritt es leicht zurueck — sichtbar
   genug, um zu sagen „es passiert etwas", ohne die Form zu verlieren. */
.br-flaeche.br-wartet { opacity: .55; transition: opacity .18s; }

/* „Als PDF" steht neben dem Zeitraum, weil es genau den zeigt, der eingestellt ist. */
.br-blatt {
  margin-left: 10px; padding: 9px 15px; border: 2px solid var(--border, #9aaba6);
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1a202c); cursor: pointer;
  font-family: inherit; font-size: .85rem; font-weight: 600;
}
.br-blatt:hover { border-color: var(--cd-navy, #0f1f36); }
.br-blatt:disabled { opacity: .6; cursor: default; }

/* Jeder Satzteil steht in einem eigenen Element: der Sprachbaustein ersetzt
   ganze Textknoten, und drei Sätze in einem Knoten ergeben einen Schlüssel,
   den es nie geben wird (Befund 18.09.2026). */
.br-teil { display: inline; }
.br-teil::after { content: "."; }

/* Eigennamen — Wein, Lage, Wochentag — stehen in einem eigenen Element und
   werden nicht übersetzt. Ein Name mitten im Satz zerstört sonst den
   Wörterbuchschlüssel (18.09.2026). */
.br-eigen { display: inline; }

/* ══ Der Monat als Felder über der Tafel (20.09.2026, Ansage Neo) ═════
   Dasselbe Feld wie in der Winzer-App — „das ist wunderschön in der App",
   also steht es am Schreibtisch genauso: Datum groß, oben rechts die
   Gäste im Erlebnis, unten links die Reservierungen, unten rechts die
   Arbeiten, roter Strich wenn jemand fehlt. Nichts wird ausgeschrieben.
   Drei Flächen, mehr nicht: weiß · Salbei · Hoffarbe.
   ═══════════════════════════════════════════════════════════════════ */
.tmf { margin: 0 0 1.1rem; }
.tmf-kopf {
  display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.tmf-kopf strong {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: 1.15rem; font-weight: 600;
}
.tmf-legende {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  font-size: .75rem; color: var(--text-muted, #64748b);
}
.tmf-legende i { font-style: normal; display: inline-flex; align-items: center; gap: .35rem; }
/* Die Muster der Legende stehen im Fluss, nicht in der Ecke eines Feldes —
   sie müssen die späteren `position: absolute` der Feldregeln schlagen,
   also mit derselben Spezifität und weiter unten in der Datei (siehe ganz
   am Ende dieses Blocks). */
.tmf-wt, .tmf-raster {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}
.tmf-wt {
  text-align: center; margin-bottom: 5px;
  font-size: .62rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted, #64748b);
}
.tmf-tag {
  position: relative; overflow: hidden; cursor: pointer;
  height: 62px; padding: 0 0 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card, #fff); color: var(--cd-navy-text, #0f1f36);
  border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 0;
  font: inherit; font-variant-numeric:lining-nums tabular-nums;
  transition: transform .1s, box-shadow .15s;
}
.tmf-tag:active { transform: scale(.97); }
.tmf-tag:hover { box-shadow: 0 4px 14px rgba(15, 31, 54, .1); }
.tmf-zahl {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: 21px; font-weight: 400; line-height: 1;
}
.tmf-tag.belegt { background: rgba(154, 171, 166, .22); }
.tmf-tag.offen {
  background: var(--cd-navy, #0f1f36); border-color: var(--cd-navy, #0f1f36); color: #fff;
}
.tmf-tag.heute { border: 3px solid var(--cd-rost, #a0341a); }
/* Die Woche, die unten in den Zeilen steht — Salbei-Kante, keine Farbe. */
.tmf-tag.woche { box-shadow: inset 0 0 0 2px var(--cd-sage, #9aaba6); }
.tmf-tag.heute.woche { box-shadow: none; }
.tmf-leer { visibility: hidden; }
/* Oben rechts das Erlebnis: IMMER weißer Grund, dunkle Ziffer, auf jeder
   Fläche gleich. Ein Zeichen, das die Farbe wechselt, muss zweimal gelernt
   werden. */
.tmf-ecke {
  position: absolute; top: 0; right: 0;
  min-width: 16px; padding: 1px 3px; text-align: center;
  background: #fff; color: var(--cd-navy, #0f1f36);
  font-size: 10px; font-weight: 600; line-height: 1.2;
}
.tmf-tag:not(.offen):not(.belegt) .tmf-ecke {
  box-shadow: inset 0 0 0 1px var(--border-subtle, #e2e8f0);
}
.tmf-tische {
  position: absolute; left: 0; bottom: 0;
  min-width: 16px; padding: 1px 3px; text-align: center;
  font-size: 11px; font-weight: 600; line-height: 1.2; color: inherit;
}
.tmf-arbeiten {
  position: absolute; right: 0; bottom: 0;
  min-width: 16px; padding: 1px 3px; text-align: center;
  font-size: 11px; font-weight: 600; line-height: 1.2;
  color: var(--text-muted, #64748b);
}
.tmf-tag.offen .tmf-arbeiten { color: rgba(255, 255, 255, .72); }
/* Die einzige rote Stelle: hier fehlt jemand. */
.tmf-tag.knapp::after {
  content: ''; position: absolute; left: 50%; bottom: 18px;
  width: 18px; height: 3px; margin-left: -9px; border-radius: 2px;
  background: var(--rostrot, #a0341a);
}

/* Die Gruppenzeile ist seit 20.09.2026 eine Überschrift, kein Griff —
   es klappt nichts mehr zu. */
.tf-gruppe.offen {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem .3rem; background: none; border: 0;
  font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted, #64748b);
}

/* Die Muster in der Legende des Monatskopfs: im Fluss statt in der Ecke.
   Sie stehen NACH den Feldregeln, sonst gewinnt deren `position: absolute`
   und die Kästchen verschwinden aus der Zeile (gesehen 20.09.2026). */
.tmf-legende .tmf-probe {
  position: static; display: inline-flex; align-items: center;
  justify-content: center; min-width: 18px; padding: 1px 4px;
  font-size: 10px; font-weight: 600; line-height: 1.2;
}
.tmf-legende .tmf-tische { color: var(--cd-navy-text, #0f1f36); }
.tmf-legende .tmf-ecke {
  background: #fff; box-shadow: inset 0 0 0 1px var(--border-subtle, #e2e8f0);
}
.tmf-legende .tmf-strich {
  width: 18px; height: 3px; min-width: 0; padding: 0; border-radius: 2px;
  background: var(--rostrot, #a0341a);
}

/* ══ Weg A: der Monat ist die Tafel, der Tag steht darunter ══════════
   20.09.2026. Erst stand der Tag RECHTS — „Ich hätte es nicht gern auf der
   rechten Seite." Jetzt liegt er unter dem Monat, über die volle Breite:
   Der Monat bleibt ganz sichtbar, und im Cockpit passt dieselbe Form in
   eine schmale Spalte, ohne dass etwas nebeneinander gequetscht wird.

   Die Kästen tragen die Masse des HAUS-Bausteins `.satz-kasten`
   (KONZEPT 6f): Kopf Playfair .98rem in Navy, Zeilen .78rem gedämpft,
   Zustandswort .68rem in Versalien, 2 px Salbei, Fase gross. Vorher
   trugen sie die Schrift der alten Wochentafel (13 px Poppins) — deshalb
   sahen sie fremd aus.
   ═══════════════════════════════════════════════════════════════════ */
/* Im MODUL steht die Auflistung LINKS und der Kalender schmaler rechts
   (20.09.2026, Ansage Neo: „im Modul selber hätte ich das gerne links, da
   haben wir genug Platz … den Kalender ruhig von der Breite kleiner
   machen"). Im Cockpit bleibt es untereinander — dort ist die Spalte
   schmal, und dort hat es ihm so gefallen. */
.ta {
  /* Halbe und halbe (20.09.2026, Ansage Neo): „im Verkauf unter Tafel hätte
     ich gern die Aufteilung 50-50". Beide Hälften sind gleich breit.
     Seit 21.09.2026 steht der Kalender LINKS und die Tagesliste rechts —
     dieselbe Leserichtung wie im Cockpit: erst wählen, wo man ist, dann
     rechts das, was abzuarbeiten ist (Ansage Neo). Vorher stand es
     umgekehrt, und der Blick musste zwischen zwei Anordnungen umschalten. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.6rem; align-items: start;
}
.ta-links { grid-column: 1; grid-row: 1; }
.tafel.ta-tag { grid-column: 2; grid-row: 1; }
.ck-tafel .ta { display: block; }
.ck-tafel .ta-links, .ck-tafel .tafel.ta-tag { grid-column: auto; grid-row: auto; }
.ta-links .tf-steuer { margin-bottom: .8rem; flex-wrap: wrap; }
.ta-links .tmf { margin-bottom: .9rem; }
.ta-links .tf-hinweis { display: block; margin: .5rem 0 1.1rem; }

/* Die Tagesspalte erbt `.tafel` nur, damit die vorhandene Verdrahtung
   greift — ihr Rasterkleid (Salbei-Fugen, Querrollen) legt sie ab. */
.tafel.ta-tag {
  display: block; gap: 0; overflow: visible; margin: 0;
  background: none; border: 0; padding: 0;
}

/* Zwei Felder statt einer Fläche (21.09.2026, Ansage Neo): „Ich hätte
   gerne eine Trennung zwischen dem Kalender und den Grids … dass das zwei
   Felder sind." Und gleich danach: „Den Kalender hast du nach Standard, also
   nicht nach unserem Global CSS … und wir haben noch im Hintergrund ein
   eigenes Feld, das brauche ich nicht."

   Deshalb KEIN eigener Kasten, sondern genau der Stil der Felder, die im
   Cockpit schon stehen: `.ck-feld` — Haarlinie #e2e8f0, weisser Grund, die
   Fase links oben und rechts unten in `--fase-mittel`. Nichts daran ist neu;
   es ist nur an zwei Felder gehängt statt an eines, das beide umschliesst.

   Gilt überall, wo die Tafel steht — `.ta` ist die gemeinsame Klammer. */
.ta {
  align-items: stretch;        /* beide Felder gleich hoch */
}
.ta > .ta-links,
.ta > .tafel.ta-tag {
  /* `!important` ist nötig: Die Tagesspalte trägt `.tafel` nur für die
     Verdrahtung und erbt damit `.tafel { background: transparent
     !important; border: none !important }` — eine Regel, die dem
     WOCHENRASTER gilt (17.09.2026, jede Zelle mit eigenem Rahmen). Ohne
     das `!important` kam hier das Polster an, Rand und Grund nicht
     (gemessen im Browser am 21.09.2026). */
  background: var(--bg-card, #fff) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 16px;
  min-width: 0;
  box-sizing: border-box;
}
@supports (corner-shape: bevel) {
  .ta > .ta-links,
  .ta > .tafel.ta-tag {
    border-radius: var(--fase-mittel) 0 var(--fase-mittel) 0 !important;
    corner-shape: bevel !important;
  }
}

/* Die Zwischenschicht im Cockpit entfällt. `.ck-tafel` war ein Feld, auf
   dem die zwei Felder lagen — Rand, Grund, Polster und Fase. Die zwei
   stehen jetzt direkt auf dem Untergrund, bündig mit den Kacheln darüber,
   wie „Erlös je Liter" und „Weinumsatz in diesem Jahr". */
.ck-tafel {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.ck-tafel .ta { gap: 8px; }         /* derselbe Abstand wie zwischen den Kacheln */
/* Der Tageskopf trägt eine Linie unter sich (20.09.2026, Ansage Neo:
   „danach soll es irgendwie eine Teilung geben"). Ohne sie fielen Datum,
   die beiden Neu-Knöpfe und der erste Kasten ineinander. Dieselbe
   Haarlinie wie zwischen den Abschnitten eines Paneels. */
.ta-tagkopf {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding-bottom: .55rem; margin-bottom: .1rem;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
/* Im Cockpit steht der Tag UNTER dem Monat: Dort trennt die Linie nach
   oben, gegen den Kalender — eine zweite darunter wäre ein Kasten. */
.ck-tafel .ta-tagkopf {
  padding-top: .9rem; border-top: 1px solid var(--border-subtle, #e2e8f0);
  padding-bottom: 0; border-bottom: 0;
}
.ta-tagkopf h3 {
  font-family: var(--font-head, 'Playfair Display', serif);
  font-size: 1.25rem; font-weight: 600; margin: 0;
}
.ta-neu { margin-left: auto; display: inline-flex; gap: .35rem; }

/* Ein Kasten je Sache, in der Form des Hauses. Sie liegen nebeneinander,
   solange Platz ist — dasselbe Raster wie `kaesten()` in jedem Blatt. */
.ta-tag > .ta-kasten { margin-top: .6rem; }
.ta-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .6rem; margin-top: .7rem;
}
.ta-kasten {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px;
  background: var(--bg-card, #fff);
  border: 2px solid var(--cd-sage, #9aaba6);
  border-radius: var(--fase-gross, 14px) 0 var(--fase-gross, 14px) 0;
}
@supports (corner-shape: bevel) { .ta-kasten { corner-shape: bevel; } }
/* Das Wort, das sagt WAS es ist — im Mass des Zustandsworts, weil es
   dieselbe Aufgabe hat: einordnen, nicht benennen. */
.ta-art {
  display: block; margin-bottom: .1rem;
  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
/* Der Block darin trägt die Schrift des Haus-Kastens, nicht die der
   alten Wochentafel. */
.ta-kasten .tf-block {
  /* Jeden geerbten Rahmen abräumen: Der Kasten HAT schon einen, ein zweiter
     innen macht die Sache doppelt (gesehen 20.09.2026). Das `!important`
     ist hier nötig und kein Versehen: `.tafel .tf-block` setzt den Rahmen
     seinerseits mit `!important` (Kanten-Durchgang 15.09.2026), und die
     Tagesspalte trägt die Klasse `.tafel`, damit die vorhandene
     Verdrahtung sie findet. */
  background: none; padding: 0; box-shadow: none; border-radius: 0;
  border: 0 !important;
  font-size: .78rem; line-height: 1.4; color: var(--text-muted, #64748b);
}
.ta-kasten .tf-block:hover { outline: none; }
/* Die Lücke ist hier das Zustandswort des Hauses: Versalien, Rahmen mit
   kleiner Fase — nicht mehr der gestrichelte Kasten der Wochentafel. */
.ta-kasten .tf-luecke {
  display: inline-block; margin-top: .35rem; padding: 2px 7px;
  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--rostrot, #a0341a); border-radius: var(--fase-klein, 5px) 0 var(--fase-klein, 5px) 0;
  color: var(--rostrot, #a0341a);
}
@supports (corner-shape: bevel) { .ta-kasten .tf-luecke { corner-shape: bevel; } }
/* Der Stempel-Knopf nimmt nicht mehr die volle Breite — er ist eine
   Handlung unter dem Satz, kein Balken. */
.ta-kasten .tf-stempel {
  display: inline-block; width: auto; margin-top: .45rem; padding: 3px 10px;
  font-size: .68rem; border-radius: var(--fase-klein, 5px) 0 var(--fase-klein, 5px) 0;
}
@supports (corner-shape: bevel) { .ta-kasten .tf-stempel { corner-shape: bevel; } }
.ta-kasten .tf-griffe { margin-top: .45rem; gap: .3rem; }
.ta-kasten .tf-griffe button {
  font-size: .68rem; padding: 2px 8px;
  border-radius: var(--fase-klein, 5px) 0 var(--fase-klein, 5px) 0;
}
@supports (corner-shape: bevel) { .ta-kasten .tf-griffe button { corner-shape: bevel; } }
.ta-kasten .tf-block .tf-zeit,
.ta-kasten .tf-block .tf-titel {
  font-family: var(--font-head, 'Playfair Display', serif);
  font-size: .98rem; font-weight: 400; line-height: 1.25;
  color: var(--text-heading, #0f1f36);
}
.ta-kasten .tf-block .tf-unten,
.ta-kasten .tf-block .tf-dawaren { font-size: .78rem; }
.ta-kasten .tf-block .tf-zahl { font-size: .78rem; }
/* Der Ausschank trägt die Hoffarbe — dieselbe Fläche wie sein Feld im
   Monat. */
.ta-kasten:has(.tf-ausschank) {
  background: var(--cd-navy, #0f1f36); border-color: var(--cd-navy, #0f1f36);
}
.ta-kasten:has(.tf-ausschank) .ta-art,
.ta-kasten:has(.tf-ausschank) .tf-block,
.ta-kasten:has(.tf-ausschank) .tf-unten,
.ta-kasten:has(.tf-ausschank) .tf-voll-wort { color: rgba(255, 255, 255, .82); }
.ta-kasten:has(.tf-ausschank) .tf-zeit,
.ta-kasten:has(.tf-ausschank) .tf-titel { color: #fff; }
.ta-frei { margin: .9rem 0 0; font-size: .78rem; color: var(--text-muted, #64748b); }

/* WO BIN ICH: der gewählte Tag in Grün (20.09.2026, Ansage Neo — „diese
   Umrandung da, wo wir uns gerade befinden … da würde unser Grün ganz gut
   passen"). Salbei auf Salbei war nicht zu sehen. Rostrot bleibt HEUTE
   vorbehalten, damit beide nebeneinander lesbar sind: ein Tag kann heute
   und gewählt zugleich sein. */
.tmf-tag.wahl {
  box-shadow: 0 0 0 3px var(--status-success, #3d9970); z-index: 1;
}
.tmf-tag.drueber { box-shadow: 0 0 0 3px var(--cd-navy, #0f1f36); z-index: 1; }
/* Eine Person über einem Kasten rechts (21.09.2026): derselbe Navy-Ring wie
   über einem Tag im Monat — man sieht, wohin sie fällt, bevor man loslässt. */
.ta-kasten.drueber, .ta-tag .tf-block.drueber { box-shadow: 0 0 0 3px var(--cd-navy, #0f1f36); }

/* Im Cockpit ist die Tafel DIESELBE — kein zweites Design (20.09.2026,
   Ansage Neo: „wieso schaut das Cockpit ganz anders aus … das ist alles
   anderes Design?"). Ein Zwischenstand hatte hier kleinere Felder, eine
   kleinere Datumszahl und keine Legende; damit standen zwei Fassungen
   desselben Bildes nebeneinander. Angepasst wird nur, was die schmale
   Spalte erzwingt: ein Kasten je Reihe.
   Die Kachel hat eine feste Höhe (`overflow: hidden`) — der gewählte Tag
   lag darunter und war abgeschnitten. Jetzt rollt sie. */
.ck-tafel { overflow: auto; }
.ck-tafel .ta-liste { grid-template-columns: minmax(0, 1fr); }

/* ══ Die Berichte passen auf EINEN Schirm (20.09.2026, Ansage Neo) ═════
   „Dass ich nicht scrollen muss, dass die schön auf einer Seite drauf
   sind, jeglicher Reiter." Gemessen bei 1440 × 900 vor dem Umbau:
   Geld 40 px zu hoch, Weine passte, Gäste 137 px, Weinberg 342 px.

   Der Grund war nicht die Menge, sondern die Anordnung: Die Karten
   stapelten sich in ihrer natürlichen Höhe, und `.br-wurzel` hatte
   `height: 100%` von einem Elternteil ohne Höhe — also rollte der ganze
   Inhalt. Jetzt:
     1. Das Blatt bekommt die sichtbare Höhe, nichts rollt mehr.
     2. Zahlen und Satz behalten ihre Höhe, die KARTEN teilen sich den
        Rest (`grid-auto-rows: 1fr`) — eine Reihe bei zwei Karten, zwei
        Reihen bei drei oder vier.
     3. Die breite Karte liegt LINKS über beide Reihen, die zwei kleinen
        rechts übereinander — so nutzt das Hauptbild die Höhe statt der
        Breite, von der ein Schreibtisch mehr hat als genug.
     4. Die Bilder füllen ihre Karte (`height: 100%`); das SVG hält sein
        Seitenverhältnis selbst.
   Das Zeichenwerk `berichte.js` ist unverändert.
   ═══════════════════════════════════════════════════════════════════ */
.content-body:has(.br-wurzel) { overflow: hidden; display: flex; flex-direction: column; }
.content-body:has(.br-wurzel) > #blatt { flex: 1; min-height: 0; }
.br-wurzel { gap: 10px; }
.br-flaeche {
  overflow: hidden; align-content: stretch; gap: 10px; padding-right: 0;
  /* Die obere Kartenreihe bekommt etwas weniger als die untere: Oben
     stehen die knappen Bilder (Trichter, vier Wege), unten die Listen mit
     zehn Zeilen, die jede Zeile Höhe brauchen. */
  grid-template-rows: auto auto;
  grid-auto-rows: minmax(0, .82fr) minmax(0, 1.18fr);
}
/* Steht nur EINE Kartenreihe da (Weine), gehört ihr die ganze Höhe —
   erkannt daran, dass es keine dritte Karte gibt. */
.br-flaeche:not(:has(.br-karte ~ .br-karte ~ .br-karte)) { grid-auto-rows: minmax(0, 1fr); }
/* Die Reihen teilen sich die Höhe so, dass alle Bilder eines Berichts um
   DENSELBEN Faktor schrumpfen (gemessen 20.09.2026 bei 1440 × 900: bei
   gleicher Teilung stand „Ertrag und Arbeit je Lage" auf 43 %, das
   Mostgewicht daneben auf 100 %). Gezeichnete Höhen: Lagen 216 + Legende,
   Mostgewicht 170 + Legende; Trichter 174, Wärmekarte 180, Bestenliste 276. */
.br-flaeche:has(#br-wb-schlaege) { grid-auto-rows: minmax(0, 1.16fr) minmax(0, 1fr); }
.br-flaeche:has(#br-gaeste-trichter) { grid-auto-rows: minmax(0, .74fr) minmax(0, 1fr); }
.br-flaeche .br-zahl { padding-top: 8px; padding-bottom: 8px; }
/* Kopf etwas dichter — jede gesparte Zeile gehört den Bildern. */
.br-flaeche .br-zahlen { gap: 10px; }
.br-flaeche .br-satz { padding-top: 10px; padding-bottom: 10px; }

.br-flaeche .br-karte {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  padding: 10px 14px 12px;
}
.br-flaeche .br-karte.br-breit { grid-column: 1; grid-row: 3 / span 2; }
.br-flaeche .br-kopf { flex: none; margin-bottom: 6px; }
.br-flaeche .br-fuss { flex: none; margin-top: 4px; }
/* Der Bildhalter ist eine SPALTE: Das Zeichenwerk hängt die Legende in
   denselben Halter vor das Bild. Als Zeile stand sie NEBEN dem Bild und
   quetschte es auf einen Bruchteil — bei „Ertrag und Arbeit je Lage" lief
   die Legende ins Bild, beim Mostgewicht sah sie aus wie abgeschnittene
   Sortennamen (gesehen 20.09.2026). */
.br-flaeche .br-bild {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
}
.br-flaeche .br-bild.br-eng { max-width: none; }
.br-flaeche .br-bild > .br-legende { flex: none; }
/* Das Bild behält seine natürliche Höhe und schrumpft nur, wenn die Karte
   niedriger ist — es wird nie GRÖSSER gezogen als gezeichnet. So bleibt
   die Schrift im Bild so gross wie daneben, und übriger Platz steht unter
   dem Bild statt rundherum. */
.br-flaeche .br-svg { width: 100%; height: auto; flex: 0 1 auto; min-height: 0; }

/* Ein sehr niedriger Schirm darf wieder rollen — besser als Bilder, die
   niemand mehr lesen kann. */
@media (max-height: 700px) {
  .content-body:has(.br-wurzel) { overflow: auto; display: block; }
  .br-flaeche { overflow: visible; grid-auto-rows: auto; }
  .br-flaeche .br-karte.br-breit { grid-column: 1 / -1; grid-row: auto; }
  .br-flaeche .br-svg { height: auto; }
}

/* ══ Cockpit: die Tafel über die volle Breite (20.09.2026, Ansage Neo) ═
   Die zwei Bänder rechts sind in die Berichte gewandert; ihr Platz gehört
   der Tafel. Dieselbe Form wie im Blatt unter Verkauf — der Tag links, der
   Monat rechts, halbe und halbe. Alles hängt an `.ck-voll`; ohne die
   Klasse gilt die alte schmale Spalte weiter (Rückweg: Klasse weg).
   ═══════════════════════════════════════════════════════════════════ */
.ck-zwei.ck-voll { grid-template-columns: minmax(0, 1fr); }
.ck-voll .ck-tafel .ta {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.6rem; align-items: start;
}
/* Im Cockpit der Kalender LINKS, der Tag rechts (20.09.2026 abends, Ansage
   Neo: „Dreh es um"). Unter Verkauf bleibt es andersherum — dort wollte er
   die Auflistung links. */
.ck-voll .ck-tafel .ta-links { grid-column: 1; grid-row: 1; }
.ck-voll .ck-tafel .tafel.ta-tag { grid-column: 2; grid-row: 1; }
.ck-voll .ck-tafel .ta-tagkopf {
  padding-top: 0; border-top: 0;
  padding-bottom: .55rem; border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.ck-voll .ck-tafel .ta-liste { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
/* Nichts rollt: Der Monat füllt die Höhe, die da ist — die Felder teilen
   sie sich (`1fr`), statt 62 px zu verlangen. Gemessen 20.09.2026 bei
   1440 × 900: Die Monatsspalte brauchte 577 px, der Halter hatte 504.
   Der Hinweissatz unter den Personen steht im Blatt unter Verkauf; hier
   kostet er eine Zeile, die der Kalender braucht. */
.ck-voll #ck-tafel-flaeche { overflow: hidden; display: flex; flex-direction: column; }
.ck-voll #ck-tafel-flaeche > #tf-flaeche { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ck-voll .ck-tafel .ta { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
.ck-voll .ck-tafel .ta-links { display: flex; flex-direction: column; min-height: 0; }
.ck-voll .ck-tafel .ta-links > * { flex: none; }
.ck-voll .ck-tafel .ta-links .tf-steuer { margin-bottom: .5rem; }
.ck-voll .ck-tafel .ta-links .tmf { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: .5rem; }
.ck-voll .ck-tafel .tmf-raster { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.ck-voll .ck-tafel .tmf-tag { height: auto; min-height: 34px; }
.ck-voll .ck-tafel .ta-links .tf-hinweis { display: none; }
/* Der Tag links rollt nur dann in sich, wenn ein Tag wirklich mehr Kästen
   hat, als die Höhe trägt — die Seite selbst rollt nie. */
.ck-voll .ck-tafel .tafel.ta-tag { min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
/* Die Überschrift „Die Tafel" kostet 36 px und sagt, was der Tageskopf und
   der Kalender schon zeigen. Die Kästen stehen etwas dichter — am vollsten
   Tag des Musterbetriebs (26.09., acht Kästen) fehlten 59 px. */
.ck-voll .ck-tafel > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ck-voll .ck-tafel .ta-liste { gap: .45rem; margin-top: .5rem; }
.ck-voll .ck-tafel .ta-kasten { padding: 8px 12px; gap: 2px; }
.ck-voll .ck-tafel .ta-tag > .ta-kasten { margin-top: .45rem; }
/* 768er Laptop (27.09.2026): Die Monatsspalte hatte 107 px für fünf Wochen,
   jedes Feld verlangte 34 px — die Wochen lagen übereinander. Flach gesetzt:
   kleinere Felder, Zahl kleiner, Abstände enger, Kennzahlen oben dünner. */
@media (min-width: 62.001rem) and (max-height: 800px) {
  .ck-voll .ck-tafel .tmf-tag { min-height: 22px; padding-bottom: 0; }
  .ck-voll .ck-tafel .tmf-zahl { font-size: 15px; }
  .ck-voll .ck-tafel .tmf-raster, .ck-voll .ck-tafel .tmf-wt { gap: 3px; }
  .ck-voll .ck-tafel .tmf-wt { margin-bottom: 2px; }
  .ck-voll .ck-tafel .tmf-kopf { margin-bottom: .25rem; }
  .ck-voll .ck-tafel .ta-links .tf-steuer { margin-bottom: .3rem; }
  .ck-voll .ck-tafel .ta-links .tmf { margin-bottom: .3rem; }
  .cockpit-raster .cockpit-kpi { padding-top: 8px; padding-bottom: 8px; }
  .cockpit-raster .cockpit-kpi .kpi-value { font-size: 1.5rem; }
  .cockpit-raster .cockpit-kpi .kpi-trend { margin-top: 2px; line-height: 1.25; }
  .ck-voll .ck-tafel .ta-tagkopf { padding-bottom: .3rem; }
  .ck-voll .ck-tafel .ta-liste { margin-top: .3rem; }
  .ck-voll .ck-tafel .ta-tag > .ta-kasten { margin-top: .3rem; }
}

/* Bericht Geld hat seit 20.09.2026 VIER Karten: die Säulen links über drei
   Reihen, rechts Wege · Liter je Weg · offene Rechnungen. Die Reihen folgen
   den gezeichneten Höhen (120 · 142 · 68 px plus Kartenkopf). */
.br-flaeche:has(#br-geld-liter) { grid-auto-rows: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .74fr); }
.br-flaeche:has(#br-geld-liter) .br-karte.br-breit { grid-row: 3 / span 3; }
@media (max-height: 700px) {
  .br-flaeche:has(#br-geld-liter) { grid-auto-rows: auto; }
  .br-flaeche:has(#br-geld-liter) .br-karte.br-breit { grid-row: auto; }
}

/* ══ „Person einteilen" ist ein Knopf (20.09.2026, Ansage Neo) ═════════
   Das rote Wort „niemand eingeteilt" sah aus wie ein Warnschild — dass ein
   Klick darauf unten zeigt, wer kann, hat niemand erraten. Jetzt trägt es
   ein Plus, die Hand und einen Druckpunkt. Das Plus kommt aus dem CSS: Der
   Sammler der Sprachprüfung verwirft ein Plus am Satzanfang. */
.ta-kasten .tf-luecke {
  cursor: pointer; font-weight: 600; padding: 4px 10px;
  transition: background .12s, color .12s, transform .1s;
}
.ta-kasten .tf-luecke::before { content: '+ '; }
.ta-kasten .tf-luecke:hover,
.ta-kasten .tf-luecke:focus-visible,
.ta-kasten .tf-luecke.aktiv { background: var(--rostrot, #a0341a); color: #fff; outline: none; }
/* Auf Navy dasselbe Rostrot wie überall (27.09.2026, Ansage Neo: kein
   helleres Rot) — als Fläche, weil Rostrot als Schrift auf Navy nicht lesbar ist. */
.ta-kasten:has(.tf-ausschank) .tf-luecke { background: var(--rostrot, #a0341a); border-color: var(--rostrot, #a0341a); color: #fff; }
.ta-kasten:has(.tf-ausschank) .tf-luecke:hover,
.ta-kasten:has(.tf-ausschank) .tf-luecke:focus-visible,
.ta-kasten:has(.tf-ausschank) .tf-luecke.aktiv { background: #fff; border-color: #fff; color: var(--rostrot, #a0341a); }
.ta-kasten .tf-luecke:active { transform: scale(.97); }
.tf-crewtipp { font-size: .74rem; color: var(--text-muted, #64748b); margin-right: .3rem; }
/* Eingeteilte stehen mit Namen im Kasten, lesbar wie der Rest. */
.ta-kasten .tf-leiste { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .35rem; }
/* Der Wähler klappt AM Kasten auf, nicht unten am Kalender (20.09.2026). */
.ta-kasten .tf-wahl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .4rem; }
.tf-wahlname {
  font: inherit; font-size: .74rem; cursor: pointer;
  padding: 4px 9px; background: var(--bg-card, #fff);
  color: var(--cd-navy-text, #0f1f36);
  border: 1px solid var(--cd-sage, #9aaba6);
  border-radius: var(--fase-klein, 5px) 0 var(--fase-klein, 5px) 0;
  transition: background .12s, color .12s, transform .1s;
}
@supports (corner-shape: bevel) { .tf-wahlname { corner-shape: bevel; } }
.tf-wahlname:hover { background: var(--cd-navy, #0f1f36); color: #fff; }
.tf-wahlname:active { transform: scale(.96); }
.tf-wahlname.gesperrt { color: var(--text-muted, #64748b); border-style: dashed; }
.tf-wahlname small { font-size: .66rem; opacity: .75; }
.ta-kasten:has(.tf-ausschank) .tf-wahlname { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .35); }
.ta-kasten:has(.tf-ausschank) .tf-wahlname:hover { background: #fff; color: var(--cd-navy, #0f1f36); }
/* Wer eingeteilt IST, steht mit Vorwort da — vorher war es ein Schild ohne
   Überschrift, das man für einen Knopf halten konnte. */
.tf-werwort {
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted, #64748b); align-self: center; margin-right: .15rem;
}
.ta-kasten:has(.tf-ausschank) .tf-werwort { color: rgba(255, 255, 255, .65); }

/* ══ Zustand und Gespräch am Buchungs-Kasten (20.09.2026) ══════════════
   Die Buchung IST der Kasten ihres Tages — was sie kostet und ob jemand
   schreibt, steht deshalb dort und nicht in einer Liste daneben. */
.tf-zustand {
  display: inline-block; margin-top: .35rem; margin-right: .3rem; padding: 2px 8px;
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: var(--fase-klein, 5px) 0 var(--fase-klein, 5px) 0;
  color: var(--text-muted, #64748b);
}
@supports (corner-shape: bevel) { .tf-zustand { corner-shape: bevel; } }
.tf-zustand.warnt { color: var(--rostrot, #a0341a); border-color: var(--rostrot, #a0341a); }
.tf-zustand.gut { color: #276749; border-color: rgba(39, 103, 73, .45); }
.tf-gespraech {
  display: inline-block; margin-top: .35rem; padding: 2px 8px; cursor: pointer;
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cd-navy-text, #0f1f36);
  border: 1px solid var(--cd-sage, #9aaba6);
  border-radius: var(--fase-klein, 5px) 0 var(--fase-klein, 5px) 0;
  transition: background .12s, color .12s;
}
@supports (corner-shape: bevel) { .tf-gespraech { corner-shape: bevel; } }
.tf-gespraech:hover { background: var(--cd-navy, #0f1f36); color: #fff; }
.tf-gespraech.ungelesen { color: var(--rostrot, #a0341a); border-color: var(--rostrot, #a0341a); font-weight: 600; }
.ta-kasten:has(.tf-ausschank) .tf-zustand,
.ta-kasten:has(.tf-ausschank) .tf-gespraech { color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .35); }

/* ══ Was heute fällig ist (20.09.2026) ═════════════════════════════════
   Eine Zeile je Sache, über den Kästen. Kein Kasten: Dafür muss niemand da
   sein, es muss nur getan werden. An Tagen ohne Fälliges steht hier nichts
   — die Zeile kostet dann auch keine Höhe. */
.ta-faellig { display: flex; flex-direction: column; gap: 2px; margin-top: .5rem; }
.ta-faellig-zeile {
  display: flex; align-items: baseline; gap: .5rem; width: 100%; cursor: pointer;
  font: inherit; text-align: left; padding: 5px 9px;
  background: var(--bg-card, #fff); color: var(--cd-navy-text, #0f1f36);
  border: 0;
  transition: background .12s;
}
.ta-faellig-zeile:hover { background: rgba(154, 171, 166, .18); }
.ta-faellig-wort {
  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rostrot, #a0341a); white-space: nowrap;
}
.ta-faellig-titel { font-size: .8rem; color: var(--text-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Das Fristzeichen im Monatsfeld: eine schmale Marke oben links, dieselbe
   Farbe wie die Fälligkeitszeile im Tag. Kein vierter Zahlenplatz. */
/* Das Fristzeichen im Monatsfeld: ein Punkt oben links (Neo 22.09.2026: „den
   Punkt fand ich super“ — er bleibt, auch wenn die Sache oben unter Freigabe steht). */
.tmf-tag.frist::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rostrot, #a0341a);
}
/* Was an dem Tag wirklich gearbeitet wurde — unter den Kästen, weil es der
   Nachweis ist und nicht der Plan (20.09.2026). */
.ta-zeit {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin-top: .6rem; padding-top: .5rem;
  border-top: 1px solid var(--border-subtle, #e2e8f0);
}
.ta-zeit-wort {
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.ta-zeit-person { font-size: .78rem; color: var(--cd-navy-text, #0f1f36); font-variant-numeric:lining-nums tabular-nums; }
.ta-zeit-summe { margin-left: auto; font-size: .82rem; font-variant-numeric:lining-nums tabular-nums; }
/* Zahl und Wort sind getrennte Knoten, damit die Sprachschicht das Wort
   findet (20.09.2026). Der Abstand kommt deshalb aus dem CSS, nicht aus
   einem Leerzeichen im Satz. */
.tf-voll-wort > b + span, .tf-voll-wort > span + b,
.tf-unten > b + span, .tf-unten > span + b { margin-left: .28em; }
.tf-voll-wort > span + b { margin-left: .5em; }
.tf-unten > span + b { margin-left: .28em; }
/* Zwei Wörter nebeneinander brauchen den Abstand genauso — im Italienischen
   klebte sonst „PersoneTavolo" zusammen (20.09.2026). */
.tf-unten > span + span { margin-left: .28em; }

/* ── Master · Heute: Stapelköpfe (21.09.2026) ─────────────────────
   Fünf Stapel auf einem Blatt brauchen eine Zwischenüberschrift, die
   leiser ist als der Blatttitel und die Zahl der Kästen gleich mitsagt. */
.mh-kopf {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cd-navy-text, #0f1f36);
  margin: 1.4rem 0 .5rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid #e2e8f0;
}
.mh-zahl {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 .45em;
  margin-left: .35em;
  border-radius: 0;
  background: #0f1f36;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}


/* ── Die Suche im Kopf (21.09.2026) ───────────────────────────────────
   Sitzt zwischen Titel und Knöpfen und nimmt, was übrig ist — höchstens
   460 px, damit der Blick nicht quer über den Balken wandert. Dieselbe
   Fläche wie die Knöpfe daneben (weiss 15 %), kein eigener Stil. */
.kopfsuche { flex: 1 1 260px; max-width: 460px; min-width: 160px;
  display: flex; align-items: stretch; gap: 10px; box-sizing: border-box;
  height: 34px; padding: 0 12px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); }
.kopfsuche[hidden] { display: none; }
.kopfsuche:focus-within { background: rgba(255,255,255,.26);
  border-color: var(--cd-sage, #9aaba6); }
.kopfsuche svg { width: 16px; height: 16px; flex: none; align-self: center; stroke: var(--cd-sage, #9aaba6);
  fill: none; stroke-width: 2; stroke-linecap: round; }
/* Das Feld füllt die Höhe: sonst ist der blinkende Strich nur 19 px hoch und
   sitzt tief im Kasten (Befund Neo 22.09.2026). */
.kopfsuche input { all: unset; flex: 1; min-width: 0; color: #fff; height: 100%;
  display: flex; align-items: center; caret-color: var(--cd-sage, #9aaba6);
  font-family: inherit; font-size: .85rem; line-height: 1; }
.kopfsuche input::placeholder { color: rgba(255,255,255,.62); }
.kopfsuche input::-webkit-search-cancel-button { display: none; }
@media (max-width: 900px) { .kopfsuche { order: 3; flex-basis: 100%; max-width: none; } }


/* ══ Ein Kopf, keine Leiste links (KONZEPT 6h, 21.09.2026) ═══════════
   Rückweg: `EIN_KOPF = false` in konsole.js — dann fehlt die Klasse
   `ein-kopf` und alles hier greift nicht. */
/* !important, weil `.app-schale:has(.sidebar.eingeklappt)` spezifischer ist:
   Mit eingeklappter Leiste stand der Inhalt sonst in ihrer 56-px-Spalte
   (gefunden beim ersten Probelauf, 21.09.2026). */
.app-schale.ein-kopf { grid-template-columns: minmax(0, 1fr) !important; }
.app-schale.ein-kopf > .sidebar { display: none; }
@media (max-width: 800px) {
  .app-schale.ein-kopf { grid-template-rows: 1fr; }
}
.ein-kopf .content-header { gap: .75rem; }
.ein-kopf .content-header h2 { flex: none; }
.ein-kopf .kopfsuche { max-width: 380px; }

/* Hilfe und Melden als Zeichen im Kopf — dieselben Knöpfe wie vorher unten. */
.kopf-zeichen { display: inline-flex; gap: 4px; }
.kopf-zeichen .help-mode-toggle,
.kopf-knopf {
  all: unset; box-sizing: border-box; cursor: pointer;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
}
.kopf-zeichen .help-mode-toggle span { display: none !important; }
.kopf-zeichen .help-mode-toggle i,
.kopf-zeichen .help-mode-toggle svg { font-size: 15px; width: 16px; height: 16px; color: #fff; }
.kopf-zeichen .help-mode-toggle:hover, .kopf-knopf:hover,
.kopf-knopf[aria-expanded="true"] { background: rgba(255,255,255,.26); }
.kopf-knopf svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kopf-knopf[hidden] { display: none; }
.kopf-master { border-color: var(--cd-sage, #9aaba6); }

/* Das Klappmenü unter Zahnrad und M */
.kopf-menue {
  position: fixed; z-index: 3900; min-width: 290px; max-width: 360px;
  max-height: calc(100vh - 80px); overflow-y: auto;
  background: var(--bg-card, #fff); color: var(--cd-navy-text, #0f1f36);
  border: 2px solid var(--cd-sage, #9aaba6);
  box-shadow: 0 10px 28px rgba(15,31,54,.22); padding: 6px 0;
}
.kopf-menue[hidden] { display: none; }
.km-abschnitt { padding: 8px 14px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.km-abschnitt[hidden] { display: none; }
.km-abschnitt h4 { margin: 0 0 6px; font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted, #64748b); }
.km-zeile { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  justify-content: space-between; gap: .8rem; width: 100%; padding: 6px 4px;
  font-size: .86rem; }
.km-zeile:hover { background: rgba(154,171,166,.2); }
.km-zusatz { color: var(--text-muted, #64748b); font-size: .76rem; }
.km-leer { margin: 0; font-size: .8rem; color: var(--text-muted, #64748b); }
.km-reihe { display: flex; gap: 8px; }
.km-reihe .help-mode-toggle { flex: 1; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; padding: 8px 6px !important; font-size: .8rem;
  border: 2px solid var(--cd-sage, #9aaba6); background: transparent; cursor: pointer;
  color: var(--cd-navy-text, #0f1f36); }
.km-reihe .help-mode-toggle span { display: inline !important; }
.km-recht { padding: 8px 14px 4px; font-size: .72rem; }
.km-recht .rechtszeile { margin: 0; }
.kopf-menue select, .kopf-menue .vm-hdr-role select {
  width: 100%; background: var(--bg-card, #fff) !important; color: var(--cd-navy-text, #0f1f36) !important;
  border: 2px solid var(--cd-sage, #9aaba6) !important; padding: 6px 8px; font-family: inherit; }
.kopf-menue .vm-hdr-role { display: block; }
.kopf-menue .vm-hdr-role button, .kopf-menue .vm-hdr-role .sprachwahl-knopf {
  color: var(--cd-navy-text, #0f1f36) !important; background: transparent !important;
  border: 2px solid var(--cd-sage, #9aaba6) !important; }
.kopf-menue #mk-betrieb select { margin: 0; }
/* Sprache im Zahnrad (29.10.2026, Ansage Master): alle fünf Sprachen ausgeschrieben
   untereinander, ohne zweiten Aufklappknopf. Die aufklappende Liste lag absolut im
   scrollenden Menü und wurde nach „English“ abgeschnitten. */
.kopf-menue #sprach-knopf { display: none; }
.kopf-menue #sprach-liste, .kopf-menue #sprach-liste[hidden] {
  display: flex; position: static; box-shadow: none; border: 0; min-width: 0; }
.kopf-menue #sprach-liste button { padding: 7px 4px; border: 0 !important;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0) !important; }
.kopf-menue #sprach-liste button:last-child { border-bottom: 0 !important; }
.kopf-menue #sprach-liste button.active { background: rgba(154,171,166,.18) !important; }
.kopf-menue .data-mode-toggle { display: inline-flex; cursor: pointer; }

/* „Zu tun“ — ein Knopf mit Zahl und der dringendsten Sache */
.zutun {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 0 1 auto; min-width: 0;
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff;
  font-size: .84rem;
}
.zutun[hidden] { display: none; }
.zutun:hover { background: rgba(255,255,255,.24); }
.zutun-wort { font-weight: 600; white-space: nowrap; }
.zutun-zahl { min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid #5cc28f; font-weight: 700; font-size: .75rem; }
.zutun.dringend .zutun-zahl { border-color: #dd6c51; background: #a0341a; }
.zutun-erstes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 260px; color: rgba(255,255,255,.82); font-size: .8rem; }
.zutun.dringend .zutun-erstes { color: #f3b2a2; }
@media (max-width: 1350px) { .zutun-erstes { display: none; } }

.zutun-liste { display: flex; flex-direction: column; gap: 6px; }
.zutun-zeile { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  flex-direction: column; gap: 3px; padding: 10px 12px;
  border: 2px solid var(--cd-sage, #9aaba6);
  background: var(--bg-card, #fff); }
.zutun-zeile:hover { background: rgba(154,171,166,.14); }
.zutun-kopf { display: flex; justify-content: space-between; gap: 1rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted, #64748b); }
.zutun-zeile.tun-0 .zutun-kopf span:last-child { color: var(--rostrot, #a0341a); }
.zutun-text { font-size: .9rem; color: var(--cd-navy-text, #0f1f36); }
[data-theme="dark"] .zutun-zeile.tun-0 .zutun-kopf span:last-child { color: #dd6c51; }
[data-theme="dark"] .zutun-text { color: #e2e8f0; }

/* Das Themenblatt unter dem Suchfeld */
.ks-blatt {
  position: fixed; z-index: 3950; max-height: calc(100vh - 90px); overflow-y: auto;
  background: var(--bg-page, #f7fafc); border: 2px solid var(--cd-sage, #9aaba6);
  box-shadow: 0 14px 36px rgba(15,31,54,.24); padding: 16px 18px 18px;
}
.ks-blatt[hidden] { display: none; }
.ks-gruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .ks-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ks-gruppen { grid-template-columns: 1fr; } }
.ks-gruppe h4 { margin: 0 0 8px; font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted, #64748b); }
.ks-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ks-mehr { margin-top: 16px; }
.ks-mehr .ks-raster { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ks-kachel { background: var(--bg-card, #fff); border: 2px solid var(--cd-sage, #9aaba6);
  display: flex; flex-direction: column; min-width: 0; }
.ks-kachel.ungebucht { opacity: .6; border-style: dashed; }
.ks-haupt { all: unset; box-sizing: border-box; cursor: pointer; padding: 10px 12px 8px;
  display: flex; flex-direction: column; gap: 4px; }
.ks-haupt:hover { background: rgba(154,171,166,.16); }
.ks-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.02rem;
  color: var(--cd-navy-text, #0f1f36); }
.ks-zahl { display: inline-flex; align-items: baseline; gap: 6px; font-size: .78rem;
  color: var(--text-muted, #64748b); }
.ks-zahl b { font-size: 1.25rem; font-weight: 700; color: var(--cd-navy-text, #0f1f36); }
.ks-zahl.warnt b, .ks-zahl.warnt span { color: var(--rostrot, #a0341a); }
.ks-unter { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 0 12px 9px; }
.ks-unter button { all: unset; cursor: pointer; font-size: .74rem;
  color: var(--text-muted, #64748b); border-bottom: 1px solid transparent; }
.ks-unter button:hover { color: var(--cd-navy-text, #0f1f36); border-bottom-color: var(--cd-sage, #9aaba6); }
[data-theme="dark"] .ks-blatt { background: #0f1b2d; }
[data-theme="dark"] .ks-kachel { background: #16202f; }
[data-theme="dark"] .ks-name, [data-theme="dark"] .ks-zahl b { color: #e2e8f0; }
[data-theme="dark"] .ks-zahl.warnt b, [data-theme="dark"] .ks-zahl.warnt span { color: #dd6c51; }

/* Das Schildchen über einer gefilterten Liste */
.filter-schild { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 6px 8px 6px 12px; border: 2px solid var(--cd-sage, #9aaba6);
  background: var(--bg-card, #fff); font-size: .84rem; }
.fs-wort { color: var(--text-muted, #64748b); }
.fs-such { color: var(--cd-navy-text, #0f1f36); }
.fs-zahl { min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--cd-navy, #0f1f36);
  font-weight: 700; font-size: .72rem; }
.fs-mehr { all: unset; cursor: pointer; color: var(--rostrot, #a0341a); font-size: .8rem; }
.fs-weg { all: unset; cursor: pointer; width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.1rem; color: var(--cd-navy-text, #0f1f36); }
.fs-weg:hover { background: rgba(154,171,166,.25); }

/* Hinweis für Kunden in der Vorführung (statt der Pille im Kopf) */
.vorfuehr-hinweis { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 0 12px; padding: 8px 12px; border: 2px solid var(--cd-sage, #9aaba6);
  background: var(--bg-card, #fff); font-size: .86rem; }

/* „hidden“ gilt auch für die Kopfknöpfe — `all: unset` hob es sonst auf. */
.vm-hdr-btn[hidden] { display: none !important; }
.km-reihe .help-mode-toggle { flex-direction: row !important; }
.km-reihe .help-mode-toggle i, .km-reihe .help-mode-toggle svg { font-size: 15px; width: 16px; height: 16px; }
.kopf-menue .data-mode-toggle { color: var(--cd-navy-text, #0f1f36) !important;
  background: transparent !important; border: 2px solid var(--cd-sage, #9aaba6) !important;
  padding: 6px 12px; gap: 8px; align-items: center; }
.kopf-menue .data-mode-toggle * { color: var(--cd-navy-text, #0f1f36) !important; }

.kopf-menue .data-mode-dot.live { background: var(--cd-navy, #0f1f36); }

/* Handy, Kopf ohne Leiste (21.09.2026): Die Kopfknöpfe brechen um, statt
   seitlich wegzurollen — sonst lagen Zahnrad (mit Abmelden) und M ausserhalb
   des Bildes. */
@media (max-width: 800px) {
  .ein-kopf .content-header-actions { flex-wrap: wrap !important; overflow: visible !important;
    justify-content: flex-start !important; row-gap: 6px; }
}
/* Handy-Cockpit: Die Fläche „zwei“ (die Tafel) fehlte in den Bereichen der
   schmalen Fassung — das Raster legte dafür eine zweite Spalte an, und die
   vier Zahlen schrumpften auf 0 px (gemessen 21.09.2026, 390 px). */
@media (max-width: 62rem) {
  .cockpit-raster { grid-template-areas: "kpi" "tun" "zwei" "lauf" "wege"; }
}

/* Handy: Monat und Tag untereinander statt halb und halb (21.09.2026). */
@media (max-width: 62rem) {
  .ck-voll .ck-tafel .ta { grid-template-columns: minmax(0, 1fr) !important; }
  .ck-voll .ck-tafel .ta-links { grid-column: 1; grid-row: 1; }
  .ck-voll .ck-tafel .tafel.ta-tag { grid-column: 1; grid-row: 2; }
  .ck-voll #ck-tafel-flaeche { overflow: visible; }
}

/* „Zu tun“ schrumpft nie unter seinen Inhalt — auf Spanisch („Que hacer“)
   lief das Wort sonst bei 860 px über den Rand (Layoutprüfung 21.09.2026). */
.zutun { flex: none; }


/* ══ Die Lage im Büro (KONZEPT 6h, 21.09.2026) ═════════════════════ */
.cockpit-raster:has(.lage) { grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "kpi" "lage" "zwei"; }
.lage { grid-area: lage; min-width: 0; background: var(--bg-card, #fff);
  border: 2px solid var(--cd-sage, #9aaba6); padding: 10px 14px 12px; }
.lage-kopf { display: flex; justify-content: flex-end; align-items: baseline; gap: 1rem; margin-bottom: 8px; }
.lage-satz { margin: 0; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; color: var(--cd-navy-text, #0f1f36); }
.lage-satz-zahl { font-family: var(--font-body, 'Poppins', sans-serif); font-weight: 700; }
.lage-satz-leise { display: inline-flex; gap: .35rem; margin-left: .8rem; font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: .82rem; color: var(--text-muted, #64748b); }
.lage-regler { all: unset; cursor: pointer; font-size: .8rem; color: var(--cd-navy-text, #0f1f36);
  border-bottom: 1px solid var(--cd-sage, #9aaba6); white-space: nowrap; }
.lage-regler:hover { border-bottom-color: var(--cd-navy, #0f1f36); }
.lage-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lage-drei.eins { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 62rem) { .lage-drei { grid-template-columns: minmax(0, 1fr); } }
.lage-stapel { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lage-stapel h4 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body, 'Poppins', sans-serif); font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted, #64748b); }
.lage-zahl { min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--cd-sage, #9aaba6);
  font-size: .68rem; color: var(--cd-navy-text, #0f1f36); letter-spacing: 0; }
.lage-zeile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px;
  min-width: 0; padding: 5px 8px; background: #f7fafc; font-size: .84rem;
  color: var(--cd-navy-text, #0f1f36); }
.lage-zeile:hover, .lz-oeffnen:hover { background: rgba(154,171,166,.2); }
/* Drei Kästen neutral (Ansage Neo 22.09.2026): kein Rand links, kein Rot — Dringendes steht nur vorn. */
.lz-was { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lz-wer { color: var(--text-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lz-rechts { margin-left: auto; color: var(--text-muted, #64748b); font-size: .76rem; }
.lage-zeile.mit-knopf { cursor: default; padding: 2px 2px 2px 0; }
.lz-oeffnen { all: unset; cursor: pointer; flex: 1; min-width: 0; display: flex; gap: 8px; padding: 3px 8px; }
/* Alle Knöpfe in der Lage gleich breit (22.09.2026, Ansage Neo: „das Feld soll
   immer gleich groß sein … das soll immer synchron ausschauen"). Sonst ist
   „Veröffentlichen" breiter als „Senden" und die Spalte franst aus. */
.lz-ja { all: unset; cursor: pointer; padding: 3px 10px; background: var(--cd-navy, #0f1f36); color: #fff;
  font-size: .76rem; font-weight: 600; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 7.6rem; min-height: 1.6rem; text-align: center; }
.lz-nein { all: unset; cursor: pointer; width: 24px; text-align: center; color: var(--text-muted, #64748b); font-size: 1rem; }
.lage-zeile.vorschlag { cursor: default; flex-wrap: wrap; }
.lz-frage { color: var(--text-muted, #64748b); font-size: .8rem; }
.lage-alle { all: unset; cursor: pointer; font-size: .76rem; color: var(--cd-navy-text, #0f1f36); padding: 2px 8px; }
.lage-leer { margin: 0; font-size: .8rem; color: var(--text-muted, #64748b); padding: 4px 8px; }
[data-theme="dark"] .lage { background: #16202f; }
[data-theme="dark"] .lage-zeile { background: #1b2a40; color: #e2e8f0; }
[data-theme="dark"] .lage-satz { color: #e2e8f0; }
.lage-im-paneel { border: none; padding: 0; }
.lage-im-paneel .lage-zeile { padding: 8px 10px; }

/* Das Paneel „Was VinaZia für Sie tut“ */
.rg h4 { margin: 0 0 8px; font-family: var(--font-body, 'Poppins', sans-serif); font-size: .68rem;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted, #64748b); }
.rg-haupt { padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.rg-gruppe { margin-bottom: 16px; }
.rg-zeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 8px 0;
  min-height: 34px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.rg-name { font-size: .9rem; color: var(--cd-navy-text, #0f1f36); min-width: 0; }
/* Drei gleich breite Plätze je Reihe, in jeder Zeile an derselben Stelle. */
.rg-reihe { --rg-platz: 96px; display: grid; grid-template-columns: repeat(3, var(--rg-platz)); flex: none; }
.rg-platz { display: block; }
.rg-stufe { all: unset; box-sizing: border-box; cursor: pointer; height: 30px; display: flex; align-items: center;
  justify-content: center; font-size: .76rem; border: 2px solid var(--cd-sage, #9aaba6);
  margin-left: -2px; color: var(--cd-navy-text, #0f1f36); background: var(--bg-card, #fff); white-space: nowrap; }
.rg-reihe > :first-child { margin-left: 0; }
.rg-stufe.breit { grid-column: 1 / -1; }
@media (max-width: 480px) { .rg-reihe { --rg-platz: 82px; } .rg-zeile { flex-wrap: wrap; } }
.rg-stufe.an { background: var(--cd-navy, #0f1f36); border-color: var(--cd-navy, #0f1f36); color: #fff; }
.rg-stufe[disabled] { cursor: default; opacity: .6; }
.rg-fest { font-size: .78rem; color: var(--text-muted, #64748b); }
/* Gesperrt: nur das Schloss (Ansage Neo 22.09.2026). Der Grund steht in
   einem kleinen Feld, das beim Überfahren oder Antippen aufgeht. */
.rg-schloss { all: unset; position: relative; box-sizing: border-box; width: calc(3 * var(--rg-platz, 96px) - 4px);
  height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: help;
  border: 2px dashed var(--border-subtle, #e2e8f0); color: var(--text-muted, #64748b); font-size: .76rem; flex: none; }
.rg-schloss svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.rg-grund { position: absolute; z-index: 20; right: 0; top: calc(100% + 8px); width: 260px; box-sizing: border-box;
  padding: 10px 12px; background: var(--bg-card, #fff); border: 2px solid var(--cd-sage, #9aaba6);
  box-shadow: 0 6px 20px rgba(15,31,54,.12); color: var(--cd-navy-text, #0f1f36); font-size: .8rem;
  line-height: 1.45; text-align: left; white-space: normal; opacity: 0; visibility: hidden;
  transition: opacity .15s ease; pointer-events: none; }
.rg-schloss:hover .rg-grund, .rg-schloss:focus .rg-grund { opacity: 1; visibility: visible; }
.rg-schloss:hover, .rg-schloss:focus { border-color: var(--cd-sage, #9aaba6); color: var(--cd-navy-text, #0f1f36); }
.rg-reihe-wrap { --rg-platz: 96px; display: flex; flex: none; }
@media (max-width: 480px) { .rg-reihe-wrap { --rg-platz: 82px; } }
[data-theme="dark"] .rg-grund { background: #16202f; color: #e2e8f0; }
.vg-text { width: 100%; box-sizing: border-box; font-family: inherit; font-size: .9rem; padding: 8px;
  border: 2px solid var(--cd-sage, #9aaba6); }
.vg-an { margin: 0; } .vg-an span { color: var(--text-muted, #64748b); margin-left: .4rem; }

/* Die Lage, zweiter Teil (21.09.2026): Sachen mit eigenem Knopf */
.lz-leise { all: unset; cursor: pointer; padding: 3px 8px; font-size: .74rem; color: var(--cd-navy-text, #0f1f36);
  border: 1px solid var(--cd-sage, #9aaba6); }
.lz-zahl { min-width: 20px; font-weight: 700; }
.vg-frage { margin: 0; padding: 8px 10px; background: #f7fafc; border: 1px solid var(--border-subtle, #e2e8f0);
  white-space: pre-wrap; font-size: .9rem; }
.br-merken { all: unset; cursor: pointer; margin-left: 10px; padding: 6px 10px; font-size: .78rem;
  border: 2px solid var(--cd-sage, #9aaba6); color: var(--cd-navy-text, #0f1f36); }
.br-merken:hover { background: rgba(154,171,166,.2); }

/* „Auf die Liste“ steht im Navy-Band des Berichts: helle Kante, weiße Schrift. */
.br-satz .br-merken { color: #fff; border-color: rgba(255,255,255,.55); white-space: nowrap; }
.br-satz .br-merken:hover { background: rgba(255,255,255,.14); }


/* ══ 21.09.2026 abends: das Büro bleibt, alles kommt von rechts ═════ */
/* Ein ganzes Blatt braucht mehr Platz als ein Datensatz — das Büro bleibt
   links sichtbar, ein Klick darauf schliesst das Paneel. */
/* EIN Mass für jedes Paneel — die Klasse `breit` macht nichts mehr breiter
   (Ansage Neo 22.09.2026: „das rechte Paneel darf nie breiter sein“). */
.zc-side-panel.breit.active { right: 0; }
.zc-sp-zurueck { all: unset; box-sizing: border-box; cursor: pointer; width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.zc-sp-zurueck[hidden] { display: none; }
.zc-sp-zurueck:hover { background: rgba(255,255,255,.26); }
#seitenpanel .zc-sp-header h3 { flex: 1; }

/* Das Themenblatt: EIN Mass für alle Felder, Fase wie im ganzen Haus */
.ks-gruppen { align-items: start; }
.ks-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 1250px) { .ks-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ks-feld { all: unset; box-sizing: border-box; cursor: pointer; height: 42px; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px 0 12px;
  background: var(--bg-card, #fff); border: 2px solid var(--cd-sage, #9aaba6);
  border-radius: 10px 0 10px 0; font-size: .82rem; color: var(--cd-navy-text, #0f1f36); }
@supports (corner-shape: bevel) { .ks-feld { corner-shape: bevel; } }
.ks-feld:hover { border-color: var(--cd-navy, #0f1f36); }
.ks-feld.haupt { background: var(--cd-navy, #0f1f36); border-color: var(--cd-navy, #0f1f36); color: #fff; }
.ks-feld.haupt:hover { background: #1a3358; }
.ks-feld.ungebucht { opacity: .55; border-style: dashed; }
.ks-feld .ks-name { font-family: var(--font-body, 'Poppins', sans-serif); font-size: .82rem; color: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ks-feld.haupt .ks-name { font-family: 'Playfair Display', Georgia, serif; font-size: .98rem; }
.ks-feld .ks-zahl { flex: none; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid var(--cd-sage, #9aaba6); }
.ks-feld .ks-zahl b { font-size: .72rem; font-weight: 700; color: inherit; }
.ks-feld.haupt .ks-zahl { border-color: rgba(255,255,255,.55); }
.ks-feld .ks-zahl.warnt { border-color: var(--rostrot, #a0341a); background: var(--rostrot, #a0341a); color: #fff; }
.ks-feld .ks-zahl.warnt b { color: #fff; }
.ks-feld.haupt .ks-zahl.warnt { border-color: #dd6c51; background: #a0341a; }
.ks-legende { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 0;
  font-size: .74rem; color: var(--text-muted, #64748b); }
.ks-legende span:nth-child(even) { margin-right: 14px; }
.ks-punkt { width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--cd-sage, #9aaba6); border-radius: 50%; }
.ks-punkt.navy { background: var(--cd-navy, #0f1f36); border-color: var(--cd-navy, #0f1f36); border-radius: 0; }
.ks-punkt.rot { background: var(--rostrot, #a0341a); border-color: var(--rostrot, #a0341a); }
[data-theme="dark"] .ks-feld { background: #16202f; color: #e2e8f0; }
[data-theme="dark"] .ks-feld.haupt { background: #22344f; border-color: #22344f; }

/* Die Lage: DREI Kästen mit Abstand und Fase, kein grosses Feld mehr
   (Ansage Neo: „das ist ein riesiges Feld … nicht unser Design“). */
.lage { background: transparent; border: none; padding: 0; }
.lage-kopf { margin: 2px 2px 8px; }
.lage-drei { gap: 12px; }
/* 22.09.2026 neu (Ansage Neo: „neutraler und cleaner“): drei ruhige Spalten
   wie das Tagesblatt der Tafel — weiß, feine Linie, Überschrift in Playfair,
   Zeilen ohne Grund und ohne Farbrand, kein Rot. */
.lage-stapel { background: var(--bg-card, #fff); border: 2px solid var(--cd-sage, #9aaba6);
  border-radius: var(--fase-gross, 14px) 0 var(--fase-gross, 14px) 0; padding: 14px 16px 10px; gap: 0; }
@supports (corner-shape: bevel) { .lage-stapel { corner-shape: bevel; } }
.lage-stapel h4 .lage-regler { margin-left: auto; font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: .78rem; font-weight: 500; }
.lage-stapel h4 { margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--cd-navy-text, #0f1f36); gap: 10px; }
.lage-stapel .lage-zahl { border: 0; border-radius: 0; min-width: 0; height: auto; padding: 0;
  font-family: var(--font-body, 'Poppins', sans-serif); font-size: .82rem; font-weight: 500;
  color: var(--text-muted, #64748b); }
.lage-stapel .lage-zeile { background: none; padding: 8px 0; font-size: .86rem;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.lage-stapel .lage-zeile:last-of-type { border-bottom: 0; }
.lage-stapel .lage-zeile:hover { background: none; }
.lage-stapel .lage-zeile:hover .lz-was { text-decoration: underline; text-decoration-color: var(--cd-sage, #9aaba6);
  text-underline-offset: 3px; }
.lage-stapel .lage-zeile.mit-knopf { padding: 5px 0; }
.lage-stapel .lz-oeffnen { padding: 3px 0; }
.lage-stapel .lz-oeffnen:hover { background: none; }
.lage-stapel .lz-ja { background: none; color: var(--cd-navy-text, #0f1f36); border: 1px solid var(--cd-navy, #0f1f36);
  font-weight: 500; padding: 3px 10px; }
.lage-stapel .lz-ja:hover { background: var(--cd-navy, #0f1f36); color: #fff; }
.lage-stapel .lage-alle { color: var(--text-muted, #64748b); padding: 8px 0 2px; }
.lage-stapel .lage-alle:hover { color: var(--cd-navy-text, #0f1f36); }
.lage-stapel .lage-leer { padding: 8px 0; }
[data-theme="dark"] .lage-stapel { border-color: #22344f; }
[data-theme="dark"] .lage-stapel h4, [data-theme="dark"] .lage-stapel .lage-zeile { color: #e2e8f0; border-color: #22344f; }
[data-theme="dark"] .lage-stapel .lz-ja { color: #e2e8f0; border-color: #e2e8f0; }
.lage-im-paneel .lage-stapel { border: none; padding: 0; border-radius: 0; background: transparent; }
[data-theme="dark"] .lage { background: transparent; }
[data-theme="dark"] .lage-stapel { background: #16202f; }

.lz-fest { flex: none; white-space: nowrap; color: var(--text-muted, #64748b); }
.lage-zeile .lz-was { flex: 0 1 auto; }
.lage-zeile .lz-wer { flex: 0 2 auto; min-width: 0; }
.lage-zeile.mit-knopf .lz-ja { margin-left: auto; flex: none; }
/* „Veranstaltungen“ muss ins Feld passen (gemessen bei 1440 px: 142 px je Feld) */
.ks-feld { padding: 0 8px 0 10px; }
.ks-feld .ks-name { font-size: .78rem; }
.ks-feld .ks-zahl { min-width: 20px; height: 20px; padding: 0 4px; }
.ks-feld .ks-zahl b { font-size: .68rem; }

.ks-feld.lang .ks-name { font-size: .72rem; letter-spacing: -.01em; }

/* Gerechnete Zahlen einer Meldung (22.09.2026) */
.mg-tabelle { width: 100%; border-collapse: collapse; font-size: .82rem; color: var(--cd-navy-text, #0f1f36); }
.mg-tabelle th { text-align: left; font-weight: 600; font-size: .72rem; color: var(--text-muted, #64748b);
  padding: 4px 8px 6px 0; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.mg-tabelle td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.mg-tabelle tr:last-child td { border-bottom: 0; }
.mg-tabelle .zahl { text-align: right; white-space: nowrap; font-variant-numeric:lining-nums tabular-nums; }
.mg-hinweise { margin: 0; padding-left: 1.1rem; font-size: .82rem; line-height: 1.5; color: var(--cd-navy-text, #0f1f36); }
[data-theme="dark"] .mg-tabelle, [data-theme="dark"] .mg-hinweise { color: #e2e8f0; }

/* Das Paneel rechts halb so breit (Ansage Neo 22.09.2026: „geht mir zu weit
   ins Cockpit rein, gern 50 % kürzer“). Nur hier im Hofbüro — der ZCore
   bleibt, wie er ist. Vorher: clamp(420px, 50vw, 860px). */
/* Ein Mass für alle Paneele: 760 px bei 1600 px Fensterbreite, nie mehr
   als 900 px (22.09.2026). */
.zc-side-panel, .zc-side-panel.breit { width: clamp(560px, 47.5vw, 900px); right: -52%; }
@media (max-width: 768px) { .zc-side-panel, .zc-side-panel.breit { width: 100%; right: -100%; } }

/* Im schmalen Paneel steht die Beschriftung über der Tabelle — sonst bleibt
   für Wein, Farbe, Liter und Flaschen zu wenig Platz (22.09.2026). */
.sp-feld:has(.mg-tabelle), .sp-feld:has(.mg-hinweise) { display: block; }
.sp-feld:has(.mg-tabelle) > label, .sp-feld:has(.mg-hinweise) > label { display: block; margin-bottom: 6px; }
.sp-feld:has(.mg-tabelle) > .sp-fest { display: block; overflow-x: auto; }
.mg-tabelle td:first-child { word-break: break-word; }

/* Feste Spaltenbreiten, damit auch die letzte Spalte im schmalen Paneel
   sichtbar bleibt (22.09.2026). */
.mg-tabelle { table-layout: fixed; font-size: .78rem; }
.mg-tabelle th, .mg-tabelle td { padding-right: 6px; }
.mg-tabelle th:first-child, .mg-tabelle td:first-child { width: 44%; }

/* Fase des Hauses — scripts/fase-umbau.py, 23.09.2026: oben links und unten rechts abgeschnitten, nie rund. Ohne corner-shape bleibt die Ecke spitz. */
@supports (corner-shape: bevel) {
  .br-leg i { border-radius: 5px 0 5px 0; corner-shape: bevel; }
  .mh-zahl { border-radius: 5px 0 5px 0; corner-shape: bevel; }
}

/* Hakenliste im Seitenfenster (24.09.2026) — zuerst für die 14 Allergene. */
.sp-haken { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.sp-haken-zeile { display: flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; }
.sp-haken-zeile input { width: auto; margin: 0; }
.sp-haken-zeile.vielleicht { outline: 1px dashed var(--cd-sage, #9aaba6); outline-offset: 2px; }
.sp-haken .sp-vorschlag { grid-column: 1 / -1; font-size: .82rem; color: var(--text-muted, #4a5568); margin: 6px 0 0; }

/* Bilder eines Angebots (01.10.2026) */
.eb-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:12px}
.eb-kachel{border:2px solid var(--sage,#9aaba6);border-radius:6px 0 6px 0;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.eb-kachel img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.eb-kachel span{font-size:12.5px;padding:5px 8px 0;color:#5b6b80}
.eb-kachel button{margin:4px 8px 8px;align-self:flex-start;border:0;background:none;color:#a0341a;font:inherit;font-size:13px;cursor:pointer;padding:0}
.eb-leer{border:2px dashed var(--sage,#9aaba6);border-radius:6px 0 6px 0;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:#5b6b80;font-size:13px}
.eb-haken{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:6px 0}
.eb-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}

/* Master: Zahlen über alle Betriebe (01.10.2026) */
.mz-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:12px 0 18px}
.mz-kachel{border:2px solid var(--sage,#9aaba6);border-radius:8px 0 8px 0;padding:10px 12px;background:#fff;display:flex;flex-direction:column;gap:2px}
.mz-kachel span{font-size:12.5px;color:#5b6b80}.mz-kachel b{font-size:22px;color:#0f1f36;font-weight:600}
.mz-trend{font-size:12.5px;font-weight:600}.mz-trend.auf{color:#276749}.mz-trend.ab{color:#a0341a}
.mz-reihe{display:flex;align-items:flex-end;gap:2px;height:90px;border-bottom:1px solid #e2e8f0;margin-bottom:16px}
.mz-reihe i{flex:1;background:#0f1f36;min-height:2px}
.mz-zwei{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mz-zeile{display:grid;grid-template-columns:1fr auto;gap:8px;padding:6px 0;border-bottom:1px solid #e2e8f0;font-size:14px;position:relative}
.mz-zeile i{grid-column:1/-1;height:4px;background:#9aaba6;display:block}
.mz-vor{display:inline-flex;gap:6px;align-items:center;font-size:13px;margin-left:10px}
@media (max-width:720px){.mz-zwei{grid-template-columns:1fr}}

/* Bericht Vino (01.10.2026) */
.br-tabelle{width:100%;border-collapse:collapse;font-size:14px}
.br-tabelle th,.br-tabelle td{padding:7px 8px;border-bottom:1px solid #e2e8f0;text-align:right}
.br-tabelle th:first-child,.br-tabelle td:first-child{text-align:left}
.br-radar p{margin:6px 0;font-size:14px}
.kn-code{width:100%;font:13px/1.4 ui-monospace,Menlo,monospace;border:2px solid var(--sage,#9aaba6);padding:8px;margin:6px 0;resize:none}

/* Ziffern stehen gerade, auch in Playfair (Ansage Master 16.10.2026). */
*,*::before,*::after{font-variant-numeric:lining-nums}