/* =========================================================
   DARTS UNIVERSE — Startseite (2.1)
   Hero „Alles rund um Darts“ mit Buehnenfoto, darunter je Bereich
   eine ruhige Sektion: Ueberschrift und Text links, Link rechts,
   Inhalt darunter. Neutral gehalten: Navy, Haarlinien, Gold nur
   dort, wo etwas laeuft oder vorne liegt.
   Baut auf style.css (Theme) und den Bausteinen des Plugins auf
   (.du-tip: linkish, btn, gbox, cal-live).
   ========================================================= */

.home{min-height:100vh}

/* ---------- Typografie ---------- */
.du-pred .home-h{
  font-family:var(--f-display);
  font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.02em;
  text-wrap:balance;
}
.du-pred .home-h--hero{font-size:clamp(2.8rem,7.4vw,6rem);line-height:.92;letter-spacing:-.03em}
.home .hl{color:var(--gold)}
.du-pred .home-text{color:var(--mute);font-size:1rem;line-height:1.7;max-width:56ch}
.du-pred .home-text b{color:var(--white);font-weight:600}
.home-acts{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:24px}
.du-pred .home-empty,.du-pred .home-idle{color:var(--mute);margin-top:8px}

/* =========================================================
   HERO: Buehnenfoto ueber die volle Breite, Text unten links
   ========================================================= */
.hero-a{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;overflow:hidden;
  padding:calc(var(--header-h) + 80px) 0 clamp(64px,8vw,112px)}
/* .home davor: die Bildregel des Plugins (.du-pred img{height:auto}) wiegt sonst schwerer */
.home .hero-a__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 40%;filter:brightness(1.15) saturate(1.1)}
.hero-a__scrim{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,7,32,.95) 0%,rgba(10,7,32,.78) 38%,rgba(10,7,32,.25) 72%,rgba(10,7,32,.05) 100%),
    linear-gradient(0deg,var(--navy-950) 0%,rgba(10,7,32,.35) 45%,rgba(10,7,32,0) 70%)}
/* Ruhiger Schatten unter der Schrift: lesbar, auch wo das Foto hell wird */
.hero-a__inner .home-h--hero{text-shadow:0 2px 24px rgba(10,7,32,.65)}
.hero-a__inner{position:relative;z-index:1}
.hero-a__inner .home-acts{margin-top:clamp(24px,3vw,36px)}

/* Live-Zeile im Hero */
.home-hero__live{
  display:inline-flex;align-items:center;gap:6px 14px;margin-top:28px;max-width:100%;
  padding:11px 16px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(10,7,32,.55);
  font-size:.92rem;font-weight:600;color:var(--white);transition:border-color .3s var(--ease);
}
.home-hero__live:hover{border-color:var(--gold)}
.home-hero__live svg{flex:none;width:16px;height:16px;transition:transform .3s var(--ease)}
.home-hero__live:hover svg{transform:translateX(3px)}
.home-hero__live .cal-live{flex:none}
.home-hero__live > span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =========================================================
   SEKTIONEN
   ========================================================= */
.hs{padding-block:clamp(64px,8vw,112px);border-top:1px solid var(--line);scroll-margin-top:var(--header-h)}
.hs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,44px)}
.hs__head .home-text{margin-top:14px}
.hs__head > .linkish{white-space:nowrap}

/* ---------- Tippspiel: das Turnier, um das es gerade geht ---------- */
.home-live{
  display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;
  padding:clamp(24px,2.8vw,34px);border-radius:20px;border:1px solid var(--line-strong);background:var(--navy-850);
}
.home-live.is-on{border-color:rgba(242,228,35,.55)}
.home-live .home-acts{margin-top:0}
.du-pred .home-live__name,.du-pred .home-live__state{font-family:var(--f-display);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.05;color:var(--white)}
.home-live__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:10px;font-weight:600;color:var(--mute)}
.home-live .home-text{margin-top:10px}

