/* ALMAS Doku-Plattform · Apple-Lock-inspired with ALMAS Branding
   2026-04-29 Phase 1 */

:root {
  --almas-red: #d50000;
  --almas-red-hover: #b30000;
  --almas-bg: #fafafa;
  --almas-bg-alt: #f0f0f2;
  --almas-surface: #ffffff;
  --almas-surface-glass: rgba(255, 255, 255, 0.72);
  --almas-text: #0a0a0a;
  --almas-text-secondary: #6b7280;
  --almas-text-muted: #9ca3af;
  --almas-border: rgba(0, 0, 0, 0.08);
  --almas-border-strong: rgba(0, 0, 0, 0.16);
  --almas-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04);
  --almas-shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
  --radius: 14px;
  --radius-sm: 8px;
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-system);
  font-size: 15px;
  line-height: 1.5;
  color: var(--almas-text);
  background: var(--almas-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hidden { display: none !important; }
.text-secondary { color: var(--almas-text-secondary); }
.text-small { font-size: 13px; }
.text-link { color: var(--almas-red); text-decoration: none; font-weight: 500; }
.text-link:hover { text-decoration: underline; }

.view { min-height: 100vh; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; user-select: none;
  transition: all var(--transition);
  background: transparent; color: var(--almas-text);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--almas-red); color: #fff;
  box-shadow: 0 1px 2px rgba(213,0,0,0.18);
}
.btn-primary:hover { background: var(--almas-red-hover); box-shadow: 0 4px 12px rgba(213,0,0,0.24); }
.btn-secondary { background: var(--almas-surface); color: var(--almas-text); border-color: var(--almas-border-strong); }
.btn-secondary:hover { background: var(--almas-bg-alt); }
.btn-danger { background: var(--almas-red); color: #fff; border-color: var(--almas-red); }
.btn-danger:hover { background: var(--almas-red-hover); }
.btn-ghost { background: transparent; color: var(--almas-text); }
.btn-ghost:hover { background: var(--almas-bg-alt); }
.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: 12px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-full { width: 100%; }

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE
═══════════════════════════════════════════════════════════ */
.view-landing { background: linear-gradient(180deg, #fafafa 0%, #f0f0f2 100%); }

.lp-hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 64px; align-items: center;
  max-width: 1200px; margin: 0 auto;
  padding: 80px 32px 96px;
}
.lp-hero-compact {
  min-height: calc(100vh - 80px);
  padding: 40px 32px 60px;
  align-content: center;
}
.lp-cta-hint { margin-top: 14px; font-size: 12px; }
.lp-cta-hint code { background: var(--almas-bg-alt); padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.lp-hero-content { max-width: 540px; }
.lp-logo img { height: 32px; opacity: 0.92; }
.lp-title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700; letter-spacing: -0.025em;
  margin: 28px 0 16px; line-height: 1.05;
  background: linear-gradient(135deg, #0a0a0a 0%, #d50000 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-subtitle { font-size: 19px; color: var(--almas-text-secondary); line-height: 1.45; margin: 0 0 36px; }
.lp-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.lp-hero-visual {
  position: relative; aspect-ratio: 1.2/1;
  display: flex; align-items: center; justify-content: center;
}
.lp-glass-card {
  width: 100%; max-width: 380px;
  padding: 32px;
  background: var(--almas-surface-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--almas-border);
  border-radius: 24px;
  box-shadow: var(--almas-shadow-lg);
  transform: rotate(-2deg);
}
.lp-glass-line { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #e5e5e7, #d4d4d8); margin-bottom: 14px; }
.lp-glass-line.short { width: 60%; }
.lp-glass-line.medium { width: 75%; }
.lp-glass-sig { margin-top: 28px; height: 60px; border-radius: 8px; background: linear-gradient(135deg, rgba(213,0,0,0.05), rgba(213,0,0,0.12)); border: 1px dashed rgba(213,0,0,0.3); position: relative; }
.lp-glass-sig::after {
  content: '✍️'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 24px;
}

.lp-section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.lp-section-alt { background: #fff; max-width: none; }
.lp-section-alt > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.lp-section-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700; letter-spacing: -0.02em;
  text-align: center; margin: 0 0 56px;
}

.feature-grid, .step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.feature-card, .step-card {
  background: var(--almas-surface);
  border: 1px solid var(--almas-border);
  border-radius: var(--radius);
  padding: 32px 24px;
  transition: all var(--transition);
}
.feature-card:hover, .step-card:hover {
  transform: translateY(-4px); box-shadow: var(--almas-shadow-lg);
  border-color: var(--almas-border-strong);
}
.feature-icon { font-size: 36px; margin-bottom: 16px; }
.feature-card h3, .step-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.feature-card p, .step-card p { margin: 0; color: var(--almas-text-secondary); font-size: 15px; line-height: 1.55; }

.step-number {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--almas-red) 0%, #ff3838 100%);
  color: #fff; font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(213,0,0,0.24);
}

.lp-footer {
  background: #0a0a0a; color: rgba(255,255,255,0.7);
  padding: 32px 24px; font-size: 13px;
}
.lp-footer-content {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between;
}
.lp-footer a { color: #fff; text-decoration: none; }
.lp-footer a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════════ */
.view-login {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a0808 100%);
  padding: 24px;
}
.login-card {
  background: var(--almas-surface-glass);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px; padding: 48px 36px;
  width: 100%; max-width: 420px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  text-align: center;
}
.login-logo img { height: 36px; margin-bottom: 24px; }
.login-card h2 { margin: 0 0 8px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.login-card p { margin: 8px 0 24px; }
.login-card .btn { margin: 8px 0; }
.login-card .text-link { display: inline-block; margin-top: 24px; }

/* ═══════════════════════════════════════════════════════════
   APP (Sidebar + Content)
═══════════════════════════════════════════════════════════ */
.view-app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: #0a0a0a; color: #fff;
  display: flex; flex-direction: column;
  padding: 24px 16px;
  border-right: 1px solid rgba(255,255,255,0.05);
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sidebar-logo { height: 24px; filter: invert(1) brightness(1.5); }
.sidebar-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

.sidebar-nav { flex: 1; padding: 16px 0; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: rgba(255,255,255,0.7);
  text-decoration: none; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-item.active { background: rgba(213,0,0,0.18); color: #fff; }
.nav-icon { font-size: 16px; width: 20px; text-align: center; }

.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 16px;
}
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; margin-bottom: 8px;
}
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--almas-red), #ff3838);
  color: #fff; font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; }
.sidebar-footer .btn-ghost { color: rgba(255,255,255,0.7); }
.sidebar-footer .btn-ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* Zurück-Knopf in der Kopfzeile — am Handy der Ersatz für die Navigationsleiste.
   Standard = versteckt. Die Schwelle unten ist bewusst 767px und nicht 768px: ein iPad im
   Hochformat misst exakt 768px, und Tablets sollen in der vollen Oberfläche bleiben. */
.handy-only { display: none; }
.sb-back {
  /* KEIN display hier. .handy-only eine Zeile darueber setzt display:none und hat dieselbe
     Spezifitaet (je eine Klasse) — ein display in .sb-back gewinnt dann allein durch die
     spaetere Position und macht den Knopf am Rechner sichtbar. Genau das war der Fehler
     vom 25.08. Das display kommt ausschliesslich aus der 767px-Regel weiter unten. */
  align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  /* Farben ueber die Design-Tokens, NICHT hart gesetzt: almas-doku-theme.css wird nach
     dieser Datei geladen und macht die Sidebar hell (--almas-surface #FFFFFF). Ein hart
     gesetztes color:#fff war dort weiss auf weiss — der Knopf war unsichtbar, obwohl er
     funktionierte. Die Fallbacks gelten fuer den ungethemten Fall mit dunkler Sidebar. */
  color: var(--almas-text, #fff);
  background: var(--almas-bg-alt, rgba(255,255,255,0.08));
  border: 1px solid var(--almas-border-strong, rgba(255,255,255,0.16));
}
.sb-back:active { filter: brightness(0.94); }

.content { padding: 32px; max-width: 100%; overflow-x: auto; }
.tab-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.tab-header h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }

.search-bar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;
  background: var(--almas-surface); padding: 12px;
  border: 1px solid var(--almas-border); border-radius: var(--radius);
}
.search-bar input[type=search],
.search-bar select {
  padding: 8px 12px;
  border: 1px solid var(--almas-border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px;
  background: #fff;
}
.search-bar input[type=search] { flex: 1; min-width: 200px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.empty-state {
  text-align: center; padding: 80px 24px;
  background: var(--almas-surface);
  border: 1px dashed var(--almas-border-strong);
  border-radius: var(--radius);
  grid-column: 1/-1;
}
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.6; }
.empty-state h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.empty-state p { margin: 0 auto; max-width: 400px; }

/* ═══════════════════════════════════════════════════════════
   TOASTS
═══════════════════════════════════════════════════════════ */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 12px 16px; min-width: 240px; max-width: 360px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  font-size: 14px;
  animation: slideUp 0.2s ease-out;
}
.toast-success { border-left: 3px solid #16a34a; }
.toast-error { border-left: 3px solid var(--almas-red); }
.toast-info { border-left: 3px solid #3b82f6; }
@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ═══════════════════════════════════════════════════════════
   ASSIGNMENT-CARDS, FIELDS, MODAL
═══════════════════════════════════════════════════════════ */
.assignment-card {
  background: var(--almas-surface); border: 1px solid var(--almas-border);
  border-radius: var(--radius); padding: 20px;
  cursor: pointer; transition: all var(--transition);
  display: flex; flex-direction: column; gap: 8px;
}
.assignment-card:hover { transform: translateY(-2px); box-shadow: var(--almas-shadow); border-color: var(--almas-border-strong); }
.assignment-status {
  align-self: flex-start;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--almas-bg-alt); color: var(--almas-text-secondary);
}
.assignment-status.status-open { background: #fef3c7; color: #92400e; }
.assignment-status.status-in_progress { background: #dbeafe; color: #1e40af; }
.assignment-status.status-completed { background: #d1fae5; color: #065f46; }
.assignment-status.status-unparsed { background: #fee2e2; color: #991b1b; }
.assignment-title { margin: 0; font-size: 17px; font-weight: 600; }
.assignment-meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--almas-text-secondary); }

.card-section {
  background: var(--almas-surface); border: 1px solid var(--almas-border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 16px;
}
.card-section h2 { margin: 0 0 16px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.kv-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.kv-grid > div { display: flex; flex-direction: column; gap: 2px; }
.kv-label { font-size: 12px; color: var(--almas-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }

.doc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.doc-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  background: var(--almas-bg-alt); border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--transition);
}
.doc-item:hover { background: #e5e5e7; }
/* Rechte Seite der Dokumentzeile: Datum und — nur bei Entwuerfen — der Loeschknopf.
   Die ganze Zeile hat ein onclick zum Oeffnen, deshalb ruft der Knopf
   event.stopPropagation(), sonst oeffnet sich das Dokument mit. */
.doc-item-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.doc-del {
  border: 0; background: transparent; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 6px 8px;
  border-radius: var(--radius-sm); opacity: 0.55;
  transition: opacity var(--transition), background var(--transition);
}
.doc-del:hover { opacity: 1; background: rgba(213,0,0,0.10); }
@media (max-width: 767px) {
  /* Am Handy ein richtiges Ziel fuer den Daumen statt eines 27px-Kaestchens. */
  .doc-del { padding: 10px 12px; font-size: 18px; opacity: 0.8; }
}
.doc-status { padding: 2px 8px; border-radius: 6px; font-size: 11px; margin-left: 8px; }
.doc-status.status-draft { background: #fef3c7; color: #92400e; }
.doc-status.status-signed { background: #dbeafe; color: #1e40af; }
.doc-status.status-sent { background: #d1fae5; color: #065f46; }
.doc-create-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid var(--almas-border); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--almas-text); }
/* Breitenbremse fuer einzelne Felder in ganzseitigen Bloecken. Die Versandbox des
   Wizards ist so breit wie die Seite; ein .field mit width:100% wird darin unangenehm
   lang (Befund Lars). Nur die Breite begrenzen — Hoehe, Label und die Touch-Groessen
   aus almas-doku-mobile.css bleiben die des normalen .field. Am Handy bleibt es voll
   breit, weil 100% dort unter dieser Grenze liegt. */
.field-max { max-width: 420px; }

/* ── Dokument-Vorschau vor dem Unterschreiben ────────────────────────────────────────
   Das Modal ist normalerweise fuer Formulare gedacht und entsprechend schmal. Fuer einen
   A4-Bogen braucht es Platz — :has() spart den Umbau von showModal(), das keine eigene
   Klasse am Modal-Karton vorsieht. */
.modal-card:has(.doc-preview-wrap) { max-width: 900px; width: 92vw; }
/* Hinweis ueber der Vorschau: sichtbar, aber nicht dominant — der Kunde liest mit, und
   eine zu laut gesetzte Einschraenkung erzeugt genau das Misstrauen, das die Vorschau
   abbauen soll. */
.doc-preview-note {
  margin: 2px 0 8px; font-size: 12px; line-height: 1.45;
  color: var(--almas-text-secondary, #6b7280);
}
.doc-preview-wrap { margin: 4px 0 8px; }

/* ── Vorschau als PDF (seit 17.09.2026) ───────────────────────────────────────
   Beim Alarmplan mit mehreren Geraeten liefert der Versand je Geraet einen eigenen
   Bogen — die Vorschau zeigt sie jetzt alle untereinander. Jeder bekommt eine
   Ueberschrift, damit niemand glaubt, er habe dasselbe zweimal vor sich, und
   weniger Hoehe, damit erkennbar bleibt, dass darunter noch etwas kommt. */
.doc-preview-label { margin: 12px 0 4px; font-weight: 600; font-size: 13px; }
.doc-preview-label:first-child { margin-top: 0; }
.doc-preview-wrap--multi .doc-preview-frame { height: 46vh; }
.doc-preview-fallback { margin: 4px 0 0; }

/* Der Signaturknopf des PDF-Wegs. Ein PDF im iframe hat kein DOM, in das sich ein
   Knopf setzen liesse (beim HTML-Weg sitzt er an [data-sig-field] im Bogen) — hier
   steht er darunter, und zwar als einziger Hauptknopf: im Feld muss ohne Suchen
   klar sein, wo es weitergeht. 48px, damit er mit Handschuhen zu treffen ist. */
/* Wo der Browser kein PDF einbetten kann (Android-Chrome), steht statt des Rahmens
   dieser Kasten: der Bogen wird im Vollbild geoeffnet. Auf einem Handy ist das ohnehin
   die bessere Ansicht — und dem Kunden laesst sich ein ganzes Fenster leichter
   hinhalten als ein halbhoher Ausschnitt. */
.doc-preview-open {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 16px; margin-bottom: 8px;
  border: 1px dashed var(--almas-border-strong); border-radius: var(--radius-sm);
  background: var(--almas-bg-alt);
  text-align: center;
}
.doc-preview-open .btn { min-height: 48px; text-decoration: none; }

.doc-preview-sign { display: flex; justify-content: center; margin: 12px 0 2px; }
.doc-preview-sign:empty { display: none; }
.doc-preview-sign .btn { min-height: 48px; padding-left: 24px; padding-right: 24px; }
/* Seit 21.09.2026 kein <iframe> mehr, sondern ein scrollbarer Kasten, in den pdf.js
   jede Seite als <canvas> zeichnet. Grund: die Browser zeigten ein eingebettetes PDF
   jeder anders und keiner vollstaendig — Android gar nicht, iPadOS nur die erste Seite. */
.doc-preview-frame {
  display: block; width: 100%; height: 62vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px;
  border: 1px solid var(--almas-border-strong); border-radius: var(--radius-sm);
  background: #fff;
}
/* Die Leinwand traegt ihre Bildpunkte in den Attributen width/height; hier wird nur die
   Anzeigebreite gesetzt, die Hoehe folgt dem Seitenverhaeltnis des Bogens. */
.pdf-page {
  display: block; width: 100%; height: auto;
  margin: 0 auto 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.pdf-page:last-child { margin-bottom: 0; }
.pdf-laedt { padding: 20px 8px; text-align: center; }
.pdf-seitenzahl { margin: 0 0 4px; }
@media (max-width: 767px) {
  /* Am Handy zaehlt jede Zeile Hoehe: das Modal bekommt die ganze Breite.
     Der Bogen bewusst NICHT hoeher als 56vh: darunter stehen Seitenzahl, Ausweg-Link,
     der Unterschreiben-Knopf und die beiden Fusszeilen-Knoepfe. Mit 68vh reichte das
     zusammen weit ueber den Schirm hinaus. Gescrollt werden kann jetzt zwar (siehe
     .modal-overlay), aber was man ohne Scrollen sieht, zaehlt im Feld mehr. */
  .modal-card:has(.doc-preview-wrap) { width: 96vw; max-width: none; }
  .doc-preview-frame { height: 56vh; }

  /* Der Melde-Kaefer aus debug-widget.js sitzt fest unten rechts (52px, z-index 9998) und
     lag damit genau ueber "Schliessen" — am Handy sind die Modal-Knoepfe rechtsbuendig und
     enden in derselben Ecke. Gemessen am 21.09.2026: Kaefer x 303-355 / y 740-792, Knopf
     x 249-349 / y 730-776. Der Knopf war nicht zu treffen.
     Solange ein Dialog offen ist, tritt der Kaefer zurueck. Er ist ein Melde-Knopf fuer den
     normalen Betrieb; wer im Dialog steht, schliesst ihn zuerst. Nur am Handy — am Rechner
     steht das Modal mittig und die beiden kommen sich nicht in die Quere.
     Der Kaefer bringt sein CSS selbst mit und setzt display nicht per JS, deshalb genuegt
     die Klasse ohne !important. */
  body:has(.modal-overlay) .almas-bug-fab { display: none; }
}

/* Beschriftung NEBEN dem Feld statt darueber (Wunsch Lars). .field label ist
   display:block — deshalb hier eine Flex-Zeile. flex-wrap plus die 240px-Basis des
   Feldes sorgen dafuer, dass es am Handy von selbst untereinander rutscht: dort ist
   nebeneinander zu eng und der 48px-Touchbereich waere dahin. */
.field-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.field-row label { margin-bottom: 0; flex: 0 0 auto; }
.field-row input { flex: 1 1 240px; min-width: 0; }

/* input[type=email] fehlte hier — ein E-Mail-Feld blieb dadurch eine unformatierte
   Browser-Standardbox ohne width:100%. Am Handy war es deshalb kaum zu finden. */
.field input[type=text], .field input[type=email], .field input[type=date], .field input[type=time], .field input[type=number],
.field textarea, .field select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--almas-border-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px;
  background: var(--almas-surface);
  transition: all var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--almas-red);
  box-shadow: 0 0 0 3px rgba(213,0,0,0.12);
}
.field-inline { display: flex; align-items: center; gap: 8px; }
.field-inline input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--almas-red); }
.field-inline label { margin: 0; }
.required { color: var(--almas-red); margin-left: 4px; }

.radio-group { display: flex; flex-wrap: wrap; gap: 16px; }
.radio-option { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.radio-option input { accent-color: var(--almas-red); }

.sig-placeholder, .complex-placeholder {
  padding: 24px; text-align: center; color: var(--almas-text-muted);
  background: var(--almas-bg-alt); border: 1px dashed var(--almas-border-strong);
  border-radius: var(--radius-sm);
}

/* Sig pad + saved sig */
.sig-wrap { display: flex; flex-direction: column; gap: 8px; }
.sig-saved { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--almas-bg-alt); border-radius: var(--radius-sm); }
.sig-img-saved { max-height: 60px; max-width: 240px; background: white; padding: 4px; border-radius: 4px; }
.sig-saved-meta { color: #16a34a; font-size: 13px; font-weight: 500; }
.sig-saved-mini { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: #f0fdf4; border-radius: 6px; color: #16a34a; font-size: 12px; }
.sig-img-mini { max-height: 28px; max-width: 80px; }
#sigCanvas { border: 1px solid var(--almas-border-strong); border-radius: var(--radius-sm); background: #fff; width: 100%; max-width: 540px; cursor: crosshair; touch-action: none; }
.sig-actions { margin-top: 8px; }

/* Repeat list (alarm chain, material, person) */
.repeat-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.repeat-row { display: flex; gap: 8px; align-items: center; padding: 8px; background: var(--almas-bg-alt); border-radius: var(--radius-sm); }
.repeat-row > input, .repeat-row > select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--almas-border); border-radius: 6px; font-size: 13px; background: white; }
.repeat-row .row-num { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--almas-red); color: white; font-weight: 600; font-size: 12px; border-radius: 50%; flex-shrink: 0; }
.repeat-row-stack { flex-wrap: wrap; }

/* Block-Sub-Field-Grids (kontakt_block, device_block) */
.field-block { padding: 12px; background: var(--almas-bg-alt); border-radius: var(--radius-sm); margin-bottom: 12px; }
.field-block-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.field-block-grid .field { margin-bottom: 0; }
.field-help { font-size: 12px; color: var(--almas-text-secondary); margin-top: 8px; line-height: 1.4; }

.info-box { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 1px solid #93c5fd; border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; }
.info-box-title { font-weight: 600; color: #1e3a8a; font-size: 14px; margin-bottom: 8px; }
.info-box-list { margin: 0; padding-left: 22px; color: #1e40af; font-size: 13px; line-height: 1.6; }
.info-box-list li { margin-bottom: 2px; }
.info-box p { margin: 0; color: #1e40af; font-size: 13px; }

/* VP-Liste (4 fixe Slots 4-7) */
.vp-list { display: flex; flex-direction: column; gap: 6px; }
.vp-row { display: flex; gap: 8px; align-items: center; padding: 8px; background: var(--almas-bg-alt); border-radius: var(--radius-sm); }
.vp-row .vp-slot-num { width: 28px; font-weight: 700; color: var(--almas-red); flex-shrink: 0; text-align: center; }
.vp-row > input { flex: 1; padding: 8px 10px; border: 1px solid var(--almas-border); border-radius: 6px; font-size: 13px; background: white; }

/* Contract-Switcher in Auftrag-Detail */
.contract-switcher { margin-top: 16px; padding: 14px; background: var(--almas-bg-alt); border-radius: var(--radius-md); }
.contract-switcher h3 { margin: 0 0 4px; font-size: 14px; }
.contract-switcher-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.contract-row { padding: 10px 12px; background: white; border: 1px solid var(--almas-border); border-radius: 6px; cursor: pointer; transition: var(--transition); }
.contract-row:hover { border-color: var(--almas-border-strong); background: #fafafa; }
.contract-row.current { border-color: var(--almas-red); box-shadow: 0 0 0 1px var(--almas-red); cursor: default; }
.contract-row.current:hover { background: white; }
.contract-row .contract-devices button { cursor: pointer; }
.contract-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.contract-head .badge { font-size: 11px; padding: 2px 6px; background: var(--almas-bg-alt); border-radius: 3px; color: var(--almas-text-secondary); }
.contract-head .badge-current { background: var(--almas-red); color: white; }
.contract-devices { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.device-pill { padding: 4px 10px; font-size: 12px; background: white; border: 1px solid var(--almas-border); border-radius: 14px; cursor: pointer; font-family: inherit; }
.device-pill:hover { background: var(--almas-bg-alt); }
.device-pill.current { background: var(--almas-red); color: white; border-color: var(--almas-red); cursor: default; }

/* Device-List (mehrere Geräte im Alarmplan) */
.device-list-container { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.device-list-card { padding: 12px 14px; background: var(--almas-bg-alt); border: 1px solid var(--almas-border); border-radius: 8px; }
.device-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.device-list-head strong { font-size: 13px; color: var(--almas-red); }

/* Alarm-Checklist */
.alarm-check-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.alarm-check-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: white; border: 1px solid var(--almas-border); border-radius: 6px; cursor: pointer; }
.alarm-check-row:hover { background: var(--almas-bg-alt); }
.alarm-check-row input { width: 18px; height: 18px; }

/* Per-Device-Matrix */
.alarm-per-device { margin-bottom: 18px; }
.alarm-per-device h4 { font-size: 13px; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--almas-border); color: var(--almas-red); }
.text-warn { color: #b56500; font-weight: 600; }

/* Wizard-Progress-Overlay (Versand-Feedback) */
.wizard-progress-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.wizard-progress-card {
  background: white; border-radius: 16px;
  padding: 28px 28px 24px;
  max-width: 460px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.wizard-progress-card h2 { margin: 0 0 6px; font-size: 19px; font-weight: 700; }
.wp-bar {
  height: 8px; background: var(--almas-bg-alt); border-radius: 4px;
  overflow: hidden; margin: 14px 0;
}
.wp-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--almas-red) 0%, #ff3838 100%);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 4px;
}
.wp-bar-fill.error { background: #b04444; }
.wp-doc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.wp-doc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--almas-bg-alt); border-radius: 8px;
  font-size: 13px;
}
.wp-doc-row strong { font-weight: 600; }
.wp-doc-row .wp-state { margin-left: auto; color: var(--almas-text-secondary); }
.wp-doc-row.done { background: #e6f7e6; }
.wp-doc-row.done .wp-state { color: #2a7d2a; font-weight: 600; }
.wp-doc-row.failed { background: #ffe6e6; }
.wp-doc-row.failed .wp-state { color: #b04444; font-weight: 600; }
.wp-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--almas-border); border-top-color: var(--almas-red);
  border-radius: 50%;
  animation: wp-spin 0.8s linear infinite;
}
@keyframes wp-spin { to { transform: rotate(360deg); } }

/* Wizard-FAB (Floating Action Button) — bei Mobile ein quick-scroll zum Versand-Block.
   ── Warum hier 768px und nicht 767px (Entscheidung 2026-09-07) ────────────────────────
   Die Navigations-Umbauten weiter unten schneiden bei 767px, damit ein iPad im Hochformat
   (genau 768px) Sidebar und Reiterleiste behaelt. Diese Sprungmarke bleibt absichtlich bei
   768px und gilt damit AUCH auf dem iPad im Hochformat: sie nimmt nichts weg, sondern
   bietet in einem langen Wizard eine Abkuerzung, und dort ist sie so nuetzlich wie am
   Handy. Der allgemeine Layout-Block (ebenfalls 768px) zieht dieselbe Linie.
   Bei genau 768px entsteht dadurch eine Mischung — Navigation wie am Rechner, Sprungmarke
   wie am Handy. Das ist gewollt und kein Ausrutscher: bitte nicht "vereinheitlichen", ohne
   es vorher am iPad im Hochformat gegengeprueft zu haben.
   Nebenbei: welche Geraete ueberhaupt in der vollen Oberflaeche landen, entscheiden NICHT
   diese Grenzen, sondern die Geraeteerkennung in index.html — Tablets werden vom
   /mobile-Redirect per User-Agent ausgenommen, unabhaengig von der Breite. */
.wizard-fab { display: none; }
.wizard-tip { margin: 6px 0 0; }
@media (max-width: 768px) {
  .wizard-fab {
    display: inline-flex; align-items: center; gap: 6px;
    /* bottom 84px statt 18px: der Melde-Kaefer aus debug-widget.js sitzt fix auf
       bottom:20px/right:20px, ist 52px hoch und hat z-index 9998 — er lag damit UEBER
       diesem Knopf, von dem nur noch "↓ Zum Ve" zu sehen war (Befund Lars am Handy).
       Statt am z-index zu drehen lieber ausweichen: der Kaefer soll oben bleiben, er ist
       auf jeder Seite erreichbar. 20 + 52 + 12 Abstand = 84. */
    position: fixed; bottom: 84px; right: 16px; z-index: 30;
    background: var(--almas-red); color: white;
    padding: 12px 18px; border: 0; border-radius: 28px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 20px rgba(213,0,0,0.45);
  }
  .wizard-fab:active { transform: scale(0.96); }
  /* Zwei Klassen (0,2,0) schlagen die Regel oben mit einer (0,1,0) — unabhaengig von der
     Reihenfolge. Bewusst kein display:none: so bleibt der Uebergang weich, und ein
     fixierter Knopf kostet im Layout ohnehin nichts. pointer-events aus, damit man den
     unsichtbaren Knopf nicht treffen kann. */
  .wizard-fab { transition: opacity 0.18s ease, transform 0.18s ease; }
  .wizard-fab.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
}

/* Wizard-Launcher in Auftrag-Detail */
.wizard-launch { background: linear-gradient(135deg, #fff5f5 0%, #fff 100%); border: 1px solid var(--almas-red); border-radius: var(--radius-md); padding: 14px 18px; margin-top: 16px; }
.wizard-launch h3 { margin: 0 0 4px; font-size: 15px; color: var(--almas-red); }
.wizard-resume { background: linear-gradient(135deg, #fff8e1 0%, #fff 100%); border: 1px solid #f59e0b; border-radius: var(--radius-md); padding: 14px 18px; margin-top: 16px; }
.wizard-resume h3 { margin: 0 0 4px; font-size: 15px; color: #b45309; }
.wizard-doc-checks { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.wizard-doc-check { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: white; border: 1px solid var(--almas-border); border-radius: 6px; cursor: pointer; }
.wizard-doc-check input { margin: 0; }
.wizard-doc-check:hover { background: var(--almas-bg-alt); }
.wizard-doc-tag { display: inline-block; background: var(--almas-red); color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; margin-right: 4px; }
.wizard-final { background: #fff5f5; border: 1px solid var(--almas-red); }
.wizard-sig-block { padding: 12px 0; border-top: 1px dashed var(--almas-border); }
.wizard-sig-block:first-of-type { border-top: 0; }
.wizard-sig-block h3 { font-size: 14px; margin: 0 0 8px; }
.btn-large { padding: 12px 24px; font-size: 15px; margin-top: 12px; }
.legacy-create { margin-top: 14px; }
.legacy-create summary { cursor: pointer; padding: 4px 0; }

/* Stammdaten-Subtabs + Tables */
.stammdaten-subtab.active { background: var(--almas-red); color: white; }
.stamm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.stat-card { padding: 14px 16px; background: white; border: 1px solid var(--almas-border); border-radius: var(--radius-md); text-align: center; }
.stat-value { font-size: 26px; font-weight: 700; color: var(--almas-red); }
.stat-label { font-size: 12px; color: var(--almas-text-secondary); margin-top: 4px; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.data-table thead th { text-align: left; padding: 8px 10px; background: var(--almas-bg-alt); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--almas-border); }
.data-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--almas-border); vertical-align: middle; }
.data-table tbody tr.inactive { opacity: 0.5; background: var(--almas-bg-alt); }
.data-table tbody tr:hover { background: var(--almas-bg-alt); }
.data-table code { font-size: 12px; padding: 1px 4px; background: var(--almas-bg-alt); border-radius: 3px; }
.cat-head { font-size: 14px; margin: 16px 0 4px; padding-bottom: 4px; border-bottom: 1px dashed var(--almas-border); }
.pill-ok { display: inline-block; padding: 2px 8px; font-size: 11px; background: #e6f7e6; color: #2a7d2a; border-radius: 3px; font-weight: 600; }
.pill-warn { display: inline-block; padding: 2px 8px; font-size: 11px; background: #fff3e0; color: #b56500; border-radius: 3px; font-weight: 600; }

/* Kunden-Liste mit Badges */
.customer-card { cursor: pointer; }
.customer-card:hover { background: var(--almas-bg-alt); }
.customer-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.badge { display: inline-block; padding: 2px 8px; font-size: 11px; background: var(--almas-bg-alt); color: var(--almas-text); border-radius: 3px; font-weight: 600; }
.badge-light { background: white; border: 1px solid var(--almas-border); font-weight: 400; }
/* App v1.4.3: Zähler „Nicht in D365" in der Seitenleiste — soll auffallen, nicht schreien. */
.badge-warn { background: var(--almas-red); color: #fff; margin-left: 6px; border-radius: 10px; padding: 1px 7px; }
.badge-empty { color: var(--almas-text-secondary); }

/* Customer-Detail: Verträge + Geräte */
.section-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.contract-card { padding: 12px 14px; background: white; border: 1px solid var(--almas-border); border-radius: var(--radius-md); margin-bottom: 10px; }
.contract-card.inactive { opacity: 0.6; background: var(--almas-bg-alt); }
.contract-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.contract-card-head strong { font-size: 14px; }
.device-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--almas-border); }
.device-row { display: flex; gap: 12px; align-items: center; padding: 4px 0; }
.device-row.inactive { opacity: 0.5; }
.device-row .device-id { font-weight: 600; font-size: 13px; }
.check-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; }

/* Customer-Picker (Neuer-Auftrag-Modal) */
.cust-result-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 12px; max-height: 240px; overflow-y: auto; }
.cust-result-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--almas-border); border-radius: 6px; cursor: pointer; background: white; }
.cust-result-row:hover { background: var(--almas-bg-alt); }

/* Geräte-Zeile im Wizard-Kopf (ID-Listen-Anbindung, v1.3.6) */
.wizard-device-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 6px 12px; border-radius: 999px; background: var(--almas-bg-alt, #F1F1F4); font-size: 13px; }
.wizard-device-row .btn { margin-left: 2px; }
.cust-result-empty { padding: 8px 10px; color: var(--almas-text-secondary); font-size: 13px; }
.cust-selected { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #e6f7e6; border: 1px solid #5cbf5c; border-radius: 6px; margin: 6px 0 12px; }
.cust-new-toggle { margin: 8px 0 12px; padding: 8px 0; border-top: 1px dashed var(--almas-border); }
.cust-new-toggle summary { cursor: pointer; padding: 4px 0; font-size: 13px; color: var(--almas-text-secondary); }
.cust-new-toggle[open] summary { color: var(--almas-text); margin-bottom: 6px; }

/* Alarm-Matrix-Tabelle (4 Ereignisse × 6 Positionen) — Mobile stacked */
@media (max-width: 640px) {
  .alarm-matrix-wrap { overflow-x: visible; }
  .alarm-matrix { display: block; width: 100%; font-size: 14px; }
  .alarm-matrix thead { display: none; }
  .alarm-matrix tbody { display: block; }
  .alarm-matrix tr {
    display: block;
    background: white;
    border: 1px solid var(--almas-border);
    border-radius: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .alarm-matrix td { display: block; border: none; padding: 0; text-align: left; }
  .alarm-matrix td.am-ereignis {
    background: transparent;
    color: var(--almas-red);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--almas-border);
    min-width: 0;
  }
  .alarm-matrix td.am-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    width: 100%;
  }
  .alarm-matrix td.am-cell::before {
    content: 'Pos ' attr(data-pos);
    flex: 0 0 64px;
    font-size: 13px;
    font-weight: 600;
    color: var(--almas-text-secondary);
  }
  .alarm-matrix td.am-cell .am-slot-input {
    width: 60px;
    text-align: center;
    min-height: 38px;
    font-size: 16px;
  }
  .alarm-matrix td.am-op {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 4px 64px;
    width: 100%;
    background: transparent;
  }
  .alarm-matrix td.am-op::before {
    content: '↓';
    flex: 0 0 16px;
    color: var(--almas-text-muted);
    font-size: 16px;
  }
  .alarm-matrix td.am-op .am-op-select {
    max-width: 110px;
    min-height: 32px;
  }
}

/* Alarm-Matrix-Tabelle (4 Ereignisse × 6 Positionen) */
.alarm-matrix-wrap { overflow-x: auto; margin-bottom: 8px; }
.alarm-matrix { border-collapse: collapse; min-width: 100%; font-size: 13px; }
.alarm-matrix th, .alarm-matrix td { border: 1px solid var(--almas-border); padding: 6px; text-align: center; vertical-align: middle; }
.alarm-matrix thead th { background: var(--almas-bg-alt); font-weight: 600; font-size: 12px; padding: 8px 6px; }
.alarm-matrix .am-ereignis-h, .alarm-matrix .am-ereignis { text-align: left; padding-left: 12px; min-width: 160px; }
.alarm-matrix .am-ereignis { font-weight: 500; background: var(--almas-bg-alt); }
.alarm-matrix .am-cell { width: 60px; }
.alarm-matrix .am-op { width: 70px; background: #faf7f5; }
.alarm-matrix .am-slot-input { width: 100%; padding: 5px 6px; border: 1px solid var(--almas-border); border-radius: 4px; font-size: 13px; text-align: center; -moz-appearance: textfield; }
.alarm-matrix .am-slot-input::-webkit-outer-spin-button, .alarm-matrix .am-slot-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.alarm-matrix .am-op-select { width: 100%; padding: 4px 4px; border: 1px solid var(--almas-border); border-radius: 4px; font-size: 12px; background: white; }

.form-section { margin-bottom: 16px; }
.form-section label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 500; }
.form-section input, .form-section textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--almas-border-strong);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 14px;
}
.form-row { display: flex; gap: 12px; }
.form-row > div { flex: 0 0 100px; }
.form-row > .grow { flex: 1; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 16px;
  /* Das Overlay ist genau bildschirmhoch (inset: 0). Wird der Inhalt hoeher — seit der
     PDF-Vorschau am Handy der Regelfall —, lag alles darunter ausserhalb des Schirms und
     war nicht erreichbar: "Ohne Vorschau unterschreiben" und "Schliessen" waren weg, und
     scrollen ging nicht (Befund Lars, 21.09.2026, Android). */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modal-card {
  background: var(--almas-surface); border-radius: var(--radius);
  padding: 28px; width: 100%; max-width: 480px;
  box-shadow: 0 32px 96px rgba(0,0,0,0.3);
  /* margin:auto statt align-items:center fuer die Zentrierung: ein zu hohes Flex-Element
     wuerde sonst oben abgeschnitten, und der obere Rand liesse sich nicht erscrollen. */
  margin: auto;
}
.modal-card h2 { margin: 0 0 16px; font-size: 20px; font-weight: 600; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ═══ Lagerliste (App v1.6.0) ═══ */
.lager-kopf { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: -6px 0 14px; font-size: 13px; }
.lager-ro { background: var(--almas-bg-alt); border: 1px solid var(--almas-border-strong); border-radius: 20px; padding: 2px 10px; font-weight: 600; font-size: 12px; }
/* Sichtbereich: zeigt an, dass die Liste bewusst kuerzer ist als die Vorlage. Bewusst
   ruhig gehalten — es ist eine Einordnung, keine Warnung. */
.lager-bereich { background: var(--almas-bg-alt); border: 1px solid var(--almas-border); border-radius: 20px; padding: 2px 10px; font-weight: 600; font-size: 12px; color: var(--almas-text-secondary); }
/* Herkunftszeile: bricht auf eigene Breite um, damit sie den Kopf nicht auseinanderzieht. */
.lager-herkunft { flex-basis: 100%; font-size: 12.5px; color: var(--almas-text-secondary); }
.lager-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px;
  position: sticky; top: 0; z-index: 5; background: var(--almas-bg); padding: 8px 0; }
.lager-blaetter { display: inline-flex; background: var(--almas-bg-alt); border-radius: 10px; padding: 3px; gap: 3px; }
.lager-blatt { border: none; background: transparent; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--almas-text-secondary); padding: 6px 18px; border-radius: 8px; cursor: pointer; transition: var(--transition); }
.lager-blatt[data-active="true"] { background: var(--almas-surface); color: var(--almas-text); box-shadow: var(--almas-shadow); }
.lager-suche { flex: 1; min-width: 200px; padding: 8px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--almas-border-strong); border-radius: 10px; background: var(--almas-surface); color: var(--almas-text); }
.lager-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--almas-text-secondary); white-space: nowrap; }
.lager-status { font-size: 13px; font-weight: 600; min-width: 130px; }
.lager-status-offen { color: #9B5C00; }
.lager-status-ok { color: #36533C; }
.lager-status-fehler { color: #9B1C1C; }
.lager-treffer { margin: 0 0 6px; }

.lager-gruppe { margin-bottom: 8px; }
.lager-gruppe-kopf { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font: inherit; font-size: 14px; padding: 10px 14px; cursor: pointer;
  background: var(--almas-surface); border: 1px solid var(--almas-border); border-radius: var(--radius-sm); }
.lager-gruppe-kopf:hover { background: var(--almas-bg-alt); }
.lager-gruppe-kopf[data-open="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.lager-pfeil { width: 12px; color: var(--almas-text-muted); }
.lager-plakette { margin-left: auto; background: rgba(213, 0, 0, 0.1); color: var(--almas-red);
  border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.lager-gruppe-inhalt:not(:empty) { border: 1px solid var(--almas-border); border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 0 10px 10px; background: var(--almas-surface);
  /* Bei sehr schmalem Fenster scrollt die Tabelle in ihrem Kasten, statt die Seite
     waagerecht zu verschieben. */
  overflow-x: auto; }

.lager-tabelle { table-layout: fixed; }
.lager-tabelle th, .lager-tabelle td { padding: 5px 8px; }
.lager-tabelle .lager-nr { width: 130px; }
.lager-tabelle .lager-name { width: auto; font-size: 13px; }
/* Bei 92px lief „NIEDERLASSUNG" in die Nachbarspalte. Zwei Ursachen behoben:
   (1) Die Spalte ist jetzt breiter.
   (2) Die Großschreibung aus `.data-table thead th` ist hier abgeschaltet — „Niederlassung"
       braucht in Versalien 102px, gemischt geschrieben rund ein Fünftel weniger. Das
       entspricht außerdem der Schreibweise in der Excel-Vorlage.
   Der Selektor muss `.lager-tabelle thead th.lager-th` lauten: `.data-table thead th` ist
   spezifischer als `.lager-th` allein und würde text-transform und letter-spacing sonst
   überstimmen. */
.lager-tabelle thead th { text-transform: none; letter-spacing: 0.2px; white-space: nowrap; }
.lager-tabelle thead th.lager-th { width: 116px; text-align: center; }
.lager-zelle { width: 116px; }
.lager-input { width: 100%; padding: 5px 7px; font: inherit; font-size: 14px; text-align: center;
  border: 1px solid var(--almas-border-strong); border-radius: 6px; background: var(--almas-surface); color: var(--almas-text); }
.lager-input:focus { outline: 2px solid var(--almas-red); outline-offset: -1px; border-color: var(--almas-red); }
.lager-input:disabled { background: var(--almas-bg-alt); color: var(--almas-text-muted); cursor: not-allowed; }
.lager-input-offen { border-color: #E0A800; background: rgba(255, 193, 7, 0.09); }
.lager-input-fehler { border-color: var(--almas-red); background: rgba(213, 0, 0, 0.07); }

.lager-verwaist { margin-top: 26px; border: 1px solid rgba(213, 0, 0, 0.3);
  border-radius: var(--radius); padding: 14px 16px; background: rgba(213, 0, 0, 0.04); }
.lager-verwaist h3 { margin: 0 0 6px; font-size: 15px; }
.lager-verwaist p { margin: 0 0 8px; font-size: 13px; }

/* ── Lagerliste am Handy: aus jeder Tabellenzeile wird eine Karte ─────────────
   Eine Tabelle mit sieben Spalten ist auf 375 px nicht bedienbar — man scrollt
   waagerecht und weiß nicht mehr, in welcher Spalte man tippt. Deshalb: Artikel
   oben, darunter die fünf Felder mit Beschriftung (aus data-label) und
   Fingermaß. Absichtlich nur nach Breite, nicht nach Zeigergerät — ein Tablet
   im Querformat behält die Tabelle. */
@media (max-width: 700px) {
  .lager-leiste { position: static; padding: 0; }
  .lager-suche { flex-basis: 100%; order: 3; }
  .lager-blaetter { flex: 1; }
  .lager-blatt { flex: 1; padding: 9px 12px; }
  .lager-status { order: 4; min-width: 0; }

  .lager-gruppe-kopf { padding: 13px 14px; }
  .lager-gruppe-inhalt:not(:empty) { padding: 10px; background: var(--almas-bg-alt); }

  .lager-tabelle, .lager-tabelle tbody, .lager-tabelle tr, .lager-tabelle td { display: block; width: auto; }
  .lager-tabelle { table-layout: auto; }
  .lager-tabelle thead { display: none; }
  .lager-tabelle tbody tr { background: var(--almas-surface); border: 1px solid var(--almas-border-strong);
    border-radius: 12px; padding: 11px 13px; margin: 0 0 10px; }
  .lager-tabelle tbody tr:hover { background: var(--almas-surface); }
  .lager-tabelle tbody td { border-bottom: none; padding: 0; }
  .lager-tabelle .lager-nr { width: auto; margin-bottom: 3px; }
  .lager-tabelle .lager-name { width: auto; font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 6px; }
  /* td.lager-zelle statt .lager-zelle: die Regel „.lager-tabelle td" oben ist spezifischer
     und würde display:grid sonst überstimmen — Beschriftung und Feld landeten untereinander. */
  .lager-tabelle td.lager-zelle { width: auto; display: grid; grid-template-columns: 1fr 104px;
    align-items: center; gap: 10px; padding: 4px 0; border-top: 1px solid var(--almas-border); }
  .lager-tabelle td.lager-zelle::before { content: attr(data-label); font-size: 14px; color: var(--almas-text-secondary); }
  /* 16px verhindert das Auto-Zoom von iOS Safari beim Fokus, 44px ist Fingermaß. */
  .lager-input { min-height: 44px; font-size: 16px; }
}

.customer-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.customer-card {
  background: var(--almas-surface); border: 1px solid var(--almas-border);
  border-radius: var(--radius); padding: 16px;
}
.customer-card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; padding: 48px 20px 64px; gap: 40px; }
  .lp-hero-visual { order: -1; max-width: 320px; margin: 0 auto; }
  .view-app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; right: 0; height: auto;
    flex-direction: row; padding: 12px 16px;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05);
    z-index: 50;
  }
  .sidebar-brand { padding: 0; border: none; }
  /* "justify-content: center" zusammen mit "overflow-x: auto" schiebt den Überlauf zur
     HÄLFTE nach links aus dem Container — und dorthin kommt man nicht, weil scrollLeft nicht
     negativ werden kann. Gemessen bei 375px: sichtbar 204px, Inhalt 349px, erstes Element
     bei x=-76px und unerreichbar. Am Handy entfällt die Leiste inzwischen ganz (Block bei
     767px weiter unten); für Tablets zwischen 768 und 900px gilt die Korrektur weiterhin.
     flex-start als sichere Grundlage, "safe center" darüber für Browser, die es können. */
  .sidebar-nav { flex-direction: row; padding: 0; gap: 4px; flex: 1; justify-content: flex-start; overflow-x: auto; }
  .sidebar-nav { justify-content: safe center; }
  .sidebar-nav .nav-item { padding: 8px 10px; }
  /* Hinweis: Text ist als TextNode direkt in .nav-item (kein span). Versteckt via font-size:0 im 480px-Block */
  .sidebar-footer { border-top: none; padding-top: 0; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.06); }
  .sidebar-user { display: none; }
  .content { padding: 80px 16px 16px; }
}

/* ═══ Phase 6 — Manager-Tools ═══ */
.header-actions { display: flex; gap: 8px; align-items: center; }
.btn-xs { padding: 2px 8px; font-size: 12px; border-radius: 6px; margin-left: 8px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* Merge-Bar */
.merge-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin: 8px 0 16px;
  background: rgba(213, 0, 0, 0.08); border: 1px solid rgba(213, 0, 0, 0.25);
  border-radius: 10px; color: var(--text-primary, #fff);
}
.merge-bar > span { flex: 1; font-size: 14px; }
.customer-card { position: relative; padding: 16px; border-radius: 12px; background: rgba(255,255,255,0.03); margin-bottom: 8px; }
.customer-card .customer-card-body { padding-left: 28px; }
.customer-card .merge-check { position: absolute; top: 18px; left: 16px; width: 18px; height: 18px; cursor: pointer; }
.customer-card.merge-selected { background: rgba(213, 0, 0, 0.15); border: 1px solid rgba(213, 0, 0, 0.4); }

/* Audit-Tab */
.audit-log-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.audit-row {
  display: grid; grid-template-columns: 110px 220px 160px 140px 1fr; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
  font-size: 13px; align-items: center;
}
.audit-row:hover { background: rgba(255,255,255,0.04); }
.audit-ts { color: var(--text-secondary, #999); font-variant-numeric: tabular-nums; }
.audit-who { font-weight: 500; }
.audit-action { color: var(--text-secondary, #999); }
.audit-entity { font-family: monospace; font-size: 12px; color: var(--text-secondary, #999); }
.audit-details { color: var(--text-secondary, #999); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.audit-details-modal pre { background: rgba(0,0,0,0.4); padding: 12px; border-radius: 8px; font-size: 11px; overflow-x: auto; max-height: 300px; }
.audit-details-modal h4 { margin: 12px 0 6px; font-size: 13px; color: var(--text-secondary, #999); }
[data-active="true"] { background: rgba(213, 0, 0, 0.15); color: #fff; }

@media (max-width: 900px) {
  .audit-row { grid-template-columns: 1fr; gap: 4px; }
  .merge-bar { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile (User-Direktive 2026-05-01)
   Touch-targets ≥ 44px, dynamische Anpassung an Geräte-Größe.
═══════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
  .content { padding: 24px; }
  .lp-section { padding: 56px 24px; }
  .tab-header h1 { font-size: 24px; }
  .field-block-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ── Mobile / Small-Tablet (≤ 768px) ───────────────────── */
@media (max-width: 768px) {
  /* Public-Landing */
  .lp-section { padding: 40px 16px; }
  .lp-section-title { font-size: 26px; line-height: 1.2; }
  .lp-title { font-size: 32px !important; line-height: 1.15; }
  .lp-subtitle { font-size: 16px; margin-bottom: 24px; }
  .lp-cta { flex-direction: column; align-items: stretch; }
  .lp-cta .btn { width: 100%; text-align: center; }
  .lp-footer-content { flex-direction: column; gap: 14px; text-align: center; padding: 0 16px; }

  /* Login-Page */
  .view-login { padding: 24px 16px; }

  /* App-Layout: Sidebar wird Top-Bar mit Hamburger */
  .content { padding: 72px 14px 80px; }
  .tab-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .tab-header > div { width: 100%; }
  .tab-header h1 { font-size: 20px; line-height: 1.2; }
  .tab-header p { font-size: 12px; }

  /* Cards & Listen */
  .card-section { padding: 16px; border-radius: 12px; }
  .card-section h2 { font-size: 18px; }
  .customer-card { padding: 14px; }

  /* Form-Inputs ≥ 44px für Touch */
  .field input[type=text], .field input[type=date], .field input[type=time],
  .field input[type=number], .field textarea, .field select,
  .form-section input, .form-section textarea {
    min-height: 44px; font-size: 16px; /* 16px = kein iOS-Zoom beim Fokus */
    padding: 10px 12px;
  }
  .field-block-grid { grid-template-columns: 1fr; gap: 10px; }
  .field-block { padding: 10px; }
  .radio-group { flex-direction: column; gap: 6px; }
  .radio-option { padding: 10px 12px; min-height: 44px; }

  /* VP-Liste: Slot-Nummer schmaler, Inputs darunter */
  .vp-row { flex-wrap: wrap; padding: 10px; }
  .vp-row .vp-slot-num { width: 100%; text-align: left; padding-bottom: 4px; }
  .vp-row > input { min-height: 44px; flex: 1 1 100%; }

  /* Alarm-Matrix: scrollable, kompakter */
  .alarm-matrix-wrap { -webkit-overflow-scrolling: touch; }
  .alarm-matrix th, .alarm-matrix td { padding: 4px; font-size: 12px; }
  .alarm-matrix .am-ereignis-h, .alarm-matrix .am-ereignis { min-width: 120px; padding-left: 8px; }
  .alarm-matrix .am-cell { width: 48px; }
  .alarm-matrix .am-op { width: 56px; }
  .alarm-matrix .am-slot-input { min-height: 36px; font-size: 14px; }
  .alarm-matrix .am-op-select { min-height: 36px; font-size: 12px; }

  /* Buttons */
  .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .btn-sm { min-height: 36px; padding: 6px 12px; }
  .btn-lg { padding: 14px 24px; }
  .header-actions { flex-wrap: wrap; gap: 6px; }
  .header-actions .btn { flex: 1 1 auto; }

  /* Repeat-Rows: Material/Person umbrechen statt squeezen */
  .repeat-row { flex-wrap: wrap; padding: 10px; }
  .repeat-row > input, .repeat-row > select { flex: 1 1 100%; min-height: 44px; font-size: 16px; }
  .repeat-row .row-num { width: 24px; height: 24px; font-size: 13px; }

  /* Modal full-screen-ish auf Mobile */
  .modal-overlay { padding: 0; align-items: flex-start; }
  .modal-card { max-width: 100%; min-height: 100vh; border-radius: 0; padding: 18px; }
  #sigCanvas { width: 100% !important; max-width: 100%; height: auto; touch-action: none; }

  /* Tabellen / Audit-Liste sind im 900-Block schon stacked */
  .merge-bar { padding: 10px; }
  .merge-bar > span { flex: 1 1 100%; font-size: 13px; }

  /* Sidebar Mobile: schmaler + Touch-friendly */
  .sidebar { padding: 8px 10px; gap: 8px; }
  .sidebar-brand { gap: 4px; flex-shrink: 0; }
  .sidebar-logo { height: 20px; }
  .sidebar-title { display: none; }
  .sidebar-nav { overflow-x: auto; gap: 2px; }
  .nav-item { padding: 8px 10px; min-height: 40px; flex-shrink: 0; }
  .sidebar-footer { padding: 0 0 0 8px; flex-shrink: 0; }
  .sidebar-footer .btn-ghost { padding: 6px 10px; font-size: 12px; }
}

/* ── Handys (≤ 767px): Kopfzeile ist nur noch Zurück + Logo ───────────────────────
   Die horizontale Navigationsleiste entfällt hier vollständig. Sie war ein 90px breites
   Scrollfenster für sieben Reiter, ihr linker Überlauf war unerreichbar, und sie überdeckte
   die Seitenüberschrift. Alle sieben Ziele stehen jetzt im Mehr-Menü der Handy-App — das
   ist die Navigation am Handy, und diese Oberfläche ist die Detailansicht dahinter.
   Mit der Leiste entfallen auch Abmelden und die Versionszeile: beides steht in der
   Handy-App bereits, und die Kopfzeile bleibt dadurch einzeilig.

   767px und nicht 768px: ein iPad im Hochformat misst exakt 768px und soll laut
   Entscheidung vom 2026-08-06 Sidebar und Reiterleiste behalten. Der Wizard-Sprungknopf
   weiter oben schneidet dagegen bewusst bei 768px — die Begruendung steht dort. */
@media (max-width: 767px) {
  .handy-only { display: inline-flex; }
  .sidebar-nav { display: none; }
  .sidebar-footer { display: none; }
  .sidebar { padding: 8px 12px; gap: 10px; align-items: center; }
  .sidebar-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  /* Die Kopfzeile ist jetzt einzeilig (~56px). Vorher standen hier 80px Abstand gegen eine
     Leiste, die tatsächlich rund 135px hoch war — daran wurden "Meine Termine" und
     "Lagerliste" oben abgeschnitten. */
  .content { padding: 74px 14px 24px; }
}

/* ── Klein-Mobile (≤ 480px) — nur Icons in Nav ─────────── */
@media (max-width: 480px) {
  /* Text in .nav-item ist Direkt-TextNode (kein span). font-size:0 versteckt ihn,
     .nav-icon bekommt seine Schrift explizit zurück. */
  .nav-item { font-size: 0; padding: 8px; min-width: 40px; justify-content: center; gap: 0; }
  .nav-item .nav-icon { font-size: 18px; }
}


/* ── Klein-Mobile (≤ 380px) ─────────────────────────────── */
@media (max-width: 380px) {
  .lp-title { font-size: 26px !important; }
  .content { padding: 64px 10px 72px; }
  .alarm-matrix .am-cell { width: 40px; }
  .alarm-matrix .am-op { width: 48px; }
}

/* ═══ Version-Badge + Info-Page (v1.0.0) ═══ */
.version-badge {
  margin-top: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f5f5f7;
  color: #6c757d;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}
.version-badge:hover { background: #ececef; color: #0a0a0a; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.info-card { margin: 0; }
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid #eef0f2;
  font-size: 14px;
}
.info-table th { color: #6c757d; font-weight: 500; white-space: nowrap; }
.info-table a { color: #0a0a0a; text-decoration: none; border-bottom: 1px dotted #d50000; }

.changelog-entry {
  padding: 14px 0;
  border-bottom: 1px solid #eef0f2;
}
.changelog-entry:last-child { border-bottom: none; }
.changelog-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.changelog-version {
  font-weight: 600;
  padding: 2px 8px;
  background: #d50000;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
}
.changelog-date { color: #6c757d; font-size: 13px; }
.changelog-component {
  margin-left: auto;
  padding: 2px 6px;
  background: #eef0f2;
  color: #6c757d;
  border-radius: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.changelog-title { margin: 4px 0 8px; font-size: 15px; }
.changelog-list { margin: 0; padding-left: 20px; line-height: 1.7; }
.changelog-list li { color: #0a0a0a; font-size: 14px; }

/* Mail-Log Manager-Tab (internal) */
.mail-log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mail-log-table thead th {
  text-align: left;
  border-bottom: 2px solid #d50000;
  padding: 8px 6px;
  color: #6c757d;
  font-weight: 500;
}
.mail-log-table tbody td {
  padding: 8px 6px;
  border-bottom: 1px solid #eef0f2;
  vertical-align: top;
}
.mail-log-table tr.ml-head { background: #fafafa; }
.mail-log-table .ml-mail { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; }
.mail-log-table .ml-mail strong { color: #6c757d; font-weight: 600; }
.mail-log-table .ml-id { font-size: 11px; color: #6c757d; }
.mail-log-table .ml-ok { color: #1f7a3a; }
.mail-log-table .ml-err { color: #d50000; }
.text-muted { color: #adb5bd; }

/* Plattform-Kennung neben dem Logo (PST / IST), Kuerzel aus plattform.js.
   Farben je Plattform, hell und dunkel jeweils mit ausreichendem Kontrast:
   PST = ALMAS-Rot, IST = ALMAS-Gruen (PANTONE 564, im Hellen abgedunkelt). */
.plattform-kennung {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 2px 8px; border: 1.5px solid currentColor; border-radius: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1.4;
  color: var(--almas-text-secondary);
}
.plattform-kennung[hidden] { display: none; }
.plattform-kennung[data-kuerzel="PST"] { color: #D81020; background: rgba(216, 16, 32, .08); }
.plattform-kennung[data-kuerzel="IST"] { color: #1F7A6B; background: rgba(31, 122, 107, .10); }
html[data-theme="dark"] .plattform-kennung[data-kuerzel="PST"] { color: #FF6062; background: rgba(255, 96, 98, .12); }
html[data-theme="dark"] .plattform-kennung[data-kuerzel="IST"] { color: #83C8BC; background: rgba(131, 200, 188, .12); }