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

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Blog.razor.rz.scp.css */
/* Section divider above other-language teasers on the blog index. */
.blog-language-badge[b-0og6wu0wql] {
    font-size: .85rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 2rem 0 0;
    border-top: 1px solid var(--border);
    padding-top: .8rem;
}
/* /Components/Pages/BlogEntry.razor.rz.scp.css */
/* Scoped styles for the single-blog-post page. ::deep is used heavily —
   the rich post body comes in as a MarkupString (raw HTML), so its
   elements don't have any scope id and would otherwise miss the rules. */

/* --- Article hero header ------------------------------------------------- */
.blog-hero[b-0ggkzi3ggx] {
    background: var(--bg-muted);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.8rem 1.6rem;
    margin: 1.5rem 0 2rem;
}
/* Breadcrumb (Blog › post title) — small, muted, sits above the title. */
.blog-hero__crumbs[b-0ggkzi3ggx] {
    font-size: .85rem;
    color: var(--fg-muted);
    margin-bottom: .7rem;
}
.blog-hero__crumb-sep[b-0ggkzi3ggx]     { margin: 0 .4rem; }
.blog-hero__crumb-current[b-0ggkzi3ggx] { color: var(--fg-soft); }

/* Category chip is a leading flex item inside .blog-hero__meta (below the
   lead) — matches the listing layout so the byline reads the same on the
   detail page as on the teaser. No own margin needed; the meta line's
   flex gap handles the spacing to the rest. */
.blog-hero__meta[b-0ggkzi3ggx]  .category-chip { margin: 0; }

/* Title inherits the global h1 size/weight; only the margin is reset so the
   lead paragraph sits snug below it. */
.blog-hero__title[b-0ggkzi3ggx] { margin: 0; }

.blog-hero__lead[b-0ggkzi3ggx] {
    margin: .8rem 0 0;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--fg-soft);
}
.blog-hero__meta[b-0ggkzi3ggx] {
    margin: 1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: baseline;
    font-size: .85rem;
    color: var(--fg-muted);
}
.blog-hero__author[b-0ggkzi3ggx]    { font-weight: 600; }
.blog-hero__sep[b-0ggkzi3ggx]       { color: var(--border); }
.blog-hero__meta time[b-0ggkzi3ggx] { white-space: nowrap; }

.blog-post[b-0ggkzi3ggx]                 { max-width: 50rem; }
.blog-post[b-0ggkzi3ggx]  p,
.blog-post[b-0ggkzi3ggx]  ul,
.blog-post[b-0ggkzi3ggx]  ol       { margin: 0 0 1rem; }
.blog-post[b-0ggkzi3ggx]  ul,
.blog-post[b-0ggkzi3ggx]  ol       { padding-left: 1.4rem; }
.blog-post[b-0ggkzi3ggx]  li       { padding: .15rem 0; }

/* "This post is from {year}" advisory shown at the top of older articles —
   a calm, neutral box, not an alarm. Rendered by the page itself (not the
   MarkupString body), so it carries the scope id and needs no ::deep. */
.blog-dated-notice[b-0ggkzi3ggx] {
    margin: 0 0 1.8rem;
    padding: .85rem 1.1rem;
    background: var(--bg-muted);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg-soft);
    font-size: .92rem;
    line-height: 1.55;
}

.blog-post[b-0ggkzi3ggx]  h3.signature {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.3rem;
    margin: 2rem 0 .5rem;
}
.blog-post[b-0ggkzi3ggx]  pre {
    background: var(--bg-muted);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    overflow-x: auto;
    font-size: .85rem;
    line-height: 1.45;
    margin: 1rem 0;
}
.blog-post[b-0ggkzi3ggx]  code {
    background: var(--bg-muted);
    padding: .1rem .35rem;
    border-radius: 3px;
    font-size: .9em;
}
.blog-post[b-0ggkzi3ggx]  pre code { background: none; padding: 0; }

/* Block quotations in the article body — testimonials, pull-quotes and
   verbatim config snippets. The postscript <aside> further down carries a
   lighter override of its own. */
.blog-post[b-0ggkzi3ggx]  blockquote {
    margin: 1.5rem 0;
    padding: .4rem 0 .4rem 1.2rem;
    border-left: 3px solid var(--accent);
    color: var(--fg-soft);
    font-style: italic;
}
.blog-post[b-0ggkzi3ggx]  blockquote p            { margin: 0 0 .8rem; }
.blog-post[b-0ggkzi3ggx]  blockquote p:last-child { margin-bottom: 0; }
.blog-post[b-0ggkzi3ggx]  blockquote cite {
    display: block;
    margin-top: .6rem;
    font-style: normal;
    font-size: .9rem;
    color: var(--fg-muted);
}

/* Foot navigation — older post · all posts · newer post in a three-column
   row that collapses to a stack on narrow screens. The empty <span>s keep
   the centre "all posts" link aligned when a neighbour is missing. */
.blog-post-nav[b-0ggkzi3ggx] {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem 1.5rem;
    align-items: start;
}
.blog-post-nav__link[b-0ggkzi3ggx] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.blog-post-nav__link--next[b-0ggkzi3ggx] { text-align: right; }
.blog-post-nav__dir[b-0ggkzi3ggx]   { font-size: .8rem; color: var(--fg-muted); }
.blog-post-nav__title[b-0ggkzi3ggx] { font-weight: 600; }
.blog-post-nav__link:hover .blog-post-nav__title[b-0ggkzi3ggx] { color: var(--accent); }
.blog-post-nav__all[b-0ggkzi3ggx]   { align-self: center; font-size: .9rem; white-space: nowrap; }

@media (max-width: 640px) {
    .blog-post-nav[b-0ggkzi3ggx] {
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .blog-post-nav__link--next[b-0ggkzi3ggx] { text-align: left; }
}

/* Postscript / aside at the foot of a blog post — visually separated
   from the body so it reads as a meta-comment, not as part of the
   article itself. The content is authored inline in the blog XML
   (MarkupString), so we cross the scope with ::deep. */
.blog-post[b-0ggkzi3ggx]  .blog-post__postscript {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    color: var(--fg-soft);
    font-size: .95rem;
}
.blog-post[b-0ggkzi3ggx]  .blog-post__postscript p { margin: 0 0 .8rem; }
.blog-post[b-0ggkzi3ggx]  .blog-post__postscript blockquote {
    margin: .8rem 0;
    padding: .25rem 0 .25rem 1rem;
    border-left: 3px solid var(--accent-soft);
    font-style: italic;
}
.blog-post[b-0ggkzi3ggx]  .blog-post__postscript blockquote p { margin: 0; }

/* "Preview-sized" inline images that open in a shared lightbox on click —
   the loud-zoom-on-hover was replaced because it overlapped surrounding
   text, ignored the viewport edge and gave touch users nothing at all.
   Hover is now just a quiet hint (subtle lift); the actual enlargement
   lives in the <dialog> driven by wwwroot/js/img-lightbox.js (CSS in
   site.css, since the dialog mounts at <body>). */
.blog-post[b-0ggkzi3ggx]  .blog-figure {
    margin: 1.5rem 0;
    text-align: center;
}
.blog-post[b-0ggkzi3ggx]  .blog-img {
    display: inline-block;
    max-width: 65%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: zoom-in;
    transition: transform .25s ease, box-shadow .25s ease;
}
.blog-post[b-0ggkzi3ggx]  .blog-img:hover,
.blog-post[b-0ggkzi3ggx]  .blog-img:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    outline: none;
}
.blog-post[b-0ggkzi3ggx]  > .blog-img,
.blog-post[b-0ggkzi3ggx]  p > .blog-img {
    max-width: 45%;
    display: block;
    margin: 1rem auto;
}

