@import '_content/MyWerkstatt.Oberflaeche/MyWerkstatt.Oberflaeche.v51xlo5zbd.bundle.scp.css';

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

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


/*
   Farben aus den Theme-Variablen von MudBlazor (stehen auf :root und wechseln mit Hell/Dunkel),
   damit der Dialog auch im Dunkelmodus lesbar ist. Fallbacks = helle Vorlage.
*/
#components-reconnect-modal[b-5kdkbsz35w] {
    background-color: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #212121);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-5kdkbsz35w 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-5kdkbsz35w] {
    border: 0;
    background-color: var(--mud-palette-primary, #6b9ed2);
    color: var(--mud-palette-primary-text, #fff);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-5kdkbsz35w] {
        background-color: var(--mud-palette-primary-darken, #3b6ea2);
    }

    #components-reconnect-modal button:active[b-5kdkbsz35w] {
        background-color: var(--mud-palette-primary, #6b9ed2);
    }

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Zugang/KontaktHinweis.razor.rz.scp.css */
/* Kontaktblock unter der Erklärung (KontaktHinweis.razor); Farben von der Seite, Grün wie der Registrieren-Knopf. */
.kontakt[b-9j13ipfoo1] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--zugang-rand);
}

.portraet[b-9j13ipfoo1] {
    flex: none;
    width: 84px;
    height: 84px;
}

    .portraet .grund[b-9j13ipfoo1] {
        fill: color-mix(in srgb, var(--zugang-knopf) 22%, var(--zugang-karte));
    }

.kontakt-text[b-9j13ipfoo1] {
    min-width: 0;
}

.kontakt-titel[b-9j13ipfoo1] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.kontakt-satz[b-9j13ipfoo1] {
    margin: 2px 0 8px 0;
    font-size: 0.8125rem;
    color: var(--zugang-leise);
}

.kontakt-wege[b-9j13ipfoo1] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.875rem;
}

    .kontakt-wege li[b-9j13ipfoo1] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .kontakt-wege svg[b-9j13ipfoo1] {
        flex: none;
        width: 16px;
        height: 16px;
        fill: none;
        stroke: var(--zugang-knopf);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Mit der Klasse davor gewinnt die Linkfarbe gegen die Regel für alle Links der Karte (ZugangLayout.razor.css); der
   etwas dunklere Ton ist auf Weiß noch gut lesbar. */
.kontakt .kontakt-link[b-9j13ipfoo1] {
    color: var(--zugang-knopf-hover);
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .kontakt .kontakt-link:hover[b-9j13ipfoo1] {
        text-decoration: underline;
    }

/* Schmal: Porträt über dem Text. */
@media (max-width: 420px) {
    .kontakt[b-9j13ipfoo1] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Zugang/ProgrammVorschau.razor.rz.scp.css */
/*
    Schematische Programmoberfläche (ProgrammVorschau.razor): 320 × 200 px, eine Zeitleiste von 15 s für alles.
    Prozentwerte = Sekunden ÷ 15 (Klicks bei 1,0 / 3,2 / 5,2 / 7,2 / 9,2 / 11,4 / 13,4 s = 6,667 / 21,333 / 34,667 / 48 /
    61,333 / 76 / 89,333 %). Ändert sich ein Klickzeitpunkt, müssen Mauszeiger, Ansicht und Hervorhebung zusammen mit.
    Die Farben kommen von der Seite (--zugang-*), im dunklen Modus also automatisch passend.
*/
.vorschau[b-b1zwjkd571] {
    --ak: var(--zugang-knopf);
    --an: color-mix(in srgb, var(--zugang-knopf) 16%, transparent);
    --stark: var(--zugang-rand);
    --leise: color-mix(in srgb, var(--zugang-rand) 55%, transparent);
    position: relative;
    width: 320px;
    max-width: 100%;
    height: 200px;
    margin: 24px 0 0 0;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--zugang-rand);
    border-radius: 12px;
    background: var(--zugang-karte);
    user-select: none;
    pointer-events: none;
}

.menue[b-b1zwjkd571] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 52px;
    background: var(--zugang-grund);
    border-right: 1px solid var(--zugang-rand);
}

.logo[b-b1zwjkd571] {
    position: absolute;
    left: 14px;
    top: 12px;
    width: 24px;
    height: 12px;
    border-radius: 3px;
    background: var(--ak);
}

.punkt[b-b1zwjkd571] {
    position: absolute;
    left: 10px;
    width: 32px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--zugang-leise);
}

    .punkt svg[b-b1zwjkd571] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.seite[b-b1zwjkd571] {
    position: absolute;
    inset: 0 0 0 52px;
    opacity: 0;
}

