/* /Components/Home/IntroSectionComponent.razor.rz.scp.css */
.intro-section[b-uinqoaywh7] {
    align-items: center;
    background-color: var(--intro-section-bg-color);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    position: relative;
    width: 100%;
}

.intro-section-content[b-uinqoaywh7] {
    column-gap: var(--section-column-gap);
    display: grid;
    /* Text column slightly wider than the feature list - an even split makes the
       prose feel cramped next to the short feature lines. */
    grid-template-columns: 5fr 6fr;
    max-width: var(--intro-section-content-width);
    width: 100%;
}

/* Both columns size to their content and are spaced by gap, never stretched to a
   common row height - that stretching was what pulled the features apart. */
.intro-section-left[b-uinqoaywh7] {
    align-content: center;
    display: grid;
    row-gap: var(--space-2xl);
}

.intro-section-right[b-uinqoaywh7] {
    align-content: center;
    display: grid;
    row-gap: var(--space-lg);
}

.intro-section-eyebrow[b-uinqoaywh7] {
    color: var(--eyebrow-color);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.intro-section-highlight[b-uinqoaywh7] {
    margin: 0;
}

.intro-section-text[b-uinqoaywh7] {
    color: var(--fc-muted);
    max-width: 60ch;
}

@media(max-width: 1000px) {
    .intro-section-content[b-uinqoaywh7] {
        grid-template-columns: 1fr;
        row-gap: var(--space-2xl);
    }

    .intro-section-left[b-uinqoaywh7] {
        justify-items: center;
        order: 2;
    }

    .intro-section-right[b-uinqoaywh7] {
        order: 1;
        text-align: center;
    }

    .intro-section-text[b-uinqoaywh7] {
        margin-left: auto;
        margin-right: auto;
    }
}
/* /Components/Layout/AppBar/AppBarComponent.razor.rz.scp.css */
nav[b-0r8corz0gn] {
    align-items: center;
    background-color: var(--appbar-bg-color);
    box-shadow: 0 6px 12px -10px rgba(0, 0, 0, 0.35);
    display: grid;
    /* Equal side columns put the middle column in the true centre of the bar;
       with max-content sides it drifts towards the wider side. */
    grid-template-columns: 1fr max-content 1fr;
    height: var(--appbar-height);
    /* Keeps the bar full-bleed but aligns its contents with the page content below. */
    padding: 0 max(var(--space-lg), calc((100% - var(--content-width)) / 2));
    /* position is required for z-index to apply at all - without it the bar ends up
       behind the positioned hero section that follows in the DOM. */
    position: relative;
    z-index: 20;
}

.nav-left[b-0r8corz0gn] {
    grid-column: 1;
}

.nav-middle[b-0r8corz0gn] {
    align-items: center;
    display: flex;
    gap: var(--space-xl);
    grid-column: 2;
    justify-content: center;
}

.nav-right[b-0r8corz0gn] {
    align-items: center;
    display: flex;
    grid-column: 3;
    justify-content: flex-end;
}

.logo[b-0r8corz0gn] {
    background-color: transparent;
    width: var(--logo-width);
}

.nav-mobile-menu[b-0r8corz0gn] {
    display: none;
}

@media(max-width: 1000px) {
    nav[b-0r8corz0gn] {
        height: var(--appbar-height-mobile);
        padding: 0 var(--section-padding-x);
    }

    .logo[b-0r8corz0gn] {
        width: var(--logo-width-mobile);
    }

    nav[b-0r8corz0gn] {
        grid-template-columns: max-content 1fr;
    }

    .nav-middle[b-0r8corz0gn] {
        display: none;
    }

    .nav-mobile-menu[b-0r8corz0gn] {
        display: block;
    }

    .nav-right[b-0r8corz0gn] {
        gap: var(--space-md);
        grid-column: 2;
    }
}
/* /Components/Layout/AppBar/MobileMenuComponent.razor.rz.scp.css */
.burgerbutton[b-ck7zoe74h5] {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    cursor: pointer;
}

.burgerbutton-icon[b-ck7zoe74h5] {
    display: block;
    color: var(--burgerbutton-icon-color);
    font-size: var(--fs-2xl);
}

    .burgerbutton:hover .burgerbutton-icon[b-ck7zoe74h5] {
        color: var(--bits-green);
        transition: all .2s linear;
    }

.mobile-menu[b-ck7zoe74h5] {
    background-color: var(--mobile-menu-bg-color);
    border-top: 2px solid var(--bits-green);
    box-shadow: 0 10px 16px -12px rgba(0, 0, 0, 0.45);
    display: grid;
    left: 0;
    padding: var(--space-xs) var(--section-padding-x);
    position: absolute;
    right: 0;
    top: var(--appbar-height-mobile);
    z-index: 50;
}

.mobile-menu-link[b-ck7zoe74h5] {
    color: var(--navbutton-text-color);
    font-size: var(--fs-lg);
    padding: var(--space-sm) 0;
    text-decoration: none;
}

    .mobile-menu-link:hover[b-ck7zoe74h5] {
        color: var(--navbutton-hover-text-color);
        transition: all .2s linear;
    }
/* /Components/Layout/AppBar/NavButtonComponent.razor.rz.scp.css */
.navbutton-container[b-57emjiawyq] {
    position: relative;
}

.navbutton[b-57emjiawyq] {
    align-items: center;
    display: flex;
    min-height: var(--appbar-height);
    background-color: var(--navbutton-bg-color);
    border: unset;
    cursor: pointer;
    max-width: max-content;
    width: 100%;
}

.navbutton-text[b-57emjiawyq] {
    color: var(--navbutton-text-color);
    font-size: 1.2rem;
}

.navbutton:hover .navbutton-text[b-57emjiawyq] {
    color: var(--navbutton-hover-text-color);
    transition: all .2s linear;
}

@media(max-width: 1000px) {
    .navbutton-container[b-57emjiawyq] {
        min-height: var(--appbar-height-mobile);
    }
}
/* /Components/Layout/AppBar/ThemeButtonComponent.razor.rz.scp.css */
.themebutton[b-syty91oage] {
    background: unset;
    border: none;
    cursor: pointer;
    padding: 0;
}

.themebutton-icon[b-syty91oage] {
    display: block;
    color: var(--themebutton-icon-color);
    font-size: var(--fs-xl);
}

    .themebutton:hover .themebutton-icon[b-syty91oage] {
        color: var(--bits-green);
        transition: all .2s linear;
    }
/* /Components/Layout/FooterComponent.razor.rz.scp.css */
footer[b-bbbu2ehe1j] {
    background-color: var(--footer-bg-color);
    box-sizing: border-box;
    color: var(--footer-text-color);
    display: flex;
    font-family: var(--f-jakarta);
    justify-content: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    width: 100%;
}

.footer-inner[b-bbbu2ehe1j] {
    max-width: var(--footer-content-width);
    width: 100%;
}

.footer-content[b-bbbu2ehe1j] {
    column-gap: var(--section-column-gap);
    display: grid;
    /* Brand column carries logo and address, so it gets the extra room. */
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    row-gap: var(--space-2xl);
}

/* align-content: start is essential - the columns are stretched to the height of
   the tallest one, and stretched auto rows would tear the entries apart. */
.footer-brand[b-bbbu2ehe1j],
.footer-column[b-bbbu2ehe1j] {
    align-content: start;
    display: grid;
    row-gap: var(--space-sm);
}

/* No extra margin below: the logo file carries roughly 4px of transparent padding at
   this width, so the row gap alone already reads as the larger distance. */
.footer-logo[b-bbbu2ehe1j] {
    background-color: transparent;
    width: var(--logo-width-footer);
}

.footer-subtitle[b-bbbu2ehe1j] {
    color: var(--footer-subtitle-color);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-sm);
}

