/* =========================================
   1. Root / Design Tokens
   
   Für Primärfarben werden keine neuen 
   Variablen definiert!
   ========================================= */
:root {
    /* PharmOnline Farb Design */
    --po-primary-foreground-color: white;
    --po-primary-background-color: white;
    --po-secondary-background-color: #f8f8f8;
    --po-tertiary-background-color: #f0f0f0;
    --po-quaternary-background-color: #f9f9f9;
    --po-primary-green-color: #4ccd89;
    --po-secondary-green-color: #3db978;
    --po-tertiary-green-color: #3da66b;
    --po-light-green-color: #c9efd7;
    --po-primary-grey-color: #888;
    --po-secondary-grey-color: #707070;
    --po-tertiary-grey-color: #444;
    --po-quaternary-grey-color: #333;
    --po-quinary-grey-color: #CCCCCC;
    --po-notification-error-color: #e02d76;
    --po-notification-success-color: var(--po-primary-green-color);
    --po-notification-warning-color: #f7ca18;
    --po-primary-text-color: black;
    /* Kontrast Farben um die Google Prüfung zu bestehen */
    --po-button-text-green-color: #76c29f; /*#2f8655 */

    /* PharmOnline Schatten */
    --po-primary-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    --po-menu-box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.12);

    /* PharmOnline Schriften */
    --po-text-font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    --po-symbolic-font-family: "Material Icons";
    /* keine Unterstrichen bei Links */
    --po-link-text-decoration: none !important;

    --po-text-h1-font-size: 36px;
    --po-text-h2-font-size: 34px;
    --po-text-h3-font-size: 36px;
    --po-text-h4-font-size: 34px;

    --po-text-notification-font-size: 15px;

    --po-text-line-height: 1.5;
    --po-text-notification-line-height: 1.3;

    --po-badge-border-radius: 50px;
    --po-datalist-border-radius: 8px;

    --po-button-border-radius: 24px; /* Such Button */
    --po-button-width: 250px; /* Breite Such Button */
}

/*
TEST
 */
.mdi {
    /* font-size: 40px; */
    color: black;
}

.materialicon-picker {
    display:  flex;
    align-items: center;
}
.materialicon-picker label {
    margin-right:  5px;
}
.materialicon-picker .materialicon-picker-input-wrapper {
    display:  flex;
    position: relative;
}
.materialicon-picker .materialicon-picker-input input {
    font-size: 20px;
    color:  #07616a;
    padding: 5px 5px;
    border:  1px solid #07616a;
    border-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.materialicon-picker .materialicon-picker-append {
    min-width: 50px;
    background: #ccc;
    border:  1px solid #a2b1b3;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center;
    padding: 8px 5px 0px 5px;
}
.materialicon-picker .icons-grid {
    width:  100%;
    height: 250px;
    position: absolute;
    border: 1px solid #ccc;
    display: none;
    overflow-y: scroll;
    padding: 5px;
    background: white;
    z-index: 50;
}
.materialicon-picker .icons-grid .icon {
    display: inline-block;
    font-size: 32px;
    margin: 4px 3px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 2px;
}
.materialicon-picker .icons-grid .icon:hover {
    border:  1px solid #ccc;
    border-radius: 3px;
}

/* Login-Bereich Anfang */
/*
Container für die Login-Seite.
        - Zweck: Zentriert die Login-Oberfläche und setzt den Hintergrund.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(440px, 62vh, 600px);
    padding: 56px 16px 64px;
    background-color: transparent;
    background-image: linear-gradient(120deg, #4ccd89, #64c7f3);
}

/*
Äußerer Karten-Container des Login-Bereichs.
        - Zweck: Fasst Form, Title und externe Logins in einer gemeinsamen Box zusammen.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-card {
    width: 100%;
    max-width: 720px;
    background: #f4f4f4;
    border-radius: 12px;
    border: 1px solid #dfdfdf;
    overflow: hidden;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.13);
}

.po-login-card--registration {
    overflow: visible;
}

/*
Überschrift innerhalb der Login-Karte.
        - Zweck: Formatiert den Seitentitel oberhalb des Formulars.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-title {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 420;
    color: #363636;
    padding: 30px 40px;
    border-bottom: 1px solid #dadada;
}

/*
Grundlayout des Login Forms.
        - Zweck: Ordnet Eingabefelder und Formularhilfen vertikal mit einheitlichen Abständen an.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px;
}

/*
Hilfsregeln für optionale Formularhinweise.
        - Zweck: Blendet leere Passwortstärke-Hinweise aus.
        - Verwendet: Seiten mit Passwort Eingaben
*/
.po-login-form #passwordStrength:empty {
    display: none;
}

