body { overflow: auto; }
.auth-bg { position: fixed; inset: 0; overflow: hidden; z-index: -1; background: radial-gradient(1200px 600px at 10% 0%, #1c1440 0%, transparent 60%), radial-gradient(900px 600px at 100% 100%, #0b2a44 0%, transparent 60%), var(--bg-0); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: float 18s ease-in-out infinite; }
.b1 { width: 420px; height: 420px; background: #7c5cff; top: -120px; left: -80px; }
.b2 { width: 360px; height: 360px; background: #2ec5ff; bottom: -100px; right: -60px; animation-delay: -6s; }
.b3 { width: 260px; height: 260px; background: #ff4fd8; top: 40%; left: 60%; opacity: .25; animation-delay: -12s; }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.08); } 66% { transform: translate(-30px, 30px) scale(.95); } }
.auth-wrap { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; }
.auth-card { width: min(440px, 100%); background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); animation: modalIn .5s var(--ease); }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; }
.auth-logo { width: 64px; height: 64px; filter: drop-shadow(0 8px 20px rgba(124, 92, 255, .5)); }
.brand-name { margin: 0; font-size: 1.7rem; letter-spacing: -.02em; background: linear-gradient(90deg, #a48cff, #2ec5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.view h2 { margin: 0 0 4px; text-align: center; font-size: 1.35rem; }
.view .sub { margin: 0 0 18px; text-align: center; color: var(--text-3); font-size: .92rem; }
.view .tabs { margin-bottom: 16px; }
.btn.big { padding: 13px 18px; font-size: 1rem; margin-top: 6px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--text-2); margin: 4px 0 14px; cursor: pointer; }
.check input { margin-top: 3px; }
.links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: .86rem; color: var(--text-3); }
.links.center { justify-content: center; }
.or { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--text-3); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.google-btn { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }
.google-btn:hover { background: #f7f8fa; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); text-decoration: none; }
.google-btn.disabled { opacity: .5; pointer-events: none; }
.g-icon { width: 20px; height: 20px; }
.google-hint { font-size: .78rem; color: var(--text-3); text-align: center; margin: 8px 0 0; }
.form-error { background: rgba(255, 77, 109, .12); border: 1px solid rgba(255, 77, 109, .4); color: #ff8fa3; padding: 10px 12px; border-radius: var(--radius-s); font-size: .86rem; margin-bottom: 10px; }
.form-success { background: rgba(47, 210, 122, .12); border: 1px solid rgba(47, 210, 122, .4); color: #6ee7a8; padding: 10px 12px; border-radius: var(--radius-s); font-size: .86rem; margin-bottom: 10px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; opacity: .6; font-size: 1rem; padding: 6px; }
.pw-toggle:hover { opacity: 1; }
.strength { height: 5px; background: var(--bg-4); border-radius: 4px; overflow: hidden; }
.strength span { display: block; height: 100%; width: 0; background: var(--danger); transition: width var(--t), background var(--t); }
.hint.ok { color: var(--success); }
.hint.bad { color: var(--danger); }
.verify-state { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 16px 0 20px; text-align: center; }
.verify-state .big-icon { font-size: 3rem; }
.auth-footer { margin-top: 18px; font-size: .78rem; color: var(--text-3); }
.view { animation: fadeIn .3s; }
@media (max-width: 480px) { .auth-card { padding: 24px 18px; border-radius: var(--radius-l); } }

/* E-Mail optional + Wiederherstellungscode */
.optional-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; background: var(--bg-3, rgba(127,127,127,.18)); color: var(--text-2); vertical-align: middle; }
.recovery-code { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; letter-spacing: .08em; text-align: center; padding: 16px 12px; margin: 6px 0 12px; border-radius: var(--radius); background: var(--bg-1); border: 1px dashed var(--accent); user-select: all; word-break: break-all; }
.row-btns { display: flex; gap: 8px; margin-bottom: 14px; }
.row-btns .btn { flex: 1; }
#recover-form .sub, #forgot-form .sub { margin-top: 0; }
.hint.center { display: block; text-align: center; margin-top: 10px; }
.input.mono { font-family: var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }

/* v7: Zustimmung zu Nutzungsbedingungen */
.terms-check { align-items: flex-start; line-height: 1.45; }
.terms-check input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.terms-version { color: var(--text-3); font-size: .82em; white-space: nowrap; }
.gc-account { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 4px 0 14px; display: grid; gap: 2px; }
.gc-name { font-weight: 700; }
.gc-mail { color: var(--text-3); font-size: .9rem; overflow-wrap: anywhere; }

/* v7: Rechtstexte – gut lesbar auf Handy und Desktop */
.legal-wrap { align-items: flex-start; padding-top: 24px; padding-bottom: 24px; }
.legal-card { width: min(780px, 100%); line-height: 1.6; font-size: .98rem; }
.legal-card h2 { margin: 28px 0 4px; font-size: 1.35rem; scroll-margin-top: 16px; }
.legal-card h3 { margin: 18px 0 6px; font-size: 1.02rem; }
.legal-card p, .legal-card li { color: var(--text-2); overflow-wrap: anywhere; }
.legal-card ul { padding-left: 1.2em; display: grid; gap: 6px; }
.legal-version { color: var(--text-3) !important; font-size: .85rem; margin: 0 0 8px; }
.legal-note { background: color-mix(in srgb, var(--warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); border-radius: 12px; padding: 10px 14px; font-size: .9rem; margin: 8px 0 4px; }
.legal-toc { font-size: .9rem; margin-bottom: 10px; }
@media (max-width: 520px) { .legal-card { padding: 20px 16px; font-size: 1rem; } }
@media (pointer: coarse) { .check { min-height: 28px; align-items: center; } .check input { margin-top: 0; } }


/* =====================================================================================================
   7.5 – Neuer Anmelde-Hintergrund: dunkel, elegant, dezente Rot-Akzente. Nur CSS (kein JS, keine Bilder),
   animiert werden ausschließlich transform/opacity (GPU) → flüssig und sparsam. „Bewegung reduzieren“ = still.
   ===================================================================================================== */
.auth-page {
  --accent: #ff4d5e; --accent-contrast: #fff;
  --auth-red: #ff4d5e; --auth-red-deep: #b3132b; --auth-red-light: #ff9aa4; --auth-wine: #4a0b16;
  background: #07060a;
}
.auth-page .auth-bg {
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(120, 14, 32, .55) 0%, transparent 62%),
    radial-gradient(900px 650px at 105% 110%, rgba(90, 10, 26, .55) 0%, transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(255, 77, 94, .10) 0%, transparent 70%),
    linear-gradient(160deg, #0c070b 0%, #07060a 45%, #0a0609 100%);
}
/* Lichtflächen */
.auth-page .blob { filter: blur(90px); opacity: .5; will-change: transform; animation: authFloat 26s ease-in-out infinite; mix-blend-mode: screen; }
.auth-page .b1 { width: 520px; height: 520px; background: radial-gradient(circle at 40% 40%, #c8102e, #5a0716 70%); top: -180px; left: -140px; opacity: .55; }
.auth-page .b2 { width: 460px; height: 460px; background: radial-gradient(circle at 60% 60%, #8f0d24, #2b040b 70%); bottom: -160px; right: -120px; animation-delay: -9s; opacity: .6; }
.auth-page .b3 { width: 300px; height: 300px; background: #ff5a6a; top: 46%; left: 64%; opacity: .14; animation-delay: -17s; animation-duration: 32s; }
.auth-page .b4 { width: 240px; height: 240px; background: #ff9aa4; top: 62%; left: 8%; opacity: .08; animation-delay: -5s; animation-duration: 30s; }
@keyframes authFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(60px, -40px, 0) scale(1.08); }
  66% { transform: translate3d(-40px, 50px, 0) scale(.94); }
}
/* feines Raster, zur Mitte hin ausgeblendet */
.auth-grid {
  position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 75%);
}
/* Lichtpartikel: je Ebene EIN Element mit vielen box-shadows (sehr günstig), steigen langsam auf */
.auth-particles { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; will-change: transform; }
.auth-particles.p1 { box-shadow: 663px 308px 0 0 rgba(255,190,195,.35), 98px 148px 0 1px rgba(255,120,130,.55), 748px 1193px 0 0 rgba(255,190,195,.35), 439px 76px 0 0 rgba(255,80,95,.45), 856px 143px 0 0 rgba(255,120,130,.55), 1128px 869px 0 0 rgba(255,190,195,.35), 253px 457px 0 1px rgba(255,190,195,.35), 1193px 126px 0 1px rgba(255,190,195,.35), 812px 101px 0 0 rgba(255,120,130,.55), 1140px 272px 0 0 rgba(255,80,95,.45), 295px 1107px 0 0 rgba(255,190,195,.35), 631px 1147px 0 1px rgba(255,120,130,.55), 211px 1191px 0 1px rgba(255,190,195,.35), 384px 762px 0 0 rgba(255,190,195,.35), 1458px 128px 0 1px rgba(255,120,130,.55), 1267px 421px 0 0 rgba(255,190,195,.35), 1088px 875px 0 0 rgba(255,80,95,.45), 1199px 928px 0 0 rgba(255,80,95,.45), 508px 368px 0 1px rgba(255,120,130,.55), 167px 1176px 0 0 rgba(255,190,195,.35), 1013px 703px 0 1px rgba(255,80,95,.45), 589px 1247px 0 0 rgba(255,120,130,.55), 1048px 856px 0 0 rgba(255,80,95,.45), 311px 1001px 0 0 rgba(255,120,130,.55), 1368px 158px 0 1px rgba(255,190,195,.35), 1616px 642px 0 0 rgba(255,190,195,.35), 717px 1217px 0 0 rgba(255,190,195,.35), 1632px 934px 0 0 rgba(255,120,130,.55), 552px 970px 0 1px rgba(255,190,195,.35), 133px 124px 0 1px rgba(255,190,195,.35), 634px 1325px 0 1px rgba(255,190,195,.35), 1683px 912px 0 0 rgba(255,190,195,.35), 790px 1369px 0 0 rgba(255,120,130,.55), 945px 727px 0 0 rgba(255,190,195,.35), 239px 1011px 0 0 rgba(255,120,130,.55), 1573px 588px 0 0 rgba(255,190,195,.35), 507px 814px 0 0 rgba(255,80,95,.45), 165px 340px 0 0 rgba(255,80,95,.45); animation: authRise 70s linear infinite; }
.auth-particles.p1::after { content: ""; position: absolute; left: 0; top: 1400px; width: 2px; height: 2px; border-radius: 50%; box-shadow: 663px 308px 0 0 rgba(255,190,195,.35), 98px 148px 0 1px rgba(255,120,130,.55), 748px 1193px 0 0 rgba(255,190,195,.35), 439px 76px 0 0 rgba(255,80,95,.45), 856px 143px 0 0 rgba(255,120,130,.55), 1128px 869px 0 0 rgba(255,190,195,.35), 253px 457px 0 1px rgba(255,190,195,.35), 1193px 126px 0 1px rgba(255,190,195,.35), 812px 101px 0 0 rgba(255,120,130,.55), 1140px 272px 0 0 rgba(255,80,95,.45), 295px 1107px 0 0 rgba(255,190,195,.35), 631px 1147px 0 1px rgba(255,120,130,.55), 211px 1191px 0 1px rgba(255,190,195,.35), 384px 762px 0 0 rgba(255,190,195,.35), 1458px 128px 0 1px rgba(255,120,130,.55), 1267px 421px 0 0 rgba(255,190,195,.35), 1088px 875px 0 0 rgba(255,80,95,.45), 1199px 928px 0 0 rgba(255,80,95,.45), 508px 368px 0 1px rgba(255,120,130,.55), 167px 1176px 0 0 rgba(255,190,195,.35), 1013px 703px 0 1px rgba(255,80,95,.45), 589px 1247px 0 0 rgba(255,120,130,.55), 1048px 856px 0 0 rgba(255,80,95,.45), 311px 1001px 0 0 rgba(255,120,130,.55), 1368px 158px 0 1px rgba(255,190,195,.35), 1616px 642px 0 0 rgba(255,190,195,.35), 717px 1217px 0 0 rgba(255,190,195,.35), 1632px 934px 0 0 rgba(255,120,130,.55), 552px 970px 0 1px rgba(255,190,195,.35), 133px 124px 0 1px rgba(255,190,195,.35), 634px 1325px 0 1px rgba(255,190,195,.35), 1683px 912px 0 0 rgba(255,190,195,.35), 790px 1369px 0 0 rgba(255,120,130,.55), 945px 727px 0 0 rgba(255,190,195,.35), 239px 1011px 0 0 rgba(255,120,130,.55), 1573px 588px 0 0 rgba(255,190,195,.35), 507px 814px 0 0 rgba(255,80,95,.45), 165px 340px 0 0 rgba(255,80,95,.45); }
.auth-particles.p2 { width: 3px; height: 3px; filter: blur(.6px); box-shadow: 1125px 569px 0 0 rgba(255,160,170,.3), 1769px 1126px 0 0 rgba(255,160,170,.3), 734px 1398px 0 0 rgba(255,90,105,.35), 309px 169px 0 0 rgba(255,90,105,.35), 475px 1348px 0 0 rgba(255,90,105,.35), 993px 1206px 0 0 rgba(255,160,170,.3), 577px 8px 0 0 rgba(255,160,170,.3), 1094px 756px 0 1px rgba(255,160,170,.3), 257px 1055px 0 1px rgba(255,90,105,.35), 935px 1393px 0 1px rgba(255,160,170,.3), 815px 817px 0 0 rgba(255,90,105,.35), 986px 1299px 0 0 rgba(255,90,105,.35), 390px 137px 0 0 rgba(255,160,170,.3), 332px 225px 0 0 rgba(255,90,105,.35), 209px 0px 0 1px rgba(255,90,105,.35), 1098px 207px 0 0 rgba(255,90,105,.35), 144px 425px 0 1px rgba(255,160,170,.3), 304px 1299px 0 0 rgba(255,160,170,.3), 1233px 745px 0 0 rgba(255,90,105,.35), 236px 999px 0 0 rgba(255,160,170,.3), 990px 638px 0 0 rgba(255,90,105,.35), 209px 701px 0 1px rgba(255,160,170,.3); animation: authRise 110s linear infinite; }
.auth-particles.p2::after { content: ""; position: absolute; left: 0; top: 1400px; width: 3px; height: 3px; border-radius: 50%; box-shadow: 1125px 569px 0 0 rgba(255,160,170,.3), 1769px 1126px 0 0 rgba(255,160,170,.3), 734px 1398px 0 0 rgba(255,90,105,.35), 309px 169px 0 0 rgba(255,90,105,.35), 475px 1348px 0 0 rgba(255,90,105,.35), 993px 1206px 0 0 rgba(255,160,170,.3), 577px 8px 0 0 rgba(255,160,170,.3), 1094px 756px 0 1px rgba(255,160,170,.3), 257px 1055px 0 1px rgba(255,90,105,.35), 935px 1393px 0 1px rgba(255,160,170,.3), 815px 817px 0 0 rgba(255,90,105,.35), 986px 1299px 0 0 rgba(255,90,105,.35), 390px 137px 0 0 rgba(255,160,170,.3), 332px 225px 0 0 rgba(255,90,105,.35), 209px 0px 0 1px rgba(255,90,105,.35), 1098px 207px 0 0 rgba(255,90,105,.35), 144px 425px 0 1px rgba(255,160,170,.3), 304px 1299px 0 0 rgba(255,160,170,.3), 1233px 745px 0 0 rgba(255,90,105,.35), 236px 999px 0 0 rgba(255,160,170,.3), 990px 638px 0 0 rgba(255,90,105,.35), 209px 701px 0 1px rgba(255,160,170,.3); }
@keyframes authRise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -1400px, 0); } }
/* sanfter Lichtkegel von oben + Vignette */
.auth-beam { position: absolute; left: 50%; top: -30%; width: 900px; height: 900px; margin-left: -450px; background: conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(255, 77, 94, .10) 160deg, rgba(255, 154, 164, .06) 180deg, rgba(255, 77, 94, .10) 200deg, transparent 360deg); filter: blur(30px); opacity: .7; animation: authBeam 14s ease-in-out infinite; will-change: opacity, transform; }
@keyframes authBeam { 0%, 100% { opacity: .45; transform: scaleX(.9); } 50% { opacity: .8; transform: scaleX(1.05); } }
.auth-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55) 100%); }

/* Karte: Glas + leuchtender Verlaufsrand */
.auth-page .auth-card {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(28, 18, 24, .72), rgba(14, 10, 14, .78));
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 77, 94, .05), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: authCardIn .7s cubic-bezier(.2, .8, .2, 1) both;
}
.auth-page .auth-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 110, 125, .55), rgba(255, 77, 94, .08) 35%, rgba(255, 255, 255, .04) 60%, rgba(179, 19, 43, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.auth-page .auth-card::after { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 154, 164, .8), transparent); pointer-events: none; }
@keyframes authCardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

