/* =======================================================================
   MEDVICE Design System -- medvice.css v2.2 (v2.2: Werkzeugleiste, data-medvice-werkzeugleiste=v1)
   -----------------------------------------------------------------------
   Zentrales Stylesheet fuer ALLE MEDVICE Business OS Tools.
   Exakt abgestimmt auf den MEDVICE Design Guide v1.0.

   # EINBINDUNG pro Tool:
       <link rel="stylesheet" href="/medvice.css">
       <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">

   # MANDANTEN-THEMING (White-Label):
     Pro Kunde koennen Farben + Logo ueberschrieben werden, ohne dass ein
     einziges Tool angepasst werden muss. Einfach nach dem <link>-Tag
     einen Style-Block mit Token-Overrides einfuegen:

       <style>
         :root {
           --pg:    #1a5490;
           --pg-dk: #0d3a6b;
           --lg:    #4a90e2;
         }
       </style>

     (Kundenfarbe statt MEDVICE-Gruen)

     Das Logo wird via SVG-Datei pro Mandant geliefert.

   # STRUKTUR dieser Datei:
       1. Design Tokens (CSS-Variablen)
       2. Reset & Basis
       3. Typografie-Klassen
       4. Topbar & Brand-Lockup
       5. Layout & Container
       6. Buttons
       7. Formulare
       8. Karten (Content, KPI, Modul-Kachel)
       9. Tabellen
      10. Badges & Status
      11. Drawer, Modal, Toast
      12. Ikonografie-Regeln
      13. Utilities
      14. Print

   # GOLDENE REGEL:
     Nichts tool-spezifisches landet hier. Alles was mehrfach in Tools
     vorkommt, wird hier zentralisiert. Tools duerfen nur klassenspezifische
     Overrides fuer ihre eigenen Spezialfaelle definieren.

   # CHANGELOG
     v2.0 (April 2026): Neu erstellt, exakt nach Design Guide.
                        Logo-Farben angeglichen (#007849 / #61b770).
                        MED/VICE-Farbcodierung.
                        Font-Gewicht 500 eingebunden.
                        Body font-size auf 14px.
                        Alle Komponenten-Klassen aus Guide uebernommen.
     v2.1 (10.06.2026): Tabellen-Erweiterung (data-medvice-table-v21):
                        th/td.num (rechtsbuendig, tabular-nums),
                        table.data.sticky (Sticky-Header, mit .table-wrap),
                        table.data.zebra (opt-in), tfoot-Summenzeile.
                        Kanonische Gruentoene bestaetigt: #007849 / #61b770
                        (Entscheid 10.06.26, Guide-Werte #007749/#56C271 sind Alt).
   ======================================================================= */

/* =======================================================================
   1. DESIGN TOKENS
   ======================================================================= */
:root {
  /* --- FARBEN -- Primaerpalette ----------------------------------------- */
  --pg:       #007849;           /* Primary Green (MEDVICE-Logo dunkel)  */
  --pg-dk:    #005c38;           /* Primary Green dunkel (Button-Hover)  */
  --lg:       #61b770;           /* Light Green (MEDVICE-Logo hell)      */

  /* --- FARBEN -- Neutrale ---------------------------------------------- */
  --dk:       #2d2926;           /* Text dunkel (Haupttext)              */
  --gr:       #939597;           /* Grau (Labels, Sekundaertext)          */
  --gr-lt:    #c7c9c3;           /* Grau hell (Scroll, Placeholder)      */
  --wh:       #ffffff;           /* Weiss (Karten, Vordergrund)           */
  --bg:       #f5f6f4;           /* Body-Hintergrund (nicht reinweiss)    */
  --brd:      #e0e2de;           /* Standard-Border                      */
  --brd-lt:   #eceee9;           /* Feine Trenner (Zeilen, Sektionen)    */
  --row:      #f0f4f1;           /* Tabellen-Row-Hover (leicht gruen)     */
  --inp:      #eef7f2;           /* Input-aktiv / Login-Gradient         */

  /* --- FARBEN -- Status ------------------------------------------------ */
  --red:      #c0392b;           /* Error / Danger / Loeschen             */
  --red-bg:   #fdecea;           /* Error-Hintergrund fuer Badges etc.    */
  --warn:     #f0c040;           /* Warning (soft)                       */
  --warnbg:   #fff8e1;           /* Warning-Hintergrund                  */
  --warntxt:  #7a5a00;           /* Warning-Text (dunkelgelb)            */
  --okbg:     #e8f5ee;           /* Success-Hintergrund                  */
  --info:     #3949ab;           /* Info (Blau)                          */
  --infobg:   #e3e8ff;           /* Info-Hintergrund                     */
  --caution:  #c46a12;           /* Caution (Orange, fuer Audit/Q-weise)  */
  --cautionbg:#fff3e0;           /* Caution-Hintergrund                  */

  /* --- TYPOGRAFIE ----------------------------------------------------- */
  --font:     'Montserrat', sans-serif;
  --fs-eyebrow:10px;             /* KPI-Labels, Eyebrow-Texte (UPPERCASE)*/
  --fs-label: 11px;              /* Form-Labels, Badges                  */
  --fs-caption:12px;             /* Captions, Hinweise                   */
  --fs-body:  14px;              /* Body (Haupt-Fliesstext)               */
  --fs-strong:15px;              /* Betonter Body, Kachel-Titel          */
  --fs-h3:    18px;              /* H3, Modal-Titel                      */
  --fs-h2:    24px;              /* H2, Seiten-Titel                     */
  --fs-h1:    32px;              /* H1, Hero-Titel                       */

  /* --- RADIEN --------------------------------------------------------- */
  --r-sm:     6px;               /* Buttons, Icon-Buttons, Chips         */
  --r-md:     10px;              /* Karten, Inputs, Tabellen             */
  --r-lg:     16px;              /* Modals, Login-Card, Hero             */
  --r-pill:   999px;             /* Pills, Counter-Badges                */

  /* --- SCHATTEN ------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(45,41,38,.04);
  --shadow-md: 0 4px 12px rgba(0,120,73,.10);
  --shadow-lg: 0 8px 24px rgba(0,120,73,.15);

  /* --- LAYOUT --------------------------------------------------------- */
  --topbar-h: 60px;              /* Standard-Topbar-Hoehe                 */
  --main-max: 1400px;            /* Max. Content-Breite                  */
  --t-fast:   .15s;              /* Standard-Transition                  */

  /* --- SPACING (Vielfache von 4) -------------------------------------- */
  --sp-xs:    4px;
  --sp-sm:    8px;
  --sp-md:    12px;
  --sp-lg:    16px;
  --sp-xl:    24px;
  --sp-2xl:   32px;
  --sp-3xl:   48px;
}

/* =======================================================================
   2. RESET & BASIS
   ======================================================================= */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html,body { height:100% }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--dk);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit }
input, select, textarea { font-family:inherit; font-size:inherit; color:inherit }

a { color: var(--pg); text-decoration: none }
a:hover { text-decoration: underline }

.hidden { display: none !important }

/* --- Scrollbar (Webkit) --------------------------------------------- */
::-webkit-scrollbar { width:10px; height:10px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: var(--gr-lt); border-radius:5px }
::-webkit-scrollbar-thumb:hover { background: var(--gr) }

