:root {
  /* CI S-A-S Schankanlagenservice-Süd — Marken-Navy/Gold/Kupfer/gedämpftes Rot-Orange */
  --bg: #f2f1ec;
  --panel: #ffffff;
  --ink: #01152b;
  --muted: #6b7686;
  --line: #e6dfd0;
  --brand: #ebb42c;       /* Marken-Gold */
  --brand-dk: #c89620;
  --accent: #b47049;      /* Kupfer, Sekundärakzent (Avatare u.ä.) */
  --ring: rgba(235,180,44,.28);
  --ok-bg: #e6f4ea; --ok-ink: #1e7d3a;
  --err-bg: #f5e3dc; --err-ink: #b24d34;
  --warn-bg: #fff6e0; --warn-ink: #8a6d12;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(1,21,43,.06), 0 4px 16px rgba(1,21,43,.07);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--brand-dk); text-decoration: none; }
a:hover { text-decoration: underline; }

header.topbar {
  background: linear-gradient(95deg, #01152b 0%, #0e2034 100%);
  color: #fff; padding: 13px 26px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 2px 12px rgba(1,21,43,.18);
  position: sticky; top: 0; z-index: 100;
}
/* Sticky Kopfzeile würde Sprungziele (Direkthilfe-Anker, #hash-Links) sonst verdecken. */
[id] { scroll-margin-top: 80px; }
header.topbar .brand { font-weight: 800; letter-spacing: .5px; font-size: 19px; color: #fff; }
header.topbar .brand b { color: var(--brand); }
header.topbar .sub { color: #9db0c4; font-size: 13px;
  border-left: 1px solid rgba(255,255,255,.25); padding-left: 16px; }
header.topbar nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
header.topbar nav > a { color: #e8ecf1; font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 6px;
  white-space: nowrap; /* sonst bricht "Material ↗" um und zieht die ganze Leiste in die Höhe */ }
header.topbar nav > a:hover { color: var(--brand); text-decoration: none; background: rgba(255,255,255,.07); }

.nav-user { color: #9db0c4; font-size: 13px; padding: 6px 8px; opacity: .75; }
.nav-logout { margin-left: 2px; color: #d49485 !important; border: 1px solid rgba(255,100,80,.35); }

/* Eigener Tooltip statt Browser-Standard (title-Attribut lässt sich nicht umfärben) */
.icon-tip { position: relative; }
/* Rechtsbuendig statt mittig: Die Symbole stehen am rechten Rand der Kopfzeile, ein
   zentrierter Kasten ragte dort ueber die Seite hinaus und erzeugte -- unsichtbar, weil
   durchsichtig -- eine waagerechte Bildlaufleiste (gefunden am 08.09.2026 bei 1000 px). */
.icon-tip::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); right: 0; transform: translateY(-4px);
  background: #0e2034; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap;
  padding: 6px 10px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 300;
}
.icon-tip:hover::after, .icon-tip:focus-visible::after { opacity: 1; transform: translateY(0); }
.nav-logout:hover { background: rgba(255,100,80,.12) !important; color: #d49485 !important; }

/* Dropdown */
.dropdown { position: relative; }
.dropbtn {
  color: #e8ecf1; font-size: 14px; font-weight: 500;
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  user-select: none;
}
.dropbtn::after { content: '▾'; font-size: 10px; opacity: .7; transition: transform .15s; }
.dropdown.open .dropbtn { color: var(--brand); background: rgba(255,255,255,.07); }
.dropdown.open .dropbtn::after { transform: rotate(-180deg); }
.dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
  background: #0e2034; border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  min-width: 190px; padding: 6px 0; white-space: nowrap;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block; padding: 8px 16px;
  color: #e8ecf1; font-size: 14px; font-weight: 400;
}
.dropdown-menu a:hover { color: var(--brand); background: rgba(255,255,255,.07); text-decoration: none; }
.dropdown-menu .sep { border-top: 1px solid rgba(255,255,255,.1); margin: 5px 0; }

/* Hamburger-Menü: am grossen Bildschirm unsichtbar, sonst der Weg in die Navigation.
   Frueher haing das an einer festen Breite (`max-width: 1100px`). Die Zahl stammte aus der
   Zeit, als die Leiste sechs Punkte hatte; inzwischen sind es neun plus Notiz, Lupe, Hilfe,
   Einstellungen, Benutzer und Abmelden. Auf Renés Tablet (1280 px, 08.09.2026) griff die
   Regel deshalb nicht mehr: Die Leiste lief rechts aus dem Bild, der Browser zoomte die
   ganze Seite heraus, damit der Ueberhang sichtbar wird -- daher der weisse Streifen rechts
   und die winzige Schrift.

   Statt einer neuen Zahl misst `base.html` jetzt nach dem Laden, ob die Leiste in ihre
   Zeile passt, und setzt `kompakt` am Kopf, wenn nicht. Damit stimmt die Umschaltung auch
   dann noch, wenn wieder ein Menuepunkt dazukommt. */
.nav-toggle { display: none; }

header.topbar.kompakt { padding: 11px 16px; gap: 10px; flex-wrap: wrap; }
header.topbar.kompakt .sub { display: none; }

header.topbar.kompakt .nav-toggle {
  display: block; margin-left: auto;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: #e8ecf1; font: inherit; font-size: 20px; line-height: 1;
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
}
header.topbar.kompakt .nav-toggle[aria-expanded="true"] { background: rgba(255,255,255,.16); color: var(--brand); }

header.topbar.kompakt nav {
  display: none; margin-left: 0; flex-basis: 100%;
  flex-direction: column; align-items: stretch; gap: 0;
  margin-top: 10px; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.14);
  max-height: calc(100vh - 120px); overflow-y: auto;
}
header.topbar.kompakt nav.offen { display: flex; }

header.topbar.kompakt nav > a, header.topbar.kompakt .dropbtn {
  padding: 12px 6px; font-size: 15px; border-radius: 6px; }
header.topbar.kompakt .dropdown { width: 100%; }
header.topbar.kompakt .dropbtn { justify-content: space-between; }

header.topbar.kompakt .dropdown-menu {
  position: static; min-width: 0; width: 100%;
  background: rgba(255,255,255,.05); border: 0; border-radius: 6px;
  box-shadow: none; padding: 2px 0 4px; margin: 2px 0 4px;
}
header.topbar.kompakt .dropdown-menu a { padding: 11px 6px 11px 22px; }

header.topbar.kompakt .nav-user { padding: 12px 6px; }
header.topbar.kompakt .nav-logout { margin-left: 0; text-align: center; margin-top: 6px; }

/* Nur waehrend des Messens (ein Wimpernschlag, der Browser zeichnet dazwischen nicht):
   Die Tooltips an „?" und „⚙" sind schwebende Kaesten, die weit ueber ihr Symbol
   hinausragen -- sie liessen den Kopf am 08.09.2026 auch am grossen Bildschirm als „zu eng"
   erscheinen, und der PC bekam faelschlich das Hamburger-Menue. Und nichts darf schrumpfen:
   Ein geschrumpftes Flex-Kind sieht von aussen aus, als paesse es, waehrend seine
   Beschriftung laengst ueberlaeuft. */
header.topbar.messen { flex-wrap: nowrap; }
header.topbar.messen nav { flex-wrap: nowrap; }
header.topbar.messen > *, header.topbar.messen nav > * { flex-shrink: 0; }
header.topbar.messen .icon-tip::after { display: none; }

/* Dritte Stufe, aber nur am Rechner (René, 08.09.2026: „Bau eine Unterscheidung PAD vs.
   PC"): Passt die Leiste selbst eng geschnuert nicht mehr in eine Zeile, bricht sie in eine
   zweite um. Am Rechner bleibt damit jeder Punkt sichtbar -- das Menue hinter „☰" ist dort
   ein Rueckschritt, mit der Maus will man die Leiste sehen. Auf Tablet und Handy gilt
   weiterhin das Gegenteil: Dort ist die Liste unter dem Schalter der bessere Weg. */
header.topbar.umbruch { flex-wrap: wrap; }
header.topbar.umbruch nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }

/* Zwischenstufe: Bevor die ganze Leiste ins Menue wandert, wird sie erst einmal enger
   geschnuert. Ein Laptop mit 1440 px verliert damit nur den Untertitel und etwas Luft
   zwischen den Punkten, statt die komplette Navigation hinter einem Schalter zu verstecken. */
header.topbar.eng { padding: 13px 14px; gap: 10px; }
header.topbar.eng .sub { display: none; }
header.topbar.eng nav { gap: 0; }
header.topbar.eng nav > a, header.topbar.eng .dropbtn { padding: 6px 7px; font-size: 13.5px; }
header.topbar.eng .nav-user { padding: 6px 4px; }

/* Tooltips gibt es auf dem Handy nicht — die Beschriftung wandert neben das Symbol,
   damit "?" und "⚙" in der Liste nicht als nackte Zeichen dastehen. */
header.topbar.kompakt .icon-tip { display: flex; align-items: center; gap: 8px; }
header.topbar.kompakt .icon-tip::after {
  position: static; transform: none; opacity: 1;
  background: none; box-shadow: none; padding: 0;
  font-size: 15px; font-weight: 500; color: inherit;
}


/* Volle Bildschirmbreite (René, 02.09.2026) -- vorher standen hier 1080 px, seit dem
   allerersten Commit und nie hinterfragt. Auf einem breiten Bildschirm blieben links und
   rechts je 400 px leer, waehrend 13 Vorlagen ihre Tabellen *innerhalb* der Spalte
   waagerecht scrollen liessen. Der Deckel wandert dorthin, wo er hingehoert: an die
   Formularbloecke weiter unten. */
/* Seitenleiste mit Favoriten (René, 02.09.2026) und der Inhalt daneben.
   `min-width: 0` am Hauptteil ist die Zeile, ohne die es nicht geht: Ein Flex-Kind darf sonst
   nicht schmaler werden als sein Inhalt, und eine breite Tabelle wuerde die Seitenleiste aus
   dem Bild schieben, statt selbst zu scrollen. */
.rahmen { display: flex; align-items: flex-start; gap: 0; }
.rahmen > main { flex: 1; min-width: 0; }

.favleiste {
  flex: 0 0 208px; position: sticky; top: 78px; align-self: flex-start;
  margin: 28px 0 28px 20px; padding: 12px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: calc(100vh - 110px); overflow-y: auto;
}
.favkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 0 8px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.favkopf span { font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); }
.favkopf a { font-size: 12px; color: var(--muted); }
.favleiste nav { display: grid; gap: 2px; }
.favleiste nav a {
  display: flex; align-items: center; min-height: 44px; padding: 6px 10px;
  border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: none; line-height: 1.25;
}
.favleiste nav a:hover { background: var(--ring); text-decoration: none; }
.favleiste nav a.aktiv { background: var(--brand); color: #01152b; font-weight: 700; }

/* Zurueck-Knopf und Merk-Knopf teilen sich eine Zeile. */
.hauptzeile { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.hauptzeile .back-btn { margin-bottom: 0; }
.merkform { margin-left: auto; }

/* Auf schmalen Geraeten hat eine Seitenleiste keinen Platz -- dort waere sie ein Block ueber
   dem Inhalt, den man jedes Mal wegscrollt. Die Favoriten bleiben ueber „verwalten"
   erreichbar. */
@media (max-width: 900px) {
  .favleiste { display: none; }
}

main { margin: 28px auto; padding: 0 26px; }
h1 { font-size: 24px; margin: 0 0 4px; }
.lead { color: var(--muted); margin: 0 0 24px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.card .num { font-size: 30px; font-weight: 800; color: var(--brand-dk); line-height: 1; }
.card .lbl { color: var(--muted); font-size: 13px; margin-top: 6px; text-transform: uppercase; letter-spacing: .4px; }

.card.filter { cursor: pointer; text-align: left; font: inherit; width: 100%; transition: box-shadow .15s, border-color .15s; }
.card.filter:hover { border-color: var(--brand-dk); }
.card.filter.active { border-color: var(--brand-dk); border-width: 2px; box-shadow: 0 0 0 2px rgba(0,0,0,.04) inset; }

.card.blink { animation: card-blink 1.4s ease-in-out infinite; }
@keyframes card-blink {
  0%, 100% { box-shadow: var(--shadow); background: var(--panel); }
  50%      { box-shadow: 0 0 0 2px var(--err-ink); background: var(--err-bg); }
}

.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.err { background: var(--err-bg); color: var(--err-ink); }

table { width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { background: #fbf0d9; color: var(--ink); font-weight: 700; }
th a.sortlink { color: inherit; white-space: nowrap; cursor: pointer; }
th a.sortlink:hover { text-decoration: underline; }
tr:last-child td { border-bottom: 0; }
/* Tour ohne hinterlegtes Lokal -> rot markieren */
tr.tour-leer td { background: var(--err-bg); }
tr.tour-leer td, tr.tour-leer input { color: var(--err-ink); }
tbody tr.clickable:hover { background: #fbf0d9; }

.btn { display: inline-block; background: var(--brand); color: #01152b; border: 0; border-radius: 10px;
  padding: 10px 18px; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--brand-dk); color: #fff; text-decoration: none; }
/* Kein weisser Knopf mehr (René, 09.09.2026): "unser sollten Goldgelb sein. Bitte auch
   alle anderen weissen aendern" -- und der Grund gleich dazu: "Die weissen sind zu
   unscheinbar und nicht immer weiss man, das man da draufklicken muss. Bei den goldenen
   ist es klarer."

   Die Geister-Variante war als leisere Stufe fuer Nebenaktionen gedacht. Auf dem Bildschirm
   sah sie aber aus wie ein abgeschalteter Knopf -- und ein Bedienelement soll aussehen wie
   eines. Die Klasse bleibt bestehen, damit keins der 372 Vorkommen in den Templates
   angefasst werden muss; sie faerbt nur nicht mehr weiss. Wer eine leisere Stufe braucht,
   nimmt die kleinere Groesse (btn-sm), nicht die fehlende Farbe. */
.btn.ghost { background: var(--brand); border: 0; color: #01152b; }
.btn.ghost:hover { background: var(--brand-dk); color: #fff; }

.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; font-weight: 500; }
.flash.ok { background: var(--ok-bg); color: var(--ok-ink); }
.flash.err { background: var(--err-bg); color: var(--err-ink); }
.flash.warn { background: var(--warn-bg); color: var(--warn-ink); }

/* Formulare */
/* Formulare wachsen nicht mit.
   Seit `main` die volle Breite hat, wuerde ein zweispaltiges Formular auf einem breiten
   Bildschirm zwei Spalten zu je 1200 px ergeben -- jedes Eingabefeld ist `width: 100%`. Ein
   halber Meter fuer eine Rechnungsnummer liest sich schlechter, nicht besser. 1100 px ist
   genau die Breite, die die Formulare vorher hatten; sichtbar aendert sich an ihnen nichts. */
form.stack { display: grid; gap: 12px; max-width: 1100px; }

/* Seiten, auf denen Bloecke mit und ohne eigenes Formular nebeneinander stehen.
   Ohne diesen Container sind die Bloecke IM Formular 1100px breit und die daneben
   so breit wie das Fenster -- auf der Einstellungsseite waren das sechs von
   dreizehn (Rene, 01.10.2026: "die beiden ersten Bloecke breiter sind als alle
   anderen"). Dieselbe Zahl wie oben, damit beide Begrenzungen uebereinstimmen. */
.seitenbreite { max-width: 1100px; }
/* Ausser das Formular enthaelt selbst eine Tabelle -- die braucht den Platz. Heute trifft das
   nur den Serienbrief; ueber `:has()` gilt es auch fuer jedes kuenftige, ohne dass jemand
   daran denken muss. */
form.stack:has(table) { max-width: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; max-width: 1100px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 18px; max-width: 1100px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 3px; font-weight: 600; }
/* `input:not([type])` gehoert mit in die Liste: Ohne type-Angabe ist ein Feld laut
   HTML ein Textfeld, greift aber durch jeden input[type=text]-Selektor hindurch. Genau
   daran war das Empfaengerfeld der Stoerungsrechnung schmaler als seine Nachbarn
   (Rene, 2026-08-18) -- und vorher schon das Datumsfeld. */
input:not([type]),
input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url],
input[type=time], input[type=date], input[type=password],
/* datetime-local/search/month/week gehoeren mit in die Aufzaehlung: Ein Typ, der hier fehlt,
   faellt still auf den Browser-Standard zurueck und steht dann sichtbar kleiner neben den
   anderen Feldern (René, 2026-08-17 zum Datumsfeld der Kundenakte). */
input[type=datetime-local], input[type=search], input[type=month], input[type=week],
select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: #fff; color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
/* Auswahlfelder brauchen ihr Pfeilchen -- appearance:none haette es mitgenommen. */
select { -webkit-appearance: auto; appearance: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ring); border-color: var(--brand); }
textarea { min-height: 60px; resize: vertical; }
.chk { display: flex; align-items: center; gap: 8px; }
.chk input { width: auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 20px; }
.panel h2 { margin: 0 0 14px; font-size: 17px; }
.panel details summary { cursor: pointer; margin-bottom: 14px; }
.panel details[open] summary { margin-bottom: 14px; }
.panel details summary h2 { display: inline; margin: 0; }
.notiz-gruppe { margin-bottom: 22px; }
.notiz-gruppe:last-child { margin-bottom: 0; }
.notiz-gruppe summary { cursor: pointer; margin-bottom: 10px; }
.notiz-gruppe h3 { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.notiz-gruppe table { margin-top: 10px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar input[type=text], .toolbar select { width: auto; min-width: 200px; }
.btn-sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn-icon { padding: 5px 8px; line-height: 1; }
.back-btn { margin-bottom: 16px; }
.btn-active { background: var(--brand); color: #01152b; }
.btn.danger { background: #f5e3dc; color: #b24d34; }
.btn.danger:hover { background: #b24d34; color: #fff; }
.muted { color: var(--muted); font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
code.tok { background: #fbf0d9; padding: 2px 7px; border-radius: 6px; font-size: 13px; }

/* Direkthilfe-Modus: "?" anklicken, dann auf eine Spaltenüberschrift zeigen */
body.hilfe-modus, body.hilfe-modus * { cursor: help !important; }
body.hilfe-modus [data-hilfe]:hover { background: var(--brand); color: #01152b; border-radius: 6px; }
.stack details p { transition: background-color 1.2s ease; border-radius: 6px; }
.hilfe-highlight { background-color: rgba(235, 180, 44, .35) !important; }
mark.hilfe-treffer { background: var(--brand); color: #01152b; border-radius: 3px; padding: 0 1px; }

/* === Tourenplan (optische Ansicht) === */
.tourgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
.tourcard { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .08s, box-shadow .12s; }
.tourcard:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(1,21,43,.13); }
.tourcard .tname { font-size: 17px; font-weight: 800; margin-bottom: 10px; line-height: 1.25; }
.tourcard .trow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tourcard .av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: 0 0 auto; }
.tourcard .bn { font-size: 13.5px; color: var(--muted); }
.tourcard .bn b { color: var(--ink); display: block; font-size: 14.5px; }
.tourcard .stats { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px;
  font-size: 12.5px; font-weight: 600; background: #fbf0d9; color: var(--ink); }
.pill.ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill.open { background: var(--warn-bg); color: var(--warn-ink); }
.wd { display: inline-block; background: var(--ink); color: #fff; border-radius: 8px; padding: 2px 9px;
  font-size: 12px; font-weight: 700; margin-left: 6px; vertical-align: middle; }

/* Timeline der Stationen */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl:before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl li { position: relative; padding: 0 0 14px 54px; }
.tl .num { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; z-index: 1; box-shadow: 0 0 0 4px var(--bg); }
.tl .num.done { background: var(--ok-ink); color: #fff; }
.stbox { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--shadow); }
.stbox .sh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stbox .nm { font-size: 16.5px; font-weight: 700; }
.stbox .zeit { color: var(--brand-dk); font-weight: 700; font-size: 14px; }
.stbox .adr { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.stbox .chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.stbox .chips .anlage-zeile { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip2 { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 8px; background: #fbf0d9; color: var(--ink); }
.chip2.bier { background: #f6e2b8; } .chip2.afg { background: #d9ecf6; } .chip2.postmix { background: #e6dcf6; }
.chip2.wasser { background: #d9f0ee; }
.stbox .extra { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); }
.stbox .extra a { color: var(--brand-dk); }
.stbox .key { color: #8a6d12; font-weight: 600; }

/* Kalender — Monatsraster */
.kalender-toolbar { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.kalender-legende { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.kalender-legende-eintrag { display: flex; align-items: center; gap: 6px; }
.kalender-legende-punkt { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(1,21,43,.15); }
.kalender-monat {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.kalender-kopf {
  background: var(--panel); padding: 8px 6px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
}
.kalender-tag {
  background: var(--panel); min-height: 108px; padding: 6px; display: flex; flex-direction: column;
  gap: 3px; overflow-y: auto;
}
.kalender-tag.ausserhalb { background: var(--bg); }
.kalender-tag.ausserhalb .kalender-tag-nummer { color: var(--muted); }
.kalender-tag.heute { box-shadow: inset 0 0 0 2px var(--brand-dk); }
.kalender-tag-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.kalender-tag-wochentag { display: none; font-size: 11px; color: var(--muted); font-weight: 700; }
.kalender-tag-nummer { font-size: 13px; font-weight: 700; }
.kalender-tag.heute .kalender-tag-nummer {
  background: var(--brand-dk); color: #fff; border-radius: 50%;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.kalender-termin {
  display: block; background: #fbf0d9; color: var(--ink); border-radius: 6px; padding: 2px 6px;
  font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kalender-termin:hover { text-decoration: none; background: var(--brand); }
.kalender-termin.ganztag { background: #d9ecf6; }
.kalender-termin-zeit { font-weight: 700; color: var(--brand-dk); margin-right: 3px; }

@media (max-width: 720px) {
  .kalender-monat { grid-template-columns: 1fr; }
  .kalender-kopf { display: none; }
  .kalender-tag { min-height: 0; flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
  .kalender-tag.ausserhalb { display: none; }
  .kalender-tag-kopf { flex-direction: column; align-items: flex-start; margin: 0 8px 0 0; min-width: 44px; }
  .kalender-tag-wochentag { display: block; }
  .kalender-tag > .kalender-termin { flex: 1 1 auto; }
}

footer.foot { margin: 40px auto 24px; padding: 0 26px; color: var(--muted); font-size: 12.5px; }

/* Link zur Nachbaranwendung Material. Abgesetzt, damit man sieht: hier verlaesst man SAS. */
.nav-extern { border: 1px solid rgba(120,190,255,.35); color: #8fc7f5 !important; }
.nav-extern:hover { background: rgba(120,190,255,.12) !important; }

/* Klappbare Kacheln auf der Einstellungsseite. Die Ueberschrift ist der Schalter; der Inhalt
   wird nur ausgeblendet, nicht entfernt - die Felder bleiben Teil des Formulars und werden
   beim Speichern mitgeschrieben. */
.kachel-kopf {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: .45em;
}
.kachel-kopf::before {
  content: "\25B8";           /* nach rechts = zugeklappt */
  font-size: .8em;
  opacity: .6;
}
.kachel-kopf-offen::before { content: "\25BE"; }   /* nach unten = offen */
.kachel-kopf:hover { text-decoration: underline dotted; }
.kachel-kopf:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }


/* ══════════════════════════════════════════════════════════════════════════
   Aus dem Einkauf uebernommen (01.09.2026, Zusammenlegen Stufe 3)

   Nur die Regeln, die es hier noch nicht gab: Klappmenue der Kopfzeile,
   Hinweis-Dialog, Waage-Leiste, Suchbox, Mengenlisten. Der gemeinsame Teil --
   Farben, Grundschrift, Kopfzeile -- steht oben und wurde bewusst NICHT noch
   einmal angehaengt: Sonst ueberschriebe dieser Block spaetere Aenderungen daran.
   ══════════════════════════════════════════════════════════════════════════ */

/* type=search gehoert dazu: Ohne den Selektor faellt das Feld auf den nackten
   Browser-Standard zurueck und steht dann sichtbar kleiner neben dem Dropdown --
   derselbe Fall wie beim Login-Feld am 2026-08-06, gemeldet fuer die Bestandsseite. */
input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url],
input[type=time], input[type=date], input[type=password], input[type=search],
select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: #fff; color: var(--ink);
}

/* Sonst zeichnet WebKit das Suchfeld weiterhin als abgerundete Kapsel und es passt trotz
   gleicher Masse optisch nicht zu den anderen Feldern. */
input[type=search] { -webkit-appearance: none; appearance: none; }

/* Die Artikelnummer ist die Kennung, nach der gesucht, gefragt und bestellt wird -- sie stand
   in der Stammdatenansicht als graue 13-px-Zeile unter dem Namen und in der Liste in normaler
   Tabellenschrift (René, 26.08.2026: „die Artikelnummer in der Artikelstammdatenansicht ist
   sehr klein"). Ziffern in Tabellenbreite, damit die Spalte untereinander bündig steht. */
.artikelnr {
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.artikelnr-gross {
  font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .01em; line-height: 1.2;
}

/* ==========================================================================
   Touch-Bedienung — greift auf Renés Android-Pad, nicht am Büro-Desktop
   ==========================================================================
   Bewusst über `pointer: coarse` statt über die Bildschirmbreite: ein 10-Zoll-
   Pad im Querformat meldet ~1280 px und bekäme sonst das Maus-Layout mit
   6-px-Tap-Zielen. `coarse` heißt „Finger statt Maus" und trifft damit genau
   den Fall — im Quer- wie im Hochformat.

   Richtwert für Tap-Ziele: 44 px (Apple HIG) bzw. 48 dp (Material Design).
   Wir nehmen 48 px, weil unterwegs oft im Stehen bedient wird.
   ========================================================================== */
@media (pointer: coarse) {

  /* --- Grundgrößen: nichts unter 16px, sonst zoomt Android beim Fokus rein --- */
  body { font-size: 16px; }

  /* --- Navigation --- */
  header.topbar { padding: 10px 20px; }
  header.topbar nav { gap: 4px; }
  header.topbar nav > a,
  .dropbtn {
    font-size: 16px;
    padding: 12px 16px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  .dropdown-inhalt a { padding: 14px 18px; font-size: 16px; min-height: 48px;
    display: flex; align-items: center; }
  .dropdown-inhalt { min-width: 240px; }

  /* Hover-Tooltips funktionieren auf Touch nicht — Fläche statt Schwebehilfe */
  .icon-tip::after, .icon-tip::before { display: none !important; }
  .icon-tip { min-width: 48px; justify-content: center; }

  /* --- Knöpfe --- */
  .btn {
    min-height: 48px;
    padding: 13px 22px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-sm { min-height: 44px; padding: 10px 16px; font-size: 15px; }
  .btn-icon { min-width: 48px; min-height: 48px; padding: 10px; font-size: 18px; }
  .toolbar { gap: 12px; }

  /* --- Formulare: große Felder, weil unterwegs oft im Stehen getippt wird --- */
  input[type=text], input[type=number], input[type=email], input[type=tel],
  input[type=url], input[type=time], input[type=date], input[type=password],
  input[type=search], select, textarea {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px;          /* unter 16px zoomt Android automatisch hinein */
  }
  select { background-image: none; }         /* Android zeichnet den Pfeil selbst */
  label { font-size: 15px; margin-bottom: 6px; }
  form.stack { gap: 18px; }
  .grid2, .grid3 { gap: 18px 20px; }

  /* Kästchen und Schalter groß genug zum Treffen */
  .chk { min-height: 48px; gap: 14px; }
  .chk input[type=checkbox], .chk input[type=radio] { width: 26px; height: 26px; }

  /* --- Tabellen: mehr Luft, damit Zeilen sicher zu treffen sind --- */
  th, td { padding: 14px 14px; font-size: 15px; }
  tbody tr.clickable td:first-child { position: relative; }
  tbody tr.clickable:active { background: #fbf0d9; }   /* Rückmeldung beim Tippen */

  /* Tabellen, die breiter sind als der Schirm, seitlich scrollbar machen —
     statt die Seite selbst horizontal scrollen zu lassen */
  .tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- Panels etwas luftiger --- */
  .panel { padding: 20px 18px; }
  .panel details summary { min-height: 48px; display: flex; align-items: center; }

  /* --- Zurück-Knopf gut erreichbar --- */
  .back-btn { min-height: 48px; padding: 12px 20px; font-size: 16px; }
}

/* --- Pad im Hochformat: zweispaltige Raster brechen um ------------------- */
@media (pointer: coarse) and (max-width: 820px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar input[type=text], .toolbar select { width: 100%; min-width: 0; }
}

/* ==========================================================================
   Baugruppen und Kalkulation
   ==========================================================================
   Bewusst Karten statt breiter Tabellen: auf dem Pad im Hochformat müsste eine
   Positionstabelle mit Artikel, Formel, Bedingung und Preis seitlich scrollen —
   und dann sieht man beim Vergleichen nie beide Spalten gleichzeitig.
   ========================================================================== */

/* --- Kachelübersicht der Baugruppen --- */
.bg-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; margin-bottom: 22px; }

.bg-kachel { display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); color: inherit; }

.bg-kachel:hover { text-decoration: none; border-color: var(--brand); }

.bg-kachel.inaktiv { opacity: .6; }

.bg-kachel-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px; font-size: 16px; }

.bg-kachel p { margin: 8px 0 0; }

.bg-kachel-fuss { display: flex; gap: 14px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* --- Positions- und Parameterkarten --- */
.pos-liste { display: grid; gap: 12px; }

.pos-karte { background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; }

.pos-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }

.pos-bez { font-weight: 600; }

.pos-menge { display: inline-block; min-width: 78px; font-weight: 800;
  color: var(--brand-dk); }

.pos-formel { font-size: 14px; color: var(--ink); background: #fbf0d9;
  border-radius: 8px; padding: 6px 10px; display: inline-block; }

.pos-grund { font-size: 13px; margin-top: 6px; line-height: 1.5; }

.pos-preis { font-size: 14px; margin-top: 4px; }

.pos-aktionen { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px;
  flex-wrap: wrap; }

.pos-aktionen details summary { list-style: none; display: inline-flex; }

.pos-aktionen details summary::-webkit-details-marker { display: none; }

/* --- Bedingungen als Chips --- */
.pos-bed { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.bed-chip { display: inline-flex; align-items: center; gap: 6px; background: #e7f0f7;
  border: 1px solid #c5dced; color: #17435f; border-radius: 20px;
  padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 600; }

.bed-x { border: 0; background: transparent; color: #17435f; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 2px 6px; border-radius: 50%; }

.bed-x:hover { background: #c5dced; }

.bed-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }

.bed-form select, .bed-form input { width: auto; min-width: 120px; }

/* --- Summenzeile --- */
.pos-summe { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px;
  padding: 14px 16px; background: #fbf0d9; border-radius: 12px; font-size: 16px; }

.pos-summe strong { font-size: 19px; color: var(--brand-dk); }

/* --- Artikelsuche mit antippbaren Treffern --- */
.treffer { display: grid; gap: 6px; margin-top: 8px; }

.treffer-zeile { display: block; width: 100%; text-align: left; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font: inherit; cursor: pointer; }

.treffer-zeile:hover, .treffer-zeile:active { background: #fbf0d9; border-color: var(--brand); }

@media (pointer: coarse) {
  .pos-karte { padding: 16px 18px; }
  .pos-menge { min-width: 92px; font-size: 17px; }
  .pos-formel { font-size: 15px; padding: 8px 12px; }
  .bed-chip { font-size: 15px; padding: 8px 8px 8px 14px; min-height: 44px; }
  .bed-x { font-size: 20px; min-width: 32px; min-height: 32px; }
  .treffer-zeile { padding: 14px 16px; min-height: 52px; }
  .bed-form select, .bed-form input { min-width: 140px; }
  .pos-summe strong { font-size: 21px; }
}

/* Abgewählte Positionen bleiben sichtbar, treten aber zurück --
   sonst rätselt man später, warum eine Position im Angebot fehlt. */
.pos-karte.abgewaehlt { opacity: .55; background: #f6f7f9; }

.pos-karte.abgewaehlt .pos-menge, .pos-karte.abgewaehlt .pos-bez { text-decoration: line-through; }

/* Werte, die nur fuer eine Unterbaugruppe gelten. Optisch abgesetzt, weil sie erklaeren,
   warum zwei gleiche Baugruppen unterschiedliche Teile liefern. */
.pos-werte { margin-top: 6px; font-size: 14px; color: #35506b; }

.pos-werte .badge { margin-right: 6px; }

/* ---------------------------------------------------------------- Mengenliste
   Eine Zeile im Formular, die Auswahl steckt im Popup. Rene arbeitet auf dem Pad --
   die Tap-Ziele im Dialog sind deshalb bewusst gross. */
.feld-breit { grid-column: 1 / -1; }

.ml-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ml-text { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid #d5dde5;
           border-radius: 6px; background: #f7fafc; }

.ml-text.ml-leer { color: #8a9099; font-style: italic; }

.ml-dialog { border: none; border-radius: 12px; padding: 0; max-width: 560px; width: 92vw;
             box-shadow: 0 18px 48px rgba(0,0,0,.28); }

.ml-dialog::backdrop { background: rgba(20,30,40,.45); }

.ml-dialog form { padding: 20px; }

.ml-dialog h3 { margin: 0 0 4px; }

.ml-stand { margin: 0 0 14px; font-weight: 600; }

.ml-stand.ml-ok { color: #1d7a44; }

.ml-stand.ml-warn { color: #a8620a; }

.ml-liste { display: flex; flex-direction: column; gap: 6px; max-height: 58vh;
            overflow-y: auto; }

.ml-eintrag { display: flex; align-items: center; gap: 12px; padding: 8px 4px;
              border-bottom: 1px solid #eef2f5; }

.ml-name { flex: 1 1 auto; min-width: 0; line-height: 1.35; }

.ml-name .muted { display: block; font-size: 13px; }

.ml-menge { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.ml-schritt { width: 40px; height: 40px; font-size: 22px; line-height: 1; border-radius: 8px;
              border: 1px solid #c9d4de; background: #fff; cursor: pointer; }

.ml-schritt:active { background: #e8eff5; }

.ml-zahl { width: 58px; text-align: center; }

.ml-fuss { margin-top: 16px; display: flex; justify-content: flex-end; }

/* Abschnitte im Formular -- ohne sie stehen bei der Bierleitung zwanzig Felder untereinander */
.feld-gruppe { border: 1px solid #e3e9ee; border-radius: 10px; margin-bottom: 10px;
               background: #fcfdfe; }

.feld-gruppe > summary { padding: 12px 14px; font-weight: 600; cursor: pointer; }

.feld-gruppe[open] > summary { border-bottom: 1px solid #e3e9ee; }

.feld-gruppe > .grid2 { padding: 14px; }

.feld-hinweis { margin-top: 4px; line-height: 1.35; }

@media (pointer: coarse) {
  .ml-schritt { width: 48px; height: 48px; font-size: 26px; }
  .ml-zahl { width: 66px; min-height: 48px; font-size: 17px; }
  .ml-eintrag { padding: 12px 4px; }
  .feld-gruppe > summary { padding: 16px 14px; min-height: 48px; }
}

/* Einklappbare Panel-Ueberschriften. Die <h2> steckt im <summary>, damit die ganze Zeile
   antippbar ist -- auf dem Pad trifft man ein Dreieck von 12 px sonst nicht. */
.panel > details > summary { cursor: pointer; list-style: none; }

.panel > details > summary::-webkit-details-marker { display: none; }

.panel > details > summary h2 { display: inline-block; margin: 0; }

.panel > details > summary::before { content: ▸; display: inline-block; width: 1.2em;
                                     color: #7b8794; transition: transform .12s; }

.panel > details[open] > summary::before { transform: rotate(90deg); }

.panel > details > summary:hover h2 { color: #1f6feb; }

/* Dasselbe fuer die Baugruppen-Karten im Projekt */
.pos-karte > details > summary { cursor: pointer; list-style: none; }

.pos-karte > details > summary::-webkit-details-marker { display: none; }

.pos-karte > details > summary::before { content: ▸; display: inline-block; width: 1.2em;
                                         color: #7b8794; transition: transform .12s; }

.pos-karte > details[open] > summary::before { transform: rotate(90deg); }

@media (pointer: coarse) {
  .panel > details > summary,
  .pos-karte > details > summary { min-height: 48px; display: flex; align-items: center;
                                   gap: 6px; }
}

.ml-dialog .ml-inhalt { padding: 20px; }

.ml-fuss { gap: 10px; }

/* ------------------------------------------------------ Warnungen als Popup
   Nach dem Berechnen springt der Blick auf die Teileliste; eine Meldung ganz oben wird
   uebersehen. Deshalb modal mit Bestaetigung -- aber ohne Escape-Sperre, wer sie schon
   gelesen hat, soll schnell weiterkommen. */
.hinweis-dialog { border: none; border-radius: 12px; padding: 0; max-width: 640px; width: 92vw;
                  box-shadow: 0 18px 48px rgba(0,0,0,.28); }

.hinweis-dialog::backdrop { background: rgba(20,30,40,.45); }

.hinweis-inhalt { padding: 22px 24px 18px; }

.hinweis-inhalt h3 { margin: 0 0 14px; }

.hinweis-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
                 gap: 10px; max-height: 60vh; overflow-y: auto; }

.hinweis-liste .hinweis { padding: 12px 14px; border-radius: 8px; line-height: 1.45;
                          border-left: 4px solid #d99a2b; background: #fdf6e8; }

.hinweis-liste .hinweis.err { border-left-color: #c0392b; background: #fdecea; }

.hinweis-fuss { margin-top: 18px; display: flex; justify-content: flex-end; }

@media (pointer: coarse) {
  .hinweis-liste .hinweis { padding: 14px; font-size: 16px; }
  .hinweis-fuss .btn { min-height: 48px; padding-left: 26px; padding-right: 26px; }
}

/* --------------------------------------------------- Angebotsübergabe an SAS
   Steht direkt bei den Summen: sobald die Zahlen stimmen, ist das Angebot der naechste
   Schritt -- nicht irgendwo weiter unten. */
.angebot-leiste { display: flex; align-items: center; justify-content: space-between;
                  gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px;
                  border-top: 1px solid #e3e9ee; }

.angebot-kunde { flex: 1 1 auto; min-width: 0; }

.angebot-knoepfe { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }

.angebot-knoepfe > details { position: relative; }

.kunde-suche { position: absolute; z-index: 30; right: 0; top: 100%; margin-top: 6px;
               width: min(420px, 88vw); padding: 12px; border: 1px solid #d5dde5;
               border-radius: 10px; background: #fff;
               box-shadow: 0 12px 32px rgba(0,0,0,.16); }

.kunde-suche .treffer { margin-top: 8px; max-height: 42vh; overflow-y: auto; }

@media (pointer: coarse) {
  .angebot-knoepfe .btn { min-height: 48px; }
  .kunde-suche { width: min(420px, 92vw); }
}

/* Link zur Nachbaranwendung SAS. Abgesetzt, damit man sieht: hier verlaesst man Material. */
.nav-extern { border: 1px solid rgba(120,190,255,.35); color: #8fc7f5 !important; }