/* ============================================================================
   Local Dash - Leo Pizza
   Ausgelegt auf einen 32-Zoll-Bildschirm im Hochformat, Leseabstand 2-3 Meter.
   Grundregel: nichts unter 2vh, tragende Zahlen deutlich darueber.
   ========================================================================= */

:root {
  --cream: #fdf6e6;
  --paper: #fffdf7;
  --ink: #1c1814;
  --ink-soft: #5f564a;
  --green: #2e9e5b;
  --green-d: #1f7a43;
  --red: #d9342b;
  --red-d: #b02218;
  --gold: #f0b323;
  --line: rgba(28, 24, 20, 0.14);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: #000;
  color: var(--ink);
  font-family: "Oswald", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* Blatt im 9:16-Format */
.paper {
  position: relative;
  aspect-ratio: 9 / 16;
  height: 100vh;
  max-width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.8vh 2.2vh 1vh;
  gap: 1.1vh;
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
}

@media (min-aspect-ratio: 9 / 16) {
  .paper { height: 100vh; width: auto; }
}

/* ---------- Hintergrund-Doodles: sparsam, damit nichts vom Text ablenkt ---------- */
.bg-doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  color: var(--ink);
}
.bgd {
  position: absolute;
  opacity: 0.045;
  animation: float 11s ease-in-out infinite;
}
.bgd-1 { width: 16vh; height: 16vh; top: 34%; left: -4vh; }
.bgd-2 { width: 13vh; height: 13vh; top: 63%; right: -3vh; animation-delay: 2s; }
.bgd-3 { width: 12vh; height: 12vh; top: 88%; left: 6%; animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-1.6vh) rotate(4deg); }
}

.head, .flag-band, .ratings, .weekbar, .note, .foot { position: relative; z-index: 1; }

/* ---------- Kopf ---------- */
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-row { display: flex; align-items: center; }
.logo-leo {
  font-family: "Anton", sans-serif;
  font-size: 5.9vh;
  line-height: 0.86;
  letter-spacing: -0.2vh;
  color: var(--ink);
}
.logo-o {
  width: 5.5vh;
  height: 5.5vh;
  color: var(--red);
  margin-left: -0.6vh;
}
.logo-since {
  font-size: 2vh;
  font-weight: 600;
  letter-spacing: 0.35vh;
  color: var(--ink-soft);
  margin-top: 0.2vh;
}