/*
Wrapper für Eingabefelder mit Icon und Floating-Label.
        - Zweck: Vereinheitlicht Rahmen, Hintergrund und Innenaufbau der Formularfelder.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-field {
    display: flex;
    align-items: stretch;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    background: #f7f7f7;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/*
Icon-Bereich innerhalb eines Login Feldes.
        - Zweck: Positioniert das vorangestellte Icon und trennt es optisch vom Eingabebereich.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-field > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #d2d2d2;
    background: transparent;
    color: #b4b4b4;
    padding: 0 16px;
}

/*
Innerer Wrapper für Input und Label.
        - Zweck: Stellt die Basis für Floating Labels innerhalb der Login Felder bereit.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-floating {
    position: relative;
    flex: 1;
    min-width: 0;
}

/*
Eingabefelder im Login Bereich.
        - Zweck: Definiert Darstellung, Fokusverhalten und Platzhalterbehandlung der Inputs.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-floating > input {
    flex: 1;
    width: 100%;
    border: 0;
    outline: 0;
    background: #f7f7f7;
    color: #666;
    font-size: 1.05rem;
    padding: 1.55rem 1rem 0.52rem;
}

.po-login-floating > input::placeholder {
    color: transparent;
}

.po-login-floating > input:focus {
    background: #ffffff;
}

/*Floating Labels für Login Felder.
        - Zweck: Positioniert die Labels über den Eingaben und verschiebt sie bei Fokus oder Inhalt.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-floating > label {
    position: absolute;
    left: 0;
    top: 50%;
    padding: 0 1rem;
    color: #8a8a8a;
    pointer-events: none;
    transform-origin: 0 0;
    transform: translateY(-50%);
    transition: transform 0.14s ease, color 0.14s ease, opacity 0.14s ease, top 0.14s ease;
    opacity: 0.9;
}

.po-login-floating > input:focus ~ label,
.po-login-floating > input:not(:placeholder-shown) ~ label {
    top: 0.5rem;
    transform: scale(0.78);
    color: #606d70;
    opacity: 1;
}

/*
Fokus und Validierungszustände der Login Felder.
        - Zweck: Hebt aktive, fehlerhafte und gültige Eingaben visuell hervor.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-field:focus-within {
    border-color: #4ccd89;
    box-shadow: 0 0 0 3px rgba(76, 205, 137, 0.18);
}

.po-login-form.was-validated .po-login-field.po-is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

.po-login-form.was-validated .po-login-field.po-is-invalid > span {
    color: #dc3545;
    border-right-color: #dc3545;
}

.po-login-form.was-validated .po-login-field.po-is-invalid input {
    color: #842029;
    background: #fff6f7;
}

.po-login-form.was-validated .po-login-field.po-is-invalid label {
    color: #842029;
}

.po-login-form.was-validated .po-login-field.po-is-valid {
    border-color: #198754;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.16);
}

.po-login-form.was-validated .po-login-field.po-is-valid label {
    color: #1d6c46;
}

.po-password-helper-anchor {
    position: relative;
}

.po-password-requirements {
    display: none;
    position: absolute;
    top: 50%;
    left: calc(100% + 14px);
    z-index: 80;
    width: 285px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #d3d3d3;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(25, 40, 52, 0.08);
    transform: translateY(-50%);
}

.po-password-helper-anchor > .po-login-field + .po-invalid-feedback + .po-login-field {
    margin-top: 10px;
}

.po-password-requirements::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 9px 8px 0;
    border-color: transparent #d3d3d3 transparent transparent;
    transform: translateY(-50%);
}

.po-password-requirements::after {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 9px 8px 0;
    border-color: transparent #ffffff transparent transparent;
    transform: translateY(-50%);
}

.po-password-requirements.po-is-active {
    display: block;
}

.po-password-requirements-title {
    margin: 0 0 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #3b3b3b;
}

.po-password-requirements-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.po-password-requirements-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 24px;
    font-size: 0.88rem;
    line-height: 1.3;
    color: #727272;
}

.po-password-requirements-list li.po-is-satisfied {
    color: #1d6c46;
}

.po-password-requirements-icon {
    font-size: 0.95rem;
    line-height: 1;
}

/*
Container für Zustimmungen und Checkbox Gruppen.
        - Zweck: Gruppiert Datenschutz und Nutzungsbestätigungen unterhalb der Eingabefelder.
        - Verwendet: Registrierungs und Passwortseiten mit Einwilligungen
*/
.po-login-consents {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/*
Darstellung einzelner Zustimmungszeilen.
        - Zweck: Richtet Checkbox und Text aus und gestaltet verlinkte Rechtstexte.
        - Verwendet: Registrierungs und Passwortseiten mit Einwilligungen
*/
.po-login-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: #4e4e4e;
    font-size: 0.95rem;
    line-height: 1.45;
    cursor: pointer;
}

.po-login-consent-label input[type="checkbox"] {
    margin-top: 1px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #4ccd89;
}

.po-login-consent-link {
    color: #3a3a3a;
    text-decoration: underline;
}

.po-login-consent-link:hover,
.po-login-consent-link:focus-visible {
    color: #232323;
}

/*
Validierungszustände für Zustimmungen.
        - Zweck: Zeigt Fehler und Erfolg bei Checkbox Gruppen an.
        - Verwendet: Registrierungs und Passwortseiten mit Einwilligungen
*/
.po-login-form.was-validated .po-login-consents.po-is-invalid + .po-invalid-feedback {
    display: block;
    margin-top: -12px;
}