/* =======================================================================
   3. TYPOGRAFIE-KLASSEN
   ======================================================================= */
.h1  { font-size: var(--fs-h1);  font-weight:800; letter-spacing:-.01em; line-height:1.1 }
.h2  { font-size: var(--fs-h2);  font-weight:800; letter-spacing:-.01em; line-height:1.2 }
.h3  { font-size: var(--fs-h3);  font-weight:800; line-height:1.3 }
.strong-body { font-size: var(--fs-strong); font-weight:700 }
.caption { font-size: var(--fs-caption); color: var(--gr); line-height:1.5 }
.label   { font-size: var(--fs-label); font-weight:700; color: var(--gr); text-transform:uppercase; letter-spacing:.05em }
.eyebrow { font-size: var(--fs-eyebrow); font-weight:800; color: var(--gr); text-transform:uppercase; letter-spacing:.12em }
.muted   { color: var(--gr) }
.tabular { font-variant-numeric: tabular-nums }

/* =======================================================================
   4. TOPBAR & BRAND-LOCKUP
   =======================================================================
   Die Topbar ist in allen MEDVICE-Tools identisch. Unterschiede:
     -- Dashboard: mit Settings-Icon, ohne Rueckweg
     -- Tool:      ohne Settings-Icon, mit Rueckweg-Button
   ======================================================================= */
.topbar {
  background: var(--wh);
  border-bottom: 1px solid var(--brd);
  box-shadow: var(--shadow-sm);
  /* data-medvice-dashboard-abstaende=v1: rechts mehr Luft, damit Name und
     Abmelden-Knopf nicht am Fensterrand kleben */
  padding: 0 var(--sp-2xl) 0 var(--sp-xl);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.topbar .brand-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.topbar .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* Wortmarke MEDVICE -- MUSS MED/VICE-farbcodiert sein! */
.topbar .brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.15;
}
.topbar .brand-name .med  { color: var(--pg) }   /* MED  = Primary Green */
.topbar .brand-name .vice { color: var(--lg) }   /* VICE = Light Green   */

/* ---------------------------------------------------------------------
   SUBTITLE UNIVERSELLE AUTO-JUSTIFY-REGEL
   ---------------------------------------------------------------------
   Regel: "Ist der Subtitle kuerzer als MEDVICE, wird er auf MEDVICE-Breite
           gestreckt. Ist er laenger, bleibt er auf natuerlicher Breite."
   
   Umsetzung: medvice-brand.js berechnet beim Seitenladen automatisch das
   noetige letter-spacing und setzt es per inline-style auf das
   .brand-sub-Element. Keine CSS-Modifier pro Subtitle noetig.
   
   CSS-Seite: definiert NUR die Basis-Typografie. Kein letter-spacing,
   keine margin-Tricks. Das JS uebernimmt die Bruendigkeit vollautomatisch.
   
   Vorteil: Fuer JEDEN Subtitle-Text richtig, ohne manuelles Justieren --
   auch bei zukuenftigen Tool-Namen.
   --------------------------------------------------------------------- */
.topbar .brand-sub {
  font-size: 10px;
  font-weight: 700;
  color: var(--gr);
  text-transform: uppercase;
  margin-top: 3px;
  /* letter-spacing wird per JS gesetzt (medvice-brand.js) */
}

/* Rueckweg-Button (Tool-Topbar) */
.topbar .back-btn {
  margin-left: var(--sp-lg);
  padding: 7px 13px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--dk);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  transition: background var(--t-fast);
}
.topbar .back-btn:hover {
  background: var(--brd-lt);
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   TOPBAR BACK-BUTTON v3 (data-medvice-topbar-backbtn=v1, 11.06.26)
   Bisher definierte jedes Tool .topbar-back-btn lokal (Duplikat,
   MEDVICE_Bericht.html hatte gar keine Definition -> kaputte Topbar).
   Ab jetzt: Basis-Styles zentral. Lokale wertgleiche Kopien in
   Alt-Tools ueberschreiben harmlos.
   --------------------------------------------------------------------- */
.topbar .topbar-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  height: 34px;
  background: transparent;
  border: 1px solid var(--brd);
  border-radius: var(--r-sm);
  color: var(--gr);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s;
  margin-left: 16px;
  margin-right: auto;
}
.topbar .topbar-back-btn:hover {
  background: var(--bg);
  color: var(--pg);
  border-color: var(--pg);
}
.topbar .topbar-back-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Login-Brand-Lockup (22px) ----
   Verwendet im Login-Screen (Dashboard) und ueberall wo das grosse
   Brand-Lockup gezeigt wird.
   
   Die Brand-Unit selbst ist LINKSBUENDIG (wie in der Topbar).
   Horizontale Zentrierung erfolgt ueber den Parent-Container (.login-logo
   mit text-align:center, und display:inline-block hier).
   Dadurch verhaelt sich der Subtitle exakt wie im Topbar-Fall.
   
   letter-spacing wird per medvice-brand.js automatisch berechnet
   (nur wenn Subtitle kuerzer als MEDVICE). */
.login-brand {
  display: inline-flex;          /* inline, damit Parent per text-align zentrieren kann */
  flex-direction: column;
  gap: 2px;
  line-height: 1;
  /* KEIN align-items:center -- linksbuendig wie Topbar */
  text-align: left;
}
.login-brand .name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.3px;
}
.login-brand .name .med  { color: var(--pg) }
.login-brand .name .vice { color: var(--lg) }
.login-brand .sub {
  font-size: 10px;
  font-weight: 700;
  color: var(--gr);
  text-transform: uppercase;
  margin-top: 4px;
  /* letter-spacing wird per JS gesetzt (medvice-brand.js) */
}

/* Actions (rechte Seite der Topbar) */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);   /* data-medvice-dashboard-abstaende=v1 */
}

/* Icon-Button in der Topbar (z.B. Einstellungen) */
.tb-icon-btn {
  background: var(--bg);
  border-radius: var(--r-sm);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gr);
  transition: all var(--t-fast);
}
.tb-icon-btn:hover {
  background: var(--okbg);
  color: var(--pg);
}
.tb-icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* User-Chip (Topbar) -- vereinheitlicht Dashboard + alle Tools */
.user-info,
.user-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 4px 12px 4px 4px;
  border-radius: 20px;
  transition: background var(--t-fast);
}
.user-info:hover,
.user-chip:hover { background: var(--bg) }

.user-avatar,
.user-info .avatar,
.user-chip .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pg);
  color: var(--wh);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.user-details,
.user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.user-name,
.uname {
  font-size: 13px;
  font-weight: 700;
  color: var(--dk);
}

/* Rolle einheitlich gruen (Dashboard-Style); Aliase fuer Altbestand */
.user-role,
.urole,
.user-role-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--pg);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 1px;
}

/* Topbar-Button (Abmelden / sonstige Topbar-Aktionen) -- Dashboard-Style. */
/* .logout-btn ist Alias fuer Altbestand. */
.tb-btn,
.logout-btn {
  background: transparent;
  border: 1px solid var(--brd);
  color: var(--dk);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--t-fast);
  cursor: pointer;
  font-family: inherit;
}
.tb-btn:hover,
.logout-btn:hover {
  border-color: var(--pg);
  color: var(--pg);
  background: var(--inp);
}
.tb-btn svg,
.logout-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =======================================================================
   5. LAYOUT & CONTAINER
   ======================================================================= */
