/* Gemeinsames Erscheinungsbild der Anmeldestrecke: Login, Kanalauswahl und Zugriffshinweis. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--cyan:#65f5ff;--purple:#b279ff;--muted:#bbb9cc;--danger:#ff5f7d}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-height:100%;background:#101018}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:1fr auto;place-items:center;padding:32px 20px;font-family:Inter,"Segoe UI",Arial,sans-serif;color:#f7f5ff;background:#101018 ;line-height:1.6}

.card{position:relative;isolation:isolate;width:100%;max-width:500px;padding:44px 38px 36px;text-align:center;border:1px solid transparent;border-radius:28px;background:rgba(17,17,23,.78);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 24px 80px #0008;animation:arrive .6s ease-out}
.card:before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(101,245,255,.8),rgba(101,245,255,.08) 42%,rgba(178,121,255,.78));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.card.danger:before{background:linear-gradient(135deg,rgba(255,95,125,.85),rgba(255,95,125,.1) 45%,rgba(178,121,255,.6))}

/* Das Logo ist ein breites Bild; der quadratische Ausschnitt zeigt genau das Wappen. */
.logo{display:block;width:104px;height:104px;margin:0 auto 22px;border-radius:26px;object-fit:cover;object-position:center;border:1px solid #8beaff44;background:#0c0c12;box-shadow:0 0 38px #65f5ff14,0 10px 30px #0006}

.eyebrow{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
h1{margin:0;font-size:clamp(23px,4.6vw,31px);line-height:1.24;letter-spacing:-.04em;font-weight:700}
.description{margin:14px auto 28px;max-width:38ch;color:var(--muted);font-size:14px}
.note{margin:22px 0 0;font-size:11.5px;color:#a9a5bb}

.button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:15px 20px;border:1px solid #c6a6ff60;border-radius:14px;background:linear-gradient(115deg,#8546e6,#6448cf);color:#fff;font:inherit;font-size:14.5px;font-weight:600;text-decoration:none;transition:transform .22s,box-shadow .22s,filter .22s}
.button:hover{transform:translateY(-2px);filter:brightness(1.14);box-shadow:0 0 30px #a663ff70,0 0 48px #65f5ff22}
.button.quiet{background:#ffffff07;border-color:#ffffff1f;color:#dcd8ea}
.button.quiet:hover{background:#ffffff0d;box-shadow:none;filter:none}
.button svg{flex:none;width:22px;height:22px}
a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}

/* Merkmalzeile unter dem Anmeldeknopf. */
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.pills li{padding:6px 12px;border-radius:99px;border:1px solid #ffffff14;background:#ffffff05;font-size:11px;color:#c0bcd0;letter-spacing:.02em}

/* Kanalauswahl */
.channels{display:grid;gap:12px;margin:26px 0 0;padding:0;list-style:none;text-align:left}
.channel{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1px solid #ffffff16;border-radius:16px;background:#ffffff05;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .22s,border-color .22s,transform .22s,box-shadow .22s}
.channel:hover{background:#65f5ff0d;border-color:#65f5ff80;transform:translateY(-2px);box-shadow:0 10px 28px #0004}
.channel:disabled{opacity:.55;cursor:wait;transform:none}
.channel-avatar{flex:none;width:50px;height:50px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#65f5ff22,#b279ff30);border:1px solid #ffffff1f}
.channel-text{flex:1;min-width:0}
.channel-name{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.channel-login{display:block;font-size:11.5px;color:#a9a5bb;overflow-wrap:anywhere}
.role{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.role:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.role.owner{color:#d9b4ff;border:1px solid #b279ff4d;background:#b279ff14}
.role.moderator{color:#8ef0ff;border:1px solid #65f5ff40;background:#65f5ff12}
.arrow{flex:none;color:var(--cyan);font-size:20px;line-height:1}

/* Roter Hinweis: keine Berechtigung */
.alert{display:grid;justify-items:center;gap:12px;margin:24px 0 0;padding:26px 22px;text-align:center;border-radius:20px;border:1px solid #ff5f7d55;background:linear-gradient(155deg,#ff2f5526,#ff2f5509);box-shadow:0 0 46px #ff2f5514}
.alert-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;border:1px solid #ff5f7d5c;background:#ff2f5518;color:#ff96ac}
.alert-icon svg{width:28px;height:28px}
.alert h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em;color:#ffb3c4}
.alert p{margin:0;font-size:13px;color:#efc3ce;max-width:40ch}
.alert code{padding:1px 7px;border-radius:6px;background:#ffffff0f;font-family:inherit;font-weight:600;color:#fff}

.actions{display:grid;gap:10px;margin-top:26px}
.back{color:var(--muted);font-size:12.5px;text-decoration:none;text-underline-offset:5px}
.back:hover{color:#fff;text-decoration:underline}

@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){body{padding:24px 16px}.card{padding:32px 22px 28px;border-radius:22px}.logo{width:88px;height:88px}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}

/* Fußzeile der Anmeldestrecke – dieselbe Zeile wie auf der übrigen Webseite. */
.site-footer{display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;width:100%;max-width:500px;margin:26px auto 0;padding-top:18px;border-top:1px solid #ffffff12;font-size:12.5px;color:#a49cb8;text-align:center}
.footer-copy{margin:0}
.footer-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.footer-links a{color:#c7c0d6;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s}
.footer-links a:hover{color:var(--cyan);border-color:#65f5ff55}
.footer-soon{color:#8a83a0}

.note.login-error{color:#ffb3c4;border:1px solid #ff5f7d55;background:#ff2f550d;border-radius:12px;padding:14px;font-size:13px}