.po-login-form.was-validated .po-login-consents.po-is-invalid .po-login-consent-label input[type="checkbox"]:not(:checked) {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

.po-login-form.was-validated .po-login-consents.po-is-valid .po-login-consent-label input[type="checkbox"] {
    accent-color: #198754;
}

/*
Aktionsbereich unterhalb des Formulars.
        - Zweck: Ordnet primäre und sekundäre Aktionen wie Absenden oder Navigation.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

/*
Primäre und sekundäre Aktionsbuttons.
        - Zweck: Vereinheitlicht Stil, Hover Zustand und Hierarchie der Formularaktionen.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-btn-primary,
.po-btn-secondary {
    border: 1px solid #4ccd89;
    border-radius: 24px;
    padding: 11px 26px;
    cursor: pointer;
    background: #4ccd89;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.po-btn-primary {
    background: #4ccd89;
    color: #ffffff;
    min-width: 170px;
}

.po-btn-secondary {
    background: #ffffff;
    color: #33ab72;
    align-self: flex-start;
}

.po-btn-primary:hover,
.po-btn-primary:focus-visible,
.po-btn-secondary:hover,
.po-btn-secondary:focus-visible {
    background: #3fbb7a;
    border-color: #3fbb7a;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/*
Link für vergessene Zugangsdaten.
        - Zweck: Hebt ergänzende Navigationsziele wie Passwort vergessen hervor.
        - Verwendet: Login Page
*/
.po-login-forgot {
    color: #464646;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
}

.po-login-forgot:hover,
.po-login-forgot:focus-visible {
    color: #2f2f2f;
    text-decoration: underline;
}

/*
Fehlerbox oberhalb oder innerhalb des Login Formulars.
        - Zweck: Stellt serverseitige oder zusammengefasste Fehlermeldungen gut sichtbar dar.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-login-error {
    margin: 14px 14px 12px;
    border: 1px solid #efb2b9;
    border-radius: 6px;
    background: #fcecee;
    color: #8a2230;
    padding: 12px 14px;
}

.po-login-error ul {
    margin: 0;
    padding-left: 20px;
}

.po-login-text {
    margin: 0 14px 18px;
    color: #464646;
    font-size: 1rem;
    line-height: 1.5;
}

.po-login-success {
    margin: 14px 14px 12px;
    border: 1px solid #a6d9bd;
    border-radius: 6px;
    background: #eaf7ef;
    color: #1f6b42;
    padding: 12px 14px;
}

.po-login-info {
    margin: 14px 14px 12px;
    border: 1px solid #b8c7d6;
    border-radius: 6px;
    background: #f2f6f9;
    color: #32465a;
    padding: 12px 14px;
}

.po-btn-primary:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

/*
Relaunch-Passwortseite.
        - Zweck: Richtet den Einführungstext an den bestehenden Login-Kartenabständen aus.
        - Verwendet: Relaunch-Passwortpflicht nach der ersten Anmeldung
*/
.po-relaunch-password-page {
    align-items: flex-start;
    padding-top: 0;
}

.po-relaunch-password-card {
    max-width: min(1120px, calc(100vw - 48px));
}

.po-relaunch-password-card .po-login-text {
    margin: 18px 40px 0;
}

.po-relaunch-password-card .po-relaunch-password-form .po-login-text {
    margin: 0;
}

.po-login-subtitle {
    margin: 0;
    padding: 18px 40px 0;
    color: #555;
    font-size: 1.12rem;
    line-height: 1.45;
}

.po-relaunch-password-steps {
    margin: 16px 40px 0;
    padding-left: 24px;
    color: #464646;
    font-size: 1rem;
    line-height: 1.5;
}

.po-relaunch-password-steps li + li {
    margin-top: 8px;
}

.po-relaunch-password-steps strong {
    color: #363636;
}

.po-relaunch-password-security-note {
    border-left: 3px solid #4ccd89;
    padding-left: 14px;
}

.po-relaunch-password-acceptance-note {
    color: #4e4e4e;
}

.po-relaunch-password-card .po-login-title {
    font-size: 1.64rem;
}

.po-relaunch-password-card .po-login-error,
.po-relaunch-password-card .po-login-success,
.po-relaunch-password-card .po-login-info {
    margin-left: 40px;
    margin-right: 40px;
}

.po-relaunch-password-card .po-login-error + .po-login-form,
.po-relaunch-password-card .po-login-info + .po-login-form {
    padding-top: 12px;
}

/*
Inline Fehlermeldungen für Formularfelder.
        - Zweck: Blendet feldbezogene Validierungstexte erst nach Prüfung ein.
        - Verwendet: Login, Passwort, und Registrierungsseiten
*/
.po-invalid-feedback {
    display: none;
    margin-top: 6px;
    margin-bottom: 0;
    color: #842029;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.po-login-form.was-validated .po-login-field.po-is-invalid + .po-invalid-feedback {
    display: block;
}

.po-login-form.was-validated .po-password-field.po-is-invalid + #PasswordFeedback {
    display: block;
}

/*
Abstände für direkte Feld-Fehlermeldungen im Formular.
        - Zweck: Verhindert doppelte Flex-Gaps zwischen Feld, Fehlermeldung und nächstem Feld.
        - Verwendet: Registrierungsformular (Name, E-Mail, Konsensmeldungen)
*/
.po-login-form > .po-login-field.po-is-invalid + .po-invalid-feedback {
    margin-top: -12px;
}

.po-login-form > .po-invalid-feedback + .po-login-field {
    margin-top: -10px;
}

.po-login-form > .po-invalid-feedback + .po-password-helper-anchor {
    margin-top: -10px;
}

.po-login-form > .po-invalid-feedback + .po-login-actions {
    margin-top: -10px;
}