.main {
  max-width: var(--main-max);
  margin: 0 auto;
  padding: var(--sp-xl);
}

.page-header {
  margin-bottom: var(--sp-2xl);
}
.page-header h1 {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--dk);
  letter-spacing: -.01em;
  margin-bottom: var(--sp-sm);
}
.page-header .lead {
  font-size: var(--fs-body);
  color: var(--gr);
  max-width: 720px;
  line-height: 1.6;
}

/* Flex-Hilfen */
.flex       { display: flex }
.flex-col   { display: flex; flex-direction: column }
.flex-center{ display: flex; align-items: center; justify-content: center }
.items-center { align-items: center }
.justify-between { justify-content: space-between }
.gap-xs { gap: var(--sp-xs) }
.gap-sm { gap: var(--sp-sm) }
.gap-md { gap: var(--sp-md) }
.gap-lg { gap: var(--sp-lg) }
.gap-xl { gap: var(--sp-xl) }

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg) }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg) }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg) }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-lg) }

/* =======================================================================
   6. BUTTONS
   ======================================================================= */
.btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t-fast);
  cursor: pointer;
  font-family: inherit;
  border: none;
  line-height: 1.4;
  white-space: nowrap;
}
.btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.btn-primary   { background: var(--pg);  color: var(--wh); }
.btn-primary:hover { background: var(--pg-dk) }

.btn-secondary { background: var(--bg);  color: var(--dk); border: 1px solid var(--brd); }
.btn-secondary:hover { background: var(--brd-lt) }

.btn-danger    { background: var(--red); color: var(--wh); }
.btn-danger:hover { filter: brightness(.92) }

.btn-ghost     { background: transparent; color: var(--gr); }
.btn-ghost:hover { background: var(--brd-lt); color: var(--dk) }

.btn-sm { padding: 6px 12px; font-size: 12px }
.btn-lg { padding: 14px 28px; font-size: 15px }

.btn:disabled,
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* Icon-only Button */
.btn-icon {
  padding: 8px;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--gr);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.btn-icon:hover { background: var(--brd-lt); color: var(--dk) }
.btn-icon svg { width: 16px; height: 16px }

/* =======================================================================
   7. FORMULARE
   ======================================================================= */
.form-group,
.fld {
  margin-bottom: var(--sp-lg);
}

.form-group label,
.fld label,
label.form-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--gr);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 5px;
}

.form-input,
input[type="text"].form,
input[type="email"].form,
input[type="password"].form,
input[type="search"].form,
input[type="date"].form,
input[type="number"].form,
input[type="tel"].form,
textarea.form,
select.form {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--brd);
  border-radius: 7px;
  background: var(--wh);
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--dk);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input:focus,
input.form:focus,
textarea.form:focus,
select.form:focus {
  outline: none;
  border-color: var(--pg);
  box-shadow: 0 0 0 3px rgba(0,120,73,.12);
}
textarea.form { resize: vertical; min-height: 80px }

.form-input[readonly],
input.form[readonly] {
  background: var(--bg);
  cursor: default;
}

.form-input:disabled,
input.form:disabled,
select.form:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Fehler-Zustand */
.form-input.error,
input.form.error {
  border-color: var(--red);
}
.form-error {
  font-size: var(--fs-caption);
  color: var(--red);
  margin-top: 4px;
}

/* Help-Text unter Input */
.form-help {
  display: block;
  font-size: var(--fs-caption);
  color: var(--gr);
  margin-top: 4px;
}

/* Checkbox / Radio */
.chk,
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--fs-body);
  color: var(--dk);
  font-weight: 500;
  cursor: pointer;
}
.chk input[type="checkbox"],
.chk input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--pg);
}

/* Form-Sektionen */
.form-section {
  margin-bottom: var(--sp-2xl);
}
.form-section-title {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  color: var(--gr);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: var(--sp-md);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--brd-lt);
}

/* =======================================================================
   8. KARTEN (Content, KPI, Modul-Kachel)
   ======================================================================= */

/* Generische Content-Karte */
.card {
  background: var(--wh);
  border: 1px solid var(--brd);
  border-radius: var(--r-md);
  padding: var(--sp-xl);
  box-shadow: var(--shadow-sm);
}
.card-ghost {
  background: transparent;
  border: 1px dashed var(--brd);
  border-radius: var(--r-md);
  padding: var(--sp-xl);
}
.card-header {
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--brd-lt);
}
.card-title {
  font-size: var(--fs-strong);
  font-weight: 800;
  color: var(--dk);
}

/* KPI-Karte (Kennzahl) */
.kpi-card {
  background: var(--wh);
  border-radius: var(--r-md);
  padding: var(--sp-xl);
  border: 1px solid var(--brd);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--pg);
}
.kpi-value {
  font-size: 34px;
  font-weight: 800;
  color: var(--dk);
  line-height: 1;
  margin-bottom: var(--sp-md);
}
.kpi-label {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  color: var(--gr);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 6px;
}
.kpi-sub {
  font-size: var(--fs-label);
  color: var(--gr);
}

/* Modul-Kachel (Dashboard) */
.mod-card {
  background: var(--wh);
  border-radius: var(--r-md);
  border: 1px solid var(--brd);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-xl);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.mod-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--pg);
  transform-origin: left;
  transform: scaleX(.3);
  transition: transform .25s;
}
.mod-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.mod-card:hover::before { transform: scaleX(1) }

.mod-card .icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--okbg);
  color: var(--pg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-md);
}
.mod-card .icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mod-card .mod-name {
  font-size: var(--fs-strong);
  font-weight: 800;
  color: var(--dk);
  margin-bottom: 4px;
}
.mod-card .mod-desc {
  font-size: var(--fs-caption);
  color: var(--gr);
  line-height: 1.45;
}
.mod-card.coming-soon {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

/* =======================================================================
   9. TABELLEN
   ======================================================================= */
table.data {
  width: 100%;
  background: var(--wh);
  border: 1px solid var(--brd);
  border-radius: var(--r-md);
  overflow: hidden;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
table.data th {
  background: var(--bg);
  text-align: left;
  padding: var(--sp-md) 14px;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--gr);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--brd);
  white-space: nowrap;
}
table.data td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--brd-lt);
  vertical-align: middle;
}
table.data tr:last-child td { border-bottom: none }
table.data tr:hover { background: var(--row) }
table.data tr.clickable { cursor: pointer }
table.data tr.inactive td { color: var(--gr) }

/* Kompakte Variante */
table.data.compact td,
table.data.compact th { padding: 7px 12px }

/* =======================================================================
  10. BADGES & STATUS
   ======================================================================= */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.badge-ok      { background: var(--okbg);      color: var(--pg) }
.badge-warn    { background: var(--cautionbg); color: var(--caution) }
.badge-info    { background: var(--infobg);    color: var(--info) }
.badge-err     { background: var(--red-bg);    color: var(--red) }
.badge-neutral { background: var(--brd-lt);    color: var(--gr) }

