/*
 * App 2. Version, Paket P4: Konto und System im neuen Look.
 * Konto, Benachrichtigungen (Push-Karte), App installieren, Anmeldung und Registrierung,
 * „Fast geschafft", Sperrseiten, Install-Hinweis und Update-Hinweis.
 * Nach app.css und v1-extra.css eingebunden. Farben nur ueber Tokens; die Verlaeufe sind die
 * Markenverlaeufe der Koepfe (bleiben in beiden Modi Navy, Schrift weiss), Dunkelmodus ueber
 * dieselben Tokens wie der Rest der App.
 */

/* ---- Gemeinsam: Kopf im Navy-Verlauf (Konto, Sperrseiten, Installation, Anmeldung) ---- */
.hj-konto-kopf, .hj-sperre__kopf {
  --kopf-grad:linear-gradient(120deg,#10155F 0%,#2F3C99 100%);
  position:relative; overflow:hidden; color:#fff; border-radius:30px;
  background:
    radial-gradient(220px 180px at 92% 0%, rgba(158,227,241,.38) 0%, rgba(158,227,241,0) 70%),
    radial-gradient(220px 180px at 0% 100%, rgba(195,180,255,.32) 0%, rgba(195,180,255,0) 70%),
    var(--kopf-grad);
  box-shadow:0 10px 24px rgba(16,21,95,.14); }
.hj-konto-kopf .hji, .hj-sperre__kopf .hji { --ic-acc:currentColor; }

/* ---- Konto ---- */
.hj-konto-kopf { display:flex; align-items:center; gap:14px; padding:20px 18px; margin:2px 0 6px; }
.hj-konto-kopf__av { flex:none; width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.4); color:#fff;
  font-size:20px; font-weight:800; letter-spacing:.5px; }
