/* /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. */

.blog-post__meta[b-0ggkzi3ggx] {
    color: var(--fg-muted);
    font-size: .9rem;
    margin: .25rem 0 0;
}
.blog-post__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; }

.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; }
.blog-post__back[b-0ggkzi3ggx] { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* 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 with hover-to-enlarge, mirroring the
   original site's behaviour. */
.blog-post[b-0ggkzi3ggx]  .blog-figure {
    margin: 1.5rem 0;
    text-align: center;
    overflow: visible;
}
.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 .35s ease, box-shadow .35s ease;
    transform-origin: center center;
    position: relative;
    z-index: 1;
}
.blog-post[b-0ggkzi3ggx]  .blog-img:hover,
.blog-post[b-0ggkzi3ggx]  .blog-img:focus-visible {
    transform: scale(1.55);
    box-shadow: var(--shadow-md);
    z-index: 5;
    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: 720px) {
    .blog-post[b-0ggkzi3ggx]  .blog-img { max-width: 100%; }
    .blog-post[b-0ggkzi3ggx]  .blog-img:hover,
    .blog-post[b-0ggkzi3ggx]  .blog-img:focus-visible { transform: scale(1.05); }
}
@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; }
.contact-form-hint[b-bcw7y394yl] { color: var(--fg-muted); font-size: .9rem; }

