/*
 * hj-member App-Schale — Komponenten-Bibliothek (aus infra/design/prototype.html,
 * Design-System infra/DESIGN.md). ALLE Regeln sind unter `.hjm-app` gescopt, damit sie
 * nicht mit dem WP-Theme kollidieren. Nur der Member-Teil (NICHT die Coach-Konsole = Modul D),
 * ohne das Prototyp-Demo-Chrome (Telefonrahmen/Statusbar/Toolbar). Font Mulish wird spaeter
 * lokal gebuendelt (Etappe 3); vorerst System-Fallback.
 */
:root {
  --navy:#10155F; --navy-2:#232a7a; --navy-soft:#3a4290;
  --green:#6FCE78; --green-d:#4fae5c;
  --teal:#15779B; --tint:#EDF4FF; --tint-2:#F2F6FF;
  --red:#E92020; --amber:#F5A623;
  --bg:#F8FAFB; --ink:#2b2b2b; --muted:#69727D; --muted-2:#98a0ab;
  --line:#E8ECF1; --line-2:#EEF1F5; --card:#FFFFFF;
  --shadow:0 10px 30px rgba(16,21,95,.08);
  --shadow-sm:0 4px 14px rgba(16,21,95,.06);
  --r:18px; --r-sm:12px;
  --font:'Mulish', system-ui, -apple-system, sans-serif;
}

.hjm-app { font-family:var(--font); color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(111,206,120,.10), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(21,119,155,.10), transparent 55%),
    #eef1f6;
  min-height:100vh;
}
.hjm-app *, .hjm-app *::before, .hjm-app *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.hjm-app button { font-family:inherit; }

/* App-Rahmen: mobil full-width, Desktop zentrierte Spalte */
.hjm-frame {
  max-width:460px; margin:0 auto; min-height:100vh; background:var(--bg);
  display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow);
}

/* Kopfzeile */
.apphead { position:sticky; top:0; z-index:20; background:var(--bg); padding:12px 20px;
  display:flex; align-items:center; gap:12px; min-height:56px; border-bottom:1px solid var(--line-2); }
.apphead .back { width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:#fff;
  display:none; place-items:center; cursor:pointer; color:var(--navy); font-size:17px; flex:none; }
.apphead .back.show { display:grid; }
.apphead h2 { font-size:19px; font-weight:800; color:var(--navy); letter-spacing:-.3px; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.apphead .av { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--navy));
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px; cursor:pointer; flex:none; border:0; }
.apphead .bell { position:relative; width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:#fff; display:grid; place-items:center; cursor:pointer; font-size:16px; flex:none; }
.apphead .bell .notif-badge { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:9px; background:var(--red); color:#fff; font-size:10px; font-weight:800; line-height:16px;
  text-align:center; box-shadow:0 0 0 2px var(--bg); }
/* Feed-Zeile: ungelesene fett + Punkt-Markierung rechts. */
.list .li.notif .tx b { font-weight:700; }
.list .li.notif.unread { background:var(--tint-2); }
.list .li.notif .notif-dot { width:9px; height:9px; border-radius:50%; background:var(--red); flex:none; align-self:center; }
/* „Neues"-Banner auf der Startseite: prominenter, antippbarer Hinweis auf neue 1:1-Inhalte. */
.new-banner { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  border:0; border-radius:16px; padding:14px 16px; margin:0 0 12px;
  background:linear-gradient(135deg,var(--green),var(--green-d)); color:#fff;
  box-shadow:0 6px 18px rgba(111,206,120,.35); }
.new-banner .nb-ic { font-size:22px; flex:none; }
.new-banner .nb-tx { flex:1; min-width:0; display:flex; flex-direction:column; }
.new-banner .nb-tx b { font-size:15px; font-weight:800; }
.new-banner .nb-tx span { font-size:12px; font-weight:600; opacity:.9; }
.new-banner .nb-chev { font-size:22px; flex:none; }
/* „Mein 1:1"-Tab: kleiner roter Punkt bei ungelesenem Neuem (nutzt .lockdot-Positionierung). */
.tabbar button .newdot { font-size:9px; }

/* Scroll-Bereich + Screens */
.app { flex:1; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; }
.screen { display:none; padding:8px 20px 30px; animation:hjm-fade .25s ease; }
.screen.active { display:block; }
@keyframes hjm-fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .screen{ animation:none; } }

/* Bottom-Tabs */
.tabbar { flex:none; display:flex; background:#fff; border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom)); position:sticky; bottom:0; z-index:20; }
.tabbar button { flex:1; border:0; background:transparent; display:flex; flex-direction:column; align-items:center;
  gap:3px; font-size:10px; font-weight:700; color:var(--muted-2); cursor:pointer; padding:4px 0; position:relative; }
.tabbar button .ic { width:24px; height:24px; display:grid; place-items:center; font-size:19px; line-height:1; }
.tabbar button.active { color:var(--navy); }
.tabbar button .lockdot { position:absolute; top:2px; right:calc(50% - 18px); font-size:10px; }

/* Karten & Struktur */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow-sm); }
.card + .card { margin-top:12px; }
.sec-title { font-size:13px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.6px;
  margin:22px 2px 10px; display:flex; align-items:center; justify-content:space-between; }
.sec-title a { font-size:12px; color:var(--teal); text-transform:none; letter-spacing:0; cursor:pointer; font-weight:700; }
.muted { color:var(--muted); }
.row { display:flex; align-items:center; gap:12px; }
.between { justify-content:space-between; }

/* Pills / Badges */
.pill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:11px;
  font-weight:800; background:var(--tint); color:var(--navy); }