/* Permission-Badges (mit Emoji-Prefix) */
.badge-perm-finanz         { background: var(--okbg);      color: var(--pg) }
.badge-perm-patientendaten { background: var(--infobg);    color: var(--info) }
.badge-perm-audit          { background: var(--cautionbg); color: var(--caution) }

/* Pill (fuer Tabs) */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  font-weight: 700;
  background: var(--bg);
  color: var(--dk);
  border: 1px solid var(--brd);
  cursor: pointer;
  transition: all var(--t-fast);
}
.pill:hover { background: var(--brd-lt) }
.pill.active {
  background: var(--pg);
  color: var(--wh);
  border-color: var(--pg);
}

/* Underline-Tabs (View-Switch, volle Breite) — kanonisch, Ref: Zertifikate */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--brd);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}
.tab {
  flex: 1;
  padding: 12px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gr);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--t-fast);
  font-family: inherit;
}
.tab:hover { color: var(--dk); background: var(--wh); }
.tab.active {
  color: var(--pg);
  background: var(--wh);
  border-bottom-color: var(--pg);
}

/* Segmented Control (grauer Track) — kanonisch, Ref: PHS rtab */
.segbar {
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,.06);
  border-radius: var(--r-md);
  padding: 2px;
}
.seg-item {
  flex: 1;
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--gr);
  cursor: pointer;
  transition: all var(--t-fast);
}
.seg-item:hover { color: var(--dk); }
.seg-item.active {
  background: var(--wh);
  color: var(--pg);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* =======================================================================
  11. DRAWER, MODAL, TOAST
   ======================================================================= */

/* Drawer (Slide-In von rechts) */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(45,41,38,.45);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 720px;
  background: var(--wh);
  box-shadow: var(--shadow-lg);
  z-index: 91;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0) }

.drawer-header {
  padding: var(--sp-lg) var(--sp-xl);
  border-bottom: 1px solid var(--brd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.drawer-title {
  font-size: var(--fs-strong);
  font-weight: 800;
  color: var(--dk);
}
.drawer-body {
  padding: var(--sp-xl);
  overflow-y: auto;
  flex: 1;
}
.drawer-footer {
  padding: var(--sp-md) var(--sp-xl);
  border-top: 1px solid var(--brd);
  display: flex;
  gap: var(--sp-md);
  justify-content: flex-end;
  background: var(--bg);
  flex-shrink: 0;
}

/* Modal (zentriert) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(45,41,38,.45);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
}
.modal-backdrop.open { display: flex }

.modal {
  background: var(--wh);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
.modal-header {
  padding: var(--sp-xl) var(--sp-xl) var(--sp-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--dk);
}
.modal-body {
  padding: 0 var(--sp-xl) var(--sp-xl);
  overflow-y: auto;
}
.modal-footer {
  padding: var(--sp-md) var(--sp-xl);
  border-top: 1px solid var(--brd);
  display: flex;
  gap: var(--sp-md);
  justify-content: flex-end;
}
.modal-footer.wide { justify-content: space-between }

.modal.wide   { max-width: 720px }
.modal.xwide  { max-width: 960px }

/* Toast */
.toast-container {
  position: fixed;
  left: 50%;
  bottom: var(--sp-xl);
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  pointer-events: none;
}
.toast {
  padding: var(--sp-md) var(--sp-xl);
  background: var(--dk);
  color: var(--wh);
  border-radius: 8px;
  font-size: var(--fs-body);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s;
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateY(0) }
.toast.ok   { background: var(--pg) }
.toast.err  { background: var(--red) }
.toast.warn { background: var(--warn); color: var(--warntxt) }

/* =======================================================================
  12. IKONOGRAFIE
   ======================================================================= */

/* Standard-Icon (inline SVG in Button, Badge, Kachel) */
.icon-inline svg,
svg.icon-inline {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* Modul-Kachel-Icon: duennerer Strich */
.icon-module svg,
svg.icon-module {
  stroke-width: 1.8;
}

/* =======================================================================
  13. UTILITIES
   ======================================================================= */
.text-center { text-align: center }
.text-right  { text-align: right }
.text-left   { text-align: left }

.text-dk { color: var(--dk) }
.text-gr { color: var(--gr) }
.text-pg { color: var(--pg) }
.text-red{ color: var(--red) }

.mt-0 { margin-top: 0 }
.mt-xs{ margin-top: var(--sp-xs) }
.mt-sm{ margin-top: var(--sp-sm) }
.mt-md{ margin-top: var(--sp-md) }
.mt-lg{ margin-top: var(--sp-lg) }
.mt-xl{ margin-top: var(--sp-xl) }

.mb-0 { margin-bottom: 0 }
.mb-xs{ margin-bottom: var(--sp-xs) }
.mb-sm{ margin-bottom: var(--sp-sm) }
.mb-md{ margin-bottom: var(--sp-md) }
.mb-lg{ margin-bottom: var(--sp-lg) }
.mb-xl{ margin-bottom: var(--sp-xl) }

.w-full { width: 100% }
.h-full { height: 100% }

/* Callout-Boxen */
.callout {
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-xl);
  margin: var(--sp-lg) 0;
  border-left: 4px solid;
  font-size: var(--fs-body);
}
.callout.info { background: var(--infobg);  border-color: var(--info);    color: #263079 }
.callout.warn { background: var(--warnbg);  border-color: var(--warn);    color: var(--warntxt) }
.callout.ok   { background: var(--okbg);    border-color: var(--pg);      color: #005028 }
.callout.err  { background: var(--red-bg);  border-color: var(--red);     color: #7a1f14 }

/* =======================================================================
  14. RESPONSIVE / MOBILE-ADAPTION
   -----------------------------------------------------------------------
   Zentraler Mobile-Adaption-Block fuer ALLE MEDVICE-Tools.
   
   Strategie: Desktop-First mit Mobile-Adaption.
   - Tools werden Desktop-First gebaut (Standard-Topbar, Cards, Tabellen)
   - Dieser Block adaptiert automatisch auf Tablet/Phone
   - Tools muessen NICHTS extra machen -- ausser zwei Opt-In-Patterns:
     (a) <table data-mobile-cards>     -- Tabelle wird auf Phone zu Cards
     (b) <td data-label="Spaltenname"> -- Label-Prefix in der Card-Ansicht
   
   Breakpoints:
     900px = Tablet portrait (Grid-Reduzierung)
     600px = Phone (Single-Column, Topbar-Reduzierung, Card-Pattern)
   ======================================================================= */

/* ─── Tablet portrait (≤900px) ────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr) }
  .grid-3 { grid-template-columns: 1fr 1fr }
  .grid-auto { grid-template-columns: 1fr 1fr }
  .modal.wide  { max-width: 95vw }
  .modal.xwide { max-width: 95vw }
}

/* ─── Phone (≤600px) ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* --- Topbar: Brand bleibt, Aktionen reduzieren auf Icons --- */
  .topbar { padding: 0 var(--sp-md) }
  .topbar .topbar-back-btn span,
  .topbar .back-btn span,
  .topbar .tb-btn span,
  .topbar .logout-btn span { display: none }
  .topbar .topbar-back-btn,
  .topbar .back-btn,
  .topbar .tb-btn,
  .topbar .logout-btn {
    padding: 8px 10px;
    min-width: 36px;
    justify-content: center;
  }
  .topbar .user-info .user-details,
  .topbar .user-chip .user-meta { display: none }
  .topbar .user-info,
  .topbar .user-chip { padding: 0 }
  .topbar .brand-name { font-size: 16px }
  .topbar-actions { gap: var(--sp-sm) }

  /* --- Layout --- */
  .main { padding: var(--sp-md) }
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr }
  .page-header h1 { font-size: var(--fs-h3) }

  /* --- Cards --- */
  .card { padding: var(--sp-lg) }
  .kpi-card { padding: var(--sp-lg) }
  .kpi-value { font-size: 26px }

  /* --- Forms: Tap-Target ≥44px, font-size ≥16px (iOS Zoom-Prevention) --- */
  .form-input,
  input[type="text"].form,
  input[type="email"].form,
  input[type="password"].form,
  input[type="search"].form,
  input[type="date"].form,
  input[type="number"].form,
  input[type="tel"].form,
  textarea.form,
  select.form {
    padding: 12px 14px;
    font-size: 16px;
    min-height: 44px;
  }
  textarea.form { min-height: 88px }

  .form-group,
  .fld { margin-bottom: var(--sp-md) }

  /* --- Buttons: Tap-Target --- */
  .btn { padding: 12px 18px; min-height: 44px; font-size: 14px }
  .btn-sm { padding: 10px 14px; min-height: 40px; font-size: 13px }
  .btn-lg { padding: 14px 22px; min-height: 48px; font-size: 15px }
  .btn-icon { width: 40px; height: 40px }

  .chk { padding: 4px 0 }
  .chk input[type="checkbox"],
  .chk input[type="radio"] { width: 20px; height: 20px }

  /* --- Tabellen: data-mobile-cards → Card-Pattern --- */
  table.data[data-mobile-cards] { display: block; border: none; background: transparent; box-shadow: none }
  table.data[data-mobile-cards] thead { display: none }
  table.data[data-mobile-cards] tbody { display: block }
  table.data[data-mobile-cards] tr {
    display: block;
    background: var(--wh);
    border: 1px solid var(--brd);
    border-radius: var(--r-md);
    padding: var(--sp-md);
    margin-bottom: var(--sp-sm);
    box-shadow: var(--shadow-sm);
  }
  table.data[data-mobile-cards] tr:hover { background: var(--wh) }
  table.data[data-mobile-cards] td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    gap: var(--sp-md);
  }
  table.data[data-mobile-cards] td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--gr);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
  }
  table.data[data-mobile-cards] td:empty,
  table.data[data-mobile-cards] td:not([data-label]) { display: none }

  /* Standard-Tabelle ohne mobile-cards: horizontal scrollbar */
  table.data:not([data-mobile-cards]) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* --- Drawer & Modal: Fullscreen --- */
  .drawer { max-width: 100% }
  .modal {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .modal-backdrop { padding: 0 }

  /* --- Filter-Pills horizontal scrollbar --- */
  .filter-pills,
  .pill-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-pills::-webkit-scrollbar,
  .pill-row::-webkit-scrollbar { display: none }
  .pill { white-space: nowrap; flex-shrink: 0 }

  /* --- Toast: weniger breit, naeher am Rand --- */
  .toast-container {
    left: var(--sp-md);
    right: var(--sp-md);
    transform: none;
    bottom: var(--sp-md);
  }
  .toast { width: 100%; text-align: center }
}

/* ─── sehr kleiner Phone (≤380px) ────────────────────────────────── */
@media (max-width: 380px) {
  .topbar .brand-name { font-size: 14px }
  .topbar .brand-icon { width: 28px; height: 28px }
  .topbar .brand-sub { font-size: 9px }
  .card, .kpi-card { padding: var(--sp-md) }
  .kpi-value { font-size: 22px }
}

/* =======================================================================
  15. PRINT
   ======================================================================= */
@media print {
  .topbar,
  .drawer,
  .modal-backdrop,
  .toast-container,
  .btn,
  .no-print { display: none !important }

  body {
    background: var(--wh);
    color: #000;
    font-size: 11pt;
  }

  .card, .kpi-card, .mod-card {
    box-shadow: none;
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }

  table.data { page-break-inside: avoid }
}

/* =======================================================================
   9b. TABELLEN-ERWEITERUNG v2.1 (data-medvice-table-v21, 10.06.2026)
   -----------------------------------------------------------------------
   Gemeinsamer Standard fuer Datentabellen in allen Tools:
     - Zahlenspalten:  <th class="num"> / <td class="num">
                       -> rechtsbuendig + tabular-nums (Spalten "stehen")
     - Sticky-Header:  <div class="table-wrap" style="max-height:60vh">
                         <table class="data sticky">...
     - Zebra (opt-in): <table class="data zebra">
     - Summenzeile:    <tfoot><tr><td>...</td></tr></tfoot>
   Bestehende table.data bleibt unveraendert -- alles ist opt-in.
   ======================================================================= */
table.data th.num,
table.data td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--brd);
  border-radius: var(--r-md);
  background: var(--wh);
}
.table-wrap table.data {
  border: none;
  border-radius: 0;
}

