/* ============================================================
   operis-theme.css — Welle UI-1
   Phase 1: <style>-Block aus index.html ausgelagert.
   Phase 2: Theme-Tokens (:root) + Bootstrap-Variablen-Overrides.
   Werte = Startpunkt, werden im Augen-Check justiert.
   ============================================================ */

:root {
  /* Radien — alle abgerundeter */
  --op-radius-sm: 0.5rem;     /* 8px - kleine Elemente */
  --op-radius-md: 0.75rem;    /* 12px - Buttons/Inputs */
  --op-radius-lg: 1rem;       /* 16px - Cards/Modals */
  --op-radius-pill: 9999px;   /* Pillen fuer Badges/Buttons */

  /* Schatten — weicher als Bootstrap-Default */
  --op-shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.04),
                    0 1px 3px rgba(15, 23, 42, 0.06);
  --op-shadow-card: 0 4px 12px rgba(15, 23, 42, 0.05),
                    0 2px 4px rgba(15, 23, 42, 0.04);
  --op-shadow-modal: 0 20px 50px rgba(15, 23, 42, 0.15);

  /* Pastell-Hintergruende */
  --op-bg-body: #f6f8fa;            /* Phase 2.7: etwas sichtbarer, Kontrast zu weissen Cards + weisser Sidebar */
  --op-bg-card: #ffffff;            /* reines Weiss fuer Cards */
  --op-bg-pastel-blue: #eff6ff;     /* Section "Arbeitswert" */
  --op-bg-pastel-yellow: #fefce8;   /* Section "Ersatzteil" */
  --op-bg-pastel-green: #f0fdf4;
  --op-bg-pastel-red: #fef2f2;
  --op-bg-pastel-gray: #f8fafc;

  /* Akzentfarben */
  --op-accent-blue: #3b82f6;
  --op-accent-green: #17a44a;       /* Phase 2.5: sattes Operis-Gruen */
  --op-accent-yellow: #f59e0b;
  --op-accent-red: #ef4444;

  /* U1: app-weite Status-Farben (SSOT). Slugs = BOARD_STUFEN via statusFarbe()
     in index.html. EINZIGE Status->Farbe-Quelle; neue Konsumenten lesen hier. */
  --op-status-offen: #E6A700;            /* Offen — gelb */
  --op-status-kalkuliert: #85B7EB;       /* Kalkuliert — hellblau */
  --op-status-termin-machen: #E24B4A;    /* Termin machen — rot */
  --op-status-geplant: #185FA5;          /* Geplant — blau */
  --op-status-im-haus: #1F2430;          /* Im Haus — schwarz */
  --op-status-fertig: #97C459;           /* Fertig — hellgruen */
  --op-status-rechnung-machen: #F09595;  /* Rechnung machen — hellrot */
  --op-status-abgeschlossen: #639922;    /* Abgeschlossen — gruen */
  --op-status-fallback: #94a3b8;         /* unbekannter/leerer Status — neutrales Grau */

  /* Bootstrap-Variablen ueberschreiben (Bootstrap 5.3 ist variablenbasiert) */
  --bs-body-bg: var(--op-bg-body);
  --bs-border-radius: var(--op-radius-md);
  --bs-border-radius-lg: var(--op-radius-lg);
  --bs-border-radius-sm: var(--op-radius-sm);
  --bs-card-border-radius: var(--op-radius-lg);
  --bs-card-box-shadow: var(--op-shadow-card);
  --bs-btn-border-radius: var(--op-radius-md);
  --bs-modal-border-radius: var(--op-radius-lg);
  --bs-badge-border-radius: var(--op-radius-pill);
  --bs-primary: var(--op-accent-blue);
  /* Ohne -rgb greift die Primaerfarbe NICHT auf bg-primary/btn-primary
     (Bootstrap rechnet dort mit --bs-primary-rgb). 3b82f6 = 59,130,246. */
  --bs-primary-rgb: 59, 130, 246;
  /* Phase 2.5: Operis-Gruen fuer success (Buttons + bg-success-Badges).
     -rgb noetig fuer bg-success. 17a44a = 23,164,74. */
  --bs-success: var(--op-accent-green);
  --bs-success-rgb: 23, 164, 74;
}

/* Phase 3.0 (B4): Cards mit dezenter Border-Line statt Schatten (Mockup).
   Modal-Schatten (--op-shadow-modal) bleibt. */
.card {
  box-shadow: none;
  border: 1px solid #e5e7eb;
}

/* Phase 2.9: Cards weiss, ABER getoente Karten (inline background) + farbige
   Header behalten ihre Farbe.
   B4: card-body/footer NICHT zwangsweissen -> erben die (ggf. getoente)
       Card-Farbe (z.B. Reparatur-Karte #f0f4ff). card-header nur weiss,
       wenn keine bg-*-Klasse / kein inline-background.
   B6: ungefaerbte Card-Header ohne Trennstrich.
   B3: Header-Titel-Icons in Operis-Blau (Action-Button-Icons unberuehrt,
       da nur direkte/Span-Icons, nicht > button .bi). */