/* ---------- Kalender: Wochenstreifen ---------- */
.hw__grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:64px repeat(var(--lanes,1),62px) 14px;row-gap:6px;
  border-block:1px solid var(--line);
}
.hw__day{grid-row:1 / -1;display:flex;flex-direction:column;gap:2px;padding:12px 10px 0;border-left:1px solid var(--line)}
.hw__day:first-child{border-left:0;padding-left:0}
.hw__day span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-dim)}
.hw__day b{font-size:1.25rem;font-weight:900;font-style:italic;line-height:1.1}
.hw__day.is-past b{color:var(--mute-dim)}
.hw__day.is-today span,.hw__day.is-today b{color:var(--gold)}
/* Ruhig: alle Balken gleich, die Kategorie nur als Farbpunkt */
.hw-bar{
  --c:#9AA0B5;position:relative;z-index:1;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;
  margin:0 5px;padding:0 14px;border-radius:12px;
  background:var(--navy-850);border:1px solid var(--line-strong);
  transition:border-color .25s var(--ease);
}
.hw-bar:hover{border-color:rgba(255,255,255,.4)}
.hw-bar b{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-bar b::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.hw-bar small{font-size:.76rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-bar.cal-bar--from{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.hw-bar.cal-bar--on{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
/* Das Turnier, das gerade laeuft: Goldkante wie die Tafel im Tippspiel */
.hw-bar.is-focus{border-color:rgba(242,228,35,.65)}
.hw-bar.is-focus small{color:var(--gold);font-weight:700}
.hw-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:middle}
.hw__empty{margin-top:14px;color:var(--mute);font-size:.9rem}

/* Kalender ohne Turnier in dieser Woche: die naechsten Termine */
.hn{margin-top:24px;border-top:1px solid var(--line)}
.hn a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:baseline;padding:16px 2px;border-bottom:1px solid var(--line)}
.hn a:hover b{color:var(--gold)}
.hn .num{font-size:.88rem;font-weight:700;color:var(--mute);white-space:nowrap}
.hn b{display:block;font-weight:700;font-size:1.04rem;line-height:1.35;transition:color .25s var(--ease)}
.hn small{display:block;margin-top:4px;font-size:.84rem;color:var(--mute)}

/* ---------- Rangliste: schlichte Liste ---------- */
.hr{border-top:1px solid var(--line)}
.hr__row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px 2px;border-bottom:1px solid var(--line)}
.hr__place{font-weight:900;font-style:italic;font-size:1.2rem;color:var(--mute-dim)}
.hr__name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr__pts{font-weight:900;font-style:italic;font-size:1.2rem}
.hr__row.is-first .hr__place{color:var(--gold)}
.hr__row.is-me .hr__name,.hr__row.is-me .hr__pts,.hr__row.is-me .hr__place{color:var(--gold)}
.hr__row--gap{border-top:1px dashed var(--line-strong)}

/* ---------- Tipprunden: drei Schritte (die Reihenfolge zaehlt) ---------- */
.hsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px}
.hsteps li{display:flex;gap:16px;align-items:flex-start;padding-top:20px;border-top:1px solid var(--line)}
.hsteps__n{flex:none;font-size:2.4rem;font-weight:900;font-style:italic;line-height:.9;color:var(--mute-dim)}
.hsteps b{display:block;font-weight:700;font-size:1.04rem}
.hsteps p{margin-top:4px;color:var(--mute);font-size:.92rem;line-height:1.6}
.hs--runden .home-acts{margin-top:32px}
.du-tip .glist--one{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:760px){
  .hsteps{grid-template-columns:1fr;gap:0}
  .hsteps li{padding-block:18px}
}
@media (max-width:640px){
  .hero-a{min-height:88vh}
  .home .hero-a__img{object-position:62% center}
  .hero-a__scrim{background:linear-gradient(0deg,var(--navy-950) 0%,rgba(10,7,32,.82) 52%,rgba(10,7,32,.35) 100%)}
  .hw__grid{grid-template-rows:54px repeat(var(--lanes,1),44px) 10px;row-gap:4px}
  .hw__day{padding:10px 0 0;align-items:center;border-left:0}
  .hw__day span{font-size:.62rem}
  .hw__day b{font-size:1.02rem}
  .hw-bar{margin:0 2px;padding:0 8px;border-radius:9px}
  .hw-bar b{font-size:.74rem;gap:6px}
  .hw-bar b::before{width:6px;height:6px}
  .hw-bar small{display:none}
  .hn a{grid-template-columns:80px minmax(0,1fr);gap:12px}
}