/* Getränke Bärlin × SKYLNX – das Gerüst.
   Dunkle Zeichenleiste links, heller Arbeitsbereich rechts, Karten als
   eingelegte Flächen statt flacher Kästen. Wird nach app.css geladen und
   hebt dessen Grundformen an, ohne die Bedeutung der Farben zu ändern:
   Blau = Marke, Grün = sicher, Gelb = Rückfrage, Rot = Fehler. */

/* Ebenen. Jede Stapelhöhe steht hier und nur hier - keine Zahl im Rest der
   Datei. Von unten nach oben: Korn, Arbeitsfläche, angehobene Karte (mit
   offener Aufklappliste), Aufklappliste, Leiste mit ihren Beschriftungen,
   Meldungen, Sprungmarke. */
:root {
  --z-grain: 1;
  --z-shell: 2;
  --z-raise: 5;
  --z-dropdown: 30;
  --z-rail: 40;
  --z-toast: 60;
  --z-skip: 100;
}

.skip { position: absolute; left: -9999px; top: 0; z-index: var(--z-skip); background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; font-family: var(--font-ui); font-weight: 600; }
.skip:focus { left: 0; }
.main:focus { outline: none; }

/* Korn bricht die digitale Flachheit. Liegt fest, fängt keine Klicks. */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell { display: grid; grid-template-columns: 104px minmax(0, 1fr); min-height: 100dvh; position: relative; z-index: var(--z-shell); }
.work { min-width: 0; display: flex; flex-direction: column; }

/* ---------- Leiste ---------- */

/* Zeichen mit Beschriftung darunter. Die Leiste wandert beim Scrollen mit
   (sticky); damit das greift, schneidet app.css den Seitenrand mit
   overflow-x: clip statt hidden ab - hidden machte body zum Scrollbehälter,
   und sticky klebte an nichts. Ist das Fenster niedriger als die Leiste,
   scrollt sie in sich. */
