/* ==============================

   PATIENTEN-TABELLE STYLES

   ============================== */



/* nunito-regular - latin */

@font-face {

    font-family: 'Nunito';

    src: url('../fonts/nunito-v32-latin-regular.woff2') format('woff2');

    font-weight: 400;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Nunito';

    src: url('../fonts/nunito-v32-latin-600.woff2') format('woff2');

    font-weight: 600;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Nunito';

    src: url('../fonts/nunito-v32-latin-700.woff2') format('woff2');

    font-weight: 700;

    font-style: normal;

    font-display: swap;

}



body {

    font-family: 'Nunito', Arial, sans-serif;

    letter-spacing: 0.3px;  /*gut sichtbarer etwas größerer Abstand der Buchstaben zueinander*/

    line-height: 1.5;       /*Zeilenabstand*/

}



h1, h2, h3 {

    letter-spacing: 0.8px;

}



button {

    letter-spacing: 0.5px;

}



nav {

    letter-spacing: 0.6px;

}



.small {

    letter-spacing: 0.4px;

}



/* Damit Brwoser keine eigenen Default Schriften setzen */

input, button, textarea, select {

    font-family: inherit;

}





/*=======================================================*/







#tblBetroffene {

    width: 100%;

    border-collapse: collapse;

    font-size: 13px;

    display: block;

    overflow-y: auto;

}



#tblBetroffene thead, #tblBetroffene tbody {

    display: table;

    width: 100%;

    table-layout: fixed;

}



#tblBetroffene th, #tblBetroffene td {

    padding: 6px 8px;

    border-bottom: 1px solid rgba(148,163,184,0.3);

    text-align: left;

    vertical-align: middle;

    white-space: nowrap;

}



/* Zebra-Streifen */

#tblBetroffene tbody tr:nth-child(odd) {

    background: #000; /* dunkler */

}

#tblBetroffene tbody tr:nth-child(even) {

    background: #363636; /* heller */

}



/* Hover: einheitliches Mittelblau für alle Zeilen */

#tblBetroffene tbody tr:hover {

    background: #3b82f6;  /* z. B. Tailwind "blue-500" */

    color: #fff;           /* Textfarbe ggf. auf weiß setzen */

}



/* Kategorie-Badge */

.kat-badge {

    display: inline-block;

    padding: 4px 8px;

    margin: 3px;

    border-radius: 6px;

    font-weight: 600;

    text-align: center;

}



/* Optional: Badge beim Hover minimal heller */

#tblBetroffene tbody tr:hover .kat-badge {

    filter: brightness(1.05);

}



.patient-menu {

    position: absolute;

    background: #555555;

    border: 1px solid #ccc;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    z-index: 99999;

    width: 240px;

    padding: 6px 0;

}



.patient-menu.hidden {

    display: none;

}



.patient-menu ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.patient-menu li {

    padding: 10px 14px;

    cursor: pointer;

    transition: background 0.15s ease;

}



.patient-menu li:hover {

    *background: #c0c0c0;

    font-style: italic

}







/* ==============================

   BELEGE-SEITE STYLES

   ============================== */

:root {

    /* ======== Drop-Down-Menü für Patienten und Einsätze ==================*/

    --control-h: 38px;           /* ungefähre Höhe eines "kleinen Fingers" */

    --panel-bg: #2d2d2d;         /* gewünschte Panel-Farbe */

    --panel-border: rgba(255,255,255,0.06);

    --panel-hover: rgba(255,255,255,0.06);



    --bg-body: #2d2d2d;

    --bg-sidebar: #2d2d2d;

    --bg-card: #2d2d2d;

    --accent: #4578a9;

    --accent-soft: rgba(14,165,233,0.12);

    --accent-hover: #6598c9;

    --text-main: #e5e7eb;

    --text-hellgelb: #FFFBD3;

    --text-hellblau: #C0FFFF;

    --text-knallgelb: #FFFF40;

    --text-hellgruen: #C6FC80;

    --text-muted: #9ca3af;

    --danger: #ef4444;

    --border-subtle: rgba(148,163,184,0.35);

    --radius-xl: 24px;

    --shadow-soft: 0 18px 40px rgba(33,33,33,0.75);



    --tile-top:  #555;

    --tile-bot:  #333;

    --shadow-base: #1f1f1f;

    --active-green: #22c55e;





    --input-bg: #2b2b2b;

    --text-color: #e6e6e6;

    --border-color: #555;



    --label-form: #A9CBFF;

}



/* ==============================

    Für die rote E-Nr bei den Patienten

============================== */

.text-danger {

    color: var(--danger);

}



.text-hellgruen {

    color: var(--text-hellgruen);

}



.text-hellgelb {

    color: var(--text-hellgelb);

}



.text-knallgelb {

    color: var(--text-knallgelb);

}



.text-hellblau {

    color: var(--text-hellblau);

}





* { box-sizing: border-box; }



body {

    margin: 0;

    /*

	background: radial-gradient(circle at top left, #1d293b 0, #020617 55%, #020617 100%);

    */

	background:  var(--bg-body);

	color: var(--text-main);

    display: flex;

    min-height: 100vh;

}



.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 10px 2px;

}

.brand-logo {

    width: 40px;

    height: 40px;

    border-radius: 12px;

    border: 1px solid rgba(63,63,63,0.55);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

    font-size: 12px;

    background: radial-gradient(circle at 0 0, #ccc, #1a1a1a 60%, #2a2a2a 100%);

    box-shadow: 0 10px 35px rgba(189,189,189,0.45);

}

.brand-text { display: flex; flex-direction: column; gap: 2px; }

.brand-title { font-size: 17px; font-weight: 600; letter-spacing: 0.03em; }

.brand-subtitle {

    font-size: 11px;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.14em;

}

.nav {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.nav-button {

    width: 100%;

    border-radius: 6px;

    border: 1px solid transparent;

    padding: 10px 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    background: transparent;

    color: var(--text-main);

    cursor: pointer;

    font: inherit;

    text-align: left;



    transition: background 0.18s ease-out,

                transform 0.18s ease-out;

}



/* Hover: nur leicht heller */

.nav-button:hover {

    background: rgba(255,255,255,0.05);

    transform: translateY(-1px);

}



/* Aktiv: sanft hervorgehoben */

.nav-button.active {

    background: rgba(255,255,255,0.08);

}



/* Logout bleibt dezent rot */

.nav-button.logout {

    margin-top: auto;

    color: #fca5a5;

}



.nav-button.logout:hover {

    background: rgba(239,68,68,0.08);

}





.layout {

    display: flex;

    width: 100%;

    min-height: 100vh;

}





/* Main */

.main {

    background: var(--module-bg);

    flex: 1;

    min-height: 0;   /* DAS fehlte */

    padding: 22px 26px;

    min-width: 0;   /* ← WICHTIG */

    overflow-y: auto;   /* wichtig */

}







.topbar {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.topbar-title { font-size: 22px; font-weight: 600; }

.topbar-subtitle { font-size: 13px; color: var(--text-muted); }



.topbar-left {

    display: flex;

    align-items: center;   /* vertikal mittig mit dem Button */

    gap: 12px;             /* Abstand zwischen Button und Textblock */

    flex-wrap: wrap;       /* falls eng: umbrechen */

}



/* Title-Block bleibt vertikal */

.topbar-text {

    display: flex;

    flex-direction: column;

    gap: 2px;

}





/* Optional: Button optisch etwas kompakter neben dem Titel */

.menu-toggle {

    display: none; /* Standard: unsichtbar */

    border-radius: 999px;

    border: 1px solid rgba(148,163,184,0.6);

    background: rgba(33,33,33,0.9);

    color: var(--text-main);

    padding: 6px 10px;

    font-size: 13px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

}



/* Mobile: ggf. Zeilenumbruch erlauben, Titel nicht gequetscht */

@media (max-width: 1200px) {

    .main { padding: 16px; }

    .topbar-left { gap: 8px; }

    .topbar-title { font-size: 18px; }      /* etwas kleiner auf schmalen Screens */

    .menu-toggle { display: inline-flex; }  /* oder block, je nach Layout */

}





/* Mobile (< 900px): Sidebar standardmäßig ausblenden */





.menu-toggle {

    border-radius: 999px;

    border: 1px solid rgba(148,163,184,0.6);



    /*background: rgba(33,33,33,0.9);*/

    background: #2d2d2d;





    color: var(--text-main);

    padding: 6px 10px;

    font-size: 13px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

}





/*-----------------------------------------------

/* Button ausblenden, wenn Sidebar sichtbar */

/* Sidebar sichtbar auf Desktop

------------------------------------------------*/

/* Sidebar */



.sidebar {

    transform: translateX(0);

    padding: 20px 18px 5px 20px; /* ← PADDING HIER */

    background: #2d2d2d;

}



.sidebar::before,

.sidebar::after{

    content:none !important;

    background:none !important;

    display:none !important;

}

/*-----------------------------------------------------------

 Kleine Bildschirme: Smartphones, Tablets im Hochformat

--> Sidebar über den Inhalt schieben

---------------------------------------------------------*/

@media (max-width: 1200px) {

    .sidebar {

        transform: translateX(-100%);

        transition: transform 0.2s ease-out;



        position: fixed;

        inset: 0 auto 0 0;        /* links angedockt, volle Höhe */

        width: 260px;

        max-width: 85vw;

        z-index: 1200;

        background: #2d2d2d;

        /*background: linear-gradient(180deg, #3a3a3a, #2d2d2d);*/

        /*border-right: 1px solid rgba(148,163,184,0.3);*/



        padding: 20px 18px;

        overflow-y: auto;

        /* Optional: leichter Schatten */

        /*box-shadow: 6px 0 24px rgba(0,0,0,0.4);*/



    }

    .sidebar.open {

        transform: translateX(0);

    }



    /* Menü-Button sichtbar */

    #menuToggle {

        display: inline-block;

    }



    /* Body fixieren, wenn Sidebar offen (verhindert Hintergrund-Scroll) */

    body.no-scroll {

        overflow: hidden;

    }



}



/* =========================================================

   SIDEBAR (Basis + Mobile Drawer + Desktop Collapse)

   - Collapse-Status nur über: html.sb-collapsed

   - Kein .sidebar.is-collapsed mehr

========================================================= */



/* Menu Button (Mobile) */

.menu-toggle{

    border-radius: 999px;

    border: 1px solid rgba(148,163,184,0.6);

    background: #2d2d2d;

    color: var(--text-main);

    padding: 6px 10px;

    font-size: 13px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

}



/* Sidebar – Grundzustand (Desktop sichtbar) */

.sidebar{

    transform: translateX(0);

    padding: 20px 18px 5px 20px;

    background: #2d2d2d;

}



.sidebar::before,

.sidebar::after{

    content:none !important;

    background:none !important;

    display:none !important;

}



/* -----------------------------------------------------------

   Mobile / kleine Bildschirme: Sidebar als Drawer

----------------------------------------------------------- */

@media (max-width: 1200px){

    .sidebar{

        transform: translateX(-100%);

        transition: transform 0.2s ease-out;



        position: fixed;

        inset: 0 auto 0 0;

        width: 260px;

        max-width: 85vw;

        z-index: 1200;

        background: #2d2d2d;



        padding: 20px 18px;

        overflow-y: auto;

    }



    .sidebar.open{ transform: translateX(0); }



    /* Menü-Button sichtbar */

    #menuToggle{ display: inline-block; }



    /* Body fixieren, wenn Sidebar offen */

    body.no-scroll{ overflow: hidden; }

}



/* ------------------------------------------------------

   Desktop: Sidebar sichtbar, MenüButton unsichtbar

------------------------------------------------------ */

@media (min-width: 1201px){

    #menuToggle{ display: none; }

}



/* =========================================================

   Collapse Button (Desktop only)

   (Button-Klasse aus deinem Markup: .sb-collapse-btn)

========================================================= */

.sb-collapse-btn{

    width: 100%;

    margin: 10px 0 8px 0;

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,0.10);

    background: rgba(255,255,255,0.04);

    color: rgba(255,255,255,0.75);

    padding: 8px 10px;

    cursor: pointer;

    display:flex;

    align-items:center;

    justify-content:center;

}

.sb-collapse-btn:hover{ background: rgba(255,255,255,0.07); }



/* Mobile: Collapse-Button ausblenden (Drawer reicht) */

@media (max-width: 1200px){

    .sb-collapse-btn{ display:none; }

}



/* =========================================================

   Desktop Collapse (nur html.sb-collapsed)

   -> verhindert Flash + Tooltips nur beim Hover

========================================================= */

@media (min-width: 1201px){



    /* Fixe Breite per CSS (verhindert "Flash" beim Seitenwechsel) */

    #appSidebar.sidebar{

        width: 260px;          /* normale Breite */

        flex: 0 0 260px;

        transition: width .18s ease, padding .18s ease;



        position: relative;

        z-index: 2000;         /* Sidebar liegt über main */

        overflow: visible;     /* Tooltips dürfen raus */

    }



    /* Collapsed */

    html.sb-collapsed #appSidebar.sidebar{

        width: 72px;           /* collapsed Breite */

        flex: 0 0 72px;

        padding: 14px 10px 10px 10px;

    }



    /* Alles was im schmalen Modus ausblenden soll */

    html.sb-collapsed #appSidebar .brand-text,

    html.sb-collapsed #appSidebar #clockBox,

    html.sb-collapsed #appSidebar .sidebar-section,

    html.sb-collapsed #appSidebar #offlineStatus,

    html.sb-collapsed #appSidebar #onlineStatus{

        display: none !important;

    }



    /* Labels im collapsed Modus NICHT anzeigen */

    html.sb-collapsed #appSidebar .nav-button .label{

        display: none !important;

    }



    /* Nav Buttons: nur Icon zentriert */

    html.sb-collapsed #appSidebar .nav-button{

        justify-content: center;

        gap: 0;

        padding: 10px 8px;

        position: relative; /* Tooltip-Anker */

    }



    /* Tooltip NUR beim Hover/Focus (über data-title am Button) */

    html.sb-collapsed #appSidebar .nav-button::after{

        content: attr(data-title);

        position: absolute;

        left: calc(100% + 10px);

        top: 50%;

        transform: translateY(-50%);



        opacity: 0;              /* <- wichtig: sonst "dauerhaft sichtbar" */

        transition: opacity .12s ease;



        pointer-events: none;

        white-space: nowrap;

        z-index: 5000;



        padding: 7px 10px;

        border-radius: 10px;

        background: rgba(25,25,25,0.62);

        border: 1px solid rgba(255,255,255,0.12);

        color: rgba(255,255,255,0.92);

        box-shadow: 0 10px 24px rgba(0,0,0,0.35);

    }



    html.sb-collapsed #appSidebar .nav-button:hover::after,

    html.sb-collapsed #appSidebar .nav-button:focus-visible::after{

        opacity: 1;

    }



    /* Wichtig gegen "Tooltip wird unter main abgeschnitten" */

    .layout,

    .einsaetze-layout,

    .lagen-layout{

        overflow: visible;

    }



    main.main{

        position: relative;

        z-index: 1;

    }

}





/*==================================================

  ENDE .sidebar

===================================================*/







.card_pur {

    /*

    background: radial-gradient(circle at top left, rgba(33,33,33,1), #020617 70%);

    */

    position: relative;   /* das ist entscheidend */

    background: #2d2d2d;



    border-radius: var(--radius-xl);

    border: 1px solid var(--border-subtle);

    padding: 16px 18px;

    box-shadow: var(--shadow-soft);

}



.card {

    position: relative;

    background: #2d2d2d;



    border-radius: var(--radius-xl);

    border: 1px solid var(--border-subtle);

    box-shadow: var(--shadow-soft);



    overflow: hidden;



    /* exakt Header-Höhe */

    padding-top: 50px;

    padding-right: 18px;

    padding-bottom: 16px;

    padding-left: 18px;



    display: flex;

    flex-direction: column;

}



/* Nur diese Cards sollen Höhe füllen

 Hier ist die Höhe sogar einstellbar

 */

.card--fill {

    min-height: var(--min-card-h, 100%);

}





/* Scrollbarer Inhalt nur dort */

.card--fill .card-content {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

}





/* Header-Hintergrund */

.card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 50px;



    z-index: 1;



    background: linear-gradient(

        to bottom,

        #3a3a3a 0%,

        #2f2f2f 55%,

        #2d2d2d 100%

    );



    border-bottom: 1px solid rgba(255,255,255,0.08);

}



/* Header-Text */

.card-header {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 50px;



    z-index: 1;



    display: flex;

    align-items: center;



    /* ❗ wichtig */

    justify-content: space-between;



    padding: 0 12px;



    font-size: 1.1rem;

    font-weight: 700;

    letter-spacing: 0.03em;

    color: #909090;



    text-shadow:

        1px 1px 0 rgba(255,255,255,0.25),

       -1px -1px 0 rgba(0,0,0,0.5),

        2px 2px 4px rgba(0,0,0,0.3),

       -2px -2px 4px rgba(255,255,255,0.15);



    pointer-events: auto;

}



/*neue Bereiche für den Card-Header*/

.card-header-left{

    display:flex;

    align-items:center;

    gap:8px;

}



.card-header-center{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    pointer-events:none; /* wichtig wegen Klicks */

}





/* Nur der Titeltext soll nicht klicken "schlucken" */

.card-header .card-title-text{

    pointer-events: none;

}



.card > *:not(.card-header){

    position: relative;

    z-index: 2;

}







/* normaler Inhalt */

.card > *:not(.card-header) {

    position: relative;

    z-index: 3;

}



.card-content {

    margin-top: 10px;

}





.card-title { font-size: 15px; font-weight: 600; }

.card-subtitle { font-size: 12px; color: var(--text-muted); }



/* ======================================

   Filter-Select / Drop-Downs

====================================== */

.filter-row {

    display: flex;

    gap: 8px;

    align-items: center;

    flex-wrap: wrap;

    padding-top: 12px;

    padding-bottom: 12px;

}



/* Wrapper für Pfeil */

