/* /Components/Account/Pages/Login.razor.rz.scp.css */
.login-page[b-hoanvke78e] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    box-sizing: border-box;
    background: #f7f9fa;
}

.login-shell[b-hoanvke78e] {
    width: min(1000px, 100%);
    min-height: 620px;
    display: grid;
    grid-template-columns: 42% 58%;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10);
}

.login-brand-panel[b-hoanvke78e] {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #f4f8f9;
}

.login-logo-link[b-hoanvke78e] {
    display: inline-flex;
    width: fit-content;
    align-items: center;
}

.login-logo[b-hoanvke78e] {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 100px;
    object-fit: contain;
}

.login-brand-content[b-hoanvke78e] {
    margin-top: 30px;
}

.login-eyebrow[b-hoanvke78e],
.login-form-eyebrow[b-hoanvke78e] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #168b99;
    margin-bottom: 14px;
}

.login-brand-content h1[b-hoanvke78e] {
    margin: 0 0 18px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
    font-weight: 700;
}

.login-brand-content p[b-hoanvke78e] {
    margin: 0;
    max-width: 380px;
    font-size: 17px;
    line-height: 1.6;
    color: #5d686d;
}

.login-benefits[b-hoanvke78e] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
}

.login-benefits > div[b-hoanvke78e] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-benefits span[b-hoanvke78e] {
    color: #168b99;
    font-weight: 700;
}

.login-brand-footer[b-hoanvke78e] {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #849095;
}

.login-form-panel[b-hoanvke78e] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.login-form-container[b-hoanvke78e] {
    width: min(430px, 100%);
}

.login-back[b-hoanvke78e] {
    display: inline-block;
    margin-bottom: 42px;
    color: #667176;
    text-decoration: none;
    font-size: 14px;
}

.login-back:hover[b-hoanvke78e] {
    color: #168b99;
}

.login-heading[b-hoanvke78e] {
    margin-bottom: 30px;
}

.login-heading h2[b-hoanvke78e] {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 1.15;
}

.login-heading p[b-hoanvke78e] {
    margin: 0;
    color: #6c777c;
    line-height: 1.6;
}

.audiocampus-login-form[b-hoanvke78e] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-field[b-hoanvke78e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-field label[b-hoanvke78e],
.login-password-label label[b-hoanvke78e] {
    font-size: 14px;
    font-weight: 600;
    color: #263238;
}

.login-password-label[b-hoanvke78e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.login-password-label a[b-hoanvke78e] {
    font-size: 13px;
    color: #168b99;
    text-decoration: none;
}

[b-hoanvke78e] .login-input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid #d7dfe2;
    border-radius: 10px;
    background: white;
    font-size: 16px;
    outline: none;
}

[b-hoanvke78e] .login-input:focus {
    border-color: #168b99;
    box-shadow: 0 0 0 3px rgba(22, 139, 153, 0.10);
}

.login-validation[b-hoanvke78e],
.login-field-error[b-hoanvke78e] {
    color: #b42318;
    font-size: 13px;
}

.remember-row[b-hoanvke78e] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: #5d686d;
}

.remember-checkbox[b-hoanvke78e] {
    width: 17px;
    height: 17px;
}

.login-submit[b-hoanvke78e] {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 10px;
    background: #168b99;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.login-submit:hover[b-hoanvke78e] {
    background: #11727e;
}

.register-row[b-hoanvke78e] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 14px;
    color: #6c777c;
}

.register-row a[b-hoanvke78e],
.confirmation-link[b-hoanvke78e] {
    color: #168b99;
    text-decoration: none;
    font-weight: 600;
}

.confirmation-link[b-hoanvke78e] {
    display: block;
    text-align: center;
    margin-top: 4px;
    font-size: 13px;
}

@media (max-width: 800px) {
    .login-page[b-hoanvke78e] {
        padding: 16px;
    }

    .login-shell[b-hoanvke78e] {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .login-brand-panel[b-hoanvke78e] {
        padding: 32px;
    }

    .login-brand-content[b-hoanvke78e] {
        margin-top: 25px;
    }

    .login-benefits[b-hoanvke78e] {
        margin-top: 22px;
    }

    .login-brand-footer[b-hoanvke78e] {
        margin-top: 30px;
    }

    .login-form-panel[b-hoanvke78e] {
        padding: 32px;
    }

    .login-back[b-hoanvke78e] {
        margin-bottom: 30px;
    }
}
/* /Components/Account/Pages/Register.razor.rz.scp.css */
/* =========================================================
   AUDIOCAMPUS – REGISTRIERUNG
   ========================================================= */

.register-page[b-rznu6rr276] {
    min-height: calc(100vh - 74px);
    margin: -1.5rem;
    background: #f4f7f6;
}

.register-shell[b-rznu6rr276] {
    min-height: calc(100vh - 74px);
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(460px, 1.1fr);
}


/* =========================================================
   LINKE SEITE
   ========================================================= */

.register-intro[b-rznu6rr276] {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    padding: 42px 58px 58px;

    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(57, 207, 193, 0.22),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #082e55 0%,
            #0a3954 46%,
            #124f4b 100%
        );

    color: #ffffff;
}

.register-intro[b-rznu6rr276]::after {
    content: "";

    position: absolute;
    width: 420px;
    height: 420px;

    right: -180px;
    bottom: -200px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.045);
}

.register-brand[b-rznu6rr276] {
    position: relative;
    z-index: 2;

    display: inline-flex;
    width: fit-content;

    text-decoration: none;
}

.register-logo[b-rznu6rr276] {
    display: block;
    width: 190px;
    height: auto;
}

.register-intro-content[b-rznu6rr276] {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 520px;

    margin: auto 0;
    padding: 50px 0 30px;
}

.register-eyebrow[b-rznu6rr276] {
    display: block;

    margin-bottom: 22px;

    color: #91d8cd;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.register-intro h1[b-rznu6rr276] {
    margin: 0;

    color: #ffffff;

    font-size: clamp(2.4rem, 4vw, 4rem);
    line-height: 1.03;

    font-weight: 800;
    letter-spacing: -0.045em;
}

.register-intro-content > p[b-rznu6rr276] {
    max-width: 470px;

    margin: 26px 0 38px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 1.02rem;
    line-height: 1.7;
}

.register-benefits[b-rznu6rr276] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.register-benefit[b-rznu6rr276] {
    display: flex;
    align-items: flex-start;

    gap: 14px;
}

.register-benefit > span[b-rznu6rr276] {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(146, 220, 207, 0.14);
    border: 1px solid rgba(146, 220, 207, 0.28);

    color: #a5e5da;

    font-size: 0.8rem;
    font-weight: 800;
}

.register-benefit div[b-rznu6rr276] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.register-benefit strong[b-rznu6rr276] {
    color: #ffffff;

    font-size: 0.9rem;
    font-weight: 700;
}

.register-benefit small[b-rznu6rr276] {
    color: rgba(255, 255, 255, 0.56);

    font-size: 0.78rem;
    line-height: 1.45;
}


/* =========================================================
   RECHTE SEITE
   ========================================================= */

.register-panel[b-rznu6rr276] {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px 7%;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(45, 172, 158, 0.08),
            transparent 26%
        ),
        #f7f9f8;
}

.register-card[b-rznu6rr276] {
    width: 100%;
    max-width: 470px;
}

.register-card-label[b-rznu6rr276] {
    display: block;

    margin-bottom: 12px;

    color: #397b71;

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.15em;
}

.register-card-heading h2[b-rznu6rr276] {
    margin: 0;

    color: #17243a;

    font-size: 2.45rem;
    line-height: 1.08;

    font-weight: 800;
    letter-spacing: -0.035em;
}

.register-card-heading p[b-rznu6rr276] {
    margin: 14px 0 31px;

    color: #68758a;

    font-size: 0.96rem;
    line-height: 1.6;
}


/* =========================================================
   FORMULAR
   ========================================================= */

.register-form[b-rznu6rr276] {
    width: 100%;
}

.register-field[b-rznu6rr276] {
    margin-bottom: 18px;
}

.register-field label[b-rznu6rr276] {
    display: block;

    margin-bottom: 8px;

    color: #2b394c;

    font-size: 0.78rem;
    font-weight: 700;
}

[b-rznu6rr276] .register-input {
    width: 100%;
    height: 54px;

    box-sizing: border-box;

    padding: 0 16px;

    border:
        1px solid #d5dddf;

    border-radius: 11px;

    outline: none;

    background: #ffffff;

    color: #17243a;

    font-size: 0.94rem;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

[b-rznu6rr276] .register-input::placeholder {
    color: #a4adb7;
}

[b-rznu6rr276] .register-input:focus {
    border-color: #3c9387;

    box-shadow:
        0 0 0 3px rgba(60, 147, 135, 0.11);
}

[b-rznu6rr276] .register-field-error {
    display: block;

    margin-top: 6px;

    color: #b94b54;

    font-size: 0.75rem;
}

[b-rznu6rr276] .register-validation {
    margin: 0 0 18px;
    padding: 0;

    color: #b94b54;

    font-size: 0.78rem;

    list-style-position: inside;
}

.register-submit[b-rznu6rr276] {
    width: 100%;
    height: 56px;

    margin-top: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    border: 0;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #124e48,
            #17645b
        );

    color: #ffffff;

    font-size: 0.92rem;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(18, 78, 72, 0.16);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.register-submit span[b-rznu6rr276] {
    font-size: 1.15rem;
}

.register-submit:hover[b-rznu6rr276] {
    transform: translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #0f453f,
            #155b53
        );

    box-shadow:
        0 13px 28px rgba(18, 78, 72, 0.21);
}


/* =========================================================
   LOGIN / RECHTLICHES
   ========================================================= */

.register-login[b-rznu6rr276] {
    margin-top: 26px;

    padding-top: 23px;

    border-top: 1px solid #e0e6e5;

    text-align: center;

    color: #748091;

    font-size: 0.84rem;
}

.register-login a[b-rznu6rr276] {
    margin-left: 5px;

    color: #276f66;

    font-weight: 800;

    text-decoration: none;
}

.register-login a:hover[b-rznu6rr276] {
    text-decoration: underline;
}

.register-legal[b-rznu6rr276] {
    max-width: 400px;

    margin: 22px auto 0;

    color: #98a1aa;

    font-size: 0.69rem;
    line-height: 1.55;

    text-align: center;
}