/*
Bereich für externe Login oder Identity Provider.
        - Zweck: Trennt alternative Anmeldewege optisch vom klassischen Formular.
        - Verwendet: Login Page mit externen Providern
*/
.po-external-login {
    margin-top: 24px;
    padding: 0 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.po-external-login form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*
Responsive Anpassungen für mittlere Bildschirmbreiten.
        - Zweck: Verhindert horizontales Scrollen und hält Karte und Seitencontainer innerhalb des Viewports.
        - Verwendet: Login, Passwort, und Registrierungsseiten auf Tablets
*/
@media (max-width: 992px) {
    html,
    body,
    .po-theme-body,
    .po-login-page {
        overflow-x: hidden;
    }

    .po-login-page,
    .po-login-card {
        max-width: 100%;
    }
}

/*
Responsive Anpassungen für kleine Bildschirmbreiten.
        - Zweck: Reduziert Abstände und stapelt Aktionen für mobile Geräte.
        - Verwendet: Login, Passwort, und Registrierungsseiten auf Smartphones
*/
@media (max-width: 768px) {
    .po-login-page {
        min-height: auto;
        padding: 36px 14px 44px;
    }

    .po-relaunch-password-page {
        padding-top: 36px;
    }

    .po-login-title {
        padding: 24px;
        font-size: 1.6rem;
    }

    .po-login-form {
        padding: 24px;
    }

    .po-external-login {
        padding: 0 24px 24px;
    }

    .po-login-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .po-relaunch-password-card .po-login-text,
    .po-relaunch-password-card .po-login-error,
    .po-relaunch-password-card .po-login-success,
    .po-relaunch-password-card .po-login-info,
    .po-relaunch-password-steps {
        margin-left: 24px;
        margin-right: 24px;
    }

    .po-login-subtitle {
        padding-left: 24px;
        padding-right: 24px;
    }

    .po-password-requirements {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 6px;
        padding: 8px 10px;
        box-shadow: none;
        transform: none;
    }

    .po-password-requirements::before,
    .po-password-requirements::after {
        display: none;
    }

    .po-password-requirements-title {
        margin-bottom: 6px;
        font-size: 0.86rem;
    }

    .po-password-requirements-list li {
        min-height: 20px;
        font-size: 0.82rem;
        gap: 8px;
    }
}
/* Login-Bereich Ende */

.po-theme-body {
    margin: 0;
    font-family: Raleway, sans-serif;
    color: #1f2b3a;
    background: #fff;
}

#alertsection .alert-container {
    background-color: var(--po-notification-warning-color);
    color: #000;
    text-align: center;
    padding: 4px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.po-content {
    /* TODO: Dieses Element sorgt in der Oberfläche für einen gap zwischen der letzte Componente und der Fußzeile.
         Da mir der Nutzen nicht klar ist habe ich diesen Eintrag auskommentiert. Danach sieht die Webseite für mich
         besser aus.*/
    /* min-height: 50vh; */
}

/* Menu Section Anfang */
/* 
Container der Menu Section. 
        - Zweck: Der Container für das Menü.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-navigation {
    min-height: 54px;
    padding: 20px 40px 14px 40px;
    border-bottom: 1px solid #e9edf4;
    background: #fff;
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.12);
}

/* 
Container für die gesamte Menüzeile (Logo, Navigation, Buttons).
        - Zweck: Ordnet linke Navigation und rechte Buttons horizontal an.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-flex {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    flex-wrap: nowrap;
}

/* 
Linker Bereich innerhalb der Menüleiste.
        - Zweck: Conzainer für Logo und Menü.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-left {
    min-width: 0;
    flex: 1;
}

/* 
Wrapper für Logo und Navigation.
        - Zweck: Gruppiert Logo und Menü horizontal.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-wrapper {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-right: auto;
}

/* 
Logo innerhalb des Menüs.
        - Zweck:
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-logo {
    height: 38px;
    width: auto;
}

/* 
Listen im Menü.
        - Zweck: Entfernt Standard Listen Style.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-main ul,
.menu-main ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 
Navliste.
        - Zweck: Ordnet Menüpunkte horizontal an.
        -Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-main > ul,
.menu-main .menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 
Einzelns Menüelement.
        - Zweck:
         -Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-main li,
.menu-main .menu-item {
    display: block;
    margin-right: 0;
    position: relative;
}

/* 
Menülinks.
        - Zweck: Styling der Menülinks.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-main a,
.menu-main .menu-link {
    display: block;
    padding: 0 15px;
    text-decoration: none;
    color: var(--po-tertiary-grey-color) !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    border-radius: 0;
    transition: none;
    cursor: pointer;
}

/* 
Hover und Focus Zustand des Menüs.
        - Zweck: Styling der Effekte.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-main a:hover,
.menu-main a:focus-visible,
.menu-main .menu-link:hover,
.menu-main .menu-link:focus-visible {
    color: var(--po-primary-green-color) !important;
    background: transparent;
}

/* 
Aktiver Menüpunkt.
        - Zweck: Farbe des aktiven menüpukts.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-main a.is-active,
.menu-main .menu-link.is-active,
.menu-main a.active,
.menu-main .menu-link.active,
.menu-main .dropdown-item.active {
    color: var(--po-primary-green-color) !important;
    background: transparent;
}

/* 
Dropdown-Menü.
        - Zweck: Positionierung und Styling des Dropdown untermenüs..
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-main .menu-item > ul,
.menu-main .menu-item > .submenu {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    min-width: 220px;
    background: #fff;
    border: 1px solid #e9edf4;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    list-style: none;
    padding: 6px;
    margin: 0;
    z-index: 20;
}

.menu-main .menu-item:hover > ul,
.menu-main .menu-item:focus-within > ul,
.menu-main .menu-item:hover > .submenu,
.menu-main .menu-item:focus-within > .submenu {
    display: block;
}

/* 
Sprachmenü-Link.
        - Zweck: Styling des Sprachauswahl Untermenüs.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-item-language > .menu-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.menu-language-caret {
    font-family: "Material Icons", sans-serif;
    font-size: 18px;
    line-height: 1;
    text-transform: none;
}

/* 
Container für rechte Buttons (Login,Register,Primaflex).
        - Zweck: Positionierung der Buttons.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-navigation-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* 
Menü Navigationsbuttons.
        - Zweck: Styling der Buttons im Menü.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-navigation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 250px;
    min-width: max-content;
    min-height: 40px;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--po-primary-green-color) !important;
    border: 1px solid var(--po-primary-green-color);
    border-radius: 24px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--po-primary-background-color);
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* 
PrimaFlex Button 
    - Zweck: Eigene Farbvariante (Invertiert) für den Primaflex Button 
    - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-navigation-button.primaflex {
    color: var(--po-primary-background-color) !important;
    background: var(--po-primary-primary-primaflex-color);
    border: 1px solid var(--po-primary-primary-primaflex-color);
}

/* 
PrimaFlex Button Hover
    - Zweck: Eigene Farbvariante (Invertiert) für den Primaflex Button Hover Effekt.
    - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-navigation-button.primaflex:hover {
    color: var(--po-primary-primary-primaflex-color) !important;
    background: var(--po-primary-background-color);
    border: 1px solid var(--po-primary-primary-primaflex-color);
    box-shadow: 0 4px 10px rgba(76, 205, 137, 0.35);
}

/* 
Icon innerhalb eines Menü-Buttons.
        - Zweck: Styling der Button Icons.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-navigation-button-icon {
    font-family: "Material Icons", sans-serif;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga";
}

/* 
Hover Effekt der Menü Buttons.
        - Zweck: Styling des Hover Effekts.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.menu-navigation-button:hover {
    color: var(--po-primary-background-color) !important;
    background: var(--po-primary-green-color);
    box-shadow: 0 4px 10px rgba(76, 205, 137, 0.35);
}

/*
Profil-Dropdown im Header.
    - Zweck: Dropdown für angemeldete Benutzer (Dashboard, Account, Abmelden).
    - Verwendet: Menü-Komponente (alle Seiten)
*/
.profile-dropdown {
    position: relative;
}

.profile-dropdown-toggle {
    text-transform: none;
}

.profile-dropdown-toggle::after {
    display: none !important;
}

.profile-dropdown-caret {
    font-family: "Material Icons", sans-serif;
    font-size: 18px;
    line-height: 1;
    text-transform: none;
}

.profile-dropdown-menu {
    min-width: 260px;
    padding: 0;
    border: 1px solid #d8dde5;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.profile-dropdown-header {
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #6b7682;
    border-bottom: 1px solid #e6ebf2;
    background: #fff;
}

.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 16px;
    text-transform: none;
}

