/*Für reponsive PZE*/
/* ===========================
   GLOBAL: Variablen & Basics
   =========================== */

:root {
    --footer-h: 20px;
    --taskbar-h: 40px;
    --fz-xl: clamp(1.25rem,2.2vw,2rem);
    --fz-lg: clamp(1.1rem,1.6vw,1.5rem);
    --proc-btn-h: 50px; /* Prozesszeiten: Buttonhöhe fix */
    --pz-col-h: 485px; /* Gemeinsame Höhe für Navigation & Mitte */
    --pz-col-h1: 485px; /* Gemeinsame Höhe für Navigation & Mitte */
}

/* Bilder & Typografie */
.img-fluid {
    max-width: 100%;
    height: auto;
}

.h-lg {
    font-size: var(--fz-lg);
    font-weight: 700;
}

.h1-xl {
    font-size: var(--fz-xl);
    font-weight: 700;
}

/* Große Buttons (Basis) */
.btn-xl {
    inline-size: clamp(120px,16vw,180px);
    block-size: clamp(42px,7vh,64px);
    font-size: clamp(0.85rem,1vw,1.1rem);
    font-weight: 700;
}

/* Seite/Tab: keine Außen-Scrollbars, wenn Prozesszeiten aktiv */
html, body {
    height: 100%;
}

    body:has(.pz-layout) {
        overflow: hidden;
    }