.register-legal a[b-rznu6rr276] {
    color: #73817f;
    text-decoration: underline;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .register-shell[b-rznu6rr276] {
        grid-template-columns: 1fr 1.15fr;
    }

    .register-intro[b-rznu6rr276] {
        padding: 36px;
    }

    .register-intro h1[b-rznu6rr276] {
        font-size: 2.6rem;
    }

    .register-panel[b-rznu6rr276] {
        padding: 45px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .register-page[b-rznu6rr276] {
        min-height: 100vh;
        margin: -1rem;
    }

    .register-shell[b-rznu6rr276] {
        min-height: 100vh;
        display: block;
    }

    .register-intro[b-rznu6rr276] {
        min-height: auto;

        padding: 30px 26px 34px;
    }

    .register-logo[b-rznu6rr276] {
        width: 165px;
    }

    .register-intro-content[b-rznu6rr276] {
        padding: 35px 0 0;
    }

    .register-intro h1[b-rznu6rr276] {
        font-size: 2.25rem;
    }

    .register-intro-content > p[b-rznu6rr276] {
        margin-bottom: 27px;
    }

    .register-benefits[b-rznu6rr276] {
        display: none;
    }

    .register-panel[b-rznu6rr276] {
        padding: 38px 24px 50px;
    }

    .register-card-heading h2[b-rznu6rr276] {
        font-size: 2rem;
    }
}


/* =========================================================
   REGISTER – LAYOUT FEINSCHLIFF
   ========================================================= */

/*
   Etwas kompaktere linke Informationsfläche.
   Das Formular bekommt dadurch optisch mehr Gewicht.
*/
.register-shell[b-rznu6rr276] {
    grid-template-columns:
        minmax(390px, 0.82fr)
        minmax(520px, 1.18fr);
}


/*
   Inhalt links sauber vertikal positionieren.
*/
.register-intro[b-rznu6rr276] {
    padding: 58px 54px;
}

.register-intro-content[b-rznu6rr276] {
    max-width: 500px;
    margin: auto 0;
    padding: 0;
}


/*
   Headline bewusst kompakter.
*/
.register-intro h1[b-rznu6rr276] {
    max-width: 500px;

    font-size: clamp(2.6rem, 3.25vw, 3.55rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}


/*
   Beschreibung etwas ruhiger und kompakter.
*/
.register-intro-content > p[b-rznu6rr276] {
    max-width: 440px;

    margin-top: 25px;
    margin-bottom: 34px;

    font-size: 1rem;
    line-height: 1.65;
}


/*
   Rechte Seite erhält etwas mehr Raum.
*/
.register-panel[b-rznu6rr276] {
    padding-left: clamp(48px, 7vw, 100px);
    padding-right: clamp(48px, 7vw, 100px);
}

.register-card[b-rznu6rr276] {
    max-width: 500px;
}


/*
   Formulartitel nicht unnötig riesig.
*/
.register-card-heading h2[b-rznu6rr276] {
    font-size: clamp(2.15rem, 3vw, 2.65rem);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .register-shell[b-rznu6rr276] {
        grid-template-columns:
            minmax(330px, 0.9fr)
            minmax(440px, 1.1fr);
    }

    .register-intro[b-rznu6rr276] {
        padding: 45px 38px;
    }

    .register-intro h1[b-rznu6rr276] {
        font-size: 2.65rem;
    }

    .register-panel[b-rznu6rr276] {
        padding: 46px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .register-shell[b-rznu6rr276] {
        display: block;
    }

    .register-intro[b-rznu6rr276] {
        padding: 34px 26px;
    }

    .register-intro-content[b-rznu6rr276] {
        max-width: none;
    }

    .register-intro h1[b-rznu6rr276] {
        max-width: 430px;
        font-size: 2.15rem;
    }

    .register-panel[b-rznu6rr276] {
        padding: 38px 24px 52px;
    }

    .register-card[b-rznu6rr276] {
        max-width: 500px;
        margin: 0 auto;
    }
}

/* Vor- und Nachname */
.register-name-row[b-rznu6rr276] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .register-name-row[b-rznu6rr276] {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
.account-page[b-hakfprj2k9] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 42px 36px 70px;
}

.account-header[b-hakfprj2k9] {
    margin-bottom: 32px;
}

.account-eyebrow[b-hakfprj2k9] {
    display: block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #4f8075;
}

.account-header h1[b-hakfprj2k9] {
    margin: 0;
    color: #17243d;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.08;
}

.account-header p[b-hakfprj2k9] {
    max-width: 650px;
    margin: 14px 0 0;
    color: #687386;
    font-size: 1rem;
    line-height: 1.65;
}

.account-layout[b-hakfprj2k9] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.account-navigation[b-hakfprj2k9],
.account-content[b-hakfprj2k9] {
    background: #ffffff;
    border: 1px solid #e4e8ec;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(25, 39, 64, 0.06);
}

.account-navigation[b-hakfprj2k9] {
    padding: 22px 16px;
}

.account-navigation-title[b-hakfprj2k9] {
    padding: 0 10px 15px;
    margin-bottom: 8px;
    border-bottom: 1px solid #edf0f2;
    color: #17243d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-content[b-hakfprj2k9] {
    min-width: 0;
    padding: 32px 36px 38px;
}

/* ASP.NET Identity Inhalte innerhalb der Karte */

.account-content[b-hakfprj2k9]  h1 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #17243d;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.account-content[b-hakfprj2k9]  h2 {
    color: #17243d;
    font-size: 1.25rem;
    font-weight: 750;
}

.account-content[b-hakfprj2k9]  h3 {
    color: #17243d;
    font-size: 1.05rem;
    font-weight: 750;
}

.account-content[b-hakfprj2k9]  p {
    color: #687386;
    line-height: 1.6;
}

.account-content[b-hakfprj2k9]  .form-control {
    min-height: 48px;
    border: 1px solid #dce2e6;
    border-radius: 11px;
    box-shadow: none;
}

.account-content[b-hakfprj2k9]  .form-control:focus {
    border-color: #6da598;
    box-shadow: 0 0 0 3px rgba(109, 165, 152, 0.13);
}

.account-content[b-hakfprj2k9]  .btn-primary {
    min-height: 46px;
    padding: 10px 20px;
    border: 0;
    border-radius: 11px;
    background: #315f55;
    font-weight: 700;
}

.account-content[b-hakfprj2k9]  .btn-primary:hover {
    background: #284f47;
}

.account-content[b-hakfprj2k9]  a {
    color: #315f55;
}

.account-content[b-hakfprj2k9]  hr {
    border-color: #e8ecef;
    opacity: 1;
}

/* Navigation aus der Identity-Vorlage */

.account-navigation[b-hakfprj2k9]  .nav {
    gap: 4px;
}

.account-navigation[b-hakfprj2k9]  .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #5f6b7c;
    font-size: 0.92rem;
    font-weight: 650;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.account-navigation[b-hakfprj2k9]  .nav-link:hover {
    background: #f3f7f6;
    color: #315f55;
}

.account-navigation[b-hakfprj2k9]  .nav-link.active {
    background: #e9f3f0;
    color: #315f55;
    font-weight: 750;
}

/* Tablet / Smartphone */

@media (max-width: 900px) {
    .account-page[b-hakfprj2k9] {
        padding: 28px 20px 55px;
    }

    .account-layout[b-hakfprj2k9] {
        grid-template-columns: 1fr;
    }

    .account-navigation[b-hakfprj2k9] {
        padding: 14px;
    }

    .account-navigation[b-hakfprj2k9]  .nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .account-navigation[b-hakfprj2k9]  .nav-item {
        width: auto;
    }
}

@media (max-width: 600px) {
    .account-page[b-hakfprj2k9] {
        padding: 22px 14px 45px;
    }

    .account-header[b-hakfprj2k9] {
        margin-bottom: 22px;
    }

    .account-header h1[b-hakfprj2k9] {
        font-size: 2rem;
    }

    .account-content[b-hakfprj2k9] {
        padding: 24px 20px 28px;
        border-radius: 16px;
    }

    .account-navigation[b-hakfprj2k9] {
        border-radius: 16px;
    }
}
/* /Components/AudioPlayer.razor.rz.scp.css */
.embedded-player[b-xdm633ujaj] {
    width: 100%;
    color: #263f3a;
}

.player-controls[b-xdm633ujaj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 8px 0 7px;
}

.skip-button[b-xdm633ujaj],
.main-play-button[b-xdm633ujaj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    cursor: pointer;
    font-weight: 750;
}

.skip-button[b-xdm633ujaj] {
    width: 42px;
    height: 42px;

    border: 1px solid #d9e8e4;

    background: #ffffff;
    color: #55736c;

    font-size: 14px;
}

.main-play-button[b-xdm633ujaj] {
    width: 58px;
    height: 58px;

    padding: 0;
    border: 0;

    background: #d8f3ed;
    color: #123f37;

    font-size: 22px;

    box-shadow:
        0 6px 18px rgba(18, 63, 55, .12);
}

button:hover:not(:disabled)[b-xdm633ujaj] {
    filter: brightness(.97);
}

button:disabled[b-xdm633ujaj],
input:disabled[b-xdm633ujaj] {
    opacity: .5;
    cursor: default;
}

button:focus-visible[b-xdm633ujaj],
select:focus-visible[b-xdm633ujaj],
input:focus-visible[b-xdm633ujaj],
a:focus-visible[b-xdm633ujaj] {
    outline: 2px solid #7fb9ac;
    outline-offset: 4px;
}


/* ZEITEN */

.player-time[b-xdm633ujaj] {
    display: flex;
    justify-content: space-between;

    margin-bottom: 5px;

    color: #4f6963;

    font-size: 12px;
    font-weight: 700;

    font-variant-numeric: tabular-nums;
}


/* FORTSCHRITTSREGLER */

.seek-slider[b-xdm633ujaj] {
    display: block;

    width: 100%;
    height: 5px;

    margin: 0;

    cursor: pointer;

    accent-color: #79b8aa;
}


/* UNTERE ZEILE */

.player-bottom[b-xdm633ujaj] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-top: 8px;
}


/* GESCHWINDIGKEIT */

.speed-select[b-xdm633ujaj] {
    height: 32px;

    padding: 0 10px;

    border: 1px solid #315d54;
    border-radius: 8px;

    background: #173f38;
    color: #ffffff;

    font-size: 13px;
    font-weight: 650;

    cursor: pointer;
}


/* MEHR INFOS */

.more-info-button[b-xdm633ujaj] {
    color: #315f55;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    transition:
        color .15s ease,
        transform .15s ease;
}

.more-info-button:hover[b-xdm633ujaj] {
    color: #123f37;
    text-decoration: none;
    transform: translateX(2px);
}


/* STATUS */

.player-status[b-xdm633ujaj] {
    margin: 6px 0 0;

    color: #526b65;

    font-size: 13px;
    font-weight: 600;
}

audio[b-xdm633ujaj] {
    display: none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =========================================================
   GRUNDLAYOUT
   ========================================================= */

.page[b-ryxn5zmkrv] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ryxn5zmkrv] {
    flex: 1;
    min-width: 0;
}

.sidebar[b-ryxn5zmkrv] {
    background-image: linear-gradient(
        180deg,
        rgb(5, 39, 103) 0%,
        #3a0647 70%
    );
}


/* =========================================================
   AUDIOCAMPUS TOP BAR
   ========================================================= */

.top-row[b-ryxn5zmkrv] {
    position: sticky;
    top: 0;
    z-index: 800;

    height: 74px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 34px;

    box-sizing: border-box;

    background: #c3d1da;

    border-bottom:
        1px solid rgba(23, 48, 76, 0.12);

    box-shadow:
        0 3px 14px rgba(23, 48, 76, 0.05);

    overflow: visible;
}


/* =========================================================
   LINKE SEITE DER TOP BAR
   ========================================================= */

.top-row-left[b-ryxn5zmkrv] {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 18px;
}


/* =========================================================
   AUDIOCAMPUS SCHRIFTZUG LINKS
   ========================================================= */

.top-brand[b-ryxn5zmkrv] {
    display: flex;
    flex-direction: column;

    min-width: 0;

    color: #17304c;

    text-decoration: none;
}

.top-brand:hover[b-ryxn5zmkrv] {
    text-decoration: none;
}

.top-brand[b-ryxn5zmkrv] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    text-decoration: none;
    line-height: 1;
}

.top-brand strong[b-ryxn5zmkrv] {
    display: block;

    color: #273247;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.top-brand span[b-ryxn5zmkrv] {
    display: block;
    width: 100%;

    margin-top: 6px;

    color: #60717c;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.11em;

    text-align: center;
    white-space: nowrap;
}


/* =========================================================
   LOGO RECHTS
   ========================================================= */

.top-logo-link[b-ryxn5zmkrv] {
    position: relative;
    z-index: 10;

    width: 260px;
    height: 74px;

    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    flex-shrink: 0;
    margin-left: auto;

    overflow: visible;
    text-decoration: none;
}

.top-logo[b-ryxn5zmkrv] {
    position: absolute;

    top: 5px;
    right: 0;

    display: block;

    width: 250px;
    max-width: none;
    height: auto;

    object-fit: contain;

    filter: drop-shadow(0 3px 8px rgba(23, 48, 76, 0.10));
}

/* =========================================================
   HAMBURGER
   ========================================================= */

.mobile-menu-button[b-ryxn5zmkrv] {
    display: none;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    padding: 0;

    border: 0;
    border-radius: 10px;

    background: transparent;

    cursor: pointer;
}

.mobile-menu-button span[b-ryxn5zmkrv] {
    display: block;

    width: 23px;
    height: 2px;

    margin: 5px auto;

    border-radius: 999px;

    background: #17304c;
}

.mobile-menu-button:hover[b-ryxn5zmkrv] {
    background: rgba(23, 48, 76, 0.07);
}

.mobile-sidebar-header[b-ryxn5zmkrv] {
    display: none;
}

.mobile-menu-backdrop[b-ryxn5zmkrv] {
    display: none;
}


/* =========================================================
   PERSISTENTER MINI-PLAYER
   ========================================================= */

.persistent-player[b-ryxn5zmkrv] {
    position: fixed;

    left: 250px;
    right: 0;
    bottom: 0;

    z-index: 1000;

    padding: 5px 22px;

    background: #ffffff;

    border-top: 1px solid #dfe5e3;

    box-shadow:
        0 -3px 14px rgba(15, 23, 42, 0.08);
}

.persistent-player-inner[b-ryxn5zmkrv] {
    width: 100%;
    max-width: 1180px;
    min-height: 58px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        210px
        minmax(0, 1fr)
        34px;

    align-items: center;

    gap: 18px;
}

.persistent-player-title[b-ryxn5zmkrv] {
    min-width: 0;
}

.persistent-player-title span[b-ryxn5zmkrv] {
    display: block;

    margin-bottom: 2px;

    color: #52615e;

    font-size: 0.64rem;
    line-height: 1;
    font-weight: 800;

    letter-spacing: 0.09em;
}

