@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/gloock-400.woff2") format("woff2")}@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/instrumentsans-400.woff2") format("woff2")}@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/instrumentsans-400i.woff2") format("woff2")}@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/instrumentsans-700.woff2") format("woff2")}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/plexmono-400.woff2") format("woff2")}
/* Feine Leinenstruktur. Unbewegt — ein Muster fuer Gastronomie bewegt sich
   nicht. Zwei gekreuzte Streifenraster, dazu ein drittes, gröberes, damit die
   Wiederholung nicht auffällt. Nur background-image, kein Element, kein Skript. */
:root{
  --leinen-hell:
    repeating-linear-gradient(90deg,rgba(43,31,23,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(43,31,23,.030) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(43,31,23,.022) 0 1px,transparent 1px 11px);
  --leinen-dunkel:
    repeating-linear-gradient(90deg,rgba(243,234,218,.030) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(243,234,218,.026) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(243,234,218,.018) 0 1px,transparent 1px 11px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{hyphens:none;-webkit-hyphens:none}
body{margin:0;background:var(--grund);color:var(--text);
  font-family:var(--sans);font-size:clamp(16px,.28vw + 15.2px,17.5px);
  line-height:1.62;letter-spacing:-.005em;
  font-variant-numeric:oldstyle-nums proportional-nums;
  font-variant-ligatures:common-ligatures contextual;
  font-kerning:normal;font-optical-sizing:auto;
  overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}

/* Abstandsleiter — jeder Wert der Seite kommt hierher */
:root{
  --s1:clamp(6px,.5vw,8px);    --s2:clamp(12px,1vw,16px);
  --s3:clamp(20px,1.8vw,28px); --s4:clamp(32px,3vw,48px);
  --s5:clamp(48px,5vw,76px);   --s6:clamp(64px,7.5vw,112px);
  --s7:clamp(88px,12vw,180px);
  --gut:clamp(20px,4vw,64px);  --max:1320px;
  --ease:cubic-bezier(.16,.84,.28,1);
}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.eng{max-width:78ch}
section{padding-block:var(--s6);position:relative}
section.dicht{padding-top:0}

/* Typografie */
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1.06;
  letter-spacing:var(--disp-sp);margin:0;text-wrap:balance}
h2{font-size:clamp(30px,4.4vw,58px)}
/* Eine zweite, kleinere Zeile innerhalb derselben Ueberschrift — fuer den
   Nachsatz, der nicht die Aussage traegt. */
.h2klein{display:block;font-size:.46em;line-height:1.22;margin-top:.5em;
  color:var(--text2);letter-spacing:var(--disp-sp)}
h3{font-size:clamp(21px,2.1vw,27px);line-height:1.18}
h4{font-size:clamp(18px,1.5vw,21px);line-height:1.25}
/* Instrument Sans laeuft enger als Work Sans: dieselbe ch-Zahl ergibt rund
   ein Achtel mehr Zeichen je Zeile. 64ch messen jetzt knapp 88 Zeichen und
   bleiben damit unter der Grenze von 92. umbruch-und-laenge.md */
p{margin:0 0 var(--s2);text-wrap:pretty;max-width:64ch}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(18px,1.35vw,21.5px);line-height:1.52;color:var(--text2)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-variant-numeric:lining-nums tabular-nums}
.num,.zahl,time,.preis{font-variant-numeric:lining-nums tabular-nums}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--kickerfarbe);margin:0 0 var(--s3)}
.gross{font-family:var(--disp);font-size:clamp(26px,3.4vw,42px);line-height:1.2;
  letter-spacing:var(--disp-sp)}

/* Platzhalter — ein Wort, kursiv, gedaempft, feine Punktlinie. Kein grauer Kasten. */
.ph{font-style:italic;color:var(--mute);
  border-bottom:1px dotted color-mix(in srgb,var(--mute) 55%,transparent);
  padding-bottom:1px}

/* ein einziger gefuellter Knopf, sonst unterstrichene Textlinks */
.knopf{display:inline-flex;align-items:center;gap:.6em;
  background:var(--akzent);color:var(--knopftext);text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:0;
  padding:14px 22px;border:0;cursor:pointer;border-radius:var(--r-knopf);
  transition:transform .18s var(--ease),background-color .18s var(--ease)}
.knopf:hover{background:var(--akzent-d)}
@media(hover:hover){.knopf:hover{transform:translateY(-1px)}}
.tlink{color:inherit;text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 42%,transparent);
  transition:text-decoration-color .18s var(--ease)}
.tlink:hover{text-decoration-color:currentColor}

:focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:2px}

.sprung{position:absolute;left:var(--gut);top:-64px;z-index:99;
  background:var(--akzent);color:var(--knopftext);padding:12px 18px;
  text-decoration:none;transition:top .2s var(--ease)}
.sprung:focus{top:8px}

/* Sichtbarkeit ist der Grundzustand. Erst die Klasse js versteckt. */
.rv{opacity:1}
.js .rv{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .95s var(--ease)}
.js .rv.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1!important;transform:none!important;transition:none!important}
}

/* Musterband — die einzige Regieanweisung, und die faellt beim Uebergeben weg */
.musterband{position:fixed;inset-inline:0;top:0;z-index:60;
  background:var(--band-bg);color:var(--band-text);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;line-height:1.5;
  padding:8px var(--gut);text-align:center}

/* Kopfzeile */
.top{position:fixed;inset-inline:0;top:var(--mbh,0px);z-index:50;
  transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.top .inner{max-width:var(--max);margin-inline:auto;padding:var(--s2) var(--gut);
  display:flex;align-items:center;gap:var(--s3);justify-content:space-between}
.marke{font-family:var(--disp);font-size:clamp(21px,1.7vw,26px);line-height:1;
  text-decoration:none;letter-spacing:var(--disp-sp);color:var(--kopftext);white-space:nowrap}
.marke small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;opacity:.72;margin-top:5px;font-weight:400}
.topnav{display:flex;gap:clamp(14px,1.6vw,26px);align-items:center}
.topnav a{font-family:var(--sans);font-size:14px;text-decoration:none;
  color:var(--kopftext);padding-block:9px;position:relative;letter-spacing:0}
