@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


html, body {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

a {
    color: #252D33;
    text-decoration: none !important;
}

    a:hover {
        color: #3F9BEB;
    }

@media (min-width: 1920px ) {
    .container {
        max-width: 1620px;
    }
}

@media (min-width: 2880px ) {
    .container {
        max-width: 2200px;
    }
}

@media (min-width: 3660px ) {
    .container {
        max-width: 2880px;
    }
}


.header {
    border-bottom: 1px solid #c0c0c0;
    padding: 10px 50px;
}

.header-width {
    margin: 20px 50px 10px 50px;
}

@media (max-width: 768px) {
    .header-image {
        width: 100px;
        margin: 1.5rem;
    }
}

.flag-icon {
    width: 32px;
}

.main {
    height: calc(100dvh - 154px);
    background-color: #EFF6FC;
    color: #252D33;
    overflow-y: scroll;
}

.drawer-height {
    height: calc(100dvh - 154px) !important;
}

.content {
    padding: 30px;
}

.navbar {
}

    .navbar ul {
        list-style: none;
    }

    .navbar a {
        color: #252D33;
        font-size: 1rem;
        font-weight: 400;
    }

        .navbar a:hover {
            color: #3F9BEB;
        }

    .navbar .active a {
        color: #3F9BEB;
    }


.acc-management {
    display: flex;
    align-items: center;
}

.footer {
    background: white;
    border-top: 1px #c0c0c0 solid;
    padding: 10px 30px;
}

    .footer .link1 {
        grid-column: 2;
        justify-content: start;
    }

    .footer .link2 {
        grid-column: 3;
        justify-self: end;
    }

footer a {
    color: var(--neutral-foreground-rest);
    text-decoration: none;
}

    footer a:focus {
        outline: 1px dashed;
        outline-offset: 3px;
    }

    footer a:hover {
        text-decoration: underline;
    }


.pdf-container iframe {
    width: 100%;
    height: 800px; /* oder eine andere Höhe, die Sie bevorzugen */
    border: none;
}


@media (max-width: 768px) {
    .pdf-container iframe {
        height: 600px; /* Anpassung der Höhe für kleinere Bildschirme */
    }
}


.logo h1 {
    margin: 0;
}

.hero {
    background: url('hero.png') no-repeat center center;
    background-size: cover;
    color: white;
    text-align: center;
}

.overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Halbtransparentes schwarzes Overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 5rem 0;
}

.hero-text {
    color: white;
    margin-bottom: 1rem;
}

.cta-button {
    background: #007bff;
    color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 5px;
}

.features, .benefits, .videos, .pricing {
    padding: 3rem 0;
}

