/* =========================================================
   Landgasthof Barni – Speisekarte (Unterseite)
   Ergänzt css/style.css, nutzt dieselben Farbvariablen.
   ========================================================= */

.karte-intro { text-align: center; margin-bottom: 2rem; }

/* ---------- Reiter ---------- */
.karte-reiter {
  display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: thin;
  padding: 0.3rem 0 0.9rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.karte-reiter-btn {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  font-family: var(--font-head); font-size: 1rem; letter-spacing: 0.03em;
  padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.karte-reiter-btn:hover { color: var(--accent); border-color: var(--accent); }
.karte-reiter-btn.aktiv {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
:root[data-theme="dark"] .karte-reiter-btn.aktiv { color: #14201a; }

/* ---------- Bühne & Slide-Animation ---------- */
.karte-buehne {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1.3rem, 4vw, 2.6rem);
  min-height: 420px;
}
.karte-seite { transition: transform 0.4s ease, opacity 0.4s ease; }
/* zweite Seite während der Animation überlagern */
.karte-buehne > .karte-seite:nth-child(2) {
  position: absolute; top: clamp(1.3rem, 4vw, 2.6rem);
  left: clamp(1.3rem, 4vw, 2.6rem); right: clamp(1.3rem, 4vw, 2.6rem);
}
.kommt-von-rechts { transform: translateX(40px); opacity: 0; }
.kommt-von-links  { transform: translateX(-40px); opacity: 0; }
.geht-nach-links  { transform: translateX(-40px); opacity: 0; }
.geht-nach-rechts { transform: translateX(40px); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .karte-seite { transition: none; }
}

/* ---------- Inhalt einer Seite ---------- */
.karte-titel {
  font-family: var(--font-head); color: var(--brand);
  font-size: clamp(1.6rem, 4.5vw, 2.2rem); letter-spacing: 0.03em;
  text-align: center; margin-bottom: 0.4rem;
}
.karte-titel::after {
  content: ""; display: block; width: 54px; height: 3px; border-radius: 3px;
  background: var(--accent); margin: 0.7rem auto 1.2rem;
}
.karte-abschnitt {
  font-family: var(--font-head); color: var(--accent);
  font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase;
  margin: 2rem 0 0.8rem; text-align: center;
}
.karte-hinweis {
  text-align: center; color: var(--text-muted);
  font-size: 0.95rem; margin: 0 auto 1.2rem; max-width: 620px;
}

/* Kopfzeile der Preisspalten */
.karte-spalten {
  display: grid; grid-template-columns: 1fr 5.4rem 5.4rem; gap: 0 0.6rem;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding-bottom: 0.4rem; margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}
.karte-spalten span:not(:first-child) { text-align: right; }

/* Gerichte */
.karte-liste { list-style: none; margin: 0; padding: 0; }
.karte-eintrag {
  /* kein flex-wrap: der Preis bleibt immer rechts, der Text bricht in seiner Spalte um */
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.7rem 0; border-bottom: 1px dashed var(--border);
}
.karte-eintrag:last-child { border-bottom: 0; }
.karte-eintrag-text { flex: 1 1 auto; min-width: 0; }
.karte-name {
  margin: 0; font-weight: 600; color: var(--text); font-size: 1.02rem;
  overflow-wrap: break-word;   /* lange Wörter wie „Schwenkkartoffeln“ umbrechen */
}
.karte-allergene {
  font-weight: 400; font-size: 0.78rem; color: var(--text-muted);
  vertical-align: super; letter-spacing: 0.03em;
}
.karte-beschreibung {
  margin: 0.2rem 0 0; color: var(--text-muted);
  font-size: 0.92rem; line-height: 1.5;
}
.karte-preis {
  flex: 0 0 auto; margin-left: auto; text-align: right;
  font-weight: 600; color: var(--brand);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.karte-preise {
  flex: 0 0 auto; margin-left: auto;
  display: grid; grid-template-columns: 5.4rem 5.4rem; gap: 0 0.6rem;
}
.karte-preise .karte-preis { margin-left: 0; }

/* Beilagen: Aufpreis-Spalte optisch abheben und breiter, da Text statt Zahl */
.karte-spalten.hat-aufpreis { grid-template-columns: 1fr 6rem 7.6rem; }
.hat-aufpreis .karte-preise { grid-template-columns: 6rem 7.6rem; }
.hat-aufpreis .karte-preise .karte-preis:last-child { color: var(--accent); }
.hat-aufpreis .karte-preise .karte-preis.ohne-aufpreis {
  color: var(--text-muted); font-weight: 500; font-size: 0.85rem;
}

/* Allergenliste */
.karte-allergenliste {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.5rem 0.8rem;
  margin: 0 0 1rem;
}
.karte-allergenliste dt {
  font-family: var(--font-head); font-size: 1.05rem;
  color: var(--accent); font-weight: 700;
}
.karte-allergenliste dd { margin: 0; color: var(--text); font-size: 0.95rem; }

.karte-fussnote {
  margin-top: 1.4rem; font-size: 0.85rem; color: var(--text-muted);
}
.karte-zitat {
  margin: 2.2rem auto 0; max-width: 560px; text-align: center;
  font-size: 1rem; line-height: 1.6; color: var(--text-muted); font-style: italic;
}
.karte-zitat::before {
  content: ""; display: block; width: 40px; height: 1px;
  background: var(--accent); opacity: 0.6; margin: 0 auto 1rem;
}

/* ---------- Blättern ---------- */
.karte-navigation {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin-top: 1.6rem;
}
.karte-nav-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 0.6rem 1.2rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}
.karte-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.karte-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.karte-zaehler {
  font-variant-numeric: tabular-nums; color: var(--text-muted);
  font-size: 0.95rem; min-width: 4.5rem; text-align: center;
}
.karte-wischhinweis {
  text-align: center; color: var(--text-muted);
  font-size: 0.85rem; margin-top: 0.8rem;
}

/* ---------- Mobil ---------- */
@media (max-width: 620px) {
  .karte-spalten,
  .karte-spalten.hat-aufpreis { display: none; }   /* Kopfzeile weg – Label steht am Preis */

  /* beide Preise untereinander, jeweils mit Beschriftung darüber */
  .karte-preise,
  .hat-aufpreis .karte-preise {
    grid-template-columns: auto; gap: 0.5rem 0;
    text-align: right; max-width: 7.6rem;
  }
  .karte-preise .karte-preis { font-size: 0.98rem; white-space: normal; }

  .karte-preise .karte-preis[data-label]:not(:empty)::before {
    content: attr(data-label);
    display: block; white-space: normal;
    font-size: 0.64rem; font-weight: 500; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-muted); line-height: 1.25;
  }
  .karte-preise .karte-preis:empty { display: none; }
  .karte-allergenliste { grid-template-columns: 1.9rem 1fr; }
}