.s0[b-b1zwjkd571] { opacity: 1; }

.bal[b-b1zwjkd571] {
    position: absolute;
    height: 7px;
    border-radius: 4px;
    background: var(--stark);
}

    .bal.leise[b-b1zwjkd571] { background: var(--leise); }
    .bal.akzent[b-b1zwjkd571] { background: var(--ak); }

.suche[b-b1zwjkd571] {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 12px;
    height: 20px;
    border: 1px solid var(--stark);
    border-radius: 6px;
}

.zeile[b-b1zwjkd571] {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 24px;
    border-bottom: 1px solid var(--leise);
    border-radius: 4px;
}

.kreis[b-b1zwjkd571] {
    position: absolute;
    left: 6px;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--stark);
}

.karte[b-b1zwjkd571] {
    position: absolute;
    width: 104px;
    height: 58px;
    box-sizing: border-box;
    border: 1px solid var(--stark);
    border-radius: 8px;
}

.knopf[b-b1zwjkd571] {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 60px;
    height: 22px;
    border-radius: 6px;
    background: var(--ak);
}

/* Am Ende liegt eine Rechnung auf Din-A4-Format (Seitenverhältnis 1 : 1,414) über der Auftragsansicht. */
.rechnung[b-b1zwjkd571] {
    position: absolute;
    left: 89px;
    top: 14px;
    width: 90px;
    height: 127px;
    box-sizing: border-box;
    border: 1px solid var(--stark);
    border-radius: 3px;
    background: var(--zugang-karte);
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.22);
    opacity: 0;
}

    .rechnung .trenner[b-b1zwjkd571] {
        position: absolute;
        left: 8px;
        right: 8px;
        top: 98px;
        border-top: 1px solid var(--stark);
    }

.haken[b-b1zwjkd571] {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--zugang-karte);
    fill: none;
    stroke: var(--ak);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.maus[b-b1zwjkd571] {
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    transform: translate(26px, 54px);
}

    .maus svg[b-b1zwjkd571] {
        position: absolute;
        inset: 0;
        fill: var(--zugang-schrift);
        stroke: var(--zugang-karte);
        stroke-width: 1.2;
        stroke-linejoin: round;
    }

