/* /Components/Layout/AuthorizedLayout.razor.rz.scp.css */
[b-374fo6mslv] .authorized-layout__appbar {
    border-bottom: 1px solid var(--app-dark-border);
    background: var(--app-dark-shell);
    backdrop-filter: blur(20px);
    box-shadow: var(--app-shadow-dark-md);
}

[b-374fo6mslv] .authorized-layout__appbar .mud-toolbar-appbar {
    min-height: 4.75rem;
    padding-inline: 1rem;
    padding-block: 0.35rem;
}

[b-374fo6mslv] .authorized-layout__drawer {
    --mud-drawer-width-left: 21rem;
    --mud-drawer-width-mini-left: 5.5rem;
    border-right: 1px solid var(--app-dark-border);
    background: var(--app-dark-shell);
}

[b-374fo6mslv] .authorized-layout__drawer .mud-drawer-content {
    padding-top: 1rem;
    background: transparent;
}

[b-374fo6mslv] .authorized-layout__drawer .nav-menu-shell {
    align-items: stretch;
    padding-inline: 1rem;
}

[b-374fo6mslv] .authorized-layout__drawer .nav-menu {
    width: 100%;
}

[b-374fo6mslv] .authorized-layout__drawer .nav-menu .mud-nav-link {
    justify-content: flex-start;
    padding-inline: 1.1rem;
}

[b-374fo6mslv] .authorized-layout__drawer .nav-menu .mud-nav-link .mud-nav-link-text {
    display: inline;
}

[b-374fo6mslv] .authorized-layout__drawer .nav-menu__section-label {
    display: block;
    text-align: left;
}

[b-374fo6mslv] .authorized-layout__drawer .nav-menu__toggle {
    justify-content: flex-start;
}

