/* Genetik im HealthHub (genetik.js, App 2. Version P10). Präfix gk-. Vorlage Prototyp genetik.py.
   Nur Tokens aus app.css; die Bereichstöne (Design-Regel 6b) gelten nur für Kacheln und Blätter,
   im Dunkelmodus als Tinte auf --card und mit aufgehellter Schrift. */

:root { --gk-verlauf:linear-gradient(150deg,#261A68 0%,#7454C9 100%); --gk-lila:#5B3FB0; --gk-lila-100:rgba(116,84,201,.13); }
html[data-theme="dark"] { --gk-lila:#C3B4FF; --gk-lila-100:rgba(195,180,255,.16); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --gk-lila:#C3B4FF; --gk-lila-100:rgba(195,180,255,.16); } }

/* Bereichstöne */
.gk-k.ton-nerv, .gk-blatt__f.ton-nerv { --t:#21375B; --t-rgb:33,55,91; }
.gk-k.ton-psyche, .gk-blatt__f.ton-psyche { --t:#46508C; --t-rgb:70,80,140; }
.gk-k.ton-schlaf, .gk-blatt__f.ton-schlaf { --t:#2F5C86; --t-rgb:47,92,134; }
.gk-k.ton-kreis, .gk-blatt__f.ton-kreis { --t:#2A7A9E; --t-rgb:42,122,158; }
.gk-k.ton-bauch, .gk-blatt__f.ton-bauch { --t:#2A8C93; --t-rgb:42,140,147; }
.gk-k.ton-schutz, .gk-blatt__f.ton-schutz { --t:#1E7A72; --t-rgb:30,122,114; }
.gk-k.ton-energie, .gk-blatt__f.ton-energie { --t:#3E7CA6; --t-rgb:62,124,166; }
.gk-k.ton-stoff, .gk-blatt__f.ton-stoff { --t:#4A6FA5; --t-rgb:74,111,165; }
.gk-k.ton-gen, .gk-blatt__f.ton-gen { --t:#5B3FB0; --t-rgb:91,63,176; }
.gk-k, .gk-blatt__f { --t-schrift:var(--t); }
html[data-theme="dark"] .gk-k, html[data-theme="dark"] .gk-blatt__f { --t-schrift:color-mix(in srgb, var(--t) 40%, #fff); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .gk-k, html:not([data-theme="light"]) .gk-blatt__f { --t-schrift:color-mix(in srgb, var(--t) 40%, #fff); }
}

/* Gene-Kopf über jeder Unterseite (v1-head--gene aus app.css) */
.gk-kopf { display:flex; flex-direction:column; gap:6px; }
.gk-kopf h1 { margin:10px 0 0; font-size:28px; }
.gk-kopf__kicker { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#C3B4FF; }
.gk-kopf__pille .gk-pille { background:rgba(255,255,255,.18); color:#fff; }
.gk-leiste { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:10px -4px 0; padding:0 4px; }
.gk-leiste::-webkit-scrollbar { display:none; }
.gk-leiste button, .gk-leiste .dna-seg { flex:none; border:0; border-radius:18px; min-height:34px; padding:0 13px; font:inherit;
  font-size:12.5px; font-weight:800; background:rgba(255,255,255,.18); color:#fff; cursor:pointer; white-space:nowrap; }
.gk-leiste button[aria-selected="true"], .gk-leiste .dna-seg[aria-selected="true"] { background:#fff; color:#261A68; border:0; }
.gk-stufen { position:relative; display:flex; gap:4px; height:10px; margin-top:10px; }
.gk-stufen i { flex:1; border-radius:5px; background:rgba(255,255,255,.35); }
.gk-stufen i.gruen { background:#9FDCA9; } .gk-stufen i.bern { background:#F3C977; } .gk-stufen i.rose { background:#EE9DB5; }
.gk-stufen i.lila { background:#C3B4FF; }
.gk-stufen em { position:absolute; top:-6px; width:22px; height:22px; margin-left:-11px; border-radius:50%; border:4px solid #fff;
  background:#261A68; box-sizing:border-box; }
.gk-stufen__text { display:flex; justify-content:space-between; gap:12px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.78); }

/* Kopfkarte im Reiter */
.gk-held { border-radius:24px; padding:20px; color:#fff; background:var(--gk-verlauf); box-shadow:0 14px 30px rgba(38,26,104,.28);
  display:flex; flex-direction:column; gap:10px; }
.gk-held small { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#C3B4FF; }
.gk-held > b { font-size:22px; font-weight:800; line-height:1.2; }
.gk-held p { margin:0; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.88); line-height:1.45; }
.gk-held .gk-luecke, .gk-held .dna-src { color:rgba(255,255,255,.75); }
.gk-zahlen { display:flex; gap:10px; }
.gk-zahlen div { flex:1; min-width:0; background:rgba(255,255,255,.12); border-radius:16px; padding:10px 12px; }
.gk-zahlen b { display:block; font-size:20px; font-weight:800; }
.gk-zahlen span { font-size:11.5px; font-weight:700; color:rgba(255,255,255,.82); }

/* Abschnitte, Karten, Felder */
.gk-sek { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:22px 0 0; }
.gk-sek h3 { margin:0; font-size:19px; font-weight:800; color:var(--navy); }
.gk-sek small { font-size:12px; font-weight:700; color:var(--muted); text-align:right; }
.gk-karte { background:var(--card); border-radius:24px; padding:18px; box-shadow:var(--shadow-card); border:var(--card-border);
  display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.gk-ue { margin:0; font-size:16px; font-weight:800; color:var(--navy); }
.gk-tx, .gk-karte > p { margin:0; font-size:14px; line-height:1.5; font-weight:600; color:var(--muted); }
.gk-feld b { display:block; font-size:12.5px; font-weight:800; color:var(--navy); margin-bottom:2px; }
.gk-feld p { margin:0; font-size:13.5px; line-height:1.5; font-weight:600; color:var(--muted); }
.gk-notiz { margin:0; font-size:12.5px; font-weight:600; color:var(--muted); }
.gk-leer { margin:0; text-align:center; font-size:13.5px; font-weight:600; color:var(--muted); }
.gk-luecke { margin:0; font-size:12.5px; font-weight:600; color:var(--muted); }
.gk-box { padding:12px; border-radius:16px; background:var(--card2); display:flex; flex-direction:column; gap:8px; }
.gk-box__kopf { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gk-box__kopf b { color:var(--navy); font-size:14px; font-weight:800; }
.gk-box p { margin:0; font-size:13.5px; line-height:1.5; font-weight:600; color:var(--muted); }
.gk-warn { border-radius:20px; padding:14px 16px; background:var(--amber-100); color:var(--amber-t); display:flex; flex-direction:column;
  gap:6px; margin-top:12px; }
.gk-warn b { font-size:14px; font-weight:800; }
.gk-warn p { margin:0; font-size:13.5px; line-height:1.45; font-weight:600; }

/* Pillen (beim Kunden nie Rot: stärkste Stufe rosé) */
.gk-pille { display:inline-flex; align-items:center; min-height:24px; padding:3px 10px; border-radius:999px; font-size:11.5px;
  font-weight:800; line-height:1.3; white-space:nowrap; }
.gk-pille.gruen { background:var(--green-100); color:var(--green-t); }
.gk-pille.bern { background:var(--amber-100); color:var(--amber-t); }
.gk-pille.rose { background:var(--rose-100); color:var(--rose-t); }
.gk-pille.lila { background:var(--gk-lila-100); color:var(--gk-lila); }
.gk-pille.grau { background:var(--card2); color:var(--muted); }

/* Listen und Aufklapper: Symbol im hellgrauen Feld wie im Fahrplan */
.gk-liste { background:var(--card); border-radius:24px; box-shadow:var(--shadow-card); border:var(--card-border); padding:2px 16px; margin-top:10px; }
.gk-liste > * + * { border-top:1px solid var(--line); }
.gk-zeile { display:flex; align-items:center; gap:12px; width:100%; padding:13px 0; border:0; background:none; font:inherit;
  text-align:left; cursor:pointer; color:var(--ink); list-style:none; min-height:44px; }
.gk-zeile::-webkit-details-marker { display:none; }
.gk-zeile__tx { flex:1; min-width:0; }
.gk-zeile b { display:block; font-size:15px; font-weight:800; color:var(--navy); }
.gk-zeile small { display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-top:1px; overflow-wrap:anywhere; }
.gk-zeile__pille { display:flex; margin-top:6px; }
.gk-zeile .chev { color:var(--muted-2); font-size:20px; transition:transform .15s ease; }
.gk-klapp[open] > .gk-zeile .chev { transform:rotate(90deg); }
.gk-chip { width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center; background:var(--card2); color:var(--navy); }
.gk-chip .hji { width:24px; height:24px; }
.gk-auf { display:flex; flex-direction:column; gap:10px; padding:0 0 14px; }

/* Genotyp-Kästchen */
.gk-geno { display:flex; gap:8px; }
.gk-geno div { flex:1; min-width:0; text-align:center; padding:10px 4px; border-radius:14px; background:var(--card2); border:2px solid transparent; }
.gk-geno b { display:block; font-size:16px; font-weight:800; color:var(--navy); }
.gk-geno span { font-size:11px; font-weight:700; color:var(--muted); }
.gk-geno div.deins { border-color:currentColor; }
.gk-geno div.deins span { color:inherit; }
.gk-geno div.deins.gruen { background:var(--green-100); color:var(--green-t); }
.gk-geno div.deins.bern { background:var(--amber-100); color:var(--amber-t); }
.gk-geno div.deins.rose { background:var(--rose-100); color:var(--rose-t); }
.gk-geno div.deins.lila { background:var(--gk-lila-100); color:var(--gk-lila); }
.gk-geno div.deins.grau { color:var(--muted); }

/* Kacheln */
.gk-kacheln { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.gk-k { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-height:118px;
  padding:14px; border-radius:22px; border:1px solid rgba(var(--t-rgb),.18);
  background:linear-gradient(150deg,rgba(var(--t-rgb),.12),rgba(var(--t-rgb),.04)), var(--card);
  box-shadow:var(--shadow-card); font:inherit; text-align:left; cursor:pointer; color:var(--ink); }
.gk-k__ic { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:var(--t); color:#fff; flex:none;
  --ic-acc:rgba(255,255,255,.62); }
.gk-k__ic .hji { width:22px; height:22px; }
.gk-k__bild { position:absolute; right:-14px; bottom:-16px; color:var(--t-schrift); opacity:.10; pointer-events:none; }
.gk-k__bild .hji { width:86px; height:86px; }
.gk-k b { display:block; font-size:14.5px; font-weight:800; color:var(--t-schrift); line-height:1.25; }
.gk-k small { display:block; font-size:12px; font-weight:700; color:var(--muted); margin-top:2px; }
.gk-k .gk-pille { margin-top:auto; }
.gk-k.zu { opacity:.92; }

/* Blatt von unten (Design-Regel 6a): Milchglas hell, dunkel ohne harte weiße Fläche */
.gk-blatt { position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; font-family:var(--font); color:var(--ink); }
.gk-blatt button { font-family:inherit; }
.gk-blatt__bg { position:absolute; inset:0; background:rgba(10,14,40,.38); }
.gk-blatt__f { position:relative; width:min(560px,100%); max-height:92vh; min-height:40vh; display:flex; flex-direction:column;
  border-radius:28px 28px 0 0; background:var(--card); box-shadow:0 -10px 40px rgba(10,14,40,.25); animation:gkBlatt .26s cubic-bezier(.2,.8,.3,1);
  padding-bottom:env(safe-area-inset-bottom); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .gk-blatt__f { background:color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter:blur(30px) saturate(180%);
    backdrop-filter:blur(30px) saturate(180%); }
}
@keyframes gkBlatt { from { transform:translateY(100%); } to { transform:none; } }
@media (prefers-reduced-motion: reduce) { .gk-blatt__f { animation:none; } }
.gk-blatt__griff { width:42px; height:5px; border-radius:3px; background:var(--line); margin:10px auto 0; }
.gk-blatt__kopf { display:flex; align-items:center; gap:12px; padding:12px 18px 10px; }
.gk-blatt__kopf b { flex:1; min-width:0; font-size:18px; font-weight:800; color:var(--t-schrift); }
.gk-blatt__kopf button { width:44px; height:44px; border-radius:50%; border:0; background:rgba(var(--t-rgb),.14); color:var(--t-schrift);
  cursor:pointer; display:grid; place-items:center; flex:none; }
.gk-blatt__kopf button .hji { width:20px; height:20px; }
.gk-blatt__ic { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; background:var(--t); color:#fff; flex:none;
  --ic-acc:rgba(255,255,255,.62); }
.gk-blatt__ic .hji { width:22px; height:22px; }
.gk-blatt__inhalt { overflow:auto; padding:0 18px 28px; display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling:touch; }
.gk-blatt .gk-box { background:rgba(var(--t-rgb),.08); }
.gk-blatt .gk-feld b, .gk-blatt .gk-box__kopf b { color:var(--t-schrift); }

/* Einträge im Blatt: offen, Zusatz unter „Mehr dazu“ */
.gk-e { padding:14px; border-radius:18px; background:var(--card); border:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.gk-e > p { margin:0; font-size:14px; line-height:1.5; font-weight:600; color:var(--muted); }
.gk-e__kopf { display:flex; align-items:center; gap:10px; }
.gk-e__kopf b { flex:1; min-width:0; font-size:15px; font-weight:800; color:var(--navy); line-height:1.3; }
.gk-e__ic { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none; background:rgba(var(--t-rgb,91,63,176),.12);
  color:var(--t-schrift,var(--navy)); }
.gk-e__ic .hji { width:18px; height:18px; }
.gk-e__kopf + p, .gk-e > .gk-mehr { margin-left:42px; }
.gk-mehr summary { list-style:none; cursor:pointer; font-size:13px; font-weight:800; color:var(--t-schrift,var(--navy)); padding:2px 0; }
.gk-mehr summary::-webkit-details-marker { display:none; }
.gk-mehr summary::after { content:" \2304"; }
.gk-mehr > div { display:flex; flex-direction:column; gap:8px; padding-top:6px; }
.gk-gr { padding:14px 4px; }
.gk-gr + .gk-gr { border-top:1px solid rgba(var(--t-rgb),.16); }
.gk-gr__kopf { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.gk-gr__kopf b { font-size:15px; font-weight:800; color:var(--t-schrift); }
.gk-gr ul { list-style:none; margin:0; padding:0 0 0 42px; display:flex; flex-direction:column; gap:8px; }
.gk-gr li { display:flex; flex-direction:column; gap:2px; }
.gk-gr li > b { font-size:14px; font-weight:800; color:var(--navy); line-height:1.35; }
.gk-gr li > b em { display:block; font-style:normal; font-size:12.5px; font-weight:600; color:var(--muted); }
.gk-gr li > span { font-size:13.5px; line-height:1.45; font-weight:600; color:var(--muted); }

/* Knöpfe */
.gk-knoepfe { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.btn.gk-lila { background:var(--gk-verlauf); color:#fff; box-shadow:0 8px 20px rgba(38,26,104,.25); border:0; }
.gk-karte .btn { margin-top:0; }

/* Medikamente, Erbliches, Veranlagung (P13) */
.gk-fakten { display:flex; flex-wrap:wrap; gap:6px; }
.gk-fakten span { display:inline-flex; flex-direction:column; gap:1px; min-width:0; padding:7px 10px; border-radius:12px;
  background:var(--card2); font-size:13.5px; font-weight:800; color:var(--navy); overflow-wrap:anywhere; }
.gk-fakten i { font-style:normal; font-size:11px; font-weight:700; color:var(--muted); }
.gk-blatt .gk-fakten span { background:rgba(var(--t-rgb),.08); }
.gk-stellen i { min-width:6px; }
.gk-box__kopf small.gk-notiz { white-space:nowrap; }
.gk-unter { margin-top:8px; padding:0 4px; }
.gk-hebel { border-left:4px solid var(--gk-lila); }
.gk-seitenende { margin-top:18px; }

/* Vorschau ohne Datei (Rahmen aus healthhub.css) */
.gk-vorschau .gk-held { margin-top:0; }

@media (max-width: 360px) {
  .gk-kacheln { grid-template-columns:1fr; }
  .gk-zahlen { flex-direction:column; }
}