.topnav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .26s var(--ease)}
.topnav a:hover::after,.topnav a[aria-current="true"]::after{transform:scaleX(1)}
/* Die Nummer in der Kopfzeile ist der zweite Weg zum Tisch. Als heller Knopf
   ist sie auf Anhieb als solcher zu erkennen — auch dort, wo die Kopfzeile
   ueber einem Bild steht. */
.toptel{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  text-decoration:none;white-space:nowrap;
  background:var(--kreide);color:var(--dunkel);
  padding:9px 16px;border-radius:var(--r-knopf);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 10px 22px -16px rgba(0,0,0,.85);
  transition:background-color .2s var(--ease),transform .18s var(--ease)}
.toptel:hover{background:#FFFBF3}
@media(hover:hover){.toptel:hover{transform:translateY(-1px)}}
.navtoggle{display:none;background:none;border:0;padding:10px;cursor:pointer;
  color:var(--kopftext);font-family:var(--mono);font-size:12px;letter-spacing:.14em}
@media(max-width:900px){
  .topnav{display:none}
  .navtoggle{display:block}
}
@media(max-width:640px){
  .toptel{display:none}
  .marke small{display:none}
}

/* Schublade */
.drawer{position:fixed;inset:0;z-index:70;background:var(--dr-bg);color:var(--dr-text);
  padding:var(--s5) var(--gut);display:flex;flex-direction:column;gap:var(--s2)}
.drawer[hidden]{display:none}
.drawer a{font-family:var(--disp);font-size:clamp(26px,7vw,40px);text-decoration:none;
  padding-block:10px;letter-spacing:var(--disp-sp)}
.drawer .zu{position:absolute;top:var(--s3);right:var(--gut);background:none;border:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;cursor:pointer;padding:12px}
.drawer .drtel{margin-top:auto;font-family:var(--mono);font-size:13px;letter-spacing:.08em}

/* Fortschrittslinie */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;
  transform:scaleX(0);background:var(--akzent);z-index:80;pointer-events:none}
@supports (animation-timeline:scroll()){
  .prog{animation:progl linear;animation-timeline:scroll()}
  @keyframes progl{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* Auftakt, gemeinsamer Teil */
.auftakt{position:relative}
.buehne{position:sticky;top:0;height:100svh;overflow:clip;
  display:grid;grid-template-columns:minmax(0,1fr)}
.leinwand{position:absolute;inset:0;width:100%;height:100%;display:block}
.h-xl{margin:0;font-family:var(--disp);font-weight:400;line-height:.98;
  letter-spacing:var(--disp-sp-xl);max-width:min(100%,1010px)}
.h-xl .mask{display:block;overflow:clip}
.h-xl .fit{display:inline-block;white-space:nowrap}
.js .h-xl{visibility:hidden}
.js.titel-da .h-xl{visibility:visible}
/* Der Name faehrt aus seiner Maske herauf, sobald die Schrift steht und die
   Zeile gesetzt ist. Erst danach kommen Kleinzeile, Unterzeile und Fusszeile —
   in dieser Reihenfolge liest man den Auftakt auch. */
.js .h-xl .fit{transform:translateY(112%)}
.js.titel-da .h-xl .fit{transform:translateY(0);
  transition:transform 1.05s cubic-bezier(.16,.84,.28,1)}
.js .aufkicker{opacity:0}
.js.titel-da .aufkicker{opacity:1;transition:opacity .7s var(--ease) .10s}
.js .namenszug .unterzeile{opacity:0;transform:translateY(20px)}
.js.titel-da .namenszug .unterzeile{opacity:1;transform:none;
  transition:opacity .85s var(--ease) .30s,transform .85s var(--ease) .30s}
.js .auffuss{opacity:0;transform:translateY(18px)}
.js.titel-da .auffuss{opacity:1;transform:none;
  transition:opacity .85s var(--ease) .46s,transform .85s var(--ease) .46s}
@media(prefers-reduced-motion:reduce){
  .js .h-xl .fit,.js.titel-da .h-xl .fit{transform:none;transition:none}
  .js .aufkicker,.js .namenszug .unterzeile,.js .auffuss{
    opacity:1;transform:none;transition:none}
}
html:not(.js) .h-xl .fit{white-space:normal}
html:not(.js) .h-xl{font-size:clamp(38px,8vw,104px)}

/* Informationsband */
.band{background:var(--band2-bg);color:var(--band2-text)}
.band .inner{max-width:var(--max);margin-inline:auto;padding:var(--s4) var(--gut);
  display:grid;gap:var(--s3) var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.band .k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--band2-mute);margin:0 0 6px}
.band .v{margin:0;font-family:var(--disp);font-size:clamp(19px,1.55vw,23px);
  line-height:1.34;letter-spacing:var(--disp-sp)}
.band .v a{text-decoration:none}
.band .v a:hover{text-decoration:underline;text-underline-offset:.2em}

/* Zeiten */
.zeitraster{display:grid;gap:var(--s5) var(--s5);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.zeitraster{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
table.zeiten{width:100%;border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}
table.zeiten th{text-align:left;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  font-weight:400;padding:0 0 var(--s2)}
table.zeiten td{padding:11px 0;border-top:1px solid var(--hair);vertical-align:baseline}
table.zeiten td:last-child{text-align:right}
table.zeiten tr.heute td{color:var(--akzent-d);font-weight:600}
table.zeiten tr.ruhe td:last-child{color:var(--mute)}

.ruhehinweis{font-family:var(--disp);font-size:clamp(23px,2.6vw,34px);
  line-height:1.22;letter-spacing:var(--disp-sp);margin:0 0 var(--s3)}

/* Speisekarte */
.sprungleiste{display:flex;flex-wrap:wrap;gap:0 .55em;margin:0 0 var(--s5);
  font-family:var(--sans);font-size:15px;line-height:2}
.sprungleiste a{text-decoration:none;color:var(--text2);padding-block:6px}
.sprungleiste a:hover{color:var(--text);text-decoration:underline;text-underline-offset:.2em}
.sprungleiste span{color:var(--hair-fest);user-select:none}

/* Die Karte klappt kategorienweise auf. Ohne Skript ebenso — <details> ist
   nativ, der Text steht vollstaendig im Dokument. */
.kartenliste{border-top:1px solid var(--hair)}
.gruppe{border-bottom:1px solid var(--hair);break-inside:avoid}
.gruppe > summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  gap:var(--s2) var(--s3);align-items:baseline;
  padding:var(--s3) 0;cursor:pointer;list-style:none;
  transition:color .2s var(--ease)}
.gruppe > summary::-webkit-details-marker{display:none}
.gruppe > summary::marker{content:""}
.gruppe .gtitel{font-family:var(--disp);font-size:clamp(21px,2.1vw,27px);
  line-height:1.18;letter-spacing:var(--disp-sp)}
.gruppe .gmeta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--mute);font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;justify-self:end}
.gruppe .pfeil{color:var(--mute);align-self:center;
  transition:transform .26s var(--ease),color .2s var(--ease)}
