/* Ospella — kuechen.css: der fünfte Tab, Kochkurse und Räume.

   Die Sektion sieht bewusst anders aus als das Deck: Karten untereinander statt
   eines Stapels. Was man bucht, blättert man durch; was man kennenlernt,
   entscheidet man einzeln. */

.sektionssatz {
  font-size: var(--gr-flies); line-height: var(--zh-flies);
  color: var(--text-leise); max-width: 42ch;
  margin-bottom: var(--takt-2);
}
.sektionsfuss {
  font-size: var(--gr-neben); line-height: var(--zh-neben);
  color: var(--text-leise); margin-top: var(--takt-2);
}

/* --- Reiter nach Art --- */
.artenreihe {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin-bottom: 14px; padding-bottom: 2px;
}
.artenreihe::-webkit-scrollbar { display: none; }
.artknopf {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--linie-feld); border-radius: var(--r-pille);
  padding: 9px 14px; min-height: 44px;
  font-size: var(--gr-bedien); color: var(--text);
  white-space: nowrap;
}
.artknopf svg { stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.artknopf[aria-pressed="true"] {
  border: 1.5px solid var(--gruen-linie);
  background: var(--flaeche-ruhig); color: var(--gruen-text);
}
.artsatz {
  font-size: var(--gr-neben); line-height: var(--zh-neben);
  color: var(--text-leise); margin-bottom: var(--takt-2); max-width: 44ch;
}

/* --- Eine Küche als Karte --- */
.kuechenkarte { margin-bottom: var(--takt-1); }
.kuechenkopf { display: flex; gap: 13px; align-items: center; margin-bottom: 10px; }
.kuechenkopf .rumpf { min-width: 0; flex: 1; display: block; }
.kuechenkopf .name {
  display: block; font-family: var(--schrift-display); font-weight: 400;
  font-size: var(--gr-listentitel); line-height: var(--zh-listentitel);
  color: var(--text);
}
.kuechenkopf .meta {
  display: block; font-size: var(--gr-neben); color: var(--text-leise); margin-top: 2px;
}

/* Das Partnerlogo bekommt eine eigene helle Auflage. Grund: Es ist eine
   fremde Bilddatei mit eigenem, hellem Hintergrund — im Dunkelmodus stünde
   sonst dunkle Schrift auf dunklem Grund. Die Auflage ist in beiden Modi
   dieselbe, damit das Logo in beiden gleich aussieht. */
.kuechenlogo {
  flex: none; width: 84px; height: 46px;
  border-radius: var(--r-zelle); overflow: hidden;
  background: #FFFCF6; border: 1px solid var(--linie-karte);
  /* Flex, nicht Grid: In einer Grid-Zelle der Höhe `auto` lässt sich weder
     `height: 100%` noch `max-height: 100%` auflösen — beides bleibt wirkungslos
     und das Bild behält seine Eigenhöhe (nachgemessen, siehe unten). Im
     Flex-Container mit fester Höhe löst die Prozentangabe auf. */
  display: flex; align-items: center; justify-content: center; padding: 3px;
}
/* Zwei Messungen vom 01.09.2026, beide am selben Bild, und die zweite ist die
   lehrreichere:

   1. Als Grid-Kind griff `height: 100%` NICHT. Die Prozenthöhe bezog sich auf
      eine Zeile der Höhe `auto`, die Rechnung war zirkulär, der Browser fiel
      auf die Eigenhöhe zurück: 328 × 175 px in einer 352 × 116 px großen Box.
      Das Logo lief unten heraus, sichtbar war nur sein leerer oberer Rand.

   2. Der naheliegende Ausweg — `width: auto` plus `max-height: 100%` — machte
      es schlimmer: Das Bild hatte vor dem Laden GAR KEINE Größe, und ein Bild
      ohne Layoutgröße gilt `loading="lazy"` als unsichtbar. Es wurde nie
      geladen. Gemessen: 0 × 0, `complete: false`, dauerhaft.

   Richtig ist beides zusammen: Flex-Container mit fester Höhe (dort löst die
   Prozentangabe auf) und ein Bild, das die Box FÜLLT und per `object-fit`
   eingepasst wird. Dann steht der Platz schon vor dem ersten Byte fest. */
.kuechenlogo img { width: 100%; height: 100%; object-fit: contain; }
.kuechenlogo.gross { width: 100%; height: 150px; margin-bottom: 12px; padding: 14px; }

.kuechenzeichen {
  flex: none; width: 52px; height: 52px; border-radius: var(--r-bildflaeche);
  display: grid; place-items: center;
  font-family: var(--schrift-display); font-weight: 400; font-size: 1.5rem;
}
.kuechenzeichen.gross {
  width: 100%; height: 118px; font-size: var(--gr-buchstabe); margin-bottom: 12px;
}

.kuechenkarte .pillenreihe { margin-top: 10px; }
.kuechenfuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.kuechenfuss .preis {
  font-size: var(--gr-neben); color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* --- Die zwei Etiketten: echt oder erfunden --- */
.beispielmarke, .partnermarke {
  font-size: var(--gr-marker); line-height: var(--zh-marker); font-weight: 500;
  margin-bottom: 8px;
}
.beispielmarke {
  color: var(--holz-text);
  border-left: 2px solid var(--holz-linie); padding-left: 9px;
}
.partnermarke {
  color: var(--gruen-text);
  border-left: 2px solid var(--gruen-linie); padding-left: 9px;
}

.spruch {
  font-family: var(--schrift-display); font-size: var(--gr-flies);
  color: var(--text-leise); margin: 4px 0 8px;
}

/* --- Wertzeilen im Detail --- */
.wertzeile {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 0; font-size: var(--gr-bedien);
}
.wertzeile .wort { color: var(--text-leise); flex: none; }
.wertzeile .wert { text-align: right; }

/* --- Der Schalter „nach deinem Geschmack" --- */
.schalterzeile { display: flex; align-items: center; gap: 14px; }
.schalterzeile .rumpf { flex: 1; min-width: 0; display: block; }
.schalterzeile .name { display: block; font-size: var(--gr-flies); color: var(--text); }
.schalterzeile .meta {
  display: block; font-size: var(--gr-neben); color: var(--text-leise); margin-top: 2px;
}
.schalter {
  flex: none; width: 52px; height: 32px; border-radius: var(--r-pille);
  border: 1.5px solid var(--linie-feld); background: var(--flaeche-grund);
  padding: 2px; display: flex; align-items: center;
  transition: background var(--d-kaestchen) ease-out, border-color var(--d-kaestchen) ease-out;
}
.schalter .knauf {
  width: 24px; height: 24px; border-radius: var(--r-rund);
  background: var(--text-leise);
  transition: transform var(--d-kaestchen) var(--k-federn), background var(--d-kaestchen) ease-out;
}
.schalter[aria-pressed="true"] {
  background: var(--flaeche-tisch); border-color: var(--flaeche-tisch);
}
.schalter[aria-pressed="true"] .knauf {
  transform: translateX(20px); background: var(--text-auf-gruen);
}