/* ---------------- Basis Einstellungen --------------- */
@import url("https://fonts.googleapis.com/css2?family=Chewy&display=swap");

:root{
  --rot:#E20E1A;
  --dunkel:#242121;
  --weiss:#fff;
  --header-h: 11.25rem; /* Header-Höhe (Laptop/Default) */
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  height:100%;
}

body{
  font-family:"Chewy",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--weiss);
  background:var(--weiss);
}

/* -------------------- Header ------------------------ */
.header{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--dunkel);
  height:var(--header-h);
  padding:0.75rem;
  display:grid;
  gap:0.5rem;
  grid-template-columns:1fr auto;
  grid-template-areas:"title logo" "tabs date";
}

.header-left-top{ 
    grid-area:title;
}

.header-right-top{
  grid-area:logo;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.header-left-bottom{
  grid-area:tabs;
  display:flex;
  gap:0.875rem;
  flex-wrap:wrap;
  align-items:center;
}
.header-right-bottom{
  grid-area:date;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  justify-self:end;
} 

h1{
  margin:0;
  font-weight:400;
  letter-spacing:.01875rem;
  font-size:1.25rem;
}

.logo{ 
  width:2.625rem;
  height:auto; 
}

/* nur angeklickte Radio-Buttons rot */
.mode-check-input,.timespan-check-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.mode-check-label,.timespan-check-label{
  color:var(--weiss);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:.18em;
}
.mode-check-input:checked+.mode-check-label,
.timespan-check-input:checked+.timespan-check-label{
  color:var(--rot);
  text-decoration-color:var(--rot);
}

/* Kalender */
#datepicker{
  border:none;
  outline:none;
  font:inherit;
  background:var(--weiss);
  color:var(--dunkel);
  padding:.55rem .9rem;
  border-radius:999px;
  box-shadow:0 0.125rem 0 rgba(0,0,0,.15);
}

/* -------------------- Podium --------------------- */
.podium{
  max-width:68.75rem;
  margin:0 auto;
  background:var(--weiss);
  color:var(--dunkel);
  padding:1rem 1rem 0; /* unten 0 = bündig */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:end;
  height:calc(100vh - var(--header-h)); /* füllt den verbleibenden Platz */
}
/* Modernere Viewport-Einheiten (sichtbarer Bereich) */
@supports (height: 100svh){
  .podium{ height:calc(100svh - var(--header-h)); }
}

.podium article{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  margin:0;
  align-self:end;
}

.podium-header{ 
    margin-bottom:0.375rem; 
}
.mode-title{ 
    margin:.2rem 0; 
    font-size:1.125rem; 
}
.artist-name{ 
    margin:0; 
    font-size:0.75rem; 
    color:var(--dunkel); 
}

/* Podium rote Fläche */
.podium-body{
  width:100%;
  background:var(--rot);
  border:0.0625rem solid #000;
  border-radius:0.25rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  min-height:10rem; /* Sicherheit: Stern + Text passen immer */
}

/* dynamische Höhen relativ zu (Viewport − Header) */
.podium-box-1 .podium-body{ height:calc((100vh - var(--header-h)) * 0.62); }
.podium-box-2 .podium-body{ height:calc((100vh - var(--header-h)) * 0.46); }
.podium-box-3 .podium-body{ height:calc((100vh - var(--header-h)) * 0.34); }

@supports (height: 100svh){
  .podium-box-1 .podium-body{ height:calc((100svh - var(--header-h)) * 0.62); }
  .podium-box-2 .podium-body{ height:calc((100svh - var(--header-h)) * 0.46); }
  .podium-box-3 .podium-body{ height:calc((100svh - var(--header-h)) * 0.34); }
}

.plays{
  margin:0;
  font-size:1rem;
  color:var(--weiss);
  text-shadow:0 0.0625rem 0 rgba(0,0,0,.25);
}

/* Sterne */
.star{
  width:6.25rem;
  aspect-ratio:1/1;
  height:auto;
  background:var(--weiss);
  border:none;
  display:grid;
  place-items:center;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.rank-number{ font-size:2.5rem; color:var(--dunkel); }

/* -------------------- Anpassung an mittlere/grosse Bildschirme ---------------- */
@media (min-width:37.5rem){
  .header{ padding:1rem; gap:0.75rem; }
  .header-left-bottom{ gap:1.125rem; }
  h1{ font-size:1.75rem; }
  .logo{ width:3.5rem; }
  .podium{ padding:1.25rem 1.25rem 0; }
}

@media (min-width:64rem){
  .header{ padding:1.25rem; gap:0.875rem; }
  .header-left-bottom{ gap:1.375rem; }
  h1{ font-size:2.5rem; }
  .logo{ width:4.25rem; }
  .podium{ padding:1.75rem 1.75rem 0; }
  .podium-header{ margin-bottom:0.625rem; }
  .mode-title{ font-size:1.875rem; }
  .artist-name{ font-size:1.125rem; }
}

/* -------------------- Smartphone (schmal) ---------------- */
@media (max-width:30rem){
  /* Header: 1/3 der Höhe */
  :root{ --header-h: 33vh; }
  @supports (height: 100svh){
    :root{ --header-h: 33svh; } /* sichtbarer Bereich */
  }

  .header{
    padding:0.5rem;
    gap:0.5rem;
    grid-template-columns:1fr;
    grid-template-areas:
      "logo"
      "title"
      "tabs"
      "date";
  }
  .header-right-top{
    position:absolute;
    top:0.5rem; right:0.5rem; /* Logo oben rechts */
  }
  h1{ font-size:1.5rem; margin-top:2.5rem; } /* Überschrift weiter unten */
  .logo{ width:3rem; }

  /* Podium randlos links/rechts, füllt Resthöhe */
  .podium{ padding:0.75rem 0 0; }

  .mode-title{ font-size:1.25rem; }
  .artist-name{ font-size:0.875rem; }
  .plays{ font-size:1rem; }
  .star{ width:5.25rem; }
  .rank-number{ font-size:2.125rem; }
}

@media (max-width:26.25rem){
  .header{ gap:0.5rem; }
}