.gruppe[open] > summary .pfeil{transform:rotate(90deg)}
@media(hover:hover){
  .gruppe > summary:hover .gtitel{color:var(--akzent-d)}
  .gruppe > summary:hover .pfeil{color:var(--akzent-d)}
  /* Der Pfeil rueckt an, solange die Zeile zu ist; offen dreht er sich und
     darf nicht zusaetzlich wandern. */
  .gruppe:not([open]) > summary:hover .pfeil{transform:translateX(4px)}
  /* Der Zoom laeuft ueber die eigenstaendige scale-Eigenschaft, nicht ueber
     transform: transform traegt bereits die Parallaxe aus dem Skript. Beide
     Angaben setzt der Browser hintereinander, sie ueberschreiben sich nicht. */
  .pfzug img,.aufteil .rahmen img,.stimme{
    transition:scale .5s var(--ease),box-shadow .5s var(--ease)}
  .pfeld:hover .pfzug img,
  .bildstueck:hover .pfzug img,
  .aufteil .rahmen:hover img{scale:1.045}
  .stimme:hover{scale:1.022;z-index:1;
    box-shadow:inset 0 1px 0 var(--glas-kante),0 22px 44px -26px rgba(0,0,0,.5)}
}
.gruppe > summary:focus-visible{outline:2px solid var(--fokus);outline-offset:3px}
.gruppe .ginhalt{padding-bottom:var(--s4)}
.gruppe[open] > .ginhalt{animation:aufklappen .3s var(--ease) both}
@keyframes aufklappen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .gruppe[open] > .ginhalt{animation:none}
  .gruppe .pfeil{transition:none}
}
.gruppe.leer .gtitel{color:var(--text2)}
.gruppe .gzusatz{font-family:var(--mono);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);margin:0 0 var(--s2)}
@media(max-width:520px){
  .gruppe > summary{grid-template-columns:minmax(0,1fr) auto}
  .gruppe .gmeta{grid-column:1;grid-row:2;justify-self:start}
  .gruppe .pfeil{grid-row:1/3}
}

.karteleiste{display:flex;justify-content:flex-end;margin:0 0 var(--s3)}
/* der Schalter — ein Textlink, kein zweiter Knopfstil */
.karteleiste .alle,.sprungleiste .alle{background:none;border:0;padding:5px 0;margin-left:auto;
  cursor:pointer;font-family:var(--sans);font-size:15px;color:var(--text2);
  text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,currentColor 42%,transparent)}
.karteleiste .alle:hover,.sprungleiste .alle:hover{color:var(--text);text-decoration-color:currentColor}

.gerichte{display:grid;grid-template-columns:minmax(0,1fr) auto;max-width:74ch}
.gericht{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:var(--s3);align-items:baseline;padding:9px 0;
  border-bottom:1px solid var(--hair-fein)}
@supports (grid-template-columns:subgrid){.gericht{grid-template-columns:subgrid}}
.gericht:last-child{border-bottom:0}
.gericht .gname{font-size:16.5px;font-weight:400;letter-spacing:0;color:var(--text);overflow-wrap:break-word;
  transition:transform .2s var(--ease)}
@media(hover:hover){.gericht:hover .gname{transform:translateX(5px)}}
.gericht .gpreis{font-family:var(--mono);font-size:14px;
  font-variant-numeric:lining-nums tabular-nums;color:var(--text2);white-space:nowrap}
.gericht .gtext{grid-column:1;font-size:14.5px;color:var(--mute);
  max-width:56ch;margin:3px 0 0;line-height:1.5}
.gericht .gall{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  color:var(--mute);margin-left:.5em}
@media(max-width:480px){
  .gericht{column-gap:var(--s2)}
  .gericht .gname{font-size:15.5px}
  .gericht .gtext{font-size:14px}
}

/* Eine Aufzaehlung aus lauter kurzen Gliedern laesst sonst ein einzelnes
   Kuerzel auf der letzten Zeile stehen. balance verteilt die Zeilen
   gleichmaessig — bei drei bis vier Zeilen genau der richtige Fall. */
.allergenliste{text-wrap:balance;font-size:14px;color:var(--mute);margin-top:var(--s3);max-width:none}
.allergenliste b{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  font-weight:400;color:var(--text2)}

/* Empfehlungen */
.empf{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.empf{grid-template-columns:repeat(3,minmax(0,1fr))}}
.empf > div{border-top:1px solid var(--hair);padding-top:var(--s2)}
.empf h3{margin:0 0 6px}
.empf p{font-size:15px;color:var(--text2);margin:0}

/* Bildplaetze — solange keine Fotos vorliegen */
.bildplatz{position:relative;background:var(--platz-bg);overflow:clip;
  border-radius:var(--r-bild);
  background-image:repeating-linear-gradient(135deg,
    var(--platz-strich) 0 1px, transparent 1px 9px)}