.side {
  position: sticky; top: 0; align-self: start; height: 100dvh; z-index: var(--z-rail);
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding: 22px 0 18px; background: var(--dark);
  border-right: 1px solid var(--dark-line);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.side::-webkit-scrollbar { display: none; }
.side-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: #fff; flex: none; }
.side-mark img { width: 26px; height: 34px; }
.side-nav { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }

.side-link {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 88px; min-height: 60px; padding: 9px 4px; flex: none;
  border-radius: var(--r-md); color: var(--dark-ink); text-decoration: none;
  font: 500 0.74rem/1.1 var(--font-ui); letter-spacing: 0.01em;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.side-link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.side-link:active { transform: scale(0.96); }
.side-link.on { color: var(--sky); font-weight: 600; }
/* Kerbe neben dem aktiven Eintrag, in dessen Farbe */
.side-link.on::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 30px; border-radius: 0 3px 3px 0; background: currentColor; }
.side-label { text-align: center; white-space: nowrap; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; flex: none; }
.side-avatar {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.14); color: #fff;
  font: 600 0.82rem/1 var(--font-ui); letter-spacing: 0.02em;
}
.side-logout { margin: 0; }
.side-out {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: var(--r-md); background: none; color: var(--dark-ink); cursor: pointer;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.side-out:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.side-out:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
.side-by { display: block; line-height: 0; opacity: 0.9; }
.side-by .skylnx-logo { width: 72px; }

/* ---------- Kopfzeile ---------- */

/* Links groß die Begrüßung, rechts Uhr, Live, Design, Glocke und Menü.
   Das Menü klappt über die Karten, deshalb eine eigene Ebene. */
.top {
  position: relative; z-index: var(--z-dropdown);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px; padding: 26px 36px 20px;
}
.hello-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 600 0.62rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }
.hello-eyebrow > span { color: var(--brand); margin: 0 1px; }
.skylnx-logo { display: block; height: auto; }
.hello-eyebrow .skylnx-logo { width: 74px; }
.hello {
  margin: 0; font-family: var(--font-ui);
  font-size: clamp(1.6rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.1;
  font-weight: 500; letter-spacing: -0.02em; color: var(--ink-2);
}
.hello strong { color: var(--ink); font-weight: 700; }

.top-tools { display: flex; align-items: center; gap: 10px; }
.top-time { color: var(--muted); font: 600 0.9rem/1 var(--font-ui); font-variant-numeric: tabular-nums; margin-right: 6px; white-space: nowrap; }
.top-sep { margin: 0 7px; }
#today { text-transform: capitalize; }

/* Live-Zustand als Umriss-Knopf */
.top .pill {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: var(--r-sm); background: transparent; border: 1px solid var(--brand); box-shadow: none;
  color: var(--brand); font: 600 0.84rem/1 var(--font-ui); white-space: nowrap;
}
.top .pill .ico { color: var(--brand); }
.top .pill-live.off { border-color: var(--err); }
.top .pill-live.off, .top .pill-live.off .ico { color: var(--err); }

.tool-btn {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; list-style: none;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.tool-btn::-webkit-details-marker { display: none; }
.tool-btn:hover { color: var(--ink); background: rgba(23, 48, 79, 0.07); }
.tool-btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
.tool-btn:disabled { opacity: 0.5; cursor: default; }
/* Punkt an der Glocke: Akzent = Push an, Rot = vom Browser gesperrt */
.tool-btn.on, .tool-btn.on:hover { color: var(--brand); }
.tool-btn.on::after, .tool-btn[data-state="blocked"]::after {
  content: ""; position: absolute; top: 10px; right: 11px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 2px var(--bg);
}
.tool-btn[data-state="blocked"]::after { background: var(--err); }

/* Design-Knopf: zeigt, wohin er schaltet */
.theme-btn > span { display: none; place-items: center; }
.theme-btn > .theme-to-light { display: grid; }
[data-theme="light"] .theme-btn > .theme-to-light { display: none; }
[data-theme="light"] .theme-btn > .theme-to-dark { display: grid; }

.top-more { position: relative; }
.top-more[open] > .tool-btn { color: var(--ink); background: rgba(23, 48, 79, 0.07); }
.top-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
}
.top-menu-user { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); }
.top-menu-user strong { font-family: var(--font-ui); color: var(--ink); }
.top-menu-user span { color: var(--muted); font-size: 0.82rem; }
.menu-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); cursor: pointer;
  font: 600 0.9rem/1.2 var(--font-ui); text-align: left;
}
.menu-row:hover { background: var(--brand-050); color: var(--ink); }
.menu-row:focus-visible { outline: 3px solid var(--sky); outline-offset: -1px; }
.menu-row .ico { color: var(--muted); }
#sound-btn.on .ico { color: var(--brand); }
#sound-btn[aria-pressed="true"] span::after { content: " – an"; color: var(--muted); font-weight: 500; }
#sound-btn[aria-pressed="false"] span::after { content: " – aus"; color: var(--muted); font-weight: 500; }
.menu-logout { margin: 0; }
/* Am Desktop steht Abmelden unten in der Leiste */
@media (min-width: 861px) { .menu-logout { display: none; } }

/* Arbeitsfläche: volle Breite, das Kartenraster füllt sie */
.main { max-width: none; padding: 6px 36px 56px; }
@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}

/* Verbindungsabriss unten mittig, damit der Kopf nicht springt */
.conn {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: var(--z-toast);
  margin: 0; background: var(--err); color: #fff; border: 0; padding: 10px 18px;
  border-radius: 999px; font: 600 0.88rem/1 var(--font-ui);
  box-shadow: 0 16px 34px -16px rgba(120, 20, 15, 0.85);
}

/* ---------- Flächen ---------- */

.panel {
  border: 0; border-radius: var(--r-lg); padding: 18px 20px;
  box-shadow: var(--shadow), var(--inset-top);
  outline: 1px solid rgba(23, 48, 79, 0.07);
}
.panel.empty { padding: 56px 20px; border-radius: var(--r-xl); }

.card {
  border: 0; border-radius: var(--r-lg); padding: 15px 17px 14px 22px;
  box-shadow: var(--shadow), var(--inset-top); outline: 1px solid rgba(23, 48, 79, 0.07);
  position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* Statusstreifen als Einleger mit runden Enden, nicht als Rahmenkante */
.card::before {
  content: ""; position: absolute; left: 8px; top: 13px; bottom: 13px; width: 4px;
  border-radius: 999px; background: var(--line-strong);
  transition: background-color 0.3s var(--ease);
}
.card-neu::before { background: var(--brand); }
.card-rueckfrage::before { background: var(--warn-line); }
.card-freigegeben::before { background: var(--ok-line); }
.card-verloren::before { background: var(--err-line); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), var(--inset-top); }
.card:active { transform: translateY(-1px); }

/* ---------- Schaltflächen ---------- */

