/* _content/SKM_OnlineClearingstelle/Components/Admin Components/FeedbackComponent.razor.rz.scp.css */
.container[b-9xkq9y51pc] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr max-content 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "Header"
        "Citation"
        "Writer";
    width: 32.25em;
    height: 28.063em;
    border-radius: 2.5rem;
    background: var(--Farbverlauf-Dark-Grey---Dark-Blue, linear-gradient(286deg, rgba(50, 56, 99, 0.90) 3.95%, #323863 19.47%, #33354A 48.29%, #333 95.51%));
    /* Shadow Boxes/Cards */
    box-shadow: 0.125rem 0.25rem 0.5rem 0 rgba(30, 30, 30, 0.25);
}

.Header[b-9xkq9y51pc] {
    justify-self: center;
    align-self: start;
    grid-area: Header;
    color: var(--Main_Color---White, #FFF);
    font-family: var(--font-base);
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 2.813rem;
}

.Citation[b-9xkq9y51pc] {
    justify-self: center;
    align-self: center;
    grid-area: Citation;
    color: var(--Main_Color---White, #FFF);
    text-align: center;
    font-family: var(--font-base);
    font-size: 1.625rem;
    font-style: italic;
    font-weight: 400;
    line-height: 2.25rem; /* 138.462% */
    margin-left: 3.875rem;
    margin-right: 3.875rem;
}

.Writer[b-9xkq9y51pc] {
    justify-self: end;
    align-self: end;
    grid-area: Writer;
    color: var(--Main_Color---White, #FFF);
    font-family: var(--font-base);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem; /* 177.778% */
    margin-bottom: 1.75rem;
    margin-right: 2.313rem;
}

.FeedbackCards-Wrapper[b-9xkq9y51pc] {
    display: flex;
    flex-direction: column;
    gap: 4.188rem;
    align-items: center;
    justify-content: center
}
/* _content/SKM_OnlineClearingstelle/Components/Admin Components/QuestionsComponent.razor.rz.scp.css */



.QuestionWrapper[b-osrro35qaj] {
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items:start;
}



.QuestionList[b-osrro35qaj] {
    display: flex;
    flex-direction: column;
    gap: 1.56rem;
}

.QuestionCard[b-osrro35qaj] {
    width: 59.6875rem;
    height: 3.75rem;
    border: 0 hidden transparent;
    border-radius: 1.25rem;
    background: var(--Farbverlauf-Dark-Grey---Dark-Blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 2.63rem;
    padding-right: 1.87rem;
    gap: 2rem;
}

    .QuestionCard.activeQuestion[b-osrro35qaj] {
        background: var(--Main-Color---Signal-Red, #E3000F);
    }

    .QuestionCard h2[b-osrro35qaj] {
        color: var(--Main-Color---White, #FFF);
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 2rem;
        overflow: hidden;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .QuestionCard img[b-osrro35qaj] {
        width: 1.5625rem;
        height: 1.5625rem;
        aspect-ratio: 1/1;
    }



.AnwserCard[b-osrro35qaj] {
    width: 41.5625rem;
    height: auto;
    border-radius: 2.5rem;
    background: var(--Main-Color---White, #FFF);
    /* Shadow Boxes/Cards */
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    padding-top: 3.56rem;
    padding-bottom: 3.56rem;
    padding-left: 5.31rem;
    padding-right: 5.31rem;
    display: flex;
    flex-direction: column ;
    box-sizing: border-box;
}

    .AnwserCard img[b-osrro35qaj] {
        width: 1.5625rem;
        height: 1.5625rem;
        aspect-ratio: 1/1;
    }

[b-osrro35qaj] .subline {
    color: var(--Main-Color---Signal-Red, #E3000F);
    font-weight: 700;
    margin-top: 1.5rem;
}

.AnwserCard .header[b-osrro35qaj] {
    color: var(--Main-Color---Signal-Red, #E3000F);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2rem; /* 133.333% */
    margin-top: 3.69rem;
    white-space: nowrap;
}

.AnwserCard p[b-osrro35qaj] {
    color: var(--Optinal-Color---Dark-Grey, #333);
    font-size: 1.25rem;
    line-height: 1.875rem; /* 150% */
    margin-top: 1.5rem;
}
/* _content/SKM_OnlineClearingstelle/Components/Layout/Footer.razor.rz.scp.css */
/* ========== FOOTER (CLEAN) ========== */

.footer[b-6f9c6w1q6q] {
    width: 100%;
    background: var(--Verlauf-Dark---Blue);
    color: var(--Main_Color---White, #FFF);
    font-family: var(--font-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* statt fixer Höhe → padding, damit Inhalte nicht gequetscht werden */
    padding: .75rem clamp(1rem, 4vw, 7.5rem);
    min-height: 3rem;
}

    .footer > span[b-6f9c6w1q6q] {
        font-size: clamp(1rem, 1.2vw, 1.25rem);
        font-weight: 500;
        line-height: 1.2;
    }

.footer-links[b-6f9c6w1q6q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

    .footer-links a[b-6f9c6w1q6q] {
        color: var(--Main_Color---White, #FFF);
        text-decoration: none;
        font-size: clamp(1rem, 1.1vw, 1.25rem);
        font-weight: 400;
        line-height: 1.2;
    }

        .footer-links a:focus[b-6f9c6w1q6q] {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

.divider[b-6f9c6w1q6q] {
    width: 1px;
    height: 1.75rem;
    background-color: var(--Main-Color---Signal-Red);
    opacity: .8;
}

/* Tablet */
@media (max-width: 64rem) {
    .footer[b-6f9c6w1q6q] {
        padding-inline: 2rem;
    }
}

/* Mobile */
@media (max-width: 48rem) {
    .footer[b-6f9c6w1q6q] {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        text-align: center;
        padding: 1rem;
    }

    .footer-links[b-6f9c6w1q6q] {
        justify-content: center;
        gap: .5rem .75rem;
    }

    .divider[b-6f9c6w1q6q] {
        display: none; /* spart Platz auf klein */
    }
}

/* --- Footer: Overflow-Schutz & bessere Anpassung --- */
.footer[b-6f9c6w1q6q] {
    /* Padding dynamisch statt starr – verhindert „Überbreite“ auf klein */
    padding-left: clamp(1rem, 4vw, 7.625rem);
    padding-right: clamp(1rem, 4vw, 7.375rem);
    /* Box-Berechnung inkl. Padding */
    box-sizing: border-box;
    /* Kein horizontales Ausbeulen – falls ein Kind breiter wird */
    max-width: 100vw;
    overflow-x: clip; /* sicherer als hidden, schneidet nur X; fallback s.u. */
}

/* Flex-Kinder dürfen schmaler werden */
.footer[b-6f9c6w1q6q], .footer-links[b-6f9c6w1q6q] {
    min-width: 0;
}

/* Links dürfen umbrechen, statt die Zeile zu sprengen */
.footer-links[b-6f9c6w1q6q] {
    flex-wrap: wrap;
    gap: 0.5rem 0.938rem; /* etwas kompakter bei Wrap */
}

    /* Sicherheitshalber keine „nowrap“-Effekte auf Links */
    .footer-links a[b-6f9c6w1q6q] {
        white-space: normal;
        max-width: 100%;
    }

/* Auf sehr schmalen Screens: Spalten-Layout vermeidet Scroll */
@media (max-width: 48rem) {
    .footer[b-6f9c6w1q6q] {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .footer-links[b-6f9c6w1q6q] {
        justify-content: center;
    }

    .divider[b-6f9c6w1q6q] {
        display: none;
    }
    /* spart Breite und visuelles Rauschen */
}

/* Fallback, falls overflow:clip nicht greift (ältere Browser) */
@supports not (overflow: clip) {
    .footer[b-6f9c6w1q6q] {
        overflow-x: hidden;
    }
}

/* _content/SKM_OnlineClearingstelle/Components/Layout/Header.razor.rz.scp.css */
/* ========== HEADER (CLEAN) ========== */

/* Toggle (Burger) */
.navbar-toggler[b-b0fjxg1i5v] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.25rem;
    position: absolute;
    top: .75rem;
    right: 1rem;
    z-index: 1100;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: .375rem;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.65%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    visibility: hidden; /* nur mobil sichtbar machen */
}

    .navbar-toggler:focus[b-b0fjxg1i5v] {
        outline: 2px solid #e3000f;
        outline-offset: 2px;
    }

    .navbar-toggler:checked[b-b0fjxg1i5v] {
        background-color: rgba(255, 255, 255, 0.95);
    }

/* Container-Leiste */
.container[b-b0fjxg1i5v] {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: auto 1fr auto; /* Logo | Nav | Auth */
    align-items: center;
    gap: clamp(1rem, 3vw, 5rem);
    width: 100%;
    max-width: 120rem;
    margin-inline: auto;
    padding: clamp(.75rem, 1.5vw, 1rem) clamp(1rem, 4vw, 7.5rem);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 6px -6px rgba(136, 136, 136, 0.8);
}

    /* Logo */
    .container > div:first-child img[b-b0fjxg1i5v] {
        height: clamp(2.75rem, 4vw, 5rem);
        width: auto;
        display: block;
    }

/* Nav */
nav[b-b0fjxg1i5v] {
    display: flex;
    gap: clamp(1rem, 3vw, 5rem);
    justify-content: center;
    align-items: center;
}

/* Links (Blazor NavLink ist verschachtelt, daher ::deep) */
.nav-item[b-b0fjxg1i5v]  .nav-link {
    color: var(--Optinal-Color---Dark-Grey);
    font-family: var(--font-base);
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    font-weight: 400;
    text-decoration: none;
    line-height: 1;
    padding: .25rem 0;
}

.nav-item[b-b0fjxg1i5v]  a.active {
    color: var(--Main-Color---Signal-Red, #E3000F);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.nav-item[b-b0fjxg1i5v]  .nav-link:hover,
.nav-item[b-b0fjxg1i5v]  .nav-link:focus {
    font-weight: 600;
}

/* Disabled Eintrag */
.nav-item.disabled[b-b0fjxg1i5v]  a {
    pointer-events: none;
    color: rgba(51, 51, 51, 0.20);
    text-decoration: none;
    cursor: default;
    font-size: clamp(1rem, 1.1vw, 1.25rem);
    font-weight: 400;
    line-height: 1;
}

/* Login/Logout Button rechts (verwendet deine bestehenden Klassen) */
.Text-LoginIcon-button[b-b0fjxg1i5v] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    color: var(--Optinal-Color---Dark-Grey);
    padding: .25rem .5rem;
}

/*    .Text-LoginIcon-button:focus {
        outline: 2px solid #e3000f;
        outline-offset: 2px;
    }*/

/* === RESPONSIVE === */

/* Tablets (<= 1024px): Logo kleiner, Lücken enger */
@media (max-width: 64rem) {
    .container[b-b0fjxg1i5v] {
        gap: 1.25rem;
        padding-inline: 2rem;
    }
}

/* Mobile (<= 768px): Burger sichtbar, Nav klappt ein/aus */
@media (max-width: 48rem) {

    .navbar-toggler[b-b0fjxg1i5v] {
        visibility: visible;
    }

    /* Grid auf 3 Spalten lassen (Logo | [leer] | Auth) */
    .container[b-b0fjxg1i5v] {
        grid-template-columns: auto 1fr auto;
        padding: .75rem 1rem;
    }

    /* Nav initial verstecken */
    .navbar-toggler:not(:checked) ~ .container nav[b-b0fjxg1i5v] {
        display: none;
    }

    /* Nav als Dropdown unter der Leiste */
    .navbar-toggler:checked ~ .container[b-b0fjxg1i5v] {
        position: sticky; /* bleibt angeheftet */
    }

        .navbar-toggler:checked ~ .container nav[b-b0fjxg1i5v] {
            position: absolute;
            left: 0;
            right: 0;
            top: calc(100% - 1px); /* direkt unter der Bar */
            display: flex;
            flex-direction: column;
            gap: .75rem;
            padding: 1rem;
            background: rgba(255,255,255,0.98);
            box-shadow: 0 6px 12px -6px rgba(0,0,0,.2);
            border-top: 1px solid rgba(0,0,0,.06);
        }

    /* Link-Größe auf Mobile */
    .nav-item[b-b0fjxg1i5v]  .nav-link {
        font-size: 1rem;
        padding: .5rem 0;
    }

    /* Logo minimal kleiner */
    .container > div:first-child img[b-b0fjxg1i5v] {
        height: 2.25rem;
    }
}

/* Login/Logout-Button: skaliert auf allen Breakpoints */
.Text-LoginIcon-button[b-b0fjxg1i5v] {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
}

    .Text-LoginIcon-button .Icon-Wrapper img[b-b0fjxg1i5v] {
        height: clamp(0.9rem, 1.2vw, 1rem);
        width: auto;
        display: block;
    }

/* ===== Mobile (<= 768px): Nav und Auth in Burger einklappen ===== */
@media (max-width: 48rem) {

    /* Burger sichtbar (falls vorher nicht) */
    .navbar-toggler[b-b0fjxg1i5v] {
        visibility: visible;
    }

    /* Container bleibt Grid: Logo | (leer/zentriert) | Platz für Button oben */
    .container[b-b0fjxg1i5v] {
        grid-template-columns: auto 1fr auto;
        padding: .75rem 1rem;
        row-gap: .5rem; /* etwas Luft wenn Menü offen */
    }

    /* Standard: beides zu, solange nicht gecheckt */
    .navbar-toggler:not(:checked) ~ .container .navwrap[b-b0fjxg1i5v],
    .navbar-toggler:not(:checked) ~ .container .auth[b-b0fjxg1i5v] {
        display: none;
    }

    /* Geöffnet: Nav untereinander + Button als eigener Block darunter */
    .navbar-toggler:checked ~ .container .navwrap nav[b-b0fjxg1i5v] {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        padding-top: .75rem;
        padding-bottom: .5rem;
        border-top: 1px solid rgba(0,0,0,.06);
    }

    .navbar-toggler:checked ~ .container .auth[b-b0fjxg1i5v] {
        display: block; /* sichtbar */
        padding-bottom: .75rem; /* etwas Luft nach unten */
        border-bottom: 1px solid rgba(0,0,0,.06);
    }

        /* Button auf Mobil als Block, gut antippbar */
        .navbar-toggler:checked ~ .container .auth .Text-LoginIcon-button[b-b0fjxg1i5v] {
            display: flex;
            width: 100%;
            justify-content: center;
            padding: .75rem 1rem;
            border-radius: .5rem;
            background: rgba(0,0,0,0.04);
        }

    /* Logo etwas kleiner */
    .container > div:first-child img[b-b0fjxg1i5v] {
        height: 2.25rem;
    }

    /* Linkgröße mobil */
    .nav-item[b-b0fjxg1i5v]  .nav-link {
        font-size: 1rem;
        padding: .5rem 0;
    }
}

/* ========== HEADER FIXES (append at end) ========== */

/* 1) Full-bleed Background für die Header-Leiste, Inhalt bleibt gedeckelt */
.container[b-b0fjxg1i5v] {
    position: sticky; /* bleibt wie gehabt */
    box-sizing: border-box;
    /* Hintergrund weg von .container selbst, kommt über ::before */
    background: transparent;
}

    .container[b-b0fjxg1i5v]::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw; /* volle Viewport-Breite */
        height: 100%;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 6px 6px -6px rgba(136, 136, 136, 0.8);
    }

/* 2) Kollision mit „absolutem“ Mobile-Dropdown aufheben */
@media (max-width: 48rem) {
    /* Stelle sicher: keine absolute Positionierung fürs Nav im Mobile */
    .navbar-toggler:checked ~ .container nav[b-b0fjxg1i5v] {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-top: none !important;
    }

    /* Nur die neue In-Flow-Variante verwenden (Nav + Auth einklappen) */
    .navbar-toggler:not(:checked) ~ .container .navwrap[b-b0fjxg1i5v],
    .navbar-toggler:not(:checked) ~ .container .auth[b-b0fjxg1i5v] {
        display: none !important;
    }

    .navbar-toggler:checked ~ .container .navwrap nav[b-b0fjxg1i5v] {
        display: flex !important;
        flex-direction: column;
        gap: .75rem;
        padding-top: .75rem;
        padding-bottom: .5rem;
        border-top: 1px solid rgba(0,0,0,.06);
    }

    .navbar-toggler:checked ~ .container .auth[b-b0fjxg1i5v] {
        display: block !important;
        padding-bottom: .75rem;
        border-bottom: 1px solid rgba(0,0,0,.06);
    }

        /* Button mobil: volle Breite, gut antippbar */
        .navbar-toggler:checked ~ .container .auth .Text-LoginIcon-button[b-b0fjxg1i5v] {
            display: flex;
            width: 100%;
            justify-content: center;
            padding: .75rem 1rem;
            border-radius: .5rem;
            background: rgba(0,0,0,0.04);
        }
}

/*--------------------------------neu-----------------*/

/* 3) Kein horizontales Ausbeulen mehr */
.container[b-b0fjxg1i5v],
.navwrap[b-b0fjxg1i5v], nav[b-b0fjxg1i5v],
.auth[b-b0fjxg1i5v] {
    min-width: 0; /* Flex/Grid-Kinder dürfen schrumpfen */
}

.container[b-b0fjxg1i5v] {
    max-width: 220rem; /* Inhalt capped */
    margin-inline: auto; /* zentriert */
    overflow-x: clip; /* kein horizontaler Scroll durch Header */
}

@supports not (overflow: clip) {
    .container[b-b0fjxg1i5v] {
        overflow-x: hidden;
    }
}

/* 4) Sicherheitshalber Medien nicht größer als Container */
.container img[b-b0fjxg1i5v] {
    max-width: 100%;
    height: auto;
}

/* 5) Button darf (wo nötig) umbrechen statt rauszuschieben */
.Text-LoginIcon-button[b-b0fjxg1i5v] {
    white-space: normal;
}

/* 6) Für sehr breite Screens: inneres Grid bleibt luftig, aber ohne Overflow */
@media (min-width: 90rem) {
    nav[b-b0fjxg1i5v] {
        gap: clamp(1rem, 2.5vw, 5rem);
    }
}

/* Inhalt capped, Hintergrund full-bleed via ::before */
.container[b-b0fjxg1i5v] {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: transparent;
    box-sizing: border-box;
}

    .container[b-b0fjxg1i5v]::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw; /* volle Bildschirmbreite */
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 6px 6px -6px rgba(136, 136, 136, 0.8);
    }

/* Panel-Grundlage (Desktop sichtbar als normaler Header-Flow) */
.menu[b-b0fjxg1i5v] {
    display: contents;
}
/* Desktop: keine Layoutänderung */

/* ===== Mobile (<= 768px): Dropdown unter der Leiste ===== */
@media (max-width: 48rem) {

    /* Burger sichtbar */
    .navbar-toggler[b-b0fjxg1i5v] {
        visibility: visible;
    }

    /* Header selbst: Höhe nur Leiste, Panel kommt darunter */
    .container[b-b0fjxg1i5v] {
        grid-template-columns: auto 1fr auto;
        padding: .75rem 1rem;
        overflow: visible; /* wichtig: Panel darf „aus dem Header raus“ */
    }

    /* Panel standardmäßig versteckt */
    .navbar-toggler:not(:checked) ~ .container .menu[b-b0fjxg1i5v] {
        display: none;
    }

    /* Geöffnetes Panel: eigener, voller Block UNTERHALB der Leiste */
    .navbar-toggler:checked ~ .container .menu[b-b0fjxg1i5v] {
        display: block;
        position: absolute;
        z-index: 1001;
        left: 50%;
        transform: translateX(-50%);
        top: 100%; /* direkt unter der Header-Leiste */
        width: 100vw; /* volle Bildschirmbreite */
        max-width: 100vw;
        box-sizing: border-box;
        background: rgba(255,255,255,0.98);
        box-shadow: 0 12px 18px -10px rgba(0,0,0,.18);
        border-top: 1px solid rgba(0,0,0,.06);
        padding: 0.75rem 1rem;
        /* kein horizontaler Scroll vom Panel */
        overflow-x: clip;
    }

        /* Inhalt im Panel: untereinander */
        .navbar-toggler:checked ~ .container .menu .navwrap nav[b-b0fjxg1i5v] {
            display: flex;
            flex-direction: column;
            gap: .75rem;
            padding-bottom: .5rem;
        }

        .navbar-toggler:checked ~ .container .menu .auth[b-b0fjxg1i5v] {
            display: block;
            padding-top: .5rem;
            border-top: 1px solid rgba(0,0,0,.06);
        }

        /* Button im Panel: full-width, gut antippbar */
        .navbar-toggler:checked ~ .container .menu .Text-LoginIcon-button[b-b0fjxg1i5v] {
            display: flex;
            width: 100%;
            justify-content: center;
            padding: .75rem 1rem;
            border-radius: .5rem;
            background: rgba(0,0,0,0.04);
            white-space: normal;
        }

    /* Mobile Typo */
    .nav-item[b-b0fjxg1i5v]  .nav-link {
        font-size: 1rem;
        padding: .5rem 0;
    }

    /* Logo etwas kleiner */
    .container > div:first-child img[b-b0fjxg1i5v] {
        height: 2.25rem;
    }
}

/* Sicherheit: keine Horizontal-Überbreite durch Header */
.container[b-b0fjxg1i5v], .menu[b-b0fjxg1i5v], .navwrap[b-b0fjxg1i5v], nav[b-b0fjxg1i5v], .auth[b-b0fjxg1i5v] {
    min-width: 0;
}



/* _content/SKM_OnlineClearingstelle/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-hbexv8ien4] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-hbexv8ien4] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

html[b-hbexv8ien4], body[b-hbexv8ien4] {
    height: 100%; /* Wichtig f�r die Berechnung */
    margin: 0;
}
.body-wrapper[b-hbexv8ien4] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main[b-hbexv8ien4] {
    flex: 1; /* f�llt den �freien� Platz */
    display: flex;
    flex-direction: column;
}

/* Catch-all gegen quer scrollen (falls irgendwo anders noch �berbreite entsteht) */
html[b-hbexv8ien4], body[b-hbexv8ien4] {
    overflow-x: hidden;
}


/* _content/SKM_OnlineClearingstelle/Components/Pages/Admin-Affected.razor.rz.scp.css */
body[b-nvdwk65aw2] {
}

.main-flex[b-nvdwk65aw2] {
    display: flex;
}

.main-flex-item[b-nvdwk65aw2] {
    flex: 1;
}

.main-flex-vertical-item[b-nvdwk65aw2] {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;
}

.height-box-50[b-nvdwk65aw2] {
    height: 50px;
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/Admin-Chat.razor.rz.scp.css */
body[b-n8qrmupe5e] {
}

.main-flex[b-n8qrmupe5e] {
    display: flex;
}

.main-flex-item[b-n8qrmupe5e] {
    flex: 1;
}

.main-flex-vertical-item[b-n8qrmupe5e] {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;
}

.height-box-50[b-n8qrmupe5e] {
    height: 50px;
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/Admin-Consultant.razor.rz.scp.css */
body[b-at1vzzlnsr] {
}

.main-flex[b-at1vzzlnsr] {
    display: flex;
}

.main-flex-item[b-at1vzzlnsr] {
    flex: 1;
    padding-top: 1rem;
}

.height-box-50[b-at1vzzlnsr] {
    height: 50px;
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/Admin-ConsultingServices.razor.rz.scp.css */
body[b-83qzsjsffe] {
}

.main-flex[b-83qzsjsffe] {
    display: flex;
}

.main-flex-item[b-83qzsjsffe] {
    flex: 1;
}

.main-flex-vertical-item[b-83qzsjsffe] {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;
}

.height-box-50[b-83qzsjsffe] {
    height: 50px;
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/Admin-ConsultingTiles.razor.rz.scp.css */
body[b-t3t6757vo0] {
}

.main-flex[b-t3t6757vo0] {
    display: flex;
}

.main-flex-item[b-t3t6757vo0] {
    flex: 1;
}

.main-flex-vertical-item[b-t3t6757vo0] {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;
}

.height-box-50[b-t3t6757vo0] {
    height: 50px;
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/Admin-Dates.razor.rz.scp.css */
body[b-gawr72zfsk] {
}

.main-flex[b-gawr72zfsk] {
    display: flex;
}

.main-flex-item[b-gawr72zfsk] {
    flex: 1;
}

.main-flex-vertical-item[b-gawr72zfsk] {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;
}

.height-box-50[b-gawr72zfsk] {
    height: 50px;
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/Admin-Feedback.razor.rz.scp.css */
body[b-imtty2wz5g] {
}

.main-flex[b-imtty2wz5g] {
    display: flex;
}

.main-flex-item[b-imtty2wz5g] {
    flex: 1;
}

.main-flex-vertical-item[b-imtty2wz5g] {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;
}

.height-box-50[b-imtty2wz5g] {
    height: 50px;
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/Admin-Question.razor.rz.scp.css */
body[b-jfe3vy8rur] {
}

.main-flex[b-jfe3vy8rur] {
    display: flex;
}

.main-flex-item[b-jfe3vy8rur] {
    flex: 1;
}

.main-flex-vertical-item[b-jfe3vy8rur] {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;
}

.height-box-50[b-jfe3vy8rur] {
    height: 50px;
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/Admin-Requests.razor.rz.scp.css */
body[b-908yebdfpu] {
}

.main-flex[b-908yebdfpu] {
    display: flex;
}

.main-flex-item[b-908yebdfpu] {
    flex: 1;
}

.main-flex-vertical-item[b-908yebdfpu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;
}

.height-box-50[b-908yebdfpu] {
    height: 50px;
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/Admin.razor.rz.scp.css */
body[b-jhqhv8r44r] {
}

.main[b-jhqhv8r44r] {
    padding: 1rem 1rem 1rem 1rem
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/FAQ.razor.rz.scp.css */
/* Grundfarben bleiben */
body[b-9196zj7coh] {
    background-color: var(--Main-Color---Light-Grey);
}

h2[b-9196zj7coh] {
    color: var(--Main-Color---Signal-Red, #E3000F);
    line-height: normal;
}

h1[b-9196zj7coh] {
    color: var(--Optinal-Color---Dark-Grey, #333);
    line-height: normal;
}

/* ===== HERO ===== */


.landingArea[b-9196zj7coh] {
    display: flex;
    justify-content: center;
    min-height: 47.3125rem; /* darf wachsen */
    margin-top: var(--header-h); /* nie unterm Header kleben */
    background: url('images/stockimages/stockwithfilters/FAQ_BG.jpg') no-repeat center top / cover;
}

.landingArea-Content[b-9196zj7coh] {
    width: min(100%, 120rem);
    margin-inline: auto;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(3rem, 7vw, 14.75rem) clamp(1rem, 4vw, 7.5rem) clamp(2rem, 5vw, 7.25rem);
}

.landingAreaCard[b-9196zj7coh] {
    width: 100%;
    max-width: clamp(40rem, 60vw, 55rem); /* schrumpft mit Viewport */
    max-height: clamp(22rem, 34vh, 30rem);
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 0 2.5rem 2.5rem 2.5rem;
    opacity: .9;
    background: #fff;
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    padding: clamp(1rem, 2.5vw, 3.5rem) clamp(1rem, 4vw, 4rem);
    box-sizing: border-box;
}

    .landingAreaCard h2[b-9196zj7coh] {
        font-size: clamp(1rem, 1.6vw, 1.25rem);
    }

    .landingAreaCard h1[b-9196zj7coh] {
        font-size: clamp(1.5rem, 3.2vw, 2.5rem);
        margin: .5rem 0 clamp(1rem, 2vw, 2rem);
    }

    .landingAreaCard p[b-9196zj7coh] {
        font-size: clamp(1rem, 1.6vw, 1.125rem);
        line-height: 1.7;
    }

/* ===== FAQ LISTE ===== */
.faqArea[b-9196zj7coh] {
    display: flex;
    justify-content: center;
}

.faqArea-Content[b-9196zj7coh] {
    width: min(100%, 120rem);
    margin-inline: auto;
    box-sizing: border-box;
    padding: clamp(2rem, 5vw, 7.25rem) clamp(1rem, 4vw, 7.5rem);
}

    .faqArea-Content h2[b-9196zj7coh] {
        font-size: clamp(1rem, 1.6vw, 1.25rem);
    }

    .faqArea-Content h1[b-9196zj7coh] {
        font-size: clamp(1.5rem, 3vw, 2.5rem);
        margin: .75rem 0 clamp(1.5rem, 3vw, 3.75rem);
    }

/* ===== LAYOUT: Fragen links | Antwort rechts (Desktop), 1-spaltig auf klein ===== */

/*.landingArea {
    margin-top: var(--header-h, 7.5rem); /* Fallback verhindert 0px 
}*/

/* _content/SKM_OnlineClearingstelle/Components/Pages/Home.razor.rz.scp.css */
/*:root {
    --header-h: 7.5rem;
}*/
/* Fallback, wenn kein JS misst */

/* ========================================
   BOUNCY ARROW
   ======================================== */
.bouncyArrow[b-jm1chym5co] {
    text-align: center;
    animation: bounce-b-jm1chym5co 2s infinite;
}

    .bouncyArrow img[b-jm1chym5co] {
        width: 1rem;
        height: auto;
    }

@keyframes bounce-b-jm1chym5co {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-15px);
    }

    60% {
        transform: translateY(-8px);
    }
}

/* ========================================
   WELCOME AREA
   ======================================== */
.welcomeArea[b-jm1chym5co] {
    position: relative;
    top: 0;
    min-height: 67.5rem;
    display: flex;
    background-image: url('images/stockimages/stockwithfilters/MaennerBeratung_BG.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    justify-content: center;
    padding-top: var(--header-h); /* Abstand = Headerhöhe */
    z-index: 0; /* nie über dem Header liegen */
}

.welcomeArea-Content[b-jm1chym5co] {
    overflow: hidden;
    padding: 15rem 16.56rem 3.15rem;
    display: flex;
    flex-direction: column;
    gap: 3.12rem;
    width: 100%;
    max-width: 120rem;
}

.welcomeText-Wrapper[b-jm1chym5co] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 67.812rem;
}

    .welcomeText-Wrapper h2[b-jm1chym5co] {
        color: var(--Main-Color---Signal-Red);
        line-height: normal;
        margin-bottom: 0.94rem;
    }

    .welcomeText-Wrapper h1[b-jm1chym5co] {
        color: var(--Main_Color---White);
        line-height: normal;
        margin-bottom: 1.56rem;
    }

    .welcomeText-Wrapper p[b-jm1chym5co] {
        color: var(--Main_Color---White);
        line-height: 1.875rem;
        margin-bottom: 1.56rem;
    }

    .welcomeText-Wrapper .subline[b-jm1chym5co] {
        color: var(--Main_Color---White);
        line-height: 1.875rem;
        margin-bottom: 1.56rem;
    }

.consultingTiles-Wrapper[b-jm1chym5co] {
    display: flex;
    flex-direction: row;
    gap: 2.688rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   FILLER ON SITE
   ======================================== */
.FillerOnSite[b-jm1chym5co] {
    min-height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
    background: linear-gradient(286.37deg, rgba(50, 56, 99, 0.9) 3.95%, #323863 15.06%, #33354A 29.78%, #33354A 49.95%, #333333 95.51%);
}

    .FillerOnSite .subline[b-jm1chym5co] {
        color: var(--Main-Color---White, #FFF);
        text-align: center;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 2rem;
    }

/* ========================================
   ESCORT AREA
   ======================================== */
.EscortArea[b-jm1chym5co] {
    display: flex;
    min-height: 68.375rem;
    background-image: url('images/stockimages/stockwithfilters/Begleiten_BG.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    justify-content: center;
}

.EscortArea-Content[b-jm1chym5co] {
    width: 100%;
    max-width: 120rem;
    margin: 6.81rem 7.57rem 6.75rem;
    display: flex;
    flex-direction: column;
    gap: 4.375rem;
}

.EscortAreaText-Wrapper[b-jm1chym5co] {
    display: flex;
    flex-direction: column;
    align-items: start;
    max-width: 37.789rem;
}

    .EscortAreaText-Wrapper h2[b-jm1chym5co] {
        color: var(--Main-Color---Signal-Red, #E3000F);
        line-height: normal;
    }

    .EscortAreaText-Wrapper h1[b-jm1chym5co] {
        color: var(--Optinal-Color---Dark-Grey, #333);
        line-height: normal;
    }

    .EscortAreaText-Wrapper p[b-jm1chym5co] {
        margin-top: 4.37rem;
        color: var(--Text, #000);
        line-height: 1.875rem;
        max-width: 35.625rem;
    }

    .EscortAreaText-Wrapper .subline[b-jm1chym5co] {
        color: var(--Text, #000);
        font-weight: 600;
        line-height: 1.875rem;
        max-width: 35.625rem;
    }

/* ========================================
   FEEDBACK AREA
   ======================================== */
.FeedbackArea[b-jm1chym5co] {
    min-height: 42.438rem;
    text-align: center;
    padding: 4.5rem 1.5rem;
}

    .FeedbackArea h1[b-jm1chym5co] {
        margin-bottom: 4.25rem;
        color: var(--Optinal-Color---Dark-Grey, #333);
        text-align: center;
        line-height: normal;
    }

/* ========================================
   FILLER INTERESTING FACTS
   ======================================== */
.FillerInterestingFacts[b-jm1chym5co] {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 16rem;
    padding: 2rem 1.5rem;
    background: linear-gradient(106deg, rgba(30, 30, 30, 0.80) 0%, rgba(30, 30, 30, 0.73) 33.74%, rgba(30, 30, 30, 0.62) 50.51%, rgba(30, 30, 30, 0.36) 63.8%, rgba(30, 30, 30, 0.32) 70.74%, rgba(30, 30, 30, 0.00) 79.18%, rgba(30, 30, 30, 0.00) 88.99%, rgba(30, 30, 30, 0.00) 99.29%), linear-gradient(106deg, #33354A 0%, rgba(30, 31, 31, 0.02) 16.89%, rgba(30, 30, 30, 0.00) 79.66%), url("images/stockimages/kinder_filler.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .FillerInterestingFacts p[b-jm1chym5co] {
        color: var(--Main_Color---White);
        font-size: 1.875rem;
        line-height: normal;
    }

/* ========================================
   FILLER LOGOS
   ======================================== */
.FillerLogosCenterWrapper[b-jm1chym5co] {
    display: flex;
    justify-content: center;
    background-color: var(--Main_Color---White);
    padding: 2rem 1.5rem;
}

.FillerLogos[b-jm1chym5co] {
    min-height: 19.75rem;
    width: 100%;
    max-width: 120rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.FillerLogos-Left[b-jm1chym5co] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4rem;
}

    .FillerLogos-Left p[b-jm1chym5co] {
        color: var(--Text);
        font-size: 1.5rem;
        line-height: normal;
    }

    .FillerLogos-Left img[b-jm1chym5co] {
        height: 5.5rem;
        width: auto;
        object-fit: contain;
    }

.FillerLogos-Right[b-jm1chym5co] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

#SKMLogo[b-jm1chym5co] {
    height: 6.625rem;
    width: auto;
}

#gefoerdert[b-jm1chym5co] {
    height: 12.625rem;
    width: auto;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablets und kleinere Desktops (bis 1200px) */
@media (max-width: 75rem) {
    .welcomeArea-Content[b-jm1chym5co] {
        padding: 10rem 5rem 3rem;
    }

    .EscortArea-Content[b-jm1chym5co] {
        margin: 5rem 4rem;
    }

    .FillerLogos-Left[b-jm1chym5co] {
        gap: 2rem;
    }

    #gefoerdert[b-jm1chym5co] {
        height: 10rem;
    }
}

/* Tablets (bis 1024px) */
@media (max-width: 64rem) {
    .welcomeArea[b-jm1chym5co] {
        min-height: auto;
    }

    .welcomeArea-Content[b-jm1chym5co] {
        padding: 8rem 3rem 3rem;
    }

    .consultingTiles-Wrapper[b-jm1chym5co] {
        gap: 1.5rem;
    }

    .EscortArea[b-jm1chym5co] {
        min-height: auto;
    }

    .EscortArea-Content[b-jm1chym5co] {
        margin: 4rem 3rem;
        gap: 3rem;
    }

    .FillerOnSite .subline[b-jm1chym5co] {
        font-size: 1.25rem;
    }

    .FillerInterestingFacts p[b-jm1chym5co] {
        font-size: 1.5rem;
    }

    .FillerLogos[b-jm1chym5co] {
        flex-direction: column;
        gap: 3rem;
        text-align: center;
    }

    .FillerLogos-Left[b-jm1chym5co] {
        flex-direction: column;
        gap: 2rem;
    }

    .FillerLogos-Right[b-jm1chym5co] {
        flex-direction: column;
        gap: 2rem;
    }

    #SKMLogo[b-jm1chym5co],
    #gefoerdert[b-jm1chym5co] {
        margin: 0;
    }
}

/* Mobile Landscape und kleinere Tablets (bis 768px) */
@media (max-width: 48rem) {
    .welcomeArea-Content[b-jm1chym5co] {
        padding: 6rem 2rem 2rem;
        gap: 2rem;
    }

    .welcomeText-Wrapper h2[b-jm1chym5co] {
        font-size: 1.25rem;
    }

    .welcomeText-Wrapper h1[b-jm1chym5co] {
        font-size: 2rem;
    }

    .welcomeText-Wrapper p[b-jm1chym5co],
    .welcomeText-Wrapper .subline[b-jm1chym5co] {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .consultingTiles-Wrapper[b-jm1chym5co] {
        flex-direction: column;
        gap: 1.5rem;
    }

    .FillerOnSite[b-jm1chym5co] {
        padding: 1.5rem 1rem;
    }

        .FillerOnSite .subline[b-jm1chym5co] {
            font-size: 1.125rem;
            line-height: 1.5rem;
        }

    .EscortArea-Content[b-jm1chym5co] {
        margin: 3rem 2rem;
        gap: 2rem;
    }

    .EscortAreaText-Wrapper[b-jm1chym5co] {
        max-width: 100%;
    }

        .EscortAreaText-Wrapper h2[b-jm1chym5co] {
            font-size: 1.25rem;
        }

        .EscortAreaText-Wrapper h1[b-jm1chym5co] {
            font-size: 2rem;
        }

        .EscortAreaText-Wrapper p[b-jm1chym5co] {
            margin-top: 2rem;
            font-size: 1rem;
            line-height: 1.5rem;
        }

        .EscortAreaText-Wrapper .subline[b-jm1chym5co] {
            font-size: 1rem;
            line-height: 1.5rem;
        }

    .EscortArea-Content button[b-jm1chym5co] {
        width: 100% !important;
        max-width: 20rem;
    }

    .FeedbackArea[b-jm1chym5co] {
        padding: 3rem 1.5rem;
    }

        .FeedbackArea h1[b-jm1chym5co] {
            font-size: 2rem;
            margin-bottom: 2rem;
        }

    .FillerInterestingFacts[b-jm1chym5co] {
        min-height: 12rem;
        padding: 1.5rem 1rem;
    }

        .FillerInterestingFacts p[b-jm1chym5co] {
            font-size: 1.25rem;
        }

    .FillerLogos-Left p[b-jm1chym5co] {
        font-size: 1.125rem;
    }

    .FillerLogos-Left img[b-jm1chym5co] {
        height: 4rem;
    }

    #SKMLogo[b-jm1chym5co] {
        height: 5rem;
    }

    #gefoerdert[b-jm1chym5co] {
        height: 8rem;
    }
}

/* Mobile Portrait (bis 480px) */
@media (max-width: 30rem) {
    .welcomeArea-Content[b-jm1chym5co] {
        padding: 4rem 1rem 2rem;
        gap: 1.5rem;
    }

    .welcomeText-Wrapper h2[b-jm1chym5co] {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .welcomeText-Wrapper h1[b-jm1chym5co] {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .welcomeText-Wrapper p[b-jm1chym5co],
    .welcomeText-Wrapper .subline[b-jm1chym5co] {
        font-size: 0.875rem;
        line-height: 1.25rem;
        margin-bottom: 1rem;
    }

    .FillerOnSite[b-jm1chym5co] {
        min-height: auto;
        padding: 1rem;
    }

        .FillerOnSite .subline[b-jm1chym5co] {
            font-size: 1rem;
            line-height: 1.35rem;
        }

    .EscortArea-Content[b-jm1chym5co] {
        margin: 2rem 1rem;
        gap: 1.5rem;
    }

    .EscortAreaText-Wrapper h2[b-jm1chym5co] {
        font-size: 1rem;
    }

    .EscortAreaText-Wrapper h1[b-jm1chym5co] {
        font-size: 1.75rem;
    }

    .EscortAreaText-Wrapper p[b-jm1chym5co],
    .EscortAreaText-Wrapper .subline[b-jm1chym5co] {
        font-size: 0.875rem;
        line-height: 1.35rem;
        margin-top: 1.5rem;
    }

    .FeedbackArea[b-jm1chym5co] {
        padding: 2rem 1rem;
        min-height: auto;
    }

        .FeedbackArea h1[b-jm1chym5co] {
            font-size: 1.75rem;
            margin-bottom: 1.5rem;
        }

    .FillerInterestingFacts[b-jm1chym5co] {
        min-height: 10rem;
        padding: 1rem;
    }

        .FillerInterestingFacts p[b-jm1chym5co] {
            font-size: 1rem;
            line-height: 1.35rem;
        }

    .FillerLogosCenterWrapper[b-jm1chym5co] {
        padding: 1rem;
    }

    .FillerLogos[b-jm1chym5co] {
        gap: 2rem;
    }

    .FillerLogos-Left[b-jm1chym5co] {
        gap: 1.5rem;
    }

        .FillerLogos-Left p[b-jm1chym5co] {
            font-size: 0.875rem;
        }

        .FillerLogos-Left img[b-jm1chym5co] {
            height: 3rem;
        }

    #SKMLogo[b-jm1chym5co] {
        height: 4rem;
    }

    #gefoerdert[b-jm1chym5co] {
        height: 6rem;
    }
}

.escort-button[b-jm1chym5co] {
    width: 15.36rem;
}

@media (max-width: 48rem) {
    .escort-button[b-jm1chym5co] {
        width: 100%;
        max-width: 20rem;
    }
}

/* === Responsive Overrides: Consulting Tiles Wrapper === */
.consultingTiles-Wrapper[b-jm1chym5co] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); /* 260px */
    gap: clamp(1rem, 2.5vw, 2.688rem);
    align-items: stretch; /* Kacheln gleich hoch im Grid */
}

/* Medien in Home immer fluid rendern */
img[b-jm1chym5co], svg[b-jm1chym5co], video[b-jm1chym5co] {
    max-width: 100%;
    height: auto;
}

/* Consulting Tiles Wrapper – zentrierte Items im Grid */
.consultingTiles-Wrapper[b-jm1chym5co] {
    /* falls bei dir an anderer Stelle bereits grid gesetzt wurde,
       lassen wir das unberührt und ergänzen nur die Zentrierung: */
    justify-items: center; /* <— sorgt fürs Zentrieren der Grid-Kinder */
}

/* Optional: falls du (wieder) Flex statt Grid nutzt:
.consultingTiles-Wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   // hast du bereits
    align-items: stretch;
    gap: 2.688rem;
}
*/

/* _content/SKM_OnlineClearingstelle/Components/Pages/Imprint.razor.rz.scp.css */
/* ===== Grund-Setup / Header-Abstand ===== */
:root[b-7njqaedlhg] {
    --header-h: clamp(4rem, 8vw, 7.5rem);
}

.imprintContent[b-7njqaedlhg] {
    box-sizing: border-box;
    width: min(100%, 70rem); /* Deckel statt fixer 60rem */
    margin: calc(var(--header-h) + 2rem) auto 6rem; /* immer unter dem Sticky-Header */
    padding: 0 clamp(1rem, 4vw, 3rem); /* seitliche Luft auf kleineren Screens */
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.25rem); /* einheitlicher vertikaler Rhythmus */
}

    /* ===== Typo skalierend ===== */
    .imprintContent h1[b-7njqaedlhg] {
        font-size: clamp(1.75rem, 3.2vw, 2.5rem);
        line-height: 1.15;
        margin: 0 0 clamp(1rem, 2vw, 1.5rem);
        color: var(--Optinal-Color---Dark-Grey, #333);
    }

    .imprintContent h2[b-7njqaedlhg] {
        font-size: clamp(1.25rem, 2.2vw, 1.75rem);
        line-height: 1.2;
        margin: clamp(1rem, 3vw, 1.75rem) 0 clamp(.5rem, 1.5vw, .75rem);
        color: var(--Main-Color---Signal-Red, #E3000F);
    }

    .imprintContent p[b-7njqaedlhg],
    .imprintContent li[b-7njqaedlhg] {
        font-size: clamp(1rem, 1.4vw, 1.125rem);
        line-height: 1.7;
        color: var(--Optinal-Color---Dark-Grey, #333);
        margin: 0; /* wir steuern Abstände über Gap */
        max-width: 75ch; /* angenehme Zeilenlänge */
    }

    /* Listen sauber einrücken */
    .imprintContent ul[b-7njqaedlhg],
    .imprintContent ol[b-7njqaedlhg] {
        padding-left: 1.25rem;
        margin: 0; /* Abstände kommen über gap des Wrappers */
    }

    .imprintContent li + li[b-7njqaedlhg] {
        margin-top: .35rem;
    }

    /* Links & lange Wörter (E-Mail/URLs) */
    .imprintContent a[b-7njqaedlhg] {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: .12em;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Trenner */
    .imprintContent hr[b-7njqaedlhg] {
        width: 100%;
        height: 1px;
        border: 0;
        background: rgba(0,0,0,.12);
        margin: clamp(1rem, 3vw, 2rem) 0;
    }

/* ===== Feinjustierung auf sehr schmal ===== */
@media (max-width: 48rem) { /* <= 768px */
    .imprintContent[b-7njqaedlhg] {
        gap: 1rem;
        margin-bottom: 4rem;
    }

        .imprintContent ul[b-7njqaedlhg],
        .imprintContent ol[b-7njqaedlhg] {
            padding-left: 1rem;
        }
}

/* Ultra-small phones */
@media (max-width: 30rem) { /* <= 480px */
    .imprintContent[b-7njqaedlhg] {
        padding-inline: 1rem;
    }
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/Intranet/IntranetOverview.razor.rz.scp.css */
.content[b-c7lr37wf2t] {
    margin-top: 7.5rem;
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}

.profileRow[b-c7lr37wf2t] {
    position: relative;
    width: 100%;
    height: 340px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
}

    .profileRow[b-c7lr37wf2t]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--Sonderfarbe---Dark-Blue, #323863);
        opacity: .15;
        pointer-events: none;
        z-index: 0;
    }

    .profileRow > *[b-c7lr37wf2t] {
        position: relative;
        z-index: 1;
    }

.profileRowLeft[b-c7lr37wf2t] {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-right: 70px;
}

.profileRowLeftImage[b-c7lr37wf2t] {
    display: flex;
    flex-direction: column;
    position: relative;
}

.profileRowLeftName[b-c7lr37wf2t] {
    display: flex;
    flex-direction: column;
}

.avatar[b-c7lr37wf2t] {
    width: 145px;
    height: 145px;
    border-radius: 145px;
    overflow: hidden;
    background: lightgray 50%; /* Fallback */
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.50);
}

    .avatar img[b-c7lr37wf2t] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: inherit;
    }

.avatar-consultants[b-c7lr37wf2t] {
    width: 145px;
    height: 145px;
    border-radius: 145px;
    overflow: hidden;
    background: lightgray 50%; /* Fallback */
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.50);
}

    .avatar-consultants img[b-c7lr37wf2t] {
        width: 120%; /* größer als 100% des Containers */
        height: 120%;
        object-fit: cover;
        display: block;
        border-radius: inherit;
        position: relative;
        top: -10%; /* optional: zentrieren */
        left: -10%; /* optional: zentrieren */
    }

.avatar__edit[b-c7lr37wf2t] {
    position: absolute;
    right: 0px;
    bottom: 6px;
    width: 31.907px;
    height: 31.907px;
    border-radius: 50%;
    border: 1px solid var(--Sonderfarbe---Dark-Blue, #323863);
    background: linear-gradient(0deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.20) 100%), linear-gradient(286deg, rgba(50,56,99,.90) 3.95%, #33354A 13.92%, #333 64.67%, #333 95.51%);
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    z-index: 5;
}

    .avatar__edit img[b-c7lr37wf2t] {
        width: 15.953px;
        height: 15.953px;
        display: block;
    }

    .avatar__edit:focus-visible[b-c7lr37wf2t] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(50,56,99,.35);
    }

.AreaSelection[b-c7lr37wf2t] {
    margin-top: 5.375rem;
}

.SelectedComponent[b-c7lr37wf2t] {
    margin-top: 5.375rem;
    margin-bottom: 5.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fillerHandinHand[b-c7lr37wf2t] {
    height: 17.4375rem;
    background-image: url('images/stockimages/HandinHand_Filler_Big.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100vw;
    margin-top: auto;
    width: 100%;
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/Intranet/IntranetSettings.razor.rz.scp.css */
.content[b-unqmmj4uwy] {
    margin-top: 7.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #32386315;
    flex: 1;
    align-items: center;
}

.profileRow[b-unqmmj4uwy] {
    position: relative;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.backButton[b-unqmmj4uwy] {
    position: absolute;
    left: 0;
    top: 100px;
    display: flex;
    border: none;
    background: none;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

    .backButton img[b-unqmmj4uwy] {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .backButton span[b-unqmmj4uwy] {
        color: #333;
        font-size: 0.9375rem;
        font-weight: 500;
    }

.titleArea[b-unqmmj4uwy] {
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.profileRowImage[b-unqmmj4uwy] {
    display: flex;
    flex-direction: column;
    position: relative;
}

.avatar[b-unqmmj4uwy] {
    width: 145px;
    height: 145px;
    border-radius: 145px;
    overflow: hidden;
    background: lightgray 50%; /* Fallback */
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.50);
}

    .avatar img[b-unqmmj4uwy] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: inherit;
    }

.avatar-consultants[b-unqmmj4uwy] {
    width: 145px;
    height: 145px;
    border-radius: 145px;
    overflow: hidden;
    background: lightgray 50%; /* Fallback */
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.50);
}

    .avatar-consultants img[b-unqmmj4uwy] {
        width: 120%; /* größer als 100% des Containers */
        height: 120%;
        object-fit: cover;
        display: block;
        border-radius: inherit;
        position: relative;
        top: -10%; /* optional: zentrieren */
        left: -10%; /* optional: zentrieren */
    }

.changePb[b-unqmmj4uwy]{
    background: none;
    border: none;
    padding: 5px;
}

    .changePb span[b-unqmmj4uwy] {
        font-size: 14px;
        font-weight: 400;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }

.settingsForm[b-unqmmj4uwy] {
    display: grid;
    grid-template-columns: 520px 520px;
    grid-template-rows: 90px 90px;
    gap: 30px 120px;
    grid-auto-flow: row;
    grid-template-areas:
        "name adviceCenter"
        "email pw";
}

.name[b-unqmmj4uwy], .email[b-unqmmj4uwy], .pw[b-unqmmj4uwy], .adviceCenter[b-unqmmj4uwy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.name[b-unqmmj4uwy] {
    grid-area: name;
}

.email[b-unqmmj4uwy] {
    grid-area: email;
}

.pw[b-unqmmj4uwy] {
    grid-area: pw;
}

.adviceCenter[b-unqmmj4uwy] {
    grid-area: adviceCenter;
}


.fillerHandinHand[b-unqmmj4uwy] {
    height: 17.4375rem;
    background-image: url('images/stockimages/HandinHand_Filler_Big.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100vw;
    margin-top: auto;
    width: 100%;
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/OnSite.razor.rz.scp.css */
.landingArea[b-j6nzclo2zv] {
    display: flex;
    justify-content: center;
    min-height: 47.3125rem; /* darf wachsen */
    background-image: url('images/stockimages/stockwithfilters/VorOrt_BG.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover; /* statt 100vw */
}

.landingArea-Content[b-j6nzclo2zv] {
    width: min(100%, 120rem);
    margin-inline: auto;
    box-sizing: border-box;
    overflow: visible !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 32.5rem);
    align-items: start;
    gap: clamp(2rem, 5vw, 7.5rem);
    /* Lass deine großen Paddings – zusammen mit dem dynamischen Header-Padding
     (Schritt 1) bleibt genug Luft nach oben. */
    padding: clamp(4rem, 8vw, 12.88rem) clamp(1rem, 4vw, 11.25rem) clamp(2rem, 5vw, 5.31rem) clamp(1rem, 4vw, 7.5rem);
}

.landingAreaCard[b-j6nzclo2zv] {
    width: 61.25rem;
    max-height: 29.125rem;
    border-radius: 0 2.5rem 2.5rem 2.5rem;
    opacity: 0.9;
    background: #FFF;
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    padding: clamp(1rem, 2.5vw, 3.5rem) clamp(1rem, 4vw, 4rem);
    box-sizing: border-box;
}

.landingArea h2[b-j6nzclo2zv] {
    color: var(--Main-Color---Signal-Red, #E3000F);
    line-height: normal;
}

.landingAreaCard h1[b-j6nzclo2zv] {
    color: var(--Optinal-Color---Dark-Grey, #333);
    line-height: normal;
    margin-top: 0.31rem;
    margin-bottom: 2.19rem;
}

.landingAreaCard p[b-j6nzclo2zv] {
    color: var(--Optinal-Color---Dark-Grey, #333);
    line-height: 1.875rem; /* 150% */
    margin-bottom: 0.94rem;
}

.landingAreaCard a[b-j6nzclo2zv] {
    color: var(--Main-Color---Signal-Red, #E3000F);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem; /* 150% */
    letter-spacing: -0.0125rem;
    text-decoration: none;
}


.landingAreaFilter[b-j6nzclo2zv] {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding-top: 5.38rem;
    width: 32.5rem;
}

    .landingAreaFilter p[b-j6nzclo2zv] {
        color: var(--Main-Color---White, #FFF);
        font-size: 1.5rem;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 0.5rem;
    }

    .landingAreaFilter input[b-j6nzclo2zv] {
        box-sizing: border-box;
        margin-bottom: 2.66rem;
        height: 3.75rem;
        width: inherit;
        border-radius: 3.125rem;
        border: 0.5px solid var(--Farbverlauf-Dark-Grey---Dark-Blue, rgba(50, 56, 99, 0.90));
        background: var(--Main-Color---White, #FFF);
        box-shadow: 0 0 20px 0 rgba(51, 51, 51, 0.20);
        padding: 1.06rem 2.25rem 1.06rem 2.25rem;
        font-size: 1.25rem;
        font-weight: 400;
        line-height: 1.75rem; /* 140% */
    }

        .landingAreaFilter input:focus[b-j6nzclo2zv] {
            border: 0px none transparent;
        }

    .landingAreaFilter button[b-j6nzclo2zv] {
        width: 9.0625rem;
        height: 3.5rem;
        border-radius: 2.5rem;
    }

button.regular-button span[b-j6nzclo2zv] {
    color: var(--Main-Color---White, #FFF);
    font-size: 1.25rem;
    line-height: 1.75rem; /* 140% */
}

button.regular-button img[b-j6nzclo2zv] {
    width: 1.38619rem;
    height: 1.38619rem;
    aspect-ratio: 1/1;
}


.consultantArea[b-j6nzclo2zv] {
    display: flex;
    justify-content: center;
}

.consultantArea-Content[b-j6nzclo2zv] {
    width: 120rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 7.5rem;
    padding-right: 7.25rem;
    padding-top: 3.75rem;
    padding-bottom: 5rem;
}

    .consultantArea-Content h2[b-j6nzclo2zv] {
        color: var(--Main-Color---Signal-Red, #E3000F);
        line-height: normal;
        margin-bottom:   0.94rem;
    }

    .consultantArea-Content h1[b-j6nzclo2zv] {
        color: var(--Optinal-Color---Dark-Grey, #333);
        line-height: normal;
        margin-bottom: 8.5rem;
    }

    .consultantArea-Content button[b-j6nzclo2zv] {
        margin-top: 10.31rem;
    }

.fillerHandinHand[b-j6nzclo2zv] {
    height: 17.4375rem;
    background-image: url('images/stockimages/HandinHand_Filler_Big.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100vw;
}


.consultantServiceArea[b-j6nzclo2zv] {
    display: flex;
    justify-content: center;
}

.consultantServiceArea-Content[b-j6nzclo2zv] {
    width: 120rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 8.75rem;
}

    .consultantServiceArea-Content h2[b-j6nzclo2zv] {
        color: var(--Main-Color---Signal-Red, #E3000F);
        line-height: normal;
        margin-bottom: 0.31rem;
    }

    .consultantServiceArea-Content h1[b-j6nzclo2zv] {
        line-height: normal;
        background: var(--Farbverlauf-Dark-Grey---Dark-Blue, linear-gradient(286deg, rgba(50, 56, 99, 0.90) 3.95%, #323863 19.47%, #33354A 48.29%, #333 95.51%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 1.56rem;
    }

    .consultantServiceArea-Content p[b-j6nzclo2zv] {
        color: var(--Optinal-Color---Dark-Grey, #333);
        line-height: 1.625rem; /* 130% */
        margin-bottom: 7.56rem;
    }

/*--------------Neu-------------------*/


/* Card links: volle Spaltenbreite nutzen, nicht fest einschnüren */
.landingAreaCard[b-j6nzclo2zv] {
    width: 100%;
    max-width: 61.25rem; /* Deckel bleibt okay */
    /* starre Höhe entfernen, sonst läuft Text „unten über die Kachel hinaus“ */
    max-height: none !important;
    padding: clamp(1.25rem, 2.5vw, 3.12rem) clamp(1rem, 2.5vw, 3.37rem);
    border-radius: 0 2.5rem 2.5rem 2.5rem;
    background: #fff;
    opacity: .9;
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    box-sizing: border-box;
}

/* Typo in der Card angenehm skalieren */
.landingArea h2[b-j6nzclo2zv] {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    margin: 0 0 .5rem 0;
}

.landingAreaCard h1[b-j6nzclo2zv] {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin: .25rem 0 clamp(1rem, 2vw, 2rem);
}

.landingAreaCard p[b-j6nzclo2zv] {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.7;
    margin: 0 0 .75rem 0;
}

.landingAreaCard a[b-j6nzclo2zv] {
    display: inline-block;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.5;
}

/* Filter-Spalte rechts */
.landingAreaFilter[b-j6nzclo2zv] {
    width: 100%;
    max-width: 32.5rem;
    padding-top: clamp(1rem, 4vw, 5.38rem);
}

    .landingAreaFilter p[b-j6nzclo2zv] {
        font-size: clamp(1rem, 1.8vw, 1.5rem);
        margin: 0 0 .5rem 0;
    }

    .landingAreaFilter input[b-j6nzclo2zv] {
        width: 100%;
        height: 3.75rem;
        margin-bottom: clamp(1rem, 3vw, 2.66rem);
        padding: 1.06rem 2.25rem;
        font-size: clamp(1rem, 1.6vw, 1.25rem);
        border-radius: 3.125rem;
        box-sizing: border-box;
    }

    .landingAreaFilter button[b-j6nzclo2zv] {
        width: 9.0625rem;
        height: 3.5rem;
        border-radius: 2.5rem;
    }

/* Tablet: Spalten enger, Background bleibt clean */
@media (max-width: 75rem) { /* 1200px */
    .landingArea-Content[b-j6nzclo2zv] {
        padding-left: clamp(1rem, 4vw, 3rem);
        padding-right: clamp(1rem, 4vw, 3rem);
        grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 28rem);
    }
}

/* Mobile: untereinander stapeln */
@media (max-width: 48rem) { /* 768px */
    .landingArea[b-j6nzclo2zv] {
        background-position: center top;
        min-height: unset; /* darf mit Inhalt wachsen */
    }

    .landingArea-Content[b-j6nzclo2zv] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: clamp(2rem, 6vw, 3rem) 1rem 2rem 1rem;
    }

    .landingAreaFilter[b-j6nzclo2zv] {
        padding-top: .5rem;
        max-width: 32rem;
        justify-self: center; /* mittig unter der Card */
    }
}

/* === Section-Titel unten: skalieren & umbrechen === */
.consultantServiceArea-Content h2[b-j6nzclo2zv] {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
}

.consultantServiceArea-Content h1[b-j6nzclo2zv] {
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    text-align: center;
    margin-bottom: clamp(1rem, 3vw, 1.56rem);
    text-wrap: balance; /* modern, okay zu ignorieren wenn nicht unterstützt */
}

.consultantServiceArea-Content p[b-j6nzclo2zv] {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    margin-bottom: clamp(2.5rem, 6vw, 7.56rem);
    text-align: center;
    max-width: 60ch;
}

@media (max-width: 30rem) { /* 480px */
    .consultantServiceArea-Content[b-j6nzclo2zv] {
        padding-inline: 1rem;
    }
}

/* Filler-Bild: cover statt 100vw (verhindert Querscroll/Schimmern) */
.fillerHandinHand[b-j6nzclo2zv] {
    min-height: 17.4375rem;
    background-image: url('images/stockimages/HandinHand_Filler_Big.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover; /* <— statt 100vw */
}

/* 4) Safety: nichts im Hero soll vom Header-Schatten überdeckt werden */
.landingArea[b-j6nzclo2zv],
.landingArea-Content[b-j6nzclo2zv],
.landingAreaCard[b-j6nzclo2zv],
.landingAreaFilter[b-j6nzclo2zv] {
    position: relative;
    z-index: 0; /* Header hat z-index:1000, hier nichts drüber legen */
}

/* Hero immer unter dem Sticky-Header, mit echtem Innenabstand (kein Collapsing) */
.landingArea[b-j6nzclo2zv] {
    /*padding-top: var(--header-h);*/
    margin-top: var(--header-h);
}

/* Weniger Hero-Top-Padding auf sehr breiten Screens */
@media (min-width: 90rem) { /* >= 1440px */
    .landingArea-Content[b-j6nzclo2zv] {
        padding-top: clamp(4rem, 5.4vw, 11rem);
    }
}

/*@media (min-width: 100rem) { /* >= 1600px 
    .landingArea-Content {
        padding-top: clamp(1rem, 1.5vw, 3.5rem);
    }
}*/

/* _content/SKM_OnlineClearingstelle/Components/Pages/PrivacyPolicy.razor.rz.scp.css */
/* ===== Grund-Setup / Header-Abstand ===== */
:root[b-uijymnuu25] {
    --header-h: clamp(4rem, 8vw, 7.5rem);
}

.policyContent[b-uijymnuu25] {
    box-sizing: border-box;
    width: min(100%, 70rem); /* Deckel statt fixer 60rem */
    margin: calc(var(--header-h) + 2rem) auto 6rem; /* immer unter Sticky-Header */
    padding: 0 clamp(1rem, 4vw, 3rem); /* seitliches Fluid-Padding */
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.25rem); /* vertikaler Rhythmus */
}

    /* ===== Typo skalierend ===== */
    .policyContent h1[b-uijymnuu25] {
        font-size: clamp(1.75rem, 3.2vw, 2.5rem);
        line-height: 1.15;
        margin: 0 0 clamp(1rem, 2vw, 1.5rem);
        color: var(--Optinal-Color---Dark-Grey, #333);
    }

    .policyContent h2[b-uijymnuu25] {
        font-size: clamp(1.25rem, 2.2vw, 1.75rem);
        line-height: 1.2;
        margin: clamp(1rem, 3vw, 1.75rem) 0 clamp(.5rem, 1.5vw, .75rem);
        color: var(--Main-Color---Signal-Red, #E3000F);
    }

    .policyContent h3[b-uijymnuu25] {
        font-size: clamp(1.125rem, 2vw, 1.5rem);
        line-height: 1.25;
        margin: clamp(.75rem, 2.5vw, 1.25rem) 0 .25rem;
        color: var(--Optinal-Color---Dark-Grey, #333);
    }

    .policyContent p[b-uijymnuu25],
    .policyContent li[b-uijymnuu25] {
        font-size: clamp(1rem, 1.4vw, 1.125rem);
        line-height: 1.7;
        color: var(--Optinal-Color---Dark-Grey, #333);
        margin: 0; /* Abstände über Gap */
        max-width: 75ch; /* angenehme Zeilenlänge */
    }

    /* Listen sauber einrücken */
    .policyContent ul[b-uijymnuu25],
    .policyContent ol[b-uijymnuu25] {
        padding-left: 1.25rem;
        margin: 0; /* Abstände kommen über gap des Wrappers */
    }

    .policyContent li + li[b-uijymnuu25] {
        margin-top: .35rem;
    }

    /* Links & lange Wörter (E-Mail/URLs) */
    .policyContent a[b-uijymnuu25] {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: .12em;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Trenner */
    .policyContent hr[b-uijymnuu25] {
        width: 100%;
        height: 1px;
        border: 0;
        background: rgba(0,0,0,.12);
        margin: clamp(1rem, 3vw, 2rem) 0;
    }

/* ===== Feinjustierung auf sehr schmal ===== */
@media (max-width: 48rem) { /* <= 768px */
    .policyContent[b-uijymnuu25] {
        gap: 1rem;
        margin-bottom: 4rem;
    }

        .policyContent ul[b-uijymnuu25],
        .policyContent ol[b-uijymnuu25] {
            padding-left: 1rem;
        }
}

/* Ultra-small phones */
@media (max-width: 30rem) { /* <= 480px */
    .policyContent[b-uijymnuu25] {
        padding-inline: 1rem;
    }
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/TermsOfUse.razor.rz.scp.css */
/* Gemeinsames Layout/Typo wie beim Impressum */
.legalContent[b-01kc10edss] {
    box-sizing: border-box;
    width: min(100%, 70rem);
    margin: calc(var(--header-h, 3.5rem) + 2rem) auto 6rem; /* Fallback verhindert "Jump" */
    padding: 0 clamp(1rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.25rem);
}

    .legalContent h1[b-01kc10edss] {
        font-size: clamp(1.75rem, 3.2vw, 2.5rem);
        line-height: 1.15;
        margin: 0 0 clamp(1rem, 2vw, 1.5rem);
        color: var(--Optinal-Color---Dark-Grey, #333);
    }

    .legalContent h2[b-01kc10edss] {
        font-size: clamp(1.25rem, 2.2vw, 1.75rem);
        line-height: 1.2;
        margin: clamp(1rem, 3vw, 1.75rem) 0 clamp(.5rem, 1.5vw, .75rem);
        color: var(--Main-Color---Signal-Red, #E3000F);
    }

    .legalContent h3[b-01kc10edss] {
        font-size: clamp(1.1rem, 1.8vw, 1.35rem);
        line-height: 1.25;
        margin: clamp(.5rem, 2vw, 1rem) 0 .25rem;
        color: var(--Optinal-Color---Dark-Grey, #333);
    }

    .legalContent p[b-01kc10edss],
    .legalContent li[b-01kc10edss] {
        font-size: clamp(1rem, 1.4vw, 1.125rem);
        line-height: 1.7;
        color: var(--Optinal-Color---Dark-Grey, #333);
        margin: 0;
        max-width: 75ch;
    }

    .legalContent ul[b-01kc10edss],
    .legalContent ol[b-01kc10edss] {
        padding-left: 1.25rem;
        margin: 0;
    }

    .legalContent li + li[b-01kc10edss] {
        margin-top: .35rem;
    }

    .legalContent a[b-01kc10edss] {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: .12em;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

@media (max-width: 48rem) {
    .legalContent[b-01kc10edss] {
        gap: 1rem;
        margin-bottom: 4rem;
    }

        .legalContent ul[b-01kc10edss], .legalContent ol[b-01kc10edss] {
            padding-left: 1rem;
        }
}

@media (max-width: 30rem) {
    .legalContent[b-01kc10edss] {
        padding-inline: 1rem;
    }
}
/* _content/SKM_OnlineClearingstelle/Components/Pages/VideoChat.razor.rz.scp.css */
.content[b-f9ch4g2o0g] {
    margin-top: 7.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #32386315;
    flex: 1;
    align-items: center;
}

/* --- StartScreen --- */
.startScreen[b-f9ch4g2o0g] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

.titleArea[b-f9ch4g2o0g] {
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.enterIdArea[b-f9ch4g2o0g] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* --- Video --- */
.videoScreen[b-f9ch4g2o0g] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
    width: 90%;
}

.topRowVideo[b-f9ch4g2o0g] {
    margin-top: 40px;
    display: flex;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.divider[b-f9ch4g2o0g] {
    width: 100%;
    height: 2px;
    background: #323863;
    margin-bottom: 10px;
}

/* Container muss nur relativ & voll breit sein – Höhe kommt durch aspect-ratio der Remote */
.videoWindow[b-f9ch4g2o0g] {
    position: relative;
    width: 100%;
    max-height: 80vh;
    /*max-height: 950px;*/
}

/* Remote groß, hält 16:9 und füllt die Breite */
.vc-remote[b-f9ch4g2o0g] {
    width: 100%;
    max-height: 80vh;
    /*max-height: 950px;*/
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border-radius: 12px;
}

/* Lokale PiP-Preview */
.vc-local[b-f9ch4g2o0g] {
    position: absolute;
    right: 32px;
    bottom: 32px;
    width: clamp(400px, 22vw, 360px);
    aspect-ratio: 16 / 9;
    background: #000;
    border: 2px solid rgba(255,255,255,.6);
    border-radius: 10px;
    overflow: hidden;
    z-index: 8; /* über Remote + unter Settings */
}

    /* ACS-Views immer vollflächig rendern */
    .vc-remote > *[b-f9ch4g2o0g], .vc-local > *[b-f9ch4g2o0g] {
        width: 100% !important;
        height: 100% !important;
    }

    /* Falls die SDK intern <video> rendert, definieren wir das gewünschte Verhalten */
    .vc-remote video[b-f9ch4g2o0g], .vc-local video[b-f9ch4g2o0g] {
        width: 100%;
        height: 100%;
        object-fit: contain; /* remote komplett sichtbar */
    }
    /* Wenn du PiP lieber randlos gefüllt willst: */
    .vc-local video[b-f9ch4g2o0g] {
        object-fit: cover;
    }

/* Call-Controls mittig unterhalb der Remote-Fläche */
.videoControlsRow[b-f9ch4g2o0g] {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4;
}

    .videoControlsRow button[b-f9ch4g2o0g] {
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 40px;
        background: #fff;
        display: grid;
        place-items: center;
    }

        .videoControlsRow button.leaveCall[b-f9ch4g2o0g] {
            background: var(--Main-Color---Signal-Red);
        }

        .videoControlsRow button.menu[b-f9ch4g2o0g] {
            background: var(--Sonderfarbe---Dark-Blue);
        }

/* Overlay vor dem Beitritt */
.enterVideoChat[b-f9ch4g2o0g] {
    position: absolute;
    inset: 0;
    background: #ebecf0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border-radius: 12px; /* an Remote anpassen */
}

/* Settings Popup – über allem */
.vcset__backdrop[b-f9ch4g2o0g] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.28);
    z-index: 6;
}

.vcset[b-f9ch4g2o0g] {
    width: min(560px, 92%);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
}

.vcset__head[b-f9ch4g2o0g] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

    .vcset__head h3[b-f9ch4g2o0g] {
        margin: 0;
        font-weight: 700;
        color: #333;
    }

.vcset__x[b-f9ch4g2o0g] {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.vcset__body[b-f9ch4g2o0g] {
    padding: 16px;
    display: grid;
    gap: 14px;
}

.vcset__row[b-f9ch4g2o0g] {
    display: grid;
    gap: 8px;
}

    .vcset__row label[b-f9ch4g2o0g] {
        font-weight: 600;
        color: #444;
    }

.videoControlsRow button.menu[b-f9ch4g2o0g] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
}

    .videoControlsRow button.menu img[b-f9ch4g2o0g] {
        width: 22px;
        height: 22px;
    }

/* === Local PiP: korrekt skalieren & auf kleinen Screens unter dem Remote zeigen === */

/* 1) Standard/Desktop: PiP unten rechts, kontrolliert kleiner als Remote */
.vc-local[b-f9ch4g2o0g] {
    position: absolute;
    right: 32px;
    bottom: 32px;
    /* war: clamp(400px, 22vw, 360px) → min > max → zu groß */
    width: clamp(200px, 24vw, 360px); /* max 360, kann bis 200 schrumpfen */
    aspect-ratio: 16 / 9;
    background: #000;
    border: 2px solid rgba(255,255,255,.6);
    border-radius: 10px;
    overflow: hidden;
    z-index: 8;
}

/* 2) Mittlere Breiten: PiP noch etwas kompakter und höher vom unteren Rand,
      damit es die Call-Controls nicht verdeckt */
@media (max-width: 1200px) {
    .vc-local[b-f9ch4g2o0g] {
        width: clamp(180px, 26vw, 320px);
        bottom: 72px; /* Abstand zu .videoControlsRow erhöhen */
        right: 24px;
        border-width: 1.5px;
    }
}

/* 3) Kleine Tablets: PiP noch kleiner, weiter nach oben oder stärker entkoppeln */
@media (max-width: 920px) {
    .vc-local[b-f9ch4g2o0g] {
        width: clamp(160px, 28vw, 280px);
        bottom: 80px;
        right: 20px;
    }
}

/* 4) Smartphones: PiP nicht mehr als Overlay, sondern unter dem Remote-Video auf voller Breite */
@media (max-width: 680px) {
    .videoWindow[b-f9ch4g2o0g] {
        /* sorgt dafür, dass unterhalb der Remote noch Platz für das PiP entsteht */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .vc-local[b-f9ch4g2o0g] {
        position: static; /* löst aus dem Overlay – folgt der DOM-Reihenfolge */
        width: 100%; /* volle Breite unter dem Remote */
        max-width: 520px; /* optional: Obergrenze, damit’s nicht „zu groß“ wirkt */
        margin: 10px auto 0; /* Abstand zum Remote, zentriert */
        border-width: 1px;
        z-index: 1; /* unterhalb eventueller Overlays/Controls */
    }
}

/* 5) Sehr schmale Geräte: noch etwas Puffer */
@media (max-width: 380px) {
    .vc-local[b-f9ch4g2o0g] {
        max-width: 100%;
        margin: 8px 0 0;
    }
}

/* Fürs SDK gerenderte <video> beibehalten */
.vc-remote > *[b-f9ch4g2o0g], .vc-local > *[b-f9ch4g2o0g] {
    width: 100% !important;
    height: 100% !important;
}

.vc-remote video[b-f9ch4g2o0g] {
    object-fit: contain;
}
/* Gesprächspartner vollständig sichtbar */
.vc-local video[b-f9ch4g2o0g] {
    object-fit: cover;
}
/* PiP „füllt“ die Miniatur schön */



/* _content/SKM_OnlineClearingstelle/Components/SubComponents/CalendarPopUp.razor.rz.scp.css */
:root[b-2mz1h7hw9f] {
    --Secondary-Color---Grey: #6b6b6b;
    --Ink: #2b2b2b;
}

.cal[b-2mz1h7hw9f] {
    border: 2px solid var(--Main-Color---Signal-Red);
    border-radius: 40px;
    background: var(--Main-Color---White);
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    padding: 20px 20px 20px;
    width: 520px;
    height: auto;
}

.cal__head[b-2mz1h7hw9f] {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); /* links | titel | rechts */
    align-items: center;
    gap: 12px;
}

.cal__left[b-2mz1h7hw9f] {
    justify-self: start;
    display: flex;
    align-items: center;

}

.cal__right[b-2mz1h7hw9f] {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cal__title[b-2mz1h7hw9f] {
    grid-column: 2; /* mittlere Spalte */
    justify-self: center;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    text-transform: capitalize;
}

.cal__nav[b-2mz1h7hw9f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #333;
}

    .cal__nav + .cal__today[b-2mz1h7hw9f] {
        margin-left: 4px;
    }

.cal__today[b-2mz1h7hw9f] {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

    .cal__today:hover[b-2mz1h7hw9f], .cal__nav:hover[b-2mz1h7hw9f] {
        background: rgba(0,0,0,.04);
    }

.cal__title[b-2mz1h7hw9f] {
    justify-self: center;
    text-align: center;
    font-weight: 800;
    font-size: 22px;
    color: #3a3a3a;
    text-transform: capitalize;
}

.cal__icon[b-2mz1h7hw9f] {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 0;
    background: var(--Main-Color---Signal-Red);
    color: #fff;
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
}

.cal__icon img[b-2mz1h7hw9f] {
    width: 14.359px;
    height: 14px;
}

.cal__dow[b-2mz1h7hw9f] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 10px 0px 0px;
    column-gap: 12px;
}

.cal__dow__cell[b-2mz1h7hw9f] {
    text-align: center;
    font-weight: 700;
    color: #2e3a67;
}

.cal__grid[b-2mz1h7hw9f] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 6px 0px 0px;
    column-gap: 12px;
    row-gap: 4px;
}

.cal__cell[b-2mz1h7hw9f] {
    position: relative;
    height: 44px;
    border-radius: 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: #666;
}

    .cal__cell span[b-2mz1h7hw9f] {
        display: inline-grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 999px;
    }

    .cal__cell:hover span[b-2mz1h7hw9f] {
        background: rgba(0,0,0,.04);
    }

    .cal__cell.is-out[b-2mz1h7hw9f] {
        color: #b8b8b8;
    }

    .cal__cell.is-today:not(.is-sel) span[b-2mz1h7hw9f] {
        box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
        color: #2f2f2f;
        font-weight: 600;
    }

    .cal__cell.is-sel span[b-2mz1h7hw9f] {
        background: var(--Main-Color---Signal-Red);
        color: #fff;
        font-weight: 600;
    }

    /* Deaktivierte Wochenendtage (Samstag & Sonntag) */
    .cal__cell.is-disabled[b-2mz1h7hw9f] {
        color: var(--Secondary-Color---Grey);
        cursor: not-allowed;
        pointer-events: none; /* verhindert Hover-Effekt */
        opacity: 0.6;
    }

        .cal__cell.is-disabled span[b-2mz1h7hw9f] {
            background: transparent; /* kein Hover- oder Auswahlhintergrund */
            font-weight: 400;
        }

@media (max-width: 640px) {
    .cal[b-2mz1h7hw9f] {
        padding: 14px;
    }

    .cal__title[b-2mz1h7hw9f] {
        font-size: 18px;
    }

    .cal__cell[b-2mz1h7hw9f] {
        height: 38px;
    }

        .cal__cell span[b-2mz1h7hw9f] {
            width: 28px;
            height: 28px;
        }
}

/* Kalender darf breiter werden, schrumpft aber bei wenig Platz sauber */
.cal[b-2mz1h7hw9f] {
    width: 560px; /* vorher 520px */
    max-width: 100%; /* wichtig für kleinere Viewports */
}

/* optional: etwas mehr Platz im Kopf, falls es doch knapp wird */
.cal__title[b-2mz1h7hw9f] {
    font-size: 22px; /* wie Original; bei Bedarf auf 21px reduzieren */
    white-space: nowrap; /* verhindert Zeilenumbruch im Titel */
}


/* _content/SKM_OnlineClearingstelle/Components/SubComponents/ChatComponent.razor.rz.scp.css */
.OverviewBoardMain[b-dntgzkofz3] {
    position: relative;
}

.OverviewBoardArchive[b-dntgzkofz3] {
    position: relative;
}

.archiveButton[b-dntgzkofz3] {
    position: absolute;
    right: 0px;
    top: 66px;
    display: flex;
    border: none;
    background: none;
    gap: 15px;
}

    .archiveButton img[b-dntgzkofz3] {
        width: 30px;
        height: 26px;
        flex-shrink: 0;
        aspect-ratio: 15/13;
    }

    .archiveButton span[b-dntgzkofz3] {
        color: #930A0A;
        font-size: 1.25rem;
        font-weight: 400;
    }

.archiveBackButton[b-dntgzkofz3] {
    position: absolute;
    right: 0px;
    top: 66px;
    display: flex;
    border: none;
    background: none;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

    .archiveBackButton img[b-dntgzkofz3] {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .archiveBackButton span[b-dntgzkofz3] {
        color: #333;
        font-size: 0.9375rem;
        font-weight: 500;
    }

.ov[b-dntgzkofz3] {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 1684px;
    column-gap: 56px;
    row-gap: 22px;
    align-items: start;
    justify-content: center; /* mittig auf der Seite */
}

.ov-left[b-dntgzkofz3] {
    display: grid;
    grid-template-columns: 332px 332px 976px;
    gap: 22px;
}

    .ov-left.overlay .ov-col--first[b-dntgzkofz3] {
        grid-column: 1; /* Spalte 1 */
        grid-row: 1; /* Zeile 1 fixieren */
        z-index: 1; /* hinten */
    }

    .ov-left.overlay .ov-col--second[b-dntgzkofz3] {
        grid-column: 2; /* Spalte 2 */
        grid-row: 1;
        z-index: 1;
    }

    .ov-left.overlay .ov-col--third[b-dntgzkofz3] {
        grid-column: 1 / -1; /* alle Spalten */
        grid-row: 1; /* gleiche Zeile */
        z-index: 5; /* oben drauf */
        position: relative; /* für z-index */
    }

        .ov-left.overlay .ov-col--third .ov-cap[b-dntgzkofz3] {
            position: relative;
            margin-left: calc(332px + 22px + 332px + 22px); /* = Start von Spalte 3 */
            width: 976px; /* Breite von Spalte 3 */
            z-index: 6; /* über dem Chat, aber nur in Spalte 3 */
        }

        /* Das Chatpanel selbst bleibt normal 100% breit */
        .ov-left.overlay .ov-col--third .chat[b-dntgzkofz3] {
            width: 100%;
        }

.ov-archive[b-dntgzkofz3] {
    display: flex;
    width: 100%;
}

.ov-col[b-dntgzkofz3] {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: inherit;
}

/* Überschriften */
.ov-cap[b-dntgzkofz3] {
    font-weight: 700;
    color: var(--Optinal-Color---Dark-Grey);
    border-bottom: 2px solid var(--Optinal-Color---Dark-Grey);
    padding-bottom: 6px;
}

.ov-cap--red[b-dntgzkofz3] {
    color: var(--Main-Color---Signal-Red);
    border-bottom-color: var(--Main-Color---Signal-Red);
}

.ov-cap--red_archive[b-dntgzkofz3] {
    color: var(--Main-Color---Signal-Red);
    border-bottom-color: var(--Main-Color---Signal-Red);
    width: 100%;
}

.ov-cap--blue[b-dntgzkofz3] {
    color: var(--Sonderfarbe---Dark-Blue);
    border-bottom-color: var(--Sonderfarbe---Dark-Blue);
}

/* Cards – Basis */
.card[b-dntgzkofz3] {
    position: relative;
    border-radius: 40px;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    padding: 15px 20px;
    display: grid;
    row-gap: 8px;
    cursor: default;
    box-sizing: border-box;
    width: 100%;
}

/* Größenvarianten */
.card--small[b-dntgzkofz3] {
    width: 100%;
    height: 170px;
}
/* Badge oben rechts (Status-Icon etc.) */
.card__badge[b-dntgzkofz3] {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
    background: var(--badge-bg, #fff);
}

.card__badge--accent[b-dntgzkofz3] {
    background: var(--Main-Color---Signal-Red, #E2001A);
    box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

.card__badge img[b-dntgzkofz3] {
    position: relative;
    width: var(--icon-w, 18px);
    height: var(--icon-h, 18px);
    display: block;
}

/* Typografie-Inhalte */
.card__top[b-dntgzkofz3] {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}


    .card__top .title[b-dntgzkofz3] {
        font-size: 1.25rem;
        font-weight: 400;
        text-transform: uppercase;
    }

    .card__top .subtitle[b-dntgzkofz3] {
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--Secondary-Color---Grey);
    }

    .card__top .date[b-dntgzkofz3] {
        color: var(--Secondary-Color---Grey);
        font-size: 0.875rem;
        font-weight: 400;
    }

.card__top_Cons[b-dntgzkofz3] {
    flex-direction: row;
    gap: 10px;
}

.card__top_appt[b-dntgzkofz3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.appt-label[b-dntgzkofz3] {
    color: var(--Secondary-Color---Grey);
    font-size: 0.875rem;
    font-weight: 400;
}

.appt-label-red[b-dntgzkofz3] {
    color: var(--Main-Color---Signal-Red);
    font-size: 1.25rem;
    font-weight: 400;
}

.card__bottom[b-dntgzkofz3] {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: flex-end;
}

    .card__bottom .title[b-dntgzkofz3] {
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--Secondary-Color---Grey);
    }

    .card__bottom .subtitle[b-dntgzkofz3] {
        font-size: 1.25rem;
        font-weight: 400;
    }


.status--archived[b-dntgzkofz3] {
    color: var(--Main-Color---Signal-Red); /* wie im Screenshot */
}

.ov-col--first[b-dntgzkofz3] {
    --badge-bg: var(--Main-Color---Signal-Red);
    --icon-w: 12px;
    --icon-h: 12px;
}

.ov-col--second[b-dntgzkofz3] {
    --badge-bg: var(--Sonderfarbe---Dark-Blue);
    --icon-w: 14px;
    --icon-h: 15px;
}

.ov-col--third[b-dntgzkofz3] {
    --badge-bg: var(--farbverlauf-dunkel-2);
    --icon-w: 12px;
    --icon-h: 8px;
}

/* Chat-Panel */
.chat[b-dntgzkofz3] {
    width: 100%;
    height: 740px;
    border-radius: 40px;
    background: var(--Main-Color---White, #fff);
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    display: grid;
    grid-template-rows: auto 1fr auto; /* head | messages | composer */
    gap: 14px;
    padding: 21px 20px 26px 21px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

    /* über alle 3 Spalten spannen, wenn vergrößert */
    .chat.is-expanded[b-dntgzkofz3] {
        grid-column: 1 / -1; /* <<< macht den Trick in deiner ov-left (3 Spalten) */
        z-index: 5;
    }

/* Header */
.chat__head[b-dntgzkofz3] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-right: 80px;
    padding-left: 80px;
}

.chat__head-left[b-dntgzkofz3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.chat__head-right[b-dntgzkofz3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat__title[b-dntgzkofz3] {
    font-weight: 800;
    color: var(--Optinal-Color---Dark-Grey, #333);
}

/* Messages */
.chat__messages[b-dntgzkofz3] {
    transform: translateZ(0);
}

.scroller[b-dntgzkofz3] {
    transform: translateZ(0);
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    overflow-anchor: auto;
    gap: 12px;
    padding-right: 80px;
}

.chat__empty[b-dntgzkofz3] {
    color: #9a9a9a;
    font-style: italic;
    padding: 10px;
}

.msg[b-dntgzkofz3] {
    display: flex;
    height: fit-content;
    margin-bottom: 12px;
}

    .msg.in[b-dntgzkofz3] {
        justify-content: flex-start;
    }

    .msg.out[b-dntgzkofz3] {
        justify-content: flex-end;
    }

.bubble[b-dntgzkofz3] {
    max-width: 100%;
    border-radius: 25px;
    padding: 12px 14px 8px;
    background: #32386310;
    color: #2d2d2d;
    position: relative;
}

.msg.out .bubble[b-dntgzkofz3] {
    background: #32386330;
}

.bubble__header[b-dntgzkofz3] {
    color: var(--Secondary-Color---Grey);
    font-size: 0.875rem;
    font-weight: 400;
    margin-bottom: 5px;
}

.bubble__text[b-dntgzkofz3] {
    color: var(--Secondary-Color---Grey);
    font-size: 1.25rem;
    font-weight: 400;
    padding: 0px 20px 20px 0px;
}

.bubble__time[b-dntgzkofz3] {
    position: absolute;
    right: 20px;
    bottom: 12px;
    font-size: 0.875rem;
    color: var(--Secondary-Color---Grey);
    font-weight: 400;
}

/* Composer */
.chat__composer[b-dntgzkofz3] {
    padding-top: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.composer__inner[b-dntgzkofz3] {
    position: relative;
    border-radius: 25px;
    border: 0.5px solid var(--Sonderfarbe---Dark-Blue);
    background: var(--Main-Color---White);
    min-height: 180px;
    display: grid;
    width: 100%;
}

.composer__input[b-dntgzkofz3] {
    resize: vertical;
    border: none;
    outline: none;
    padding: 16px 20px 16px 20px;
    font: inherit;
    color: var(--Secondary-Color---Grey);
    box-sizing: border-box;
    resize: none;
    background: none;
}

.composer__left[b-dntgzkofz3],
.composer__right[b-dntgzkofz3] {
    position: absolute;
    bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.composer__left[b-dntgzkofz3] {
    left: 12px;
}

.composer__right[b-dntgzkofz3] {
    right: 12px;
}

/* Buttons */
.iconbtn[b-dntgzkofz3] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: none;
    z-index: 6;
}

    .iconbtn img[b-dntgzkofz3] {
        width: 20px;
        height: 20px;
        display: block;
    }

.iconbtn--sizing[b-dntgzkofz3] {
    position: absolute;
    left: 14px;
    top: 12px;
}

.iconbtn--calender[b-dntgzkofz3] {
    background: var(--Main-Color---Signal-Red);
}

.iconbtn--menu[b-dntgzkofz3] {
    background: var(--Sonderfarbe---Dark-Blue);
}

.iconbtn--close[b-dntgzkofz3] {
    position: absolute;
    background: none;
    right: 26px;
    top: 19px;
}

.sendbtn[b-dntgzkofz3] {
    min-width: 60px;
    min-height: 60px;
    border-radius: 999px;
    border: 0;
    background: var(--Main-Color---Signal-Red, #E2001A);
    box-shadow: 2px 4px 8px rgba(30, 30, 30, 0.25);
    align-self: flex-end;
    padding: 0px;
    box-sizing: border-box;
    margin-left: 21px;
}

    .sendbtn img[b-dntgzkofz3] {
        width: 29px;
        height: 29px;
        display: block;
        justify-self: center;
    }

/* Kartenhülle */
.table-card[b-dntgzkofz3] {
    border-radius: 18px;
    background: #fff;
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    overflow: hidden; /* für runde Ecken an Kopf/unterer Zeile */
    max-width: 100%;
}

/* Tabelle */
.tbl[b-dntgzkofz3] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 16px;
    color: var(--Optinal-Color---Dark-Grey);
}

    .tbl thead th[b-dntgzkofz3] {
        background: #f3f6f8;
        text-align: left;
        font-weight: 800;
        padding: 18px 22px;
        border-bottom: 1px solid #e3e7ea;
    }

    .tbl tbody td[b-dntgzkofz3] {
        padding: 18px 22px;
        border-bottom: 1px solid #e9eef1;
    }

    .tbl tbody tr:last-child td[b-dntgzkofz3] {
        border-bottom: none;
    }

    .tbl tbody tr:hover td[b-dntgzkofz3] {
        background: #f9fbfc;
    }

/* Aktionsspalte */
.col-action[b-dntgzkofz3] {
    width: 56px; /* schmal */
    text-align: right;
    white-space: nowrap;
    padding-right: 16px;
}

.iconbtn-ghost[b-dntgzkofz3] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

    .iconbtn-ghost img[b-dntgzkofz3] {
        width: 20px;
        height: 20px;
        display: block;
    }


/* Responsiv */
@media (max-width: 1680px) {
    .ov[b-dntgzkofz3] {
        grid-template-columns: 1fr;
    }

    .ov-left[b-dntgzkofz3] {
        grid-template-columns: 332px 332px;
    }
}

@media (max-width: 1100px) {
    .ov-left[b-dntgzkofz3] {
        grid-template-columns: 332px;
    }
}


/* Systemnachrichten (ohne Bubble, zentrierter Trenner) */
.msg.sys[b-dntgzkofz3] {
    justify-content: center;
}

.sysline[b-dntgzkofz3] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--Secondary-Color---Grey, #5F5F5F);
    font-size: .95rem;
}

    .sysline[b-dntgzkofz3]::before,
    .sysline[b-dntgzkofz3]::after {
        content: "";
        display: block;
        width: 80px;
        height: 1px;
        background: #d7d7d7;
        opacity: .9;
    }

.systext[b-dntgzkofz3] {
    white-space: pre-wrap;
}

.menu-popup[b-dntgzkofz3] {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
    min-width: 150px;
    z-index: 1000;
}

.menu-item[b-dntgzkofz3] {
    padding: 0.5rem 1rem;
    cursor: pointer;
    white-space: nowrap;
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/Consultant.razor.rz.scp.css */
.ConsultantWrapper[b-srzvti3v5t] {
    justify-items: center;
    justify-content: center;
    display: flex;
}

.ConsultantList[b-srzvti3v5t] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10.6rem;
    column-gap: 8.56rem;
}



.ConsultantCard[b-srzvti3v5t] {
    position: relative;
    overflow: visible; /* sorgt dafür, dass das Bild rausstehen darf */
    width: 27.1875rem;
    height: 13.25rem;
    display: flex;
    border: 0px hidden transparent;
    border-radius: 2.5rem;
    background: var(--farbverlauf-dunkel-2, linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(286deg, rgba(50, 56, 99, 0.90) 3.95%, #33354A 13.92%, #333 64.67%, #333 95.51%));
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
}

    .ConsultantCard:hover[b-srzvti3v5t] {
        background: var(--Farbverlauf-Dark-Red---Signal-Red);
    }

    .ConsultantCard .ConsultantProfilePicture[b-srzvti3v5t] {
        position: absolute;
        left: -8.06rem; /* wie weit das Bild überragt */
        top: -5.2rem;
        width: 21rem;
        height: 21rem;
        pointer-events: none; /* Bild nicht klickbar, nur der Button */
    }

    .ConsultantCard .GenericProfilePicture[b-srzvti3v5t] {
        position: absolute;
        left: -5.75rem;
        top: -1.25rem;
        width: 15rem;
        height: 15rem;
        padding: 0.5rem;
        pointer-events: none;
    }

.Name[b-srzvti3v5t] {
    display: flex;
    flex-direction: row;
    gap: 0.98rem;
}

    .Name .subline[b-srzvti3v5t] {
        color: var(--Main-Color---White, #FFF);
        line-height: normal;
    }

.Location[b-srzvti3v5t] {
    display: flex;
    flex-direction: row;
    gap: 0.98rem;
}

    .Location .icon-text[b-srzvti3v5t] {
        color: var(--Main-Color---White, #FFF);
        line-height: normal;
        font-size: 1.25rem;
    }


.ConsultantInfoWrapper img[b-srzvti3v5t] {
    width: 1.02275rem;
    aspect-ratio: 1/1;
}

.ConsultantInfoWrapper[b-srzvti3v5t] {
    margin-top: 1.06rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-left: 9.08rem;
}

.NoConsultantText[b-srzvti3v5t] {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

    .NoConsultantText .subline[b-srzvti3v5t] {
        font-size: 1.75rem;
        line-height: normal;
        margin-top: 6.37rem;
        margin-bottom: 1.34rem;
    }

    .NoConsultantText p[b-srzvti3v5t] {
        color: var(--Optinal-Color---Dark-Grey, #333);
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.875rem; /* 125% */
    }

    .NoConsultantText .NoConsultantRedText[b-srzvti3v5t] {
        margin-top: 3.44rem;
        margin-bottom: 2.19rem;
        color: var(--Main-Color---Signal-Red, #E3000F);
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1.875rem;
    }

    .NoConsultantText img[b-srzvti3v5t] {
        width: 2.1875rem;
        height: 1.727rem;
        aspect-ratio: 19/15;
        cursor: pointer;
    }

.Qualification[b-srzvti3v5t] {
    margin-top: 3.25rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

    .Qualification p[b-srzvti3v5t] {
        color: var(--Main-Color---White, #FFF);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.75rem;
    }

        .Qualification p span[b-srzvti3v5t] {
            color: var(--Main-Color---Signal-Red, #E3000F);
            font-size: 1rem;
            font-style: normal;
            font-weight: 700;
            line-height: 1.75rem; /* 175% */
        }
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/ConsultingServices.razor.rz.scp.css */
.ConsultingServiceTile[b-rlr5e8y29o] {
    width: 27.25rem;
    height: 21.1875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 2.5rem;
    background: var(--Main-Color---White, #FFF);
    /* Shadow Boxes/Cards */
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    text-align: center;
}

    .ConsultingServiceTile img[b-rlr5e8y29o] {
        
        max-height: 7.25rem;
        object-fit: ; /* keeps aspect ratio, may leave empty space */
        margin-top: 4.06rem;
    }

    .ConsultingServiceTile .header[b-rlr5e8y29o] {
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.75rem; /* 116.667% */
        text-decoration-line: underline;
        text-decoration-color:       #000;
        text-decoration-style: solid;
        text-decoration-skip-ink: auto;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        background: linear-gradient(286deg, rgba(50, 56, 99, 0.90) 3.95%, #323863 26.32%, #33354A 64.67%, #333 95.51%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-top: 1.31rem;
        max-width: 23.375rem;
    }

    .ConsultingServiceTile .label[b-rlr5e8y29o] {

        color: #333;
        font-weight: 500;
        line-height: 1.75rem; /* 140% */
        margin-top: 1.06rem;
        max-width: 23.375rem;      
        max-height:3.5rem;
    }
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/ConsultingTiles.razor.rz.scp.css */
.ConsultingTile[b-pd60s9irqw] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    gap: 1rem;
    grid-auto-flow: row;
    justify-content: space-between;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-areas:
        "Icon"
        "Header"
        "Body"
        "Button";
    width: 100%;
    max-width: 27.188rem;
    min-height: 24.063rem;
    border-radius: 2.5rem;
    box-sizing: border-box;
    background: var(--Main_Color---White, #FFF);
    box-shadow: 0.125rem 0.25rem 0.5rem 0 rgba(30, 30, 30, 0.25);
    padding: 3.0625rem 4.5rem 2.5625rem 4.5rem;
}

.Icon[b-pd60s9irqw] {
    grid-area: Icon;
    align-self: start;
}

    .Icon img[b-pd60s9irqw] {
        max-width: 100%;
        height: auto;
    }

.Header[b-pd60s9irqw] {
    grid-area: Header;
    color: var(--Optinal-Color---Dark-Grey, #333);
    font-family: var(--font-base);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.Body[b-pd60s9irqw] {
    grid-area: Body;
    width: 100%;
    max-width: 18.125rem;
    color: var(--Optinal-Color---Dark-Grey, #333);
    text-align: center;
    font-family: var(--font-base);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2rem;
}

.Button[b-pd60s9irqw] {
    grid-area: Button;
    align-self: end;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablets (bis 1024px) */
@media (max-width: 64rem) {
    .ConsultingTile[b-pd60s9irqw] {
        max-width: 24rem;
        min-height: 22rem;
        padding: 2.5rem 3.5rem 2rem 3.5rem;
    }

    .Header[b-pd60s9irqw] {
        font-size: 1.5rem;
    }

    .Body[b-pd60s9irqw] {
        font-size: 1rem;
        line-height: 1.75rem;
    }
}

/* Mobile Landscape (bis 768px) */
@media (max-width: 48rem) {
    .ConsultingTile[b-pd60s9irqw] {
        max-width: 100%;
        min-height: 20rem;
        padding: 2rem 2.5rem 1.75rem 2.5rem;
        border-radius: 2rem;
    }

    .Header[b-pd60s9irqw] {
        font-size: 1.35rem;
    }

    .Body[b-pd60s9irqw] {
        font-size: 0.938rem;
        line-height: 1.5rem;
        max-width: 100%;
    }
}

/* Mobile Portrait (bis 480px) */
@media (max-width: 30rem) {
    .ConsultingTile[b-pd60s9irqw] {
        min-height: 18rem;
        padding: 1.5rem 2rem 1.5rem 2rem;
        border-radius: 1.5rem;
    }

    .Icon img[b-pd60s9irqw] {
        max-height: 3rem;
    }

    .Header[b-pd60s9irqw] {
        font-size: 1.25rem;
    }

    .Body[b-pd60s9irqw] {
        font-size: 0.875rem;
        line-height: 1.35rem;
    }
}

/* === Responsive Overrides: Einzelkachel === */
.ConsultingTile[b-pd60s9irqw] {
    height: 100%; /* füllt den Grid-Slot */
    max-width: 100%; /* eventuell auskommentieren */
}

/* Tablet (≤1024px): keine Max-Width-Kappung, etwas kompakteres Padding */
@media (max-width: 64rem) {
    .ConsultingTile[b-pd60s9irqw] {
        max-width: 100%;
        min-height: 20rem;
        padding: 2rem;
    }
}

/* Mobile (≤768px): Typo leicht runter, bessere Lesbarkeit */
@media (max-width: 48rem) {
    .Header[b-pd60s9irqw] {
        font-size: 1.125rem;
    }

    .Body[b-pd60s9irqw] {
        font-size: .95rem;
        line-height: 1.5rem;
    }
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/DynamicPopupContainer.razor.rz.scp.css */
.popup-backdrop[b-e82kaw4ktu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 30, 30, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    box-sizing: border-box;
    overflow-y: auto;
}

.popup-content[b-e82kaw4ktu] {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    animation: popup-fadein-b-e82kaw4ktu 0.2s ease;
    box-sizing: border-box;
}

.close-btn[b-e82kaw4ktu] {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    padding: 0.5rem;
    line-height: 1;
    color: #333;
    transition: color 0.2s ease;
}

    .close-btn:hover[b-e82kaw4ktu] {
        color: var(--Main-Color---Signal-Red, #E3000F);
    }

@keyframes popup-fadein-b-e82kaw4ktu {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

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

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablets (bis 1024px) */
@media (max-width: 64rem) {
    .popup-backdrop[b-e82kaw4ktu] {
        padding: 0.75rem;
    }

    .popup-content[b-e82kaw4ktu] {
        padding: 1.25rem;
        max-width: 95vw;
        max-height: 92vh;
    }

    .close-btn[b-e82kaw4ktu] {
        font-size: 1.1rem;
    }
}

/* Mobile Landscape und kleinere Tablets (bis 768px) */
@media (max-width: 48rem) {
    .popup-backdrop[b-e82kaw4ktu] {
        padding: 0.5rem;
        align-items: flex-start;
        padding-top: 1rem;
    }

    .popup-content[b-e82kaw4ktu] {
        padding: 1rem;
        max-width: 100%;
        max-height: 95vh;
        width: 100%;
        border-radius: 0.75rem;
        margin: 0 auto;
    }

    .close-btn[b-e82kaw4ktu] {
        top: 6px;
        right: 6px;
        font-size: 1rem;
        padding: 0.4rem;
    }
}

/* Mobile Portrait (bis 480px) */
@media (max-width: 30rem) {
    .popup-backdrop[b-e82kaw4ktu] {
        padding: 0.25rem;
        align-items: flex-start;
    }

    .popup-content[b-e82kaw4ktu] {
        padding: 0.875rem;
        border-radius: 0.5rem;
        max-height: 98vh;
    }

    .close-btn[b-e82kaw4ktu] {
        top: 4px;
        right: 4px;
        font-size: 0.938rem;
        padding: 0.35rem;
    }

    @keyframes popup-fadein-b-e82kaw4ktu {
        from {
            transform: translateY(20px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* Landscape Mode für Mobile */
@media (max-height: 30rem) and (orientation: landscape) {
    .popup-backdrop[b-e82kaw4ktu] {
        align-items: flex-start;
        padding: 0.5rem;
    }

    .popup-content[b-e82kaw4ktu] {
        max-height: 95vh;
        margin-top: 0;
    }
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/Feedback.razor.rz.scp.css */
/* ==================== FEEDBACK (CLEAN) ==================== */

.fbslider[b-zf40y0zq6y] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 70px;
}

/* Viewport: immer fluid, kein nativer X-Scroll */
.fb-viewport[b-zf40y0zq6y] {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

/* Track: nur transform-Animation; NICHT per CSS überschreiben */
.fb-track[b-zf40y0zq6y] {
    display: flex;
    gap: 67px; /* JS liest das echte gap per computed style */
    will-change: transform;
    transition: transform 1s ease;
    justify-content: flex-start;
    cursor: grab;
    user-select: none;
}

    .fb-track.is-dragging[b-zf40y0zq6y] {
        transition: none;
        cursor: grabbing;
    }

    /* Jede Karte nimmt ihre eigene Breite; wir messen sie in JS */
    .fb-track > *[b-zf40y0zq6y] {
        flex: 0 0 auto;
    }

/* Die Karte selbst (dein Design bleibt) */
.container[b-zf40y0zq6y] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr max-content 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
        "Header"
        "Citation"
        "Writer";
    /* WICHTIG: flexibel auf klein, exakt dein Maß auf groß */
    height: auto;
    min-height: 28.063em;
    border-radius: 2.5rem;
    background: var(--Farbverlauf-Dark-Grey---Dark-Blue, linear-gradient(286deg, rgba(50, 56, 99, 0.90) 3.95%, #323863 19.47%, #33354A 48.29%, #333 95.51%));
    box-shadow: 0.125rem 0.25rem 0.5rem 0 rgba(30, 30, 30, 0.25);
}

/* Typo innerhalb der Karte (deine Werte) */
.Header[b-zf40y0zq6y] {
    justify-self: center;
    align-self: start;
    grid-area: Header;
    color: var(--Main_Color---White, #FFF);
    font-family: var(--font-base);
    font-size: 2rem;
    font-weight: 600;
    line-height: normal;
    margin-top: 2.813rem;
}

.Citation[b-zf40y0zq6y] {
    justify-self: center;
    align-self: center;
    grid-area: Citation;
    color: var(--Main_Color---White, #FFF);
    text-align: center;
    font-family: var(--font-base);
    font-size: 1.625rem;
    font-style: italic;
    font-weight: 400;
    line-height: 2.25rem;
    margin-left: 3.875rem;
    margin-right: 3.875rem;
}

.Writer[b-zf40y0zq6y] {
    justify-self: end;
    align-self: end;
    grid-area: Writer;
    color: var(--Main_Color---White, #FFF);
    font-family: var(--font-base);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 2rem;
    margin-bottom: 1.75rem;
    margin-right: 2.313rem;
}

/* Dots */
.fb-dots[b-zf40y0zq6y] {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

    .fb-dots .dot[b-zf40y0zq6y] {
        width: 1rem;
        height: 1rem;
        border-radius: 1rem;
        border: 0;
        background: rgba(50, 56, 99, 0.30);
        cursor: pointer;
    }

        .fb-dots .dot.is-active[b-zf40y0zq6y] {
            background: rgba(50, 56, 99, 0.70);
        }

/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce) {
    .fb-track[b-zf40y0zq6y] {
        transition: none;
    }
}

/* ==================== END FEEDBACK (CLEAN) ==================== */

/* Viewport bleibt ohne nativen X-Scroll, Deckel kommt aus Inline-Style */
.fb-viewport[b-zf40y0zq6y] {
    width: 100%;
    margin: 0 auto;
    overflow: hidden !important;
    padding-inline: 0 !important;
    box-sizing: border-box;
}

/* Track-Gap fix; JS liest computed gap → klappt auch mit späteren Tweaks */
.fb-track[b-zf40y0zq6y] {
    gap: 67px;
}

/* Kartenbreite: am Container ausrichten, nicht an vw */
.container[b-zf40y0zq6y] {
    width: min(32.25em, 100%); /* 516px oder kleiner, falls der Container schmaler ist */
    height: auto;
    box-sizing: border-box;
}

.fbslider[b-zf40y0zq6y] {
    position: relative;
}

.fb-viewport[b-zf40y0zq6y] {
    position: relative;
    z-index: 0;
    touch-action: pan-y;
    overflow: hidden; /* Sicherheit */
}

.fb-track[b-zf40y0zq6y] {
    gap: clamp(16px, 3vw, 67px);
    position: relative; /* wg. transform */
    z-index: 0;
}

.fb-dots[b-zf40y0zq6y] {
    position: relative;
    z-index: 3; /* über dem Track */
}


/* _content/SKM_OnlineClearingstelle/Components/SubComponents/IntranetAreaSelection.razor.rz.scp.css */
.content[b-q1o37smf1x] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.menu-switcher[b-q1o37smf1x] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-top: 90px;
}

.menu-btn[b-q1o37smf1x] { /* Größe, runde Ecken, Verlauf, Schatten … */
}

    .menu-btn.is-active[b-q1o37smf1x] { /* rote Version */
    }

    .menu-btn img[b-q1o37smf1x] {
        width: 24px;
        height: 24px;
        display: block;
    }
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/IntranetMonthScheduler.razor.rz.scp.css */
.content[b-pjtknm3rfl] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    align-items: center;
    width: 1679px;
    flex: 1;
}

.topRow[b-pjtknm3rfl] {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.divider[b-pjtknm3rfl] {
    width: 100%;
    height: 2px;
    background: #323863;
    margin-bottom: 10px;
}

.ms[b-pjtknm3rfl] {
    --card-bg: #fff;
    --card-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    --b: #E8E8E8;
    --ink: #2d2d2d;
    background: var(--card-bg);
    border-radius: 40px;
    box-shadow: var(--card-shadow);
    padding: 25px 30px 25px;
    color: var(--ink);
    width: 100%;
    box-sizing: border-box;
}

.ms__head[b-pjtknm3rfl] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 2px 4px 10px;
    justify-content: space-between;
}

.ms__head_left[b-pjtknm3rfl], ms__head_right[b-pjtknm3rfl] {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.ms__legend[b-pjtknm3rfl] {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}

.ms__legend-item[b-pjtknm3rfl] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    color: var(--Sonderfarbe---Dark-Blue);
}

.ms__legend-dot[b-pjtknm3rfl] {
    width: 23px;
    height: 23px;
    border-radius: 4px;
    background: var(--chip-bg,#e9ecef);
    display: inline-block;
}

.ms__title[b-pjtknm3rfl] {
    font-size: 20px;
    justify-self: center;
    color: var(--Secondary-Color---Grey);
    font-weight: 600;
    text-transform: uppercase;
}

.ms__actions[b-pjtknm3rfl] {
    display: flex;
    gap: 8px;
}

.ms__nav[b-pjtknm3rfl] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    display: grid;
    place-items: center;
    border: none;
    background: none;
    color: #32415d;
    cursor: pointer;
}

.ms__today[b-pjtknm3rfl] {
    border: none;
    background: none;
    padding: 6px 10px;
    font-weight: 600;
    color: #32415d;
    cursor: pointer;
}

.innerbox[b-pjtknm3rfl] {
    border-radius: 25px;
    background: #32386310;
    padding: 20px;
}

.ms__dow[b-pjtknm3rfl] {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    padding: 10px 6px 4px;
    color: #969696;
    font-weight: 500;
    font-size: 1rem;
}

.ms__dow-item[b-pjtknm3rfl] {
    margin-left: 12px;
    text-align: left;
}

.ms__grid[b-pjtknm3rfl] {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-auto-rows: 112px;
    border: 1px solid var(--b);
    overflow: hidden;
}

.ms__cell[b-pjtknm3rfl] {
    border-right: 1px solid var(--b);
    border-bottom: 1px solid var(--b);
    padding: 12px;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .ms__cell:nth-child(7n)[b-pjtknm3rfl] {
        border-right: 0;
    }

    .ms__cell.is-out[b-pjtknm3rfl] {
        background: #F8F8F8;
        color: #00000040;
    }

    .ms__cell.is-today .ms__date[b-pjtknm3rfl] {
        color: var(--Main-Color---Signal-Red);
        font-weight: 500;
    }

.ms__cell-head[b-pjtknm3rfl] {
    display: flex;
    justify-content: flex-start;
}

.ms__date[b-pjtknm3rfl] {
    font-weight: 500;
}

.ms__items[b-pjtknm3rfl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.ms__chip[b-pjtknm3rfl] {
    max-width: 60%;
    border: 0;
    border-radius: 4px;
    padding: 3px 4px;
    background: var(--chip-bg,#e9ecef);
    color: var(--chip-fg,#333);
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    cursor: pointer;
}

    .ms__chip:hover[b-pjtknm3rfl] {
        filter: brightness(.97);
    }

.ms__more[b-pjtknm3rfl] {
    font-size: 12px;
    color: #9aa4af;
    font-weight: 600;
}

/* simple modal */
.msdlg__backdrop[b-pjtknm3rfl] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    display: grid;
    place-items: center;
    z-index: 1000;
}

.msdlg[b-pjtknm3rfl] {
    width: min(918px,90vw);
    background: #fff;
    border-radius: 40px;
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    padding: 30px;
}

.msdlg__x[b-pjtknm3rfl] {
    border: 0;
    background: #f3f4f6;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
}

.msdlg__body[b-pjtknm3rfl] {
    padding: 18px;
}

.msdlg__foot[b-pjtknm3rfl] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px 18px;
}

/* Details-Dialog */
.msdlg--details[b-pjtknm3rfl] {
}

.dhead[b-pjtknm3rfl] {
    position: relative;
    display: flex;
    justify-content: center;
}

.dhead__title[b-pjtknm3rfl] {
    color: var(--Optinal-Color---Dark-Grey, #333);
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 92.857% */
}

.dhead__close[b-pjtknm3rfl] {
    position: absolute;
    right: 0px;
    top: -10px;
    border: 0;
    background: transparent;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* Grid für Inhalte */
.dgrid[b-pjtknm3rfl] {
    padding: 14px 18px 6px;
    display: grid;
    gap: 30px;
}

.drow[b-pjtknm3rfl] {
    display: grid;
    gap: 4px;
}

.drow--two[b-pjtknm3rfl] {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 720px) {
    .drow--two[b-pjtknm3rfl] {
        grid-template-columns: 1fr;
    }
}

.dcol[b-pjtknm3rfl] {
    display: grid;
    gap: 4px;
}

.dcol--toggle[b-pjtknm3rfl] {
    align-content: end;
}

/* Typo: zwei Stile wie gewünscht */
.dlabel[b-pjtknm3rfl] {
    color: var(--Optinal-Color---Dark-Grey, #333);
    font-size: 18px;
    font-weight: 500;
    line-height: 26px; /* Überschrift-Stil */
}

.dvalue[b-pjtknm3rfl] {
    color: var(--Secondary-Color---Grey, #5F5F5F);
    font-size: 20px;
    font-weight: 400;
    line-height: 26px; /* Subline-Stil */
}

/* Footer */
.dfoot[b-pjtknm3rfl] {
    display: flex;
    justify-content: flex-end;
}

    .dfoot button[b-pjtknm3rfl] {
        display: flex;
        width: 158px;
        height: 45px;
        padding: 5px 10px 5px 12px;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        border-radius: 10px;
        border: 1px solid var(--Verlauf-Rot, #E3000F);
        background: var(--Main-Color---Signal-Red, #E3000F);
        box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    }

        .dfoot button img[b-pjtknm3rfl] {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            aspect-ratio: 1/1;
        }

/* Toggler nur Info (keine Interaktion) */
.today-card__toggler.readonly[b-pjtknm3rfl] {
    pointer-events: none;
    opacity: 1;
}

    .today-card__toggler.readonly .toggler-input:disabled[b-pjtknm3rfl] {
        opacity: 0;
    }

/* Create-Form Layout */
.cform[b-pjtknm3rfl] {
    display: grid;
    gap: 30px;
}

    .cform .row[b-pjtknm3rfl] {
        display: grid;
        gap: 10px;
    }

    .cform .row--two[b-pjtknm3rfl] {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .cform .row--three[b-pjtknm3rfl] {
        grid-template-columns: 1.1fr .6fr .6fr;
        gap: 24px;
    }

@media (max-width: 980px) {
    .cform .row--two[b-pjtknm3rfl], .cform .row--three[b-pjtknm3rfl] {
        grid-template-columns: 1fr;
    }
}

.fld[b-pjtknm3rfl] {
    position: relative;
}

.fld__icon[b-pjtknm3rfl] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.toggles[b-pjtknm3rfl] {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/* Composer mit Send-Button IN der Textarea */
.cform__composer[b-pjtknm3rfl] {
    position: relative;
    min-height: 120px;
}

    .cform__composer .composer__input[b-pjtknm3rfl] {
        padding-right: 50px;
    }


.sendbtn[b-pjtknm3rfl] {
    min-width: 45px;
    min-height: 45px;
    border-radius: 999px;
    border: 0;
    background: var(--Main-Color---Signal-Red, #E2001A);
    box-shadow: 2px 4px 8px rgba(30, 30, 30, 0.25);
    align-self: flex-end;
    padding: 0px;
    box-sizing: border-box;
    margin-left: 21px;
}

    .sendbtn img[b-pjtknm3rfl] {
        width: 23px;
        height: 23px;
        display: block;
        justify-self: center;
    }

.sendbtn--inside[b-pjtknm3rfl] {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.iconbtn[b-pjtknm3rfl] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: none;
    z-index: 6;
}

    .iconbtn img[b-pjtknm3rfl] {
        width: 25px;
        height: 25px;
        display: block;
    }

/* Composer */
.chat__composer[b-pjtknm3rfl] {
    padding-top: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.composer__inner[b-pjtknm3rfl] {
    position: relative;
    border-radius: 25px;
    border: 0.5px solid var(--Sonderfarbe---Dark-Blue);
    background: var(--Main-Color---White);
    min-height: 180px;
    display: grid;
    width: 100%;
}

.composer__input[b-pjtknm3rfl] {
    resize: vertical;
    border: none;
    outline: none;
    margin: 16px 0px 40px 20px;
    font: inherit;
    color: var(--Secondary-Color---Grey);
    box-sizing: border-box;
    resize: none;
    background: none;
}

.composer__left[b-pjtknm3rfl],
.composer__right[b-pjtknm3rfl] {
    position: absolute;
    bottom: 10px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.composer__left[b-pjtknm3rfl] {
    left: 12px;
}

.composer__right[b-pjtknm3rfl] {
    right: 12px;
}

.btn[b-pjtknm3rfl] {
    border: 1px solid #d0d6dd;
    border-radius: 10px;
    background: #fff;
    padding: 8px 12px;
    cursor: pointer;
}

.btn--primary[b-pjtknm3rfl] {
    border: 0;
    background: #e2001a;
    color: #fff;
    box-shadow: 0 4px 10px rgba(226,0,26,.35);
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/IntranetMyAppointments.razor.rz.scp.css */
.OverviewBoardMain[b-6sobbk8un6] {
    position:relative;
}

.OverviewBoardArchive[b-6sobbk8un6] {
    position: relative;
}

.archiveButton[b-6sobbk8un6] {
    position: absolute;
    right: 0px;
    top: 66px;
    display: flex;
    border: none;
    background: none;
    gap: 15px;

}

    .archiveButton img[b-6sobbk8un6] {
        width: 30px;
        height: 26px;
        flex-shrink: 0;
        aspect-ratio: 15/13;
    }

    .archiveButton span[b-6sobbk8un6] {
        color: #930A0A;
        font-size: 1.25rem;
        font-weight: 400;
    }

.archiveBackButton[b-6sobbk8un6] {
    position: absolute;
    right: 0px;
    top: 66px;
    display: flex;
    border: none;
    background: none;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

    .archiveBackButton img[b-6sobbk8un6] {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .archiveBackButton span[b-6sobbk8un6] {
        color: #333;
        font-size: 0.9375rem;
        font-weight: 500;
    }

.ov[b-6sobbk8un6] {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 1684px;
    column-gap: 56px;
    row-gap: 22px;
    align-items: start;
    justify-content: center; /* mittig auf der Seite */
}

.ov-left[b-6sobbk8un6] {
    display: grid;
    grid-template-columns: 332px 332px 976px;
    gap: 22px;
}

    .ov-left.overlay .ov-col--first[b-6sobbk8un6] {
        grid-column: 1; /* Spalte 1 */
        grid-row: 1; /* Zeile 1 fixieren */
        z-index: 1; /* hinten */
    }

    .ov-left.overlay .ov-col--second[b-6sobbk8un6] {
        grid-column: 2; /* Spalte 2 */
        grid-row: 1;
        z-index: 1;
    }

    .ov-left.overlay .ov-col--third[b-6sobbk8un6] {
        grid-column: 1 / -1; /* alle Spalten */
        grid-row: 1; /* gleiche Zeile */
        z-index: 5; /* oben drauf */
        position: relative; /* für z-index */
    }
        .ov-left.overlay .ov-col--third .ov-cap[b-6sobbk8un6] {
            position: relative;
            margin-left: calc(332px + 22px + 332px + 22px); /* = Start von Spalte 3 */
            width: 976px; /* Breite von Spalte 3 */
            z-index: 6; /* über dem Chat, aber nur in Spalte 3 */
        }

        /* Das Chatpanel selbst bleibt normal 100% breit */
        .ov-left.overlay .ov-col--third .chat[b-6sobbk8un6] {
            width: 100%;
        }

.ov-archive[b-6sobbk8un6] {
    display: flex;
    width: 100%;
}

.ov-col[b-6sobbk8un6] {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: inherit;
}

/* Überschriften */
.ov-cap[b-6sobbk8un6] {
    font-weight: 700;
    color: var(--Optinal-Color---Dark-Grey);
    border-bottom: 2px solid var(--Optinal-Color---Dark-Grey);
    padding-bottom: 6px;
}

.ov-cap--red[b-6sobbk8un6] {
    color: var(--Main-Color---Signal-Red);
    border-bottom-color: var(--Main-Color---Signal-Red);
}

.ov-cap--red_archive[b-6sobbk8un6] {
    color: var(--Main-Color---Signal-Red);
    border-bottom-color: var(--Main-Color---Signal-Red);
    width: 100%;
}

.ov-cap--blue[b-6sobbk8un6] {
    color: var(--Sonderfarbe---Dark-Blue);
    border-bottom-color: var(--Sonderfarbe---Dark-Blue);
}

/* Cards – Basis */
.card[b-6sobbk8un6] {
    position: relative;
    border-radius: 40px;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    padding: 15px 20px;
    display: grid;
    row-gap: 8px;
    cursor: default;
    box-sizing: border-box;
    width: 100%;
}


.selected[b-6sobbk8un6] {
    border: 1px solid var(--Main-Color---Signal-Red, #E2001A);
}
/* Größenvarianten */
.card--small[b-6sobbk8un6] {
    width: 100%;
    height: 170px;
}

/* Badge oben rechts (Status-Icon etc.) */
.card__badge[b-6sobbk8un6] {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
    background: var(--badge-bg, #fff);
}

.card__badge--accent[b-6sobbk8un6] {
    background: var(--Main-Color---Signal-Red, #E2001A);
    box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

.card__badge img[b-6sobbk8un6] {
    position: relative;
    width: var(--icon-w, 18px);
    height: var(--icon-h, 18px);
    display: block;
}

/* Typografie-Inhalte */
.card__top[b-6sobbk8un6] {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}


    .card__top .title[b-6sobbk8un6] {
    font-size: 1.25rem;
    font-weight: 400;
    text-transform: uppercase;
}

    .card__top .subtitle[b-6sobbk8un6] {
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--Secondary-Color---Grey);
    }

    .card__top .date[b-6sobbk8un6] {
        color: var(--Secondary-Color---Grey);
        font-size: 0.875rem;
        font-weight: 400;
    }

.card__top_Cons[b-6sobbk8un6] {
    flex-direction: row;
    gap: 10px;
}

.card__top_appt[b-6sobbk8un6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.appt-label[b-6sobbk8un6] {
    color: var(--Secondary-Color---Grey);
    font-size: 0.875rem;
    font-weight: 400;
}

.appt-label-red[b-6sobbk8un6] {
    color: var(--Main-Color---Signal-Red);
    font-size: 1.25rem;
    font-weight: 400;
}

.card__bottom[b-6sobbk8un6] {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: flex-end;
}

    .card__bottom .title[b-6sobbk8un6] {
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--Secondary-Color---Grey);
    }

    .card__bottom .subtitle[b-6sobbk8un6] {
        font-size: 1.25rem;
        font-weight: 400;
    }


.status--archived[b-6sobbk8un6] {
    color: var(--Main-Color---Signal-Red); /* wie im Screenshot */
}

.ov-col--first[b-6sobbk8un6] {
    --badge-bg: var(--Main-Color---Signal-Red);
    --icon-w: 12px;
    --icon-h: 12px;
}

.ov-col--second[b-6sobbk8un6] {
    --badge-bg: var(--Sonderfarbe---Dark-Blue);
    --icon-w: 14px;
    --icon-h: 15px;
}

.ov-col--third[b-6sobbk8un6] {
    --badge-bg: var(--farbverlauf-dunkel-2);
    --icon-w: 12px;
    --icon-h: 8px;
}

/* Chat-Panel */
.chat[b-6sobbk8un6] {
    width: 100%;
    height: 740px;
    border-radius: 40px;
    background: var(--Main-Color---White, #fff);
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    display: grid;
    grid-template-rows: auto 1fr auto; /* head | messages | composer */
    gap: 14px;
    padding: 21px 20px 26px 21px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

    /* über alle 3 Spalten spannen, wenn vergrößert */
    .chat.is-expanded[b-6sobbk8un6] {
        grid-column: 1 / -1; /* <<< macht den Trick in deiner ov-left (3 Spalten) */
        z-index: 5;
    }

/* Header */
.chat__head[b-6sobbk8un6] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-right: 80px;
    padding-left: 80px;
}

.chat__head-left[b-6sobbk8un6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.chat__head-right[b-6sobbk8un6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat__title[b-6sobbk8un6] {
    font-weight: 800;
    color: var(--Optinal-Color---Dark-Grey, #333);
}

/* Messages */
.chat__messages[b-6sobbk8un6] {
    transform: translateZ(0);
}

.scroller[b-6sobbk8un6] {
    transform: translateZ(0);
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    overflow-anchor: auto;
    gap: 12px;
    padding-right: 80px;
}

.chat__empty[b-6sobbk8un6] {
    color: #9a9a9a;
    font-style: italic;
    padding: 10px;
}

.msg[b-6sobbk8un6] {
    display: flex;
    height: fit-content;
    margin-bottom: 12px;
}

    .msg.in[b-6sobbk8un6] {
        justify-content: flex-start;
    }

    .msg.out[b-6sobbk8un6] {
        justify-content: flex-end;
    }

.bubble[b-6sobbk8un6] {
    max-width: 100%;
    border-radius: 25px;
    padding: 12px 14px 8px;
    background: #32386310;
    color: #2d2d2d;
    position: relative;
}

.msg.out .bubble[b-6sobbk8un6] {
    background: #32386330;
}

.bubble__header[b-6sobbk8un6] {
    color: var(--Secondary-Color---Grey);
    font-size: 0.875rem;
    font-weight: 400;
    margin-bottom: 5px;
}

.bubble__text[b-6sobbk8un6] {
    color: var(--Secondary-Color---Grey);
    font-size: 1.25rem;
    font-weight: 400;
    padding: 0px 20px 20px 0px;
}

.bubble__time[b-6sobbk8un6] {
    position: absolute;
    right: 20px;
    bottom: 12px;
    font-size: 0.875rem;
    color: var(--Secondary-Color---Grey);
    font-weight: 400;
}

/* Composer */
.chat__composer[b-6sobbk8un6] {
    padding-top: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.composer__inner[b-6sobbk8un6] {
    position: relative;
    border-radius: 25px;
    border: 0.5px solid var(--Sonderfarbe---Dark-Blue);
    background: var(--Main-Color---White);
    min-height: 180px;
    display: grid;
    width: 100%;
}

.composer__input[b-6sobbk8un6] {
    resize: vertical;
    border: none;
    outline: none;
    padding: 16px 20px 16px 20px;
    font: inherit;
    color: var(--Secondary-Color---Grey);
    box-sizing: border-box;
    resize: none;
    background: none;
}

.composer__left[b-6sobbk8un6],
.composer__right[b-6sobbk8un6] {
    position: absolute;
    bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.composer__left[b-6sobbk8un6] {
    left: 12px;
}

.composer__right[b-6sobbk8un6] {
    right: 12px;
}

/* Buttons */
.iconbtn[b-6sobbk8un6] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: none;
    z-index: 6;
}

    .iconbtn img[b-6sobbk8un6] {
        width: 20px;
        height: 20px;
        display: block;
    }

.iconbtn--sizing[b-6sobbk8un6] {
    position: absolute;
    left: 14px;
    top: 12px;
}

.iconbtn--calender[b-6sobbk8un6] {
    background: var(--Main-Color---Signal-Red);
}

.iconbtn--menu[b-6sobbk8un6] {
    background: var(--Sonderfarbe---Dark-Blue);
}

.iconbtn--close[b-6sobbk8un6] {
    position: absolute;
    background: none;
    right: 26px;
    top: 19px;
}

.sendbtn[b-6sobbk8un6] {
    min-width: 60px;
    min-height: 60px;
    border-radius: 999px;
    border: 0;
    background: var(--Main-Color---Signal-Red, #E2001A);
    box-shadow: 2px 4px 8px rgba(30, 30, 30, 0.25);
    align-self: flex-end;
    padding: 0px;
    box-sizing: border-box;
    margin-left:21px;
}

    .sendbtn img[b-6sobbk8un6] {
        width: 29px;
        height: 29px;
        display: block;
        justify-self: center;
    }

/* Kartenhülle */
.table-card[b-6sobbk8un6] {
    border-radius: 18px;
    background: #fff;
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    overflow: hidden; /* für runde Ecken an Kopf/unterer Zeile */
    max-width: 100%;
}

/* Tabelle */
.tbl[b-6sobbk8un6] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 16px;
    color: var(--Optinal-Color---Dark-Grey);
}

    .tbl thead th[b-6sobbk8un6] {
        background: #f3f6f8;
        text-align: left;
        font-weight: 800;
        padding: 18px 22px;
        border-bottom: 1px solid #e3e7ea;
    }

    .tbl tbody td[b-6sobbk8un6] {
        padding: 18px 22px;
        border-bottom: 1px solid #e9eef1;
    }

    .tbl tbody tr:last-child td[b-6sobbk8un6] {
        border-bottom: none;
    }

    .tbl tbody tr:hover td[b-6sobbk8un6] {
        background: #f9fbfc;
    }

/* Aktionsspalte */
.col-action[b-6sobbk8un6] {
    width: 56px; /* schmal */
    text-align: right;
    white-space: nowrap;
    padding-right: 16px;
}

.iconbtn-ghost[b-6sobbk8un6] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

    .iconbtn-ghost img[b-6sobbk8un6] {
        width: 20px;
        height: 20px;
        display: block;
    }


/* Responsiv */
@media (max-width: 1680px) {
    .ov[b-6sobbk8un6] {
        grid-template-columns: 1fr;
    }

    .ov-left[b-6sobbk8un6] {
        grid-template-columns: 332px 332px;
    }
}

@media (max-width: 1100px) {
    .ov-left[b-6sobbk8un6] {
        grid-template-columns: 332px;
    }
}

.menu-popup[b-6sobbk8un6] {
    position: absolute;
    top: 30%;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
    min-width: 150px;
    z-index: 1000;
}

.menu-item[b-6sobbk8un6] {
    padding: 0.5rem 1rem;
    cursor: pointer;
    white-space: nowrap;
}


/* Hover-Effekt für alle Karten */
.card:hover[b-6sobbk8un6] {
    transform: translateY(-4px);
    box-shadow: 4px 8px 16px rgba(30,30,30,0.35);
}

/* _content/SKM_OnlineClearingstelle/Components/SubComponents/IntranetOverviewBoard.razor.rz.scp.css */
.OverviewBoard[b-pzpxhwa9sl] {

}


/* Gesamtlayout: 3 linke Spalten + rechte Spalte mit Divider */
.ov[b-pzpxhwa9sl] {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 1040px 584px;
    column-gap: 56px;
    row-gap: 22px;
    align-items: start;
    justify-content: center; /* mittig auf der Seite */
}

.ov-left[b-pzpxhwa9sl] {
    display: grid;
    grid-template-columns: 332px 332px 332px;
    gap: 22px;
}

.ov-right[b-pzpxhwa9sl] {
    display: grid;
    grid-template-columns: 584px;
    row-gap: 28px;
    position: relative;
}

    /* senkrechter Divider links vom rechten Block */
    .ov-right[b-pzpxhwa9sl]::before {
        content: "";
        position: absolute;
        height: 733px;
        left: -30px; /* Divider etwa mittig im Spaltengap */
        top: 55px;
        bottom: 0;
        width: 2px;
        opacity: 0.3;
        background: #5f5f5f33;
        border-radius: 1px;
        opacity: .8;
    }

.ov-col[b-pzpxhwa9sl] {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.ov-right-sec[b-pzpxhwa9sl] {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

/* Überschriften */
.ov-cap[b-pzpxhwa9sl] {
    font-weight: 700;
    color: var(--Optinal-Color---Dark-Grey);
    border-bottom: 2px solid var(--Optinal-Color---Dark-Grey);
    padding-bottom: 6px;
}

.ov-cap--red[b-pzpxhwa9sl] {
    color: var(--Main-Color---Signal-Red);
    border-bottom-color: var(--Main-Color---Signal-Red);
}

.ov-cap--blue[b-pzpxhwa9sl] {
    color: var(--Sonderfarbe---Dark-Blue);
    border-bottom-color: var(--Sonderfarbe---Dark-Blue);
}

.ov-cap--grey[b-pzpxhwa9sl] {
    color: var(--Secondary-Color---Grey);
    border-bottom-color: var(--Secondary-Color---Grey);
}

/* Cards – Basis */
.card[b-pzpxhwa9sl] {
    position: relative;
    border-radius: 40px;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    padding: 15px 20px;
    display: grid;
    row-gap: 8px;
    cursor: default;
    box-sizing: border-box;
    width: 100%;
}

/* Größenvarianten */
.card--small[b-pzpxhwa9sl] {
    width: 100%;
    height: 170px;
}

.card--wide[b-pzpxhwa9sl] {
    width: 100%;
}

    .card--wide.h-170[b-pzpxhwa9sl] {
        height: 170px;
    }

    .card--wide.h-108[b-pzpxhwa9sl] {
        height: 108px;
    }

/* Badge oben rechts (Status-Icon etc.) */
.card__badge[b-pzpxhwa9sl] {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
    background: var(--badge-bg, #fff);
}

.card__badge--accent[b-pzpxhwa9sl] {
    background: var(--Main-Color---Signal-Red, #E2001A);
    box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

.card__badge img[b-pzpxhwa9sl] {
    position: relative;
    width: var(--icon-w, 18px);
    height: var(--icon-h, 18px);
    display: block;
}

/* Typografie-Inhalte */
.card__top[b-pzpxhwa9sl] {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

    .card__top .title[b-pzpxhwa9sl] {
        font-size: 1.25rem;
        font-weight: 400;
        text-transform: uppercase;
    }

    .card__top .subtitle[b-pzpxhwa9sl] {
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--Secondary-Color---Grey);
    }

.card__top_Inqu[b-pzpxhwa9sl] {
    flex-direction: row;
    gap: 10px;
}

.card__bottom[b-pzpxhwa9sl] {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: flex-end;
}

    .card__bottom .title[b-pzpxhwa9sl] {
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--Secondary-Color---Grey);
    }

    .card__bottom .subtitle[b-pzpxhwa9sl] {
        font-size: 1.25rem;
        font-weight: 400;
    }


/* ERSTANFRAGEN – rot */
.ov-col--first[b-pzpxhwa9sl] {
    --badge-bg: var(--Main-Color---Signal-Red);
    --icon-w: 12px;
    --icon-h: 12px;
}

/* MEINE BERATUNGEN – dunkelblau/Gradient */
.ov-col--second[b-pzpxhwa9sl] {
    --badge-bg: var(--Sonderfarbe---Dark-Blue);
    --icon-w: 14px;
    --icon-h: 15px;
}

/* AKTUELLE TERMINE – grau/schwarz */
.ov-col--third[b-pzpxhwa9sl] {
    --badge-bg: var(--farbverlauf-dunkel-2);
    --icon-w: 12px;
    --icon-h: 8px;
}

/* RECHTS: Fachforum – roter Akzent */
.ov-right-sec--forum[b-pzpxhwa9sl] {
    --badge-bg: var(--Farbverlauf-Dark-Red---Signal-Red);
    --icon-w: 17px;
    --icon-h: 12px;
}

/* RECHTS: Neuigkeiten – meist ohne Badge, sonst z. B. grauer Punkt */
.ov-right-sec--news[b-pzpxhwa9sl] {
    --badge-bg: #E0E0E0;
    --icon-w: 10px;
    --icon-h: 10px;
}


/* Responsiv */
@media (max-width: 1680px) {
    .ov[b-pzpxhwa9sl] {
        grid-template-columns: 1fr;
    }

    .ov-right[b-pzpxhwa9sl]::before {
        display: none;
    }

    .ov-left[b-pzpxhwa9sl] {
        grid-template-columns: 332px 332px;
    }
}

@media (max-width: 1100px) {
    .ov-left[b-pzpxhwa9sl] {
        grid-template-columns: 332px;
    }
}

.menu-popup[b-pzpxhwa9sl] {
    position: absolute;
    top: 30%;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
    min-width: 150px;
    z-index: 1000;
}

.menu-item[b-pzpxhwa9sl] {
    padding: 0.5rem 1rem;
    cursor: pointer;
    white-space: nowrap;
}

/* Live/Anonym-Tickets */
.card.live[b-pzpxhwa9sl] {
    border: 2px solid var(--Main-Color---Signal-Red, #E2001A); /* Signal-Rot */
    animation: blinkRed-b-pzpxhwa9sl 1s infinite alternate;
    background: #FFF;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover-Effekt für alle Karten */
.card:hover[b-pzpxhwa9sl] {
    transform: translateY(-4px);
    box-shadow: 4px 8px 16px rgba(30,30,30,0.35);
}



/* blinkende Animation */
@keyframes blinkRed-b-pzpxhwa9sl {
    0% {
        box-shadow: 0 0 8px 2px var(--Main-Color---Signal-Red, #E2001A);
    }

    50% {
        box-shadow: 0 0 12px 4px var(--Main-Color---Signal-Red, #E2001A);
    }

    100% {
        box-shadow: 0 0 8px 2px var(--Main-Color---Signal-Red, #E2001A);
    }
}

/* Optional: kleine Farbänderung des Hintergrunds beim Blinken */
.card.live[b-pzpxhwa9sl] {
    animation: blinkRedBg-b-pzpxhwa9sl 1s infinite alternate;
}

@keyframes blinkRedBg-b-pzpxhwa9sl {
    0% {
        background-color: #FFF;
    }

    50% {
        background-color: #FFE5E8;
    }
    /* helles Rot */
    100% {
        background-color: #FFF;
    }
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/IntranetStatistics.razor.rz.scp.css */
.stats[b-ojgwrve9wp] {
    display: grid;
    gap: 20px;
}

/* Headline + CTA */
.stats__head[b-ojgwrve9wp] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    border-bottom: 2px solid var(--Optinal-Color---Dark-Grey, #333);
    padding-bottom: 10px;
}

    .stats__head h2[b-ojgwrve9wp] {
        margin: 0;
    }

.stats__cta[b-ojgwrve9wp] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-inline: 18px;
}

/* Cards */
.cards[b-ojgwrve9wp] {
    display: grid;
    grid-template-columns: repeat(4, 375px);
    gap: 60px;
}

.card[b-ojgwrve9wp] {
    width: 375px;
    height: 257px;
    border-radius: 40px;
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 18px;
    color: #fff;
}

.card--grad[b-ojgwrve9wp] {
    background: linear-gradient(286deg, rgba(50,56,99,.90) 3.95%, #323863 19.47%, #33354A 48.29%, #333 95.51%);
}

.card--plain[b-ojgwrve9wp] {
    background: var(--Main-Color---White, #fff);
    color: var(--Optinal-Color---Dark-Grey, #333);
}

.card__icon[b-ojgwrve9wp] {
    width: 28px;
    height: 28px;
}

.card__title[b-ojgwrve9wp] {
    font-weight: 600;
    opacity: .95;
}

.card__value[b-ojgwrve9wp] {
    font-size: 56px;
    font-weight: 600;
}

.card__value--emph[b-ojgwrve9wp] {
    color: var(--Main-Color---Signal-Red, #E2001A);
}

/* Section title */
.section-title[b-ojgwrve9wp] {
    margin: 8px 0 4px;
    font-weight: 700;
    color: var(--Optinal-Color---Dark-Grey, #333);
}

.section-title--red[b-ojgwrve9wp] {
    color: var(--Main-Color---Signal-Red, #E2001A);
}

/* Table */
.table[b-ojgwrve9wp] {
    background: transparent; /* kein Kasten */
    border-radius: 0;
    box-shadow: none;
    margin-top: 6px;
}

/* Spaltenaufteilung + Abstände */
.table__head[b-ojgwrve9wp],
.table__row[b-ojgwrve9wp] {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr 1.2fr 1.2fr 32px; /* optisch näher an Vorlage */
    column-gap: 56px; /* mehr Luft zwischen Spalten */
    align-items: center;
    padding: 14px 0; /* nur vertikal Padding */
}

/* Header: nur kräftige Unterstreichung */
.table__head[b-ojgwrve9wp] {
    background: transparent;
    font-weight: 700;
    color: var(--Optinal-Color---Dark-Grey, #333);
    border-bottom: 2px solid var(--Optinal-Color---Dark-Grey, #333);
    padding-top: 0; /* Header sitzt dichter am Titel */
}

/* Zeilen: feine Trenner */
.table__row[b-ojgwrve9wp] {
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

    .table__row:last-child[b-ojgwrve9wp] {
        border-bottom: 0;
    }

.th[b-ojgwrve9wp], .td[b-ojgwrve9wp] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px; /* wie im Screenshot */
    color: var(--Optinal-Color---Dark-Grey, #333);
}

/* rechte Aktionsspalte */
.th--action[b-ojgwrve9wp], .td--action[b-ojgwrve9wp] {
    text-align: center;
}

.table__empty[b-ojgwrve9wp] {
    padding: 18px;
    color: #6e6e6e;
}

/* Small icon button */
.iconbtn[b-ojgwrve9wp] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: none;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .iconbtn img[b-ojgwrve9wp] {
        width: 28px;
        height: 28px;
    }

/* Responsive */
@media (max-width: 1600px) {
    .cards[b-ojgwrve9wp] {
        grid-template-columns: repeat(2, 375px);
    }
}

@media (max-width: 900px) {
    .cards[b-ojgwrve9wp] {
        grid-template-columns: 1fr;
    }

    .card[b-ojgwrve9wp] {
        width: 100%;
    }

    .table__head[b-ojgwrve9wp], .table__row[b-ojgwrve9wp] {
        grid-template-columns: 1fr .5fr .9fr 1fr 40px;
    }
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/IntranetTodayCard.razor.rz.scp.css */
:root[b-3g1w8nibnl] {
    --Dark-Blue: var(--Sonderfarbe---Dark-Blue, #323863);
}

.today-card[b-3g1w8nibnl] {
    box-sizing: border-box;
    width: 1160px;
    height: 171px;
    border-radius: 40px;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    display: grid;
    grid-template-columns: auto 1fr auto; /* left | middle | right */
    align-items: center;
    padding: 15px 25px 15px 60px /* innenabstand */
}

/* Left */
.today-card__left[b-3g1w8nibnl] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 260px; /* stabilisiert Layout */
}

    .today-card__left h2[b-3g1w8nibnl] {
        margin: 0;
        font-weight: 500;
    }

.today-card__date[b-3g1w8nibnl] {
    margin: 0;
    color: var(--Secondary-Color---Grey, #5F5F5F);
    font-weight: 400;
}

    .today-card__date .weekday[b-3g1w8nibnl] {
        margin-left:7px;
        color: var(--Secondary-Color---Grey, #5F5F5F);
        font-weight: 400;
        font-size: 14px;
    }

.today-card__toggler[b-3g1w8nibnl] {
    margin-top: 6px;
}

/* Middle */
.today-card__metrics[b-3g1w8nibnl] {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 25px 68px; /* row | column gap */
    justify-content: start;
}

.metric[b-3g1w8nibnl] {
    display: flex;
    align-items: center;
    gap: 21px;
    white-space: nowrap;
}

    .metric p[b-3g1w8nibnl] {
        margin: 0;
        font-weight: 500;
    }

    .metric b[b-3g1w8nibnl] {
        font-weight: 700;
    }

/* Runder Icon-Hintergrund wie im Screenshot */
.metric__icon[b-3g1w8nibnl] {
    width: 40px;
    height: 40px;
    background: var(--Farbverlauf-Dark-Grey---Dark-Blue);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .metric__icon img[b-3g1w8nibnl] {
        display: block;
        aspect-ratio: 1/1;
    }

/* Right */
.today-card__right[b-3g1w8nibnl] {
    align-self: start; /* Button oben rechts wie im Screenshot */
}

/* Responsiv (optional) */
@media (max-width: 1260px) {
    .today-card[b-3g1w8nibnl] {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .today-card[b-3g1w8nibnl] {
        grid-template-columns: 1fr;
        row-gap: 16px;
        height: auto;
    }

    .today-card__right[b-3g1w8nibnl] {
        align-self: end;
    }

    .today-card__metrics[b-3g1w8nibnl] {
        grid-template-columns: 1fr 1fr;
        gap: 14px 22px;
    }
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/LiveChatComponent.razor.rz.scp.css */
.content[b-mwlpr8y510] {
    margin-top: 7.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #32386315;
    flex: 1;
    align-items: center;
    padding-bottom: 5rem;
}

.startScreen[b-mwlpr8y510] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
    width: 75%;
}

.titleArea[b-mwlpr8y510] {
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.settingsRow[b-mwlpr8y510] {
    display:flex;
    flex-direction: row;
    gap: 20px;
}

.enterIdArea[b-mwlpr8y510] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
}

/* Chat-Panel */
.chat[b-mwlpr8y510] {
    width: 100%;
    height: 740px;
    border-radius: 40px;
    background: var(--Main-Color---White, #fff);
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    display: grid;
    grid-template-rows: 1fr auto; /* head | messages | composer */
    gap: 14px;
    padding: 21px 20px 26px 21px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

    /* über alle 3 Spalten spannen, wenn vergrößert */
    .chat.is-expanded[b-mwlpr8y510] {
        grid-column: 1 / -1; /* <<< macht den Trick in deiner ov-left (3 Spalten) */
        z-index: 5;
    }

/* Messages */
.chat__messages[b-mwlpr8y510] {
    transform: translateZ(0);
}

.scroller[b-mwlpr8y510] {
    transform: translateZ(0);
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    overflow-anchor: auto;
    gap: 12px;
    padding-right: 80px;
}

.chat__empty[b-mwlpr8y510] {
    color: #9a9a9a;
    font-style: italic;
    padding: 10px;
}

.msg[b-mwlpr8y510] {
    display: flex;
    height: fit-content;
    margin-bottom: 12px;
}

    .msg.in[b-mwlpr8y510] {
        justify-content: flex-start;
    }

    .msg.out[b-mwlpr8y510] {
        justify-content: flex-end;
    }

.bubble[b-mwlpr8y510] {
    max-width: 100%;
    border-radius: 25px;
    padding: 12px 14px 8px;
    background: #32386310;
    color: #2d2d2d;
    position: relative;
}

.msg.out .bubble[b-mwlpr8y510] {
    background: #32386330;
}

/* Systemnachrichten (ohne Bubble, zentrierter Trenner) */
.msg.sys[b-mwlpr8y510] {
    justify-content: center;
}

.sysline[b-mwlpr8y510] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--Secondary-Color---Grey, #5F5F5F);
    font-size: .95rem;
}

    .sysline[b-mwlpr8y510]::before,
    .sysline[b-mwlpr8y510]::after {
        content: "";
        display: block;
        width: 80px;
        height: 1px;
        background: #d7d7d7;
        opacity: .9;
    }

.systext[b-mwlpr8y510] {
    white-space: pre-wrap;
}


.bubble__header[b-mwlpr8y510] {
    color: var(--Secondary-Color---Grey);
    font-size: 0.875rem;
    font-weight: 400;
    margin-bottom: 5px;
}

.bubble__text[b-mwlpr8y510] {
    color: var(--Secondary-Color---Grey);
    font-size: 1.25rem;
    font-weight: 400;
    padding: 0px 20px 20px 0px;
}

.bubble__time[b-mwlpr8y510] {
    position: absolute;
    right: 20px;
    bottom: 12px;
    font-size: 0.875rem;
    color: var(--Secondary-Color---Grey);
    font-weight: 400;
}

/* Composer */
.chat__composer[b-mwlpr8y510] {
    height: 120px;
    padding-top: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.composer__inner[b-mwlpr8y510] {
    position: relative;
    border-radius: 25px;
    border: 0.5px solid var(--Sonderfarbe---Dark-Blue);
    background: var(--Main-Color---White);
    min-height: 120px;
    display: grid;
    width: 100%;
    padding-right: 50px;
}

.composer__input[b-mwlpr8y510] {
    resize: vertical;
    border: none;
    outline: none;
    padding: 16px 20px 16px 20px;
    font: inherit;
    color: var(--Secondary-Color---Grey);
    box-sizing: border-box;
    resize: none;
    background: none;
}

.composer__left[b-mwlpr8y510],
.composer__right[b-mwlpr8y510] {
    position: absolute;
    bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.composer__left[b-mwlpr8y510] {
    left: 12px;
}

.composer__right[b-mwlpr8y510] {
    right: 12px;
}

/* Buttons */
.iconbtn[b-mwlpr8y510] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: none;
    z-index: 6;
}

    .iconbtn img[b-mwlpr8y510] {
        width: 20px;
        height: 20px;
        display: block;
    }

.iconbtn--calender[b-mwlpr8y510] {
    background: var(--Main-Color---Signal-Red);
}

.iconbtn--menu[b-mwlpr8y510] {
    background: var(--Sonderfarbe---Dark-Blue);
}

.iconbtn--close[b-mwlpr8y510] {
    position: absolute;
    background: none;
    right: 26px;
    top: 19px;
}

.sendbtn[b-mwlpr8y510] {
    min-width: 60px;
    min-height: 60px;
    border-radius: 999px;
    border: 0;
    background: var(--Main-Color---Signal-Red, #E2001A);
    box-shadow: 2px 4px 8px rgba(30, 30, 30, 0.25);
    align-self: flex-end;
    padding: 0px;
    box-sizing: border-box;
    margin-left: 21px;
}

    .sendbtn img[b-mwlpr8y510] {
        width: 29px;
        height: 29px;
        display: block;
        justify-self: center;
    }


/* ------ PopUp ------ */

.containerPopUp[b-mwlpr8y510] {
    position: relative;
    width: 72%;
    max-width: 87rem;
    border-radius: 2.5rem;
    display: flex;
    flex-direction: column;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    overflow: hidden;
}

/* X-Button oben rechts, feste Abstände */
.close-btnPopUp[b-mwlpr8y510] {
    position: absolute;
    top: 42px;
    right: 64px;
    z-index: 2;
    width: 44px; /* größere Klickfläche */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

    .close-btnPopUp img[b-mwlpr8y510] {
        width: 30px;
        height: 30px;
        pointer-events: none; /* verhindert „Ghost“-Hover auf dem Bild */
    }

.contentPopUp[b-mwlpr8y510] {
    margin: 4.25rem 5.25rem;
}

.headerRowPopUp[b-mwlpr8y510] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}


/* _content/SKM_OnlineClearingstelle/Components/SubComponents/PopupAssignRequestPreview.razor.rz.scp.css */
.container[b-hbae09lo7k] {
    position: relative;
    width: min(760px, 90vw);
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 12px rgba(30,30,30,.25);
    overflow: hidden;
}

.close-btn[b-hbae09lo7k] {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

    .close-btn img[b-hbae09lo7k] {
        width: 24px;
        height: 24px;
        pointer-events: none;
    }

.content[b-hbae09lo7k] {
    padding: 2rem 2.25rem 1.5rem;
}

.headerRow[b-hbae09lo7k] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.type-badge[b-hbae09lo7k] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: .825rem;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475569;
}

.details-grid[b-hbae09lo7k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1.25rem;
}

    .details-grid .notes[b-hbae09lo7k] {
        grid-column: 1 / -1;
        margin-top: .5rem;
    }

.footerActions[b-hbae09lo7k] {
    margin-top: 1.25rem;
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
}

.error[b-hbae09lo7k] {
    color: #b00020;
    margin-top: .75rem;
}

/* Responsive */
@media (max-width: 48rem) {
    .content[b-hbae09lo7k] {
        padding: 1.25rem;
    }

    .details-grid[b-hbae09lo7k] {
        grid-template-columns: 1fr;
    }
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/PopupAuthRequired.razor.rz.scp.css */
.container[b-upquamhobl] {
    position: relative;
    width: 72%;
    max-width: 87rem;
    border-radius: 2.5rem;
    display: flex;
    flex-direction: column;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    overflow: hidden;
}

.close-btn[b-upquamhobl] {
    position: absolute;
    top: 42px;
    right: 64px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

    .close-btn img[b-upquamhobl] {
        width: 30px;
        height: 30px;
        pointer-events: none;
    }

.content[b-upquamhobl] {
    margin: 4.25rem 5.25rem;
}

.headerRow[b-upquamhobl] {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

    .headerRow img[b-upquamhobl] {
        height: 28px;
        width: 28px;
    }

.description[b-upquamhobl] {
    margin-top: 2rem;
}

.terms[b-upquamhobl] {
    margin-top: 2.25rem;
}

.footerActions[b-upquamhobl] {
    margin-top: 2rem;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/PopupLiveChat.razor.rz.scp.css */
.container[b-kyxestmut8] {
    position: relative;
    width: 72%;
    max-width: 87rem;
    border-radius: 2.5rem;
    display: flex;
    flex-direction: column;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    overflow: hidden;
}

/* X-Button oben rechts, feste Abstände */
.close-btn[b-kyxestmut8] {
    position: absolute;
    top: 42px;
    right: 64px;
    z-index: 2;
    width: 44px; /* größere Klickfläche */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

    .close-btn img[b-kyxestmut8] {
        width: 30px;
        height: 30px;
        pointer-events: none; /* verhindert „Ghost“-Hover auf dem Bild */
    }

.content[b-kyxestmut8] {
    margin: 4.25rem 5.25rem;
}

.headerRow[b-kyxestmut8] {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

    .headerRow img[b-kyxestmut8] {
        height: 28px;
        width: 28px;
    }

.termsCheck[b-kyxestmut8]{
    display: flex;
    flex-direction:row;
    gap: 45px;
    margin-top: 15px;
}

.actionBar[b-kyxestmut8] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/PopupLiveChatAlternative.razor.rz.scp.css */
.container[b-01zqistirs] {
    position: relative;
    width: 72%;
    max-width: 87rem;
    border-radius: 2.5rem;
    display: flex;
    flex-direction: column;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    overflow: hidden;
}

/* X-Button oben rechts, feste Abstände */
.close-btn[b-01zqistirs] {
    position: absolute;
    top: 42px;
    right: 64px;
    z-index: 2;
    width: 44px; /* größere Klickfläche */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

    .close-btn img[b-01zqistirs] {
        width: 30px;
        height: 30px;
        pointer-events: none; /* verhindert „Ghost“-Hover auf dem Bild */
    }

.content[b-01zqistirs] {
    margin: 4.25rem 5.25rem;
}

.headerRow[b-01zqistirs] {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

    .headerRow img[b-01zqistirs] {
        height: 28px;
        width: 28px;
    }

.alternatives[b-01zqistirs] {
    margin-top: 3.125rem;
    justify-items: center;
}

.alternativesButtonRow[b-01zqistirs] {
    margin-top: 2.78rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.alternativesButton[b-01zqistirs] {
    padding: 20px;
    width: 334px;
    height: 236px;
    flex-shrink: 0;
    border-radius: 40px;
    border: none;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/PopupOnlineConsultation.razor.rz.scp.css */
.container[b-1aewr1r0ux] {
    position: relative;
    width: 72%;
    max-width: 87rem;
    border-radius: 2.5rem;
    display: flex;
    flex-direction: column;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    overflow: hidden;
}

/* X-Button oben rechts, feste Abstände */
.close-btn[b-1aewr1r0ux] {
    position: absolute;
    top: 42px;
    right: 64px;
    z-index: 2;
    width: 44px; /* größere Klickfläche */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

    .close-btn img[b-1aewr1r0ux] {
        width: 30px;
        height: 30px;
        pointer-events: none; /* verhindert „Ghost“-Hover auf dem Bild */
    }

.content[b-1aewr1r0ux] {
    margin: 4.25rem 5.25rem;
}

.headerRow[b-1aewr1r0ux] {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

    .headerRow img[b-1aewr1r0ux] {
        height: 28px;
        width: 28px;
    }

.termsCheck[b-1aewr1r0ux]{
    display: flex;
    flex-direction:row;
    gap: 45px;
    margin-top: 15px;
}

/* _content/SKM_OnlineClearingstelle/Components/SubComponents/PopupRegister.razor.rz.scp.css */
.container[b-jsu2hfzat4] {
    position: relative;
    width: 72%;
    max-width: 87rem;
    border-radius: 2.5rem;
    display: flex;
    flex-direction: column;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    overflow: hidden;
}

/* X-Button oben rechts, feste Abstände */
.close-btn[b-jsu2hfzat4] {
    position: absolute;
    top: 42px;
    right: 64px;
    z-index: 2;
    width: 44px; /* größere Klickfläche */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

    .close-btn img[b-jsu2hfzat4] {
        width: 30px;
        height: 30px;
        pointer-events: none; /* verhindert „Ghost“-Hover auf dem Bild */
    }

.content[b-jsu2hfzat4] {
    margin: 4.25rem 5.25rem;
}

.headerRow[b-jsu2hfzat4] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

    .headerRow img[b-jsu2hfzat4] {
        height: 28px;
        width: 28px;
    }

.termsCheck[b-jsu2hfzat4]{
    display: flex;
    flex-direction:row;
    gap: 45px;
    margin-top: 15px;
}

.registerForm[b-jsu2hfzat4] {
    display: grid;
    grid-template-columns: 365px 365px 173px 173px;
    grid-template-rows: 90px 90px;
    gap: 30px 45px;
    grid-auto-flow: row;
    grid-template-areas:
        "userName email plz birth"
        "pw pwrepeat NextStep NextStep";
}

.userName[b-jsu2hfzat4], .email[b-jsu2hfzat4], .plz[b-jsu2hfzat4], .birth[b-jsu2hfzat4], .pw[b-jsu2hfzat4], .pwrepeat[b-jsu2hfzat4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.userName[b-jsu2hfzat4] {
    grid-area: userName;

}

.email[b-jsu2hfzat4] {
    grid-area: email;
}

.plz[b-jsu2hfzat4] {
    grid-area: plz;
}

.birth[b-jsu2hfzat4] {
    grid-area: birth;
}

.pw[b-jsu2hfzat4] {
    grid-area: pw;
}

.pwrepeat[b-jsu2hfzat4] {
    grid-area: pwrepeat;
}

.NextStep[b-jsu2hfzat4] {
    grid-area: NextStep;
    align-self:flex-end;
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/PopupVideoConsultation.razor.rz.scp.css */
.container[b-d3w85f5c58] {
    position: relative;
    width: 72%;
    max-width: 87rem;
    border-radius: 2.5rem;
    display: flex;
    flex-direction: column;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    overflow: hidden;
}

/* X-Button oben rechts, feste Abstände */
.close-btn[b-d3w85f5c58] {
    position: absolute;
    top: 42px;
    right: 64px;
    z-index: 2;
    width: 44px; /* größere Klickfläche */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

    .close-btn img[b-d3w85f5c58] {
        width: 30px;
        height: 30px;
        pointer-events: none; /* verhindert „Ghost“-Hover auf dem Bild */
    }

.content[b-d3w85f5c58] {
    margin: 4.25rem 5.25rem;
}

.headerRow[b-d3w85f5c58] {
    display: flex;
    flex-direction: row;
    gap: 1.125rem;
}

    .headerRow img[b-d3w85f5c58] {
        height: 28px;
        width: 42px;
    }

.DateContainer[b-d3w85f5c58] {
    display: flex;
    flex-direction: row;
    gap: 45px;
    margin-top: 15px;
    justify-content: space-between;
    margin-top: 38px;
}

.DateContainerLeftSide[b-d3w85f5c58] {
    display: flex;
    flex-direction:column;
    justify-content: space-between;
}

.DateContainerRightSide[b-d3w85f5c58] {
    position: relative;
    width: 376px;
}

.selctedDate[b-d3w85f5c58] {
    position: absolute;
    top: -40px;
    right: 0px;
    z-index: 2;
}

.kv-list[b-d3w85f5c58] {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.kv-row[b-d3w85f5c58] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kv-icon[b-d3w85f5c58] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: block;
}

.kv-text[b-d3w85f5c58] {
    margin: 0;
    color: var(--Secondary-Color---Grey);
    font-weight: 500;
    line-height: 1.2;
}

.timeslotList[b-d3w85f5c58] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 60px;
    justify-content: flex-end;
}

.timeslotButton[b-d3w85f5c58] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 158px;
    height: 27px;
    border-radius: 10px;
    border: 1px solid var(--Main-Color---Signal-Red, #E3000F);
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    cursor: pointer;
}

    .timeslotButton span[b-d3w85f5c58] {
        color: var(--Main-Color---Signal-Red, #E3000F);
        font-family: "Euclid Circular A";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
    }

    .timeslotButton.is-selected[b-d3w85f5c58] {
        background: var(--Main-Color---Signal-Red, #E3000F);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25) inset, 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    }

        .timeslotButton.is-selected span[b-d3w85f5c58] {
            color: var(--Main-Color---White, #FFF);
        }

    .timeslotButton.is-disabled[b-d3w85f5c58],
    .timeslotButton:disabled[b-d3w85f5c58] {
        opacity: .45;
        cursor: not-allowed;
        filter: grayscale(10%);
    }

/* --- A) Desktop: feiner Abstand & Reihenfolge beibehalten --- */
@media (min-width: 992px) {
    /* 3 Elemente bleiben in einer Zeile, aber wir nehmen die Kontrolle über die Abstände
     weg von space-between und regeln sie manuell. */
    .DateContainer[b-d3w85f5c58] {
        justify-content: flex-start; /* statt space-between */
        gap: 40px; /* Basis-Abstand: Text ↔ Kalender = 40px */
    }

    /* Kalender ↔ Zeiten noch enger machen als der Basis-Gap.
     Trick: negative Linksmarge am rechten Block reduziert *nur* die zweite Lücke. */
    .DateContainerRightSide[b-d3w85f5c58] {
        margin-left: -16px; /* 40px - 16px = 24px zwischen Kalender ↔ Zeiten */
        /* Breite 376px bleibt wie im Original */
    }

    /* Timeslots sollen nicht am rechten Rand kleben */
    .timeslotList[b-d3w85f5c58] {
        justify-content: flex-start; /* statt flex-end */
        gap: 12px 24px; /* horizontal etwas enger als vorher (60px) */
    }
}

/* --- B) Tablet & kleiner: sauber umbrechen --- */
@media (max-width: 991.98px) {
    .DateContainer[b-d3w85f5c58] {
        flex-wrap: wrap; /* erlaubt Umbruch untereinander */
        justify-content: flex-start; /* verhindert harte Randausrichtung */
        gap: 24px; /* kompaktere Abstände im Stack */
    }

    /* rechte Spalte und Kalender dürfen die ganze Breite nutzen */
    .DateContainerRightSide[b-d3w85f5c58] {
        width: 100%;
        margin-left: 0; /* neg. Margin nur auf Desktop verwenden */
    }

    .timeslotList[b-d3w85f5c58] {
        justify-content: flex-start;
        gap: 12px 16px; /* enger auf kleineren Screens */
    }
}

/* ===== Desktop-Layout feinjustieren ===== */
@media (min-width: 992px) {
    /* Weg von space-between → echte, kontrollierte Abstände */
    .DateContainer[b-d3w85f5c58] {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 40px; /* Text ↔ Kalender = 40px */
    }

    /* Rechts-Spalte: selektor deckt beide Klassennamen ab */
    .DateContainerRightSide[b-d3w85f5c58],
    .appointmentContainerRightSide[b-d3w85f5c58] {
        width: 376px; /* wie im Original */
        margin-left: -12px; /* macht Kalender ↔ Zeiten kleiner: 40px - 12px = 28px */
    }

    /* Timeslots: immer max. 2 Spalten nebeneinander */
    .timeslotList[b-d3w85f5c58] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* nie 3 */
        gap: 12px 24px; /* etwas enger als 60px aus dem Original */
        justify-content: initial; /* nicht an den Rand pressen */
    }

    /* Timeslot-Buttons füllen ihre Grid-Spalte gut aus */
    .timeslotButton[b-d3w85f5c58] {
        width: 100%; /* statt fixer 158px auf Grid-Spaltenbreite */
        max-width: 188px; /* opt. Obergrenze, damit’s nicht zu lang wird */
        height: 36px; /* leichte Touch-Verbesserung */
    }

    /* Datum über der Liste bleibt absolut in der rechten Spalte */
    .selctedDate[b-d3w85f5c58] {
        position: absolute;
        top: -40px;
        right: 0;
    }
}

/* ===== Tablet & darunter: sauber umbrechen ===== */
@media (max-width: 991.98px) {
    .DateContainer[b-d3w85f5c58] {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 24px; /* kompaktere Abstände beim Stack */
    }

    .DateContainerRightSide[b-d3w85f5c58],
    .appointmentContainerRightSide[b-d3w85f5c58] {
        width: 100%;
        margin-left: 0; /* Desktop-Feinjustage zurücknehmen */
    }

    /* Tablet: 2 Spalten wenn Platz, sonst 1 */
    .timeslotList[b-d3w85f5c58] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }
}

/* ===== Sehr schmal (Mobil): 1 Spalte Timeslots ===== */
@media (max-width: 520px) {
    .timeslotList[b-d3w85f5c58] {
        grid-template-columns: 1fr; /* nie 2 spalten auf sehr klein */
    }
}

/*------------------neu---------------------*/

/* ===== Basis: Kalender etwas breiter halten, aber flexibel bleiben ===== */
/* (CalenderPopUp.razor.css hat weiterhin width:520px – wir überschreiben hier für Layoutfeinheit) */
@media (min-width: 992px) {
    .cal[b-d3w85f5c58] {
        width: 560px;
        max-width: 100%;
    }
    /* breit genug, aber nicht starr */
}

/* ===== Desktop-Layout: definierte Gaps statt space-between ===== */
@media (min-width: 992px) {
    .DateContainer[b-d3w85f5c58] {
        justify-content: flex-start; /* statt space-between */
        gap: 40px; /* Text ↔ Kalender */
    }

    /* Kalender ↔ Zeiten etwas enger als links ↔ Kalender */
    .DateContainerRightSide[b-d3w85f5c58],
    .appointmentContainerRightSide[b-d3w85f5c58] {
        margin-left: -12px; /* 40 - 12 = 28px Abstand zwischen Kalender ↔ Zeiten */
        width: 376px; /* wie im Original */
    }

    /* Zeiten: strikt 2 Spalten */
    .timeslotList[b-d3w85f5c58] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 24px; /* kleinere horizontale Lücke als früher */
        justify-content: initial;
    }

    /* Buttons füllen Spalten, bleiben kompakt */
    .timeslotButton[b-d3w85f5c58] {
        width: 100%;
        max-width: 188px;
        height: 36px;
    }
}

/* ===== Breite 1: unter 1680px – Innenränder & Gaps leicht reduzieren ===== */
@media (max-width: 1680px) and (min-width: 1576px) {
    .content[b-d3w85f5c58] {
        margin: 3.5rem 3rem;
    }
    /* mehr Nutzbreite innen */
    .DateContainer[b-d3w85f5c58] {
        gap: 36px;
    }
    /* Text ↔ Kalender etwas enger */
    .DateContainerRightSide[b-d3w85f5c58],
    .appointmentContainerRightSide[b-d3w85f5c58] {
        margin-left: -10px;
    }
    /* Kalender ↔ Zeiten ≈ 26px */
    .cal[b-d3w85f5c58] {
        width: 548px;
    }
    /* minimal schmaler, bleibt großzügig */
}

/* ===== Breite 2: unter ~1575px – alles so einschnüren, dass nichts mehr abschneidet ===== */
@media (max-width: 1575px) and (min-width: 1280px) {
    .content[b-d3w85f5c58] {
        margin: 3rem 2.5rem;
    }
    /* nochmal etwas mehr Nutzbreite */
    .DateContainer[b-d3w85f5c58] {
        gap: 32px;
    }
    /* Text ↔ Kalender ≈ 32px */
    .DateContainerRightSide[b-d3w85f5c58],
    .appointmentContainerRightSide[b-d3w85f5c58] {
        margin-left: -8px;
    }
    /* Kalender ↔ Zeiten ≈ 24px */
    .cal[b-d3w85f5c58] {
        width: 520px;
    }
    /* zurück auf 520px – Titel/Heute passen weiterhin */
    /* Button im rechten Block darf nie rauslaufen, trotz Inline-Style */
    .regular-button[b-d3w85f5c58] {
        width: 100% !important;
        max-width: 352px;
        margin-top: 3.9rem !important;
    }
}

/* ===== Tablet & kleiner: Wrap + 2 Spalten Zeiten, mobil 1 Spalte ===== */
@media (max-width: 1279.98px) {
    .content[b-d3w85f5c58] {
        margin: 2.5rem 2rem;
    }
    /* kompaktere Innenränder */
    .DateContainer[b-d3w85f5c58] {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 24px;
    }

    .DateContainerRightSide[b-d3w85f5c58],
    .appointmentContainerRightSide[b-d3w85f5c58] {
        width: 100%;
        margin-left: 0; /* Desktop-Feineinstellung zurücknehmen */
    }

    .timeslotList[b-d3w85f5c58] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }

    .regular-button[b-d3w85f5c58] {
        width: 100% !important;
        max-width: 100%;
    }
}

/* Sehr schmal: 1 Spalte Timeslots */
@media (max-width: 520px) {
    .timeslotList[b-d3w85f5c58] {
        grid-template-columns: 1fr;
    }
}


/* _content/SKM_OnlineClearingstelle/Components/SubComponents/PopupVideoConsultationContinue.razor.rz.scp.css */
.container[b-24bxt7iiap] {
    position: relative;
    width: 72%;
    max-width: 87rem;
    border-radius: 2.5rem;
    display: flex;
    flex-direction: column;
    background: var(--Main-Color---White, #FFF);
    box-shadow: 2px 4px 8px 0 rgba(30, 30, 30, 0.25);
    overflow: hidden;
}

/* X-Button oben rechts, feste Abstände */
.close-btn[b-24bxt7iiap] {
    position: absolute;
    top: 42px;
    right: 64px;
    z-index: 2;
    width: 44px; /* größere Klickfläche */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

    .close-btn img[b-24bxt7iiap] {
        width: 30px;
        height: 30px;
        pointer-events: none; /* verhindert „Ghost“-Hover auf dem Bild */
    }

.content[b-24bxt7iiap] {
    margin: 4.25rem 5.25rem;
}

.headerRow[b-24bxt7iiap] {
    display: flex;
    flex-direction: row;
    gap: 1.125rem;
}

    .headerRow img[b-24bxt7iiap] {
        height: 28px;
        width: 42px;
    }

.termsCheck[b-24bxt7iiap]{
    display: flex;
    flex-direction:row;
    gap: 45px;
    margin-top: 15px;
}

h5[b-24bxt7iiap] {
    color: var(--Secondary-Color---Grey);
}

.details[b-24bxt7iiap], .duration[b-24bxt7iiap], .type[b-24bxt7iiap] , .timeSlot[b-24bxt7iiap], .timeZone[b-24bxt7iiap] {
    display: flex;
    flex-direction: row;
}

.details[b-24bxt7iiap] {
    justify-content: space-between;
    margin-top: 1rem
}

.duration[b-24bxt7iiap], .type[b-24bxt7iiap], .timeSlot[b-24bxt7iiap], .timeZone[b-24bxt7iiap] {
    gap: 15px;
    align-items: center;
}

    .duration img[b-24bxt7iiap] {
        height: 15px;
        width: 15px;
    }

    .type img[b-24bxt7iiap] {
        height: 13px;
        width: 28px;
    }

    .timeSlot img[b-24bxt7iiap] {
        width: 15.385px;
        height: 15px;
    }

    .timeZone img[b-24bxt7iiap] {
        height: 15px;
        width: 15px;
    }

.inputs[b-24bxt7iiap] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 3.8125rem
}

.inputRight[b-24bxt7iiap] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* _content/SKM_OnlineClearingstelle/Components/SubComponents/Profile.razor.rz.scp.css */


.container[b-r7c1pgl16b] {
    position: relative;
    justify-self: center;
    width: 105rem;
    height: 56.125rem;
    border-radius: 2.5rem;
    display: grid;
    grid-template-columns: 36.25em 105em;
    grid-template-rows: 56.12em;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "Display Details";
    background: var(--Main-Color---White, #FFF);
    box-shadow: 0 0 16px 0 rgba(30, 30, 30, 0.50);
    overflow: hidden;
}

.Details[b-r7c1pgl16b] {
    grid-area: Details;
    padding: 3.81rem 5.29rem 3.87rem 5.31rem;
}

    .Details h1[b-r7c1pgl16b] {
        color: var(--Main-Color---Signal-Red, #E3000F);
        font-size: 3.25rem;
        font-weight: 500;
        line-height: 3.875rem; /* 119.231% */
        letter-spacing: 0.1625rem;
    }

    .Details .IntroductionText[b-r7c1pgl16b] {
        margin-top: 1.5rem;
        height: 8.4375rem;
        color: #000;
        font-size: 1.5rem;
        line-height: 2.125rem; /* 141.667% */
        max-width: 57.25rem;
        height: 8.4375rem;
    }

.subline[b-r7c1pgl16b] {
    margin-top: 3.13rem;
    margin-bottom: 1.06rem;
    font-size: 1.75rem;
    line-height: 2.375rem; /* 135.714% */
    letter-spacing: 0.0875rem;
    font-weight: 700;
    background: var(--farbverlauf-dunkel-2, linear-gradient(286deg, rgba(50, 56, 99, 0.90) 3.95%, #33354A 13.92%, #333 64.67%, #333 95.51%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.Display[b-r7c1pgl16b] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 34.93em 21.19em;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "picture"
        "metdata";
    grid-area: Display;
}

.pictureBackground[b-r7c1pgl16b] {
    grid-area: picture;
    position: relative;
    border-radius: 2.5rem 0 0 0;
    background: var(--farbverlauf-dunkel-2, linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(286deg, rgba(50, 56, 99, 0.90) 3.95%, #33354A 13.92%, #333 64.67%, #333 95.51%));
}


    .pictureBackground .ProfilePicture[b-r7c1pgl16b] {
        position: absolute;
        top: 2.06rem;
        left: -5.19rem;
        width: 39.75rem;
        height: 39.75rem;
        filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.20));
        border-radius: 20rem;
    }

    .pictureBackground .GenericProfilePicture[b-r7c1pgl16b] {
        position: absolute;
        top: 5rem;
        left: 1.75rem;
        width: 32.75rem;
        height: 32.75rem;
        filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.20));
        border-radius: 20rem;
    }

.metdata[b-r7c1pgl16b] {
    grid-area: metdata;
    display: flex;
    flex-direction: column;
    align-items: end;
    padding-right: 3.77rem;
    padding-top: 3.69rem;
    padding-bottom: 3.44rem;
    border-radius: 0 0 0 2.5rem;
    background: var(--Main-Color---Light-Grey, #EDEDED);
}

    .metdata h1[b-r7c1pgl16b] {
        text-align: right;
        line-height: normal;
        letter-spacing: 0.065rem;
        background: var(--Farbverlauf-Dark-Grey---Dark-Blue, linear-gradient(286deg, rgba(50, 56, 99, 0.90) 3.95%, #323863 19.47%, #33354A 48.29%, #333 95.51%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .metdata h2[b-r7c1pgl16b] {
        margin-top: 3.06rem;
        text-align: right;
        line-height: normal;
        letter-spacing: 0.525rem;
        background: var(--Farbverlauf-Dark-Grey---Dark-Blue, linear-gradient(286deg, rgba(50, 56, 99, 0.90) 3.95%, #323863 19.47%, #33354A 48.29%, #333 95.51%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.redRectangle[b-r7c1pgl16b] {
    width: 0.75rem;
    height: 17.4375rem;
    background: var(--Main-Color---Signal-Red, #E3000F);
    position: absolute;
    top: 21.88rem;
    left: 35.88rem;
}

.closeIcon[b-r7c1pgl16b] {
    position: absolute;
    right: 4rem;
    top: 3.81rem;
    width: 2.1875rem;
    height: 2.1875rem;
    aspect-ratio: 1/1;
    cursor: pointer;
}

.companyBanner[b-r7c1pgl16b] {
    position: absolute;
    right: 5.29rem;
    bottom: 2.7rem;
    max-width: 30rem;
    max-height: 12.1rem;
    margin-left: auto; /*so the image starts on the right side?*/
    cursor: pointer;
}


.Qualification-Warpper[b-r7c1pgl16b] {
    display: flex;
    flex-direction: row;
    gap: 1.88rem;
}

    .Qualification-Warpper img[b-r7c1pgl16b] {
        width: 1.875rem;
        height: 1.875rem;
        aspect-ratio: 1/1;
    }

    .Qualification-Warpper p[b-r7c1pgl16b] {
        color: #333;
        font-size: 1.5rem;
        line-height: 2.125rem; /* 141.667% */
    }

.Qual2[b-r7c1pgl16b] {
    margin-top: 1.19rem;
}

.Contact[b-r7c1pgl16b] {
    display: flex;
    flex-direction: row;
    gap: 1.88rem;
}

    .Contact p[b-r7c1pgl16b] {
        color: #000;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2.125rem; /* 141.667% */
    }

.Institution p[b-r7c1pgl16b] {
    font-weight: 500;
}

.Adress[b-r7c1pgl16b] {
    margin-bottom: 2.2rem;
}

.Mail a[b-r7c1pgl16b] {
    text-decoration: underline;
    text-decoration-color: #000;
}

.Website a[b-r7c1pgl16b] {
    text-decoration: underline;
    text-decoration-color: #000;
}

/* =========================
   Profile responsive overrides
   (Desktop-Stile oben bleiben unverändert)
   ========================= */

/* <= 1200px: gleiches 2-Spalten-Layout, aber fluid und ohne Abschneiden */
@media (max-width: 75rem) { /* 1200px */
    .container[b-r7c1pgl16b] {
        width: min(95vw, 80rem);
        height: auto; /* keine starre Höhe */
        max-height: calc(100dvh - 4rem); /* Popup passt ins Viewport */
        grid-template-columns: 32rem 1fr; /* statt 36.25em / 105em */
        grid-template-rows: auto;
        overflow: hidden; /* Gesamtrahmen sauber */
    }

    .Details[b-r7c1pgl16b] {
        padding: 2.5rem 3rem; /* etwas kompakter */
    }

        .Details .IntroductionText[b-r7c1pgl16b] {
            height: auto; /* nicht mehr fix abgeschnitten */
            max-width: 100%;
        }

    /* Avatar etwas kleiner & weniger Überstand */
    .pictureBackground .ProfilePicture[b-r7c1pgl16b] {
        left: -3.5rem;
        width: clamp(24rem, 28vw, 30rem);
        height: clamp(24rem, 28vw, 30rem);
        object-fit: cover;
    }

    /* roter Balken an die Kante der linken Spalte pinnen */
    .redRectangle[b-r7c1pgl16b] {
        left: auto;
        right: -0.375rem;
        top: 50%;
        transform: translateY(-50%);
        height: clamp(10rem, 22vh, 14rem);
    }

    .companyBanner[b-r7c1pgl16b] {
        max-width: 22rem;
        max-height: 10rem;
    }
}

/* <= 900px: Stack auf 1 Spalte, Bild/Meta oben, Details darunter.
   Scrollbar nur im rechten (Details-)Bereich, damit nichts abgeschnitten wird. */
@media (max-width: 56.25rem) { /* 900px */
    .container[b-r7c1pgl16b] {
        width: min(95vw, 46rem);
        max-height: calc(100dvh - 2rem);
        grid-template-columns: 1fr;
        grid-template-areas:
            "Display"
            "Details";
        overflow: hidden; /* Rahmen fix, Details scrollt */
    }

    .Display[b-r7c1pgl16b] {
        grid-template-rows: auto auto; /* picture | metdata */
    }

    .pictureBackground[b-r7c1pgl16b] {
        min-height: clamp(12rem, 28vh, 18rem);
        border-radius: 2.5rem 2.5rem 0 0;
    }

        .pictureBackground .ProfilePicture[b-r7c1pgl16b] {
            left: 50%;
            top: clamp(-1rem, -3vw, -0.5rem);
            transform: translateX(-50%);
            width: clamp(10rem, 40vw, 14rem);
            height: clamp(10rem, 40vw, 14rem);
        }

    .metdata[b-r7c1pgl16b] {
        align-items: center;
        text-align: center;
        padding: 1rem 1.25rem 1.25rem;
        border-radius: 0 0 0 0; /* sauberer Übergang im Stack */
    }

        .metdata h1[b-r7c1pgl16b] {
            font-size: clamp(1.5rem, 4.5vw, 2.25rem);
            letter-spacing: .06rem;
        }

        .metdata h2[b-r7c1pgl16b] {
            margin-top: .75rem;
            font-size: clamp(1rem, 3.2vw, 1.125rem);
            letter-spacing: .25rem;
        }

    .redRectangle[b-r7c1pgl16b] {
        display: none; /* optional, spart Platz */
    }

    .Details[b-r7c1pgl16b] {
        padding: 1.25rem 1.25rem 1.5rem;
        overflow: auto; /* Inhalt kann scrollen */
        -webkit-overflow-scrolling: touch;
    }

        .Details h1[b-r7c1pgl16b] {
            font-size: clamp(1.5rem, 5vw, 2rem);
            line-height: 1.25;
            letter-spacing: .06rem;
        }

        .Details .IntroductionText[b-r7c1pgl16b],
        .Qualification-Warpper p[b-r7c1pgl16b],
        .Contact p[b-r7c1pgl16b] {
            font-size: clamp(1rem, 3.6vw, 1.125rem);
            line-height: 1.6;
        }

    .Qualification-Warpper[b-r7c1pgl16b],
    .Contact[b-r7c1pgl16b] {
        gap: 1rem;
    }

        .Qualification-Warpper img[b-r7c1pgl16b],
        .Contact img[b-r7c1pgl16b] {
            width: 1.25rem;
            height: 1.25rem;
        }

    .closeIcon[b-r7c1pgl16b] {
        top: .75rem;
        right: .75rem;
        width: 1.75rem;
        height: 1.75rem;
    }

    /* Banner unten „inline“, damit es nie abschneidet */
    .companyBanner[b-r7c1pgl16b] {
        position: static;
        display: block;
        margin: 1rem auto 0;
        max-width: min(80%, 18rem);
        height: auto;
    }
}

/* === 1) Platz für das Logo auf Desktop reservieren (kein Überlappen) === */
/* Baseline: mehr Bottom-Padding in Details, damit das absolut positionierte
   Banner immer Platz hat. Passt auf großen Screens; auf kleineren stellen
   wir es ohnehin auf "static" um, siehe weiter unten. */
.Details[b-r7c1pgl16b] {
    padding-bottom: clamp(8rem, 10vw, 12rem);
    position: relative; /* sicherheitshalber */
}

/* Logo-Größe leicht deckeln, damit die Reserve passt */
.companyBanner[b-r7c1pgl16b] {
    max-width: clamp(18rem, 28vw, 30rem);
    max-height: 12.1rem;
}

/* === 2) Robustes Umbrechen, damit nichts über den Rand läuft === */
.Details h1[b-r7c1pgl16b],
.Details p[b-r7c1pgl16b],
.Details a[b-r7c1pgl16b] {
    overflow-wrap: anywhere; /* bevorzugt */
    word-break: break-word; /* fallback */
}

/* Lange URLs/E-Mails brechen schön */
.Details a[b-r7c1pgl16b] {
    text-decoration: underline;
    text-underline-offset: .12em;
}

/* === 3) Frühere Feinjustierung, bevor 1200px erreicht sind === */
/* Ab ~1150px etwas kompakter, aber noch 2-Spalten */
@media (max-width: 72rem) { /* ~1152px */
    .container[b-r7c1pgl16b] {
        grid-template-columns: 30rem 1fr; /* linke Spalte minimal schmaler */
        width: min(96vw, 80rem);
        max-height: calc(100dvh - 3rem);
    }

    .Details[b-r7c1pgl16b] {
        padding: 2rem 2.5rem clamp(8rem, 12vw, 11rem);
    }

        .Details h1[b-r7c1pgl16b] {
            font-size: clamp(1.75rem, 3.2vw, 2.5rem);
            line-height: 1.25;
            letter-spacing: .08rem;
        }

        .Details .IntroductionText[b-r7c1pgl16b] {
            font-size: clamp(1rem, 1.6vw, 1.25rem);
            line-height: 1.6;
            height: auto; /* nie abschneiden */
            max-width: 100%;
        }

    /* Logo schon hier in den Fluss holen, falls es eng wird */
    .companyBanner[b-r7c1pgl16b] {
        position: static;
        display: block;
        margin: 1rem 0 0 auto; /* rechts ausrichten */
        max-width: min(60%, 20rem);
        height: auto;
    }
}

/* === 4) Mobile/Stack (dein 1-Spalten-Modus) bleibt wie gehabt ab 900px === */
@media (max-width: 56.25rem) { /* 900px */
    /* (falls du schon einen Block dafür hast, diese Einträge ergänzen/ersetzen) */
    .container[b-r7c1pgl16b] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "Display"
            "Details";
        width: min(96vw, 46rem);
        max-height: calc(100dvh - 2rem);
        overflow: hidden; /* Rahmen fix, Inhalt scrolled in Details */
    }

    .Details[b-r7c1pgl16b] {
        padding: 1rem 1rem 1.25rem;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .companyBanner[b-r7c1pgl16b] {
        position: static;
        display: block;
        margin: 1rem auto 0;
        max-width: min(80%, 18rem);
    }
}

/* === A) Container etwas kleiner & Grid korrekt === */
.container[b-r7c1pgl16b] {
    /* auf großen Screens nicht ganz so breit wirken */
    width: clamp(80rem, 86vw, 105rem);
    /* Höhe wie bei dir beibehalten */
    height: 56.125rem;
    /* linke Spalte fix, rechte flexibel statt starrer 105em (Ursache fürs Abschneiden) */
    grid-template-columns: 36.25rem 1fr;
    grid-template-rows: 1fr;
}

/* Details immer Bezugspunkt für absolute Elemente (Logo) */
.Details[b-r7c1pgl16b] {
    position: relative;
    /* unten Platz fürs absolute Logo reservieren -> kein Überlappen */
    padding-bottom: 11rem;
}

    /* Introtext nie hart beschneiden */
    .Details .IntroductionText[b-r7c1pgl16b] {
        max-width: 100%;
        height: auto;
        overflow-wrap: anywhere; /* lange Wörter/URLs brechen */
        word-break: break-word; /* Fallback */
    }

    /* Überschriften/Links ebenfalls bruchsicher */
    .Details h1[b-r7c1pgl16b],
    .Details p[b-r7c1pgl16b],
    .Details a[b-r7c1pgl16b] {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

/* === B) Logo: immer sichtbar, nicht verschwinden === */
.companyBanner[b-r7c1pgl16b] {
    position: absolute; /* auf Desktop weiterhin unten rechts */
    right: 5.29rem;
    bottom: 2.7rem;
    display: block;
    z-index: 1;
    max-width: clamp(18rem, 24vw, 28rem); /* moderat skalierend */
    max-height: 12.1rem;
    height: auto;
    object-fit: contain;
    pointer-events: auto;
}

/* === C) frühe Feinjustierung, bevor es eng wird (ab ~1650px) === */
@media (max-width: 103rem) { /* ~1648px */
    .container[b-r7c1pgl16b] {
        width: min(96vw, 100rem);
    }

    .Details h1[b-r7c1pgl16b] {
        font-size: clamp(2rem, 2.2vw, 3.25rem);
        letter-spacing: .08rem;
        line-height: 1.25;
    }

    .Details[b-r7c1pgl16b] {
        padding: 3rem 3rem 10rem 3rem; /* etwas kompakter + Logo-Reserve */
    }

    .companyBanner[b-r7c1pgl16b] {
        max-width: clamp(16rem, 22vw, 24rem);
    }
}

/* === D) 2-Spalten bleibt bis 1200px; darunter stackst du wie gehabt === */
@media (max-width: 75rem) { /* 1200px */
    .container[b-r7c1pgl16b] {
        width: min(96vw, 80rem);
        grid-template-columns: 30rem 1fr; /* rechte Spalte gewinnt etwas Platz */
    }

    .Details[b-r7c1pgl16b] {
        padding: 2rem 2rem 9rem;
    }

    .companyBanner[b-r7c1pgl16b] {
        max-width: clamp(14rem, 28%, 20rem);
    }
}

/* === E) Dein 1-Spalten-Layout ab ~900px (optional, falls schon vorhanden, so lassen) === */
@media (max-width: 56.25rem) { /* 900px */
    .container[b-r7c1pgl16b] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "Display"
            "Details";
        width: min(96vw, 46rem);
        height: auto;
        max-height: calc(100dvh - 2rem);
    }

    .Details[b-r7c1pgl16b] {
        padding: 1rem 1rem 1.25rem;
    }

    .companyBanner[b-r7c1pgl16b] {
        position: static;
        margin: 1rem auto 0;
        max-width: min(80%, 18rem);
    }
}

/* --- 1) Container & Grid sauber, leicht kompakter --- */
.container[b-r7c1pgl16b] {
    /* insgesamt etwas kleiner & flexibler */
    width: clamp(72rem, 84vw, 96rem);
    height: 56.125rem; /* Desktop-Layout beibehalten */
    grid-template-columns: 36.25rem 1fr; /* fix | flexibel (kein Abschneiden) */
    grid-template-rows: 1fr;
}

/* --- 2) Details: Platz für Logo reservieren + Scroll statt Abschneiden --- */
.Details[b-r7c1pgl16b] {
    position: relative; /* Bezug für Logo */
    padding: 3rem 3rem clamp(10rem, 12vw, 12rem) 3rem; /* unten Reserve fürs Logo */
    overflow: auto; /* falls Text sehr lang wird */
    scrollbar-gutter: stable; /* weniger Layout-Jumps */
}

    /* Lange Wörter/URLs nie abschneiden */
    .Details h1[b-r7c1pgl16b], .Details p[b-r7c1pgl16b], .Details a[b-r7c1pgl16b], .Details .IntroductionText[b-r7c1pgl16b] {
        max-width: 100%;
        height: auto;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

/* --- 3) Logo immer sichtbar, innerhalb der Kachel gehalten --- */
.companyBanner[b-r7c1pgl16b] {
    position: absolute;
    right: clamp(1rem, 2vw, 2rem);
    bottom: clamp(1rem, 2vw, 2rem);
    display: block;
    z-index: 1;
    /* niemals über den Innenraum hinausragen */
    max-width: min(26rem, 34%);
    width: auto;
    max-height: 12rem;
    height: auto;
    object-fit: contain;
    pointer-events: auto;
}

/* Sicherheitsnetz: selbst wenn Innenabstände schrumpfen, bleib drin */
@supports (max-width: clamp(1px, 1vw, 1000px)) {
    .companyBanner[b-r7c1pgl16b] {
        max-width: clamp(12rem, 28%, 24rem);
    }
}

/* --- 4) Typo & Abstände eine Nummer kleiner (ohne Look zu verlieren) --- */
.Details h1[b-r7c1pgl16b] {
    font-size: clamp(1.75rem, 2.1vw, 2.75rem);
    line-height: 1.25;
    letter-spacing: clamp(.05rem, .15vw, .12rem);
}

.Details .IntroductionText[b-r7c1pgl16b] {
    margin-top: 1rem;
    font-size: clamp(0.95rem, 1.2vw, 1.125rem);
    line-height: 1.65;
}

.subline[b-r7c1pgl16b] {
    margin-top: clamp(1rem, 2.2vw, 1.75rem);
    margin-bottom: .75rem;
    font-size: clamp(1rem, 1.6vw, 1.375rem);
    line-height: 1.35;
    letter-spacing: clamp(.04rem, .12vw, .08rem);
}

.Qualification-Warpper p[b-r7c1pgl16b],
.Contact p[b-r7c1pgl16b] {
    font-size: clamp(0.95rem, 1.2vw, 1.125rem);
    line-height: 1.6;
}

.Qualification-Warpper[b-r7c1pgl16b],
.Contact[b-r7c1pgl16b] {
    gap: clamp(.75rem, 1.5vw, 1.25rem);
}

/* --- 5) “frühe” Entzerrung bevor’s eng wird (Text overflow @ ~1650px) --- */
@media (max-width: 103rem) { /* ~1648px */
    .container[b-r7c1pgl16b] {
        width: min(96vw, 92rem);
    }

    .Details[b-r7c1pgl16b] {
        padding: 2.5rem 2.5rem clamp(9rem, 12vw, 11rem);
    }

    .companyBanner[b-r7c1pgl16b] {
        max-width: min(24rem, 32%);
    }
}

/* --- 6) 2-Spalten kompaktes Desktop-Layout bis 1200px beibehalten --- */
@media (max-width: 75rem) { /* 1200px */
    .container[b-r7c1pgl16b] {
        width: min(96vw, 80rem);
        grid-template-columns: 30rem 1fr;
    }

    .Details[b-r7c1pgl16b] {
        padding: 2rem 2rem clamp(8.5rem, 12vw, 10rem);
    }

    .companyBanner[b-r7c1pgl16b] {
        max-width: min(20rem, 30%);
    }
}

/* --- 7) Dein 1-Spalten-Layout <900px, Logo dann im Flow mittig --- */
@media (max-width: 56.25rem) { /* 900px */
    .container[b-r7c1pgl16b] {
        grid-template-columns: 1fr;
        grid-template-areas: "Display" "Details";
        width: min(96vw, 46rem);
        height: auto;
        max-height: calc(100dvh - 2rem);
    }

    .Details[b-r7c1pgl16b] {
        padding: 1rem 1rem 1.25rem;
        overflow: auto;
    }

    .companyBanner[b-r7c1pgl16b] {
        position: static;
        display: block;
        margin: 1rem auto 0;
        max-width: min(80%, 18rem);
    }
}



/* _content/SKM_OnlineClearingstelle/Components/SubComponents/Questions.razor.rz.scp.css */
/* Wrapper wird ein responsives Grid */
.QuestionWrapper[b-b2hpps5xpo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 41.5625rem); /* Liste | Antwort */
    gap: clamp(1rem, 3vw, 3rem);
    align-items: start;
}

/* Liste links */
.QuestionList[b-b2hpps5xpo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0; /* wichtig für ellipsis/wrap */
}

/* Frage-Button: volle Breite der Spalte, flexible Höhe */
.QuestionCard[b-b2hpps5xpo] {
    width: 100%;
    min-height: 3.75rem;
    border: 0;
    border-radius: 1.25rem;
    background: var(--Farbverlauf-Dark-Grey---Dark-Blue);
    display: flex;
    justify-content: space-between;
    grid-template-columns: 1fr auto;
    align-items: center;
    text-align: left;
    gap: 1rem;
    padding: .75rem 1rem .75rem 1.25rem;
    box-sizing: border-box;
    cursor: pointer;
}

    .QuestionCard:hover[b-b2hpps5xpo],
    .QuestionCard:focus-visible[b-b2hpps5xpo] {
        filter: brightness(1.05);
        outline: 2px solid rgba(227,0,15,.2);
        outline-offset: 2px;
    }

    .QuestionCard.activeQuestion[b-b2hpps5xpo] {
        background: var(--Main-Color---Signal-Red, #E3000F);
    }

    .QuestionCard h2[b-b2hpps5xpo] {
        color: #fff;
        font-size: clamp(1rem, 1.6vw, 1.25rem);
        font-weight: 500;
        line-height: 1.4;
        margin: 0;
        min-width: 0;
        /* Desktop: einzeilig mit Ellipsis; Mobile: siehe Media Query unten */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        text-align: left;
    }

    .QuestionCard img[b-b2hpps5xpo] {
        width: 1.25rem;
        height: 1.25rem;
    }

/* Antwort rechts */
.AnwserCard[b-b2hpps5xpo] {
    width: 100%;
    border-radius: 2.5rem;
    background: #fff;
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    padding: clamp(1rem, 3vw, 3.56rem) clamp(1rem, 3vw, 5.31rem);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

    .AnwserCard img[b-b2hpps5xpo] {
        width: 1.25rem;
        height: 1.25rem;
    }

    .AnwserCard .header[b-b2hpps5xpo] {
        color: var(--Main-Color---Signal-Red, #E3000F);
        font-size: clamp(1.125rem, 2vw, 1.5rem);
        font-weight: 700;
        line-height: 1.4;
        margin-top: clamp(1rem, 2vw, 2rem);
        white-space: normal; /* darf umbrechen */
    }

    .AnwserCard p[b-b2hpps5xpo], .AnwserCard :where(p, li, span)[b-b2hpps5xpo] {
        color: var(--Optinal-Color---Dark-Grey, #333);
        font-size: clamp(1rem, 1.6vw, 1.125rem);
        line-height: 1.7;
        margin-top: 1rem;
    }

/* Inhalt, der aus dem CMS/HTML kommt */
:deep(.subline)[b-b2hpps5xpo] {
    color: var(--Main-Color---Signal-Red, #E3000F);
    font-weight: 700;
    margin-top: 1rem;
}

/* ===== Breakpoints ===== */

/* Tablets/kleine Desktops: Antwort schmaler */
@media (max-width: 75rem) { /* 1200px */
    .QuestionWrapper[b-b2hpps5xpo] {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 32rem);
    }
}

/* Mobile/Tablet Portrait: Einspaltig untereinander, Antwort unter Liste */
@media (max-width: 48rem) { /* 768px */
    .QuestionWrapper[b-b2hpps5xpo] {
        grid-template-columns: 1fr;
    }

    .QuestionCard h2[b-b2hpps5xpo] {
        white-space: normal; /* mehrzeilig */
        overflow: visible;
        text-overflow: clip;
    }
}

/* Sehr kleine Phones */
@media (max-width: 30rem) { /* 480px */
    .QuestionCard[b-b2hpps5xpo] {
        padding: .75rem .9rem;
    }
}

/* Inline-Antwort standardmäßig verstecken (Desktop) */
.AnswerInline[b-b2hpps5xpo] {
    display: none;
}

/* Visuelle Basis wie rechte Karte, aber angepasst für die Liste */
.AnswerInline[b-b2hpps5xpo] {
    width: 100%;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 2px 4px 8px rgba(30,30,30,.25);
    padding: clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
    margin: .5rem 0 1rem 0;
}

    .AnswerInline img[b-b2hpps5xpo] {
        width: 1.25rem;
        height: 1.25rem;
    }

    .AnswerInline .header[b-b2hpps5xpo] {
        color: var(--Main-Color---Signal-Red, #E3000F);
        font-size: clamp(1.125rem, 2vw, 1.5rem);
        font-weight: 700;
        line-height: 1.4;
        margin-top: .5rem;
    }

    .AnswerInline :where(p, li, span)[b-b2hpps5xpo] {
        color: var(--Optinal-Color---Dark-Grey, #333);
        font-size: clamp(1rem, 1.6vw, 1.125rem);
        line-height: 1.7;
        margin-top: .75rem;
    }

/* ===== Umschalten für Mobile/Tablet Portrait ===== */
@media (max-width: 48rem) {
    /* rechte Karte auf klein ausblenden */
    .AnwserCard[b-b2hpps5xpo] {
        display: none;
    }

    /* Inline-Antwort auf klein anzeigen */
    .AnswerInline[b-b2hpps5xpo] {
        display: block;
    }

    /* Fragen mehrzeilig */
    .QuestionCard h2[b-b2hpps5xpo] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}