.rz-tabview-panels:has(.pz-layout),
.rz-tabview-panel:has(.pz-layout) {
    height: calc(100svh - var(--footer-h) - var(--taskbar-h));
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

@supports not (height:100svh) {
    .rz-tabview-panels:has(.pz-layout),
    .rz-tabview-panel:has(.pz-layout) {
        height: calc(100vh - var(--footer-h) - var(--taskbar-h));
    }
}

@media (min-width:0px) {
    .rz-tabview-panels:has(.pz-layout),
    .rz-tabview-panel:has(.pz-layout) {
        height: calc(100svh - var(--footer-h) - var(--taskbar-h) - 1px);
    }
}

/* ===========================
   SELF-SERVICE TAB
   =========================== */
.btn-area {
    --bs-gutter-y: 1rem;
}

    .btn-area .btn-xl {
        min-block-size: 72px;
        padding-block: .75rem;
    }

    .btn-area .rz-button .rz-button-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-area .rz-button .rz-button-text,
    .btn-area .rz-button span {
        white-space: normal;
        word-break: break-word;
        hyphens: auto;
        overflow: visible;
        text-overflow: clip;
        text-align: center;
        display: block;
    }

/* Header: Avatar + Text immer in einer Zeile */
.ss-header {
    flex-wrap: nowrap;
    margin-top: 1rem;
}

    .ss-header .col-auto, .ss-header .rz-button {
        flex: 0 0 auto;
    }

.ss-header-text {
    min-width: 0;
}

    .ss-header-text .rz-label {
        white-space: normal;
        word-break: break-word;
        hyphens: auto;
        line-height: 1.2;
    }

@media (max-width:575.98px) {
    .ss-header {
        flex-wrap: wrap;
    }
        .ss-header h5 {
            font-size: 1rem; /* kleiner als default h5 */
        }

        .ss-header .text-muted {
            font-size: 0.8rem;
        }
}

/* Ausgeloggt: Spalte + Fieldset breiter */
@media (min-width:1600px) and (min-height:900px), (min-width:1920px) and (min-height:1080px) {
    .ss-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

.ss-guest-panel.fieldset-fluid {
    max-width: clamp(1000px,75vw,1180px);
    width: 100%;
    margin: 0 auto;
}

@media (min-width:1600px) and (min-height:900px) {
    .ss-guest-panel.fieldset-fluid {
        max-width: 1280px;
    }
}

@media (min-width: 1900px) {
    /* Spaltenhülle (col-lg-10) auf volle Breite zwingen */
    .ss-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Fieldset selbst deckeln und zentrieren */
    .ss-guest-panel.fieldset-fluid {
        width: 95vw !important;
        max-width: 900px !important;
        margin: 0 auto !important;
    }
}

/* Eingeloggt: Spalte & Fieldset breiter */
@media (min-width:1200px) {
    .ss-logged-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

.ss-logged-panel.fieldset-fluid {
    max-width: clamp(1100px,90vw,1280px);
    width: 100%;
    margin: 0 auto;
}

@media (min-width:1600px) and (min-height:900px) {
    .ss-logged-panel.fieldset-fluid {
        max-width: 1400px;
    }
}

@media (min-width:1920px) and (min-height:1080px) {
    .ss-logged-panel.fieldset-fluid {
        max-width: 1600px;
    }
}

/* Eingeloggt: 3-Spalten-Raster mit viel Abstand */
.btn-area-3col {
    display: grid;
    --btn-col-w: clamp(140px,16vw,180px);
    --btn-gap: clamp(48px,6vw,120px);
    grid-template-columns: repeat(3,min(var(--btn-col-w),calc((100% - (var(--btn-gap)*2))/3)));
    column-gap: var(--btn-gap);
    row-gap: 16px;
    justify-content: center;
}

    .btn-area-3col > [class*="col-"] {
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        display: flex;
        justify-content: center;
    }

    .btn-area-3col .btn-xl {
        width: 100% !important;
        max-width: none !important;
    }

@media (max-width:1199.98px) {
    .btn-area-3col {
        grid-template-columns: repeat(2,min(var(--btn-col-w),calc((100% - var(--btn-gap))/2)));
    }
}

@media (max-width:767.98px) {
    .btn-area-3col {
        grid-template-columns: 1fr;
        column-gap: 0;
        justify-items: center;
    }
}

/* Selfservice (eingeloggt): seitliche Luft für die Button-Zeile */
.ss-logged-panel .btn-area-3col {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0;
    padding-inline: clamp(16px, 6vw, 64px);
}

@media (max-width: 767.98px) {
    .ss-logged-panel .btn-area-3col {
        padding-inline: 12px;
    }
}

/* ===========================
   URLAUBS-TABS
   =========================== */
.fieldset-fluid {
    width: 100%;
    max-width: 1000px;
    min-height: 56vh;
}

.fieldset-tall {
    width: 100%;
    min-height: clamp(300px,60vh,750px);
}

.report-card {
    width: 100%;
    min-height: clamp(420px,70vh,820px);
    padding: 0;
}

.booking-card {
    width: 100%;
    min-height: clamp(520px,70vh,860px);
    padding: 1rem;
}

.scheduler-box {
    height: clamp(360px,60vh,700px);
}

.btn-choice {
    inline-size: clamp(160px,30vw,260px);
    block-size: clamp(44px,7vh,72px);
    font-size: clamp(0.95rem,1vw,1.1rem);
    font-weight: 700;
}

.messages-fieldset {
    width: 100%;
    min-height: clamp(420px,68vh,760px);
    padding: 1rem;
}
/* Fallback-Breiten, falls Option A nicht genutzt wird */
.rz-tabview-panel[aria-hidden="false"] .row.mt-3 > .col:first-child {
    flex: 0 0 560px;
    max-width: 560px;
}

.rz-tabview-panel[aria-hidden="false"] .row.mt-3 > .col:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

    .rz-tabview-panel[aria-hidden="false"] .row.mt-3 > .col:last-child .rz-card {
        width: 100% !important;
        max-width: 1400px;
    }

/* ==========================================
   URLAUB ÜBERSICHT – Höhe ≈ 85% der Bildschirmhöhe
   ========================================== */
.uo-85vh {
    height: calc(85svh - var(--footer-h) - var(--taskbar-h) - 1rem);
    max-height: calc(85svh - var(--footer-h) - var(--taskbar-h) - 1rem);
    overflow: hidden;
}

@supports not (height: 1svh) {
    .uo-85vh {
        height: calc(85vh - var(--footer-h) - var(--taskbar-h) - 1rem);
        max-height: calc(85vh - var(--footer-h) - var(--taskbar-h) - 1rem);
    }
}

.uo-85vh > [class^="col-"],
.uo-85vh > [class*=" col-"] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.uo-85vh .fieldset-tall {
    height: calc(100% - var(--bs-gutter-y, 1rem));
    max-height: calc(100% - var(--bs-gutter-y, 1rem));
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    .uo-85vh .fieldset-tall > .rz-fieldset-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

.uo-85vh .report-card {
    height: calc(100% - var(--bs-gutter-y, 1rem)) !important;
    max-height: calc(100% - var(--bs-gutter-y, 1rem)) !important;
    display: flex;
    flex-direction: column;
    padding: 0;
}

    .uo-85vh .report-card > * {
        flex: 1 1 auto;
        min-height: 0;
    }

    .uo-85vh .report-card .rz-ssrsviewer,
    .uo-85vh .report-card iframe {
        height: 100% !important;
        min-height: 0 !important;
        display: block;
    }

/* ==========================================
   URLAUB ÜBERSICHT – rechts ~30% breiter
   ========================================== */
.uo-85vh.equal-cols {
    --uo-left: 30%;
    --uo-right: 70%;
}

@media (min-width: 992px) {
    .uo-85vh.equal-cols > .col-12.col-lg-4 {
        flex: 0 0 var(--uo-left);
        max-width: var(--uo-left);
    }

    .uo-85vh.equal-cols > .col-12.col-lg-8 {
        flex: 0 0 var(--uo-right);
        max-width: var(--uo-right);
    }
}

/* ===========================
   PROZESSZEITEN – Layout
   =========================== */
.pz-layout {
    display: grid;
    grid-template-columns: minmax(180px,250px) minmax(0,1fr) minmax(180px,250px);
    gap: 16px;
    align-items: stretch;
    align-content: start;
    height: calc(100svh - var(--footer-h) - var(--taskbar-h));
    overflow: hidden;
}

@supports not (height:100svh) {
    .pz-layout {
        height: calc(100vh - var(--footer-h) - var(--taskbar-h));
    }
}

/* Spalten-Basis */
.pz-left, .pz-right {
    max-width: 250px;
    width: 100%;
}

.pz-middle {
    width: 100%;
}

.pz-left, .pz-middle, .pz-right {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Navigation (links) – fix var(--pz-col-h) (ohne Scroll) */
.pz-left {
    align-self: start;
    height: var(--pz-col-h) !important;
    max-height: var(--pz-col-h) !important;
    overflow: hidden;
}

    .pz-left .rz-fieldset {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

        .pz-left .rz-fieldset > .rz-fieldset-content {
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

/* Mitte – exakt gleiche Höhe wie links (über --pz-col-h) */
.pz-middle {
    height: auto !important;
    align-self: start; /* nicht auf volle Zeilenhöhe strecken */
}

.pz-middle-inner {
    max-width: 1000px;
    margin: 0 auto;
    height: var(--pz-col-h1) !important;
    max-height: var(--pz-col-h1) !important;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
}

@supports not (scrollbar-gutter:stable) {
    .pz-middle-inner {
        overflow-y: scroll;
    }
}
/* Fieldset in der Mitte: volle Höhe ohne Außenabstand */
.pz-middle-inner > .rz-fieldset {
    height: 100% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

    .pz-middle-inner > .rz-fieldset > .rz-fieldset-content {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
/* Oben fix 180px, unten füllt Rest */
.pz-middle-inner .rz-fieldset > .rz-fieldset-content > .rz-fieldset:nth-of-type(1) {
    flex: 0 0 180px !important;
    min-height: 180px !important;
    overflow: auto;
}

.pz-middle-inner .rz-fieldset > .rz-fieldset-content > .rz-fieldset:nth-of-type(2) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto;
}

/* Rechts – nicht strecken, Inhalt-abhängig */
.pz-right {
    height: auto !important;
    align-self: start;
}

    .pz-right .rz-fieldset {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

        .pz-right .rz-fieldset > .rz-fieldset-content {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
        }

        /* Aktueller Prozess: fix 150px, ohne Scroll */
        .pz-right .rz-fieldset.pz-current {
            flex: 0 0 130px !important;
            height: 130px !important;
            max-height: 130px !important;
            overflow: hidden !important;
            box-sizing: border-box;
            margin: 0 0 5px 0;
        }

            .pz-right .rz-fieldset.pz-current > .rz-fieldset-content {
                overflow: hidden !important;
            }

            .pz-right .rz-fieldset.pz-current .rz-card {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                box-sizing: border-box;
            }

        /* Ihre Arbeitszeiten: fix 338px, Scroll in der Liste */
        .pz-right .rz-fieldset.pz-workingtimes {
            flex: 0 0 338px !important;
            height: 338px !important;
            max-height: 338px !important;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            overflow: hidden !important;
        }

            .pz-right .rz-fieldset.pz-workingtimes > .rz-fieldset-content {
                flex: 1 1 auto;
                min-height: 0;
                display: flex;
                flex-direction: column;
                padding: 0;
                overflow: hidden !important;
            }

                .pz-right .rz-fieldset.pz-workingtimes > .rz-fieldset-content > .wt-scroll {
                    flex: 1 1 auto;
                    min-height: 0;
                    overflow: auto;
                }
    /* DataList auf volle Höhe */
    .pz-right .pz-workingtimes .rz-datalist {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0;
    }

    .pz-right .pz-workingtimes .rz-datalist-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: auto !important;
    }

/* Bookings unten – nur große Screens */
.pz-bookings.pz-bookings-lg {
    display: none;
}

@media (min-width:1600px) and (min-height:900px) {
    .pz-layout {
        grid-template-rows: auto auto;
        row-gap: 8px;
        align-content: start;
    }

    .pz-middle {
        height: auto !important;
    }

    .pz-right {
        height: auto !important;
    }

    .pz-bookings.pz-bookings-lg {
        display: block;
        grid-column: 1 / -1;
        align-self: stretch;
    }

        .pz-bookings.pz-bookings-lg .rz-fieldset {
            height: auto;
            max-height: 250px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

            .pz-bookings.pz-bookings-lg .rz-fieldset > .rz-fieldset-content {
                max-height: 250px;
                overflow: auto;
            }

        .pz-bookings.pz-bookings-lg .rz-fieldset-content > [style*="height:100%"] {
            height: auto !important;
            max-height: 100% !important;
        }
}

/* Buttons & Grid (Mitte) – 4 Spalten, feste Höhe */
.pz-grid > .rz-datalist-content > .rz-g {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 12px !important;
    grid-auto-rows: var(--proc-btn-h);
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

    .pz-grid > .rz-datalist-content > .rz-g > .rz-button {
        width: 100% !important;
        height: var(--proc-btn-h) !important;
        min-height: var(--proc-btn-h) !important;
        max-height: var(--proc-btn-h) !important;
        margin: 0 !important;
        padding: 6px .75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
        white-space: normal;
        font-weight: 700;
        font-size: clamp(0.9rem,1vw,1.05rem);
        overflow: hidden !important;
    }

.pz-grid .rz-button .rz-button-box {
    display: block !important;
    width: 100%;
    white-space: normal !important;
    overflow: hidden !important;
}

.pz-grid > .rz-datalist-content > .rz-g > .rz-button .text-center > div:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pz-grid .rz-button .rz-button-box *, .pz-grid .rz-button .rz-button-text {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.2;
    text-align: center;
}

/* Navigation-Buttons (links) – Optik */
.pz-left .d-grid {
    gap: 16px !important;
}

.pz-left .rz-button {
    min-height: 72px;
    padding-block: .75rem;
}

    .pz-left .rz-button .rz-button-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Tab-Leiste oben verstecken, wenn Klasse auf dem Tabs-Container sitzt */
.hide-tabbar .rz-tabview-nav {
    display: none !important;
}
/* Optional: kleine Schönheitskorrekturen */
.hide-tabbar .rz-tabview-panels {
    border-top: 0;
}

/* Arbeitszeiten: Inhalt des Fieldsets scrollt */
.pz-right .rz-fieldset.pz-workingtimes > .rz-fieldset-content {
    overflow: auto !important; /* hier erscheint der Scrollbalken */
}

    /* Inline-Wrapper (max-height:35vh; overflow:auto;) neutralisieren,
   damit es keinen doppelten Scroll gibt */
    .pz-right .rz-fieldset.pz-workingtimes > .rz-fieldset-content > div[style*="max-height"] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }


/* PZE Mitte: kleinere Schrift auf den Kachel-Buttons */
.pz-grid > .rz-datalist-content > .rz-g > .pz-proc-btn {
    font-size: clamp(0.78rem, 0.85vw, 0.95rem) !important;
    padding: 4px .6rem; /* etwas kompakter, optional */
}

/* (optional) leicht dichtere Zeilenhöhe im Button */
.pz-grid .pz-proc-btn .rz-button-box {
    line-height: 1.15;
}



/* Alpha-Slider im Popup ausblenden */
.rz-popup .rz-alpha-picker,
.rz-editor-popup .rz-alpha-picker {
    display: none !important;
}

/* (optional) zweite Preview-Box (Alpha) ausblenden, falls vorhanden */
.rz-popup .rz-colorpicker-preview .rz-color-box:last-child,
.rz-editor-popup .rz-colorpicker-preview .rz-color-box:last-child {
    display: none !important;
}

/* (optional) Lücke schließen, wenn Alpha fehlt */
.rz-popup .rz-hue-and-alpha,
.rz-editor-popup .rz-hue-and-alpha {
    gap: 0 !important;
}


/* kompaktere Abstände & Trennlinien in einer LISTBOX */
/* Kompakte ListBox (nur für .listbox-compact) */

/* Basis-Optik: klein + kompakt */
.rz-listbox.listbox-compact .rz-multiselect-item,
.rz-listbox.listbox-compact .rz-multiselect-item .rz-multiselect-item-content {
    font-size: 0.85rem; /* noch etwas kleiner */
    line-height: 1.2 !important;
    padding: 4px 8px !important;
    min-height: 0 !important;
    background: transparent !important; /* grauen Innenhintergrund killen */
}

/* Trennlinien */
.rz-listbox.listbox-compact .rz-multiselect-item {
    border-bottom: 1px solid var(--rz-border, #e0e0e0) !important;
}

    .rz-listbox.listbox-compact .rz-multiselect-item:last-child {
        border-bottom: none !important;
    }

    /* Selektiertes Element komplett einfärben */
    .rz-listbox.listbox-compact .rz-multiselect-item.rz-state-highlight,
    .rz-listbox.listbox-compact .rz-multiselect-item.rz-state-highlight .rz-multiselect-item-content,
    .rz-listbox.listbox-compact .rz-multiselect-item.rz-state-focus,
    .rz-listbox.listbox-compact .rz-multiselect-item.rz-state-focus .rz-multiselect-item-content {
        background: var(--rz-oneclick-lighter-faded, #ffcba4) !important;
        color: #000 !important;
        border-color: transparent !important;
    }



/* ===================== */
/* Kompakte Radzen ListBox (global) */
/* ===================== */

.rz-listbox .rz-listbox-list-wrapper {
    padding: 0 !important;
}

.rz-listbox .rz-listbox-list {
    margin: 0 !important;
    padding: 0 !important;
}

.rz-listbox .rz-multiselect-item,
.rz-listbox .rz-multiselect-item .rz-multiselect-item-content {
    font-size: 0.85rem;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
    min-height: 0 !important;
    background: transparent !important; /* grauen Innenhintergrund entfernen */
}

    /* Selektiert/Fokus einfärben */
    .rz-listbox .rz-multiselect-item.rz-state-highlight,
    .rz-listbox .rz-multiselect-item.rz-state-highlight .rz-multiselect-item-content,
    .rz-listbox .rz-multiselect-item.rz-state-focus,
    .rz-listbox .rz-multiselect-item.rz-state-focus .rz-multiselect-item-content {
        background: var(--rz-oneclick-lighter-faded, #ffcba4) !important;
        color: #000 !important;
    }

/* Nur ListBoxen mit .with-lines bekommen Trennlinien */
.rz-listbox.with-lines .rz-multiselect-item {
    border-bottom: 1px solid var(--rz-border, #e0e0e0) !important;
}

    .rz-listbox.with-lines .rz-multiselect-item:last-child {
        border-bottom: none !important;
    }



/* ===================== */
/* Kompakte Radzen DropDowns (global, gilt für alle) */
/* ===================== */

.rz-dropdown-panel .rz-dropdown-item,
.rz-dropdown-panel .rz-dropdown-item .rz-dropdown-item-content {
  font-size: 0.85rem;
  line-height: 1.2 !important;
  padding: 4px 8px !important;
  min-height: 0 !important;
}

/* Selektiertes Element einfärben */
.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight,
.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight .rz-dropdown-item-content,
.rz-dropdown-panel .rz-dropdown-item.rz-state-focus,
.rz-dropdown-panel .rz-dropdown-item.rz-state-focus .rz-dropdown-item-content {
  background: var(--rz-oneclick-lighter-faded, #ffcba4) !important;
  color: #000 !important;
}

/* ===================== */
/* Kompakte Radzen MultiSelects (global) */
/* ===================== */

/* ===== MultiSelect: Dropdown-Liste kompakt (global) ===== */
.rz-multiselect-panel .rz-multiselect-items {
    margin: 0;
    padding: 0 !important;
}

.rz-multiselect-panel .rz-multiselect-item,
.rz-multiselect-panel .rz-multiselect-item .rz-multiselect-item-content {
    font-size: 0.85rem;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
    min-height: 0 !important;
    background: transparent !important; /* kein grauer Innenbg */
}

    /* kein Hover-Effekt */
    .rz-multiselect-panel .rz-multiselect-item:hover,
    .rz-multiselect-panel .rz-multiselect-item:hover .rz-multiselect-item-content {
        background: transparent !important;
    }

    /* Selektiert/Fokus in deiner Farbe */
    .rz-multiselect-panel .rz-multiselect-item.rz-state-highlight,
    .rz-multiselect-panel .rz-multiselect-item.rz-state-highlight .rz-multiselect-item-content,
    .rz-multiselect-panel .rz-multiselect-item.rz-state-focus,
    .rz-multiselect-panel .rz-multiselect-item.rz-state-focus .rz-multiselect-item-content {
        background: var(--rz-oneclick-lighter-faded, #ffcba4) !important;
        color: #000 !important;
    }

/* Header-Padding wie bei den Items */
.rz-multiselect-panel .rz-multiselect-header {
    padding: 4px 8px !important; /* matcht item padding */
}

    /* Checkboxen in Header und Items gleich groß + gleicher Abstand zum Text */
    .rz-multiselect-panel .rz-multiselect-header .rz-chkbox-box,
    .rz-multiselect-panel .rz-multiselect-item .rz-chkbox-box {
        width: 14px;
        height: 14px;
        margin-right: 8px; /* gleicher Text-Offset */
    }

    /* Sicherheitsnetz: keine zusätzlichen Außenabstände an der Header-Checkbox */
    .rz-multiselect-panel .rz-multiselect-header .rz-chkbox {
        margin: 0 !important;
    }



/* ===================== */
/* --- Grundlayout für dein Top-Menü --- */
/* ===================== */

.mainmenu {
    --submenu-indent: 18px; /* Einzug der 2. Ebene */
}

    /* Gruppenkopf (z. B. "Einstellungen") dezenter Header-Look */
    .mainmenu .menu-group > * > a,
    .mainmenu .menu-group > * > span {
        font-size: 0.9rem;
        font-weight: /*600*/;
        color: rgba(0,0,0,.75);
    }

    /* Unterpunkte (lvl2): Einzug + kleinere Schrift */
    .mainmenu .rz-navigation-item.lvl2 .rz-navigation-item-wrapper {
        padding-left: calc(var(--submenu-indent) + 10px) !important;
    }

    .mainmenu .rz-navigation-item.lvl2 .rz-navigation-item-link {
        font-size: 0.85rem; /* kleiner als Gruppenkopf */
        line-height: 1.25;
        color: rgba(0,0,0,.85); /* etwas dezenter */
    }


        /* Hover/Focus dezent */
        .mainmenu .rz-navigation-item.lvl2 .rz-navigation-item-link:hover,
        .mainmenu .rz-navigation-item.lvl2 .rz-navigation-item-link:focus {
            background: rgba(0,0,0,.04);
        }

    /* Aktiver/ausgewählter Unterpunkt */
    .mainmenu .lvl2.rz-state-active > a,
    .mainmenu .lvl2.rz-state-highlight > a {
        background: rgba(0,0,0,.06);
        font-weight: 600;
    }

    /* Dünner Trenner (statt <hr> inline) */
    .mainmenu .menu-sep {
        height: 1px;
        margin: 4px 8px;
        background: var(--rz-border, #e0e0e0);
    }


/* ===== Planinfo-Card ===== */
/* Card unten immer etwas Luft */
/* Planinfo-Card: unten immer etwas Abstand */
.ss-planinfo {
    text-align: left !important;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: .75rem 1rem;
    font-size: 0.95rem;
    margin-bottom: 1rem; /* <- Abstand zu den Buttons */
}


/* Auf kleineren Screens Card zentriert mit Min/Max-Breite */
@media (max-width: 991.98px) {
    .ss-info-col {
        flex: 0 0 auto; /* nicht auf 100% ziehen */
        width: auto;
        max-width: none;
        margin: 0 auto 1rem; /* zentriert + Abstand nach unten */
    }
        /* Breite kontrolliert begrenzen, damit nichts unschön umbrechen muss */
        .ss-info-col .ss-planinfo {
            width: clamp(300px, 85vw, 360px); /* min 300px, max 360px */
        }
}

/* Uhrzeit & Arbeitszeit nicht umbrechen lassen */
.ss-time {
    white-space: nowrap;
}

.ss-dl .val {
    white-space: nowrap;
}
/* z.B. "08:00 – 16:50" bleibt in einer Zeile */


.ss-title {
    font-weight: 600;
    margin-bottom: .5rem;
}

.ss-dl {
    display: grid;
    grid-template-columns: 110px 1fr; /* Labelspalte */
    column-gap: .5rem;
    row-gap: .25rem;
}

    .ss-dl .lbl {
        font-weight: 600;
    }
/* .val wäre default 400 – explizit nicht nötig */

/* Abschnittsüberschrift „Prozesse“ */
.ss-subhead {
    margin-top: .5rem;
    font-weight: 600;
}

/* Prozesse nummeriert, normaler Text */
.ss-proclist {
    list-style: decimal;
    list-style-position: inside;
    margin: .25rem 0 0 0;
    padding: 0;
}

    .ss-proclist li {
        font-weight: 400;
        margin: 0 0 .25rem 0;
    }

/* Uhrzeit im Kopf der Card */
.ss-time {
    margin-bottom: 1rem;
    font-size: .85rem;
    color: #6c757d;
}

/* ===== Pause-Kachel (Button + Caption darunter) ===== */
.ss-pause-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.ss-caption {
    display: block;
    width: 100%;
    text-align: center;
    font-size: .9rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Button-Area: horizontal enger (Fallback, unabhängig von BS-Version) ===== */
/* Gemeinsame Basis für die Button-Area */
.btn-area-3col {
    display: grid !important;
    justify-content: center; /* zentriert die Spalten */
    row-gap: 1rem;
    column-gap: 1.25rem;
}

    /* Bootstrap-Spaltenpadding neutralisieren */
    .btn-area-3col > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

/* XS/SM: 1 Spalte – JEDE Kachel exakt 180px breit */
@media (max-width: 767.98px) {
    .btn-area-3col {
        grid-template-columns: 180px;
        column-gap: 1rem;
    }
        /* WICHTIG: Wrapper und Button auf feste Breite zwingen */
        .btn-area-3col > [class*="col-"] {
            width: 180px !important;
        }

        .btn-area-3col .rz-button {
            width: 100% !important; /* Button füllt die 180px */
            display: block; /* falls inline-flex stört */
        }
}

/* MD: 2 Spalten – gleiche Breite */
@media (min-width: 768px) and (max-width: 991.98px) {
    .btn-area-3col {
        grid-template-columns: repeat(2, 180px);
        column-gap: 1.25rem;
    }
}

/* LG+: 3 Spalten – gleiche Breite */
@media (min-width: 992px) {
    .btn-area-3col {
        grid-template-columns: repeat(3, 180px);
        column-gap: 1.5rem; /* bei Bedarf anpassen */
    }
}