.bildplatz::after{content:attr(data-motiv);position:absolute;inset:auto 0 0 0;
  padding:10px 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--platz-text);background:var(--platz-fuss)}
.bildplatz .wort{position:absolute;inset:0;display:grid;place-items:center;
  font-style:italic;font-size:15px;color:var(--platz-text)}

/* Stimmen */
.stimmen{margin-top:var(--s5)}
@media(min-width:900px){.stimmen{column-count:2;column-gap:var(--s6)}}
@media(min-width:1240px){.stimmen{column-count:3;column-gap:var(--s5)}}
.stimmkopf{display:grid;gap:var(--s3) var(--s5);align-items:end;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.stimmkopf{grid-template-columns:auto minmax(0,1fr)}}
.stimmkopf p.dazu{font-size:15px;color:var(--text2);max-width:52ch;margin:0}
.stimme{border-top:1px solid var(--hair);padding:var(--s3) 0;break-inside:avoid}
.stimme blockquote{margin:0 0 var(--s2);font-family:var(--disp);
  font-size:clamp(18px,1.5vw,21px);line-height:1.42;letter-spacing:var(--disp-sp)}
.stimme .quelle{font-family:var(--mono);font-size:12px;letter-spacing:.11em;
  color:var(--mute);margin:0}
.wertung{font-family:var(--disp);font-size:clamp(44px,7vw,92px);line-height:.9;
  letter-spacing:var(--disp-sp-xl);margin:0}
.wertung small{display:block;font-family:var(--mono);font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mute);
  margin-top:var(--s2);line-height:1.6}

/* Ausbrechendes Bild */
.ausbruch{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:960px){
  .ausbruch{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s6)}
  .ausbruch > .bild{margin-right:calc(-1 * var(--gut))}
}

/* Randlose Bildstrecke */
.streifen{display:grid;gap:2px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){
  .streifen{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Sieben Bilder in einem Vierer-Raster liessen rechts ein Loch. Das erste
     nimmt deshalb zwei Spalten — ungleiche Verhaeltnisse statt Gleichmass.
     anti-slop A3/A5. */
  .streifen .bildstueck:first-child{grid-column:span 2;aspect-ratio:8/5}
}
.streifen .bildplatz{aspect-ratio:4/5}
.streifen .bildplatz:nth-child(1),.streifen .bildplatz:nth-child(4){aspect-ratio:4/5}

/* Fuss */
footer.seite{background:var(--fuss-bg);color:var(--fuss-text);padding-block:var(--s6) var(--s4)}
footer.seite a{color:inherit}
.fussraster{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.fussraster{grid-template-columns:1.3fr 1fr 1fr}}
.fussraster h4{font-size:15px;font-family:var(--mono);letter-spacing:.15em;
  text-transform:uppercase;color:var(--fuss-mute);margin:0 0 var(--s2);font-weight:400}
.fussraster p,.fussraster li{font-size:15px;color:var(--fuss-text2)}
.fussraster ul{list-style:none;margin:0;padding:0}
.fussraster li{padding:3px 0}
.rechtsblock{border-top:1px solid var(--fuss-hair);margin-top:var(--s5);
  padding-top:var(--s3);display:grid;gap:var(--s3)}
.rechtsblock dl{display:grid;grid-template-columns:minmax(0,1fr);gap:2px var(--s3);margin:0;
  font-size:14px}
@media(min-width:700px){.rechtsblock dl{grid-template-columns:200px minmax(0,1fr)}}
.rechtsblock dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fuss-mute);padding-top:5px}
.rechtsblock dd{margin:0;color:var(--fuss-text2);padding-top:3px}
.schluss{border-top:1px solid var(--fuss-hair);margin-top:var(--s4);padding-top:var(--s3);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;
  font-size:13px;color:var(--fuss-mute)}

/* Anrufleiste auf dem Telefon */
.rufleiste{position:fixed;inset-inline:0;bottom:0;z-index:55;display:none;
  background:var(--ruf-bg);color:var(--ruf-text);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  align-items:center;justify-content:space-between;gap:var(--s2)}
.rufleiste a.knopf{padding:12px 18px;font-size:15px}
.rufleiste .rl{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ruf-mute)}
@media(max-width:760px){.rufleiste{display:flex}
  footer.seite{padding-bottom:calc(var(--s6) + 30px)}}