.profile-dropdown-item .material-icons {
    font-size: 20px;
    line-height: 1;
}

.profile-dropdown-item:hover,
.profile-dropdown-item:focus {
    background: #f4f7fb;
}

.profile-dropdown-form {
    margin: 0;
}

.profile-dropdown-signout {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

/* 
Navbar Items.
        - Zweck: Zusätzliches padding der Menü-Items. Das Important ist notwendig um den Bootstrap default zu überschreiben.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.navbar-nav .nav-link {
    padding: 3px 15px !important;
}

.navbar {
    padding: 0;
}

.navbar-collapse {
    flex-grow: 0;
}

/* 
Burger Button.
        - Zweck: Styling für den Button welcher das mobile Burger Menü öffnet.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 24px;
    color: var(--po-primary-green-color) !important;
    border: 1px solid var(--po-primary-green-color) !important;
    box-shadow: none;
    background: var(--po-primary-background-color);
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* 
Burger Button .
        - Zweck: Styling für den Burger Button on Hover.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.navbar-toggler:hover {
    color: var(--po-primary-background-color) !important;
    background: var(--po-primary-green-color);
    box-shadow: 0 4px 10px rgba(76, 205, 137, 0.35);
}

/* 
Burger Button Icon .
        - Zweck: Styling für das Burger Button Icon.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.navbar-toggler .material-icons {
    font-size: 20px;
    line-height: 1;
    color: var(--po-primary-green-color); 
    transition: color 0.2s ease;
}

/* 
Burger Button Icon on Hover .
        - Zweck: Styling für das Burger Button Icon beim Hover.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.navbar-toggler:hover .material-icons {
    color: var(--po-primary-background-color);
}

/* 
Fokus und Aktiv Zustand des Burger-Buttons.
        - Zweck: Verhindert den standardmäßigen schwarzen Rahmen von Bootstrap.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler.focus,
.navbar-toggler:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* 
Sub Dropdown Menü 
    - Zweck: Mehr Abstand für Sub Menü Items
    - Verwendet: Menü-Komponente (alle Seiten)
*/
.dropdown-menu.sub-dropdown-menu {
    padding: 10px 5px;
}

/* 
Sprach Dropdown Item
    - Zweck: Mehr Abstand für die einzelnen MenüItems
    - Verwendet: Menü-Komponente (alle Seiten)
*/
.sub-dropdown-menu .dropdown-item {
    padding: 5px 10px;
    line-height: 1.4;
}

/* 
Responsive ab 992px.
        - Zweck: Stellt Menü und Buttons zentriert und untereinander dar.
        - Verwendet: Menü-Komponente (alle Seiten)
*/
@media (max-width: 992px) {
    /* 
    Menüstruktur.
         - Elememte werden untereinander dargestellt.
         - Verwendet: Menü-Komponente (Mobile)
    */
    .menu-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 
    Buttons.
        - Buttons erhalten volle Breite und dürfen umbrechen.
        - Verwendet: Menü-Komponente (Mobile)
    */
    .menu-navigation-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 1400px) {

    /* 
     Menü-Container wird vertikal aufgebaut.
         - Zweck: Logo,Burger oben, Menü darunter, Buttons darunter.
         - Verwendet: Menü-Komponente (Mobile)
    */
    .menu-flex {
        flex-direction: column;
        align-items: center;  
    }

    /* 
    Navbar zentriert.
       - Zweck: Navbar und Burger wird zentriert (zusammen mit dem Logo).
        justify-content: center !important überschreibt den Bootstrap-Default und erzwing eine 
        zentierung auch bei geöffnetem Burger Menü.
       - Verwendet: Menü-Komponente (Mobile)
    */
    .navbar {
        display: flex;
        justify-content: center !important; 
        align-items: center;
        flex-wrap: wrap;
        width: auto;
        gap: 12px;
    }

    /* 
    Wrapper für Logo Burger
       - Zweck: Logo und Burger immer nebeneinander und zentiert.
       - Verwendet: Menü-Komponente (Mobile)
    */
    .navbar-top {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    /* 
    Collapse Menü
        - Zweck: Menü wird in eigener Zeile mittig dargestellt.
        - Verwendet: Menü-Komponente (Mobile)
    */
    .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* 
     Burger Menü Punkte
         - Zweck: Punkte werden mittig unter Logo,Burger dargestellt.
         - Verwendet: Menü-Komponente (Mobile)
    */
    .navbar-nav {
        align-items: center;
    }

    /* 
    Buttons
     - Zweck: Buttons werden mittig unter Logo,Burger dargestellt.
     - Verwendet: Menü-Komponente (Mobile)
    */
    .menu-navigation-actions {
        width: 100%;
        justify-content: center;
        margin-top: 16px;
    }
}

/* 
Mobile Optimierung bis 575px.
    - Zweck: Icon-only Buttons auf kleinen Geräten. Primaflex Bleibt.
    - Verwendung: Menü-Komponente (alle Seiten)
*/
@media (max-width: 575px) {
    /* 
    Buttons (Login, Register).
        - Zweck: Buttons zeigen nur Icons.
        - Verwendet: Menü-Komponente (Mobile)
    */
    .menu-navigation-button.icon-only-mobile .menu-navigation-button-text {
        display: none;
    }

    /* 
    Buttons (Login, Register).
      - Zweck:
      - Verwendet: Menü-Komponente (Mobile)
    */
    .menu-navigation-button.icon-only-mobile {
        min-width: 44px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .profile-dropdown-caret {
        display: none;
    }
}

/* Menu Section Ende */

/* 
    Container der Image Slider Section. 
        - Zweck: Container
        - Verwendet: Startseite 
*/
.image-slider-container {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    background-repeat: repeat-x;
}

/* 
    Container der Image Slider Section. 
        - Zweck: RadzenStack übersteuern damit zwischen den Carousel Buttons (kleine Punkte) 
                 ein Abstand entsteht 
        - Verwendet: Startseite 
*/
.image-slider-container .rz-stack {
    box-sizing: border-box;
    gap: 5px !important;
}

.image-slider-link {
    text-decoration: none;
    color: inherit;
}

/* 
    Container der Image Slider Section. 
        - Zweck: Darstellung eines Buttons unter dem Link Text
        - Verwendet: Startseite 
*/
.image-slider-button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 28px;
    margin-top: 16px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.12);
    transition: background-color 0.2s ease;
}

/* 
    Container der Image Slider Section. 
        - Zweck: Darstellung eines Texts im Button 
        - Verwendet: Startseite 
*/
.image-slider-button-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    transition: color 0.2s ease;
}

