/* DiBay Fuhrpark — Stile (aus prototyp_fuhrpark.html ausgelagert am 09.11.2026) */
  /* --------------------------------------------------------------------
     Redesign (28.09.2026, Yakups Wunsch): weg vom generischen dunklen-
     Sidebar/warm-cream-Look, hin zu einem Look, der sich an DiBays
     eigenem Logo orientiert (helles, freundliches Blau #71B7FF, tiefes
     Blau für Akzente/Buttons, dunkles Anthrazit statt Schwarz, kühles
     statt warmes Grau, echte Schatten statt reiner 1px-Rahmen). Sidebar
     ist jetzt hell statt dunkel, damit das Logo (dunkle Schrift + blauer
     LKW auf hellem Grund) so zur Geltung kommt wie im Original.
     -------------------------------------------------------------------- */
  :root {
    color-scheme: light;
    --surface-1:      #ffffff;
    --page:           #f4f6fb;
    --text-primary:   #191c22;
    --text-secondary: #545c6e;
    --text-muted:     #8991a3;
    --gridline:       #e6e9f0;
    --border:         rgba(20,24,36,0.09);
    --series-1:       #2f7fe0;
    --brand-blue-light: #71b7ff;
    --series-3:       #1baf7a;
    --series-4:       #eda100;
    --series-8:       #e34948;
    --good:           #0ca30c;
    --warning:        #fab219;
    --critical:       #d03b3b;
    --sidebar-bg:     #ffffff;
    --sidebar-border: #e8ebf2;
    --sidebar-text:   #38415a;
    --sidebar-text-dim: #8891a3;
    --sidebar-active: rgba(47,127,224,0.10);
    --shadow-sm: 0 1px 2px rgba(20,24,43,0.05), 0 1px 3px rgba(20,24,43,0.06);
    --shadow-md: 0 4px 10px rgba(20,24,43,0.06), 0 2px 4px rgba(20,24,43,0.05);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--page);
    color: var(--text-primary);
    display: flex;
    min-height: 100vh;
  }

  /* Sidebar — hell statt dunkel (28.09.2026), damit DiBays Logo (dunkle
     Schrift + Blau auf hellem Grund) korrekt zur Geltung kommt. */
  .sidebar { width: 264px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text);
    padding: 20px 0; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; overflow-y: auto;
    border-right: 1px solid var(--sidebar-border); }
  .brand { display: flex; align-items: center; padding: 0 20px 18px 20px;
    border-bottom: 1px solid var(--sidebar-border); margin-bottom: 8px; }
  .brand img.brand-logo { width: 100%; max-width: 190px; height: auto; display: block; }
  .sidebar-user { padding: 12px 20px 14px 20px; border-bottom: 1px solid var(--sidebar-border); margin-bottom: 8px; }
  .sidebar-user label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--sidebar-text-dim); margin-bottom: 4px; font-weight: 600; }
  .sidebar-user select { width: 100%; background: #f4f6fb; color: var(--sidebar-text); border: 1px solid var(--sidebar-border);
    border-radius: 8px; padding: 6px 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
  .sidebar-user select option { color: #111; }
  .nav-item { display: flex; align-items: center; gap: 10px; margin: 2px 12px; padding: 9px 12px;
    border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--sidebar-text); }
  .nav-item:hover { background: #f4f6fb; }
  .nav-item.active { background: var(--sidebar-active); color: var(--series-1); }
  .nav-group { margin: 2px 8px; }
  .nav-heading { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px;
    border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--sidebar-text); cursor: pointer; }
  .nav-heading:hover { background: #f4f6fb; }
  .nav-heading .chev { font-size: 10px; color: var(--sidebar-text-dim); transition: transform .15s; }
  .nav-group.zu .nav-sub { display: none; }                     /* zugeklappte Menügruppe (Klick auf die Überschrift) */
  .nav-group.zu .chev { transform: rotate(-90deg); }
  .nav-sub { list-style: none; margin: 2px 0 6px 0; padding: 0 0 0 34px; }
  .nav-sub li { font-size: 12.5px; color: var(--sidebar-text-dim); padding: 6px 8px; border-radius: 7px; cursor: pointer; font-weight: 500; }
  .nav-sub li:hover { background: #f4f6fb; color: var(--sidebar-text); }
  .nav-sub li.active { background: var(--sidebar-active); color: var(--series-1); font-weight: 600; }
  .sidebar-footer { margin-top: auto; padding: 14px 20px 14px 20px; border-top: 1px solid var(--sidebar-border); display:flex; flex-direction:column; gap:10px; }
  .gear-link { font-size: 12px; color: var(--sidebar-text-dim); cursor: pointer; display:flex; align-items:center; gap:6px; font-weight: 500; }
  .gear-link:hover { color: var(--series-1); }

  /* Main */
  /* min-width:0 ist hier nötig, nicht nur Kosmetik: ohne das würde ein
     Flex-Kind standardmäßig nie unter seine intrinsische Inhaltsbreite
     schrumpfen — bei der sehr breiten Anwesenheitsliste (ganzes Jahr in
     einer Tabelle) hieße das, dass .main (und damit die ganze Seite)
     sich auf die volle Tabellenbreite aufbläht, statt dass die Tabelle
     brav in ihrer eigenen Card mit overflow-x:auto scrollt. */
  .main { flex: 1; min-width: 0; padding: 28px 36px 60px 36px; max-width: 1680px; }
  .draft-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(237,161,0,0.12);
    color: #9a6a00; border: 1px solid rgba(237,161,0,0.30); font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
  .page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
  .page-header h1 { font-size: 22px; margin: 0 0 4px 0; font-weight: 700; letter-spacing: -0.01em; }
  .page-header .sub { color: var(--text-secondary); font-size: 13.5px; }
  .btn { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
    font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 9px; cursor: pointer; font-family: inherit;
    box-shadow: var(--shadow-sm); }
  .btn:hover { background: var(--gridline); }
  .btn-primary { background: var(--series-1); color: #fff; border-color: var(--series-1); box-shadow: 0 2px 6px rgba(47,127,224,0.28); }
  .btn-primary:hover { background: #256cc4; }
  .btn-small { font-size: 12px; padding: 5px 10px; }

  .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow-sm); }
  .card h2 { font-size: 15px; margin: 0 0 14px 0; font-weight: 700; }
  .card + .card { margin-top: 18px; }

  /* Info-Symbol neben Überschriften (28.09.2026, Yakups Wunsch): ersetzt
     dauerhaft sichtbaren grauen Erklärtext durch ein kleines "i", das den
     Text erst bei Bedarf (Mauszeiger drüber) zeigt — hält die Seiten
     übersichtlich, Erklärung bleibt aber jederzeit abrufbar. */
  .info-icon { position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%; background: var(--gridline); color: var(--text-muted);
    font-size: 10.5px; font-weight: 700; font-style: italic; font-family: Georgia, 'Times New Roman', serif;
    cursor: help; margin-left: 6px; vertical-align: middle; user-select: none; line-height: 1; flex-shrink: 0; }
  .info-icon:hover, .info-icon:focus-within { background: var(--series-1); color: #fff; }
  .info-popover { display: none; position: absolute; z-index: 800; top: calc(100% + 7px); left: 0;
    width: max-content; max-width: 320px; background: var(--surface-1); border: 1px solid var(--border);
    border-radius: 9px; box-shadow: 0 10px 28px rgba(20,24,43,0.20); padding: 10px 13px;
    font-size: 12.5px; line-height: 1.5; font-weight: 400; font-style: normal; color: var(--text-secondary);
    cursor: default; text-align: left; white-space: normal; }
  .info-icon:hover .info-popover, .info-icon:focus-within .info-popover { display: block; }
  h1 .info-icon, h2 .info-icon, h3 .info-icon { font-size: 10.5px; }
  @media print { .info-icon { display: none !important; } }

  /* Echtes Einstellungen-Fenster (Modal) — bewusst KEIN Card im normalen
     Seitenfluss, damit ⚙️-Einstellungen nirgends als eigener Bereich/Reiter
     sichtbar ist, sondern wirklich nur als Popup erscheint, wenn man aktiv
     draufklickt (Yakups Wunsch, 11.09.2026). */
  .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(11,11,11,0.45); z-index: 1000;
    padding: 40px 20px; overflow-y: auto; }
  .modal-box { background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px;
    max-width: 640px; width: 100%; margin: 0 auto; padding: 22px 24px 26px; box-shadow: 0 20px 56px rgba(20,24,43,0.22); }
  .modal-box h2 { font-size: 15px; margin: 0 0 4px 0; font-weight: 700; }

  /* Einheitliche Fenster (Yakup 07.11.2026) — drei feste Muster, überall gleich:
     · großes Fenster in der Mitte (.fenster-gross): Anlegen, Bearbeiten, Ansehen, Einstellungen
     · kleines Fenster in der Mitte: kurze Bestätigungen (Ausmustern, Prüfung erledigt, Löschen …)
     · Dialog (data-dialog): Ja/Nein-, Eingabe- und Auswahlfragen
     Kopf (Titel + ✕) bleibt oben stehen, Knopfleiste (Abbrechen/Speichern) bleibt unten stehen.
     Klick daneben schließt NIE (das Fenster wackelt nur); Esc/✕/Abbrechen fragen nach, wenn etwas eingetragen ist.
     Die Aufbereitung (Kopf/Fuß/✕) macht fensterAufbereiten() im Skript automatisch. */
  .modal-box { position: relative; }
  #bestaetigen-text { white-space: pre-line; }
  .einst-seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
  .einst-seite { text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff); cursor: pointer; font: inherit; color: inherit; }
  .einst-seite:hover { border-color: var(--accent, #2a6fdb); }
  .einst-seite b { display: block; font-size: 13px; }
  .einst-seite span { font-size: 12px; color: var(--text-muted); }
  .sys-sicherung-stand { margin-bottom: 4px; }
  .sys-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
  .sys-tabelle td { font-size: 12.5px; vertical-align: top; }
  .sys-tabelle tr.klickbar { cursor: pointer; }
  .sys-tabelle tr.klickbar:hover td { background: var(--bg-subtle, rgba(0,0,0,.03)); }
  .vl-version { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
  .vl-diff { font-size: 12.5px; margin-top: 6px; }
  .vl-diff td { padding: 2px 8px 2px 0; vertical-align: top; word-break: break-word; }
  .vl-alt { color: var(--critical); } .vl-neu { color: var(--good, #1e6b34); }
  .bm-folgen { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle, rgba(0,0,0,.025)); font-size: 12.5px; line-height: 1.6; }
  .bm-folgen:empty { display: none; }
  .bm-folgen-kopf { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
  .bm-folgen-zeile { margin-top: 2px; }
  .bm-folgen i { color: var(--text-muted); font-style: normal; }
  .modal-box .fenster-kopf { position: sticky; top: -22px; z-index: 30; background: var(--surface-1); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: -22px -24px 16px !important; padding: 16px 20px 14px 24px; border-bottom: 1px solid var(--border); border-radius: 18px 18px 0 0; font-size: 16.5px; line-height: 1.3; }
  .modal-box .fenster-kopf > .fenster-x, .modal-box .fenster-kopf > :has(.fenster-x) { margin-left: auto; }
  .modal-box .fenster-kopf button, .modal-box .fenster-kopf > span[style*="float"] { float: none !important; }
  .fenster-x { width: 34px; height: 34px; padding: 0 !important; border-radius: 50% !important; font-size: 17px !important; line-height: 1; display: inline-flex !important;
    align-items: center; justify-content: center; flex: 0 0 auto; }
  .modal-box .fenster-fuss { position: sticky; bottom: -26px; z-index: 30; background: var(--surface-1); display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap;
    justify-content: flex-end !important; margin: 18px -24px -26px !important; padding: 12px 24px; border-top: 1px solid var(--border); border-radius: 0 0 18px 18px; }
  .fenster-fuss > .btn, .fenster-fuss > button { margin: 0 !important; }
  .fenster-fuss > .btn:not(.btn-primary) { order: -1; }
  .fenster-fuss > span, .fenster-fuss > div:not(.btn) { order: -2; margin-right: auto; }
  /* großes Fenster in der Mitte (Anlegen/Bearbeiten/Ansehen; Yakup 07.11.2026: lieber mittig als Seitenpanel rechts) —
     max. Bildschirmhöhe, scrollt innen; Kopf oben und Knopfleiste unten bleiben dabei stehen */
  .modal-backdrop.fenster-gross { padding: 4vh 20px !important; overflow: hidden; }
  .modal-backdrop.fenster-gross > .modal-box { margin: 0 auto !important; max-height: calc(100vh - 8vh); max-height: calc(100dvh - 8vh); overflow-y: auto;
    animation: fensterAuf .16s ease-out; }
  .modal-backdrop.fenster-gross > .modal-box:not([style*="max-width"]) { max-width: 760px; }
  @keyframes fensterAuf { from { transform: scale(.97); } to { transform: none; } }
  .modal-backdrop[data-dialog] > .modal-box { margin-top: 16vh; }
  @keyframes fensterWackeln { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
  .modal-box.fenster-wackeln { animation: fensterWackeln .3s ease-in-out; }
  @media (max-width: 700px) {                 /* Handy: Fenster werden zum Vollbild (Dialoge bleiben klein) */
    .modal-backdrop.fenster-gross > .modal-box { height: 100%; max-height: none !important; }
    .modal-backdrop:not([data-dialog]) { padding: 0 !important; }
    .modal-backdrop:not([data-dialog]) > .modal-box { margin: 0 !important; max-width: none !important; width: 100%; min-height: 100%; border-radius: 0; border: 0; }
    .modal-backdrop:not([data-dialog]) .fenster-kopf, .modal-backdrop:not([data-dialog]) .fenster-fuss { border-radius: 0; }
  }

  /* Stat tiles */
  .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
  .stat-tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
  .stat-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; }
  .stat-value { font-size: 23px; font-weight: 700; letter-spacing: -0.01em; }
  .stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

  /* Table */
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em;
    color: var(--text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--gridline); }
  td { padding: 10px 10px; border-bottom: 1px solid var(--gridline); color: var(--text-secondary); }
  tr.clickable { cursor: pointer; }
  tr.clickable:hover td { background: rgba(42,120,214,0.05); }
  td.strong { color: var(--text-primary); font-weight: 600; }
  table.ap-tabelle { table-layout: fixed; }
  table.ap-tabelle td { padding: 8px 4px; }
  table.ap-tabelle input { width: 100%; box-sizing: border-box; min-width: 0; }
  table.fz-wide { width: max-content; min-width: 100%; }
  table.fz-wide th, table.fz-wide td { white-space: nowrap; }

  /* Per-Drag einstellbare Spaltenbreite (29.09.2026, Yakups Wunsch:
     "flexibel bleiben wie bei Avrios"). Wird per JS (spaltenResizeAktivieren)
     aktiviert; Tabellen bekommen dann die Klasse "resizable-cols". */
  table.resizable-cols th, table.resizable-cols td { overflow: hidden; text-overflow: ellipsis; }
  table.resizable-cols th { position: relative; }
  .col-resizer { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 2; }
  .col-resizer:hover, .col-resizer:active { background: rgba(0,0,0,0.15); }

  /* Anwesenheitsliste (28.09.2026): kompakte, klickbare Jahrestabelle mit
     sticky Nr./Name/K/U/UU-Spalten, damit die Mitarbeiterzuordnung beim
     horizontalen Scrollen durch die 12 Monate sichtbar bleibt (in Yakups
     Excel waren nur Nr./Name eingefroren — hier zusätzlich auch die drei
     Summenspalten, das erleichtert die Orientierung zusätzlich). */
  .anw-table { font-size: 11.5px; width: max-content; border-collapse: separate; border-spacing: 0; }
  .anw-table th, .anw-table td { padding: 3px 2px; border-bottom: 1px solid var(--gridline); text-align: center; white-space: nowrap; font-weight: 400; text-transform: none; }
  .anw-table th.anw-monat-header { font-size: 12px; font-weight: 700; color: var(--text-primary); }
  .anw-table td.anw-sticky-name, .anw-table th.anw-sticky-name { text-align: left; padding-left: 8px; }
  .anw-table .anw-sticky-nr, .anw-table .anw-sticky-name, .anw-table .anw-sticky-k, .anw-table .anw-sticky-u, .anw-table .anw-sticky-uu {
    position: sticky; background: var(--surface-1); }
  .anw-table .anw-sticky-nr { left: 0; width: 30px; min-width: 30px; }
  .anw-table .anw-sticky-name { left: 30px; width: 150px; min-width: 150px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .anw-table td.anw-sticky-k, .anw-table .anw-sticky-u, .anw-table .anw-sticky-uu { font-weight: 600; }
  .anw-table td.anw-sticky-k { left: 180px; width: 28px; min-width: 28px; background-color: #FFC000; }
  .anw-table td.anw-sticky-u { left: 208px; width: 28px; min-width: 28px; background-color: #92D050; }
  .anw-table td.anw-sticky-uu { left: 236px; width: 28px; min-width: 28px; background-color: #FFFF00; }
  .anw-table th.anw-sticky-k { left: 180px; width: 28px; min-width: 28px; }
  .anw-table th.anw-sticky-u { left: 208px; width: 28px; min-width: 28px; }
  .anw-table th.anw-sticky-uu { left: 236px; width: 28px; min-width: 28px; }
  .anw-table td.anw-sticky-nr.anw-archiv, .anw-table td.anw-sticky-name.anw-archiv { background-color: #dfe2ea; color: var(--text-muted); }
  .anw-table td.anw-day, .anw-table th.anw-day-header { width: 22px; min-width: 22px; }
  .anw-table td.anw-day { cursor: pointer; font-weight: 700; color: var(--text-secondary); }
  .anw-table td.anw-day:hover { outline: 2px solid var(--series-1); outline-offset: -2px; }
  .anw-table td.anw-day:focus { outline: 2px solid var(--series-1); outline-offset: -2px; background-color: rgba(47,127,224,0.14); }
  .anw-table .anw-weekend { background-color: #e9ebf1; }
  .anw-table .anw-feiertag { background-color: #e3d4ee; }
  /* Farbige Tageszellen (29.09.2026, Yakups Wunsch: "übersichtlicher")
     — dieselben Farben wie die K/U/UU-Summenspalten und die Legende.
     Höhere Selektor-Spezifität (td.anw-day.anw-code-*) als bei
     .anw-weekend/.anw-feiertag, damit ein erfasster Eintrag auch an
     einem Wochenend-/Feiertag optisch Vorrang hat und nicht im grauen/
     lila Hintergrund verschwindet. */
  .anw-table td.anw-day.anw-code-k { background-color: #FFC000; color: #1a1a1a; }
  .anw-table td.anw-day.anw-code-u { background-color: #92D050; color: #1a1a1a; }
  .anw-table td.anw-day.anw-code-uu { background-color: #FFFF00; color: #1a1a1a; }
  .anw-table td.anw-heute, .anw-table th.anw-heute { box-shadow: inset 0 0 0 2px var(--series-1); }
  .anw-legende-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }
  .anw-weekend-swatch { background-color: #e9ebf1; }
  .anw-feiertag-swatch { background-color: #e3d4ee; }

  /* Monatssprung (29.09.2026, Yakups Wunsch: "gleich in den Monat August
     oder September hüpfen können", analog zu den Excel-Blattregistern) —
     scrollt die Jahrestabelle per Klick direkt zum jeweiligen Monat,
     ohne manuell durchscrollen zu müssen. */
  .anw-monat-sprung { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
  .anw-monat-sprung-btn { border: 1px solid var(--gridline); background: var(--surface-1); border-radius: 6px;
    padding: 5px 10px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
  .anw-monat-sprung-btn:hover { background: var(--sidebar-active); color: var(--series-1); border-color: var(--series-1); }

  .rollen-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; align-items: center; }
  .rollen-chips .chip { border: 1px solid var(--gridline); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; user-select: none; background: var(--surface, #fff); color: var(--text-muted); text-decoration: line-through; }
  .rollen-chips .chip.an { background: var(--series-1); border-color: var(--series-1); color: #fff; text-decoration: none; }
  .rollen-chips .chip.aktion { text-decoration: none; color: var(--text-secondary); }
  .rollen-chips .chip .n { opacity: .75; margin-left: 4px; font-size: 12px; }
  .filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
  .filters input, .filters select { border: 1px solid var(--gridline); border-radius: 8px; padding: 7px 10px;
    font-size: 13px; background: var(--surface-1); color: var(--text-primary); font-family: inherit; }
  .filters input[type="text"] { min-width: 220px; }

  .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px; }
  .pill.good { background: rgba(12,163,12,0.12); color: var(--good); }
  .pill.warn { background: rgba(250,178,25,0.16); color: #9a6a00; }
  .pill.crit { background: rgba(208,59,59,0.14); color: var(--critical); }
  .pill.info { background: rgba(42,120,214,0.12); color: var(--series-1); }
  .pill.muted { background: var(--gridline); color: var(--text-secondary); }

  /* Fahrzeug detail */
  .back-link { font-size: 13px; color: var(--series-1); cursor: pointer; margin-bottom: 14px; display: inline-block; }
  /* Einheitliche Zurück-Leiste (03.11.2026): ‹ Zurück + Pfad, auf jeder Unterseite oben links */
  .zl-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px 0; font-size: 13px; }
  .zl-leiste .zl-zurueck { font-weight: 600; padding: 5px 12px; }
  .lb-filter { border: 1px solid var(--gridline); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; user-select: none; color: var(--text-secondary); background: var(--surface-1, #fff); }
  .lb-filter:hover { border-color: var(--series-1); }
  .lb-filter.an { background: var(--series-1); border-color: var(--series-1); color: #fff; }
  .zl-pfad { color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
  .zl-pfad .zl-teil { color: var(--series-1); cursor: pointer; }
  .zl-pfad .zl-teil:hover { text-decoration: underline; }
  .zl-pfad .zl-hier { color: var(--text-primary); font-weight: 600; }
  .zl-pfad .zl-sep { margin: 0 5px; color: var(--text-muted); }
  /* Klickbare Kennzeichen/Personal-Namen — überall im Tool, springt direkt
     zu den Stammdaten (Yakups Wunsch, 11.09.2026, "wie bei Avrios"). */
  .partner-gruppen { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
  .partner-tile { cursor:pointer; }
  .partner-tile:hover { box-shadow:0 2px 10px rgba(0,0,0,.12); }
  .partner-tile.aktiv { border-color:var(--series-1); box-shadow:0 0 0 2px rgba(42,120,214,.25); }
  .lt-tabelle { font-size:13px; }
  .lt-tabelle input[type=number] { width:64px; padding:3px 6px; }
  .lt-tabelle td, .lt-tabelle th { padding:5px 8px; }
  .lt-tabelle td { white-space:nowrap; }
  .lt-wochenzeile td.lt-label { white-space:normal; }
  .lt-wochenzeile td { background:rgba(42,120,214,0.08); font-weight:600; }
  .lt-hinweiszeile td { background:rgba(250,178,25,0.16); font-size:12.5px; }
  .lt-abweichung td { background:rgba(250,178,25,0.16); }
  .stat-tile.mit-edit { position:relative; }
  .tile-edit { position:absolute; top:8px; right:8px; border:1px solid var(--border); background:var(--surface-1); border-radius:8px; padding:2px 8px; font-size:13px; cursor:pointer; color:var(--text-secondary); }
  .tile-edit:hover { background:rgba(42,120,214,0.10); color:var(--series-1); border-color:var(--series-1); }
  .partner-krumen { font-size:13px; margin:2px 0 14px 0; color:var(--text-muted); }
  .ap-karte { border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:8px; }
  .ap-karte .ap-name { font-weight:700; font-size:14px; }
  .ap-karte .ap-zeile { font-size:12.5px; color:var(--text-secondary); margin-top:3px; }
  .sp-punkt { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:baseline; }
  .ag-raster { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
  .ag-karte { border:1px solid var(--border, #d9dde3); border-left-width:8px; border-radius:10px; padding:14px 16px; cursor:pointer; background:var(--card-bg, #fff); }
  .ag-karte:hover { box-shadow:0 2px 10px rgba(0,0,0,.12); }
  .ag-karte h3 { margin:0 0 8px 0; font-size:16px; }
  .ag-zahlen { display:flex; gap:16px; margin:8px 0; font-size:12.5px; }
  .ag-zahlen b { display:block; font-size:18px; }
  .farb-wahl { display:flex; gap:8px; flex-wrap:wrap; }
  .farb-wahl button { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
  .farb-wahl button.aktiv { border-color:#111; box-shadow:0 0 0 2px #fff inset; }
  .farb-wahl button:disabled { opacity:.25; cursor:not-allowed; }
  .entity-link { color: var(--series-1); cursor: pointer; }
  .entity-link:hover { text-decoration: underline; }
  .fz-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
  .fz-title { font-size: 24px; font-weight: 700; }
  .fz-sub { color: var(--text-secondary); font-size: 13.5px; margin-top: 2px; }

  .tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--gridline); margin-bottom: 20px; flex-wrap: wrap; }
  .tab { padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); cursor: pointer;
    border-bottom: 2px solid transparent; }
  .tab:hover { color: var(--text-primary); }
  .tab.active { color: var(--series-1); border-bottom-color: var(--series-1); }

  .field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
  .field { }
  .field label { display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .02em; }
  .field .val { font-size: 14px; font-weight: 600; }
  .field .val.ocr { display: inline-flex; align-items: center; gap: 6px; }

  .doc-list { list-style: none; margin: 0; padding: 0; }
  .doc-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0;
    border-bottom: 1px solid var(--gridline); font-size: 13px; }
  .doc-list li:last-child { border-bottom: none; }
  .doc-name { font-weight: 600; color: var(--text-primary); }
  .doc-meta { color: var(--text-muted); font-size: 12px; }

  .contract-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .contract-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .contract-card .head { background: var(--series-1); color: #fff; padding: 12px 16px; font-weight: 700; font-size: 14px; }
  .contract-card .body { padding: 16px; }
  .kv { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--gridline); font-size: 13px; }
  .kv:last-child { border-bottom: none; }
  .kv .k { color: var(--text-muted); }
  .kv .v { font-weight: 600; }

  .type-toggle { display: inline-flex; border: 1px solid var(--gridline); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
  .type-toggle span { padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-secondary); }
  .type-toggle span.active { background: var(--series-1); color: #fff; }

  .task-item { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--gridline); border-radius: 10px; margin-bottom: 10px; }
  .task-item .badge { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
  .task-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .task-title { font-weight: 700; font-size: 13.5px; }
  .btn-edit-icon { flex-shrink: 0; background: none; border: 1px solid var(--gridline); border-radius: 6px;
    font-size: 11.5px; padding: 2px 7px; cursor: pointer; color: var(--text-muted); line-height: 1.6; }
  .btn-edit-icon:hover { background: var(--gridline); color: var(--text-primary); }
  .task-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
  .task-desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; background: var(--page); padding: 8px 10px; border-radius: 8px; }

  /* Anmeldung (20.10.2026) */
  #login-overlay { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; padding: 16px; background: #eef0f6; overflow-y: auto; }
  .login-box { width: 100%; max-width: 390px; background: #fff; border-radius: 18px; box-shadow: 0 10px 40px rgba(20,24,36,0.18); padding: 28px 24px 24px; }
  .login-box img { display: block; height: 54px; margin: 0 auto 14px; }
  .login-box h2 { text-align: center; margin: 0 0 16px; font-size: 18px; }
  .login-box label { display: block; font-size: 12.5px; color: var(--text-secondary); margin: 10px 0 4px; }
  .login-box input[type=text], .login-box input[type=password] { width: 100%; font-size: 16px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; box-sizing: border-box; }
  .login-box .btn-primary { width: 100%; margin-top: 16px; padding: 12px; font-size: 15px; }
  #ro-banner { display: none; margin: 0 0 12px; padding: 8px 14px; background: #fff7e6; border: 1px solid #f0d9a0; border-radius: 10px; font-size: 13px; }
  .view.ro .btn-primary, .view.ro .btn-edit-icon { opacity: .45; }
  #auth-hinweis { display: none; margin: 0 0 12px; padding: 8px 14px; background: #fff7e6; border: 1px solid #f0d9a0; border-radius: 10px; font-size: 13px; }
  .perm-table2 { width: 100%; border-collapse: collapse; margin-top: 8px; }
  .perm-table2 th, .perm-table2 td { padding: 6px 8px; border-bottom: 1px solid var(--gridline); font-size: 12.5px; text-align: center; }
  .perm-table2 th:first-child, .perm-table2 td:first-child { text-align: left; }
  .perm-table2 tr.sub td:first-child { padding-left: 26px; color: var(--text-secondary); }
  .perm-table2 tr.grp td { background: #f6f7fb; font-weight: 600; }
  /* Handy/iPad: Menü einklappbar, Inhalt volle Breite (20.10.2026) */
  .mobil-leiste { display: none; }
  @media (max-width: 900px) {
    body { flex-direction: column; }
    .mobil-leiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--sidebar-bg); color: var(--sidebar-text); position: sticky; top: 0; z-index: 900; border-bottom: 1px solid var(--sidebar-border); }
    .sidebar { display: none; width: auto; height: auto; max-height: 75vh; position: static; border-right: none; }
    body.menue-offen .sidebar { display: flex; }
    .main { padding: 14px 12px 40px; }
    .card { overflow-x: auto; }
    .page-header { flex-wrap: wrap; gap: 8px; }
  }
  .perm-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
  .perm-table th, .perm-table td { padding: 8px 10px; border-bottom: 1px solid var(--gridline); font-size: 12.5px; text-align: center; }
  .perm-table th:first-child, .perm-table td:first-child { text-align: left; }
  .perm-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; }

  .form-row { margin-bottom: 14px; }
  .form-row label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
  /* Einheitliche Eingabefelder im ganzen Tool (Yakup 03.11.2026: Monatsfelder, Notizfelder, Felder in Tabellen und Dialogen zeigten
     die Browser-Grundform mit fremder Schrift und eckigen Kästchen). Niedrige Spezifität — speziellere Regeln gelten weiter. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):not([type=hidden]), select, textarea {
    font-family: inherit; font-size: 13px; color: var(--text-primary); background: var(--surface-1, #fff);
    border: 1px solid var(--gridline); border-radius: 8px; padding: 6px 9px; box-sizing: border-box; line-height: 1.35; }
  input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, select:focus, textarea:focus { outline: none; border-color: var(--series-1); box-shadow: 0 0 0 3px rgba(47,127,224,0.15); }
  input[type=date], input[type=month], input[type=time], input[type=datetime-local] { font-variant-numeric: tabular-nums; min-height: 34px; }
  input:disabled, select:disabled, textarea:disabled { background: var(--gridline); color: var(--text-muted); cursor: not-allowed; }
  textarea { resize: vertical; }
  a { color: var(--series-1); text-decoration: none; } a:hover { text-decoration: underline; }
  button, input[type=file] { font-family: inherit; }
  .form-row input[type=text], .form-row input[type=number] { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--gridline); border-radius: 8px; font-size: 13px; font-family: inherit; }
  .form-row select, .form-row input[type=file] { width: 100%; padding: 8px 10px; border: 1px solid var(--gridline);
    border-radius: 8px; font-size: 13px; font-family: inherit; background: var(--surface-1); color: var(--text-primary); }
  .form-row input[type=date], .form-row input[type=month] { width: 100%; padding: 8px 10px; border: 1px solid var(--gridline); border-radius: 8px;
    font-size: 13px; font-family: inherit; min-width: 150px; }
  .form-row textarea { width: 100%; padding: 8px 10px; font-size: 13px; }

  /* Übergabeprotokoll */
  .sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .sig-label { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
  .sig-pad { width: 100%; height: 150px; border: 1px dashed var(--gridline); border-radius: 8px; background: var(--page); touch-action: none; cursor: crosshair; display: block; }
  .vorschaden-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 14px; }
  .vorschaden-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; position: relative; background: var(--surface-1); }
  .vorschaden-card img { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--gridline); }

  /* Mängel-Übersicht: eine Kachel pro Fahrzeug statt einer Zeile pro
     einzelnem Mangel (ergänzt 30.09.2026, Yakups Wunsch — bei >20
     Fahrzeugen war die reine Zeilen-Tabelle zu unübersichtlich). Klick
     öffnet die vollständige Mängelliste für genau dieses Fahrzeug. */
  .maengel-kachel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }
  .maengel-kachel { background: var(--surface-1); border: 1px solid var(--border); border-left: 4px solid var(--gridline);
    border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow 0.12s; }
  .maengel-kachel:hover { box-shadow: var(--shadow-md); }
  .maengel-kachel .kz { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
  .maengel-kachel .anzahl { font-size: 22px; font-weight: 700; }
  .maengel-kachel .zusatz { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .vorschaden-info { padding: 8px 10px; }
  .vorschaden-pos { font-size: 12.5px; font-weight: 700; }
  .vorschaden-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
  .vorschaden-remove { position: absolute; top: 6px; right: 6px; background: rgba(11,11,11,0.62); color: #fff;
    width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 12px; cursor: pointer; line-height: 1; }

  /* Personalakte-Ordnerstruktur */
  .breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
  .breadcrumb span.crumb { cursor: pointer; color: var(--series-1); }
  .breadcrumb span.crumb:hover { text-decoration: underline; }
  .folder-list { list-style: none; margin: 0 0 4px 0; padding: 0; }
  .folder-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0;
    border-bottom: 1px solid var(--gridline); font-size: 13px; cursor: pointer; }
  .folder-list li:hover { background: rgba(42,120,214,0.05); }
  .folder-list .folder-name { font-weight: 600; color: var(--text-primary); display:flex; align-items:center; gap:8px; }

  .archiv-banner { background: rgba(208,59,59,0.08); border: 1px solid rgba(208,59,59,0.25); color: var(--critical);
    font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 8px; margin-bottom: 16px; }

  .toast { position: fixed; bottom: 22px; right: 22px; background: var(--text-primary); color: #fff;
    padding: 12px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(10px);
    transition: all .2s; pointer-events: none; }
  .toast.show { opacity: 1; transform: translateY(0); }

  /* Dieselkosten (26.10.2026): Kopfzeile der Jahrestabelle bleibt beim Scrollen stehen; Dashboard-Bausteine */
  .ds-scroll { overflow: auto; max-height: calc(100vh - 200px); }
  .ds-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-1); box-shadow: inset 0 -1px 0 var(--gridline); }
  .ds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-bottom: 16px; }
  .ds-grid > .card { margin: 0; } .ds-grid .card h2 { font-size: 14px; margin: 0 0 2px 0; } .ds-unter { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
  .ds-balken { display: grid; grid-template-columns: minmax(120px, 190px) 1fr auto; gap: 6px 10px; align-items: center; font-size: 12.5px; }
  .ds-balken .spur { height: 14px; } .ds-balken .fuell { height: 14px; border-radius: 0 4px 4px 0; min-width: 2px; }
  .ds-balken .wert { text-align: right; white-space: nowrap; color: var(--text-primary); font-weight: 600; }
  .ds-balken .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
  .ds-tip { position: fixed; z-index: 50; pointer-events: none; background: #191c22; color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: none; }
  .ds-delta { font-size: 12px; margin-top: 4px; color: var(--text-muted); }
  .view { display: none; }
  .view.active { display: block; }

  /* Druckansicht (28.09.2026, Spesenauswertung → "Als PDF exportieren"):
     Browser-eigenes Drucken/„Als PDF speichern" nutzt dieselbe aktive
     .view — Sidebar, Prototyp-Hinweisbanner und alle mit .no-print
     markierten Bedienelemente werden dafür ausgeblendet, damit nur die
     eigentliche Auswertungstabelle sauber aufs Papier/PDF kommt. */
  @media print {
    /* DIN A4 quer erzwingen (29.09.2026, Yakups Wunsch): ohne @page-Regel
       überlässt der Browser Papiergröße/Ausrichtung dem zuletzt benutzten
       Wert im Druckdialog — damit die Tabelle zuverlässig auf die Breite
       einer A4-Seite passt (bei vielen Mitarbeitern ruhig über mehrere
       Seiten in der Höhe), wird die Ausrichtung hier fest vorgegeben. */
    @page { size: A4 landscape; margin: 12mm; }
    .sidebar, .draft-badge, .no-print { display: none !important; }
    .main { padding: 0 !important; max-width: none !important; }
    body { background: #fff !important; }
    .card { box-shadow: none !important; border: 1px solid #ccc !important; }
    /* Feste, aufeinander abgestimmte Spaltenbreiten nur für den Druck der
       Spesenauswertung, damit die gesamte Tabelle immer auf die Breite
       einer A4-Querseite passt, unabhängig von der Länge einzelner
       Freitext-Einträge unter "Sonstige Informationen". */
    #view-spesenauswertung table { width: 100% !important; table-layout: fixed; font-size: 10.5px; }
    #view-spesenauswertung th, #view-spesenauswertung td { padding: 5px 6px !important; word-wrap: break-word; overflow-wrap: break-word; }
    /* Kleinere, nicht mehr in Großbuchstaben gesetzte Spaltenüberschriften
       im Druck — sonst bricht z. B. "GUTSCHEIN" in der schmalen Spalte
       unschön auf zwei Zeilen um. */
    #view-spesenauswertung th { font-size: 9px; text-transform: none; letter-spacing: normal; }
    #view-spesenauswertung th:nth-child(1), #view-spesenauswertung td:nth-child(1) { width: 13%; }
    #view-spesenauswertung th:nth-child(2), #view-spesenauswertung td:nth-child(2) { width: 7%; }
    #view-spesenauswertung th:nth-child(3), #view-spesenauswertung td:nth-child(3) { width: 7%; }
    #view-spesenauswertung th:nth-child(4), #view-spesenauswertung td:nth-child(4) { width: 9%; }
    #view-spesenauswertung th:nth-child(5), #view-spesenauswertung td:nth-child(5) { width: 9%; }
    #view-spesenauswertung th:nth-child(6), #view-spesenauswertung td:nth-child(6) { width: 7%; }
    #view-spesenauswertung th:nth-child(7), #view-spesenauswertung td:nth-child(7) { width: 7%; }
    #view-spesenauswertung th:nth-child(8), #view-spesenauswertung td:nth-child(8) { width: 31%; }
    #view-spesenauswertung th:nth-child(9), #view-spesenauswertung td:nth-child(9) { width: 10%; }
    /* Der Hinweistext "weitere Notizen…" im Freitextfeld ist nur eine
       Bildschirm-Eingabehilfe — im PDF für den Steuerberater soll ein
       leeres Feld leer aussehen, nicht wie ein ausgefülltes. */
    #view-spesenauswertung textarea::placeholder { color: transparent !important; }
    /* Der automatische Hinweistext (Krank/Urlaub/Personalausfall bzw. bei
       Krankenstand zusätzlich die Entgeltfortzahlungs-Frist) hat auf dem
       Bildschirm bewusst 12px, damit er gut lesbar ist — in der schmalen
       Druckspalte kann er sich sonst über 3 Zeilen umbrechen und mit dem
       Freitextfeld darunter überlappen. Im Druck deshalb kleiner. */
    #view-spesenauswertung td:nth-child(8) > div:first-child { font-size: 9px !important; margin-bottom: 6px !important; }
    /* Bei vielen Mitarbeitern reicht eine Seite nicht — dann lieber
       mehrere A4-Querseiten als eine Zeile mittendrin abzuschneiden, und
       die Spaltenüberschrift auf jeder neuen Seite wiederholen. */
    #view-spesenauswertung tr { page-break-inside: avoid; }
    #view-spesenauswertung thead { display: table-header-group; }
    /* Ohne diese Zeile wiederholt der Browser die Summenzeile (<tfoot>)
       auf JEDER Seite (Standardverhalten, wie beim wiederholten
       Tabellenkopf) — das sähe aus, als hätte jede Seite ihre eigene
       Endsumme. Die Summe soll aber nur einmal ganz am Ende stehen. */
    #view-spesenauswertung tfoot { display: table-row-group; }
  }

  /* Organisation → Kalender / Springerplan */
  .kal-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
  .kal-monatnav { display:flex; align-items:center; gap:12px; font-weight:700; font-size:17px; }
  .kal-monatnav button { border:1px solid var(--border); background:#fff; border-radius:6px; width:32px; height:32px; cursor:pointer; font-size:14px; }
  .kal-legende { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--text-secondary); margin-bottom:14px; }
  .kal-legende .dot { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
  .kal-grid { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; }
  .kal-wochentage { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--border); background:#fafafa; }
  .kal-wochentage div { padding:10px 12px; font-size:12.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; }
  .kal-woche { border-bottom:1px solid var(--border); }
  .kal-woche:last-child { border-bottom:none; }
  .kal-tagnr-row { display:grid; grid-template-columns:repeat(7,1fr); min-height:30px; }
  .kal-tagnr { padding:8px 14px 2px 14px; font-size:14px; color:var(--text-secondary); }
  .kal-tagnr.kal-ausserhalb { color:var(--text-muted); opacity:0.5; }
  .kal-heute { display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; background:var(--series-1); color:#fff; font-weight:700; }
  /* Kalender kompakt (08.10.2026): Tageszellen als Klick-/Ziehflächen im Hintergrund, Balken in festen Zeilen davor */
  .kal-woche { position:relative; }
  .kal-bg { position:absolute; inset:0; display:grid; grid-template-columns:repeat(7,1fr); }
  .kal-tagzelle { border-right:1px solid #f0f1f4; cursor:pointer; user-select:none; }
  .kal-tagzelle:last-child { border-right:none; }
  .kal-tagzelle:hover { background:#f6f8fc; }
  .kal-tagzelle.kal-wahl { background:#dbe7ff; }
  .kal-tagzelle.kal-we { background:#fbfbfc; }
  .kal-tagnr-row { position:relative; pointer-events:none; }
  .kal-tagnr { padding:4px 8px 2px 8px; font-size:12.5px; }
  .kal-balken-stack { position:relative; pointer-events:none; display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:19px; gap:2px 0; align-content:start;
    min-height:40px; padding:0 0 6px 0; }
  .kal-balken { pointer-events:auto; margin:0 2px; padding:0 6px; border-radius:4px; color:#fff; font-size:11px; font-weight:600; line-height:18px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; display:block; }
  .kal-balken.kal-fortsetzung { margin-left:0; border-top-left-radius:0; border-bottom-left-radius:0; }
  .kal-balken.kal-weiter { margin-right:0; border-top-right-radius:0; border-bottom-right-radius:0; }
  .kal-balken:hover { filter:brightness(0.92); }
  .kal-mehr { pointer-events:auto; margin:0 2px; font-size:11px; font-weight:700; color:var(--text-secondary); cursor:pointer; line-height:18px; padding:0 4px; }
  .kal-mehr:hover { text-decoration:underline; }
  .kal-punkte { display:none; padding:0 6px 6px; gap:3px; flex-wrap:wrap; }
  .kal-punkte i { width:7px; height:7px; border-radius:50%; display:inline-block; }
  .kal-springer-tab { border:1px solid var(--border); background:#fff; border-radius:20px; padding:6px 16px; font-size:13.5px; font-weight:600; cursor:pointer; margin:0 6px 6px 0; }
  .kal-springer-tab.active { background:var(--series-1); color:#fff; border-color:var(--series-1); }
  .dok-kacheln { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
  .dok-kachel { background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px 22px; cursor:pointer; transition:box-shadow .15s, transform .15s; }
  .dok-kachel:hover { box-shadow:0 8px 24px rgba(20,24,43,0.10); transform:translateY(-1px); }
  .dok-kachel h3 { margin:0 0 4px 0; font-size:17px; } .dok-kachel .sub { font-size:12.5px; color:var(--text-muted); margin-bottom:12px; }
  .dok-kachel .zahl { font-size:28px; font-weight:700; } .dok-kachel .pills { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; min-height:22px; }
  .kal-ansicht-wahl { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .kal-ansicht-wahl button { border:none; background:#fff; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; }
  .kal-ansicht-wahl button.active { background:var(--series-1); color:#fff; }
  .kal-wochenansicht { display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; }
  .kal-wtag { border-right:1px solid var(--border); min-height:340px; padding:8px 6px; display:flex; flex-direction:column; gap:4px; }
  .kal-wtag:last-child { border-right:none; }
  .kal-wtag.kal-we { background:#fbfbfc; }
  .kal-wtag-kopf { font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; padding:0 4px 4px; }
  .kal-wchip { border-radius:5px; color:#fff; font-size:12px; font-weight:600; padding:3px 7px; cursor:pointer; line-height:1.3; word-break:break-word; }
  .kal-wchip:hover { filter:brightness(0.92); }
  .kal-wplus { margin-top:auto; border:1px dashed var(--border); background:none; border-radius:6px; padding:4px; font-size:12px; color:var(--text-muted); cursor:pointer; }
  .kal-wplus:hover { background:#f6f8fc; color:var(--text-secondary); }
  .kal-tagliste-zeile { display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid var(--border); cursor:pointer; font-size:13.5px; }
  .kal-tagliste-zeile:hover { background:#f6f8fc; }
  .kal-tagliste-zeile .dot { width:11px; height:11px; border-radius:3px; flex:none; }
  @media (max-width: 700px) {
    .kal-balken-stack { display:none; }
    .kal-punkte { display:flex; }
    .kal-tagnr-row { min-height:0; }
    .kal-bg { min-height:64px; }
    .kal-woche { min-height:64px; }
    .kal-wochenansicht { grid-template-columns:1fr; }
    .kal-wtag { min-height:0; border-right:none; border-bottom:1px solid var(--border); }
  }
  .kal-form-row-inline { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
  .kal-typ-btn { padding:8px 16px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:13.5px; font-weight:600; }
  .kal-typ-btn.active { background:var(--series-1); color:#fff; border-color:var(--series-1); }
  .kal-personen-liste { display:flex; flex-wrap:wrap; gap:8px; }
  .kal-personen-liste label { display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:16px; padding:5px 12px; font-size:12.5px; cursor:pointer; }
  .kal-personen-liste input { margin:0; }
  .kal-ausw-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width: 1100px) { .kal-ausw-grid { grid-template-columns:1fr; } }
  .kal-ausw-summe { font-size:13px; color:var(--text-secondary); margin-top:8px; }

  /* ===== Handy-Ansicht (10.11.2026, Yakup: ganzes Portal auf iPhone, iPad, Android bedienen) =====
     Gilt nur auf kleinen Bildschirmen — am PC ändert sich nichts. Tabellen → Karten macht 29-mobil.js (Klasse „mk“, data-label je Zelle). */
  @media (max-width: 900px), (pointer: coarse) {
    /* iPhone vergrößert die Seite beim Tippen in Felder unter 16 px Schrift — darum 16 px auf Touch-Geräten und kleinen Bildschirmen */
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):not([type=hidden]), select, textarea { font-size: 16px; }
    .btn { min-height: 38px; }
  }
  @media (max-width: 900px) {
    .main input:not([type=checkbox]):not([type=radio]), .main select, .main textarea, .modal-box input:not([type=checkbox]):not([type=radio]), .modal-box select, .modal-box textarea { max-width: 100%; }
    .tabbar, .type-toggle { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabbar::-webkit-scrollbar, .type-toggle::-webkit-scrollbar { display: none; }
    .tabbar .tab, .type-toggle > * { white-space: nowrap; flex: 0 0 auto; }
    .field-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .mobil-leiste { padding-top: max(10px, env(safe-area-inset-top)); }
    .main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: max(40px, env(safe-area-inset-bottom)); }
  }
  @media (max-width: 700px) {
    .main { padding: 10px 10px 40px; overflow-x: hidden; }
    .page-header h1 { font-size: 19px; }
    .page-header > div:last-child:not(:first-child) { display: flex; gap: 8px; flex-wrap: wrap; }
    .fz-header { flex-wrap: wrap; gap: 10px; }
    .fz-title { font-size: 20px; }
    .field-grid { grid-template-columns: 1fr; gap: 12px; }
    .stat-tile { padding: 12px 14px; }
    .stat-value { font-size: 20px; }
    .card { padding: 14px; }
    /* Statuszeile oben (Echtbetrieb/Prototyp): eine Zeile statt halber Bildschirm */
    .draft-badge { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 10px; font-size: 11px; }
    /* Raster aus dem Programmcode (inline „grid-template-columns“): untereinander statt nebeneinander — außer Kalender-/Planraster */
    .main [style*="grid-template-columns"]:not([class*="kal"]):not([class*="anw"]):not([class*="springer"]):not([class*="stat-row"]),
    .modal-box [style*="grid-template-columns"]:not([class*="kal"]):not([class*="anw"]) { grid-template-columns: 1fr !important; }
  }
  /* ---- Tabellen als Karten: Handy (eine Spalte) und iPad hochkant (zwei Karten nebeneinander) ---- */
  @media (max-width: 900px) {
    table.mk { min-width: 0 !important; width: 100% !important; table-layout: auto !important; border: 0; }
    table.mk colgroup, table.mk thead { display: none; }
    table.mk, table.mk > tbody, table.mk > tfoot { display: block; width: 100%; }
    table.mk tr { display: block; border: 1px solid var(--border); border-radius: 12px; margin: 0 0 10px; padding: 6px 12px; background: var(--surface-1, #fff); box-shadow: var(--shadow-sm); }
    table.mk > tfoot > tr { background: #f6f7fb; }
    table.mk td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0 !important; padding: 5px 0 !important; text-align: right !important;
      white-space: normal !important; word-break: break-word; width: auto !important; max-width: none !important; min-width: 0 !important; }
    table.mk td::before { content: attr(data-label); flex: 0 0 40%; text-align: left; color: var(--text-muted); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
    table.mk td[data-label=""]::before { display: none; }
    table.mk td[data-label=""] { justify-content: flex-start; text-align: left !important; }
    table.mk td:first-child { font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
    table.mk td.mk-voll { display: block; text-align: left !important; }
    table.mk td:empty { display: none; }
    table.mk td input:not([type=checkbox]):not([type=radio]), table.mk td select { max-width: 62%; }
    .card:has(> table.mk), .card:has(> div > table.mk:only-child) { background: transparent; border: 0; box-shadow: none; padding: 0 !important; overflow: visible; }
    table.mk tr.clickable:active { background: #eef3fb; }
  }
  @media (min-width: 701px) and (max-width: 900px) {
    table.mk > tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    table.mk > tbody > tr { margin: 0; }
    table.mk > tbody > tr:has(> td.mk-voll:only-child) { grid-column: 1 / -1; }
  }
  @media (max-width: 900px) { body.mit-testband .mobil-leiste { top: 28px; } }   /* Testbereich: Menüleiste unter dem orangen Testbalken */

  /* Ladebildschirm beim Öffnen (10.11.2026): verdeckt die Oberfläche, bis Anmeldung (liegt darüber, z 5000) bzw. Daten da sind; Fenster (z 1000) liegen darunter */
  #start-schirm { display: none; position: fixed; inset: 0; z-index: 4000; background: #eef0f6; align-items: center; justify-content: center; padding: 16px; }
  body.startet #start-schirm { display: flex; }
  .start-box { text-align: center; color: var(--text-muted); font-size: 14px; }
  #start-logo { width: 190px; max-width: 60vw; display: block; margin: 0 auto 22px; }
  #start-logo:not([src]) { display: none; }
  .start-dreh { width: 28px; height: 28px; border: 3px solid #d5dbe8; border-top-color: var(--series-1); border-radius: 50%; margin: 0 auto 12px; animation: startDreh .8s linear infinite; }
  @keyframes startDreh { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .start-dreh { animation: none; } }