.auth-page .auth-logo { filter: drop-shadow(0 10px 28px rgba(255, 77, 94, .35)) drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.auth-page .brand-name { background: linear-gradient(95deg, #fff 0%, #ffd5d9 40%, #ff7a87 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-page .view h2 { letter-spacing: -.01em; }
.auth-page .view .sub { color: #a99ea3; }
.auth-page a { color: #ff8a95; }
.auth-page a:hover { color: #ffb3ba; }
.auth-page .auth-footer { color: #7d7378; }
/* Sprachumschalter (DE / EN) */
.auth-lang { display: flex; justify-content: center; align-items: center; gap: 6px; margin-bottom: 8px; }
.auth-lang button { background: none; border: 1px solid transparent; color: inherit; font: inherit; font-size: .8rem; padding: 6px 10px; min-height: 32px; border-radius: 999px; cursor: pointer; }
.auth-lang button:hover { color: #ffb3ba; }
.auth-lang button[aria-pressed="true"] { color: #fff; border-color: rgba(255, 77, 94, .45); background: rgba(255, 77, 94, .12); }
.auth-lang button:focus-visible { outline: 2px solid #ff8a95; outline-offset: 2px; }

/* Tabs */
.auth-page .tabs { background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .05); }
.auth-page .tab.active { background: linear-gradient(180deg, rgba(255, 77, 94, .18), rgba(255, 77, 94, .08)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 77, 94, .28); }

/* Eingabefelder */
.auth-page .input { background: rgba(6, 4, 7, .55); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.auth-page .input:hover { border-color: rgba(255, 255, 255, .14); }
.auth-page .input:focus { border-color: rgba(255, 90, 106, .75); background: rgba(10, 6, 9, .7); box-shadow: 0 0 0 4px rgba(255, 77, 94, .14); outline: none; }
.auth-page .field label { color: #b3a7ac; }
.auth-page .check input, .auth-page .terms-check input { accent-color: #ff4d5e; }

/* Buttons */
.auth-page .btn:not(.google-btn):not(.secondary):not(.ghost) {
  background: linear-gradient(135deg, #ff5a6a 0%, #e0263f 55%, #a8122a 100%); color: #fff;
  box-shadow: 0 10px 28px -10px rgba(255, 60, 80, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
  position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
.auth-page .btn:not(.google-btn):not(.secondary):not(.ghost)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); transition: left .6s ease; pointer-events: none;
}
.auth-page .btn:not(.google-btn):not(.secondary):not(.ghost):hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 16px 36px -12px rgba(255, 60, 80, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.auth-page .btn:not(.google-btn):not(.secondary):not(.ghost):hover::after { left: 120%; }
.auth-page .btn:not(.google-btn):not(.secondary):not(.ghost):active { transform: translateY(0) scale(.99); }
.auth-page .btn.secondary { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.auth-page .google-btn { transition: transform .18s ease, box-shadow .25s ease; }
.auth-page .google-btn:hover { transform: translateY(-1px); }
.auth-page .or::before, .auth-page .or::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent); }

/* Übergänge zwischen Anmelden / Registrieren / Passwort vergessen */
.auth-page .view:not(.hidden) { animation: authViewIn .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes authViewIn { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* Mobil/Tablet: weniger Effekte, volle Lesbarkeit */
@media (max-width: 760px) {
  .auth-page .blob { filter: blur(70px); }
  .auth-page .b3, .auth-page .b4, .auth-particles.p2 { display: none; }
  .auth-beam { width: 600px; height: 600px; margin-left: -300px; }
  .auth-grid { background-size: 40px 40px; }
}
@media (max-width: 480px) {
  .auth-page .auth-wrap { padding: 20px 12px; }
  .auth-page .auth-card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-page .blob, .auth-particles, .auth-beam, .auth-page .auth-card, .auth-page .view:not(.hidden) { animation: none !important; }
  .auth-page .btn::after { display: none; }
}
.auth-page a.btn { color: #fff; }
.auth-page a.google-btn, .auth-page a.google-btn:hover { color: #1f1f1f; }

/* =====================================================================================================
   7.7 – ARGB-Effekte (Login, Registrierung, Rechtstexte)
   Fließender Farbumlauf in der Elvuro-Palette (Rot → Pink → Violett → Indigo → Orange → Rot), langsam und dezent.
   Technik: Farbwinkel über @property (--argb-a), große Flächen nur per transform (GPU). Keine Blitze, kein Flackern.
   „Bewegung reduzieren“: alles steht still (statische Verläufe bleiben). Browser ohne @property: statische Verläufe.
   ===================================================================================================== */
@property --argb-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes argbSpin { to { --argb-a: 360deg; } }
@keyframes argbRotate { to { transform: rotate(360deg); } }
@keyframes argbFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes argbText { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

/* sanftes Farb-Polarlicht hinter allem (ein Element, nur Rotation) */
.argb-aurora {
  position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; pointer-events: none;
  /* weiche Farbflecken ohne filter:blur – die Verläufe sind von sich aus weich, so bleibt es eine reine GPU-Drehung */
  background:
    radial-gradient(closest-side at 30% 28%, rgba(255, 61, 139, .12), rgba(255, 61, 139, 0)),
    radial-gradient(closest-side at 72% 34%, rgba(168, 85, 247, .10), rgba(168, 85, 247, 0)),
    radial-gradient(closest-side at 66% 74%, rgba(99, 102, 241, .08), rgba(99, 102, 241, 0)),
    radial-gradient(closest-side at 28% 70%, rgba(255, 122, 69, .08), rgba(255, 122, 69, 0));
  will-change: transform; animation: argbRotate 80s linear infinite;
}

/* Karte: umlaufender ARGB-Rand + weiches Leuchten außen */
.auth-page .auth-card::before {
  padding: 1.5px;
  background: conic-gradient(from var(--argb-a), rgba(255, 77, 94, .9), rgba(255, 61, 139, .75), rgba(168, 85, 247, .65), rgba(99, 102, 241, .55), rgba(255, 122, 69, .65), rgba(255, 77, 94, .9));
  animation: argbSpin 12s linear infinite;
}
.argb-halo { position: absolute; inset: -2px; border-radius: inherit; z-index: -2; pointer-events: none; filter: blur(16px); opacity: .38; }
/* Leuchten bewusst statisch (einmal gerastert): der Farbumlauf passiert im Rand, nicht im weichgezeichneten Schein */
.argb-halo::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 4px;
  background: linear-gradient(160deg, #ff4d5e, #ff3d8b 30%, #a855f7 55%, #6366f1 75%, #ff7a45);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Markenname: langsam fließender Verlauf */
.auth-page .brand-name {
  background: linear-gradient(90deg, #fff 0%, #ffd5d9 18%, #ff7a87 36%, #ff6fb5 52%, #c48bff 68%, #ffd5d9 84%, #fff 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: argbText 14s linear infinite;
}

/* Eingabefelder: animierter ARGB-Rahmen beim Fokus, dezenter Rahmen beim Überfahren */
.auth-page .input:hover:not(:focus) { border-color: rgba(255, 138, 149, .22); }
.auth-page .input:focus, .auth-page .input:focus-visible {
  border-color: transparent; outline: none;
  background: linear-gradient(rgba(12, 8, 11, .96), rgba(12, 8, 11, .96)) padding-box,
              conic-gradient(from var(--argb-a), #ff4d5e, #ff3d8b, #a855f7, #6366f1, #ff7a45, #ff4d5e) border-box;
  box-shadow: 0 0 0 4px rgba(255, 77, 94, .10), 0 0 24px -8px rgba(255, 61, 139, .55);
  animation: argbSpin 6s linear infinite;
}

/* Buttons: fließender Verlauf, eleganter Hover (Glanz + Anheben), sanfter Klick */
.auth-page .btn:not(.google-btn):not(.secondary):not(.ghost) {
  background: linear-gradient(115deg, #ff5a6a 0%, #e0263f 22%, #d6246e 45%, #9b3cf0 70%, #e0263f 88%, #ff5a6a 100%);
  background-size: 260% 100%; background-position: 0% 50%; transition: background-position .9s ease, box-shadow .25s ease, transform .18s ease, filter .18s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
/* Farbfluss nur bei Hover/Fokus (kein Dauer-Neuzeichnen im Ruhezustand) */
.auth-page .btn:not(.google-btn):not(.secondary):not(.ghost):not(:disabled):hover,
.auth-page .btn:not(.google-btn):not(.secondary):not(.ghost):not(:disabled):focus-visible { animation: argbFlow 4s ease-in-out infinite alternate; }
.auth-page .btn:not(.google-btn):not(.secondary):not(.ghost):hover { box-shadow: 0 16px 38px -12px rgba(255, 61, 139, .7), 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .25); }
.auth-page .btn:not(.google-btn):not(.secondary):not(.ghost):active { transform: translateY(0) scale(.985); filter: brightness(.96); transition-duration: .08s; }
.auth-page .btn:focus-visible { outline: 2px solid #ff9aa4; outline-offset: 3px; }
.auth-page .btn:disabled, .auth-page .btn[disabled] {
  cursor: not-allowed; opacity: .55; filter: grayscale(.55) brightness(.85); transform: none !important; box-shadow: none !important; animation-play-state: paused;
}
.auth-page .btn:disabled::after { display: none; }
.auth-page .btn.secondary { transition: background .2s ease, border-color .2s ease, transform .18s ease; }
.auth-page .btn.secondary:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 138, 149, .28); transform: translateY(-1px); }
.auth-page .tab { transition: background .25s ease, color .25s ease, box-shadow .25s ease; }

/* Pflicht-Bestätigungen */
.consent-box { border: 0; margin: 6px 0 10px; padding: 0; display: grid; gap: 8px; min-width: 0; }
.consent-legend { padding: 0; margin: 0 0 2px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a99ea3; }
.consent-check {
  margin: 0; padding: 10px 12px; line-height: 1.45; border-radius: 12px; align-items: flex-start;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .07); color: #d9cfd3;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.consent-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #ff4d5e; cursor: pointer; }
.consent-check:hover { border-color: rgba(255, 138, 149, .25); }
.consent-check:focus-within { border-color: rgba(255, 138, 149, .5); box-shadow: 0 0 0 3px rgba(255, 77, 94, .12); }
.consent-check.is-checked {
  border-color: transparent;
  background: linear-gradient(rgba(22, 12, 18, .92), rgba(22, 12, 18, .92)) padding-box, linear-gradient(120deg, rgba(255, 77, 94, .7), rgba(255, 61, 139, .55), rgba(168, 85, 247, .5)) border-box;
}
.consent-check.invalid { border-color: rgba(255, 77, 109, .75); background: rgba(255, 77, 109, .08); }
.consent-check a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.doc-version { color: #8f8489; font-size: .8em; white-space: nowrap; }
.consent-info { margin: 2px 2px 0; font-size: .78rem; line-height: 1.5; color: #a1969b; }
.consent-hint { margin: 8px 0 0; text-align: center; font-size: .8rem; color: #b3a7ac; }
.consent-hint[hidden] { display: none; }

/* Fußzeile: Login „Made by xNIceGuess and AntonA77A“ + „Copyright © 2026 Elvuro“, Rechtsseite „Entwickelt von …“ – dezent, gut lesbar */
.site-footer { margin-top: 22px; max-width: 560px; text-align: center; display: grid; gap: 6px; font-size: .78rem; line-height: 1.5; color: #8a7f84; }
.site-footer p { margin: 0; }
.site-footer .credit { font-size: .82rem; color: #a99ea3; letter-spacing: .01em; }
.site-footer .credit-name {
  font-weight: 650; letter-spacing: .02em;
  background: linear-gradient(90deg, #ffd5d9, #ff8a95, #ff6fb5, #c48bff, #ff8a95, #ffd5d9); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.site-footer .legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 8px; }
.site-footer .copyright { color: #7d7378; }

/* Rechtstexte im Login-Design */
.legal-page .auth-wrap { justify-content: flex-start; align-items: center; }
.legal-page .legal-card { width: min(800px, 100%); }
.legal-page .legal-card h2 { scroll-margin-top: 24px; }
.legal-page .legal-card h3 { color: #f1e6ea; }
.legal-page .legal-alias { color: #a99ea3; font-weight: 500; font-size: .8em; }
.legal-page .legal-toc a { font-weight: 600; }

/* Mobil: Leuchten statisch, weniger Unschärfe – Rand und Buttons laufen weiter */
@media (max-width: 760px) {
  .argb-halo { filter: blur(12px); opacity: .32; }
  .argb-aurora { animation-duration: 120s; }
  .consent-check { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .argb-aurora, .argb-halo::before, .auth-page .auth-card::before, .auth-page .brand-name, .site-footer .credit-name,
  .auth-page .input:focus, .auth-page .btn:not(.google-btn):not(.secondary):not(.ghost) { animation: none !important; }
  .auth-page .btn, .consent-check, .auth-page .input { transition: none !important; }
}

/* 7.11: Rechtstexte auf Englisch – Hinweis auf die verbindliche deutsche Fassung */
.legal-binding { border: 1px solid rgba(255, 176, 32, .35); background: rgba(255, 176, 32, .08); border-radius: 12px; padding: 10px 14px; font-size: .9rem; margin: 0 0 14px; }
.legal-binding .link-btn { background: none; border: 0; padding: 0; color: #ffb3ba; font: inherit; cursor: pointer; text-decoration: underline; }
.legal-card[hidden] { display: none !important; }