/* 
    Container der Image Slider Section. 
        - Zweck: Darstellung eines Hover Effekt für den Button
        - Verwendet: Startseite 
*/
.image-slider-button-link:hover {
    background-color: rgba(255, 255, 255, 1);
}

.image-slider-button-link:hover .image-slider-button-text {
    color: rgba(0, 0, 0, 1);
}


/* 
    Container der Image Slider Section. 
        - Zweck: Radzen Carousel übersteuern damit die Carousel Buttons eine Horizontale 
                 Zentrierung im Overlay einnehmen.
        - Verwendet: Startseite 
*/
.rz-carousel button {
    margin-top: 18px !important;
    height: 60px;
    width: 60px;
    background: var(--rz-menu-top-item-color) !important;
    border-radius: 50% !important;
}

/* 
    Container der Image Slider Section. 
        - Zweck: Item, besteht aus einem Bild und Texten
        - Hinweis: Die Höhe wird über den Parameter Height via CodeBehind dynamisch gesetzt
        - Verwendet: Startseite 
*/
.image-slider-item {
    position:relative;
    width:100%;
}

/* 
    Container der Image Slider Section. 
        - Zweck: Image, das Hintergrundbild ohne Parallax Transformation
        - Verwendet: Startseite 
*/
.image-slider-image {
    width:100%;
    height:100%;
    object-fit:cover;
    border: 0px;
    border-radius: 0px;
}

/* 
    Container der Image Slider Section. 
        - Zweck: Den Text über den Hintergrundgrafiken positionieren
        - Verwendet: Startseite 
*/
.image-slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.3);
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    border-radius: 0px;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform-origin: 50% 50%;
}

/* 
    Container der Image Slider Section. 
        - Zweck: Slogan Text
        - Verwendet: Startseite 
*/
.image-slider-text-header {
    display: flex;
    align-items: center;       /* Vertikale Zentrierung */
    justify-content: center;   /* Horizontale Zentrierung (falls gewünscht) */
    text-align: center;        /* Textfluss innerhalb der Zeilen */
    width: min(90vw, 840px);
    height: auto;
    line-height: 1.2;          /* Behält einen sauberen Zeilenabstand bei Mehrzeilern bei */
    letter-spacing: 0px;
    font-weight: 600;
    font-size: clamp(1.6rem, 4.8vw, 42px);
    margin: 0px 0px 14px;
    padding: 0px 12px;
    cursor: pointer;
}

/* 
    Container der Image Slider Section. 
        - Zweck: Text
        - Verwendet: Startseite 
*/
.image-slider-text-subheader {
    margin: 0;
    font-size: 1.2rem;
}

