:root {
            --cream: rgba(247, 243, 230, 0.90);
            --cream-strong: rgba(249, 246, 236, 0.95);
            --gold: #ddb24d;
            --gold-dark: #b9861d;
            --ink: #112a46;
            --ink-soft: #294463;
            --line: rgba(209, 173, 83, 0.55);
            --shadow: 0 22px 50px rgba(20, 32, 52, 0.20);
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            min-height: 100%;
            font-family: Arial, Helvetica, sans-serif;
            color: var(--ink);
        }

        body {
            min-height: 100vh;
            background:
                linear-gradient(
                    180deg,
                    rgba(241, 247, 255, 0.12) 0%,
                    rgba(245, 240, 225, 0.08) 100%
                ),
                url("/arcanum-login-background-3d41c61567504c9b.webp") center center / cover no-repeat fixed;
        }

        body::before {
            position: fixed;
            inset: 0;
            background:
                linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.08) 0%,
                    rgba(255, 255, 255, 0.02) 38%,
                    rgba(255, 255, 255, 0.00) 100%
                );
            content: "";
            pointer-events: none;
        }

        .login-page {
            position: relative;
            z-index: 1;
            display: grid;
            min-height: 100vh;
            grid-template-columns: minmax(0, 1.2fr) minmax(25rem, 35rem);
            gap: 2rem;
            align-items: start;
            padding:
                clamp(1.4rem, 2.6vw, 2.4rem)
                clamp(1.2rem, 2.8vw, 2.8rem)
                clamp(1.4rem, 2.8vw, 2.4rem);
        }

        .hero-column {
            display: flex;
            min-width: 0;
            align-items: flex-start;
            justify-content: flex-start;
            padding-top: clamp(0.3rem, 1vh, 1rem);
            padding-left: clamp(0.2rem, 1vw, 0.8rem);
        }

        .hero-panel {
            width: min(44rem, calc(100vw - 42rem));
            min-width: 26rem;
            padding: 1.35rem 1.5rem 1.45rem;
            border: 1px solid rgba(255, 255, 255, 0.30);
            border-radius: 1.8rem;
            background:
                linear-gradient(
                    135deg,
                    rgba(247, 244, 233, 0.88),
                    rgba(241, 238, 225, 0.78)
                );
            backdrop-filter: blur(8px);
            box-shadow: var(--shadow);
        }

        .hero-brand {
            display: flex;
            gap: 1rem;
            align-items: center;
            margin-bottom: 1rem;
        }

        .hero-brand__logo {
            width: 4.6rem;
            height: 4.6rem;
            object-fit: contain;
            flex: 0 0 auto;
        }



        .hero-eyebrow {
            margin: 0 0 0.5rem;
            color: var(--gold-dark);
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: 0.10em;
            text-transform: uppercase;
        }

        .hero-title {
            margin: 0;
            color: var(--ink);
            font-size: clamp(2.9rem, 5.4vw, 5.2rem);
            font-weight: 800;
            line-height: 0.95;
            letter-spacing: -0.04em;
        }

        .hero-copy {
            max-width: 34rem;
            margin: 1rem 0 0;
            color: #24384f;
            font-size: clamp(1.1rem, 1.9vw, 1.55rem);
            font-weight: 600;
            line-height: 1.35;
        }

        .auth-column {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
            justify-content: flex-start;
            padding-top: clamp(1rem, 7vh, 5.5rem);
        }

        .auth-card,
        .quote-card {
            border: 1px solid var(--line);
            border-radius: 1.7rem;
            background:
                linear-gradient(
                    145deg,
                    rgba(249, 246, 236, 0.96),
                    rgba(245, 239, 225, 0.93)
                );
            box-shadow: var(--shadow);
        }

        .auth-card {
            position: relative;
            padding: 1.7rem 1.7rem 1.55rem;
        }

        .auth-stamp {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 5.2rem;
            height: 5.2rem;
            object-fit: contain;
        }

        .auth-overline {
            margin: 0 0 0.55rem;
            color: #2d69a1;
            font-size: 1.02rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .auth-title {
            margin: 0 0 1.4rem;
            color: var(--ink);
            font-size: clamp(2.5rem, 4.2vw, 4rem);
            font-weight: 800;
            line-height: 0.96;
            letter-spacing: -0.04em;
        }

        .login-form {
            display: grid;
            gap: 0.9rem;
        }

        .field-label {
            display: block;
            margin: 0 0 0.35rem;
            color: #23354b;
            font-size: 1.02rem;
            font-weight: 800;
        }

        .field-input {
            width: 100%;
            padding: 0.95rem 1rem;
            border: 1px solid rgba(207, 190, 103, 0.9);
            border-radius: 0.9rem;
            background: #ece9b6;
            color: #11263f;
            font-size: 1.05rem;
            outline: none;
            transition:
                border-color 140ms ease,
                box-shadow 140ms ease,
                background 140ms ease;
        }

        .field-input:focus {
            border-color: #c59228;
            background: #f3efc1;
            box-shadow: 0 0 0 0.16rem rgba(213, 167, 55, 0.18);
        }

        .login-submit {
            display: inline-flex;
            width: 100%;
            min-height: 3.9rem;
            gap: 0.9rem;
            align-items: center;
            justify-content: center;
            margin-top: 0.25rem;
            padding: 0.95rem 1.2rem;
            border: 0;
            border-radius: 1rem;
            background:
                linear-gradient(
                    180deg,
                    #e6bc56,
                    #d8a63a
                );
            color: #13253b;
            font-size: 1.5rem;
            font-weight: 800;
            cursor: pointer;
            box-shadow:
                inset 0 -2px 0 rgba(121, 76, 0, 0.18),
                0 8px 18px rgba(164, 117, 20, 0.18);
            transition:
                transform 140ms ease,
                box-shadow 140ms ease,
                filter 140ms ease;
        }

        .login-submit:hover {
            transform: translateY(-1px);
            filter: brightness(1.02);
        }

        .login-submit:active {
            transform: translateY(0);
        }

        .login-submit:disabled {
            opacity: 0.75;
            cursor: wait;
        }

        .login-submit__stamp {
            display: inline-flex;
            width: 2.3rem;
            height: 2.3rem;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(17, 42, 70, 0.10);
            overflow: hidden;
        }

        .login-submit__stamp img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .login-status {
            min-height: 1.25rem;
            margin-top: 0.15rem;
            color: #8e2c1f;
            font-size: 0.95rem;
            font-weight: 700;
        }

        .login-status.is-success {
            color: #2d6a34;
        }

        .quote-card {
            display: grid;
            grid-template-columns: 13.5rem minmax(0, 1fr);
            gap: 1rem;
            padding: 0.9rem 1rem;
            align-items: stretch;
        }

        .quote-card__visual {
            display: grid;
            min-height: 9.7rem;
            place-items: center;
            border-radius: 1.2rem;
            background:
                linear-gradient(
                    145deg,
                    rgba(223, 232, 184, 0.95),
                    rgba(192, 200, 143, 0.95)
                );
            color: #44643a;
            font-size: 3.8rem;
            font-weight: 800;
        }

        .quote-card__copy {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
        }

        .quote-card__eyebrow {
            margin: 0 0 0.3rem;
            color: var(--gold-dark);
            font-size: 0.96rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .quote-card__title {
            margin: 0 0 0.45rem;
            color: var(--ink);
            font-size: clamp(1.55rem, 2.5vw, 2.45rem);
            font-weight: 800;
            line-height: 1.05;
        }

        .quote-card__text {
            margin: 0;
            color: #28415d;
            font-size: 1.05rem;
            line-height: 1.45;
            font-weight: 600;
        }

        .quote-card__meta {
            margin-top: 0.6rem;
            color: #60728a;
            font-size: 0.92rem;
            font-weight: 700;
        }

        @media (max-width: 1280px) {
            .login-page {
                grid-template-columns: minmax(0, 1fr) minmax(23rem, 31rem);
            }

            .hero-panel {
                width: min(40rem, calc(100vw - 36rem));
            }

            .quote-card {
                grid-template-columns: 11rem minmax(0, 1fr);
            }
        }

        @media (max-width: 1100px) {
            body {
                background-position: 40% center;
            }

            .login-page {
                grid-template-columns: 1fr;
                gap: 1rem;
                align-items: start;
            }

            .hero-column,
            .auth-column {
                padding-top: 0;
            }

            .hero-panel {
                width: 100%;
                min-width: 0;
            }

            .auth-column {
                max-width: 42rem;
                width: 100%;
                justify-self: end;
            }
        }

        @media (max-width: 760px) {
            .login-page {
                padding: 1rem;
            }

            .hero-panel {
                padding: 1.1rem 1.1rem 1.2rem;
                border-radius: 1.35rem;
            }

            .hero-brand {
                gap: 0.75rem;
                margin-bottom: 0.75rem;
            }

            .hero-brand__logo {
                width: 3.6rem;
                height: 3.6rem;
            }



            .auth-card {
                padding: 1.2rem 1rem 1rem;
            }

            .auth-stamp {
                width: 4.1rem;
                height: 4.1rem;
            }

            .auth-title {
                margin-right: 4.5rem;
            }

            .quote-card {
                grid-template-columns: 1fr;
            }

            .quote-card__visual {
                min-height: 7rem;
            }

            .login-submit {
                font-size: 1.25rem;
            }
        }


        /* arcanum-login-header-v2 */

        /*
         * Kompakter Willkommensbereich oben im Himmel.
         * Die eigentliche Landschaft und die Kinder bleiben frei.
         */

        .login-page {
            display: block;
            min-height: 100vh;
            padding:
                clamp(0.8rem, 1.8vw, 1.35rem)
                clamp(1rem, 2.5vw, 2.5rem)
                clamp(1.2rem, 2vw, 2rem);
        }

        .hero-column {
            position: relative;
            z-index: 3;
            display: flex;
            width: 100%;
            padding: 0;
            align-items: flex-start;
            justify-content: center;
        }

        .hero-panel {
            display: grid;
            box-sizing: border-box;
            width: min(58rem, calc(100vw - 3rem));
            min-width: 0;
            grid-template-columns:
                auto minmax(0, 1fr);
            grid-template-areas:
                "logo title"
                "logo copy";
            gap: 0.22rem 1.05rem;
            align-items: center;
            padding: 0.78rem 1.2rem 0.82rem;
            border: 1px solid rgba(255, 246, 210, 0.42);
            border-radius: 1.2rem;
            background:
                linear-gradient(
                    135deg,
                    rgba(248, 245, 233, 0.85),
                    rgba(239, 238, 228, 0.72)
                );
            box-shadow:
                0 0.75rem 1.8rem rgba(24, 43, 54, 0.16);
            backdrop-filter:
                blur(7px)
                saturate(1.05);
        }

        .hero-brand__logo {
            grid-area: logo;
            display: block;
            width: clamp(9.5rem, 14vw, 13rem);
            height: auto;
            max-height: 4rem;
            object-fit: contain;
            object-position: center;
            mix-blend-mode: multiply;
            filter:
                contrast(1.08)
                saturate(1.06);
        }

        .hero-title {
            grid-area: title;
            margin: 0;
            color: #112a46;
            font-size: clamp(1.65rem, 2.65vw, 2.65rem);
            font-weight: 850;
            line-height: 1.03;
            letter-spacing: -0.025em;
            text-shadow: none;
        }

        .hero-copy {
            grid-area: copy;
            max-width: none;
            margin: 0;
            color: #29415a;
            font-size: clamp(0.92rem, 1.25vw, 1.08rem);
            font-weight: 650;
            line-height: 1.3;
            text-shadow: none;
        }

        /*
         * Login und Motivation beginnen unterhalb des
         * zentrierten Willkommensbereichs.
         */

        .auth-column {
            display: flex;
            width: min(35rem, calc(100vw - 2rem));
            margin: clamp(0.9rem, 2vh, 1.5rem) 0 0 auto;
            padding-top: 0;
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
            justify-content: flex-start;
        }

        /*
         * Die Münze ersetzt oben rechts den großen Stempel.
         */

        .auth-stamp {
            top: 0.75rem;
            right: 0.85rem;
            width: clamp(5rem, 7vw, 6rem);
            height: auto;
            aspect-ratio: auto;
            object-fit: contain;
            transform: rotate(-7deg);
            opacity: 1;
            filter:
                drop-shadow(
                    0 0.45rem 0.55rem rgba(76, 51, 12, 0.28)
                );
        }

        /*
         * Stempel im Button größer, heller und besser erkennbar.
         */

        .login-submit {
            min-height: 4.15rem;
        }

        .login-submit__stamp {
            width: 2.9rem;
            height: 2.9rem;
            background:
                radial-gradient(
                    circle,
                    rgba(255, 255, 255, 0.58),
                    rgba(255, 244, 192, 0.24)
                );
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.42),
                0 0.18rem 0.45rem rgba(94, 60, 4, 0.2);
        }

        .login-submit__stamp img {
            width: 108%;
            height: 108%;
            object-fit: contain;
            transform: scale(1.04);
            filter:
                brightness(1.42)
                contrast(0.9)
                saturate(0.9)
                drop-shadow(
                    0 0.1rem 0.15rem rgba(59, 41, 10, 0.18)
                );
        }

        @media (max-width: 1100px) {
            .login-page {
                display: block;
            }

            .hero-panel {
                width: min(52rem, calc(100vw - 2rem));
            }

            .auth-column {
                width: min(42rem, calc(100vw - 2rem));
                margin-right: auto;
            }
        }

        @media (max-width: 700px) {
            .login-page {
                padding: 0.65rem;
            }

            .hero-panel {
                width: 100%;
                grid-template-columns: 1fr;
                grid-template-areas:
                    "logo"
                    "title"
                    "copy";
                gap: 0.45rem;
                padding: 0.8rem 0.9rem 0.9rem;
                text-align: center;
            }

            .hero-brand__logo {
                width: min(13rem, 70vw);
                max-height: 3.7rem;
                justify-self: center;
            }

            .hero-title {
                font-size: clamp(1.55rem, 7vw, 2.25rem);
            }

            .hero-copy {
                font-size: 0.94rem;
            }

            .auth-column {
                width: 100%;
            }

            .auth-stamp {
                width: 4.5rem;
            }

            .login-submit__stamp {
                width: 2.55rem;
                height: 2.55rem;
            }
        }




        /* arcanum-login-header-v3 */

        /*
         * Kompakter Kopf: nur das runde Logo-Symbol,
         * Überschrift vollständig in einer Zeile.
         */

        .hero-panel {
            container-type: inline-size;
            width: min(72rem, calc(100vw - 2rem));
            grid-template-columns:
                5.9rem minmax(0, 1fr);
            grid-template-areas:
                "logo title"
                "logo copy";
            gap: 0.18rem 1.15rem;
            padding: 0.72rem 1.25rem 0.76rem;
            align-items: center;
            text-align: left;
        }

        .hero-brand__mark {
            grid-area: logo;
            display: block;
            width: 5.9rem;
            height: 5.9rem;
            overflow: hidden;
            align-self: center;
            border-radius: 50%;
        }

        /*
         * Die Quelldatei enthält Symbol und Wortmarke.
         * Der quadratische Ausschnitt zeigt nur das Symbol.
         */

        .hero-brand__mark .hero-brand__logo {
            display: block;
            width: auto !important;
            height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            margin: 0 !important;
            object-fit: contain;
            object-position: left center;
            mix-blend-mode: normal;
            filter: none;
            transform: scale(1.04);
            transform-origin: left center;
        }

        .hero-title {
            grid-area: title;
            margin: 0;
            overflow: visible;
            color: #112a46;
            font-size: clamp(1.55rem, 3vw, 3.15rem);
            font-weight: 850;
            line-height: 1;
            letter-spacing: -0.035em;
            text-shadow: none;
            white-space: nowrap;
        }

        .hero-copy {
            grid-area: copy;
            max-width: none;
            margin: 0;
            color: #29415a;
            font-size: clamp(0.88rem, 1.2vw, 1.08rem);
            font-weight: 650;
            line-height: 1.25;
            text-shadow: none;
        }

        @media (max-width: 900px) {
            .hero-panel {
                width: 100%;
                grid-template-columns:
                    5rem minmax(0, 1fr);
                grid-template-areas:
                    "logo title"
                    "logo copy";
                gap: 0.15rem 0.85rem;
                padding: 0.65rem 0.9rem;
                text-align: left;
            }

            .hero-brand__mark {
                width: 5rem;
                height: 5rem;
            }

            .hero-title {
                font-size: clamp(1.35rem, 3.25vw, 2.15rem);
                white-space: nowrap;
            }

            .hero-copy {
                font-size: clamp(0.82rem, 1.75vw, 0.98rem);
            }
        }

        @media (max-width: 620px) {
            .hero-panel {
                grid-template-columns:
                    4.2rem minmax(0, 1fr);
                grid-template-areas:
                    "logo title"
                    "logo copy";
                gap: 0.1rem 0.65rem;
                padding: 0.55rem 0.7rem;
                text-align: left;
            }

            .hero-brand__mark {
                width: 4.2rem;
                height: 4.2rem;
            }

            .hero-title {
                font-size: clamp(0.98rem, 3.7vw, 1.4rem);
                letter-spacing: -0.04em;
                white-space: nowrap;
            }

            .hero-copy {
                font-size: 0.78rem;
                line-height: 1.18;
            }
        }





        /* arcanum-full-inspiration-cards-v1 */

        /*
         * Breite rechte Spalte für Tablet-Querformat.
         * Die Höhe der vollständigen 16:9-Karte ergibt sich
         * ausschließlich aus ihrer Breite.
         */

        .auth-column {
            display: grid !important;
            box-sizing: border-box !important;
            width: min(
                50rem,
                56vw,
                calc((100svh - 21rem) * 16 / 9)
            ) !important;
            min-width: 38rem;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            grid-template-rows: auto auto !important;
            gap: 0.72rem !important;
            margin:
                0.5rem
                clamp(0.75rem, 1.5vw, 1.5rem)
                0
                auto !important;
            padding: 0 !important;
        }

        .auth-card {
            box-sizing: border-box !important;
            width: 100% !important;
            padding: 0.72rem 1rem 0.62rem !important;
            border-radius: 1.25rem !important;
        }

        .auth-stamp {
            top: 0.38rem !important;
            right: 0.55rem !important;
            width: 4rem !important;
            height: auto !important;
        }

        .auth-overline {
            margin: 0 0 0.08rem !important;
            font-size: 0.74rem !important;
            line-height: 1 !important;
        }

        .auth-title {
            margin:
                0
                4.4rem
                0.38rem
                0 !important;
            font-size: clamp(
                1.9rem,
                2.65vw,
                2.7rem
            ) !important;
            line-height: 0.94 !important;
        }

        .login-form {
            gap: 0.3rem !important;
        }

        .field-label {
            margin: 0 0 0.1rem !important;
            font-size: 0.77rem !important;
            line-height: 1 !important;
        }

        .field-input {
            padding: 0.48rem 0.7rem !important;
            border-radius: 0.66rem !important;
            font-size: 0.9rem !important;
        }

        .login-submit {
            min-height: 2.85rem !important;
            gap: 0.55rem !important;
            margin-top: 0.03rem !important;
            padding: 0.38rem 0.82rem !important;
            border-radius: 0.74rem !important;
            font-size: 1.05rem !important;
        }

        .login-submit__stamp {
            width: 2.18rem !important;
            height: 2.18rem !important;
        }

        .login-status {
            min-height: 0.55rem !important;
            margin: 0 !important;
            font-size: 0.7rem !important;
            line-height: 1 !important;
        }

        /*
         * Vollständige fertige Karte:
         * kein zusätzlicher Rahmen, kein Beschnitt.
         */

        .quote-card {
            display: block !important;
            box-sizing: border-box !important;
            width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            aspect-ratio: auto !important;
            margin: 0 !important;
            overflow: hidden !important;
        }

        .quote-card__full-image {
            display: block !important;
            box-sizing: border-box !important;
            width: 100% !important;
            height: auto !important;
            min-width: 0 !important;
            min-height: 0 !important;
            max-width: 100% !important;
            aspect-ratio: 16 / 9 !important;
            object-fit: contain !important;
            object-position: center center !important;
            border: 0 !important;
            background: transparent !important;
            transform: none !important;
        }

        @media (max-width: 1100px) {
            .auth-column {
                width: min(
                    47rem,
                    calc(100vw - 1.5rem),
                    calc((100svh - 20rem) * 16 / 9)
                ) !important;
                min-width: 0;
                margin-right: 0.75rem !important;
            }
        }

        @media (max-width: 820px) {
            .auth-column {
                width: calc(100vw - 1rem) !important;
                margin:
                    0.6rem
                    auto
                    0 !important;
            }
        }



        /* arcanum-inspiration-panel-match-v1 */

        /*
         * Der Inspirationsbereich ist nun gleichzeitig
         * quote-card und auth-card. Hintergrund, Rahmen,
         * Schatten und Rundung sind deshalb identisch mit
         * dem Einchecken-Kasten.
         */

        .quote-card.auth-card {
            height: auto !important;
            min-height: 0 !important;
            aspect-ratio: auto !important;
            overflow: hidden !important;
        }

        .quote-card.auth-card .quote-card__full-image {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 16 / 9 !important;
            object-fit: contain !important;
            object-position: center !important;
            border-radius: 0.82rem !important;
        }