.pill.green { background:rgba(111,206,120,.18); color:var(--green-d); }
.pill.red { background:rgba(233,32,32,.12); color:var(--red); }
.pill.amber { background:rgba(245,166,35,.16); color:#b9791b; }
.pill.teal { background:rgba(21,119,155,.14); color:var(--teal); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px;
  border-radius:14px; border:0; background:var(--navy); color:#fff; font-weight:800; font-size:15px; cursor:pointer;
  transition:.15s; box-shadow:0 8px 20px rgba(16,21,95,.22); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.6; cursor:default; }
.btn.green { background:linear-gradient(135deg,var(--green),var(--green-d)); box-shadow:0 8px 20px rgba(79,174,92,.3); }
.btn.ghost { background:#fff; color:var(--navy); border:1.5px solid var(--line); box-shadow:none; }
.btn.teal { background:var(--teal); box-shadow:0 8px 20px rgba(21,119,155,.25); }
.btn.sm { width:auto; padding:9px 16px; font-size:13px; border-radius:11px; }

/* Tiles */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* Einspaltig, wenn die zweite Kachel ausgeblendet ist (z. B. Nachmessen ohne laufenden Plan). */
.grid2.one { grid-template-columns:1fr; }
.tile { border-radius:var(--r); padding:15px; cursor:pointer; position:relative; overflow:hidden; min-height:104px;
  display:flex; flex-direction:column; justify-content:space-between; transition:.15s; border:1px solid var(--line);
  background:#fff; box-shadow:var(--shadow-sm); text-align:left; }
.tile:active { transform:scale(.98); }
.tile .ic { font-size:24px; }
.tile .t { font-weight:800; font-size:14px; color:var(--navy); line-height:1.2; }
.tile .s { font-size:11px; color:var(--muted); font-weight:600; }
.tile.nav { background:linear-gradient(150deg,var(--navy),var(--navy-2)); border:0; }
.tile.nav .t, .tile.nav .s { color:#fff; } .tile.nav .s { color:rgba(255,255,255,.7); }
.tile.grn { background:linear-gradient(150deg,var(--green),var(--green-d)); border:0; }
.tile.grn .t, .tile.grn .s { color:#fff; } .tile.grn .s { color:rgba(255,255,255,.85); }
.tile.teal { background:linear-gradient(150deg,var(--teal),#0f5a77); border:0; }
.tile.teal .t, .tile.teal .s { color:#fff; } .tile.teal .s { color:rgba(255,255,255,.8); }
.tile .lockcorner { position:absolute; top:10px; right:12px; font-size:15px; opacity:.9; }

/* Listen */
.list .li { display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line-2);
  cursor:pointer; text-align:left; width:100%; background:none; border-left:0; border-right:0; border-top:0; }
.list .li:last-child { border-bottom:0; }
.li .ic { width:42px; height:42px; border-radius:12px; background:var(--tint); display:grid; place-items:center;
  font-size:20px; flex:none; color:var(--navy); }
/* Produktbild statt Emoji (Supplement-Plan): gleiche Kachelmaße, Motiv formatfüllend. */
.li img.ic { object-fit:cover; display:block; }
.li .tx { flex:1; min-width:0; }
.li .tx b { display:block; font-size:14px; font-weight:800; color:var(--ink); }
.li .tx span { font-size:12px; color:var(--muted); font-weight:600; }
.li .chev { color:var(--muted-2); font-size:18px; }

/* Fortschritt / Ring / Thumb */
.progress { height:8px; border-radius:99px; background:var(--line); overflow:hidden; }
.progress > i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--green-d)); }
.thumb { aspect-ratio:16/9; border-radius:14px; background:linear-gradient(135deg,var(--navy),var(--teal));
  display:grid; place-items:center; color:#fff; position:relative; overflow:hidden; }
.thumb .play { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.9); display:grid;
  place-items:center; color:var(--navy); font-size:18px; padding-left:3px; }
.thumb .dur { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.55); color:#fff; font-size:11px;
  font-weight:700; padding:2px 7px; border-radius:6px; }
/* Kurs-Detail: Lektion + eingebetteter Vimeo-Player (responsiv 16:9). */
.lesson { margin:0 0 22px; }
.lesson-h { display:flex; align-items:center; gap:10px; margin:0 2px 8px; }
.lesson-n { flex:none; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff;
  font-size:13px; font-weight:800; display:grid; place-items:center; }
.lesson-h b { color:var(--navy); font-size:15px; font-weight:800; }
.lesson-dur { margin-left:auto; flex:none; font-size:12px; font-weight:700; }
/* Kapitel-Ueberschrift (Tutor-„Topic") ueber einer Lektionsgruppe. */
.lesson-sec { color:var(--navy); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  margin:6px 2px 12px; padding-bottom:6px; border-bottom:1px solid rgba(0,0,0,.08); }
.lesson-body { font-size:13px; }
.lesson-body p { margin:0 0 8px; }
.course-desc p { margin:0 0 10px; }
.course-desc :where(ul,ol) { margin:0 0 10px 18px; }
.vwrap { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--navy); }
.vwrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.ring { --p:62; width:120px; height:120px; border-radius:50%;
  background:conic-gradient(var(--green) calc(var(--p)*1%), rgba(255,255,255,.25) 0); display:grid; place-items:center; margin:0 auto; }
.ring .inner { width:96px; height:96px; border-radius:50%; background:var(--navy); display:grid; place-items:center;
  text-align:center; color:#fff; }
.ring .inner b { font-size:28px; font-weight:900; line-height:1; }
.ring .inner span { font-size:11px; opacity:.8; font-weight:700; }

/* Banner */
.banner { border-radius:var(--r); padding:18px; color:#fff; background:linear-gradient(135deg,var(--navy),var(--teal));
  box-shadow:var(--shadow); position:relative; overflow:hidden; }
.banner h3 { font-size:17px; font-weight:800; margin:0 0 5px; }
.banner p { font-size:12.5px; opacity:.9; line-height:1.5; margin:0 0 12px; }
.banner p:last-child { margin-bottom:0; }

/* Chat / Composer */
.chat { display:flex; flex-direction:column; gap:10px; padding:6px 2px; }
.bub { max-width:80%; padding:11px 14px; border-radius:16px; font-size:13.5px; line-height:1.45; font-weight:500; }
.bub.them { background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start; color:var(--ink); }
.bub.me { background:var(--navy); color:#fff; border-bottom-right-radius:5px; align-self:flex-end; }
.bub.ai { background:linear-gradient(135deg,var(--tint),#fff); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:5px; }
.bub small { display:block; font-size:10px; opacity:.6; margin-top:3px; font-weight:700; }
.composer { display:flex; gap:8px; padding:10px 0 2px; align-items:center; }
.composer input { flex:1; border:1px solid var(--line); border-radius:999px; padding:12px 16px; font-size:14px; background:#fff; }
.composer input:focus { outline:2px solid var(--teal); }
.composer .send { width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; border:0; font-size:18px; cursor:pointer; flex:none; }

/* Felder */
.field { margin-bottom:13px; }
.field label { display:block; font-size:12px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.field input, .field select, .field textarea { width:100%; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font-size:14px; background:#fff; color:var(--ink); font-family:inherit; }
.field input:focus, .field textarea:focus, .field select:focus { outline:2px solid var(--teal); }

/* Stat / Alert / Spark / Check / Rate / Toggle / Steps / Subnav */
.stat { background:var(--tint-2); border-radius:14px; padding:13px; text-align:center; }
.stat b { display:block; font-size:22px; font-weight:900; color:var(--navy); line-height:1; }
.stat span { font-size:10.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.alert { border-radius:14px; padding:13px 14px; font-size:12.5px; font-weight:600; line-height:1.5; display:flex; gap:10px; align-items:flex-start; }
.alert.red { background:rgba(233,32,32,.08); border:1px solid rgba(233,32,32,.25); color:#a51616; }
.alert.green { background:rgba(111,206,120,.12); border:1px solid rgba(111,206,120,.35); color:var(--green-d); }
.alert.info { background:var(--tint-2); border:1px solid var(--line); color:var(--muted); }
.alert .i { font-size:16px; flex:none; }
.spark { width:100%; height:70px; display:block; }
/* Rezept-Filter: horizontal scrollbare Chip-Leiste (haeufigste Tags + „Alle"). */
.recipe-filters { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; -webkit-overflow-scrolling:touch; }
.recipe-filters::-webkit-scrollbar { display:none; }
.recipe-filters { scrollbar-width:none; }
.rfilter { flex:none; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:#fff;
  color:var(--navy); font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.rfilter.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.check { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.check:last-child { border-bottom:0; }
.check .box { width:24px; height:24px; border-radius:8px; border:2px solid var(--line); flex:none; display:grid;
  place-items:center; cursor:pointer; color:#fff; font-size:13px; background:none; }
.check.done .box { background:var(--green); border-color:var(--green); }
.check.done .lbl { text-decoration:line-through; color:var(--muted); }
.check .lbl { font-size:14px; font-weight:700; flex:1; }
.rate { display:flex; gap:7px; }
.rate button { width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:#fff; font-weight:800; color:var(--muted); cursor:pointer; }
.rate button.on { background:var(--green); border-color:var(--green); color:#fff; }
.tog { width:44px; height:26px; border-radius:99px; background:var(--line); position:relative; cursor:pointer; flex:none; transition:.2s; border:0; }
.tog::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.2s; }
.tog.on { background:var(--green); } .tog.on::after { left:21px; }
.steps { display:flex; gap:6px; margin-bottom:14px; }
.steps i { flex:1; height:5px; border-radius:99px; background:var(--line); }
.steps i.on { background:var(--navy); }
.subnav { display:flex; gap:7px; overflow-x:auto; padding:2px 0 12px; margin:0 -2px; }
.subnav::-webkit-scrollbar { height:0; }
.subnav button { flex:none; border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 15px; font-weight:800; font-size:13px; color:var(--muted); cursor:pointer; white-space:nowrap; }
.subnav button.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.copanel { display:none; } .copanel.active { display:block; animation:hjm-fade .2s; }

/* Skeleton (Loading) — DESIGN.md §6 */
.skel { height:16px; border-radius:8px; margin:8px 0; background:linear-gradient(90deg,var(--line-2),var(--tint-2),var(--line-2));
  background-size:200% 100%; animation:hjm-shimmer 1.2s infinite; }
@keyframes hjm-shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
@media (prefers-reduced-motion: reduce){ .skel{ animation:none; } }

/* ---- Auth-Gating: Login nur bei "in", App-Rahmen nur bei "ok" (loading = neutral) ---- */
.hjm-login { display:none; }
.hjm-frame { display:none; }
.hjm-app[data-auth="in"] .hjm-login { display:flex; }
.hjm-app[data-auth="ok"] .hjm-frame { display:flex; }
.hjm-login { max-width:400px; margin:0 auto; padding:40px 20px; flex-direction:column; gap:14px; }
.hjm-login .brand { display:flex; align-items:center; gap:11px; margin-bottom:8px; }
.hjm-login .logo { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--navy),var(--teal));
  display:grid; place-items:center; color:#fff; font-weight:900; font-size:16px; box-shadow:var(--shadow-sm); }
.hjm-login .brand h1 { font-size:21px; color:var(--navy); font-weight:800; margin:0; }

/* Marken-Kopf der Sidebar: nur im Desktop-Layout sichtbar (siehe @media unten). */
.side-brand { display:none; }

/* ---------- Tablet (600–899px): breitere Inhaltsspalte, weiterhin untere Tab-Leiste ----------
 * Schliesst die Luecke zwischen Handy-Spalte (<600px) und Desktop-Sidebar (>=900px):
 * auf dem Tablet fuellt die Spalte den Schirm statt schmaler 460px-Spalte mit Leerraum. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .hjm-frame { max-width:720px; }
  .hjm-login { max-width:460px; }
  .apphead { padding:14px 32px; }
  .apphead h2 { font-size:21px; }
  .screen { padding:16px 32px 48px; }
  .grid2 { gap:16px; }
  .tile { min-height:118px; padding:18px; }
  .tile .ic { font-size:25px; }
  .sec-title { margin-top:22px; }
}

/* ---------- Desktop-Layout (>=900px): Phone-Spalte -> Sidebar + Inhaltsflaeche ----------
 * Rein additiv; Mobil (<900px) bleibt unangetastet. Die untere Tab-Leiste wird zur linken
 * Seitenleiste, der App-Rahmen zum Grid [Sidebar|Kopf] / [Sidebar|Inhalt]. */
@media (min-width: 900px) {
  /* Login vertikal zentriert */
  .hjm-login { justify-content:center; min-height:100vh; max-width:420px; }

  /* App-Rahmen -> Grid: [Sidebar | Kopf] / [Sidebar | Inhalt].
   * Selektor matcht die Auth-Regel (.hjm-app[data-auth="ok"] .hjm-frame{display:flex}),
   * sonst gewinnt deren höhere Spezifität und display:grid greift nicht. */
  .hjm-app[data-auth="ok"] .hjm-frame {
    max-width:none; width:100%; min-height:100vh; box-shadow:none; background:var(--bg);
    display:grid;
    grid-template-columns:264px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"side head" "side main";
  }

  /* Bottom-Tabs -> vertikale Seitenleiste */
  .tabbar {
    grid-area:side; position:static; flex-direction:column; justify-content:flex-start;
    gap:4px; padding:22px 16px; border-top:0; border-right:1px solid var(--line); background:#fff;
  }
  .side-brand { display:flex; align-items:center; gap:11px; margin:2px 8px 18px; }
  .side-brand .logo { width:40px; height:40px; border-radius:11px; flex:none;
    background:linear-gradient(135deg,var(--navy),var(--teal)); color:#fff; font-weight:900;
    font-size:14px; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
  .side-brand span { font-size:16px; font-weight:800; color:var(--navy); letter-spacing:-.2px; }
  .tabbar button {
    flex:none; flex-direction:row; justify-content:flex-start; align-items:center; gap:13px;
    width:100%; padding:12px 14px; border-radius:12px; font-size:14.5px; font-weight:800;
    color:var(--muted); text-align:left; transition:.15s;
  }
  .tabbar button .ic { width:24px; height:24px; font-size:20px; flex:none; }
  .tabbar button:hover { background:var(--tint-2); color:var(--navy); }
  .tabbar button.active { background:var(--tint); color:var(--navy); }
  .tabbar button .lockdot { position:static; top:auto; right:auto; margin-left:auto; }

  /* Kopfzeile über dem Inhalt (Seitentitel + Account) */
  .apphead { grid-area:head; padding:16px 40px; min-height:66px; background:var(--bg);
    border-bottom:1px solid var(--line-2); }
  .apphead h2 { font-size:22px; }

  /* Inhalts-Spalte: zentriert, begrenzte Lesebreite, Kacheln weiterhin 2-spaltig */
  .app { grid-area:main; }
  .screen { max-width:1040px; margin:0 auto; padding:28px 40px 60px; }
  .grid2 { gap:16px; }
  .tile { min-height:120px; padding:18px; }
  .tile .ic { font-size:26px; }
  .tile .t { font-size:15px; }
  .sec-title { margin-top:26px; }
}

/* Lexikon-Akkordeon: Begriff (.li) + aufklappbarer HTML-Inhalt (.lex-body). */
.lex-item { border-bottom:1px solid var(--line, #eef0f4); }
.lex-item:last-child { border-bottom:0; }
.lex-item .li.open .chev { transform:rotate(90deg); }
.lex-item .li .chev { transition:transform .15s ease; }
.lex-body { font-size:14px; line-height:1.5; }
.lex-body > :first-child { margin-top:0; }
.lex-body > :last-child { margin-bottom:0; }
.lex-body img { max-width:100%; height:auto; }

/* ---------- Onboarding-Ausbau: Gate-Views, Formulare, Toggle, Legal, Lesezeichen, Dialog ---------- */

/* Login-/Registrier-/Pending-Umschaltung im Auth-Gate */
.hjm-login .gate-view { display:none; flex-direction:column; gap:14px; width:100%; }
.hjm-login[data-mode="login"]    .gate-view[data-view="login"],
.hjm-login[data-mode="register"] .gate-view[data-view="register"],
.hjm-login[data-mode="pending"]  .gate-view[data-view="pending"],
.hjm-login[data-mode="forgot"]   .gate-view[data-view="forgot"],
.hjm-login[data-mode="reset"]    .gate-view[data-view="reset"] { display:flex; }
.gate-link { color:var(--teal); font-weight:800; text-decoration:none; }
.gate-link:hover { text-decoration:underline; }

/* Zwei-Spalten-Feldzeile in Formularen */
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.row2 .field { margin-bottom:13px; }

/* Inline-Zustimmungs-Checkbox (AGB/Datenschutz) */
.term-check { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--muted);
  font-weight:600; line-height:1.45; margin:2px 0 13px; }
.term-check input { width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--green); }
.term-check a { color:var(--teal); font-weight:800; text-decoration:none; }
.term-check a:hover { text-decoration:underline; }

/* An/Aus-Schalter (Newsletter) */
.switch { position:relative; width:46px; height:27px; border-radius:999px; border:0; flex:none;
  background:var(--line); cursor:pointer; transition:background .18s ease; padding:0; }
.switch .knob { position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%;
  background:#fff; box-shadow:0 2px 5px rgba(16,21,95,.25); transition:transform .18s ease; }
.switch[aria-checked="true"] { background:var(--green); }
.switch[aria-checked="true"] .knob { transform:translateX(19px); }
.switch:disabled { opacity:.5; cursor:default; }

/* Rechtstext-Reader */
.legal-doc .card { line-height:1.6; font-size:14px; color:var(--ink); }
.legal-doc h1, .legal-doc h2, .legal-doc h3 { color:var(--navy); margin:16px 0 8px; line-height:1.3; }
.legal-doc h1 { font-size:19px; } .legal-doc h2 { font-size:16px; } .legal-doc h3 { font-size:14px; }
.legal-doc p { margin:0 0 10px; } .legal-doc ul, .legal-doc ol { margin:0 0 10px 18px; }
.legal-doc a { color:var(--teal); }
.legal-meta { font-size:11px; color:var(--muted-2); font-weight:700; margin-top:14px; }

/* Lesezeichen-Button in Listenzeilen */
.li .bm { flex:none; border:0; background:none; cursor:pointer; font-size:19px; line-height:1;
  color:var(--muted-2); padding:4px; border-radius:8px; }
.li .bm.on { color:var(--amber); }
.li .bm:hover { background:var(--tint-2); }
/* 1:1-Videos: Zeile wie bei den Dateien, der eingebettete Player klappt beim Klick auf.
   Die Trennlinie sitzt am Aufklapp-Element, damit sie unter dem Player steht, nicht darueber. */
.vid-item { border-bottom:1px solid var(--line-2); }
.vid-item:last-child { border-bottom:0; }
.vid-item .li { border-bottom:0; }
.vid-item .li .chev { transition:transform .15s ease; }
.vid-item .li.open .chev { transform:rotate(90deg); }
.vid-body { padding:0 0 13px; }

/* Bestätigungs-Dialog ("Bist du sicher?") */
.hjm-modal { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:rgba(16,21,95,.45); padding:24px; }
.hjm-modal[hidden] { display:none; }
.hjm-modal .box { background:#fff; border-radius:var(--r); padding:22px; max-width:340px; width:100%;
  box-shadow:var(--shadow); text-align:center; }
.hjm-modal h4 { color:var(--navy); font-size:17px; margin:0 0 8px; }
.hjm-modal p { color:var(--muted); font-size:13.5px; line-height:1.5; margin:0 0 18px; }
.hjm-modal .actions { display:flex; gap:10px; }
.hjm-modal .actions .btn { padding:12px; }
.field textarea { resize:vertical; min-height:44px; font-family:inherit; }

/* ---------- Coaching-Feedback (Sternebewertung) ---------- */
.fb-stars { display:flex; gap:6px; justify-content:center; }
.fb-star { background:none; border:0; cursor:pointer; font-size:34px; line-height:1; padding:2px 4px;
  color:var(--line); transition:color .12s, transform .08s; }
.fb-star.on { color:#f6b83a; }
.fb-star:active { transform:scale(.9); }

/* ---------- DNAnalyzer (Gene) ---------- */
/* Punkt je Gen: Farbfamilie der Funktionskategorie aus der Wissensdatenbank, KEINE Ampel.
   Grün = normale Basis · Blau/Indigo = höhere Aktivität (neutral, kein Mangel) ·
   Gelb → Orange → Rot = zunehmend geringere Aktivität · Dunkelrot = Enzym fehlt ·
   Violett = veränderte Regulation · Grau = nicht bestimmbar/nicht getestet. */
.dna-dot { width:12px; height:12px; border-radius:50%; flex:none; background:var(--muted-2); box-shadow:0 0 0 3px rgba(0,0,0,.04); }
.dna-dot.green { background:#4CAF6D; }
.dna-dot.blue { background:#3B82C4; }
.dna-dot.indigo { background:#3A56A8; }
.dna-dot.violet { background:#8E5BC4; }
.dna-dot.yellow { background:#E7C34A; }
.dna-dot.orange { background:#E28A3C; }
.dna-dot.red { background:#D9534F; }
/* „fehlt" ist konzeptionell etwas anderes als „langsam" → eigener Ring als zweites Signal. */
.dna-dot.darkred { background:#B03030; box-shadow:0 0 0 3px rgba(176,48,48,.18); }
.dna-dot.grey, .dna-dot.untested, .dna-dot.unresolved, .dna-dot.locked { background:var(--muted-2); }
/* Gesperrt (Freigabe_Stufe ungleich frei): Ring statt Fuellung, damit die Sperre nicht wie
   ein Befund aussieht. */
.dna-dot.locked { background:transparent; border:2px solid var(--muted-2); box-sizing:border-box; }
.dna-dot.unresolved { box-shadow:0 0 0 3px rgba(0,0,0,.04); opacity:.75; }
/* Legende unter der Genliste. */
.dna-legend { display:flex; flex-wrap:wrap; gap:10px 16px; padding:12px 4px 2px; }
.dna-legend span { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
/* Funktionsabzeichen auf der Detailseite („arbeitet langsam"), Farbe wie der Punkt. */
.dna-badge { display:inline-block; margin:0 0 8px; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:700; color:#fff; background:var(--muted-2); }
.dna-badge.green { background:#4CAF6D; }
.dna-badge.blue { background:#3B82C4; }
.dna-badge.indigo { background:#3A56A8; }
.dna-badge.violet { background:#8E5BC4; }
.dna-badge.yellow { background:#E7C34A; color:#3a2f00; }
.dna-badge.orange { background:#E28A3C; }
.dna-badge.red { background:#D9534F; }
.dna-badge.darkred { background:#B03030; }
.dna-badge.grey { background:var(--muted-2); color:var(--ink); }
/* Kopf der Detailseite: Gen-Name + Kategorie + Status-Pill. */
.dna-head { border-radius:var(--r); padding:18px; color:#fff; margin-bottom:14px;
  background:linear-gradient(135deg,var(--navy),var(--teal)); box-shadow:var(--shadow); }
.dna-head h3 { font-size:20px; font-weight:800; margin:0 0 4px; }
.dna-head .dna-cat { font-size:12.5px; opacity:.9; font-weight:600; }
.dna-head .dna-status { display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  background:rgba(255,255,255,.16); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:800; }
/* Karten-Block je Auswirkung/Symptom/Empfehlung im Tab-Panel. */
.dna-block { padding:13px 0; border-bottom:1px solid var(--line-2); }
.dna-block:last-child { border-bottom:0; }
.dna-block h4 { color:var(--navy); font-size:14px; font-weight:800; margin:0 0 4px; }
.dna-block p { font-size:13px; line-height:1.5; margin:0 0 6px; color:var(--ink); }
.dna-block p:last-child { margin-bottom:0; }
.dna-block .dna-meta { font-size:12px; color:var(--muted); font-weight:600; }
.dna-empty { font-size:13px; color:var(--muted); font-weight:600; padding:10px 2px; }

/* ===== DNAnalyzer: Abdeckung + die drei weiteren Bereiche =====
   Leitregel (Design-Regeln der Enzym-Seiten, von Fabio abgenommen 01.09.2026): jede Liste zeigt
   zugeklappt EINE Zeile, offen bleibt oben nur die Kernaussage. Titel werden ausgeschrieben,
   nie abgeschnitten; die Kategorie steht als kleines Etikett daneben. */

/* Farbfamilie wie im Prototyp (gruen/blau/gelb/orange/rot/grau) - bewusst dieselben Woerter,
   damit Modul, Prototyp und App nicht drei Vokabulare fuehren. */
.dna-chip { display:inline-flex; align-items:center; gap:4px; flex:none; padding:3px 9px;
  border-radius:999px; font-size:11px; font-weight:800; color:#fff; background:var(--muted-2); }
.dna-chip.gruen { background:#4CAF6D; }
.dna-chip.blau { background:#3B82C4; }
.dna-chip.gelb { background:#E7C34A; color:#3a2f00; }
.dna-chip.orange { background:#E28A3C; }
.dna-chip.rot { background:#B03030; }
.dna-chip.grau { background:var(--muted-2); }
/* Sperren sind sichtbar, nicht unsichtbar: eigenes Aussehen, damit sie nicht wie ein Status wirkt. */
.dna-chip.lock { background:#fff; color:var(--navy); border:1.5px solid var(--line); }
.dna-chip.lock svg { flex:none; }

/* Aufklapper. Der Kopf ist die zugeklappte Zeile und traegt Icon, vollen Titel, Etikett. */
.dna-acc { border-bottom:1px solid var(--line-2); }
.dna-acc:last-child { border-bottom:0; }
.dna-acc > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:13px 2px; }
.dna-acc > summary::-webkit-details-marker { display:none; }
.dna-acc > summary::after { content:'\203A'; margin-left:auto; color:var(--muted-2); font-size:20px;
  line-height:1; transform:rotate(90deg); transition:transform .15s ease; flex:none; }
.dna-acc[open] > summary::after { transform:rotate(-90deg); }
.dna-acc > summary .tx { min-width:0; flex:1 1 auto; }
/* Titel ausgeschrieben, nie abgeschnitten (Design-Regel 2). */
.dna-acc > summary .tx b { display:block; font-size:13.5px; font-weight:800; color:var(--navy);
  line-height:1.35; white-space:normal; overflow:visible; text-overflow:clip; }
.dna-acc > summary .tx span { display:block; font-size:12px; color:var(--muted); font-weight:600; }
.dna-acc-body { padding:2px 2px 14px; }
.dna-acc-body > *:first-child { margin-top:0; }
.dna-acc-body .btn { margin-top:10px; }
/* In den Bereichslisten uebernehmen die Aufklapper die Rolle der `.li`-Zeilen. */
.dna-list { padding:2px 14px; }

/* Icon-Kachel je Zeile (Design-Regel 3: jede Zeile hat ein Icon). */
.ic.dna-ic { display:grid; place-items:center; background:var(--tint-2); color:var(--navy); }
.ic.dna-ic.gruen { background:rgba(76,175,109,.14); color:#317a4a; }
.ic.dna-ic.blau { background:rgba(59,130,196,.14); color:#2a5f92; }
.ic.dna-ic.gelb { background:rgba(231,195,74,.20); color:#8a6d00; }
.ic.dna-ic.orange { background:rgba(226,138,60,.16); color:#a25a17; }
.ic.dna-ic.rot { background:rgba(176,48,48,.14); color:#8d2626; }
.ic.dna-ic.grau { background:var(--line-2); color:var(--muted); }
.dna-ico { display:block; }

/* Zahl + Schloss auf den Bereichs-Kacheln. */
.dna-count { display:inline-flex; align-items:center; gap:6px; flex:none; margin-left:auto; }
.dna-count .n { font-size:13px; font-weight:800; color:var(--navy); }

/* Kernaussage oben im geoeffneten Aufklapper. */
.dna-key { padding:8px 0 6px; }
.dna-key b { display:block; font-size:15px; font-weight:800; color:var(--navy); line-height:1.3; }
.dna-key span { display:block; font-size:12.5px; color:var(--muted); font-weight:600; margin-top:2px; }
.dna-key .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; }

/* Zahlenzeile: Fakten, keine Deutung. */
.dna-facts { display:flex; flex-wrap:wrap; gap:8px 18px; padding:8px 0; }
.dna-facts span { font-size:13px; font-weight:800; color:var(--navy); }
.dna-facts i { display:block; font-style:normal; font-size:11px; font-weight:700; color:var(--muted); }

/* Benannter Absatz im Aufklapper. Der Text steht buendig unter seiner Ueberschrift
   (Design-Regel 7): kein geerbter Einzug. */
.dna-feld { padding:8px 0 2px; }
.dna-feld > b { display:block; font-size:12px; font-weight:800; color:var(--navy); margin-bottom:2px; }
.dna-feld > p { margin:0; padding-left:0; font-size:13px; line-height:1.5; color:var(--ink); }
.dna-eyebrow { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin-bottom:4px; }

/* Quellmarke: woher der Text bzw. die Zahl kommt. */
.dna-src { font-size:11px; font-weight:700; color:var(--muted-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin:4px 0 2px; word-break:break-word; }

/* Sichtbare Luecke. Kein Ersatztext, keine leere Karte: was das Modul nicht hergibt, wird benannt. */
.dna-gap { display:flex; gap:9px; align-items:flex-start; border-radius:12px; padding:10px 12px;
  margin:8px 0; background:var(--tint-2); border:1px dashed var(--line);
  font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.5; }
.dna-gap b { color:var(--navy); }
.dna-gap .i { flex:none; }
.dna-gap .dna-src { margin:2px 0 0; }

/* Erklaerte Sperre. Gesperrtes wird gezeigt und begruendet, nicht weggelassen. */
.dna-lockcard { border-radius:var(--r); padding:14px; background:#fff; border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm); margin:10px 0; }
.dna-lockcard .ttl { display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800;
  color:var(--navy); margin-bottom:6px; }
.dna-lockcard p { font-size:13px; line-height:1.5; margin:0 0 6px; color:var(--ink); }

/* Skala der Veranlagung. Die Position kommt aus dem Modul (ANF_KRANKHEIT.Schwellen),
   nicht aus einer Rechnung im Frontend. */
.dna-scale { padding:8px 0 4px; }
.dna-scale .bar { position:relative; height:8px; border-radius:999px;
  background:linear-gradient(90deg,rgba(76,175,109,.35),var(--line),rgba(226,138,60,.45)); }
.dna-scale .mark { position:absolute; top:50%; width:16px; height:16px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--muted-2); border:3px solid #fff;
  box-shadow:0 2px 6px rgba(16,21,95,.25); }
.dna-scale .mark.gruen { background:#4CAF6D; }
.dna-scale .mark.blau { background:#3B82C4; }
.dna-scale .mark.gelb { background:#E7C34A; }
.dna-scale .mark.orange { background:#E28A3C; }
.dna-scale .mark.rot { background:#B03030; }
.dna-scale .lbl { display:flex; justify-content:space-between; margin-top:8px;
  font-size:11px; font-weight:700; color:var(--muted); }

/* Abdeckung der Datei (Befund C9): steht vor den Ergebnissen. */
.dna-cov { margin-top:12px; padding:2px 14px; }
.dna-cov > .dna-acc > summary { gap:10px; flex-wrap:wrap; }
.dna-cov > .dna-acc > summary b { font-size:13.5px; font-weight:800; color:var(--navy); }
.dna-cov .dna-sub { flex-basis:100%; font-size:12px; color:var(--muted); font-weight:600; }
.dna-cov-area { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:9px 0 3px; border-top:1px solid var(--line-2); }
.dna-cov-area b { font-size:12.5px; font-weight:800; color:var(--navy); }
.dna-cov-area span { font-size:12px; font-weight:700; color:var(--muted); }
.dna-cov-list { padding-bottom:4px; }
.dna-cov-row { display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12px;
  font-weight:600; color:var(--muted); }
.dna-cov-row .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--navy);
  font-weight:700; }
.dna-cov-expl { padding:10px 0 2px; border-top:1px solid var(--line-2); }
.dna-cov-expl p { font-size:12.5px; line-height:1.5; margin:6px 0 0; color:var(--ink); }

/* Zwei-Spalten-Zeile (Phaenotypen: Name + Regel). */
.dna-var { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line-2); }
.dna-var .lbl { min-width:0; flex:1; }
.dna-var .a { font-size:13px; font-weight:800; color:var(--navy); }
.dna-var .b { font-size:12px; font-weight:600; color:var(--muted); line-height:1.4; }

/* Warnhinweis in Bernstein: fuer Saetze, die eine Grenze ziehen (Disclaimer, offene Stellen). */
.alert.amber { background:rgba(245,166,35,.10); border:1px solid rgba(245,166,35,.35); color:#8a5b00; }

/* ===== Enzym-Genseite 1:1 zum Prototyp (SPEC A1/A5/A6/A8, Design-Regeln 1-9) ===== */
/* Abschnittsueberschrift in den Reitern. */
.dna-sec { font-size:11.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); margin:18px 0 8px; }
.dna-sec:first-child { margin-top:4px; }

/* A8: Aktivitaetsachse der Uebersicht. Stufen aus f.achse, die Position markiert die API. */
.dna-axis { display:flex; gap:4px; margin:6px 0 4px; }
.dna-axis-seg { flex:1; text-align:center; padding:9px 4px; border-radius:10px; background:var(--tint-2);
  font-size:10.5px; font-weight:800; line-height:1.2; color:var(--muted); }
.dna-axis-seg.on { color:#fff; }
.dna-axis-seg.on.green { background:#4CAF6D; } .dna-axis-seg.on.blue { background:#3B82C4; }
.dna-axis-seg.on.indigo { background:#3A56A8; } .dna-axis-seg.on.violet { background:#8E5BC4; }
.dna-axis-seg.on.yellow { background:#E7C34A; color:#3a2f00; } .dna-axis-seg.on.orange { background:#E28A3C; }
.dna-axis-seg.on.red { background:#D9534F; } .dna-axis-seg.on.darkred { background:#B03030; }
.dna-axis-seg.on.grey { background:var(--muted-2); }
.dna-axis-note { font-size:12px; color:var(--muted); font-weight:600; margin:2px 0 8px; }

/* A8: Kategorie-Chips „Was du tun kannst" -> Sprung in den Empfehlungsreiter. */
.dna-chiprow { display:flex; flex-wrap:wrap; gap:8px; }
.dna-catchip { display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--line);
  background:#fff; border-radius:999px; padding:7px 12px; font-size:12.5px; font-weight:800;
  color:var(--navy); cursor:pointer; }
.dna-catchip .ic { color:var(--navy); }
.dna-catchip .n { background:var(--tint); border-radius:999px; padding:0 7px; font-size:11px; color:var(--muted); }

/* Empfehlungen (A1/A5): je Kategorie eine Karte mit Aufklappern; nur die Dosierung ist gesperrt. */
.dna-catcard { border:1px solid var(--line); border-radius:var(--r); padding:2px 12px 4px; margin:0 0 12px;
  background:#fff; box-shadow:var(--shadow-sm); }
.dna-catcard-hd { display:flex; align-items:center; gap:10px; padding:11px 2px 8px; font-size:13.5px;
  font-weight:800; color:var(--navy); border-bottom:1px solid var(--line-2); }
.dna-catcard-hd .n { margin-left:auto; background:var(--tint); border-radius:999px; padding:1px 9px;
  font-size:12px; font-weight:700; color:var(--muted); }
.dna-lockcard .btn.sm { margin-top:4px; }

/* Icon-Chip mit Farbton (Design-Regel 6b). Nur die Ton-Varianten bekommen die Chip-Groesse,
   damit die Chips der drei Bereiche (ohne Ton) unveraendert bleiben. */
.ic.dna-ic[class*="ton-"] { width:34px; height:34px; border-radius:10px; flex:none; }

/* A6: Bereichs-Kacheln. Raster nach Kategorie, Tippen oeffnet ein Blatt. */
.dna-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:8px; margin:2px 0 4px; }
.dna-tile { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  border:1px solid var(--line); border-radius:14px; padding:11px; cursor:pointer; text-align:left;
  background:#fff; font:inherit; }
.dna-tile:active { transform:scale(.98); }
.dna-tile .ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.dna-tile b { font-size:12.5px; font-weight:800; line-height:1.2; color:var(--navy); }
.dna-tile .n { position:absolute; top:9px; right:11px; font-size:11px; font-weight:800; color:var(--muted); }

/* Farbtoene (Design-Regel 6b): Kachelflaeche als helle Tinte, Icon-Chip und Titel im Vollton. */
.ic.dna-ic.ton-nerv { background:rgba(33,55,91,.11); color:#21375B; }
.ic.dna-ic.ton-psyche { background:rgba(70,80,140,.11); color:#46508C; }
.ic.dna-ic.ton-schlaf { background:rgba(47,92,134,.11); color:#2F5C86; }
.ic.dna-ic.ton-kreis { background:rgba(42,122,158,.11); color:#2A7A9E; }
.ic.dna-ic.ton-bauch { background:rgba(42,140,147,.12); color:#2A8C93; }
.ic.dna-ic.ton-schutz { background:rgba(30,122,114,.12); color:#1E7A72; }
.ic.dna-ic.ton-energie { background:rgba(62,124,166,.11); color:#3E7CA6; }
.ic.dna-ic.ton-stoff { background:rgba(74,111,165,.11); color:#4A6FA5; }
.dna-tile.ton-nerv { background:rgba(33,55,91,.06); } .dna-tile.ton-nerv .ic { background:rgba(33,55,91,.14); color:#21375B; } .dna-tile.ton-nerv b { color:#21375B; }
.dna-tile.ton-psyche { background:rgba(70,80,140,.06); } .dna-tile.ton-psyche .ic { background:rgba(70,80,140,.14); color:#46508C; } .dna-tile.ton-psyche b { color:#46508C; }
.dna-tile.ton-schlaf { background:rgba(47,92,134,.06); } .dna-tile.ton-schlaf .ic { background:rgba(47,92,134,.14); color:#2F5C86; } .dna-tile.ton-schlaf b { color:#2F5C86; }
.dna-tile.ton-kreis { background:rgba(42,122,158,.06); } .dna-tile.ton-kreis .ic { background:rgba(42,122,158,.14); color:#2A7A9E; } .dna-tile.ton-kreis b { color:#2A7A9E; }
.dna-tile.ton-bauch { background:rgba(42,140,147,.07); } .dna-tile.ton-bauch .ic { background:rgba(42,140,147,.15); color:#2A8C93; } .dna-tile.ton-bauch b { color:#2A8C93; }
.dna-tile.ton-schutz { background:rgba(30,122,114,.07); } .dna-tile.ton-schutz .ic { background:rgba(30,122,114,.15); color:#1E7A72; } .dna-tile.ton-schutz b { color:#1E7A72; }
.dna-tile.ton-energie { background:rgba(62,124,166,.06); } .dna-tile.ton-energie .ic { background:rgba(62,124,166,.14); color:#3E7CA6; } .dna-tile.ton-energie b { color:#3E7CA6; }
.dna-tile.ton-stoff { background:rgba(74,111,165,.06); } .dna-tile.ton-stoff .ic { background:rgba(74,111,165,.14); color:#4A6FA5; } .dna-tile.ton-stoff b { color:#4A6FA5; }

/* Design-Regel 6a: durchscheinendes Blatt von unten. Ohne backdrop-filter greift ein
   deckender Hintergrund. Der Ton kommt von der Kachel, ueber die geoeffnet wurde. */
.dna-sheet-ov { position:fixed; inset:0; z-index:70; background:rgba(16,21,95,.30);
  display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .22s; }
.dna-sheet-ov.show { opacity:1; }
.dna-sheet { width:100%; max-width:640px; max-height:84vh; overflow:auto; border-radius:22px 22px 0 0;
  background:rgba(255,255,255,.89); -webkit-backdrop-filter:blur(34px) saturate(190%) brightness(1.06);
  backdrop-filter:blur(34px) saturate(190%) brightness(1.06); border-top:1px solid rgba(255,255,255,.6);
  padding:8px 16px calc(24px + env(safe-area-inset-bottom)); transform:translateY(16px); transition:transform .24s; }
.dna-sheet-ov.show .dna-sheet { transform:none; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .dna-sheet { background:#fff; } }
.dna-sheet .grip { width:40px; height:4px; border-radius:999px; background:var(--muted-2); opacity:.5; margin:6px auto 12px; }
.dna-sheet .hd { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.dna-sheet .hd b { flex:1; font-size:16px; font-weight:800; color:var(--navy); }
.dna-sheet .hd .x { flex:none; border:0; background:var(--tint-2); width:30px; height:30px; border-radius:50%;
  font-size:20px; line-height:1; color:var(--muted); cursor:pointer; }
.dna-sheet.ton-nerv .hd b { color:#21375B; } .dna-sheet.ton-nerv .grip { background:#21375B; }
.dna-sheet.ton-psyche .hd b { color:#46508C; } .dna-sheet.ton-psyche .grip { background:#46508C; }
.dna-sheet.ton-schlaf .hd b { color:#2F5C86; } .dna-sheet.ton-schlaf .grip { background:#2F5C86; }
.dna-sheet.ton-kreis .hd b { color:#2A7A9E; } .dna-sheet.ton-kreis .grip { background:#2A7A9E; }
.dna-sheet.ton-bauch .hd b { color:#2A8C93; } .dna-sheet.ton-bauch .grip { background:#2A8C93; }
.dna-sheet.ton-schutz .hd b { color:#1E7A72; } .dna-sheet.ton-schutz .grip { background:#1E7A72; }
.dna-sheet.ton-energie .hd b { color:#3E7CA6; } .dna-sheet.ton-energie .grip { background:#3E7CA6; }
.dna-sheet.ton-stoff .hd b { color:#4A6FA5; } .dna-sheet.ton-stoff .grip { background:#4A6FA5; }

/* „Coming soon"-Kachel (z. B. Fragecenter): ausgegraut, nicht interaktiv */
.tile.soon { opacity:.6; filter:grayscale(.5); cursor:default; }
.tile.soon:active { transform:none; }
.tile .soon-badge { position:absolute; top:8px; right:8px; font-size:9px; font-weight:800;
  letter-spacing:.4px; text-transform:uppercase; background:var(--muted-2); color:#fff;
  padding:2px 6px; border-radius:6px; }

/* ---------- Anamnese-Formular (38 Felder, in app.js aus /me/anamnesis gerendert) ---------- */
.anf-section { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:var(--teal); margin:22px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line-2); }
.anf-section:first-child { margin-top:2px; }
.anf { margin-bottom:16px; }
.anf-label { display:block; font-size:12px; font-weight:800; color:var(--navy); margin-bottom:7px; }
.anf-req { color:var(--red); font-weight:800; }
.anf-input { width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 12px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--ink); }
.anf-input:focus { outline:2px solid var(--teal); }
textarea.anf-input { resize:vertical; min-height:44px; }
.anf-chips { display:flex; flex-wrap:wrap; gap:8px; }
.anf-chip { border:1.5px solid var(--line); background:#fff; color:var(--navy); border-radius:999px;
  padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; line-height:1.15; }
.anf-chip[aria-pressed="true"] { background:var(--navy); border-color:var(--navy); color:#fff; }
.anf-chip:active { transform:translateY(1px); }
.anf-scale { display:grid; grid-template-columns:repeat(10,1fr); gap:5px; }
.anf-scale button { border:1.5px solid var(--line); background:#fff; color:var(--navy); border-radius:9px;
  padding:9px 0; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; }
.anf-scale button[aria-pressed="true"] { background:var(--green); border-color:var(--green-d); color:#fff; }
.anf-hidden { display:none !important; }
.anf-invalid .anf-input { border-color:var(--red); }
.anf-invalid .anf-label { color:var(--red); }
.anf-err { display:none; font-size:11px; font-weight:700; color:var(--red); margin-top:5px; }
.anf-invalid .anf-err { display:block; }

/* ---------- Rezepte (Katalog + Detail) ---------- */
.recipe-hero { width:100%; max-height:220px; object-fit:cover; border-radius:14px; margin:6px 0 2px; display:block; }
.recipe-macros { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 2px; }
.recipe-macros .macro { display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px;
  font-size:11px; font-weight:800; background:var(--tint); color:var(--navy); }
.recipe-tags { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.recipe-tags .rtag { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:700; background:rgba(21,119,155,.12); color:var(--teal); }
ol.recipe-steps { margin:2px 0 0; padding:0; list-style:none; counter-reset:step; }
ol.recipe-steps li { position:relative; padding:2px 0 14px 40px; counter-increment:step;
  font-size:14px; line-height:1.55; color:var(--navy); }
ol.recipe-steps li::before { content:counter(step); position:absolute; left:0; top:0; width:26px; height:26px;
  border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--navy)); color:#fff;
  font-size:12px; font-weight:800; display:grid; place-items:center; }
ol.recipe-steps li:last-child { padding-bottom:2px; }

/* Supplement-Plan (Fahrplan-Screen): Produkt-Link + Rabattcode je Position. */
.sp-link { display:inline-block; margin-top:6px; font-size:13px; font-weight:700; color:var(--teal); text-decoration:none; }
.sp-link:hover { text-decoration:underline; }
.sp-code { display:inline-block; margin-top:6px; font-size:12px; font-weight:700; color:var(--navy);
  background:var(--tint); border:1px dashed var(--teal); border-radius:8px; padding:2px 8px; }

/* PWA-Update-Hinweis (vollflaechig unten): neue Version verfuegbar (P2-pwaadopt). */
.hjm-update-bar { position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--navy); color:#fff;
  box-shadow:0 -6px 20px rgba(16,21,95,.28); }
.hjm-update-bar span { font-size:13.5px; font-weight:600; }
.hjm-update-bar .btn { width:auto; padding:9px 16px; font-size:13px; border-radius:11px;
  background:#fff; color:var(--navy); box-shadow:none; flex:none; }

/* Install-Nudge-Banner (dezent unten, wegtippbar; Haeufigkeit gedrosselt). */
.hjm-install-banner { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:55; display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:10px 12px; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 10px 30px rgba(16,21,95,.16); }
.hjm-install-banner span { font-size:13px; font-weight:700; color:var(--navy); }
.hjm-install-actions { display:flex; align-items:center; gap:8px; flex:none; }
.hjm-install-banner .btn { width:auto; padding:8px 14px; font-size:13px; border-radius:11px; }
.hjm-install-banner .btn.ghost { padding:6px 10px; font-size:16px; line-height:1; }

/* ---------- Engine-Motor (Kundensicht): Heute-Abhaken, Scores, Ziele, Fahrplan ---------- */
/* Rundes Häkchen zum Abhaken einer Tagesaufgabe (Ja/Nein-Baustein). */
.eng-check { flex:none; width:34px; height:34px; border-radius:50%; border:2px solid var(--line);
  background:#fff; color:var(--green-d); font-size:17px; font-weight:900; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:transform .08s, background .12s, border-color .12s; }
.eng-check.on { background:linear-gradient(135deg,var(--green),var(--green-d)); border-color:transparent; color:#fff; }
.eng-check:active { transform:scale(.9); }
.li.eng-done .tx b { text-decoration:line-through; color:var(--muted); }
/* Mengen-/Dauer-Eintrag: schmales Zahlenfeld + OK. */
.eng-log { display:flex; align-items:center; gap:6px; flex:none; }
.eng-in { width:64px; padding:8px 8px; border:1px solid var(--line); border-radius:10px; font-size:14px;
  font-family:inherit; text-align:right; background:#fff; color:var(--ink); }
.eng-in:focus { outline:2px solid var(--teal); }
.eng-logbtn { width:auto; padding:8px 12px; font-size:13px; border-radius:10px; }
/* Nicht-blockierender Kurz-Hinweis (Backdating außerhalb der Woche u. Ä.). */
.eng-toast { position:fixed; left:50%; bottom:88px; transform:translate(-50%,12px); z-index:60;
  max-width:82%; background:var(--navy); color:#fff; font-size:13px; font-weight:700; line-height:1.35;
  padding:11px 16px; border-radius:12px; box-shadow:var(--shadow); opacity:0; transition:opacity .25s, transform .25s;
  pointer-events:none; text-align:center; }
.eng-toast.show { opacity:1; transform:translate(-50%,0); }

/* Video-Fragecenter (Community, je Lektion) */
.lesson-qa { margin:10px 2px 0; }
.qa-toggle { width:auto; padding:8px 14px; font-size:13px; }
.qa-panel { margin-top:12px; border-top:1px solid var(--line-2); padding-top:12px; }
.qa-list { display:flex; flex-direction:column; gap:10px; }
.qa-item { background:var(--tint-2); border:1px solid var(--line-2); border-radius:12px; padding:11px 13px; }
.qa-meta { font-size:12px; color:var(--navy); display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:5px; }
.qa-body { font-size:14px; color:var(--ink); white-space:pre-wrap; }
.qa-answer { margin-top:9px; padding:9px 11px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.qa-answer b { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--teal); margin-bottom:3px; }
.qa-answer div { font-size:14px; color:var(--ink); white-space:pre-wrap; }
.qa-badge { font-size:10px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  background:var(--muted-2); color:#fff; padding:2px 7px; border-radius:6px; }
.qa-badge.ok { background:var(--teal); }
.qa-actions { margin-top:8px; display:flex; gap:14px; }
.lnk { background:none; border:0; padding:0; font-size:12px; font-weight:700; color:var(--teal); cursor:pointer; }
.lnk.danger { color:var(--red); }
.lnk:disabled { opacity:.5; cursor:default; }
.qa-ask { margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.qa-input { width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:12px;
  font-family:inherit; font-size:14px; resize:vertical; min-height:44px; }
.qa-check { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--muted); font-weight:600; }
.qa-check input { margin-top:2px; flex:none; }
.qa-send { width:auto; align-self:flex-start; padding:10px 18px; font-size:14px; }

/* ---------- „Messen"-Vergleich unter einer Blutwert-Zeile (P3-community) ---------- */
.bv-row { cursor:pointer; }
.bv-chev { transition:transform .15s ease; }
.bv-row.open .bv-chev { transform:rotate(90deg); }
.bv-compare { padding:14px 4px 6px; border-bottom:1px solid var(--line-2); }
.cmp-track { position:relative; height:10px; border-radius:99px; background:var(--tint);
  margin:6px 6px 16px; }
.cmp-band { position:absolute; top:0; bottom:0; background:rgba(111,206,120,.35); border-radius:99px; }
.cmp-mark { position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
  transform:translate(-50%,-50%); box-shadow:0 0 0 2px #fff; }
.cmp-mark.me { background:var(--navy); width:14px; height:14px; }
.cmp-mark.all { background:var(--teal); }
.cmp-mark.grp { background:var(--amber); }
.cmp-legend { display:flex; flex-direction:column; gap:5px; }
.cmp-lg { font-size:12px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:7px; }
.cmp-lg b { color:var(--navy); font-weight:800; }
.cmp-lg i { width:11px; height:11px; border-radius:50%; flex:none; }
.cmp-lg.me i { background:var(--navy); }
.cmp-lg.opt i { background:var(--green-d); }
.cmp-lg.all i { background:var(--teal); }
.cmp-lg.grp i { background:var(--amber); }
.cmp-hint { display:block; width:100%; text-align:left; margin-top:10px; background:var(--tint-2);
  border:0; border-radius:12px; padding:10px 12px; color:var(--teal); font-weight:700;
  font-size:12px; font-family:inherit; cursor:pointer; }
.qa-nudge { display:block; width:100%; text-align:left; background:var(--tint-2); border:0;
  border-radius:12px; padding:10px 12px; color:var(--teal); font-weight:700; font-size:12px;
  font-family:inherit; cursor:pointer; line-height:1.45; }

/* ================= 1:1-Chat mit dem Coach (C2/C10) =================
   Ein Thread im Coaching-Bereich: oben der Verlauf (scrollt fuer sich), unten die Eingabe.
   Die Hoehe kommt aus --cochat-h (app.js misst die freie Flaeche), damit die Eingabezeile auf
   jedem Geraet sichtbar bleibt und nicht die ganze Seite scrollt. */
.cochat { display:flex; flex-direction:column; height:var(--cochat-h, 60vh); min-height:320px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; }
/* dvh nach vh: auf dem Telefon aendert sich vh nicht, wenn die Browserleiste ein- und ausfaehrt,
   dvh schon. Ohne das rutscht die Eingabezeile beim Tippen unter die Leiste. Alte Browser
   ignorieren die zweite Zeile und behalten den vh-Wert. */
@supports (height:100dvh) { .cochat { height:var(--cochat-h, 60dvh); } }
.cochat-scroll { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg,var(--tint-2),var(--card) 110px);
  /* Ohne contain scrollt am Ende des Verlaufs die ganze Seite weiter. Im Chat faellt das
     besonders auf, weil man staendig bis ans Ende scrollt. */
  overscroll-behavior:contain; }
/* Der Tagestrenner bleibt beim Scrollen oben stehen, sonst weiss man in langen Verlaeufen
   nicht mehr, welcher Tag gerade sichtbar ist. */
.cochat-day { align-self:center; position:sticky; top:0; z-index:1;
  font-size:11px; font-weight:800; color:var(--muted);
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px 10px; margin:4px 0; }
.comsg { max-width:82%; border-radius:16px; padding:9px 12px; font-size:14px; line-height:1.45;
  box-shadow:var(--shadow-sm); overflow-wrap:anywhere; }
.comsg.from-coach { align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:6px; }
.comsg.from-member { align-self:flex-end; background:linear-gradient(135deg,var(--navy),var(--navy-2)); color:#fff; border-bottom-right-radius:6px; }
.comsg .by { display:block; font-size:11px; font-weight:800; color:var(--teal); margin-bottom:2px; }
/* Auf der dunklen eigenen Blase traegt Deckkraft den Rueckzug; auf der hellen Coach-Blase
   wuerde 70 % Deckkraft den Kontrast unter das Lesbare druecken, dort also eine echte Farbe. */
.comsg .foot { display:block; margin-top:3px; font-size:10.5px; opacity:.7; text-align:right; }
.comsg.from-coach .foot { opacity:1; color:var(--muted); }
.comsg .tag { display:inline-block; margin-right:6px; font-size:10px; font-weight:900; letter-spacing:.4px;
  text-transform:uppercase; color:var(--muted); }
.comsg img { display:block; max-width:100%; border-radius:11px; margin:2px 0; }
.comsg audio { display:block; width:210px; max-width:100%; margin:2px 0; }
.cochat-empty { margin:auto; text-align:center; color:var(--muted); font-size:13px; font-weight:600; padding:0 18px; }

.cochat-compose { display:flex; align-items:flex-end; gap:8px; padding:10px; border-top:1px solid var(--line-2); background:#fff; }
.cochat-compose textarea { flex:1; resize:none; min-height:40px; max-height:120px; border:1px solid var(--line);
  border-radius:13px; padding:10px 13px; font-size:14px; line-height:1.3; font-family:inherit; color:var(--ink); }
.cochat-compose textarea:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.cochat-attach, .cochat-mic, .cochat-send { width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background:#fff; display:grid; place-items:center; cursor:pointer; font-size:16px; flex:none; color:var(--navy); }
.cochat-send { background:linear-gradient(135deg,var(--navy),var(--teal)); border-color:transparent; color:#fff; }
/* Tastaturfokus muss man sehen. Die drei Knoepfe hatten vorher gar keinen Stil dafuer. */
.cochat-attach:focus-visible, .cochat-mic:focus-visible, .cochat-send:focus-visible {
  outline:2px solid var(--teal); outline-offset:2px; }
.cochat-mic.rec { background:var(--red); border-color:var(--red); color:#fff; animation:hjm-pulse 1.1s infinite; }
@keyframes hjm-pulse { 50% { opacity:.55; } }
@media (prefers-reduced-motion: reduce){ .cochat-mic.rec { animation:none; } }
.cochat-note { padding:0 13px 10px; font-size:12px; color:var(--muted); }
.cochat-note.err { color:var(--red); font-weight:700; }

/* Zahl ungelesener Coach-Nachrichten am Chat-Reiter. */
.subnav .conum[hidden] { display:none; }
.subnav .conum { display:inline-grid; place-items:center; margin-left:6px; min-width:17px; height:17px; padding:0 5px;
  border-radius:999px; background:var(--red); color:#fff; font-size:10.5px; font-weight:900; line-height:1; }
/* --- „Ansicht als Kunde" (Team/Support): unuebersehbares Band ueber der ganzen App ---------
   Absicht: in keiner Sekunde Zweifel, in wessen Konto man gerade schaut. Deshalb fest oben,
   volle Breite, warnfarben — und die App rutscht darunter (padding-top am Wrapper). */
.hjm-impbar { position:fixed; top:0; left:0; right:0; z-index:9999;
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  background:var(--amber); color:#3a2a00; font-family:var(--font); font-weight:800;
  font-size:13px; line-height:1.3; box-shadow:0 2px 10px rgba(16,21,95,.18); }
.hjm-impbar[hidden] { display:none; }
.hjm-impbar .eye { flex:none; font-size:15px; }
.hjm-impbar .txt { flex:1 1 auto; min-width:0; }
.hjm-impbar .txt b { font-weight:900; }
.hjm-impbar .ro { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px;
  background:rgba(0,0,0,.14); font-size:11px; font-weight:800; white-space:nowrap; }
.hjm-impbar button { flex:none; border:0; border-radius:99px; padding:6px 13px; cursor:pointer;
  background:#3a2a00; color:#fff; font-family:inherit; font-weight:800; font-size:12px; }
.hjm-app.imp-on { padding-top:38px; }

/* --- Fitness („Mein Training"): kompakte Aktionen, Eingabefelder, Filterleiste -------------
   Hintergrund: .btn ist bewusst 100 % breit, weil es fast immer die eine Haupt-Aktion einer
   Seite ist. In Kopfzeilen und Listenzeilen (Löschen, ×, „+ Plan") schiebt genau das den
   eigentlichen Inhalt weg — dort greifen die schmalen Varianten unten. */
.btn.sm { flex:none; white-space:nowrap; }
.btn.icon { width:auto; flex:none; padding:0; min-width:36px; height:36px;
  font-size:17px; line-height:1; border-radius:11px; box-shadow:none; }
.fx-input { flex:1 1 auto; width:100%; min-width:0; padding:11px 12px; border:1px solid var(--line);
  border-radius:10px; background:#fff; font-family:inherit; font-size:14px; font-weight:600; color:var(--ink); }
.fx-input::placeholder { color:var(--muted-2); font-weight:600; }
.fx-input:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
/* Kopfzeile mit Titel + schmaler Aktion: der Titel darf schrumpfen, der Knopf nicht. */
.fx-head { gap:10px; }
.fx-head .ttl { flex:1 1 auto; min-width:0; font-size:17px; font-weight:800; color:var(--navy); }
.fx-count { margin:0 0 9px 2px; font-size:12px; font-weight:700; color:var(--muted); }
/* Satz-Eingabe im laufenden Workout: die drei Zahlenfelder teilen sich die Breite, der
   Bestaetigen-Knopf bleibt so breit wie sein Text. Vorher hatten die Felder feste Pixel-
   Breiten und der Knopf flex:1 - dadurch nahm der Knopf fast die ganze Zeile ein. */
/* Titelbild der Uebung: quadratisch, volle Kartenbreite. Feste Seitenverhaeltnis-Angabe,
   damit beim Nachladen nichts springt (die Quelle ist immer 1:1). */
.fx-hero { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px;
  background:var(--tint-2); margin:0 0 12px; }
/* Muskelkarte: eine oder zwei Ansichten nebeneinander. Fehlt eine Ansicht, steht die
   vorhandene allein und bekommt die halbe Breite - das ist kein Fehlzustand, sondern der
   Normalfall (erzeugt wird nur die Seite, auf der ein Muskel leuchtet). */
.fx-karten { display:flex; gap:10px; justify-content:center; }
.fx-karte { flex:0 1 50%; margin:0; text-align:center; }
.fx-karte img { display:block; width:100%; height:auto; aspect-ratio:472/860; }
.fx-karte figcaption { margin-top:4px; font-size:12px; font-weight:700; color:var(--muted); }
.fx-set { display:flex; align-items:center; gap:6px; margin-top:6px; }
.fx-set .fx-input { flex:1 1 0; min-width:0; padding:9px 10px; text-align:center; }
.fx-set .btn.sm { flex:none; padding:9px 12px; }

/* ---- Ernaehrungstracking ---- */
/* Makro-Kacheln (Tagesbilanz + Mengen-Vorschau). Farben je Naehrstoff kommen inline aus
   app.js (Farbschluessel der Uebergabe), damit sie mit der App eine Quelle haben. */
.es-macros { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.es-macro { flex:1 1 0; min-width:64px; border:1px solid rgba(255,255,255,.25); border-radius:10px;
  padding:6px 8px; text-align:center; }
.es-macro span { display:block; font-size:11px; font-weight:700; opacity:.85; }
.es-macro b { font-size:15px; font-weight:800; }
.es-macro b i { font-style:normal; font-weight:700; font-size:11px; opacity:.75; }
/* In der Mengen-Vorschau (heller Grund) tragen die Kacheln eine eigene Randfarbe (inline). */
.card .es-macro, [data-screen="essen-menge"] .es-macro { border-color:var(--line); }
[data-screen="essen-menge"] .es-macro span { color:var(--muted); opacity:1; }

.es-warn { color:#C08B4F; font-weight:800; }   /* Bernstein: nur Warnung (Farbschluessel) */

.es-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.es-chip { border:1px solid var(--line); background:#fff; color:var(--navy); border-radius:999px;
  padding:6px 12px; font-size:13px; font-weight:700; cursor:pointer; }
.es-chip.on { background:var(--teal); border-color:var(--teal); color:#fff; }

.es-urteil { display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  padding:8px 10px; border:1px solid var(--line); border-radius:10px; margin-top:6px; background:#fff; }
.es-urteil b { color:var(--navy); font-size:13px; font-weight:800; }
.es-urteil span { color:var(--muted); font-size:12px; font-weight:600; text-align:right; }
.es-urteil.meins { border-color:#C08B4F; background:rgba(192,139,79,.08); }
.es-urteil.meins b { color:#8a6329; }

/* Barcode-Scanner: Kamerabild mit Zielrahmen. */
.es-scan-wrap { position:relative; width:100%; aspect-ratio:4/3; background:#000; border-radius:12px;
  overflow:hidden; }
.es-scan-wrap video { width:100%; height:100%; object-fit:cover; display:block; }
.es-scan-rahmen { position:absolute; left:12%; right:12%; top:38%; bottom:38%;
  border:2px solid rgba(255,255,255,.9); border-radius:8px; box-shadow:0 0 0 100vmax rgba(0,0,0,.25); }
.es-teilen { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px;
  font-weight:600; color:var(--navy); cursor:pointer; }
.es-teilen input { width:18px; height:18px; }

.es-fotos { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.es-foto { position:relative; width:84px; height:84px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); }
.es-foto img { width:100%; height:100%; object-fit:cover; display:block; }
.es-foto-x { position:absolute; top:2px; right:2px; width:22px; height:22px; border:0;
  border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:16px; line-height:1;
  cursor:pointer; }
/* ---------------- Trainingsprofil (Onboarding) ----------------
   Ein Formular fuer Onboarding und Bearbeiten. Auswahl ueber Chips (Einfach- und Mehrfach-
   auswahl), Tage als Zahlenreihe und Minuten als Stepper (beide teilen die Daily-Check-Optik). */
.fx-onb { text-align:center; }
.fx-onb .t { display:block; font-size:17px; font-weight:800; color:var(--navy); line-height:1.3; }
.fx-onb p { margin:8px 0 14px; font-size:13.5px; font-weight:600; color:var(--muted); line-height:1.5; }
.fx-prof .btn { margin-top:0; }
.fx-field { margin-top:16px; }
.fx-field .lbl { display:block; font-size:13px; font-weight:800; color:var(--navy); margin:0 0 9px 2px; }
.fx-field .hint { margin:7px 2px 0; font-size:11.5px; font-weight:600; color:var(--muted); line-height:1.4; }
.fx-chips { display:flex; flex-wrap:wrap; gap:8px; }
.fx-chip { flex:0 0 auto; padding:9px 14px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--muted); font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .12s ease, color .12s ease, border-color .12s ease; }
.fx-chip:hover { border-color:var(--teal); color:var(--teal); }
.fx-chip.on { background:var(--teal); border-color:var(--teal); color:#fff; }
.fx-chip:focus-visible { outline:2px solid var(--navy); outline-offset:1px; }
.fx-prof-status { margin:12px 2px 0; }

/* Satz-Vorgabe im laufenden Workout: ruhiger Hinweis ueber der Eingabezeile. */
.fx-sugg { margin:8px 0 2px; padding:9px 11px; border-radius:10px; background:var(--tint-2,#f3f6f8);
  font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45; }
.fx-sugg b { display:block; color:var(--navy); font-weight:800; }
.fx-sugg .gr { display:block; margin-top:2px; }
.fx-sugg .wu { display:block; margin-top:2px; color:var(--teal); font-weight:700; }

/* ---------------- Daily Check ----------------
   Tippfreundlich vor huebsch: die Stufen einer Skala sind Knoepfe in einer Reihe, mindestens
   40 px hoch, und teilen sich die Zeile gleichmaessig (flex:1 1 0 mit min-width:0). Bristol hat
   sieben Stufen, der Schweregrad vier und ein Rating fuenf - alle drei muessen ohne
   Seitwaertsrollen auf ein Telefon passen, deshalb schrumpft die Schrift statt der Reihe. */
.dc-status { margin:12px 2px 0; font-size:12.5px; font-weight:700; color:var(--muted); }
.dc-status.err { color:var(--red); }
.dc-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.dc-field { background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 14px; box-shadow:var(--shadow-sm); }
/* Offene Pflichtfrage: eine ruhige Markierung an der Kante, kein rotes Warnschild. Der Check
   soll einladen und nicht mahnen. */
.dc-field.offen { border-left:3px solid var(--amber); }
.dc-q { margin-bottom:10px; }
.dc-q b { display:block; font-size:14px; font-weight:800; color:var(--navy); line-height:1.35; }
.dc-q span { display:block; margin-top:2px; font-size:11.5px; font-weight:600; color:var(--muted); line-height:1.4; }

.dc-scale { display:flex; gap:6px; }
.dc-pip { flex:1 1 0; min-width:0; min-height:42px; padding:8px 4px; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted);
  font-family:inherit; font-size:12.5px; font-weight:800; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:background .12s ease, color .12s ease, border-color .12s ease; }
.dc-pip:hover { border-color:var(--teal); color:var(--teal); }
.dc-pip.on { background:var(--teal); border-color:var(--teal); color:#fff; }
.dc-pip:focus-visible { outline:2px solid var(--navy); outline-offset:1px; }

.dc-step { display:flex; align-items:center; gap:10px; }
.dc-stepbtn { width:44px; height:44px; flex:none; cursor:pointer; border:1px solid var(--line);
  border-radius:12px; background:#fff; color:var(--navy); font-family:inherit; font-size:20px; font-weight:800; }
.dc-stepbtn:hover { border-color:var(--teal); color:var(--teal); }
.dc-stepbtn:focus-visible { outline:2px solid var(--navy); outline-offset:1px; }
.dc-stepval { min-width:44px; text-align:center; font-size:20px; font-weight:800; color:var(--navy);
  font-variant-numeric:tabular-nums; }
.dc-unit { font-size:12.5px; font-weight:700; color:var(--muted); }

.dc-num { display:flex; align-items:center; gap:9px; }
.dc-num input { flex:1 1 0; min-width:0; padding:11px 12px; border:1px solid var(--line);
  border-radius:12px; background:#fff; font-family:inherit; font-size:16px; font-weight:700;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.dc-num input:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }

.dc-note { width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid var(--line);
  border-radius:12px; background:#fff; font-family:inherit; font-size:14px; font-weight:600;
  color:var(--ink); line-height:1.45; resize:vertical; }
.dc-note:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.dc-note::placeholder { color:var(--muted-2); font-weight:600; }

/* Rueckblick: je Feld eine Zeile, damit Skalen nicht auf eine gemeinsame Achse gezwungen
   werden. Die Zahl steht im Punkt, die Deckkraft ist nur eine Lesehilfe. */
.dc-histwrap { overflow-x:auto; padding:12px; }
.dc-hist { border-collapse:collapse; width:100%; font-size:11.5px; }
.dc-hist th, .dc-hist td { padding:5px 4px; text-align:center; font-weight:700; color:var(--muted); }
.dc-hist thead th { font-size:10.5px; color:var(--muted-2); white-space:nowrap; }
.dc-hist tbody th { text-align:left; color:var(--navy); font-weight:800; white-space:nowrap;
  padding-right:10px; max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.dc-dot { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:50%; background:var(--teal); color:#fff; font-size:11px; font-weight:800;
  font-variant-numeric:tabular-nums; }
.dc-hist .dc-leer { color:var(--muted-2); }