/* 
    Container der Image Slider Section. 
        - Zweck: Anpassung an unterschiedliche Device Größen
        - Verwendet: Startseite 
*/
@media (max-width: 991px) {
    .image-slider-item {
        height: 520px !important;
    }

    .rz-carousel button {
        width: 48px;
        height: 48px;
        margin-top: 12px !important;
    }
}

/* 
    Container der Image Slider Section. 
        - Zweck: Anpassung an unterschiedliche Device Größen
        - Verwendet: Startseite 
*/
@media (max-width: 767px) {
    .image-slider-item {
        height: 380px !important;
    }

    .image-slider-button-link {
        min-height: 40px;
        padding: 8px 18px;
        margin-top: 12px;
    }

    .image-slider-button-text {
        font-size: 16px;
    }
}

/* 
    Container der Image Slider Section. 
        - Zweck: Anpassung an unterschiedliche Device Größen
        - Verwendet: Startseite 
*/
@media (max-width: 575px) {
    .image-slider-item {
        height: 300px !important;
    }

    .image-slider-text-header {
        font-size: clamp(1.2rem, 5.2vw, 1.6rem);
    }
}
/* END - Image Slider Section */

/* 
    Komponente für die Rezept/Dienstleistung Page Section 
        - Zweck: Anpassungen zur Überschrift der einzelnen Rezept/Dienstleistung erzwingen
        - Verwendet: Startseite 
*/
#page-prescription-section h1 {
    color: var(--po-quaternary-grey-color);
    padding-bottom: 50px;
    font-weight: normal !important;
    line-height: 1.1 !important;
    font-size: 36px !important;
    text-align: center;
    text-wrap-mode: wrap;
    max-width: 776px;
}

/* 
    Komponente für die Rezept/Dienstleistung Page Section 
        - Zweck: Erweiterung der Radzen Material Klasse i.rzi erzwingen
        - Verwendet: Startseite 
*/
#page-prescription-section i.rzi {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 45px;
    margin-bottom: 45px;
    color: var(--po-primary-green-color) !important;
}

/* 
    Komponente für die Rezept/Dienstleistung Page Section 
        - Zweck: Abstände zu den anderen Page Sections festlegen
        - Verwendet: Startseite 
*/
.prescription-section-padding-top-bottom {
    padding-top: 75px !important;
    padding-bottom: 70px !important;
}

/* 
    Komponente für die Rezept/Dienstleistung Page Section 
        - Zweck: Zentrierung und Abstände der Headline Texte festlegen
        - Verwendet: Startseite 
*/
.prescription-section-columns {
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
}

/* 
    Komponente für die Rezept/Dienstleistung Page Section 
        - Zweck: Zentrierung und Breite der Headline festlegen
        - Verwendet: Startseite 
*/
.prescription-section-headline.centered h1 {
    text-align: center;
    max-width: 776px;
}

/* 
    Komponente für die Rezept/Dienstleistung Page Section 
        - Zweck: Zentrierung und Abstände der Headline Texte festlegen
        - Verwendet: Startseite 
*/
.prescription-section-headline {
    align-items: center;
    text-align: center !important;
    max-width: 776px;
    margin-bottom: 10px;
}

.prescription-section-body{
    align-items: center;
    text-align: center;
    width: 776px;
    margin-bottom: 30px;
    color: var(--po-tertiary-grey-color);
}

/* 
    Komponente für die Rezept/Dienstleistung Page Section 
        - Zweck: Breite für die Zeilen der Page Section festlegen
        - Verwendet: Startseite 
*/
.prescription-section-row {
    width: 100%;
    max-width: 1200px;
}

/* 
    Komponente für die Rezept/Dienstleistung Page Section 
        - Zweck: Container für die einzelnen Rezept/Dienstleistung Elemente 
        - Verwendet: Startseite 
*/
.prescription-section-item-container {
    text-align: center;
    padding: 20px;
}

/* 
    Komponente für die Rezept/Dienstleistung Page Section 
        - Zweck: Grafik Icon für die einzelnen Rezept/Dienstleistung Elemente 
        - Verwendet: Startseite 
*/
.prescription-section-item {
    --rz-icon-size: 60px ;
    --rz-icon-color: var(--po-primary-green-color) !important;
    --rz-icon-font-family: 'Material Symbols' ;
    font-variation-settings:
        /* 'wght' 300,  /* Strichstärke: 100 (dünn) bis 700 (fett) */
            'FILL' 0;   /* 0 = Outline, 1 = Filled */
}

/* 
    Komponente für die Rezept/Dienstleistung Page Section 
        - Zweck: Überschrift für die einzelnen Rezept/Dienstleistung Elemente 
        - Verwendet: Startseite 
*/
.prescription-section-item-title {
    width: 373px;
    font-size: 19px;
    font-weight: 500;
    margin: 0;
}

/* 
    Komponente für die Rezept/Dienstleistung Page Section 
        - Zweck: Optionale Fußnote für die einzelnen Rezept/Dienstleistung Elemente 
        - Verwendet: Startseite 
*/
.prescription-section-item-footnote {
    color: var(--po-tertiary-grey-color);
    margin: 0;
}

/* Minenfeld - Versuch der Darstellung einer Verbindungslinie zwischen den einzelnen Elementen */
.icon-box-2 h3 {
    margin: 4px 0;
    line-height: 26px;
    font-size: 19px;
    font-weight: 500;
}

.icon-box-2.with-line:before {
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 40px;
    background: #000000;
    display: block;
    z-index: 9;
}

.icon-box-2.with-line::before {
    display: none;
}

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* END - Page Section */

/* Footer Section Anfang */

