/* ==========================================================================
   Zentrale – Oberfläche im eventdrop-Design (übernommen aus dem Crew-Portal)
   Farben: Off-White #F9F9F9 · Gelb #FFD500 (Schrift auf Gelb immer schwarz) ·
   Schwarz #111111 · Platin #333333 · Dark Grey #646464 · Grey #A7A7A7
   Schrift: Inter Tight (Oberfläche) · Space Grotesk (Etiketten, Zahlen) –
   beide lokal eingebunden (DSGVO).
   Aufbau: schmale weiße Icon-Leiste links (klappt beim Überfahren auf),
   am Handy Tab-Leiste unten. Arbeitsabläufe und Tabellen im Rentman-Stil.
   Alle Farben stehen unten als Variablen.
   ========================================================================== */

@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-400-normal.2c20035257a1.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-500-normal.5ab688ca8cb4.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-600-normal.62121ba6ea27.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-700-normal.9e38e0478052.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-800-normal.d23fd8350300.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-500-normal.ab4861869c91.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-700-normal.f9e147a59a93.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* eventdrop-CI */
  --ink: #111111;
  --platin: #333333;
  --mid: #646464;
  --grey: #A7A7A7;
  --line: #e7e7e5;
  --line-soft: #f0f0ee;
  --accent: #FFD500;
  --accent-dark: #E3BD00;
  --accent-soft: #FFF8D6;
  --hover: #F4F4F2;
  --ok: #0E7A4D;
  --ok-soft: #E9F4EE;
  --red: #C10801;
  --red-soft: #FBEAE8;
  --rbtn: 6px;
  --label: "Space Grotesk", ui-monospace, monospace;
  --rail-w: 72px;
  --rail-open-w: 250px;

  /* Bezeichnungen, die die Module verwenden */
  --nav-bg: #111111;            /* dunkle Flächen: Summenleiste, Live-Modus, Scan-Station */
  --bg: #F9F9F9;
  --surface: #ffffff;
  --surface-2: #F7F7F5;
  --border: #e7e7e5;
  --border-strong: #cfcfcd;
  --text: #111111;
  --text-2: #333333;
  --muted: #646464;
  --primary: #111111;
  --primary-hover: #333333;
  --primary-soft: #FFF8D6;
  --success: #0E7A4D;
  --success-soft: #E9F4EE;
  --warning: #9A7600;
  --warning-soft: #FFF8D6;
  --danger: #C10801;
  --danger-soft: #FBEAE8;
  --info: #333333;
  --info-soft: #EDEDEB;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: none;
  --shadow-lg: 0 14px 44px rgba(17, 17, 17, .16);
  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
p a, .help a, .alert a, dd a, .small a, li > a:not([class]), .table td a:not(.btn):not(.strong):not(.bar) {
  text-decoration: underline; text-decoration-color: rgba(17, 17, 17, .28); text-underline-offset: 2px;
}
p a:hover, .help a:hover, .alert a:hover, dd a:hover, .small a:hover, .table td a:not(.btn):hover { text-decoration-color: currentColor; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 .6em; }
small, .muted { color: var(--muted); }
.strong { font-weight: 700; }
.mono { font-family: var(--mono); font-size: 13px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
::selection { background: var(--accent); color: #111; }
button, .btn, .nav-item, .tab, .tabs a, .userchip, .round-btn { -webkit-user-select: none; user-select: none; }

.icon { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; }
.icon.lg { width: 22px; height: 22px; }
.icon.sm { width: 15px; height: 15px; }

/* ---------- Grundgerüst: Icon-Leiste links ---------- */
.shell { min-height: 100vh; padding-left: var(--rail-w); }
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: var(--rail-w);
  background: #fff; border-right: 1px solid var(--line); padding: 20px 12px 24px;
  display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
  transition: width .18s ease, box-shadow .18s ease;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar:hover, .sidebar:focus-within { width: var(--rail-open-w); box-shadow: 14px 0 34px rgba(17, 17, 17, .10); }

/* Logo: hochkant in der schmalen Leiste, dreht sich beim Aufklappen waagerecht */
.navbrand { position: relative; height: 144px; flex: none; margin-bottom: 4px; }
.navbrand-link { position: absolute; top: 0; left: 0; width: 132px; height: 132px; }
.navbrand-link:hover { text-decoration: none; }
.brandlogo {
  position: absolute; top: 4px; left: 4px; height: 32px; width: auto; display: block;
  transform-origin: left top; transform: translateX(36px) rotate(90deg);
  transition: transform .42s cubic-bezier(.3, .7, .25, 1) .14s;
}
.sidebar:hover .brandlogo, .sidebar:focus-within .brandlogo { transform: none; transition-delay: 0s; }
.brandsub {
  position: absolute; top: 48px; left: 5px; opacity: 0; white-space: nowrap; pointer-events: none;
  font-family: var(--label); font-size: 10px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .12em;
  transition: opacity .1s ease 0s;
}
.sidebar:hover .brandsub, .sidebar:focus-within .brandsub { opacity: 1; transition: opacity .2s ease .44s; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-section {
  position: relative; height: 28px; margin-top: 6px; padding: 12px 14px 0; white-space: nowrap;
  font-family: var(--label); font-size: 9.5px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .1em;
}
.nav-section::before { content: ""; position: absolute; left: 14px; right: 14px; top: 5px; height: 1px; background: var(--line); }
.nav-section span { opacity: 0; transition: opacity .15s ease; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--rbtn);
  color: #5c5c5a; font-weight: 600; font-size: 14px; white-space: nowrap;
}
.nav-item .icon { width: 20px; height: 20px; }
.nav-item:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.nav-item.active { background: var(--ink); color: #fff; }
.nav-label { opacity: 0; transition: opacity .15s ease; }
.sidebar:hover .nav-label, .sidebar:focus-within .nav-label,
.sidebar:hover .nav-section span, .sidebar:focus-within .nav-section span { opacity: 1; }
.nav-badge {
  position: absolute; top: 4px; left: 28px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: #111; border: 2px solid #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--label); font-size: 9.5px; font-weight: 700; line-height: 1;
}
.nav-item.active .nav-badge { border-color: var(--ink); }
.nav-search, .nav-close { display: none; }
.nav-overlay { display: none; }

.main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  height: 70px; background: rgba(249, 249, 249, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 36px; position: sticky; top: 0; z-index: 20;
}
.topbar-logo img { height: 26px; width: auto; display: block; }
.global-search {
  flex: 1; max-width: 520px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 0 14px; color: var(--grey);
}
.global-search input[type=search] { border: 0; background: transparent; flex: 1; height: 38px; min-height: 0; padding: 0; font: inherit; color: var(--text); outline: none; box-shadow: none; }
.global-search input[type=search]:focus { box-shadow: none; }
.global-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); color: var(--ink); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.round-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; padding: 0;
}
.round-btn:hover { border-color: var(--border-strong); text-decoration: none; }
.round-count {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: #111; display: flex; align-items: center; justify-content: center;
  font-family: var(--label); font-size: 10px; font-weight: 700; line-height: 1;
}
.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; }
.usermenu summary::-webkit-details-marker { display: none; }
.userchip { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); padding: 5px 13px 5px 5px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.userchip:hover, .usermenu[open] .userchip { border-color: var(--border-strong); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--platin); color: #fff; font-family: var(--label); font-weight: 700; font-size: 12px; overflow: hidden;
}
.avatar.is-me { background: var(--accent); color: #111; }
.userchip .avatar { width: 28px; height: 28px; font-size: 10.5px; }
.usermenu .menu {
  position: absolute; right: 0; top: 48px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); min-width: 250px; padding: 6px; z-index: 30;
}
.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; }
.menu-head strong { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.menu-head small { font-size: 12px; }
.usermenu .menu a, .usermenu .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--rbtn); color: var(--text); background: none; border: 0; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; text-align: left; }
.usermenu .menu a:hover, .usermenu .menu button:hover { background: var(--hover); text-decoration: none; }
.usermenu .menu button[hidden] { display: none; }
.company-switch { padding: 6px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.company-switch label { display: block; font-family: var(--label); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mid); margin-bottom: 5px; }
.company-switch select { min-height: 36px; padding: 4px 10px; }
.clock { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 4px 4px 12px; }
.clock .btn { border-radius: 999px; }
.clock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); flex: none; }
.clock-label { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tabbar { display: none; }

.content { padding: 28px 40px 70px; max-width: 1680px; width: 100%; }
.only-mobile { display: none; }

/* ---------- Seitenkopf ---------- */
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; min-height: 40px; }
.page-head .titles { flex: 1; min-width: 220px; }
.page-head .titles h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head .titles p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.breadcrumb { font-family: var(--label); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); margin-bottom: 6px; }
.breadcrumb a { color: var(--mid); }

