/* DEBUG */
.debug-frame {
    position: relative;
    outline: 1px dashed red;
    border-radius: 4px;
}

    .debug-frame::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 4px;
        width: 24px;
        height: 24px;
        background-image: url('/images/debugIcons/debugIcon.svg');
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.5;
        pointer-events: none;
    }

/* Allgemein */

.paddingLR {
    padding-left: 11px;
    padding-right: 11px;
}

.marginLeft-Auto {
    margin-left: auto;
}

.marginRight-Auto {
    margin-right: auto;
}

.content-Center {
    display: flex;
    justify-content: center;
}

.marginBottom-15 {
    margin-bottom: 15px;
}

.marginBottom-25 {
    margin-bottom: 25px;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.cursor-pointer {
    cursor: pointer;
}

.item-toggle {
    display: none;
}

.item-clickable {
    cursor: pointer;
}

.item-disabled {
    pointer-events: none;
    user-select: none;
}

.item-center {
    display: block;
    text-align: center;
}

.item-fontSize-2 {
    font-size: 2rem;
}

.item-underline {
    text-decoration: underline;
    cursor: pointer;
    margin-left: 0.15rem;
}

.hidden-image {
    display: none;
}

/* Grids */

.grid-disabled {
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
}

/*.row-disabled {
    background-color: #f0f0f0 !important;
    pointer-events: none;
    user-select: none;
}*/

/* fieldset + legend */

fieldset {
    border: 1px solid #666 !important;
}

legend {
    padding: 0px 10px !important;
    float: none;
    width: auto;
    font-size: 1.4rem;
}

/* Farben */

.color-red {
    background-color: #ffe4e1 !important;
}

.color-yellow {
    background-color: #fffbdb !important;
}

.color-grey-light {
    background-color: #f0f0f0 !important;
}

.color-blue-light {
    background-color: #cce5ff;
}

.color-blue-medium {
    background-color: #dce9fc;
}

.color-blue-soft {
    background-color: #eef3fb;
}

.color-kelobit-blue {
    background-color: #004a82;
}

.bgBlue {
    background-color: #0072c5;
}

.bgGreen {
    background-color: #6fae47;
}

/*.bgGreen2 {
    background-color: #b7d6a3
}*/

.bgRed {
    background-color: #ff0100;
}

.color-positiv-green {
    color: green;
}

.color-negativ-red {
    color: red;
}

.error-Text {
    color: red;
    font-size: 12px;
}

/* Popups */

.popupHeader-Container {
    width: 100%;
    text-align: center;
}

.popupHeader-Icon {
    float: left;
    height: 20px;
    width: 20px;
}

/* Karten / Kacheln */

.card {
    width: clamp(75px, 9.5vw, 160px);
    aspect-ratio: 3 / 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
    border-radius: 0;
    color: var(--bs-link-color-rgb);
    text-decoration: none;
    position: relative;
}

    .card .card-text {
        font-size: clamp(0.6rem, 1.4vw, 1.5rem);
        margin-top: auto;
        margin-right: auto;
        color: white;
    }

    .card .card-back {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bs-body-color);
        opacity: 0.05;
        border-radius: 0;
        z-index: -2;
    }

    .card.bgBlue:hover:enabled {
        background-color: #0072c5 !important;
        transform: scale(1.05);
        box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    }

    .card.bgRed:hover:enabled {
        background-color: #ff0100 !important;
        transform: scale(1.05);
        box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    }

/* Icons / Logos */

.logo-placeholder {
    height: 150px;
    width: 250px;
}

.logo-placeholder-fallback {
    height: clamp(40px, 8vw, 100px);
    width: clamp(100px, 30vw, 250px);
    background-color: transparent;
}

.logo-menuBar-placeholder {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 100%;
    max-height: 100px;
    overflow: hidden;
}

.menuBar-Logo {
    height: auto;
    width: clamp(40px, 21.5vw, 350px);
    max-height: 100px;
    object-fit: contain;
    display: block;
}

.loginPopup-Logo {
    height: 150px;
    width: 250px;
}

.popup-header-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.notificationBar-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.2%;
}

.status-icon {
    height: 2em;
    width: auto;
}