table.data.sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--brd);
}

table.data.zebra tbody tr:nth-child(even) { background: var(--bg) }
table.data.zebra tbody tr:hover { background: var(--row) }

table.data tfoot td {
  border-top: 2px solid var(--brd);
  border-bottom: none;
  background: var(--bg);
  font-weight: 700;
}

/* =======================================================================
   -- ENDE medvice.css v2.1 --
   ======================================================================= */

/* ══ Benutzerverwaltung v2 (data-medvice-users=v2, 28.08.2026) ══════════
   Ersetzt die frueheren Inline-Styles im Dashboard. Nur Tokens, keine
   Hex-Werte, keine Emojis (Icons sind Inline-SVG im Markup). */
.u-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap }
.u-search { flex: 1; min-width: 190px; position: relative }
.u-search input { width: 100%; font-family: var(--font); font-size: 13px;
  padding: 8px 10px 8px 32px; border: 1px solid var(--brd); border-radius: var(--r-sm);
  background: var(--bg); color: var(--dk) }
.u-search input:focus { outline: none; border-color: var(--pg); background: var(--inp) }
.u-search svg { position: absolute; left: 9px; top: 9px; width: 15px; height: 15px;
  color: var(--gr); fill: none; stroke: currentColor; stroke-width: 2 }
table.u-table { width: 100%; border-collapse: collapse }
table.u-table th { font-size: 10px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--gr); text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--brd) }
table.u-table td { padding: 10px; border-bottom: 1px solid var(--brd-lt);
  font-size: 13px; vertical-align: middle }
table.u-table tr:hover td { background: var(--row) }
.u-person { display: flex; align-items: center; gap: 10px }
.u-av { width: 32px; height: 32px; border-radius: 50%; background: var(--pg);
  color: var(--wh); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex: none }
.u-av.off { background: var(--gr-lt) }
.u-name { font-weight: 600 }
.u-handle { font-size: 11.5px; color: var(--gr) }
.u-role { font-weight: 600; font-size: 12.5px }
.u-role span { display: block; font-size: 11px; color: var(--gr); font-weight: 500 }
.u-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px;
  font-weight: 700; padding: 3px 8px; border-radius: var(--r-sm); margin: 0 4px 3px 0;
  letter-spacing: .3px }