/* 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: 720px) {
    .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; }
.home-columns__col[b-guch9ovdxr] { text-align: center; }
.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;
}
.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); }

@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/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: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .4rem .9rem;
    font: inherit;
    cursor: pointer;
    color: var(--fg-soft);
    transition: background .15s, border-color .15s, color .15s;
}
.vote-btn:hover[b-b3f3bzj8ve] { border-color: var(--accent); color: var(--accent); }
.vote-btn.is-active[b-b3f3bzj8ve] { color: #fff; border-color: var(--accent); background: var(--accent); }

.vote-btn--yes.is-active[b-b3f3bzj8ve]   { background: #2d7a4f; border-color: #2d7a4f; }
.vote-btn--maybe.is-active[b-b3f3bzj8ve] { background: #b08000; border-color: #b08000; }
.vote-btn--no.is-active[b-b3f3bzj8ve]    { background: #a04040; border-color: #a04040; }

.vote-tally--yes[b-b3f3bzj8ve],   .vote-tally--Yes[b-b3f3bzj8ve]   { color: #2d7a4f; }
.vote-tally--maybe[b-b3f3bzj8ve], .vote-tally--Maybe[b-b3f3bzj8ve] { color: #b08000; }
.vote-tally--no[b-b3f3bzj8ve],    .vote-tally--No[b-b3f3bzj8ve]    { color: #a04040; }

.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: #fff;
}

.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; }
.event-add-suggestion__field[b-b3f3bzj8ve] { display: block; margin-bottom: .8rem; }
.event-add-suggestion__field span[b-b3f3bzj8ve] { display: block; font-size: .85rem; color: var(--fg-soft); margin-bottom: .2rem; }
.event-add-suggestion__field[b-b3f3bzj8ve]  input {
    padding: .45rem .65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: #fff;
}
.event-add-suggestion__submit[b-b3f3bzj8ve] {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: .45rem 1.1rem;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.event-add-suggestion__submit:hover[b-b3f3bzj8ve] { background: var(--accent-dark); }

/* --- 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;
}

/* --- 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: #a04040;
    border-color: #a04040;
}

/* --- Notify-participants drawer (Carecom-only) ---------------------------- */
.event-notify-trigger[b-b3f3bzj8ve] {
    background: #fff;
    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: #fff; }

.event-notify[b-b3f3bzj8ve] {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: #fff;
}
.event-notify h3[b-b3f3bzj8ve] { margin-top: 0; font-size: 1.05rem; }
.event-notify__field[b-b3f3bzj8ve] { display: block; margin-bottom: .8rem; }
.event-notify__field span[b-b3f3bzj8ve] {
    display: block; font-size: .85rem; color: var(--fg-soft); margin-bottom: .2rem;
}
.event-notify__field textarea[b-b3f3bzj8ve],
.event-notify__field select[b-b3f3bzj8ve] {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: #fff;
}
.event-notify__field textarea[b-b3f3bzj8ve] { resize: vertical; min-height: 4rem; }
.event-notify__actions[b-b3f3bzj8ve] {
    display: flex; gap: .6rem;
    margin-top: .4rem;
}
.event-notify__send[b-b3f3bzj8ve] {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: .45rem 1.1rem;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.event-notify__send:hover[b-b3f3bzj8ve] { background: var(--accent-dark); }
.event-notify__cancel[b-b3f3bzj8ve] {
    background: transparent;
    color: var(--fg-soft);
    border: 1px solid var(--border);
    padding: .45rem 1.1rem;
    border-radius: var(--radius);
    font: inherit;
    cursor: pointer;
}
.event-notify__cancel:hover[b-b3f3bzj8ve] { color: var(--fg); border-color: var(--fg-muted); }

.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: #fff4e0;
    border-left-color: #b08000;
    color: #6b4d00;
}
/* 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: #fff4e0;
    border-left: 3px solid #b08000;
    border-radius: var(--radius);
    font-size: .92rem;
    color: #6b4d00;
}
.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: #6b4d00;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.event-notify-failed__list a:hover[b-b3f3bzj8ve] {
    color: #a04040;
    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: #fff;
    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: #e6f4ec; color: #2d7a4f; }
.event-notify-history__counts--partial[b-b3f3bzj8ve] { background: #fff4e0; color: #6b4d00; }
.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: #2d7a4f; }
.event-notify-history__status--fail[b-b3f3bzj8ve] { color: #a04040; }

.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 #a04040;
    background: #faecec;
    color: #6b2828;
    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: #6b4d00;
    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;
}
.events-list__item[b-i5109ik9sq] {
    padding: 1rem 1.25rem;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .15s, box-shadow .2s;
}
.events-list__item:hover[b-i5109ik9sq] {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.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; }

.events-create[b-i5109ik9sq] {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
}
.events-create h2[b-i5109ik9sq] { margin-top: 0; font-size: 1.2rem; }
.events-create__field[b-i5109ik9sq] { display: block; margin-bottom: 1rem; }
.events-create__field span[b-i5109ik9sq] { display: block; font-size: .85rem; color: var(--fg-soft); margin-bottom: .25rem; }
.events-create__field[b-i5109ik9sq]  input,
.events-create__field[b-i5109ik9sq]  textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    color: var(--fg);
    background: #fff;
}
.events-create__submit[b-i5109ik9sq] {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: .55rem 1.3rem;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.events-create__submit:hover[b-i5109ik9sq] { background: var(--accent-dark); }

.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/Partner.razor.rz.scp.css */
.partner-entry[b-wm9lck50zl]      { margin: 1.5rem 0; }
.partner-entry h3[b-wm9lck50zl]   { margin-bottom: .3rem; }
.partner-entry p[b-wm9lck50zl]    { margin: .3rem 0; }
/* /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. */

.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: 600px) {
    .self-service__partner[b-1v0rh4q6w3] { flex-direction: column; gap: 1rem; }
    .self-service__partner-icon[b-1v0rh4q6w3] { width: 48px; height: 48px; }
}
/* /Components/Shared/BlogTeaser.razor.rz.scp.css */
.blog-teaser[b-omk3epxibv] { margin: 1.5rem 0 2rem; }
.blog-teaser__head[b-omk3epxibv] { display: flex; flex-direction: column; gap: .25rem; }
.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__date[b-omk3epxibv]    { color: var(--fg-muted); font-size: .85rem; margin-left: .5rem; white-space: nowrap; }
.blog-teaser__excerpt[b-omk3epxibv] { color: var(--fg-soft); margin: .5rem 0; }
.blog-teaser__more[b-omk3epxibv]    { font-weight: 600; }
/* /Components/Shared/ContactForm.razor.rz.scp.css */
/* Scoped styles for the ContactForm. The <input>/<textarea> elements are
   rendered by Blazor's <InputText>/<InputTextArea> child components, so they
   live OUTSIDE this component's scope marker — that's why every rule that
   targets them uses ::deep (otherwise the width: 100% wouldn't apply and
   the browser default ~150px width would show through). */

.contact-form__field[b-sm0qds9ea7]        { display: block; margin-bottom: 1rem; }
.contact-form__field span[b-sm0qds9ea7]   { display: block; font-size: .85rem; color: var(--fg-soft); margin-bottom: .25rem; }

