/* StoneFlow UI V2 | Layout: login.html
   Gemeinsame Komponenten: /static/style.css. Fachliche Geometrie bleibt seitenspezifisch. */

:root {
            --primary: var(--sf-primary, var(--sf-primary));
            --primary-dark: var(--sf-primary-hover, var(--sf-primary));
            --bg-1: var(--sf-bg, #f7f7f7);
            --bg-2: var(--sf-bg-soft, #ececec);
            --card: var(--sf-card-bg-soft, rgba(255,255,255,0.96));
            --text: var(--sf-text, #1f2937);
            --muted: var(--sf-muted, #6b7280);
            --border: var(--sf-border, #e5e7eb);
            --success-bg: var(--sf-success-bg, #edf9f0);
            --success-text: var(--sf-success, #0a7d2b);
            --error-bg: var(--sf-danger-bg, #fff1f2);
            --error-text: var(--sf-danger, #b00020);
            --shadow: 0 18px 45px rgba(0,0,0,0.12);
            --radius-xl: 26px;
            --radius-lg: 18px;
            --radius-md: 14px;
        }

        * {
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            padding: 0;
            min-height: 100%;
            font-family: var(--sf-font);
            color: var(--text);
            background:
                radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 10%, transparent), transparent 28%),
                radial-gradient(circle at bottom right, color-mix(in srgb, var(--primary) 8%, transparent), transparent 24%),
                linear-gradient(135deg, var(--bg-1), var(--bg-2));
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding:
                max(18px, env(safe-area-inset-top))
                18px
                max(18px, env(safe-area-inset-bottom))
                18px;
        }

        .page {
            width: 100%;
            max-width: 1080px;
            display: grid;
            grid-template-columns: 1.08fr 0.92fr;
            gap: 26px;
            align-items: stretch;
        }

        .brand-panel {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-xl);
            padding: 38px;
            min-height: 620px;
            color: white;
            background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .brand-panel::before {
            content: "";
            position: absolute;
            width: 280px;
            height: 280px;
            top: -80px;
            right: -80px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--primary) 16%, transparent);
            filter: blur(8px);
        }

        .brand-panel::after {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            bottom: -70px;
            left: -70px;
            border-radius: 50%;
            background: rgba(255,255,255,0.04);
        }

        .brand-content,
        .brand-footer {
            position: relative;
            z-index: 1;
        }

        .brand-badge {
            display: inline-block;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(255,255,255,0.10);
            color: #f9fafb;
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 20px;
            letter-spacing: 0.2px;
        }

        .brand-panel h1 {
            margin: 0 0 14px;
            font-size: 40px;
            line-height: 1.08;
        }

        .brand-panel p {
            margin: 0;
            color: rgba(255,255,255,0.82);
            font-size: 16px;
            line-height: 1.6;
            max-width: 520px;
        }

        .brand-points {
            margin-top: 28px;
            display: grid;
            gap: 14px;
        }

        .brand-point {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: 14px 16px;
            backdrop-filter: blur(3px);
        }

        .brand-point strong {
            display: block;
            margin-bottom: 4px;
            font-size: 15px;
        }

        .brand-point span {
            font-size: 13px;
            color: rgba(255,255,255,0.76);
            line-height: 1.45;
        }

        .brand-footer {
            margin-top: 28px;
            color: rgba(255,255,255,0.62);
            font-size: 13px;
        }

        .login-wrap {
            display: flex;
            align-items: center;
        }

        .login-box {
            width: 100%;
            background: var(--card);
            border: 1px solid rgba(255,255,255,0.82);
            border-radius: var(--radius-xl);
            padding: 34px 38px 28px;
            box-shadow: var(--shadow);
            backdrop-filter: blur(10px);
        }

        .top {
            text-align: center;
            margin-bottom: 22px;
        }

        .logo-wrap {
            display: flex;
            justify-content: center;
            margin-bottom: 14px;
        }

        .logo {
            width: 102px;
            height: 102px;
            border-radius: 24px;
            object-fit: cover;
            border: 3px solid color-mix(in srgb, var(--primary) 20%, transparent);
            box-shadow: 0 10px 25px color-mix(in srgb, var(--primary) 16%, transparent);
            background: #fff;
        }

        .login-brand-badge {
            display: none;
            font-size: 12px;
            color: var(--primary-dark);
            background: color-mix(in srgb, var(--primary) 10%, transparent);
            padding: 6px 12px;
            border-radius: 999px;
            margin-bottom: 10px;
            font-weight: bold;
            letter-spacing: 0.2px;
        }

        .login-box h2 {
            margin: 0 0 8px;
            font-size: 30px;
            line-height: 1.1;
            color: var(--sf-heading, #111827);
        }

        .subtitle {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.5;
        }

        .msg,
        .err {
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 16px;
            font-size: 14px;
            text-align: center;
        }

        .msg {
            background: var(--success-bg);
            color: var(--success-text);
            border: 1px solid #cdeed5;
        }

        .err {
            background: var(--error-bg);
            color: var(--error-text);
            border: 1px solid #f3c5cf;
        }

        form {
            display: grid;
            gap: 15px;
        }

        .field {
            display: grid;
            gap: 7px;
        }

        .field label {
            font-size: 14px;
            font-weight: bold;
            color: var(--sf-label, #374151);
            padding-left: 2px;
        }

        .field input {
            width: 100%;
            min-height: 48px;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 12px 14px;
            font-size: 15px;
            background: #fff;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }

        .field input:focus {
            border-color: color-mix(in srgb, var(--primary) 80%, transparent);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
        }

        .submit-btn {
            margin-top: 4px;
            min-height: 50px;
            border: none;
            border-radius: var(--radius-md);
            background: linear-gradient(180deg, var(--primary), var(--primary-dark));
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent);
            transition: transform 0.12s ease, box-shadow 0.12s ease;
        }

        .submit-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 26px color-mix(in srgb, var(--primary) 26%, transparent);
        }

        .submit-btn:active {
            transform: scale(0.99);
        }

        .bottom-note {
            margin-top: 16px;
            text-align: center;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
        }

        @media (max-width: 900px) {
            .page {
                grid-template-columns: 1fr;
                max-width: 520px;
                gap: 16px;
            }

            .brand-panel {
                min-height: auto;
                padding: 24px 22px;
                border-radius: 20px;
            }

            .brand-panel h1 {
                font-size: 28px;
            }

            .brand-panel p {
                font-size: 14px;
            }

            .brand-points {
                margin-top: 18px;
                gap: 10px;
            }

            .brand-point {
                padding: 12px 14px;
            }

            .login-box {
                border-radius: 20px;
                padding: 26px 28px 22px;
            }

            .logo {
                width: 90px;
                height: 90px;
                border-radius: 20px;
            }
        }

        @media (max-width: 640px) {
            body {
                align-items: flex-start;
                padding:
                    max(12px, env(safe-area-inset-top))
                    12px
                    max(12px, env(safe-area-inset-bottom))
                    12px;
            }

            .page {
                max-width: 430px;
                gap: 12px;
            }

            .brand-panel {
                min-height: auto;
                padding: 18px 16px;
                border-radius: 18px;
            }

            .brand-badge {
                margin-bottom: 12px;
                font-size: 12px;
                padding: 6px 10px;
            }

            .brand-panel h1 {
                font-size: 22px;
                margin-bottom: 8px;
            }

            .brand-panel p {
                font-size: 13px;
                line-height: 1.45;
            }

            .brand-points {
                grid-template-columns: 1fr;
                margin-top: 14px;
                gap: 8px;
            }

            .brand-point {
                padding: 10px 12px;
                border-radius: 12px;
            }

            .brand-point strong {
                font-size: 13px;
                margin-bottom: 2px;
            }

            .brand-point span {
                font-size: 12px;
                line-height: 1.35;
            }

            .brand-footer {
                display: none;
            }

            .login-box {
                border-radius: 18px;
                padding: 20px 16px 16px;
            }

            .top {
                margin-bottom: 18px;
            }

            .logo {
                width: 78px;
                height: 78px;
                border-radius: 18px;
            }

            .login-brand-badge {
                display: inline-block;
            }

            .login-box h2 {
                font-size: 24px;
            }

            .subtitle,
            .field label,
            .msg,
            .err {
                font-size: 13px;
            }

            .field input,
            .submit-btn {
                min-height: 48px;
            }
        }

        @media (max-height: 720px) {
            body {
                align-items: flex-start;
            }

            .page {
                margin-top: 4px;
                margin-bottom: 4px;
            }

            .brand-panel {
                min-height: auto;
            }
        }

/* Login-Hero links bewusst hell halten.
           Diese Regeln stehen NACH theme.css, weil theme.css globale h1/p-Regeln überschreiben kann. */
        .brand-panel,
        .brand-panel h1,
        .brand-panel .brand-content,
        .brand-panel .brand-footer,
        .brand-panel .brand-point strong {
            color: #ffffff !important;
        }

        .brand-panel p,
        .brand-panel .brand-point span {
            color: rgba(255, 255, 255, 0.82) !important;
        }

        .brand-panel .brand-footer {
            color: rgba(255, 255, 255, 0.62) !important;
        }

        .brand-panel .brand-badge {
            color: #f9fafb !important;
        }