.clock {
  text-align: right;
}
.clock .time {
  font-family: "Anton", sans-serif;
  font-size: 6vh;
  line-height: 0.9;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.clock .date {
  font-size: 2.2vh;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.15vh;
}

/* ---------- Flaggenband ---------- */
.flag-band {
  display: flex;
  height: 1.1vh;
  border-radius: 1vh;
  overflow: hidden;
}
.flag-band i { flex: 1; }
.flag-band i:nth-child(1) { background: var(--green); }
.flag-band i:nth-child(2) { background: #fff; }
.flag-band i:nth-child(3) { background: var(--red); }

/* ---------- Bewertungs-Bloecke: vollflaechig farbig, riesige Zahl ---------- */
.ratings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6vh;
}

.ticket {
  border-radius: 2.4vh;
  padding: 1.1vh 1.2vh 1vh;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ticket.lieferando { background: var(--red); }
.ticket.google { background: var(--green); }

.ticket-label {
  font-family: "Anton", sans-serif;
  font-size: 2.3vh;
  letter-spacing: 0.2vh;
  text-transform: uppercase;
  opacity: 0.95;
}

.score {
  font-family: "Anton", sans-serif;
  font-size: 8.8vh;
  line-height: 0.94;
  margin: 0.2vh 0 0.5vh;
  font-variant-numeric: tabular-nums;
}

.stars {
  display: flex;
  justify-content: center;
  gap: 0.4vh;
  height: 3vh;
}
.stars svg {
  width: 2.8vh;
  height: 2.8vh;
  color: rgba(255, 255, 255, 0.35);
}
.stars svg.on { color: #fff; animation: starpop 0.4s ease both; }
.stars svg.half { color: #fff; clip-path: inset(0 50% 0 0); }
.stars .half-wrap { position: relative; width: 2.8vh; height: 2.8vh; }
.stars .half-wrap svg { position: absolute; inset: 0; }
.stars .half-wrap svg.bg { color: rgba(255, 255, 255, 0.35); }

@keyframes starpop {
  0% { transform: scale(0.3) rotate(-30deg); opacity: 0; }
  70% { transform: scale(1.2); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.ticket-foot {
  margin-top: 0.6vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8vh;
  flex-wrap: wrap;
}
.ticket-sub {
  font-size: 2vh;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* Trend direkt im Block - keine eigene Leiste mehr */
.tchip {
  font-size: 2vh;
  font-weight: 600;
  padding: 0.1vh 1vh 0.3vh;
  border-radius: 1vh;
  background: rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}
.tchip:empty { display: none; }

/* ---------- Wochenzeile ---------- */
.weekbar {
  background: var(--ink);
  color: var(--cream);
  border-radius: 1.6vh;
  padding: 0.6vh 1.4vh;
  font-size: 2.2vh;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.05vh;
}
.weekbar strong {
  font-family: "Anton", sans-serif;
  color: var(--gold);
  font-size: 2.7vh;
  margin-right: 0.4vh;
}
.weekbar .wait { color: #9d9384; font-weight: 400; font-size: 2.1vh; }

/* ---------- Karten ---------- */
.note {
  background: var(--paper);
  border: 0.4vh solid var(--ink);
  border-radius: 2.4vh;
  padding: 1.1vh 1.8vh 0.8vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0.6vh 0.7vh 0 rgba(28, 24, 20, 0.16);
}
.reviews { flex: 1.16; }
.news { flex: 1.12; }

.note-title {
  display: flex;
  align-items: center;
  gap: 1vh;
  font-family: "Anton", sans-serif;
  font-size: 2.3vh;
  letter-spacing: 0.15vh;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.7vh;
}
.note-title.good { color: var(--green-d); }
.note-title .ti { width: 2.5vh; height: 2.5vh; flex-shrink: 0; }

.review-slide,
.news-slide {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.loading { font-size: 2.4vh; color: var(--ink-soft); }

/* ---------- Bewertung ---------- */
.review-item { animation: fadein 0.5s ease both; position: relative; }

.review-head {
  display: flex;
  align-items: center;
  gap: 1vh;
  margin-bottom: 0.7vh;
}
.avatar {
  width: 4.6vh;
  height: 4.6vh;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Anton", sans-serif;
  font-size: 2.2vh;
  flex-shrink: 0;
}
.review-meta { min-width: 0; }
.review-author {
  font-family: "Anton", sans-serif;
  font-size: 2.7vh;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-sub {
  display: flex;
  align-items: center;
  gap: 1.2vh;
  margin-top: 0.3vh;
}
.review-stars { display: flex; gap: 0.3vh; }
.review-stars svg { width: 2.2vh; height: 2.2vh; color: var(--gold); }
.review-when {
  font-size: 1.95vh;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.review-text {
  font-size: 2.9vh;
  line-height: 1.22;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stempel bei 5 Sternen */
.stamp {
  position: absolute;
  top: -0.2vh;
  right: 0.2vh;
  font-family: "Anton", sans-serif;
  font-size: 2.4vh;
  color: var(--red);
  border: 0.35vh solid var(--red);
  border-radius: 0.8vh;
  padding: 0.1vh 1vh 0.3vh;
  transform: rotate(-8deg);
  opacity: 0.9;
}

/* ---------- Nachrichten ---------- */
.news-item { animation: fadein 0.5s ease both; display: flex; flex-direction: column; height: 100%; }
.news-title {
  font-family: "Anton", sans-serif;
  font-size: 2.9vh;
  line-height: 1.08;
  margin-bottom: 0.5vh;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-summary {
  font-size: 2.1vh;
  line-height: 1.18;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-source {
  margin-top: auto;
  padding-top: 0.4vh;
  font-size: 1.95vh;
  font-weight: 600;
  color: var(--green-d);
  display: flex;
  align-items: center;
  gap: 0.7vh;
}
.news-flag { font-size: 2.6vh; line-height: 1; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(1.2vh); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Punkte ---------- */
.dots {
  display: flex;
  gap: 0.9vh;
  justify-content: center;
  margin-top: 0.5vh;
}
.dots span {
  width: 1.2vh;
  height: 1.2vh;
  border-radius: 50%;
  background: rgba(28, 24, 20, 0.2);
  transition: all 0.3s ease;
}
.dots span.active { background: var(--red); width: 3.4vh; border-radius: 1vh; }
.dots.green span.active { background: var(--green); }

/* ---------- Leerzustand ---------- */
.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5vh;
}
.empty-icon { width: 7vh; height: 7vh; color: var(--ink-soft); opacity: 0.25; }
.empty-title {
  font-family: "Anton", sans-serif;
  font-size: 2.8vh;
  color: var(--ink-soft);
}
.empty-hint { font-size: 2.2vh; color: var(--ink-soft); opacity: 0.8; }

/* ---------- Fusszeile ---------- */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.9vh;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0 0.4vh;
}
.foot-brand { color: var(--red); letter-spacing: 0.1vh; }
.foot .offline { color: var(--red); }

/* ---------- Abfuhr-Erinnerung ---------- */
.waste-strip {
  position: absolute;
  left: 2.4vh;
  right: 2.4vh;
  bottom: 0.6vh;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.2vh;
  padding: 0.8vh 1.6vh;
  border-radius: 1.4vh;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 0.4vh 1.8vh rgba(0, 0, 0, 0.3);
  animation: wsIn 0.5s ease both;
}
.waste-strip[hidden] { display: none; }

.ws-icon { width: 3.6vh; height: 3.6vh; flex-shrink: 0; color: var(--cream); }
.ws-text { display: flex; align-items: baseline; gap: 0.9vh; min-width: 0; }
.ws-when {
  font-family: "Anton", sans-serif;
  font-size: 2.4vh;
  color: var(--gold);
  text-transform: uppercase;
}
.ws-what {
  font-family: "Anton", sans-serif;
  font-size: 2.8vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-hint {
  margin-left: auto;
  font-size: 2vh;
  font-weight: 600;
  color: rgba(253, 246, 230, 0.7);
  white-space: nowrap;
}

/* Farbe je Tonne */
.waste-strip.k-bio .ws-icon { color: #7ad39b; }
.waste-strip.k-paper .ws-icon { color: #7ab6e8; }
.waste-strip.k-yellow .ws-icon { color: var(--gold); }

@keyframes wsIn {
  from { opacity: 0; transform: translateY(1.4vh); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Konfetti ---------- */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.confetti i {
  position: absolute;
  top: -3vh;
  width: 1.2vh;
  height: 1.8vh;
  border-radius: 0.2vh;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0.9; }
}