/*
 * Redesign V1, Ergaenzungen zu app.css fuer Navigation, Startseite und HealthHub
 * (Bauvertrag design/redesign/V1-UMSETZUNG.md). Nur, was app.css nicht schon mitbringt.
 * Nach app.css einbinden. Farben nur ueber Tokens, Dunkelmodus ueber dieselben Tokens.
 */

/* Screens mit eigenem V1-Kopf (Begruessung, HealthHub, Modulkopf): die Kopfzeile tritt zurueck,
   Titel und Zurueck stehen im Kopf selbst. app.js setzt data-v1kopf in render(). */
.hjm-frame[data-v1kopf] .apphead { display:none; }
.v1-head__back[hidden] { display:none; }
.v1-head__top:not(:has(> :not([hidden]))) { display:none; }

/* Schloesser auf den V1-Karten sitzen in der Ecke */
.v1-mod .lockcorner, .v1-qtile .lockcorner { position:absolute; font-size:14px; line-height:1; }
.v1-mod .lockcorner { color:#fff; }

/* Health Score: Farbe der Wegline (hell Indigo, dunkel Lavendel) */
.v1-score { --v1-weg:#2F3C99; }
html[data-theme="dark"] .v1-score { --v1-weg:#9AA2FF; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .v1-score { --v1-weg:#9AA2FF; } }
.v1-score__pill[hidden] { display:none; }
/* Auf live ist der Score kein Link (Scores-Screen unter LAUNCH-GUARD). */
div.v1-score { cursor:default; }

/* „Mehr für dich" unter dem Startraster */
.v1-more { margin-top:8px; }

/* Coaching: Neu-Punkt an „Von deinem Coach" */
.card > .lockcorner.newdot { top:12px; right:12px; width:10px; height:10px; border-radius:50%; background:var(--red); opacity:1; }
.card > .lockcorner.newdot .dot { display:none; }
.card > .lockcorner.newdot[hidden] { display:none; }

/* ---- HealthHub ---- */
.v1-hubhead .v1-head__top { margin-bottom:10px; }
.v1-ring__dial > .hji { position:relative; width:26px; height:26px; margin-bottom:2px; }
.v1-ring__val[hidden] { display:none; }
.v1-hubpanel { margin-top:4px; }
.v1-hubpanel[hidden] { display:none; }
.v1-hubcard { display:flex; flex-direction:column; gap:8px; border-radius:24px; padding:18px; }
.v1-hubcard__kopf { display:flex; align-items:center; gap:10px; }
.v1-hubcard__kopf .ic, .v1-hubleer > .ic { width:40px; height:40px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:var(--card2); color:var(--navy); }
.v1-hubcard__kopf .ic .hji, .v1-hubleer > .ic .hji { width:22px; height:22px; }
.v1-hubcard__kopf b { flex:1; min-width:0; font-size:16px; font-weight:800; color:var(--navy); }
.v1-hubcard__kopf .lockcorner { position:static; font-size:14px; color:var(--muted); }
.v1-hubcard__zahl { margin:4px 0 0; font-size:20px; font-weight:800; color:var(--navy); letter-spacing:-.3px; line-height:1.2; }
.v1-hubcard__text { margin:0; font-size:13px; font-weight:600; color:var(--muted); line-height:1.45; }
.v1-hubcard__text:empty { display:none; }
.v1-hubcard__zeile { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; margin-top:4px; padding:8px 10px;
  border:0; border-radius:16px; background:var(--card2); color:var(--ink); text-align:left; cursor:pointer; font-family:inherit; }
.v1-hubcard__zeile[hidden] { display:none; }
.v1-hubcard__zeile .ic { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--card); color:var(--navy); flex:none; }
.v1-hubcard__zeile > span:nth-child(2) { flex:1; min-width:0; }
.v1-hubcard__zeile b { display:block; font-size:14px; font-weight:800; color:var(--navy); }
.v1-hubcard__zeile span span { display:block; font-size:12px; font-weight:600; color:var(--muted); }
.v1-hubcard__link { align-self:flex-start; margin-top:auto; min-height:44px; }
.v1-hubleer { align-items:center; text-align:center; padding:28px 20px; }
.v1-hubleer b { font-size:16px; font-weight:800; color:var(--navy); }

/* ---- Darstellung (Account): drei Optionen, Tippziele 44 px ---- */
.v1-thema { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; padding:8px; }
.v1-thema__wahl { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:64px;
  padding:10px 6px; border-radius:16px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.v1-thema__wahl .hji { width:22px; height:22px; }
.v1-thema__wahl[aria-checked="true"] { background:var(--prim); color:var(--prim-ink); border-color:var(--prim); --ic-acc:currentColor; }
.v1-thema__wahl:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

/* ---- Beliebte Rezepte ohne Bild: getoente Flaeche im Ernaehrungston, Icon mittig ---- */
.v1-rez__bild--leer { display:grid; place-items:center;
  background:linear-gradient(145deg, rgba(93,187,114,.30), rgba(23,101,126,.22)), var(--card); color:var(--green-t); }
.v1-rez__bild--leer > .hji { position:relative; width:28px; height:28px; opacity:.6; }

/* ---- Icon-Kacheln in Listen- und Kartenzeilen: einheitlich 44 px, Radius 14, Icon 24 px ----
   Ein getoenter Inline-Grund (style="background:…") bleibt, er schlaegt die Regel ohnehin.
   DNA-Kacheln (.dna-ic) behalten ihre Tonfarben. */
.card .row > .ic, .card.row > .ic, .li > .ic { width:44px; height:44px; border-radius:14px; flex:none;
  display:grid; place-items:center; font-size:20px; line-height:1; }
.card .row > .ic:not(.dna-ic), .card.row > .ic:not(.dna-ic), .li > .ic:not(.dna-ic) { background:var(--card2); color:var(--navy); }
.card .row > .ic > .hji, .card.row > .ic > .hji, .li > .ic > .hji { width:24px; height:24px; }
/* Auf farbigem Kartengrund (Inline-Verlauf, weisse Schrift): Milchglas-Kachel, Icon weiss. */
.card[style*="gradient"] .row > .ic, .card.row[style*="gradient"] > .ic {
  background:rgba(255,255,255,.16) !important; color:#fff !important; --ic-acc:#fff; }

/* ---- Stressmaster: der V1-Kopf traegt Titel und Unterzeile. Der alte Modulkopf aus
   app-ebene.js wiederholt beides und faellt weg; in den Kopfvarianten aus stressmaster.js
   entfaellt nur die Phase („Stressmaster"), die eigentliche Aussage bleibt. Zaehler, Ring
   und Woche stehen ausserhalb des Modulkopfs und bleiben. ---- */
[data-screen="stressmaster"] .v1-head ~ * .ae-modulkopf--seite { display:none; }
[data-screen="stressmaster"] .v1-head ~ * .ae-modulkopf .ae-phase { display:none; }

/* Leisten, die app.js direkt an <body> haengt (ausserhalb von .hjm-app): Schrift der App erben. */
.hjm-update-bar, .hjm-install-banner { font-family: var(--font); -webkit-font-smoothing: antialiased; }
.hjm-update-bar button, .hjm-install-banner button { font-family: inherit; }

/* ---------- V1-Anmeldung: Markenkopf mit Logo, Formular als schwebende Karte ---------- */
html .hjm-login { max-width:none; margin:0; padding:0; gap:0; width:100%; min-height:100vh; min-height:100dvh;
  justify-content:flex-start; align-items:stretch; background:var(--bg); }
.login-hero { position:relative; overflow:hidden; box-sizing:border-box; padding:calc(40px + env(safe-area-inset-top)) 24px 76px;
  border-radius:0 0 36px 36px; color:#fff;
  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 svg { display:block; width:min(250px, 70vw); height:auto; }
.login-hero__title { margin:30px 0 0; font-size:30px; line-height:1.15; font-weight:800; letter-spacing:-.6px; color:#fff; }
.login-hero__sub { margin:6px 0 0; font-size:15px; 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; }
.login-body .card { border-radius:28px; padding:22px; box-shadow:0 18px 40px rgba(16,21,95,.12); }
html[data-theme="dark"] .login-body .card { box-shadow:none; }
.login-body .gate-view > p.muted { margin:4px 0 0; }
.login-hinweis { margin:6px 0 0; }
@media (min-width: 900px) {
  html .hjm-login { flex-direction:row; }
  .login-hero { flex:0 0 46%; min-height:100vh; border-radius:0 40px 40px 0; display:flex; flex-direction:column;
    justify-content:center; padding:64px 64px 64px 72px; }
  .login-hero__logo svg { width:340px; }
  .login-hero__title { font-size:44px; letter-spacing:-1px; margin-top:44px; }
  .login-hero__sub { font-size:17px; }
  .login-body { margin:auto; align-self:center; padding:48px 40px; }
}

/* Seitenleiste: Logo-Emblem statt „HJ"-Kachel */
.side-brand .hj-mark { display:block; width:66px; height:auto; }
.side-brand .logo { display:none; }