.u-tag svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2 }
.u-tag.fin { background: var(--okbg); color: var(--pg) }
.u-tag.vgu { background: var(--infobg); color: var(--info) }
.u-tag.aud { background: var(--cautionbg); color: var(--caution) }
.u-none { color: var(--gr-lt); font-size: 12px }
.u-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600 }
.u-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pg) }
.u-dot.off { background: var(--gr-lt) }
.u-dot.warn { background: var(--warn) }
.u-st.gr { color: var(--gr) }
.u-st.wa { color: var(--warntxt) }
.u-acts { display: flex; gap: 5px; justify-content: flex-end }
.u-iconbtn { border: 1px solid var(--brd); background: var(--wh); border-radius: var(--r-sm);
  padding: 6px; cursor: pointer; color: var(--gr); display: inline-flex; line-height: 0 }
.u-iconbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2 }
.u-iconbtn:hover { border-color: var(--pg); color: var(--pg) }
.u-iconbtn.danger:hover { border-color: var(--red); color: var(--red) }
/* Drawer */
.u-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 94vw;
  background: var(--wh); border-left: 1px solid var(--brd); box-shadow: var(--sh-lg);
  padding: 22px 24px; overflow: auto; z-index: 60 }
.u-drawer h3 { font-size: 17px; font-weight: 800; margin-bottom: 2px }
.u-drawer .u-dsub { font-size: 12px; color: var(--gr); margin-bottom: 16px }
.u-dclose { position: absolute; top: 16px; right: 18px; cursor: pointer; color: var(--gr);
  background: none; border: none; line-height: 0 }
.u-dclose svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2 }
.u-sec { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--gr); margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--brd-lt) }
.u-perm { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
  border: 1px solid var(--brd); border-radius: var(--r-sm); margin-bottom: 7px;
  cursor: pointer; text-transform: none }
.u-perm.on { border-color: var(--pg); background: var(--okbg) }
.u-perm-t { font-weight: 700; font-size: 12.5px; color: var(--dk) }
.u-perm-d { font-size: 11px; color: var(--gr); margin-top: 2px; line-height: 1.45 }
.u-perm-warn { font-size: 10.5px; color: var(--caution); margin-top: 3px; font-weight: 600 }
.u-modlist { display: flex; flex-wrap: wrap; gap: 5px }
.u-mod { font-size: 11px; font-weight: 600; background: var(--bg); border: 1px solid var(--brd);
  border-radius: var(--r-sm); padding: 4px 8px; color: var(--dk) }
.u-danger { border: 1px solid var(--red-bg); background: var(--red-bg); border-radius: var(--r-sm);
  padding: 11px 13px; margin-top: 16px }
.u-danger .t { font-weight: 700; font-size: 12.5px; color: var(--red); margin-bottom: 7px }
.u-danger .hint { font-size: 11px; color: var(--gr); margin-top: 7px; line-height: 1.45 }
.u-dfoot { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--brd-lt) }
/* Passwort-Dialog */
.u-ovl { position: fixed; inset: 0; background: rgba(45,41,38,.45); display: flex;
  align-items: center; justify-content: center; z-index: 70; padding: 20px }
.u-pw { background: var(--wh); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  width: 520px; max-width: 100%; padding: 24px 26px }
.u-pw h3 { font-size: 19px; font-weight: 800; margin-bottom: 3px }
.u-pw-sub { font-size: 12.5px; color: var(--gr); margin-bottom: 16px }
.u-pw-warn { background: var(--warnbg); border-left: 3px solid var(--warn); color: var(--warntxt);
  border-radius: var(--r-sm); padding: 9px 12px; font-size: 11.5px; font-weight: 600;
  margin-bottom: 14px }
.u-pw-box { background: var(--okbg); border: 1px solid var(--pg); border-radius: var(--r-md);
  padding: 14px 16px; display: flex; align-items: center; gap: 10px; margin-bottom: 6px }
.u-pw-code { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 21px; font-weight: 700; letter-spacing: 1.5px; color: var(--dk); word-break: break-all }
.u-pw-hint { font-size: 11.5px; color: var(--gr); margin-bottom: 14px }
.u-msg { border: 1px solid var(--brd); border-radius: var(--r-md); background: var(--bg);
  padding: 12px 14px; font-size: 12.5px; line-height: 1.6; white-space: pre-line;
  margin-bottom: 8px; color: var(--dk) }
@media (max-width: 700px) { .u-drawer { width: 100vw } }

/* =======================================================================
   WERKZEUGLEISTE in der Topbar — data-medvice-werkzeugleiste=v1 (v2.2, 19.10.2026)
   Wird von medvice-api.js nach bootstrap() in .topbar[data-medvice-topbar="v3"]
   eingehaengt: Pills (Ruecksprung, Nachbar-Tools, Meistgenutzt), Menue "Alle",
   Befehlspalette Cmd+K. Unter 1100 px bleibt nur "Alle".
   ======================================================================= */
.topbar .mv-nav { display: flex; align-items: center; gap: 6px; margin-left: 14px; margin-right: auto;
  padding-left: 14px; border-left: 1px solid var(--brd-lt); position: relative; min-width: 0 }
.topbar .mv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; height: 28px;
  border-radius: var(--r-pill); font-size: var(--fs-label); font-weight: 700; background: var(--bg);
  color: var(--dk); border: 1px solid var(--brd); cursor: pointer; white-space: nowrap;
  text-decoration: none; font-family: inherit; transition: all var(--t-fast); line-height: 1 }
.topbar .mv-pill:hover { background: var(--brd-lt); color: var(--pg); border-color: var(--pg) }
.topbar .mv-pill:focus-visible { outline: 2px solid var(--lg); outline-offset: 2px }
.topbar .mv-pill-rueck { background: var(--wh); color: var(--pg); border-color: var(--pg) }
.topbar .mv-pill-rueck svg { width: 12px; height: 12px }
.topbar .mv-pill-alle { background: var(--wh); color: var(--gr) }
.topbar .mv-pill .mv-caret { font-size: 10px }
.mv-cnt { background: var(--caution); color: var(--wh); font-size: 10px; font-weight: 800; min-width: 17px;
  height: 17px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; line-height: 1 }
/* data-medvice-werkzeugleiste=v1b: Menue haengt am body, position fixed, ueber allen Tool-Leisten */
.mv-nav-menu { position: fixed; z-index: 900; background: var(--wh); font-family: var(--font);
  border: 1px solid var(--brd); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 14px 16px;
  display: grid; grid-template-columns: repeat(4, max-content); gap: 14px 22px; min-width: 520px;
  max-height: calc(100vh - 90px); overflow-y: auto }
.mv-nav-menu[hidden] { display: none }
.mv-nav-eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gr); margin-bottom: 6px }
.mv-nav-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 8px;
  border-radius: var(--r-sm); font-size: var(--fs-caption); font-weight: 600; color: var(--dk); white-space: nowrap }