/* Druck */
@media print{
  .top,.drawer,.rufleiste,.prog,.musterband,.buehne,.sprungleiste{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  section{padding-block:12pt;break-inside:auto}
  .gericht{break-inside:avoid}
  a{text-decoration:none;color:#000}
  .bildplatz{display:none}
  .gruppe > .ginhalt{display:block!important}
  .gruppe .pfeil,.karteleiste{display:none}
}

.gnr{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--mute);
  margin-right:.7em;font-variant-numeric:lining-nums tabular-nums}
.empf .epreis{font-family:var(--mono);font-size:14px;color:var(--akzent-d);
  margin:0 0 6px;font-variant-numeric:lining-nums tabular-nums}
.empf h4 .gnr{display:inline-block}

.anfahrt{display:grid;gap:var(--s4) var(--s5);grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.anfahrt{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.anfahrt{grid-template-columns:repeat(4,minmax(0,1fr))}}
.anfahrt > div{border-top:1px solid var(--hair);padding-top:var(--s2)}
.anfahrt h3{margin:0 0 6px}
.anfahrt p{font-size:15px;color:var(--text2);margin:0}

.gutzuwissen{margin-top:var(--s4);border-top:1px solid var(--hair);padding-top:var(--s3)}
.gutzuwissen h3{margin:0 0 var(--s2)}
.gutzuwissen ul{list-style:none;margin:0;padding:0;
  columns:2;column-gap:var(--s4);font-size:15px;color:var(--text2)}
.gutzuwissen li{padding:4px 0;break-inside:avoid}

figure{margin:0}
.bildtext{font-size:12px;font-family:var(--mono);letter-spacing:.06em;
  color:var(--mute);margin-top:10px;line-height:1.5;max-width:46ch}
.bild img{border-radius:var(--r-bild)}
.portrait img{aspect-ratio:4/5;object-fit:cover;max-height:min(64svh,600px)}
/* Parallaxfeld: der Rahmen beschneidet, das Bild darin ist hoeher und wandert.
   Ohne Skript und ohne Bewegung steht das Bild still im Rahmen. */
.pfeld{display:block;position:relative;overflow:clip;border-radius:var(--r-bild);
  aspect-ratio:var(--pf,4/5);background-color:var(--dunkel3)}
.pfzug{display:block;position:absolute;left:0;top:-7%;width:100%;height:114%;
  will-change:transform}
.pfzug picture{display:block;width:100%;height:100%}
.pfzug img{width:100%;height:100%;object-fit:cover;border-radius:0}
.bildstueck{position:relative}
.portrait .pfeld{max-height:min(64svh,600px)}
@media(prefers-reduced-motion:reduce){
  .pfzug{position:static;top:0;height:auto;will-change:auto;transform:none!important}
  .pfeld{aspect-ratio:auto}
  .pfzug img,.aufteil .rahmen img,.stimme{transition:none;scale:none!important}
}

.bwg{overflow:clip}
.js .bwg img{clip-path:inset(0 0 100% 0);transform:scale(1.05);
  transition:clip-path 1.15s var(--ease),transform 1.45s var(--ease)}
.js .bwg.bwg-an img{clip-path:inset(0 0 0 0);transform:none}
@media(prefers-reduced-motion:reduce){
  .js .bwg img{clip-path:none;transform:none;transition:none}
}
.grillbilder{display:grid;gap:var(--s3)}
.grillbilder .bildplatz{width:100%}
@media(min-width:760px){
  /* Zwei hochformatige Teller untereinander werden dreimal so hoch wie der
     Text daneben. Sie stehen deshalb nebeneinander; die Bildunterschriften
     bleiben unter ihrem eigenen Bild. anti-slop A5. */
  .grillbilder{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);
    align-items:start}
}
@media(min-width:960px){
  .ausbruch .grillbilder{margin-right:calc(-1 * var(--gut))}
}
.ausbruch.umgekehrt .bild{margin-right:0}
@media(min-width:960px){
  .ausbruch.umgekehrt{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .ausbruch.umgekehrt .bild{margin-left:calc(-1 * var(--gut))}
}

section.bilder{padding-block:0}
/* Der Rahmen beschneidet waagerecht und steht selbst im Bild — damit kann
   der wischbare Streifen die Seite nicht aufblaehen. technik.md 27. */
.streifenrahmen{overflow-x:clip}
.bildstueck img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:var(--r-bild)}
.streifen .bildstueck{aspect-ratio:4/5;overflow:clip}
.streifen.wischbar{display:flex;gap:var(--s2);overflow-x:auto;
  scroll-snap-type:x mandatory;padding-inline:var(--gut);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.streifen.wischbar .bildstueck{flex:0 0 min(78vw,420px);scroll-snap-align:start}

:root{
  /* Palette. Die Toene bleiben, nur ihre Rollen drehen sich um. */
  --papier:#F7EFE1; --papier2:#F0E5D2;
  --tinte:#2B1F17; --tinte2:#4E3A2C; --mute-h:#715B47;
  --dunkel:#2A1D15; --dunkel2:#35251A; --dunkel3:#1E140E;
  --kreide:#F3EADA; --kreide2:#CBBBA6; --kreide3:#AC9985;
  --terra:#A24722; --terra-hell:#D9946A; --terra-heller:#E8AE8A;

  /* Die hochwertigen Schnitte aus Fassung A. Gloock hat mehr Strichstaerken-
     Kontrast als Young Serif und traegt die dunkle Flaeche besser; Instrument
     Sans steht enger und ruhiger als Work Sans. */
  --disp:"Gloock",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp-sp:-.012em; --disp-sp-xl:-.026em;

  --r-bild:13px; --r-knopf:11px;

  /* Rollen — dunkle Grundflaeche, warme Kreide darauf */
  --grund:var(--dunkel); --text:var(--kreide); --text2:var(--kreide2);
  --mute:var(--kreide3);
  --akzent:var(--terra-hell); --akzent-d:var(--terra-heller);
  --hair:rgba(243,234,218,.19); --hair-fein:rgba(243,234,218,.10);
  --hair-fest:rgba(243,234,218,.30);
  --kickerfarbe:var(--terra-hell);
  --knopftext:var(--dunkel); --fokus:var(--terra-heller);
  --band-bg:var(--dunkel3); --band-text:var(--kreide2);
  --band2-bg:var(--dunkel2); --band2-text:var(--kreide); --band2-mute:var(--kreide3);
  --kopftext:var(--kreide);
  --dr-bg:var(--dunkel3); --dr-text:var(--kreide);
  --platz-bg:var(--dunkel2); --platz-strich:rgba(243,234,218,.06);
  --platz-text:var(--kreide3); --platz-fuss:rgba(30,20,14,.76);
  --fuss-bg:var(--dunkel3); --fuss-text:var(--kreide); --fuss-text2:var(--kreide2);
  --fuss-mute:var(--kreide3); --fuss-hair:rgba(243,234,218,.18);
  --ruf-bg:var(--dunkel3); --ruf-text:var(--kreide); --ruf-mute:var(--kreide3);
}
body,.auftakt,.papier2,footer.seite,.band{background-image:var(--leinen-dunkel)}
.wechsel{background-image:var(--leinen-hell)}
h2,h3,h4,.h-xl{font-weight:400}
.top{background:transparent}
.top.gefuellt{background:color-mix(in srgb,var(--dunkel) 94%,transparent);
  border-bottom:1px solid var(--hair);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}

/* Der eine helle Abschnitt. Zwei dunkle Flaechen hintereinander lesen sich als
   eine einzige lange Flaeche — der Wechsel traegt den Rhythmus, nicht die Farbe. */
.wechsel{background-color:var(--papier);color:var(--tinte);
  --text:var(--tinte); --text2:var(--tinte2); --mute:var(--mute-h);
  --hair:rgba(43,31,23,.20); --hair-fein:rgba(43,31,23,.11);
  --hair-fest:#CFBEA6;
  --kickerfarbe:var(--terra); --akzent-d:var(--terra);
  --platz-bg:var(--papier2); --platz-strich:rgba(43,31,23,.07);
  --platz-text:var(--mute-h); --platz-fuss:rgba(247,239,225,.74)}
.papier2{background-color:var(--dunkel2)}

/* Auftakt B: Typografie zuerst, Bild als breites Band darunter, Bildaufzug */
.auftakt{background-color:var(--dunkel);padding-top:calc(var(--mbh,0px) + clamp(96px,13vh,150px));
  padding-bottom:0}
.buehne{position:static;height:auto;overflow:visible;padding:0 var(--gut) var(--s5);
  max-width:var(--max);margin-inline:auto;display:block}
.h-xl{font-size:clamp(36px,8.2vw,104px);color:var(--kreide)}
/* Der Namenszug nimmt die volle Breite. Die Begrenzung auf 1010 px stammt aus
   der Zeit, als hier drei lange Zeilen standen. */
.namenszug{max-width:100%}
.namenszug .unterzeile{display:block;font-family:var(--sans);font-weight:400;
  font-size:clamp(20px,2.35vw,35px);line-height:1.26;letter-spacing:-.014em;
  color:var(--kreide2);max-width:26ch;
  margin-top:clamp(16px,1.8vw,28px);text-wrap:balance}
.aufkicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terra-hell);margin:0 0 var(--s3)}
.auffuss{display:grid;gap:var(--s3) var(--s4);align-items:end;margin-top:var(--s4);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.auffuss{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.auffuss .satz{font-size:clamp(16px,1.5vw,23px);line-height:1.45;color:var(--kreide2);
  margin:0;max-width:36ch}
.auffuss .zahl{font-family:var(--disp);font-size:clamp(34px,4.4vw,58px);line-height:.98;
  letter-spacing:var(--disp-sp-xl);color:var(--kreide);margin:0}
@media(min-width:820px){.auffuss .zahl{text-align:right}}
.auffuss .zahl small{display:block;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kreide3);
  margin-top:10px;line-height:1.55}

/* Der Auftakt ist eine Kollage aus drei Tellern. Jede Tafel steht in ihrem
   eigenen Rahmen; das Bild darin ist hoeher als der Rahmen und faehrt beim
   Scrollen mit eigenem Takt. Gemessen wird der Rahmen, nie das bewegte Bild —
   sonst misst man das Ergebnis der eigenen Bewegung. technik.md 27/36.
   Der Ueberstand betraegt 8 % nach oben und unten, der Ausschlag hoechstens
   3,5 %: die Tafel laeuft nie leer. */
.aufcollage{max-width:var(--max);margin-inline:auto;
  padding:clamp(18px,3vh,40px) var(--gut) clamp(30px,6vh,74px);
  display:grid;gap:clamp(6px,1.1vw,16px);align-items:start;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.aufteil{position:relative;margin:0;min-width:0}
.aufteil .rahmen{position:relative;overflow:clip;border-radius:var(--r-bild);
  background-color:var(--dunkel3);aspect-ratio:4/5}
.aufteil picture{display:block;position:absolute;inset:0}
.aufteil img{position:absolute;left:0;top:-8%;width:100%;height:116%;
  object-fit:cover;display:block}
.aufteil:nth-child(1){margin-top:clamp(14px,3vw,52px)}
.aufteil:nth-child(3){margin-top:clamp(26px,5vw,84px)}
.aufteil figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  color:var(--kreide3);margin-top:10px;line-height:1.5}
/* Sichtbarkeit ist der Grundzustand. Erst wenn das Skript laeuft, wird
   versteckt — und dann von zwei Ausfallsicherungen wieder aufgedeckt. */
.js .aufcollage .aufteil{opacity:0;transform:translateY(20px)}
.js .aufcollage.auf .aufteil{opacity:1;transform:none;
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),
             transform .85s cubic-bezier(.22,.61,.36,1)}
