/* Konto-Oberfläche Unterkunftsheld — Design B3 „Dark & Sophisticated“ (freigegeben 05.11.2026, Vorlage konto/redesign/b3.html).
   Gilt für Anmelden, E-Mail-Code, Einladung, Passkey einrichten, Zugang, Meine Passkeys. Markenwerte: marke/QUELLE.md */
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url(marke/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url(marke/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url(marke/poppins-600.woff2) format("woff2")}

:root{
  --grund:#080C15; --navy:#0D1522; --navy-2:#141D2E; --blau:#3A56E6; --blau-2:#4D67EC; --hellblau:#B1C3FF;
  --text:#EEF1F7; --text-2:#A3ACBD; --text-3:#8790A4; --linie:rgba(255,255,255,.08); --linie-2:rgba(255,255,255,.12);
  --rot:#FDA29B; --rot-flaeche:rgba(240,68,56,.12); --rot-linie:rgba(249,112,102,.35); --rot-voll:#D92D20;
  --gruen:#75E0A7; --gruen-flaeche:rgba(18,183,106,.13); --gelb:#FEC84B; --gelb-flaeche:rgba(247,144,9,.12); --info:#C7D3FF; --info-flaeche:rgba(58,86,230,.16);
  --schrift:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--grund)}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--text);font:400 15px/1.55 var(--schrift);
  background:
    radial-gradient(720px 420px at 50% -6%, rgba(58,86,230,.30), rgba(58,86,230,0) 70%),
    radial-gradient(520px 360px at 85% 110%, rgba(50,74,202,.14), rgba(50,74,202,0) 70%),
    var(--grund);
  position:relative;overflow-x:hidden}
/* feines Raster, zur Mitte hin ausgeblendet */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 20%,transparent 75%)}
body > *{position:relative;z-index:1}
[hidden]{display:none !important}
a{color:inherit}
:focus-visible{outline:none}
.knopf:focus-visible,a:focus-visible,input:focus-visible,.konto-knopf:focus-visible,.konto-menue button:focus-visible{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--hellblau)}

/* ---------- Seitenrahmen Anmelden / Einladung / Zugang ---------- */
.buehne{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 20px 40px}
.buehne .marke{display:flex;justify-content:center;margin:0 0 32px;animation:ein .6s cubic-bezier(.2,.7,.2,1) both}
.buehne .marke img{height:39px;width:auto;display:block}
.karte{width:100%;max-width:400px;padding:40px 36px 36px;border-radius:16px;text-align:center;
  background:linear-gradient(180deg,rgba(20,29,46,.92),rgba(13,21,34,.92));border:1px solid var(--linie);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.4),0 24px 64px -12px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:ein .6s .05s cubic-bezier(.2,.7,.2,1) both}
.fusszeile{display:flex;justify-content:center;align-items:center;gap:8px 14px;padding:0 24px 16px;font-size:12.5px;color:var(--text-3)}
.fusszeile nav{display:flex;gap:8px}
.fusszeile a{display:inline-block;padding:13px 6px;text-decoration:none;border-radius:4px} .fusszeile a:hover{color:var(--text)}

h1{margin:0;font-weight:600;font-size:23px;line-height:1.25;letter-spacing:-.02em;color:var(--text)}
.unterzeile{margin:8px 0 28px;color:var(--text-2);font-size:14.5px}
.zentriert{text-align:center}
.schritt[hidden]{display:none}