.contact-form__field[b-sm0qds9ea7]  input,
.contact-form__field[b-sm0qds9ea7]  textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    color: var(--fg);
    background: #fff;
}
.contact-form__field[b-sm0qds9ea7]  input:focus,
.contact-form__field[b-sm0qds9ea7]  textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.contact-form__submit[b-sm0qds9ea7]            { background: var(--accent); color: #fff; border: none; padding: .65rem 1.4rem; border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer; }
.contact-form__submit:hover[b-sm0qds9ea7]      { background: var(--accent-dark); }
.contact-form__submit[disabled][b-sm0qds9ea7]  { opacity: .6; cursor: progress; }
.contact-form__errors[b-sm0qds9ea7],
.contact-form__error[b-sm0qds9ea7]             { color: #b8332b; margin-bottom: 1rem; }
.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); }
/* /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);
}

/* External-link marker variant inherited from the original sheet — kept
   intact for visual parity even though the banner is light. */
.cookie-consent[b-2k9a43pt7r]  a[target="_blank"]:not(.no-extlink):not(:has(img))::after {
    color: rgba(255, 255, 255, .55);
}

.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]  { color: var(--accent); }
/* /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; }

.latest-posts__date[b-hegojyh9re] {
    font-size: .82rem;
    color: var(--fg-muted);
    display: block;
}

.latest-posts__title[b-hegojyh9re] {
    font-size: 1rem;
    font-weight: 500;
    margin: .15rem 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; } }

.photo-slider-modal__figure[b-ydhtlei0hi] {
    margin: 0;
    max-width: 100%; max-height: 100%;
    display: flex; flex-direction: column; align-items: 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);
}

.photo-slider-modal__btn[b-ydhtlei0hi],
.photo-slider-modal__close[b-ydhtlei0hi] {
    position: absolute;
    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); }
/* /Components/Shared/PriceCard.razor.rz.scp.css */
/* "Postit"-style price card (Photography pricing).
   The post-it look — gradient paper, tape, slight rotation — is the brand
   gimmick on the pricing block; the visual stays exactly as before. */

.postit[b-oja8rm54x5] {
    position: relative;
    background: #fefabc;
    background-image: linear-gradient(135deg, #fff7a8 0%, #fde98a 100%);
    color: #2a2a25;
    padding: 1.6rem 1.5rem 1.4rem;
    margin: 2rem auto 1.5rem;
    max-width: 26rem;
    border-radius: 2px;
    box-shadow:
        0 1px 1px rgba(0,0,0,.12),
        0 6px 14px rgba(50,40,0,.18),
        0 18px 28px rgba(50,40,0,.10);
    transform: rotate(-1.4deg);
    transform-origin: center top;
    font-family: var(--font-sans);
}
.postit[b-oja8rm54x5]::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at top right, rgba(0,0,0,.05) 0%, transparent 30%),
        radial-gradient(ellipse at bottom left,  rgba(0,0,0,.04) 0%, transparent 35%);
    border-radius: inherit;
}
.postit__tape[b-oja8rm54x5] {
    position: absolute;
    top: -14px; left: 50%;
    width: 90px; height: 22px;
    transform: translateX(-50%) rotate(-2deg);
    background: rgba(212, 200, 130, .55);
    border: 1px solid rgba(0,0,0,.04);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.postit__title[b-oja8rm54x5] {
    margin: 0 0 .6rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2a2a25;
}
.postit__lead[b-oja8rm54x5]   { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.5; }
.postit__price[b-oja8rm54x5]  { font-weight: 700; }
.postit__vat-toggle[b-oja8rm54x5] {
    background: transparent;
    border: 0;
    padding: .05em .2em;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-bottom: 1px dashed rgba(0,0,0,.45);
    transition: background-color .15s, border-color .15s;
}
.postit__vat-toggle:hover[b-oja8rm54x5] {
    background: rgba(0,0,0,.06);
    border-bottom-color: rgba(0,0,0,.8);
}
.postit__vat-toggle:focus-visible[b-oja8rm54x5] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}
.postit__detail[b-oja8rm54x5] { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.45; }
.postit__goal[b-oja8rm54x5]   { margin: 0; font-style: italic; font-weight: 500; }
/* /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. ::deep is used inside
   .right-sidebar__child-menu so the rule also applies to <li>s passed
   in via the ChildMenu slot (e.g. Home.razor's Sidebar slot). */

.right-sidebar[b-g8uylq00f9] { font-size: .92rem; }

.right-sidebar__child-menu[b-g8uylq00f9] {
    list-style: none; padding: 0; margin: 0 0 1.5rem;
    border-top: 1px solid var(--border);
}
.right-sidebar__child-menu[b-g8uylq00f9]  li {
    border-bottom: 1px solid var(--border);
}

.right-sidebar__child-menu-header[b-g8uylq00f9] { font-weight: 600; color: var(--fg); }

.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; }

.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: #fff;
    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; }
.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: .4rem .1rem;
    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: 1024px) {
    .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; }
}