.js .aufcollage.auf .aufteil:nth-child(2){transition-delay:.09s}
.js .aufcollage.auf .aufteil:nth-child(3){transition-delay:.18s}
@media(max-width:639px){
  .aufcollage{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    padding-bottom:clamp(26px,5vh,48px)}
  .aufteil:nth-child(1){grid-column:1/-1;margin-top:0}
  .aufteil:nth-child(1) .rahmen{aspect-ratio:4/5}
  .aufteil:nth-child(3){margin-top:0}
  .aufteil figcaption{font-size:12px;letter-spacing:.03em}
}
@media(prefers-reduced-motion:reduce){
  .js .aufcollage .aufteil{opacity:1;transform:none}
  .js .kamera{transform:none!important;filter:none!important}
}
.rinne{display:none}

/* ------------------------------------------------------------------ Glas
   Alles, was Text oder einen Klick traegt, steht auf einer milchigen Scheibe:
   ein Hauch Fuellung, eine helle Oberkante, eine feine Umrandung, ein weicher
   Schatten darunter. Dadurch scheint die Leinenstruktur hindurch, ohne dass
   sie den Text stoert — der Hintergrund bleibt unveraendert, es kommt nur eine
   Schicht davor.

   Milchglas (backdrop-filter) kostet Rechenzeit und lohnt sich nur, wo sich
   wirklich etwas dahinter bewegt: Kopfzeile, Schublade, Anrufleiste, Knopf.
   Die neunzehn Kartenzeilen bekommen nur Fuellung und Kante — hinter ihnen
   liegt eine ruhige Flaeche, ein Weichzeichner haette dort nichts zu tun und
   wuerde beim Scrollen jede Zeile neu rechnen lassen. */
:root{
  --glas:        rgba(243,234,218,.055);
  --glas-stark:  rgba(243,234,218,.085);
  --glas-rand:   rgba(243,234,218,.13);
  --glas-kante:  rgba(243,234,218,.17);
  --glas-tief:   0 16px 36px -24px rgba(0,0,0,.85);
  --glas-milch:  blur(16px) saturate(1.28);
}
/* Der helle Abschnitt dreht die Scheibe um: dort ist das Glas heller als der
   Grund, nicht dunkler. */