#footer {
    background: #f6f8fb;
    /* margin-top: 48px; */
}

/* 
    Fusszeile auf allen Seiten
        - Zweck: Für alle Icons aus Radzen die Modifizierungen im Footer erzwingen  
        - Verwendet: Footer
*/
.icon {
    --rz-icon-size: 16px ;
    --rz-icon-color: var(--po-secondary-grey-color) !important;
    --rz-icon-font-family: 'Material Symbols' ;
    font-variation-settings:
            'FILL' 0;   /* 0 = Outline, 1 = Filled */
}

.footer-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0px 16px 22px;
}

/* Bootstrap Anpassungen 
- Zweck: hr darf keinen Abstand nach Unten haben sonst liegt der Copyright Text zu tief.
- Verwendung: Footer.
*/
.footer-container hr {
    margin-bottom: 0px !important;
}

.footer-grid {
    display: grid;
    grid-template-columns: 420px 420px 1fr;
    gap: 24px;
}

.footer-logo {
    width: 190px;
}

.footer-slogan {
    margin-top: 10px;
}

.footer-links {
    margin: 0;
    padding-left: 0;
    list-style: none;
    columns: 2;
    column-gap: 120px;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: var(--po-quaternary-grey-color) !important;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--po-primary-green-color) !important;
    text-decoration: none;
}

/* 
    Fusszeile auf allen Seiten
        - Zweck: Für alle Links <a> die Animation im Footer erzwingen  
        - Verwendet: Footer
*/
.footer-links li a {
    padding: 0 0 9px 16px;
    display: inline-block;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
    color: var(--po-secondary-grey-color);
    line-height: 21px !important;
}

/* 
    Fusszeile auf allen Seiten
        - Zweck: Für alle Links <a> die Animation für den hover Event im Footer erzwingen  
        - Verwendet: Footer
*/
.footer-links li a:hover {
    transform: translateX(4px); /* verschiebt den Text nach rechts */
}

a.footer-link {
    color: var(--po-quaternary-grey-color);
    font-size: 16px;
    text-decoration: var(--po-link-text-decoration);
}

a.footer-link:hover {
    color: var(--po-primary-green-color) !important;
    text-decoration: var(--po-link-text-decoration);
    cursor: pointer;
}

.footer-link.footer-link-disabled {
    color: var(--po-secondary-grey-color);
    cursor: not-allowed;
    opacity: 0.55;
}

.footer-link:hover {
    text-decoration: var(--po-link-text-decoration);
}

a.footer-icon-text {
    color: var(--po-quaternary-grey-color);
    font-size: 16px;
    text-decoration: var(--po-link-text-decoration);
}

a.footer-icon-text:hover {
    color: var(--po-primary-green-color) !important;
    text-decoration: var(--po-link-text-decoration);
    cursor: pointer;
}

/* 
    Fusszeile auf allen Seiten
        - Zweck: Container für den E-Mail Kontakt Link im Footer
        - Verwendet: Footer
*/
.footer-icon-text {
    display: flex;
    align-items: center;   /* vertikal mittig */
    gap: 0.3rem;           /* optionaler Abstand */
    padding-left: 4px;
}

.footer-copy {
    font-size: 14px;
    color: #707070;
    text-align: center;
    padding: 40px 0;
    display: inline-block;
    width: 100%;
}

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-links {
        columns: 1;
    }
}

/* Footer Section Ende */

/* Ad Section */

.pharmonline-ad-slot--service img {
    display: block;
    margin: 96px auto;
}

.pharmonline-ad-slot--blogpost img {
    display: block;
    margin: 96px auto;
}

/* Ad Section Ende */

/* Radzen Komponenten Section */

/*  Modifikationen zur visuellen Steuerung der Radzen Checkbox. 
    Diese Anpassungen übersteuern die Standard Werte aus der Radzen CSS Konfiguration.
*/

/* 
    Diese Klasse sorgt für die Darstellung der Checkbox als Kreis oder Quadrat.
*/
.rz-chkbox-box {
    /*border-radius: 25px !important;*/ /* Runde CheckBox */
    border-radius: 5px !important;      /* Quadratische CheckBox */
}

/* 
    Diese Klasse sorgt für die farbliche Darstellung der äußeren Kreisfläche 
    wenn mit der Maus über die Checkbox gehovert wird und die Checkbox gesetzt ist.
*/
.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled):after {
    background-color: var(--rz-primary) !important;
    opacity: .08
}

/* 
    Diese Klasse sorgt für die farbliche Darstellung der äußeren Kreisfläche 
    wenn mit der Maus über die Checkbox gehovert wird und die Checkbox nicht gesetzt ist.
*/
.rz-chkbox-box:hover:not(.rz-state-disabled):after {
    width: 2.2rem !important; /* Durchmesser der äußeren Kreisfläche */
    height: 2.2rem !important;
    background-color: var(--rz-primary-light) !important;
    opacity: .3
}

/* 
    Diese Klasse sorgt für die farbliche Darstellung des Randes 
    wenn mit der Maus über die Checkbox gehovert wird.
*/
.rz-chkbox-box:hover:not(.rz-state-disabled) {
    border-color: var(--rz-primary) !important;
}

/* Radzen Komponenten Section Ende */

/* 
    Diese Klasse sorgt für die Ausrichtung am linken Rand 
    der Blog Post Liste mit dem Header Title News.
*/
.blog-post-list .rz-datalist-data > li {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px !important;
}

/* 
    Diese Klasse sorgt für die Text Größe und die Ausrichtung  
    des Blog Post Titel in einem H1 Tag.
*/
.blog-post-title {
    font-size: 36px !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}