/* =============================================================
   Zülfi’s Imbiss — nur für diese Site
   Speisekarte, Getränke, Standort. Alles Übrige kommt aus
   tokens.css, components.css und layout.css.
   ============================================================= */

/* ============ Klassiker-Raster ============ */
.speisen__grid--fuenf{grid-template-columns:repeat(2,1fr)}
.speisen__grid--fuenf .h3{margin-top:.9rem;font-size:1.02rem}
@media (min-width:760px){
  .speisen__grid--fuenf{grid-template-columns:repeat(6,1fr)}
  .speisen__grid--fuenf .speise{grid-column:span 2}
  /* Die letzten beiden mittig unter den ersten drei */
  .speisen__grid--fuenf .speise:nth-child(4){grid-column:2/4}
  .speisen__grid--fuenf .speise:nth-child(5){grid-column:4/6}
}

/* ============ Auswahl-Listen (Toppings, Dips, Getränke) ============ */
.wahl{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.25rem}
.wahl li{
  padding:.4rem .9rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  font-size:var(--fs-sm);
}
.section--alt .wahl li,.section--surface .wahl li{background:var(--bg)}
.wahl__titel{margin:1.25rem 0 .6rem;font-size:1rem}
.wahl__block{margin-top:1.5rem}

/* ============ Getränke ============ */
.getraenke{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.5vw,1.75rem);
}
.getraenke .tile img{aspect-ratio:1/1}
.getraenk__name{
  margin-top:.75rem;text-align:center;
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-sm);
}
@media (min-width:620px){ .getraenke{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .getraenke{grid-template-columns:repeat(6,1fr)} }

/* ============ Öffnungszeiten und Standort ============ */
.zeiten__ruf{margin:1.5rem 0}
.standort{
  font-style:normal;margin:1rem 0 1.25rem;
  font-family:var(--font-head);font-size:1.1rem;font-weight:600;line-height:1.7;
}

/* ============ Catering-Teaser ============ */
.anlaesse--zwei{grid-template-columns:1fr}
@media (min-width:700px){ .anlaesse--zwei{grid-template-columns:repeat(2,1fr)} }

/* Bild rechts statt links */
@media (min-width:900px){
  .ueber--gedreht{grid-template-columns:1.05fr .95fr}
  .ueber--gedreht .ueber__bild{order:2}
}

/* ============ Speisekarte ============ */
.karte{padding-bottom:clamp(3rem,6vw,5rem)}
/* ---------- Speisekarte als Bestelltafel ----------
   Keine Kästen mehr: Kategorien als große Playfair-Zeilen, Positionen als
   typografische Liste mit Haarlinien. Dieselbe Optik wie die Kurzfassung
   auf der Startseite. */
.kartenband{height:clamp(140px,22vh,260px);overflow:hidden;background:var(--navy)}
.kartenband img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}

.karte__gruppe{margin-bottom:clamp(2.5rem,5vw,4rem)}
.karte__gruppe .h2{margin-bottom:.55rem}
.karte__gruppe .lead{font-size:1rem;margin-bottom:1.1rem;color:var(--text-muted)}
.karte__liste{display:block}
.karte__zeile{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:.1rem 1rem;
  padding-block:.62rem;border-bottom:1px solid var(--line);
  font-family:var(--font-head);font-weight:600;
  font-size:clamp(1rem,.95rem + .3vw,1.18rem);
}
.karte__zeile:last-child{border-bottom:0}
.karte__name{min-width:0;text-wrap:pretty}
.karte__tag{
  display:inline-block;margin-left:.5rem;padding:.1rem .55rem;
  background:var(--ketchup-600);color:var(--on-ketchup);
  border-radius:var(--radius-pill);
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:.1em;
}
.karte__preis{font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
@media (max-width:520px){
  .karte__name{flex:1 1 100%}
  .karte__preis{margin-left:auto}
}

@media print{
  .kartenband{display:none}
  .karte__zeile{padding:.3rem 0;border-color:#ccc}
  .karte__gruppe{break-inside:avoid;margin-bottom:1.5rem}
  .inhaltsverzeichnis,.zurueck{display:none!important}
}