/* TeamRedox Portal – Gestaltung */
:root{
  --text:#1D1D1F; --muted:#6E6E73; --light:#F5F5F7; --line:#D2D2D7;
  --dark:#1A1D24; --dark-2:#262A33; --dark-text:#F5F5F7; --dark-muted:#A1A1A6;
  --blue:#2266D6; --blue-dark:#6FA6FF; --mark:#4C8DFF;
  --gruen:#1E7B34; --rot:#C4291C; --gelb:#8A5A00;
}
*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--light)}
body{
  background:#fff; color:var(--text); min-height:100vh; display:flex; flex-direction:column;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.47; letter-spacing:-0.01em;
}
main{flex:1 0 auto}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:"SF Mono", ui-monospace, Menlo, Consolas, monospace; background:var(--light); padding:2px 6px; border-radius:6px; font-size:.95em}
.grau{color:var(--muted)}
.klein{font-size:13px; color:var(--muted)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- Navigation ---------- */
.nav{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.08)}
.nav .in{max-width:1000px; height:52px; margin:0 auto; padding:0 22px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:8px; color:var(--text); font-weight:600; font-size:17px}
.brand:hover{text-decoration:none}
.brand .logo{width:26px; height:26px}
.nav ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:24px}
.nav ul a, .linkknopf{color:var(--text); opacity:.8; font-size:13px}
.nav ul a:hover, .linkknopf:hover{opacity:1; text-decoration:none}
.nav form{margin:0}
.linkknopf{background:none; border:0; padding:0; font:inherit; font-size:13px; cursor:pointer}

/* ---------- Startseite ---------- */
.hero{text-align:center; padding:84px 22px 64px}
.hero .logo{width:84px; height:84px; margin-bottom:18px}
.hero h1{font-size:clamp(44px,7vw,80px); line-height:1.05; letter-spacing:-0.035em; font-weight:700; margin:0}
.hero .sub{font-size:clamp(20px,2.5vw,26px); line-height:1.3; font-weight:500; margin:14px auto 0; max-width:640px}
.hero .meldung{max-width:420px; margin:22px auto 0}
.leer{text-align:center; color:var(--muted); font-size:19px; padding:0 22px 96px}