[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu-shell {
    padding-inline: 0.5rem;
    align-items: center;
}

[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu .mud-nav-link {
    justify-content: center;
    padding-inline: 0;
}

[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu__toggle {
    width: 100%;
    min-width: 0;
    height: var(--app-nav-item-height);
    min-height: var(--app-nav-item-height);
    margin: 0.25rem 0;
    padding-inline: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    justify-content: center;
    border-radius: var(--app-radius-card) !important;
}

[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu__toggle:hover,
[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu__toggle:focus-visible,
[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed button.mud-button-root.nav-menu__toggle:not(.mud-disabled):hover,
[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed button.mud-button-root.nav-menu__toggle:not(.mud-disabled):focus-visible {
    border-color: var(--app-dark-border-strong) !important;
    background: var(--app-dark-hover) !important;
    box-shadow: var(--app-shadow-dark-sm) !important;
}

[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu__toggle .mud-button-label {
    width: 100%;
    justify-content: center;
    gap: 0;
    font-size: 0;
}

[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu__toggle .mud-icon-root {
    margin: 0 !important;
    font-size: var(--app-nav-icon-size);
}

[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu__toggle .mud-button-start-icon {
    margin: 0 !important;
}

[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu .mud-nav-link .mud-nav-link-text,
[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu__section-label {
    display: none;
}

[b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu__divider {
    margin-inline: 0.4rem;
}

.authorized-layout__shell[b-374fo6mslv] {
    --authorized-layout-mini-width: 5.5rem;
    --authorized-layout-open-width: 21rem;
    --authorized-layout-content-max-width: 90rem;
    --authorized-layout-appbar-height: 4.75rem;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 100dvh;
    background: var(--app-authorized-bg);
}

[b-374fo6mslv] .authorized-layout {
    flex: 1 1 auto;
    height: 100%;
    min-height: 100%;
    background: transparent;
}

[b-374fo6mslv] .authorized-layout__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: calc(100dvh - var(--authorized-layout-appbar-height));
    background: transparent !important;
    transition: margin-left 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

[b-374fo6mslv] .authorized-layout[class*="mud-drawer-open-mini-"][class*="-left"] .authorized-layout__main {
    margin-left: var(--authorized-layout-open-width) !important;
}

[b-374fo6mslv] .authorized-layout[class*="mud-drawer-close-mini-"][class*="-left"] .authorized-layout__main {
    margin-left: var(--authorized-layout-mini-width) !important;
}

.authorized-layout__body[b-374fo6mslv] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: calc(100dvh - var(--authorized-layout-appbar-height));
    background: var(--app-authorized-bg) !important;
    align-items: center;
}

.authorized-layout__content-rail[b-374fo6mslv] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: calc(100dvh - var(--authorized-layout-appbar-height));
    width: min(100%, var(--authorized-layout-content-max-width));
    margin-inline: auto;
    padding-inline: 2rem;
}

[b-374fo6mslv] .authorized-layout__container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    width: 100%;
    background: transparent !important;
    margin-inline: auto;
}

.authorized-layout__body[b-374fo6mslv]  .app-footer {
    width: 100%;
    margin-top: 1rem;
}

@media (max-width: 1280px) {
    .authorized-layout__shell[b-374fo6mslv] {
        --authorized-layout-open-width: 18rem;
        --authorized-layout-content-max-width: 82rem;
    }
}

@media (max-width: 960px) {
    .authorized-layout__shell[b-374fo6mslv] {
        --authorized-layout-content-max-width: 100%;
        --authorized-layout-appbar-height: 4.75rem;
    }

    [b-374fo6mslv] .authorized-layout[class*="mud-drawer-open-mini-"][class*="-left"] .authorized-layout__main,
    [b-374fo6mslv] .authorized-layout[class*="mud-drawer-close-mini-"][class*="-left"] .authorized-layout__main {
        margin-left: var(--authorized-layout-mini-width) !important;
        width: calc(100% - var(--authorized-layout-mini-width));
        max-width: calc(100% - var(--authorized-layout-mini-width));
    }

    .authorized-layout__content-rail[b-374fo6mslv],
    [b-374fo6mslv] .authorized-layout__container {
        max-width: 100%;
        overflow-x: hidden;
    }

    .authorized-layout__content-rail[b-374fo6mslv] {
        padding-inline: 1rem;
    }

    .authorized-layout__body[b-374fo6mslv] {
        align-items: stretch;
    }

    .authorized-layout__body[b-374fo6mslv]  .app-footer {
        margin-top: 0.5rem;
    }
}

@media (max-width: 640px) {
    .authorized-layout__shell[b-374fo6mslv] {
        --authorized-layout-mini-width: 4.5rem;
        --mud-drawer-width-mini-left: 4.5rem;
    }

    [b-374fo6mslv] .authorized-layout__drawer {
        --mud-drawer-width-mini-left: 4.5rem;
    }

    [b-374fo6mslv] .authorized-layout[class*="mud-drawer-open-mini-"][class*="-left"] .authorized-layout__main,
    [b-374fo6mslv] .authorized-layout[class*="mud-drawer-close-mini-"][class*="-left"] .authorized-layout__main {
        width: calc(100% - var(--authorized-layout-mini-width));
        max-width: calc(100% - var(--authorized-layout-mini-width));
    }

    [b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu-shell {
        padding-inline: 0.35rem;
    }

    [b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu .mud-nav-link,
    [b-374fo6mslv] .authorized-layout__drawer.mud-drawer--closed .nav-menu__toggle {
        height: var(--app-nav-item-height-mobile);
        min-height: var(--app-nav-item-height-mobile);
        border-radius: var(--app-radius-section) !important;
    }

    .authorized-layout__content-rail[b-374fo6mslv] {
        padding-inline: 0.75rem;
    }
}
/* /Components/Layout/HomeLayout.razor.rz.scp.css */
/* Blueprint-grid pattern lives here so it covers both the page content AND
   the footer area — the footer is a sibling of the page, so a pattern set
   only on `.home-page` would stop above the footer. Layering it on the
   shell keeps the visual texture continuous all the way to the viewport
   bottom. */
.home-layout-shell[b-bnqb80m6st] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    position: relative;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0/42px 42px,
        linear-gradient(180deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0/42px 42px,
        var(--app-dark-page);
    color: var(--app-dark-ink);
}

[b-bnqb80m6st] .home-layout {
    flex: 1 1 auto;
    min-height: 0;
    background: transparent;
}

[b-bnqb80m6st] .home-layout__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin-top: 0 !important;
    padding: 0;
}

.home-layout__body[b-bnqb80m6st] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    background: transparent;
}

@media (min-width: 1025px) {
    .home-layout-shell[b-bnqb80m6st]  .app-footer {
        min-height: 0;
        padding: 1rem 0 1.2rem;
        align-items: center;
    }

    .home-layout-shell[b-bnqb80m6st]  .app-footer__container {
        align-items: center;
    }

    .home-layout-shell[b-bnqb80m6st]  .app-footer__inner {
        gap: 1rem;
    }
}
/* /Components/Layout/LandingPageLayout.razor.rz.scp.css */
/* Error-page shell. Implements the standalone Handoff design 1:1:
   - Centered logo at the top (no full app-bar)
   - Centered hero with a single error-card
   - Atmospheric dark background with radial blue glows + grid pattern
   - No footer
   The actual error content classes (`.error-card`, `.error-stamp`,
   `.error-btn`, `.error-card__*`) live in `wwwroot/app.css` because the
   content sits in `@Body` and would need `::deep` everywhere otherwise. */

/* Same blueprint-grid pattern as the Home layout shell (42px tiles, faint
   white horizontal + vertical lines on the global dark page colour) so the
   error shell visually belongs to the same family as the Home page. No
   radial glows — clean, calm dark surface. */
.error-shell[b-2l95xbtngc] {
    --error-text: #eaf0ff;
    --error-text-dim: #a6b1d2;
    --error-text-mute: #6f7ba0;
    --error-accent: #9cc0ff;

    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--error-text);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0/42px 42px,
        linear-gradient(180deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0/42px 42px,
        var(--app-dark-page);
    -webkit-font-smoothing: antialiased;
}

.error-shell__topbar[b-2l95xbtngc] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px 8px;
}

.error-shell__hero[b-2l95xbtngc] {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 24px 24px 80px;
}

/* Brand link (logo + kicker + wordmark, all centred horizontally). */
.error-brand[b-2l95xbtngc] {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.error-brand:hover[b-2l95xbtngc] {
    background: rgba(255, 255, 255, 0.04);
}

.error-brand__logo[b-2l95xbtngc] {
    width: 72px;
    height: 72px;
    display: block;
    filter: drop-shadow(0 2px 10px rgba(94, 141, 240, 0.3));
}

.error-brand__text[b-2l95xbtngc] {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.error-brand__kicker[b-2l95xbtngc] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--error-text-mute);
    margin-bottom: 6px;
}

.error-brand__wordmark[b-2l95xbtngc] {
    font-family: "Newsreader", "Source Serif 4", Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
}

@media (max-width: 640px) {
    .error-shell__topbar[b-2l95xbtngc] {
        padding: 20px 16px 4px;
    }

    .error-shell__hero[b-2l95xbtngc] {
        padding: 16px 16px 48px;
    }
}
/* /Components/Pages/Authorized/Shared/Startseite-Kachel.razor.rz.scp.css */
/* Kachel styles live in app.css because MudBlazor renders the card internals outside this component scope. */
/* /Components/Pages/DemoSignup/DemoSignupPage.razor.rz.scp.css */
/*
 * Scoped styles for the Demo signup page.
 *
 * Layout strategy: page reuses HomeLayout (dark chrome). The hero is sized so
 * the form, the back link and the footer all fit in a single viewport on a
 * typical 1080p+ screen — no vertical scroll. That means everything inside
 * the card is deliberately compact (small section labels, tight grid spacing,
 * a single action row).
 *
 * Button styles intentionally echo Home.razor.css:
 *   - Submit ("Einrichten")  — rounded pill, dark-brand fill, soft drop shadow.
 *     Mirrors `home-primary-button` (white-on-dark) but inverted because we
 *     sit on a light card.
 *   - Back link ("Zurück")  — rounded pill, transparent-on-dark with light
 *     border. Same recipe as `home-secondary-button`.
 *
 * `::deep` is required wherever a MudBlazor component renders its own DOM —
 * scoped CSS otherwise can't reach inside it.
 */

.demo-signup-page[b-tzi2thr662] {
    position: relative;
    overflow: hidden;
    color: #f7faff;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 42px 42px;

    --demo-brand: #1A3A54;
    --demo-brand-soft: #2a5278;
    --demo-brand-strong: #0f2536;
    --demo-accent: #abc6ff;
    --demo-ink: #1f2937;
    --demo-ink-soft: rgba(31, 41, 55, 0.7);
    --demo-ink-muted: rgba(31, 41, 55, 0.55);
    --demo-card-border: rgba(26, 58, 84, 0.12);
    --demo-home-ink-soft: rgba(220, 234, 255, 0.7);
    --demo-home-border: rgba(171, 198, 255, 0.16);
    --demo-home-border-strong: rgba(194, 213, 251, 0.32);
}

/* Decorative blurred orbs that pick up the brand glow — purely cosmetic. */
.demo-signup-page__orb[b-tzi2thr662] {
    position: absolute;
    z-index: 0;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.5;
    pointer-events: none;
}

.demo-signup-page__orb--one[b-tzi2thr662] {
    top: -200px;
    left: -180px;
    background: radial-gradient(circle, rgba(171, 198, 255, 0.32), transparent 60%);
}

.demo-signup-page__orb--two[b-tzi2thr662] {
    bottom: -220px;
    right: -180px;
    background: radial-gradient(circle, rgba(26, 58, 84, 0.55), transparent 60%);
}

/* Hero padding kept tight so the whole page (header + card + back + footer)
   fits in one viewport. Tweak the top value if the topbar height changes. */
.demo-signup-page__hero[b-tzi2thr662] {
    padding-block: 1.5rem 2rem;
}

.demo-signup-page__shell[b-tzi2thr662] {
    width: min(1320px, calc(100% - 3rem));
    margin-inline: auto;
}

.demo-signup-page__header[b-tzi2thr662] {
    padding-inline: 0.25rem;
}

/* Pill kicker — brand-tinted, picks up the rocket icon next to it. */
.demo-signup-page__kicker[b-tzi2thr662] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    padding: 0.32rem 0.8rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--demo-accent);
    background: rgba(171, 198, 255, 0.1);
    border: 1px solid rgba(171, 198, 255, 0.25);
    border-radius: 999px;
}

.demo-signup-page__kicker-icon[b-tzi2thr662] {
    color: var(--demo-accent);
}

.demo-signup-page__headline[b-tzi2thr662] {
    margin: 0 0 0.5rem 0;
    font-size: clamp(1.7rem, 2.4vw + 0.6rem, 2.3rem);
    font-weight: 700;
    line-height: 1.1;
    color: #f7faff;
    letter-spacing: -0.01em;
}

.demo-signup-page__lead[b-tzi2thr662] {
    margin: 0;
    max-width: 56ch;
    font-size: 0.96rem;
    line-height: 1.5;
    color: rgba(220, 234, 255, 0.82);
}

/* The form card. Thin brand-accent stripe along the top edge, layered drop
   shadow plus an inner highlight so it doesn't read as a flat rectangle. */
[b-tzi2thr662] .demo-signup-page__card {
    position: relative;
    margin-top: 1.25rem;
    padding: 3rem 2.75rem 2.75rem;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid var(--demo-card-border);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 24px 48px rgba(5, 12, 24, 0.32),
        0 4px 12px rgba(5, 12, 24, 0.18);
    color: var(--demo-ink);
}

[b-tzi2thr662] .demo-signup-page__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--demo-brand), var(--demo-brand-soft));
    opacity: 0.85;
}

.demo-signup-form[b-tzi2thr662] {
    width: 100%;
}

/* Round the outlined inputs to match the rest of the app (Uebermitteln,
   Postfach, etc — all use the global `.content-card` recipe with the same
   `--app-radius-control: 12px` token from wwwroot/app.css). We don't apply
   the full `.content-card` class because it ships its own padding/border/
   background that would fight our card styling — only the rounding bit is
   ported. */
[b-tzi2thr662] .demo-signup-form .mud-input-outlined,
[b-tzi2thr662] .demo-signup-form .mud-input-outlined fieldset {
    border-radius: 12px !important;
}

.demo-signup-form__section-title[b-tzi2thr662] {
    margin: 0 0 0.85rem 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--demo-ink-muted);
}

/* Divider between form sections — uses MudBlazor's default spacing, just
   tints the rule colour to match the card. */
.demo-signup-form__divider[b-tzi2thr662] {
    border-color: rgba(26, 58, 84, 0.08);
}

/* Consent checkboxes: hand-roll a label-row so the checkbox and the wrapped
   text line up cleanly. MudCheckBox wraps its icon in a button with ~9px of
   internal padding — we shrink that to 2px so the visible square sits at the
   top of the component, then nudge the text down a hair to centre on the
   first line's cap height. */
.demo-signup-form__consents[b-tzi2thr662] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.demo-signup-form__consent[b-tzi2thr662] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.3rem 0.4rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.demo-signup-form__consent:hover[b-tzi2thr662] {
    background: rgba(26, 58, 84, 0.04);
}

[b-tzi2thr662] .demo-signup-form__consent-box .mud-icon-button {
    padding: 2px;
}

[b-tzi2thr662] .demo-signup-form__consent-box .mud-icon-button .mud-icon-root {
    width: 1.2rem;
    height: 1.2rem;
}

.demo-signup-form__consent-text[b-tzi2thr662] {
    flex: 1;
    color: var(--demo-ink);
    font-size: 0.95rem;
    line-height: 1.55;
    padding-top: 0.1rem;
}

.demo-signup-form__consent-required[b-tzi2thr662] {
    color: #b91c3c;
    font-weight: 700;
}

/* Action row: submit + cancel on the left, asterisk legend pushed right. */
.demo-signup-form__actions[b-tzi2thr662] {
    margin-top: 1.75rem;
}

/* Asterisk-legend sits on its own row directly under the action buttons.
   Deliberately small + muted so it reads as a footnote, not a form field. */
.demo-signup-form__hint-row[b-tzi2thr662] {
    margin-top: -0.5rem;
    padding-top: 0;
}

.demo-signup-form__hint[b-tzi2thr662] {
    font-size: 0.72rem;
    color: var(--demo-ink-muted);
}

.demo-signup-form__hint-mark[b-tzi2thr662] {
    color: #b91c3c;
    font-weight: 700;
}

/* Primary CTA — rounded pill, brand-dark filled, mirrors the Home page's
   `home-primary-button` aesthetic (just inverted because we sit on white).
   Disabled state keeps the brand colour with reduced opacity so the page
   doesn't feel dead before validation passes. */
[b-tzi2thr662] .demo-signup-form__submit.mud-button-root {
    min-height: 3.2rem;
    padding-inline: 1.8rem;
    border-radius: 999px;
    font-weight: 700;
    color: #ffffff;
    background: var(--demo-brand);
    border: 1px solid var(--demo-brand);
    box-shadow: 0 12px 26px rgba(15, 37, 54, 0.26);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.22s ease,
        background-color 0.22s ease,
        opacity 0.22s ease;
}

[b-tzi2thr662] .demo-signup-form__submit.mud-button-root:not(.mud-disabled):hover,
[b-tzi2thr662] .demo-signup-form__submit.mud-button-root:not(.mud-disabled):focus-visible {
    background: var(--demo-brand-strong) !important;
    transform: translate3d(0.25rem, 0, 0);
    box-shadow: 0 14px 28px rgba(5, 12, 24, 0.28);
}

[b-tzi2thr662] .demo-signup-form__submit.mud-button-root.mud-disabled {
    color: rgba(255, 255, 255, 0.92) !important;
    background: var(--demo-brand) !important;
    border-color: var(--demo-brand) !important;
    opacity: 0.42;
    box-shadow: none;
}

[b-tzi2thr662] .demo-signup-form__cancel.mud-button-root {
    min-height: 3.2rem;
    padding-inline: 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    color: var(--demo-ink-soft);
}

[b-tzi2thr662] .demo-signup-form__cancel.mud-button-root:not(.mud-disabled):hover,
[b-tzi2thr662] .demo-signup-form__cancel.mud-button-root:not(.mud-disabled):focus-visible {
    color: var(--demo-brand) !important;
    background: rgba(26, 58, 84, 0.06) !important;
}

/* "Zurück zur Startseite" sits below the card on the dark hero as a plain
   text link — deliberately understated so the form stays the focus and the
   user already has "Abbrechen" inside the card for the same destination. */
.demo-signup-page__back[b-tzi2thr662] {
    margin-top: 1.5rem;
}

.demo-signup-page__back-link[b-tzi2thr662] {
    color: var(--demo-home-ink-soft);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
    text-decoration-color: transparent;
}

.demo-signup-page__back-link:hover[b-tzi2thr662],
.demo-signup-page__back-link:focus-visible[b-tzi2thr662] {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.6);
    text-underline-offset: 0.25em;
    outline: none;
}

/* On small screens dropping a couple of fields below the fold is acceptable —
   priority is keeping the form usable, not no-scroll. */
@media (max-width: 720px) {
    [b-tzi2thr662] .demo-signup-page__card {
        padding: 1.5rem 1.1rem 1.25rem;
        border-radius: 18px;
    }

    .demo-signup-page__headline[b-tzi2thr662] {
        font-size: clamp(1.55rem, 6vw, 2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-tzi2thr662] .demo-signup-form__submit.mud-button-root,
    .demo-signup-page__back-link[b-tzi2thr662],
    .demo-signup-form__consent[b-tzi2thr662] {
        transition: none;
    }

    [b-tzi2thr662] .demo-signup-form__submit.mud-button-root:hover {
        transform: none;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Flex column on the page lets the proof section center vertically in the
   space between the hero and the footer — `.home-proof { margin-block: auto }`
   below uses this. The page itself fills the layout body via min-height.
   The blueprint-grid pattern is set on `.home-layout-shell` (the outer
   shell, parent of both this page AND the footer) so the texture stays
   continuous across the full viewport — no break at the footer edge. */
/* Sidestep the MudLayout flex-chain entirely: anchor home-page's minimum
   height directly to the viewport (minus the footer's reserved height).
   `.home-layout-shell` is `min-height: 100dvh` and the footer is a sibling
   of MudLayout with `min-height: 168px` (from AppFooter.razor.css). So
   100dvh − 168px is exactly the space the page should occupy above the
   footer — guarantees no empty gap on tall viewports, while still letting
   content overflow naturally when it's taller than the viewport. */
.home-page[b-h3goq3764j] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 168px);
    color: #f7faff;
    --home-accent: #abc6ff;
    --home-accent-strong: #edf3ff;
    --home-bg-soft: #101827;
    --home-surface: rgba(18, 29, 48, 0.88);
    --home-border: rgba(171, 198, 255, 0.16);
    --home-border-strong: rgba(194, 213, 251, 0.32);
    --home-ink-strong: #f7faff;
    --home-ink: rgba(220, 234, 255, 0.82);
    --home-ink-soft: rgba(220, 234, 255, 0.68);
}

/* Hero flex-grows to absorb leftover vertical space, and inside it the shell
   stretches to push the hero-grid down. The pseudo `::after` spacer matches
   the topbar's visual height — so when `align-content: center` on the grid
   centres the content, the topbar at the top is visually balanced by an
   equally-sized empty band at the bottom of the shell. The result: the
   distance from the topbar to the headline equals the distance from the
   path-cards/workflow-panel down to the proof-row. */
.home-hero[b-h3goq3764j] {
    position: relative;
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.home-hero > .home-shell[b-h3goq3764j] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.home-hero > .home-shell[b-h3goq3764j]::after {
    content: "";
    flex-shrink: 0;
    height: clamp(1rem, 2.5vh, 2rem);
}

.home-shell[b-h3goq3764j] {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 3rem));
    margin-inline: auto;
}

/* Transparent topbar: the layout-shell grid pattern shows through. Drop-shadow
   and backdrop-filter removed too — they were there to lift the topbar off a
   solid dark surface, which it no longer sits on. The border stays so the pill
   shape is still readable against the pattern. */
.home-topbar[b-h3goq3764j] {
    position: sticky;
    top: 1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-top: 1.1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--home-border);
    border-radius: 28px;
    background: transparent;
    animation: home-nav-reveal-b-h3goq3764j 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-topbar__brand-cluster[b-h3goq3764j],
.home-topbar__actions[b-h3goq3764j] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.home-brand[b-h3goq3764j] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.home-brand-copy[b-h3goq3764j] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.home-brand-kicker[b-h3goq3764j],
.home-status[b-h3goq3764j],
.home-kicker[b-h3goq3764j],
.home-section-kicker[b-h3goq3764j],
.workflow-panel__eyebrow[b-h3goq3764j],
.home-cta-panel__kicker[b-h3goq3764j] {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* The hero kicker uses the design spec's wider tracking (0.18em) — it sits
   alone above the very tall headline and reads better with more letter
   space. The other kickers (brand, status, workflow panel) keep the
   tighter 0.14em from the existing system. */
.home-kicker[b-h3goq3764j] {
    letter-spacing: 0.18em;
}

.home-brand-kicker[b-h3goq3764j],
.home-kicker[b-h3goq3764j],
.home-section-kicker[b-h3goq3764j],
.workflow-panel__eyebrow[b-h3goq3764j] {
    color: var(--home-ink-soft);
}

.home-brand-name[b-h3goq3764j] {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--home-ink-strong);
}

.home-status[b-h3goq3764j] {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    padding: 0 1rem;
    border: 1px solid var(--home-border);
    border-radius: 999px;
    color: var(--home-ink-soft);
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(12px);
}

.home-reveal-step[b-h3goq3764j] {
    opacity: 0;
    animation: home-reveal-step-b-h3goq3764j 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-reveal-step--1[b-h3goq3764j] {
    animation-delay: 0.1s;
}

.home-reveal-step--2[b-h3goq3764j] {
    animation-delay: 0.18s;
}

.home-reveal-step--3[b-h3goq3764j] {
    animation-delay: 0.28s;
}

.home-reveal-step--4[b-h3goq3764j] {
    animation-delay: 0.38s;
}

.home-reveal-step--5[b-h3goq3764j] {
    animation-delay: 0.48s;
}

.home-hero-grid[b-h3goq3764j] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: stretch;
    align-content: center;
    flex: 1;
    padding: clamp(1rem, 2.2vw, 1.4rem) 0 clamp(0.5rem, 1.8vw, 1.2rem);
}

.home-hero-copy[b-h3goq3764j] {
    display: flex;
    flex-direction: column;
    max-width: 41rem;
    height: 100%;
}

/* Pushes the two path-cards down to bottom-align with the workflow panel's
   bottom edge — combined with `align-items: stretch` on the grid, the left
   column matches the right column's height, and `margin-top: auto` eats
   the remaining space above the cards. */
.home-paths[b-h3goq3764j] {
    margin-top: auto;
}


/* Headline matches the standalone design spec (xKMV Landing.html):
   - Newsreader serif (loaded via Google Fonts in App.razor)
   - clamp(48px, 7.2vw, 104px) — much larger, dramatic poster scale
   - line-height 1.02 + letter-spacing -0.022em — tight but breathable
   - text-wrap: balance prevents lonely orphan words on the last line
   - <em> inside the headline = italic + accent color, for the "in einem Ablauf"
     style emphasis. */
.home-headline[b-h3goq3764j] {
    margin: 1rem 0 1.6rem;
    font-family: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 3.8vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-wrap: balance;
}

.home-headline em[b-h3goq3764j] {
    font-style: italic;
    font-weight: 500;
    color: var(--home-accent);
}

/* Lead paragraph: design-spec 18px / 1.55 / max 48ch — calmer and more
   compact than the previous oversized version. */
.home-copy[b-h3goq3764j] {
    max-width: 48ch;
    margin: 0 0 2rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--home-ink);
}

.home-action-row[b-h3goq3764j],
.home-secondary-links[b-h3goq3764j],
.home-cta-panel__actions[b-h3goq3764j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.home-secondary-links[b-h3goq3764j] {
    margin-top: 0.3rem;
}

/* ============================================================
   Path cards (two-paths hero CTA — replaces the old button row).
   Matches the standalone design spec (xKMV Landing.html) one-to-one:
   left card is filled white (Login = the primary action for returning
   users), right card is dark-glass (Demo = secondary path for first-time
   visitors). Each card is a single <a> so the whole tile is clickable
   and keyboard-focusable.
   ============================================================ */
.home-paths[b-h3goq3764j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    width: 100%;
    max-width: 640px;
}

/* Secondary (dark) card uses the same surface gradient as `.workflow-panel`
   in this file so the two dark-glass surfaces in the hero share one palette
   — the cards no longer compete visually with the workflow column on the
   right. */
.home-path-card[b-h3goq3764j] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.5rem 1.45rem 1.35rem;
    border-radius: 18px;
    border: 1px solid var(--home-border);
    background: linear-gradient(180deg, rgba(18, 29, 48, 0.88) 0%, rgba(31, 45, 70, 0.78) 100%);
    backdrop-filter: blur(12px);
    text-decoration: none;
    color: var(--home-ink-strong);
    cursor: pointer;
    text-align: left;
    transition: transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.home-path-card:hover[b-h3goq3764j],
.home-path-card:focus-visible[b-h3goq3764j] {
    transform: translateY(-2px);
    border-color: var(--home-border-strong);
    background: linear-gradient(180deg, rgba(28, 42, 66, 0.94) 0%, rgba(40, 56, 86, 0.86) 100%);
    outline: none;
}

/* Drop-shadow stays neutral / cool-dark instead of the design's blue glow —
   the wide blue-tinted halo (rgba(120,160,255,.22) at 40px blur) was reading
   as a "glow" rather than a card-on-surface elevation. Tight dark shadow
   anchors the card without leaking colour into the page background. */
.home-path-card--primary[b-h3goq3764j] {
    color: #0a1020;
    border-color: #ffffff;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(5, 12, 24, 0.32);
}

.home-path-card--primary:hover[b-h3goq3764j],
.home-path-card--primary:focus-visible[b-h3goq3764j] {
    background: #f7faff;
    border-color: #f7faff;
    box-shadow: 0 10px 24px rgba(5, 12, 24, 0.38);
}

.home-path-card__kicker[b-h3goq3764j] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--home-accent);
}