.footer-address[b-bbbu2ehe1j],
.footer-text[b-bbbu2ehe1j] {
    line-height: 1.8;
}

/* Small spaced label instead of a full heading - three large h4 made the footer
   noisier than the section it closes. */
.footer-label[b-bbbu2ehe1j] {
    color: var(--footer-label-color);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-xs) 0;
    text-transform: uppercase;
}

.footer-contact[b-bbbu2ehe1j] {
    column-gap: var(--space-md);
    display: grid;
    grid-template-columns: max-content 1fr;
    margin: 0;
    row-gap: var(--space-xs);
}

    .footer-contact dt[b-bbbu2ehe1j] {
        color: var(--footer-subtitle-color);
    }

    .footer-contact dd[b-bbbu2ehe1j] {
        margin: 0;
    }

.footer-links[b-bbbu2ehe1j] {
    display: grid;
    row-gap: var(--space-sm);
}

.footer-link[b-bbbu2ehe1j] {
    color: var(--footer-text-color);
    text-decoration: none;
    width: max-content;
}

    .footer-link:hover[b-bbbu2ehe1j] {
        color: var(--footer-email-hover-color);
        transition: all .2s linear;
    }

.footer-bottom[b-bbbu2ehe1j] {
    align-items: center;
    border-top: 1px solid var(--footer-border-color);
    column-gap: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    row-gap: var(--space-sm);
}