@media (max-width: 640px) {
    .blog-post[b-0ggkzi3ggx]  .blog-img { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-post[b-0ggkzi3ggx]  .blog-img { transition: none; }
    .blog-post[b-0ggkzi3ggx]  .blog-img:hover,
    .blog-post[b-0ggkzi3ggx]  .blog-img:focus-visible { transform: none; }
}
/* /Components/Pages/Brand.razor.rz.scp.css */
/* Brand page — the CARECOM mind-map (caredef.svg) sits on its own row.
   The entrance choreography (logo + 7 satellite words + caption) lives
   inside the SVG file itself, so this stylesheet only needs to size and
   centre the embed. */

.brand-figure[b-1mamz5ityr] {
    margin: 4rem 0;
    padding: 1rem 0;
    text-align: center;
}

.brand-figure__img[b-1mamz5ityr] {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* Scoped styles for the Contact page (address block, Google-Maps embed,
   persons-aside in the right column). */

.contact-address[b-bcw7y394yl] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin-bottom: 2rem; }
.contact-table[b-bcw7y394yl]   { border-collapse: collapse; }
.contact-table td[b-bcw7y394yl]             { padding: .2rem 0; }
.contact-table td:first-child[b-bcw7y394yl] { color: var(--fg-muted); padding-right: 1.2rem; }
/* Form section header — moves the H2 from generic-section-heading to a
   warmer "human voice" cue. Italic serif echoes the .signature recipe used
   at the foot of blog posts; the short accent underline replaces the
   implicit visual hierarchy a bold H2 carried. */
.contact-form-heading[b-bcw7y394yl] {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.2;
    color: var(--fg);
    margin: 2.4rem 0 .4rem;
    position: relative;
}
.contact-form-heading[b-bcw7y394yl]::after {
    content: "";
    display: block;
    width: 3rem;
    height: 2px;
    background: var(--accent);
    margin-top: .55rem;
    border-radius: 2px;
}
.contact-form-hint[b-bcw7y394yl] { color: var(--fg-muted); font-size: .95rem; margin: .4rem 0 1.2rem; }

/* Stacked person cards (Harald + Eve) in the contact-page aside */
.right-sidebar--persons[b-bcw7y394yl] { display: flex; flex-direction: column; gap: 2rem; font-size: .92rem; }

/* Google-Maps embed below the form */
.google-maps[b-bcw7y394yl] {
    margin-top: 2.5rem;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.google-maps iframe[b-bcw7y394yl] {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

@media (max-width: 980px) {
    .contact-address[b-bcw7y394yl] { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .google-maps iframe[b-bcw7y394yl] { height: 320px; }
}
/* /Components/Pages/DistributionReferences.razor.rz.scp.css */
/* Hosting list used on /de/distribution/referenzen. */
.hosting-list[b-5hcfafuiyr] { list-style: none; padding: 0; margin: .5rem 0 1.5rem; }
.hosting-list li[b-5hcfafuiyr] { padding: .3rem 0; border-bottom: 1px dotted var(--border); }
.hosting-list__owner[b-5hcfafuiyr] { color: var(--fg-muted); font-size: .9rem; }
.hosting-list__note[b-5hcfafuiyr]  { color: var(--fg-muted); font-size: .85rem; }
/* /Components/Pages/Home.razor.rz.scp.css */
.home-columns[b-guch9ovdxr] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2.5rem 0; }

/* Each column is a card. opacity + transform are animated by the scroll-
   reveal (.reveal, .6s); box-shadow + border-color by the hover. No single
   property is driven by both effects, so the combined transition is conflict-
   free — transform stays reveal-only, the hover never lifts via transform. */
.home-columns__col[b-guch9ovdxr] {
    text-align: center;
    padding: 1.6rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
    transition: opacity .6s ease, transform .6s ease,
                box-shadow .25s ease, border-color .2s ease;
}
.home-columns__col:hover[b-guch9ovdxr] {
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

.home-columns__col h2[b-guch9ovdxr] { font-size: 1.1rem; line-height: 1.3; min-height: 4rem; }
.home-columns__col h2 a[b-guch9ovdxr] { color: var(--fg); }
.home-columns__col h2 a:hover[b-guch9ovdxr] { color: var(--accent); text-decoration: none; }

.home-columns__icon[b-guch9ovdxr] {
    display: inline-flex;
    width: 56px; height: 56px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: .6rem;
    transition: background .2s ease, color .2s ease;
}
/* Icon-Kreis reagiert mit, wenn die Karte gehovert wird. */
.home-columns__col:hover .home-columns__icon[b-guch9ovdxr] {
    background: var(--accent);
    color: #fff;
}
.home-columns__icon svg[b-guch9ovdxr] {
    width: 30px;
    height: 30px;
    display: block;
}
.home-columns__col p[b-guch9ovdxr] { font-size: .95rem; color: var(--fg-soft); }
.home-columns__aside[b-guch9ovdxr] { margin-top: .6rem; font-size: .85rem; }

.home-closing[b-guch9ovdxr]       { padding-top: 2.5rem; font-size: 1.05rem; }
.home-ps[b-guch9ovdxr],
.home-social-embeds[b-guch9ovdxr] { color: var(--fg-soft); }

/* Die animierte Fließtext-Link-Unterstreichung ist global (site.css,
   .layout-grid__main a) — sie greift damit auf allen SitePage-Seiten. */

/* Bewegungsreduktion: Karten-Übergänge still stellen. */
@media (prefers-reduced-motion: reduce) {
    .home-columns__col[b-guch9ovdxr],
    .home-columns__icon[b-guch9ovdxr] { transition: none; }
}

@media (max-width: 980px) {
    .home-columns[b-guch9ovdxr] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Imprint.razor.rz.scp.css */
/* Scoped styles for the Imprint / Datenschutzerklärung page.
   Headings + addresses inside the .imprint wrapper get a slightly
   denser treatment than the default page typography. ::deep is used
   so the rules also reach elements that live inside <De>/<En>
   conditional wrappers (those are rendered in this page's scope
   already, but ::deep keeps it future-proof). */

.imprint[b-okb2p9vblr] { max-width: 56rem; }

.imprint[b-okb2p9vblr]  h2 {
    font-size: 1.3rem;
    font-weight: 500;
    margin-top: 2rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--border);
}
.imprint[b-okb2p9vblr]  h3 { font-size: 1.15rem; font-weight: 600; margin-top: 1.5rem; }
.imprint[b-okb2p9vblr]  h4 { font-size: 1rem; font-weight: 600; color: var(--fg); text-transform: none; letter-spacing: 0; margin-top: 1.25rem; }
.imprint[b-okb2p9vblr]  p  { margin: 0 0 .8rem; }

.imprint[b-okb2p9vblr]  .imprint__address {
    font-style: normal;
    background: var(--bg-muted);
    padding: .9rem 1.1rem;
    border-radius: var(--radius);
    margin: .5rem 0 1rem;
    display: inline-block;
}
.imprint[b-okb2p9vblr]  .imprint__toc           { padding-left: 1.4rem; margin: .5rem 0 1rem; }
.imprint[b-okb2p9vblr]  .imprint__toc li        { padding: .15rem 0; }
.imprint[b-okb2p9vblr]  .imprint__rights        { padding-left: 1.4rem; margin: .5rem 0 1rem; }
.imprint[b-okb2p9vblr]  .imprint__rights li     { padding: .2rem 0; }
.imprint[b-okb2p9vblr]  .imprint__credit        { color: var(--fg-muted); font-size: .85rem; font-style: italic; margin-top: 2rem; }
/* /Components/Pages/Intern/Dashboard.razor.rz.scp.css */
/* Internal-area dashboard — the sub-areas as a responsive card grid.
   The global .card class supplies the surface + lift-on-hover; this file
   only owns layout + padding. */

.intern-grid[b-jxkxni543l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.1rem;
    margin: 1.2rem 0 1rem;
}

.intern-card[b-jxkxni543l] {
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.3rem;
    color: var(--fg);
    text-decoration: none;
}
.intern-card:hover[b-jxkxni543l] { text-decoration: none; }

.intern-card__title[b-jxkxni543l] { margin: 0 0 .4rem; font-size: 1.1rem; }
.intern-card__desc[b-jxkxni543l]  { margin: 0; color: var(--fg-soft); font-size: .95rem; }
/* /Components/Pages/Intern/Events/EventDetails.razor.rz.scp.css */
/* Event-details: suggestions list with vote buttons + add-suggestion form. */

.event-meta[b-b3f3bzj8ve] { color: var(--fg-muted); font-size: .9rem; margin: .5rem 0 1.5rem; }

.event-suggestions[b-b3f3bzj8ve] { display: grid; gap: 1rem; margin: 1rem 0 2rem; }

.event-suggestion[b-b3f3bzj8ve] {
    padding: 1rem 1.25rem;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.event-suggestion__head[b-b3f3bzj8ve] {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.event-suggestion__when[b-b3f3bzj8ve] {
    font-weight: 600;
    color: var(--fg);
    font-size: 1.05rem;
}
.event-suggestion__tally[b-b3f3bzj8ve] {
    display: inline-flex;
    gap: .6rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .9rem;
}
.event-suggestion__note[b-b3f3bzj8ve] { color: var(--fg-soft); font-size: .9rem; margin: .4rem 0 .8rem; }

.event-suggestion__vote[b-b3f3bzj8ve] {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
    margin-top: .5rem;
}

.vote-buttons[b-b3f3bzj8ve] { display: inline-flex; gap: .4rem; }
.vote-btn[b-b3f3bzj8ve] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem 1rem;
    font: inherit;
    cursor: pointer;
    color: var(--fg-soft);
    transition: background .15s, border-color .15s, color .15s;
}
.vote-btn:hover:not(:disabled)[b-b3f3bzj8ve] { border-color: var(--accent); color: var(--accent); }
.vote-btn:disabled[b-b3f3bzj8ve] { opacity: .55; cursor: not-allowed; }
.vote-btn.is-active[b-b3f3bzj8ve] { color: var(--bg); border-color: var(--accent); background: var(--accent); }

.vote-btn--yes.is-active[b-b3f3bzj8ve]   { background: var(--success); border-color: var(--success); }
.vote-btn--maybe.is-active[b-b3f3bzj8ve] { background: var(--warning); border-color: var(--warning); }
.vote-btn--no.is-active[b-b3f3bzj8ve]    { background: var(--danger); border-color: var(--danger); }

.vote-tally--yes[b-b3f3bzj8ve],   .vote-tally--Yes[b-b3f3bzj8ve]   { color: var(--success); }
.vote-tally--maybe[b-b3f3bzj8ve], .vote-tally--Maybe[b-b3f3bzj8ve] { color: var(--warning); }
.vote-tally--no[b-b3f3bzj8ve],    .vote-tally--No[b-b3f3bzj8ve]    { color: var(--danger); }

.event-suggestion__comment[b-b3f3bzj8ve] { display: block; flex: 1; min-width: 14rem; }
.event-suggestion__comment span[b-b3f3bzj8ve] { display: block; font-size: .8rem; color: var(--fg-soft); margin-bottom: .2rem; }
.event-suggestion__comment input[b-b3f3bzj8ve] {
    width: 100%;
    padding: .35rem .55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: var(--bg);
}
.event-suggestion__comment input:disabled[b-b3f3bzj8ve] {
    opacity: .55;
    cursor: not-allowed;
    background: var(--bg-muted);
}

.event-suggestion__responses[b-b3f3bzj8ve] { margin-top: .8rem; font-size: .9rem; }
.event-suggestion__responses summary[b-b3f3bzj8ve] { cursor: pointer; color: var(--fg-soft); }
.event-suggestion__responses ul[b-b3f3bzj8ve] { list-style: none; padding: .4rem 0 0; margin: 0; }
.event-suggestion__responses li[b-b3f3bzj8ve] { padding: .15rem 0; }

.event-add-suggestion[b-b3f3bzj8ve] {
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.event-add-suggestion h3[b-b3f3bzj8ve] { margin-top: 0; font-size: 1.05rem; }
/* Add-suggestion + notify fields use the global .form-field class (site.css);
   the submit button uses the site-wide .btn-primary recipe. */

/* --- First-vote DSGVO hint, shown until the user has voted on anything ---- */
.event-first-vote-hint[b-b3f3bzj8ve] {
    margin: 0 0 1rem;
    padding: .8rem 1rem;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    color: var(--fg-soft);
    font-size: .9rem;
    line-height: 1.5;
}

/* --- Closed-event notice (shown above the suggestions) ------------------- */
.event-closed-hint[b-b3f3bzj8ve] {
    margin: 0 0 1.5rem;
    padding: .7rem 1rem;
    background: var(--bg-muted);
    border-left: 3px solid var(--fg-muted);
    border-radius: var(--radius);
    color: var(--fg-soft);
    font-size: .92rem;
    font-weight: 600;
}

/* --- Voting-deadline notice (event still open, deadline announced) ------- */
.event-deadline-hint[b-b3f3bzj8ve] {
    margin: 0 0 1.5rem;
    padding: .6rem 1rem;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    color: var(--fg-soft);
    font-size: .9rem;
}

/* --- Voting-deadline editor (Carecom-only) ------------------------------- */
.event-deadline[b-b3f3bzj8ve] {
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.event-deadline h3[b-b3f3bzj8ve] { margin-top: 0; font-size: 1.05rem; }
.event-deadline__row[b-b3f3bzj8ve] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}
.event-deadline__row[b-b3f3bzj8ve]  input {
    padding: .45rem .65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: var(--bg);
}
/* Save / Clear buttons use the site-wide .btn-primary / .btn-secondary
   recipes from site.css. */
.event-deadline__none[b-b3f3bzj8ve] {
    margin: .7rem 0 0;
    font-size: .88rem;
    color: var(--fg-muted);
}
.event-deadline__saved[b-b3f3bzj8ve] {
    margin: .7rem 0 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--success);
}

/* --- Vote-withdraw button (subtle, set apart from the active vote trio) --- */
.vote-btn--withdraw[b-b3f3bzj8ve] {
    margin-left: .8rem;
    border-style: dashed;
    color: var(--fg-muted);
}
.vote-btn--withdraw:hover[b-b3f3bzj8ve] {
    color: var(--danger);
    border-color: var(--danger);
}

/* --- Notify-participants drawer (Carecom-only) ---------------------------- */
.event-notify-trigger[b-b3f3bzj8ve] {
    background: var(--bg);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: .5rem 1.1rem;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    margin: 1.5rem 0;
}
.event-notify-trigger:hover[b-b3f3bzj8ve] { background: var(--accent); color: var(--bg); }

.event-notify[b-b3f3bzj8ve] {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--bg);
}
.event-notify h3[b-b3f3bzj8ve] { margin-top: 0; font-size: 1.05rem; }
.event-notify__actions[b-b3f3bzj8ve] {
    display: flex; gap: .6rem;
    margin-top: .4rem;
}
/* Send / Cancel buttons use the site-wide .btn-primary / .btn-secondary
   recipes from site.css. */

.event-notify-result[b-b3f3bzj8ve] {
    margin: 1.5rem 0;
    padding: .8rem 1rem;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent-dark);
    font-size: .92rem;
}
/* All-success: keep the accent-coloured default (green-leaning brand tint). */
.event-notify-result--ok[b-b3f3bzj8ve] { /* inherits defaults */ }
/* Partial failure: amber to flag "look at this" without going full red. */
.event-notify-result--partial[b-b3f3bzj8ve] {
    background: var(--warning-soft);
    border-left-color: var(--warning);
    color: var(--warning-fg);
}
/* Nothing to send (no voter has an email on file) — neutral, informational. */
.event-notify-result--empty[b-b3f3bzj8ve] {
    background: var(--bg-muted);
    border-left-color: var(--fg-muted);
    color: var(--fg-soft);
}

/* --- Failed-recipients follow-up list ------------------------------------- */
/* Shown directly under a --partial result banner. Each entry is a mailto:
   link so the Carecom user can spawn an outgoing mail from their local
   client with the address already filled in. */
.event-notify-failed[b-b3f3bzj8ve] {
    margin: -.8rem 0 1.5rem;
    padding: .8rem 1rem;
    background: var(--warning-soft);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius);
    font-size: .92rem;
    color: var(--warning-fg);
}
.event-notify-failed__heading[b-b3f3bzj8ve] {
    margin: 0 0 .4rem;
    font-weight: 600;
}
.event-notify-failed__list[b-b3f3bzj8ve] {
    margin: 0;
    padding-left: 1.2rem;
}
.event-notify-failed__list li[b-b3f3bzj8ve] { padding: .15rem 0; }
.event-notify-failed__list a[b-b3f3bzj8ve] {
    color: var(--warning-fg);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.event-notify-failed__list a:hover[b-b3f3bzj8ve] {
    color: var(--danger);
    border-bottom-style: solid;
}
.event-notify-failed__addr[b-b3f3bzj8ve] {
    /* Hidden by default — DSGVO data-minimisation. The address is still in
       the mailto: href so a single click opens the mail client; it only
       appears as visible text when the user opts in via the toggle below. */
    display: none;
    margin-left: .4rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .85em;
    color: var(--fg-soft);
}

/* --- Notify-history (audit trail, Carecom-only) -------------------------- */
.event-notify-history[b-b3f3bzj8ve] {
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-muted);
}
.event-notify-history h3[b-b3f3bzj8ve] { margin-top: 0; font-size: 1.05rem; }
.event-notify-history__empty[b-b3f3bzj8ve] { color: var(--fg-soft); font-style: italic; margin: 0; }

.event-notify-history__list[b-b3f3bzj8ve] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.event-notify-history__item[b-b3f3bzj8ve] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.event-notify-history__item details summary[b-b3f3bzj8ve] {
    cursor: pointer;
    padding: .55rem .8rem;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: baseline;
    font-size: .92rem;
}
.event-notify-history__item details[open] summary[b-b3f3bzj8ve] {
    border-bottom: 1px solid var(--border);
}
.event-notify-history__item time[b-b3f3bzj8ve] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 600;
    color: var(--fg);
}
.event-notify-history__sender[b-b3f3bzj8ve] { color: var(--fg-soft); }

.event-notify-history__counts[b-b3f3bzj8ve] {
    margin-left: auto;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
}
.event-notify-history__counts--ok[b-b3f3bzj8ve]      { background: var(--success-soft); color: var(--success); }
.event-notify-history__counts--partial[b-b3f3bzj8ve] { background: var(--warning-soft); color: var(--warning-fg); }
.event-notify-history__counts--empty[b-b3f3bzj8ve]   { background: var(--bg-muted); color: var(--fg-soft); }

.event-notify-history__final[b-b3f3bzj8ve] {
    margin: .6rem .8rem 0;
    color: var(--accent-dark);
    font-size: .9rem;
}
.event-notify-history__message[b-b3f3bzj8ve] {
    margin: .6rem .8rem 0;
    padding: .5rem .8rem;
    border-left: 3px solid var(--border);
    background: var(--bg-muted);
    color: var(--fg-soft);
    font-size: .9rem;
    white-space: pre-wrap;
}

.event-notify-history__deliveries[b-b3f3bzj8ve] {
    margin: .6rem 0 .8rem;
    padding: 0 .8rem 0 1.8rem;
    list-style: none;
    font-size: .9rem;
}
.event-notify-history__deliveries li[b-b3f3bzj8ve] {
    padding: .25rem 0;
    border-bottom: 1px dashed transparent;
}
.event-notify-history__deliveries li + li[b-b3f3bzj8ve] { border-top: 1px dashed var(--border); }

.event-notify-history__status[b-b3f3bzj8ve] {
    display: inline-block;
    width: 1.2rem;
    text-align: center;
    font-weight: 700;
    margin-right: .3rem;
}
.event-notify-history__status--ok[b-b3f3bzj8ve]   { color: var(--success); }
.event-notify-history__status--fail[b-b3f3bzj8ve] { color: var(--danger); }

.event-notify-history__addr[b-b3f3bzj8ve] {
    margin-left: .4rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .85em;
    color: var(--fg-soft);
}
.event-notify-history__error[b-b3f3bzj8ve] {
    margin: .2rem 0 .4rem 1.5rem;
    padding: .25rem .5rem;
    border-left: 2px solid var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .82rem;
    word-break: break-word;
}
.event-notify-failed:has(.event-notify-failed__toggle[open]) .event-notify-failed__addr[b-b3f3bzj8ve] {
    display: inline;
}

.event-notify-failed__toggle[b-b3f3bzj8ve] {
    margin-top: .6rem;
    font-size: .85rem;
}
.event-notify-failed__toggle summary[b-b3f3bzj8ve] {
    cursor: pointer;
    color: var(--warning-fg);
    width: fit-content;
}
.event-notify-failed__toggle summary:hover[b-b3f3bzj8ve] {
    text-decoration: underline;
}
/* /Components/Pages/Intern/Events/EventsIndex.razor.rz.scp.css */
/* Events list + inline "create" form (CarecomEmployee only).
   Body text from the MarkupString-style rendered content is in this
   component's scope already — no ::deep needed except where indicated. */

.events-list[b-i5109ik9sq] {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
    display: grid;
    gap: 1rem;
}
/* Surface + hover come from the global .card / .card--hover classes; spacing only. */
.events-list__item[b-i5109ik9sq] { padding: 1rem 1.25rem; }
.events-list__title[b-i5109ik9sq] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--fg);
    text-decoration: none;
    display: block;
}
.events-list__title:hover[b-i5109ik9sq] { color: var(--accent); text-decoration: none; }
.events-list__meta[b-i5109ik9sq] { font-size: .85rem; color: var(--fg-muted); margin-top: .15rem; }
.events-list__desc[b-i5109ik9sq] { margin: .4rem 0 0; color: var(--fg-soft); }