.tB-ButtonIconRight {
    width: 50px;
    height: 50px;
    -webkit-mask-image: url("/images/uiIcons/triangleRight.svg");
    -webkit-mask-repeat: no-repeat;
    mask-image: url("/images/uiIcons/triangleRight.svg");
    mask-repeat: no-repeat;
    background-color: currentColor;
    opacity: 1;
}

.tB-ButtonIconLeft {
    width: 50px;
    height: 50px;
    -webkit-mask-image: url("/images/uiIcons/triangleLeft.svg");
    -webkit-mask-repeat: no-repeat;
    mask-image: url("/images/uiIcons/triangleLeft.svg");
    mask-repeat: no-repeat;
    background-color: currentColor;
    opacity: 1;
}

.btn-iconFormat {
    width: 2rem;
    /*    height: 2rem;*/
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.btn-iconFormatBoxes {
    width: 1rem;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.btn-eyeOpen {
    background-image: url("/images/buttonIcons/btn_eyeOpen.svg");
}

/* NavMenu Komponente */

.navMenu-LogoContainer {
    margin-left: auto;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hide-nav {
    display: none !important;
}

/* Notification Bar Komponente */

.siteBar-notification {
    position: absolute;
    width: 100%;
    text-align: center;
}

.popupBar-notification {
    width: 100%;
    text-align: center;
}

/* AbsenceScheduler Komponente */

.absence-scheduler-grid td {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.scheduler-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 1.5rem
}

.scheduler-cell {
    display: flex;
    flex-direction: column;
    height: 5.25vh;
    align-items: center;
    cursor: pointer;
    padding: 0;
}

.scheduler-month {
    text-align: center;
    font-weight: bold;
}

.scheduler-weekday {
    /*   height: 100%;*/
    width: 100%;
    font-size: 0.8rem;
    text-align: center;
}

.scheduler-color-block {
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

    .scheduler-color-block.half-day {
        position: relative;
    }

.half-day-start,
.half-day-end {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--absence-color);
}

.half-day-start {
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.half-day-end {
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* AbsenceRequestForm Komponente */

.absence-type-template {
    display: flex;
    align-items: center;
    gap: 8px;
}

.absence-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #aaa;
}

.absence-formHeader {
    display: flex;
    flex-wrap: wrap;
}

.absence-formHeader-label {
}

.absence-formHeader-date {
    word-break: break-word;
}

/* AbsenceRequestGrid Komponente */

.absenceRequest-grid {
    height: 74vh;
}

/* TooltipFlyout */
.tooltip-flyout-header {
    /*    color: white;*/
    text-align: center;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.tooltip-flyout-body {
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Login Popup */

/*.error-Container {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}*/

.responsive-login-popup {
    width: 500px;
    height: 600px;
    min-width: 251px;
    min-height: 210px;
}

.loginPopup-Body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.loginPopup-Content {
    flex-grow: 1;
}

.loginPopupLogo-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.loginPopupFooter-version {
    margin-right: auto;
}

/* TimeCorrectionPopup */

.tCPopup-content-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tCPopup-grid-container {
    margin-bottom: auto;
}

.tCPopup-formular-container {
    margin-top: auto;
}

.tCPopup-grid {
    max-height: 205px;
}

.tCPopup-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Startseite */

.startsite-InfoContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.startsite-dateTimeContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.startsite-dateTimeLabel {
    text-align: center;
    font-size: clamp(15px, 5vw, 100px); /* Mindest-, Ideal- und Maximalgröße */
}

.startsite-UsernameLabel {
    font-size: clamp(25px, 4.5vw, 50px);
}

.startsite-bookingStatus {
    --status-fs: clamp(20px, 4vw, 45px);
    font-size: var(--status-fs);
    display: inline-flex;
    align-items: center;
    gap: 2rem;
}

/*.startsite-bookingStatusLabel {
    font-size: clamp(18px, 3.5vw, 40px);
}*/


/* Urlaubskonto Seite */

.absenceInfo-tab-container {
    height: calc(100vh - 210px);
    overflow-y: auto;
}

.absenceInfo-form-wrapper {
    height: calc(100vh - 510px);
    overflow-y: auto;
}

.absenceInfo-buttonContainer {
    display: flex;
    gap: 1.2rem;
    justify-content: flex-start;
    align-items: flex-start;
}

.holiday-fieldsetContainer {
    padding: 10px;
}

.holiday-userInfoContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 5px;
}

/* Urlaubskonto Seite für Mobile (Requestform) */

.absence-form-wrapper {
    height: calc(100dvh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.holiday-userInfoLabel,
.holiday-userInfoValue {
    min-width: 120px; /* verhindert, dass Text zu klein wird */
    flex: 1 1 45%; /* nebeneinander wenn Platz da ist, sonst stacked */
}

.holiday-userInfoLabel {
    font-weight: bold;
}

.holiday-userInfoValue {
    text-align: right;
}

/* Saldo Informationen Seite */

.tB-header-container {
    display: flex;
}

.tB-userInfoContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 5px;
}

.tB-timeInfoContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    padding-left: 5%;
    padding-right: 5%;
    width: 80%;
}

.tB-GridContainer {
    padding-left: 1%;
    padding-right: 1%;
}

.tB-ButtonContainer {
    height: 100%;
    border: 1px solid;
}

.tB-userNameLabel {
    font-size: 20px;
    font-weight: bold;
}

.tB-dateValue {
    font-size: 18px;
}

.tB-timeInfoRow {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5px;
}

.tB-timeInfoLabel {
    font-weight: bold;
}

.tB-timeInfoValue {
    margin-left: 10px;
}

.tB-timeInfoColumn {
    flex-direction: column;
    gap: 10px;
}

.tB-Button {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.tB-grid-size {
    height: 58vh;
}

/* Media */

/* Große Bildschirme (bis 1200px) */
@media (max-width: 1200px) {
    .tB-timeInfoContainer {
        display: none;
    }
}

/* Falls isBalancePopupVisible true ist, wieder anzeigen */
@media (max-width: 1200px) {
    .tB-timeInfoContainer.visible {
        display: block;
        position: absolute;
        top: 18%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 50%;
        padding: 10px;
        background: #e7e7e7;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        z-index: 1000;
        /* height: 20%;
        overflow: scroll; */
    }

    .item-toggle {
        display: inline;
    }

    .info-icon {
        width: 15px;
        height: 15px;
        cursor: pointer;
        transition: opacity 0.2s ease-in-out;
    }

        .info-icon:hover {
            opacity: 0.7;
        }

    .header-clickable {
        cursor: pointer;
        transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
    }

        .header-clickable:hover {
            color: #0072c5;
        }
}

@media (max-width: 1300px) {
    .holiday-userInfoValue {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .absence-formHeader {
        flex-direction: column;
    }
}

@media (max-width: 1300px) {
    legend {
        font-size: 1.0rem;
    }
}

@media (max-height: 850px), (max-width: 800px) {
    .absence-form-container {
        max-height: 70vh; /* vorher 35vh */
        overflow-y: auto;
    }
}

@media (max-width: 1024px), (max-height: 850px) {
    .tB-grid-size {
        height: 65vh;
    }
}

/* Anpassung für große Bildschirme (2K / 4K) */
@media (min-width: 2000px) {
    .absenceInfo-buttonContainer .card {
        /*  width: 120px;*/
        aspect-ratio: 3 / 2;
    }

    .holiday-fieldsetContainer {
        max-width: 450px;
        font-size: 0.9rem;
    }

    .holiday-userInfoContainer {
        padding-bottom: 2px;
    }

    .holiday-userInfoLabel,
    .holiday-userInfoValue {
        font-size: 0.9rem;
    }
}

/* Mobilgeräte (unter 600px Bildschirmbreite) */
@media (max-width: 600px) {
    .responsive-login-popup {
        width: 90vw;
        height: 72vh;
    }
}

@media screen and (orientation: portrait) {
    .startsite-header-spacer {
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) and (orientation: portrait) {
    .startsite-bookingStatus {
        gap: 1rem;
    }

    .startsite-dateTimeLabel {
        font-size: 35px;
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    .startsite-bookingStatus {
        --status-fs: clamp(15px, 3vw, 30px);
        gap: 1rem;
    }

    .status-icon {
        height: 1.5em;
    }

    .startsite-dateTimeLabel {
        font-size: clamp(15px, 5vw, 80px);
    }
}