.footer-copyright[b-bbbu2ehe1j] {
    color: var(--footer-copyright-color);
    font-size: var(--fs-xs);
}

.footer-legal[b-bbbu2ehe1j] {
    column-gap: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
}

    .footer-legal .footer-link[b-bbbu2ehe1j] {
        color: var(--footer-copyright-color);
        font-size: var(--fs-xs);
    }

@media (max-width: 1000px) {
    .footer-content[b-bbbu2ehe1j] {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .footer-brand[b-bbbu2ehe1j],
    .footer-column[b-bbbu2ehe1j],
    .footer-links[b-bbbu2ehe1j] {
        justify-items: center;
    }

    .footer-contact[b-bbbu2ehe1j] {
        justify-items: start;
        text-align: start;
    }

    .footer-bottom[b-bbbu2ehe1j] {
        justify-content: center;
    }
}
/* /Components/Layout/MainLayoutComponent.razor.rz.scp.css */
#blazor-error-ui[b-fo7844uxdd] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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


main[b-fo7844uxdd] {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-p3qaf5khg9],
.components-reconnect-repeated-attempt-visible[b-p3qaf5khg9],
.components-reconnect-failed-visible[b-p3qaf5khg9],
.components-pause-visible[b-p3qaf5khg9],
.components-resume-failed-visible[b-p3qaf5khg9],
.components-rejoining-animation[b-p3qaf5khg9] {
    display: none;
}

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


#components-reconnect-modal[b-p3qaf5khg9] {
    background-color: var(--reconnect-bg-color);
    color: var(--reconnect-text-color);
    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-p3qaf5khg9 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-p3qaf5khg9]::backdrop {
    background-color: var(--reconnect-backdrop-color);
    animation: components-reconnect-modal-fadeInOpacity-b-p3qaf5khg9 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-p3qaf5khg9] {
    border: 0;
    background-color: var(--primary-button-bg-color);
    color: var(--primary-button-color);
    cursor: pointer;
    font-family: inherit;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-p3qaf5khg9],
    #components-reconnect-modal button:active[b-p3qaf5khg9] {
        background-color: var(--bits-green-dark);
    }

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

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

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