.wechsel{
  --glas:        rgba(255,255,255,.52);
  --glas-stark:  rgba(255,255,255,.72);
  --glas-rand:   rgba(43,31,23,.10);
  --glas-kante:  rgba(255,255,255,.85);
  --glas-tief:   0 16px 34px -26px rgba(43,31,23,.45);
}

/* Kopfzeile: hier laeuft die Kollage darunter durch. Die Fuellung bleibt
   trotzdem kraeftig genug, dass die Navigation auch ueber einem hellen Teller
   ihre 4,5:1 haelt — Milchglas allein ist kein Kontrast. */
.top.gefuellt{background:rgba(42,29,21,.82);
  border-bottom:1px solid var(--glas-rand);
  box-shadow:inset 0 1px 0 var(--glas-kante);
  -webkit-backdrop-filter:var(--glas-milch);backdrop-filter:var(--glas-milch)}
/* Die Schublade deckt die Seite ab. Bei 88 % las man die Seite darunter
   zwischen den Menuepunkten durch — das liest sich nicht als Glas, sondern
   als Fehler. 94 % plus kraeftiger Weichzeichner: der Rand bleibt glasig,
   der Text darauf steht ruhig. */
.drawer{background:rgba(30,20,14,.94);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  backdrop-filter:blur(26px) saturate(1.2)}
.rufleiste{background:rgba(30,20,14,.84);
  border-top:1px solid var(--glas-rand);
  box-shadow:inset 0 1px 0 var(--glas-kante);
  -webkit-backdrop-filter:var(--glas-milch);backdrop-filter:var(--glas-milch)}

/* Der eine gefuellte Knopf. Er bleibt terracotta — ein durchsichtiger Knopf
   ist kein Knopf mehr —, bekommt aber dieselbe Lichtkante und traegt den
   Grund darunter mit. */
.knopf{background:color-mix(in srgb,var(--akzent) 92%,transparent);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 14px 30px -20px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2)}
.knopf:hover{background:var(--akzent-d)}

/* Die Karte: jede Kategorie eine eigene Scheibe. */
.kartenliste{border-top:0;display:grid;gap:9px}
.gruppe{border:1px solid var(--glas-rand);border-radius:var(--r-bild);
  background:var(--glas);box-shadow:inset 0 1px 0 var(--glas-kante);
  overflow:hidden;transition:background-color .22s var(--ease)}
.gruppe > summary{padding:var(--s3)}
.gruppe .ginhalt{padding:0 var(--s3) var(--s4)}
/* Der Fokusrahmen liegt innen — aussen wuerde ihn die Scheibe abschneiden. */
.gruppe > summary:focus-visible{outline:2px solid var(--fokus);outline-offset:-4px}
@media(hover:hover){.gruppe:hover{background:var(--glas-stark)}}
.gruppe[open]{background:var(--glas-stark)}

/* Der helle Abschnitt ist selbst eine Scheibe. Damit er wirklich durchsichtig
   sein kann und nicht nur getoent aussieht, sind drei Dinge noetig:

   1. wenig Fuellung (0,60),
   2. brightness() im Weichzeichner — der hebt den dunklen Untergrund an,
      bevor das Papier darueber liegt; das bringt Helligkeit, ohne Deckung,
   3. dunklere Textrollen fuer genau diesen Abschnitt. Die kleinen Monozeilen
      sind der Engpass: Sie tragen bei wenig Fuellung als Erste keine 4,5:1
      mehr. Also werden sie hier dunkler gesetzt, nicht die Scheibe dichter.

   Gerechnet gegen die dunkelste Stelle des Untergrunds, nicht gegen den
   Mittelwert — der Mittelwert ist die Stelle, an der es immer gutgeht. */
.wechsel{background-color:rgba(247,239,225,.60);
  -webkit-backdrop-filter:blur(26px) saturate(1.2) brightness(1.35);
  backdrop-filter:blur(26px) saturate(1.2) brightness(1.35)}
.wechsel{--mute:#453224; --kickerfarbe:#6B2C12;
  --glas:rgba(255,255,255,.55); --glas-stark:rgba(255,255,255,.72)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wechsel{background-color:color-mix(in srgb,var(--papier) 92%,transparent)}
}

/* Stimmen, Gut zu wissen, Anfahrt: dieselbe Scheibe, ohne Trennlinien. */
.stimme{position:relative;z-index:0;border-top:0;background:var(--glas);border:1px solid var(--glas-rand);
  border-radius:var(--r-bild);box-shadow:inset 0 1px 0 var(--glas-kante),var(--glas-tief);
  padding:var(--s3);margin-bottom:var(--s3)}
.gutzuwissen{border-top:0;background:var(--glas);border:1px solid var(--glas-rand);
  border-radius:var(--r-bild);box-shadow:inset 0 1px 0 var(--glas-kante);
  padding:var(--s3)}
.anfahrt > div{border-top:0;background:var(--glas);border:1px solid var(--glas-rand);
  border-radius:var(--r-bild);box-shadow:inset 0 1px 0 var(--glas-kante);
  padding:var(--s3)}

/* Die drei Tafeln des Auftakts bekommen denselben Lichtrand — er liegt als
   Ring ueber dem Bild, damit er die Kamerafahrt darunter nicht mitmacht. */
.aufteil .rahmen::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:1;
  box-shadow:inset 0 1px 0 rgba(243,234,218,.24),inset 0 0 0 1px rgba(243,234,218,.10)}
.aufteil .rahmen{box-shadow:var(--glas-tief)}

/* Wo kein Milchglas moeglich ist, bleibt die Fuellung stehen. Der Text sitzt
   nie auf dem Weichzeichner allein. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top.gefuellt{background:color-mix(in srgb,var(--dunkel) 96%,transparent)}
  .drawer{background:var(--dunkel3)}
  .rufleiste{background:var(--dunkel3)}
  .knopf{background:var(--akzent)}
}

/* Diese Seite ist bereits dunkel. Der alte Dunkelmodus-Block wuerde sie in die
   vorige Welt zuruecktragen — nicht loeschen, unerreichbar machen, damit
   nachvollziehbar bleibt, was dort stand. farbwechsel.md 5. */