.filter-select {

    position: relative;

    display: inline-block;

}





.filter-btn {

    font-size: 14px;

}

.filter-btn-label {

    font-size: 14px;

}



/* Select selbst */

.filter-select select,

.filter-row select {

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;



    display: inline-flex;

    align-items: center;



    color: var(--text-main);   

    min-width: 240px;

    padding: 0 38px 0 14px; /* Platz für Pfeil rechts */



    border-radius: 12px;

    font-size: 13px;

    color: var(--text-main);



    border: 1px solid rgba(255,255,255,0.06);



    background: linear-gradient(

        to bottom,

        #353535 0%,

        #2f2f2f 60%,

        #2d2d2d 100%

    );



    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.04),

        0 6px 16px rgba(0,0,0,0.35);



    cursor: pointer;

    line-height: normal;

}



/* Pfeil rechts (rein CSS, kein SVG) */

.filter-select::after {

    content: "";

    position: absolute;

    pointer-events: none;



    top: 50%;

    right: 14px;

    transform: translateY(-50%);



    width: 0;

    height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 6px solid #cbd5e1; /* Pfeilfarbe */

}



/* Hover / Fokus */

.filter-select:hover::after {

    border-top-color: #e5e7eb;

}



.filter-select select:hover,

.filter-row select:hover {

    background: linear-gradient(

        to bottom,

        #3f3f3f 0%,

        #353535 60%,

        #2f2f2f 100%

    );

}



.filter-select select:focus,

.filter-row select:focus {

    outline: none;

    border-color: rgba(96,165,250,0.5);

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.05),

        0 0 0 2px rgba(96,165,250,0.35),

        0 6px 16px rgba(0,0,0,0.35);

}

/*==============================================

    Belege-Tabelle

==============================================*/



.table-wrapper {

    border-radius: 16px;

    border: 1px solid rgba(148,163,184,0.6);

    overflow: hidden;

    /*max-height: 880px;*/

    max-height: calc(100vh - 190px); /* Dynamische Höhe minus kopf*/

    background: rgba(33,33,33,0.85);

    overflow-y: auto;

}

table {

    width: 100%;

    border-collapse: collapse;

    font-size: 13px;

}

th, td {

    padding: 7px 10px;

    border-bottom: 1px solid rgba(30,41,59,0.9);

    text-align: left;

}

thead {

    background: rgba(33,33,33,0.98);

    position: sticky;

    top: 0;

    z-index: 5;

    font-size: 11px;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.12em;

}

tr:nth-child(even) td {

    background: rgba(38,38,38,0.8);

}



/* damit die Belegetabelle durch den

   Browser nicht eine mindestbreite behält:*/

.table-wrapper table {

    width: 100%;

    table-layout: fixed;    /* feste Spaltenbreiten, damit wir fr nutzen können */

    min-width: 0;           /* keine Mindestbreite */

    border-collapse: collapse;

}



.table-wrapper th, .table-wrapper td {

    padding: 6px 8px;

    border: 1px solid rgba(148,163,184,0.4);

    word-wrap: break-word;

    overflow-wrap: break-word;

    text-align: left;

    vertical-align: top;    /* vertikal oben */

}



/* Spaltenbreiten: alle gleich, außer Betreff/Text-Spalte doppelt */

/* Erste Spalte: ID kann auch kleiner */

.table-wrapper th:nth-child(1),

.table-wrapper td:nth-child(1) {

    width: 5%;

}



/* Betreff / Text-Spalte doppelt */

.table-wrapper th:nth-child(5),

.table-wrapper td:nth-child(5) {

    width: 28%; /* ca. doppelte Breite */

}



/* Restliche Spalten */

.table-wrapper th:not(:nth-child(1)):not(:nth-child(5)),

.table-wrapper td:not(:nth-child(1)):not(:nth-child(5)) {

    width: auto; /* verteilt den verbleibenden Platz automatisch */

}



/*================================

 Buttons

 ===============================*/



button {

    height: var(--control-h);

    border: none;

    border-radius: 12px;

    cursor: pointer;

}





/* Modal */

#modalNeuerBeleg {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.6);

    justify-content: center;

    align-items: center;

    z-index: 50;

}

#modalNeuerBeleg .modal-inner {

    background: #292929;

    color: var(--text-main);

    padding: 20px;

    border-radius: 16px;

    width: 620px;

    max-height: 90vh;

    overflow-y: auto;

    border: 1px solid var(--border-subtle);

    box-shadow: var(--shadow-soft);

}

#modalNeuerBeleg h3 {

    margin-top: 0;

    margin-bottom: 10px;

}

#modalNeuerBeleg label {

    font-size: 12px;

    color: var(--label-form);

}

#modalNeuerBeleg input,

#modalNeuerBeleg textarea {

    width: 100%;

    padding: 6px;

    margin-bottom: 8px;

    margin-top: 2px;

    border-radius: 8px;

    border: 1px solid rgba(148,163,184,0.5);

    background: rgba(33,33,33,0.9);

    color: var(--text-main);

    font-size: 13px;

}

#modalNeuerBeleg textarea { resize: vertical; }



.modal-actions {

    margin-top: 10px;

    display: flex;

    gap: 10px;

    justify-content: flex-end;

}







/* schwarz */

#btnDokuPrint,

#btnPatientPrint,

#btnLageMeldung,

#btnCommCreatePlan,

#btnCommTemplate,

#btnCommManage,

#btnEditCheckliste,

#btnHoleLayer,

#btnManageBeds,

.btn-menu

{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;



    height: 45px;

    padding: 0 14px;



    border-radius: 12px;

    border: 1px solid rgba(255,255,255,0.08);



    color: #e5e7eb;

    font-size: 13px;

    font-weight: 500;



    /* leichter vertikaler Verlauf */

    background: linear-gradient(

        to bottom,

        #353535 0%,

        #2f2f2f 60%,

        #2d2d2d 100%

    );



    /* 3D-Stil wie .filter-btn */

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.04),

        inset 0 -1px 0 rgba(0,0,0,0.45),

        0 6px 16px rgba(0,0,0,0.45);



    cursor: pointer;



    transition:

        background 0.15s ease,

        box-shadow 0.15s ease,

        transform 0.08s ease;

}



#btnDokuPrint:hover,

#btnPatientPrint:hover,

#btnLageMeldung:hover,

#btnCommCreatePlan:hover,

#btnCommTemplate:hover,

#btnCommManage:hover,

#btnEditCheckliste:hover,

#btnHoleLayer:hover,

#btnManageBeds:hover,

.btn-menu:hover

{

    background: linear-gradient(

        to bottom,

        #353535 0%,

        #1f1f1f 60%,

        #2d2d2d 100%

    );

}



.btn-menu:active{

    transform:translateY(1px);

}



/* ===========================

    Blau - primary

==============================*/



#btnIvenaHospitalNext,

#btnIvenaPatientNext,

#btnIvenaLoadManv,

#btnEinsatzAdresseSuchen,

#btnEinsatzAktuellePosition,

#btnZoomMinus,

#btnZoomPlus,

#btnGanttHeute,

#btnGanttZurueck,

#btnGanttVor,

#btnGanttZurueckWeek,

#btnGanttVorWeek,

#btnBuildSelect,

#btnShowCreate,

#btnNeuerTermineinsatz,

#btnLbVortag,

#btnEinsatzPDF,

#btnLbHeute,

#btnLbLaden,

#btnLbPDF,

#btnNeuesTagebuch,

#btnNeueFunktion,

#btnAddFoto,

#but_back1,

#but_back2,

#btnMstartDone:hover,

#btnPriorDone,

#btnOpenMstartModal,

#btnOpenPriorModal,

#btnPriorBack,

#btnVorsichtung,

#btnNeueLage,

#btnEditEinsatz,

#btnNeuerBeleg,

#btnEditPatient,

#btnPriorGet,

#btnPriorBack,

#btnPriorReset,

#btnMstartGet,

#btnMstartBack,

#btnMstartReset,

.btn-primary

 {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;



    height: 45px;

    min-width: 150px;

    padding: 0 14px;



    border-radius: 12px;

    border: 0px solid rgba(0, 83, 145, 0.4);



    color: #e5e7eb;

    font-size: 13px;

    font-weight: 500;



    /* leichter vertikaler Verlauf */

    background: linear-gradient(

        to bottom,

        #205c9d 0%,

        #104072 40%,

        #154889 100%

    );



    /* 3D-Stil wie .filter-btn */

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.04),

        inset 0 -1px 0 rgba(0,0,0,0.45),

        0 6px 16px rgba(0,0,0,0.45);



    cursor: pointer;



    transition:

        background 0.15s ease,

        box-shadow 0.15s ease,

        transform 0.08s ease;

}



.btn-primary:disabled,

.btn-primary.disabled {

    color: rgba(229, 231, 235, 0.55);



    background: linear-gradient(

        to bottom,

        #3a4452 0%,

        #313a46 60%,

        #353f4d 100%

    );



    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.03),

        inset 0 -1px 0 rgba(0,0,0,0.25),

        0 2px 6px rgba(0,0,0,0.18);



    cursor: not-allowed;



    filter: saturate(0.4);

}













#btnIvenaHospitalNext:hover,

#btnIvenaPatientNext:hover,

#btnIvenaLoadManv:hover,

#btnEinsatzAdresseSuchen:hover,

#btnEinsatzAktuellePosition:hover,

#btnZoomMinus:hover,

#btnZoomPlus:hover,

#btnGanttHeute:hover,

#btnGanttZurueck:hover,

#btnGanttVor:hover,

#btnGanttZurueckWeek:hover,

#btnGanttVorWeek:hover,

#btnBuildSelect:hover,

#btnShowCreate:hover,

#btnNeuerTermineinsatz:hover,

#btnLbVortag:hover,

#btnEinsatzPDF:hover,

#btnLbHeute:hover,

#btnLbLaden:hover,

#btnLbPDF:hover,

#btnNeuesTagebuch:hover,

#btnNeueFunktion:hover,

#btnAddFoto:hover,

#but_back1:hover,

#but_back2:hover,

#btnMstartDone:hover,

#btnPriorDone:hover,

#btnOpenMstartModal:hover,

#btnOpenPriorModal:hover,

#btnPriorBack:hover,

#btnVorsichtung:hover,

#btnNeueLage:hover,

#btnEditEinsatz:hover,

#btnNeuerBeleg:hover,

#btnEditPatient:hover,

#btnPriorGet:hover,

#btnMstartGet:hover,

#btnMstartBack:hover,

#btnMstartReset:hover,

 {

    background: linear-gradient(

        to bottom,

        #194c8d 0%,

        #4578a9 60%,

        #4578a9 100%

    );

}



.btn-primary:active{

    transform:translateY(1px);

}













/* ===========================

    Grau  - neutral

==============================*/



.btn-neutral {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;



    height: 45px;

    min-width: 150px;

    padding: 0 14px;



    border-radius: 12px;

    border: 0;



    color: #e5e7eb;

    font-size: 13px;

    font-weight: 500;



    background: linear-gradient(

        to bottom,

        #585858 0%,

        #3e3e3e 60%,

        #565656 100%

    );



    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.04),

        inset 0 -1px 0 rgba(0,0,0,0.45),

        0 6px 16px rgba(0,0,0,0.45);



    cursor: pointer;



    transition:

        background 0.15s ease,

        box-shadow 0.15s ease,

        transform 0.08s ease;

}



.btn-neutral:hover {

    background: linear-gradient(

        to bottom,

        #6b6b6b 0%,

        #575757 60%,

        #6a6a6a 100%

    );

}



.btn-neutral:active {

    transform: translateY(1px);

}





/* ===========================

    Orange  - warning

==============================*/





.btn-warning {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;



    height: 45px;

    min-width: 150px;

    padding: 0 14px;



    border-radius: 12px;

    border: 0;



    color: #fff7ed;

    font-size: 13px;

    font-weight: 500;



    background: linear-gradient(

        to bottom,

        #c97b17 0%,

        #a95d08 60%,

        #c17714 100%

    );



    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.04),

        inset 0 -1px 0 rgba(0,0,0,0.45),

        0 6px 16px rgba(0,0,0,0.45);



    cursor: pointer;



    transition:

        background 0.15s ease,

        box-shadow 0.15s ease,

        transform 0.08s ease;

}



.btn-warning:hover {

    background: linear-gradient(

        to bottom,

        #e1922b 0%,

        #c87612 60%,

        #df8d25 100%

    );

}



.btn-warning:active {

    transform: translateY(1px);

}















/* ===========================

   Grün   - success

==============================*/



#btnMedStoreValue,

#tr_send,

#btnRunMigrations,

#btnLbSpeichern,

#btnAssignPickedBed,

#btnSpeichernPatient,

#btnSpeichernEinsatz,

#btnSaveBeds,

.btn-success

 {



    min-width: 150px;

    height: 45px;

    padding: 6px 12px;



    background: linear-gradient(

        to bottom,

        rgba(22, 163, 74, 0.7),

        rgba(20, 83, 45, 0.7)

    );



    color: #fff;

    border-radius: 12px;

    cursor: pointer;

    border: 0px solid rgba(20, 83, 45, 0.4);

}





.btn-success:disabled,

.btn-success.disabled {

    color: rgba(255,255,255,0.55);



    background: linear-gradient(

        to bottom,

        rgba(54, 97, 68, 0.75),

        rgba(42, 68, 50, 0.75)

    );



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,0.04),

        inset 0 -1px 0 rgba(0,0,0,0.25),

        0 2px 6px rgba(0,0,0,0.15);



    cursor: not-allowed;



    filter: saturate(0.4);

}







#btnMedStoreValue:hover,

#tr_send:hover,

#btnRunMigrations:hover,

#btnLbSpeichern:hover,

#btnAssignPickedBed:hover,

#btnUHSmBett:hover,

#btnSpeichernPatient:hover,

#btnSpeichernEinsatz:hover,

#btnSaveBeds:hover,

.btn-success:hover

 {

    background: linear-gradient(

        to bottom,

        rgba(22, 163, 74, 0.99),

        rgba(20, 83, 45, 0.99)

    );

}



.btn-success:active {

    transform: translateY(1px);

}





/* ===========================

    Rot - danger

==============================*/



.btn-danger

{

    min-width: 150px;

    height: 45px;

    padding: 6px 12px;

    background: linear-gradient(

        to bottom,

        rgba(205, 5, 12, 0.8),

        rgba(139, 0, 0, 0.8)

        /*

        rgba(110, 110, 110, 0.8),

        rgba(80, 80, 80, 0.8)

        */





        );

    color: #fff;

    border-radius: 12px;

    cursor: pointer;

}

.btn-danger:active {

    transform: translateY(1px);

}





.btn-danger:hover

{

        background: linear-gradient(

        to bottom,

        rgba(205, 5, 12, 0.99),

        rgba(139, 0, 0, 0.99)

        );



}



/* ===================================================

=====================================================*/





#btnDisponieren {

    min-width: 150px;

    height: 45px;

    padding: 6px 12px;

    background: linear-gradient(to bottom,#E4BF12,#C8A40A);

    color: #fff;

    border-radius: 8px;

    cursor: pointer;

}



#btnDisponieren:hover {

    min-width: 150px;

    height: 45px;

    padding: 6px 12px;

    background: linear-gradient(to bottom,#E4BF12,#E4BF12);

    color: #fff;

    border-radius: 8px;

    cursor: pointer;

}













.layout-wrapper {

    display: flex;

    gap: 20px;

    margin-top: 20px;

}







/* Dienststellen */

.locations-card {

    width: 250px;

    max-height: 500px;

    overflow-y: auto;

}



.location-item {

    padding: 10px;

    margin-bottom: 6px;

    border-radius: 8px;

    background: #f0f0f0;

    cursor: pointer;

}



.location-item:hover {

    background: #dcdcdc;

}



.location-item.active {

    background: #bcd9ff;

}



/*==============================

 Grid Einsatzmittel

 ==============================*/



.resources-card {

    flex-grow: 1;

    max-height: 500px;

    overflow-y: auto;

}



.resources-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 12px;

}



.resource-item {

    background: #f7f7f7;

    padding: 10px;

    border-radius: 10px;

    text-align: center;

    cursor: pointer;

}



.resource-item:hover {

    background: #e6f2ff;

}





/* Ergänzungen für Map-Layout & Grid */

.two-column {

        display: grid;

        grid-template-columns: 320px 1fr;

        gap: 12px;

        align-items: top;

}





.status-circle {

        width: 36px;

        height: 36px;

        border-radius: 999px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-weight: 700;

        color: #fff;

        flex-shrink: 0;

        font-size: 14px;

}



.status-circle-klein {

        width: 18px;

        height: 18px;

        border-radius: 999px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-weight: 700;

        color: #fff;

        flex-shrink: 0;

        font-size: 14px;

}



.status-circle-belege strong {

        text-align: center;

}



.status-circle-belege {

        width: 48px;

        height: 28px;

        border-radius: 14px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-weight: 600;

        color: #fff;

        flex-shrink: 0;

        font-size: 18px;

        margin-bottom: 6px;

}



.status-circle-prio {

        width: 38px;

        height: 20px;

        border-radius: 999px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-weight: 700;

        color: #fff;

        flex-shrink: 0;

        font-size: 14px;

}



.hide-zeit          .col-zeit       { display:none; }

.hide-rmhp          .col-rmhp       { display:none; }

.hide-ea            .col-ea         { display:none; }

.hide-wache         .col-wache      { display:none; }

.hide-edaten        .col-edaten     { display:none; }

.hide-staerke       .col-staerke    { display:none; }





/* LAYOUT */

.container-flex {

    display: flex;

    gap: 15px;

    height: calc(100vh - 100px);

    padding: 10px;

}



/* SIDEBAR LINKS (Wachen) */



/* Menü Popup */

.context-menu {

    position: absolute;

    background: white;

    border-radius: 8px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.3);

    padding: 5px;

    display: none;

    z-index: 1000;

}

.context-menu-item {

    padding: 8px 12px;

    cursor: pointer;

}