.tiles{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 12px 12px}
.tiles.eins{grid-template-columns:minmax(0,820px); justify-content:center}
.tiles.eins .tile, .tile.dark:only-child{min-height:0; padding-bottom:56px}
.tile{border-radius:22px; text-align:center; padding:56px 32px 0; min-height:560px; display:flex; flex-direction:column; align-items:center; overflow:hidden; position:relative}
.tile.light{background:var(--light)}
.tile.dark{background:var(--dark); color:var(--dark-text); padding-bottom:40px}
.tile .eyebrow{font-size:14px; font-weight:600; letter-spacing:.02em; margin:0 0 6px; color:var(--muted)}
.tile.dark .eyebrow{color:var(--dark-muted)}
.tile h2{font-size:clamp(34px,4vw,48px); line-height:1.08; letter-spacing:-0.03em; margin:0}
.tile p.txt{font-size:19px; line-height:1.4; margin:10px auto 0; max-width:420px}
.tile .links{display:flex; justify-content:center; gap:24px; margin-top:18px; font-size:17px}
.tile.dark a{color:var(--blue-dark)}
.tile .art{margin-top:auto; padding-top:36px; width:100%; display:flex; justify-content:center}
.tile .art svg{width:min(320px,80%); height:auto; display:block}
.bald{color:var(--muted); font-size:15px}
/* Ganze Kachel bzw. ganze Agenten-Zeile ist anklickbar */
.tile .links a::after{content:""; position:absolute; inset:0; border-radius:inherit; z-index:1}
.tile:has(.links a){cursor:pointer; transition:transform .2s}
.tile:has(.links a):hover{transform:translateY(-3px)}
.agenten li{position:relative}
.agent-link a::after{content:""; position:absolute; inset:0; border-radius:14px; z-index:2}
.agenten li:has(.agent-link a):hover{background:#2E333E}
.tile.dark .bald{color:var(--dark-muted)}

/* Agenten-Liste */
.agenten{list-style:none; margin:32px 0 0; padding:0; width:100%; max-width:460px; display:flex; flex-direction:column; gap:10px; text-align:left}
.agenten li{display:flex; align-items:center; gap:14px; background:var(--dark-2); border-radius:14px; padding:14px 16px}
.agent-icon{flex:0 0 40px; height:40px; border-radius:11px; background:linear-gradient(140deg,#4C8DFF,#2B5FD0); color:#fff; display:grid; place-items:center; font-weight:700; font-size:18px}
.agent-text{flex:1; min-width:0; display:flex; flex-direction:column}
.agent-text b{font-size:17px}
.agent-text small{color:var(--dark-muted); font-size:14px; line-height:1.35}
.agent-link{font-size:15px; white-space:nowrap}

/* Kerze flackert leicht */
.kerze .flamme{transform-origin:160px 72px; animation:flackern 2.6s ease-in-out infinite}
.kerze .schein{transform-origin:160px 60px; animation:glimmen 2.6s ease-in-out infinite}
@keyframes flackern{0%,100%{transform:scale(1,1) rotate(0)}25%{transform:scale(.96,1.05) rotate(-2deg)}50%{transform:scale(1.03,.97) rotate(1.5deg)}75%{transform:scale(.98,1.03) rotate(-1deg)}}
@keyframes glimmen{0%,100%{opacity:.16; transform:scale(1)}50%{opacity:.26; transform:scale(1.08)}}

/* ---------- Anmeldung ---------- */
.login{display:flex; justify-content:center; padding:72px 16px 96px}
.login-karte{width:100%; max-width:400px; text-align:center}
.login-karte.breit{max-width:480px}
.login-karte .logo{width:64px; height:64px; margin-bottom:10px}
.login-karte h1{font-size:40px; letter-spacing:-0.03em; margin:0}
.login-karte .sub{color:var(--muted); font-size:17px; margin:8px 0 24px}
.schritte{text-align:left; padding-left:22px; margin:0 0 12px; font-size:16px}
.schritte li{margin-bottom:6px}
.qr{width:220px; height:220px; margin:8px auto 12px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff}
.qr svg{width:100%; height:100%; display:block}
.manuell{text-align:left; font-size:14px; margin:0 0 20px; color:var(--muted)}
.manuell summary{cursor:pointer; color:var(--blue)}
.schluessel{word-spacing:4px; font-size:15px}

/* ---------- Formulare ---------- */
.formular{display:flex; flex-direction:column; text-align:left; gap:6px}
.formular label{font-size:14px; font-weight:500; margin-top:10px}
.formular input:not([type=checkbox]), .formular select{
  font:inherit; font-size:17px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--text); width:100%
}
.formular input:focus, .formular select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(34,102,214,.18)}
.code-feld{text-align:center; letter-spacing:.4em; font-size:24px !important; font-variant-numeric:tabular-nums}
.knopf{font:inherit; font-size:17px; font-weight:500; margin-top:18px; padding:12px 22px; border-radius:980px; border:0; background:var(--blue); color:#fff; cursor:pointer; min-height:44px}
.knopf:hover{background:#1B57BC}
.knopf.zweit{background:var(--light); color:var(--text); margin-top:0}
.knopf.zweit:hover{background:#E8E8ED}
.knopf.gefahr{background:var(--rot); margin-top:0}
.knopf.gefahr:hover{background:#A32116}
.zweispaltig{display:grid; grid-template-columns:1fr 1fr; gap:4px 18px}
.zweispaltig .ganz{grid-column:1 / -1}
.zweispaltig .knopf{margin-top:14px}
.haken{border:0; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:8px}
.haken legend{font-size:14px; font-weight:500; margin-bottom:8px; padding:0}
.haken label, .haken-einzeln label{font-weight:400; font-size:16px; margin:0; display:flex; align-items:center; gap:10px}
.haken input, .haken-einzeln input{width:18px; height:18px}
.haken-einzeln{display:flex; align-items:flex-end; padding-bottom:10px}
.meldung{padding:12px 16px; border-radius:12px; font-size:15px; text-align:left}
.meldung.ok{background:#E8F5EC; color:var(--gruen)}
.meldung.fehler{background:#FDECEA; color:var(--rot)}

/* ---------- Verwaltung ---------- */
.inhalt{max-width:1000px; width:100%; margin:0 auto; padding:48px 22px 80px}
.inhalt.schmal{max-width:620px}
.seitentitel{font-size:40px; letter-spacing:-0.03em; margin:0 0 20px}
.tabs{display:flex; gap:6px; background:var(--light); padding:4px; border-radius:12px; width:max-content; max-width:100%; margin-bottom:22px}
.tabs a{padding:8px 16px; border-radius:9px; color:var(--text); font-size:15px}
.tabs a:hover{text-decoration:none; background:#E8E8ED}
.tabs a[aria-current]{background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); font-weight:600}
.box{background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; margin-bottom:16px}
.box h2{font-size:22px; margin:0 0 10px}
.hinweisbox{background:#EEF4FE; border-color:#C7DAFA}
.aktionen{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.aktionen form{margin:0}
.loeschen{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px}
.loeschen label{font-size:14px; display:flex; gap:8px; align-items:center}
.status{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:14px; margin:0 0 10px}
.pille{display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:980px; background:var(--light); color:var(--text)}
.pille.gruen{background:#E8F5EC; color:var(--gruen)}
.pille.rot{background:#FDECEA; color:var(--rot)}
.pille.gelb{background:#FFF4DB; color:var(--gelb)}
.liste{display:grid; grid-template-columns:max-content 1fr; gap:8px 20px; margin:0 0 16px}
.liste dt{color:var(--muted)} .liste dd{margin:0}
.tabelle{width:100%; border-collapse:collapse; font-size:15px}
.tabelle th{text-align:left; font-size:13px; color:var(--muted); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--line)}
.tabelle td{padding:12px 10px; border-bottom:1px solid #EDEDF0; vertical-align:top}
.tabelle tr:last-child td{border-bottom:0}
.umbruch{word-break:break-all}
.box:has(.tabelle){overflow-x:auto}

/* ---------- Fuß ---------- */
footer{background:var(--light); color:var(--muted); font-size:12px; margin-top:12px}
footer .in{max-width:1000px; margin:0 auto; padding:22px 22px 32px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px}
footer a{color:var(--text); opacity:.8}

/* ---------- Weihnachten ---------- */
#schnee{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:30}
.lichterkette{position:absolute; left:0; right:0; top:100%; height:26px; pointer-events:none; overflow:hidden}
.lichterkette svg{width:100%; height:26px; display:block}
.lichterkette .birne{animation:funkeln 2.4s ease-in-out infinite}
@keyframes funkeln{0%,100%{opacity:1}50%{opacity:.35}}
.weihnacht .logo-punkt{transform-box:fill-box; transform-origin:center; animation:stern 3s ease-in-out infinite}
@keyframes stern{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.weihnacht .hero .logo-punkt{filter:drop-shadow(0 0 4px rgba(76,141,255,.8))}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}
@media (max-width:760px){
  .tiles{grid-template-columns:1fr}
  .tile{min-height:500px; padding-top:44px}
  .hero{padding:60px 22px 48px}
  .nav ul{gap:16px}
}
@media (max-width:440px){
  .brand{font-size:0; gap:0}
  .brand .logo{width:28px; height:28px}
  .zweispaltig{grid-template-columns:1fr}
  .tabelle{font-size:14px}
}