/* Bewegung nur, wenn das System sie nicht abgestellt hat; sonst steht die Kundenliste still, ohne Zeiger. */
@media (prefers-reduced-motion: no-preference) {
    .seite[b-b1zwjkd571], .punkt[b-b1zwjkd571], .zeile[b-b1zwjkd571], .karte[b-b1zwjkd571], .knopf[b-b1zwjkd571], .rechnung[b-b1zwjkd571], .maus[b-b1zwjkd571] {
        animation-duration: 15s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    .s0[b-b1zwjkd571] { animation-name: ansicht0-b-b1zwjkd571; }
    .s1[b-b1zwjkd571] { animation-name: ansicht1-b-b1zwjkd571; }
    .s2[b-b1zwjkd571] { animation-name: ansicht2-b-b1zwjkd571; }
    .s3[b-b1zwjkd571] { animation-name: ansicht3-b-b1zwjkd571; }
    .m0[b-b1zwjkd571] { animation-name: menue0-b-b1zwjkd571; }
    .m1[b-b1zwjkd571] { animation-name: menue1-b-b1zwjkd571; }
    .m2[b-b1zwjkd571] { animation-name: menue2-b-b1zwjkd571; }
    .z0[b-b1zwjkd571] { animation-name: zeile0-b-b1zwjkd571; }
    .k1[b-b1zwjkd571] { animation-name: karte1-b-b1zwjkd571; }
    .z2[b-b1zwjkd571] { animation-name: zeile2-b-b1zwjkd571; }
    .knopf[b-b1zwjkd571] { animation-name: druecken-b-b1zwjkd571; }
    .rechnung[b-b1zwjkd571] { animation-name: fertig-b-b1zwjkd571; }
    .maus[b-b1zwjkd571] { animation-name: zeiger-b-b1zwjkd571; }
}

@media (prefers-reduced-motion: reduce) {
    .maus[b-b1zwjkd571] { display: none; }
    .m0[b-b1zwjkd571] { background: var(--an); color: var(--ak); }
}

@keyframes ansicht0-b-b1zwjkd571 { 0%, 21% { opacity: 1; } 22%, 89% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes ansicht1-b-b1zwjkd571 { 0%, 21% { opacity: 0; } 22%, 47% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes ansicht2-b-b1zwjkd571 { 0%, 47% { opacity: 0; } 48%, 63% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes ansicht3-b-b1zwjkd571 { 0%, 63% { opacity: 0; } 64%, 88% { opacity: 1; } 89%, 100% { opacity: 0; } }

@keyframes menue0-b-b1zwjkd571 {
    0%, 21% { background: var(--an); color: var(--ak); }
    22%, 88% { background: transparent; color: var(--zugang-leise); }
    90%, 100% { background: var(--an); color: var(--ak); }
}

@keyframes menue1-b-b1zwjkd571 {
    0%, 21% { background: transparent; color: var(--zugang-leise); }
    22%, 47% { background: var(--an); color: var(--ak); }
    48%, 100% { background: transparent; color: var(--zugang-leise); }
}

@keyframes menue2-b-b1zwjkd571 {
    0%, 47% { background: transparent; color: var(--zugang-leise); }
    48%, 88% { background: var(--an); color: var(--ak); }
    89%, 100% { background: transparent; color: var(--zugang-leise); }
}

@keyframes zeile0-b-b1zwjkd571 { 0%, 6% { background: transparent; } 7%, 16% { background: var(--an); } 17%, 100% { background: transparent; } }
@keyframes karte1-b-b1zwjkd571 { 0%, 34% { background: transparent; } 35%, 44% { background: var(--an); } 45%, 100% { background: transparent; } }
@keyframes zeile2-b-b1zwjkd571 { 0%, 60% { background: transparent; } 61%, 63.5% { background: var(--an); } 64%, 100% { background: transparent; } }

@keyframes druecken-b-b1zwjkd571 { 0%, 75% { transform: scale(1); } 76.5%, 78% { transform: scale(0.92); } 79%, 100% { transform: scale(1); } }
@keyframes fertig-b-b1zwjkd571 {
    0%, 76% { opacity: 0; transform: translateY(14px) scale(0.9); }
    79%, 85% { opacity: 1; transform: none; }
    87%, 100% { opacity: 0; transform: none; }
}

@keyframes zeiger-b-b1zwjkd571 {
    0% { transform: translate(26px, 54px); }
    6.667%, 13.333% { transform: translate(130px, 112px); }
    21.333%, 26.667% { transform: translate(26px, 90px); }
    34.667%, 40% { transform: translate(220px, 140px); }
    48%, 53.333% { transform: translate(26px, 126px); }
    61.333%, 66.667% { transform: translate(150px, 112px); }
    76%, 81.333% { transform: translate(270px, 176px); }
    89.333%, 100% { transform: translate(26px, 54px); }
}

/* Schmal ist die Spalte zu eng; dort bleibt mehr Platz fürs Formular. */
@media (max-width: 760px) {
    .vorschau[b-b1zwjkd571] { display: none; }
}
/* /Components/Zugang/ZugangLayout.razor.rz.scp.css */
/* Seiten ohne Anmeldung: Karte mittig auf blassblauem Grund mit Werkstatt-Muster; dunkel, wenn das System dunkel ist. */
.zugang[b-fy8vvammbw] {
    --zugang-akzent: #2C6E91;
    --zugang-akzent-hover: #245a77;
    --zugang-knopfschrift: #ffffff;
    --zugang-grund: #eaf2f7;
    --zugang-muster: #cfe0ea;
    --zugang-karte: #ffffff;
    --zugang-schatten: 0 1px 3px rgba(16, 24, 40, 0.06), 0 12px 32px rgba(44, 110, 145, 0.16);
    --zugang-schrift: #101828;
    --zugang-leise: #475467;
    --zugang-rand: #d0d5dd;
    --zugang-fehler: #b42318;
    --zugang-fehler-grund: #fef3f2;
    --zugang-hinweis: #93370d;
    --zugang-hinweis-grund: #fffaeb;
    position: relative;
    /* Der Freiraum um den Inhalt (.zugang-inhalt::before) ragt auf dem Handy über den Rand – nicht seitlich scrollen. */
    overflow: clip;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    box-sizing: border-box;
    background: var(--zugang-grund);
    color: var(--zugang-schrift);
    font-family: Inter, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    .zugang[b-fy8vvammbw] {
        --zugang-akzent: #7fb6d3;
        --zugang-akzent-hover: #9cc8df;
        --zugang-knopfschrift: #0c111d;
        --zugang-grund: #0c111d;
        --zugang-muster: #1b2735;
        --zugang-karte: #161b26;
        --zugang-schatten: 0 1px 3px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.45);
        --zugang-schrift: #f5f5f6;
        --zugang-leise: #94969c;
        --zugang-rand: #333741;
        --zugang-fehler: #fda29b;
        --zugang-fehler-grund: #3a1512;
        --zugang-hinweis: #fec84b;
        --zugang-hinweis-grund: #3a2a0a;
    }
}

/* Das Muster liegt fest hinter allem und scrollt nicht mit (Registrieren ist auf kleinen Bildschirmen länger). */
.zugang-muster[b-fy8vvammbw] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--zugang-muster);
    pointer-events: none;
}

/* isolation: eigene Stapelebene, damit der Freiraum (z-index: -1) über dem Muster bleibt statt hinter den Seitengrund zu rutschen. */
.zugang-inhalt[b-fy8vvammbw] {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 400px;
}

    /* Freiraum um Logo und Karte: eine Fläche in Grundfarbe mit weichem Rand deckt das Muster dort ab, damit das Logo für
       sich wirkt. Sie hängt am Inhalt statt an der Fenstermitte und passt so zu jeder Fenstergröße und zur breiteren
       Registrieren-Seite. */
    .zugang-inhalt[b-fy8vvammbw]::before {
        content: "";
        position: absolute;
        inset: -36px -48px;
        z-index: -1;
        border-radius: 64px;
        background: var(--zugang-grund);
        box-shadow: 0 0 56px 40px var(--zugang-grund);
        pointer-events: none;
    }

.zugang-marke[b-fy8vvammbw] {
    margin-bottom: 20px;
    text-align: center;
}

/* Bildmarke und Schriftzug gleich hoch, Abstand wie im Markenpaket (16 von 88 Einheiten). */
.zugang-logo[b-fy8vvammbw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

    /* Logo ist Dekoration: nicht ziehen, nicht per Rechtsklick speichern (pointer-events: none nimmt dem Bild das
       Bildmenü des Browsers; die Animation im SVG läuft trotzdem). */
    .zugang-logo img[b-fy8vvammbw] {
        display: block;
        height: 48px;
        width: auto;
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
    }

.zugang-leitsatz[b-fy8vvammbw] {
    min-height: 1.5em;
    margin: 8px 0 0 0;
    font-size: 0.9375rem;
    color: var(--zugang-leise);
}

.zugang-karte[b-fy8vvammbw] {
    background: var(--zugang-karte);
    border: 1px solid var(--zugang-rand);
    border-radius: 16px;
    box-shadow: var(--zugang-schatten);
    padding: 32px;
    box-sizing: border-box;
}

@media (max-width: 420px) {
    .zugang-karte[b-fy8vvammbw] {
        padding: 24px 20px;
    }
}

/*
    Getippter Leitsatz (zugang.js): Der ganze Satz steht von Anfang an da, der noch nicht getippte Rest ist nur
    unsichtbar – so bleibt der zentrierte Satz an seinem Platz und springt nicht beim Tippen. Die Schreibmarke ist
    ein schmaler Strich ohne eigene Breite.
*/
.zugang-leitsatz[b-fy8vvammbw]  .rest {
    visibility: hidden;
}

/* Für Vorleseprogramme der ganze Satz auf einmal, unsichtbar. */
.zugang-leitsatz[b-fy8vvammbw]  .vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.zugang-leitsatz[b-fy8vvammbw]  .marke {
    display: inline-block;
    width: 0;
    height: 1.1em;
    margin-right: -2px;
    border-right: 2px solid var(--zugang-akzent);
    vertical-align: -0.15em;
    animation: zugang-blinken-b-fy8vvammbw 0.9s steps(1) infinite;
}

@keyframes zugang-blinken-b-fy8vvammbw {
    50% { border-color: transparent; }
}

/* Nach einem Fehlversuch wackelt die Karte kurz – wie ein Kopfschütteln. */
.zugang-karte:has(.zugang-fehler)[b-fy8vvammbw] {
    animation: zugang-wackeln-b-fy8vvammbw 0.45s ease-in-out;
}

@keyframes zugang-wackeln-b-fy8vvammbw {
    15%, 55% { transform: translateX(-7px); }
    35%, 75% { transform: translateX(6px); }
    90% { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .zugang-karte:has(.zugang-fehler)[b-fy8vvammbw] {
        animation: none;
    }
}

/* Inhalt der Seiten (Anmelden.razor usw.) – ::deep, weil er aus anderen Komponenten kommt. */
.zugang-karte[b-fy8vvammbw]  h1 {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 20px 0;
}

/* Steht ein Erklärtext darunter, rückt die Überschrift näher heran. */
.zugang-karte[b-fy8vvammbw]  h1:has(+ .zugang-text) {
    margin-bottom: 4px;
}

.zugang-karte[b-fy8vvammbw]  .zugang-text {
    color: var(--zugang-leise);
    font-size: 0.875rem;
    margin: 0 0 20px 0;
    line-height: 1.45;
}

.zugang-karte[b-fy8vvammbw]  form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.zugang-karte[b-fy8vvammbw]  label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 400;
}

/* 44 px hoch: gut zu treffen, auch am Tablet in der Werkstatt. */
.zugang-karte[b-fy8vvammbw]  input {
    font: inherit;
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--zugang-schrift);
    background: var(--zugang-karte);
    border: 1px solid var(--zugang-rand);
    border-radius: 8px;
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
    width: 100%;
}

    .zugang-karte[b-fy8vvammbw]  input:focus {
        outline: none;
        border-color: var(--zugang-akzent);
    }

    /* Das Häkchen hat keinen Rand, der sich färben könnte – es bekommt per Tab einen Ring. */
    .zugang-karte[b-fy8vvammbw]  input[type=checkbox]:focus-visible {
        outline: 2px solid var(--zugang-akzent);
        outline-offset: 2px;
    }

/* Passwortpunkte: Inter zeichnet sie sehr groß und fett; Segoe UI/Arial liefern feinere Punkte, etwas Abstand dazwischen. */
.zugang-karte[b-fy8vvammbw]  input[type=password] {
    font-family: "Segoe UI", Arial, sans-serif;
    letter-spacing: 0.12em;
}

/* Häkchen neben dem Text statt darüber; die ganze Zeile ist klickbar. */
.zugang-karte[b-fy8vvammbw]  .zugang-haekchen {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

    .zugang-karte[b-fy8vvammbw]  .zugang-haekchen input {
        width: 18px;
        height: 18px;
        min-height: 0;
        margin: 0;
        padding: 0;
        accent-color: var(--zugang-akzent);
        cursor: pointer;
    }

.zugang-karte[b-fy8vvammbw]  button[type=submit] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-top: 4px;
    min-height: 44px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: var(--zugang-knopf, var(--zugang-akzent));
    color: var(--zugang-knopfschrift);
    cursor: pointer;
}

    .zugang-karte[b-fy8vvammbw]  button[type=submit]:hover {
        background: var(--zugang-knopf-hover, var(--zugang-akzent-hover));
    }

    /* Per Tab gut erkennbar: Ring mit Abstand zum Knopf (der Knopf selbst ist schon in der Akzentfarbe). */
    .zugang-karte[b-fy8vvammbw]  button[type=submit]:focus-visible {
        outline: 2px solid var(--zugang-knopf, var(--zugang-akzent));
        outline-offset: 3px;
    }

    .zugang-karte[b-fy8vvammbw]  button[type=submit]:disabled {
        cursor: progress;
    }

    /* Der drehende Schlüssel (SchluesselIcon) erscheint erst, wenn zugang.js beim Abschicken „laeuft“ setzt. */
    .zugang-karte[b-fy8vvammbw]  button[type=submit] .schluessel-icon {
        display: none;
    }

    .zugang-karte[b-fy8vvammbw]  button[type=submit].laeuft .schluessel-icon {
        display: block;
    }

/* Passwortfeld mit Augen-Knopf rechts im Feld. */
.zugang-karte[b-fy8vvammbw]  .zugang-passwort {
    position: relative;
    display: flex;
}

    .zugang-karte[b-fy8vvammbw]  .zugang-passwort input {
        padding-right: 46px;
    }

.zugang-karte[b-fy8vvammbw]  .zugang-auge {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--zugang-leise);
    cursor: pointer;
}

    .zugang-karte[b-fy8vvammbw]  .zugang-auge:hover {
        color: var(--zugang-akzent);
    }

    .zugang-karte[b-fy8vvammbw]  .zugang-auge:focus-visible {
        outline: 2px solid var(--zugang-akzent);
        outline-offset: -4px;
    }

    .zugang-karte[b-fy8vvammbw]  .zugang-auge svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }

    /* Welches Symbol sichtbar ist, schaltet zugang.js über aria-pressed. */
    .zugang-karte[b-fy8vvammbw]  .zugang-auge .zu,
    .zugang-karte[b-fy8vvammbw]  .zugang-auge[aria-pressed=true] .auf {
        display: none;
    }

    .zugang-karte[b-fy8vvammbw]  .zugang-auge[aria-pressed=true] .zu {
        display: block;
    }