.persistent-player-title strong[b-ryxn5zmkrv] {
    display: block;

    overflow: hidden;

    color: #14211f;

    font-size: 0.9rem;
    line-height: 1.2;
    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.persistent-player-controls[b-ryxn5zmkrv] {
    min-width: 0;
}

.persistent-player-close[b-ryxn5zmkrv] {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #52615e;

    font-size: 1.35rem;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.persistent-player-close:hover[b-ryxn5zmkrv] {
    background: #edf4f1;
    color: #14211f;
}

body:has(.persistent-player) main[b-ryxn5zmkrv] {
    padding-bottom: 76px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640.98px) {

    .page[b-ryxn5zmkrv] {
        display: block;
        min-height: 100vh;
    }


    /* -----------------------------------------------------
       TOP BAR MOBIL
       ----------------------------------------------------- */

    .top-row[b-ryxn5zmkrv] {
        height: 68px;

        padding: 0 12px;

        gap: 8px;

        background: #c3d1da;

        overflow: visible;
    }

    .top-row-left[b-ryxn5zmkrv] {
        gap: 7px;
        min-width: 0;
    }


    /* -----------------------------------------------------
       HAMBURGER MOBIL
       ----------------------------------------------------- */

    .mobile-menu-button[b-ryxn5zmkrv] {
        display: block;

        width: 38px;
        height: 38px;
    }

    .mobile-menu-button span[b-ryxn5zmkrv] {
        width: 21px;
    }


    /* -----------------------------------------------------
       SCHRIFTZUG MOBIL
       ----------------------------------------------------- */

    .top-brand[b-ryxn5zmkrv] {
        min-width: 0;
    }

    .top-brand strong[b-ryxn5zmkrv] {
        font-size: 19px;
        font-weight: 600;
    }

    .top-brand span[b-ryxn5zmkrv] {
        margin-top: 4px;

        font-size: 5.8px;

        letter-spacing: 0.17em;
    }


    /* -----------------------------------------------------
       LOGO RECHTS MOBIL
       ----------------------------------------------------- */

    /* -----------------------------------------------------
   LOGO RECHTS MOBIL
   ----------------------------------------------------- */

.top-logo-link[b-ryxn5zmkrv] {
    width: 150px;
    height: 68px;

    margin-left: auto;

    overflow: visible;
}

.top-logo[b-ryxn5zmkrv] {
    top: 14px;
    right: -4px;

    width: 145px;
    max-width: none;
    max-height: none;

    object-fit: contain;
}

    /* -----------------------------------------------------
       SIDEBAR ALS AUSFAHRENDES MENÜ
       ----------------------------------------------------- */

    .sidebar[b-ryxn5zmkrv] {
        position: fixed;

        top: 0;
        left: 0;
        bottom: 0;

        z-index: 1200;

        width: min(82vw, 300px);
        height: 100dvh;

        overflow-y: auto;

        transform: translateX(-105%);

        transition:
            transform 0.25s ease;

        box-shadow:
            12px 0 32px rgba(0, 0, 0, 0.22);
    }

    .sidebar.mobile-open[b-ryxn5zmkrv] {
        transform: translateX(0);
    }


    /* -----------------------------------------------------
       MOBILER MENÜKOPF
       ----------------------------------------------------- */

    .mobile-sidebar-header[b-ryxn5zmkrv] {
        height: 48px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 8px 14px 0 20px;

        color: rgba(255, 255, 255, 0.58);

        font-size: 11px;
        font-weight: 700;

        letter-spacing: 0.08em;

        text-transform: uppercase;
    }

    .mobile-menu-close[b-ryxn5zmkrv] {
        width: 38px;
        height: 38px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border: 0;
        border-radius: 50%;

        background: transparent;

        color: rgba(255, 255, 255, 0.82);

        font-size: 26px;
        line-height: 1;

        cursor: pointer;
    }

    .mobile-menu-close:hover[b-ryxn5zmkrv] {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }


    /* -----------------------------------------------------
       BACKDROP
       ----------------------------------------------------- */

    .mobile-menu-backdrop[b-ryxn5zmkrv] {
        position: fixed;

        inset: 0;

        z-index: 1100;

        display: block;

        padding: 0;

        border: 0;

        background:
            rgba(7, 15, 25, 0.48);

        backdrop-filter: blur(2px);
    }


    /* -----------------------------------------------------
       INHALT
       ----------------------------------------------------- */

    main[b-ryxn5zmkrv] {
        width: 100%;
    }

    article[b-ryxn5zmkrv] {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    /* -----------------------------------------------------
       PLAYER MOBIL
       ----------------------------------------------------- */

    .persistent-player[b-ryxn5zmkrv] {
        left: 0;

        padding: 5px 10px;
    }

    .persistent-player-inner[b-ryxn5zmkrv] {
        min-height: 62px;

        grid-template-columns:
            minmax(0, 1fr)
            32px;

        gap: 6px;
    }

    .persistent-player-title[b-ryxn5zmkrv] {
        grid-column: 1;
        grid-row: 1;
    }

    .persistent-player-title span[b-ryxn5zmkrv] {
        display: none;
    }

    .persistent-player-title strong[b-ryxn5zmkrv] {
        font-size: 0.82rem;
    }

    .persistent-player-controls[b-ryxn5zmkrv] {
        grid-column: 1;
        grid-row: 2;
    }

    .persistent-player-close[b-ryxn5zmkrv] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    body:has(.persistent-player) main[b-ryxn5zmkrv] {
        padding-bottom: 100px;
    }
}


/* =========================================================
   SEHR KLEINE HANDYS
   ========================================================= */

@media (max-width: 380px) {

    .top-row[b-ryxn5zmkrv] {
        padding: 0 8px;
    }

    .top-row-left[b-ryxn5zmkrv] {
        gap: 4px;
    }

    .top-brand strong[b-ryxn5zmkrv] {
        font-size: 17px;
    }

    .top-brand span[b-ryxn5zmkrv] {
        font-size: 5px;
        letter-spacing: 0.12em;
    }

    .top-logo-link[b-ryxn5zmkrv] {
        width: 72px;
    }

    .top-logo[b-ryxn5zmkrv] {
        width: 72px;
    }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 641px) {

    .page[b-ryxn5zmkrv] {
        flex-direction: row;
    }

    .sidebar[b-ryxn5zmkrv] {
        width: 250px;
        height: 100vh;

        position: sticky;
        top: 0;
    }

    .top-row[b-ryxn5zmkrv] {
        padding-left: 34px;
        padding-right: 34px;
    }

    article[b-ryxn5zmkrv] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}


/* =========================================================
   BLAZOR ERROR UI
   ========================================================= */

#blazor-error-ui[b-ryxn5zmkrv] {
    color-scheme: light only;

    position: fixed;

    left: 0;
    bottom: 0;

    z-index: 1300;

    display: none;

    width: 100%;

    box-sizing: border-box;

    padding:
        0.6rem
        1.25rem
        0.7rem;

    background: lightyellow;

    box-shadow:
        0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss[b-ryxn5zmkrv] {
    position: absolute;

    right: 0.75rem;
    top: 0.5rem;

    cursor: pointer;
}
.top-row-right[b-ryxn5zmkrv] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.login-button[b-ryxn5zmkrv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;

    color: #ffffff;
    text-decoration: none;

    font-size: 0.9rem;
    font-weight: 600;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.login-button:hover[b-ryxn5zmkrv] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.account-link[b-ryxn5zmkrv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #ffffff;
    text-decoration: none;

    font-size: 0.9rem;
    font-weight: 600;
}

.account-link:hover[b-ryxn5zmkrv] {
    color: #ffffff;
    opacity: 0.85;
}

.account-icon[b-ryxn5zmkrv] {
    font-size: 0.65rem;
}

@media (max-width: 640px) {

    .top-row-right[b-ryxn5zmkrv] {
        gap: 10px;
    }

    .login-button[b-ryxn5zmkrv] {
        min-height: 38px;
        padding: 0 13px;
        font-size: 0.82rem;
    }

    .account-text[b-ryxn5zmkrv] {
        display: none;
    }
}

/* =========================================================
   SIDEBAR ACCOUNT
   ========================================================= */

.sidebar[b-ryxn5zmkrv] {
    display: flex;
    flex-direction: column;
}

.sidebar-account[b-ryxn5zmkrv] {
    margin-top: auto;
    padding: 20px 24px 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebar-account-user[b-ryxn5zmkrv] {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 16px;
}

.sidebar-account-avatar[b-ryxn5zmkrv] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sidebar-account-avatar-guest[b-ryxn5zmkrv] {
    color: #a9ded2;
    font-size: 22px;
    font-weight: 400;
}

.sidebar-account-info[b-ryxn5zmkrv] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.sidebar-account-info span[b-ryxn5zmkrv] {
    color: rgba(255, 255, 255, 0.50);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.sidebar-account-info strong[b-ryxn5zmkrv] {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.92);

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-account-primary[b-ryxn5zmkrv] {
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 0 16px;

    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);

    background: rgba(255, 255, 255, 0.96);

    color: #173663;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.sidebar-account-primary:hover[b-ryxn5zmkrv] {
    background: #ffffff;
    color: #173663;
    text-decoration: none;

    transform: translateY(-1px);

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.sidebar-register[b-ryxn5zmkrv] {
    margin-top: 13px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 2px;

    text-align: center;
}

.sidebar-register span[b-ryxn5zmkrv] {
    color: rgba(255, 255, 255, 0.46);

    font-size: 10px;
}

.sidebar-register a[b-ryxn5zmkrv] {
    color: #a9ded2;

    font-size: 11px;
    font-weight: 750;

    text-decoration: none;
}

.sidebar-register a:hover[b-ryxn5zmkrv] {
    color: #d2f2eb;
    text-decoration: underline;
}

.sidebar-logout-form[b-ryxn5zmkrv] {
    margin: 9px 0 0;
}

.sidebar-account-secondary[b-ryxn5zmkrv] {
    width: 100%;

    padding: 8px 12px;

    border: 0;

    background: transparent;

    color: rgba(255, 255, 255, 0.58);

    font-size: 11px;
    font-weight: 650;

    cursor: pointer;
}

.sidebar-account-secondary:hover[b-ryxn5zmkrv] {
    color: #ffffff;
}


/* Accountbereich auf kleinen Displays */

@media (max-width: 640.98px) {

    .sidebar-account[b-ryxn5zmkrv] {
        margin-top: 24px;
        padding: 20px 22px 24px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =========================================================
   AUDIOCAMPUS BRANDING
   ========================================================= */

.brand[b-ggguh0scd0] {
    padding: 22px 18px 16px;
}

.brand-logo-link[b-ggguh0scd0] {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    height: 72px;

    overflow: hidden;

    text-decoration: none;
}

.brand-logo[b-ggguh0scd0] {
    display: block;

    width: 165px;
    height: auto;

    margin: 0;

    object-fit: contain;

    transform: none;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav[b-ggguh0scd0] {
    display: flex;
    flex-direction: column;

    gap: 7px;

    padding: 12px 18px;
}

[b-ggguh0scd0] .nav-entry {
    display: flex;
    align-items: center;

    gap: 14px;

    min-height: 48px;

    padding: 0 16px;

    border-radius: 12px;

    color: rgba(255, 255, 255, 0.72);

    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}

[b-ggguh0scd0] .nav-entry:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

[b-ggguh0scd0] .nav-entry.active {
    background: rgba(210, 235, 228, 0.14);
    color: #ffffff;
}

.nav-icon[b-ggguh0scd0] {
    width: 20px;

    text-align: center;

    color: #a8c9c1;

    font-size: 17px;
}


/* =========================================================
   UNTERER LOGIN-BEREICH
   ========================================================= */

.nav-bottom[b-ggguh0scd0] {
    margin-top: auto;

    padding: 22px 20px 18px;
}

.login-area[b-ggguh0scd0] {
    display: flex;
    flex-direction: column;

    padding-top: 24px;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);
}

.login-label[b-ggguh0scd0] {
    margin-bottom: 12px;

    color: rgba(255, 255, 255, 0.48);

    text-transform: uppercase;

    letter-spacing: 1.3px;

    font-size: 10px;
    font-weight: 700;
}

[b-ggguh0scd0] .login-button {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    border-radius: 11px;

    background: #dcebe7;
    color: #12352e;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}

[b-ggguh0scd0] .login-button:hover {
    background: #ffffff;
    color: #12352e;
}

[b-ggguh0scd0] .register-link {
    margin-top: 13px;

    color: rgba(255, 255, 255, 0.58);

    text-decoration: none;

    font-size: 11px;

    text-align: center;
}

[b-ggguh0scd0] .register-link:hover {
    color: #ffffff;
}


/* =========================================================
   EINGELOGGTER BENUTZER
   ========================================================= */

[b-ggguh0scd0] .profile-entry {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px;

    border-radius: 12px;

    color: #ffffff;

    text-decoration: none;
}

[b-ggguh0scd0] .profile-entry:hover {
    background: rgba(255, 255, 255, 0.08);
}

.profile-avatar[b-ggguh0scd0] {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #dcebe7;
    color: #12352e;

    font-weight: 800;
}

.profile-info[b-ggguh0scd0] {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.profile-info strong[b-ggguh0scd0] {
    font-size: 13px;
}

.profile-info span[b-ggguh0scd0] {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.5);

    font-size: 10px;

    text-overflow: ellipsis;
}

.logout-button[b-ggguh0scd0] {
    width: 100%;

    padding: 10px;

    border: 0;

    background: transparent;

    color: rgba(255, 255, 255, 0.5);

    font-size: 11px;

    cursor: pointer;
}

.logout-button:hover[b-ggguh0scd0] {
    color: #ffffff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640.98px) {

    .brand[b-ggguh0scd0] {
        padding: 8px 20px 16px;
    }

    .brand-logo-link[b-ggguh0scd0] {
        height: 68px;
    }

    .brand-logo[b-ggguh0scd0] {
        width: 155px;
    }

    .main-nav[b-ggguh0scd0] {
        padding-top: 6px;
    }
}
/* =========================================================
   AUDIOCAMPUS – Sidebar / Legal Links
   ========================================================= */

.navmenu-wrapper[b-ggguh0scd0] {
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* Rechtliche Links unten */

.legal-nav[b-ggguh0scd0] {
    margin-top: 0;
    padding: 18px 18px 22px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 6px;

    font-size: 11px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* Einzelne Links */

.legal-nav[b-ggguh0scd0]  .legal-nav-link {
    color: rgba(255, 255, 255, 0.55);

    text-decoration: none;

    font-size: 11px;
    font-weight: 500;

    transition:
        color 0.15s ease,
        opacity 0.15s ease;
}


.legal-nav[b-ggguh0scd0]  .legal-nav-link:hover {
    color: #a8d9ce;
}


/* Aktuell geöffnete Seite */

.legal-nav[b-ggguh0scd0]  .legal-nav-link.active {
    color: #a8d9ce;
}


/* Trennpunkte */

.legal-nav-separator[b-ggguh0scd0] {
    color: rgba(255, 255, 255, 0.28);
    user-select: none;
}


/* Smartphone */

@media (max-width: 640px) {

    .navmenu-wrapper[b-ggguh0scd0] {
        min-height: calc(100vh - 58px);
    }

    .legal-nav[b-ggguh0scd0] {
        padding: 20px 16px 24px;
        margin-top: 30px;
    }

}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-rzmmk87k7h],
.components-reconnect-repeated-attempt-visible[b-rzmmk87k7h],
.components-reconnect-failed-visible[b-rzmmk87k7h],
.components-pause-visible[b-rzmmk87k7h],
.components-resume-failed-visible[b-rzmmk87k7h],
.components-rejoining-animation[b-rzmmk87k7h] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-rzmmk87k7h],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-rzmmk87k7h],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-rzmmk87k7h],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-rzmmk87k7h],
#components-reconnect-modal.components-reconnect-retrying[b-rzmmk87k7h],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-rzmmk87k7h],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-rzmmk87k7h],
#components-reconnect-modal.components-reconnect-failed[b-rzmmk87k7h],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-rzmmk87k7h] {
    display: block;
}


#components-reconnect-modal[b-rzmmk87k7h] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-rzmmk87k7h 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-rzmmk87k7h 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-rzmmk87k7h 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-rzmmk87k7h]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-rzmmk87k7h 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-rzmmk87k7h {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-rzmmk87k7h {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-rzmmk87k7h {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-rzmmk87k7h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-rzmmk87k7h] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-rzmmk87k7h] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-rzmmk87k7h] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-rzmmk87k7h] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-rzmmk87k7h] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-rzmmk87k7h] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-rzmmk87k7h 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-rzmmk87k7h] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-rzmmk87k7h {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Audiothek.razor.rz.scp.css */
.library[b-vr5kei7pxq] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 64px 42px 100px;
    color: #15211f;
}

.library-header[b-vr5kei7pxq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 70px;
}

.library-header > div:first-child[b-vr5kei7pxq] {
    max-width: 760px;
}

.eyebrow[b-vr5kei7pxq] {
    display: block;
    color: #52776f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.library-header h1[b-vr5kei7pxq] {
    font-size: clamp(44px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -3px;
    margin: 0 0 24px;
    font-weight: 800;
}

.library-header p[b-vr5kei7pxq] {
    max-width: 720px;
    color: #687572;
    font-size: 18px;
    line-height: 1.65;
    margin: 0;
}

.library-stat[b-vr5kei7pxq] {
    width: 190px;
    min-width: 190px;
    border: 1px solid #dce4e1;
    border-radius: 20px;
    padding: 25px;
    background: #f8faf9;
}

.library-stat strong[b-vr5kei7pxq] {
    display: block;
    font-size: 42px;
    line-height: 1;
}

.library-stat span[b-vr5kei7pxq] {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-top: 5px;
}

.library-stat small[b-vr5kei7pxq] {
    display: block;
    color: #84908d;
    margin-top: 12px;
    line-height: 1.4;
}

.section-heading[b-vr5kei7pxq] {
    margin-bottom: 25px;
}

.section-heading h2[b-vr5kei7pxq] {
    margin: 0;
    font-size: 28px;
    letter-spacing: -1px;
}

.filter-row[b-vr5kei7pxq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.filter[b-vr5kei7pxq] {
    border: 1px solid #dbe3e0;
    background: white;
    color: #687572;
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 12px;
    cursor: pointer;
}

.filter.active[b-vr5kei7pxq] {
    background: #173b34;
    border-color: #173b34;
    color: white;
}

.season[b-vr5kei7pxq] {
    margin-top: 38px;
}

.season-title[b-vr5kei7pxq] {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: baseline;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #dce4e1;
}

.season-title span[b-vr5kei7pxq] {
    color: #52776f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.season-title h3[b-vr5kei7pxq] {
    font-size: 21px;
    margin: 0;
}

.season-title p[b-vr5kei7pxq] {
    margin: 0;
    color: #8a9592;
    font-size: 13px;
}

.episode-row[b-vr5kei7pxq] {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 190px;
    gap: 24px;
    align-items: center;
    padding: 25px 8px;
    border-bottom: 1px solid #e5eae8;
    transition:
        background .15s ease,
        transform .15s ease;
}

.episode-row:hover[b-vr5kei7pxq] {
    background: #f8faf9;
}

.row-number[b-vr5kei7pxq] {
    font-size: 22px;
    color: #91a19d;
    font-weight: 500;
}

.episode-category[b-vr5kei7pxq],
.row-category[b-vr5kei7pxq] {
    display: block;
    color: #63827a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.row-main h4[b-vr5kei7pxq] {
    color: #17231f;
    font-size: 18px;
    margin: 5px 0 5px;
    font-weight: 750;
}

.row-main p[b-vr5kei7pxq] {
    color: #7b8784;
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

.mini-progress[b-vr5kei7pxq] {
    width: 160px;
    max-width: 100%;
    height: 3px;
    background: #e0e7e4;
    margin-top: 13px;
    border-radius: 999px;
    overflow: hidden;
}

.mini-progress div[b-vr5kei7pxq] {
    height: 100%;
    background: #52776f;
    border-radius: inherit;
}

.episode-status[b-vr5kei7pxq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.progress-label[b-vr5kei7pxq],
.free-label[b-vr5kei7pxq],
.abo-label[b-vr5kei7pxq] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.progress-label[b-vr5kei7pxq],
.free-label[b-vr5kei7pxq] {
    color: #52776f;
}

.episode-link[b-vr5kei7pxq] {
    min-height: 40px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 1px solid #d5e1dd;
    border-radius: 10px;

    background: #ffffff;
    color: #234e45;

    font-size: 12px;
    font-weight: 750;
    text-decoration: none;

    white-space: nowrap;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.episode-link span[b-vr5kei7pxq] {
    font-size: 15px;
    transition: transform .16s ease;
}

.episode-link:hover[b-vr5kei7pxq] {
    background: #edf5f2;
    border-color: #bfd3cd;
    color: #173b34;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(23, 59, 52, .07);
}

.episode-link:hover span[b-vr5kei7pxq] {
    transform: translateX(2px);
}

.abo-label[b-vr5kei7pxq] {
    background: #edf2f0;
    padding: 6px 9px;
    border-radius: 6px;
    color: #677572;
}

.locked[b-vr5kei7pxq] {
    opacity: .58;
}

.lock[b-vr5kei7pxq] {
    font-size: 13px;
    color: #7d8986;
}


@media (max-width: 850px) {

    .library[b-vr5kei7pxq] {
        padding: 35px 20px 80px;
    }

    .library-header[b-vr5kei7pxq] {
        display: block;
    }

    .library-stat[b-vr5kei7pxq] {
        margin-top: 30px;
    }

    .season-title[b-vr5kei7pxq] {
        display: block;
    }

    .season-title h3[b-vr5kei7pxq] {
        margin: 6px 0;
    }

    .episode-row[b-vr5kei7pxq] {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .episode-status[b-vr5kei7pxq] {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: 4px;
    }
}
/* /Components/Pages/Episode.razor.rz.scp.css */
/* =========================================================
   EPISODE PAGE
   Anästhesie Audioguide
   ========================================================= */

.episode-page[b-115z4fm10c] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 8px 60px;
    box-sizing: border-box;
}


/* ZURÜCK */

.back-link[b-115z4fm10c] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 34px;

    color: #687184;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;

    transition: color 0.18s ease,
                transform 0.18s ease;
}

.back-link:hover[b-115z4fm10c] {
    color: #26324d;
    transform: translateX(-2px);
    text-decoration: none;
}


/* =========================================================
   HEADER
   ========================================================= */

.episode-header[b-115z4fm10c] {
    max-width: 850px;
    margin-bottom: 34px;
}

.episode-meta[b-115z4fm10c] {
    margin-bottom: 12px;

    color: #5b8178;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.episode-header h1[b-115z4fm10c] {
    margin: 0 0 14px;

    color: #172036;

    font-size: clamp(36px, 4vw, 52px);
    font-weight: 780;
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.episode-intro[b-115z4fm10c] {
    max-width: 720px;
    margin: 0;

    color: #667085;

    font-size: 18px;
    line-height: 1.65;
}


/* =========================================================
   PLAYER
   ========================================================= */

.player-card[b-115z4fm10c] {
    position: relative;
    overflow: hidden;

    margin-bottom: 30px;
    padding: 26px 30px 28px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #153f38 0%,
            #1b4b43 55%,
            #24574e 100%
        );

    box-shadow:
        0 18px 45px rgba(20, 43, 39, 0.13);
}

.player-card[b-115z4fm10c]::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -120px;
    top: -150px;

    border-radius: 50%;

    background:
        rgba(199, 237, 227, 0.06);

    pointer-events: none;
}

.player-heading[b-115z4fm10c] {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 18px;
}

.player-label[b-115z4fm10c] {
    margin-bottom: 5px;

    color: #a8d9ce;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.player-heading h2[b-115z4fm10c] {
    margin: 0;

    color: #ffffff;

    font-size: 23px;
    font-weight: 750;
    letter-spacing: -0.025em;
}


/* =========================================================
   HAUPTBEREICH
   ========================================================= */

.episode-grid[b-115z4fm10c] {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
    gap: 22px;

    margin-bottom: 22px;
}


/* ALLGEMEINE KARTEN */

.content-card[b-115z4fm10c],
.guideline-card[b-115z4fm10c],
.remember-card[b-115z4fm10c] {
    border: 1px solid #e7e9ef;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 5px 20px rgba(29, 38, 60, 0.035);
}


/* =========================================================
   LERNZIELE
   ========================================================= */

.content-card[b-115z4fm10c] {
    padding: 30px 32px;
}

.card-label[b-115z4fm10c] {
    display: block;
    margin-bottom: 9px;

    color: #64837b;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.content-card h2[b-115z4fm10c],
.guideline-card h2[b-115z4fm10c],
.remember-card h2[b-115z4fm10c] {
    margin: 0 0 13px;

    color: #20293d;

    font-size: 21px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.content-card p[b-115z4fm10c] {
    margin: 0 0 23px;

    color: #697386;

    font-size: 15px;
    line-height: 1.7;
}

.content-card ul[b-115z4fm10c] {
    display: grid;
    gap: 11px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.content-card li[b-115z4fm10c] {
    position: relative;

    padding-left: 28px;

    color: #3f495c;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.content-card li[b-115z4fm10c]::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: -1px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    background: #e6f3ef;

    color: #356b60;

    font-size: 11px;
    font-weight: 900;
}


/* =========================================================
   LEITLINIEN
   ========================================================= */

.guideline-card[b-115z4fm10c] {
    display: flex;
    flex-direction: column;

    padding: 30px;
}

.guideline-card p[b-115z4fm10c] {
    margin: 0 0 22px;

    color: #697386;

    font-size: 14px;
    line-height: 1.65;
}

.review-status[b-115z4fm10c] {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 4px;
    margin-bottom: 5px;

    color: #52665f;

    font-size: 12px;
    font-weight: 700;
}

.status-dot[b-115z4fm10c] {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #52a98f;

    box-shadow:
        0 0 0 4px rgba(82, 169, 143, 0.10);
}

.guideline-card strong[b-115z4fm10c] {
    margin-bottom: 19px;

    color: #263147;

    font-size: 14px;
}

.guideline-button[b-115z4fm10c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 18px;

    border: 1px solid #dce4e1;
    border-radius: 10px;

    background: #f5faf8;

    color: #315f55;

    font-size: 13px;
    font-weight: 750;
    text-decoration: none;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.guideline-button:hover[b-115z4fm10c] {
    background: #ebf5f2;
    border-color: #cadbd6;

    transform: translateY(-1px);

    color: #244f46;
    text-decoration: none;
}




/* =========================================================
   QUELLEN & WEITERFÜHRENDE LITERATUR
   ========================================================= */

.source-actions[b-115z4fm10c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.source-actions .guideline-button[b-115z4fm10c] {
    width: 100%;
}


/* =========================================================
   MERKPUNKTE
   ========================================================= */

.remember-card[b-115z4fm10c] {
    padding: 30px 32px 32px;
}

.remember-card h2[b-115z4fm10c] {
    margin-bottom: 23px;
}

.remember-grid[b-115z4fm10c] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.remember-grid > div[b-115z4fm10c] {
    min-height: 118px;

    padding: 18px 16px;

    border: 1px solid #e8ebe9;
    border-radius: 13px;

    background: #f8faf9;
}

.remember-grid strong[b-115z4fm10c] {
    display: block;

    margin-bottom: 15px;

    color: #4e8175;

    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.remember-grid span[b-115z4fm10c] {
    display: block;

    color: #3e485a;

    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .episode-grid[b-115z4fm10c] {
        grid-template-columns: 1fr;
    }

    .remember-grid[b-115z4fm10c] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .remember-grid > div:last-child[b-115z4fm10c] {
        grid-column: span 2;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .episode-page[b-115z4fm10c] {
        padding: 4px 2px 40px;
    }

    .back-link[b-115z4fm10c] {
        margin-bottom: 25px;
    }

    .episode-header[b-115z4fm10c] {
        margin-bottom: 26px;
    }

    .episode-header h1[b-115z4fm10c] {
        font-size: 34px;
    }

    .episode-intro[b-115z4fm10c] {
        font-size: 16px;
    }

    .player-card[b-115z4fm10c] {
        padding: 22px 20px 23px;
        border-radius: 17px;
    }

    .player-heading[b-115z4fm10c] {
        margin-bottom: 15px;
    }

    .player-heading h2[b-115z4fm10c] {
        font-size: 20px;
    }

    .content-card[b-115z4fm10c],
    .guideline-card[b-115z4fm10c],
    .remember-card[b-115z4fm10c] {
        padding: 24px 21px;
        border-radius: 15px;
    }

    .remember-grid[b-115z4fm10c] {
        grid-template-columns: 1fr;
    }

    .remember-grid > div:last-child[b-115z4fm10c] {
        grid-column: auto;
    }

    .remember-grid > div[b-115z4fm10c] {
        min-height: auto;
    }
}
/* =========================================================
   AUDIO START / WEITERHÖREN
   ========================================================= */

.player-heading[b-115z4fm10c] {
    align-items: center;
    gap: 32px;
    margin-bottom: 0;
}

.player-heading > div:first-child[b-115z4fm10c] {
    min-width: 0;
}

.player-description[b-115z4fm10c] {
    max-width: 580px;
    margin: 8px 0 0;
    color: #c7d9d5;
    font-size: 14px;
    line-height: 1.55;
}

.episode-play-button[b-115z4fm10c] {
    min-width: 220px;
    min-height: 64px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 8px 18px 8px 9px;

    border: 0;
    border-radius: 15px;

    background: #ffffff;
    color: #173b34;

    cursor: pointer;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.episode-play-button:hover[b-115z4fm10c] {
    transform: translateY(-1px);
    background: #f6fbf9;

    box-shadow:
        0 11px 28px rgba(0, 0, 0, 0.16);
}

.episode-play-icon[b-115z4fm10c] {
    width: 46px;
    height: 46px;
    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #dff0eb;
    color: #17463d;

    font-size: 15px;

    padding-left: 2px;
}

.episode-play-text[b-115z4fm10c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    text-align: left;
}

.episode-play-text strong[b-115z4fm10c] {
    color: #173b34;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.episode-play-text small[b-115z4fm10c] {
    margin-top: 3px;

    color: #70837e;
    font-size: 11px;
    font-weight: 600;
}

.episode-progress-area[b-115z4fm10c] {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 22px;
}

.episode-progress-track[b-115z4fm10c] {
    flex: 1;
    height: 4px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 255, 255, .17);
}

.episode-progress-track div[b-115z4fm10c] {
    height: 100%;

    border-radius: inherit;

    background: #c7e6de;
}

.episode-progress-area > span[b-115z4fm10c] {
    min-width: 75px;

    color: #bad4ce;
    font-size: 11px;
    font-weight: 700;

    text-align: right;
}


@media (max-width: 700px) {

    .player-heading[b-115z4fm10c] {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }

    .episode-play-button[b-115z4fm10c] {
        width: 100%;
        min-width: 0;
    }

    .episode-progress-area[b-115z4fm10c] {
        margin-top: 18px;
    }
}
/* =========================================================
   QUIZ
   ========================================================= */

.quiz-card[b-115z4fm10c] {
    margin: 24px 0 32px;
    padding: 24px 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    border: 1px solid #e1ddff;
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f5f3ff 0%,
            #fafaff 100%
        );

    box-shadow:
        0 6px 22px rgba(63, 52, 120, 0.05);
}


.quiz-content[b-115z4fm10c] {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 20px;
}


.quiz-icon[b-115z4fm10c] {
    width: 54px;
    height: 54px;
    min-width: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: #6d5dfc;
    color: #ffffff;

    font-size: 21px;
    font-weight: 800;

    box-shadow:
        0 6px 16px rgba(109, 93, 252, 0.18);
}


.quiz-text[b-115z4fm10c] {
    min-width: 0;
}


.quiz-text .card-label[b-115z4fm10c] {
    margin-bottom: 5px;

    color: #7168a8;
}


.quiz-text h2[b-115z4fm10c] {
    margin: 0 0 6px;

    color: #172033;

    font-size: 21px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.02em;
}


.quiz-text p[b-115z4fm10c] {
    max-width: 620px;

    margin: 0;

    color: #6f788a;

    font-size: 14px;
    line-height: 1.55;
}


.quiz-button[b-115z4fm10c] {
    min-width: 158px;
    min-height: 48px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 0 18px;

    border-radius: 12px;

    background: #172033;
    color: #ffffff;

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;

    box-shadow:
        0 6px 16px rgba(23, 32, 51, 0.12);

    transition:
        transform 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}


.quiz-button span[b-115z4fm10c] {
    font-size: 17px;
    line-height: 1;
}


.quiz-button:hover[b-115z4fm10c] {
    background: #283249;
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 9px 20px rgba(23, 32, 51, 0.16);

    text-decoration: none;
}


/* =========================================================
   QUIZ MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .quiz-card[b-115z4fm10c] {
        padding: 21px;

        align-items: stretch;
        flex-direction: column;

        gap: 20px;
    }


    .quiz-content[b-115z4fm10c] {
        align-items: flex-start;
    }


    .quiz-icon[b-115z4fm10c] {
        width: 48px;
        height: 48px;
        min-width: 48px;

        border-radius: 13px;

        font-size: 19px;
    }


    .quiz-text h2[b-115z4fm10c] {
        font-size: 19px;
    }


    .quiz-text p[b-115z4fm10c] {
        font-size: 13px;
    }


    .quiz-button[b-115z4fm10c] {
        width: 100%;
        min-height: 48px;
    }
}
/* =========================================================
   AUDIO AKTIONEN
   ========================================================= */

.episode-play-actions[b-115z4fm10c] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-shrink: 0;
}

.episode-restart-button[b-115z4fm10c] {
    min-height: 64px;
    padding: 0 17px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;

    font-size: 13px;
    cursor: pointer;

    transition:
        background .16s ease,
        transform .16s ease,
        border-color .16s ease;
}

.episode-restart-button:hover[b-115z4fm10c] {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-1px);
}

.episode-restart-button span[b-115z4fm10c] {
    font-size: 18px;
}

.episode-restart-button strong[b-115z4fm10c] {
    white-space: nowrap;
}

@media (max-width: 650px) {

    .episode-play-actions[b-115z4fm10c] {
        width: 100%;
        flex-direction: column;
    }

    .episode-play-button[b-115z4fm10c],
    .episode-restart-button[b-115z4fm10c] {
        width: 100%;
    }

    .episode-restart-button[b-115z4fm10c] {
        min-height: 48px;
    }
}
/* /Components/Pages/EpisodeFeedback.razor.rz.scp.css */
.feedback-entry[b-n1jfib7jfx] {
    margin-top: 36px;
    margin-bottom: 22px;
}

.feedback-open[b-n1jfib7jfx] {
    width: 100%;
    border: 1px solid #dce6e9;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff, #f6f9fa);
    padding: 22px 24px;

    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 16px;
    align-items: center;

    text-align: left;
    cursor: pointer;

    color: #17223b;

    box-shadow:
        0 8px 28px rgba(17, 43, 72, 0.05);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.feedback-open:hover[b-n1jfib7jfx] {
    transform: translateY(-2px);
    border-color: #b9dfe0;

    box-shadow:
        0 14px 35px rgba(17, 43, 72, 0.09);
}

.feedback-icon[b-n1jfib7jfx] {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    color: #007d8f;

    background:
        linear-gradient(
            145deg,
            #e9f7f7,
            #eef3f7
        );

    font-size: 20px;
}

.feedback-open strong[b-n1jfib7jfx] {
    display: block;
    font-size: 17px;
    margin-bottom: 3px;
}

.feedback-open small[b-n1jfib7jfx] {
    display: block;
    color: #6b788b;
    font-size: 14px;
}

.feedback-arrow[b-n1jfib7jfx] {
    color: #007d8f;
    font-size: 23px;
}


.feedback-overlay[b-n1jfib7jfx] {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;

    background:
        rgba(4, 18, 42, 0.58);

    backdrop-filter: blur(8px);
}


.feedback-modal[b-n1jfib7jfx] {
    width: min(680px, 100%);
    max-height: 90vh;
    overflow-y: auto;

    border-radius: 28px;
    border: 1px solid rgba(220,230,233,.9);

    background: #ffffff;

    box-shadow:
        0 35px 90px
        rgba(0, 19, 45, .28);
}


.feedback-header[b-n1jfib7jfx] {
    padding: 30px 32px 25px;

    display: flex;
    justify-content: space-between;
    gap: 25px;

    border-bottom: 1px solid #e7edef;
}

.feedback-kicker[b-n1jfib7jfx] {
    display: block;

    margin-bottom: 8px;

    color: #007d8f;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
}

.feedback-header h2[b-n1jfib7jfx] {
    margin: 0 0 6px;

    color: #17223b;

    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.feedback-header p[b-n1jfib7jfx] {
    margin: 0;
    color: #728094;
}

.feedback-close[b-n1jfib7jfx] {
    width: 40px;
    height: 40px;

    flex: 0 0 auto;

    border: 0;
    border-radius: 12px;

    background: #f2f5f6;

    color: #516074;

    font-size: 27px;
    line-height: 1;

    cursor: pointer;
}


.feedback-form[b-n1jfib7jfx] {
    padding: 28px 32px 32px;
}

.feedback-form label[b-n1jfib7jfx] {
    display: block;

    margin:
        19px 0 8px;

    font-size: 14px;
    font-weight: 700;

    color: #26354e;
}

.feedback-form label:first-child[b-n1jfib7jfx] {
    margin-top: 0;
}

.feedback-form label span[b-n1jfib7jfx] {
    font-weight: 500;
    color: #8a95a4;
}


.feedback-form select[b-n1jfib7jfx],
.feedback-form textarea[b-n1jfib7jfx],
.feedback-form input[b-n1jfib7jfx] {
    width: 100%;

    border: 1px solid #d8e1e5;
    border-radius: 13px;

    background: #fbfcfd;

    color: #17223b;

    font: inherit;

    padding:
        13px 15px;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.feedback-form textarea[b-n1jfib7jfx] {
    min-height: 155px;
    resize: vertical;
}

.feedback-form select:focus[b-n1jfib7jfx],
.feedback-form textarea:focus[b-n1jfib7jfx],
.feedback-form input:focus[b-n1jfib7jfx] {
    border-color: #18aeb6;

    box-shadow:
        0 0 0 3px
        rgba(24, 174, 182, .11);

    background: white;
}


.feedback-count[b-n1jfib7jfx] {
    margin-top: 5px;

    text-align: right;

    font-size: 12px;
    color: #95a0ae;
}


.feedback-error[b-n1jfib7jfx] {
    margin-top: 18px;

    padding: 12px 14px;

    border-radius: 11px;

    color: #9a2530;
    background: #fff0f1;

    font-size: 14px;
}


.feedback-actions[b-n1jfib7jfx] {
    margin-top: 27px;

    display: flex;
    justify-content: flex-end;
    gap: 12px;
}


.feedback-cancel[b-n1jfib7jfx],
.feedback-send[b-n1jfib7jfx] {
    min-height: 46px;

    padding:
        0 20px;

    border-radius: 12px;

    font-weight: 700;
    font-size: 14px;

    cursor: pointer;
}


.feedback-cancel[b-n1jfib7jfx] {
    border: 1px solid #dce3e7;
    background: white;
    color: #556378;
}


.feedback-send[b-n1jfib7jfx] {
    border: 0;

    color: white;

    background:
        linear-gradient(
            135deg,
            #0b2b5b,
            #007d8f
        );

    box-shadow:
        0 9px 22px
        rgba(11, 43, 91, .17);
}

.feedback-send:disabled[b-n1jfib7jfx] {
    opacity: .6;
    cursor: default;
}


.feedback-success[b-n1jfib7jfx] {
    padding: 48px 35px;
    text-align: center;
}

.success-icon[b-n1jfib7jfx] {
    width: 60px;
    height: 60px;

    margin:
        0 auto 19px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e9f7f3;
    color: #19836d;

    font-size: 27px;
    font-weight: 800;
}

.feedback-success h3[b-n1jfib7jfx] {
    margin:
        0 0 7px;

    font-size: 28px;
}

.feedback-success p[b-n1jfib7jfx] {
    margin:
        0 auto 25px;

    max-width: 440px;

    color: #69768a;
}


@media (max-width: 600px) {

    .feedback-overlay[b-n1jfib7jfx] {
        padding: 12px;
    }

    .feedback-header[b-n1jfib7jfx],
    .feedback-form[b-n1jfib7jfx] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .feedback-open[b-n1jfib7jfx] {
        grid-template-columns: 42px 1fr;
    }

    .feedback-arrow[b-n1jfib7jfx] {
        display: none;
    }

    .feedback-actions[b-n1jfib7jfx] {
        flex-direction: column-reverse;
    }

    .feedback-cancel[b-n1jfib7jfx],
    .feedback-send[b-n1jfib7jfx] {
        width: 100%;
    }
}

.feedback-icon svg[b-n1jfib7jfx] {
    display: block;
}

.feedback-icon[b-n1jfib7jfx] {
    border: 1px solid rgba(0, 125, 143, 0.12);

    background:
        linear-gradient(
            145deg,
            #eefafa,
            #f3f7f9
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8);
}
/* /Components/Pages/EpisodeLiterature.razor.rz.scp.css */
.sources-page[b-n9rnhz46zs] {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 8px 60px;
    box-sizing: border-box;
}


/* Zurück */

.back-link[b-n9rnhz46zs] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 28px;

    color: #58726c;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}

.back-link:hover[b-n9rnhz46zs] {
    color: #173f38;
}


/* Kopfbereich */

.sources-header[b-n9rnhz46zs] {
    margin-bottom: 26px;
    padding: 34px 36px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #153f38 0%,
            #1b4b43 60%,
            #24574e 100%
        );

    color: #ffffff;
}

.eyebrow[b-n9rnhz46zs] {
    display: block;

    margin-bottom: 12px;

    color: #a8d9ce;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.sources-header h1[b-n9rnhz46zs] {
    margin: 0 0 12px;

    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.05;

    letter-spacing: -0.04em;
}

.sources-header > p[b-n9rnhz46zs] {
    max-width: 700px;

    margin: 0;

    color: #d7e6e2;

    font-size: 16px;
    line-height: 1.6;
}


/* Prüfstatus */

.sources-status[b-n9rnhz46zs] {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-top: 24px;
    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.07);
}

.sources-status .status-dot[b-n9rnhz46zs] {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #9dd8c9;
}

.sources-status div[b-n9rnhz46zs] {
    display: flex;
    flex-direction: column;
}

.sources-status strong[b-n9rnhz46zs] {
    font-size: 12px;
}

.sources-status span[b-n9rnhz46zs] {
    margin-top: 2px;

    color: #bdd4ce;

    font-size: 10px;
}


/* Einleitung */

.sources-intro[b-n9rnhz46zs] {
    margin-bottom: 18px;
    padding: 22px 26px;

    border: 1px solid #e5e9e7;
    border-radius: 15px;

    background: #ffffff;
}

.card-label[b-n9rnhz46zs] {
    display: block;

    margin-bottom: 8px;

    color: #64837b;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.sources-intro h2[b-n9rnhz46zs] {
    margin: 0 0 8px;

    color: #243044;

    font-size: 20px;
}

.sources-intro p[b-n9rnhz46zs] {
    max-width: 760px;

    margin: 0;

    color: #707a89;

    font-size: 13px;
    line-height: 1.65;
}


/* Quellenliste */

.sources-list[b-n9rnhz46zs] {
    display: grid;

    gap: 12px;
}

.source-card[b-n9rnhz46zs] {
    display: grid;

    grid-template-columns: 56px minmax(0, 1fr);

    gap: 18px;

    padding: 24px 26px;

    border: 1px solid #e5e9e7;
    border-radius: 16px;

    background: #ffffff;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.source-card:hover[b-n9rnhz46zs] {
    transform: translateY(-1px);

    border-color: #d2ddd9;

    box-shadow:
        0 6px 20px rgba(23, 48, 43, 0.05);
}

.source-number[b-n9rnhz46zs] {
    color: #9aaba6;

    font-size: 18px;
    font-weight: 800;
}

.source-organisation[b-n9rnhz46zs] {
    display: block;

    margin-bottom: 7px;

    color: #548176;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.source-content h2[b-n9rnhz46zs] {
    max-width: 760px;

    margin: 0 0 10px;

    color: #273247;

    font-size: 18px;
    line-height: 1.35;
}

.source-content p[b-n9rnhz46zs] {
    max-width: 790px;

    margin: 0 0 15px;

    color: #707988;

    font-size: 13px;
    line-height: 1.65;
}


/* Metadaten */

.source-meta[b-n9rnhz46zs] {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 15px;
}

.source-meta span[b-n9rnhz46zs] {
    padding: 5px 9px;

    border-radius: 999px;

    background: #f0f5f3;

    color: #536b65;

    font-size: 10px;
    font-weight: 700;
}


/* Link zur Originalquelle */

.source-link[b-n9rnhz46zs] {
    display: inline-flex;
    align-items: center;

    min-height: 38px;

    padding: 0 14px;

    border: 1px solid #d5e3df;
    border-radius: 9px;

    background: #f4f8f7;

    color: #173f38;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.source-link:hover[b-n9rnhz46zs] {
    transform: translateY(-1px);

    border-color: #aac8c0;

    background: #eaf3f0;

    color: #173f38;

    text-decoration: none;
}


/* Hinweis */

.sources-note[b-n9rnhz46zs] {
    margin-top: 20px;
    padding: 18px 20px;

    border-left: 4px solid #7da99d;
    border-radius: 10px;

    background: #f5f8f7;
}

.sources-note strong[b-n9rnhz46zs] {
    display: block;

    margin-bottom: 5px;

    color: #34463f;

    font-size: 12px;
}

.sources-note p[b-n9rnhz46zs] {
    margin: 0;

    color: #727d79;

    font-size: 11px;
    line-height: 1.6;
}


/* Noch keine Quellen */

.sources-empty[b-n9rnhz46zs] {
    padding: 40px;

    border: 1px solid #e5e9e7;
    border-radius: 18px;

    background: #ffffff;
}

.sources-empty h1[b-n9rnhz46zs] {
    margin-top: 0;

    color: #273247;
}

.sources-empty p[b-n9rnhz46zs] {
    color: #707988;
}

.sources-empty a[b-n9rnhz46zs] {
    color: #1b5147;

    font-weight: 700;

    text-decoration: none;
}


/* Tablet */

@media (max-width: 800px) {

    .sources-header[b-n9rnhz46zs] {
        padding: 28px 26px;
    }

    .source-card[b-n9rnhz46zs] {
        padding: 21px 22px;
    }
}


/* Smartphone */

@media (max-width: 520px) {

    .sources-page[b-n9rnhz46zs] {
        padding:
            4px
            2px
            40px;
    }

    .back-link[b-n9rnhz46zs] {
        margin-bottom: 18px;
    }

    .sources-header[b-n9rnhz46zs] {
        padding: 24px 20px;

        border-radius: 16px;
    }

    .sources-header h1[b-n9rnhz46zs] {
        font-size: 34px;
    }

    .sources-header > p[b-n9rnhz46zs] {
        font-size: 14px;
    }

    .sources-status[b-n9rnhz46zs] {
        width: 100%;

        box-sizing: border-box;
    }

    .sources-intro[b-n9rnhz46zs] {
        padding: 19px 18px;
    }

    .source-card[b-n9rnhz46zs] {
        grid-template-columns: 1fr;

        gap: 8px;

        padding: 20px 18px;
    }

    .source-number[b-n9rnhz46zs] {
        font-size: 13px;
    }

    .source-content h2[b-n9rnhz46zs] {
        font-size: 17px;
    }

    .source-link[b-n9rnhz46zs] {
        width: 100%;

        box-sizing: border-box;

        justify-content: center;
    }

    .sources-note[b-n9rnhz46zs] {
        margin-top: 14px;
    }
}
/* /Components/Pages/EpisodeSources.razor.rz.scp.css */
.sources-page[b-qvsmpuxeah] {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 8px 60px;
    box-sizing: border-box;
}


/* Zurück */

.back-link[b-qvsmpuxeah] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 28px;

    color: #58726c;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}

.back-link:hover[b-qvsmpuxeah] {
    color: #173f38;
}


/* Kopfbereich */

.sources-header[b-qvsmpuxeah] {
    margin-bottom: 26px;
    padding: 34px 36px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #153f38 0%,
            #1b4b43 60%,
            #24574e 100%
        );

    color: #ffffff;
}

.eyebrow[b-qvsmpuxeah] {
    display: block;

    margin-bottom: 12px;

    color: #a8d9ce;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.sources-header h1[b-qvsmpuxeah] {
    margin: 0 0 12px;

    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.05;

    letter-spacing: -0.04em;
}

.sources-header > p[b-qvsmpuxeah] {
    max-width: 700px;

    margin: 0;

    color: #d7e6e2;

    font-size: 16px;
    line-height: 1.6;
}


/* Prüfstatus */

.sources-status[b-qvsmpuxeah] {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-top: 24px;
    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.07);
}

.sources-status .status-dot[b-qvsmpuxeah] {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #9dd8c9;
}

.sources-status div[b-qvsmpuxeah] {
    display: flex;
    flex-direction: column;
}

.sources-status strong[b-qvsmpuxeah] {
    font-size: 12px;
}

.sources-status span[b-qvsmpuxeah] {
    margin-top: 2px;

    color: #bdd4ce;

    font-size: 10px;
}


/* Einleitung */

.sources-intro[b-qvsmpuxeah] {
    margin-bottom: 18px;
    padding: 22px 26px;

    border: 1px solid #e5e9e7;
    border-radius: 15px;

    background: #ffffff;
}

.card-label[b-qvsmpuxeah] {
    display: block;

    margin-bottom: 8px;

    color: #64837b;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.sources-intro h2[b-qvsmpuxeah] {
    margin: 0 0 8px;

    color: #243044;

    font-size: 20px;
}

.sources-intro p[b-qvsmpuxeah] {
    max-width: 760px;

    margin: 0;

    color: #707a89;

    font-size: 13px;
    line-height: 1.65;
}


/* Quellenliste */

.sources-list[b-qvsmpuxeah] {
    display: grid;

    gap: 12px;
}

.source-card[b-qvsmpuxeah] {
    display: grid;

    grid-template-columns: 56px minmax(0, 1fr);

    gap: 18px;

    padding: 24px 26px;

    border: 1px solid #e5e9e7;
    border-radius: 16px;

    background: #ffffff;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.source-card:hover[b-qvsmpuxeah] {
    transform: translateY(-1px);

    border-color: #d2ddd9;

    box-shadow:
        0 6px 20px rgba(23, 48, 43, 0.05);
}

.source-number[b-qvsmpuxeah] {
    color: #9aaba6;

    font-size: 18px;
    font-weight: 800;
}

.source-organisation[b-qvsmpuxeah] {
    display: block;

    margin-bottom: 7px;

    color: #548176;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.source-content h2[b-qvsmpuxeah] {
    max-width: 760px;

    margin: 0 0 10px;

    color: #273247;

    font-size: 18px;
    line-height: 1.35;
}

.source-content p[b-qvsmpuxeah] {
    max-width: 790px;

    margin: 0 0 15px;

    color: #707988;

    font-size: 13px;
    line-height: 1.65;
}


/* Metadaten */

.source-meta[b-qvsmpuxeah] {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 15px;
}

.source-meta span[b-qvsmpuxeah] {
    padding: 5px 9px;

    border-radius: 999px;

    background: #f0f5f3;

    color: #536b65;

    font-size: 10px;
    font-weight: 700;
}


/* Link zur Originalquelle */

.source-link[b-qvsmpuxeah] {
    display: inline-flex;
    align-items: center;

    min-height: 38px;

    padding: 0 14px;

    border: 1px solid #d5e3df;
    border-radius: 9px;

    background: #f4f8f7;

    color: #173f38;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.source-link:hover[b-qvsmpuxeah] {
    transform: translateY(-1px);

    border-color: #aac8c0;

    background: #eaf3f0;

    color: #173f38;

    text-decoration: none;
}


/* Hinweis */

.sources-note[b-qvsmpuxeah] {
    margin-top: 20px;
    padding: 18px 20px;

    border-left: 4px solid #7da99d;
    border-radius: 10px;

    background: #f5f8f7;
}

.sources-note strong[b-qvsmpuxeah] {
    display: block;

    margin-bottom: 5px;

    color: #34463f;

    font-size: 12px;
}

.sources-note p[b-qvsmpuxeah] {
    margin: 0;

    color: #727d79;

    font-size: 11px;
    line-height: 1.6;
}


/* Noch keine Quellen */

.sources-empty[b-qvsmpuxeah] {
    padding: 40px;

    border: 1px solid #e5e9e7;
    border-radius: 18px;

    background: #ffffff;
}

.sources-empty h1[b-qvsmpuxeah] {
    margin-top: 0;

    color: #273247;
}

.sources-empty p[b-qvsmpuxeah] {
    color: #707988;
}

.sources-empty a[b-qvsmpuxeah] {
    color: #1b5147;

    font-weight: 700;

    text-decoration: none;
}


/* Tablet */

@media (max-width: 800px) {

    .sources-header[b-qvsmpuxeah] {
        padding: 28px 26px;
    }

    .source-card[b-qvsmpuxeah] {
        padding: 21px 22px;
    }
}


/* Smartphone */

@media (max-width: 520px) {

    .sources-page[b-qvsmpuxeah] {
        padding:
            4px
            2px
            40px;
    }

    .back-link[b-qvsmpuxeah] {
        margin-bottom: 18px;
    }

    .sources-header[b-qvsmpuxeah] {
        padding: 24px 20px;

        border-radius: 16px;
    }

    .sources-header h1[b-qvsmpuxeah] {
        font-size: 34px;
    }

    .sources-header > p[b-qvsmpuxeah] {
        font-size: 14px;
    }

    .sources-status[b-qvsmpuxeah] {
        width: 100%;

        box-sizing: border-box;
    }

    .sources-intro[b-qvsmpuxeah] {
        padding: 19px 18px;
    }

    .source-card[b-qvsmpuxeah] {
        grid-template-columns: 1fr;

        gap: 8px;

        padding: 20px 18px;
    }

    .source-number[b-qvsmpuxeah] {
        font-size: 13px;
    }

    .source-content h2[b-qvsmpuxeah] {
        font-size: 17px;
    }

    .source-link[b-qvsmpuxeah] {
        width: 100%;

        box-sizing: border-box;

        justify-content: center;
    }

    .sources-note[b-qvsmpuxeah] {
        margin-top: 14px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* =========================================================
   AUDIOCAMPUS DASHBOARD
   ========================================================= */

.dashboard[b-wa138vm1qg] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 42px 42px 70px;
    box-sizing: border-box;
}


/* =========================================================
   WILLKOMMEN
   ========================================================= */

.welcome[b-wa138vm1qg] {
    margin-bottom: 26px;
}

.welcome-copy[b-wa138vm1qg] {
    max-width: 760px;
}

.eyebrow[b-wa138vm1qg] {
    display: block;
    margin-bottom: 10px;

    color: #667d78;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.welcome h1[b-wa138vm1qg] {
    margin: 0 0 10px;

    color: #172722;

    font-size: 42px;
    font-weight: 760;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.welcome p[b-wa138vm1qg] {
    max-width: 700px;
    margin: 0;

    color: #6e7c78;

    font-size: 16px;
    line-height: 1.6;
}


/* =========================================================
   WEITERHÖREN
   ========================================================= */

.continue-card[b-wa138vm1qg] {
    position: relative;
    overflow: hidden;

    width: 100%;
    box-sizing: border-box;

    margin-bottom: 24px;
    padding: 26px 30px 28px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #153f38 0%,
            #1b4b43 55%,
            #24574e 100%
        );

    box-shadow:
        0 18px 45px rgba(20, 43, 39, 0.12);
}

.continue-card[b-wa138vm1qg]::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -120px;
    top: -150px;

    border-radius: 50%;

    background: rgba(199, 237, 227, 0.06);

    pointer-events: none;
}

.continue-heading[b-wa138vm1qg] {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;
}

.continue-info[b-wa138vm1qg] {
    min-width: 0;
}

.continue-label[b-wa138vm1qg] {
    display: block;

    margin-bottom: 5px;

    color: #a8d9ce;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.continue-info h2[b-wa138vm1qg] {
    margin: 0;

    color: #ffffff;

    font-size: 23px;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.continue-info p[b-wa138vm1qg] {
    max-width: 580px;

    margin: 8px 0 0;

    color: #c7d9d5;

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   WEITERHÖREN BUTTON
   ========================================================= */

.continue-play-button[b-wa138vm1qg] {
    min-width: 220px;
    min-height: 64px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 8px 18px 8px 9px;

    border: 0;
    border-radius: 15px;

    background: #ffffff;
    color: #173b34;

    cursor: pointer;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.continue-play-button:hover[b-wa138vm1qg] {
    transform: translateY(-1px);

    background: #f6fbf9;

    box-shadow:
        0 11px 28px rgba(0, 0, 0, 0.16);
}

.continue-play-icon[b-wa138vm1qg] {
    width: 46px;
    height: 46px;
    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #dff0eb;
    color: #17463d;

    font-size: 15px;

    padding-left: 2px;
}

.continue-play-text[b-wa138vm1qg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    text-align: left;
}

.continue-play-text strong[b-wa138vm1qg] {
    color: #173b34;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.continue-play-text small[b-wa138vm1qg] {
    margin-top: 3px;

    color: #70837e;

    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   WEITERHÖREN FORTSCHRITT
   ========================================================= */

.continue-progress-area[b-wa138vm1qg] {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 22px;
}

.continue-progress-track[b-wa138vm1qg] {
    flex: 1;

    height: 4px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 255, 255, .17);
}

.continue-progress-track div[b-wa138vm1qg] {
    height: 100%;

    border-radius: inherit;

    background: #c7e6de;
}

.continue-progress-area > span[b-wa138vm1qg] {
    min-width: 75px;

    color: #bad4ce;

    font-size: 11px;
    font-weight: 700;

    text-align: right;
}


/* =========================================================
   DASHBOARD KARTEN
   ========================================================= */

.dashboard-grid[b-wa138vm1qg] {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 42px;
}

.info-card[b-wa138vm1qg] {
    position: relative;

    min-height: 190px;

    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 24px;

    box-sizing: border-box;

    border: 1px solid rgba(42, 66, 60, 0.06);
    border-radius: 19px;

    box-shadow:
        0 8px 26px rgba(31, 50, 45, 0.035);

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.info-card:hover[b-wa138vm1qg] {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(31, 50, 45, 0.055);
}


/* dezente individuelle Farbtöne */

.info-card-anesthesia[b-wa138vm1qg] {
    background:
        linear-gradient(
            135deg,
            #f0f7fb 0%,
            #e9f3f8 100%
        );
}

.info-card-progress[b-wa138vm1qg] {
    background:
        linear-gradient(
            135deg,
            #f0f8f4 0%,
            #e8f4ee 100%
        );
}

.info-card-repeat[b-wa138vm1qg] {
    background:
        linear-gradient(
            135deg,
            #fbf5ee 0%,
            #f8efe5 100%
        );
}

.info-card-quiz[b-wa138vm1qg] {
    background:
        linear-gradient(
            135deg,
            #f6f3fa 0%,
            #f0edf7 100%
        );
}


/* =========================================================
   KARTEN ICONS
   ========================================================= */

.info-card-icon[b-wa138vm1qg] {
    width: 52px;
    height: 52px;
    min-width: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    font-size: 19px;
    font-weight: 800;
}

.info-card-anesthesia .info-card-icon[b-wa138vm1qg] {
    background: #dcecf5;
    color: #356b87;
}

.info-card-progress .info-card-icon[b-wa138vm1qg] {
    background: #d9ede2;
    color: #35725d;
}

.info-card-repeat .info-card-icon[b-wa138vm1qg] {
    background: #f3dfca;
    color: #936544;
}

.info-card-quiz .info-card-icon[b-wa138vm1qg] {
    background: #e4ddf1;
    color: #67588a;
}

.info-card-content[b-wa138vm1qg] {
    min-width: 0;
    flex: 1;
}


/* =========================================================
   KARTEN TYPOGRAFIE
   ========================================================= */

.card-label[b-wa138vm1qg] {
    display: block;

    margin-bottom: 8px;

    color: #71827d;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.info-card h3[b-wa138vm1qg] {
    margin: 0 0 8px;

    color: #20322d;

    font-size: 20px;
    font-weight: 760;
    line-height: 1.25;

    letter-spacing: -0.015em;
}

.info-card p[b-wa138vm1qg] {
    margin: 0;

    color: #71807c;

    font-size: 13px;
    line-height: 1.5;
}

.info-card a[b-wa138vm1qg] {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-top: 17px;

    color: #315f56;

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;
}

.info-card a span[b-wa138vm1qg] {
    transition: transform .15s ease;
}

.info-card a:hover span[b-wa138vm1qg] {
    transform: translateX(3px);
}


/* =========================================================
   AKTUELLE FOLGEN
   ========================================================= */

.episode-discovery[b-wa138vm1qg] {
    margin-top: 4px;
}

.episode-discovery-heading[b-wa138vm1qg] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 17px;
}

.section-label[b-wa138vm1qg] {
    display: block;

    margin-bottom: 4px;

    color: #799088;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.episode-discovery-heading h2[b-wa138vm1qg] {
    margin: 0;

    color: #1c2d28;

    font-size: 25px;
    font-weight: 760;
    letter-spacing: -0.025em;
}

.episode-discovery-link[b-wa138vm1qg] {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #386a60;

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;
}

.episode-discovery-link span[b-wa138vm1qg] {
    transition: transform .15s ease;
}

.episode-discovery-link:hover span[b-wa138vm1qg] {
    transform: translateX(3px);
}


/* =========================================================
   FOLGENKARTEN
   ========================================================= */

.episode-preview-grid[b-wa138vm1qg] {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 17px;
}

.episode-preview-card[b-wa138vm1qg] {
    overflow: hidden;

    display: block;

    border: 1px solid #e3e9e6;
    border-radius: 18px;

    background: #ffffff;

    color: inherit;

    text-decoration: none;

    box-shadow:
        0 7px 24px rgba(28, 48, 42, 0.045);

    transition:
        transform .17s ease,
        box-shadow .17s ease;
}

.episode-preview-card:hover[b-wa138vm1qg] {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(28, 48, 42, 0.07);

    text-decoration: none;
}


/* vorläufige Bildfläche:
   hier kommen später die echten Folgenbilder hinein */

.episode-preview-image[b-wa138vm1qg] {
    position: relative;

    min-height: 145px;

    display: flex;
    align-items: flex-end;

    padding: 18px;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(151, 206, 194, 0.45),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #173f38 0%,
            #285d53 100%
        );
}

.episode-preview-number[b-wa138vm1qg] {
    position: absolute;

    top: 15px;
    right: 16px;

    color: rgba(255, 255, 255, 0.28);

    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.episode-preview-image-text[b-wa138vm1qg] {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.episode-preview-image-text span[b-wa138vm1qg] {
    color: #a9d8ce;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.episode-preview-image-text strong[b-wa138vm1qg] {
    max-width: 230px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 720;
    line-height: 1.25;
}

.episode-preview-body[b-wa138vm1qg] {
    padding: 17px 18px 18px;
}

.episode-preview-category[b-wa138vm1qg] {
    display: block;

    margin-bottom: 6px;

    color: #52766e;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.episode-preview-body h3[b-wa138vm1qg] {
    margin: 0 0 6px;

    color: #22332e;

    font-size: 15px;
    font-weight: 750;
    line-height: 1.3;
}

.episode-preview-body p[b-wa138vm1qg] {
    margin: 0;

    color: #87928f;

    font-size: 12px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .dashboard[b-wa138vm1qg] {
        padding: 36px 28px 60px;
    }

    .episode-preview-grid[b-wa138vm1qg] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .dashboard[b-wa138vm1qg] {
        padding: 25px 16px 42px;
    }


    /* Willkommen */

    .welcome[b-wa138vm1qg] {
        margin-bottom: 21px;
    }

    .eyebrow[b-wa138vm1qg] {
        font-size: 9px;
        margin-bottom: 8px;
    }

    .welcome h1[b-wa138vm1qg] {
        font-size: 31px;
    }

    .welcome p[b-wa138vm1qg] {
        font-size: 14px;
        line-height: 1.55;
    }


    /* Weiterhören */

    .continue-card[b-wa138vm1qg] {
        padding: 21px 19px 22px;

        border-radius: 17px;

        margin-bottom: 16px;
    }

    .continue-heading[b-wa138vm1qg] {
        align-items: stretch;
        flex-direction: column;

        gap: 18px;
    }

    .continue-info h2[b-wa138vm1qg] {
        font-size: 20px;
    }

    .continue-info p[b-wa138vm1qg] {
        font-size: 13px;
    }

    .continue-play-button[b-wa138vm1qg] {
        width: 100%;
        min-width: 0;
    }

    .continue-progress-area[b-wa138vm1qg] {
        margin-top: 17px;
    }


    /* Dashboard Karten */

    .dashboard-grid[b-wa138vm1qg] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 11px;

        margin-bottom: 35px;
    }

    .info-card[b-wa138vm1qg] {
        min-height: 205px;

        display: block;

        padding: 17px;

        border-radius: 16px;
    }

    .info-card-icon[b-wa138vm1qg] {
        width: 43px;
        height: 43px;
        min-width: 43px;

        margin-bottom: 14px;

        border-radius: 13px;

        font-size: 16px;
    }

    .card-label[b-wa138vm1qg] {
        margin-bottom: 6px;

        font-size: 8px;
        letter-spacing: 0.09em;
    }

    .info-card h3[b-wa138vm1qg] {
        font-size: 16px;
    }

    .info-card p[b-wa138vm1qg] {
        font-size: 11px;
        line-height: 1.45;
    }

    .info-card a[b-wa138vm1qg] {
        margin-top: 12px;

        font-size: 11px;
    }


    /* Folgen */

    .episode-discovery-heading[b-wa138vm1qg] {
        align-items: center;
    }

    .episode-discovery-heading h2[b-wa138vm1qg] {
        font-size: 22px;
    }

    .episode-discovery-link[b-wa138vm1qg] {
        font-size: 12px;
    }

    .episode-preview-grid[b-wa138vm1qg] {
        display: flex;

        width: calc(100% + 16px);

        gap: 12px;

        overflow-x: auto;

        margin-right: -16px;
        padding: 2px 16px 12px 0;

        scroll-snap-type: x proximity;

        scrollbar-width: none;
    }

    .episode-preview-grid[b-wa138vm1qg]::-webkit-scrollbar {
        display: none;
    }

    .episode-preview-card[b-wa138vm1qg] {
        flex: 0 0 78%;

        scroll-snap-align: start;

        border-radius: 16px;
    }

    .episode-preview-image[b-wa138vm1qg] {
        min-height: 135px;
    }

}


/* =========================================================
   SEHR KLEINE HANDYS
   ========================================================= */

@media (max-width: 390px) {

    .dashboard-grid[b-wa138vm1qg] {
        grid-template-columns: 1fr;
    }

    .info-card[b-wa138vm1qg] {
        min-height: auto;

        display: flex;
    }

    .info-card-icon[b-wa138vm1qg] {
        margin-bottom: 0;
    }

}
/* /Components/Pages/Impressum.razor.rz.scp.css */
.legal-page[b-m6t6rex7rg] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 8px 60px;
    box-sizing: border-box;
}

.legal-back[b-m6t6rex7rg] {
    display: inline-block;
    margin-bottom: 26px;
    color: #58726c;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.legal-back:hover[b-m6t6rex7rg] {
    color: #173f38;
}


/* Kopfbereich */

.legal-header[b-m6t6rex7rg] {
    margin-bottom: 20px;
    padding: 32px 34px;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        #153f38 0%,
        #1b4b43 60%,
        #24574e 100%
    );
    color: #ffffff;
}

.legal-label[b-m6t6rex7rg] {
    display: block;
    margin-bottom: 10px;
    color: #a8d9ce;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.legal-header h1[b-m6t6rex7rg] {
    margin: 0 0 8px;
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.legal-header p[b-m6t6rex7rg] {
    margin: 0;
    color: #d7e6e2;
    font-size: 13px;
}


/* Inhaltskarten */

.legal-card[b-m6t6rex7rg] {
    margin-bottom: 12px;
    padding: 22px 26px;
    border: 1px solid #e5e9e7;
    border-radius: 15px;
    background: #ffffff;
}

.legal-card h2[b-m6t6rex7rg] {
    margin: 0 0 10px;
    color: #273247;
    font-size: 17px;
    line-height: 1.3;
}

.legal-card p[b-m6t6rex7rg] {
    margin: 0;
    color: #657080;
    font-size: 13px;
    line-height: 1.7;
}

.legal-card p + p[b-m6t6rex7rg] {
    margin-top: 10px;
}

.legal-card strong[b-m6t6rex7rg] {
    color: #273247;
}

.legal-card a[b-m6t6rex7rg] {
    color: #1b6255;
    font-weight: 700;
    text-decoration: none;
}

.legal-card a:hover[b-m6t6rex7rg] {
    text-decoration: underline;
}


/* Stand */

.legal-status[b-m6t6rex7rg] {
    margin-top: 22px;
    color: #89928f;
    font-size: 11px;
}


/* Smartphone */

@media (max-width: 520px) {

    .legal-page[b-m6t6rex7rg] {
        padding: 4px 2px 40px;
    }

    .legal-back[b-m6t6rex7rg] {
        margin-bottom: 18px;
    }

    .legal-header[b-m6t6rex7rg] {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .legal-header h1[b-m6t6rex7rg] {
        font-size: 32px;
    }

    .legal-card[b-m6t6rex7rg] {
        padding: 19px 18px;
    }
}
/* /Components/Pages/Lernplan.razor.rz.scp.css */
/* =========================================================
   GRUNDLAYOUT
   ========================================================= */

.learning-plan[b-59g67yr0l4] {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 10px 8px 60px;

    box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.plan-header[b-59g67yr0l4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 30px;
}

.plan-header > div:first-child[b-59g67yr0l4] {
    max-width: 760px;
}

.eyebrow[b-59g67yr0l4] {
    display: block;

    margin-bottom: 10px;

    color: #64837b;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.plan-header h1[b-59g67yr0l4] {
    margin: 0 0 14px;

    color: #172036;

    font-size: clamp(38px, 5vw, 56px);
    line-height: 1.04;

    letter-spacing: -0.045em;
}

.plan-header p[b-59g67yr0l4] {
    max-width: 700px;

    margin: 0;

    color: #687184;

    font-size: 17px;
    line-height: 1.65;
}


/* =========================================================
   GESAMTFORTSCHRITT
   ========================================================= */

.plan-summary[b-59g67yr0l4] {
    min-width: 220px;

    padding: 22px 24px;

    border: 1px solid #e5e9e7;
    border-radius: 16px;

    background: #ffffff;
}

.plan-summary strong[b-59g67yr0l4] {
    display: block;

    color: #1d4e45;

    font-size: 32px;
}

.plan-summary span[b-59g67yr0l4],
.plan-summary small[b-59g67yr0l4] {
    display: block;
}

.plan-summary span[b-59g67yr0l4] {
    margin-top: 2px;

    color: #354052;

    font-size: 13px;
    font-weight: 700;
}

.plan-summary small[b-59g67yr0l4] {
    margin-top: 8px;

    color: #7a8495;

    font-size: 12px;
}


/* =========================================================
   LEGENDE
   ========================================================= */

.legend[b-59g67yr0l4] {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 24px;

    padding: 14px 18px;

    border: 1px solid #e8ebe9;
    border-radius: 12px;

    background: #ffffff;
}

.legend > div[b-59g67yr0l4] {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #596375;

    font-size: 12px;
    font-weight: 650;
}

.status-dot[b-59g67yr0l4] {
    width: 10px;
    height: 10px;

    border-radius: 50%;
}

.status-open[b-59g67yr0l4] {
    background: #d9dde4;
}

.status-once[b-59g67yr0l4] {
    background: #e6b84a;
}

.status-twice[b-59g67yr0l4] {
    background: #4e9b79;
}


/* =========================================================
   WEITERBILDUNGSJAHR AUSWAHL
   ========================================================= */

.year-selector[b-59g67yr0l4] {
    width: 100%;

    margin-bottom: 24px;

    padding: 17px 28px 18px;

    box-sizing: border-box;

    border: 1px solid #e4e9e7;
    border-radius: 16px;

    background: #ffffff;
}

.year-selector-title[b-59g67yr0l4] {
    margin-bottom: 13px;

    color: #72817d;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-align: center;
    text-transform: uppercase;
}


/* =========================================================
   ZAHLEN 1–5
   ========================================================= */

.year-tabs[b-59g67yr0l4] {
    position: relative;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    align-items: center;

    max-width: 760px;

    margin: 0 auto;
}


/* dezente Verbindungslinie */

.year-tabs[b-59g67yr0l4]::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 10%;
    right: 10%;

    height: 1px;

    background: #e1e8e5;

    transform: translateY(-50%);

    z-index: 0;
}


/* einzelne Jahreszahl */

.year-tab[b-59g67yr0l4] {
    position: relative;

    z-index: 1;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    justify-self: center;

    padding: 0;

    border: 1px solid #dce4e1;
    border-radius: 50%;

    background: #ffffff;

    color: #66746f;

    font-size: 17px;
    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 2px 6px rgba(23, 48, 43, 0.03);

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.year-tab:hover[b-59g67yr0l4] {
    border-color: #9ebdb5;

    background: #f4f9f7;

    color: #1c4c43;

    transform: translateY(-1px);

    box-shadow:
        0 4px 10px rgba(23, 63, 56, 0.08);
}


/* aktives Weiterbildungsjahr */

.year-tab.active[b-59g67yr0l4] {
    border-color: #1c4c43;

    background: #1c4c43;

    color: #ffffff;

    box-shadow:
        0 5px 14px rgba(28, 76, 67, 0.20);

    transform: scale(1.06);
}


/* =========================================================
   JAHR ÜBERSICHT
   ========================================================= */

.year-overview[b-59g67yr0l4] {
    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(260px, 0.7fr);

    gap: 40px;

    margin-bottom: 20px;

    padding: 28px 30px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #153f38 0%,
            #1b4b43 60%,
            #24574e 100%
        );

    color: #ffffff;
}

.year-overview .eyebrow[b-59g67yr0l4] {
    color: #a8d9ce;
}

.year-overview h2[b-59g67yr0l4] {
    margin: 0 0 10px;

    font-size: 25px;

    letter-spacing: -0.025em;
}

.year-overview p[b-59g67yr0l4] {
    max-width: 690px;

    margin: 0;

    color: #d6e5e1;

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   JAHR-FORTSCHRITT
   ========================================================= */

.year-progress[b-59g67yr0l4] {
    align-self: center;
}

.progress-numbers[b-59g67yr0l4] {
    margin-bottom: 10px;
}

.progress-numbers strong[b-59g67yr0l4] {
    margin-right: 5px;

    font-size: 26px;
}

.progress-numbers span[b-59g67yr0l4] {
    color: #d5e5e1;

    font-size: 12px;
}

.year-progress-bar[b-59g67yr0l4] {
    height: 7px;

    overflow: hidden;

    margin-bottom: 8px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.14);
}

.year-progress-bar > div[b-59g67yr0l4] {
    height: 100%;

    border-radius: inherit;

    background: #b8e0d5;
}

.year-progress small[b-59g67yr0l4] {
    color: #bcd1cc;

    font-size: 11px;
}


/* =========================================================
   THEMEN
   ========================================================= */

.topic-list[b-59g67yr0l4] {
    display: grid;

    gap: 9px;
}

.topic-card[b-59g67yr0l4] {
    display: grid;

    grid-template-columns:
        54px
        minmax(0, 1fr)
        180px;

    align-items: center;

    gap: 18px;

    min-height: 105px;

    padding: 17px 20px;

    border: 1px solid #e7e9ee;
    border-radius: 14px;

    background: #ffffff;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.topic-card:hover[b-59g67yr0l4] {
    transform: translateY(-1px);

    border-color: #d4dadf;

    box-shadow:
        0 5px 18px rgba(28, 40, 58, 0.04);
}


/* =========================================================
   EINMAL GEHÖRT = GELB
   ========================================================= */

.topic-learned[b-59g67yr0l4] {
    border-left: 5px solid #e6b84a;

    background: #fffdf6;
}


/* =========================================================
   ZWEIMAL GEHÖRT = GRÜN
   ========================================================= */

.topic-mastered[b-59g67yr0l4] {
    border-left: 5px solid #4e9b79;

    background: #f7fbf9;
}


.topic-number[b-59g67yr0l4] {
    color: #98a0ad;

    font-size: 18px;
    font-weight: 800;
}

.topic-meta[b-59g67yr0l4] {
    margin-bottom: 5px;

    color: #738078;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.09em;
}

.topic-content h3[b-59g67yr0l4] {
    margin: 0 0 5px;

    color: #283247;

    font-size: 16px;
}

.topic-content p[b-59g67yr0l4] {
    margin: 0;

    color: #747d8d;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   STATUS
   ========================================================= */

.topic-state[b-59g67yr0l4] {
    display: grid;

    grid-template-columns:
        13px
        1fr
        40px;

    align-items: center;

    gap: 9px;
}

.topic-state span[b-59g67yr0l4] {
    color: #687184;

    font-size: 11px;
    font-weight: 700;
}

.topic-status[b-59g67yr0l4] {
    width: 11px;
    height: 11px;

    border-radius: 50%;
}

.topic-status-open[b-59g67yr0l4] {
    background: #d9dde4;
}

.topic-status-learned[b-59g67yr0l4] {
    background: #e6b84a;
}

.topic-status-mastered[b-59g67yr0l4] {
    background: #4e9b79;
}


/* =========================================================
   PLAY BUTTON
   ========================================================= */

.topic-open[b-59g67yr0l4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #edf3f1;

    color: #173f38;

    text-decoration: none;

    line-height: 1;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}

.topic-open:hover[b-59g67yr0l4] {
    background: #e2eeea;

    color: #173f38;

    text-decoration: none;

    transform: scale(1.04);
}


/* =========================================================
   LEERES WEITERBILDUNGSJAHR
   ========================================================= */

.empty-year[b-59g67yr0l4] {
    padding: 50px 30px;

    border: 1px dashed #d9dee2;
    border-radius: 16px;

    background: #fafbfb;

    text-align: center;
}

.empty-year h3[b-59g67yr0l4] {
    margin: 0 0 8px;

    color: #313b4d;
}

.empty-year p[b-59g67yr0l4] {
    margin: 0;

    color: #7b8492;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .plan-header[b-59g67yr0l4] {
        display: block;
    }

    .plan-summary[b-59g67yr0l4] {
        margin-top: 22px;
    }

    .year-selector[b-59g67yr0l4] {
        padding:
            16px
            18px
            17px;
    }

    .year-tabs[b-59g67yr0l4] {
        max-width: 600px;
    }

    .year-overview[b-59g67yr0l4] {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .topic-card[b-59g67yr0l4] {
        grid-template-columns:
            38px
            minmax(0, 1fr);
    }

    .topic-state[b-59g67yr0l4] {
        grid-column: 2;

        grid-template-columns:
            13px
            1fr
            40px;
    }
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 520px) {

    .learning-plan[b-59g67yr0l4] {
        padding: 4px 2px 40px;
    }

    .plan-header h1[b-59g67yr0l4] {
        font-size: 36px;
    }

    .legend[b-59g67yr0l4] {
        display: grid;

        gap: 10px;
    }


    /* Weiterbildungsjahr kompakt */

    .year-selector[b-59g67yr0l4] {
        margin-bottom: 18px;

        padding:
            14px
            10px
            15px;

        border-radius: 14px;
    }

    .year-selector-title[b-59g67yr0l4] {
        margin-bottom: 12px;

        font-size: 9px;

        letter-spacing: 0.14em;
    }

    .year-tabs[b-59g67yr0l4] {
        width: 100%;

        max-width: none;
    }

    .year-tabs[b-59g67yr0l4]::before {
        left: 10%;
        right: 10%;
    }

    .year-tab[b-59g67yr0l4] {
        width: 40px;
        height: 40px;

        font-size: 15px;
    }

    .year-tab.active[b-59g67yr0l4] {
        transform: scale(1.05);
    }


    /* Jahresübersicht */

    .year-overview[b-59g67yr0l4] {
        padding: 23px 20px;
    }

    .year-overview h2[b-59g67yr0l4] {
        font-size: 22px;
    }


    /* Themen */

    .topic-card[b-59g67yr0l4] {
        padding: 16px 14px;
    }
}


/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 360px) {

    .year-selector[b-59g67yr0l4] {
        padding-left: 6px;
        padding-right: 6px;
    }

    .year-tab[b-59g67yr0l4] {
        width: 36px;
        height: 36px;

        font-size: 14px;
    }
}

/* =========================================================
   KLICKBARE FOLGENKARTEN
   ========================================================= */

.topic-card-link[b-59g67yr0l4] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.topic-card-link:visited[b-59g67yr0l4] {
    color: inherit;
}

.topic-card-link:hover[b-59g67yr0l4] {
    text-decoration: none;
}

.topic-card-link h3[b-59g67yr0l4],
.topic-card-link p[b-59g67yr0l4],
.topic-card-link .topic-meta[b-59g67yr0l4],
.topic-card-link .topic-state[b-59g67yr0l4] {
    color: inherit;
}

.topic-arrow[b-59g67yr0l4] {
    margin-left: 8px;
    font-size: 20px;
    line-height: 1;
    transition: transform .16s ease;
}

.topic-card-link:hover .topic-arrow[b-59g67yr0l4] {
    transform: translateX(3px);
}

.topic-card-link:focus-visible[b-59g67yr0l4] {
    outline: 3px solid rgba(67, 112, 101, 0.28);
    outline-offset: 3px;
}