.mv-nav-item:hover { background: var(--row); color: var(--pg) }
.mv-nav-item-akt { color: var(--pg); background: var(--inp) }
.mv-nav-tipp { font-size: var(--fs-label); color: var(--gr); margin-top: 8px; max-width: 180px; white-space: normal }
.mv-nav-foot { grid-column: 1 / -1; border-top: 1px solid var(--brd-lt); padding-top: 10px; display: flex; gap: 16px;
  align-items: center; flex-wrap: wrap }   /* data-medvice-werkzeugleiste=v1b */
.mv-nav-foot .mv-nav-tipp { margin-top: 0; max-width: none }
@media (max-width: 1100px) {
  .topbar .mv-nav { margin-left: 8px; padding-left: 8px }
  .topbar .mv-nav .mv-pill:not(.mv-pill-alle) { display: none }
  .mv-nav-menu { grid-template-columns: 1fr 1fr; min-width: 0; width: calc(100vw - 24px); left: 12px !important }
}
@media (max-width: 600px) {
  .mv-nav-menu { grid-template-columns: 1fr }
}
/* Befehlspalette (Cmd+K) */
.mv-cmdk-ovl { position: fixed; inset: 0; background: rgba(45,41,38,.35); z-index: 1100; display: flex;
  align-items: flex-start; justify-content: center; padding: 12vh 16px 16px }
.mv-cmdk { background: var(--wh); border: 1px solid var(--brd); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 520px; max-width: 100%; overflow: hidden; font-family: var(--font) }
.mv-cmdk-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--brd-lt) }
.mv-cmdk-in input { flex: 1; border: none; outline: none; font-size: 14px; font-family: inherit; color: var(--dk); background: transparent }
.mv-cmdk kbd { font-family: var(--font); font-size: 10px; font-weight: 700; border: 1px solid var(--brd); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px; background: var(--wh); color: var(--gr) }
.mv-cmdk-list { max-height: 50vh; overflow-y: auto }
.mv-cmdk-item { display: flex; justify-content: space-between; gap: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--dk) }
.mv-cmdk-item.mv-cmdk-sel { background: var(--inp); color: var(--pg) }
.mv-cmdk-grp { color: var(--gr); font-size: var(--fs-label); font-weight: 600 }
.mv-cmdk-leer { padding: 14px 16px; font-size: 13px; color: var(--gr) }
.mv-cmdk-ft { padding: 8px 16px; font-size: var(--fs-label); color: var(--gr); border-top: 1px solid var(--brd-lt);
  display: flex; gap: 14px; flex-wrap: wrap }


/* =======================================================================
   RAHMEN v2 -- data-medvice-rahmen-stil=v1 (27.10.2026, Patch 204)
   Rahmen nach Styleguide (Masterbriefing Abschnitt 8), ersetzt die Bloecke aus 200, 201, 202
   (Marker dort: data-medvice-rahmen=v1, -kopf=v1, -inhalt=v1). Nur Tokens, Schriftskala, 4er-Raster.
   Testmodus je Browser (?rahmen=an / ?rahmen=aus), erst ab 1000 px; darunter und beim Drucken
   bleibt die Topbar mit Werkzeugleiste. Die Tools selbst bleiben unveraendert.
   ======================================================================= */
.mv-rahmen, .mv-r-pfad, .mv-kopf, .mv-kopf-pfad { display: none }
@media (min-width: 1000px) {
  body.mv-rahmen-an { padding-left: 264px; --topbar-h: 0px }
  body.mv-rahmen-an .topbar[data-medvice-topbar="v3"] { display: none !important }
  body.mv-rahmen-an .mv-rahmen { display: flex; flex-direction: column; gap: var(--sp-lg); position: fixed; top: 0; left: 0; bottom: 0;
    width: 264px; box-sizing: border-box; padding: var(--sp-lg) var(--sp-md) var(--sp-md); background: var(--wh);
    border-right: 1px solid var(--brd); z-index: 45; overflow-y: auto; font-family: var(--font); color: var(--dk) }
  body.mv-rahmen-an .mv-kopf { display: block; width: 100%; align-self: stretch; max-width: var(--main-max); margin: 0 auto;
    padding: var(--sp-xl) var(--sp-xl) 0; box-sizing: border-box; text-align: left }
  body.mv-rahmen-an .mv-kopf-pfad { display: flex }
  body.mv-rahmen-an .mv-kopf-schmal .mv-kopf-zeile { align-items: center }
  body.mv-rahmen-an .mv-kopf-schmal .mv-kopf-pfad { margin: 0 }
  body.mv-rahmen-an .preview-panel { min-width: 0; overflow-x: auto }
}
/* Seitenleiste: weiss mit Rand rechts wie die Topbar unten */
.mv-rahmen :focus-visible { outline: 2px solid var(--lg); outline-offset: 2px }
.mv-r-brand { display: flex; align-items: center; gap: 14px; padding: 0 var(--sp-sm); text-decoration: none }
.mv-r-brand:hover { text-decoration: none }
.mv-r-brand .brand-icon { width: 36px; height: 36px; flex-shrink: 0 }
.mv-r-brand .mod-brand-text { display: flex; flex-direction: column; line-height: 1 }
.mv-r-brand .brand-name { font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15 }
.mv-r-brand .brand-name .med { color: var(--pg) }
.mv-r-brand .brand-name .vice { color: var(--lg) }
.mv-r-brand .brand-sub { font-size: 10px; font-weight: 700; color: var(--gr); text-transform: uppercase; margin-top: 3px }
.mv-r-suche { display: flex; align-items: center; gap: var(--sp-sm); width: 100%; box-sizing: border-box; padding: 9px 14px; background: var(--wh);
  border: 1px solid var(--brd); border-radius: 7px; font-family: var(--font); font-size: var(--fs-body); color: var(--gr); cursor: pointer; text-align: left }
.mv-r-suche:hover { border-color: var(--pg) }
.mv-r-suche span { flex: 1 }
.mv-r-suche kbd { font-family: var(--font); font-size: var(--fs-caption); font-weight: 700; color: var(--gr) }
.mv-r-ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--gr) }
.mv-r-nav { display: flex; flex-direction: column; gap: var(--sp-xs) }
.mv-r-heute, .mv-r-kopf { display: flex; align-items: center; gap: var(--sp-md); width: 100%; box-sizing: border-box; padding: var(--sp-sm) var(--sp-md);
  border: 0; border-radius: var(--r-sm); background: transparent; font-family: var(--font); font-size: var(--fs-body); font-weight: 700; line-height: 1.5;
  color: var(--dk); text-decoration: none; text-align: left; cursor: pointer }
.mv-r-heute span, .mv-r-kopf span { flex: 1 }
.mv-r-heute:hover, .mv-r-kopf:hover, .mv-r-tool:hover, .mv-r-sys a:hover, .mv-r-user:hover { background: var(--row); text-decoration: none }
.mv-r-chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--gr-lt); transition: transform var(--t-fast) }
.mv-r-kopf[aria-expanded="true"] .mv-r-chev { transform: rotate(90deg); color: var(--gr) }
.mv-r-hier .mv-r-kopf, .mv-r-hier .mv-r-kopf .mv-r-ic { color: var(--pg) }
.mv-r-tools { display: flex; flex-direction: column; margin: 0 0 var(--sp-xs) }
.mv-r-tools[hidden] { display: none }
.mv-r-tool { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); padding: var(--sp-xs) var(--sp-md) var(--sp-xs) 40px;
  border-radius: var(--r-sm); font-size: var(--fs-body); font-weight: 500; line-height: 1.5; color: var(--dk); text-decoration: none }
