* { box-sizing:border-box; }
    html { color-scheme:dark; }
    body { margin:0; min-height:100vh; overflow-x:hidden; background:#0e1414; color:#efeae0; font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
    .bg { position:fixed; inset:0; background:#0e1414 url(/login-assets/saal-1930-breit.jpg) center 55%/cover no-repeat; opacity:.2; pointer-events:none; }
    .stage { position:relative; z-index:2; isolation:isolate; transform:translateZ(0); min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 16px 90px; }
    .portal { position:relative; width:380px; height:392px; flex:none; }
    .portal svg { position:absolute; left:0; top:0; }
    .inner { position:relative; height:100%; padding:118px 60px 0; display:flex; flex-direction:column; align-items:center; gap:18px; }
    .sym { width:38px; height:38px; }
    h1 { margin:0; font-family:"Bodoni 72",Didot,"Bodoni MT","Bodoni Moda",Georgia,serif; font-style:italic; font-weight:400; font-size:36px; line-height:1.1; color:#efeae0; }
    /* Stummfilm Sepia nach Friendzone-Leitbild (Archi 25.10.2026) */
    body.login .bg { opacity:.62; filter:grayscale(1) sepia(.92) contrast(1.12) brightness(.78) saturate(1.15); }
    .iris { position:fixed; inset:0; pointer-events:none;
            background:radial-gradient(ellipse 66% 62% at 50% 46%, transparent 34%, rgba(26,16,8,.6) 72%, rgba(10,6,3,.96) 100%); }
    .hauch { position:fixed; inset:0; z-index:3; pointer-events:none; background:#8a5a2b; mix-blend-mode:soft-light; opacity:.42; }
    .korn { position:fixed; inset:-50%; width:200%; height:200%; z-index:3; pointer-events:none; opacity:.22; mix-blend-mode:overlay; }
    .strahl { position:fixed; left:50%; top:-6vh; width:min(820px,120vw); height:calc(50vh + 150px); transform:translateX(-50%);
              pointer-events:none; mix-blend-mode:screen; filter:blur(22px); }
    .strahl::before { content:""; position:absolute; inset:0; clip-path:polygon(46% 0, 54% 0, 92% 100%, 8% 100%);
              background:linear-gradient(to bottom, rgba(255,240,210,.30), rgba(255,232,196,.12) 50%, rgba(255,226,180,0) 92%); }
    .staub { position:fixed; left:50%; top:-4vh; width:min(760px,110vw); height:calc(50vh + 120px); transform:translateX(-50%); pointer-events:none; mix-blend-mode:screen; }
    .portal svg { overflow:visible; }
    .portal > svg { filter:sepia(.55) brightness(1.06); }
    .gruss { font:italic 400 15px/1 "Bodoni 72",Didot,"Bodoni MT","Bodoni Moda",Georgia,serif; letter-spacing:.06em; fill:#f3e3c4; }
    .gruss .en { fill-opacity:.6; }
    .projektor { position:fixed; inset:0; width:100vw; height:100vh; z-index:3; pointer-events:none; }
    body.login .bg { will-change:transform,opacity; }
    /* Bild nicht zoomen: nach der Höhe einpassen, Lampe und Köpfe bleiben sichtbar; breitere Bildschirme bekommen eine weiche, abgeleitete Fortsetzung des Saals (Nikolaus 25.10.2026) */
    .bg .bg-weit { position:absolute; inset:-60px; background-position:center; background-size:cover; background-repeat:no-repeat; filter:blur(22px) brightness(.7); }
    .bg .bg-bild { position:absolute; inset:0; background-position:center 55%; background-size:cover; background-repeat:no-repeat; }
    /* Film an („on“): erst in Sepia wie das Standbild, dann gemeinsam in Farbe – nie Schwarzweiß dazwischen (Nikolaus 25.10.2026) */
    body.login .bg { transition:filter 2.8s ease; }
    #kuerbisse { filter:grayscale(1) sepia(.92) contrast(1.12) brightness(.9) saturate(1.15); transition:filter 2.8s ease; }
    .hauch, .korn, .iris { transition:opacity 2.8s ease; }
    .portal > svg { transition:filter 2.8s ease; }
    html.farbe #kuerbisse { filter:grayscale(0) sepia(0) contrast(1) brightness(1) saturate(1); }
    html.farbe-fertig #kuerbisse { filter:none; transition:none; }
    html.farbe .hauch { opacity:0; }
    html.farbe .korn { opacity:.07; }
    html.farbe .iris { opacity:.45; }
    html.farbe .portal > svg { filter:sepia(0) brightness(1); }

/* Archi 25.10.2026: Portal faehrt bei on hoch, bei off sofort zurueck */
html.kein-film .portal, html.kein-film .floor, html.kein-film .below { translate: none !important; }

    .floor { width:460px; max-width:100%; height:1px; background:#c7aa79; flex:none; }
    .below { width:380px; max-width:100%; margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:12px; }
    summary { cursor:pointer; list-style:none; color:#d9bf94; font-size:13px; text-decoration:underline; text-underline-offset:3px; text-align:center; }
    summary::-webkit-details-marker { display:none; }
    summary:hover { color:#efeae0; }
    details[open] summary { margin-bottom:14px; }
    .row { display:flex; gap:8px; width:340px; max-width:100%; }
    .row input { flex:1 1 0; min-width:0; height:40px; border:1px solid rgba(199,170,121,.45); border-radius:2px; background:transparent; color:#efeae0; padding:0 10px; font:inherit; font-size:13px; }
    .row input::placeholder { color:rgba(239,234,224,.6); }
    .go { width:40px; height:40px; flex:none; border:1px solid #c7aa79; border-radius:2px; background:transparent; color:#d9bf94; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
    .go:hover { background:rgba(199,170,121,.14); }
    .reset { display:block; text-align:center; margin-top:12px; font-size:12px; color:#d9bf94; }
    .reset:hover { color:#efeae0; }
    h1 a.anmelden { color:inherit; text-decoration:none; cursor:pointer; transition:color .3s, text-shadow .3s; }
    h1 a.anmelden:hover, h1 a.anmelden:focus-visible { color:#f3e6cc; text-shadow:0 0 18px rgba(255,190,110,.35); }
    h1 a.anmelden:focus-visible { outline:2px solid #d9bf94; outline-offset:6px; }
    /* Nikolaus 24.10.2026: „ohne SSO“ steht im unteren Rahmen des Portalbogens; ein Klick zeigt E-Mail und Passwort in der Mitte */
    .portal details.fallback { position:absolute; inset:0; pointer-events:none; }
    .portal summary { position:absolute; left:40px; right:40px; bottom:0; height:18px; line-height:18px; margin:0; pointer-events:auto; font-size:10.5px; letter-spacing:.2em; text-decoration:none; color:#c7aa79; }
    .portal summary:hover, .portal details[open] summary { color:#efeae0; }
    .portal details[open] summary { margin:0; }
    .portal details.fallback form { position:absolute; left:50%; top:182px; transform:translateX(-50%); width:244px; pointer-events:auto; }
    .portal .row { flex-direction:column; width:100%; gap:8px; }
    .portal .row input { flex:none; width:100%; height:36px; background:rgba(14,20,19,.55); }
    .portal .go { width:100%; height:34px; }
    .portal .go svg { position:static; }   /* nicht wie das Bogen-SVG absolut setzen */
    .portal .reset { margin-top:10px; font-size:11px; }
    .sso:focus-visible, summary:focus-visible, .row input:focus, .go:focus-visible, .reset:focus-visible { outline:2px solid #d9bf94; outline-offset:2px; }
    .error { width:340px; max-width:100%; padding:10px 12px; border:1px solid rgba(196,139,139,.6); border-radius:2px; background:rgba(120,40,40,.25); color:#f3d3d3; font-size:13px; }
    .logo { position:fixed; left:32px; bottom:26px; height:18px; width:auto; z-index:2; }
    @media (max-width:440px) {
      .portal { transform:scale(.86); margin:-27px 0; }
      .logo { left:50%; transform:translateX(-50%); }
    }
/* ===== 0_Auth: Formular im Bogen (Logik unverändert: /login, next, app, csrf_token, remember, Passkey) ===== */
.portal form.bogen-form { position:absolute; left:50%; top:166px; transform:translateX(-50%); width:244px; display:flex; flex-direction:column; gap:8px; margin:0; }
.portal .bogen-form input[type=text], .portal .bogen-form input[type=password] { width:100%; height:36px; border:1px solid rgba(199,170,121,.45); border-radius:2px; background:rgba(14,20,19,.55); color:#efeae0; padding:0 10px; font:inherit; font-size:13px; }
.portal .bogen-form input::placeholder { color:rgba(239,234,224,.6); }
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:34px !important; }
.password-toggle { position:absolute; right:0; top:0; width:34px; height:36px; border:0; background:none; color:#d9bf94; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
.password-toggle svg { width:16px; height:16px; position:static; }
.password-toggle:hover { color:#efeae0; }
.bogen-row { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:rgba(239,234,224,.75); }
.bogen-row label { display:flex; align-items:center; gap:6px; cursor:pointer; }
.bogen-row input[type=checkbox] { accent-color:#c7aa79; margin:0; }
.bogen-row a { color:#d9bf94; text-decoration:underline; text-underline-offset:3px; }
.bogen-row a:hover { color:#efeae0; }
.portal .go { width:100%; height:34px; font:inherit; font-size:13px; gap:8px; }
.portal .go.loading { opacity:.55; cursor:progress; }
.pk-link { background:none; border:0; padding:0; margin:0 auto; color:#d9bf94; font:inherit; font-size:11px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.pk-link:hover { color:#efeae0; }
.pk-link:disabled { opacity:.5; cursor:progress; }
.pk-sep { display:none; }
.pk-err { width:340px; max-width:100%; margin:0; padding:10px 12px; border:1px solid rgba(196,139,139,.6); border-radius:2px; background:rgba(120,40,40,.25); color:#f3d3d3; font-size:13px; }
.pk-err[hidden] { display:none; }
.notice { width:340px; max-width:100%; padding:10px 12px; border:1px solid rgba(199,170,121,.5); border-radius:2px; background:rgba(199,170,121,.1); color:#efeae0; font-size:13px; }
.bogen-form input:focus, .password-toggle:focus-visible, .pk-link:focus-visible, .bogen-row a:focus-visible, .portal .go:focus-visible { outline:2px solid #d9bf94; outline-offset:2px; }
.hilfe { margin:0; font-size:11px; color:rgba(239,234,224,.62); text-align:center; }
.hilfe a { color:#d9bf94; }

/* ===== Anmelden-Klick: Felder erst nach Klick ===== */
.portal .bogen-form { transition:opacity .35s ease, visibility .35s; }
.portal.zu .bogen-form { opacity:0; visibility:hidden; pointer-events:none; }
.portal h1 button.anmelden { background:none; border:0; border-bottom:1px dotted rgba(199,170,121,.55); padding:0 2px 2px; margin:0; font:inherit; color:inherit; cursor:pointer; transition:color .3s, text-shadow .3s, border-color .3s; }
.portal.zu h1 button.anmelden { animation:atmen 3.2s ease-in-out infinite; }
.portal h1 button.anmelden:hover, .portal h1 button.anmelden:focus-visible { color:#f3e6cc; text-shadow:0 0 18px rgba(255,190,110,.35); }
.portal h1 button.anmelden:focus-visible { outline:2px solid #d9bf94; outline-offset:6px; }
.portal:not(.zu) h1 button.anmelden { cursor:default; border-bottom-color:transparent; }
@keyframes atmen { 0%,100% { text-shadow:0 0 0 rgba(255,190,110,0); } 50% { text-shadow:0 0 18px rgba(255,190,110,.4); } }
@media (prefers-reduced-motion: reduce) { .portal.zu h1 button.anmelden { animation:none; } .portal.fehler { animation:none !important; } }

/* ===== Fehler gut sichtbar ===== */
.below .error { width:380px; max-width:100%; display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid #e59a9a; border-left:4px solid #e57373; border-radius:2px; background:rgba(150,40,40,.6); color:#fff; font-size:14px; line-height:1.4; font-weight:500; box-shadow:0 0 24px rgba(229,115,115,.25); }
.meldung-icon { flex:none; width:20px; height:20px; border-radius:50%; background:#e57373; color:#2a0c0c; font-weight:700; font-size:13px; line-height:20px; text-align:center; }
.below .notice { width:380px; max-width:100%; font-size:14px; padding:12px 14px; }
.pk-err { width:380px; max-width:100%; font-size:14px; padding:12px 14px; border-left:4px solid #e57373; background:rgba(150,40,40,.6); color:#fff; border-color:#e59a9a; }
.portal.fehler { animation:schuetteln .45s ease-in-out 1; }
.portal.fehler .bogen-form input[type=text], .portal.fehler .bogen-form input[type=password], .portal.fehler .bogen-form input[type=email] { border-color:#e57373; box-shadow:0 0 0 1px rgba(229,115,115,.45); }
@keyframes schuetteln { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-8px); } 40% { transform:translateX(7px); } 60% { transform:translateX(-5px); } 80% { transform:translateX(3px); } }
@media (max-width:440px) { .portal.fehler { animation-name:none; } }

/* ===== weitere Ansichten im Bogen ===== */
.portal h1.ansicht-titel { font-size:28px; }
.portal form.bogen-form.hoch, .portal div.bogen-form.hoch { top:160px; }
.portal div.bogen-form { position:absolute; left:50%; transform:translateX(-50%); width:244px; display:flex; flex-direction:column; gap:8px; }
.portal .bogen-form input[type=email] { width:100%; height:36px; border:1px solid rgba(199,170,121,.45); border-radius:2px; background:rgba(14,20,19,.55); color:#efeae0; padding:0 10px; font:inherit; font-size:13px; }
.bogen-text { margin:0 0 2px; font-size:12px; line-height:1.45; color:rgba(239,234,224,.78); text-align:center; }
.portal .knopf { width:100%; height:34px; border:1px solid #c7aa79; border-radius:2px; color:#d9bf94; font-size:13px; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.portal .knopf:hover { background:rgba(199,170,121,.14); color:#efeae0; }
.portal a.zurueck { position:absolute; left:40px; right:40px; bottom:0; height:18px; line-height:18px; text-align:center; font-size:10.5px; letter-spacing:.2em; color:#c7aa79; text-decoration:none; }
.portal a.zurueck:hover { color:#efeae0; }
.portal a.zurueck:focus-visible, .portal .knopf:focus-visible, .totp-form input:focus { outline:2px solid #d9bf94; outline-offset:2px; }
.pk-sep { display:block; margin:0; text-align:center; font-size:11px; color:rgba(239,234,224,.6); }
.totp-form { display:flex; flex-direction:column; gap:8px; margin:0; }
.totp-form input { width:100%; height:36px; border:1px solid rgba(199,170,121,.45); border-radius:2px; background:rgba(14,20,19,.55); color:#efeae0; padding:0 10px; font:inherit; font-size:13px; }
.portal .go { text-decoration:none; }