@import '_content/Carecom.Foundation/Carecom.Foundation.wyf3l6xlep.bundle.scp.css';

/* /Components/Pages/NotFound.razor.rz.scp.css */
/* Scoped Styles fuer die 404-Page (Konzept "Aussen-vom-Bildausschnitt").
 * Custom Properties aus :root (site.css) sind global verfuegbar; scoped
 * CSS kapselt nur Selektoren, nicht Variablen-Vererbung. */

.notfound[b-r80wwdbt4i] {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
    padding: 1.5rem 0 0;
}

.notfound__eyebrow[b-r80wwdbt4i] {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-muted);
    margin: 0 0 0.85rem 0;
}
/* Wiederholt das Coral-Aquarell-Tropfen-Motiv aus dem Hero — die 404
   gehoert visuell ins Site-System, nicht in einen separaten "Error-Look". */
.notfound__eyebrow-mark[b-r80wwdbt4i] {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    vertical-align: middle;
    margin-right: 0.2rem;
    background: var(--color-coral);
    border-radius: 47% 53% 70% 30% / 45% 51% 49% 55%;
}

/* WindSong als Signatur-Geste — dieselbe Schreibschrift wie im Hero, sonst
   nirgends. Macht die 404 zur "zweiten persoenlichen Beruehrung" der Site. */
.notfound__headline[b-r80wwdbt4i] {
    font-family: "WindSong", "Brush Script MT", "Lucida Handwriting", cursive;
    font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-accent-strong);
    margin: 0 0 1.1rem 0;
}

.notfound__lead[b-r80wwdbt4i] {
    max-width: 46ch;
    margin: 0 auto 0.7rem;
    color: var(--color-text);
    line-height: 1.6;
}

/* Sachliche Technik-Notiz — bewusst klein und gedaempft, damit sie die
   warme Lead-Botschaft nicht ueberlagert, aber den HTTP-Status klar
   benennt. <code> bekommt eine dezente Pille-Optik (Monospace + leichter
   Hintergrund) — verrueckt den Status visuell vom Fliesstext ab. */
.notfound__technical[b-r80wwdbt4i] {
    /* Kein max-width — der Container (.notfound, 56rem) bietet genug Platz,
       damit die Notiz auf Desktop in einer Zeile bleibt. Auf schmalen
       Viewports darf sie dann sauber umbrechen. */
    margin: 0 auto 2.2rem;
    font-size: 0.85rem;
    color: var(--color-muted);
    line-height: 1.5;
}
.notfound__technical code[b-r80wwdbt4i] {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: var(--color-bg-alt);
    padding: 0.08rem 0.45rem;
    border-radius: 3px;
    color: var(--color-accent-strong);
}

/* Das Trost-Bild. blur(14px) + leichter Crop via scale(1.04) — letzteres
   kaschiert die unscharfen Raender, die der Blur sonst freilegt. Beim
   Hover/Focus wird's langsam scharf (0.9s) — kleiner Aha-Moment, der zur
   Headline passt ("verpasster Moment kommt doch noch in den Fokus"). */
.notfound__figure[b-r80wwdbt4i] {
    margin: 0 0 2.5rem;
    cursor: pointer;
    outline: none;
}
.notfound__img[b-r80wwdbt4i] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    border-radius: 4px;
    filter: blur(14px);
    transform: scale(1.04);
    transition: filter 0.9s ease, transform 0.9s ease;
}
.notfound__figure:hover .notfound__img[b-r80wwdbt4i],
.notfound__figure:focus .notfound__img[b-r80wwdbt4i],
.notfound__figure:focus-within .notfound__img[b-r80wwdbt4i] {
    filter: blur(0);
    transform: scale(1);
}
.notfound__caption[b-r80wwdbt4i] {
    margin-top: 0.7rem;
    font-size: 0.9rem;
    color: var(--color-muted);
    font-style: italic;
}

/* Drei-Karten-Wegweiser: jeder Pfad ein eigener Klick-Bereich mit Titel
   und Erklaerzeile — viel zugaenglicher als eine 5er-Linkliste. */