.events-empty[b-i5109ik9sq] { color: var(--fg-muted); font-style: italic; }

/* --- Closed events ------------------------------------------------------- */
.events-list__item--closed[b-i5109ik9sq] { background: var(--bg); }
.events-list__item--closed .events-list__title[b-i5109ik9sq] { color: var(--fg-muted); }
.events-list__badge[b-i5109ik9sq] {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--fg-muted);
    color: var(--bg);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: .05em;
}

/* --- Carecom-only per-event actions (close/reopen, delete) --------------- */
.events-list__actions[b-i5109ik9sq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--border);
}
.events-action[b-i5109ik9sq] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .45rem .9rem;
    font: inherit;
    font-size: .85rem;
    color: var(--fg-soft);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.events-action:hover[b-i5109ik9sq] { border-color: var(--accent); color: var(--accent); }
.events-action--danger[b-i5109ik9sq] { color: var(--danger); }
.events-action--danger:hover[b-i5109ik9sq] { border-color: var(--danger); color: var(--bg); background: var(--danger); }

.events-action__confirm[b-i5109ik9sq] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--danger);
}

.events-create[b-i5109ik9sq] {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}
.events-create h2[b-i5109ik9sq] { margin-top: 0; font-size: 1.2rem; }
/* Form fields use the global .form-field class (site.css); the submit
   button now uses the site-wide .btn-primary recipe. */