/* Hinweise: kleine, eckige Kästen mit Farbstreifen links – dezent statt Pillen. */
.zugang-karte[b-fy8vvammbw]  .zugang-feststelltaste {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--zugang-hinweis);
    background: var(--zugang-hinweis-grund);
    border-left: 3px solid var(--zugang-hinweis);
    border-radius: 0;
    padding: 4px 8px;
}

.zugang-karte[b-fy8vvammbw]  .zugang-fehler {
    color: var(--zugang-fehler);
    background: var(--zugang-fehler-grund);
    border-left: 3px solid var(--zugang-fehler);
    border-radius: 0;
    padding: 5px 9px;
    font-size: 0.8125rem;
    margin: 0;
}

/* Feldprüfung (zugang.js): roter Rand und ein Satz unter dem Feld. */
.zugang-karte[b-fy8vvammbw]  input.ungueltig,
.zugang-karte[b-fy8vvammbw]  input.ungueltig:focus {
    border-color: var(--zugang-fehler);
}

.zugang-karte[b-fy8vvammbw]  .zugang-feldfehler {
    color: var(--zugang-fehler);
    font-size: 0.75rem;
}

.zugang-karte[b-fy8vvammbw]  .zugang-fuss {
    margin: 24px 0 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--zugang-rand);
    font-size: 0.875rem;
    color: var(--zugang-leise);
    text-align: center;
}

