/* ==========================================================================
   CURAIQ Auth – Login / Register / Forgot
   Aligned mit Brand-Guideline (Dark #02253F, Teal #02ACAC, Light #44C4C3).
   ========================================================================== */

:root {
    --auth-brand-dark: #02253F;
    --auth-brand-teal: #02ACAC;
    --auth-brand-light: #44C4C3;
    --auth-bg: #F2F5F7;
    --auth-text: #02253F;
    --auth-text-soft: #1e2b44;
    --auth-muted: #5B6B7C;
    --auth-border: rgba(2, 37, 63, 0.12);
    --auth-border-strong: rgba(2, 37, 63, 0.24);
    --auth-surface: #FFFFFF;
    --auth-field-bg: #F7F9FB;
    --auth-ring: rgba(2, 172, 172, 0.18);
    --auth-radius: 12px;
    --auth-radius-lg: 24px;
    --auth-shadow: 0 1px 2px rgba(2, 37, 63, 0.16), 0 10px 24px -8px rgba(2, 37, 63, 0.40);
    --auth-shadow-soft: 0 10px 28px rgba(2, 37, 63, 0.08);
    --auth-card-shadow: 0 1px 2px rgba(2, 37, 63, 0.04), 0 24px 56px -16px rgba(2, 37, 63, 0.16);
    --auth-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --auth-maxw: 400px;
    /* Hero-Animation: Glow der Logo-Kachel + wandernde Lichter (Praxis ueberschreibt) */
    --auth-glow: rgba(44, 184, 200, 0.45);
    --auth-glow-strong: rgba(44, 184, 200, 0.70);
    --auth-aurora-a: rgba(2, 172, 172, 0.55);
    --auth-aurora-b: rgba(74, 76, 155, 0.55);
    --auth-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body.auth-body {
    min-height: 100vh;
    font-family: var(--auth-font);
    color: var(--auth-text);
    background: var(--auth-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Layout: Split links Form, rechts Brand-Hero ----------
   Links: Brand oben, Formular mittig im Restraum, Fusszeile unten.
   Rechts: Hero als abgerundete Karte mit etwas Luft zum Rand. */

.auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(440px, 5fr) 7fr;
}

.auth__left {
    min-width: 0;
    padding: clamp(24px, 3.5vw, 48px);
    display: flex;
    flex-direction: column;
    background: var(--auth-surface);
}

.auth__right {
    position: relative;
    overflow: hidden;
    margin: 12px 12px 12px 0;
    border-radius: var(--auth-radius-lg);
    background: var(--auth-brand-dark);
    background-image:
        radial-gradient(50rem 32rem at 12% 18%, rgba(2, 172, 172, 0.42), transparent 55%),
        radial-gradient(40rem 28rem at 100% 100%, rgba(68, 196, 195, 0.35), transparent 50%),
        linear-gradient(160deg, var(--auth-brand-dark) 0%, #0e2a4d 60%, #0b3344 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

/* Wandernde Lichter: zwei weichgezeichnete Farbflecken, die langsam driften.
   Nur transform wird animiert -> laeuft auf der GPU, ohne Repaints. */
.auth__right::before {
    content: "";
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(32% 36% at 28% 30%, var(--auth-aurora-a), transparent 70%),
        radial-gradient(28% 32% at 72% 72%, var(--auth-aurora-b), transparent 70%);
    filter: blur(48px);
    opacity: 0.7;
    will-change: transform;
    animation: auth-aurora 22s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes auth-aurora {
    0%   { transform: translate3d(-6%, -4%, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(6%, 5%, 0) rotate(10deg) scale(1.1); }
    100% { transform: translate3d(-3%, 7%, 0) rotate(-8deg) scale(1.02); }
}

/* Dezentes Punktraster, zur Mitte hin sichtbar, zu den Raendern ausgeblendet. */
.auth__right::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.5px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 45%, #000 15%, transparent 75%);
    mask-image: radial-gradient(ellipse 65% 55% at 50% 45%, #000 15%, transparent 75%);
    pointer-events: none;
}

.auth__hero {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* Logo-Kachel: Glas-Flaeche mit weichem Glow statt freistehendem Mark. */
.auth__hero-mark {
    width: 136px;
    height: 136px;
    padding: 28px;
    margin-bottom: 0.75rem;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 24px 60px -12px var(--auth-glow);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ---------- Hero-Animation ----------
   Inhalte erscheinen nacheinander; danach schwebt die Logo-Kachel ruhig
   und ihr Glow atmet mit. */

.auth__hero > *,
.auth-praxis__hero > * {
    animation: auth-rise 0.7s var(--auth-ease) both;
}

.auth__hero > :nth-child(2),
.auth-praxis__hero > :nth-child(2) { animation-delay: 0.12s; }
.auth__hero > :nth-child(3),
.auth-praxis__hero > :nth-child(3) { animation-delay: 0.2s; }
.auth__hero > :nth-child(4),
.auth-praxis__hero > :nth-child(4) { animation-delay: 0.28s; }
.auth-praxis__hero > :nth-child(n+5),
.auth__hero > :nth-child(n+5) { animation-delay: 0.36s; }

.auth__hero > .auth__hero-mark {
    animation:
        auth-rise 0.7s var(--auth-ease) both,
        auth-float 7s ease-in-out 0.7s infinite;
}

@keyframes auth-float {
    0%, 100% {
        transform: translateY(0);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            0 24px 60px -12px var(--auth-glow);
    }
    50% {
        transform: translateY(-8px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            0 32px 72px -10px var(--auth-glow-strong);
    }
}

/* Tags einzeln nachziehen */
.auth__hero-tags {
    animation: none;
}

.auth__hero-tag {
    animation: auth-pop 0.5s var(--auth-ease) both;
    animation-delay: 0.36s;
}

.auth__hero-tag:nth-child(2) { animation-delay: 0.44s; }
.auth__hero-tag:nth-child(3) { animation-delay: 0.52s; }

@keyframes auth-pop {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

.auth__hero-title {
    font-size: clamp(1.6rem, 2.4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    color: #ffffff;
    text-wrap: balance;
}

.auth__hero-text {
    margin: 0;
    max-width: 400px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.auth__hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.auth__hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.auth__hero-tag svg {
    width: 14px;
    height: 14px;
    stroke: var(--auth-brand-light);
    fill: none;
    stroke-width: 2;
}

/* ---------- Produktansicht (_AuthShowcase) ----------
   Bildsprache wie bei Branchen-Software ueblich: das Produkt selbst als
   Bild. Nachgebaute CURAIQ-Oberflaeche (HTML/CSS, keine echten Daten) im
   Browserfenster, dazu eine schwebende Benachrichtigung und eine
   Vertrauenszeile. Das Fenster bleibt bewusst hell (Produktfoto), auch im
   Dark Mode und in der Praxis-Farbwelt. */

.auth__hero--showcase {
    max-width: 560px;
    width: 100%;
    gap: 1rem;
}

.auth__eyebrow {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--auth-brand-light);
}

.auth__hero--showcase .auth__hero-title { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.auth__hero--showcase .auth__hero-text { max-width: 440px; }

.auth__mock {
    position: relative;
    width: 100%;
    margin: 1rem 0 0.5rem;
    text-align: left;
    font-family: var(--auth-font);
}

.auth__mock-window {
    overflow: hidden;
    border-radius: 14px;
    background: #F4F7F9;
    color: #02253F;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10),
        0 30px 70px -20px rgba(0, 0, 0, 0.55),
        0 12px 28px -12px rgba(0, 0, 0, 0.35);
}

.auth__mock-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #E7EDF1;
}

.auth__mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: #C9D3DA; }
.auth__mock-bar span:first-child { background: #F2A39A; }
.auth__mock-bar span:nth-child(2) { background: #F3CF84; }
.auth__mock-bar span:nth-child(3) { background: #9FD3A6; }
.auth__mock-bar em {
    margin: 0 auto;
    padding: 2px 34px;
    border-radius: 6px;
    background: #fff;
    color: #64748B;
    font-size: 10.5px;
    font-style: normal;
}

/* Unten Platz fuer die schwebende Benachrichtigung, damit sie nichts verdeckt. */
.auth__mock-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 36px; }

.auth__mock-head { display: flex; align-items: center; justify-content: space-between; }
.auth__mock-head small { display: block; color: #64748B; font-size: 10.5px; font-weight: 600; }
.auth__mock-head strong { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.auth__mock-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #02253F; color: #fff; font-size: 10px; font-weight: 800;
}

.auth__mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.auth__mock-kpis > div { padding: 8px 10px; border-radius: 10px; background: #fff; }
.auth__mock-kpis small { display: block; color: #64748B; font-size: 9.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth__mock-kpis b { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.auth__mock-kpis i { font-style: normal; font-size: 12px; color: #12775A; }

.auth__mock-card { padding: 10px 12px 6px; border-radius: 10px; background: #fff; }
.auth__mock-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; }
.auth__mock-chart { display: block; width: 100%; height: 62px; margin-top: 4px; }

.auth__mock-chip {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    white-space: nowrap;
}
.auth__mock-chip--good { background: #DCF0E7; color: #12775A; }
.auth__mock-chip--info { background: #DDF1F1; color: #027F7F; }
.auth__mock-chip--new { background: #02253F; color: #fff; }

.auth__mock-list, .auth__mock-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.auth__mock-list li {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 9px; background: #fff;
    font-size: 11px; font-weight: 700;
}
.auth__mock-list em { margin-left: auto; color: #64748B; font-style: normal; font-weight: 600; font-size: 10px; }
.auth__mock-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.auth__mock-dot--good { background: #12775A; }
.auth__mock-dot--info { background: #02ACAC; }

.auth__mock-rows li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; border-radius: 9px; background: #fff;
}
.auth__mock-rows strong { display: block; font-size: 11.5px; font-weight: 800; }
.auth__mock-rows small { display: block; color: #64748B; font-size: 10px; font-weight: 600; }

/* Schwebende Benachrichtigung, ueberlappt das Fenster unten links. */
.auth__mock-float {
    position: absolute;
    left: -26px;
    bottom: -22px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border-radius: 12px;
    background: #fff;
    color: #02253F;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
    animation: auth-bob 6s ease-in-out 1s infinite;
}
.auth__mock-float strong { display: block; font-size: 12px; font-weight: 800; }
.auth__mock-float small { display: block; color: #64748B; font-size: 10.5px; font-weight: 600; }
.auth__mock-float-icon {
    width: 28px; height: 28px; border-radius: 8px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: #DCF0E7; color: #12775A;
}
.auth__mock-float-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

@keyframes auth-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.auth__trust {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.1rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
    font-weight: 600;
}
.auth__trust li { display: inline-flex; align-items: center; gap: 0.35rem; }
.auth__trust svg { width: 14px; height: 14px; fill: none; stroke: var(--auth-brand-light); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Flache Laptop-Bildschirme: Liste unter der Grafik weglassen, damit alles passt. */
@media (max-height: 780px) {
    .auth__hero--showcase { gap: 0.75rem; }
    .auth__mock-list, .auth__mock-rows li:nth-child(3) { display: none; }
    .auth__hero--showcase .auth__hero-text { font-size: 0.92rem; }
}

/* ---------- Brand-Block links ---------- */

.auth__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.auth__brand-mark {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.auth__brandname {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: var(--auth-text);
    line-height: 1;
}

.auth__brandtag {
    font-size: 0.75rem;
    color: var(--auth-brand-teal);
    font-weight: 600;
    margin-top: 4px;
}

/* ---------- Form-Bereich ---------- */

/* margin:auto zentriert das Formular horizontal und vertikal im Platz
   zwischen Brand-Block und Fusszeile. */
.auth__content {
    width: 100%;
    max-width: var(--auth-maxw);
    margin: auto;
    padding: clamp(32px, 6vh, 64px) 0;
}

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes auth-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Gestaffeltes Einblenden: kurz gehalten (< 0,5 s), damit der taegliche
   Login nicht traege wirkt. Das Formular selbst bleibt statisch, nur
   seine Zeilen ziehen nach. */
.auth__brand,
.auth__legal {
    animation: auth-fade 0.6s ease both;
}

.auth__content > * {
    animation: auth-rise 0.5s var(--auth-ease) both;
}

.auth__content > :nth-child(2) { animation-delay: 0.04s; }
.auth__content > :nth-child(3) { animation-delay: 0.08s; }
.auth__content > :nth-child(n+4) { animation-delay: 0.12s; }

.auth__content > .auth__form {
    animation: none;
}

.auth__form > * {
    animation: auth-rise 0.5s var(--auth-ease) both;
    animation-delay: 0.12s;
}

.auth__form > :nth-child(2) { animation-delay: 0.16s; }
.auth__form > :nth-child(3) { animation-delay: 0.2s; }
.auth__form > :nth-child(4) { animation-delay: 0.24s; }
.auth__form > :nth-child(n+5) { animation-delay: 0.28s; }

.auth__title {
    margin: 0 0 8px 0;
    font-size: clamp(1.75rem, 3vw, 2.125rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--auth-text);
    text-wrap: balance;
}

.auth__subtitle {
    margin: 0 0 2rem 0;
    color: var(--auth-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.auth__form {
    display: flex;
    flex-direction: column;
}

/* ---------- Bereichswahl (/Auth/Bereich) ---------- */

.auth__choices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth__content > .auth__choices {
    animation: none;
}

.auth__choices > * {
    animation: auth-rise 0.5s var(--auth-ease) both;
    animation-delay: 0.12s;
}

.auth__choices > :nth-child(2) { animation-delay: 0.18s; }
.auth__choices > :nth-child(3) { animation-delay: 0.24s; }

.auth__choice {
    --choice-ink: #027F7F;
    --choice-tint: rgba(2, 172, 172, 0.10);
    display: grid;
    grid-template-columns: 44px 1fr 18px;
    align-items: center;
    gap: 14px;
    padding: 16px 16px 16px 14px;
    border: 1px solid var(--auth-border);
    border-radius: 14px;
    background: var(--auth-surface);
    color: var(--auth-text);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.auth__choice--praxis {
    --choice-ink: #437F28;
    --choice-tint: rgba(67, 127, 40, 0.10);
}

.auth__choice--lieferant {
    --choice-ink: #4A4C9B;
    --choice-tint: rgba(74, 76, 155, 0.10);
}

.auth__choice:hover {
    border-color: var(--choice-ink);
    box-shadow: var(--auth-card-shadow);
    transform: translateY(-1px);
}

.auth__choice:active {
    transform: translateY(0);
}

.auth__choice:focus-visible {
    outline: 2px solid var(--choice-ink);
    outline-offset: 2px;
}

.auth__choice.is-last {
    border-color: var(--choice-ink);
    background: linear-gradient(0deg, var(--choice-tint), var(--choice-tint)), var(--auth-surface);
}

.auth__choice-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--choice-tint);
    color: var(--choice-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth__choice-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth__choice-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.auth__choice-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

.auth__choice-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--choice-tint);
    color: var(--choice-ink);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.auth__choice-badge[hidden] {
    display: none;
}

.auth__choice-arrow {
    width: 18px;
    height: 18px;
    stroke: var(--auth-muted);
    fill: none;
    stroke-width: 2;
    transition: transform 0.15s ease, stroke 0.15s ease;
}

.auth__choice:hover .auth__choice-arrow {
    stroke: var(--choice-ink);
    transform: translateX(3px);
}

/* Zurueck zur Bereichswahl (ueber dem Login-Titel) */
.auth__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 1.25rem -2px;
    padding: 4px 6px 4px 2px;
    border-radius: 8px;
    color: var(--auth-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.auth__back svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.15s ease;
}

.auth__back:hover {
    color: var(--auth-text);
}

.auth__back:hover svg {
    transform: translateX(-2px);
}

.auth__back:focus-visible {
    outline: 2px solid var(--auth-brand-teal);
    outline-offset: 2px;
}

/* ---------- Fusszeile links ---------- */

.auth__legal {
    color: var(--auth-muted);
    font-size: 0.78rem;
}

/* ---------- Alert ---------- */

.auth__alert {
    margin: 0 0 1.25rem 0;
    padding: 0.8rem 0.95rem;
    border-radius: var(--auth-radius);
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.20);
    color: #991b1b;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    animation: auth-rise 0.3s ease both;
}

.auth__alert svg {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.auth__alert--info {
    background: rgba(2, 172, 172, 0.07);
    border-color: rgba(2, 172, 172, 0.24);
    color: #035f66;
}

.auth__alert--success {
    background: rgba(22, 163, 74, 0.07);
    border-color: rgba(22, 163, 74, 0.24);
    color: #166534;
}

/* ---------- Inputs ---------- */

.auth__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1.1rem;
}

.auth__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--auth-text-soft);
    margin: 0;
}

.auth__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth__input-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    stroke: var(--auth-muted);
    fill: none;
    stroke-width: 2;
    pointer-events: none;
    transition: stroke 0.15s ease;
}

.auth__input-wrap:focus-within .auth__input-icon {
    stroke: var(--auth-brand-teal);
}

.auth__input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    outline: none;
    font-size: 1rem; /* >= 16px: kein Auto-Zoom auf iOS */
    background: var(--auth-field-bg);
    color: var(--auth-text);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.auth__input::placeholder {
    color: var(--auth-muted);
    opacity: 0.7;
}

.auth__input:hover {
    border-color: var(--auth-border-strong);
}

.auth__input:focus {
    background: var(--auth-surface);
    border-color: var(--auth-brand-teal);
    box-shadow: 0 0 0 4px var(--auth-ring);
}

.auth__input[aria-invalid="true"]:not(:focus) {
    border-color: rgba(220, 38, 38, 0.45);
}

.auth__input--plain {
    padding-left: 14px;
}

/* Platz fuer den Anzeigen-Button rechts im Passwortfeld. */
.auth__input-wrap:has(.auth__pw-toggle) .auth__input {
    padding-right: 52px;
}

.auth__pw-toggle {
    position: absolute;
    right: 6px;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 0;
    background: transparent;
    color: var(--auth-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.auth__pw-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.auth__pw-toggle:hover {
    background: rgba(2, 37, 63, 0.06);
    color: var(--auth-text);
}

.auth__pw-toggle:focus-visible {
    outline: 2px solid var(--auth-brand-teal);
    outline-offset: -2px;
    color: var(--auth-text);
}

/* Hinweis unter einem Feld (z. B. Feststelltaste aktiv). */
.auth__hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #92400e;
}

.auth__hint[hidden] {
    display: none;
}

.auth__hint svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

/* ---------- Row (Remember / Forgot) ---------- */

.auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.1rem 0 1.5rem 0;
}

.auth__check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.875rem;
    color: var(--auth-text-soft);
    cursor: pointer;
    user-select: none;
}

.auth__check input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--auth-brand-teal);
    cursor: pointer;
}

.auth__link {
    color: var(--auth-brand-teal);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 4px;
}

.auth__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth__link:focus-visible {
    outline: 2px solid var(--auth-brand-teal);
    outline-offset: 2px;
}

/* ---------- Buttons ---------- */

.auth__btn {
    width: 100%;
    min-height: 48px;
    padding: 0 1.25rem;
    border-radius: var(--auth-radius);
    border: 1px solid var(--auth-border);
    background: var(--auth-surface);
    color: var(--auth-text);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.975rem;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    touch-action: manipulation;
}

.auth__btn:hover {
    border-color: var(--auth-border-strong);
}

.auth__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 172, 172, 0.4);
}

.auth__btn:active {
    transform: translateY(1px);
}

.auth__btn--primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--auth-brand-dark) 0%, var(--auth-brand-teal) 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: var(--auth-shadow);
}

/* Lichtschimmer, der beim Hover einmal ueber den Button laeuft
   (zurueck springt er ohne Transition). */
.auth__btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-110%);
    pointer-events: none;
}

.auth__btn--primary:hover:not(:disabled)::after {
    transform: translateX(110%);
    transition: transform 0.75s ease;
}

.auth__btn--primary:hover {
    border-color: transparent;
    filter: brightness(1.08);
    box-shadow: 0 1px 2px rgba(2, 37, 63, 0.16), 0 16px 32px -10px rgba(2, 37, 63, 0.50);
}

.auth__btn-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.15s ease;
}

.auth__btn:hover .auth__btn-icon {
    transform: translateX(2px);
}

.auth__btn--primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: var(--auth-shadow-soft);
    transform: none;
    filter: none;
}

/* Ladezustand nach dem Absenden: Spinner statt Pfeil, kein Doppel-Submit. */
.auth__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: auth-spin 0.7s linear infinite;
}

.auth__btn[aria-busy="true"] {
    cursor: progress;
}

.auth__btn--primary[aria-busy="true"]:disabled {
    opacity: 1;
    filter: none;
    box-shadow: var(--auth-shadow);
}

.auth__btn[aria-busy="true"] .auth__spinner {
    display: inline-block;
}

.auth__btn[aria-busy="true"] .auth__btn-icon {
    display: none;
}

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

.auth__btn--google {
    background: #fff;
    color: var(--auth-text);
    border-color: var(--auth-border);
}

.auth__btn--google:hover {
    border-color: rgba(2, 37, 63, 0.24);
    background: #fafbfc;
}

/* ---------- Button-Reihe & Vorgangsnummer (Fehlerseite, Zugriff verweigert) ---------- */

.auth__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.auth__actions .auth__btn {
    width: auto;
    flex: 1 1 180px;
}

.auth__code {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: rgba(2, 37, 63, 0.06);
    color: var(--auth-text);
    font-size: 0.82rem;
    word-break: break-all;
    user-select: all;
}

:root[data-cq-theme="dark"] .auth__code {
    background: rgba(255, 255, 255, 0.08);
}

/* ---------- Divider ---------- */

.auth__divider {
    margin: 1.2rem 0 0.8rem 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--auth-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth__divider::before,
.auth__divider::after {
    content: "";
    height: 1px;
    background: var(--auth-border);
    flex: 1;
}

/* ---------- Footer ---------- */

.auth__foot {
    margin: 1.5rem 0 0 0;
    color: var(--auth-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* ---------- Hidden / A11y ---------- */

.auth__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Seiten ohne Hero (z. B. Lieferantenportal) ----------
   Statt einer leeren rechten Grid-Haelfte: Formular als Karte mittig. */

.auth:not(:has(> .auth__right)) {
    grid-template-columns: 1fr;
}

.auth:not(:has(> .auth__right)) .auth__left {
    background:
        radial-gradient(48rem 30rem at 0% 0%, rgba(2, 172, 172, 0.10), transparent 60%),
        radial-gradient(42rem 28rem at 100% 100%, rgba(2, 37, 63, 0.08), transparent 55%),
        var(--auth-bg);
}

.auth:not(:has(> .auth__right)) .auth__content {
    max-width: 440px;
    margin: auto;
    padding: clamp(28px, 4vw, 40px);
    background: var(--auth-surface);
    border: 1px solid var(--auth-border);
    border-radius: 20px;
    box-shadow: var(--auth-card-shadow);
}

/* ---------- Tablet / Mobile ---------- */

@media (max-width: 1100px) {
    .auth {
        grid-template-columns: minmax(400px, 1fr) 1fr;
    }
}

@media (max-width: 860px) {
    .auth {
        grid-template-columns: 1fr;
    }

    .auth__right {
        display: none;
    }

    .auth__left {
        padding: 20px 16px 24px;
    }

    .auth__content {
        padding: 40px 0 32px;
    }

    .auth:not(:has(> .auth__right)) .auth__content {
        padding: 28px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth__btn,
    .auth__btn-icon,
    .auth__input,
    .auth__input-icon {
        transition: none;
    }

    .auth__right::before,
    .auth__brand,
    .auth__legal,
    .auth__content > *,
    .auth__form > *,
    .auth__alert,
    .auth__hero > *,
    .auth__hero > .auth__hero-mark,
    .auth-praxis__hero > *,
    .auth__hero-tag,
    .auth__choices > *,
    .auth__mock-float {
        animation: none;
    }

    .auth__choice,
    .auth__choice-arrow,
    .auth__back svg {
        transition: none;
    }

    .auth__choice:hover,
    .auth__choice:hover .auth__choice-arrow,
    .auth__back:hover svg {
        transform: none;
    }

    .auth__btn--primary::after {
        display: none;
    }

    .auth__spinner {
        animation-duration: 1.6s;
    }

    .auth__btn--primary:hover,
    .auth__btn:hover .auth__btn-icon {
        transform: none;
    }
}

/* ==========================================================================
   Praxis-Variante (praxis.curaiq.app) — NUR ADDITIV.
   Login gemaess Mockup docs/konzepte/mockups/praxis-login-mockup.html,
   Screen 1: Brandtag "Praxisbedarf", Registrierungs-Box (teal-pale),
   rechtes Panel mit drei Nutzenversprechen + Vertrauenszeile.
   Farbwerte aus dem Mockup: teal-pale #d4f0ef, teal-mist #eaf6f6,
   teal-dark #028c8c.
   ========================================================================== */

.auth-praxis__brandtag {
    color: #028c8c;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---------- Registrierungs-Box unter dem Formular ---------- */

.auth-praxis__register {
    margin-top: 1.4rem;
    padding: 0.85rem 1rem;
    background: #eaf6f6;
    border: 1px solid #d4f0ef;
    border-radius: 11px;
    font-size: 0.88rem;
    color: var(--auth-text-soft);
    line-height: 1.5;
}

.auth-praxis__register b {
    display: block;
    margin-bottom: 2px;
    color: var(--auth-text);
}

.auth-praxis__register a {
    color: #028c8c;
    font-weight: 700;
    text-decoration: none;
}

.auth-praxis__register a:hover,
.auth-praxis__register a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Rechtes Panel: drei Nutzenversprechen ---------- */

.auth-praxis__hero {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    text-align: left;
}

.auth-praxis__hero-title {
    margin: 0 0 0.4rem 0;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: #ffffff;
}

.auth-praxis__vprop {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.92rem;
    color: rgba(234, 244, 248, 0.85);
    line-height: 1.5;
}

.auth-praxis__vprop b {
    display: block;
    color: #ffffff;
    font-weight: 700;
}

.auth-praxis__vprop-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-praxis__vprop-icon svg {
    width: 17px;
    height: 17px;
    stroke: var(--auth-brand-light);
    fill: none;
    stroke-width: 2.2;
}

.auth-praxis__trust {
    margin-top: 1.2rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.76rem;
    color: rgba(234, 244, 248, 0.75);
}

/* ==========================================================================
   ===== Dark Mode =====
   _AuthLayout setzt data-cq-theme vor dem CSS (gleiche Logik und gleicher
   localStorage-Key "cq-theme" wie _Layout): gespeicherte Wahl, sonst
   prefers-color-scheme. Der Umschalter oben rechts schreibt denselben Key,
   die App startet nach dem Login also im gewaehlten Design.
   Farben nach curaiq-darkmode.css (slate-Toene); Kontraste >= 4.5:1.
   ========================================================================== */

:root[data-cq-theme="dark"] {
    color-scheme: dark;
    --auth-bg: #0b1220;
    --auth-surface: #0f172a;
    --auth-field-bg: #1e293b;
    --auth-text: #f1f5f9;
    --auth-text-soft: #e2e8f0;
    --auth-muted: #94a3b8;          /* 6,9:1 auf #0f172a */
    --auth-border: rgba(255, 255, 255, 0.10);
    --auth-border-strong: rgba(255, 255, 255, 0.22);
    --auth-brand-teal: #44C4C3;     /* Links/Akzent: 8,6:1 auf #0f172a */
    --auth-ring: rgba(68, 196, 195, 0.28);
    --auth-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 24px -8px rgba(0, 0, 0, 0.60);
    --auth-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.40);
    --auth-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 24px 56px -16px rgba(0, 0, 0, 0.60);
}

/* Button: Verlauf ohne Navy-Ende, das auf der dunklen Flaeche verschwindet.
   Weiss auf der Mitte des Verlaufs ~5:1. */
:root[data-cq-theme="dark"] .auth__btn--primary {
    background: linear-gradient(135deg, #035c75 0%, #0a9a9e 100%);
}

/* Hero-Karte auf dunkler Seite leicht absetzen */
:root[data-cq-theme="dark"] .auth__right {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

:root[data-cq-theme="dark"] .auth__input[aria-invalid="true"]:not(:focus) {
    border-color: rgba(248, 113, 113, 0.55);
}

:root[data-cq-theme="dark"] .auth__alert {
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.28);
    color: #fca5a5;
}

:root[data-cq-theme="dark"] .auth__alert--info {
    background: rgba(68, 196, 195, 0.10);
    border-color: rgba(68, 196, 195, 0.28);
    color: #8ee0df;
}

:root[data-cq-theme="dark"] .auth__alert--success {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.28);
    color: #86efac;
}

:root[data-cq-theme="dark"] .auth__choice {
    --choice-ink: #44C4C3;
    --choice-tint: rgba(68, 196, 195, 0.14);
}

:root[data-cq-theme="dark"] .auth__choice--praxis {
    --choice-ink: #7BC85A;
    --choice-tint: rgba(123, 200, 90, 0.14);
}

:root[data-cq-theme="dark"] .auth__choice--lieferant {
    --choice-ink: #A3A9E6;
    --choice-tint: rgba(163, 169, 230, 0.14);
}

:root[data-cq-theme="dark"] .auth__hint {
    color: #fbbf24;
}

:root[data-cq-theme="dark"] .auth__pw-toggle:hover,
:root[data-cq-theme="dark"] .auth__pw-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.08);
}

:root[data-cq-theme="dark"] .auth__btn--google {
    background: rgba(255, 255, 255, 0.04);
}

:root[data-cq-theme="dark"] .auth__btn--google:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

:root[data-cq-theme="dark"] .auth-praxis__brandtag,
:root[data-cq-theme="dark"] .auth-praxis__register a {
    color: #44C4C3;
}

:root[data-cq-theme="dark"] .auth-praxis__register {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

/* ---------- Design-Umschalter (oben rechts, aus _AuthLayout) ---------- */

.auth__theme-toggle {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--auth-border);
    background: var(--auth-surface);
    color: var(--auth-text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--auth-shadow-soft);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    animation: auth-fade 0.6s ease 0.3s both;
}

.auth__theme-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.auth__theme-toggle:hover {
    border-color: var(--auth-border-strong);
    color: var(--auth-text);
}

.auth__theme-toggle:active {
    transform: scale(0.94);
}

.auth__theme-toggle:focus-visible {
    outline: 2px solid var(--auth-brand-teal);
    outline-offset: 2px;
}

/* Liegt auf dem Hero (Desktop mit Hero): Glas statt Flaeche */
@media (min-width: 861px) {
    body.auth-body:has(.auth__right) .auth__theme-toggle {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.18);
        color: rgba(255, 255, 255, 0.90);
        box-shadow: none;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    body.auth-body:has(.auth__right) .auth__theme-toggle:hover {
        background: rgba(255, 255, 255, 0.16);
        color: #ffffff;
    }
}

@media (max-width: 860px) {
    .auth__theme-toggle {
        top: 16px;
        right: 16px;
    }
}

/* Im hellen Design den Mond zeigen (-> dunkel), im dunklen die Sonne. */
.auth__theme-toggle .auth__theme-sun { display: none; }
:root[data-cq-theme="dark"] .auth__theme-toggle .auth__theme-sun { display: block; }
:root[data-cq-theme="dark"] .auth__theme-toggle .auth__theme-moon { display: none; }

/* Weicher Uebergang nur waehrend des Umschaltens (Klasse kurz am <html>). */
.auth-theme-switching body,
.auth-theme-switching .auth__left,
.auth-theme-switching .auth__content,
.auth-theme-switching .auth__input,
.auth-theme-switching .auth__alert,
.auth-theme-switching .auth__title,
.auth-theme-switching .auth__subtitle,
.auth-theme-switching .auth__label,
.auth-theme-switching .auth__theme-toggle {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    .auth__theme-toggle {
        animation: none;
        transition: none;
    }
}