.context-menu-item:hover {

    background: #eee;

}







/* Dienststellen-Card */

.wachen-dropdown {

    max-width: 200px;

    padding: 6px 10px;

    font-size: 15px;

    border-radius: 6px;

    border: 1px solid #ccc;

    background: #fff;

}



.wache-item {

        padding: 8px;

        border-radius: 10px;

        cursor: pointer;

        display: flex;

        align-items: center;

        gap: 8px;

        margin-bottom: 6px;

        transition: background .12s ease, transform .08s ease;

        border: 1px solid rgba(148,163,184,0.06);

        background: rgba(255,255,255,0.03);

}

.wache-item:hover { background: rgba(14,165,233,0.06); transform: translateY(-1px); }



.em-grid-card {

        padding: 12px;

        border-radius: 12px;

        background: rgba(255,255,255,0.02);

        border: 1px solid rgba(148,163,184,0.06);

        max-height: 620px;

        overflow-y: auto;

}



.em-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 10px;

    min-height: 560px; /*mmmm*/



    position: relative;

    overflow-y: auto;

}



/* sauer trennen */

.em-grid.em-wache-smartgrid {

    display: grid !important;

    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;

    grid-auto-flow: row !important;

    grid-auto-rows: auto !important;

    align-items: start !important;

    align-content: start !important;



    gap: 10px;



    min-height: 0 !important;

    height: auto !important;

    max-height: none !important;



    overflow: visible !important;

}





.em-item {

        display: flex;

        gap: 10px;

        align-items: center;

        padding: 8px;

        border-radius: 10px;

        cursor: pointer;

        transition: background .12s ease, box-shadow .12s ease;

        border: 1px solid rgba(148,163,184,0.04);

        background: rgba(255,255,255,0.03);

}

.em-item:hover { background: rgba(14,165,233,0.06); box-shadow: 0 6px 18px rgba(2,6,23,0.15); }





/* Cut-Markierung für LISTEN-Items */

.em-item.is-cut{

    outline: 2px dashed orange;

    outline-offset: 2px;

}









.status-circle {

        width: 36px;

        height: 36px;

        border-radius: 999px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-weight: 700;

        color: #fff;

        flex-shrink: 0;

        font-size: 14px;

}



.em-name { font-size: 13px; font-weight: 600; color: var(--text-main); }

.em-meta { font-size: 11px; color: var(--text-muted); }



/* Kontextmenü */

.em-context {

        position: fixed;

        z-index: 1200;

        background: #020617;

        color: var(--text-main);

        border: 1px solid rgba(148,163,184,0.25);

        border-radius: 8px;

        box-shadow: 0 12px 30px rgba(2,6,23,0.6);

        padding: 6px;

        min-width: 180px;

        display: none;

}

.em-context button {

        display: block;

        width: 100%;

        text-align: left;

        padding: 8px 10px;

        border: none;

        background: transparent;

        color: var(--text-main);

        cursor: pointer;

        border-radius: 6px;

}

.em-context button:hover { background: rgba(14,165,233,0.06); }



/* Grid (bestehende Ansicht mit 5 Spalten) */

.em-grid.grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

}



.em-grid.flexgrid {

    display: flex;

    flex-direction: rows;

    flex-wrap: wrap;          /* bricht sauber um, wenn nötig */

    align-items: flex-start;

    gap: 4px;

}





/* Grid (bestehende Ansicht mit 10 Spalten) */

.em-grid.grid11 {

    display: grid;

    grid-template-columns: repeat(10, 1fr);

}





/* Grid einzeilig */

.em-grid.list {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



/* Item: nur so hoch wie nötig, Inhalt zentrieren */

.em-item.list {

    display: grid;

    grid-template-columns: 30px 1fr; /* Status = 30px fix */

    gap: 6px;

    align-items: center;   /* statt start → vertikal mittig */

    padding: 2px 8px;      /* etwas weniger vertikales Padding */

    min-width: 200px;

}



/* Status-Kreis: kein extra Platz oben/unten */

.em-item.list > .status-circle-klein {

    grid-column: 1;

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 0;         /* war 4px */

    margin-bottom: 0;      /* war 4px */

    align-self: center;    /* optional: mit Text ausrichten */

}



/* Restliche Inhalte in der zweiten Spalte */

.em-item.list > .content-wrapper {

    grid-column: 2;

    display: grid;

    /*es können zwar 7 Spalten werden, aber dann wirds enger und es bricht der Rufname um

      so geht es dann rechts in die nächste Zeile, wenn es zu eng wird

    */

    grid-template-columns: repeat(6, minmax(80px, 1fr)); /* Rufname, Funktion, Stärke, Zeit, Wache, RMHP, EA */

    gap: 6px;

}





/* Für mittlere Bildschirme */

@media (max-width: 900px) {

    .em-item.list {

        grid-template-columns: 40px 1fr; /* Status bleibt fix 30px */

    }



    .em-item.list > .content-wrapper {

        grid-template-columns: 1fr 1fr 1fr 1fr; /* flexible Anordnung */

    }

}



/* Für kleine Bildschirme */

@media (max-width: 500px) {

    .em-item.list {

        grid-template-columns: 40px 1fr; /* Status bleibt fix */

    }



    .em-item.list > .content-wrapper {

        grid-template-columns: 1fr 1fr; /* Zweispaltig */

    }

}



/*Icon soll die Zeilenhöhe nicht unnötig verdoppeln */

.em-icon-wrapper {

    width: 24px;

    height: 24px;

    display: inline-block;

    margin-right: 16px;

    vertical-align: middle;



    position: relative; /* damit es nicht die Grid-Zeilenhöhe bestimmt */

}

.em-icon-wrapper img {

    width: 24px;

    height: 24px;

    position: absolute; /* Icon innerhalb Wrapper frei positionierbar */

    top: -8;

    left: -10;

}





/*Icon soll die Zeilenhöhe nicht unnötig verdoppeln */

.em-icon-wrapper-besatz {

    width: 24px;

    height: 24px;

    display: inline-block;

    margin-right: 4px;

    vertical-align: middle;



    position: relative; /* damit es nicht die Grid-Zeilenhöhe bestimmt */

}

.em-icon-wrapper-besatz img {

    width: 24px;

    height: 24px;

    position: absolute; /* Icon innerhalb Wrapper frei positionierbar */

    top: 0;

    left: 0;

}













/* Gruppenkopf */

.em-group {

    margin: 10px 0 4px;

    padding: 6px 10px;

    font-size: 12px;

    font-weight: 600;

    background: rgba(233,233,233,0.28);

    border-radius: 8px;

}





/*==================================

 Die neuen Wache Boxen in der

 Einsatzmittellisten-Übersicht

====================================*/

/* --- Wachen-Box View --- */

.em-wache-boxview { display:block; } /* emGrid wird hier nur Container */



.em-wache-columns{

    display:flex;

    gap:12px;

    align-items:flex-start;

}



.em-wache-col{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:12px;

    min-width:0;

}



@media (max-width: 400px){

    .em-wache-columns{ flex-direction:column; }

}



/* Box */

.em-wache-box{

    border:1px solid rgba(148,163,184,0.08);

    border-radius:14px;

    background: rgba(255,255,255,0.02);

    overflow:hidden;

}



.em-wache-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 10px;

    background: rgba(32,32,32,0.55);          /* dunkler Header */

    border-bottom:1px solid rgba(148,163,184,0.10);

}



.em-wache-title{

    font-weight:700;

    font-size:13px;

    color: #f9b627;

    overflow:hidden;

    text-overflow:ellipsis;

}



.em-wache-count{

    font-size:12px;

    padding:2px 8px;

    border-radius:999px;

    background: rgba(255,255,255,0.08);

    border:1px solid rgba(148,163,184,0.10);

}



/* Body: Tiles in kompakter Grid-Form */

.em-wache-body{

    padding:10px;

    display:grid;

    gap:6px;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

}



.card--fill .card-content {

    overflow-y: auto;

    overflow-x: hidden;

}



.em-grid.em-wache-smartgrid {

    flex-shrink: 0 !important;

    align-content: start !important;

    height: auto !important;

}









/* Tile */

.em-tile{

    display:flex;

    align-items:center;

    gap:8px;

    padding:6px 8px;

    border-radius:10px;

    cursor:pointer;

    border:1px solid rgba(148,163,184,0.05);

    background: rgba(255,255,255,0.03);

    transition: background .12s ease, transform .08s ease;

}

.em-tile:hover{ background: rgba(14,165,233,0.06); transform: translateY(-1px); }



.em-tile-status{

    width:30px;

    height:30px;

    border-radius:999px;

    flex:0 0 30px;



    display:flex;

    align-items:center;

    justify-content:center;



    font-size:10px;

    font-weight:800;

    line-height:1;

    color:#000;                 /* schwarze Ziffer im farbigen Kreis */

    box-shadow: 0 0 0 2px rgba(2,6,23,0.35) inset;

}





.em-tile-ruf{

    font-weight:700;

    font-size:14px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



.em-tile-text{ min-width:0; }

.em-tile.two .em-tile-ruf{ font-size:12px; }

.em-tile-fn{

    font-size:11px;

    color: var(--text-muted);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}





/* =========================================

    CUT-Markierung (ausgeschnittenes Fahrzeug)

    ========================================= */

.em-tile.is-cut{

    outline: 2px dashed rgba(250, 204, 21, 0.9);

    outline-offset: 2px;

    filter: brightness(1.15);

}



/* Hint-Zeile oben im Kontextmenü */

#EMContextMenu .em-menu-hint{

    padding: 8px 10px;

    font-size: 12px;

    opacity: 0.85;

    border-bottom: 1px solid rgba(255,255,255,0.08);

}









/*==================================

 Lagekarte

====================================*/



/* Basis-Styles (vorhandenen + Ergänzungen) */

.map-area {

    position: relative;

    width: 100%;

    height: 100%;

    min-height: 200px;   /* falls Card mal wenig Inhalt hat */

    transition: height 200ms ease; /* weicher Übergang */

    overflow: hidden;              /* wichtig, damit beim Minimieren nichts übersteht */

}



/* bestehendes iframe-Layout */

.map-area iframe {

        width: 100%;

        height: 100%; /* <- statt fester 520px, damit es die Containerhöhe annimmt */

        border: 1px solid rgba(148,163,184,0.25);

        border-radius: 12px;

        display: block;

}



/* Optional: die alte Klasse, falls woanders verwendet */

iframe.mapiframe {

        width: 100%;

        height: 520px;

        border: none;

}



/* Minimierter Zustand (per JS-Klasse) */

.map-area.is-minimized {

    height: 80px;                /* gewünschte Mini-Höhe */

}



/* Optional: optisches Feedback (abgedunkelt + Icon-Eindruck) */

.map-area.is-minimized iframe {

    filter: saturate(0.6) brightness(0.9);

}



/* Optional: bei Hover kurz etwas aufhellen, wenn minimiert */

.map-area.is-minimized:hover iframe {

    filter: saturate(0.8) brightness(1);

}







/*==================================

 Topbar- Überschrift mit Menü auf jeder Seite

====================================*/



.topbar {

    display: flex;

    flex-direction: column; /* aktuell: alles untereinander */

    gap: 4px;

}



/*-----------------------------------------------

für die Anzeige der Karten Layerliste in map.php

-------------------------------------------------*/



/* Container */

#layerListe {

    padding: 10px;

    background: #f5f7fa;

    border-radius: 8px;

    max-height: 450px;

    overflow-y: auto;

    border: 1px solid #d3d8df;

    z-index:1000;

}



/* Ein einzelner Layer-Eintrag */

.layerItem {

    display: flex;

    align-items: center;

    padding: 8px 6px;

    border-bottom: 1px solid #e2e5e9;

    cursor: pointer;

    transition: background 0.2s ease;

}



.layerItem:hover {

    background: #eef2f6;

}



.layerItem:last-child {

    border-bottom: none;

}



/* Checkbox optisch schöner */

.layerCheckbox {

    width: 18px;

    height: 18px;

    margin-right: 10px;

    cursor: pointer;

}



/* Layer-Name */

.layerName {

    font-size: 14px;

    color: #333;

    flex-grow: 1;

    user-select: none;

}



/* Optional Icon für Layer */

.layerIcon {

    width: 20px;

    height: 20px;

    margin-right: 8px;

    opacity: 0.7;

}







/*-----------------------------------------------

für die Anzeige der Auswahl Checkboxen in map.php

-------------------------------------------------*/

/* Modernes Checkbox-Design */