@keyframes components-rejoining-animation-b-p3qaf5khg9 {
    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/Shared/FeatureComponent.razor.rz.scp.css */
.feature[b-gu2dinzo4s] {
    align-items: center;
    column-gap: var(--space-lg);
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
}

.feature-circle[b-gu2dinzo4s] {
    align-items: center;
    background-color: var(--feature-icon-bg-color);
    border: 2px solid var(--feature-icon-border-color);
    border-radius: 100%;
    display: flex;
    flex-shrink: 0;
    height: 64px;
    justify-content: center;
    transform: rotate(45deg);
    width: 64px;
}

.feature-icon[b-gu2dinzo4s] {
    align-items: center;
    color: var(--feature-icon-color);
    display: flex;
    font-size: var(--fs-2xl);
    justify-content: center;
    text-align: center;
    transform: rotate(-45deg);
}

/* Smaller than the global h3 on purpose: in a list of three, the headline should
   lead the line, not dominate the section. */
.feature-title[b-gu2dinzo4s] {
    font-size: var(--fs-xl);
    margin: 0 0 var(--space-xs) 0;
    text-align: start;
}

.feature-subtitle[b-gu2dinzo4s] {
    color: var(--fc-muted);
    display: block;
    text-align: start;
}

@media(max-width: 1000px) {
    .feature[b-gu2dinzo4s] {
        column-gap: var(--space-md);
        /* Content-driven width - a fixed one used to overflow narrow screens. */
        max-width: 26rem;
        width: 100%;
    }

    .feature-circle[b-gu2dinzo4s] {
        height: 56px;
        width: 56px;
    }
}

@media(max-width: 480px) {
    .feature-circle[b-gu2dinzo4s] {
        height: 48px;
        width: 48px;
    }

    .feature-icon[b-gu2dinzo4s] {
        font-size: var(--fs-xl);
    }
}
/* /Components/Shared/LegalPageComponent.razor.rz.scp.css */
.legal-page[b-1k7jd8c6b7] {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    width: 100%;
}

.legal-content[b-1k7jd8c6b7] {
    /* Measured in characters, not pixels: legal text is read line by line, and
       1300px of running text is exhausting. */
    max-width: 68ch;
    width: 100%;
}

.legal-header[b-1k7jd8c6b7] {
    border-bottom: 1px solid var(--legal-divider-color);
    display: grid;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-xl);
    row-gap: var(--space-sm);
}

.legal-eyebrow[b-1k7jd8c6b7] {
    color: var(--eyebrow-color);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.legal-title[b-1k7jd8c6b7] {
    margin: 0;
}

.legal-lead[b-1k7jd8c6b7] {
    color: var(--fc-muted);
}

/* The pages hand in plain semantic markup - no class soup in the legal texts. */
.legal-body[b-1k7jd8c6b7] {
    display: grid;
    row-gap: var(--space-xl);
}

[b-1k7jd8c6b7] .legal-body h2 {
    font-size: var(--fs-xl);
    margin: 0 0 var(--space-xs) 0;
}

[b-1k7jd8c6b7] .legal-body h3 {
    font-size: var(--fs-lg);
    margin: 0 0 var(--space-xs) 0;
}

[b-1k7jd8c6b7] .legal-body p {
    line-height: 1.8;
}

[b-1k7jd8c6b7] .legal-body ul {
    display: grid;
    line-height: 1.8;
    margin: var(--space-xs) 0 var(--space-md) 0;
    padding-left: 1.25rem;
    row-gap: var(--space-xs);
}

/* Paragraphs following a list or another paragraph need their own breathing room -
   the grid gap only separates the sections, not the elements inside one. */
[b-1k7jd8c6b7] .legal-body p + p {
    margin-top: var(--space-md);
}

[b-1k7jd8c6b7] .legal-body a {
    color: var(--fc-base);
    text-decoration: none;
}

    [b-1k7jd8c6b7] .legal-body a:hover {
        color: var(--bits-green);
        transition: all .2s linear;
    }
/* /Components/Shared/StatusPageComponent.razor.rz.scp.css */
.status-page[b-6r2z67r2qx] {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    /* Fills the window without pushing the footer out of reach on tall screens. */
    min-height: clamp(360px, 62vh, 620px);
    padding: var(--section-padding-y) var(--section-padding-x);
    width: 100%;
}

.status-content[b-6r2z67r2qx] {
    display: grid;
    justify-items: center;
    max-width: 52ch;
    row-gap: var(--space-md);
    text-align: center;
    width: 100%;
}

.status-code[b-6r2z67r2qx] {
    color: var(--eyebrow-color);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    margin: 0;
    text-transform: uppercase;
}

.status-title[b-6r2z67r2qx] {
    margin: 0;
}

.status-lead[b-6r2z67r2qx] {
    color: var(--fc-muted);
}

.status-actions[b-6r2z67r2qx] {
    column-gap: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-md);
    row-gap: var(--space-sm);
}

.status-note[b-6r2z67r2qx] {
    color: var(--fc-muted);
    font-size: var(--fs-sm);
    margin-top: var(--space-md);
}

[b-6r2z67r2qx] .status-note code {
    background-color: var(--form-panel-bg-color);
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
    font-size: var(--fs-sm);
    padding: 0.15rem 0.4rem;
}
/* /Pages/Contact.razor.rz.scp.css */
.contact[b-vri6rohuc1] {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    width: 100%;
}