.mv-rahmen .mv-r-akt, .mv-rahmen .mv-r-akt:hover { background: var(--inp); color: var(--pg); font-weight: 700 }
.mv-rahmen .mv-r-akt .mv-r-ic { color: var(--pg) }
.mv-r-cnt { background: var(--caution); color: var(--wh); font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; line-height: 1 }
.mv-r-fuss { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-sm); padding-top: var(--sp-md); border-top: 1px solid var(--brd-lt) }
.mv-r-sys { display: flex; gap: var(--sp-xs); flex-wrap: wrap }
.mv-r-sys a { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-xs) var(--sp-sm); border-radius: var(--r-sm);
  font-size: var(--fs-caption); font-weight: 600; color: var(--gr); text-decoration: none }
.mv-r-sys a:hover { color: var(--dk) }
.mv-r-userzeile { display: flex; align-items: center; gap: var(--sp-sm) }
.mv-r-user { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-xs); border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; text-align: left; font-family: var(--font) }
.mv-r-av { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--pg); color: var(--wh); display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700 }
.mv-r-uname { display: flex; flex-direction: column; min-width: 0; line-height: 1.2 }
.mv-r-uname b { font-size: 13px; font-weight: 700; color: var(--dk) }
.mv-r-uname span { font-size: 9px; font-weight: 700; color: var(--pg); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px }
.mv-r-ab { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-sm);
  background: var(--bg); color: var(--gr); cursor: pointer }
.mv-r-ab:hover { background: var(--brd-lt); color: var(--dk) }
.mv-r-ab .mv-r-ic { color: currentColor }
.mv-r-test { padding: 0 var(--sp-sm); font-size: var(--fs-label); color: var(--gr) }
.mv-r-test a { color: var(--pg); font-weight: 700 }
/* Seitenkopf: Pfad wie .eyebrow, Titel wie .page-header h1 */
.mv-kopf-pfad, .mv-pfad { align-items: center; gap: var(--sp-xs); margin: 0 0 var(--sp-sm); font-size: var(--fs-eyebrow); font-weight: 800; color: var(--gr);
  text-transform: uppercase; letter-spacing: .12em }
.mv-pfad { display: flex }
.mv-kopf-pfad a, .mv-pfad a { color: var(--gr) }
.mv-kopf-zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-xl); flex-wrap: wrap }
.mv-kopf-titel { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.01em; color: var(--dk); margin: 0 }
.mv-kopf-akt { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; flex: none }
.page-header h1 .badge { margin-left: var(--sp-md); vertical-align: middle }

/* Bausteine der Startseite (MEDVICE_Start.html), zentral nach Styleguide */
.mv-raster { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: var(--sp-xl); align-items: start }
.mv-stapel { display: flex; flex-direction: column; gap: var(--sp-xl); min-width: 0 }
.card-header.mv-ch { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-md) }
.mv-zeilen { display: flex; flex-direction: column }
.mv-zeile { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--sp-lg); align-items: center; padding: var(--sp-md);
  border-radius: var(--r-sm); color: var(--dk); text-decoration: none }
a.mv-zeile:hover { background: var(--row); text-decoration: none }
.mv-zeile + .mv-zeile { border-top: 1px solid var(--brd-lt) }
.mv-zeile-jetzt { background: var(--inp) }
.mv-zeile .mv-t { display: block; font-weight: 700 }
.mv-zeile > svg { width: 16px; height: 16px; color: var(--gr) }
.mv-leer { padding: var(--sp-md); color: var(--gr) }
.mv-mehr { margin-top: var(--sp-md); padding: 0 var(--sp-md) }
.mv-person { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-md); align-items: start; padding: var(--sp-md) }
.mv-person + .mv-person { border-top: 1px solid var(--brd-lt) }
.mv-person .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pg); color: var(--wh); display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700 }
.mv-person-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-sm); font-weight: 700 }
.mv-leiste { position: relative; height: 8px; margin-top: var(--sp-sm); border-radius: var(--r-pill); background: var(--brd-lt) }
.mv-leiste span { position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill); background: var(--lg) }
.mv-leiste span.mv-vorbei { background: var(--gr-lt) }
.mv-leiste i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--pg-dk) }
.mv-achse { position: relative; height: 16px; margin: 0 var(--sp-md) 0 56px; font-size: var(--fs-eyebrow); font-weight: 700; color: var(--gr) }
.mv-achse span { position: absolute; transform: translateX(-50%) }
/* Schalter: neu (Wunsch Thomas 26.10.), wirkt sofort; fuer Unterpunkte bleibt .chk */
.mv-schalter { position: relative; display: inline-flex; flex: none; width: 36px; height: 20px }
.mv-schalter input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1 }
.mv-schalter span { position: relative; width: 100%; height: 100%; border-radius: var(--r-pill); background: var(--gr-lt); transition: background var(--t-fast) }
.mv-schalter span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--wh);
  box-shadow: var(--shadow-sm); transition: transform var(--t-fast) }
.mv-schalter input:checked + span { background: var(--pg) }
.mv-schalter input:checked + span::after { transform: translateX(16px) }
.mv-schalter input:disabled { cursor: not-allowed }
.mv-schalter input:disabled + span { opacity: .5 }
.mv-schalter input:focus-visible + span { outline: 2px solid var(--lg); outline-offset: 2px }
.drawer.mv-schmal { max-width: 480px }
.drawer-footer .mv-links { margin-right: auto }
.mv-anp-zeile { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--sp-md); align-items: center; padding: var(--sp-md) 0;
  border-top: 1px solid var(--brd-lt) }
.mv-anp-zeile.mv-zieht { opacity: .5 }
.form-section-title + .mv-anp-zeile { border-top: 0 }
.mv-griff { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--gr-lt); cursor: grab }
.mv-griff:hover, .mv-griff:focus-visible { background: var(--row); color: var(--gr) }
.mv-griff svg { width: 16px; height: 16px }
.mv-anp-zeile .mv-t { display: block; font-weight: 700 }
.mv-anp-aus .mv-t { color: var(--gr) }
.mv-anp-unter { grid-column: 2 / -1; display: flex; flex-direction: column; gap: var(--sp-sm); padding-top: var(--sp-xs) }
.mv-schloss { display: inline-flex; align-items: center; gap: var(--sp-xs); font-size: var(--fs-caption); font-weight: 600; color: var(--gr) }
.mv-schloss svg { width: 12px; height: 12px }
.mv-matrix select.form { padding: var(--sp-xs) var(--sp-sm); width: auto }
.mv-matrix td { white-space: nowrap }
.mv-matrix table.data th, .mv-matrix table.data td:first-child { white-space: normal }
@media (max-width: 900px) {
  .mv-raster { grid-template-columns: minmax(0, 1fr) }
}
@media print {
  .mv-rahmen, .mv-kopf, .mv-kopf-pfad { display: none !important }
  body.mv-rahmen-an { padding-left: 0 !important }
}