@media(prefers-color-scheme:dark) and (min-width:99999px){
  :root{--grund:var(--dunkel)}
}

/* 1 · Schriftgröße — Mindestmaß 12 px. Gemessen: 10,5 und 11,5 px.
      Dafür engere Laufweite, damit die Beschriftungen optisch gleich bleiben. */
.marke small{font-size:12px;letter-spacing:.15em}
.wertung small,.auffuss .zahl small{font-size:12px;letter-spacing:.12em}
.allergenliste b{font-size:12px;letter-spacing:.08em}
.rechtsblock dt{font-size:12px;letter-spacing:.08em}
.bildtext{font-size:12px}
.gericht .gall{font-size:12px;letter-spacing:.08em}
.gnr{font-size:12px}
.empf .epreis{font-size:14px}

/* 2 · Klickflächen — gemessen 19 bis 21 px, verlangt sind 24.
      Die Polsterung ist durchsichtig, das Aussehen ändert sich nicht. */
.fussraster li a,.fussraster p a{display:inline-block;padding-block:4px}
.tlink{display:inline-block;padding-block:3px}
.sprungleiste a{display:inline-block;padding-block:5px}
p .tlink{padding-block:0}          /* im Fließtext ausgenommen (WCAG 2.5.8) */
.satz .tlink{padding-block:0}

/* 3 · Zeilenlänge — gemessen 172 Zeichen, über 92 verliert das Auge die Spur */
.allergenliste{max-width:66ch}
.rechtsblock p{max-width:66ch}

/* 4 · Reihenfolge der Überschriften — h1 sprang auf h4 */
.empf h3,.anfahrt h3,.gutzuwissen h3,.fussraster h4{font-size:clamp(17px,1.4vw,20px);line-height:1.25}

/* Impressum und Datenschutz — dieselbe Welt, nur ohne Bilder */
.rechtsseite{padding-top:0}
.rechtsseite .top{position:static}
.rblatt{padding-block:var(--s6) var(--s7)}
.rblatt h1{font-size:clamp(32px,5vw,58px);margin-bottom:var(--s4)}
.rblatt h2{font-size:clamp(19px,1.9vw,24px);margin:var(--s5) 0 var(--s2);
  padding-top:var(--s3);border-top:1px solid var(--hair)}
.rblatt h3{font-size:clamp(17px,1.5vw,20px);margin:var(--s4) 0 var(--s2)}
.rblatt p,.rblatt li{max-width:64ch}
.rblatt ul{margin:0 0 var(--s2);padding-left:1.1em}
.rblatt li{padding:3px 0}
.rblatt .vorsatz{font-size:clamp(17px,1.3vw,20px);line-height:1.55;
  color:var(--text2);max-width:66ch}
dl.rdl{display:grid;grid-template-columns:minmax(0,1fr);gap:2px var(--s4);
  margin:0 0 var(--s3)}
@media(min-width:700px){dl.rdl{grid-template-columns:220px minmax(0,1fr)}}
dl.rdl dt{font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);padding-top:5px}
dl.rdl dd{margin:0;padding-top:3px}
.rblatt .rhinweis{margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--hair);font-size:14px;color:var(--mute);max-width:60ch}
/* Klickflaeche im Fuss — gemessen 15 px, verlangt sind 24 */
.schluss a{display:inline-block;padding-block:5px}
.rechtsseite .topnav{display:flex}

/* ------------------------------------------------------------ Weltbild
   Statt der Leinenstruktur steht eine Aufnahme fest hinter der Seite. Sie
   liegt hinter allem (z-index -3), darueber ein Schleier (-2), darueber die
   Abschnitte mit ihren eigenen, halbdurchsichtigen Flaechen. */
html{background-color:var(--dunkel3)}
body{background-color:transparent;background-image:none}
body::before{content:"";position:fixed;inset:0;z-index:-3;
  background-image:url("bilder/hintergrund-gross.webp");background-image:image-set(url("bilder/hintergrund-gross.avif") type("image/avif"),url("bilder/hintergrund-gross.webp") type("image/webp"));
  background-size:cover;background-position:center;background-repeat:no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-2;
  background:linear-gradient(180deg,
    rgba(30,20,14,0.58) 0%, rgba(42,29,21,0.54) 46%, rgba(30,20,14,0.62) 100%)}

/* Die Leinenstruktur entfaellt ueberall, wo sie lag. */
body,.auftakt,.papier2,footer.seite,.band,.wechsel{background-image:none}

/* Jeder Abschnitt traegt seine eigene Flaeche. Ohne sie stuende Fliesstext
   direkt auf dem Foto — bei einer weissgetuenchten Wand ist dort kein
   Kontrast mehr zu holen. */
main > section{background-color:rgba(42,29,21,.70)}
.auftakt{background-color:rgba(42,29,21,0.42)}
.band{background-color:rgba(30,20,14,.74)}
.papier2{background-color:rgba(53,37,26,.72)}
.wechsel{background-color:rgba(247,239,225,.60)}
footer.seite{background-color:rgba(30,20,14,.80)}
/* Die Bildstrecke ist selbst Bild — dort darf die Aufnahme durchkommen. */
main > section.bilder{background-color:rgba(42,29,21,.34)}

/* Die Milchglasflaechen haben jetzt wirklich etwas hinter sich. */
.gruppe{background:rgba(243,234,218,.06)}
.gruppe[open]{background:rgba(243,234,218,.10)}

/* Auf schmalen Bildschirmen genuegt die kleine Fassung. */
@media(max-width:820px){body::before{background-image:url("bilder/hintergrund-klein.webp");background-image:image-set(url("bilder/hintergrund-klein.avif") type("image/avif"),url("bilder/hintergrund-klein.webp") type("image/webp"))}}