/* Unterseiten: Speisekarte, Gruppen & Catering, Vietnamesisch-ABC */

.unterseite{background:var(--nacht)}
.unterseite .kopf{background:rgba(28,31,33,.96);box-shadow:0 1px 0 var(--linie)}
.unterseite main{padding-top:96px}
.marke-bild{height:52px;width:auto;display:block}

.pfad{font-size:.85rem;color:var(--text-hell-2);padding-top:12px;padding-bottom:4px}
.pfad a{color:var(--text-hell-2);text-decoration:none}
.pfad a:hover{color:var(--gold-hell)}
.pfad a[aria-current]{color:var(--gold-hell)}

.seite-kopf{padding-top:clamp(24px,5vw,56px);padding-bottom:clamp(24px,4vw,40px);max-width:860px;margin-left:auto;margin-right:auto}
.seite-kopf h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:400;margin:0 0 .35em;hyphens:auto;overflow-wrap:break-word}
.seite-lead{font-size:1.12rem;color:var(--text-hell-2);max-width:40em}

/* Sprungleiste */
.karte-sprung{position:sticky;top:76px;z-index:30;background:rgba(28,31,33,.96);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);backdrop-filter:blur(8px)}
.karte-sprung ul{display:flex;gap:6px;list-style:none;margin:0 auto;padding-top:10px;padding-bottom:10px;overflow-x:auto;scrollbar-width:none}
.karte-sprung ul::-webkit-scrollbar{display:none}
.karte-sprung a{display:block;white-space:nowrap;padding:8px 14px;border-radius:999px;border:1px solid var(--linie);text-decoration:none;font-size:.92rem;color:var(--text-hell)}
.karte-sprung a:hover,.karte-sprung a.aktiv{border-color:var(--gold);color:var(--gold-hell);background:rgba(201,176,122,.08)}
html{scroll-padding-top:150px}