.home-path-card--primary .home-path-card__kicker[b-h3goq3764j] {
    color: #5e8df0;
}

.home-path-card__title[b-h3goq3764j] {
    margin: 0;
    font-family: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: inherit;
}

.home-path-card__desc[b-h3goq3764j] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(220, 234, 255, 0.78);
}

.home-path-card--primary .home-path-card__desc[b-h3goq3764j] {
    color: #3a4368;
}

.home-path-card__arrow[b-h3goq3764j] {
    margin-top: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: inherit;
}

.home-path-card__arrow-icon[b-h3goq3764j] {
    width: 14px;
    height: 14px;
    transition: transform 0.18s ease;
}

.home-path-card:hover .home-path-card__arrow-icon[b-h3goq3764j],
.home-path-card:focus-visible .home-path-card__arrow-icon[b-h3goq3764j] {
    transform: translateX(3px);
}

/* Stack the path cards on narrow viewports — same breakpoint as the
   design's 640px mobile rule. */
@media (max-width: 640px) {
    .home-paths[b-h3goq3764j] {
        grid-template-columns: 1fr;
    }
}

.home-hero-visual[b-h3goq3764j] {
    display: flex;
    justify-content: flex-end;
    animation: home-float-in-b-h3goq3764j 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}

.workflow-panel[b-h3goq3764j] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 430px);
    height: 100%;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid var(--home-border);
    border-radius: 32px;
    background: rgba(18, 29, 48, 0.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 58px rgba(5, 12, 24, 0.28);
}

/* Subtle blue-tinted radial accent in the top-right corner — adds depth
   without the harsh light-gradient that was there before. Stays behind
   all content (z-index 0; header and list have z-index 1). */