.btn { border-radius: 999px; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.btn:active:not([disabled]) { transform: scale(0.97); }
.btn-primary { box-shadow: 0 10px 22px -14px rgba(23, 48, 79, 0.95); }
.btn-primary:hover { box-shadow: 0 14px 26px -12px rgba(23, 48, 79, 0.8); }
.btn-icon { border-radius: 999px; transition: color 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.btn-icon:active { transform: scale(0.92); }
.ico { flex: none; display: block; }

/* ---------- Auftritt ---------- */
/* Reine CSS-Animation, sie braucht kein JavaScript.
   fill-mode BACKWARDS, nicht both: der Startzustand gilt nur während der
   Verzögerung, danach ist die Animation vorbei und die Karte steht in ihrem
   normalen Zustand - sichtbar. Mit "both" bliebe die Animation auf opacity
   und transform dauerhaft aktiv, und der Browser machte jede Karte zu einer
   eigenen Stapelebene: Aufklapplisten wären in ihrer Karte gefangen, spätere
   Karten malten darüber, und die Beschriftungen der Leiste verschwänden
   unter dem Arbeitsbereich. */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.panel, .card, .stop, .tsum, .arch-day { animation: rise 0.38s var(--ease) backwards; }
.cards .card:nth-child(2), .stops .stop:nth-child(2), .tour-summary .tsum:nth-child(2) { animation-delay: 0.04s; }
.cards .card:nth-child(3), .stops .stop:nth-child(3), .tour-summary .tsum:nth-child(3) { animation-delay: 0.08s; }
.cards .card:nth-child(4), .stops .stop:nth-child(4), .tour-summary .tsum:nth-child(4) { animation-delay: 0.12s; }
.cards .card:nth-child(n+5), .stops .stop:nth-child(n+5), .tour-summary .tsum:nth-child(n+5) { animation-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .panel, .card, .stop, .tsum, .arch-day { animation: none; }
  .card:hover, .btn:active:not([disabled]) { transform: none; }
}

/* ---------- Schmale Geräte: Leiste wandert nach unten ---------- */

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; z-index: var(--z-rail);
    flex-direction: row; justify-content: space-around; gap: 0; overflow: visible;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--dark-line);
  }
  .side-mark, .side-foot, .side-label { display: none; }
  .side-nav { flex-direction: row; justify-content: space-around; gap: 2px; }
  /* acht Zeichen auf 320-390 px: sie teilen sich die Breite, höchstens 52 px */
  .side-nav { justify-content: space-between; }
  .side-link { flex: 1 1 0; width: auto; max-width: 52px; min-width: 0; min-height: 44px; padding: 0; gap: 0; }
  .side-link.on::before { left: 50%; top: -8px; transform: translateX(-50%); width: 20px; height: 3px; border-radius: 0 0 3px 3px; }
  .top { padding: 16px 16px 12px; }
  .top-time { display: none; }
  .main { padding: 0 16px 96px; }
  .conn { bottom: 86px; }
}

/* ---------- Tourplan im Bento-Schnitt ---------- */

/* Kennzahlen als eigene Kacheln statt einer geteilten Leiste */
.tour-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px; background: none; border: 0; border-radius: 0; overflow: visible;
  box-shadow: none; margin-bottom: 16px;
}
.tsum {
  border-radius: var(--r-md); padding: 12px 15px;
  box-shadow: var(--shadow), var(--inset-top); outline: 1px solid rgba(23, 48, 79, 0.07);
}
.tsum-v { font-size: 1.25rem; letter-spacing: -0.01em; }
.tsum-state.good { outline-color: rgba(22, 113, 58, 0.22); }
.tsum-state.bad { outline-color: var(--warn-line); }