.notfound__nav[b-r80wwdbt4i] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    text-align: left;
}
@media (max-width: 640px) {
    .notfound__nav[b-r80wwdbt4i] { grid-template-columns: 1fr; }
}
.notfound__card[b-r80wwdbt4i] {
    display: block;
    padding: 1.1rem 1rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.notfound__card:hover[b-r80wwdbt4i],
.notfound__card:focus-visible[b-r80wwdbt4i] {
    border-color: var(--color-coral);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}
.notfound__card-title[b-r80wwdbt4i] {
    display: block;
    font-weight: 600;
    color: var(--color-accent-strong);
    margin-bottom: 0.2rem;
}
.notfound__card-sub[b-r80wwdbt4i] {
    display: block;
    font-size: 0.88rem;
    color: var(--color-muted);
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    /* Keine langen Filter-Animationen — Bild ist sofort scharf, Karten
       bleiben ohne Lift. */
    .notfound__img[b-r80wwdbt4i] {
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
    .notfound__card[b-r80wwdbt4i] { transition: none !important; }
    .notfound__card:hover[b-r80wwdbt4i],
    .notfound__card:focus-visible[b-r80wwdbt4i] { transform: none !important; }
}
/* /Components/Pages/SignIn.razor.rz.scp.css */
/* Provider-Auswahlseite: ein Button je OIDC-Provider + E-Mail-Code-Login. */

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

.signin-provider[b-vl7ik4660s] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.2rem;
    border: 1px solid #d8d2cc;
    border-radius: 8px;
    background: #fff;
    color: #2a2a2a;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}

.signin-provider:hover[b-vl7ik4660s] {
    border-color: var(--color-coral, #ff5e46);
    background: var(--color-coral, #ff5e46);
    color: #fff;
    text-decoration: none;
}
/* /Components/Pages/SignInEmail.razor.rz.scp.css */
/* OTP-Login-Formular (E-Mail-Schritt). Selbst-enthalten; Marken-Coral aus --color-coral. */

.otp-form[b-jjo1m9twu8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 26rem;
    margin: 1.25rem 0 0;
}

.otp-field[b-jjo1m9twu8] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.otp-field__label[b-jjo1m9twu8] {
    font-size: .9rem;
    font-weight: 600;
    color: #5a5550;
}

.otp-field__input[b-jjo1m9twu8] {
    font: inherit;
    padding: .6rem .75rem;
    border: 1px solid #d8d2cc;
    border-radius: 6px;
    background: #fff;
}

.otp-field__input:focus-visible[b-jjo1m9twu8] {
    outline: 2px solid var(--color-coral, #ff5e46);
    outline-offset: 1px;
    border-color: var(--color-coral, #ff5e46);
}

.otp-submit[b-jjo1m9twu8] {
    align-self: flex-start;
    font: inherit;
    font-weight: 600;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: 6px;
    background: var(--color-coral, #ff5e46);
    color: #fff;
    cursor: pointer;
}

.otp-submit:hover[b-jjo1m9twu8] { background: var(--color-warm, #ce0000); }

.otp-msg[b-jjo1m9twu8] {
    margin: 1rem 0 0;
    padding: .65rem .85rem;
    border-radius: 6px;
    font-size: .92rem;
}

.otp-msg--error[b-jjo1m9twu8] {
    background: #fdecec;
    color: #8a1c1c;
    border: 1px solid #f3c0c0;
}
/* /Components/Pages/SignInEmailCode.razor.rz.scp.css */
/* OTP-Login-Formular (Code-Schritt). Selbst-enthalten; Marken-Coral aus
   --color-coral. Code-Eingabe + „neuen Code anfordern"-Link. */

.otp-form[b-9k9y9n3si3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 26rem;
    margin: 1.25rem 0 0;
}

.otp-field[b-9k9y9n3si3] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.otp-field__label[b-9k9y9n3si3] {
    font-size: .9rem;
    font-weight: 600;
    color: #5a5550;
}

.otp-field__input[b-9k9y9n3si3] {
    font: inherit;
    padding: .6rem .75rem;
    border: 1px solid #d8d2cc;
    border-radius: 6px;
    background: #fff;
}

.otp-field__input--code[b-9k9y9n3si3] {
    max-width: 10rem;
    letter-spacing: .35em;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.otp-field__input:focus-visible[b-9k9y9n3si3] {
    outline: 2px solid var(--color-coral, #ff5e46);
    outline-offset: 1px;
    border-color: var(--color-coral, #ff5e46);
}

.otp-submit[b-9k9y9n3si3] {
    align-self: flex-start;
    font: inherit;
    font-weight: 600;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: 6px;
    background: var(--color-coral, #ff5e46);
    color: #fff;
    cursor: pointer;
}

.otp-submit:hover[b-9k9y9n3si3] { background: var(--color-warm, #ce0000); }

.otp-resend[b-9k9y9n3si3] {
    margin: 1rem 0 0;
    font-size: .92rem;
}

.otp-msg[b-9k9y9n3si3] {
    margin: 1rem 0 0;
    padding: .65rem .85rem;
    border-radius: 6px;
    font-size: .92rem;
}

.otp-msg--error[b-9k9y9n3si3] {
    background: #fdecec;
    color: #8a1c1c;
    border: 1px solid #f3c0c0;
}
/* /Components/Pages/SignInEmailLink.razor.rz.scp.css */
/* Magic-Link-Bestaetigung: nur ein „Jetzt anmelden"-Button. */

.otp-form[b-b5j25tkdh5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 26rem;
    margin: 1.25rem 0 0;
}

.otp-submit[b-b5j25tkdh5] {
    align-self: flex-start;
    font: inherit;
    font-weight: 600;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: 6px;
    background: var(--color-coral, #ff5e46);
    color: #fff;
    cursor: pointer;
}

.otp-submit:hover[b-b5j25tkdh5] { background: var(--color-warm, #ce0000); }
/* /Components/Shared/PortfolioGrid.razor.rz.scp.css */
/* Scoped Styles fuer PortfolioGrid — Masonry-Anmutung per CSS-Spalten.
 * Wir nutzen bewusst `columns` statt CSS-Grid Masonry (das ist erst seit
 * sehr kurzem in Chromium drin) — `columns` ist seit Jahren ueberall
 * verfuegbar und liefert das gewuenschte Pinterest-aehnliche Layout.
 * Bilder bleiben unbeschnitten (object-fit greift hier nicht, weil
 * die <img> einfach 100% Spaltenbreite annehmen und ihre Hoehe
 * proportional behalten).
 */

.portfolio-grid[b-w538pg9uao] {
    /* 3 Spalten am Desktop; Breakpoints unten reduzieren auf 2 und 1. */
    columns: 3;
    column-gap: 1rem;
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .portfolio-grid[b-w538pg9uao] { columns: 2; }
}
@media (max-width: 540px) {
    .portfolio-grid[b-w538pg9uao] { columns: 1; }
}

.portfolio-grid__item[b-w538pg9uao] {
    /* break-inside ist der entscheidende Hebel: ohne ihn zerlegt der
       Browser ein <figure> ueber die Spaltengrenze und das Bild reisst. */
    break-inside: avoid;
    margin: 0 0 1rem 0;
    position: relative;        /* Anker fuer das Caption-Overlay */
    background: var(--color-bg-alt);
    border-radius: 4px;
    overflow: hidden;          /* clippt den Hover-Zoom + rundet das Bild */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}
.portfolio-grid__item:hover[b-w538pg9uao],
.portfolio-grid__item:focus-within[b-w538pg9uao] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.portfolio-grid__open-btn[b-w538pg9uao] {
    all: unset;
    display: block;
    cursor: zoom-in;
    width: 100%;
}
.portfolio-grid__open-btn:focus-visible[b-w538pg9uao] {
    outline: 3px solid var(--color-warm);
    outline-offset: -3px;
}
.portfolio-grid__open-btn img[b-w538pg9uao] {
    display: block;
    width: 100%;
    height: auto;          /* original Aspect-Ratio — KEIN Crop */
    transition: transform 0.45s ease;
}
.portfolio-grid__item:hover .portfolio-grid__open-btn img[b-w538pg9uao],
.portfolio-grid__item:focus-within .portfolio-grid__open-btn img[b-w538pg9uao] {
    transform: scale(1.05);
}

/* Titel der Bilder leben jetzt unsichtbar im DOM (figcaption mit
   .visually-hidden in PortfolioGrid.razor) — Crawler + Screen-Reader
   bekommen den Text, das Grid bleibt eine ruhige Bildwand. Auf Desktop
   gibt das title-Attribut des <button> einen nativen Tooltip beim
   Hovern; auf Mobile öffnet ein Tap die Lightbox, die den Titel
   permanent zeigt. Hover-Feedback im Grid macht der Bild-Zoom +
   Schatten allein (s. .portfolio-grid__item:hover oben). */

.portfolio-grid__empty[b-w538pg9uao] {
    margin: 2rem 0;
    text-align: center;
    color: var(--color-fg-muted, #555);
}

/* ----- Lightbox (natives <dialog>, gesteuert per Vanilla-JS) ------- */

/* <dialog> hat per Browser-Default margin: auto + display: block —
   wir wollen es vollflaechig (100vw/100vh) und mittig zentriert.
   Wenn das Dialog NICHT offen ist, ist es per Browser-Default
   display: none — also keine eigene Hide-Regel noetig. */
.portfolio-lightbox[b-w538pg9uao] {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: clamp(0.5rem, 3vw, 3rem);
    border: none;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    outline: none;
}
.portfolio-lightbox[open][b-w538pg9uao] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: portfolio-lightbox-in-b-w538pg9uao 0.18s ease-out;
}
.portfolio-lightbox[b-w538pg9uao]::backdrop {
    background: rgba(0, 0, 0, 0.92);
}
@keyframes portfolio-lightbox-in-b-w538pg9uao {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.portfolio-lightbox__figure[b-w538pg9uao] {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    max-width: 100%;
    max-height: 100%;
}
.portfolio-lightbox__img[b-w538pg9uao] {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 6rem);
    object-fit: contain;       /* KEIN Crop in der Lightbox */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.portfolio-lightbox__caption[b-w538pg9uao] {
    color: #fff;
    font-size: 0.95rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.55);
    padding: 0.35rem 0.85rem;
    border-radius: 3px;
}
.portfolio-lightbox__caption:empty[b-w538pg9uao] {
    display: none;
}

.portfolio-lightbox__btn[b-w538pg9uao],
.portfolio-lightbox__close[b-w538pg9uao] {
    position: fixed;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;
}
.portfolio-lightbox__btn svg[b-w538pg9uao],
.portfolio-lightbox__close svg[b-w538pg9uao] { width: 26px; height: 26px; }

.portfolio-lightbox__btn:hover[b-w538pg9uao],
.portfolio-lightbox__close:hover[b-w538pg9uao] { background: rgba(255, 255, 255, 0.25); }

.portfolio-lightbox__btn--prev[b-w538pg9uao] { left:  clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.portfolio-lightbox__btn--next[b-w538pg9uao] { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.portfolio-lightbox__close[b-w538pg9uao]     { top:   clamp(0.5rem, 2vw, 2rem); right: clamp(0.5rem, 2vw, 2rem); }

@media (prefers-reduced-motion: reduce) {
    .portfolio-lightbox[open][b-w538pg9uao] { animation: none !important; }
    .portfolio-lightbox__img[b-w538pg9uao]  { transition: none !important; }
    .portfolio-grid__item[b-w538pg9uao]     { transition: none !important; }
    /* Kein Hover-Zoom — Bild bleibt statisch. */
    .portfolio-grid__open-btn img[b-w538pg9uao] { transition: none !important; transform: none !important; }
}