.workflow-panel[b-h3goq3764j]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 55%;
    background: radial-gradient(ellipse at 80% 10%, rgba(171, 198, 255, 0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}


.workflow-panel__header[b-h3goq3764j] {
    position: relative;
    z-index: 1;
    margin-bottom: 1.35rem;
}

.workflow-panel__title[b-h3goq3764j] {
    margin: 0.55rem 0 0;
    font-size: 1.55rem;
    line-height: 1.25;
    color: var(--home-ink-strong);
}

.workflow-list[b-h3goq3764j] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin-block: auto;
    gap: 1.4rem;
}

/* Timeline connector: a thin vertical line that runs through the centres of
   the three step badges, fading in/out at top and bottom. Sits behind the
   step badges so it visually "emerges" from one badge and continues to the
   next — communicates the sequential process. */
.workflow-list[b-h3goq3764j]::before {
    content: "";
    position: absolute;
    left: 1.3rem;
    top: 2.4rem;
    bottom: 2.4rem;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(171, 198, 255, 0.18) 10%,
        rgba(171, 198, 255, 0.18) 90%,
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* Steps are visually separated by the flex gap above — the previous border-top
   "shared separator" approach is gone because it left zero breathing room
   between cards. */
.workflow-step[b-h3goq3764j] {
    position: relative;
    overflow: hidden;
    --entry-delay: 0s;
    --auto-delay: 0s;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1rem 0.8rem;
    margin-inline: -0.8rem;
    border-radius: 20px;
    opacity: 0;
    animation: home-step-in-b-h3goq3764j 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        home-step-row-cycle-b-h3goq3764j 9s linear infinite;
    animation-delay: var(--entry-delay), var(--auto-delay);
    /* Cycle animation pauses on every cycling element — entry animation still runs.
       Remove the play-state lines on .workflow-step / ::before / __index / __content
       / __title / __text to restore the looping highlight effect. */
    animation-play-state: running, paused;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.26s ease,
        box-shadow 0.26s ease;
}

.workflow-step[b-h3goq3764j]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(171, 198, 255, 0.16) 0%, rgba(171, 198, 255, 0.02) 78%);
    opacity: 0;
    transform: translateX(-0.4rem);
    pointer-events: none;
    animation: home-step-glow-cycle-b-h3goq3764j 9s linear infinite;
    animation-delay: var(--auto-delay);
    animation-play-state: paused;
}


.workflow-step--01[b-h3goq3764j] {
    --entry-delay: 0.36s;
    --auto-delay: 0s;
}

.workflow-step--02[b-h3goq3764j] {
    --entry-delay: 0.48s;
    --auto-delay: 3s;
}

.workflow-step--03[b-h3goq3764j] {
    --entry-delay: 0.6s;
    --auto-delay: 6s;
}

/* The number digit itself is always dark + bold — the animation only ever
   highlights the ball (background, scale, shadow) so every step number
   stays readable, not just the currently-active one. */
/* Refined badge: subtle top-edge inset highlight + soft outer ring + tight
   drop shadow give the badge depth and a premium, polished feel — sits in
   front of the timeline connector at z-index 1. */
.workflow-step__index[b-h3goq3764j] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    border: none;
    color: #101827;
    background: linear-gradient(180deg, #ffffff 0%, #e4ebf6 100%);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 1px rgba(5, 12, 24, 0.05),
        0 0 0 1px rgba(171, 198, 255, 0.24),
        0 3px 10px rgba(5, 12, 24, 0.42);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        background 0.3s ease;
    animation: home-step-index-cycle-b-h3goq3764j 9s linear infinite;
    animation-delay: var(--auto-delay);
    animation-play-state: paused;
}

.workflow-step__content[b-h3goq3764j] {
    position: relative;
    z-index: 1;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    animation: home-step-content-cycle-b-h3goq3764j 9s linear infinite;
    animation-delay: var(--auto-delay);
    animation-play-state: paused;
}

.workflow-step__title[b-h3goq3764j] {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    color: var(--home-ink-strong);
    transition: color 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    animation: home-step-title-cycle-b-h3goq3764j 9s linear infinite;
    animation-delay: var(--auto-delay);
    animation-play-state: paused;
}

.workflow-step__text[b-h3goq3764j],
.workflow-note__text[b-h3goq3764j],
.home-proof-item__text[b-h3goq3764j],
.home-section-text[b-h3goq3764j],
.home-check-list__text[b-h3goq3764j] {
    margin: 0;
    line-height: 1.7;
    color: rgba(220, 234, 255, 0.76);
}

.workflow-step__text[b-h3goq3764j] {
    transition: color 0.26s ease;
    animation: home-step-text-cycle-b-h3goq3764j 9s linear infinite;
    animation-delay: var(--auto-delay);
    animation-play-state: paused;
}

/* Workflow steps are display-only — the cycle animation drives all state.
   No hover effect intentionally, the mouse passing over the cards shouldn't
   interrupt or override the cycle. Title-colour change for the active step
   is already handled in @keyframes home-step-title-cycle (white → accent
   during the 16%–24% window). */

.workflow-note[b-h3goq3764j] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
    margin-top: 1.4rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--home-border);
    opacity: 0;
    animation: home-step-in-b-h3goq3764j 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.72s forwards;
}

.workflow-note__icon[b-h3goq3764j],
.home-proof-item__icon[b-h3goq3764j],
.home-check-list__icon[b-h3goq3764j] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 18px;
}

.workflow-note__icon[b-h3goq3764j],
.home-check-list__icon[b-h3goq3764j] {
    width: 2.4rem;
    height: 2.4rem;
    background: rgba(171, 198, 255, 0.12);
    color: var(--home-accent);
}

/* Proof row sits flush against the footer because the hero above grabs
   every spare pixel via `flex-grow: 1`. Symmetric vertical padding so the
   space above the border-top line equals the space below the border-bottom
   line — the row looks visually centred between cards and footer. */
.home-proof[b-h3goq3764j] {
    margin-block: 0;
    padding: 2.5rem 0 2.5rem;
}

.home-proof-grid[b-h3goq3764j] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--home-border);
    border-bottom: 1px solid var(--home-border);
}

.home-proof-item[b-h3goq3764j] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.55rem 1.2rem;
    opacity: 0;
    animation: home-proof-in-b-h3goq3764j 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.home-proof-item + .home-proof-item[b-h3goq3764j] {
    border-left: 1px solid var(--home-border);
}

.home-proof-item--one[b-h3goq3764j] {
    animation-delay: 0.12s;
}

.home-proof-item--two[b-h3goq3764j] {
    animation-delay: 0.24s;
}

.home-proof-item--three[b-h3goq3764j] {
    animation-delay: 0.36s;
}

.home-proof-item__icon[b-h3goq3764j] {
    width: 3rem;
    height: 3rem;
    background: rgba(171, 198, 255, 0.12);
    color: var(--home-accent);
}

.home-proof-item__title[b-h3goq3764j],
.home-check-list__title[b-h3goq3764j] {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    color: var(--home-ink-strong);
}

.home-detail[b-h3goq3764j] {
    padding: 0 0 5rem;
}

.home-detail-grid[b-h3goq3764j] {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.home-section-title[b-h3goq3764j] {
    margin: 0.9rem 0 1rem;
    max-width: 18ch;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
    color: var(--home-ink-strong);
}

.home-section-text[b-h3goq3764j] {
    max-width: 40rem;
}

.home-check-list[b-h3goq3764j] {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.85rem;
}

.home-check-list__item[b-h3goq3764j] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
    padding-top: 1rem;
    border-top: 1px solid var(--home-border);
}

.home-check-list__item:first-child[b-h3goq3764j] {
    padding-top: 0;
    border-top: 0;
}

.home-cta-panel[b-h3goq3764j] {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    border: 1px solid var(--home-border);
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(18, 29, 48, 0.96) 0%, rgba(31, 45, 70, 0.9) 100%);
    box-shadow: 0 22px 52px rgba(5, 12, 24, 0.24);
}

.home-cta-panel[b-h3goq3764j]::before {
    content: "";
    position: absolute;
    left: -5rem;
    bottom: -5rem;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 198, 255, 0.12) 0%, rgba(171, 198, 255, 0) 72%);
}

.home-cta-panel__kicker[b-h3goq3764j] {
    position: relative;
    z-index: 1;
    color: rgba(220, 234, 255, 0.72);
}

.home-cta-panel__title[b-h3goq3764j] {
    position: relative;
    z-index: 1;
    margin: 0.9rem 0 1rem;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.04em;
    color: var(--home-ink-strong);
}

.home-cta-panel__text[b-h3goq3764j] {
    position: relative;
    z-index: 1;
    margin: 0 0 1.6rem;
    line-height: 1.75;
    color: rgba(220, 234, 255, 0.78);
}

.home-cta-panel__link[b-h3goq3764j] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    margin-top: 1.15rem;
    color: var(--home-accent);
    text-decoration: none;
    font-weight: 700;
}

.home-cta-panel__link:hover[b-h3goq3764j] {
    text-decoration: underline;
}

.home-orb[b-h3goq3764j] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(16px);
}

.home-orb--one[b-h3goq3764j] {
    top: -8rem;
    right: -5rem;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle, rgba(84, 126, 204, 0.26) 0%, rgba(84, 126, 204, 0) 72%);
    animation: home-drift-b-h3goq3764j 16s ease-in-out infinite;
}

.home-orb--two[b-h3goq3764j] {
    left: -8rem;
    bottom: 4rem;
    width: 20rem;
    height: 20rem;
    background: radial-gradient(circle, rgba(171, 198, 255, 0.14) 0%, rgba(171, 198, 255, 0) 72%);
    animation: home-drift-reverse-b-h3goq3764j 20s ease-in-out infinite;
}

[b-h3goq3764j] .home-brand-logo {
    width: 3.6rem;
    height: 3.6rem;
}

[b-h3goq3764j] .home-nav-link,
[b-h3goq3764j] .home-nav-cta {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.26s ease,
        background-color 0.26s ease,
        border-color 0.26s ease,
        color 0.26s ease;
}

[b-h3goq3764j] .home-nav-link {
    min-height: 2.9rem;
    padding-inline: 0.95rem;
    color: var(--home-ink-strong);
    border-color: var(--home-border);
    background: rgba(255, 255, 255, 0.045);
}

[b-h3goq3764j] .home-nav-cta {
    min-height: 2.95rem;
    padding-inline: 1.15rem;
    font-weight: 700;
    color: #101827;
    border-color: rgba(237, 243, 255, 0.72);
    background: #f7faff;
    box-shadow: 0 14px 28px rgba(5, 12, 24, 0.2);
}

[b-h3goq3764j] .home-nav-link:hover,
[b-h3goq3764j] .home-nav-cta:hover,
[b-h3goq3764j] .home-nav-link:focus-visible,
[b-h3goq3764j] .home-nav-cta:focus-visible {
    transform: translate3d(0.35rem, 0, 0);
    color: #ffffff;
    border-color: var(--home-border-strong) !important;
    background: rgba(171, 198, 255, 0.12) !important;
    box-shadow: 0 14px 28px rgba(5, 12, 24, 0.2) !important;
}

