/* ============================================================================
   DATEI: css/komponenten.css  –  wiederverwendbare Bausteine
   ============================================================================
   Knöpfe, Kategorie-Leiste, Gerichtskarten, Kategorie-Kacheln, Vorteile,
   Hinweis-Kästen und Rechtstexte. Eine Änderung hier wirkt auf allen Seiten.

   HÄUFIGE ÄNDERUNGEN:
     Preisfarbe                 -> .produktpreis (color)
     Bildformat der Gerichte    -> .produktbild (aspect-ratio)
     Hover-Effekt der Karten    -> .produktkarte:hover (transform)
     Farbe der aktiven Kategorie -> .kategorie-tab.aktiv (background)
   ============================================================================ */

/* ---------- KNÖPFE ----------
   Grundform .button + Variante:
     class="button button-rot"     -> roter, gefüllter Knopf
     class="button button-kontur"  -> nur goldener Rahmen
   WENN DU eine neue Variante willst (z. B. grün): neue Klasse .button-gruen
   mit eigenem background anlegen und im HTML class="button button-gruen" schreiben. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;                 /* mind. 44–48px: gut mit dem Finger zu treffen */
  padding: 11px 24px;
  border-radius: var(--radius-button);
  font-weight: 750;
  transition: transform .18s, background .18s;   /* .18s = Animation dauert 0,18 Sekunden */
}
/* translateY(-2px): beim Darüberfahren hebt sich der Knopf 2px an. 0 = kein Effekt. */
.button:hover { transform: translateY(-2px); }
.button-rot { background: var(--farbe-rot); color: white; }
.button-rot:hover { background: #f01035; }
.button-kontur { border: 1px solid var(--farbe-gold); background: rgba(0, 0, 0, .25); }
.button-kontur:hover { background: rgba(233, 183, 109, .13); }

/* ---------- KATEGORIE-LEISTE (Knöpfe oben auf der Speisekarte) ----------
   overflow-x: auto = bei vielen Kategorien seitlich wischbar statt zu quetschen. */
.kategorie-leiste {
  display: flex; overflow-x: auto;
  margin-top: -1px;
  border: 1px solid var(--farbe-linie); border-radius: 15px;
  background: #131516;
  scrollbar-width: thin;
}
.kategorie-tab {
  flex: 1 0 auto;                   /* Knöpfe teilen sich die Breite, werden aber nie kleiner als ihr Text */
  min-height: 75px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 17px;
  border: 0; border-right: 1px solid rgba(233, 183, 109, .25);
  background: transparent; color: #fff;
  font-weight: 750;
  white-space: nowrap;              /* Kategoriename nicht umbrechen */
}
.kategorie-tab:last-child { border-right: 0; }
.kategorie-tab:hover { background: #242528; }
.kategorie-tab.aktiv { background: var(--farbe-rot); }   /* "aktiv" setzt js/speisekarte.js */
.kategorie-tab .symbol { font-size: 24px; }               /* Größe des Emojis */

/* ---------- GERICHTSKARTE ---------- */
/* overflow: hidden schneidet das Bild an den runden Ecken ab. */
.produktkarte {
  min-width: 0; overflow: hidden;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-karte);
  transition: transform .18s, border-color .18s;
}
.produktkarte:hover { transform: translateY(-4px); border-color: var(--farbe-gold); }

/* aspect-ratio: 1.62 / 1 = Bild ist 1,62-mal so breit wie hoch (Querformat).
   WENN DU 1 / 1 schreibst, werden alle Bilder quadratisch.
   object-fit: cover = Bild füllt die Fläche, ohne verzerrt zu werden (Ränder werden abgeschnitten). */
.produktbild { width: 100%; aspect-ratio: 1.62 / 1; object-fit: cover; }
.produktinfo { padding: 15px 16px 18px; }
/* Name links, Preis rechts. baseline = Textgrundlinien auf einer Höhe. */
.produktkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.produktname { font-size: 16px; font-weight: 800; margin: 0; }
.produktpreis { color: var(--farbe-gold); font-weight: 900; font-size: 17px; white-space: nowrap; }
.produktbeschreibung { color: #d0d0d0; font-size: 13px; line-height: 1.55; margin: 9px 0 0; }
.produktallergene { font-size: .82rem; opacity: .85; margin: .5rem 0 0; }

/* Platzhalter, wenn ein Gericht kein Foto hat: großes Emoji auf dunklem Kreis-Verlauf. */
.bild-platzhalter { display: grid; place-items: center; font-size: 75px; background: radial-gradient(circle at center, #34302a, #141414 75%); }

/* ---------- KATEGORIE-KACHEL (Startseite) ---------- */
.kategoriekarte {
  position: relative; display: block;
  min-height: 195px; overflow: hidden;
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
}
/* Bild füllt die ganze Kachel (position: absolute; inset: 0). */
.kategoriekarte img, .kategoriekarte .bild-platzhalter {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .2s;
}
/* scale(1.05) = beim Darüberfahren 5 % vergrößern. WENN 1.0: kein Zoom. */
.kategoriekarte:hover img { transform: scale(1.05); }
/* Dunkler Verlauf unten, damit der weiße Name lesbar ist. */
.kategoriekarte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 25%, rgba(0, 0, 0, .9)); }
.kategoriekarte span {
  position: absolute; z-index: 1;    /* z-index 1: liegt ÜBER dem Verlauf */
  bottom: 14px; left: 15px; right: 15px;
  display: flex; justify-content: space-between;
  font-weight: 850;
}

/* ---------- VORTEILE (vier Symbole mit Text) ----------
   WENN DU fünf Vorteile willst: repeat(5, 1fr). */
.vorteile { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.vorteil { display: flex; gap: 12px; align-items: flex-start; }
.vorteil-symbol { font-size: 29px; color: var(--farbe-gold); }
.vorteil strong { display: block; font-size: 14px; }
.vorteil small { color: var(--farbe-gedimmt); font-size: 12px; }

/* ---------- HINWEIS-KASTEN (goldener Strich links) ---------- */
.hinweis {
  padding: 16px 20px;
  border-left: 3px solid var(--farbe-gold);
  background: #1a1a1a; color: var(--farbe-gedimmt);
  border-radius: 0 10px 10px 0;     /* nur rechts gerundet: oben-links, oben-rechts, unten-rechts, unten-links */
}
.leertext { color: var(--farbe-gedimmt); padding: 22px; }

/* ---------- RECHTSTEXTE (Impressum, Datenschutz) ----------
   Schmale Textspalte: Zeilen mit mehr als ~80 Zeichen liest man schlecht. */
.rechtstext { max-width: 820px; padding-top: 3rem; padding-bottom: 2rem; }
.rechtstext h2 { color: var(--farbe-gold); font-size: 1.2rem; margin-top: 2rem; }
.rechtstext p { color: #dedede; }
.kleingedruckt { font-size: 13px; color: var(--farbe-gedimmt) !important; margin-top: 2.5rem; }