.events-only-carecom[b-i5109ik9sq] {
    margin-top: 2.5rem;
    padding: .9rem 1.1rem;
    border-left: 3px solid var(--accent-soft);
    color: var(--fg-muted);
    font-size: .9rem;
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* 404 page — the active language can't be derived from the languageless
   /not-found route, so the German and English copy are presented as two
   visually equal blocks separated by a divider rule. */

.notfound-langs[b-8mws3568vy] {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin: 1.2rem 0;
}

.notfound-lang[b-8mws3568vy] { color: var(--fg-soft); }
.notfound-lang p:last-child[b-8mws3568vy] { margin-bottom: 0; }

/* Divider between the two equal-weight language blocks. */
.notfound-lang + .notfound-lang[b-8mws3568vy] {
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
}
/* /Components/Pages/Partner.razor.rz.scp.css */
/* Partner page — CARECOM's network of specialists and corporate partners,
   shown as a featured banner (Eve), a card grid (network) and a corporate
   banner (Microsoft). */

.partner-intro[b-wm9lck50zl] {
    font-size: 1.1rem;
    color: var(--fg-soft);
    margin: 0 0 1.8rem;
}

/* --- Banner: featured "better half" + corporate partner ----------------- */
.partner-feature[b-wm9lck50zl] {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    background: var(--accent-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.7rem;
    margin: 0 0 1.6rem;
}
.partner-feature--plain[b-wm9lck50zl] {
    background: var(--bg-muted);
    border: 1px solid var(--border);
}
.partner-feature__body[b-wm9lck50zl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.partner-feature__body > *[b-wm9lck50zl]      { margin: 0; }
.partner-feature__title[b-wm9lck50zl]         { font-size: 1.35rem; font-weight: 500; }
.partner-feature__body p[b-wm9lck50zl]        { color: var(--fg-soft); }

/* --- Section headings --------------------------------------------------- */
.partner-section-title[b-wm9lck50zl] { margin: 2rem 0 1rem; }

/* --- Network card grid -------------------------------------------------- */
.partner-grid[b-wm9lck50zl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.1rem;
}
/* Surface + hover come from the global .card / .card--hover classes; layout only. */
.partner-card[b-wm9lck50zl] {
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.3rem;
}
.partner-card__title[b-wm9lck50zl] { margin: 0 0 .4rem; font-size: 1.1rem; }
.partner-card__desc[b-wm9lck50zl] {
    flex: 1;                       /* push the link onto the card's bottom edge */
    margin: 0 0 .9rem;
    color: var(--fg-soft);
    font-size: .95rem;
}
.partner-card__link[b-wm9lck50zl] { align-self: flex-start; font-weight: 600; font-size: .9rem; }

/* --- Microsoft logo tile ------------------------------------------------ */
.partner-logo[b-wm9lck50zl] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow-sm);
}
.partner-logo svg[b-wm9lck50zl] { width: 2.1rem; height: 2.1rem; display: block; }

/* Stack the banner avatar above its text on very narrow viewports. */
@media (max-width: 640px) {
    .partner-feature[b-wm9lck50zl] { flex-direction: column; gap: 1rem; }
}
/* /Components/Pages/Photography.razor.rz.scp.css */
/* Full-bleed PhotoSlider variant for the Photography page. The wrapping
   <div class="photo-slider-fullwidth"> lives in Photography.razor; the
   actual slider markup is inside the PhotoSlider component, so we cross
   the scope boundary with ::deep to override its rounded corners and
   force a fixed 70vh viewport height. */

.photo-slider-fullwidth[b-7l65v5k0za] { width: 100%; margin: 1.5rem 0; }

.photo-slider-fullwidth[b-7l65v5k0za]  .photo-slider {
    border-radius: 0;
    box-shadow: none;
}
.photo-slider-fullwidth[b-7l65v5k0za]  .photo-slider__viewport {
    /* Keep the PhotoSlider's default 3:2 aspect-ratio (matches the slide
       library). On very tall screens the 3:2 would push the slider past
       the fold, so we cap with max-height — that's where object-fit:
       contain saves the day with a slim letterbox left/right. */
    max-height: 70vh;
    min-height: 320px;
}
/* /Components/Pages/SelfService.razor.rz.scp.css */
/* Scoped styles for the Selbstbedienung / Self-Service page.
   Two affiliate-partner cards with category icon + brand name in
   accent typography + clear CTA. The cards lean on the same
   --bg-muted / --accent design tokens used elsewhere on the site
   so they read as part of the same visual family, not a brochure. */

/* ===== Mascot banner ==================================================
   Stroke-icon SVG of a stick figure pushing a shopping cart. Walks in
   from the left, settles in the middle, gives a small wave. Animations
   are paused initially and resume only when the wrapping .reveal element
   enters the viewport (via reveal.js toggling .is-visible) — so the
   sequence re-fires on every page (re)mount, in sync with the rest of
   the reveal'd content on the page. */
.self-service__mascot[b-1v0rh4q6w3] {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto 1.5rem;
    /* The whole SVG is the click target for the bonus wave gesture (see
       self-service-mascot.js). Scoping the hit area to the <svg> element
       instead of the inner walker <g> sidesteps the patchy mobile support
       for pointer-events: bounding-box — users no longer have to land
       exactly on a 1.8 px stroke. touch-action: manipulation strips iOS
       Safari's 300 ms double-tap-to-zoom delay so a tap fires immediately.
       cursor: pointer is the only discovery affordance — there's no text
       hint. After the choreography ends the wrap collapses (max-height: 0;
       overflow: hidden) and the clipped SVG stops receiving pointer events
       on its own. */
    cursor: pointer;
    touch-action: manipulation;
}

/* Once the walker has fully exited (≈ 5.2s), the SVG box leaves an
   empty ~60-px row behind that would otherwise just sit there forever.
   Collapse the wrap so the partner cards below slide up into the freed
   space — overflow:hidden lets max-height interpolate cleanly to 0
   without the SVG spilling out during the shrink. Same play-state
   gating as the inner animation layers, so the sequence (mascot enters,
   parks, waves, exits, wrap closes up) replays identically on every
   page (re)mount. The wrap is freshly created each mount, so the
   pause/resume pattern doesn't carry stale animation state across
   visits (cf. the wink-img re-mount bug where reuse + play-state
   toggle preserved the clock — that issue doesn't apply here). */
.self-service__mascot-wrap[b-1v0rh4q6w3] {
    overflow: hidden;
    max-height: 6rem;
    animation: mascot-collapse-b-1v0rh4q6w3 0.6s ease-in-out 5.3s 1 both;
    animation-play-state: paused;
}
.self-service__mascot-wrap.is-visible[b-1v0rh4q6w3] {
    animation-play-state: running;
}
@keyframes mascot-collapse-b-1v0rh4q6w3 {
    0%   { max-height: 6rem; }
    100% { max-height: 0; }
}

/* Hold every animated layer at its start frame until the .reveal wrapper
   becomes .is-visible — then everything resumes at once. */
.reveal .self-service__mascot-walker[b-1v0rh4q6w3],
.reveal .self-service__mascot-bobber[b-1v0rh4q6w3],
.reveal .self-service__mascot-cart[b-1v0rh4q6w3],
.reveal .self-service__mascot-arm-wave[b-1v0rh4q6w3],
.reveal .self-service__mascot-leg[b-1v0rh4q6w3],
.reveal .self-service__mascot-wheel[b-1v0rh4q6w3] {
    animation-play-state: paused;
}
.reveal.is-visible .self-service__mascot-walker[b-1v0rh4q6w3],
.reveal.is-visible .self-service__mascot-bobber[b-1v0rh4q6w3],
.reveal.is-visible .self-service__mascot-cart[b-1v0rh4q6w3],
.reveal.is-visible .self-service__mascot-arm-wave[b-1v0rh4q6w3],
.reveal.is-visible .self-service__mascot-leg[b-1v0rh4q6w3],
.reveal.is-visible .self-service__mascot-wheel[b-1v0rh4q6w3] {
    animation-play-state: running;
}

/* Walker — full sequence runs 5.2s end-to-end:
     0%  →  35%   walk-in   (1.8s — slide from off-screen left to centre)
     35% →  65%   parked    (1.6s — cart settles, then the wave plays)
     65% → 100%   walk-out  (1.8s — slide off to the right)
   The first and last keyframes are off-screen, so the figure simply
   doesn't exist visually before the sequence starts or after it ends.
   Linear easing keeps the walking speed constant; the per-step bobbing
   (mascot-bob) carries the organic feel. */
.self-service__mascot-walker[b-1v0rh4q6w3] {
    animation: mascot-walk-b-1v0rh4q6w3 5.2s linear both;
}
@keyframes mascot-walk-b-1v0rh4q6w3 {
    0%   { transform: translateX(-300px); }
    35%  { transform: translateX(0); }
    65%  { transform: translateX(0); }
    100% { transform: translateX(300px); }
}

/* Right-to-left mode — handled by a separate mirror layer above the
   walker, so the walker keyframes stay identical for both directions.
   In LTR the mirror is identity; in RTL it does translateX(480) scaleX(-1)
   — first mirrors the assembly around viewBox-x=0, then shifts the
   mirrored layout right by the viewBox width so a point originally at
   x=190 lands visually at x=290 (i.e. mirrored around the centre line).
   transform-box: view-box anchors the 480px unit to viewBox coords.
   The mascot script (self-service-mascot.js) adds .is-direction-rtl
   based on sessionStorage so the direction alternates on each (re-)mount. */
.self-service__mascot.is-direction-rtl .self-service__mascot-mirror[b-1v0rh4q6w3] {
    transform-box: view-box;
    transform-origin: 0 0;
    transform: translateX(480px) scaleX(-1);
}

/* Bob — small up-down hops at the figure's footstep rate. Runs during
   both walk phases (4 hops each); held at 0 during the parked phase so
   the figure stands still while the wave gesture takes the spotlight.
   Total spans the whole 5.2s walker so the timings stay aligned by
   percentage. */
.self-service__mascot-bobber[b-1v0rh4q6w3] {
    animation: mascot-bob-b-1v0rh4q6w3 5.2s ease-in-out both;
}
@keyframes mascot-bob-b-1v0rh4q6w3 {
    /* Walk-in: 4 hops between 0% and 35% */
    0%, 8.75%, 17.5%, 26.25%, 35% { transform: translateY(0); }
    4.4%, 13.1%, 21.9%, 30.6%     { transform: translateY(-2px); }
    /* Parked: hold at 0 between 35% and 65% */
    65%                            { transform: translateY(0); }
    /* Walk-out: 4 hops between 65% and 100% */
    69.4%, 78.1%, 86.9%, 95.6%    { transform: translateY(-2px); }
    73.75%, 82.5%, 91.25%, 100%   { transform: translateY(0); }
}

/* Cart settle — right after the walk completes (delay 1.8s), the cart
   does one tiny "skid + settle" bounce, as if its inertia carried it
   slightly forward when the figure stopped. */
.self-service__mascot-cart[b-1v0rh4q6w3] {
    animation: mascot-cart-settle-b-1v0rh4q6w3 0.5s ease-out 1.8s 1 both;
}
@keyframes mascot-cart-settle-b-1v0rh4q6w3 {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-3px); }
    60%  { transform: translateY(1px); }
    100% { transform: translateY(0); }
}

/* Wave — after the cart settles (delay 2.4s), the back arm flaps up
   once and returns. transform-box: view-box lets transform-origin use
   the SVG's viewBox coordinates, so the rotation pivots cleanly around
   the figure's shoulder (190, 33). Only valid AFTER the walker has come
   to rest at translateX(0) — that's why the wave's delay sits after the
   walk completes. */
