/*
 * 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; }

/* =====================================================================================
 * App 2. Version (P2 Reiter, P3 Kopf): Reiter-Huellen HealthHub und Coaching.
 * Der Kopf klebt mit top = -Einfahrweg: beim Runterwischen schiebt sich der Inhalt (Titel,
 * Ringe) zusammen und blendet aus, nur die Reiterleiste bleibt stehen. app.js setzt
 * --einfahrweg (Hoehe des Inhalts), --k (0 offen bis 1 eingefahren) und --kr (Reiter-Beschriftung).
 * ===================================================================================== */

/* Gescrollt wird das Dokument. .app schneidet nur waagerecht: mit overflow-x:hidden war sie selbst
   ein Scrollbereich, und position:sticky griff im Inneren nicht (Fabio, 00_Uebergreifend.md). */
.app { overflow:visible; overflow-x:clip; }

.hj-kopf { --k:0; --kr:1; --einfahrweg:0px;
  position:sticky; top:calc(-1 * var(--einfahrweg)); z-index:15;
  margin:0 0 14px; padding:16px 20px 14px; border-radius:0 0 30px 30px; color:#fff;
  background:var(--kopf-grad, linear-gradient(120deg,#10155F 0%,#2F3C99 100%));
  box-shadow:0 10px 24px rgba(16,21,95,.14); }
.hj-kopf[hidden] { display:none; }
/* Ansicht als Kunde: das feste Band (38 px) bleibt frei, der Kopf klebt darunter. */
.hjm-app.imp-on .hj-kopf { top:calc(38px - var(--einfahrweg)); }
.hj-kopf .hji { --ic-acc:currentColor; }
.hj-kopf--hub { --kopf-grad:
    radial-gradient(240px 200px at 88% 8%, rgba(158,227,241,.5) 0%, rgba(158,227,241,0) 70%),
    radial-gradient(240px 200px at 8% 92%, rgba(195,180,255,.45) 0%, rgba(195,180,255,0) 70%),
    radial-gradient(240px 200px at 96% 96%, rgba(247,168,184,.45) 0%, rgba(247,168,184,0) 70%),
    linear-gradient(120deg,#10155F 0%,#2F3C99 100%); }
.hj-kopf--coaching { --kopf-grad:linear-gradient(120deg,#10155F 0%,#15779B 100%); }
/* Einfahren: der Inhalt wird gleichmaessig kleiner und blendet aus. */
.hj-kopf__inhalt { transform-origin:50% 100%;
  transform:translateY(calc(var(--k) * 12px)) scale(calc(1 - .16 * var(--k)));
  opacity:calc(1 - 1.3 * var(--k)); }
.hj-kopf.eingefahren .hj-kopf__inhalt { visibility:hidden; }
.hj-kopf__titel { margin:0; font-size:28px; font-weight:800; letter-spacing:-.5px; line-height:1.15; color:#fff; }
.hj-kopf__sub { margin:4px 0 0; font-size:13.5px; font-weight:600; line-height:1.45; color:rgba(255,255,255,.85); }
.hj-kopf .v1-rings { margin:16px 0 4px; }

/* Reiter: gleich breite, abgerundete Rechtecke, die die Zeile fuellen. HealthHub ohne Symbole. */
.hj-kopf__reiter { display:flex; gap:8px; margin-top:14px; }
.hj-kopf__reiter [role="tab"] { flex:1 1 0; min-width:0; min-height:40px; padding:0 6px; position:relative;
  display:flex; align-items:center; justify-content:center; gap:6px;
  border-radius:14px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.16); color:#fff;
  font-family:inherit; font-size:13px; font-weight:800; line-height:1.1; cursor:pointer;
  transition:background .18s ease, color .18s ease; }
.hj-kopf__reiter [role="tab"][aria-selected="true"] { background:var(--tab-on); color:var(--tab-on-ink); border-color:var(--tab-on);
  --ic-acc:url(#hjg-h); }
.hj-kopf__reiter [role="tab"]:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.hj-r__wort { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hj-r__schloss { display:inline-grid; place-items:center; opacity:.8; }
.hj-r__schloss .hji { width:12px; height:12px; }
/* Coaching: vier hoehere Kacheln mit Symbol; im letzten Stueck des Einfahrens bleiben nur die Symbole. */
.hj-kopf__reiter--kacheln [role="tab"] { flex-direction:column; gap:2px; padding:6px 4px;
  min-height:calc(42px + 18px * var(--kr)); font-size:11.5px; }
.hj-kopf__reiter--kacheln .hji { width:21px; height:21px; flex:none; }
.hj-kopf__reiter--kacheln .hj-r__wort { max-height:calc(15px * var(--kr)); opacity:var(--kr); }
.hj-r__punkt { position:absolute; top:6px; right:8px; width:9px; height:9px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 2px rgba(255,255,255,.9); }
.hj-r__punkt[hidden] { display:none; }
.hj-kopf__reiter .conum { position:absolute; top:3px; right:5px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  display:inline-grid; place-items:center; background:var(--red); color:#fff; font-size:10.5px; font-weight:800; line-height:1; }
.hj-kopf__reiter .conum[hidden] { display:none; }

/* Reiterregel: auch kurze Reiter lassen den Kopf eingefahren (Mindesthoehe Bildschirm plus Einfahrweg,
   der Kopf selbst steht ueber dem Screen). */
.hj-reiterseite.active { min-height:calc(100vh - 60px); }
@supports (height:100dvh) { .hj-reiterseite.active { min-height:calc(100dvh - 60px); } }
.hjm-frame[data-huelle] .screen.active { padding-top:2px; }

/* Start: die Hinweis-Banner (neuer 1:1-Inhalt, Google-Bewertung) tragen display:flex und blieben
   darum auch mit hidden sichtbar. */
.new-banner[hidden] { display:none; }

/* Account: das Initialen-Feld der Kopfkarte hatte keine eigene Regel (nur .apphead .av) und stand
   ohne Kreis da. */
[data-screen="account"] .card > .av { border-radius:50%; background:linear-gradient(145deg,#62C3DC,#2F3C99); color:#fff;
  display:grid; place-items:center; font-weight:800; }

/* HealthHub Übersicht und Tracker, Coaching Übersicht */
.v1-hubleer .pill-info { align-self:center; }
.hj-co-karte { padding:6px; }
.hj-co-karte > .alert { margin:0; }

@media (prefers-reduced-motion: reduce) {
  .hj-kopf__inhalt { transform:none; }
  .hj-kopf__reiter [role="tab"] { transition:none; }
}
@media (min-width: 900px) {
  .hj-kopf { max-width:1160px; margin:24px max(40px, calc((100% - 1160px) / 2)) 0; border-radius:32px; padding:22px 28px 18px; }
  .hj-kopf__reiter { max-width:640px; margin-left:auto; margin-right:auto; }
  .hj-kopf .v1-rings { max-width:520px; margin-left:auto; margin-right:auto; }
  .hjm-frame[data-huelle] .screen.active { padding-top:20px; }
}

/* Platzhalter beim Start: bevor die Sitzung geprueft ist, steht schon die Form der App da. */
.hjm-app[data-auth="loading"] { min-height:100vh; background:var(--bg); }
.hjm-app[data-auth="loading"]::before { content:""; display:block; max-width:460px; height:100vh; margin:0 auto;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 20px 26px / 150px 22px no-repeat,
    linear-gradient(var(--card), var(--card)) 20px 84px / calc(100% - 40px) 128px no-repeat,
    linear-gradient(var(--card), var(--card)) 20px 228px / calc(100% - 40px) 76px no-repeat,
    linear-gradient(var(--card), var(--card)) 20px 320px / calc(100% - 40px) 76px no-repeat,
    linear-gradient(var(--bar-solid), var(--bar-solid)) 50% calc(100% - 20px) / min(436px, calc(100% - 24px)) 70px no-repeat;
  animation:hj-boot 1.4s ease-in-out infinite; }
@keyframes hj-boot { 0%, 100% { opacity:.55; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .hjm-app[data-auth="loading"]::before { animation:none; } }