label {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 15px;

    color: var(--text-main, #e5e7eb);

    margin: 4px 0;

}



/* Originalcheckbox ausblenden */

label input[type="checkbox"] {

    appearance: none;

    -webkit-appearance: none;

    width: 18px;

    height: 18px;

    border: 2px solid var(--accent, #0ea5e9);

    border-radius: 4px;

    display: inline-block;

    position: relative;

    cursor: pointer;

    transition: 0.2s;

    z-index: 1;

}



/* Haken */

label input[type="checkbox"]::after {

    content: "";

    position: absolute;

    width: 10px;

    height: 10px;

    top: 2px;

    left: 2px;

    background: var(--accent, #0ea5e9);

    border-radius: 2px;

    transform: scale(0);

    transition: 0.2s;

}



/* Aktiv */

label input[type="checkbox"]:checked::after {

    transform: scale(1);

}



/*-----------------------------------------------

für die Anzeige der Layerliste in map.php

-------------------------------------------------*/

.toggle-button {

    background: #e5e7eb;       /* grau */

    color: #111;

    border: 1px solid #ccc;

    padding: 6px 14px;

    border-radius: 6px;

    cursor: pointer;

    transition: background 0.25s ease, color 0.25s ease;

}

.toggle-button.active {

    background: #22c55e;       /* blau */

    color: white;

    border-color: #2563eb;

}



.toggle-button:hover {

    background: var(--accent-hover);

}





/*-----------------------------------------------

Die Action-Menüs für Lage und Betroffene

für Lage.php die Liste der Lagen

-------------------------------------------------*/

/* Listeneintrag */

.em-item,

.lage-item,

.betroffenen-item,

.belege-item  {

    padding: 4px 4px;

    border: 1px solid #5a5a5a;

    border-radius: 8px;

    background: #3a3a3a;

    cursor: pointer;                   /* Cursor bleibt Hand */

    transition: background 0.2s;

    margin-bottom: 6px;        /* ← 4px vertikaler Abstand */

}



.einsatz-item {

    padding: 4px 4px;

    border: 1px solid #5a5a5a;

    border-radius: 8px;

    background: #3a3a3a;

    cursor: pointer;                   /* Cursor bleibt Hand */

    transition: background 0.2s;

    margin-bottom: 6px;        /* ← 4px vertikaler Abstand */

}







.em-item:hover,

.lage-item:hover,

.betroffenen-item:hover,

.einsatz-item:hover,

.belege-item:hover,

.patient-item:hover {

    background:rgba(150,150,150,0.06);              /* etwas heller beim Hover */

}



/* Kontextmenü */

.em-menu,

.lage-menu,

.betroffenen-menu,

.einsatz-menu,

.belege-menu {

    position: absolute;

    background: #4a4a4a;

    border: 1px solid #ccc;

    border-radius: 6px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    z-index: 2000;

    display: none;

    min-width: 180px;

}



/* Speziell für Einsatzmittel-Menü */

/* EM-Menü im Dispo/GoldenLayout immer über allem */

.em-menu {

    position: fixed;

    z-index: 9999999;

}



/* Nur EM-Submenüs */

.em-menu .em-menu-item.em-has-submenu {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Standard: Submenü nach rechts */

.em-menu .em-submenu {

    position: absolute;

    top: 0;

    left: 100%;

    right: auto;



    min-width: 180px;

    background: #4a4a4a;

    border-radius: 8px;

    box-shadow: 0 10px 30px rgba(33,33,33,0.6);

    padding: 4px 0;

    display: none;

    z-index: 10000000;

}



/* Anzeige */

.em-menu .em-has-submenu.open > .em-submenu,

.em-menu .em-has-submenu:hover > .em-submenu {

    display: block;

}



/* Wenn rechts kein Platz ist: nach links öffnen */

.em-menu .em-has-submenu.open-left > .em-submenu {

    left: auto;

    right: 100%;

}



/*==========================================*/



.lage-menu-item,

.betroffenen-menu-item,

.em-menu-item,

.einsatz-menu-item,

.belege-menu-item  {

    transition: background 0.15s;



    padding: 10px 14px;

    cursor: pointer;

    display: block;          /* WICHTIG */

    width: 100%;             /* WICHTIG */

    box-sizing: border-box;  /* WICHTIG */

    color: #fff;

    white-space: nowrap;

}



.em-menu-item.em-has-submenu:hover,

.lage-menu-item:hover,

.betroffenen-menu-item:hover,

.em-menu-item:hover,

.einsatz-menu-item:hover,

.belege-menu-item:hover  {

    background: #6a6a6a;

}



/*=======================================

  Submenü

  =======================================*/

.em-menu-item.em-has-submenu {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: #444444;

}



.em-submenu {

    position: absolute;

    top: 0;

    left: 100%;

    min-width: 180px;

    background: #4a4a4a;

    border-radius: 8px;

    box-shadow: 0 10px 30px rgba(33,33,33,0.6);

    padding: 4px 0;

    display: none;

    z-index: 1000;

}







.em-has-submenu.open > .em-submenu,

.em-has-submenu:hover > .em-submenu {

    display: block;

}



.submenu-arrow {

    font-size: 11px;

    opacity: 0.6;

}



/*===============================================

  2. Ebene Submenu: wenn innerhalb eines Submenus

  wieder em-has-submenu

=================================================*/

.em-submenu .em-menu-item.em-has-submenu{

    position: relative;

    background: transparent;           /* nicht doppelt dunkel */

    padding-right: 10px;

}



.em-submenu .em-menu-item.em-has-submenu > .em-submenu{

    top: 0;

    left: 100%;

}



/* optional: etwas kompakter im submenu */

.em-submenu .betroffenen-menu-item,

.em-submenu .em-menu-item{

    padding: 8px 12px;

    white-space: nowrap;

}







/* -----------------------------------------------------------

   Card-Styling für Patientenliste (analog zur Lagen-Liste)

----------------------------------------------------------- */

.patient-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 14px;

    border: 1px solid #5a5a5a;

    border-radius: 8px;

    background: #3a3a3a;

    cursor: pointer;

    transition: background 0.2s;

    margin-bottom: 8px;

    gap: 12px; /* Abstand zwischen Badge, Mitte, Rechts */

}



.patient-item:hover {

    background: rgba(150,150,150,0.06);

}





/*====================================================

    Alles was mit den Containern für Einsatzliste

    und Patientenliste und Belegeliste zu tun hat

====================================================*/



.belege-badge {

    font-weight: 500;

    border-radius: 6px;

    display: flex;              /* ⬅️ Flex statt inline-block */

    flex-direction: column;     /* Kreis oben, Zeit darunter */

    align-items: center;        /* horizontal zentrieren */

    min-width: 90px;

    padding: 5px 5px;

    text-align: center;

}



.patient-badge

{

    align-items: center;

    font-weight: 600;

    text-align: center;

    border-radius: 6px;

    display: inline-block;

    min-width: 90px;

    padding: 10px 10px;

    margin-right: 10px;

}



.einsatz-badge {

    font-weight: 500;

    font-size: 16px;

    text-align: center;

    border-radius: 6px;

    display: inline-block;

    min-width: 90px;

    padding: 5px 5px;

}







.prio-badge {

    font-weight: 600;

    text-align: center;

    border-radius: 6px;

    display: inline-block;

    padding: 10px 10px;

    min-width: 40px;

    margin-left: 10px;

}





/*========================

 BELEGE

==========================*/

.belege-obercontainer {

    flex: 1 1 auto;

    min-width: 0;

}



.belege-spalten-wrap {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    width: 100%;

    min-width: 0;

    align-items: stretch;

}



.belege-spalte2 {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    box-sizing: border-box;

    padding: 2px;

    flex: 1 1 260px;

    min-width: 220px;

    max-width: 100%;

    font-size: 13px;

    color: var(--text-main);

}



.belege-shadow-badge {

    font-weight: 400;

    text-align: left;

    border-radius: 6px;

    display: block;

    padding: 10px;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    height: 100%;

    margin-left: 0;

    border: 1px solid #3e3e3e;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    box-sizing: border-box;

    overflow-wrap: anywhere;

    word-break: break-word;

}



.belege-shadow-badge .chip-wrap,

.belege-shadow-badge .ea-chip-wrap,

.belege-shadow-badge .rollen-chip-wrap {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    min-width: 0;

}



.ea-chip,

.role-chip,

.header-chip {

    max-width: 100%;

    white-space: normal;

    overflow-wrap: anywhere;

}



/* Mobile Regeln */

@media (max-width: 1200px) {

    .belege-spalte2 {

        flex: 1 1 calc(33.333% - 8px);

        min-width: 220px;

    }

}



@media (max-width: 900px) {

    .belege-spalte2 {

        flex: 1 1 calc(50% - 8px);

        min-width: 200px;

    }

}



@media (max-width: 500px) {

    .belege-spalten-wrap {

        gap: 12px;

    }



    .belege-spalte2 {

        flex: 1 1 100%;

        min-width: 0;

    }

}

/*========================

 BELEGE ENDE

==========================*/



/*========================

 Einsatz Beginn

==========================*/





.einsatz-obercontainer {

    flex: 1 1 auto;

    min-width: 0;

}



.einsatz-spalten-wrap {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    width: 100%;

    min-width: 0;

    align-items: stretch;

}



.einsatz-spalte2 {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    box-sizing: border-box;

    padding: 2px;

    flex: 1 1 260px;

    min-width: 220px;

    max-width: 100%;

    font-size: 13px;

    color: var(--text-main);

}



.einsatz-shadow-badge {

    font-weight: 400;

    text-align: left;

    border-radius: 6px;

    display: block;

    padding: 10px;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    height: 100%;

    margin-left: 0;

    border: 1px solid #3e3e3e;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    box-sizing: border-box;

    overflow-wrap: anywhere;

    word-break: break-word;

}



.einsatz-spalte-datum {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    box-sizing: border-box;

    padding: 2px;

    flex: 0 0 105px;

    min-width: 95px;

}



/*===========================

 Einsatz ENDE

============================*/





/*===========================

 Patient Beginn

============================*/



.patient-right {

    text-align: left;

    font-size: 13px;

    color: var(--text-main);

    white-space: nowrap;

    width: 100px;

}



.patient-obercontainer {

    flex: 1 1 auto;

    min-width: 0;

}



.patient-spalten-wrap {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    width: 100%;

    min-width: 0;

    align-items: stretch;

}



.patient-spalte2 {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    box-sizing: border-box;

    padding: 2px;



    flex: 1 1 260px;

    min-width: 220px;

    max-width: 100%;



    font-size: 13px;

    color: var(--text-main);

}



.patient-spalte1 {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    flex: 0 0 150px;

    min-width: 150px;

    max-width: 200px;

    padding: 10px;

    line-height: 1.2;

}



@media (max-width: 500px) {

    .patient-obercontainer {

        flex-direction: column;

    }



    .patient-spalten-wrap {

        gap: 12px;

    }



    .patient-spalte2 {

        flex-basis: 100%;

        min-width: 0;

    }

}





/* Optionale Breakpoints: 4 -> 3 -> 2 -> 1 */

@media (max-width: 1200px) {

    .patient-spalte2 { flex-basis: calc(33.333% - 12px); }

}

@media (max-width: 900px) {

    .patient-spalte2,

}

@media (max-width: 400px) {

    .patient-obercontainer,

    .patient-spalten-wrap,

    .patient-spalte2,

}







.patient-spalte1 {

    line-height: 1.2;

}

.patient-spalte2 {

    font-size: 13px;

    color: var(--text-main);

    background: #3e3e3e;

    padding: 6px;

}





/*===========================

 Patient Ende

============================*/











#BelegeContextMenu,

#BetroffenenContextMenu,

#EinsatzContextMenu {

    position: fixed;               /* wichtig für BS Mittelpunkt*/

    display: none;

    background: #3e3e3e;

    border: 1px solid #555;

    border-radius: 6px;

    padding: 4px 0;

    min-width: 220px;

    z-index: 2000;



    /* 👇 Bildschirmmitte */

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

}

/*-----------------------------------

Icons in der Patiententabelle

------------------------------------*/





/* Gemeinsames Icon-„Feld“ */

.with-icon::before {

    content: "";

    display: inline-block;

    width: 1.4em;            /* Icongröße relativ zur Schrift */

    height: 1.4em;

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain; /* skaliert sauber */

    transform: translateY(5px); /* 5 px nach unten */

}



/* Konkrete Icons */

.icon-tpzeit::before {background-image: url("../../icons/p_tpzeit.png");}

.icon-rtw::before {background-image: url("../../icons/p_rtw.png");}

.icon-card::before {background-image: url("../../icons/p_card.png");}

.icon-anamnese::before {background-image: url("../../icons/p_anamnese.png");}

.icon-verbleib::before {background-image: url("../../icons/p_verbleib.png");}

.icon-person::before {background-image: url("../../icons/p_person.png");}

.icon-ea::before {background-image: url("../../icons/p_ea.png");}



/* Optional: dunkles Theme (falls nötig) – Beispiel */

@media (prefers-color-scheme: dark) {

    .with-icon::before {

        filter: brightness(1.1) contrast(1.05);

    }

}





/*-----------------------------------

Drop-Down-Menü

------------------------------------*/





/* Container positioniert das Dropdown */

.filter-dropdown {

    position: relative;

    display: inline-block;*

    height: 45px;



}



/* das Scroll-Element */

.einsaetze-list{

    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    margin-top: 8px;

}



/* Button-Stil */

.filter-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    height: 45px;

    /*height: var(--control-h);*/

    padding: 0 14px;

    border-radius: 12px;

    color: var(--text-main);

    background: var(--panel-bg);

    border: 1px solid var(--panel-border);

    /* Inset-Rahmen + sanfter Schatten */

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.04),

        0 6px 16px rgba(0,0,0,0.45);

    cursor: pointer;

}



.filter-btn:hover {

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.08),

        0 8px 22px rgba(0,0,0,0.5);

}



.filter-btn .chevron {

    opacity: .8;

    transition: transform .15s ease;

}

.filter-dropdown.open .filter-btn .chevron {

    transform: rotate(180deg);

}



.filter-btn-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 20px;

    height: 20px;

    padding: 0 6px;

    border-radius: 999px;

    font-size: 12px;

    line-height: 1;

    background: var(--accent);

    color: #001018;

}



/* Panel */

.filter-menu {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    min-width: 240px;

    background: var(--panel-bg);

    color: var(--text-main);

    border: 1px solid var(--panel-border);

    border-radius: 14px;

    box-shadow:

        0 18px 40px rgba(0,0,0,0.6),

        inset 0 0 0 1px rgba(255,255,255,0.04);

    padding: 8px;

    z-index: 1000;

    display: none; /* wird per JS auf block gesetzt */

}



.filter-dropdown.open .filter-menu {

    display: block;

}



/* Einträge */

.filter-item {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    height: 36px;

    padding: 0 8px;

    border-radius: 10px;

    color: var(--text-main);

    cursor: pointer;

    background: #3a3a3a;

    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);

}

.filter-item:hover,

.filter-item:focus-visible {

    background: #4a4a4a;

    outline: none;

    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);

}



/* „Schöner Haken links“ */

.filter-item .check {

    width: 18px;

    height: 18px;

    border-radius: 6px;

    border: 2px solid var(--text-muted);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #0b1a22;        /* Hakenfarbe inaktiv (unsichtbar) */

    background: transparent;

    transition: all .15s ease;

    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);

}

.filter-item[aria-checked="true"] .check {

    background: var(--accent);

    border-color: var(--accent);

    color: #001018;

}

.filter-item[aria-checked="true"] .check::before {

    content: "\2713";                 /* Unicode Haken (✓) */

    font-size: 14px;

    font-weight: 700;

    line-height: 1;

}



/* Kleinere Typo im Panel */

.filter-item span:last-child {

    font-size: 14px;

}



/* Optional: Panel an Input ausrichten, wenn wenig Platz rechts */

@media (max-width: 500px) {

    .filter-menu {

        min-width: min(280px, 90vw);

        right: 0; left: auto;     /* an die rechte Kante klappen */

    }

}





.filter-dropdown { position: relative; display: inline-block; /* falls nötig: pointer-events:auto; */ }

.filter-btn { cursor: pointer; }



.filter-menu {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    min-width: 240px;

    display: none;

    z-index: 1000;

    background: #2d2d2d;

}



.filter-dropdown.open .filter-menu { display: block; }



/*----------------------------------------------

 Das Sucheingabefeld bei Patienten und Einsätze

 ----------------------------------------------*/





:root {

    /* Falls noch nicht gesetzt – Höhe wie beim Dropdown */

    --control-h: 38px;              /* "kleiner Finger" */

    --panel-bg: #2d2d2d;

    --panel-hover: rgba(255,255,255,0.06);

    --text-main: #e5e7eb;

    --text-muted: #9ca3af;

    --accent: #0ea5e9;

}



/* Wrapper für das Suchfeld */

.filter-input {

    position: relative;

    display: inline-flex;

    align-items: center;

    height: 45px;

    /*height: var(--control-h); */

    width: 140px;

    min-width: 140px;

    border-radius: 12px;

    background: #2d2d2d;            /* Wunschfarbe für Einträge */

    border: 1px solid rgba(255,255,255,0.06);

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.04),   /* leichter Inset-Rahmen */

        0 6px 16px rgba(0,0,0,0.35);              /* weicher äußerer Schatten */

}



/* Fokus-Optik */

.filter-input:focus-within {

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.08),

        0 8px 22px rgba(0,0,0,0.45);

    border-color: rgba(14,165,233,0.35); /* leichtes Akzent-Focus */

}



/* Das eigentliche Inputfeld */

.filter-input input[type="search"] {

    flex: 1 1 auto;

    height: 100%;

    padding: 0 36px 0 36px;         /* Platz für Icon links + Clear rechts */

    border: none;

    outline: none;

    background: transparent;        /* Hintergrund vom Wrapper */

    color: var(--text-main);

    font: inherit;                  /* nutzt vorhandene Schrift */

    min-width: 0;                   /* verhindert Überlauf im Flex-Container */

}



/* Placeholder-Farbe */

.filter-input input::placeholder {

    color: var(--text-muted);

    opacity: .85;

}



/* WebKit Such-X und Dekorationen ausblenden (für einheitlichen Clear-Button) */

.filter-input input::-webkit-search-decoration,

.filter-input input::-webkit-search-cancel-button,

.filter-input input::-webkit-search-results-button,

.filter-input input::-webkit-search-results-decoration {

    -webkit-appearance: none;

    appearance: none;

}



/* Linkes Such-Icon */

.filter-input-icon {

    position: absolute;

    left: 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 18px; height: 18px;

    color: var(--text-muted);

    pointer-events: none;

}



/* Rechter Clear-Button (erscheint nur wenn Text vorhanden) */

.filter-input-clear {

    position: absolute;

    right: 6px;

    height: 26px;

    width: 26px;

    border: none;

    border-radius: 8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #4a4a4a;           /* leicht heller als Feld */

    color: var(--text-main);

    cursor: pointer;

}

.filter-input-clear:hover {

    background: #5a5a5a;

}



/* Hover-State des gesamten Felds (leicht heller) */

.filter-input:hover {

    background: #4a4a4a;           /* Wunschfarbe für Hover */

}



/*========================================

    Für normale select-option-Auswahl im Header

==========================================*/

.filter-select {

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;



    display: inline-flex;

    align-items: center;



    height: var(--control-h);

    min-width: 240px;



    padding: 0 36px 0 14px;   /* Platz für Pfeil rechts */

    border-radius: 12px;



    background:

        linear-gradient(

            to bottom,

            #353535 0%,

            #2f2f2f 60%,

            #2d2d2d 100%

        );



    color: #e5e7eb;

    font-size: 13px;



    border: 1px solid rgba(255,255,255,0.06);



    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.04),

        0 6px 16px rgba(0,0,0,0.35);



    cursor: pointer;



    line-height: normal;

}



/* ▼ Pfeil */

.filter-select {

    /*Pfad relativ zur CSS */

    background-image: url("../../icons/pfeil.svg");

    background-repeat: no-repeat;

    background-position: right 8px center;

    background-size: 12px 8px;

    background-repeat: no-repeat, no-repeat;

    background-position: 0 0, right 14px center;

    background-size: auto, 12px 8px;

}









/*========================================

    Modales Fenster zur Patientenerfassung

==========================================*/



/* Modal */

#modalCheckliste,

#modalPatient,

#modalBeds,

#modalLage,

#modalEinsatz {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(40,40,40,0.6);    /*halbtransparent oberhalb der Pat-Liste*/

    justify-content: center;

    align-items: center;

    z-index: 50;

}

#modalPatientCore .modal-inner,

#modalPatientTransport .modal-inner,

#modalPatientDiagnose .modal-inner,

#modalPatientUnbekannt .modal-inner,

#modalCheckliste .modal-inner,

#modalPatient .modal-inner,

#modalBeds .modal-inner,

#modalLage .modal-inner,

#modalEinsatz .modal-inner {

    /*background: linear-gradient(180deg, #3a3a3a 0%, #2f2f2f 100%);*/

    background: linear-gradient(180deg, #313131 0%, #242424 100%);

    color: var(--text-main);

    padding: 22px;

    border-radius: 18px;

    width: 650px;

    max-height: 90vh;

    overflow-y: auto;

    /* feiner Rand */

    border: 1px solid rgba(255,255,255,0.12);

    /* innerer Lichtsaum */

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,0.08),

        /* tiefer Schatten */

        0 20px 60px rgba(0,0,0,0.65),

        /* weicher Abstand zum Hintergrund */

        0 8px 20px rgba(0,0,0,0.45),

        /* minimaler Glühsaum */

        0 0 0 1px rgba(255,255,255,0.04);

}



/* oben im Modal einen ganz dezenten „Header-Glanz“ zufügen*/



#modalPatientCore .modal-inner::before,

#modalPatientTransport .modal-inner::before,

#modalPatientDiagnose .modal-inner::before,

#modalPatientUnbekannt .modal-inner::before,

#modalPatient .modal-inner::before,

#modalBeds .modal-inner::before,

#modalCheckliste .modal-inner::before,

#modalLage .modal-inner::before,

#modalEinsatz .modal-inner::before{

    content:"";

    display:block;

    height:1px;

    margin:-6px -22px 14px -22px;

    background:linear-gradient(90deg,

        rgba(255,255,255,0.0),

        rgba(255,255,255,0.18),

        rgba(255,255,255,0.0));

}







#modalPatientCore h3,

#modalPatientTransport h3,

#modalPatientDiagnose h3,

#modalPatientUnbekannt h3,

#modalCheckliste h3,

#modalPatient h3,

#modalBeds h3,

#modalLage h3,

#modalEinsatz h3 {

    margin-top: 0;

    margin-bottom: 10px;

}







#modalPatientCore label,

#modalPatientTransport label,

#modalPatientDiagnose label,

#modalPatientUnbekannt label,

#modalCheckliste label,

#modalPatient label,

#modalBeds label,

#modalLage label,

#modalEinsatz label {

    font-size: 12px;

    color: var(--label-form); /*mmmmm */

}





#modalTerminGenerator input,

#modalTerminGenerator textarea,

#modalTerminGenerator select,

#modalTermineinsatz input,

#modalTermineinsatz textarea,

#modalTermineinsatz select,

#modalPatientCore input,

#modalPatientTransport input,

#modalPatientDiagnose input,

#modalPatientUnbekannt input,

#modalPatientCore textarea,