.features-grid, .benefits-grid, .video-grid, .pricing-table {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.feature-item, .benefit-item, .video-item, .pricing-item {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 5px;
    flex: 1 1 calc(33.333% - 2rem);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.week-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

    .week-selector button {
        padding: 5px 10px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .week-selector span {
        font-size: 0.75rem;
    }

.cell-urlaub {
    background-color: #6FF7E1 !important;
    border-radius: 0px !important;
}

.cell-krankheit {
    background-color: #B89081 !important;
    border-radius: 0px !important;
}

.cell-weiterbildung {
    background-color: #F7966F !important;
    border-radius: 0px !important;
}

.cell-elternzeit {
    background-color: #7FA29C !important;
    border-radius: 0px !important;
}

.cell-sonderurlaub {
    background-color: #7A2C0E !important;
    border-radius: 0px !important;
}

.cell-publicholiday {
    background-color: lightblue !important;
    border-radius: 0px !important;
}

.cell-saturday {
    background-color: #D1D0D0 !important;
    border-radius: 0px !important;
}

.cell-sunday {
    background-color: #C0BFBF !important;
    border-radius: 0px !important;
}

.absence-planning.urlaub td:hover {
    background-color: #6FF7E1 !important;
}

.absence-planning.krankheit td:hover {
    background-color: #B89081 !important;
}

.absence-planning.weiterbildung td:hover {
    background-color: #F7966F !important;
}

.absence-planning.elternzeit td:hover {
    background-color: #7FA29C !important;
}

.absence-planning.sonderurlaub td:hover {
    background-color: #7A2C0E !important;
}

.absence-planning tr td:first-child:hover {
    background-color: inherit !important; /* Verhindert den Hover-Effekt */
}

.shift-assigned {
    background-color: rgba(148, 226, 101, 0.05) !important;
}

.shift-not-assigned {
    background-color: rgba(177, 51, 51, 0.1) !important;
}

.child-flex-1 > div {
    flex-basis: 180px;
}


.progress-center {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5); /* optional: halbtransparentes Overlay */
    z-index: 9999;
}




.secure-ws-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #3F9BEB !important;
}

.mud-data-grid .mud-table-cell.sticky-right {
    background-color: white !important;
}


/* Standard-Icon-Style, wirkt "verlinkt" */
.filter-icon {
    cursor: pointer;
    text-decoration: underline; /* optional: Link-Look */
    transition: color 0.2s; /* sanfter Farbwechsel */
}

    /* Hover-Effekt */
    .filter-icon:hover {
        color: #3F9BEB; /* dunkleres Blau */
        text-decoration: underline;
    }

/* Aktiver Zustand */
.filter-icon-active {
    color: #3F9BEB;
    cursor: pointer;
    text-decoration: underline; /* optional: Link-Look */
    transition: color 0.2s; /* sanfter Farbwechsel */
}

    .filter-icon-active:hover {
        color: #427FB5; /* dunkleres Blau */
        text-decoration: underline;
    }


/* Hero-Bereich: farbiger Banner */
.hero-banner {
    width: 100%;
    min-height: 40vh;
    background: url('hero.png') no-repeat center center;
    padding: 2rem 1rem;
}

/* Hero-CTA-Button */
.hero-cta {
    background-color: #fff !important;
    color: #1976d2 !important;
    font-weight: bold;
    border-radius: 999px;
    padding: 0.75rem 2rem;
}

/* Gemeinsame Wrapper-Klassen für Sektionen */
.section-wrapper {
    padding: 3rem 1rem;
    background-color: #ffffff;
    margin-top: 2rem;
}

.section-wrapper-alt {
    padding: 3rem 1rem;
    background-color: #f7f7f7;
    margin-top: 2rem;
}

.section-wrapper-cta {
    padding: 4rem 1rem;
    background-color: #fff;
    margin-top: 2rem;
}

/* Funktionenkarten (MudCard) */
.function-card {
    margin: 1rem 0;
    border-radius: 8px;
}

/* Textfarben anpassen (z. B. im Hero) */
.text-white {
    color: #ffffff !important;
}

/* Beispiel für eine maximale Breite, um Textzeilen nicht zu lang werden zu lassen */
.max-width-800 {
    max-width: 800px;
}


/* Blog POSTS */

/* Globale Table-Styling für Blog-Posts */
.blog-post table {
    table-layout: fixed; /* Fixiert die Breiten, verhindert ungleichmäßige Zellen */
    width: 100%; /* Volle Breite der Seite */
    border-collapse: collapse; /* Keine Lücken zwischen Zellen */
    margin-bottom: 1em; /* Abstand unter der Tabelle */
}

/* Gleiche Breite für td-Zellen (hier 50% für 2-Spalten-Layout) */
.blog-post td {
    width: 50%; /* Gleichmäßige Aufteilung */
    padding: 1em; /* Innenabstand für Text und Bilder */
    vertical-align: top; /* Oben ausrichten */
}

/* Bild-Styling: Einheitliche Breite, responsiv */
.blog-post img {
    max-width: 300px; /* Maximale Breite, passt zu deiner Skizze */
    height: auto; /* Beibehalten des Aspektverhältnisses */
    display: block; /* Zentriert in der Zelle */
    margin: 0 auto; /* Horizontal zentrieren */
    border-radius: 8px; /* Optionale abgerundete Ecken für besseres Design */
}