/* Zusätzliche Styles für den Kiosk-Aushang - baut auf den Farbtokens aus
   styles.css auf, aber mit deutlich größerer Schrift für Bildschirme, die
   aus einigen Metern Entfernung gelesen werden. */

html, body.kiosk-body{height:100%; margin:0; padding:0;}
body.kiosk-body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  display:flex; align-items:stretch; justify-content:stretch;
  overflow:hidden;
}
.kiosk-wrap{
  width:100%; min-height:100vh; min-height:100dvh; padding:clamp(20px, 3vw, 48px);
  display:flex; flex-direction:column; gap:clamp(16px, 2.4vw, 32px); box-sizing:border-box;
}

.kiosk-header{display:flex; align-items:center; gap:24px;}
.kiosk-logo{height:clamp(48px, 6vw, 88px); max-width:280px;}
.kiosk-heading{flex:1; min-width:0;}
.kiosk-heading h1{font-size:clamp(2rem, 4vw, 3.4rem); letter-spacing:-.01em;}
.kiosk-heading p{color:var(--text-muted); font-size:clamp(1rem, 1.6vw, 1.4rem); margin-top:4px;}
.kiosk-clock{font-variant-numeric:tabular-nums; font-size:clamp(1.4rem, 2.4vw, 2.2rem); font-weight:600; color:var(--text-muted); white-space:nowrap;}

.kiosk-grid{
  flex:1; display:grid; grid-template-columns:repeat(5, 1fr); gap:clamp(12px, 1.4vw, 24px); min-height:0;
}
@media (max-width: 900px){
  .kiosk-grid{grid-template-columns:repeat(2, 1fr); overflow-y:auto;}
}

.kiosk-day{
  background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow);
  padding:clamp(16px, 1.6vw, 28px); display:flex; flex-direction:column; gap:clamp(10px, 1.2vw, 18px); min-width:0;
  overflow-y:auto;
}
.kiosk-day.is-today{border-color:var(--highlight); box-shadow:0 0 0 2px var(--highlight), var(--shadow); background:var(--highlight-soft);}
.kiosk-day-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.kiosk-day-name{font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem, 1.8vw, 1.7rem);}
.kiosk-day-date{color:var(--text-muted); font-size:clamp(.85rem, 1.1vw, 1.05rem); font-variant-numeric:tabular-nums;}

.kiosk-dish{
  background:var(--surface-alt); border-radius:14px; padding:clamp(10px, 1.2vw, 16px); display:flex; flex-direction:column; gap:4px;
}
.kiosk-dish-name{font-weight:600; font-size:clamp(1rem, 1.3vw, 1.25rem); line-height:1.25; overflow-wrap:break-word; word-break:break-word;}
.kiosk-dish-desc{color:var(--text-muted); font-size:clamp(.82rem, 1vw, .98rem); overflow-wrap:break-word; word-break:break-word;}
.kiosk-dish-meta{display:flex; align-items:center; gap:10px; margin-top:4px;}
.kiosk-price{font-weight:700; font-size:clamp(.95rem, 1.15vw, 1.1rem); color:var(--accent);}
.kiosk-dish-allergens{color:var(--text-muted); font-size:clamp(.7rem, .85vw, .82rem); font-style:italic; margin-top:3px;}
.kiosk-empty{color:var(--text-muted); font-style:italic; font-size:clamp(.95rem, 1.2vw, 1.1rem);}

.kiosk-fullscreen-btn{
  position:fixed; right:18px; bottom:18px; width:52px; height:52px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); color:var(--text-muted); font-size:1.3rem;
  box-shadow:var(--shadow); opacity:.55;
}
.kiosk-fullscreen-btn:hover{opacity:1; color:var(--accent); border-color:var(--accent);}