[b-h3goq3764j] .home-primary-button,
[b-h3goq3764j] .home-secondary-button,
[b-h3goq3764j] .home-text-button,
[b-h3goq3764j] .home-dark-button,
[b-h3goq3764j] .home-light-button {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.26s ease,
        background-color 0.26s ease,
        border-color 0.26s ease,
        color 0.26s ease;
}

[b-h3goq3764j] .home-primary-button {
    min-height: 3.6rem;
    padding-inline: 1.55rem;
    font-weight: 700;
    color: #101827;
    border-color: rgba(237, 243, 255, 0.72);
    background: #f7faff;
    box-shadow: 0 18px 40px rgba(5, 12, 24, 0.22);
}

[b-h3goq3764j] .home-secondary-button {
    min-height: 3.6rem;
    padding-inline: 1.45rem;
    font-weight: 700;
    color: var(--home-ink-strong);
    border-color: var(--home-border);
    background: rgba(255, 255, 255, 0.045);
}

[b-h3goq3764j] .home-text-button {
    min-height: 3rem;
    padding-inline: 0.35rem;
    font-weight: 700;
    color: rgba(237, 243, 255, 0.88);
}

[b-h3goq3764j] .home-dark-button {
    min-height: 3.45rem;
    padding-inline: 1.45rem;
    font-weight: 700;
    color: #101827;
    background: #f7faff;
    box-shadow: 0 18px 32px rgba(5, 12, 24, 0.2);
}

[b-h3goq3764j] .home-light-button {
    min-height: 3.45rem;
    padding-inline: 1.35rem;
    font-weight: 700;
    color: var(--home-ink-strong);
    border-color: var(--home-border);
    background: rgba(255, 255, 255, 0.045);
}

[b-h3goq3764j] .home-primary-button:hover,
[b-h3goq3764j] .home-secondary-button:hover,
[b-h3goq3764j] .home-text-button:hover,
[b-h3goq3764j] .home-dark-button:hover,
[b-h3goq3764j] .home-light-button:hover,
[b-h3goq3764j] .home-primary-button:focus-visible,
[b-h3goq3764j] .home-secondary-button:focus-visible,
[b-h3goq3764j] .home-text-button:focus-visible,
[b-h3goq3764j] .home-dark-button:focus-visible,
[b-h3goq3764j] .home-light-button:focus-visible {
    transform: translate3d(0.35rem, 0, 0);
    box-shadow: 0 14px 28px rgba(5, 12, 24, 0.22);
}