.self-service__mascot-arm-wave[b-1v0rh4q6w3] {
    transform-box: view-box;
    transform-origin: 190px 33px;
    animation: mascot-wave-b-1v0rh4q6w3 1.0s ease-in-out 2.4s 1 both;
}
@keyframes mascot-wave-b-1v0rh4q6w3 {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(135deg); }
    50%      { transform: rotate(150deg); }
    75%      { transform: rotate(135deg); }
}

/* Legs — swing alternately around the hip pivot (190, 48) at the same
   step rate as the bob. Each leg gets 4 swings during walk-in (0–35%)
   and 4 more during walk-out (65–100%); held at 0 during the parked
   phase (35–65%) so the wave reads cleanly. Front and back legs use
   the same keyframes structure but with opposite signs so they swing
   in counter-phase — natural gait. The peak frames (4.4%, 13.1%, …)
   line up exactly with the bob's up-position, so the leg is mid-air
   while the body is at its hop apex. */
.self-service__mascot-leg[b-1v0rh4q6w3] {
    transform-box: view-box;
    transform-origin: 190px 48px;
}
.self-service__mascot-leg--front[b-1v0rh4q6w3] {
    animation: mascot-leg-front-b-1v0rh4q6w3 5.2s ease-in-out both;
}
.self-service__mascot-leg--back[b-1v0rh4q6w3] {
    animation: mascot-leg-back-b-1v0rh4q6w3 5.2s ease-in-out both;
}
@keyframes mascot-leg-front-b-1v0rh4q6w3 {
    /* Walk-in: 4 alternating swings between 0% and 35% */
    0%, 8.75%, 17.5%, 26.25%, 35% { transform: rotate(0deg); }
    4.4%,  21.9%                  { transform: rotate(12deg); }
    13.1%, 30.6%                  { transform: rotate(-12deg); }
    /* Parked: hold at 0 between 35% and 65% */
    65%                            { transform: rotate(0deg); }
    /* Walk-out: 4 alternating swings between 65% and 100% */
    69.4%, 86.9%                   { transform: rotate(12deg); }
    78.1%, 95.6%                   { transform: rotate(-12deg); }
    73.75%, 82.5%, 91.25%, 100%   { transform: rotate(0deg); }
}
@keyframes mascot-leg-back-b-1v0rh4q6w3 {
    /* Mirror of leg-front — back leg is forward when front is back. */
    0%, 8.75%, 17.5%, 26.25%, 35% { transform: rotate(0deg); }
    4.4%,  21.9%                  { transform: rotate(-12deg); }
    13.1%, 30.6%                  { transform: rotate(12deg); }
    65%                            { transform: rotate(0deg); }
    69.4%, 86.9%                   { transform: rotate(-12deg); }
    78.1%, 95.6%                   { transform: rotate(12deg); }
    73.75%, 82.5%, 91.25%, 100%   { transform: rotate(0deg); }
}

/* Wheels — linear roll synced to the walker. Each wheel spins 1.5
   revolutions during each walk phase (540deg per phase, 1080deg total)
   and is held still during the park phase so the cart visibly settles.
   Origins differ between left and right (cx of each circle); rotation
   pivots through the spoke that's drawn inside each wheel group so the
   spin reads even at this size. Linear easing keeps the spin rate
   constant with the walker's linear motion. */
.self-service__mascot-wheel[b-1v0rh4q6w3] {
    transform-box: view-box;
}
.self-service__mascot-wheel--left[b-1v0rh4q6w3] {
    transform-origin: 224px 66px;
    animation: mascot-wheel-b-1v0rh4q6w3 5.2s linear both;
}
.self-service__mascot-wheel--right[b-1v0rh4q6w3] {
    transform-origin: 246px 66px;
    animation: mascot-wheel-b-1v0rh4q6w3 5.2s linear both;
}
@keyframes mascot-wheel-b-1v0rh4q6w3 {
    0%   { transform: rotate(0deg); }
    35%  { transform: rotate(540deg); }
    65%  { transform: rotate(540deg); }
    100% { transform: rotate(1080deg); }
}

@media (prefers-reduced-motion: reduce) {
    /* All animated layers stay at their 0%/100% rest state — figure
       simply appears in its end pose without any motion. The wrap also
       skips the collapse and stays at full height, so the mascot is
       visible the whole time. The click-triggered extra wave is gated
       at the JS layer (self-service-mascot.js bails out on
       prefers-reduced-motion). */
    .self-service__mascot-walker[b-1v0rh4q6w3],
    .self-service__mascot-bobber[b-1v0rh4q6w3],
    .self-service__mascot-cart[b-1v0rh4q6w3],
    .self-service__mascot-arm-wave[b-1v0rh4q6w3],
    .self-service__mascot-leg[b-1v0rh4q6w3],
    .self-service__mascot-wheel[b-1v0rh4q6w3],
    .self-service__mascot-wrap[b-1v0rh4q6w3] {
        animation: none;
    }
}
/* ====================================================================== */

.self-service__partners[b-1v0rh4q6w3] {
    display: grid;
    gap: 1.25rem;
    margin: 2rem 0 2.5rem;
}

.self-service__partner[b-1v0rh4q6w3] {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem 1.6rem;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    align-items: flex-start;
    transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.self-service__partner:hover[b-1v0rh4q6w3] {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.self-service__partner-icon[b-1v0rh4q6w3] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--radius);
}
.self-service__partner-icon svg[b-1v0rh4q6w3] { width: 30px; height: 30px; display: block; }

.self-service__partner-body[b-1v0rh4q6w3] { flex: 1; min-width: 0; }

.self-service__partner-tagline[b-1v0rh4q6w3] {
    margin: 0 0 .15rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.self-service__partner-name[b-1v0rh4q6w3] {
    margin: 0 0 .6rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--fg);
}
.self-service__partner-body p[b-1v0rh4q6w3] {
    margin: 0 0 1rem;
    color: var(--fg-soft);
}

.self-service__partner-cta[b-1v0rh4q6w3] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 500;
    transition: background .15s ease;
}
.self-service__partner-cta:hover[b-1v0rh4q6w3] {
    background: var(--accent-dark);
    color: #fff;
    text-decoration: none;
}
.self-service__partner-cta svg[b-1v0rh4q6w3] {
    width: 16px;
    height: 16px;
    transition: transform .15s ease;
}
.self-service__partner-cta:hover svg[b-1v0rh4q6w3] { transform: translateX(2px); }

.self-service__disclosure[b-1v0rh4q6w3] {
    margin: 2rem 0 0;
    color: var(--fg-muted);
    font-size: .85rem;
    font-style: italic;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

@media (max-width: 640px) {
    .self-service__partner[b-1v0rh4q6w3] { flex-direction: column; gap: 1rem; }
    .self-service__partner-icon[b-1v0rh4q6w3] { width: 48px; height: 48px; }
}
/* /Components/Pages/SignIn.razor.rz.scp.css */
/* Provider-choice page: one button per configured OIDC login provider. */

.signin-providers[b-rbw1ro72ar] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    max-width: 22rem;
    margin: 1.5rem 0;
}

.signin-provider[b-rbw1ro72ar] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
.signin-provider:hover[b-rbw1ro72ar] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg);
    text-decoration: none;
}

.signin-unavailable[b-rbw1ro72ar] {
    color: var(--fg-soft);
    font-style: italic;
}
/* /Components/Shared/BlogTeaser.razor.rz.scp.css */
/* One blog-listing entry — surface + hover come from the global .card /
   .card--hover classes; only the listing-specific spacing lives here. */
.blog-teaser[b-omk3epxibv] {
    margin: 1.25rem 0;
    padding: 1.25rem 1.4rem;
}

/* Category chip styling lives in site.css as .category-chip + per-category
   modifier. Here the chip sits as a flex item inside .blog-teaser__meta,
   so its own margins are zeroed and the meta line's flex gap handles the
   spacing to the rest of the byline. */
.blog-teaser__meta[b-omk3epxibv]  .category-chip { margin: 0; }

.blog-teaser__title[b-omk3epxibv] { margin: 0; font-size: 1.2rem; font-weight: 500; }
.blog-teaser__title a[b-omk3epxibv]       { color: var(--fg); }
.blog-teaser__title a:hover[b-omk3epxibv] { color: var(--accent); text-decoration: none; }

.blog-teaser__meta[b-omk3epxibv] {
    margin: .35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: baseline;
    font-size: .85rem;
    color: var(--fg-muted);
}
.blog-teaser__author[b-omk3epxibv] { font-weight: 600; }
.blog-teaser__sep[b-omk3epxibv]    { color: var(--border); }

.blog-teaser__excerpt[b-omk3epxibv] { color: var(--fg-soft); margin: .65rem 0 .55rem; }
.blog-teaser__more[b-omk3epxibv]    { display: inline-block; font-weight: 600; }

/* Age-based emphasis — the listing has posts going back to 2017, and a
   uniform card-stack flattens "from last week" into "from eight years ago".
   The data-age attribute (set in BlogTeaserCodeBehind from Post.Date)
   picks one of three tiers:
     fresh     — ≤ 6 months: accent stripe + larger title for at-a-glance currency
     standard  — 6 months – 3 years: base styling (no override below)
     old       — > 3 years: collapsed one-liner, smaller and slightly dimmed
   The "old" cutoff matches BlogEntryCodeBehind.DatedAfterYears so the
   listing emphasis and the per-post "dated notice" agree on what counts
   as historical. */
.blog-teaser[data-age="fresh"][b-omk3epxibv] {
    border-left: 4px solid var(--accent);
    padding-left: 1.2rem;
}
.blog-teaser[data-age="fresh"] .blog-teaser__title[b-omk3epxibv] {
    font-size: 1.4rem;
    font-weight: 600;
}

.blog-teaser[data-age="old"][b-omk3epxibv] {
    padding: .75rem 1.1rem;
    opacity: .8;
    transition: opacity .15s ease;
}
.blog-teaser[data-age="old"]:hover[b-omk3epxibv] { opacity: 1; }
.blog-teaser[data-age="old"] .blog-teaser__title[b-omk3epxibv] {
    font-size: 1rem;
    font-weight: 400;
}
.blog-teaser[data-age="old"] .blog-teaser__excerpt[b-omk3epxibv],
.blog-teaser[data-age="old"] .blog-teaser__more[b-omk3epxibv] {
    display: none;
}
.blog-teaser[data-age="old"] .blog-teaser__meta[b-omk3epxibv] {
    margin-top: .2rem;
    font-size: .8rem;
}
/* /Components/Shared/ContactForm.razor.rz.scp.css */
/* Scoped styles for the ContactForm. The field wrappers use the global
   .form-field class (site.css), which styles the labels, captions and the
   <input>/<textarea> in one place. Only the submit button, the error text
   and the success panel are component-specific and live here. */

