/* Preislisten-Charts im SGB-Design (angelehnt an die Vereins-PDFs) · Full-HD Querformat */
:root { --gelb:#FEED00; --rot:#E2231A; --schwarz:#111; }
* { box-sizing:border-box; }
html, body {
  margin:0; padding:0; height:100vh; overflow:hidden;
  background:var(--gelb); color:var(--schwarz);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
body { background:linear-gradient(180deg,#FEED00 0%, #FEED00 55%, #FFF4A8 100%); }

/* Charts liegen übereinander und werden durchgewechselt */
.chart {
  position:fixed; inset:0; padding:4vh 5vw;
  display:flex; flex-direction:column;
  opacity:0; transition:opacity .8s ease-in-out; pointer-events:none;
}
.chart.active { opacity:1; }

/* Kopf: Wordart-Titel links, Wappen rechts */
.kopf { display:flex; align-items:center; justify-content:space-between; }
.kopf .titel {
  font-size:6vw; font-weight:900; font-style:italic; color:var(--rot);
  letter-spacing:.01em; line-height:1;
  text-shadow:2px 2px 0 #fff, 4px 4px 0 rgba(0,0,0,.35);
}
.kopf .titel small { display:block; font-size:1.5vw; font-style:normal; color:var(--schwarz);
  font-weight:800; text-shadow:none; margin-top:.6vh; letter-spacing:.04em; text-transform:uppercase; }
.kopf img { height:14vh; width:auto; filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); }

/* Spaltenraster */
.spalten { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:4vw; margin-top:2.5vh; align-content:start; }
.spalten.eins { grid-template-columns:1.4fr 1fr; }
.spalte { align-content:start; }

/* Kopfzeile Preis/Pfand */
.kopfzeile { display:grid; grid-template-columns:1fr auto 5.5vw 5.5vw; gap:1.2vw;
  font-size:1.3vw; font-weight:800; color:#7a6a00; padding:0 0 .8vh; }
.kopfzeile .r { text-align:right; }

/* Preis-Zeile */
.zeile { display:grid; grid-template-columns:1fr auto 5.5vw 5.5vw; gap:1.2vw; align-items:baseline;
  padding:.85vh 0; border-bottom:1px solid rgba(0,0,0,.12); }
.zeile:last-child { border-bottom:none; }
.zeile .name  { font-size:1.9vw; font-weight:800; }
.zeile .menge { font-size:1.4vw; color:#5a5000; font-weight:600; text-align:right; white-space:nowrap; }
.zeile .preis { font-size:1.9vw; font-weight:900; text-align:right; white-space:nowrap; }
.zeile .pfand { font-size:1.35vw; color:#4d4d4d; font-weight:600; text-align:right; white-space:nowrap; }

/* Zwischenüberschrift (z. B. „Alkoholfrei" / „Bier & Äppler") */
.gruppe { font-size:1.5vw; font-weight:900; color:var(--rot); margin:1.8vh 0 .6vh; text-transform:uppercase; letter-spacing:.03em; }
.luecke { height:1.6vh; }

/* Speisen: rechte Info-Box */
.hinweis { font-size:1.7vw; line-height:1.5; font-weight:700; }
.hinweis .stern { color:var(--rot); font-weight:900; }

/* Hinweiszeile unter den Speisen (wenn Speisen 2-spaltig laufen) */
.hinweisbox { text-align:center; font-size:1.45vw; font-weight:700; margin-top:1.6vh; }
.hinweisbox .stern { color:var(--rot); font-weight:900; }

.fuss { text-align:center; font-size:1.15vw; color:#5a5000; font-weight:700; padding-top:1.5vh; }

/* ============================================================
   EINSEITIGE PREISLISTE — Getränke + Speisen auf einem Screen
   Funktioniert im Quer- UND Hochformat: alle formatunabhängigen
   Maße in vmin, die Listengröße (--fs, in px) setzt preise-fit.js
   nach echter Messung im Browser.
   ============================================================ */
.chart.einseitig { --fs:20px; padding:2.2vmin 3vmin 1.8vmin; }

.chart.einseitig .kopf { flex:0 0 auto; }
.chart.einseitig .kopf .titel { font-size:7vmin; }
.chart.einseitig .kopf .titel small { font-size:2vmin; margin-top:.5vmin; }
.chart.einseitig .kopf img { height:9vmin; }

/* Getränke- und Speisenblock: quer nebeneinander, hoch untereinander */
.chart.einseitig .bereiche {
  flex:1; min-height:0; overflow:hidden; display:grid;
  grid-template-columns:2.05fr 1fr; gap:2.4vmin; margin-top:1.4vmin;
  align-content:start;
}
.chart.einseitig.schmal .bereiche { grid-template-columns:1fr 1fr; }
@media (max-aspect-ratio: 1/1) {          /* Hochformat: gestapelt */
  .chart.einseitig .bereiche,
  .chart.einseitig.schmal .bereiche { grid-template-columns:1fr; gap:1.6vmin; align-content:start; }
}
.chart.einseitig .bereich { min-width:0; display:flex; flex-direction:column; }

.chart.einseitig .bereich-titel {
  font-size:3.4vmin; font-weight:900; font-style:italic; color:#fff;
  background:var(--rot); border-radius:.8vmin;
  padding:.4vmin 1.6vmin; margin:0 0 1vmin;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.25;
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}

/* Spaltenvarianten: preise-fit.js wählt die, bei der die Schrift am größten wird */
.chart.einseitig .spalten { margin-top:0; gap:3vmin; display:grid; grid-template-columns:1fr 1fr; }
.chart.einseitig .spalten.v-eins { grid-template-columns:1fr; gap:0; }
.chart.einseitig .spalten.eine { grid-template-columns:1fr; }
.chart.einseitig .spalten.v-eins .spalte:nth-child(2) .kopfzeile { display:none; }
.chart.einseitig .spalte { min-width:0; }
.chart.einseitig .spalte:empty { display:none; }

/* Zeilenraster: Zahlenspalten wachsen mit der Schrift mit */
.chart.einseitig .kopfzeile,
.chart.einseitig .zeile { grid-template-columns:minmax(0,1fr) auto calc(var(--fs)*4.2) calc(var(--fs)*2.8); gap:calc(var(--fs)*.4); }
.chart.einseitig .kopfzeile.s,
.chart.einseitig .zeile.s { grid-template-columns:minmax(0,1fr) calc(var(--fs)*3.8); }

.chart.einseitig .kopfzeile { font-size:calc(var(--fs)*.70); padding-bottom:.5vmin; }
.chart.einseitig .zeile { padding:calc(var(--fs)*.20) 0; }
/* Lieferanten-Logo hinter dem Artikelnamen. aspect-ratio ist wichtig:
   damit kennt preise-fit.js die Breite schon vor dem Laden der Grafik. */
.chart.einseitig .zeile .artikel-logo {
  height:1.15em; width:auto; aspect-ratio:185.5/84.1;
  vertical-align:-.2em; margin-left:.45em;
}

/* nowrap: preise-fit.js misst damit den echten Platzbedarf jedes Namens */
.chart.einseitig .zeile .name  { font-size:var(--fs); line-height:1.18; white-space:nowrap; overflow:hidden; }
.chart.einseitig .zeile .menge { font-size:calc(var(--fs)*.73); }
.chart.einseitig .zeile .preis { font-size:var(--fs); }
.chart.einseitig .zeile .pfand { font-size:calc(var(--fs)*.70); }

.chart.einseitig .gruppe { font-size:calc(var(--fs)*.78); margin:calc(var(--fs)*.55) 0 .3vmin; }

.chart.einseitig .hinweisbox { font-size:3.2vmin; margin-top:1.2vmin; line-height:1.3; }
.chart.einseitig .fuss { font-size:2.8vmin; padding-top:.9vmin; line-height:1.3; }