#modalPatientTransport textarea,

#modalPatientDiagnose textarea,

#modalPatientUnbekannt textarea,

#modalPatientCore select,

#modalPatientTransport select,

#modalPatientDiagnose select,

#modalPatientUnbekannt select,

#modalCheckliste input,

#modalCheckliste textarea,

#modalCheckliste select,

#modalNeuerBeleg select,

#modalEinsatz input,

#modalEinsatz textarea,

#modalEinsatz select,

#modalBeds input,

#modalBeds textarea,

#modalBeds select,

#modalLage input,

#modalLage textarea,

#modalLage select,

#modalPatient input,

#modalPatient textarea,

#modalPatient select {

    width: 100%;

    padding: 6px;

    margin-bottom: 8px;

    margin-top: 2px;

    border-radius: 8px;

    border: 1px solid rgba(148,163,184,0.5);

    background: rgba(36,36,36,0.9);

    color: var(--text-main);

    font-size: 13px;

}



#modalPatientCore textarea,

#modalPatientTransport textarea,

#modalPatientDiagnose textarea,

#modalPatientUnbekannt textarea,

#modalPatientCore textarea,

#modalCheckliste textarea,

#modalPatient textarea,

#modalBeds textarea,

#modalLage textarea,

#modalEinsatz textarea

{

    resize: vertical;

}



.modal-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 5px 8px;

}

.modal-grid-full {

    grid-column: 1 / -1;

}



.modal-actions {

    margin-top: 10px;

    display: flex;

    gap: 10px;

    justify-content: flex-end;

}



@media (max-width: 900px) {

    .modal-grid { grid-template-columns: 1fr; }

}



/* -----------------------------

  Geschlecht-Auswahl  Patienten

-------------------------------*/



.gender-group {

    display: flex;

    gap: 6px;

}



.gender-group button {

    flex: 1;

    padding: 8px;

    border-radius: 8px;

    border: 1px solid rgba(148,163,184,.4);

    background: rgba(30,30,30,.9);

    color: var(--text-main);

    font-weight: 600;

}



.gender-group button.active {

    background: #16a34a;

    border-color: #06731a;

    color: #fff;

}



/* -----------------------------

    Kategorie-Auswahl  Patienten

-------------------------------*/



.sichtung-group-first {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 8px;

}

.sichtung-group {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

}



.sichtung-btn, .sichtung-btn2 {

    padding: 10px 6px;

    font-weight: 600;

    border-radius: 6px;

    text-align: center;

    cursor: pointer;

    background: rgba(30,30,30,0.9);

    color: inherit;          /* Standardfarbe */

    border: 1px solid;       /* Rahmenfarbe wird durch Kategorie gesetzt */

}



/* Rahmenfarbe für jede Kategorie */