/* Two-column grid on wider viewports: Name | Subject, Email | Phone, then
   Message + actions full-width. Collapses to a single column below 640px
   so a phone never sees half-width inputs. Grid gap replaces the per-field
   margin so the spacing is consistent in both layouts.

   Note ::deep on the grid selector: <EditForm> renders the <form> from a
   child component, so the scope-attribute that scoped CSS would otherwise
   put on the selector is absent on that element. ::deep moves the scope
   to an ancestor (the .contact-form div this CSS owns), letting the rule
   reach descendants whose markup we don't emit ourselves. The .form-field
   inner rules don't need ::deep because we own those labels in this
   component's template — they carry the scope attribute themselves. */
[b-sm0qds9ea7] .contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 1.1rem;
}
[b-sm0qds9ea7] .contact-form__grid .form-field { margin-bottom: 0; }
[b-sm0qds9ea7] .contact-form__grid .form-field--full { grid-column: 1 / -1; }

@media (max-width: 640px) {
    [b-sm0qds9ea7] .contact-form__grid {
        grid-template-columns: 1fr;
        gap: .9rem 0;
    }
}

/* Submit and Clear buttons use the site-wide .btn-primary / .btn-secondary
   recipes from site.css — no local rules needed beyond the action-row
   layout below. */
.contact-form__errors[b-sm0qds9ea7],
.contact-form__error[b-sm0qds9ea7]             { color: var(--danger); }
.contact-form__sent[b-sm0qds9ea7]              { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent); padding: 1rem 1.2rem; border-radius: var(--radius); }

/* Single horizontal band for the actions: Submit and Clear left, footnote
   trailing to the right. Wraps gracefully when the column is narrow —
   footnote slips below the buttons instead of being squashed off-screen. */
.contact-form__actions[b-sm0qds9ea7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: .3rem;
}
.contact-form__actions .contact-form__required-footnote[b-sm0qds9ea7] {
    margin-left: auto;
}

/* Footnote that re-states what the * means — calm tone, picks up the muted
   body-text colour. Lives inside .contact-form__actions, so vertical margin
   is reset; alignment is handled by the flex parent. */
.contact-form__required-footnote[b-sm0qds9ea7] {
    margin: 0;
    color: var(--fg-muted);
    font-size: .8rem;
}
/* /Components/Shared/CookieConsent.razor.rz.scp.css */
/* Scoped styles for the CookieConsent banner. ::deep keeps the
   external-link arrow rules effective for the anchors inside the
   MarkupString-rendered notice text. */

.cookie-consent[b-2k9a43pt7r] {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 200;
    background-color: #fff;
    border-top: 1px solid #999;
    padding: .9rem 1.5rem;
    text-align: center;
    box-shadow: 0 -2px 3px rgba(0,0,0,.2);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(50,50,50,.08) 5px, rgba(50,50,50,.08) 10px);
}

.cookie-consent__text[b-2k9a43pt7r] { margin: 0 0 .6rem; font-size: .9rem; }