.contact-content[b-vri6rohuc1] {
    column-gap: var(--section-column-gap);
    display: grid;
    /* Text column narrower than the form - the form is what people came for. */
    grid-template-columns: 4fr 6fr;
    max-width: var(--content-width);
    width: 100%;
}

.contact-intro[b-vri6rohuc1] {
    align-content: start;
    display: grid;
    row-gap: var(--space-lg);
}

.contact-eyebrow[b-vri6rohuc1] {
    color: var(--eyebrow-color);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.contact-title[b-vri6rohuc1] {
    color: var(--contact-title-color);
    margin: 0;
}

.contact-lead[b-vri6rohuc1] {
    color: var(--fc-muted);
    max-width: 46ch;
}

.contact-details[b-vri6rohuc1] {
    display: grid;
    margin: 0;
    row-gap: var(--space-md);
}

    .contact-details dt[b-vri6rohuc1] {
        color: var(--fc-muted);
        font-size: var(--fs-sm);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .contact-details dd[b-vri6rohuc1] {
        line-height: 1.8;
        margin: 0;
    }

.contact-link[b-vri6rohuc1] {
    color: var(--fc-base);
    text-decoration: none;
}

    .contact-link:hover[b-vri6rohuc1] {
        color: var(--bits-green);
        transition: all .2s linear;
    }

.contact-form-panel[b-vri6rohuc1] {
    background-color: var(--form-panel-bg-color);
    box-sizing: border-box;
    padding: var(--space-2xl);
}

[b-vri6rohuc1] form {
    display: grid;
    row-gap: var(--space-lg);
}

.form-field[b-vri6rohuc1] {
    display: grid;
    row-gap: var(--space-xs);
}

/* Visible labels instead of placeholder-only fields: a placeholder disappears as
   soon as someone types, which leaves screen readers and re-checking users blank. */
.form-label[b-vri6rohuc1] {
    color: var(--form-label-color);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

[b-vri6rohuc1] .form-input,
[b-vri6rohuc1] .form-textarea {
    background-color: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
    box-sizing: border-box;
    color: var(--fc-base);
    font-size: var(--fs-md);
    padding: 0.75rem 0.9rem;
    width: 100%;
}

[b-vri6rohuc1] .form-textarea {
    min-height: 11rem;
    resize: vertical;
}

[b-vri6rohuc1] .form-input:focus-visible,
[b-vri6rohuc1] .form-textarea:focus-visible {
    border-color: var(--input-border-focus-color);
    outline: 2px solid var(--input-border-focus-color);
    outline-offset: 1px;
}

[b-vri6rohuc1] .form-input::placeholder,
[b-vri6rohuc1] .form-textarea::placeholder {
    color: var(--input-placeholder-color);
}

.form-consent[b-vri6rohuc1] {
    --consent-box-size: 1rem;
    --consent-font-size: var(--fs-sm);
    --consent-line-height: 1.6;
    align-items: start;
    column-gap: var(--space-xs);
    cursor: pointer;
    display: grid;
    /* One size down from the field labels: this is the fine print, and at body size the
       sentence no longer fits on one line inside the panel. */
    font-size: var(--consent-font-size);
    grid-template-columns: max-content 1fr;
    line-height: var(--consent-line-height);
}

/* Keeps the sentence from dropping a single word onto its own line. */
.form-consent span[b-vri6rohuc1] {
    text-wrap: pretty;
}

[b-vri6rohuc1] .form-checkbox {
    accent-color: var(--bits-green);
    cursor: pointer;
    height: var(--consent-box-size);
    /* Centres the box on the first text line: half of what the line leaves over.
       Guessing an offset here is what left the box sitting too high before. */
    margin-top: calc((var(--consent-font-size) * var(--consent-line-height) - var(--consent-box-size)) / 2);
    width: var(--consent-box-size);
}

.privacy-icon[b-vri6rohuc1] {
    font-size: var(--fs-xs);
}

/* Honeypot: aus dem Sichtfeld geschoben statt display:none, weil manche Bots
   ausgeblendete Felder erkennen und ueberspringen. */
.form-trap[b-vri6rohuc1] {
    height: 0;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.form-actions[b-vri6rohuc1] {
    align-items: center;
    column-gap: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-sm);
}

.spinner[b-vri6rohuc1] {
    animation: spin-b-vri6rohuc1 0.6s linear infinite;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    display: inline-block;
    height: 0.95rem;
    margin-right: 0.5rem;
    vertical-align: -0.15rem;
    width: 0.95rem;
}

@keyframes spin-b-vri6rohuc1 {
    to {
        transform: rotate(360deg);
    }
}

.contact-status[b-vri6rohuc1] {
    margin: 0;
}

    .contact-status.success[b-vri6rohuc1] {
        color: #1a7f37;
    }

    .contact-status.error[b-vri6rohuc1] {
        color: #b42318;
    }

@media(max-width: 1000px) {
    .contact-content[b-vri6rohuc1] {
        grid-template-columns: 1fr;
        row-gap: var(--space-2xl);
    }

    .contact-form-panel[b-vri6rohuc1] {
        padding: var(--space-lg);
    }
}
/* /Pages/Home.razor.rz.scp.css */
.home-section[b-c7dqfnptj3] {
    align-items: center;
    /* Markenverlauf statt Foto: dunkler Grund mit gruenem Einschlag, dazu ein feines
       Punktraster als Anspielung auf das Logo. Dieselbe Flaeche traegt der CTA-Block
       auf der Dienstleistungsseite, deshalb liegen die Werte als Tokens in app.css. */
    background-color: var(--brand-surface-bg-color);
    background-image: var(--brand-surface-bg-image);
    background-position: var(--brand-surface-bg-position);
    background-size: var(--brand-surface-bg-size);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    /* Ohne Foto braucht der Hero weniger Flaeche: gerade genug, dass Titel, Zeile und
       Button ruhig stehen, und der Anfang der naechsten Sektion sichtbar bleibt. */
    min-height: clamp(380px, 56vh, 560px);
    padding: var(--section-padding-y) var(--section-padding-x);
    position: relative;
    width: 100%;
}

/* Weicher Lichtkegel hinter dem Text, damit die Flaeche Tiefe bekommt. */
.home-section[b-c7dqfnptj3]::before {
    background: radial-gradient(ellipse 70% 90% at 22% 45%, rgba(107, 169, 60, 0.18) 0%, transparent 70%);
    content: "";
    inset: 0;
    position: absolute;
}

.home-section-content[b-c7dqfnptj3] {
    max-width: var(--home-section-content-width);
    position: relative;
    width: 100%;
    z-index: 1;
}

.home-section-title[b-c7dqfnptj3] {
    color: var(--home-title-color);
    margin-bottom: var(--space-lg);
    max-width: 18ch;
}

.home-section-subtitle[b-c7dqfnptj3] {
    color: var(--home-subtitle-color);
    font-size: var(--fs-xl);
    margin-bottom: var(--space-2xl);
    max-width: 46ch;
}

@media(max-width: 1000px) {
    .home-section[b-c7dqfnptj3] {
        min-height: clamp(340px, 48vh, 460px);
        text-align: center;
    }

    .home-section[b-c7dqfnptj3]::before {
        background: radial-gradient(ellipse 90% 70% at 50% 40%, rgba(107, 169, 60, 0.20) 0%, transparent 70%);
    }

    .home-section-title[b-c7dqfnptj3],
    .home-section-subtitle[b-c7dqfnptj3] {
        margin-left: auto;
        margin-right: auto;
    }

    .home-section-subtitle[b-c7dqfnptj3] {
        font-size: var(--fs-lg);
    }
}
/* /Pages/RemoteSupport.razor.rz.scp.css */
.remote[b-jj09lm20if] {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    width: 100%;
}

.remote-content[b-jj09lm20if] {
    column-gap: var(--section-column-gap);
    display: grid;
    grid-template-columns: 5fr 6fr;
    max-width: var(--content-width);
    width: 100%;
}

.remote-intro[b-jj09lm20if] {
    align-content: start;
    display: grid;
    justify-items: start;
    row-gap: var(--space-lg);
}

.remote-eyebrow[b-jj09lm20if] {
    color: var(--eyebrow-color);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.remote-title[b-jj09lm20if] {
    margin: 0;
}

.remote-lead[b-jj09lm20if] {
    color: var(--fc-muted);
    max-width: 46ch;
}

.remote-hint[b-jj09lm20if] {
    color: var(--fc-muted);
    font-size: var(--fs-sm);
    max-width: 42ch;
}

.remote-steps[b-jj09lm20if] {
    align-content: start;
    display: grid;
    row-gap: var(--space-xl);
}

.remote-step-list[b-jj09lm20if] {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
    row-gap: var(--space-lg);
}

    .remote-step-list li[b-jj09lm20if] {
        column-gap: var(--space-md);
        display: grid;
        grid-template-columns: max-content 1fr;
    }

.remote-step-number[b-jj09lm20if] {
    align-items: center;
    background-color: var(--feature-icon-bg-color);
    border: 2px solid var(--feature-icon-border-color);
    border-radius: 100%;
    color: var(--feature-icon-color);
    display: flex;
    font-weight: var(--fw-semibold);
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.remote-step-text[b-jj09lm20if] {
    color: var(--fc-muted);
    line-height: 1.7;
}

    .remote-step-text strong[b-jj09lm20if] {
        color: var(--fc-base);
        display: block;
    }

.remote-phone[b-jj09lm20if] {
    color: var(--fc-base);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

/* Deliberately prominent: remote-access tools are a classic vector for phone scams,
   so the warning has to be impossible to miss. */
.remote-warning[b-jj09lm20if] {
    /* baseline richtet das Icon an der ersten Textzeile aus; mit dem Default
       stretch sass es sichtbar hoeher als das Wort daneben. */
    align-items: baseline;
    background-color: var(--form-panel-bg-color);
    border-left: 3px solid var(--bits-green);
    color: var(--fc-muted);
    column-gap: var(--space-md);
    display: grid;
    font-size: var(--fs-sm);
    grid-template-columns: max-content 1fr;
    padding: var(--space-lg);
}

.remote-warning-icon[b-jj09lm20if] {
    color: var(--bits-green);
    font-size: var(--fs-lg);
    /* Die Glyphe sitzt in ihrer Zeilenbox etwas hoch, daher optisch nachjustiert. */
    position: relative;
    top: 1px;
}

/* Beide Buttons gleich breit: grid-auto-columns 1fr macht die Spuren gleich gross wie
   der breiteste Inhalt, ohne feste Werte. Sonst richtet sich jeder Button nach seiner
   eigenen Beschriftung und die unterschiedlichen Breiten sehen aus wie ein Versehen.
   Bewusst keine Erkennung des Betriebssystems: die liegt ueber den User-Agent
   regelmaessig daneben, und ein Kunde am Telefon soll ohne Rueckfrage den richtigen
   Knopf finden. */
.remote-downloads[b-jj09lm20if] {
    display: grid;
    gap: var(--space-md);
    /* minmax(max-content, 1fr): gleich breit, aber nie schmaler als die laengere
       Beschriftung. Ohne das Minimum quetscht die Spalte die Buttons zusammen, sobald
       die Intro-Spalte eng wird, und die Beschriftung bricht um. */
    grid-auto-columns: minmax(max-content, 1fr);
    grid-auto-flow: column;
    justify-content: start;
}

/* inline-flex statt inline-block aus der globalen Button-Regel, damit Icon und
   Beschriftung mittig zueinander stehen. */
.remote-download[b-jj09lm20if] {
    align-items: center;
    display: inline-flex;
    gap: 0.6rem;
    justify-content: center;
    white-space: nowrap;
}

.remote-download-icon[b-jj09lm20if] {
    font-size: 1.15em;
}

@media(max-width: 1000px) {
    .remote-content[b-jj09lm20if] {
        grid-template-columns: 1fr;
        row-gap: var(--space-2xl);
    }
}

/* Auf Telefonen passen zwei Buttons nicht mehr nebeneinander. grid-auto-flow: row
   stapelt sie, grid-auto-columns: 1fr von oben haelt sie dabei gleich breit. */
@media(max-width: 520px) {
    .remote-downloads[b-jj09lm20if] {
        grid-auto-flow: row;
    }
}
/* /Pages/Services.razor.rz.scp.css */
.services-intro[b-js3kerlur5] {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: var(--section-padding-y) var(--section-padding-x) 0 var(--section-padding-x);
    width: 100%;
}

.services-intro-content[b-js3kerlur5] {
    display: grid;
    max-width: var(--content-width);
    row-gap: var(--space-md);
    width: 100%;
}

.services-eyebrow[b-js3kerlur5] {
    color: var(--eyebrow-color);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.services-title[b-js3kerlur5] {
    margin: 0;
    max-width: 21ch;
}

.services-lead[b-js3kerlur5] {
    color: var(--fc-muted);
    max-width: 62ch;
}

.services[b-js3kerlur5] {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    width: 100%;
}

.services-content[b-js3kerlur5] {
    column-gap: var(--section-column-gap);
    display: grid;
    /* Auto-fit keeps the rows filled no matter how many services are listed. */
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    max-width: var(--content-width);
    row-gap: var(--space-2xl);
    width: 100%;
}

.service[b-js3kerlur5] {
    align-content: start;
    display: grid;
    row-gap: var(--space-xs);
}

.service-icon-circle[b-js3kerlur5] {
    align-items: center;
    background-color: var(--feature-icon-bg-color);
    border: 2px solid var(--feature-icon-border-color);
    border-radius: 100%;
    display: flex;
    height: 3rem;
    justify-content: center;
    margin-bottom: var(--space-xs);
    width: 3rem;
}

.service-icon[b-js3kerlur5] {
    color: var(--feature-icon-color);
    font-size: var(--fs-lg);
}

.service-title[b-js3kerlur5] {
    font-size: var(--fs-xl);
    margin: 0;
}

/* The customer's own words come first, the offer second: people recognise the
   problem faster than the service name. */
.service-problem[b-js3kerlur5] {
    border-left: 3px solid var(--bits-green);
    color: var(--fc-base);
    font-style: italic;
    padding-left: var(--space-md);
}

.service-text[b-js3kerlur5] {
    color: var(--fc-muted);
    max-width: 46ch;
}

/* Dieselbe Markenflaeche wie der Hero der Startseite: Der Abschluss der Seite soll
   sichtbar ein eigener Block sein. Vorher lag hier die Farbe des Footers, wodurch
   beide zu einer Flaeche verschmolzen. */
.services-cta[b-js3kerlur5] {
    background-color: var(--brand-surface-bg-color);
    background-image: var(--brand-surface-bg-image);
    background-position: var(--brand-surface-bg-position);
    background-size: var(--brand-surface-bg-size);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    width: 100%;
}

.services-cta-content[b-js3kerlur5] {
    display: grid;
    justify-items: center;
    max-width: 52ch;
    row-gap: var(--space-md);
    text-align: center;
    width: 100%;
}

.services-cta-title[b-js3kerlur5] {
    color: var(--brand-surface-title-color);
    margin: 0;
}

.services-cta-text[b-js3kerlur5] {
    color: var(--brand-surface-text-color);
}

.services-cta-phone[b-js3kerlur5] {
    color: var(--brand-surface-text-color);
    font-size: var(--fs-sm);
}

.services-cta-phone strong[b-js3kerlur5] {
    color: var(--brand-surface-title-color);
}

/* Heller Button auf dunklem Grund: Gruen auf Gruen traegt hier zu wenig Kontrast. */
.services-cta .primary-button[b-js3kerlur5] {
    background-color: var(--brand-surface-title-color);
    border-color: var(--brand-surface-title-color);
    color: var(--brand-surface-button-color);
}

    .services-cta .primary-button:hover[b-js3kerlur5] {
        background-color: var(--brand-surface-text-color);
        border-color: var(--brand-surface-text-color);
        color: var(--brand-surface-button-color);
    }

.services-cta-actions[b-js3kerlur5] {
    column-gap: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-md);
    row-gap: var(--space-sm);
}

@media(max-width: 1000px) {
    .services-content[b-js3kerlur5] {
        grid-template-columns: 1fr;
    }
}