.hj-konto-kopf__tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hj-konto-kopf__tx b { font-size:19px; font-weight:800; line-height:1.2; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hj-konto-kopf__tx span { font-size:13px; font-weight:600; color:rgba(255,255,255,.82);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hj-konto-kopf__tx span:empty { display:none; }
.hj-konto-kopf__knopf { flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.16); color:#fff; cursor:pointer; }
.hj-konto-kopf__knopf .hji { width:20px; height:20px; }
.hj-konto-kopf__knopf:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Listen: Eintraege sind echte Knoepfe (Tastatur, Vorlesen), sehen aber aus wie die Listenzeilen. */
.hj-konto-liste { padding-top:4px; padding-bottom:4px; }
.hj-konto-liste button.li { width:100%; margin:0; border:0; border-bottom:1px solid var(--line-2); background:none;
  font:inherit; color:inherit; text-align:left; cursor:pointer; min-height:56px; }
.hj-konto-liste button.li:last-child { border-bottom:0; }
.hj-konto-liste .li[hidden] { display:none; }
.hj-konto-liste button.li:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; border-radius:12px; }
@media (hover:hover) { .hj-konto-liste button.li:hover .tx b { color:var(--teal); } }
.hj-konto-liste .li .tx > span { display:block; margin-top:1px; line-height:1.4; }
.hj-konto-liste .li .tx b .nw-punkt { display:inline-block; }
.hj-konto-liste .li .tx b .nw-punkt[hidden] { display:none; }
.hj-konto-liste .switch { margin-left:auto; }
/* Erklaertext unter einem Schalter: buendig mit der Schrift der Zeile darueber. */
.hj-konto-liste .li.hj-konto-erkl { padding-top:0; padding-left:57px; }
.hj-konto-liste .li.hj-konto-erkl .tx > span { font-size:12px; color:var(--muted); line-height:1.5; }
.hj-konto-hinweis { margin:8px 4px 0; font-size:12px; font-weight:600; color:var(--muted); line-height:1.5; }
/* Abmelden: ruhig, aber eindeutig. Rot bleibt Werten vorbehalten (00_Uebergreifend). */
.hj-konto-liste [data-konto="abmelden"] .tx b, .hj-konto-liste [data-konto="abmelden-alle"] .tx b { color:var(--navy); }

/* ---- Sperrseiten und Installationsseite: Kopf mit Glas-Symbolkachel ---- */
.hj-sperre__kopf { --kopf-grad:var(--sperre-grad, linear-gradient(120deg,#10155F 0%,#2F3C99 100%));
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:26px 20px 22px; margin:2px 0 4px; }
.hj-sperre__ic { width:60px; height:60px; border-radius:20px; display:grid; place-items:center; margin-bottom:6px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.hj-sperre__ic .hji { width:30px; height:30px; }
.hj-sperre__kopf h3 { margin:0; font-size:22px; font-weight:800; letter-spacing:-.3px; line-height:1.2; color:#fff; }
.hj-sperre__kopf p { margin:2px 0 0; max-width:34em; font-size:13.5px; font-weight:600; line-height:1.5; color:rgba(255,255,255,.88); }
.hj-sperre__liste { margin-top:14px; }
.hj-sperre .li .ic { background:var(--card2) !important; color:var(--navy) !important; }
.hj-sperre .alert { margin-top:12px !important; }
.hj-sperre > .btn { margin-top:14px !important; }

/* Installation: nummerierte Schritte als Kacheln, nativer Knopf mit Abstand. */
.hj-schritte .li > .ic { font-size:16px; font-weight:800; color:var(--navy); }
.hj-install [data-hj="install-cta"]:not(:empty) { margin-top:14px; }
.hj-install-jetzt { margin-bottom:4px; }

/* ---- Benachrichtigungen: Push-Karte ---- */
.hj-push-karte { display:flex; flex-direction:column; gap:12px; }
.hj-push-karte__kopf { display:flex; align-items:flex-start; gap:12px; }
.hj-push-karte__kopf .ic { flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:var(--card2); color:var(--navy); }
.hj-push-karte__kopf .ic.an { background:var(--green-100); color:var(--green-t); --ic-acc:currentColor; }
.hj-push-karte__kopf .ic .hji { width:24px; height:24px; }
.hj-push-karte__kopf b { display:block; font-size:16px; font-weight:800; color:var(--navy); line-height:1.3; }
.hj-push-karte__kopf p { margin:3px 0 0; font-size:13px; font-weight:600; color:var(--muted); line-height:1.5; }
.hj-push-karte__msg:empty { display:none; }
.hj-mitteilungen [data-hj="push-optin"]:empty + .sec-title { margin-top:4px; }

/* ---- Anmeldung, Registrierung, Passwort, „Fast geschafft" ---- */
/* V1-Anmeldung: Markenkopf im Navy-Verlauf mit weichen Lichtern und Logo, Formular als schwebende
   Karte. Mobil steht der Kopf oben und die Karte ragt in ihn hinein; ab 900 px zweigeteilt (Kopf
   links, Karte rechts mittig). Der Kopf bleibt in beiden Modi Navy, die Karte folgt den Tokens. */
html .hjm-login { max-width:none; width:100%; margin:0; padding:0; gap:0; min-height:100vh; min-height:100dvh;
  flex-direction:column; justify-content:flex-start; align-items:stretch; background:var(--bg); }
.login-hero { position:relative; overflow:hidden; box-sizing:border-box; color:#fff;
  padding:calc(36px + env(safe-area-inset-top)) 24px 74px; border-radius:0 0 36px 36px;
  background:
    radial-gradient(circle at 12% 8%, rgba(158,227,241,.34), rgba(158,227,241,0) 46%),
    radial-gradient(circle at 92% 28%, rgba(195,180,255,.30), rgba(195,180,255,0) 44%),
    radial-gradient(circle at 55% 115%, rgba(247,168,184,.22), rgba(247,168,184,0) 46%),
    linear-gradient(150deg, #10155F 0%, #2F3C99 100%); }
.login-hero__logo { line-height:0; }
.login-hero__logo svg { display:block; width:min(200px, 58vw); height:auto; }
.login-hero__title { margin:28px 0 0; font-size:30px; line-height:1.15; font-weight:800; letter-spacing:-.6px; color:#fff; }
.login-hero__sub { margin:8px 0 0; font-size:15px; font-weight:600; line-height:1.45; color:rgba(255,255,255,.86); }
.login-hero [data-fuer] { display:none; }
.hjm-login[data-mode="login"] .login-hero [data-fuer="login"],
.hjm-login[data-mode="register"] .login-hero [data-fuer="register"],
.hjm-login[data-mode="forgot"] .login-hero [data-fuer="forgot"],
.hjm-login[data-mode="reset"] .login-hero [data-fuer="reset"],
.hjm-login[data-mode="pending"] .login-hero [data-fuer="pending"] { display:inline; }
.login-body { position:relative; box-sizing:border-box; width:100%; max-width:460px; margin:-46px auto 0;
  padding:0 16px calc(28px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; }
.hjm-login .gate-view > .card { border-radius:28px; padding:22px 20px; box-shadow:0 18px 40px rgba(16,21,95,.12); }
html[data-theme="dark"] .hjm-login .gate-view > .card { box-shadow:none; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .hjm-login .gate-view > .card { box-shadow:none; } }
.hjm-login .gate-view > p.muted { margin:4px 0 0; }
.login-hinweis { margin:4px 0 0; }
@media (min-width: 900px) {
  html .hjm-login { flex-direction:row; justify-content:flex-start; max-width:none; }
  .login-hero { flex:0 0 46%; min-height:100vh; min-height:100dvh; border-radius:0 40px 40px 0; display:flex;
    flex-direction:column; justify-content:center; padding:64px 56px 64px 72px; }
  .login-hero__logo svg { width:300px; }
  .login-hero__title { font-size:44px; letter-spacing:-1px; margin-top:44px; }
  .login-hero__sub { font-size:17px; max-width:420px; }
  .login-body { flex:1 1 auto; max-width:480px; margin:auto; align-self:center; padding:48px 40px; }
}

.hj-gate-fertig { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:24px 18px; }
.hj-gate-fertig__ic { width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:var(--green-100); color:var(--green-t); --ic-acc:currentColor; }
.hj-gate-fertig__ic .hji { width:30px; height:30px; }
.hj-gate-fertig h3 { margin:4px 0 0; font-size:20px; font-weight:800; color:var(--navy); }
.hj-gate-fertig p.muted { margin:0; font-size:14px; line-height:1.55; }
.hj-gate-fertig__tipp { margin:6px 0 0; padding:10px 12px; border-radius:14px; background:var(--card2);
  font-size:12.5px; font-weight:700; color:var(--navy); line-height:1.5; }
.hj-gate-fertig__tipp[hidden] { display:none; }
.hj-gate-fertig [data-hj="reg-install"]:not(:empty) { width:100%; margin-top:4px; }

/* ---- Install-Hinweis (nur Handy) und Update-Hinweis: schwebende Karten im neuen Look ---- */
.hjm-install-banner { gap:10px; padding:10px 10px 10px 12px; border-radius:20px; background:var(--card);
  border:var(--card-border); box-shadow:0 12px 32px rgba(16,21,95,.18); }
.hjm-install-ic, .hjm-update-ic { flex:none; width:40px; height:40px; border-radius:13px; display:grid; place-items:center; }
.hjm-install-ic { background:var(--card2); color:var(--navy); }
.hjm-install-ic .hji, .hjm-update-ic .hji { width:22px; height:22px; }
.hjm-install-tx, .hjm-update-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.hjm-install-banner .hjm-install-tx b { font-size:14px; font-weight:800; color:var(--navy); line-height:1.25; }
.hjm-install-banner .hjm-install-tx span { font-size:12px; font-weight:600; color:var(--muted); line-height:1.35; }
.hjm-install-banner .btn { min-height:40px; padding:8px 14px; border-radius:12px; }
.hjm-install-zu { width:36px; height:36px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer;
  background:var(--card2); color:var(--muted); }
.hjm-install-zu .hji { width:16px; height:16px; --ic-acc:currentColor; }
.hjm-install-zu:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

.hjm-update-bar { gap:12px; }
.hjm-update-ic { background:rgba(255,255,255,.16); color:#fff; }
.hjm-update-ic .hji { --ic-acc:currentColor; }
.hjm-update-bar .hjm-update-tx b { font-size:14px; font-weight:800; color:#fff; line-height:1.25; }
.hjm-update-bar .hjm-update-tx span { font-size:12px; font-weight:600; color:rgba(255,255,255,.82); line-height:1.35; }

/* ---- „Ansicht als Kunde": Band im neuen Look (Bernstein bleibt, unuebersehbar) ---- */
.hjm-impbar { font-family:var(--font); padding:8px 12px 8px 14px; }
.hjm-impbar .eye { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background:rgba(0,0,0,.12); }
.hjm-impbar .eye .hji { width:16px; height:16px; --ic-acc:currentColor; }
.hjm-impbar button { min-height:32px; font-family:inherit; }

@media (min-width: 900px) {
  .hj-konto-kopf, .hj-sperre__kopf { margin-top:4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hj-konto-liste button.li .tx b { transition:none; }
}