.zugang-karte[b-fy8vvammbw]  a {
    color: var(--zugang-akzent);
    font-weight: 500;
}

/* Etwas mehr Luft zwischen Frage und Link, damit der Fokusring unten nicht am Fragezeichen klebt. */
.zugang-karte[b-fy8vvammbw]  .zugang-fuss a {
    margin-left: 0.25em;
}

/* Per Tab erkennbar: Ring wie bei den Knöpfen. */
.zugang-karte[b-fy8vvammbw]  a:focus-visible {
    outline: 2px solid var(--zugang-akzent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Registrieren: breitere Karte mit zwei Spalten, grüner Knopf. Die Karte weiß über :has(), dass die Seite so aufgebaut ist. */
.zugang-inhalt:has(.zugang-zweispaltig)[b-fy8vvammbw] {
    max-width: 820px;
}

.zugang-karte[b-fy8vvammbw]  .zugang-registrieren {
    --zugang-knopf: #2C9173;
    --zugang-knopf-hover: #247a61;
}

@media (prefers-color-scheme: dark) {
    .zugang-karte[b-fy8vvammbw]  .zugang-registrieren {
        --zugang-knopf: #5ec3a3;
        --zugang-knopf-hover: #7fd2b6;
    }
}

.zugang-karte[b-fy8vvammbw]  .zugang-zweispaltig {
    display: grid;
    /* Links so breit wie die Karte der anderen Seiten (400 px minus Innenabstand), damit die Felder gleich bleiben;
       den übrigen Platz bekommt die rechte Spalte. */
    grid-template-columns: 336px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.zugang-karte[b-fy8vvammbw]  .zugang-info {
    padding-left: 40px;
    border-left: 1px solid var(--zugang-rand);
}

/* Schmal: untereinander, die Erklärung zuerst. */
@media (max-width: 760px) {
    .zugang-karte[b-fy8vvammbw]  .zugang-zweispaltig {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .zugang-karte[b-fy8vvammbw]  .zugang-info {
        order: -1;
        padding-left: 0;
        border-left: none;
    }
}