/* Login-Seiten und Passwort-festlegen-Seiten (Admin + Arbeitszimmer) – neues Design: Variante "Mit Foto" mit Abendlicht-Verlauf */
:root { --ink: #17181c; --paper: #f6f4ec; --lav: #ffe3da; --violet: #ff5e3b; --muted: #666a75; --orange: #ff5e3b; --r-xl: 40px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lg-body { margin: 0; min-height: 100vh; font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
.lg-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(900px 520px at 10% 6%, rgba(255,94,59,.16), transparent 60%), radial-gradient(800px 520px at 92% 96%, rgba(254,219,63,.32), transparent 60%), var(--paper); }
.lg-card { width: min(920px, 100%); display: grid; grid-template-columns: .9fr 1.1fr; background: #fff; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 40px 100px rgba(23,24,28,.16); animation: lgIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lgIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.lg-ph { position: relative; min-height: 560px; color: #fff; background-color: #e8431f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 .6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(70% 70% at 50% 50%, #ff5e3b, rgba(255,94,59,0)), radial-gradient(60% 60% at 40% 90%, #fedb3f, rgba(254,219,63,0)), radial-gradient(60% 50% at 50% 0%, #2a3f9e, rgba(42,63,158,0)); background-blend-mode: overlay, normal, normal, normal; background-size: 240px 240px, 100% 100%, 100% 100%, 100% 100%; }
.lg-main { padding: 52px 44px 38px; display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0; }
.lg-logo { display: inline-block; align-self: flex-start; margin-bottom: 26px; }
.lg-logo img { height: 34px; width: auto; display: block; }
.lg-main h1 { margin: 0; font-size: 2.1rem; line-height: 1; letter-spacing: -0.04em; font-weight: 600; }
.lg-sub { margin: 10px 0 22px; color: var(--muted); }
.lg-err { display: flex; align-items: center; gap: 10px; background: #fdeaea; color: #b42318; border-radius: 14px; padding: 12px 14px; font-weight: 500; font-size: .92rem; margin-bottom: 16px; animation: lgShake .4s; }
.lg-err svg { flex: none; }
@keyframes lgShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.lg-form { display: flex; flex-direction: column; gap: 16px; }
.lg-form .aform-group { display: flex; flex-direction: column; gap: 6px; margin: 0; position: relative; }
.lg-form label { font-weight: 600; font-size: .86rem; }
.lg-fw { position: relative; display: flex; align-items: center; background: var(--paper); border-radius: 16px; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background .2s; }
.lg-fw:hover { box-shadow: inset 0 0 0 1.5px rgba(23,24,28,.18); }
.lg-fw:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--violet); }
.lg-fw input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .98rem; color: inherit; padding: 15px 16px 15px 8px; outline: none; border-radius: 16px; }
.lg-fw input::placeholder { color: #9a9ca6; }
.lg-fi { padding-left: 16px; color: var(--muted); display: grid; place-items: center; }
.lg-eye { border: 0; background: none; cursor: pointer; padding: 0 16px; height: 100%; display: grid; place-items: center; color: var(--muted); transition: color .2s; }
.lg-eye:hover, .lg-eye.on { color: var(--ink); }
.lg-eye:focus-visible { outline: 2px solid var(--violet); outline-offset: -4px; border-radius: 16px; }
.lg-go { margin-top: 4px; width: 100%; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font: inherit; font-weight: 600; font-size: 1rem; padding: 16px 24px; cursor: pointer; transition: background .2s, transform .2s; }
.lg-go:hover { background: var(--violet); transform: translateY(-1px); }
.lg-go:focus-visible { outline: 3px solid rgba(255,94,59,.4); outline-offset: 2px; }
.lg-back { margin-top: 20px; align-self: center; font-weight: 600; font-size: .9rem; color: var(--muted); text-decoration: none; }
.lg-back:hover { color: var(--violet); }
/* Pflichtfeld-Hinweis (uikit.js) */
.lg-fw:has(input.jf-bad), .lg-fw.jf-bad { box-shadow: inset 0 0 0 2px #e5483b; background: #fff; }
.jf-err { display: block; margin-top: 2px; padding-left: 4px; font-size: .8rem; font-weight: 600; color: #c2380f; }
.jf-tip { position: fixed; z-index: 10001; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 600; padding: 7px 12px; border-radius: 99px; pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.jf-tip.on { opacity: 1; }
@media (max-width: 760px) {
  .lg-card { grid-template-columns: 1fr; }
  .lg-ph { display: none; }
  .lg-main { padding: 28px 24px 24px; }
  .lg-main h1 { font-size: 1.8rem; }
}

/* ===== Passwort festlegen (erste Anmeldung / neues Passwort) ===== */
.lg-view { display: none; flex-direction: column; }
.lg-card[data-state] .lg-view[data-v="form"] { display: flex; animation: lgV .3s cubic-bezier(.2,.8,.2,1); }
.lg-card[data-state="done"] .lg-view[data-v="form"] { display: none; }
.lg-card[data-state="done"] .lg-view[data-v="done"] { display: flex; }
@keyframes lgV { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lg-main h1 { margin: 0; }
.lg-main .lg-sub { margin: 6px 0 20px; }
.lg-err[hidden] { display: none; }
.lg-chip { display: flex; align-items: center; gap: 12px; background: var(--paper); border-radius: 16px; padding: 11px 16px 11px 12px; margin-bottom: 18px; min-width: 0; }
.lg-chip-i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--lav); color: #e8431f; display: grid; place-items: center; }
.lg-chip small { display: block; font-size: .76rem; color: var(--muted); font-weight: 500; }
.lg-chip b { display: block; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.lg-meter { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: 5px; margin-top: 4px; }
.lg-meter i { display: block; height: 5px; border-radius: 99px; background: rgba(23,24,28,.1); transition: background .25s; }
.lg-meter span { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); font-weight: 500; margin-top: 3px; }
.lg-meter[data-lvl="1"] i:nth-child(-n+1) { background: #e5483b; }
.lg-meter[data-lvl="2"] i:nth-child(-n+2) { background: #ff5e3b; }
.lg-meter[data-lvl="3"] i:nth-child(-n+3) { background: #fedb3f; }
.lg-meter[data-lvl="4"] i:nth-child(-n+4) { background: #22c55e; }
.lg-meter[data-lvl="3"] span, .lg-meter[data-lvl="4"] span { color: var(--ink); }
.lg-match { font-size: .8rem; font-weight: 600; margin-top: 2px; }
.lg-match[hidden] { display: none; }
.lg-match.ok { color: #15803d; } .lg-match.no { color: #b42318; }
.lg-fw.has-i input { padding-left: 8px; }
.lg-go { display: flex; align-items: center; justify-content: center; }
.lg-btn { text-decoration: none; text-align: center; margin-top: 18px; }
.lg-sp { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: lgSpin .7s linear infinite; margin-left: 10px; }
.lg-card[data-state="loading"] .lg-sp { display: inline-block; }
.lg-card[data-state="loading"] .lg-go { pointer-events: none; opacity: .9; }
@keyframes lgSpin { to { transform: rotate(360deg); } }
.lg-badge { width: 64px; height: 64px; border-radius: 50%; background: var(--lav); color: #e8431f; display: grid; place-items: center; margin-bottom: 18px; }
.lg-badge svg { width: 28px; height: 28px; }
.lg-done { align-items: flex-start; padding: 40px 0; }
.lg-okc { width: 76px; height: 76px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; margin-bottom: 18px; animation: lgPop .5s cubic-bezier(.2,1.4,.4,1); }
.lg-okc svg { width: 34px; height: 34px; stroke-width: 2.4; }
@keyframes lgPop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }