/* ============================================================
   Crownmate · Startseite "heim" (Etappe A, Task 3; Konzept 2026-11-06, Entwurf startseite-v4)
   Struktur: js/ui/heim.js. Nur Tokens (css/tokens.css, css/themes/<id>.css), keine festen Farben:
   hell ist Standard, dunkel kommt ueber data-modus aus dem Theme. Bewegung nur ueber die Dauer-Tokens (--tempo).
   Ruhige Ordnung: Ring, eine Zeile Liga, drei Karten. Auf dem kleinen Handy (375 x 667) passt alles ohne Scrollen
   ueber die Leiste; der Ring wird dafuer mit der Hoehe kleiner.
   ============================================================ */
.heim-screen .heim-rumpf { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 560px; margin: 0 auto; padding: var(--a2) var(--rand) var(--a5); box-sizing: border-box; }

/* ---------- Name und Level ---------- */
.heim-wer { flex: none; display: flex; align-items: baseline; justify-content: center; gap: 10px; min-width: 0; max-width: 100%; }
.heim-name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: var(--gw-titel);
  font-size: 20px; letter-spacing: -.02em; color: var(--text); }
.heim-level { flex: none; font-size: 13.5px; font-weight: 700; color: var(--text-2); }

/* ---------- Rang-Ring ---------- */
.heim-ring { position: relative; flex: none; width: clamp(120px, 24dvh, 208px); aspect-ratio: 1; margin: var(--a1) auto var(--a2);
  display: grid; place-items: center; }
.heim-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.heim-spur, .heim-bogen { fill: none; stroke-width: 8; }
.heim-spur { stroke: var(--linie-2); }
.heim-bogen { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset var(--d-xl) var(--gleiten); }
.heim-ring[data-anteil="0"] .heim-bogen { stroke-linecap: butt; }
.heim-mitte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.heim-zahl { font-family: var(--display); font-weight: var(--gw-titel); font-size: clamp(30px, 5.4dvh, 46px); letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text); }
.heim-einheit { font-size: 13px; font-weight: 700; color: var(--text-2); }

/* ---------- Liga-Zeile: Stufen-Name in der lesbaren Goldfassung (>= 4,5:1 in hell und dunkel) ---------- */
.heim-liga { flex: none; margin: 0 0 var(--a3); text-align: center; font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.heim-liga b { color: var(--kt-stark); font-weight: var(--gw-stark); }

/* ---------- Modus-Karten ---------- */
.heim-modi { flex: none; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.heim-modus { display: flex; align-items: center; gap: 14px; width: 100%; min-height: var(--tipp); padding: 14px 16px; text-align: left; cursor: pointer;
  border: 0; border-radius: var(--r-l); background-color: var(--flaeche); background-image: var(--textur-flaeche, none);
  box-shadow: var(--s1, none), var(--kante); color: var(--text); font: inherit;
  transition: transform var(--d-s) var(--feder-weich), box-shadow var(--d-s) var(--gleiten); }
.heim-modus:focus-visible { outline: var(--fokus); outline-offset: 3px; }
.heim-symbol { flex: none; display: grid; place-items: center; width: 36px; height: 36px; color: var(--kt-stark); }
.heim-symbol .ico, .heim-symbol svg { width: 26px; height: 26px; }
.heim-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.heim-text b { font-size: 16px; font-weight: var(--gw-stark); color: var(--text); }
.heim-text span { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
/* Hauptknopf Online: Goldfuellung; Schrift in der dunklen Fassung fuer Gold (--kg-stark, in beiden Modi gleich) */
.heim-modus.haupt { padding: 16px; background: var(--gold); box-shadow: var(--s2, none); color: var(--kg-stark); }
.heim-modus.haupt .heim-symbol, .heim-modus.haupt .heim-text b, .heim-modus.haupt .heim-text span { color: var(--kg-stark); }

/* Shop-Hinweise kommen mit dem Wochen-Shop (in dieser Etappe ausgeblendet) */
.heim-shop[hidden] { display: none !important; }

/* Niedrige Fenster (kleines Handy, iPad quer mit Browserleisten): Karten enger */
@media (max-height: 700px) {
  .heim-modus, .heim-modus.haupt { padding-top: 10px; padding-bottom: 10px; }
  .heim-modi { gap: 8px; }
}
/* Breite Fenster: etwas mehr Luft, Inhalt bleibt in der Mitte */
@media (min-width: 900px) and (min-height: 701px) {
  .heim-screen .heim-rumpf { justify-content: center; padding-top: var(--a4); }
  .heim-modus { padding: 18px 20px; }
}
/* Querformat ab 1021 px (neben der Seitenleiste): zwei Spalten wie im Entwurf ipad-pc-v2, links Name, Ring und Liga-Zeile,
   rechts die drei Karten */
@media (min-width: 1021px) and (orientation: landscape) {
  .heim-screen .heim-rumpf { display: grid; max-width: 1040px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "wer modi" "ring modi" "liga modi"; grid-template-rows: auto auto auto; align-content: start; align-items: center;
    justify-items: center; column-gap: clamp(32px, 5vw, 72px); padding-top: 48px; }
  .heim-wer { grid-area: wer; }
  .heim-ring { grid-area: ring; width: clamp(180px, 34dvh, 280px); }
  .heim-liga { grid-area: liga; margin-bottom: 0; }
  .heim-modi { grid-area: modi; align-self: start; }
}