/* Keep text readable on hover despite global MudButton hover styles in app.css */
[b-h3goq3764j] .mud-button-root.home-nav-cta:not(.mud-disabled):hover,
[b-h3goq3764j] .mud-button-root.home-primary-button:not(.mud-disabled):hover,
[b-h3goq3764j] .mud-button-root.home-dark-button:not(.mud-disabled):hover,
[b-h3goq3764j] .mud-button-root.home-nav-cta:not(.mud-disabled):focus-visible,
[b-h3goq3764j] .mud-button-root.home-primary-button:not(.mud-disabled):focus-visible,
[b-h3goq3764j] .mud-button-root.home-dark-button:not(.mud-disabled):focus-visible {
    color: #101827 !important;
    border-color: rgba(237, 243, 255, 0.72) !important;
    background: #f7faff !important;
    box-shadow:
        0 16px 32px rgba(5, 12, 24, 0.28),
        0 0 24px rgba(171, 198, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

[b-h3goq3764j] .mud-button-root.home-nav-link:not(.mud-disabled):hover,
[b-h3goq3764j] .mud-button-root.home-secondary-button:not(.mud-disabled):hover,
[b-h3goq3764j] .mud-button-root.home-light-button:not(.mud-disabled):hover,
[b-h3goq3764j] .mud-button-root.home-text-button:not(.mud-disabled):hover,
[b-h3goq3764j] .mud-button-root.home-nav-link:not(.mud-disabled):focus-visible,
[b-h3goq3764j] .mud-button-root.home-secondary-button:not(.mud-disabled):focus-visible,
[b-h3goq3764j] .mud-button-root.home-light-button:not(.mud-disabled):focus-visible,
[b-h3goq3764j] .mud-button-root.home-text-button:not(.mud-disabled):focus-visible {
    color: #ffffff !important;
    border-color: rgba(194, 213, 251, 0.32) !important;
    background: rgba(171, 198, 255, 0.12) !important;
}

@media (max-width: 1100px) {
    .home-hero-grid[b-h3goq3764j],
    .home-detail-grid[b-h3goq3764j] {
        grid-template-columns: 1fr;
    }

    .home-hero-visual[b-h3goq3764j] {
        justify-content: flex-start;
    }

    .home-proof-grid[b-h3goq3764j] {
        grid-template-columns: 1fr;
    }

    .home-proof[b-h3goq3764j] {
        margin-top: 0;
    }

    .home-proof-item + .home-proof-item[b-h3goq3764j] {
        border-left: 0;
        border-top: 1px solid var(--home-border);
    }
}

@media (max-width: 720px) {
    .home-shell[b-h3goq3764j] {
        width: min(100% - 1.5rem, 100%);
    }

    .home-topbar[b-h3goq3764j] {
        flex-direction: column;
        align-items: flex-start;
        top: 0.75rem;
        padding: 0.9rem;
    }

    .home-topbar__actions[b-h3goq3764j],
    .home-topbar__brand-cluster[b-h3goq3764j] {
        width: 100%;
    }

    .home-headline[b-h3goq3764j] {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .workflow-panel[b-h3goq3764j],
    .home-cta-panel[b-h3goq3764j] {
        padding: 1.5rem;
        border-radius: 24px;
    }

    .home-action-row[b-h3goq3764j],
    .home-secondary-links[b-h3goq3764j],
    .home-cta-panel__actions[b-h3goq3764j] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-h3goq3764j] .home-primary-button,
    [b-h3goq3764j] .home-secondary-button,
    [b-h3goq3764j] .home-text-button,
    [b-h3goq3764j] .home-dark-button,
    [b-h3goq3764j] .home-light-button,
    [b-h3goq3764j] .home-nav-link,
    [b-h3goq3764j] .home-nav-cta {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-topbar[b-h3goq3764j],
    .home-reveal-step[b-h3goq3764j],
    .home-hero-copy[b-h3goq3764j],
    .home-hero-visual[b-h3goq3764j],
    .workflow-step[b-h3goq3764j],
    .workflow-note[b-h3goq3764j],
    .home-proof-item[b-h3goq3764j],
    .home-orb--one[b-h3goq3764j],
    .home-orb--two[b-h3goq3764j] {
        animation: none;
    }

    /*
        Elements that start at opacity:0 in their base rule and rely on
        the fade-in animation to become visible must be explicitly made
        visible when animations are disabled, otherwise they remain hidden.
    */
    .home-reveal-step[b-h3goq3764j],
    .workflow-step[b-h3goq3764j],
    .workflow-note[b-h3goq3764j],
    .home-proof-item[b-h3goq3764j] {
        opacity: 1;
    }

    .workflow-step[b-h3goq3764j],
    .workflow-step[b-h3goq3764j]::before,
    .workflow-step__index[b-h3goq3764j],
    .workflow-step__content[b-h3goq3764j],
    .workflow-step__title[b-h3goq3764j],
    .workflow-step__text[b-h3goq3764j] {
        animation: none;
        transition: none;
    }

    [b-h3goq3764j] .home-nav-link,
    [b-h3goq3764j] .home-nav-cta,
    [b-h3goq3764j] .home-primary-button,
    [b-h3goq3764j] .home-secondary-button,
    [b-h3goq3764j] .home-text-button,
    [b-h3goq3764j] .home-dark-button,
    [b-h3goq3764j] .home-light-button {
        transition: none;
    }

    [b-h3goq3764j] .home-nav-link:hover,
    [b-h3goq3764j] .home-nav-cta:hover,
    [b-h3goq3764j] .home-primary-button:hover,
    [b-h3goq3764j] .home-secondary-button:hover,
    [b-h3goq3764j] .home-text-button:hover,
    [b-h3goq3764j] .home-dark-button:hover,
    [b-h3goq3764j] .home-light-button:hover {
        transform: none;
        box-shadow: none;
    }
}

@keyframes home-nav-reveal-b-h3goq3764j {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

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

@keyframes home-reveal-step-b-h3goq3764j {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@keyframes home-reveal-b-h3goq3764j {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@keyframes home-float-in-b-h3goq3764j {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }

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

@keyframes home-step-in-b-h3goq3764j {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes home-proof-in-b-h3goq3764j {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

@keyframes home-index-pulse-b-h3goq3764j {
    0% {
        box-shadow: 0 0 0 0 rgba(171, 198, 255, 0.3), 0 10px 22px rgba(5, 12, 24, 0.22);
    }

    65% {
        box-shadow: 0 0 0 9px rgba(171, 198, 255, 0), 0 10px 22px rgba(5, 12, 24, 0.22);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(171, 198, 255, 0), 0 10px 22px rgba(5, 12, 24, 0.22);
    }
}

@keyframes home-step-glow-cycle-b-h3goq3764j {
    0%,
    100% {
        opacity: 0;
        transform: translateX(-0.4rem);
    }

    16%,
    24% {
        opacity: 1;
        transform: translateX(0);
    }

    31% {
        opacity: 0;
        transform: translateX(0.2rem);
    }
}

/* Each step's 9s cycle is offset by 3s (= 33.33%) from the next one. Without
   an explicit "back to idle" keyframe before that point the linear interpolation
   from 24%→100% leaves the row half-active when the next step lights up —
   so step 01 + 03 both glow at the same time. Snapping to idle at 31% keeps
   only one step highlighted at any given moment. */
@keyframes home-step-row-cycle-b-h3goq3764j {
    0%,
    100% {
        background: transparent;
        box-shadow: none;
        border-top-color: var(--home-border);
    }

    16%,
    24% {
        background: linear-gradient(90deg, rgba(171, 198, 255, 0.14) 0%, rgba(171, 198, 255, 0.02) 78%);
        box-shadow: 0 14px 28px rgba(5, 12, 24, 0.22);
        border-top-color: var(--home-border-strong);
    }

    31% {
        background: transparent;
        box-shadow: none;
        border-top-color: var(--home-border);
    }
}

/* Number stays dark+bold across the cycle (handled by the base
   `.workflow-step__index` color). The animation only marks the ball —
   it grows slightly, slides right, gets a brighter background, picks up a
   stronger border + drop shadow when its turn comes around. */
@keyframes home-step-index-cycle-b-h3goq3764j {
    0%,
    100% {
        transform: translateX(0) scale(1);
        background: linear-gradient(180deg, #ffffff 0%, #e4ebf6 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.92),
            inset 0 -1px 1px rgba(5, 12, 24, 0.05),
            0 0 0 1px rgba(171, 198, 255, 0.24),
            0 3px 10px rgba(5, 12, 24, 0.42);
    }

    16%,
    24% {
        transform: translateX(0.35rem) scale(1.08);
        background: linear-gradient(180deg, #ffffff 0%, #f0f4fc 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.96),
            0 0 0 1px rgba(194, 213, 251, 0.5),
            0 10px 24px rgba(5, 12, 24, 0.4);
    }

    31% {
        transform: translateX(0) scale(1);
        background: linear-gradient(180deg, #ffffff 0%, #e4ebf6 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.92),
            inset 0 -1px 1px rgba(5, 12, 24, 0.05),
            0 0 0 1px rgba(171, 198, 255, 0.24),
            0 3px 10px rgba(5, 12, 24, 0.42);
    }
}

@keyframes home-step-content-cycle-b-h3goq3764j {
    0%,
    100% {
        transform: translateX(0);
    }

    16%,
    24% {
        transform: translateX(0.35rem);
    }

    31% {
        transform: translateX(0);
    }
}

@keyframes home-step-title-cycle-b-h3goq3764j {
    0%,
    100% {
        transform: translateX(0);
        color: var(--home-ink-strong);
    }

    16%,
    24% {
        transform: translateX(0.12rem);
        color: var(--home-accent);
    }

    31% {
        transform: translateX(0);
        color: var(--home-ink-strong);
    }
}

@keyframes home-step-text-cycle-b-h3goq3764j {
    0%,
    100% {
        color: rgba(220, 234, 255, 0.76);
    }

    16%,
    24% {
        color: rgba(237, 243, 255, 0.94);
    }

    31% {
        color: rgba(220, 234, 255, 0.76);
    }
}

@keyframes home-drift-b-h3goq3764j {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-1rem, 1.2rem, 0);
    }
}

@keyframes home-drift-reverse-b-h3goq3764j {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(1.2rem, -1rem, 0);
    }
}
/* /Components/Structure/AppFooter.razor.rz.scp.css */
.app-footer[b-69k7t6mzjx] {
    --app-footer-height: 168px;
    width: 100%;
    min-height: var(--app-footer-height);
    padding: 1.1rem 0 1.5rem;
    display: flex;
    align-items: center;
}

.app-footer__container[b-69k7t6mzjx] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
}

.app-footer__inner[b-69k7t6mzjx] {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) auto auto;
    gap: 1.5rem;
    align-items: end;
}

.app-footer__brand[b-69k7t6mzjx] {
    min-width: 0;
}

.app-footer__eyebrow[b-69k7t6mzjx] {
    display: inline-block;
    margin-bottom: 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-footer__title[b-69k7t6mzjx] {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.app-footer__text[b-69k7t6mzjx] {
    max-width: 42rem;
    margin-top: 0.45rem;
    line-height: 1.7;
}

.app-footer__links[b-69k7t6mzjx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.85rem;
    align-self: center;
}

.app-footer__link[b-69k7t6mzjx] {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 1rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.app-footer__link:hover[b-69k7t6mzjx] {
    transform: translateY(-2px);
}

.app-footer__signature[b-69k7t6mzjx] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    width: 172px;
    min-height: 76px;
    padding: 0.68rem 0.9rem;
    overflow: hidden;
    border-radius: 14px;
    isolation: isolate;
}

.app-footer__signature-link[b-69k7t6mzjx] {
    min-width: 172px;
    max-width: 100%;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.26s ease,
        border-color 0.26s ease,
        background 0.26s ease;
}

.app-footer__signature[b-69k7t6mzjx]::before {
    content: "";
    position: absolute;
    inset: 0.22rem;
    z-index: -1;
    border-radius: 11px;
}

.app-footer__signature[b-69k7t6mzjx]::after {
    content: "";
    position: absolute;
    inset: 0.44rem;
    z-index: -1;
    border-radius: 8px;
    opacity: 0.68;
}

.app-footer__signature-label[b-69k7t6mzjx] {
    position: relative;
    z-index: 1;
}

.app-footer__signature-label[b-69k7t6mzjx] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-footer__signature-logo[b-69k7t6mzjx] {
    position: relative;
    z-index: 1;
    display: block;
    width: 110px;
    max-height: 2rem;
    height: auto;
}

.app-footer--light[b-69k7t6mzjx] {
    border-top: 1px solid var(--app-border);
    background: transparent;
}

.app-footer--light .app-footer__eyebrow[b-69k7t6mzjx],
.app-footer--light .app-footer__signature-label[b-69k7t6mzjx] {
    color: var(--app-ink-soft);
}

.app-footer--light .app-footer__title[b-69k7t6mzjx] {
    color: var(--app-ink-strong);
}

.app-footer--light .app-footer__text[b-69k7t6mzjx] {
    color: var(--app-ink);
}

.app-footer--light .app-footer__link[b-69k7t6mzjx] {
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.88);
    color: var(--app-brand-primary);
}

.app-footer--light[b-69k7t6mzjx]  a.app-footer__link,
.app-footer--light[b-69k7t6mzjx]  a.app-footer__link:link,
.app-footer--light[b-69k7t6mzjx]  a.app-footer__link:visited {
    color: var(--app-brand-primary) !important;
}

.app-footer--light .app-footer__link:hover[b-69k7t6mzjx] {
    border-color: var(--app-border-strong);
    box-shadow: 0 10px 24px rgba(26, 58, 84, 0.14);
}

/* Light-Signatur im gleichen verfeinerten Stil wie die Landingpage (dark):
   dezenter Micro-Gradient, eine Inset-Highlight-Kante, keine geätzten
   Deko-Linien — stattdessen eine Haarlinie unter "Powered by" + Logo-
   Brightness-Fade beim Hover. Farben an das helle Theme angepasst. */
.app-footer--light .app-footer__signature[b-69k7t6mzjx] {
    border: 1px solid rgba(34, 52, 74, 0.14);
    background: linear-gradient(180deg, rgba(26, 58, 84, 0.035), transparent 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Alte etched-line Dekoration komplett ausblenden (wie im dark-Footer). */
.app-footer--light .app-footer__signature[b-69k7t6mzjx]::before,
.app-footer--light .app-footer__signature[b-69k7t6mzjx]::after {
    display: none;
}

/* Haarlinie unter dem "Powered by"-Label — dunkelblau getönt, fadet an
   beiden Enden aus; wächst beim Hover (wie auf der Landingpage). */
.app-footer--light .app-footer__signature-label[b-69k7t6mzjx] {
    position: relative;
    letter-spacing: 0.18em;
}

.app-footer--light .app-footer__signature-label[b-69k7t6mzjx]::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin: 0.45rem auto 0.1rem;
    background: linear-gradient(90deg,
        transparent,
        rgba(26, 58, 84, 0.4) 50%,
        transparent);
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.32s ease;
}

/* Logo leicht abgedunkelt, bei Hover volle Deckkraft. */
.app-footer--light .app-footer__signature-logo[b-69k7t6mzjx] {
    opacity: 0.88;
    transition: opacity 0.32s ease;
}

.app-footer--light .app-footer__signature-link:hover[b-69k7t6mzjx] {
    transform: none;
    border-color: rgba(26, 58, 84, 0.28);
    background: linear-gradient(180deg, rgba(26, 58, 84, 0.05), transparent 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.app-footer--light .app-footer__signature-link:hover .app-footer__signature-label[b-69k7t6mzjx]::after {
    width: 42px;
    background: linear-gradient(90deg,
        transparent,
        rgba(26, 58, 84, 0.6) 50%,
        transparent);
}

.app-footer--light .app-footer__signature-link:hover .app-footer__signature-logo[b-69k7t6mzjx] {
    opacity: 1;
}

.app-footer--light .app-footer__signature-link:focus-visible[b-69k7t6mzjx] {
    outline: 2px solid rgba(26, 58, 84, 0.42);
    outline-offset: 2px;
}

/* Dark footer is fully transparent — the layout shell underneath provides
   the dark base + grid pattern, and the footer just sits on top. The old
   `linear-gradient(rgba(255,255,255,.02), …)` top-fade was a soft soft
   edge against a solid bg; with the pattern continuing through, it read
   as a visible "glow" band at the top of the footer. */
.app-footer--dark[b-69k7t6mzjx] {
    position: relative;
    border-top: none;
    background: transparent;
}

.app-footer--dark[b-69k7t6mzjx]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1180px, calc(100% - 3rem));
    height: 1px;
    background: var(--app-dark-border);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Inner content (eyebrow, copy, links, signature) aligns to the same shell
   width as the divider above — eyebrow's left edge starts exactly where
   the divider starts, signature's right edge ends where it ends.
   We constrain `.app-footer__inner` directly because it's our own div
   (not a MudBlazor component) — CSS isolation behaves predictably there.
   The MudContainer override below is a belt-and-braces backup in case
   anyone restyles the inner div in the future. */
.app-footer--dark .app-footer__inner[b-69k7t6mzjx] {
    width: min(1180px, calc(100% - 3rem));
    max-width: min(1180px, calc(100% - 3rem));
    margin-inline: auto;
}

.app-footer--dark .app-footer__container[b-69k7t6mzjx] {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
}

.app-footer--dark .app-footer__eyebrow[b-69k7t6mzjx],
.app-footer--dark .app-footer__signature-label[b-69k7t6mzjx] {
    color: var(--app-dark-ink-soft);
}

.app-footer--dark .app-footer__title[b-69k7t6mzjx] {
    color: var(--app-dark-ink);
}

.app-footer--dark .app-footer__text[b-69k7t6mzjx] {
    color: rgba(214, 226, 244, 0.78);
}

.app-footer--dark .app-footer__link[b-69k7t6mzjx] {
    border: 1px solid var(--app-dark-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--app-dark-ink-muted);
}

.app-footer--dark[b-69k7t6mzjx]  a.app-footer__link,
.app-footer--dark[b-69k7t6mzjx]  a.app-footer__link:link,
.app-footer--dark[b-69k7t6mzjx]  a.app-footer__link:visited {
    color: var(--app-dark-ink-muted) !important;
}

.app-footer--dark .app-footer__link:hover[b-69k7t6mzjx] {
    border-color: var(--app-dark-border-strong);
    box-shadow: 0 14px 28px rgba(5, 12, 24, 0.18);
}

/* Integrated, refined look. The badge sits flat in the footer (no drop shadow,
   no etched lines, no card lift), but a handful of subtle premium details
   keep it from looking flat:
   - mikro-gradient bg (almost invisible, just enough depth)
   - single-pixel inset highlight at the top edge (polished-card feel)
   - hairline separator between "POWERED BY" and the xapio logo
   - logo sits at 90% brightness until hover, then comes up to full
   Hover only nudges the border + tint — no movement, no glow halo. */
.app-footer--dark .app-footer__signature[b-69k7t6mzjx] {
    border: 1px solid rgba(171, 198, 255, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Hide the old etched-line decoration completely. */
.app-footer--dark .app-footer__signature[b-69k7t6mzjx]::before,
.app-footer--dark .app-footer__signature[b-69k7t6mzjx]::after {
    display: none;
}

/* Hairline separator under the "POWERED BY" label — a thin gradient line
   that fades at both ends, like a watch-dial divider. */
.app-footer--dark .app-footer__signature-label[b-69k7t6mzjx] {
    position: relative;
    letter-spacing: 0.18em;
}

.app-footer--dark .app-footer__signature-label[b-69k7t6mzjx]::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin: 0.45rem auto 0.1rem;
    background: linear-gradient(90deg,
        transparent,
        rgba(171, 198, 255, 0.35) 50%,
        transparent);
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.32s ease;
}

/* Logo sits ever so slightly toned-down by default — Hover brings it up to
   full brightness, like a polished accent suddenly catching the light. */
.app-footer--dark .app-footer__signature-logo[b-69k7t6mzjx] {
    opacity: 0.88;
    transition: opacity 0.32s ease;
}

.app-footer--dark .app-footer__signature-link:hover[b-69k7t6mzjx] {
    transform: none;
    border-color: rgba(194, 213, 251, 0.3);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.app-footer--dark .app-footer__signature-link:hover .app-footer__signature-label[b-69k7t6mzjx]::after {
    width: 42px;
    background: linear-gradient(90deg,
        transparent,
        rgba(171, 198, 255, 0.55) 50%,
        transparent);
}

.app-footer--dark .app-footer__signature-link:hover .app-footer__signature-logo[b-69k7t6mzjx] {
    opacity: 1;
}

.app-footer--dark .app-footer__signature-link:focus-visible[b-69k7t6mzjx] {
    outline: 2px solid rgba(171, 198, 255, 0.4);
    outline-offset: 2px;
}

.app-footer--dark .app-footer__signature-logo[b-69k7t6mzjx] {
    filter: brightness(0) invert(0.95);
}

@media (max-width: 1100px) {
    .app-footer__inner[b-69k7t6mzjx] {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .app-footer__links[b-69k7t6mzjx] {
        justify-content: flex-start;
    }

    .app-footer__signature-link[b-69k7t6mzjx] {
        justify-self: start;
    }
}

@media (max-width: 700px) {
    .app-footer[b-69k7t6mzjx] {
        min-height: 0;
        padding: 1rem 0 1.35rem;
    }

    .app-footer__inner[b-69k7t6mzjx] {
        gap: 1.1rem;
    }

    .app-footer__title[b-69k7t6mzjx] {
        font-size: 1rem;
    }

    .app-footer__text[b-69k7t6mzjx] {
        line-height: 1.55;
    }

    .app-footer__links[b-69k7t6mzjx] {
        flex-direction: column;
        align-items: stretch;
    }

    .app-footer__link[b-69k7t6mzjx] {
        justify-content: center;
    }

    .app-footer__signature-link[b-69k7t6mzjx] {
        justify-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-footer__link[b-69k7t6mzjx],
    .app-footer__signature-link[b-69k7t6mzjx] {
        transition: none;
    }

    .app-footer__link:hover[b-69k7t6mzjx],
    .app-footer__signature-link:hover[b-69k7t6mzjx] {
        transform: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-footer__link[b-69k7t6mzjx],
    .app-footer__signature-link[b-69k7t6mzjx] {
        transition: none;
    }

    .app-footer__link:hover[b-69k7t6mzjx],
    .app-footer__signature-link:hover[b-69k7t6mzjx] {
        transform: none;
        box-shadow: none;
    }
}
/* /Components/Structure/AuthorizedTopBar.razor.rz.scp.css */
.authorized-topbar[b-6txbb7vdkn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    animation: authorized-topbar-reveal-b-6txbb7vdkn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.authorized-topbar__leading[b-6txbb7vdkn],
.authorized-topbar__actions[b-6txbb7vdkn] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.authorized-topbar__leading[b-6txbb7vdkn] {
    min-width: 0;
}

.authorized-topbar__brand-copy[b-6txbb7vdkn] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.authorized-topbar__brand-kicker[b-6txbb7vdkn] {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.authorized-topbar__brand-kicker[b-6txbb7vdkn] {
    color: var(--app-dark-ink-soft);
}

.authorized-topbar__brand-name[b-6txbb7vdkn] {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--app-dark-ink);
    line-height: 1;
}

.authorized-topbar__logout-form[b-6txbb7vdkn] {
    margin: 0;
}

[b-6txbb7vdkn] .authorized-topbar__link-button,
[b-6txbb7vdkn] .authorized-topbar__logout-button {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.26s ease,
        background-color 0.26s ease,
        border-color 0.26s ease,
        color 0.26s ease;
}

[b-6txbb7vdkn] .authorized-topbar__brand-button {
    position: relative;
    isolation: isolate;
    overflow: visible;
    gap: 0.85rem;
    min-height: 4.05rem;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    color: var(--app-dark-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-transform: none;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.26s ease;
}

[b-6txbb7vdkn] .authorized-topbar__brand-button::before {
    content: none;
}

[b-6txbb7vdkn] .mud-button-root.authorized-topbar__brand-button .mud-button-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

[b-6txbb7vdkn] .authorized-topbar__brand-logo {
    width: 3.75rem;
    height: 3.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 8px 14px rgba(5, 12, 24, 0.28));
    object-fit: contain;
}

[b-6txbb7vdkn] .authorized-topbar__brand-button:hover,
[b-6txbb7vdkn] .authorized-topbar__brand-button:focus-visible {
    transform: translate3d(0, -1px, 0);
    border-color: transparent !important;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    opacity: 0.94;
}

[b-6txbb7vdkn] .authorized-topbar__link-button {
    min-height: 2.8rem;
    padding-inline: 0.95rem;
    color: var(--app-dark-ink-muted) !important;
    border: 1px solid var(--app-dark-border);
    background: rgba(255, 255, 255, 0.045);
}

[b-6txbb7vdkn] .mud-button-root.authorized-topbar__link-button .mud-button-label,
[b-6txbb7vdkn] .mud-button-root.authorized-topbar__link-button .mud-icon-root {
    color: var(--app-dark-ink-muted) !important;
}

[b-6txbb7vdkn] .authorized-topbar__logout-button {
    min-height: 2.95rem;
    padding-inline: 1.15rem;
    font-weight: 700;
    color: var(--app-ink-on-light);
    border-color: var(--app-border-on-dark-soft);
    background: var(--app-dark-ink);
    box-shadow: var(--app-shadow-dark-sm);
}

[b-6txbb7vdkn] .authorized-topbar__link-button:hover,
[b-6txbb7vdkn] .authorized-topbar__link-button:focus-visible {
    transform: translate3d(0.35rem, 0, 0);
    border-color: var(--app-dark-border-strong) !important;
    background: var(--app-dark-hover) !important;
    box-shadow: var(--app-shadow-dark-sm);
    color: #ffffff !important;
}

[b-6txbb7vdkn] .authorized-topbar__logout-button:hover,
[b-6txbb7vdkn] .authorized-topbar__logout-button:focus-visible {
    transform: translate3d(0.35rem, 0, 0);
    color: var(--app-ink-on-light) !important;
    border-color: var(--app-border-on-dark-soft) !important;
    background: var(--app-dark-ink) !important;
    box-shadow:
        0 16px 32px rgba(5, 12, 24, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

[b-6txbb7vdkn] .mud-button-root.authorized-topbar__logout-button,
[b-6txbb7vdkn] .mud-button-root.authorized-topbar__logout-button .mud-button-label,
[b-6txbb7vdkn] .mud-button-root.authorized-topbar__logout-button .mud-icon-root,
[b-6txbb7vdkn] .authorized-topbar__logout-button:hover .mud-icon-root,
[b-6txbb7vdkn] .authorized-topbar__logout-button:hover .mud-button-label,
[b-6txbb7vdkn] .authorized-topbar__logout-button:focus-visible .mud-icon-root,
[b-6txbb7vdkn] .authorized-topbar__logout-button:focus-visible .mud-button-label {
    color: var(--app-ink-on-light) !important;
}

/* Match the public Login button and win against the global MudButton hover rule in app.css. */
[b-6txbb7vdkn] button.mud-button-root.authorized-topbar__logout-button:not(.mud-disabled):hover,
[b-6txbb7vdkn] button.mud-button-root.authorized-topbar__logout-button:not(.mud-disabled):focus-visible {
    transform: translate3d(0.35rem, 0, 0) !important;
    color: var(--app-ink-on-light) !important;
    border-color: var(--app-border-on-dark-soft) !important;
    background: var(--app-dark-ink) !important;
    box-shadow:
        0 16px 32px rgba(5, 12, 24, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

[b-6txbb7vdkn] button.mud-button-root.authorized-topbar__logout-button:not(.mud-disabled):hover .mud-button-label,
[b-6txbb7vdkn] button.mud-button-root.authorized-topbar__logout-button:not(.mud-disabled):hover .mud-icon-root,
[b-6txbb7vdkn] button.mud-button-root.authorized-topbar__logout-button:not(.mud-disabled):focus-visible .mud-button-label,
[b-6txbb7vdkn] button.mud-button-root.authorized-topbar__logout-button:not(.mud-disabled):focus-visible .mud-icon-root {
    color: var(--app-ink-on-light) !important;
}

@media (max-width: 920px) {
    .authorized-topbar[b-6txbb7vdkn] {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.75rem;
    }

    .authorized-topbar__actions[b-6txbb7vdkn] {
        width: auto;
        margin-left: auto;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .authorized-topbar__logout-form[b-6txbb7vdkn] {
        flex: 0 0 auto;
    }

    [b-6txbb7vdkn] .authorized-topbar__link-button,
    [b-6txbb7vdkn] .authorized-topbar__logout-button {
        width: 2.65rem;
        min-width: 2.65rem;
        min-height: 2.65rem;
        padding-inline: 0 !important;
        justify-content: center;
    }

    [b-6txbb7vdkn] .mud-button-root.authorized-topbar__link-button .mud-button-label,
    [b-6txbb7vdkn] .mud-button-root.authorized-topbar__logout-button .mud-button-label {
        gap: 0;
        font-size: 0;
    }

    [b-6txbb7vdkn] .mud-button-root.authorized-topbar__link-button .mud-icon-root,
    [b-6txbb7vdkn] .mud-button-root.authorized-topbar__logout-button .mud-icon-root,
    [b-6txbb7vdkn] .mud-button-root.authorized-topbar__link-button .mud-button-start-icon,
    [b-6txbb7vdkn] .mud-button-root.authorized-topbar__logout-button .mud-button-start-icon {
        margin: 0 !important;
        font-size: 1.25rem;
    }

    [b-6txbb7vdkn] .authorized-topbar__brand-logo {
        width: 3.35rem;
        height: 3.35rem;
    }

    .authorized-topbar__brand-kicker[b-6txbb7vdkn] {
        font-size: 0.68rem;
    }

    .authorized-topbar__brand-name[b-6txbb7vdkn] {
        font-size: 1.05rem;
    }
}

@media (max-width: 640px) {
    .authorized-topbar[b-6txbb7vdkn] {
        gap: 0.5rem;
        overflow: hidden;
    }

    .authorized-topbar__actions[b-6txbb7vdkn] {
        gap: 0.35rem;
        flex: 0 0 auto;
    }

    .authorized-topbar__brand-copy[b-6txbb7vdkn] {
        display: none;
    }

    [b-6txbb7vdkn] .authorized-topbar__brand-button {
        min-width: 0;
        min-height: 3.35rem;
    }

    [b-6txbb7vdkn] .mud-button-root.authorized-topbar__brand-button .mud-button-label {
        gap: 0;
    }

    [b-6txbb7vdkn] .authorized-topbar__brand-logo {
        width: 3rem;
        height: 3rem;
    }

    [b-6txbb7vdkn] .authorized-topbar__link-button,
    [b-6txbb7vdkn] .authorized-topbar__logout-button {
        width: 2.35rem;
        min-width: 2.35rem;
        min-height: 2.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .authorized-topbar[b-6txbb7vdkn] {
        animation: none;
    }

    [b-6txbb7vdkn] .authorized-topbar__link-button,
    [b-6txbb7vdkn] .authorized-topbar__brand-button,
    [b-6txbb7vdkn] .authorized-topbar__logout-button {
        transition: none;
    }

    [b-6txbb7vdkn] .authorized-topbar__brand-button:hover,
    [b-6txbb7vdkn] .authorized-topbar__link-button:hover,
    [b-6txbb7vdkn] .authorized-topbar__logout-button:hover {
        transform: none;
        box-shadow: none;
    }
}

@keyframes authorized-topbar-reveal-b-6txbb7vdkn {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Structure/NavMenu.razor.rz.scp.css */
.nav-menu__divider[b-5b5gvmjeue] {
    border-color: var(--app-dark-border) !important;
}

.nav-menu__section-label[b-5b5gvmjeue] {
    margin-top: var(--app-nav-section-top);
    margin-bottom: var(--app-nav-section-bottom);
    padding-top: var(--app-nav-section-offset);
    padding-left: 1.1rem;
    text-align: left;
    color: var(--app-dark-ink-soft) !important;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link {
    height: var(--app-nav-item-height);
    min-height: var(--app-nav-item-height);
    margin: 0.25rem 0;
    padding: 0 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--app-radius-card);
    color: var(--app-dark-ink) !important;
    text-decoration: none;
    will-change: transform;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.26s ease,
        border-color 0.26s ease,
        box-shadow 0.26s ease,
        color 0.26s ease;
    animation: nav-menu-link-in-b-5b5gvmjeue 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link:link,
[b-5b5gvmjeue] .nav-menu .mud-nav-link:visited {
    color: var(--app-dark-ink-muted) !important;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link .mud-nav-link-icon,
[b-5b5gvmjeue] .nav-menu .mud-nav-link .mud-icon-root,
[b-5b5gvmjeue] .nav-menu .mud-nav-link .mud-nav-link-text {
    color: inherit !important;
    opacity: 1;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link:hover,
[b-5b5gvmjeue] .nav-menu .mud-nav-link:focus-visible {
    transform: translate3d(0.25rem, 0, 0) !important;
    color: #ffffff !important;
    border-color: var(--app-dark-border-strong) !important;
    background: var(--app-dark-hover) !important;
    box-shadow: var(--app-shadow-dark-sm);
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link:hover .mud-nav-link-icon,
[b-5b5gvmjeue] .nav-menu .mud-nav-link:hover .mud-icon-root,
[b-5b5gvmjeue] .nav-menu .mud-nav-link:hover .mud-nav-link-text,
[b-5b5gvmjeue] .nav-menu .mud-nav-link:focus-visible .mud-nav-link-icon,
[b-5b5gvmjeue] .nav-menu .mud-nav-link:focus-visible .mud-icon-root,
[b-5b5gvmjeue] .nav-menu .mud-nav-link:focus-visible .mud-nav-link-text {
    color: #ffffff !important;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link.active {
    border-color: var(--app-dark-border-strong);
    background: var(--app-dark-active);
    box-shadow: var(--app-shadow-dark-md);
    color: #ffffff !important;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link.active:link,
[b-5b5gvmjeue] .nav-menu .mud-nav-link.active:visited,
[b-5b5gvmjeue] .nav-menu .mud-nav-link.active .mud-nav-link-icon,
[b-5b5gvmjeue] .nav-menu .mud-nav-link.active .mud-icon-root,
[b-5b5gvmjeue] .nav-menu .mud-nav-link.active .mud-nav-link-text {
    color: #ffffff !important;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link.active:hover,
[b-5b5gvmjeue] .nav-menu .mud-nav-link.active:focus-visible {
    transform: translate3d(0.125rem, 0, 0) !important;
    border-color: var(--app-dark-border-strong) !important;
    background: var(--app-dark-active-hover) !important;
    box-shadow: var(--app-shadow-dark-md);
    color: #ffffff !important;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link.active:hover .mud-nav-link-icon,
[b-5b5gvmjeue] .nav-menu .mud-nav-link.active:hover .mud-icon-root,
[b-5b5gvmjeue] .nav-menu .mud-nav-link.active:hover .mud-nav-link-text,
[b-5b5gvmjeue] .nav-menu .mud-nav-link.active:focus-visible .mud-nav-link-icon,
[b-5b5gvmjeue] .nav-menu .mud-nav-link.active:focus-visible .mud-icon-root,
[b-5b5gvmjeue] .nav-menu .mud-nav-link.active:focus-visible .mud-nav-link-text {
    color: #ffffff !important;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link:nth-of-type(1) {
    animation-delay: 0.05s;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link:nth-of-type(2) {
    animation-delay: 0.1s;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link:nth-of-type(3) {
    animation-delay: 0.15s;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link:nth-of-type(4) {
    animation-delay: 0.2s;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link:nth-of-type(5) {
    animation-delay: 0.25s;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link:nth-of-type(6) {
    animation-delay: 0.3s;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link:nth-of-type(7) {
    animation-delay: 0.35s;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link .mud-nav-link-text {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
}

[b-5b5gvmjeue] .nav-menu__toggle,
[b-5b5gvmjeue] button.mud-button-root.nav-menu__toggle {
    position: relative;
    box-sizing: border-box;
    justify-content: flex-start !important;
    min-height: var(--app-nav-item-height);
    height: var(--app-nav-item-height);
    padding-inline: 1.15rem !important;
    border: 1px solid var(--app-dark-border) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    background-clip: padding-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: var(--app-dark-ink) !important;
    overflow: hidden;
    outline: none;
    isolation: isolate;
    transform: none !important;
    text-transform: none;
    letter-spacing: 0;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link .mud-nav-link-icon {
    margin-inline-end: 1rem;
}

[b-5b5gvmjeue] .nav-menu .mud-nav-link .mud-nav-link-icon,
[b-5b5gvmjeue] .nav-menu .mud-nav-link .mud-icon-root {
    font-size: var(--app-nav-icon-size);
}

[b-5b5gvmjeue] .nav-menu__toggle:hover,
[b-5b5gvmjeue] .nav-menu__toggle:focus-visible,
[b-5b5gvmjeue] button.mud-button-root.nav-menu__toggle:not(.mud-disabled):hover,
[b-5b5gvmjeue] button.mud-button-root.nav-menu__toggle:not(.mud-disabled):focus-visible {
    transform: none !important;
    border-color: var(--app-dark-border-strong) !important;
    border-radius: 8px !important;
    background: var(--app-dark-hover) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
}

[b-5b5gvmjeue] .nav-menu__toggle .mud-button-label {
    justify-content: flex-start;
    gap: 1rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    color: inherit !important;
}

[b-5b5gvmjeue] .nav-menu__toggle .mud-icon-root {
    color: inherit !important;
    font-size: var(--app-nav-icon-size);
}

[b-5b5gvmjeue] .nav-menu__toggle::before,
[b-5b5gvmjeue] .nav-menu__toggle::after {
    content: none !important;
    display: none !important;
}

[b-5b5gvmjeue] .nav-menu__toggle .mud-ripple,
[b-5b5gvmjeue] .nav-menu__toggle .mud-ripple-container {
    inset: 0;
    border-radius: inherit !important;
    overflow: hidden;
}

[b-5b5gvmjeue] .nav-menu__toggle > * {
    border-radius: inherit !important;
}

@media (prefers-reduced-motion: reduce) {
    [b-5b5gvmjeue] .nav-menu .mud-nav-link {
        animation: none;
        transition: none;
    }

    [b-5b5gvmjeue] .nav-menu .mud-nav-link:hover {
        transform: none;
        box-shadow: none;
    }
}

@keyframes nav-menu-link-in-b-5b5gvmjeue {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* /Components/Structure/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-eufwhwpyc2],
.components-reconnect-repeated-attempt-visible[b-eufwhwpyc2],
.components-reconnect-failed-visible[b-eufwhwpyc2],
.components-pause-visible[b-eufwhwpyc2],
.components-resume-failed-visible[b-eufwhwpyc2],
.components-rejoining-animation[b-eufwhwpyc2] {
    display: none;
}

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


#components-reconnect-modal[b-eufwhwpyc2] {
    background: linear-gradient(180deg, var(--app-surface-card-solid) 0%, var(--app-surface-card-soft) 100%);
    border: 1px solid var(--app-border);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--app-shadow-card-hover);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-eufwhwpyc2 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-eufwhwpyc2]::backdrop {
    background-color: rgba(34, 52, 74, 0.36);
    animation: components-reconnect-modal-fadeInOpacity-b-eufwhwpyc2 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-eufwhwpyc2] {
    border: 0;
    background-color: var(--app-brand-primary);
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-eufwhwpyc2] {
        background-color: var(--app-brand-deep);
    }

    #components-reconnect-modal button:active[b-eufwhwpyc2] {
        background-color: var(--app-brand-primary);
    }

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

    .components-rejoining-animation div[b-eufwhwpyc2] {
        position: absolute;
        border: 3px solid var(--app-brand-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-eufwhwpyc2 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-eufwhwpyc2 {
    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;
    }
}