/* ---------- Schaltflächen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px;
  border-radius: var(--rbtn); border: 1px solid var(--border-strong); background: #fff; color: var(--ink);
  font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--hover); border-color: #bdbdbb; text-decoration: none; }
.btn:active { opacity: .85; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--platin); border-color: var(--platin); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #111; }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-success { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-success:hover { background: #0b6440; border-color: #0b6440; }
.btn-danger { background: #fff; border-color: #E8C2BE; color: var(--red); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: #EFEFED; border-color: transparent; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn.clock-start { border-radius: 999px; }
.btn-xs { height: 26px; padding: 0 8px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--rbtn); border: 1px solid transparent; background: none; color: var(--text-2); cursor: pointer; }
.icon-btn:hover { background: var(--hover); border-color: var(--line); }
.inline-form { display: inline; }
.inline-form select { width: auto; max-width: 220px; padding: 4px 28px 4px 8px; font-size: 13px; vertical-align: middle; min-height: 32px; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--rbtn) 0 0 var(--rbtn); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--rbtn) var(--rbtn) 0; }
.btn-group .btn.on { background: var(--ink); color: #fff; border-color: var(--ink); z-index: 1; }

/* ---------- Karten & Raster ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card + .card { margin-top: 16px; }
.grid > .card + .card, .provider-grid > .card + .card, .board .card + .card { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 50px; }
.card-head h2, .card-head h3 {
  font-family: var(--label); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  display: flex; align-items: center; gap: 8px; color: var(--ink);
}
.card-head h2 .icon, .card-head h3 .icon { width: 16px; height: 16px; color: var(--mid); }
.card-head .actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-main-side { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.stack > * + * { margin-top: 14px; }

/* Kennzahl-Kacheln: große Zahl, Etikett darunter (wie im Crew-Portal) */
.kpi { padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi .value { order: -1; font-family: var(--label); font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi .label { margin-top: 6px; font-family: var(--label); font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; gap: 6px; }
.kpi .label .icon { width: 13px; height: 13px; }
.kpi .hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.warn { border-color: var(--accent); }
.kpi.bad { border-color: #E8C2BE; }
.kpi.bad .value { color: var(--red); }
.kpi a.value { color: var(--text); }
a.kpi { color: var(--text); }
a.kpi:hover { text-decoration: none; border-color: var(--border-strong); background: #FDFDFC; }

dl.facts { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; position: relative; }  /* relative: versteckte Hilfstexte (.sr-only) bleiben im Rahmen */
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-family: var(--label); font-weight: 700; color: var(--mid); font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: #FAFAF8; white-space: nowrap;
}
.table td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr:hover td { background: #FAFAF8; }
.table tr:last-child td { border-bottom: 0; }
.table .num, .table td.num, .table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table tfoot td { font-weight: 700; background: #FAFAF8; border-top: 1px solid var(--line); }
.table .group-row td { background: var(--hover); font-weight: 700; color: var(--text-2); }
.table td.actions { text-align: right; white-space: nowrap; }
.table .warn-row td { background: #FFFBE6; }
.table .bad-row td { background: #FDF3F2; }
.table .ok-row td { background: #F2F8F4; }
.empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.empty .empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.yes { color: var(--ok); font-weight: 700; }
.no { color: #c4c4c2; }

.toolbar { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.toolbar .search { display: flex; align-items: center; gap: 6px; border: 1px solid #d6d6d4; border-radius: var(--rbtn); padding: 0 10px; background: #fff; color: var(--grey); }
.toolbar .search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); color: var(--ink); }
.toolbar .search input[type=search], .toolbar .search input[type=text] { border: 0; height: 34px; min-height: 0; padding: 0; outline: none; box-shadow: none; font: inherit; min-width: 220px; }
.toolbar select { width: auto; min-width: 150px; height: 36px; min-height: 0; padding: 0 10px; }
.toolbar .spacer { flex: 1; }
/* Filterleiste: am Desktop stehen die Auswahlfelder nebeneinander (Knopf versteckt), am Handy hinter einem
   „Filter“-Knopf – app.js klappt das details-Element dort zu (data-phone-collapse), wie im Kalender */
.toolbar-filters { display: flex; flex: 1 1 0; min-width: 0; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar-filters > summary { display: none; }
.toolbar-filters ~ .spacer { display: none; }  /* die Filterbox füllt die Zeile selbst, der Knopf rückt dadurch nach rechts */
.toolbar-filters-body { display: contents; }
/* Neuere Browser legen den Inhalt von details in einen eigenen Block (::details-content) – auch der soll sich in die
   Zeile einreihen, sonst rutschen Kontrollkästchen und Datumsfelder unter die Auswahlfelder */
.toolbar-filters[open]::details-content { display: contents; }
/* zugeklappt (Handy): der Inhalt bleibt versteckt – ohne [open] würde display: contents das native Verstecken aufheben */
.toolbar-filters:not([open])::details-content { display: none; }
.toolbar > .toolbar-form { display: contents; }  /* Filterformular neben anderen Knöpfen (Eventplanung): Felder liegen direkt in der Leiste */
.only-phone { display: none; }
@media (max-width: 640px) {
  .toolbar { gap: 8px; padding: 10px 12px; }
  .toolbar .search { flex: 1 1 100%; }
  .toolbar .search input[type=search], .toolbar .search input[type=text] { flex: 1; min-width: 0; }
  .toolbar .spacer { display: none; }
  .toolbar-filters { display: block; flex: 1 1 100%; }
  .toolbar-filters > summary {
    display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; height: 34px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: var(--rbtn); background: #fff; color: var(--mid); font-size: 13px; font-weight: 600;
  }
  .toolbar-filters > summary::-webkit-details-marker { display: none; }
  .toolbar-filters > summary .count { background: var(--accent); color: #111; border-radius: 4px; padding: 0 6px; font-family: var(--label); font-size: 10.5px; font-weight: 700; line-height: 1.6; }
  .toolbar-filters[open] > summary { margin-bottom: 8px; color: var(--ink); border-color: var(--ink); }
  .toolbar-filters-body { display: grid; gap: 8px; }
  .toolbar-filters-body select { width: 100%; min-width: 0; }
  /* Listen: Spalten mit geringer Priorität (hide-phone) ausblenden, damit Nr., Name und Status ohne Wischen lesbar sind */
  .hide-phone { display: none; }
  .only-phone { display: block; }
  .table th, .table td { padding-left: 8px; padding-right: 8px; }
  .table .pill { white-space: normal; text-align: left; }  /* lange Status („Zurück im Lager“) dürfen umbrechen */
  /* Lange Wörter („Kautionsanforderung“, „Veranstaltungsbüro“) dürfen an Silben getrennt werden – sonst zwingen sie die
     Tabelle über den Rahmen hinaus; Zellen mit .nowrap/.num bleiben einzeilig, Status-Etiketten brechen nur am Leerzeichen */
  .table td { hyphens: auto; }
  .table .pill, .table .tag { hyphens: manual; }
  .table td.w-min-200 { min-width: 120px; }  /* Eventplanung: die Spalte „Event“ darf schmaler werden */
  .table .break-phone { word-break: break-all; }  /* lange Kennungen ohne Leerzeichen (IBAN) dürfen umbrechen */
  .toolbar > .btn-search { display: none; }  /* die Tastatur hat „Suchen“ – der Knopf bräuchte eine eigene Zeile (andere Knöpfe wie „Freigeben“ bleiben) */
}
.pagination { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* ---------- Status-Etiketten (Badges wie im Crew-Portal) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; line-height: 1.35;
  font-family: var(--label); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: #F0F0EE; color: var(--mid);
}
.pill-plain { text-transform: none; letter-spacing: 0; }
/* Farbstufen: grau · schwarz · gelb · grün · rot · „läuft“ (schwarz mit gelber Schrift) */
.pill-s-inquiry, .pill-s-completed, .pill-d-draft, .pill-d-cancelled, .pill-d-withdrawn, .pill-u-retired, .pill-t-waiting, .pill-m-spam,
.pill-sig-revoked, .pill-sig-expired, .pill-p-normal, .pill-c-returned { background: #F0F0EE; color: var(--mid); }
.pill-p-low { background: #F4F4F2; color: var(--grey); }
.pill-s-prepared, .pill-s-returned, .pill-d-final, .pill-d-sent, .pill-u-out, .pill-t-in_progress, .pill-m-open, .pill-info { background: #EDEDEB; color: var(--ink); }
.pill-sig-open, .pill-s-option, .pill-d-partial, .pill-u-maintenance, .pill-t-open, .pill-t-review, .pill-m-new, .pill-c-requested, .pill-c-planned, .pill-warn { background: var(--accent-soft); color: #111; box-shadow: inset 0 0 0 1px #F2DE7A; }
.pill-sig-signed, .pill-s-confirmed, .pill-s-invoiced, .pill-d-accepted, .pill-d-paid, .pill-d-credited, .pill-u-available, .pill-t-done, .pill-m-done,
.pill-c-confirmed, .pill-c-delivered, .pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-s-cancelled, .pill-d-declined, .pill-d-overdue, .pill-u-defect, .pill-u-lost, .pill-p-high, .pill-c-declined,
.pill-c-cancelled, .pill-bad { background: var(--red-soft); color: var(--red); }
.pill-s-running { background: var(--ink); color: var(--accent); }
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #F0F0EE; color: var(--text-2); font-size: 12px; font-weight: 600; margin: 0 4px 4px 0; }
.swatch { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .1); vertical-align: -2px; }

/* ---------- Reiter (als Chips wie im Crew-Portal) ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; padding: 1px 1px 4px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: 7px 13px; border-radius: var(--rbtn); background: #fff; border: 1px solid var(--line); color: var(--mid);
  font-size: 13px; font-weight: 600; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center;
}
.tabs a .icon { width: 16px; height: 16px; }
.tabs a:hover { color: var(--ink); border-color: var(--border-strong); text-decoration: none; }
.tabs a.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tabs .count { background: #F0F0EE; color: var(--mid); border-radius: 4px; padding: 0 6px; font-family: var(--label); font-size: 10.5px; font-weight: 700; line-height: 1.6; }
.tabs a.active .count { background: var(--accent); color: #111; }

.detail-head { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.detail-head .color-bar { width: 4px; align-self: stretch; border-radius: 3px; background: var(--ink); }
.detail-head .titles { flex: 1; min-width: 260px; }
.detail-head h1 { font-size: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-head .meta { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 6px; color: var(--mid); font-size: 13px; }
.detail-head .meta span { display: inline-flex; gap: 6px; align-items: center; }
.detail-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Formulare ---------- */
.form-card { max-width: 980px; }
.fieldset + .fieldset { margin-top: 8px; }
.fieldset-title { font-family: var(--label); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); font-weight: 700; margin: 6px 0 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form-grid .full, .form-grid .field-textarea, .form-grid .field-checkboxselectmultiple, .form-grid .field-selectmultiple { grid-column: 1 / -1; }
.field label { display: block; font-family: var(--label); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; color: var(--mid); }
.field .help { font-size: 12px; color: var(--muted); margin-top: 5px; }
.field .errors { color: var(--danger); font-size: 12.5px; font-weight: 600; margin-top: 5px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], input[type=datetime-local], input[type=time], input[type=url], input[type=search], input[type=tel], input[type=file], select, textarea {
  width: 100%; border: 1px solid #d6d6d4; border-radius: var(--rbtn); padding: 8px 12px; font: inherit; font-size: 14px; color: var(--text); background: #fff; min-height: 40px;
}
input[type=color] { width: 60px; height: 40px; border: 1px solid #d6d6d4; border-radius: var(--rbtn); padding: 2px; background: #fff; }
.optional-color { display: flex; align-items: center; gap: 12px; }
.optional-color-default { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.optional-color-default input { width: 16px; height: 16px; }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); }
textarea { min-height: 80px; resize: vertical; }
select[multiple] { min-height: 120px; }
/* Eigener Auswahlpfeil mit Abstand zum Rand (der Pfeil des Systems klebt sonst am rechten Rand) */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  background-image: url("../img/select-chevron.64e07c81e278.svg"); background-repeat: no-repeat;
  background-position: right 14px center; background-size: 16px 16px; padding-right: 42px !important;
}
select:not([multiple]):not([size]):disabled { background-image: none; padding-right: 12px !important; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
input::placeholder, textarea::placeholder { color: #9a9a98; }
.field-checkboxinput { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.field.field-checkboxinput label { margin: 0; order: 2; font-family: var(--font); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); }
.field-checkboxinput input { order: 1; width: 18px; height: 18px; }
.field-checkboxinput .help { order: 3; flex-basis: 100%; }
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.field .check-list label, .check-list label { font-family: var(--font); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); display: flex; gap: 8px; align-items: center; margin: 0; }
.check-list ul { list-style: none; margin: 0; padding: 0; display: contents; }
.check-list li { list-style: none; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 16px; border-top: 1px solid var(--line); background: #FAFAF8; border-radius: 0 0 var(--radius) var(--radius); }
.form-actions .spacer { flex: 1; }
.form-inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.form-inline .field { min-width: 120px; }
.form-inline .field.grow { flex: 1; min-width: 220px; }
.errorlist { color: var(--danger); margin: 0 0 10px; padding-left: 18px; font-weight: 600; }
.card-body > :is(.field, .form-inline) + :is(.field, .form-inline) { margin-top: 12px; }
input[type=file] { padding: 5px 6px; color: var(--mid); font-size: 13px; }
input[type=file]::file-selector-button {
  margin-right: 10px; height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--rbtn);
  background: var(--hover); color: var(--ink); font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: #EBEBE9; }

/* ---------- Hinweise ---------- */
.messages { margin-bottom: 16px; }
.alert { padding: 12px 14px; border-radius: 8px; border: 1px solid; margin-bottom: 8px; font-weight: 600; font-size: 13.5px; }
.alert-success { background: var(--ok-soft); border-color: #BFDCCB; color: var(--ok); }
.alert-info { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.alert-warning { background: #FFFBE6; border-color: var(--accent); color: #111; }
.alert-error, .alert-danger { background: var(--red-soft); border-color: #E8C2BE; color: var(--red); }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.notice-list li:last-child { border-bottom: 0; }
.notice-list .icon { margin-top: 2px; }
.notice-list a { text-decoration: none; }
.notice-list a:hover { text-decoration: underline; }
.notice-list .warn .icon { color: #B38F00; }
.notice-list .bad .icon { color: var(--danger); }
.notice-list .ok .icon { color: var(--ok); }

/* ---------- Disposition (Planer) ---------- */
.planner { --day-w: 46px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.planner-grid { display: grid; grid-template-columns: 240px repeat(var(--days), var(--day-w)); min-width: max-content; }
.planner-grid .ph { position: sticky; top: 0; background: #FAFAF8; border-bottom: 1px solid var(--line); font-family: var(--label); font-size: 10px; text-transform: uppercase; text-align: center; padding: 6px 0; color: var(--grey); z-index: 2; }
.planner-grid .ph.weekend { background: var(--hover); }
.planner-grid .ph.today { background: var(--accent); color: #111; font-weight: 700; }
.planner-grid .ph b { display: block; font-size: 14px; color: var(--text); }
.planner-grid .ph.today b { color: #111; }
.planner-grid .corner { position: sticky; left: 0; z-index: 3; text-align: left; padding: 6px 12px; }
.planner-row { display: contents; }
.planner-row .label { position: sticky; left: 0; background: var(--surface); z-index: 1; padding: 6px 12px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line); font-size: 13.5px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-height: 38px; display: flex; align-items: center; gap: 8px; }
.planner-row .lane { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(var(--days), var(--day-w)); grid-auto-rows: 26px; row-gap: 3px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); position: relative; background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px); background-size: var(--day-w) 100%; }
.planner .bar { display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 700; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0 2px; background: #7a7a78; }
.planner .bar:hover { filter: brightness(1.1); text-decoration: none; }
.planner .bar.status-inquiry { background: #9a9a98; }
.planner .bar.status-option { background: var(--accent); color: #111; }
.planner .bar.status-confirmed { background: var(--ok); }
.planner .bar.status-prepared { background: var(--platin); }
.planner .bar.status-running { background: var(--ink); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.planner .bar.status-returned { background: #7a7a78; }
.planner .bar.status-completed, .planner .bar.status-invoiced { background: #cfcfcd; color: #111; }
.planner .bar.conflict { box-shadow: inset 0 0 0 2px var(--red); }
.planner .bar.absence { background: repeating-linear-gradient(45deg, #dcdcda, #dcdcda 6px, #ececea 6px, #ececea 12px); color: var(--platin); }
.planner .today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent-dark); pointer-events: none; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- Kanban ---------- */
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 12px; overflow-x: auto; }
.board-col { background: #F1F0EE; border-radius: var(--radius); padding: 8px; min-height: 200px; }
.board-col h3 { font-family: var(--label); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mid); padding: 4px 4px 10px; display: flex; justify-content: space-between; }
.board-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; border-left: 3px solid var(--border-strong); }
.board-card.prio-high { border-left-color: var(--danger); }
.board-card .title { font-weight: 700; }
.board-card .meta { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Scan-Station (Lager, auch auf Handscannern) ---------- */
.scan-box { background: var(--nav-bg); color: #fff; border-radius: 12px; padding: 18px; }
.scan-box label { color: var(--grey); font-family: var(--label); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; display: block; margin-bottom: 8px; }
.scan-input { font-size: 22px !important; height: 56px; font-family: var(--mono) !important; letter-spacing: 1px; }
.scan-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.scan-modes button { flex: 1; height: 44px; border-radius: 8px; border: 2px solid #333; background: transparent; color: #cfcfcd; font: inherit; font-weight: 700; cursor: pointer; }
.scan-modes button.on.out { background: var(--accent); border-color: var(--accent); color: #111; }
.scan-modes button.on.in { background: var(--ok); border-color: var(--ok); color: #fff; }
.scan-log { list-style: none; margin: 12px 0 0; padding: 0; max-height: 300px; overflow-y: auto; }
.scan-log li { padding: 8px 10px; border-radius: 6px; margin-bottom: 6px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.scan-log li.ok { background: rgba(14, 122, 77, .25); color: #9ff0c1; }
.scan-log li.warn { background: rgba(255, 213, 0, .18); color: #ffe36b; }
.scan-log li.error { background: rgba(193, 8, 1, .3); color: #ffb3b3; }
.progress { height: 6px; background: #E9E9E7; border-radius: 99px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); width: 0; border-radius: 99px; }

/* ---------- Anmeldung (wie das Crew-Portal) ---------- */
body.auth { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); padding: 32px 24px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-brand { margin-bottom: 26px; }
.auth-brand img { height: 48px; width: auto; display: block; }
.auth-sub { font-family: var(--label); font-size: 11px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: .1em; margin-top: 10px; }
.auth-card h1 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 6px; }
.auth-card > p, .auth-card form + p { font-size: 13px; }
.auth-card .field { margin-bottom: 14px; }
.auth-card .btn-block { height: 46px; font-size: 14px; }
.auth-foot { color: var(--grey); font-size: 11.5px; margin-top: 22px; line-height: 1.6; }
.qr { display: flex; justify-content: center; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 0; }
.qr img { width: 210px; height: 210px; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; font-family: var(--mono); font-size: 15px; background: #fff; border: 1px dashed var(--border-strong); padding: 12px; border-radius: 8px; }
.otp-input { font-family: var(--label) !important; font-size: 26px !important; letter-spacing: 8px; text-align: center; height: 56px; }

/* ---------- Diverses ---------- */
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.list-plain li:last-child { border-bottom: 0; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.timeline .when { font-family: var(--label); font-size: 10.5px; color: var(--grey); text-transform: uppercase; letter-spacing: .05em; }
.mail-body { white-space: pre-wrap; font-family: var(--font); background: #FAFAF8; border: 1px solid var(--line); border-radius: 8px; padding: 14px; max-height: 520px; overflow: auto; }
.label-sheet { display: grid; grid-template-columns: repeat(auto-fill, 62mm); gap: 4mm; }
.print-label { width: 62mm; height: 29mm; border: 1px dashed #cfcfcd; border-radius: 3mm; padding: 2mm 3mm; display: flex; gap: 3mm; align-items: center; background: #fff; }
.print-label img { width: 24mm; height: 24mm; }
.print-label .t { font-size: 11px; line-height: 1.25; }
.print-label .t b { font-size: 13px; display: block; }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.provider { padding: 14px 16px; }
.provider h3 { font-size: 15.5px; }
.stars { color: var(--accent-dark); letter-spacing: 1px; }
.split { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.small { font-size: 12.5px; }
.danger-zone { border-color: #E8C2BE; }
.danger-zone .card-head { background: #FDF6F5; border-radius: var(--radius) var(--radius) 0 0; }
.kbd { font-family: var(--mono); background: #F0F0EE; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 12px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main-side { grid-template-columns: minmax(0, 1fr); }
  .content { padding: 24px 24px 60px; }
  .topbar { padding: 0 24px; }
}

/* ---------- Handy und Tablets mit Touch: Tab-Leiste unten, Navigation als Seitenblatt ---------- */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .topbar-logo { display: inline-flex; }
  .shell { padding-left: 0; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .sidebar, .sidebar:hover, .sidebar:focus-within {
    width: min(320px, 86vw); box-shadow: none; padding: 14px 12px 28px;
    transform: translateX(-102%); transition: transform .22s ease-out, box-shadow .22s ease-out;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .sidebar { transform: none; box-shadow: 14px 0 34px rgba(17, 17, 17, .18); }
  .navbrand { height: 62px; margin-bottom: 6px; }
  .navbrand-link { width: 140px; height: 40px; }
  .brandlogo, .sidebar:hover .brandlogo, .sidebar:focus-within .brandlogo { transform: none; transition: none; height: 26px; top: 6px; }
  .brandsub, .sidebar:hover .brandsub, .sidebar:focus-within .brandsub { opacity: 1; top: 40px; transition: none; }
  .nav-close { display: inline-flex; position: absolute; top: 4px; right: 2px; }
  .nav-label, .nav-section span { opacity: 1; }
  .nav-search { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--grey); }
  .nav-search:focus-within { border-color: var(--ink); color: var(--ink); }
  .nav-search input[type=search] { border: 0; background: transparent; min-height: 0; height: 40px; padding: 0; box-shadow: none; }
  .nav-search input[type=search]:focus { box-shadow: none; }
  .nav-overlay { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(17, 17, 17, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(249, 249, 249, .95); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); justify-content: center;
  }
  .tab {
    position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0 2px; background: none; border: 0; color: var(--grey); font: inherit; cursor: pointer; max-width: 150px;
  }
  .tab:hover { text-decoration: none; color: var(--mid); }
  .tab .icon { width: 22px; height: 22px; }
  .tab span { font-size: 10.5px; font-weight: 600; white-space: nowrap; }
  .tab.on { color: var(--ink); }
  .tab.dot::after { content: ""; position: absolute; top: 3px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }

  /* Eingabefelder mindestens 16 px: iOS Safari zoomt sonst beim Antippen in die Seite (Desktop bleibt bei 14 px) */
  input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], input[type=datetime-local], input[type=time], input[type=url], input[type=search], input[type=tel], input[type=file], select, textarea { font-size: 16px; }
  .toolbar .search input[type=search], .toolbar .search input[type=text], .global-search input[type=search], .nav-search input[type=search] { font-size: 16px; }
}

/* ---------- Handy: Seitenaufbau ---------- */
@media (max-width: 820px) {
  .only-mobile { display: inline-flex; }
  .hide-mobile { display: none; }
  .topbar { height: 62px; padding: 0 16px; gap: 10px; }
  .topbar-right { gap: 8px; }
  .userchip { padding: 4px; }
  .userchip .avatar { width: 28px; height: 28px; }
  .clock { padding: 4px; }
  .clock-label { display: none; }
  .btn.clock-start { width: 38px; height: 38px; padding: 0; }
  .content { padding: 18px 16px 28px; }
  h1, .page-head .titles h1 { font-size: 22px; }
  .page-head { margin-bottom: 14px; }
  .page-head .actions .btn { height: 34px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid-4 > .kpi { padding: 14px; }
  .grid-4 > .kpi .value { font-size: 22px; }
  .grid-4 > .kpi .hint { display: none; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  dl.facts { grid-template-columns: 120px 1fr; }
  .board { grid-template-columns: repeat(4, 85vw); }
  .scan-first > :last-child { order: -1; }  /* Handscanner: Scanfeld zuerst */
  .usermenu .menu { right: -4px; min-width: min(280px, 92vw); }
}

/* ---------- Druck ---------- */
@media print {
  .sidebar, .topbar, .tabbar, .nav-overlay, .page-head .actions, .no-print, .tabs { display: none !important; }
  .shell { padding: 0; }
  body { background: #fff; }
  .content { padding: 0; }
  .card { border: 0; }
  .print-label { border: 0; break-inside: avoid; }
}

/* ---------- Hilfsklassen (statt Inline-Styles, wegen CSP) ---------- */
.row-gap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.w-220 { width: 220px; }
.w-160 { width: 160px; }
.w-min-200 { min-width: 200px; }
.w-120 { width: 120px; }
.w-90 { width: 90px; }
.w-60 { width: 60px; }
.codes.single { grid-template-columns: 1fr; }
.hidden { display: none !important; }
.legend .status-inquiry { background: #9a9a98; }
.legend .status-option { background: var(--accent); }
.legend .status-confirmed { background: var(--ok); }
.legend .status-prepared { background: var(--platin); }
.legend .status-running { background: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.legend .status-returned { background: #7a7a78; }
.legend .absence { background: repeating-linear-gradient(45deg, #dcdcda, #dcdcda 3px, #ececea 3px, #ececea 6px); }
.qr-img { width: 120px; height: 120px; }

/* ---------- Belegpositionen bearbeiten ---------- */
.line-editor { table-layout: fixed; min-width: 1050px; }
.line-editor td { padding: 6px 5px; vertical-align: top; }
.line-editor input, .line-editor select, .line-editor textarea { min-height: 34px; padding: 5px 7px; font-size: 13.5px; }
.line-editor textarea { min-height: 34px; margin-top: 4px; font-size: 12.5px; color: var(--text-2); }
.line-editor .offset-pick { display: block; margin-top: 4px; }
.line-editor .offset-pick select { margin-top: 2px; width: 100%; }
.line-editor .c-pos { width: 76px; }
.line-editor .c-kind { width: 150px; }
.line-editor .c-qty { width: 84px; }
.line-editor .c-unit { width: 96px; }
.line-editor .c-price { width: 110px; }
.line-editor .c-factor { width: 78px; }
.line-editor .c-disc { width: 82px; }
.line-editor .c-tax { width: 150px; }
.line-editor .c-del { width: 44px; }
.line-editor .c-del-label { width: 72px; }  /* „Löschen“ ausgeschrieben – sonst abgeschnitten */
.line-editor input[type=checkbox] { min-height: 0; width: 18px; height: 18px; margin-top: 8px; }

/* ==========================================================================
   Eventplanung
   ========================================================================== */
.ws-tabs { margin-bottom: 18px; }
.ws-tabs a .icon { width: 16px; height: 16px; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.info-grid > .card + .card { margin-top: 0; }
.prewrap { white-space: pre-line; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .who { font-weight: 600; }
.contact-list .what { color: var(--muted); font-size: 13px; }
.stat-row { display: flex; gap: 18px; flex-wrap: wrap; padding: 14px 16px; }
.stat-row .stat b { display: block; font-size: 22px; line-height: 1.1; }
.stat-row .stat span { color: var(--muted); font-size: 12.5px; }
.bar-meter { height: 8px; background: #E9E9E7; border-radius: 99px; overflow: hidden; }
.bar-meter > span { display: block; height: 100%; background: var(--accent); width: 0; border-radius: 99px; }
.bar-meter.warn > span { background: var(--warning); }
.bar-meter.bad > span { background: var(--danger); }

/* Ablaufplan */
.runsheet td { vertical-align: top; }
.runsheet .c-handle { width: 30px; color: #b5b5b3; cursor: grab; padding-right: 0; }
.runsheet .c-time { width: 118px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.runsheet .c-time b { font-size: 15.5px; }
.runsheet .c-dur { width: 70px; text-align: right; white-space: nowrap; color: var(--text-2); }
.runsheet .c-actions { width: 120px; text-align: right; white-space: nowrap; }
.runsheet .details { color: var(--text-2); font-size: 13px; margin-top: 3px; white-space: pre-line; }
.runsheet .tech { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--text-2); }
.runsheet .tech span b { color: var(--muted); font-weight: 600; margin-right: 4px; }
.runsheet tr.day-row td { background: #F4F4F2; font-weight: 700; color: var(--text-2); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.runsheet tr.dragging td { opacity: .4; }
.runsheet tr.drop-above td { box-shadow: inset 0 3px 0 var(--primary); }
.runsheet tr.drop-below td { box-shadow: inset 0 -3px 0 var(--primary); }
.runsheet tr.st-done td { color: var(--muted); }
.runsheet tr.st-running td { background: #FFFBE6; }
.kind-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: #9a9a98; vertical-align: 1px; }
.kind-program { background: #111111; } .kind-tech { background: #7348d6; } .kind-catering { background: #d79b00; }
.kind-setup, .kind-teardown { background: #646464; } .kind-logistics { background: #0e8aa5; } .kind-break { background: #b5b5b3; }
.vis { display: inline-flex; gap: 4px; }
.vis .tag { margin: 0; font-size: 11.5px; }
.vis .off { opacity: .35; text-decoration: line-through; }

/* Live-Modus (Regie) */
.live-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 16px; }
.live-now { background: var(--nav-bg); color: #fff; border-radius: 12px; padding: 20px 22px; }
.live-now .lbl { color: #A7A7A7; text-transform: uppercase; letter-spacing: .8px; font-size: 12px; font-weight: 700; }
.live-now .title { font-size: 30px; font-weight: 700; line-height: 1.15; margin: 4px 0 6px; }
.live-now .meta { color: #cfcfcd; }
.live-countdown { font-family: var(--mono); font-size: 64px; font-weight: 700; letter-spacing: 2px; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.live-countdown.warn { color: var(--accent); }
.live-countdown.over { color: #ff6b63; }
.live-delay { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.12); }
.live-delay:empty { display: none; }
.live-now .btn-ghost { color: #cfcfcd; }
.live-now .btn-ghost:hover { background: rgba(255,255,255,.08); }
.live-delay.late { background: rgba(211, 59, 59, .35); }
.live-delay.early { background: rgba(31, 157, 85, .35); }
.live-next { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); color: #cfcfcd; }
.live-next b { color: #fff; font-size: 18px; }
.live-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.live-controls .btn { height: 54px; justify-content: center; font-size: 16px; }
.live-controls .btn-next { grid-column: span 2; font-size: 18px; }
.live-list { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.live-list li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.live-list li .t { font-variant-numeric: tabular-nums; font-weight: 600; }
.live-list li .p { font-size: 12px; color: var(--muted); }
.live-list li.st-done { color: var(--muted); }
.live-list li.st-done .ttl { text-decoration: line-through; }
.live-list li.st-skipped { color: var(--muted); font-style: italic; }
.live-list li.st-running { background: #FFFBE6; box-shadow: inset 3px 0 0 var(--accent); }
.live-msg { display: flex; gap: 8px; margin-top: 14px; }
.live-msg input { flex: 1; }

/* Bühnen-Timer (Vollbild, auch auf Tablet an der Bühne) */
body.timer-page { background: #000; color: #fff; margin: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-family: var(--font); padding: 4vh 4vw; overflow: hidden; }
.timer-title { font-size: 4.5vw; font-weight: 700; line-height: 1.1; max-width: 92vw; }
.timer-digits { font-family: var(--mono); font-size: 24vw; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2vh 0; }
.timer-digits.warn { color: var(--accent); }
.timer-digits.over { color: #ff4d4d; }
.timer-next { font-size: 2.6vw; color: #A7A7A7; }
.timer-msg { position: fixed; left: 0; right: 0; top: 0; background: var(--accent); color: #000; font-size: 4vw; font-weight: 700; padding: 1.6vh 3vw; }
.timer-clock { position: fixed; right: 2vw; bottom: 2vh; color: #7a7a78; font-size: 2vw; font-family: var(--mono); }
.timer-back { position: fixed; left: 2vw; bottom: 2vh; color: #7a7a78; font-size: 14px; }

/* Checkliste */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); }
.checklist li:last-child { border-bottom: 0; }
.checklist li.done .ttl { text-decoration: line-through; color: var(--muted); }
.checklist .meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); justify-content: flex-end; }
.check-btn { width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--border-strong); background: #fff; display: inline-grid; place-items: center; cursor: pointer; color: #fff; padding: 0; }
.check-btn:hover { border-color: var(--success); }
.check-btn.on { background: var(--success); border-color: var(--success); }
.check-btn .icon { width: 16px; height: 16px; }
.group-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 700; color: var(--text-2); }

/* Raumplan-Editor */
.fp-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.fp-palette { display: flex; flex-direction: column; gap: 4px; padding: 10px; max-height: 76vh; overflow-y: auto; }
.fp-palette button { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13.5px; cursor: pointer; }
.fp-palette button:hover { border-color: var(--primary); background: var(--primary-soft); }
.fp-palette .sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); flex: 0 0 auto; }
.fp-stage { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.fp-toolbar { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--surface-2); }
.fp-toolbar .spacer { flex: 1; }
.fp-status { font-size: 13px; color: var(--muted); }
.fp-status.dirty { color: var(--warning); font-weight: 600; }
.fp-svg { display: block; width: 100%; height: 72vh; touch-action: none; user-select: none; background: #FCFCFB; }
.fp-svg.readonly { height: auto; max-height: 80vh; aspect-ratio: auto; }
.fp-grid-minor { stroke: #F0F0EE; stroke-width: 1; }
.fp-grid-major { stroke: #E3E3E1; stroke-width: 2; }
.fp-room { fill: none; stroke: #333333; stroke-width: 6; }
.fp-item { cursor: move; }
.fp-item .shape { stroke: #333333; stroke-width: 3; }
.fp-item.kind-area .shape { stroke-dasharray: 18 10; fill-opacity: .6; }
.fp-item.kind-text .shape { fill: transparent; stroke: none; }
.fp-item .chair { fill: #ffffff; stroke: #646464; stroke-width: 2; }
.fp-item.selected .shape { stroke: var(--primary); stroke-width: 6; }
.fp-label { font-family: var(--font); font-weight: 600; fill: #111111; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.fp-label.light { fill: #ffffff; }
.fp-dim { font-family: var(--font); fill: #646464; text-anchor: middle; }
.fp-props { padding: 12px; }
.fp-props .field { margin-bottom: 10px; }
.fp-props .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fp-sum { font-size: 13px; }
.fp-sum li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #E9E9E7; }
.fp-help { font-size: 12.5px; color: var(--muted); }

/* Gäste & Einlass */
.ticket { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ticket img { width: 180px; height: 180px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.ticket .code { font-family: var(--mono); font-size: 22px; letter-spacing: 3px; font-weight: 700; }
.checkin-hits { list-style: none; margin: 12px 0 0; padding: 0; }
.checkin-hits li { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.06); margin-bottom: 6px; }
.checkin-hits li .n { font-weight: 700; font-size: 16px; }
.checkin-hits li .d { font-size: 13px; color: #cfcfcd; }
.checkin-hits li.in { background: rgba(31, 157, 85, .2); }
.checkin-counter { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; }
.checkin-video { width: 100%; max-height: 300px; border-radius: 10px; background: #000; margin-top: 10px; }
.table-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.table-cards > .card + .card { margin-top: 0; }
.table-cards .over { border-color: #E8C2BE; }

/* Freigabe-Links */
.link-url { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; overflow-wrap: anywhere; display: block; margin-top: 4px; }
.kind-tabs { margin-bottom: 0; }
.kind-tabs a { padding: 9px 11px; font-size: 14px; }

/* Druck: Ablaufplan & Raumplan */
.print-sheet { background: #fff; padding: 24px; max-width: 1100px; margin: 0 auto; }
.print-sheet h1 { font-size: 22px; }
.print-sheet .sub { color: var(--muted); margin-bottom: 14px; }
.print-sheet table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.print-sheet th, .print-sheet td { border-bottom: 1px solid #E3E3E1; padding: 6px 6px; text-align: left; vertical-align: top; }
.print-sheet th { background: #F4F4F2; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; }
.print-bar { display: flex; gap: 8px; justify-content: flex-end; max-width: 1100px; margin: 0 auto 10px; padding: 10px 24px 0; }
body.print-body { background: #F0F0EE; }

/* ==========================================================================
   Öffentlicher Bereich (Kundenportal, Briefing, Gäste)
   ========================================================================== */
body.portal { background: var(--bg); }
.portal-head { background: var(--surface); border-bottom: 1px solid var(--border); }
.portal-head .stripe { height: 5px; background: var(--accent); }
.portal-head .inner { max-width: 980px; margin: 0 auto; padding: 14px 18px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.portal-head .brandname { font-weight: 700; font-size: 18px; }
.portal-head .sub { color: var(--muted); font-size: 13px; }
.portal-main { max-width: 980px; margin: 0 auto; padding: 20px 18px 60px; }
.portal-main .hero { margin-bottom: 18px; }
.portal-main .hero h1 { font-size: 26px; }
.portal-main .hero .meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--text-2); margin-top: 6px; }
.portal-main .hero .meta span { display: inline-flex; gap: 6px; align-items: center; }
.portal-foot { max-width: 980px; margin: 0 auto; padding: 0 18px 30px; color: var(--muted); font-size: 12.5px; }
.portal-main .card + .card { margin-top: 16px; }
.portal-main .grid > .card + .card { margin-top: 0; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1100px) {
  .fp-layout { grid-template-columns: minmax(0, 1fr); }
  .fp-palette { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .live-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .runsheet .c-handle, .runsheet .c-tech { display: none; }
  .live-countdown { font-size: 48px; }
  .live-now .title { font-size: 24px; }
  .live-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checklist li { grid-template-columns: 34px minmax(0, 1fr); }
  .checklist .meta { grid-column: 2; justify-content: flex-start; }
  .fp-svg { height: 60vh; }
}
@media print {
  .print-bar, .no-print { display: none !important; }
  body.print-body { background: #fff; }
  .print-sheet { padding: 0; max-width: none; }
  .fp-svg { height: auto; max-height: none; }
  @page { size: A4 landscape; margin: 12mm; }
}

/* ===================================================================== Material & Kalkulation (Rentman-Stil) */
.me [hidden] { display: none !important; }
.me { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 12px; align-items: start; }
.me-main { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.me-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 3; border-radius: var(--radius) var(--radius) 0 0; }
.me-quick { position: relative; flex: 1 1 300px; display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 8px; }
.me-quick:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); background: var(--surface); }
.me-quick .icon { color: var(--primary); flex: none; }
.me .me-quick-input { border: 0; background: transparent; box-shadow: none; height: 32px; padding: 0; flex: 1; min-width: 0; font-size: 14px; }
.me-quick-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; z-index: 20; display: grid; gap: 6px; }
.me-quick-row { display: flex; gap: 8px; align-items: center; }
.me .me-quick-row select { flex: 1; height: 30px; padding: 2px 8px; font-size: 13.5px; }
.me-target { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.me .me-target select { height: 32px; width: auto; min-width: 130px; padding: 2px 8px; font-size: 13.5px; }
.me-status { font-size: 12.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.me-status.bad { color: var(--danger); font-weight: 600; }
.me-table-wrap { overflow-x: auto; position: relative; }
.me-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.me-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 7px 4px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.me-table td { padding: 1px 4px; height: 34px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.me-table .c-handle { width: 18px; color: #b5b5b3; cursor: grab; padding-left: 6px; }
.me-table .c-qty { width: 58px; }
.me-table .c-name { min-width: 200px; }
.me-table .c-av { width: 1%; white-space: nowrap; }
.me-table .c-num { text-align: right; white-space: nowrap; width: 82px; }
.me-table th.c-num { text-align: right; padding-right: 10px; }
.me-table .c-factor, .me-table .c-disc { width: 62px; }
.me-table .c-act { width: 1%; white-space: nowrap; text-align: right; padding-right: 6px; }
.me-table .c-name a { color: var(--text); font-weight: 600; }
.me-table .c-name a:hover { color: var(--primary); }
.me-nr { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: 4px; }
.me-line:hover td { background: #FAFAF8; }
.me-line.bad-row td { background: #FDF3F2; }
.me-line.dragging { opacity: .45; }
/* Optionale Positionen (Angebot „nicht im Gesamtbetrag“): gestrichelt, gedämpft – zählen in keiner Summe */
.me-line.me-optional td { background: repeating-linear-gradient(135deg, #FFFFFF, #FFFFFF 6px, #FAFAF6 6px, #FAFAF6 12px); }
.me-line.me-optional .c-name a { color: var(--mid); }
.pill-optional { background: var(--accent-soft); color: #111; box-shadow: inset 0 0 0 1px #F2DE7A; }
.me .me-opt { min-width: 52px; }
.me .me-opt.on { background: var(--accent); color: #111; }
.me-book-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.me-tot-opt b { color: var(--mid); }
.table tr.row-optional td { color: var(--mid); background: #FCFCF8; }
.line-editor .opt-pick { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--mid); }
.card-optional .c-check { width: 32px; text-align: center; }
.options-undo summary { cursor: pointer; color: var(--mid); }
.option-undo-list { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 4px; }
.option-undo-list label { display: flex; align-items: center; gap: 8px; }
.me-line.drop td, .me-group.drop td { box-shadow: inset 0 2px 0 var(--primary); }
.me-group td { background: #F4F4F2; font-weight: 600; height: 32px; padding: 2px 6px; border-bottom: 1px solid var(--border); }
.me-group .me-toggle { border: 0; background: none; padding: 2px 4px; cursor: pointer; color: var(--muted); vertical-align: middle; }
.me-group .btn { margin-left: 6px; }
/* Eingabefelder in der Tabelle: wie Text, erst beim Überfahren/Anklicken als Feld sichtbar */
.me .me-in { height: 26px; min-height: 0; padding: 1px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; box-shadow: none; text-align: right; width: 100%; font: inherit; color: inherit; }
.me .me-in:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface); }
.me .me-in:focus { border-color: var(--primary); background: var(--surface); outline: none; box-shadow: 0 0 0 2px var(--primary-soft); }
.me .me-in:disabled { color: inherit; }
.me .me-in.w-qty { width: 52px; font-weight: 700; text-align: center; background: var(--surface-2); border-color: var(--border); }
.me .me-in.me-note, .me .me-in.me-group-in { text-align: left; border-color: var(--border-strong); background: var(--surface); width: 100%; max-width: 420px; margin: 2px 0; }
.me .me-in::placeholder { color: #b5b5b3; }
.me-subrent { margin-left: 4px; }
.me-kind { font-size: 11.5px; color: var(--muted); min-width: 52px; }
.me-del:hover { color: var(--danger); }
.me-side { display: grid; gap: 12px; position: sticky; top: 12px; max-height: calc(100vh - 110px); overflow: auto; }
.me-catalog { display: flex; flex-direction: column; min-height: 0; }
.me-cat-head { padding: 8px 8px 0; display: grid; gap: 6px; border-bottom: 1px solid var(--border); }
.me-cat-cols { display: grid; grid-template-columns: 1fr 44px 50px; gap: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 2px 6px 6px 22px; }
.me-cat-cols span:not(:first-child) { text-align: center; }
.me-folder-head { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: var(--surface); font: inherit; font-weight: 600; font-size: 13px; color: var(--text); padding: 6px 8px; cursor: pointer; border-bottom: 1px solid var(--line-soft); text-align: left; }
.me-folder-head:hover { background: #FAFAF8; }
.me-folder-head .icon { color: var(--muted); }
.me-folder-head .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-cat-planned { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--primary); }
.me-cat-free { width: 44px; text-align: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.me-cat-free.ok { color: var(--success); }
.me-cat-free.warn { color: var(--warning); }
.me-cat-free.bad { color: var(--danger); }
.me .me-in.me-cat-qty { width: 50px; text-align: center; border-color: var(--border); background: var(--surface); height: 24px; }
.me-cat-item.pending { background: var(--primary-soft); }
.me-cat-item.pending .me-cat-qty { border-color: var(--primary); font-weight: 700; }
.me-cat-foot { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--border); background: var(--surface-2); position: sticky; bottom: 0; font-size: 12.5px; }
.me-cat-foot span { flex: 1; color: var(--text-2); font-weight: 600; }
.me-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 8px; background: var(--surface); }
.me-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.me .me-search input { border: 0; box-shadow: none; height: 32px; padding: 0; flex: 1; min-width: 0; font-size: 14px; }
.me .me-cat-head select { height: 32px; padding: 2px 8px; font-size: 13.5px; }
.me-cat-list { margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.me-cat-item { display: grid; grid-template-columns: 1fr 44px 50px; align-items: center; gap: 6px; padding: 3px 8px 3px 22px; border-bottom: 1px solid var(--line-soft); font-size: 13px; cursor: grab; min-height: 31px; }
.me-cat-item:hover { background: #FAFAF8; }
.me-cat-item.in-project { box-shadow: inset 3px 0 0 var(--accent); }
.me-cat-item .grow { flex: 1; min-width: 0; }
.me-cat-item .strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-cat-right { display: grid; justify-items: end; gap: 2px; white-space: nowrap; font-size: 12px; }
.me-add { padding: 3px 5px; }
.me-suggest-list { list-style: none; margin: 0; padding: 4px 0; }
.me-suggest-list li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; }
.me-suggest-list li .grow { flex: 1; }
.me-suggest-list .icon { color: var(--primary); flex: none; }
.me-totals { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 9px 16px; background: var(--nav-bg); color: #e7e7e5; border-radius: var(--radius); box-shadow: 0 -4px 16px rgba(16, 24, 40, .12); }
.me-tot { display: grid; line-height: 1.2; }
.me-tot span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #A7A7A7; }
.me-tot b { font-size: 14.5px; color: #fff; font-weight: 600; white-space: nowrap; }
.me-tot-strong b { font-size: 18px; }
.me .me-tot-disc input { width: 52px; height: 24px; min-height: 0; padding: 1px 6px; text-align: right; border-radius: 4px; border: 1px solid #3a3a38; background: #222222; color: #fff; box-shadow: none; }
.me-tot-margin small { color: #A7A7A7; }
.me-tot-margin.good b { color: #5fd38d; }
.me-tot-margin.low b { color: #ff8a80; }
.me-quote { margin-left: auto; }
@media (max-width: 1100px) {
  .me { grid-template-columns: 1fr; }
  .me-side { position: static; max-height: none; }
  .me-cat-list { max-height: 260px; }
}
@media (max-width: 640px) {
  .me-table .c-factor, .me-table .c-disc, .me-table .c-handle, .me-nr { display: none; }
  .me-totals { gap: 4px 12px; }
}
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  /* Handy/Tablet: Summenleiste über der Tab-Leiste, eine Zeile zum Wischen */
  .me-totals { bottom: calc(72px + env(safe-area-inset-bottom)); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 14px; }
  .me-totals::-webkit-scrollbar { display: none; }
  .me-tot { flex: none; }
  .me-quote { flex: none; }
}

/* Projektfortschritt (Ampeln in der Projektliste) und Farbpunkt */
.prog { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; margin-right: 3px; }
.prog-ok { color: var(--ok); background: var(--ok-soft); }
.prog-warn { color: #9A7600; background: var(--accent-soft); }
.prog-bad { color: var(--red); background: var(--red-soft); }
.prog-none { color: #b5b5b3; background: #F4F4F2; }
.color-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #cfcfcd; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.table td.w-dot { width: 18px; padding-right: 0; }

/* ---------------------------------------------------------------- Kasse */
.cash-in { color: var(--success); }
.cash-out { color: var(--danger); }
.cash-ok { color: var(--success); display: flex; align-items: center; gap: 8px; }
.cash-bad { color: var(--danger); display: flex; align-items: center; gap: 8px; }
.cash-balance .value { font-size: 28px; }
.cash-month { min-width: 130px; text-align: center; }
.cash-table td { vertical-align: top; }
.cash-table tr.is-storno td { background: #FDF3F2; }
.cash-table tr.is-storno td .strong { color: var(--danger); }
.cash-table tr.is-cancelled td .strong { text-decoration: line-through; color: var(--muted); }
.cash-table tfoot td { border-top: 2px solid var(--border-strong); background: var(--surface-2); }
.cash-row-actions { width: 1%; }
.cash-pop { position: relative; display: inline-block; }
.cash-pop > summary { list-style: none; }
.cash-pop > summary::-webkit-details-marker { display: none; }
.cash-pop-body { position: absolute; right: 0; top: 30px; z-index: 30; width: 280px; display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 12px; box-shadow: 0 10px 30px rgba(20, 30, 45, .16); }
.cash-pop-body input[type=text] { min-height: 34px; }
.cash-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.cash-kind ul, .cash-kind li { list-style: none; margin: 0; padding: 0; }
.cash-kind-opt { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; background: var(--surface); user-select: none; }
.cash-kind-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cash-kind-opt:has(input:checked).cash-kind-in { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.cash-kind-opt:has(input:checked).cash-kind-out { background: var(--red-soft); border-color: var(--danger); color: var(--danger); }
.cash-kind-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.cash-book input[name=amount] { font-size: 22px; font-weight: 700; height: 46px; }
.cash-book.is-in .form-actions .btn-primary { background: var(--success); border-color: var(--success); }
.cash-book .is-muted { opacity: .45; }
.cash-rules { margin: 0; padding-left: 30px; display: flex; flex-direction: column; gap: 6px; }
.cash-figure { font-size: 22px; font-weight: 700; height: 38px; display: flex; align-items: center; }
.cash-count { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.cash-count-row { display: grid; grid-template-columns: 72px 14px 80px 1fr; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.cash-count-row input { height: 32px; text-align: right; }
.cash-den { font-weight: 700; font-variant-numeric: tabular-nums; }
.cash-den.is-note { color: var(--primary); }
.cash-count-sum { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.cash-closing-bar { display: flex; align-items: center; gap: 24px; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--nav-bg); color: #fff;
  border-radius: 0 0 var(--radius) var(--radius); flex-wrap: wrap; }
.cash-closing-bar .label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #A7A7A7; }
.cash-closing-bar b { font-size: 20px; }
.cash-closing-bar b.cash-ok { color: #6fdc9b; } .cash-closing-bar b.cash-bad { color: #ff8f8f; }
.cash-closing-bar .btn { margin-left: auto; }
@media (max-width: 900px) {
  .cash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash-layout > .stack { order: -1; }  /* am Handy zuerst buchen, dann das Journal */
  .cash-pop-body { right: -8px; width: min(280px, 86vw); }
}

/* ---------------------------------------------------------------- eventdrop-Feinschliff für die Module */
.me-tot span, .cash-closing-bar .label, .stat-row .stat span, .live-now .lbl { font-family: var(--label); }
.me-tot b, .cash-closing-bar b, .stat-row .stat b, .checkin-counter, .cash-figure, .ticket .code { font-family: var(--label); font-variant-numeric: tabular-nums; }
.me-tot-strong b { color: var(--accent); }
.stat-row .stat span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.live-countdown, .timer-digits { font-family: var(--label); }
.timer-msg { color: #111; }
.group-head { font-family: var(--label); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; background: #FAFAF8; border-bottom-color: var(--line); }
.check-btn.on { background: var(--ink); border-color: var(--ink); }
.check-btn:hover { border-color: var(--ink); }
.cash-kind-opt { border-radius: var(--rbtn); }
/* Hauptknopf auf dunklen Leisten: gelb (wie „Start“ im Crew-Portal) */
.cash-closing-bar .btn-primary, .me-totals .btn-primary, .live-now .btn-primary, .scan-box .btn-primary { background: var(--accent); border-color: var(--accent); color: #111; }
.cash-closing-bar .btn-primary:hover, .me-totals .btn-primary:hover, .live-now .btn-primary:hover, .scan-box .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.live-now .btn:disabled, .scan-box .btn:disabled { opacity: 1; background: #262624; border-color: #262624; color: #6b6b69; }
.planner .bar.absence-requested { opacity: .55; }

/* ==========================================================================
   Crew-App („Mein Bereich“), Chat, Schwarzes Brett, Mängel, Mitteilungen
   Handy zuerst – große Tippflächen, Karten im Stil des Crew-Portals.
   ========================================================================== */

/* ---------- Status-Farben weiterer Bereiche ---------- */
.pill-a-requested, .pill-x-submitted, .pill-r-open, .pill-o-open, .pill-df-open, .pill-i-new, .pill-sev-minor { background: var(--accent-soft); color: #111; box-shadow: inset 0 0 0 1px #F2DE7A; }
.pill-a-approved, .pill-x-approved, .pill-x-paid, .pill-r-yes, .pill-o-done, .pill-df-fixed, .pill-i-done, .pill-al-safe, .pill-al-ready, .pill-al-seen, .pill-tr-business { background: var(--ok-soft); color: var(--ok); }
.pill-a-rejected, .pill-x-rejected, .pill-r-no, .pill-r-cancelled, .pill-al-help, .pill-sev-safety, .pill-sev-unusable, .pill-i-declined { background: var(--red-soft); color: var(--red); }
.pill-a-reported, .pill-o-on_the_way, .pill-df-repair, .pill-i-planned, .pill-tr-commute { background: #EDEDEB; color: var(--ink); }
.pill-a-cancelled, .pill-r-withdrawn, .pill-r-filled, .pill-df-retired, .pill-df-invalid, .pill-tr-private { background: #F0F0EE; color: var(--mid); }
.pill-sev-safety { background: var(--red); color: #fff; }

/* ---------- Bausteine ---------- */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 2px 10px; }
.section-title span { font-family: var(--label); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.section-title a { font-size: 12.5px; color: var(--mid); }
.section-title:first-child { margin-top: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avatar.sm { width: 28px; height: 28px; font-size: 10.5px; }
.avatar.xl { width: 96px; height: 96px; font-size: 28px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.btn-xl { height: 56px; padding: 0 22px; font-size: 16px; font-weight: 700; border-radius: 10px; }
.warn-text { color: var(--warning); }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; font-family: var(--mono); font-size: 12.5px; }
.copy-row .btn.is-done { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }

/* Listen mit Icon, Titel, Untertitel, Seite (Crew-Portal-Stil) */
.mlist { list-style: none; margin: 0; padding: 0; }
.mlist > li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); min-height: 56px; }
.mlist > li:last-child { border-bottom: 0; }
.mlist > li.wrap { flex-wrap: wrap; }
.mlist > li.empty { justify-content: center; color: var(--muted); }
.ml-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: #F4F4F2; color: var(--ink); }
.ml-icon .icon { width: 18px; height: 18px; }
.ml-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; }
a.ml-main:hover { text-decoration: none; }
a.ml-main:hover .ml-title { text-decoration: underline; text-underline-offset: 2px; }
.ml-title { font-weight: 600; overflow-wrap: anywhere; }
.ml-sub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.ml-side { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mlist .decide, .mlist .decide-box { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; width: 100%; }
.mlist .decide input[type=text], .mlist .decide-box input[type=text] { flex: 1; min-width: 160px; min-height: 32px; height: 32px; padding: 4px 10px; }
.decide-more summary { list-style: none; cursor: pointer; }
.decide-more summary::-webkit-details-marker { display: none; }
.decide-more[open] { width: 100%; }
.decide-more[open] .decide-box { margin-top: 8px; }
.inline-upload { display: inline; }

/* ---------- Mein Bereich ---------- */
.page-head.hello .titles h1 { font-size: 28px; }
.job-list { display: grid; gap: 10px; }
.job-card, .req-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; color: inherit; position: relative; }
a.job-card:hover { border-color: #cfcfcd; text-decoration: none; }
.job-card.is-today { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--accent); }
.job-date { display: block; font-family: var(--label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mid); }
.job-title { display: block; font-size: 17px; font-weight: 700; margin: 4px 0 6px; letter-spacing: -.01em; padding-right: 110px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-2); }
.job-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.job-meta .icon { color: var(--mid); }
.job-side { position: absolute; top: 14px; right: 14px; }
.req-card { border-color: #F2DE7A; background: #FFFDF2; }
.req-main { display: block; color: inherit; }
.req-main:hover { text-decoration: none; }
.req-main .job-title { padding-right: 0; }
.req-msg { display: block; margin-top: 8px; font-size: 13px; color: var(--text-2); font-style: italic; }
.req-actions { display: flex; gap: 8px; margin-top: 12px; }
.req-actions .btn { flex: 1; justify-content: center; height: 44px; }

.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quick-form { display: contents; }
.quick { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; min-height: 104px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font: inherit; text-align: left; cursor: pointer; width: 100%; }
.quick:hover { border-color: #cfcfcd; text-decoration: none; background: #fff; }
.quick .icon { width: 22px; height: 22px; }
.quick > span:not(.quick-hint) { font-weight: 700; font-size: 14px; }
.quick-hint { font-size: 12px; color: var(--muted); }
.quick.is-hot { background: var(--ink); border-color: var(--ink); color: #fff; }
.quick.is-hot .icon { color: var(--accent); }
.quick.is-hot .quick-hint { color: #bdbdbb; }

.push-prompt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.push-prompt > .icon { color: var(--accent); flex: none; }
.push-prompt > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.push-prompt span { font-size: 12.5px; color: #cfcfcd; }
.push-prompt .icon-btn { color: #fff; }
.push-prompt .icon-btn:hover { background: #262624; border-color: #333; }

.action-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; align-items: center; }
.action-strip form { display: contents; }

.who-row { display: inline-flex; align-items: center; gap: 10px; }

/* Stempeluhr */
.clock-card.is-running { background: var(--ink); color: #fff; border-color: var(--ink); }
.clock-card.is-running .job-date { color: var(--accent); }
.clock-card.is-running .muted { color: #bdbdbb; }
.clock-card.is-running .form-actions { border-top-color: #262624; background: transparent; }
.clock-big { font-family: var(--label); font-size: 44px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; margin: 6px 0 4px; }

/* Profil */
.profile-photo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Anfragen an Kandidaten */
.pick-list > li { padding: 0; }
.pick { display: flex; align-items: center; gap: 12px; padding: 10px 16px; width: 100%; cursor: pointer; }
.pick:hover { background: var(--hover); }
.pick input { width: 18px; height: 18px; flex: none; }
.pick input:disabled + * { opacity: .5; }

/* Check-in & Aushang */
.checkin-page { max-width: 460px; margin: 6vh auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.checkin-page h1 { font-size: 26px; }
.checkin-page .btn-xl { min-width: 260px; justify-content: center; }
.poster { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 36px 30px; text-align: center; }
.poster .eventdrop-mark { height: 34px; width: auto; }
.poster h2 { font-size: 34px; font-weight: 800; margin-top: 18px; letter-spacing: -.02em; }
.poster-project { font-size: 18px; color: var(--text-2); margin: 6px 0 18px; }
.poster-qr { width: min(340px, 80%); height: auto; image-rendering: pixelated; }
.poster-hint { color: var(--muted); margin-top: 14px; }
.poster-code { font-family: var(--label); font-size: 13px; letter-spacing: .08em; }
@media print {
  .poster { border: 0; max-width: none; padding-top: 10mm; }
  .poster-qr { width: 120mm; }
}

/* Alarm */
.alert-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.alert-banner > .icon { flex: none; color: var(--accent); }
.alert-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alert-banner-text span { font-size: 12.5px; color: #cfcfcd; }
.alert-banner .btn { background: var(--accent); border-color: var(--accent); color: #111; }
.alert-banner.kind-emergency { background: var(--red); animation: zalarm 1.4s ease-in-out infinite; }
.alert-banner.kind-emergency > .icon { color: #fff; }
.alert-banner.kind-emergency .alert-banner-text span { color: #ffe1de; }
.alert-banner.kind-emergency .btn { background: #fff; border-color: #fff; color: var(--red); }
@keyframes zalarm { 50% { box-shadow: 0 0 0 6px rgba(193, 8, 1, .18); } }
@media (prefers-reduced-motion: reduce) { .alert-banner.kind-emergency { animation: none; } }
.alert-hero { padding: 22px 20px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.alert-hero .job-date { color: var(--accent); }
.alert-hero h1 { margin: 6px 0 8px; font-size: 26px; }
.alert-hero.kind-emergency { background: var(--red); }
.alert-hero.kind-emergency .job-date { color: #ffe1de; }
.respond-actions { flex-wrap: wrap; }
.respond-actions .btn-xl { flex: 1; justify-content: center; min-width: 200px; }

/* Onboarding & Unterschrift */
.onboarding-form { max-width: 780px; }
.contract-text { max-height: 340px; overflow: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--rbtn); background: #FAFAF8; font-size: 13px; line-height: 1.55; }
.sign-pad { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 3 / 1; border: 1px dashed var(--border-strong); border-radius: var(--rbtn); background: #fff; touch-action: none; cursor: crosshair; }
.sign-pad.is-signed { border-style: solid; border-color: var(--ink); }
/* Unterschriften (apps/signing) */
.sign-wrap { max-width: 760px; }
.sign-lines .sign-group td { font-weight: 700; padding-top: 14px; }
.sign-lines tfoot td { border-top: 1px solid var(--line); }
.sign-form .field-checkboxinput { flex-wrap: nowrap; align-items: flex-start; }
.sign-form .field-checkboxinput input { flex: none; margin-top: 2px; }
.sign-form .field-checkboxinput label { flex: 1; min-width: 0; font-weight: 600; }
/* Optionen beim Unterschreiben (Angebot) */
.sign-options { border: 1px solid var(--line); border-radius: var(--rbtn); padding: 12px 14px; background: var(--surface-2); min-width: 0; }
.sign-options legend { font-weight: 700; padding: 0 6px; }
.sign-option-list { list-style: none; margin: 10px 0 0; padding: 0; }
.sign-option-list li + li { border-top: 1px solid var(--line); }
.sign-option { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; cursor: pointer; font-weight: 500; }
.sign-option input { flex: none; margin-top: 3px; width: 18px; height: 18px; }
.sign-option-fixed, .sign-option-off { cursor: default; }
.sign-option-mark { flex: none; width: 18px; margin-top: 2px; display: inline-flex; justify-content: center; }
.sign-option-fixed .sign-option-mark { color: var(--ok, #239a57); }
.sign-option-off { color: var(--muted); }
.sign-option-off .sign-option-mark { color: var(--muted); }
.sign-option-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sign-option-text .sign-option-details { display: block; }
.sign-option-nr { font-family: var(--label); font-size: 12px; color: var(--muted); }
.sign-option-price { flex: none; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sign-option-price .small { display: block; }
.sign-option-sum { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-strong); }
.sign-option-sum dd { font-variant-numeric: tabular-nums; }
.sign-chosen { margin: 12px 0; }
/* Vor Ort (Kiosk): ohne App-Navigation, Rückweg nur für die Crew ganz unten */
.kiosk-back { margin-top: 28px; padding-top: 14px; border-top: 1px dashed var(--border-strong); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.sign-chosen-list { list-style: none; margin: 6px 0 10px; padding: 0; }
.sign-chosen-list li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.sign-chosen-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .sign-option { flex-wrap: wrap; }
  .sign-option-price { flex-basis: 100%; padding-left: 28px; text-align: left; }
}
.radio-list label { display: flex; gap: 8px; align-items: center; padding: 5px 0; font-weight: 500; }
.mt-xs { margin-top: 6px; }

/* ---------- Mitteilungen ---------- */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list > li { border-bottom: 1px solid var(--line-soft); }
.notif-list > li:last-child { border-bottom: 0; }
.notif-list a { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; color: inherit; }
.notif-list a:hover { background: var(--hover); text-decoration: none; }
.notif-dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: transparent; }
.is-unread .notif-dot { background: var(--accent); box-shadow: 0 0 0 1px #E3BD00; }
.is-urgent .notif-dot { background: var(--red); box-shadow: none; }
.notif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-title { font-weight: 600; }
.is-unread .notif-title { font-weight: 800; }
.notif-body { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.notif-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--muted); }

/* ---------- Chat ---------- */
.content:has(.chat-layout) { padding-bottom: 24px; }
.chat-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; height: calc(100vh - 70px - 52px); min-height: 460px; }
.chat-side, .chat-main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); min-height: 0; }
.chat-side { display: flex; flex-direction: column; overflow: hidden; }
.chat-side-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--line); }
.chat-side-head h1 { font-size: 18px; display: flex; align-items: center; gap: 8px; flex: 1; }
.chat-rows { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.chat-rows .empty { padding: 30px 10px; text-align: center; }
.chat-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: inherit; }
.chat-row:hover { background: var(--hover); text-decoration: none; }
.chat-row.on { background: #F0F0EE; }
.chat-ava { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--platin); color: #fff; font-family: var(--label); font-weight: 700; }
.chat-ava.kind-team { background: var(--accent); color: #111; }
.chat-ava.kind-project { background: var(--ink); color: var(--accent); }
.chat-ava.kind-group { background: #EDEDEB; color: var(--ink); }
.chat-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row-title .icon, .chat-row-title .pill { vertical-align: -2px; margin-left: 4px; }
.chat-row-title .icon { color: var(--grey); }
.chat-row-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row.unread .chat-row-title { font-weight: 800; }
.chat-row.unread .chat-row-sub { color: var(--ink); }
.chat-row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chat-row-time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #111; font-family: var(--label); font-weight: 700; font-size: 11px; display: grid; place-items: center; }

.chat-main { display: flex; flex-direction: column; overflow: hidden; }
.chat-start { background: transparent; border: 0; overflow: visible; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); min-height: 62px; }
.chat-head-titles { flex: 1; min-width: 0; }
.chat-head > .chat-back { display: none; }
.chat-head-titles h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head-titles p { margin: 0; font-size: 12.5px; color: var(--muted); }
.chat-menu { position: relative; }
.chat-menu > summary { list-style: none; }
.chat-menu > summary::-webkit-details-marker { display: none; }
.chat-menu-body { position: absolute; right: 0; top: 40px; z-index: 30; width: min(320px, 88vw); padding: 12px; box-shadow: var(--shadow-lg); max-height: 70vh; overflow-y: auto; }
.chat-members ul { list-style: none; margin: 6px 0 0; padding: 0; }
.chat-members li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.chat-members li > span:nth-child(2) { flex: 1; }
.chat-members .avatar { width: 26px; height: 26px; font-size: 10px; }

.chat-scroll { flex: 1; overflow-y: auto; padding: 14px 16px 8px; background: #FAFAF8; overscroll-behavior: contain; }
.chat-more { display: block; margin: 0 auto 10px; }
.chat-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.day-sep { text-align: center; margin: 10px 0 4px; }
.day-sep span { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #EDEDEB; font-family: var(--label); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mid); }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(78%, 620px); position: relative; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.system { align-self: center; max-width: 92%; align-items: center; }
.msg-system { font-size: 12px; color: var(--muted); text-align: center; background: #F0F0EE; padding: 5px 12px; border-radius: 8px; }
.msg-author { font-size: 11.5px; font-weight: 700; color: var(--mid); margin: 0 0 2px 10px; }
.msg-bubble { background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 7px 11px 5px; display: flex; flex-direction: column; gap: 4px; min-width: 64px; }
.msg.mine .msg-bubble { background: var(--ink); color: #fff; border-color: var(--ink); border-radius: 14px 14px 4px 14px; }
.msg.mine .msg-bubble a { color: var(--accent); }
.msg.mention .msg-bubble { box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-soft); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.msg-text a { text-decoration: underline; }
.msg-time { align-self: flex-end; font-size: 10.5px; color: var(--grey); font-variant-numeric: tabular-nums; }
.msg.mine .msg-time { color: #9a9a98; }
.msg-image img { display: block; max-width: 100%; width: 260px; max-height: 320px; object-fit: cover; border-radius: 10px; }
.msg-file { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.msg-del { position: absolute; top: 50%; transform: translateY(-50%); left: -28px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--mid); cursor: pointer; opacity: 0; transition: opacity .15s; font-size: 14px; line-height: 1; padding: 0; }
.msg:not(.mine) .msg-del { left: auto; right: -28px; }
.msg:hover .msg-del, .msg-del:focus { opacity: 1; }
.chat-closed { padding: 14px 16px; border-top: 1px solid var(--line); color: var(--muted); display: flex; gap: 8px; align-items: center; font-size: 13px; }
.chat-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.chat-compose textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 160px; resize: none; border-radius: 21px; padding: 10px 16px; line-height: 1.35; }
.chat-attach { flex: none; width: 42px; height: 42px; cursor: pointer; }
.chat-send { flex: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; justify-content: center; }
.chat-file-name { order: -1; width: 100%; font-size: 12px; color: var(--mid); padding: 0 4px; }
.chat-hint { margin: 14px 4px 0; }

/* ---------- Schwarzes Brett & Ideenbox ---------- */
.announcement.is-pinned { border-color: var(--ink); }
.announcement.is-new .card-head { background: var(--accent-soft); border-radius: var(--radius) var(--radius) 0 0; }
.announcement-text { font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.idea { display: flex; gap: 14px; padding: 14px 16px; }
.idea-vote { flex: none; }
.vote-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 54px; padding: 8px 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; color: var(--mid); }
.vote-btn b { font-family: var(--label); font-size: 15px; color: var(--ink); }
.vote-btn:hover { border-color: var(--ink); }
.vote-btn.on { background: var(--accent); border-color: var(--accent); color: #111; }
.idea-main { flex: 1; min-width: 0; }
.idea-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.idea-answer { display: flex; gap: 6px; align-items: flex-start; background: #F4F4F2; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.star-choice, .choice-cards { display: grid; gap: 8px; }
.star-opt, .choice-card { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; }
.star-opt:has(input:checked), .choice-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #FAFAF8; }
.choice-card.sev-safety:has(input:checked) { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: var(--red-soft); }
.feedback-entry { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.feedback-entry:last-child { border-bottom: 0; }
.feedback-entry p { margin: 4px 0 0; }

/* ---------- Mängel ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }

/* ---------- Handy ---------- */
@media (max-width: 1100px) {
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-layout { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .job-title { font-size: 16px; padding-right: 0; }
  .job-side { position: static; margin-top: 8px; }
  .page-head.hello .titles h1 { font-size: 26px; }
  .quick { min-height: 96px; padding: 12px; }
  .respond-actions .btn-xl { min-width: 0; width: 100%; }
  .mlist > li { padding: 12px 14px; }
  .notif-list a { padding: 12px 14px; }
  .notif-meta { display: none; }

  /* Chat: Liste und Gespräch je als ganze Seite */
  .page-chat .content { padding: 0; }
  .chat-layout { display: block; height: auto; min-height: 0; }
  .chat-side { border: 0; border-radius: 0; background: transparent; }
  .chat-side-head { border-bottom: 0; padding: 18px 16px 6px; }
  .chat-side-head h1 { font-size: 22px; }
  .chat-rows { padding: 0 8px; overflow: visible; }
  .chat-row { padding: 10px 8px; }
  .chat-start { padding: 8px 16px 20px; }
  .chat-side.has-active { display: none; }
  .page-chat-detail .tabbar { display: none; }
  .page-chat-detail .chat-main {
    position: fixed; left: 0; right: 0; top: 62px; bottom: 0; z-index: 15; border: 0; border-radius: 0;
  }
  .page-chat-detail .chat-compose { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .page-chat-detail .chat-head { padding: 8px 10px 8px 6px; min-height: 56px; }
  .chat-head > .chat-back { display: inline-grid; }
  .msg { max-width: 86%; }
  .msg-del { opacity: .7; }
}

/* ---------- Messenger (WhatsApp, Instagram, Facebook) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: #cfcfcd; text-decoration: none; }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip b { font-family: var(--label); font-size: 11px; color: var(--mid); }
.chip.on b { color: var(--accent); }
.chip .icon { width: 13px; height: 13px; }
.msgr-filter { padding: 10px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.msgr-search { display: flex; gap: 6px; min-width: 0; }
.msgr-search input[type=search] { flex: 1; min-width: 0; }
.msgr-search input[type=search] { min-height: 34px; height: 34px; padding: 4px 10px; font-size: 13px; }
.msgr-search select { width: auto; flex: none; max-width: 140px; min-height: 34px; height: 34px; padding: 2px 8px; font-size: 12.5px; }
.msgr-search { flex-wrap: wrap; }
/* Zuständige Person in Liste und Kopf deutlich (Patrick: „muss besser erkenntlich sein“) */
.avatar.xs { width: 20px; height: 20px; font-size: 8.5px; }
.msgr-owner { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink); }
.msgr-owner.none { padding: 0 6px; border-radius: 999px; background: #fff3bf; color: #7a5b00; font-weight: 700; font-size: 11px; }
.msgr-assign { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.msgr-assign.none { border-color: #f0c000; background: #fff8db; }
.msgr-assign select { border: 0; min-height: 28px; height: 28px; padding-top: 0; padding-bottom: 0; padding-left: 4px; font-size: 12.5px; max-width: 190px; background-color: transparent; }
.msgr-notes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.msgr-notes li { padding: 8px 10px; border-radius: 8px; background: #fff8db; border: 1px solid #f3e3a1; }
.msgr-note-head { font-size: 11px; color: var(--grey); margin-bottom: 2px; }
.msgr-note-text { white-space: pre-wrap; font-size: 13px; }
@media (max-width: 820px) {
  .msgr-info div.only-mobile { display: block; }
  .msgr-assign.hide-mobile, .msgr-owner.hide-mobile { display: none; }
}
/* Anfrage erfassen: Uhr für Telefonate */
.call-timer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); background: #fffbe6; }
.call-timer-icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); }
.call-timer-text { display: grid; flex: 1; min-width: 160px; }
.suggest-items td input[type=number] { max-width: 90px; }
.chat-row-meta { font-size: 11.5px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-ava.ch-whatsapp { background: var(--ok-soft); color: var(--ok); }
.chat-ava.ch-instagram { background: var(--accent-soft); color: #111; }
.chat-ava.ch-facebook { background: #EDEDEB; color: var(--ink); }
.chat-head .chat-ava { width: 36px; height: 36px; }
.chat-head form { display: contents; }
.msg.note { align-self: center; max-width: min(86%, 620px); align-items: stretch; }
.msg.note .msg-bubble { background: var(--accent-soft); border-color: #F2DE7A; border-radius: 10px; }
.msg.note .msg-author { display: inline-flex; align-items: center; gap: 4px; }
.msg.failed .msg-bubble { border-color: var(--red); }
.msg.mine.failed .msg-bubble { background: #3a0f0d; }
.msg-error { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--red); }
.msg.mine .msg-error { color: #ffb3ad; }
.msg-status { font-family: var(--label); letter-spacing: -1px; }
.msg-status.st-read { color: #4fb3ff; }
.msg-status.st-failed { color: var(--red); font-weight: 700; }
.msg-reaction { position: absolute; bottom: -10px; right: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; font-size: 13px; }
.msg-bubble { position: relative; }
.msg-retry { margin-top: 4px; }
.msgr-window { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--accent-soft); font-size: 12.5px; }
.msgr-compose-tabs { display: flex; gap: 6px; padding: 8px 12px 0; border-top: 1px solid var(--line); background: #fff; }
.msgr-compose-tabs + .chat-compose { border-top: 0; }
.chat-compose[hidden], .msgr-template[hidden] { display: none; }
.msgr-input { position: relative; flex: 1; min-width: 0; display: flex; }
.msgr-input textarea { flex: 1; }
.chat-compose[data-pane=note] textarea { background: var(--accent-soft); border-color: #F2DE7A; }
.msgr-sig { width: 100%; font-size: 11.5px; color: var(--grey); padding-left: 52px; }
.snippet-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.snippet-pop li { padding: 8px 10px; border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.snippet-pop li:hover, .snippet-pop li.on { background: var(--hover); }
.snippet-pop li b { font-size: 13px; }
.snippet-pop li span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgr-template { padding: 10px 14px 14px; border-top: 0; background: #fff; display: grid; gap: 8px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 320px; color: var(--muted); }
.empty-state .icon { width: 38px; height: 38px; color: var(--grey); }
.chat-main.chat-start .empty-state { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.msgr-layout .chat-main.chat-start { display: block; }
@media (max-width: 820px) {
  .page-msgr .chat-head .btn { padding: 0 8px; }
  .msgr-sig { padding-left: 0; }
}
.msgr-template [data-template-preview] { white-space: pre-wrap; }

/* ------------------------------------------------------------------ Arbeitsbereich mit Tabs (apps/core/tabs.py, js/tabs.js) */
.wtabs { display: flex; align-items: flex-end; gap: 6px; padding: 8px 24px 0; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 70px; z-index: 20; }
.wtabs-list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; min-width: 0; flex: 0 1 auto; }
.wtab { display: flex; align-items: center; gap: 6px; max-width: 230px; min-width: 110px; height: 36px; padding: 0 6px 0 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 9px 9px 0 0; background: #f0f0ee; color: var(--text-2, #333); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; position: relative; top: 1px; }
.wtab:hover { background: #fff; }
.wtab.on { background: #fff; color: #111; font-weight: 600; box-shadow: inset 0 3px 0 var(--accent); }
.wtab.loading .wtab-title { opacity: .55; }
.wtab-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wtab-close { border: 0; background: transparent; color: var(--muted); width: 22px; height: 22px; border-radius: 6px; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; flex: none; }
.wtab-close:hover { background: var(--line); color: #111; }
.wtab:focus-visible { outline: 2px solid #111; outline-offset: -2px; }
.wtabs-new { flex: none; width: 32px; height: 32px; margin-bottom: 3px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: #111; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.wtabs-new:hover { background: var(--accent); border-color: var(--accent); }
.wtabs-back { flex: none; width: 32px; height: 32px; margin-bottom: 3px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: #111; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.wtabs-back:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.wtabs-back:disabled { opacity: .35; cursor: default; }
.wtabs.full .wtabs-new { opacity: .4; }
.wtabs.warn .wtabs-new { background: #fde2e2; border-color: #e5a3a3; }
body.workspace-shell .content { padding: 0; max-width: none; flex: 1; display: flex; }
.wframes { flex: 1; display: flex; min-height: calc(100vh - 70px - 45px); }
.wframe { display: none; border: 0; width: 100%; min-height: calc(100vh - 70px - 45px); background: var(--bg); }
.wframe.on { display: block; }
/* Seite im Tab-Rahmen: nur Inhalt (Server: Sec-Fetch-Dest, sonst js/frame-mode.js) */
html.embedded .sidebar, html.embedded .nav-overlay, html.embedded .topbar, html.embedded .tabbar,
html.embedded #alert-slot, html.embedded .alert-banner { display: none !important; }
html.embedded .shell, body.embedded .shell { padding-left: 0; }
body.embedded .main { min-height: 0; }
body.embedded .content { padding: 22px 32px 60px; }
@media (max-width: 999px) { .wtabs { display: none; } }

/* ---------- Handy: auch Felder mit eigener Schriftgröße auf 16 px (iOS-Zoom, siehe Handy-Block oben) ---------- */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .inline-form select, .line-editor input, .line-editor select, .line-editor textarea,
  .me .me-quick-input, .me .me-search input, .me .me-quick-row select, .me .me-target select, .me .me-cat-head select,
  .msgr-search input[type=search], .msgr-search select, .msgr-assign select, .copy-row input { font-size: 16px; }
}

/* Einstellungen → Kontaktarten: Formulare in einer Zeile, Eingabefeld füllt den Rest (auch am Handy) */
.cat-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cat-form input[type="text"] { flex: 1 1 140px; width: auto; min-width: 0; }
.cat-form select { width: auto; }

/* Location-Grundriss: Punkt-Marker (Strom, Licht, Wasser, Sicherheit) und feste Ebene im Raumplan */
.fp-item .fp-code { text-anchor: middle; dominant-baseline: central; font-family: var(--label); font-weight: 700; fill: #111; pointer-events: none; }
.fp-item .fp-code.light { fill: #fff; }
.fp-item .fp-point-label { text-anchor: start; dominant-baseline: central; fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.fp-item.fixed { cursor: default; opacity: .85; }
.fp-item.fixed .shape { stroke-dasharray: 10 6; }
.fp-venue-layer .fp-item .fp-label { fill: #5a5a5a; }
.fp-palette-group { grid-column: 1 / -1; font-family: var(--label); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--grey); margin-top: 6px; }
.fp-palette .sw.round { border-radius: 50%; }

/* ==========================================================================
   Lagergrundriss (Lager → Grundriss, static/js/lager-grundriss.js) und Standort auf der Packliste
   ========================================================================== */
.lp-layout { grid-template-columns: 190px minmax(0, 1fr) 320px; }
.lp-palette-help { padding: 0 10px 10px; }
.lp-coords { padding: 6px 10px; border-top: 1px solid var(--border); background: var(--surface-2); min-height: 30px; }
.lp-item .lp-divider { stroke: #333333; stroke-width: 2; stroke-dasharray: 8 6; }
.lp-item .lp-front { stroke: #111111; stroke-width: 7; }
.lp-item.kind-room .shape { stroke-dasharray: 18 10; fill-opacity: .55; }
.lp-item.kind-block .shape { stroke: #333333; }
.lp-item .lp-sub { font-weight: 500; fill: #444444; }
.fp-props .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.lp-slots-head { padding-top: 10px; border-top: 1px solid var(--line-soft); }
.lp-slot-grid { display: grid; gap: 4px; margin: 8px 0; }
.lp-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 40px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; font-size: 11.5px; line-height: 1.25; text-align: left; cursor: pointer; min-width: 0; overflow: hidden; }
.lp-slot .code { font-family: var(--label); font-weight: 700; font-size: 10.5px; letter-spacing: .03em; }
.lp-slot .loc { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lp-slot.used { background: var(--accent-soft); border-color: #F2DE7A; }
.lp-slot.open, .lp-slot:hover { border-color: var(--ink); }
.lp-assign { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.lp-assign .field { margin: 8px 0; }
.lp-loc-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.lp-loc-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; }
/* Packliste: Standort je Position mit Grundriss-Ausschnitt („hier gehst du hin“) */
.minimap-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.place { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 500; font-size: 12.5px; color: var(--text-2); }
.place .minimap { flex: 0 0 auto; width: 92px; max-height: 64px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.place .place-text { display: inline-flex; align-items: center; gap: 4px; hyphens: manual; }
.place .place-text .icon { flex: 0 0 auto; }
/* Linien bleiben in Bildschirm-Pixeln (non-scaling-stroke), egal wie klein der Ausschnitt gezeichnet wird */
.minimap rect, .minimap circle { vector-effect: non-scaling-stroke; }
.mm-floor { fill: #FCFCFB; stroke: #333333; stroke-width: 1.5px; }
.mm-shelf { fill: #cfcfcd; stroke: #6b6b69; stroke-width: 1px; }
.mm-room { fill: none; stroke: #b5b5b3; stroke-width: 1px; stroke-dasharray: 3 2; }
.mm-free { fill: #e4efe8; stroke: #b5b5b3; stroke-width: 1px; }
.mm-case { fill: #dbe3ef; stroke: #b5b5b3; stroke-width: 1px; }
.mm-pack { fill: #fbf0c8; stroke: #b5b5b3; stroke-width: 1px; }
.mm-block { fill: #9a9a98; stroke: #9a9a98; stroke-width: 1px; }
.mm-target { fill: var(--accent); stroke: #111111; stroke-width: 1px; }
.mm-target-ring { fill: rgba(255, 213, 0, .35); stroke: #111111; stroke-width: 1px; }
.order-switch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px 0; }
@media (max-width: 1100px) {
  .lp-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  /* Handy: Ausschnitt über dem Standort-Text, damit der Text nicht in einer schmalen Spalte umbricht */
  .place { flex-direction: column; align-items: flex-start; gap: 4px; }
  .place .minimap { width: 120px; max-height: 80px; }
  .lp-slot { min-height: 44px; }  /* Fach gut antippbar */
}
@media print {
  .order-switch { display: none; }
  .place .minimap { width: 80px; }
}