.card { background-color: #fff; }
.card-header:not([class*="bg-"]):not([style*="background"]) {
  background-color: #fff;
  border-bottom: none;
}
.card-header:not([class*="bg-"]) > .bi,
.card-header:not([class*="bg-"]) > span .bi {
  color: var(--op-accent-blue);
}

/* B2: Inputs/Suchleisten weiss. Ursache: --bs-body-bg=#f6f8fa blutet sonst
   in form-control/-select (Bootstrap nutzt dort var(--bs-body-bg)).
   Disabled/readonly behalten ihren Grau-State. */
.form-control:not(:disabled):not([readonly]):not(.note-textarea),
.form-select:not(:disabled):not([readonly]) {
  background-color: #fff;
}
/* Phase 3.0 (B2): Notizblock behaelt sein Pastellgelb (.note-textarea hat
   #fffacd; war durch die obige .form-control-Regel uebermalt worden). */

/* B8: Kalkulation AW/ET-Section-Header auf Operis-Pastell (Bootstrap
   table-info/-warning, <tr class>). Scoped auf #kalk-tabelle -> kein
   Einfluss auf andere Tabellen, no-op falls Tabelle anders heisst. */
/* Phase 3.1 (C3): Kalk AW/ET-Section-Header durchgehend pastell. Scope ist
   der Kalk-Body-Container [id^="kalk-body-"] (die Tabelle selbst hat KEIN
   id="kalk-tabelle" -> Phase-2.9-#kalk-tabelle war ein No-op). colspan der
   Header-Zelle ist jetzt 11 (= alle Spalten) -> volle Zeilenbreite. */
[id^="kalk-body-"] tr.table-info > *    { background-color: var(--op-bg-pastel-blue)   !important; }
[id^="kalk-body-"] tr.table-warning > * { background-color: var(--op-bg-pastel-yellow) !important; }

/* ── Welle UI-1 Phase 3.0 (Runde 2) ── */

/* B1: Suchleisten - Lupe (.input-group-text) weiss, kein innerer Trennstrich
   zwischen Lupe und Input. input-group ist bereits volle Breite (flex). */
.input-group-text { background-color: #fff; border-right: none; }
.input-group > .form-control { border-left: none; }

/* Phase 3.2-Nachfass: Globale Dashboard-Suche - der versteckte Clear-X
   (#globalSearchClear, display:none) ist das :last-child der input-group
   und stiehlt dem sichtbaren Input die rechte Rundung -> eckige Kante im
   Ruhezustand. Nur wenn der X versteckt ist, den Input rechts runden
   (Radius = var(--bs-border-radius), exakt wie die Modul-Suchen; keine
   Pill, kein Radius am Wrapper -> kein Dropdown-Clipping). Beide display-
   Schreibweisen (statisch / von JS gesetzt). */
#globalSearchWrapper .input-group:has(> #globalSearchClear[style*="display:none"]) > #globalSearchInput,
#globalSearchWrapper .input-group:has(> #globalSearchClear[style*="display: none"]) > #globalSearchInput {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}

/* B3: Outline-Secondary-Buttons (u.a. Dashboard "Oeffnen") weisser Grund
   statt transparent (auf grauem Body sonst grau durchscheinend). Hover/
   Active via Bootstrap-Vars unveraendert. Auf weissen Cards unsichtbar. */
.btn-outline-secondary { --bs-btn-bg: #fff; }

/* B7: Modals durchgehend weiss + ohne Trennstriche; farbige Header und
   inline-getoente Bereiche (z.B. dunkler Bild-Vorschau-Modal) bleiben. */
.modal-content { background-color: #fff; }
.modal-header:not([class*="bg-"]):not([style*="background"]),
.modal-body:not([style*="background"]),
.modal-footer:not([style*="background"]) { background-color: #fff; }
.modal-header:not([class*="bg-"]) { border-bottom: none; }
.modal-footer:not([class*="bg-"]) { border-top: none; }

/* B6: Aufklappbare Karten (toggleInternesCard/Vorgangslog) - der Collapse-
   Body ist ein direktes .card-Kind mit inline display:none. Im zugeklappten
   Zustand die unteren Header-Ecken runden (sonst eckig). :has() = moderne
   Browser (Bootstrap 5.3-Zielgruppe). */
.card:has(> .card-body[style*="display: none"]) > .card-header {
  border-bottom-left-radius: var(--op-radius-lg);
  border-bottom-right-radius: var(--op-radius-lg);
}

/* C5: Tabellen-Kopf auf sanftes Grau (global, dezent). table-dark-Koepfe
   (falls noch welche) ausgenommen, damit deren weisse Schrift lesbar bleibt. */
.table thead:not(.table-dark) th { background-color: #f8fafc; }

/* Phase 3.2 (D2/D3): Tabellen-Basiszellen weiss. Bootstrap 5.3 setzt
   .table{--bs-table-bg:var(--bs-body-bg)} -> unser --bs-body-bg:#f6f8fa
   blutete in JEDE Tabellen-Zelle (Kalk-Zeilen + Summen grau). Hier auf
   #fff. Section-Header-Pastell (--bs-table-bg-type) + Streifen/Hover
   (--bs-table-bg-state) liegen darueber und bleiben erhalten. */
.table { --bs-table-bg: #fff; }

/* Welle UI-1 Card-Politur (Teil A): Tabellen in card-body.p-0 - erste/letzte
   Zelle auf das Card-Header-Padding (1rem) einruecken, damit Zeilen-Inhalt
   + Aktions-Buttons buendig zum Header sitzen (statt nur ~0.5rem Cell-Pad).
   Greift global auf p-0-Card-Tabellen; list-group-Bodies (z.B. Dashboard
   "Aktuelles") sind nicht betroffen (kein table.table). */
.card > .card-body.p-0 > table.table > :is(thead, tbody) > tr > :first-child { padding-left:  var(--bs-card-cap-padding-x, 1rem); }
.card > .card-body.p-0 > table.table > :is(thead, tbody) > tr > :last-child  { padding-right: var(--bs-card-cap-padding-x, 1rem); }

/* Welle UI-2 (Kachel-Liste): Initial-Avatar + Flex-Truncate-Helper. */
.op-avatar {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--op-bg-pastel-blue);
  color: var(--op-accent-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.95rem;
}
.min-w-0 { min-width: 0; }   /* erlaubt text-truncate in flex-Kindern */

/* Buttons werden zu Pills. Phase 2.7: Padding ueber --bs-btn-padding-*
   (nicht direkt), damit .btn-sm seine kleinere Polsterung behaelt. */
.btn {
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.5rem;
  border-radius: var(--op-radius-pill);
  font-weight: 500;
}
.btn-sm {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.25rem;
}

/* Badges als Pills mit etwas mehr Luft */
.badge {
  border-radius: var(--op-radius-pill);
  padding: 0.35em 0.85em;
  font-weight: 500;
}

/* CR1: Status-Badges im Vorgang-Detail einheitlich hoch + auf einer Baseline.
   .badge ist inline-block; die Icon-Font-Metrik (bi) liess Icon-Badges
   (Abgerechnet/Bezahlt) anders hoch erscheinen als das text-only Status-Badge.
   inline-flex + align-items:center + line-height:1 -> gleiche Hoehe, Icon zentriert. */
.vd-status-badges .badge,
.vd-status-badges .status-badge { display: inline-flex; align-items: center; line-height: 1; }

/* CR1: Inline-KM-Edit in der Fahrzeug-Karte kompakt (kein full-width-Input in der Zelle). */
.op-km-inline { max-width: 150px; }

/* "Aktuelles" - einspaltiges Stack. W2: die Einträge sind jetzt .card in einem
   .op-tile-compact-Wrapper -> sie nutzen die geteilte blaue Board-Hover-Regel
   (.op-tile-compact .card:hover). Der frühere .da-tile-Look (Severity-Links-Rand +
   Lift-Hover) ist zurückgebaut; nur das .da-grid-Layout bleibt. */
.da-grid { display: flex; flex-direction: column; gap: 6px; padding: 10px; }

/* Modal weicher */
.modal-content {
  border-radius: var(--op-radius-lg);
  box-shadow: var(--op-shadow-modal);
  border: none;
}

/* ── Welle UI-1 Phase 2.5/2.6 ── */
/* Phase 2.5 A/B/C (Cards-weiss + Zeilen-Trennlinien + Pastell-Hover) wurden
   in 2.6 nach User-Feedback zurueckgerollt. Tabellen/Cards verhalten sich
   wieder wie nach Phase 2 (Bootstrap-Default-Streifen, Card-Schatten/Radius
   aus Phase 2 bleiben). Es bleiben nur die Gruentoene (D). */

/* D. btn-success: Basis aus --bs-success; Hover/Active-Shade explizit
   (Bootstrap leitet die NICHT aus --bs-success ab -> sonst alter Gruenton). */
.btn-success {
  --bs-btn-bg: var(--op-accent-green);
  --bs-btn-border-color: var(--op-accent-green);
  --bs-btn-hover-bg: #14913f;
  --bs-btn-hover-border-color: #14913f;
  --bs-btn-active-bg: #14913f;
  --bs-btn-active-border-color: #14913f;
}

    body { padding: 20px; }
    .table-container, .form-container, .detail-container { margin-top: 15px; }
    .card { min-width: 200px; }
    .kalk-wrapper .form-control-sm { font-size: .85rem; padding: .25rem .5rem; }
    .kalk-wrapper .kalk-row { cursor: grab; }
    .kalk-wrapper .kalk-row.dragging { opacity: .6; }
    .kalk-wrapper .kalk-act { padding: 0; text-align: center; }

    .crm-main {
      margin-left: 0;
      padding: 20px;
      /* Batch-A-Feintuning: gleiche Dauer/Easing wie #crmSidebar width (Desync weg). */
      transition: margin .15s cubic-bezier(.4, 0, .2, 1);
    }
    @media (min-width: 992px) {
      .crm-main { margin-left: 250px; }
    }
    /* Phase 2.7: Sidebar weiss (ueberschreibt bg-light; ID+!important
       schlaegt die .bg-light-!important-Utility) + dezente Trennlinie. */
    /* Phase 2.8: an Viewport-Ecke pinnen (body padding:20px versetzte die
       fixed-Sidebar sonst um 20px -> grauer Streifen links/oben). vh-100
       + top/left:0 = durchgehend weiss von oben bis unten, Logo buendig. */
    #crmSidebar { background: #fff !important; border-right: 1px solid #e5e7eb; top: 0; left: 0; }
    #crmSidebar button { justify-content: flex-start; font-weight: 500; overflow: hidden; }
    /* Label clippt beim Schrumpfen (kein Umbruch/Reflow) + blendet weich aus. */
    #crmSidebar .op-nav-label { white-space: nowrap; transition: max-width .15s ease, opacity .15s ease; }
    /* Logo: ausgeklappt volles PNG; collapsed echtes Icon (SVG, kein Crop). */
    #crmSidebar .op-logo img { max-width: 180px; width: 100%; }
    #crmSidebar .op-logo-icon { display: none; }
    @media (max-width: 991.98px) {
      #crmSidebar { display: none; }
    }
    #crmSidebar .btn-outline-primary {
      background-color: transparent !important;
      border: none !important;
      color: #000 !important;
      text-align: left;
      font-weight: 500;
    }
    #crmSidebar .btn-outline-primary:hover {
      background-color: #a9cff5 !important;
      color: #000 !important;
    }
    #crmSidebar .btn-outline-primary:active,
    #crmSidebar .btn-outline-primary:focus {
      background-color: #a9cff5 !important;
      color: #000 !important;
      box-shadow: none !important;
    }

    /* ════ N2b: Globaler Kopf (auf jedem Screen) ════ */
    #opGlobalHeader { margin-bottom: 1rem; }
    /* nowrap: die Glocke darf NIE in eine zweite Zeile umbrechen. Bei ausgeklappter
       Sidebar (schmaleres .crm-main) gibt statt dessen die Zeiterfassungs-Karte nach
       (min-width:0 -> ihr card-body flex-wrap't intern). */
    .op-head-row1 {
      display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; margin-bottom: .6rem;
    }
    .op-head-spacer { flex: 1 1 auto; min-width: 0; }   /* Slack + darf auf 0 schrumpfen */
    .op-head-stempel { margin-bottom: 0; min-width: 0; } /* Zeiterfassung schrumpft statt Glocke umzubrechen */
    .op-head-row2 { width: 100%; }                       /* Suche volle Breite = optischer Trenner */

    /* ════ N2: Benachrichtigungs-Glocke (im globalen Kopf) + Panel ════ */
    /* Rechts-Anker + kein Schrumpfen/Umbrechen -> immer rechts außen in Zeile 1. */
    #opBell { flex: 0 0 auto; margin-left: auto; }
    .op-bell-btn {
      position: relative; background: transparent; border: none; cursor: pointer;
      color: #1d3c5f; font-size: 1.5rem; line-height: 1; padding: .2rem .5rem; border-radius: 8px;
    }
    .op-bell-btn:hover { background: #eef2f7; }
    .op-bell-pill {
      position: absolute; top: -2px; right: -2px; min-width: 16px;   /* darf frei ueberstehen */
      background: #dc3545; color: #fff; font-size: .62rem; font-weight: 700; line-height: 1;
      padding: 2px 5px; border-radius: 10px;
    }
    .op-bell-panel {
      position: fixed; top: 60px; right: 16px; width: 340px; max-height: 72vh; overflow-y: auto;
      background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,.15); z-index: 1040;
    }
    .op-bell-panel-head {
      display: flex; justify-content: space-between; align-items: center;
      padding: .6rem .8rem; border-bottom: 1px solid #eef0f2; font-size: .9rem; color: #1d3c5f;
    }
    .op-bell-empty { padding: 1.3rem .8rem; color: #6c757d; font-size: .85rem; text-align: center; }
    .op-bell-item {
      display: flex; align-items: flex-start; gap: .4rem;
      padding: .55rem .8rem; border-bottom: 1px solid #f2f4f6;
    }
    .op-bell-item:last-child { border-bottom: none; }
    .op-bell-item-main { flex: 1 1 auto; min-width: 0; cursor: pointer; }
    .op-bell-item-title { font-size: .82rem; font-weight: 600; color: #1d3c5f; }
    .op-bell-item-text {
      font-size: .8rem; color: #495057;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .op-bell-item-meta { font-size: .72rem; color: #8a9199; margin-top: 2px; }
    .op-bell-item.op-bell-read { opacity: .5; }   /* gelesen: ausgegraut */
    .op-bell-check {
      flex: 0 0 auto; background: transparent; border: 1px solid #d1d5db; border-radius: 6px;
      color: #198754; cursor: pointer; padding: 2px 7px; font-size: .9rem; line-height: 1;
    }
    .op-bell-check:hover { background: #e8f5ee; }

    /* ════ Batch-A: KFZ-Kennzeichen-Schild (Euro-Plate) ════
       Wiederverwendbar; aktuell nur Vorgang-/Fahrzeug-Detail. Reines UI
       (Beleg-Render unberuehrt). */
    .kfz-plate {
      display: inline-flex; align-items: stretch; vertical-align: middle;
      background: #fff; border: 1.5px solid #111; border-radius: 5px;
      overflow: hidden; font-weight: 700; line-height: 1;
      font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace;
      box-shadow: 0 1px 1px rgba(0,0,0,.15);
    }
    .kfz-plate-eu {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: #003399; color: #fff; padding: 2px 5px; gap: 1px; flex-shrink: 0;
    }
    .kfz-plate-stars { color: #ffcc00; font-size: .5em; line-height: 1; letter-spacing: -1px; }
    .kfz-plate-d  { font-size: .72em; line-height: 1; }
    .kfz-plate-nr { padding: 4px 9px; letter-spacing: 1.5px; color: #111; white-space: nowrap; }

    /* ════ Batch-A: Sidebar Collapse (Hover-Peek + Pin) ════ */
    #crmSidebar { width: 250px; transition: width .15s cubic-bezier(.4, 0, .2, 1); }
    #sidebarPin {
      position: absolute; top: 8px; right: 8px; z-index: 2;
      width: 26px; height: 26px; padding: 0; line-height: 22px; text-align: center;
      border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
      color: #555; cursor: pointer; font-weight: 700;
    }
    #sidebarPin:hover { background: #a9cff5; color: #000; }
    @media (min-width: 992px) {
      body.sidebar-collapsed #crmSidebar { width: 64px; padding-left: .5rem; padding-right: .5rem; }
      body.sidebar-collapsed .crm-main  { margin-left: 64px; }
      /* Nav-Buttons echt zentrieren: .btn ist inline-block -> erst display:flex
         macht justify-content wirksam; text-align (links) wird damit neutral. */
      body.sidebar-collapsed #crmSidebar button { display: flex; align-items: center; justify-content: center; }
      body.sidebar-collapsed #crmSidebar button .me-1 { margin-right: 0 !important; }
      /* Label-Box kollabieren (Flex-Item -> max-width greift) -> keine Restbreite,
         Icon mittig; weiches Aus-/Einblenden ueber max-width+opacity. */
      body.sidebar-collapsed #crmSidebar .op-nav-label { max-width: 0; opacity: 0; overflow: hidden; }
      /* Logo: volles PNG aus, echtes SVG-Icon an (kein Crop). margin-top haelt
         das Icon UNTER dem Pin-Griff (war die "Logo unsichtbar"-Ursache). */
      body.sidebar-collapsed #crmSidebar .op-logo { margin-top: 2rem; }
      body.sidebar-collapsed #crmSidebar .op-logo-full { display: none; }
      body.sidebar-collapsed #crmSidebar .op-logo-icon { display: inline-block; }
      /* Logout eingeklappt: kompaktes, zentriertes Icon (keine gestreckte rote Pille) */
      body.sidebar-collapsed #crmSidebar .btn-outline-danger {
        width: 40px; height: 40px; padding: 0; margin: 0 auto; border-color: transparent;
      }
      body.sidebar-collapsed #crmSidebar .btn-outline-danger:hover {
        background: #f8d7da !important; border-color: transparent; color: #842029 !important;
      }
    }

    .note-textarea {
      background-color: #fffacd;
      border: 1px solid #f0e68c;
      border-radius: 4px;
      box-shadow: 3px 3px 6px rgba(0,0,0,0.15);
      resize: auto;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      transition: transform 0.1s ease, box-shadow 0.1s ease;
    }
    .note-textarea:focus {
      outline: none;
      box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
      transform: translateY(-2px);
    }

    /* ── Kalender ── */
            /* PLANTAFEL CSS */
    /* ══════════════════════════════════════════════════════
       PLANTAFEL (Craftboxx-Style)
       ══════════════════════════════════════════════════════ */
    .pt-container { overflow: auto; min-height: 500px; position: relative; }
    .pt-toolbar { position: sticky; top: 0; z-index: 10; background: #f8f9fa; padding: 6px 0; border-bottom: 1px solid #dee2e6; margin-bottom: 8px !important; }

    /* Planungsgitter */
    /* Flex-Child im .pt-week-wrap: fuellt den verbleibenden Platz im contained Block
       (.pt-week-wrap max-width:1180px). flex-grow:1 -> Tagesspalten (1fr) stretchen
       innerhalb des Blocks (NICHT ueber den Monitor, da der Block gekappt ist); die
       Backlog-Rail (flex:0 0) bleibt rechts buendig. min-width:0 + inline overflow:auto
       -> bei schmalem Fenster schrumpft/scrollt nur das Grid, Rail bleibt sichtbar. */
    .pt-grid { flex: 1 1 auto; min-width: 0; }
    /* Phase 7: Auslastungs-Zeile — Heat-Zelle im Karten-Look (weiche Fuellung, runde
       Ecken, dezenter Familien-Rand). Skala gruen <=85 / amber <=100 / rot >100 / neutral. */
    .pt-auslastung { border-radius: var(--op-radius-md); padding: 3px 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.1; overflow: hidden; border: 1px solid transparent; }
    .pt-aus-pct { font-weight: 700; font-size: .9rem; }
    .pt-aus-sub { font-size: .58rem; opacity: .8; white-space: nowrap; }
    .pt-aus-ok   { background: var(--op-bg-pastel-green);  color: #14633a; border-color: #bfe3cf; }
    .pt-aus-warn { background: var(--op-bg-pastel-yellow); color: #7a4d08; border-color: #f1d49b; }
    .pt-aus-over { background: var(--op-bg-pastel-red);    color: #b91c1c; border-color: #f5b5b5; }
    .pt-aus-none { background: var(--op-bg-pastel-gray);   color: var(--bs-secondary-color); border-color: #e6e9ef; }
    /* D3: kompakter Tages-Auslastungs-Indikator (Tag-Ansicht, Header rechts). Pille im
       Karten-Look, gleiche Heat-Skala wie die Wochen-Zeile (gruen <=85 / amber <=100 /
       rot >100 / neutral). */
    .pt-tag-aus { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: 2px 9px; font-size: .72rem; font-weight: 700; line-height: 1.3; border: 1px solid transparent; white-space: nowrap; }
    .pt-tag-aus-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .75; }
    .pt-tag-aus.pt-tag-aus-ok   { background: var(--op-bg-pastel-green);  color: #14633a; border-color: #bfe3cf; }
    .pt-tag-aus.pt-tag-aus-warn { background: var(--op-bg-pastel-yellow); color: #7a4d08; border-color: #f1d49b; }
    .pt-tag-aus.pt-tag-aus-over { background: var(--op-bg-pastel-red);    color: #b91c1c; border-color: #f5b5b5; }
    .pt-tag-aus.pt-tag-aus-none { background: var(--op-bg-pastel-gray);   color: var(--bs-secondary-color); border-color: #e6e9ef; }
    /* D3: dezenter Auslastungs-Wert je Monats-Tageszelle (Eck-Badge oben rechts, ruhig). */
    .pt-mo-day { position: relative; }
    .pt-mo-aus { position: absolute; top: 1px; right: 3px; font-size: .56rem; font-weight: 700; line-height: 1; padding: 1px 3px; border-radius: var(--op-radius-sm); border: 1px solid transparent; pointer-events: none; }
    .pt-mo-aus.pt-mo-aus-ok   { background: var(--op-bg-pastel-green);  color: #14633a; border-color: #bfe3cf; }
    .pt-mo-aus.pt-mo-aus-warn { background: var(--op-bg-pastel-yellow); color: #7a4d08; border-color: #f1d49b; }
    .pt-mo-aus.pt-mo-aus-over { background: var(--op-bg-pastel-red);    color: #b91c1c; border-color: #f5b5b5; }
    .pt-mo-aus.pt-mo-aus-none { background: var(--op-bg-pastel-gray);   color: var(--bs-secondary-color); border-color: #e6e9ef; }
    /* Anwesenheits-Matrix (Design D1: Stilreferenz). Status-Farben exakt; ALLES auf
       .anw-* / das Matrix-/Modal-Markup gescoped (kein Bleed in Planer/Listen). */
    .anw-matrix { border-collapse: separate; border-spacing: 2px; background: #e3e8ef; user-select: none; }
    .anw-matrix th, .anw-matrix td { white-space: nowrap; padding: 0; }
    /* Tages-Kopf: Tageszahl (12px/600) + Wochentag (10px gedaempft) */
    .anw-matrix thead th.anw-day-h { background: #fbfcfd; border-radius: 4px; width: 38px; min-width: 38px; height: 34px; text-align: center; line-height: 1.05; font-size: 12px; font-weight: 600; color: #1f2d3d; vertical-align: middle; }
    .anw-matrix thead th.anw-day-h .anw-w { display: block; font-size: 10px; font-weight: 400; color: #9aa5b1; }
    .anw-matrix thead th.anw-day-h.anw-we { color: #9aa5b1; }
    /* Namensspalte: sticky links ~210px, eigene Fuellung (ueberlagert beim Scroll) */
    .anw-matrix .anw-name-col { position: sticky; left: 0; width: 210px; min-width: 210px; max-width: 210px; background: #fff; text-align: left; padding: 0 14px; border-radius: 4px; overflow: hidden; }
    .anw-matrix thead th.anw-name-col { z-index: 3; background: #fbfcfd; color: #6b7785; font-size: 12px; font-weight: 600; height: 34px; vertical-align: middle; }
    .anw-matrix td.anw-name-col { z-index: 2; height: 30px; }
    .anw-matrix td.anw-name-col .anw-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: middle; }
    .anw-matrix td.anw-name-col .anw-nm { font-weight: 600; font-size: 13px; color: #1f2d3d; }
    .anw-matrix td.anw-name-col .anw-rl { color: #9aa5b1; font-size: 11.5px; margin-left: 6px; }
    /* Tageszellen: 38px breit, 30px hoch, Radius 4px; Status-Fuellung exakt */
    /* D1.1: 1px Rahmen im mittleren Status-Ton + zentrierter Status-Buchstabe (Status-Textfarbe) */
    .anw-matrix td.anw-cell { width: 38px; min-width: 38px; height: 30px; border-radius: 4px; cursor: pointer; text-align: center; vertical-align: middle; font-size: 11px; font-weight: 600; line-height: 1; }
    .anw-matrix td.anw-cell.anw-anwesend     { background: #e6f2e1; border: 1px solid #bcdca6; color: #2f6b1f; }
    .anw-matrix td.anw-cell.anw-urlaub       { background: #e2eefb; border: 1px solid #9cc3ec; color: #185fa5; }
    .anw-matrix td.anw-cell.anw-krank        { background: #fbe6e6; border: 1px solid #eaa6a6; color: #a32d2d; }
    .anw-matrix td.anw-cell.anw-berufsschule { background: #faf0da; border: 1px solid #e8c889; color: #854f0b; }
    .anw-matrix td.anw-cell.anw-unbezahlt    { background: #ecebfa; border: 1px solid #c3bdf0; color: #3c3489; }
    .anw-matrix td.anw-cell.anw-abbau        { background: #d9f2ef; border: 1px solid #8fd6cd; color: #0f6d63; }
    .anw-matrix td.anw-cell.anw-frei         { background: #f1f0ec; border: 1px solid #dcdacf; color: #5f5e5a; }
    .anw-matrix td.anw-cell:hover { box-shadow: inset 0 0 0 2px rgba(26,58,92,.25); }
    .anw-matrix td.anw-sel { outline: 2px dashed #1a3a5c; outline-offset: -2px; }
    /* Urlaub W1: beantragt (noch nicht genehmigt) = gestrichelter Rand + reduzierte Deckkraft,
       kapazitäts-neutral (zählt NICHT als abwesend; siehe ptHatUrlaub-Guard). */
    .anw-matrix td.anw-cell.anw-beantragt { border-style: dashed; opacity: .5; }
    /* Heute = Accent-Blau Inset-Ring (einheitlich mit Woche/Tag/Monat, D4a) */
    .anw-matrix td.anw-heute, .anw-matrix th.anw-heute-col { box-shadow: inset 0 0 0 1px var(--op-accent-blue); }
    /* Legende: Swatch + Label */
    .anw-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #6b7785; }
    .anw-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid rgba(0,0,0,.06); }
    .anw-sw.anw-anwesend { background: #e6f2e1; } .anw-sw.anw-urlaub { background: #e2eefb; }
    .anw-sw.anw-krank { background: #fbe6e6; } .anw-sw.anw-berufsschule { background: #faf0da; }
    .anw-sw.anw-unbezahlt { background: #ecebfa; } .anw-sw.anw-frei { background: #f1f0ec; }
    .anw-sw.anw-abbau { background: #d9f2ef; }
    /* Modal: Status-Chips (aktiv = Status-Fuellung), Serien-Hinweis, Marken-Button */
    .anw-chip { cursor: pointer; padding: 6px 13px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; color: #6b7785; background: #fff; user-select: none; }
    .anw-chip.anw-anwesend:has(input:checked)     { background: #e6f2e1; color: #2f6b1f; border-color: #bcd9b0; font-weight: 600; }
    .anw-chip.anw-urlaub:has(input:checked)       { background: #e2eefb; color: #185fa5; border-color: #9cc3ec; font-weight: 600; }
    .anw-chip.anw-krank:has(input:checked)        { background: #fbe6e6; color: #a32d2d; border-color: #e9b3b3; font-weight: 600; }
    .anw-chip.anw-berufsschule:has(input:checked) { background: #faf0da; color: #854f0b; border-color: #e3c98a; font-weight: 600; }
    .anw-chip.anw-unbezahlt:has(input:checked)    { background: #ecebfa; color: #3c3489; border-color: #bcb8ec; font-weight: 600; }
    .anw-chip.anw-abbau:has(input:checked)        { background: #d9f2ef; color: #0f6d63; border-color: #8fd6cd; font-weight: 600; }
    .anw-serie-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #faf0da; color: #854f0b; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; }
    .anw-serie-hint .btn { border: 1px solid #e3c98a; background: #fff; color: #854f0b; }
    /* Monat-Ansicht (Design D2: Karten-Look, konsistent zur Woche). Auf .pt-mo-* gescoped
       (kein Bleed). grid-template-columns kommt inline (N=5/6/7); Rest hier. */
    .pt-mo-head { display: grid; gap: 3px; margin-bottom: 3px; }
    .pt-mo-head-cell { font-size: .72rem; font-weight: 600; color: #6b7785; padding: .1rem .4rem; }
    .pt-mo-week { display: grid; grid-auto-rows: 18px; gap: 3px; position: relative; margin-bottom: 3px; }
    .pt-mo-day { border-radius: var(--op-radius-sm); background: var(--op-bg-pastel-gray); z-index: 0; cursor: pointer; padding: 2px 5px; overflow: hidden; }
    .pt-mo-day--we { background: #eef1f5; }
    .pt-mo-day--today { box-shadow: inset 0 0 0 1px var(--op-accent-blue); }
    .pt-mo-day--other { opacity: .45; }
    .pt-mo-day .pt-mo-nr { font-size: .7rem; color: #6b7785; }
    .pt-mo-day--today .pt-mo-nr { color: var(--op-accent-blue); font-weight: 700; }
    .pt-mo-more { font-size: .62rem; color: var(--op-accent-blue); cursor: pointer; padding: 0 4px; }
    .pt-sidebar { width: 160px; min-width: 160px; flex-shrink: 0; border-right: 2px solid #dee2e6; background: #f8f9fa; position: sticky; left: 0; z-index: 5; }
    .pt-sidebar-header { height: 48px; border-bottom: 2px solid #dee2e6; display: flex; align-items: center; padding: 0 10px; font-weight: 700; font-size: 12px; color: #6c757d; background: #f0f2f5; }
    .pt-ressource-row { height: 52px; border-bottom: 1px solid #e9ecef; display: flex; align-items: center; padding: 0 10px; gap: 8px; cursor: default; }
    .pt-ressource-row:hover { background: #e9ecef; }
    .pt-ressource-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; flex-shrink: 0; }
    .pt-ressource-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pt-ressource-sub  { font-size: 10px; color: #6c757d; }

    /* Zeitachse */
    .pt-timeline { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .pt-time-header { height: 48px; border-bottom: 2px solid #dee2e6; display: flex; position: sticky; top: 0; background: #f0f2f5; z-index: 4; }
    .pt-day-col { flex: 1; min-width: 120px; border-left: 1px solid #dee2e6; padding: 4px 4px 2px; font-size: 11px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .pt-day-col.heute { background: #e8f0fe; }
    .pt-day-col.heute .pt-day-nr { background: #0d6efd; color: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
    .pt-day-name { font-size: 10px; color: #6c757d; text-transform: uppercase; font-weight: 600; }
    .pt-day-nr { font-size: 16px; font-weight: 700; color: #212529; }

    /* Ressource-Zeilen-Körper */
    .pt-body { display: flex; flex-direction: column; }
    .pt-row { display: flex; height: 52px; border-bottom: 1px solid #e9ecef; }
    .pt-cell { flex: 1; min-width: 120px; border-left: 1px solid #dee2e6; position: relative; padding: 2px; }
    .pt-cell.heute { background: rgba(13,110,253,.04); }
    .pt-cell.wochenende { background: #fafafa; }
    .pt-cell:hover { background: rgba(13,110,253,.06); cursor: pointer; }

    /* Termin-Balken */
    .pt-termin { position: absolute; left: 3px; right: 3px; top: 4px; bottom: 4px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; padding: 2px 5px; overflow: hidden; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.2); display: flex; flex-direction: column; justify-content: center; transition: opacity .15s, transform .1s; }
    .pt-termin:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.25); z-index: 10; }
    .pt-termin-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pt-termin-meta  { font-size: 9px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pt-termin-zeit  { font-size: 9px; opacity: .75; }

    /* Tag-Ansicht (Stundengitter) */
    .pt-tag-grid { display: flex; flex: 1; }
    .pt-tag-stunden { width: 50px; flex-shrink: 0; border-right: 1px solid #dee2e6; position: relative; background: #f8f9fa; }
    .pt-tag-stunde-label { position: absolute; right: 6px; font-size: 10px; color: #aaa; transform: translateY(-50%); white-space: nowrap; }
    .pt-tag-stunde-linie { position: absolute; left: 0; right: 0; border-top: 1px solid #e9ecef; }
    .pt-tag-stunde-linie.voll { border-color: #dee2e6; }
    .pt-tag-inhalt { flex: 1; position: relative; overflow: hidden; }
    .pt-tag-termin { position: absolute; left: 4px; right: 4px; border-radius: 5px; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 6px; cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.2); overflow: hidden; transition: opacity .1s; }
    .pt-tag-termin:hover { opacity: .88; z-index: 10; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
    .pt-jetzt-linie { position: absolute; left: 0; right: 0; border-top: 2px solid #dc3545; z-index: 8; pointer-events: none; }
    .pt-jetzt-linie::before { content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #dc3545; }

    /* Legende */
    .pt-legende { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; padding: 6px 0; border-top: 1px solid #dee2e6; margin-top: 8px; }
    .pt-legende-item { display: flex; align-items: center; gap: 4px; }
    .pt-legende-dot { width: 10px; height: 10px; border-radius: 2px; }

    /* Termin-Detail-Popup */
    .pt-popup { position: fixed; z-index: 2000; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.15); min-width: 240px; max-width: 320px; padding: 14px; }
    .pt-popup-close { position: absolute; top: 8px; right: 10px; cursor: pointer; color: #6c757d; font-size: 18px; line-height: 1; }
    .pt-popup-close:hover { color: #212529; }
    /* Mobile Optimierung */
    @media (max-width: 768px) {
      .crm-main { padding: 10px; }
      .table-container { overflow-x: auto; }
      .table { font-size: 13px; }
      .card-body { padding: 0.75rem; }
      .btn-sm { font-size: 12px; padding: 2px 6px; }
      .detail-container { padding: 10px; }
      /* Touch-freundliche Buttons */
      .btn { min-height: 38px; }
      /* Tabellen auf Mobile scrollbar */
      #vorgaengeTableContainer, #kundenTableContainer, 
      #fahrzeugeTableContainer, #rechnungenTableContainer,
      #lagerTableContainer { overflow-x: auto; }
      /* Kalkulation auf Mobile */
      #kalk-tabelle th, #kalk-tabelle td { white-space: nowrap; }
      /* Detail-Ansicht Cards */
      .col-md-6 { margin-bottom: 0.75rem; }
      /* Sidebar ausgeblendet auf Mobile - Hamburger-Menü */
      #crmSidebar { z-index: 1050; }
    }

    @media (max-width: 576px) {
      h4 { font-size: 1.1rem; }
      h5 { font-size: 1rem; }
      .fs-5 { font-size: 0.95rem !important; }
      .badge { font-size: 0.7rem; }
    }

    
    /* Toast Notification */
    #toastContainer { position: fixed; bottom: 20px; right: 20px; z-index: 9999; }
    .toast-msg { background: #333; color: #fff; padding: 10px 18px; border-radius: 8px; 
                 margin-top: 8px; font-size: 14px; opacity: 0; transition: opacity 0.3s; min-width: 200px; }
    .toast-msg.show { opacity: 1; }
    .toast-msg.bg-success { background: #198754; }
    .toast-msg.bg-danger  { background: #dc3545; }
    .toast-msg.bg-warning { background: #ffc107; color: #000; }

        .kalk-tage-container { flex: 1; }
    .kalk-tag-col { position: relative; border-left: 1px solid #dee2e6; background: #fff; }
    .kalk-tag-col.heute { background: #f0f7ff; }
    .kalk-tag-header { text-align: center; font-size: 11px; font-weight: 600; padding: 4px; background: #f8f9fa; border-bottom: 1px solid #dee2e6; height: 28px; }
    .kalk-tag-header.bg-primary { color: #fff; }
    .kalk-stunde-linie { position: absolute; left: 0; right: 0; border-top: 1px solid #f0f0f0; pointer-events: none; }
    .kalk-block { position: absolute; left: 2px; right: 2px; border-radius: 4px; font-size: 11px; overflow: hidden; cursor: pointer; z-index: 2; }
    .kalk-pause { background: #e9ecef !important; color: #666; padding: 2px 4px; cursor: default; z-index: 1; }
    .kalk-urlaub { background: repeating-linear-gradient(45deg,#ffe0e0,#ffe0e0 5px,#fff 5px,#fff 10px) !important; color: #c00; padding: 4px; z-index: 1; cursor: default; }
    .kalk-termin { color: #fff; padding: 3px 5px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
    .kalk-termin-zeit { font-size: 10px; opacity: .85; }
    .kalk-termin-titel { font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kalk-termin-kunde { font-size: 10px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kalk-monat { display: flex; flex-direction: column; }
    .kalk-monat-header { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; font-weight: 600; font-size: 12px; background: #343a40; color: #fff; padding: 4px 0; }
    .kalk-monat-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 1px; background: #dee2e6; }
    .kalk-monat-tag { background: #fff; min-height: 80px; padding: 4px; cursor: pointer; }
    .kalk-monat-tag:hover { background: #f8f9fa; }
    .kalk-monat-tag.heute { background: #e7f0ff; }
    .kalk-monat-tag.urlaub { background: #ffe0e0; }
    .kalk-monat-tag.leer { background: #f8f9fa; }
    .kalk-monat-tag-nr { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 12px; font-weight: 600; margin-bottom: 2px; }
    .kalk-monat-chip { font-size: 10px; color: #fff; border-radius: 3px; padding: 1px 4px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .kalk-monat-mehr { font-size: 10px; color: #888; }
    .kalk-jahr { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; padding: 8px; }
    @media(max-width:768px){ .kalk-jahr { grid-template-columns: repeat(2,1fr); } }
    .kalk-jahr-monat { border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; }
    .kalk-jahr-monat-titel { background: #343a40; color: #fff; text-align: center; padding: 4px; font-weight: 600; font-size: 12px; cursor: pointer; }
    .kalk-jahr-mini-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 1px; padding: 4px; }
    .kalk-jahr-wt { font-size: 9px; color: #888; text-align: center; font-weight: 600; }
    .kalk-jahr-tag { font-size: 10px; text-align: center; padding: 1px; cursor: pointer; border-radius: 3px; }
    .kalk-jahr-tag:hover { background: #e9ecef; }
    .kalk-jahr-tag.heute { background: #0d6efd; color: #fff; border-radius: 50%; }
    .kalk-jahr-tag.hat-termin { background: #cfe2ff; border-radius: 3px; }
    .kalk-jahr-tag.urlaub { background: #ffe0e0; }

    .unterlagen-dropzone { transition: background 0.2s; }
    .unterlagen-dropzone.dragover { background: #e8f4ff !important; border-color: #0d6efd !important; }
    .unterlagen-dropzone:hover { background: #f8f9fa; }
  
    /* Globale Suche – verbessertes Dropdown */
    #globalSearchDropdown { font-size:13px; }
    #globalSearchDropdown .search-group-header { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#6c757d; padding:8px 14px 4px; background:#f8f9fa; border-bottom:1px solid #f0f0f0; }
    #globalSearchDropdown .search-item { padding:8px 14px; cursor:pointer; border-bottom:1px solid #f8f9fa; transition:background .12s; display:flex; align-items:center; gap:10px; }
    #globalSearchDropdown .search-item:hover { background:#e8f0fe; }
    #globalSearchDropdown .search-item-icon { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
    #globalSearchDropdown .search-item-main { font-weight:600; line-height:1.2; }
    #globalSearchDropdown .search-item-sub  { font-size:11px; color:#6c757d; }
    #globalSearchInput { box-shadow:none !important; border-color:#dee2e6; transition:border-color .2s; }
    #globalSearchInput:focus { border-color:#0d6efd; }

    /* Welle UI-2 Politur: Plain-Link (tel/mailto klickbar, NULL optische Aenderung) */
    .op-plainlink, .op-plainlink:hover, .op-plainlink:focus { color: inherit; text-decoration: none; }
    /* Kompakt-Modifier NUR fuer eingebettete Sub-Listen (Haupt-Kacheln bleiben roomy) */
    .op-tile-compact .op-avatar { width: 30px; height: 30px; font-size: .78rem; }
    .op-tile-compact .card-body { padding-top: .4rem; padding-bottom: .4rem; }
    .op-tile-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    /* Extra-kompakt NUR Aufgaben-Kacheln: kleinere Schrift, damit alles in eine Zeile passt */
    .op-tile-xs .op-tile-line { font-size: .8rem; }
    /* Aufgaben-Kacheln breiter: weniger Karten-Gutter (nur Aufgaben-Card-Body) + straffes Innen-Padding */
    .op-aufgaben-body { padding: .5rem !important; }
    .op-tile-xs .card-body { padding: .3rem .55rem; }
    /* Einheitlicher Listen-Kachel-Hover = Sidebar-Nav-Hover (#a9cff5). Background
       sitzt hinter dem Inhalt -> inline border-left-Streifen (Dringlichkeit/
       Mahnstufe) bleibt sichtbar. Eine geteilte Regel ueber alle Kachel-Varianten. */
    #kundenTableContainer .card, #fahrzeugeTableContainer .card, #fuhrparkTableContainer .card,
    #lieferantenTableContainer .card, #versicherungenTableContainer .card, #vorgaengeTableContainer .card,
    #rechnungenTableContainer .card, .op-tile-compact .card { transition: background-color .12s ease; }
    /* Hover NUR auf klickbaren Bodies: inerte Kacheln tragen .op-tile-inert (kein Hover = keine Klick-Affordanz) */
    #kundenTableContainer .card:hover:not(.op-tile-inert), #fahrzeugeTableContainer .card:hover:not(.op-tile-inert), #fuhrparkTableContainer .card:hover:not(.op-tile-inert),
    #lieferantenTableContainer .card:hover:not(.op-tile-inert), #versicherungenTableContainer .card:hover:not(.op-tile-inert), #vorgaengeTableContainer .card:hover:not(.op-tile-inert),
    #rechnungenTableContainer .card:hover:not(.op-tile-inert), .op-tile-compact .card:hover:not(.op-tile-inert) { background-color: #a9cff5; }

/* IA-U2: Pro-MA-Drilldown (Inline-Expand der MA-Akte). Chevron dreht beim Aufklappen,
   Panel blendet weich ein. #maDrilldownRow ist ein col-12, bricht unter die Karte um. */
.ma-chevron { transition: transform .15s ease; }
.ma-card-col .ma-chevron.rot { transform: rotate(180deg); }
.ma-drilldown-card { animation: maDrilldownIn .15s ease; }
@keyframes maDrilldownIn { from { opacity: .35; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Strang 4 W4a: „läuft"-Blink fuer die laufende Vorgangszeit (Werkstatt-Shell + ggf. App). */
@keyframes wsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.ws-laeuft {
  background: var(--op-accent-green, #17a44a); color: #fff;
  animation: wsPulse 1.2s ease-in-out infinite;
}