.sichtung-red    { border-color: #ef4444; color:#ef4444; }

.sichtung-yellow { border-color: #facc15; color:#facc15; }

.sichtung-green  { border-color: #22c55e; color:#22c55e; }

.sichtung-blue   { border-color: #3b82f6; color:#3b82f6; }

.sichtung-black  { border-color: #000; color:#aaa; }

.sichtung-psnvb  { border-color: #940496; color:#E493E5; }

.sichtung-psnve  { border-color: #E493E5; color:#E493E5; }

.sichtung-unverletzt{ border-color: rgba(220,220,220,0.5); #000; }

.sichtung-unknown{ border-color: rgba(250,250,250,0.5); #000; }



/* Aktiver Button: volle Farbe als Hintergrund, Text weiß */

.sichtung-btn.active.sichtung-red, .sichtung-btn2.active.sichtung-red    { background-color: #ef4444; color:#fff; }

.sichtung-btn.active.sichtung-yellow, .sichtung-btn2.active.sichtung-yellow { background-color: #facc15; color:#000; }

.sichtung-btn.active.sichtung-green, .sichtung-btn2.active.sichtung-green  { background-color: #22c55e; color:#fff; }

.sichtung-btn.active.sichtung-blue, .sichtung-btn2.active.sichtung-blue   { background-color: #3b82f6; color:#fff; }

.sichtung-btn.active.sichtung-black, .sichtung-btn2.active.sichtung-black  { background-color: #000; color:#fff; }

.sichtung-btn.active.sichtung-psnvb, .sichtung-btn2.active.sichtung-psnvb  { background-color: #940496; color:#fff; }

.sichtung-btn.active.sichtung-psnve, .sichtung-btn2.active.sichtung-psnve { background-color: #E493E5; color:#000; }

.sichtung-btn.active.sichtung-unverletzt, .sichtung-btn2.active.sichtung-unverletzt { background-color: rgba(220,220,220,0.9); color:#000; }

.sichtung-btn.active.sichtung-unknown, .sichtung-btn2.active.sichtung-unknown { background-color: rgba(250,250,250,0.9); color:#000; }









/*-------------------------------------

  Nach dem Speichern eine Bestätigung

-------------------------------------*/



.save-status {

    position: fixed;

    bottom: 16px;

    right: 16px;

    padding: 10px 14px;

    border-radius: 8px;

    font-weight: 600;

    z-index: 9999;

    box-shadow: 0 6px 20px rgba(0,0,0,.25);

}



.save-status.success { background:#16a34a; color:#fff; }

.save-status.offline { background:#f59e0b; color:#000; }

.save-status.sync    { background:#3b82f6; color:#fff; }

.save-status.error   { background:#dc2626; color:#fff; }

.hidden { display:none; }



/*==========================================

  Lagen und UHS

============================================*/



.tile-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

}



.tile{

    width:250px;

    padding:12px;

    border:0;                          /* kein sichtbarer Rahmen */

    border-radius:12px;

    cursor:pointer;



    /* Farbverlauf oben/unten */

    background: linear-gradient(to bottom, var(--tile-top), var(--tile-bot));

    color: inherit;



    /* 3D-Schattierung + Tiefe */

    box-shadow:

        /* feine Kanten am Button */

        0 1px 0 rgba(255,255,255,.10) inset,

        0 -1px 0 rgba(0,0,0,.16) inset,              /* feine Kante unten */



        /* heller, naher Schatten (Beginnt weich) */

        0 3px 8px rgba(0,0,0,.18),



        /* tieferer, weicher Schatten */

        0 14px 26px rgba(0,0,0,.22);









    transform: translateY(-1px);

    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;

}



/* Hover-Vorschlag: leicht anheben + minimal heller */

.tile:hover{

    transform: translateY(-3px);

    filter: brightness(1.06);

    box-shadow:

        0 1px 0 rgba(255,255,255,.12) inset,

        0 -1px 0 rgba(0,0,0,.14) inset,

        0 6px 14px rgba(0,0,0,.24),

        0 20px 34px rgba(0,0,0,.22);

}



/* Active: unten 6px grüner Rand (als Leiste), sonst wie gehabt */

.tile.active{

    color:#fff;



    /* Grüner "Rand" unten als inset-shadow (robust, ohne Border) */

    box-shadow:

        0 1px 0 rgba(255,255,255,.08) inset,

        0 -1px 0 rgba(0,0,0,.18) inset,

        0 -6px 0 0 var(--active-green) inset,          /* 6px grün unten */

        0 8px 0 var(--shadow-base),

        0 14px 22px rgba(0,0,0,.45);



    transform: translateY(-2px);

}



/* Active + Hover: etwas stärker */

.tile.active:hover{

    transform: translateY(-4px);

    filter: brightness(1.07);

}



/* Typo */

.tile-title{ font-weight:800; color: #ddd;}

.tile-sub{ font-size:.8em; opacity:.7; }















/* =========================

   UHS Dropdown – Dark Mode

========================= */



#bhpNameSelect, #bhpNameSelectBetten{

    height: 35px;

    min-width: 320px;

    padding: 0 12px;



    background-color: #1f1f1f;

    color: #e0e0e0;



    border: 1px solid #444;

    border-radius: 8px;



    font-size: 14px;

    font-weight: 500;



    box-shadow: 0 2px 6px rgba(0,0,0,0.4);



    cursor: pointer;

    outline: none;



    transition:

        background-color 0.2s ease,

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}



/* Hover */

#bhpNameSelect:hover, #bhpNameSelectBetten:hover {

    background-color: #262626;

    border-color: #666;

}



/* Fokus (Klick / Tab) */

#bhpNameSelect:focus, #bhpNameSelectBetten:focus {

    background-color: #262626;

    border-color: #4da3ff;

    box-shadow: 0 0 0 2px rgba(77,163,255,0.3);

}



/* =========================

   Dropdown-Liste (Optionen)

========================= */



#bhpNameSelect option, #bhpNameSelectBetten option {

    background-color: #262626;

    color: #e0e0e0;

    font-size: 14px;

}



/* Optgroup Titel */

#bhpNameSelect optgroup, #bhpNameSelectBetten optgroup {

    background-color: #1c1c1c;

    color: #9fc5ff;

    font-style: normal;

    font-weight: 600;

}



/* Option Hover (Browserabhängig, best effort) */

#bhpNameSelect option:hover, #bhpNameSelectBetten option:hover {

    background-color: #3a3a3a;

}



/* Disabled / Platzhalter */

#bhpNameSelect option[value=""], #bhpNameSelectBetten option[value=""] {

    color: #888;

}





/*==============================

Variablenübersicht in der Sidebar

================================*/

.status-list {

    display: flex;

    flex-direction: column;

    gap: 6px;

    font-size: 13px;

}



.status-line {

    display: grid;

    grid-template-columns: 80px 1fr; /* Labelbreite fix → Values bündig */

    align-items: center;

}



/* Keine Einschränkung für EM und Einsätze */

.status-val.status-ok {

    color: #4ade80;

}



/* Eingeschränkte Sicht */

.status-val.status-restricted {

    color: #f87171;

}



.status-key {

    color: #aaa;

    font-size: 11px;

    text-transform: uppercase;

}



.status-val {

    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}







/*==================================

 NEU: Login Modal

 ==================================*/

/* Modal Overlay */

.modal {

    display: none;

    position: fixed;

    z-index: 9999;

    left: 0; top: 0;

    width: 100%; height: 100%;

    background: rgba(40,40,40,0.5);

    justify-content: center;

    align-items: center;

}



/* Modal Inhalt */

.modal-content.login-card {

    /* Farbverlauf */

    background: linear-gradient(145deg, #3a3a3a, #2e2e2e);



    padding: 20px 30px;

    border-radius: 12px;

    width: 320px;



    /* 3D Effekt */

    border: 1px solid #4a4a4a;

    box-shadow:

        0 4px 12px rgba(0,0,0,0.3),  /* äußerer Schatten */

        inset 0 2px 4px rgba(255,255,255,0.05); /* leichter innerer Schatten */



    display: flex;

    flex-direction: column;

    gap: 15px;



    /* Optional: sanfte Übergänge für Hover oder Fokus */

    transition: transform 0.1s ease, box-shadow 0.2s ease;

}



/* Optional: leichter "Hover-Effekt" für Tiefe */

.modal-content.login-card:hover {

    transform: translateY(-2px);

    box-shadow:

        0 6px 16px rgba(0,0,0,0.35),

        inset 0 2px 4px rgba(255,255,255,0.05);

}



/* Überschrift */

.modal-content.login-card h2 {

    margin: 0 0 10px;

    text-align: center;

    color: #f0f0f0;

}



/* Form Row */

.modal-content.login-card .form-row {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



/* Labels */

.modal-content.login-card label {

    font-weight: bold;

    color: #e0e0e0;

}



/* Inputs */

.modal-content.login-card input {

    padding: 8px 10px;

    border-radius: 6px;

    border: 1px solid #555;

    background-color: #2b2b2b;

    color: #fff;

    font-size: 14px;

    outline: none;

    transition: border 0.2s ease, box-shadow 0.2s ease;

}



.modal-content.login-card input:focus {

    border-color: #2563eb;

    box-shadow: 0 0 4px #2563eb;

}



/* Buttons */

.modal-content.login-card button {

    padding: 10px;

    background-color: #2563eb;

    color: #fff;

    border: 1px solid #1d4ed8;

    border-radius: 6px;

    font-size: 16px;

    cursor: pointer;

    box-shadow: 0 2px 4px rgba(0,0,0,0.2);

    transition: background-color 0.2s ease, transform 0.1s ease;

}



.modal-content.login-card button:hover {

    background-color: #1e40af;

    transform: translateY(-1px);

}



/* Login Meldung */

.login-message {

    text-align: center;

    font-weight: bold;

    min-height: 18px;

    color: #fff;

}



/*==========================

  die Tafel als Hintergrund

===========================*/



#lageStatusCardPicture {

    position: relative;

    padding: 20px;

     z-index: 1;

}



#lageStatusCardPicture::before {

    content: "";

    position: absolute;

    inset: 0;

    background: url("../../icons/tafel.png") no-repeat center;

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;   /* oder: cover */

    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.2);

    transition: background-color 0.2s ease, transform 0.1s ease;

    opacity: 0.38;       /* Stärke des Hintergrundbildes */

     z-index: -1;



    border: 1px solid #4a4a4a;

    box-shadow: 0 10px 25px rgba(0,0,0,0.45);



}



/*Statisik Box*/

.statistik-box {

    position: relative;



    margin-bottom: 16px;



    border-radius: 0 0 8px 8px;

    border: 1px solid #6a6a6a;

    border-top: none;



    background: linear-gradient(

        to bottom,

        #343434 0%,

        #2f2f2f 60%,

        #2d2d2d 100%

    );



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,0.04),

        0 1px 4px rgba(0,0,0,0.25);



    /* Platz für Header */

    padding: 42px 12px 12px;

}





.statistik-header {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;



    height: 30px;

    padding: 0 12px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    background: linear-gradient(

        to bottom,

        #2b2b2b 0%,

        #262626 100%

    );



    border-top: 1px solid #6a6a6a;

    border-bottom: 1px solid rgba(255,255,255,0.08);



    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.02em;

    color: #e5e7eb;

}



.bhp-name {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.bhp-status {

    font-weight: 600;

    font-size: 12px;

}





.statistik-box > h3 {

    margin-top: 0;

    margin-bottom: 8px;

    font-size: 1.1em;

}





/*=============================

 Statistik für Betten

 =============================*/



 .bed-stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 12px;

}







.bed-card.green  { border-color:#22c55e; }

.bed-card.yellow { border-color:#facc15; }

.bed-card.red    { border-color:#ef4444; }











.offline-banner {

    background:#b91c1c;

    color:#fff;

    padding:2px;

    text-align:center;

    font-weight:bold;

}

.online-banner {

    color:#3EDA08;

    padding:8px;

    text-align:center;

    font-weight:bold;

}

.hidden {

    display:none;

}







/*=================================

 Bettenübersicht - Detail

 ==================================*/



 .bed-title {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;



    width: 100%;

    padding: 8px 12px;   /* ← WICHTIG: eigener Innenabstand */

    box-sizing: border-box;



    font-weight: 600;

    color: #e5e7eb;

}



/* Linien dürfen über die Textbreite hinaus */

.bed-title::before,

.bed-title::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    height: 1px;

}



.bed-title::before {

    top: 0;

    background: rgba(255,255,255,0.08);

}



.bed-title::after {

    bottom: 0;

    background: rgba(0,0,0,0.45);

}



/* Counter bleibt garantiert in der Box */

.bed-counter {

    font-weight: 500;

    font-size: 12px;

    opacity: 0.9;

    white-space: nowrap;

    flex-shrink: 0; /* verhindert Zusammendrücken */

}









.bed-numbers { font-size:13px; opacity:0.9; }







.bed-stats-grid-detail {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 12px;

}



.bed-card-detail {

    position: relative;

}





.bed-card-detail.detail {

    flex: 1 1 350px;   /* 🔥 min 350px, wächst aber */

    max-width: 100%;  /* Sicherheit */

}





.bed-row {

    width: 100%;

    box-sizing: border-box;

    padding: 6px 0;

    border-bottom: 1px solid rgba(255,255,255,0.08);

}



.bed-row-inner {

    display: flex;

    align-items: flex-start;

    gap: 10px;

}





.pat-left {

    display: flex;

    flex-direction: column;

}



.pat-name {

    font-weight: 600;

}



.pat-diagnose {

    font-size: 0.9em;

    color: #666;

}





.pat-row-left {

    display: flex;          /* Icon und Text nebeneinander */

    align-items: center;    /* vertikal zentrieren */

    gap: 8px;               /* Abstand zwischen Icon und Text */

    padding-left: 0;    /* sicherstellen, dass es bündig links ist */

}



.pat-text {

    flex: 1;            /* Text nimmt Restbreite */

}



.rtw-icon {

    width: 24px;            /* gewünschte Icon-Größe */

    height: 24px;

    flex-shrink: 0;         /* verhindert, dass das Icon schrumpft */

}







.frei {

    color: #0a0;

    font-weight: bold;

}



.txt-red { color: #c00; margin-left: 10px; }

.txt-green { color: #080; margin-left: 10px; }



.rtw-icon {

    width: 22px;

}





.bhp-group-detail {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-content: flex-start;   /* WICHTIG - direkt oben, unterhalb des Titels*/

}





.bhp-group-detail > h3 {

    flex: 0 0 100%;

    font-size: 0.95em;   /* kleiner */

    font-weight: 600;   /* optional */

    margin-bottom: 6px;

}







@media (max-width: 600px) {

    .bed-card-detail.detail {

        flex: 1 1 100%;

    }

}



.bed-title {

    display: inline-flex;

    align-items: baseline;

    gap: 6px;

}



.bed-counter {

    font-size: 0.9em;



}



/*======================================

 Custom Option - select für die Header

 =======================================*/



/* Wrapper */

.custom-select {

    position: relative;

    min-width: 240px;

    display: inline-block;

}



/* Button (sichtbar) */

.custom-select-btn {

    width: 100%;

    padding: 0 38px 0 14px; /* Platz für Pfeil rechts */

    height: var(--control-h);

    border-radius: 12px;

    background: linear-gradient(

        to bottom,

        #353535 0%,

        #2f2f2f 60%,

        #2d2d2d 100%

    );

    color: var(--text-main);

    font-size: 13px;

    text-align: left;

    border: 1px solid rgba(255,255,255,0.06);

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.04),

        0 6px 16px rgba(0,0,0,0.35);

    line-height: normal;

}



/* Pfeil rechts */

.custom-select-btn::after {

    content: "";

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 6px solid #cbd5e1;

    margin-left: 10px;

}



/* Hover / Fokus */

.custom-select-btn:hover {

    background: linear-gradient(

        to bottom,

        #3f3f3f 0%,

        #353535 60%,

        #2f2f2f 100%

    );

}

.custom-select-btn:focus {

    outline: none;

    border-color: rgba(96,165,250,0.5);

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.05),

        0 0 0 2px rgba(96,165,250,0.35),

        0 6px 16px rgba(0,0,0,0.35);

}



/* Optionsliste */

.custom-select-options {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    max-height: 400px;

    overflow-y: auto;

    background: #2d2d2d;      /* angepasst auf dunkles Theme */

    color: #e5e7eb;            /* Schriftfarbe anpassen */

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 12px;

    margin-top: 4px;

    display: none;

    z-index: 10;

    padding: 4px 0;

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.04),

        0 6px 16px rgba(0,0,0,0.35);

}



/* Optionsitems */

.custom-select-options li {

    padding: 6px 14px;

    cursor: pointer;

    list-style: none;

    white-space: nowrap;

    border-radius: 8px; /* leichte Abrundung für Items */

}



.custom-select-options li:hover {

    background: linear-gradient(

        to bottom,

        #3f3f3f 0%,

        #353535 60%,

        #2f2f2f 100%

    );

}





.filter-row input[type="checkbox"] {

    accent-color: #60a5fa;

    transform: scale(1.05);

    margin-right: 6px;

}





/*===========================

 Date Time "jetzt" Button

 ==========================*/



 .datetime-wrap {

    display: flex;

    gap: 6px;

    align-items: center;

}



/*===========================

 Für Showtoast-Meldungen

 ==========================*/



#toast-container {

    position: fixed;

    bottom: 24px;

    right: 24px;

    z-index: 3000;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.toast {

    min-width: 280px;

    max-width: 420px;

    padding: 12px 16px;

    border-radius: 6px;

    background: #2e2e2e;

    color: #fff;

    box-shadow: 0 6px 20px rgba(0,0,0,0.4);

    font-size: 14px;

    line-height: 1.4;

    opacity: 0;

    transform: translateY(20px);

    animation: toast-in 0.3s ease forwards;

}



.toast.success {

    border-left: 4px solid #3ccf7f;

}



.toast.error {

    border-left: 4px solid #ff5c5c;

}



.toast small {

    display: block;

    opacity: 0.7;

    margin-top: 4px;

}



@keyframes toast-in {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes toast-out {

    to {

        opacity: 0;

        transform: translateY(20px);

    }

}





/* icons für das Menü Betroffene */



.betroffenen-menu-item {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 6px 12px;

    cursor: pointer;

}



.betroffenen-menu-item:hover {

    background: #444;

}



.menu-icon {

    width: 24px;

    height: 24px;

    object-fit: contain;

    flex-shrink: 0;

    transform: translateY(4px);

    margin-right: 6px;

}







.modal-innerK {

    background: #1e1e1e;

    box-shadow: 0 8px 30px rgba(0,0,0,0.6);

    border-radius: 8px;

    padding: 30px;

}





/*=============================

 autocomplete-Listen

 =============================*/

 .autocomplete {

    position: relative;

}



.ac-list {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: #1f2933;

    border: 1px solid #374151;

    border-radius: 6px;

    margin-top: 4px;

    max-height: 260px;

    overflow-y: auto;

    z-index: 9999;

    display: none;



    box-shadow: 0 10px 25px rgba(0,0,0,0.4);

}



.ac-item {

    padding: 8px 10px;

    cursor: pointer;

    border-bottom: 1px solid rgba(255,255,255,0.05);

}



.ac-item:hover {

    background: #374151;

}



.ac-highlight {

    color: #7dd3fc; /* hellblau */

    font-weight: 600;

}



.ac-item .hl {

    color: #7dd3fc;

    font-weight: 600;

}



.ac-item.active {

    background: #2563eb;

    color: #fff;

}



/* ===== Einsätze-Seite Layout =====

    Beide Cards nebeneinander und

    die Einsatzliste scrollbar

    Standard: zwei Spalten (Karte + Liste)

*/

.einsaetze-layout {

    display: grid;

    grid-template-columns: minmax(420px, 1fr) minmax(620px, 1.9fr);

    gap: 12px;



    height: 100%;

    min-height: 0;

    align-content: start; /*dem Grid sagen, dass alles oben kleben soll (gegen „zentrierte“ Lücken):*/

    align-items: stretch;

}





/* Wenn Karte ausgeblendet: nur noch eine Spalte, rechte Card wird voll breit */

.einsaetze-layout.map-hidden {

    grid-template-columns: 1fr;

}





.einsaetze-layout > .card {

    min-height: 0;

    height: 100%;

}



/*

Viewport

└── App-Layout (flex)

    └── main (kein Scroll)

        └── grid (.einsaetze-layout)

            ├── Card links (fix)

            └── Card rechts

                └── einsaetzeList (Scroll)

*/



/* Nur die Liste scrollt

    Damit das Menü immer vollständig sichtbar ist,

    min-height setzen mmmm

*/

.einsaetze-list {

    flex: 1 1 auto;

    min-height: 560;

    overflow-y: auto;

    margin-top: 8px;

}





/* Optional: schöner Scrollbar-Look */

.einsaetze-list::-webkit-scrollbar {

    width: 8px;

}

.einsaetze-list::-webkit-scrollbar-thumb {

    background: #555;

    border-radius: 4px;

}





/* das bisherige .main für die Einsätze entschärfen

, overflow hat für ein Scrollen des main gesorgt,

das muss für die Einsätze  deaktiviert werden

*/

.main.einsaetze-main {

    overflow: hidden;

}



/* Minimierter Zustand (per JS-Klasse)

    sind die Cards nebeneinander,

    wird die Breite verringert,

    sonst die höhe (Media Bereich)

*/

.map-area-einsatz.is-minimized {

    width: 200px;                /* gewünschte Mini-Breite */

}







.map-area-einsatz {

    position: relative;

    width: 100%;

    height: 100%;

    min-height: 400px;   /* falls Card mal wenig Inhalt hat */

}



.map-area-einsatz iframe {

    width: 100%;

    height: 100%;

    border: none;

}





/* Automatisch untereinander auf schmalen Bildschirmen

   jede Card bekommt eine sinnvolle Mindesthöhe

   Scroll bleibt nur in der Liste */



@media (max-width: 1000px) {

    .einsaetze-layout {

        grid-template-columns: 1fr;

        height: auto;          /* nicht auf 100% klemmen */

    }



    .einsaetze-layout > .card {

        min-height: auto;      /* statt 70vh → nur Inhaltshöhe */

        height: auto;

    }



    .main.einsaetze-main {

        overflow-y: auto;      /* ganzer Bildschirm darf scrollen */

    }



    .map-area-einsatz.is-minimized {

        height: 80px;

    }

}





/* Optional: die alte Klasse, falls woanders verwendet */

iframe.mapiframe {

        width: 100%;

        height: 520px;

        border: none;

}







/* Optional: optisches Feedback (abgedunkelt + Icon-Eindruck) */

.map-area-einsatz.is-minimized iframe {

    filter: saturate(0.6) brightness(0.9);

}



/* Optional: bei Hover kurz etwas aufhellen, wenn minimiert */

.map-area-einsatz.is-minimized:hover iframe {

    filter: saturate(0.8) brightness(1);

}

/* Damit die Map (Karte) den Restplatz bekommt

  und rechts keinen zusätzlichen Scrollbalken hat:*/

.card--fill .card-content {

    display: flex;

    flex-direction: column;

    min-height: 0;

}





/* =============================

   Einsätze – Gruppenheader (wie sk-head)

================================*/



/* optionaler Rahmen um Gruppe (Header + Body) */

.einsatz-group{

  border: 1px solid rgba(255,255,255,.10);

  border-radius: 14px;

  overflow: hidden;

  margin: 10px 0;

  background: rgba(255,255,255,.03);

}



/* Kopfzeile klickbar + Pointer */

.einsatz-head{

  display:flex;

  align-items:center;

  gap:10px;

  padding:10px 12px;

  cursor:pointer;           /* WICHTIG: Pointer */

  user-select:none;

}

.einsatz-head:hover{ filter:brightness(1.06); }



/* Pfeil links (wie sk-arrow) */

.einsatz-arrow{

  width:16px;

  opacity:.7;

}

.einsatz-group[data-open="0"] .einsatz-arrow::before{ content:"\25B6"; } /* ▶ */

.einsatz-group[data-open="1"] .einsatz-arrow::before{ content:"\25BC"; } /* ▼ */



/* Chip (abgedunkeltes Rot + weiß) */

.einsatz-chip{

  display:inline-block;

  padding:4px 10px;

  border-radius:999px;

  font-weight:850;

  font-size:.90em;

  letter-spacing:.2px;



  background: rgba(160, 30, 30, .55); /* abgedunkeltes Rot */

  border: 1px solid rgba(255,255,255,.12);

  color: #fff;

}



/*==============================

 Farben für die Qualifikation

===============================*/

.einsatz-chip.q0{

    background: rgba(250, 250, 30, .55); /* abgedunkeltes Rot */

}

.einsatz-chip.q1{

    background: rgba(250, 50, 50, .55); /* abgedunkeltes Rot */

}

.einsatz-chip.q2{

    background: rgba(20, 150, 10, .55); /* abgedunkeltes Rot */

}

.einsatz-chip.q3{

    background: rgba(50, 50, 250, .55); /* abgedunkeltes Rot */

}









/* Count rechts */

.einsatz-count{

  margin-left:auto;

  opacity:.75;

  font-weight:700;

}



/* Body – Einsätze in eigener Box unterhalb */

.einsatz-body{

  padding:10px 12px;

  border-top: 1px solid rgba(255,255,255,.08);

}



/* für bündige Toggle-Zeichen

   in der Einsatzliste für das Gruppieren

*/

.group-toggle {

    display:inline-block;

    width:1em;

    text-align:center;

    color:#10b981; /* hellgrün */

    cursor:pointer;

}



/*=============================================

  Button "Details" (Lupe) unterhalb der Einsatznummer

  in der Einsatzliste

==============================================*/

.einsatz-detail-icon-wrapper{

    margin-top:0px;

    display:flex;

    justify-content:center;

}



.einsatz-detail-icon{

    background:rgba(255,255,255,0.15);

    border:1px solid rgba(255,255,255,0.35);

    color:inherit;

    width:26px;

    height:26px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    cursor:pointer;

    transition:all .18s ease;

    padding:0;

}



.einsatz-detail-icon:hover{

    background:rgba(255,255,255,0.35);

    transform:scale(1.08);

}







/*=============================================

  neues CSS für die erweiterbare Einsatzliste

==============================================*/

/* =================================

   Einsatz-Details inline (in Liste)

/*=============================================*/

.einsatz-details-toggle{

  margin-top: 8px;

  display:flex;

  justify-content:flex-end;

  gap:8px;

}



.btn-details{

  cursor:pointer;

  border:1px solid rgba(255,255,255,0.14);

  background: rgba(255,255,255,0.04);

  color:#e5e7eb;

  padding:6px 10px;

  border-radius:10px;

  font-size:12px;

  font-weight:700;

}

.btn-details:hover{ background: rgba(255,255,255,0.07); }



.einsatz-details-panel{

  margin-top: 10px;

  border:1px solid #4a4a4a;

  background:#383838;

  border-radius:12px;

  padding:10px;

}



.einsatz-details-grid{

  display:grid;

  grid-template-columns: 1fr;

  gap:12px;

}



@media (min-width: 1100px){

  .einsatz-details-grid{

    grid-template-columns: 1fr 1fr;

  }

}



.detail-mini-header{

  font-weight:700;

  color:#e5e7eb;

  margin:0 0 8px 0;

}



/* scroll nur bei Protokoll (wie gehabt) */

.detail-mini-scroll{

  max-height:220px;

  overflow:auto;

  border:1px solid rgba(255,255,255,0.12);

  background: rgba(0,0,0,0.10);

  border-radius:10px;

  padding:8px;

}







/*=========================================

  Bettenliste im Patienten-Eingabeformular

  3 bündige Spalten

==========================================*/

/* ===== Beds Dropdown (Dark) ===== */



.beds-dropdown {

    position: relative;

}



/* Trigger (geschlossenes Dropdown) */

.beds-trigger{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 12px;



    background:#1E1E1E;

    color:#e5e7eb;



    border:1px solid #444;

    border-radius:10px;

    cursor:pointer;

}



.beds-trigger:hover{

    background:#303030;

}



.beds-chevron{

    opacity:0.8;

}



/* Panel (geöffnet) */

.beds-panel{

    margin-top:6px;

    background:#333;

    border:1px solid #444;

    border-radius:10px;

    box-shadow:0 12px 28px rgba(0,0,0,0.6);

    overflow:hidden;

}



/* Tabelle */

.beds-head,

.beds-row{

    display:grid;

    grid-template-columns: 34px 1.6fr 1.2fr 0.5fr;

    gap:10px;

    align-items:center;

}



/* Header */

.beds-head{

    padding:8px 10px;

    font-weight:600;

    color:#f3f4f6;

    background:#111;

    border-bottom:1px solid #444;

}



/* Body */

.beds-body{

    max-height:220px;

    overflow:auto;

    background:#222;

}



/* Zeilen */

.beds-row{

    padding:8px 10px;

    color:#e5e7eb;

    border-bottom:1px solid #3f3f3f;

    cursor:pointer;

}



.beds-row:last-child{

    border-bottom:none;

}



.beds-row:hover{

    background:#3a3a3a;

}



/* eigenes Bett */

.beds-row.is-mine{

    outline:2px solid rgba(220,38,38,0.55);

    border-radius:8px;

    margin:6px;

}



/* ausgewählte Zeile */

.beds-row.is-selected{

    background:rgba(37,99,235,0.35);

}



/* Radio Button etwas dezenter */

.beds-row input[type="radio"]{

    accent-color:#60a5fa;

}



.beds-row.beds-none {

    background: #1f1f1f;

    font-style: italic;

}



.beds-row.beds-none:hover {

    background: #2d2d2d;

}



.beds-row.is-selected {

    background: #3a3a3a;

    outline: 1px solid #555;

}





/*=================================

  Bettenübersicht beim Erzeugen

  neuer Betten

=================================*/



.beds-overview {

    margin-bottom: 1rem;

    padding: 0.75rem 1rem;

    border-radius: 0.75rem;

    background: #202020;          /* sehr dunkles Blau/Anthrazit */

    color: #e5e7eb;               /* helles Grau */

    box-shadow: 0 12px 25px rgba(0,0,0,0.45);

    border: 1px solid #404040;

    font-size: 0.85rem;

}



.beds-overview-title {

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #9ca3af;

    margin-bottom: 0.35rem;

}



.beds-overview-row {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding: 0.25rem 0;

    border-top: 1px solid #111111;

}



.beds-overview-row:first-of-type {

    border-top: none;

}



.beds-overview-bhp {

    font-weight: 600;

    color: #e7e7e7;

    margin-right: 0.75rem;

    white-space: nowrap;

}



.beds-overview-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 0.25rem;

    justify-content: flex-end;

}



.beds-tag {

    padding: 0.1rem 0.5rem;

    border-radius: 999px;

    border: 1px solid #414141;

    background: #161616;

    font-size: 0.7rem;

    color: #d5d5d5;

}



.beds-tag small {

    opacity: 0.7;

    font-size: 0.65rem;

    margin-left: 0.15rem;

}



.beds-overview-loading,

.beds-overview-empty,

.beds-overview-error {

    font-size: 0.8rem;

    color: #9ca3af;

    display: flex;

    align-items: center;

    gap: 0.4rem;

}



.beds-overview-loading .dot {

    width: 6px;

    height: 6px;

    border-radius: 999px;

    background: #22c55e;

    animation: beds-pulse 1s infinite alternate;

}



@keyframes beds-pulse {

    from { opacity: 0.4; transform: scale(0.9); }

    to   { opacity: 1;   transform: scale(1.2); }

}





/*============================================

  Liste der aktiven Benutzer in der Sidebar

  ==========================================*/





  .sidebar-active-users {

    margin-top: 1rem;

    padding: 0.75rem 0.75rem 0.85rem;

    border-radius: 0.9rem;

    background: #2d2d2d; /* sehr dunkles Blau/Anthrazit */

    border: 1px solid #4a4a4a;

    box-shadow: 0 10px 25px rgba(0,0,0,0.45);

    font-size: 0.8rem;

    color: #e5e7eb;

}



.active-users-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 0.5rem;

}



.active-users-title {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: .12em;

    color: #9ca3af;

}



.active-users-count {

    font-size: 0.75rem;

    background: #16a34a;

    color: #262626;

    border-radius: 999px;

    padding: 0.1rem 0.55rem;

    font-weight: 600;

}



.active-users-list {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

    max-height: 380px;

    overflow-y: auto;

}



.active-user {

    display: flex;

    align-items: center;

    gap: 0.55rem;

    padding: 0.35rem 0.4rem;

    border-radius: 0.65rem;

    background: rgba(33,33,33,0.9);

    border: 1px solid rgba(55,65,81,0.7);

}



.active-user-avatar {

    width: 28px;

    height: 28px;

    border-radius: 999px;

    background: radial-gradient(circle at 30% 20%, #22c55e, #16a34a);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 0.8rem;

    color: #262626;

    flex-shrink: 0;

}



.active-user-meta {

    display: flex;

    flex-direction: column;

    gap: 0.05rem;

    min-width: 0;

}



.active-user-name {

    font-weight: 600;

    font-size: 0.8rem;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.active-user-login {

    font-size: 0.7rem;

    color: #9ca3af;

}



.active-user-time {

    font-size: 0.65rem;

    color: #6b7280;

}



.active-users-empty,

.active-users-error {

    font-size: 0.75rem;

    color: #9ca3af;

}



/* kleiner, dezenter Footer */

.sidebar-footer-small {

    margin-top: 0.75rem;

    font-size: 0.7rem;

    color: #9ca3af;

}





/*================================

checkbox "Fall erledigt"

in der Eingabemaske Patienten

================================*/

.toggle-btn{

    width:100%;

    padding:10px 14px;



    background:#7A1616;         /* dunkler Hintergrund */

    border:2px solid #6b7280;   /* hellgrauer Rahmen */

    border-radius:10px;



    color:#e5e7eb;              /* Text hell */

    font-size:15px;

    font-weight:600;

    cursor:pointer;



    transition:all .2s ease;

}



/* Hover */

.toggle-btn:hover{

    border-color:#9ca3af;

}



/* Aktiv */

.toggle-btn.active{

    border-color:#16a34a;

    color:#16a34a;

    background:#022c22;

}







/*=========================================

    Einsatz Menü oben die EinsatzNr zeigen

========================================*/

.einsatz-menu-header {

    padding: 6px 10px;

    font-weight: 600;

    font-size: 14px;

    color: #e5e7eb;

    border-bottom: 1px solid #444;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/*=====================================

   Wetter-Kachel in der Sidebar

   ===================================*/

/* ==== Wetter-Kachel in der Sidebar ==== */



.sidebar-weather {

    margin-top: 12px;

    padding: 10px 12px;

    border-radius: 10px;

    background:#2d2d2d !important;

    border: 1px solid rgba(148, 163, 184, 0.3);

    color: #e5e7eb;

    font-size: 13px;

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.weather-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 12px;

    color: #9ca3af;

}



.weather-title {

    text-transform: uppercase;

    letter-spacing: 0.08em;

    font-weight: 600;

    font-size: 11px;

}



.weather-location {

    font-weight: 500;

    color: #cbd5f5;

}



.weather-main {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

}



.weather-temp {

    font-size: 18px;

    font-weight: 600;

    line-height: 1;

}



.weather-meta {

    display: flex;

    align-items: center;

    gap: 6px;

    text-align: left;

}



.weather-icon {

    font-size: 20px;

}



.weather-desc {

    font-size: 12px;

    color: #e5e7eb;

}



.weather-footer {

    display: flex;

    justify-content: flex-end;

    font-size: 11px;

    color: #9ca3af;

    margin-top: 2px;

}



.weather-updated::before {

    content: 'Aktualisiert: ';

    color: #6b7280;

}



.weather-extra {

    display: flex;

    justify-content: space-between;

    gap: 6px;

    margin-top: 4px;

}



.weather-extra-item {

    flex: 1;

    padding: 4px 6px;

    border-radius: 999px;

    background: rgba(33, 33, 33, 0.9);

    border: 1px solid rgba(148, 163, 184, 0.4);

    display: flex;

    flex-direction: column;

    gap: 2px;

    text-align: center;

}



.weather-extra-label {

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: #9ca3af;

}



.weather-extra-value {

    font-size: 11px;

    font-weight: 500;

    color: #e5e7eb;

}



/* 3 Std-Vorhersage */



.weather-forecast {

    margin-top: 6px;

    padding-top: 4px;

    border-top: 1px solid rgba(31, 41, 55, 0.8);

}



.weather-forecast-title {

    font-size: 11px;

    color: #9ca3af;

    margin-bottom: 4px;

}



.weather-forecast-row {

    display: flex;

    gap: 6px;

}



.weather-forecast-item {

    flex: 1;

    padding: 4px 6px;

    border-radius: 10px;

    background: rgba(33, 33, 33, 0.9);

    border: 1px solid rgba(148, 163, 184, 0.4);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    font-size: 11px;

}



.weather-forecast-time {

    font-size: 10px;

    color: #9ca3af;

}



.weather-forecast-icon {

    font-size: 14px;

    line-height: 1;

}



.weather-forecast-text {

    font-size: 10px;

    color: #d1d5db;

}





/*========================

  Uhrzeit

  =====================*/



.clock-box {

    /*margin: 8px 14px 14px 14px;

    padding: 8px 10px;           */

    border-radius: 10px;



    background: transparent; /* 👈 komplett durchsichtig */

    border: 1px solid rgba(255,255,255,0.18);



    color: #cfcfcf;

    text-align: center;

    font-weight: 600;

    margin-bottom: 18px;

    margin-top: 10px;

}



/* Stunden & Minuten */

.clock-time {

    font-size: 1.85rem;

    font-weight: 300;

    letter-spacing: 1px;



    /* Ziffern mit gleicher Breite */

    font-variant-numeric: tabular-nums;

}



/* Sekunden */

.clock-seconds {

    font-size: 0.8rem;

    opacity: 0.75;

    margin-left: 6px;

    vertical-align: super;



    /* feste Breite → kein Wackeln */

    display: inline-block;

    width: 1.6em;

    text-align: left;



    font-variant-numeric: tabular-nums;

}





/* =========================================

   Sidebar-Sektionen (Lage, Wetter, Benutzer)

   Ausklappbar

   ========================================= */



.sidebar-section {

    margin: 0.5rem 0 0.2rem;

    border-radius: 0.9rem;

    border: 1px solid rgba(148, 163, 184, 0.25);

    background: #2d2d2d !important;

    overflow: hidden;

}



/* Header (Titel + Dreieck) */

.sidebar-section-header {

    width: 100%;

    padding: 0.45rem 0.75rem;

    border: none;

    outline: none;

    background: #262626 !important;

    color: #e5e7eb;

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: pointer;

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: .16em;

}



.sidebar-section-header:hover {

    background: linear-gradient(90deg, rgba(41,41,41,0.98), rgba(41,41,41,0.98));

}



.sidebar-section-title {

    font-weight: 600;

}



/* Dreieck rechts */

.sidebar-section-toggle {

    width: 1.1rem;

    height: 1.1rem;

    border-radius: 999px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.65rem;

    color: #d1d5db;

    background: rgba(50,50,50,0.85);

    border: 1px solid rgba(85,85,85,0.8);

    flex-shrink: 0;

}



.sidebar-section-toggle::before {

    content: "\25BE"; /* kleines schwarzes Dreieck nach unten */

    display: block;

    transform-origin: 50% 50%;

    transition: transform 0.18s ease-out;

}



/* Body – Inhalt der Sektion */

.sidebar-section-body {

    padding: 0.4rem 0.55rem 0.6rem;

    transition: max-height 0.2s ease-out, opacity 0.2s ease-out, padding-top 0.2s ease-out, padding-bottom 0.2s ease-out;

    max-height: 1000px; /* 'offen' (groß genug, dass alles reinpasst) */

    opacity: 1;

}



/* Einklappen */

.sidebar-section-body.collapsed {

    max-height: 0;

    opacity: 0;

    padding-top: 0;

    padding-bottom: 0;

    overflow: hidden;

}



/* Dreieck drehen, wenn zu */

.sidebar-section-header.collapsed .sidebar-section-toggle::before {

    transform: rotate(-90deg); /* Pfeil zeigt nach rechts */

}



/* Kleine Feinanpassungen, weil jetzt im Body */

.sidebar-section-body .sidebar-weather {

    margin-top: 0; /* vorher 12px; jetzt macht der Body den Abstand */

}



.sidebar-section-body .sidebar-active-users {

    margin-top: 0.15rem; /* etwas Luft zum Header */

}



/*==============================

  Die Rahmen für die Stärke

  in der WEinsatzmittelübersicht

===============================*/

.col-staerke {

    display: inline-flex;

    flex-direction: column;

    gap: 2px;

}



/* 4 Spalten für Header UND Zahlen */

.staerke-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(1.6em, auto));

    column-gap: 4px;

}



/* Header-Zeile */

.staerke-header span {

    text-align: center;

    font-size: 0.7rem;

    opacity: 0.75;

    letter-spacing: 0.3px;

}



/* Grundstil für die Zahlen-Kästchen */

.staerke-box {

    min-width: 1.6em;

    padding: 0 4px;

    text-align: center;

    border-radius: 4px;

    border: 1px solid #555555;

    background: #2d2d2d;         /* Fallback */

    color: #f9fafb;

    font-size: 0.78rem;

    line-height: 1.4;

    font-variant-numeric: tabular-nums;

}



/* Individuelle Hintergründe von links nach rechts */

.staerke-box.box1 { background: #244521; }

.staerke-box.box2 { background: #3f3f3f; }

.staerke-box.box3 { background: #3f3f3f; }

.staerke-box.box4 { background: #3f3f3f; }



.staerke-box.box1sum { background: #648561; }

.staerke-box.box2sum { background: #648561; }

.staerke-box.box3sum { background: #648561; }

.staerke-box.box4sum { background: #648561; }





/* Summen-Zeile der Kräfte */

.em-item.em-summary .status-circle-klein {

    background: transparent !important;

    border: 1px solid rgba(148, 163, 184, 0.4);

    color: inherit;

}







/*=================================

  2 zusätzliche Eingabefelder für

  EA und Ort oberhalb der Einsatzliste

  in der Filter Dropdown integriert

===================================*/

.filter-menu-separator {

    border-top: 1px solid rgba(148,163,184,0.35);

    margin: 6px 0;

}



.filter-menu-group {

    padding: 6px 10px 8px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.filter-menu-label {

    font-size: 11px;

    opacity: 0.7;

}



.filter-menu-input {

    font-size: 12px;

    padding: 4px 6px;

    border-radius: 4px;

    border: 1px solid rgba(148,163,184,0.5);

    background: #2d2d2d;

    color: #e5e7eb;

}





/*zwei Content-Inhalte, einer links, der andrere rechts*/

.row-links-rechts {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 4px;

}



/* Wenn hidden ignoriert wird: CSS-Override fixen */

[hidden] {

    display: none !important;

}



/* Damit die Einsatzliste nicht nur ganz schmal wird

   wie zuvor die Lagekarte, wenn die Lagekarte

   hidden wird.

   AChtung: Diese Reihenfolgen ist wichtig

*/



#cardLagekarteEinsatz[hidden] ~ #view-einsaetze,

#cardLagekarteEinsatz[hidden] ~ #view-dispo,

#cardLagekarteEinsatz[hidden] ~ #view-details {

    grid-column: 1 / -1;

}





/*

 Die Wache-Auswahl bei den Einsatzmitteln

 etwas aufhübschen

*/

.custom-select-options .wache-item {

    padding: 6px 10px;

}

.custom-select-options .wache-item:hover {

    background: rgba(255,255,255,0.04);

}

.custom-select-options .wache-all {

    border-bottom: 1px solid rgba(255,255,255,0.08);

    margin-bottom: 6px;

    padding-bottom: 6px;

}





/* Vertikales Tab-reiter-Menü */



/*================================

  Einsatz-Modal: Horizontale Tabs

=================================*/

/* Tabs im Einstzblatt jetzt oebn */

.einsatz-tabs{

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 12px;

    min-height: 0;

}



.einsatz-tablist{

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    gap: 8px;

    padding-right: 0;

    padding-bottom: 10px;

    border-right: none;

    border-bottom: 1px solid rgba(148,163,184,.25);

    overflow: visible;

}



.einsatz-tablist--top{

    align-items: center;

}



.einsatz-tab{

    appearance: none;

    border: 1px solid rgba(148,163,184,.25);

    background: rgba(255,255,255,.06);

    color: inherit;

    padding: 10px 12px;

    border-radius: 10px;

    cursor: pointer;

    text-align: left;

    opacity: .75;

}



.einsatz-tab:hover{ opacity: 1; }



.einsatz-tab.is-active{

    opacity: 1;

    background: rgba(255,255,255,.12);

    border-color: rgba(148,163,184,.45);

}



/* Panels */

.einsatz-panel{ display: none; }

.einsatz-panel.is-active{ display: block; }



/* Modale Eingabemaske: Höhe begrenzen, damit es nicht "zu groß" wird */

#modalEinsatz .modal-inner{

    width: min(1280px, 96vw);

    height: 780px;

    max-height: 90vh;

    display: flex;

    flex-direction: column;

}



#modalLage .modal-inner,

#modalPatient .modal-inner,

#modalCheckliste .modal-inner{

    height: 720px;

    max-height: 90vh;

    display: flex;

    flex-direction: column;

}



/* Der Formular-Inhalt soll scrollen können */

#modalEinsatz form#einsatzForm,

#modalPatient form#patientForm,

#modalCheckliste form#checklisteForm

{

    display: flex;

    flex-direction: column;

    min-height: 0; /* wichtig für flex + overflow */

    margin-left: 5px;



}



/* Form füllt Modal */

#modalCheckliste form,

#modalEinsatz form,

#modalPatient form {

    flex: 1;

    display: flex;

    flex-direction: column;

    min-height: 0;         /* extrem wichtig */

}



/* Tab-Layout + Panelbereich dürfen scrollen */

.einsatz-tabpanels{

    min-height: 0;

    overflow-y: auto;    /* Rechter Inhalt: HIER wird gescrollt */

    padding-right: 6px; /* Platz für Scrollbar */

    padding-left: 3px;

}



/* Optional: ein bisschen Luft zwischen Tabs und Actions */

#modalCheckliste .modal-actions,

#modalEinsatz .modal-actions,

#modalPatient .modal-actions

{

    flex: 0 0 auto;

}



.modal-grid.modal-grid-8{

    display: grid;

    grid-template-columns: repeat(8, minmax(0, 1fr));

    gap: 6px;

    align-items: start;

}



/* Einsatzblatt:

  Einsatzdaten und Patient 4-Spaltig

*/

.modal-grid.modal-grid-4{

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 6px;

    align-items: start;

}



.modal-grid.modal-grid-4 .modal-grid-full{

    grid-column: 1 / -1;

}



.modal-grid.modal-grid-4 > div{

    min-width: 0;

}



/* falls zu breit */

.modal-grid.modal-grid-4 input,

.modal-grid.modal-grid-4 select,

.modal-grid.modal-grid-4 textarea{

    width: 100%;

}



/* Responsive Breakpoints */

@media (max-width: 1250px){

    .modal-grid.modal-grid-4{

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



@media (max-width: 1100px){

    #modalEinsatz .modal-inner{

        width: min(1200px, 98vw);

    }



    .modal-grid.modal-grid-4{

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 700px){

    .modal-grid.modal-grid-4{

        grid-template-columns: 1fr;

    }



    .einsatz-tablist{

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 8px;

    }



    .einsatz-tab{

        white-space: nowrap;

    }

}





/*=====================================

Animation zum Einblenden der LAgekarte

======================================*/

/* Lagekarten-Card weiches Ein-/Ausblenden */

.card--lagekarte {

    overflow: hidden;

    opacity: 1;

    /*height: auto kann man nicht flüssig animieren.

    Trick: max-height auf einen sehr großen Wert setzen (z. B. 2000px).

    Solange Karte < 2000px hoch ist, sieht das aus wie „volle Höhe“ und klappt trotzdem weich zu.

    */

    max-height: 2000px;           /* groß genug für Inhalt */

    transform: scale(1);

    transition:

        opacity 0.25s ease,

        max-height 0.25s ease,

        transform 0.25s ease;

}



.card--lagekarte.is-hidden {

    /*die Card ist optisch weg

    und durch .map-hidden ist sie auch räumlich weg*/

    opacity: 0;

    max-height: 0;

    transform: scale(0.98);

}



/* ===========================================

   FIX 1: Einsätze-Main sauber als Flex-Spalte

   =========================================== */

.main.einsaetze-main {

    display: flex;

    flex-direction: column;

    /* oben/unten Padding kann man behalten, nur overflow hier steuern */

    overflow: hidden;  /* Desktop: nur die Liste scrollt */

}



/* Topbar nimmt nur so viel Platz wie nötig */

.main.einsaetze-main .topbar {

    flex: 0 0 auto;

}



/* Grid der Einsätze-Seite füllt den restlichen Bereich */

.main.einsaetze-main .einsaetze-layout {

    flex: 1 1 auto;

    display: grid;

    grid-template-columns: minmax(420px, 1fr) minmax(620px, 1.9fr);

    gap: 12px;



    min-height: 0;

    /* WICHTIG: Inhalt soll OBEN kleben, nicht mittig verteilt werden */

    align-content: start;

    align-items: stretch;

}



/* Karten + rechte Views füllen den zur Verfügung stehenden Platz */

.einsaetze-layout > .card {

    min-height: 0;

    height: 100%;

}



/* Karte ausgeblendet: nur noch eine Spalte */

.einsaetze-layout.map-hidden {

    grid-template-columns: 1fr;

}



/* Falls man das hidden-Attribut nutzt:

   rechte Cards über volle Breite ziehen */

#cardLagekarteEinsatz[hidden] ~ #view-einsaetze,

#cardLagekarteEinsatz[hidden] ~ #view-dispo,

#cardLagekarteEinsatz[hidden] ~ #view-details {

    grid-column: 1 / -1;

}



/* ===========================================

   FIX 2: mobiles Verhalten – keine 70vh-Cards

   =========================================== */

@media (max-width: 1000px) {



    /* Main darf auf kleinen Screens wieder normal scrollen */

    .main.einsaetze-main {

        overflow-y: auto;

    }



    /* Einsätze-Grid: eine Spalte, Höhe nach Inhalt */

    .main.einsaetze-main .einsaetze-layout {

        grid-template-columns: 1fr;

        height: auto;     /* nicht auf 100% klemmen */

    }



    /* Cards sollen NICHT künstlich hochgezogen werden */

    .main.einsaetze-main .einsaetze-layout > .card {

        height: auto;

        min-height: auto;   /* überschreibt 70vh */

    }



    /* Wenn die Karte minimiert ist: wirklich klein */

    .map-area-einsatz.is-minimized {

        height: 80px;

    }

}



/* ===========================================

   FIX 3: Lagekarten-Card – Animation bleibt

   =========================================== */

.card--lagekarte {

    overflow: hidden;

    opacity: 1;

    max-height: 2000px;

    transform: scale(1);

    transition:

        opacity 0.25s ease,

        max-height 0.25s ease,

        transform 0.25s ease;

}



.card--lagekarte.is-hidden {

    opacity: 0;

    max-height: 0;

    transform: scale(0.98);

}



/* ===========================================

    Checkbox als Slider

    =========================================== */





/* Original Checkbox verstecken */

#E_Blaulicht,

#ist_Unwetter_gesichtet{

    display:none;

}



/* Switch-Grundform */

.switch{

    display:inline-block;

    height:35px;

    width:170px;

    background:#a4282b;

    border-radius:50px;

    border:1px solid #000;

    position:relative;

    cursor:pointer;

    transition:300ms;

}



/* Kreis */

.switch::before{

    content:"";

    position:absolute;

    height:22px;

    width:30px;

    top:4px;

    left:10px;

    border-radius:50%;

    background:#2d2d2d;

    border:1px solid #000;

    transition:300ms;

}



/* checked-Zustand */

#E_Blaulicht:checked + .switch,

#ist_Unwetter_gesichtet:checked + .switch{

    background:#3c7c3c;

}



#E_Blaulicht:checked + .switch::before,

#ist_Unwetter_gesichtet:checked + .switch::before{

    background:#013ED7;

    left:125px;

}



/*=======================================

  Patienten-Maske: Vorbelegte Maßnahmen

=======================================*/

/* Zeile mit den Snippet-Buttons */

.snippet-row {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin: 4px 0 6px;

}



/* Einzelner Snippet-Button („Chip“) */

.snippet-btn {

    border: 1px solid rgba(148,163,184,0.45);

    border-radius: 999px;

    padding: 4px 6px;

    font-size: 11px;

    line-height: 1.1;

    background: #063971;

    color: #e5e7eb;



    display: inline-flex;

    align-items: center;

    justify-content: center;



    cursor: pointer;

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,0.02),

        0 4px 10px rgba(0,0,0,0.5);



    transition:

        background 0.15s ease,

        box-shadow 0.15s ease,

        transform 0.08s ease;

}



.snippet-btn:hover {

    background: #063971;

    box-shadow: 0 6px 16px rgba(15,23,42,0.8);

    transform: translateY(-1px);

}



.snippet-btn:active {

    transform: translateY(0);

    box-shadow: 0 2px 8px rgba(0,0,0,0.6);

}





/*============================================

  Tools Chips für die Einsatzstellen-

  Qualifikation

==============================================*/

.unwetter-row{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:6px;

    flex-wrap:wrap;

}



.unwetter-eye-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    border:0;

    padding:0;

    background:transparent;

    cursor:pointer;

}



.unwetter-eye-btn img{

    width:32px;

    height:32px;

    display:block;

}



.unwetter-chip{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:2px 8px;

    border-radius:999px;

    font-size:11px;

    line-height:1.4;

    background:rgba(255,255,255,0.10);

    border:1px solid rgba(255,255,255,0.18);

    color:#d7f1d7; /* passt zu "hellgrün" */

}

.unwetter-chip.muted{

    color:#cfcfcf;

}

.unwetter-chip.warn{

    color:#ffd6d6;

}





/*===================================

  Eigene Chips für die Detailanzeige

  bei der Patientenliste

====================================*/



.em_chip{

    display:inline-block;

    padding:2px 8px;

    border-radius:20px;

    font-size:12px;

    line-height:18px;

    background:rgba(55,255,15,.18);

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    margin:2px 4px 0 0;

    white-space: normal;      /* erlaubt Zeilenumbruch */

    word-break: break-word;   /* bricht lange Wörter */

}



.p_chip{

    display:inline-block;

    padding:2px 8px;

    border-radius:20px;

    font-size:12px;

    line-height:18px;

    background:rgba(255,55,55,.18);

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    margin:2px 4px 0 0;

    white-space: normal;      /* erlaubt Zeilenumbruch */

    word-break: break-word;   /* bricht lange Wörter */

}





.von_chip{

    display:inline-block;

    padding:2px 8px;

    border-radius:20px;

    font-size:12px;

    line-height:18px;

    background:rgba(255, 204, 0,.58);

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    margin:2px 4px 0 0;

    white-space: normal;      /* erlaubt Zeilenumbruch */

    word-break: break-word;   /* bricht lange Wörter */

}





.an_chip{

    display:inline-block;

    padding:2px 8px;

    border-radius:20px;

    font-size:12px;

    line-height:18px;

    background:rgba(0, 179, 60,.58);

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    margin:2px 4px 0 0;

    white-space: normal;      /* erlaubt Zeilenumbruch */

    word-break: break-word;   /* bricht lange Wörter */

}







.ea_chip{

    display:inline-block;

    padding:2px 8px;

    border-radius:20px;

    font-size:12px;

    line-height:18px;

    background:rgba(5,155,255,.18);

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    margin:2px 4px 0 0;

    white-space: normal;      /* erlaubt Zeilenumbruch */

    word-break: break-word;   /* bricht lange Wörter */

}



.header_chip{

    display:block;           /* statt inline-block */

    width:calc(100% - 20px);   /* 10px links + 10px rechts */

    margin:8px 10px;           /* Abstand zum Rand */

    box-sizing:border-box;   /* Padding zählt zur Breite */

    padding:2px 8px;

    border-radius:10px;

    font-size:16px;

    line-height:22px;

    background:rgba(205,55,55,.58);

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    white-space: normal;      /* erlaubt Zeilenumbruch */

    word-break: break-word;   /* bricht lange Wörter */

}



.header_klein_chip{

    display:block;           /* statt inline-block */

    width:calc(100% - 4px);   /* 2px links + 2px rechts */

    margin:2px 0px;           /* Abstand zum Rand */

    box-sizing:border-box;   /* Padding zählt zur Breite */

    padding:2px 8px;

    border-radius:10px;

    font-size:14px;

    line-height:16px;

    background:rgba(205,55,55,.28);

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    white-space: normal;      /* erlaubt Zeilenumbruch */

    word-break: break-word;   /* bricht lange Wörter */

}



/*===================================

    Modale Anzeige im Einsatzmenü

    für EA und PRIO ändern

====================================*/



/* Quick Modals (EA/Prio) */

.qmodal-backdrop{

    position:fixed; inset:0;

    background:rgba(0,0,0,.55);

    display:flex; align-items:center; justify-content:center;

    z-index:9999;

}

.qmodal{

    width:min(420px, calc(100vw - 24px));

    max-height:calc(100vh - 24px);

    background:#1f1f1f;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    box-shadow:0 20px 60px rgba(0,0,0,.55);

    overflow:hidden;

}

.qmodal-head{

    display:flex; align-items:flex-start; gap:12px;

    padding:12px 14px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.qmodal-title .t1{ font-weight:700; color:#fff; }

.qmodal-title .t2{ font-size:12px; opacity:.75; color:#d1d5db; margin-top:2px; }

.qmodal-x{

    margin-left:auto;

    background:transparent;

    border:0;

    color:#fff;

    font-size:18px;

    opacity:.8;

    cursor:pointer;

}

.qmodal-body{

    padding:12px 14px;

    overflow:auto;

    max-height:calc(100vh - 180px);

}

.qmodal-hint{ color:#d1d5db; font-size:13px; margin-bottom:10px; }

.qmodal-hint2{ color:#d1d5db; font-size:13px; margin-top:12px; opacity:.9; }

.qmodal-actions{

    padding:12px 14px;

    display:flex; gap:10px; justify-content:flex-end;

    border-top:1px solid rgba(255,255,255,.08);

}



.qchips{ display:flex; gap:8px; }

.qchips-col{ flex-direction:column; }

.qchips-grid{

    display:grid;

    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));

    gap:8px;

}



.qchip{

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.06);

    color:#e5e7eb;

    padding:8px 10px;

    border-radius:999px;

    cursor:pointer;

    text-align:center;

    font-weight:600;

}

.qchip:hover{ background:rgba(255,255,255,.10); }

.qchip.is-on{

    background:#056310;

    border-color:#35A340;

    color:#fff;

    filter: brightness(1.15);

    box-shadow: 0 0 0 2px rgba(255,255,255,.18) inset;

}

/*============================

  Eingabefelder für darkmode

=============================*/

input, textarea, select {

    background: #2b2b2b;      /*var(--input-bg);*/

    color: var(--text-color);

    border: 1px solid var(--border-color);

    padding: 14px, 18px;

    border-radius: 10px;

    height: 26 px;

}





/*============================

    Mehr... / Weniger...

    Buttons bei der Kommunikation

=============================*/



.expandable-text-btn{

    margin-left: 8px;

    padding: 2px 8px;

    border-radius: 8px;

    border: 1px solid rgba(255,255,255,0.14);

    /*

    background: rgba(255,255,255,0.06);

        /* leichter vertikaler Verlauf */

    background: linear-gradient(

        to bottom,

        #353535 0%,

        #2f2f2f 60%,

        #2d2d2d 100%

    );



    height: 28px;

    color: #fff;

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;

}



.expandable-text-btn:hover{

    background: rgba(255,255,255,0.12);

}



.expandable-text-value{

    white-space: normal;

    word-break: break-word;

}



/*============================

  ELDIS-Chisp in der

  Einsatzliste

==============================*/

.eldis-chip{

    display:inline-block;

    padding:2px 7px;

    border-radius:999px;

    background:#1e5eff;

    color:#fff;

    font-size:11px;

    font-weight:700;

    line-height:1.2;

    letter-spacing:.3px;

    box-shadow:0 1px 3px rgba(0,0,0,.25);

}



/*============================

    Patientenaufnahme

    bei den Einsätze responisve

==============================*/



.modal-grid.patient-grid {

    display:grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap:12px;

}



@media (min-width: 1500px){

    .modal-grid.patient-grid {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }

}



/* ==========================================

   Patient-Tab im Einsatz-Modal

========================================== */

.patient-grid{

    display:grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap:12px;

}



.einsatz-p-checks{

    display:flex;

    flex-wrap:wrap;

    gap:14px 18px;

    margin-top:6px;

}



.einsatz-p-checks .mstart-check{

    margin-top:0;

}



.gender-group{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}



.gender-group button{

    min-width:48px;

    height:38px;

    padding:0 12px;

    border-radius:10px;

    border:1px solid rgba(255,255,255,.14);

    background: rgba(255,255,255,.06);

    color: inherit;

    cursor:pointer;

}



.gender-group button.active{

    background: rgba(69,120,169,.85);

    border-color: rgba(69,120,169,.95);

}



.sichtung-group{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}



.sichtung-btn.active, .sichtung-btn2.active{

    box-shadow: 0 0 0 2px rgba(255,255,255,.18) inset;

    transform: translateY(-1px);

}





@media (min-width: 1500px){

    .patient-grid{

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }

}



@media (max-width: 900px){

    .patient-grid{

        grid-template-columns: 1fr;

    }

}



.einsatz-p-checks .mstart-check{

    display:inline-flex;

    align-items:center;

    gap:12px;

    position:relative;

    cursor:pointer;

}



/* echtes Checkbox-Input */

.einsatz-p-checks .mstart-check input{

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:28px;

    height:28px;

    opacity:0;

    cursor:pointer;

    margin:0;

}

/* Textbox an die richtige Stelle + Größe*/

.einsatz-p-checks .mstart-check .box{

    flex:0 0 28px;

    width:28px;

    height:28px;

    border-radius:6px;

    border:2px solid rgba(255,255,255,0.2);

    background:linear-gradient(#3a3a3a, #2b2b2b);

    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);    background:#2b2b2b;

    position:relative;

}

.einsatz-p-checks .mstart-check input:checked + .box{

    border-color:#22c55e;

    background:rgba(34,197,94,0.15);

}



/* Haken mittig*/

.einsatz-p-checks .mstart-check input:checked + .box::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:7px;

    height:14px;

    border:solid #22c55e;

    border-width:0 3px 3px 0;

    transform:translate(-50%, -60%) rotate(45deg);

}





/*=========================================

  eigenes Eingabepromt für Texteingaben

==========================================*/



.myalert-input{

    width:100%;

    min-height:42px;



    background:#1f1f1f;

    color:#f3f4f6;



    border:1px solid rgba(255,255,255,.14);

    border-radius:10px;



    padding:10px 12px;

    margin-top:12px;



    font-size:14px;

    outline:none;

}



.myalert-input:focus{

    border-color:#22c55e;

    box-shadow:0 0 0 3px rgba(34,197,94,.18);

}



.myalert-textarea{

    min-height:120px;

    resize:vertical;

}



.myalert-btn-secondary{

    background:#2a2a2a;

}



/*=========================================

    Erweiterung um eine Listenauswahl

==========================================*/



.myselect-list{

    margin-top:12px;



    max-height:420px;

    overflow:auto;



    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;



    background:#161616;

}



.myselect-item{

    padding:12px 14px;



    cursor:pointer;



    border-bottom:1px solid rgba(255,255,255,.05);



    transition:

        background .15s ease,

        transform .12s ease;

}



.myselect-item:hover{

    background:#2563eb;

    color:#fff;

}



.myselect-item:last-child{

    border-bottom:none;

}





/*=========================================

    Erweiterung um eine Listenauswahl

    mit Checkbox

==========================================*/





.mycheckbox-list {

    display: grid;

    grid-template-columns: repeat(2, minmax(160px, 1fr));

    gap: 6px 14px;

    margin-top: 12px;

}



.mycheckbox-item {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 6px 4px;

    cursor: pointer;

    color: #e5e5e5;

}



.mycheckbox-item:hover {

    background: rgba(255,255,255,.05);

}



.mycheckbox-input {

    width: 20px;

    height: 20px;

    margin: 0;

    cursor: pointer;

    accent-color: #2563eb;

}



.mycheckbox-box {

    display: none;

}



.mycheckbox-label {

    font-size: 13px;

}





.mycheckbox-list--3 {

    grid-template-columns: repeat(3, minmax(160px, 1fr));

}



/*===============================

 Scrollbalken

================================*/

/* Gesamte Scrollbar */

::-webkit-scrollbar {

    width: 24px;

    height: 18px;

}



/* Hintergrund */

::-webkit-scrollbar-track {

    background: #2a2a2a;

}



/* Schieber */

::-webkit-scrollbar-thumb {

    background: #4b5563;

    border-radius: 20px;

    border: 2px solid #2a2a2a;

}



/* Hover */



::-webkit-scrollbar-thumb:hover {

    background: #64748b;

}



/* Ecke unten rechts */

::-webkit-scrollbar-corner {

    background: #2f2f2f;

}



/* Firefox zusätzlich */

* {

    scrollbar-width: thin;

    scrollbar-color: #555 #2f2f2f;

}





/*=====================================================

Gemeinsames Fragen nach Abschlussstichwort / Chips */

.abschlussstichwort-modal-backdrop{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.62);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:10000;

    padding:16px;

}



.abschlussstichwort-modal-backdrop.is-open{

    display:flex;

}



.abschlussstichwort-modal{

    width:min(720px, calc(100vw - 32px));

    background:linear-gradient(180deg, #383838, #2f2f2f);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    box-shadow:0 18px 40px rgba(0,0,0,.45);

    color:#e5e7eb;

    overflow:hidden;

}



.abschlussstichwort-modal-head,

.abschlussstichwort-modal-foot{

    padding:16px 18px;

    border-bottom:1px solid rgba(255,255,255,.06);

}



.abschlussstichwort-modal-foot{

    border-bottom:none;

    border-top:1px solid rgba(255,255,255,.06);

    display:flex;

    justify-content:flex-end;

    gap:10px;

}



.abschlussstichwort-modal-title{

    font-size:18px;

    font-weight:800;

}



.abschlussstichwort-modal-body{

    padding:18px;

}



.abschlussstichwort-chipbox{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}



.abschlussstichwort-chip{

    border:1px solid rgba(255,255,255,.08);

    background:#3a3a3a;

    color:#e5e7eb;

    border-radius:999px;

    padding:9px 14px;

    font-weight:800;

    cursor:pointer;

}



.abschlussstichwort-chip:hover{

    background:#444;

}



.abschlussstichwort-chip.is-selected{

    background:linear-gradient(180deg, var(--accent-hover, #6598c9), var(--accent, #4578a9));

    color:#fff;

}



.abschlussstichwort-btn{

    height:40px;

    border:none;

    border-radius:12px;

    padding:0 14px;

    cursor:pointer;

    font-weight:800;

}



.abschlussstichwort-btn.soft{

    background:#3a3a3a;

    color:#e5e7eb;

    border:1px solid rgba(255,255,255,.06);

}



.abschlussstichwort-btn.primary{

    background:linear-gradient(180deg, var(--accent-hover, #6598c9), var(--accent, #4578a9));

    color:#fff;

}





/* EA ändern Liste mit Scollbalken */

#modalPQuickEA .qmodal {

    max-height: 85vh;

    display: flex;

    flex-direction: column;

}



#modalPQuickEA .qmodal-body {

    min-height: 0;

    overflow: hidden;

}



#modalPQuickEA #qeaChips {

    max-height: 55vh;

    overflow-y: auto;

    padding-right: 6px;

}









 /* Fahrzeug-Besaatzung */

.em-besatzung-role-warning{

    color:#fbbf24;

    font-weight:700;

}



/* Anzeige Besatzung als Zusatzfilter */

.em-besatzung-inline{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:4px 6px;

}



.em-besatzung-person-chip{

    display:inline-flex;

    align-items:center;

    gap:5px;



    padding:2px 7px;



    border-radius:8px;



    background:rgba(96,165,250,.10);

    border:1px solid rgba(96,165,250,.16);



    color:#dbeafe;



    font-size:11px;

    font-weight:600;

}



.em-besatzung-person-chip small{

    color:#93c5fd;

    font-size:10px;

    font-weight:500;

}