.cookie-consent__buttons[b-2k9a43pt7r] {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cookie-consent__btn[b-2k9a43pt7r] {
    background: #fff;
    border: 1px solid #303030;
    border-radius: var(--radius);
    padding: .25rem .9rem;
    cursor: pointer;
    font: inherit;
}
.cookie-consent__btn--accept:hover[b-2k9a43pt7r] { background: var(--accent); color: #fff; border-color: var(--accent); }
.cookie-consent__btn--reject[b-2k9a43pt7r]       { color: var(--fg-soft); border-color: #999; }
.cookie-consent__btn--reject:hover[b-2k9a43pt7r] { background: #f0f0f0; }
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
.lang-switcher[b-lg27x2df1m]          { display: inline-flex; align-items: center; gap: .35rem; color: var(--fg-muted); font-size: .9rem; }
.lang-switcher__flag[b-lg27x2df1m]    { color: var(--accent); }
.lang-switcher__link[b-lg27x2df1m],
.lang-switcher__current[b-lg27x2df1m] { text-transform: uppercase; letter-spacing: .03em; }
.lang-switcher__link[b-lg27x2df1m]    { color: var(--accent); }
/* Active language: bold accent colour — distinct from the normal-weight
   accent links in the header and from the grey-cascaded links in the
   dark SiteFooter, but without the visual weight of a filled chip. */
.lang-switcher__current[b-lg27x2df1m] { color: var(--accent); font-weight: 700; }
.lang-switcher__sep[b-lg27x2df1m]     { color: var(--border); }
/* /Components/Shared/LatestPosts.razor.rz.scp.css */
/* Scoped styles for LatestPosts component.
   All selectors below are auto-rewritten by Blazor to apply only to elements
   rendered by LatestPosts.razor — no global leakage, even though the class
   names are short ("latest-posts*"). */

.latest-posts[b-hegojyh9re] {
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.latest-posts__heading[b-hegojyh9re] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 .8rem;
    color: var(--fg);
}

.latest-posts__list[b-hegojyh9re] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.25rem 2rem;
}

@media (min-width: 600px) {
    .latest-posts__list[b-hegojyh9re] { grid-template-columns: 1fr 1fr; }
}

.latest-posts__item[b-hegojyh9re] { margin: 0; }

/* Meta line below excerpt: category chip + date side-by-side, wraps on
   narrow widths via the flex container. Position-below matches the
   BlogTeaser convention (chip + meta sit under the body, never above
   the title), so the home-page strip reads the same as the full blog
   listing. */
.latest-posts__meta[b-hegojyh9re] {
    margin: .4rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
}
.latest-posts__date[b-hegojyh9re] {
    font-size: .82rem;
    color: var(--fg-muted);
}

.latest-posts__title[b-hegojyh9re] {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 .3rem;
    line-height: 1.3;
}
.latest-posts__title a[b-hegojyh9re] { color: var(--fg); }
.latest-posts__title a:hover[b-hegojyh9re] { color: var(--accent); text-decoration: none; }

.latest-posts__excerpt[b-hegojyh9re] {
    font-size: .9rem;
    line-height: 1.4;
    color: var(--fg-soft);
    margin: 0;
}

.latest-posts__all[b-hegojyh9re] { margin: 1rem 0 0; font-size: .9rem; }
/* /Components/Shared/PageHeaderRow.razor.rz.scp.css */
.page-header-row[b-5oboxu3jgi] {
    border-bottom: 1px solid var(--border);
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
}
.page-header-row h1[b-5oboxu3jgi] { margin: 0 0 .25rem; }
/* /Components/Shared/PersonCard.razor.rz.scp.css */
/* Scoped styles for PersonCard. The contact table's rows come in via
   ChildContent from the caller (Contact.razor), so the td rules use ::deep. */

.person-card[b-c44i1gandd] { display: flex; flex-direction: column; gap: .4rem; }
.person-card__image[b-c44i1gandd] {
    width: 100%;
    max-width: 225px;
    aspect-ratio: 225 / 338;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: .4rem;
}
.person-card__name[b-c44i1gandd]      { margin: 0; font-size: 1.1rem; }
.person-card__name a[b-c44i1gandd]    { color: var(--fg); }
.person-card__role[b-c44i1gandd]      { margin: 0 0 .4rem; color: var(--fg-muted); font-weight: 400; }
.person-card__contact[b-c44i1gandd]   { width: 100%; border-collapse: collapse; }
.person-card__contact[b-c44i1gandd]  td              { padding: .2rem 0; vertical-align: top; }
.person-card__contact[b-c44i1gandd]  td:first-child  { color: var(--fg-muted); width: 6em; padding-right: 1em; }
/* /Components/Shared/PhotoSlider.razor.rz.scp.css */
/* Scoped styles for the PhotoSlider component, including the lightbox
   modal it portals to body. The full-bleed `.photo-slider-fullwidth`
   variant lives in Photography.razor.css (it wraps the slider). */

.photo-slider[b-ydhtlei0hi] { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #000; }
/* Viewport mirrors the native 3:2 of every slide in /images/slides/, so most
   screens see the photo edge-to-edge without any cropping or letterboxing.
   object-fit: contain is the safety net for the (rare) cases where the
   container deviates from 3:2 — e.g. the fullwidth variant's max-height cap
   on very tall screens. */
.photo-slider__viewport[b-ydhtlei0hi] { position: relative; aspect-ratio: 3/2; width: 100%; }
.photo-slider__slide[b-ydhtlei0hi] { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.photo-slider__slide.is-active[b-ydhtlei0hi] { opacity: 1; pointer-events: auto; }
.photo-slider__slide img[b-ydhtlei0hi] { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo-slider__open-btn[b-ydhtlei0hi] { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.photo-slider__open-btn:focus-visible[b-ydhtlei0hi] { outline: 3px solid var(--brand); outline-offset: -3px; }
.photo-slider__slide figcaption[b-ydhtlei0hi] { position: absolute; left: 1rem; bottom: 1rem; background: rgba(0,0,0,.6); color: #fff; padding: .35rem .75rem; border-radius: var(--radius); font-size: .9rem; }
.photo-slider__btn[b-ydhtlei0hi] { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; border: none; cursor: pointer; display: grid; place-items: center; }
.photo-slider__btn svg[b-ydhtlei0hi] { width: 22px; height: 22px; }
.photo-slider__btn:hover[b-ydhtlei0hi] { background: rgba(0,0,0,.75); }
.photo-slider__btn--prev[b-ydhtlei0hi] { left: .75rem; }
.photo-slider__btn--next[b-ydhtlei0hi] { right: .75rem; }
.photo-slider__dots[b-ydhtlei0hi] { position: absolute; bottom: .8rem; left: 50%; transform: translateX(-50%); display: flex; gap: .35rem; background: rgba(0,0,0,.35); padding: .35rem .6rem; border-radius: 999px; }
.photo-slider__dot[b-ydhtlei0hi] { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); padding: 0; cursor: pointer; }
.photo-slider__dot.is-active[b-ydhtlei0hi] { background: #fff; transform: scale(1.3); }

@media (hover: hover) {
    .photo-slider__slide figcaption[b-ydhtlei0hi],
    .photo-slider__btn[b-ydhtlei0hi],
    .photo-slider__dots[b-ydhtlei0hi] {
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    .photo-slider:hover .photo-slider__slide.is-active figcaption[b-ydhtlei0hi],
    .photo-slider:focus-within .photo-slider__slide.is-active figcaption[b-ydhtlei0hi],
    .photo-slider:hover .photo-slider__btn[b-ydhtlei0hi],
    .photo-slider:focus-within .photo-slider__btn[b-ydhtlei0hi],
    .photo-slider:hover .photo-slider__dots[b-ydhtlei0hi],
    .photo-slider:focus-within .photo-slider__dots[b-ydhtlei0hi] {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ------------ Lightbox modal opened on slide click ------------ */
.photo-slider-modal[b-ydhtlei0hi] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.92);
    display: flex; align-items: center; justify-content: center;
    padding: clamp(.5rem, 3vw, 3rem);
    outline: none;
    animation: photo-slider-modal-in-b-ydhtlei0hi .18s ease-out;
}
@keyframes photo-slider-modal-in-b-ydhtlei0hi { from { opacity: 0; } to { opacity: 1; } }

/* The stage fills the padded modal area; the figures are absolutely stacked
   inside it so the outgoing and incoming images overlap during a transition. */
.photo-slider-modal__stage[b-ydhtlei0hi] {
    position: relative;
    width: 100%; height: 100%;
    z-index: 0;
}
.photo-slider-modal__figure[b-ydhtlei0hi] {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .75rem;
}
.photo-slider-modal__figure img[b-ydhtlei0hi] {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 6rem);
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.photo-slider-modal__figure figcaption[b-ydhtlei0hi] {
    color: #fff; font-size: .95rem; text-align: center;
    background: rgba(0,0,0,.55); padding: .35rem .85rem; border-radius: var(--radius);
}

/* Directional slide + crossfade between lightbox images. The component keeps
   the outgoing figure mounted for the animation's length (ModalTransitionMs
   in the code-behind), so old and new cross over instead of hard-cutting. */
.photo-slider-modal__figure--in.is-next[b-ydhtlei0hi]  { animation: photo-slider-slide-in-right-b-ydhtlei0hi  .35s ease-out; }
.photo-slider-modal__figure--in.is-prev[b-ydhtlei0hi]  { animation: photo-slider-slide-in-left-b-ydhtlei0hi   .35s ease-out; }
.photo-slider-modal__figure--out.is-next[b-ydhtlei0hi] { animation: photo-slider-slide-out-left-b-ydhtlei0hi  .35s ease-in forwards; }
.photo-slider-modal__figure--out.is-prev[b-ydhtlei0hi] { animation: photo-slider-slide-out-right-b-ydhtlei0hi .35s ease-in forwards; }

@keyframes photo-slider-slide-in-right-b-ydhtlei0hi  { from { opacity: 0; transform: translateX(3rem); }  to { opacity: 1; transform: translateX(0); } }
@keyframes photo-slider-slide-in-left-b-ydhtlei0hi   { from { opacity: 0; transform: translateX(-3rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes photo-slider-slide-out-left-b-ydhtlei0hi  { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-3rem); } }
@keyframes photo-slider-slide-out-right-b-ydhtlei0hi { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(3rem); } }

.photo-slider-modal__btn[b-ydhtlei0hi],
.photo-slider-modal__close[b-ydhtlei0hi] {
    position: absolute;
    z-index: 1;
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.1); color: #fff; border: none;
    cursor: pointer; display: grid; place-items: center;
    transition: background .15s ease;
}
.photo-slider-modal__btn svg[b-ydhtlei0hi],
.photo-slider-modal__close svg[b-ydhtlei0hi] { width: 26px; height: 26px; }
.photo-slider-modal__btn:hover[b-ydhtlei0hi],
.photo-slider-modal__close:hover[b-ydhtlei0hi] { background: rgba(255,255,255,.25); }

.photo-slider-modal__btn--prev[b-ydhtlei0hi]  { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.photo-slider-modal__btn--next[b-ydhtlei0hi]  { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.photo-slider-modal__close[b-ydhtlei0hi]      { top: clamp(.5rem, 2vw, 2rem); right: clamp(.5rem, 2vw, 2rem); }

@media (prefers-reduced-motion: reduce) {
    .photo-slider-modal[b-ydhtlei0hi],
    .photo-slider-modal__figure[b-ydhtlei0hi] { animation: none !important; }
}
/* /Components/Shared/QuoteBlock.razor.rz.scp.css */
.quote-block[b-7doyf1b8j4] {
    margin: 2.5rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.quote-block__text[b-7doyf1b8j4]   { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; line-height: 1.45; margin: 0 0 .5rem; color: var(--fg-soft); }
.quote-block__mark[b-7doyf1b8j4]   { color: var(--accent); font-weight: 700; }
.quote-block__author[b-7doyf1b8j4] { color: var(--fg-muted); font-size: .9rem; }
/* /Components/Shared/ReferenceList.razor.rz.scp.css */
.reference-list__item[b-fp6y529es0]   { margin: 1.25rem 0; padding-left: 1rem; border-left: 3px solid var(--accent-soft); }
.reference-list__title[b-fp6y529es0]  { font-size: 1.05rem; margin: 0 0 .3rem; }
.reference-list__client[b-fp6y529es0] { color: var(--fg-muted); font-size: .9rem; margin: 0 0 .4rem; }
.reference-list__client em[b-fp6y529es0] { font-style: normal; }
.reference-list__body[b-fp6y529es0]   { margin: 0; color: var(--fg-soft); }
/* /Components/Shared/RightSidebar.razor.rz.scp.css */
/* Scoped styles for the default RightSidebar. The child-menu list styling
   is global (site.css) so custom asides — e.g. the Contact page's person-card
   column — can reuse it; only the portrait, contact block and logos are
   component-specific and live here. */

.right-sidebar[b-g8uylq00f9] { font-size: .92rem; }

.right-sidebar__portrait[b-g8uylq00f9]        { margin-bottom: 1.5rem; }
.right-sidebar__portrait img[b-g8uylq00f9]    { width: 100%; border-radius: var(--radius); margin-bottom: .8rem; }
.right-sidebar__portrait h3[b-g8uylq00f9]     { margin: 0 0 .15rem; font-size: 1.1rem; }
.right-sidebar__portrait h3 a[b-g8uylq00f9]   { color: var(--fg); }
.right-sidebar__portrait h4[b-g8uylq00f9]     { color: var(--fg-muted); margin: 0 0 .8rem; font-weight: 400; }

/* Image-only wrap + wink overlay, both injected at runtime by
   self-service-mascot.js. They only exist on the Selbstbedienung page
   where the mascot is present; on every other page that uses
   RightSidebar these rules simply match nothing.

   Why ::deep — Blazor scoped CSS adds a unique [b-xxxxxx] attribute
   only to elements rendered by THIS component's .razor template. Knoten,
   die per JS eingefügt werden, tragen das Attribut nicht und würden von
   regulärer Scoped-CSS nicht getroffen. Der ::deep-Kombinator hängt das
   Attribut nur an das LINKE Element (.right-sidebar__portrait — kommt
   aus dem Template, hat also b-xxx) und lässt die rechte Selektorseite
   ungescoped, sodass die JS-Kinder normal matchen.

   Layout: imgwrap macht den <img>-Block zum Positionierungs-Kontext, so
   dass das absolute Wink-Bild pixelgenau auf dem Original liegt. Beide
   Bilder teilen Größe und border-radius, der Crossfade spielt sich rein
   über opacity ab.

   Crossfade-Timing kondensiert auf einen echten Blinzler (~350 ms) und
   um 0.3 s gegenüber dem Wave-Start nach hinten geschoben, damit das
   Lid genau dann zu ist, wenn der Mascot-Arm oben in seiner höchsten
   Position steht (Wave 2.4s + ~0.5s bis zum Peak ≈ 2.9s; Wink voll zu
   zwischen 2.81s und 2.95s). */
.right-sidebar__portrait[b-g8uylq00f9]  .right-sidebar__portrait-imgwrap {
    position: relative;
    display: block;
    line-height: 0; /* swallow inline-img whitespace under the picture */
}
.right-sidebar__portrait[b-g8uylq00f9]  .right-sidebar__wink-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    border-radius: var(--radius);
    opacity: 0;
    /* The animation declaration sits ONLY on .is-winking (below). Toggling
       it via play-state instead would preserve the internal animation
       clock across pause/resume — so on a re-mount the keyframes wouldn't
       replay, they'd just stay parked at 100 % (opacity 0). With the
       animation property itself bound to the class, the JS restart trick
       (remove .is-winking → reflow → re-add) really does start fresh. */
}
.right-sidebar__portrait[b-g8uylq00f9]  .right-sidebar__wink-img.is-winking {
    animation: harald-wink-fade-b-g8uylq00f9 0.35s ease-in-out 2.7s 1 both;
}
/* @keyframes are global regardless of scoping. */
@keyframes harald-wink-fade-b-g8uylq00f9 {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .right-sidebar__portrait[b-g8uylq00f9]  .right-sidebar__wink-img.is-winking { animation: none; }
}

.right-sidebar__contact[b-g8uylq00f9]         { width: 100%; border-collapse: collapse; }
.right-sidebar__contact td[b-g8uylq00f9]      { padding: .25rem 0; vertical-align: top; }
.right-sidebar__contact td:first-child[b-g8uylq00f9] { color: var(--fg-muted); width: 6em; padding-right: 1em; }

.right-sidebar__partnerlogo[b-g8uylq00f9]     { margin: 1rem 0; }
.right-sidebar__partnerlogo img[b-g8uylq00f9] { max-width: 200px; }
.right-sidebar__getty[b-g8uylq00f9]           { margin-top: 1rem; }
.right-sidebar__getty img[b-g8uylq00f9]       { width: 100px; height: 100px; }
/* /Components/Shared/SiteFooter.razor.rz.scp.css */
/* Scoped styles for SiteFooter. ::deep is used for the colour cascade onto
   child components' anchors (SocialIcons, LanguageSwitcher). */

.site-footer[b-feu45yot0s] {
    background: #1d242b;
    color: #c7ced5;
    margin-top: 4rem;
    padding: 2.5rem 0 1rem;
    font-size: .9rem;
}

.site-footer[b-feu45yot0s]  a       { color: #c7ced5; }
.site-footer[b-feu45yot0s]  a:hover { color: #fff; }

/* External-link arrow contrast on the dark footer surface. */
.site-footer[b-feu45yot0s]  a[target="_blank"]:not(.no-extlink):not(:has(img))::after {
    color: rgba(255, 255, 255, .55);
}
.site-footer[b-feu45yot0s]  a[target="_blank"]:not(.no-extlink):not(:has(img)):hover::after {
    color: #fff;
}

.site-footer__sub-header[b-feu45yot0s] {
    display: block;
    font-weight: 600;
    color: #fff;
    margin-bottom: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding-bottom: .25rem;
    text-decoration: none;
}

.site-footer__columns[b-feu45yot0s] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.site-footer__col a[b-feu45yot0s] { display: block; padding: .15rem 0; }
.site-footer__extras[b-feu45yot0s] { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); }
.site-footer__apps-list[b-feu45yot0s] { list-style: none; padding: 0; margin: 0; }
.site-footer__apps-list li[b-feu45yot0s] { padding: .15rem 0; }
.site-footer__hint[b-feu45yot0s] { color: #7d8892; font-size: .85em; }
.site-footer__meta[b-feu45yot0s] {
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.08);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 1.5rem;
    color: #7d8892;
    font-size: .85rem;
    align-items: center;
}
.site-footer__hello code[b-feu45yot0s] { background: rgba(255,255,255,.06); padding: .1rem .35rem; border-radius: 3px; }
.site-footer__imprint[b-feu45yot0s] { white-space: nowrap; }

@media (max-width: 980px) {
    .site-footer__columns[b-feu45yot0s] { grid-template-columns: repeat(2, 1fr); }
    .site-footer__extras[b-feu45yot0s]  { grid-template-columns: 1fr; }
    .site-footer__meta[b-feu45yot0s]    { grid-template-columns: 1fr; gap: .5rem; text-align: left; }
}
@media (max-width: 640px) {
    .site-footer__columns[b-feu45yot0s] { grid-template-columns: 1fr; }
}
/* /Components/Shared/SiteHeader.razor.rz.scp.css */
.site-header[b-nr7kbig8vq] {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
    box-shadow: var(--shadow-sm);
}
.site-header__inner[b-nr7kbig8vq] {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-top: .8rem;
    padding-bottom: .8rem;
}
.site-header__brand[b-nr7kbig8vq] { display: flex; align-items: center; }
.site-header__brand:hover[b-nr7kbig8vq] { text-decoration: none; }
.site-header__logo[b-nr7kbig8vq] { height: 38px; width: auto; }

/* flex-wrap: nowrap prevents the nav from orphaning a single item to row 2
   while the others stay up — when the nav can no longer fit alongside brand
   + right cluster, the @media block below switches the whole header to the
   centred two-row layout instead. The < 640px breakpoint re-enables
   wrapping so very narrow phones don't overflow. */
.site-header__nav[b-nr7kbig8vq]  { display: flex; gap: 1.8rem; flex-wrap: nowrap; }

/* Right-aligned cluster — holds (optional) auth controls + language switcher.
   The auto-margin sits on the WRAPPER, not on its children, so the lang
   switcher stays at the right edge whether auth is rendered or hidden. */
.site-header__right[b-nr7kbig8vq] { margin-left: auto; display: flex; gap: 1rem; align-items: center; }

.site-header__auth[b-nr7kbig8vq] { display: flex; gap: .8rem; align-items: center; font-size: .85rem; }
.site-header__auth a[b-nr7kbig8vq] { color: var(--fg-soft); text-decoration: none; }
.site-header__auth a:hover[b-nr7kbig8vq] { color: var(--accent); }
.site-header__user[b-nr7kbig8vq] { font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Multi-word sign-in/out labels (pl "Zaloguj się", fi "Kirjaudu sisään" …)
   must not break across two lines inside the header cluster. */
.site-header__signlink[b-nr7kbig8vq] { white-space: nowrap; }
.site-header__lang[b-nr7kbig8vq] { font-size: .9rem; }
.site-header__link[b-nr7kbig8vq] {
    color: var(--fg-soft);
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .55rem .25rem;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    text-decoration: none;
}
.site-header__link:hover[b-nr7kbig8vq] { color: var(--accent); text-decoration: none; }
.site-header__link.active[b-nr7kbig8vq] { color: var(--accent); border-bottom-color: var(--accent); }

/* Below 1024px the single-row layout (brand | nav | right) gets cramped —
   once the auth cluster is rendered the right side grows by ~250-300px and
   the nav can no longer fit alongside it. Switch to a centred two-row
   layout: brand + right cluster stay on row 1, the nav drops to row 2 as
   a centred block. The threshold has some headroom for long user names
   in the auth cluster; lowering it back to 900px would reintroduce the
   in-between state the user reported.
   flex-basis: 100% forces the nav onto its own line in a wrapping flex
   container. */
@media (max-width: 980px) {
    .site-header__inner[b-nr7kbig8vq] {
        flex-wrap: wrap;
        gap: .5rem 1.5rem;
    }
    .site-header__brand[b-nr7kbig8vq] { order: 1; }
    .site-header__right[b-nr7kbig8vq] { order: 2; margin-left: auto; }
    .site-header__nav[b-nr7kbig8vq]   {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        gap: 1rem;
        font-size: .85rem;
    }
}

/* On very narrow viewports (phone portrait) even the centred row 2 can't fit
   all nav items — re-enable wrapping inside the nav so they break into
   multiple centred lines instead of overflowing horizontally. */
@media (max-width: 640px) {
    .site-header__nav[b-nr7kbig8vq]  { flex-wrap: wrap; gap: .5rem .9rem; }
    .site-header__link[b-nr7kbig8vq] { font-size: .8rem; }
}
/* /Components/Shared/SocialIcons.razor.rz.scp.css */
.social-icons[b-vp8z33lsb5] { list-style: none; padding: 0; margin: 0; }
.social-icons li[b-vp8z33lsb5] { padding: .2rem 0; display: flex; align-items: center; gap: .5rem; }
.social-icons__glyph[b-vp8z33lsb5] {
    display: inline-grid;
    width: 22px; height: 22px;
    place-items: center;
    border-radius: 3px;
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
}
.social-icons__glyph--facebook[b-vp8z33lsb5] { background: #1877f2; font-family: Georgia, serif; }
.social-icons__glyph--twitter[b-vp8z33lsb5]  { background: #000; }
/* /Components/Shared/SpaceInvaders.razor.rz.scp.css */
/* Scoped styles for the SpaceInvaders mini-game block. */

.space-invaders[b-jnocfh5b5o] {
    margin: 2.5rem 0 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    /* The sticky SiteHeader is ~52px tall — keep a margin when in-page
       anchor links (e.g. "6502" in the Programmiersprachen paragraph)
       scroll the section into view. */
    scroll-margin-top: 4rem;
}
.space-invaders h3[b-jnocfh5b5o] { margin: 0 0 .5rem; }

.space-invaders__stage[b-jnocfh5b5o] {
    display: flex;
    justify-content: center;
    margin: 1rem 0 .5rem;
}

.space-invaders__canvas[b-jnocfh5b5o] {
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
    background: var(--bg-quote);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    cursor: crosshair;
    display: block;
    /* Prevent browser pinch/scroll while playing on touch devices, and
       suppress the iOS Safari tap-highlight flash on every shot. */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.space-invaders__canvas:focus[b-jnocfh5b5o] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.space-invaders__help[b-jnocfh5b5o] {
    color: var(--fg-muted);
    font-size: .85rem;
    text-align: center;
    margin: .5rem 0 0;
}
/* /Components/Shared/Testimonial.razor.rz.scp.css */
/* Scoped styles for the long-form Testimonial component. The body
   paragraphs come in via ChildContent (caller's scope), so the
   italic-colour rule needs ::deep to reach them. */

.testimonial-long[b-mhvdhjrq14] {
    border-left: 3px solid var(--accent-soft);
    padding: .5rem 0 .5rem 1.25rem;
    margin: 2rem 0;
}
.testimonial-long__body[b-mhvdhjrq14]  p { font-style: italic; color: var(--fg-soft); }
.testimonial-long__attrib[b-mhvdhjrq14] { margin: .5rem 0 0; font-size: .9rem; color: var(--fg); }
.testimonial-long__role[b-mhvdhjrq14]   { color: var(--fg-muted); }
/* /Components/Shared/TextCarousel.razor.rz.scp.css */
/* Scoped styles for the Home-page text carousel. */

.text-carousel[b-nf3w20z4n5] {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    height: 200px;
    background: #fff;
}
.text-carousel__slide[b-nf3w20z4n5] {
    position: absolute; inset: 0;
    padding: 1.5rem 4rem;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .6s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* All three slides are stacked on top of each other; only the active one
       should receive clicks. Without this, the topmost (last) slide swallows
       every click — its "mehr" link wins regardless of which is visible. */
    pointer-events: none;
}
.text-carousel__slide.is-active[b-nf3w20z4n5] { opacity: 1; pointer-events: auto; }

.text-carousel__caption[b-nf3w20z4n5]  { text-align: center; max-width: 600px; }
.text-carousel__brand[b-nf3w20z4n5]    { font-size: 1.1rem; font-weight: 300; color: var(--fg-soft); margin: 0 0 .4rem; text-transform: none; letter-spacing: 0; }
.text-carousel__brand sup[b-nf3w20z4n5] { font-size: .6em; }
.text-carousel__slogan[b-nf3w20z4n5]   { font-size: 1.5rem; font-weight: 300; margin: 0 0 1rem; color: var(--fg); }

.text-carousel__btn[b-nf3w20z4n5] {
    display: inline-block;
    padding: .45rem 1.2rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    text-decoration: none;
    transition: all .15s;
}
.text-carousel__btn:hover[b-nf3w20z4n5] { background: var(--accent); color: #fff; text-decoration: none; }

.text-carousel__control[b-nf3w20z4n5] {
    position: absolute; top: 0; bottom: 0;
    width: 3rem;
    display: flex; align-items: center; justify-content: center;
    color: rgba(0,0,0,.4);
    font-size: 2rem;
    text-decoration: none;
    transition: color .15s, background .15s;
}
.text-carousel__control:hover[b-nf3w20z4n5] { color: var(--accent); background: rgba(0,0,0,.04); text-decoration: none; }
.text-carousel__control--prev[b-nf3w20z4n5] { left: 0; }
.text-carousel__control--next[b-nf3w20z4n5] { right: 0; }

.text-carousel__indicators[b-nf3w20z4n5] {
    position: absolute;
    bottom: .8rem; left: 50%;
    transform: translateX(-50%);
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: .35rem;
}
.text-carousel__indicators li button[b-nf3w20z4n5] {
    width: 10px; height: 10px;
    padding: 0;
    border: 1px solid var(--fg-muted);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.text-carousel__indicators li.is-active button[b-nf3w20z4n5] { background: var(--fg-muted); }

@media (max-width: 980px) {
    .text-carousel__slide[b-nf3w20z4n5]  { padding: 1.5rem 3rem; }
    .text-carousel__slogan[b-nf3w20z4n5] { font-size: 1.2rem; }
}