.tour-map { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.tour-map-note { border-radius: 999px; border: 0; background: var(--warn-bg); box-shadow: var(--shadow-lift); }

/* Stopp-Karten: derselbe Einleger wie im Posteingang, Nummer bleibt fuehrend */
.stop {
  border: 0; border-radius: var(--r-lg); padding: 13px 15px 12px 13px; margin-bottom: 10px;
  box-shadow: var(--shadow), var(--inset-top); outline: 1px solid rgba(23, 48, 79, 0.07);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), outline-color 0.35s var(--ease);
}
.stop:hover { border: 0; transform: translateY(-2px); box-shadow: var(--shadow-lift), var(--inset-top); }
.stop.over { border: 0; outline: 2px solid var(--brand); box-shadow: var(--shadow-lift); }
.stop-sel { border: 0; outline: 2px solid var(--brand); box-shadow: var(--shadow-lift), var(--inset-top); }
.stop-warn { border: 0; outline-color: var(--warn-line); }
.stop-nr { border-radius: var(--r-sm); box-shadow: 0 6px 14px -8px rgba(23, 48, 79, 0.95); }
.stop-warn .stop-nr { background: var(--warn-line); color: #3d2b00; }
.chip { border-radius: 999px; padding: 3px 10px; }

/* ---------- Archiv ---------- */
.arch-head { border-bottom: 0; padding-bottom: 0; }
.arch-day .cards .card { opacity: 1; }
.arch-day .cards .card::before { opacity: 0.45; }

/* ---------- Auswahl und Felder ---------- */
/* overflow-y auto, nicht hidden: lange Trefferlisten müssen scrollen.
   Die runden Ecken schneidet auto genauso sauber ab. */
.dropdown {
  z-index: var(--z-dropdown); border: 0; border-radius: var(--r-md);
  box-shadow: var(--shadow-lift); outline: 1px solid rgba(23, 48, 79, 0.1);
  overflow-x: hidden; overflow-y: auto;
}
/* Die Positionstabelle scrollt nur auf schmalen Geräten waagerecht. Ein
   overflow-x erzwingt auch senkrecht ein Abschneiden - am Desktop würde das
   die Artikelsuche in der Tabelle unten kappen. Und solange dort gesucht
   wird, darf die Liste auch auf dem Handy aus der Tabelle heraus. */
.table-wrap { overflow: visible; }
@media (max-width: 719px) {
  .table-wrap { overflow-x: auto; }
  .table-wrap:focus-within { overflow: visible; }
}

/* Eine Karte mit offener Aufklappliste hebt sich über ihre Nachbarn - auch
   während diese noch einblenden und dabei kurz eine eigene Ebene bilden. */
.panel:focus-within, .field:focus-within, .add-item:focus-within, .item:focus-within {
  position: relative; z-index: var(--z-raise);
}
.question-box, .error, .chosen { border-radius: var(--r-md); }
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="tel"], input[type="email"], select, textarea {
  border-radius: var(--r-sm); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.badge { border-radius: 999px; }

.hello strong { font-weight: 700; }
.hello { font-weight: 500; color: var(--ink-2); }
.hello strong { color: var(--ink); }


/* ---------- Eingang in der Telefonaufnahme ---------- */
.via { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.via legend { padding: 0; margin-bottom: 6px; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.via label {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; margin: 0 6px 6px 0;
  border-radius: 999px; background: var(--brand-050); color: var(--ink-2);
  font-family: var(--font-ui); font-weight: 600; cursor: pointer;
  outline: 1px solid rgba(23, 48, 79, 0.08);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.via input { accent-color: var(--brand); margin: 0; }
.via label:has(input:checked) { background: var(--brand); color: #fff; }
.via label:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 1px; }

/* ---------- Anmeldung, Benutzer, Verwaltung (D12) ---------- */
.login-body { display: grid; place-items: center; min-height: 100dvh; padding: 16px; }
.login { width: 100%; max-width: 420px; }
.login-card { padding: 28px 28px 22px; border-radius: var(--r-xl); }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
/* Nur das Bärlin-Logo links (direktes Kind) – nicht das SKYLNX-Logo in der
   Zeile darüber, das sonst mit auf 52 px Höhe gezogen würde */
.login-brand > img { width: 40px; height: 52px; border-radius: var(--r-sm); padding: 4px 6px; box-sizing: content-box; flex: none; }
.login-brand .hello-eyebrow { margin-bottom: 8px; }
.login-brand .skylnx-logo { width: 92px; }
.login-brand h1 { margin: 0; font-size: 1.4rem; }
.check { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 0.92rem; cursor: pointer; }
.check input { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; }
.check code { font-size: 0.7rem; color: var(--muted); }
.pill-user { gap: 8px; padding-right: 8px; margin: 0; }
.pill-user .ico { color: var(--brand); }
.link-btn { display: inline-flex; align-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 999px; }
.link-btn:hover { color: var(--err); background: var(--err-bg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Vorlagen: je Recht eine Zeile, je Vorlage eine Spalte mit Häkchen */
.perm-table th[scope="row"] {
  text-transform: none; letter-spacing: 0; font-family: var(--font-text); font-size: 0.9rem; font-weight: 500;
  color: var(--ink); padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.perm-table .perm-cell { text-align: center; width: 1%; white-space: nowrap; padding-left: 14px; padding-right: 14px; vertical-align: middle; }
.perm-yes { color: var(--ok); }
.perm-yes .ico { margin: 0 auto; }
.perm-no { color: var(--muted); }
.perm-table tbody tr:hover th, .perm-table tbody tr:hover td { background: var(--brand-050); }
.perm-table tfoot th, .perm-table tfoot td { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--muted); padding-top: 10px; padding-bottom: 6px; vertical-align: middle; border-top: 1px solid var(--line-strong); border-bottom: 0; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; }
.perm-grid .check { margin: 2px 0; font-size: 0.88rem; }
.user summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; list-style: none; }
.user summary::-webkit-details-marker { display: none; }
.user-name { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; }
.user-off .user-name { color: var(--muted); text-decoration: line-through; }
.user-form { margin-top: 14px; }
.user-tools { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.user-tools .inline { display: flex; gap: 8px; align-items: flex-end; }
.user-tools .inline .field { margin: 0; min-width: 220px; }
.audit td { vertical-align: top; }

/* ---------- Vorgänge (D6): Typ- und Statusabzeichen, Änderungswünsche ---------- */
.badge-offen { background: var(--brand-050); border-color: #9dbbe6; color: var(--brand-700); }
.badge-erledigt { background: #f1f4f7; color: var(--muted); }
.badge-typ { background: var(--dark); border-color: var(--dark); color: #fff; }
.badge-typ.badge-reklamation { background: var(--err); border-color: var(--err); }
.badge-typ.badge-kommission { background: var(--brand); border-color: var(--brand); }
.badge-typ.badge-frage { background: #5b3f9e; border-color: #5b3f9e; }
.badge-typ.badge-sonstiges { background: var(--ink-2); border-color: var(--ink-2); }
.badge-aenderung { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
.card-vorgang::before { background: var(--dark); }
.card-reklamation::before { background: var(--err); }
.card-kommission::before { background: var(--brand); }
.change { border: 1px solid var(--warn-line); border-left: 4px solid var(--warn-line); background: var(--warn-bg); border-radius: var(--r-md); padding: 12px 14px; margin: 10px 0; }
.change.done { border-color: var(--line); border-left-color: var(--ok-line); background: #fff; color: var(--muted); }
.change-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 4px; }
.change-text { font-style: italic; }
.type-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.type-form .field { margin: 0; min-width: 200px; }

/* Als verloren markieren (AUSWERTUNG §6): aufklappbar unter dem Kopf */
.lost { margin: -6px 0 16px; }
.lost > summary { list-style: none; width: max-content; }
.lost > summary::-webkit-details-marker { display: none; }
.lost[open] > summary { margin-bottom: 10px; }
.lost-form { max-width: 760px; }
.panel.lost-info { box-shadow: inset 4px 0 0 var(--err-line), var(--shadow), var(--inset-top); }

.card-change { margin: 6px 0 8px; padding: 6px 10px; border-left: 3px solid var(--warn-line); background: var(--warn-bg); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-style: italic; font-size: 0.9rem; }

/* ---------- Benachrichtigungen (D13) ---------- */
.pill-btn { cursor: pointer; font-family: inherit; }
.pill-btn:hover { border-color: var(--brand); color: var(--ink); }
.pill-btn:disabled { opacity: 0.55; cursor: default; }
.pill-btn.on { background: var(--dark); border-color: var(--dark); color: #fff; }
.pill-btn.on .ico { color: var(--brand); }
.pill-btn[data-state="blocked"] .ico { color: var(--err); }
.pill-icon { padding: 0 11px; }
.pill-icon:not(.on) .ico { color: var(--muted); text-decoration: line-through; }
.pill-icon.on .ico { color: var(--ok); }
.hinweis {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast);
  display: flex; align-items: flex-start; gap: 12px; max-width: min(420px, calc(100vw - 32px));
  padding: 14px 16px; border-radius: var(--r-md); background: var(--dark); color: #fff;
  box-shadow: var(--shadow-lift); text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.08);
}
.hinweis .ico { color: var(--brand); flex: 0 0 auto; margin-top: 2px; }
.hinweis-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hinweis-title { font: 700 0.92rem/1.3 var(--font-ui); }
.hinweis-body { font-size: 0.84rem; line-height: 1.4; color: rgba(255, 255, 255, 0.78); white-space: pre-line; }
.hinweis-close { border: 0; background: none; color: rgba(255, 255, 255, 0.6); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 2px; margin-left: auto; }
.hinweis-close:hover { color: #fff; }
@media (max-width: 720px) { .hinweis { right: 16px; left: 16px; bottom: 86px; max-width: none; } }

/* ---------- Einstellungen (§6) ---------- */
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 22px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; padding-top: 4px; }
.setting-label { font-weight: 600; display: block; margin-bottom: 2px; }
.setting-text p { margin: 2px 0; }
.setting-meta { font-size: 0.74rem; }
.setting-changed .setting-label::after { content: ' geändert'; font: 600 0.62rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand); margin-left: 8px; vertical-align: middle; }
.setting-input { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 150px; }
.setting-input .check { margin: 0; }
.setting-input input[type="number"], .setting-input input[type="time"], .setting-input input[type="text"] { text-align: right; }
.input-short { width: 150px; }
.hours-edit { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.day-boxes { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; }
.day-boxes .check { margin: 0; font-size: 0.84rem; gap: 5px; }
.hours-span { display: flex; align-items: center; gap: 8px; }
.hours-span input { width: 110px; }
.link-btn.small { font: 600 0.7rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 8px; }
.link-btn.small:hover { color: var(--brand); background: var(--brand-bg, rgba(232, 96, 40, 0.1)); }
.switch span { font-weight: 600; min-width: 30px; }
.jobs td.err, .jobs .err { color: var(--err); }
.badge-erinnert { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
@media (max-width: 720px) {
  .setting { grid-template-columns: 1fr; }
  .setting-input, .hours-edit, .day-boxes { align-items: flex-start; justify-content: flex-start; }
}

/* ---------- Neukunde, Zone, Mindestwert (D10, D15) ---------- */
.badge-neukunde { background: #5b3f9e; border-color: #5b3f9e; color: #fff; }
.badge-frage { background: #b7791f; border-color: #b7791f; color: #fff; }
.badge-ausserhalb { background: var(--err); border-color: var(--err); color: #fff; }
.badge-mindestwert { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
.neukunde-form { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.neukunde-form .row { display: flex; gap: 8px; }
/* PLZ fest, Ort füllt den Rest – und darf schrumpfen, statt aus der Karte zu ragen */
.neukunde-form .row input:not(.zip) { flex: 1 1 auto; min-width: 0; }
.neukunde-form .zip { width: 90px; flex: 0 0 auto; }
.neukunde-form .actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kv .ok { color: var(--ok); font-weight: 700; }
textarea.zones { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.85rem; text-align: left; width: 150px; resize: vertical; }

/* ---------- Kommission (D16) ---------- */
.badge-angebot { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.btn-small { padding: 5px 10px; font-size: 0.78rem; }
.btn-quiet { background: none; border-color: transparent; color: var(--muted); }
.btn-quiet:hover { color: var(--ink); border-color: var(--line); }
.switch-line { margin: 10px 0 0; }
.switch-line input { accent-color: var(--brand); }
.kommission .k-text { max-width: 360px; white-space: pre-wrap; }
.kommission .k-actions { white-space: nowrap; }
.kommission .k-actions .btn + .btn { margin-left: 6px; }
.kommission tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--err); }
.kommission tr.status-erledigt td { color: var(--muted); }
#kommission-panel .actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 10px 0; }

/* ---------- Fahrer (D17) ---------- */
.driver-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.driver-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 600 0.86rem/1 var(--font-ui); box-shadow: var(--shadow); }
.driver-tab .muted { font-weight: 500; }
.driver-tab.on { background: var(--dark); border-color: var(--dark); color: #fff; }
.driver-tab.on .muted { color: rgba(255, 255, 255, 0.7); }
.stop-driver { margin-left: auto; font: 600 0.78rem/1 var(--font-ui); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }

/* ---------- Go-live (D19) ---------- */
.golive { list-style: none; margin: 8px 0 0; padding: 0; }
.golive li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.golive li:first-child { border-top: 0; }
.golive-mark { flex: 0 0 18px; font-weight: 700; }
.golive li.ok .golive-mark { color: var(--ok); }
.golive li.open .golive-mark { color: var(--warn-text); }
.golive li.ok .golive-text { color: var(--muted); }
.golive-text { flex: 1 1 auto; }
.golive form { flex: 0 0 auto; margin: 0; }