/* Speisekarte (Kevin, 01.11.: Unterseiten im selben Stil, schön verziert): auf der Tischdecke, oben eine Leiste mit den Teilen
   der Karte, die unter der Navigation stehen bleibt. Jeder Teil beginnt mit einer Eierschalen-Raute und einem Titel wie auf der
   Startseite (klein, groß), die Gerichte stehen zweispaltig mit feinen Linien. Der Mittagstisch liegt als Papierkarte auf dem
   Tisch wie die Klassiker der Startseite. Vietnamesische Namen in Be Vietnam Pro. Seite: tools/speisekarte_seite.py */
.kopf_band{margin-top:clamp(40px,5vw,64px)}

/* Leiste der Teile: bleibt unter der Navigation stehen, am Handy seitlich wischbar */
.kategorien{position:sticky;z-index:40;top:calc(var(--nav-oben) + var(--nav-hoehe) + 10px);margin:clamp(40px,5vw,64px) auto 0;
  width:max-content;max-width:calc(100% - 2 * var(--nav-abstand));border-radius:999px;background:var(--nav-glas-menue);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,245,235,.14)}
.kategorien_liste{list-style:none;margin:0;padding:6px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kategorien_liste::-webkit-scrollbar{display:none}
.kategorie_link{display:block;padding:10px 18px;border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;color:var(--creme-88);transition:background-color .3s ease,color .3s ease}
.kategorie_link:hover{background:rgba(255,245,235,.1);color:var(--farbe-neutral)}
.kategorie_link.is-aktiv{background:var(--farbe-neutral);color:var(--farbe-sekundaer)}

/* Ein Teil der Karte */
.teil{max-width:1180px;margin:0 auto;padding-top:clamp(96px,11vw,160px);scroll-margin-top:calc(var(--nav-oben) + var(--nav-hoehe) + 70px)}
.teil_kopf{text-align:center}
.teil_kopf .einlage_raute{width:28px;height:28px;margin-bottom:20px}
.teil_titel{font-size:clamp(40px,5.6vw,92px)}
.teil_einleitung{max-width:36em;margin:clamp(20px,2.2vw,28px) auto 0;font-size:clamp(16px,1.15vw,18px);line-height:1.65;color:var(--creme-88);text-wrap:balance}

.gerichte{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,6vw,96px)}
.gericht{padding:clamp(22px,2.4vw,30px) 0;border-top:1px solid var(--creme-22)}
.gerichte > .gericht:nth-last-child(-n+2){border-bottom:1px solid var(--creme-22)}
.gerichte > .gericht:nth-last-child(2):nth-child(even){border-bottom:0}
.gericht_name{margin:0;font-family:var(--schrift-text);font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:.005em}
.gericht_text{margin:8px 0 0;font-size:15px;line-height:1.62;color:var(--creme-88);max-width:34em}
.gericht_marken{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.gericht_marke{display:inline-block;padding:4px 10px;border:1px solid rgba(255,245,235,.32);border-radius:999px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--creme-88)}
.gericht_marke.is-scharf{border-color:var(--farbe-dominant);background:var(--farbe-dominant);color:var(--farbe-neutral)}

/* Mittagstisch auf dem Papier */
.mittag_blatt{width:min(1000px,100%)}
.mittag_raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"grund zub" "vor zub";grid-template-rows:auto 1fr;
  gap:clamp(28px,3vw,40px) clamp(28px,4vw,64px);margin-top:clamp(28px,3.4vw,44px)}
.mittag_spalte.is-grund{grid-area:grund}.mittag_spalte.is-breit{grid-area:zub}.mittag_spalte.is-vor{grid-area:vor}
.mittag_kopf{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--farbe-dominant)}
.mittag_kopf.is-zweit{margin-top:clamp(28px,3vw,40px)}
.mittag_schritt{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--farbe-dominant);border-radius:50%;font-family:var(--schrift-titel);font-size:16px;letter-spacing:0}
.mittag_liste{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:16px;line-height:1.45}
.mittag_liste li{padding-bottom:8px;border-bottom:1px solid rgba(162,75,34,.18)}
.mittag_gerichte{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.mittag_gerichte .gericht{padding:0;border:0}
.mittag_gerichte .gericht_name{font-size:20px;color:var(--farbe-dominant)}
.mittag_gerichte .gericht_text{margin-top:4px;color:rgba(64,46,50,.9)}
.mittag_gerichte .gericht_marke{border-color:rgba(162,75,34,.4);color:rgba(64,46,50,.86)}
.mittag_gerichte .gericht_marke.is-scharf{background:var(--farbe-dominant);border-color:var(--farbe-dominant);color:var(--farbe-neutral)}

/* Phở bò als Bild im Teil Suppen */
.pho{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center;margin:clamp(48px,6vw,80px) 0 0}
.pho_bild{position:relative;padding:12px;background:linear-gradient(145deg,#4a363a,#2b1e21);border-radius:50%;
  box-shadow:0 30px 60px -22px rgba(10,4,6,.8),inset 0 0 0 1px rgba(255,245,235,.1)}
.pho_bild img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%}
.pho_text{font-size:clamp(16px,1.15vw,18px);line-height:1.7;color:var(--creme-88)}
.pho_text p{margin:0}
.pho_name{font-size:clamp(30px,3vw,44px)}
.pho_art{margin:10px 0 18px!important;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--creme-72)}

/* Nudeln nach Wahl bei den gebratenen Nudeln */
.stil_liste{list-style:none;margin:clamp(36px,4vw,56px) auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.stil_liste li{display:flex;align-items:baseline;gap:10px;padding:12px 22px;border:1px solid rgba(255,245,235,.3);border-radius:999px;font-size:14px;color:var(--creme-88)}
.stil_name{font-weight:500;font-size:16px;color:var(--farbe-neutral)}

/* Hinweise und Schluss */
.hinweis{max-width:1180px;margin:0 auto;padding-top:clamp(104px,12vw,170px);padding-bottom:clamp(96px,11vw,160px)}
.hinweis_blatt{max-width:820px;margin:0 auto;padding:clamp(28px,3.4vw,44px);border:1px solid var(--creme-22);border-radius:4px;background:rgba(36,24,28,.35)}
.hinweis_titel{margin:0 0 16px;font-family:var(--schrift-titel);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.1}
.hinweis_blatt p{margin:0;font-size:15px;line-height:1.7;color:var(--creme-88)}
.hinweis_marken{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:20px!important;font-size:14px!important}
.hinweis_ende{margin-top:clamp(56px,7vw,96px);text-align:center}
.hinweis_pdf{margin:0 0 24px;font-size:15px;color:var(--creme-72)}

@media (max-width:767px){
  .gerichte{grid-template-columns:1fr}
  .gerichte > .gericht:nth-last-child(2):nth-child(even),.gerichte > .gericht:nth-last-child(2){border-bottom:0}
  .mittag_raster{grid-template-columns:1fr;grid-template-areas:"grund" "zub" "vor";grid-template-rows:auto}
  .karte_blatt{--neigung:-.6deg}
  .pho{grid-template-columns:1fr}
  .pho_bild{width:min(320px,80vw);margin:0 auto}
  .kategorien{width:auto;margin-left:var(--nav-abstand);margin-right:var(--nav-abstand)}
  .kategorie_link{padding:10px 14px}
}