/* ---------- Knöpfe ---------- */
.knopf{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:12px 18px;border-radius:10px;
  font:500 15px/1.2 var(--schrift);cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,box-shadow .15s,color .15s,transform .05s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.knopf:active{transform:translateY(1px)}
.knopf .symbol{width:18px;height:18px;flex:none}
.knopf.haupt{color:#fff;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,var(--blau-2),var(--blau));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 20px -6px rgba(58,86,230,.65)}
.knopf.haupt:hover{background:linear-gradient(180deg,#5A73F0,#4460EA)}
.knopf.haupt:focus-visible{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 2px var(--navy),0 0 0 4px var(--hellblau)}
.knopf.neben{color:var(--text);background:rgba(255,255,255,.035);border:1px solid var(--linie-2)}
.knopf.neben:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.knopf.text{min-height:44px;padding:8px;background:none;border:1px solid transparent;color:var(--hellblau);font-size:14px}
.knopf.text:hover{color:#D2DCFF;text-decoration:underline;text-underline-offset:3px}
.knopf.gefahr{color:var(--rot);background:transparent;border:1px solid var(--rot-linie)}
.knopf.gefahr:hover{background:var(--rot-flaeche)}
.knopf.gefahr.sicher{color:#fff;background:var(--rot-voll);border-color:var(--rot-voll)}
.knopf.klein{width:auto;min-height:44px;padding:8px 16px;font-size:14px}
.knopf[disabled]{opacity:.55;cursor:default}
.knopf.text[disabled]{text-decoration:none}
.knopf.laedt{position:relative;color:transparent !important}
.knopf.laedt::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid #fff;border-color:#fff #fff transparent transparent;animation:dreh .7s linear infinite}
.knopf.neben.laedt::after,.knopf.text.laedt::after,.knopf.gefahr.laedt::after{border-color:var(--hellblau) var(--hellblau) transparent transparent}
@keyframes dreh{to{transform:rotate(360deg)}}
.knopfreihe{display:flex;flex-direction:column;gap:10px}
.hinweis-klein{margin:12px 0 0;font-size:12.5px;color:var(--text-3);text-align:center}
.knopfreihe .hinweis-klein{margin:2px 0 0}
.trenner{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--text-3);font-size:12px;letter-spacing:.04em}
.trenner::before,.trenner::after{content:"";flex:1;height:1px;background:var(--linie)}
.link{display:inline-block;font-size:14px;font-weight:500;color:var(--hellblau);text-decoration:none;border-radius:4px;padding:12px 4px}
.link:hover{color:#D2DCFF;text-decoration:underline;text-underline-offset:3px}
.unten{margin:12px 0 -12px}

/* ---------- Felder ---------- */
.feldgruppe{margin-bottom:16px;text-align:left}
label.feld{display:block;font-size:13.5px;font-weight:500;color:var(--text-2);margin:0 0 8px}
input.eingabe{display:block;width:100%;min-height:48px;padding:12px 14px;border-radius:10px;font:400 16px/1.3 var(--schrift);color:var(--text);
  background:rgba(255,255,255,.04);border:1px solid var(--linie-2);transition:border-color .15s,box-shadow .15s,background .15s}
input.eingabe::placeholder{color:var(--text-3)}
input.eingabe:hover{border-color:rgba(255,255,255,.18)}
input.eingabe:focus{border-color:rgba(177,195,255,.6);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(58,86,230,.25)}
input.eingabe[aria-invalid="true"]{border-color:var(--rot-linie);box-shadow:0 0 0 3px var(--rot-flaeche)}
input.code{font-size:26px;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;padding-left:calc(14px + .5em)}
.ziel-email{font-weight:500;color:var(--text);word-break:break-all}

/* ---------- Meldungen ---------- */
.meldung{display:flex;gap:10px;align-items:flex-start;text-align:left;border-radius:10px;padding:12px 14px;margin:0 0 20px;font-size:14px;line-height:1.45;border:1px solid transparent}
.meldung::before{flex:none;font-weight:600;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px}
.meldung.fehler{background:var(--rot-flaeche);color:var(--rot);border-color:rgba(249,112,102,.2)} .meldung.fehler::before{content:"!";background:var(--rot);color:var(--navy)}
.meldung.erfolg{background:var(--gruen-flaeche);color:var(--gruen);border-color:rgba(117,224,167,.2)} .meldung.erfolg::before{content:"✓";background:var(--gruen);color:var(--navy)}
.meldung.info{background:var(--info-flaeche);color:var(--info);border-color:rgba(177,195,255,.18)} .meldung.info::before{content:"i";background:var(--info);color:var(--navy)}
.meldung.warnung{background:var(--gelb-flaeche);color:var(--gelb);border-color:rgba(254,200,75,.2)} .meldung.warnung::before{content:"!";background:var(--gelb);color:var(--navy)}
.meldung:empty{display:none}

.illustration{display:flex;justify-content:center;margin:0 0 20px}
.illustration .kreis{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--hellblau);
  background:radial-gradient(circle at 50% 30%,rgba(77,103,236,.32),rgba(58,86,230,.12));border:1px solid rgba(177,195,255,.18);box-shadow:0 8px 24px -10px rgba(58,86,230,.6)}
.illustration .kreis.gruen{color:var(--gruen);background:radial-gradient(circle at 50% 30%,rgba(18,183,106,.28),rgba(18,183,106,.1));border-color:rgba(117,224,167,.22);box-shadow:0 8px 24px -10px rgba(18,183,106,.5)}
.illustration .kreis.rot{color:var(--rot);background:radial-gradient(circle at 50% 30%,rgba(240,68,56,.26),rgba(240,68,56,.08));border-color:rgba(249,112,102,.22);box-shadow:none}
.illustration svg{width:30px;height:30px}
.lade{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0;color:var(--text-2);font-size:14.5px}
.lade::before{content:"";width:28px;height:28px;border-radius:50%;border:3px solid rgba(177,195,255,.18);border-top-color:var(--hellblau);animation:dreh .8s linear infinite}

/* ---------- Angemeldete Seiten: Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;height:64px;padding:0 24px;
  background:rgba(8,12,21,.72);border-bottom:1px solid var(--linie);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.kopf .marke{display:block;border-radius:4px}
.kopf .marke img{height:28px;display:block}
.kopf .strich{width:1px;height:22px;background:var(--linie-2)}
.kopf .modul{font-size:14px;font-weight:500;color:var(--text-2)}
.kopf .raum{flex:1}
.konto-knopf{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 14px 4px 4px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid var(--linie-2);color:var(--text);font:500 14px/1 var(--schrift);transition:background .15s,border-color .15s}
.konto-knopf:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.initialen{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:12.5px;letter-spacing:.5px;color:#fff;
  background:linear-gradient(180deg,var(--blau-2),var(--blau));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.konto-menue{position:absolute;right:24px;top:60px;width:288px;padding:8px;border-radius:14px;color:var(--text);
  background:linear-gradient(180deg,#141D2E,#0E1524);border:1px solid var(--linie-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 48px -12px rgba(0,0,0,.7)}
.konto-menue .wer{padding:10px 12px 12px;border-bottom:1px solid var(--linie);margin-bottom:6px}
.konto-menue .wer b{display:block;font-weight:500}
.konto-menue .wer span{color:var(--text-3);font-size:13px;word-break:break-all}
.konto-menue a,.konto-menue button{display:flex;width:100%;align-items:center;min-height:44px;padding:8px 12px;border-radius:8px;border:0;background:none;
  font:400 14.5px/1.3 var(--schrift);color:var(--text);text-decoration:none;cursor:pointer;text-align:left}
.konto-menue a:hover,.konto-menue button:hover{background:rgba(255,255,255,.05)}
.konto-menue a[aria-current="page"]{color:var(--hellblau)}

.inhalt{flex:1;width:100%;max-width:680px;margin:0 auto;padding:48px 20px 64px;animation:ein .5s cubic-bezier(.2,.7,.2,1) both}
.inhalt h1{font-size:26px;letter-spacing:-.022em}
.inhalt .unterzeile{margin:8px 0 28px}
.liste{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.geraet{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(20,29,46,.85),rgba(13,21,34,.85));border:1px solid var(--linie);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 32px -18px rgba(0,0,0,.6)}
.geraet .icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--hellblau);
  background:rgba(58,86,230,.16);border:1px solid rgba(177,195,255,.14)}
.geraet .icon svg{width:22px;height:22px}
.geraet .text{flex:1;min-width:0}
.geraet .name{font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.geraet .daten{color:var(--text-3);font-size:13px}
.abzeichen{display:inline-block;font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:999px;color:var(--gruen);background:var(--gruen-flaeche);border:1px solid rgba(117,224,167,.2)}
.leer{padding:22px;border-radius:14px;text-align:center;color:var(--text-2);border:1px dashed var(--linie-2)}
.inhalt > .knopf.haupt{margin-top:8px}
.meldung.banner{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px 14px}
.banner .knopf{width:auto}

@keyframes ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:560px){
  .buehne{justify-content:flex-start;padding:48px 16px 32px}
  .buehne .marke{margin-bottom:28px}
  .buehne .marke img{height:34px}
  .karte{padding:32px 24px 28px;border-radius:14px}
  h1{font-size:22px}
  .knopf{min-height:52px;font-size:16px}
  .knopf.text,.knopf.klein{font-size:15px}
  .fusszeile{flex-direction:column;gap:0}
  .kopf{padding:0 16px}
  .kopf .modul,.kopf .strich{display:none}
  .konto-knopf .name{display:none}
  .konto-knopf{padding:4px}
  .konto-menue{right:16px;left:16px;width:auto}
  .inhalt{padding:32px 16px 48px}
  .inhalt h1{font-size:24px}
  .geraet{flex-wrap:wrap}
  .geraet .aktionen{width:100%}
  .geraet .aktionen .knopf{width:100%}
  .meldung.banner{grid-template-columns:18px 1fr}
  .banner .knopf{grid-column:2;justify-self:start}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}