/* Filter und Legende */
.karte-werkzeug{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-top:24px;padding-bottom:8px}
.filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filter-titel{font-size:.9rem;color:var(--text-hell-2);margin-right:4px}
.filter-knopf{font:600 .88rem/1 var(--sans);padding:10px 14px;min-height:40px;border-radius:999px;border:1px solid var(--linie);background:none;color:var(--text-hell);cursor:pointer}
.filter-knopf[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--nacht)}
.legende{font-size:.88rem;color:var(--text-hell-2);margin:0}
.tag{display:inline-block;font:600 .68rem/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:5px 7px;border-radius:5px;margin-right:6px;vertical-align:1px}
.tag-vegan{background:#27402a;color:#b9dcb2}
.tag-vegetarisch{background:#3a3f2a;color:#dcd8a8}
.tag-scharf{background:#4a1f1b;color:#f2b3a8}

/* Karte */
.karte-inhalt{padding-bottom:clamp(64px,8vw,110px)}
.karte-kat{padding-top:clamp(40px,6vw,72px)}
.karte-kat h2{font-size:clamp(2rem,4vw,2.8rem);border-bottom:1px solid var(--linie);padding-bottom:.35em;margin-bottom:.8em}
.gruppe{margin-bottom:40px}
.gruppe h3{font:600 .82rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .8em}
.gruppe-hinweis{color:var(--text-hell-2);font-size:.95rem;margin:-.3em 0 1em}
.gerichte-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.gericht{display:grid;grid-template-columns:1fr;padding:16px 0;border-bottom:1px solid rgba(58,63,67,.7)}
.gericht:has(.gericht-bild){grid-template-columns:96px 1fr;column-gap:16px}
.gericht:has(.gericht-bild)>*:not(.gericht-bild){grid-column:2}
.gericht-bild{grid-row:1/span 4;width:96px;height:96px;object-fit:cover;border-radius:50%}
.gericht-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.gericht h4{font-family:var(--serif);font-weight:500;font-size:1.25rem;margin:0;line-height:1.25}
.g-nr{display:inline-block;min-width:2.4em;font:600 .78rem/1 var(--sans);color:var(--text-hell-2);margin-right:4px;vertical-align:2px}
.g-preis{font-family:var(--serif);font-size:1.15rem;white-space:nowrap;color:var(--gold-hell)}
.g-text{font-size:.93rem;color:var(--text-hell-2);margin:.35em 0 0}
.g-tags{margin:.5em 0 0}
.gericht[hidden]{display:none}

.extras{margin-top:14px;padding:14px 16px;border:1px solid var(--linie);border-radius:10px;background:rgba(255,255,255,.02)}
.gericht .extras{grid-column:1/-1}
.gericht:has(.gericht-bild)>.extras{grid-column:1/-1}
.g-nr:empty{display:none}
.extras-titel{font:600 .78rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.extras ul{list-style:none;margin:0;padding:0}
.extras li{display:grid;grid-template-columns:1.6em auto 1fr auto;gap:8px;font-size:.9rem;padding:3px 0;color:var(--text-hell-2)}
.extras ul.mit-bild li{grid-template-columns:44px 1.6em auto 1fr auto;align-items:center;column-gap:10px;padding:5px 0}
.ex-bild{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover}
.ex-nr{color:var(--gold)}
.ex-name{color:var(--text-hell);font-weight:600}
.ex-preis{white-space:nowrap;color:var(--text-hell)}

.karte-hinweise{margin-top:32px;padding:20px 22px;border:1px solid var(--linie);border-radius:var(--radius);font-size:.95rem;color:var(--text-hell-2)}
.karte-hinweise p{margin:.4em 0}
.karte-hinweise a{color:var(--gold-hell)}

/* Textseiten */
.text-block{padding-top:clamp(32px,5vw,64px);padding-bottom:clamp(32px,5vw,64px);max-width:1000px;margin-left:auto;margin-right:auto}
.text-block p{color:var(--text-hell-2)}
.text-block a{color:var(--gold-hell)}
.text-block h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.zwei-spalten{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:center}
.gespiegelt>figure{order:-1}
.text-bild{margin:0}
.text-bild img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.liste{color:var(--text-hell-2);padding-left:1.2em}
.liste li{margin:.3em 0}
.text-block details{border-top:1px solid var(--linie)}
.text-block details:last-of-type{border-bottom:1px solid var(--linie)}
.text-block summary{cursor:pointer;padding:16px 0;font-size:1.05rem}
.platzhalter{display:inline-block;background:#fff3b0;color:#3a3200 !important;padding:4px 10px;border-radius:6px;font-size:.9rem}

.abc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0}
.abc-eintrag{padding:18px 0;border-bottom:1px solid var(--linie)}
.abc dt{font-family:var(--serif);font-size:1.6rem;color:var(--gold-hell);margin-bottom:.2em}
.abc dd{margin:0;color:var(--text-hell-2)}
.abc dd a{font-size:.88rem;white-space:nowrap}
.hinweis-klein{font-size:.9rem;margin-top:24px}

.unterseite .fuss a{color:inherit}

@media (max-width:980px){
  .gerichte-liste,.abc{grid-template-columns:1fr}
  .zwei-spalten{grid-template-columns:1fr}
  .gespiegelt>figure{order:0}
}
@media (max-width:820px){
  .unterseite main{padding-top:72px}
  .marke-bild{height:42px}
  .karte-sprung{top:64px}
  html{scroll-padding-top:130px}
  .gericht:has(.gericht-bild){grid-template-columns:72px 1fr}
  .gericht-bild{width:72px;height:72px}
  .extras li{grid-template-columns:1.4em 1fr auto}
  .ex-text{grid-column:2;grid-row:2}
  .extras ul.mit-bild li{grid-template-columns:44px 1.4em 1fr auto;row-gap:0}
  .mit-bild .ex-bild{grid-column:1;grid-row:1/span 2}
  .mit-bild .ex-nr{grid-column:2;grid-row:1}
  .mit-bild .ex-name{grid-column:3;grid-row:1}
  .mit-bild .ex-preis{grid-column:4;grid-row:1}
  .mit-bild .ex-text{grid-column:2/-1;grid-row:2}
  .fuss{padding-bottom:120px}
}

/* Impressum, Datenschutz */
.rechtstext{max-width:780px}
.rechtstext h2{font-size:1.35rem;margin:1.6em 0 .4em}
.rechtstext p,.rechtstext li{color:var(--text-hell-2)}

/* Druckfassung (auch Grundlage für speisekarte-quan19-uhlenhorst.pdf, siehe werkzeug/seiten_bauen.py) */
@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  html,body,.unterseite{background:#fff !important;color:#111 !important}
  body{font-size:9.5pt;line-height:1.35}
  .kopf,.handyleiste,.sprunglink,.pfad,.karte-sprung,.karte-werkzeug .filter,.knopfreihe,.gericht-bild,.ex-bild,.fuss-logo,.fuss-links{display:none !important}
  .unterseite main{padding-top:0}
  .breite{max-width:none;padding-left:0;padding-right:0}
  .seite-kopf{padding:0 0 8pt;max-width:none}
  .seite-kopf h1{font-size:24pt;margin:0}
  .seite-lead,.dachzeile,.legende,.g-text,.gruppe-hinweis,.karte-hinweise,.extras li,.fuss{color:#333 !important}
  .karte-kat{padding-top:10pt;break-before:auto}
  .karte-kat h2{font-size:15pt;color:#111;border-color:#999;margin-bottom:4pt;break-after:avoid}
  .gruppe{margin-bottom:8pt}
  .gruppe h3{color:#6b5320;break-after:avoid}
  .gerichte-liste{grid-template-columns:1fr 1fr;gap:0 18pt}
  .gericht,.gericht:has(.gericht-bild){display:block;padding:4pt 0;border-color:#ddd;break-inside:avoid}
  .gericht h4{font-size:10.5pt;color:#111}
  .g-nr{color:#666}
  .g-preis{font-size:10.5pt;color:#111}
  .g-text{font-size:8.5pt;margin-top:1pt}
  .g-tags{margin-top:2pt}
  .tag{border:1px solid #888;background:none !important;color:#333 !important;font-size:6.5pt;padding:2px 4px}
  .extras{border-color:#ccc;background:none;padding:6pt 8pt;break-inside:avoid}
  .extras ul.mit-bild li{grid-template-columns:1.6em auto 1fr auto}
  .extras-titel,.ex-nr{color:#6b5320}
  .ex-name,.ex-preis{color:#111}
  .karte-hinweise{border-color:#ccc;break-inside:avoid}
  .karte-hinweise a{color:#111}
  .karte-hinweise p:last-child{display:none}
  .fuss{border:0;padding:8pt 0 0;background:none}
  a{color:inherit;text-decoration:none}
  [data-reveal]{opacity:1 !important;transform:none !important}
}

/* Lange Knopftexte (z. B. „Zum Abholen bestellen: 040 …“) auf schmalen Handys umbrechen statt überlaufen */
@media (max-width:420px){
  .seite-kopf .knopf{white-space:normal;text-align:center;max-width:100%;line-height:1.25}
}