/* ============================================================
   DIE METZGEREI — Stuttgart-West
   Ruhig und hell. Laut sind die Worte, nicht die Fläche.
   Rot #E74011 ist die belegte Hausfarbe (eigene Altseite + Leuchtreklame),
   Grün kommt von den Retrosesseln im Haus. Beides sparsam.
   Gebaut 28.07.2026 · Web-Fabrik
   ============================================================ */

:root{
  --papier:#F7F4ED;
  --elfenbein:#FFFDF9;
  --sand:#F1EBDF;
  --tinte:#1B1A17;
  --grau:#6E6A61;
  --linie:rgba(27,26,23,.14);
  --linie-fein:rgba(27,26,23,.08);
  --rot:#E74011;
  --rot-tief:#B62F09;
  --gruen:#2C4F43;
  --nacht:#0E0B08;

  --innen:1120px;
  --luft:clamp(4rem,9vw,8rem);

  --display:'Bodoni Moda', 'Times New Roman', Georgia, serif;
  --text:'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --schild-kasten:#FFFDF9;
  --schild-rahmen:#DCD3C2;
  --schild-glut:none;

  /* Token-Vertrag der Fabrik: die gemeinsame Vorschau-Leiste (vorlagen/pitch-leiste.html)
     erwartet diese vier Namen. Jede Seite bedient sie aus ihrer eigenen Palette. */
  --accent:var(--rot);
  --bg:var(--papier);
  --fg:var(--tinte);
  --font-body:'Public Sans';
}

/* Das Schild ist das einzige, was sich mit der Tageszeit ändert. */
[data-tag="abend"], [data-tag="nacht"]{
  --schild-kasten:#171208;
  --schild-rahmen:#2E2419;
  --schild-glut:drop-shadow(0 0 10px rgba(231,64,17,.75));
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--text);
  font-size:clamp(1rem,.97rem + .18vw,1.08rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--rot); color:#fff; }

.innen{ width:min(100% - 2.5rem, var(--innen)); margin-inline:auto; }
.nur-lesbar{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Typografie ---------- */
.titel,.gross-titel,.mittel-titel{
  font-family:var(--display); font-weight:400; margin:0;
  letter-spacing:-.012em; line-height:1.04; hyphens:none;
}
.titel{ font-size:clamp(2.5rem,7.4vw,4.9rem); line-height:1.02; }
.gross-titel{ font-size:clamp(2.1rem,5.4vw,3.7rem); }
.mittel-titel{ font-size:clamp(1.25rem,2.6vw,1.6rem); }
.oberzeile{
  font-family:var(--text); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--grau); margin:0 0 1.5rem;
}
.oberzeile-rot{ color:var(--rot); }
.oberzeile-hell{ color:rgba(255,253,249,.62); }

/* ============================================================
   LADESCHILD — der einzige dunkle Moment
   ============================================================ */
#ladeschild{
  position:fixed; inset:0; z-index:120;
  background:radial-gradient(120% 90% at 50% 44%, #22160F 0%, var(--nacht) 72%);
  display:grid; place-content:center; justify-items:center; gap:2.5rem;
  padding:2rem;
  transition:opacity .6s ease, visibility .6s;
}
#ladeschild.weg{ opacity:0; visibility:hidden; pointer-events:none; }
.ls-schild{ display:flex; flex-direction:column; align-items:center; }
.ls-kasten{
  width:clamp(56px,14vw,84px);
  background:#171208; border:2px solid #2E2419; border-radius:2px;
  padding:clamp(9px,2vw,13px) clamp(7px,1.6vw,10px);
}
.ls-halter{ width:4px; height:clamp(26px,6vw,44px); background:linear-gradient(#2E2419,#171208); }
.ls-fuss{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:#6A5B4B; margin:0; text-align:center;
}

/* Buchstaben-Bausteine */
.buchstaben{ position:relative; width:100%; aspect-ratio:260/1920; }
.buchstaben .bu{
  position:absolute; left:0; width:100%;
  background-color:#3A2A20;
  -webkit-mask-image:url('wortmarke.png'); mask-image:url('wortmarke.png');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
@media (prefers-reduced-motion:no-preference){
  #ladeschild .bu{ animation:zuenden .95s steps(1,end) forwards; animation-delay:var(--verzug); }
}
@keyframes zuenden{
  0%,14%   { background-color:#33251C; filter:none; }
  16%,19%  { background-color:var(--rot); filter:drop-shadow(0 0 9px rgba(231,64,17,.8)); }
  21%,30%  { background-color:#33251C; filter:none; }
  32%,35%  { background-color:var(--rot); filter:drop-shadow(0 0 11px rgba(231,64,17,.85)); }
  37%,45%  { background-color:#4A3225; filter:none; }
  47%,100% { background-color:var(--rot); filter:drop-shadow(0 0 14px rgba(231,64,17,.7)); }
}
@media (prefers-reduced-motion:reduce){ #ladeschild .bu{ background-color:var(--rot); } }

/* ============================================================
   KOPF
   ============================================================ */
.sprung{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--tinte); color:#fff; padding:.8rem 1.2rem; }
.sprung:focus{ left:.5rem; top:.5rem; }

.kopf{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:1.25rem;
  padding:.7rem clamp(1.25rem,4vw,3rem);
  background:rgba(247,244,237,.9);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--linie-fein);
}
.kopf-marke{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:inherit; }
.kopf-schild,.fuss-schild{
  display:block; width:26px; height:26px; flex:none;
  background-color:var(--rot);
  -webkit-mask:url('marke-m.png') no-repeat center/contain;
  mask:url('marke-m.png') no-repeat center/contain;
}
.fuss-schild{ background-color:var(--papier); width:30px; height:30px; }
.kopf-name{ font-family:var(--display); font-size:1.1rem; letter-spacing:.01em; }
.kopf-nav{ margin-left:auto; display:none; gap:1.8rem; }
.kopf-nav a{
  color:var(--grau); text-decoration:none; font-size:.86rem; letter-spacing:.02em;
  padding-bottom:.2rem; border-bottom:1px solid transparent;
}
.kopf-nav a:hover,.kopf-nav a:focus-visible{ color:var(--tinte); border-bottom-color:var(--rot); }
.kopf-tel{
  margin-left:auto; color:var(--tinte); text-decoration:none;
  font-size:.84rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  border-bottom:1px solid var(--rot); padding-bottom:.18rem;
}
.kopf-tel:hover{ color:var(--rot); }
.kopf-tel-lang{ display:none; }
@media (min-width:900px){
  .kopf-nav{ display:flex; }
  .kopf-tel{ margin-left:0; }
  .kopf-tel-lang{ display:inline; }
  .kopf-tel-kurz{ display:none; }
}

/* ============================================================
   BÜHNE
   ============================================================ */
.buehne{
  position:relative; overflow:hidden;
  padding:clamp(3rem,8vw,5.5rem) clamp(1.25rem,4vw,3rem) clamp(3.5rem,8vw,6rem);
}
.buehne-licht{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 55% at 18% 6%, rgba(255,255,255,.9) 0%, transparent 60%),
    radial-gradient(60% 50% at 92% 88%, rgba(231,64,17,.05) 0%, transparent 65%),
    url('papier.jpg') repeat;
  background-size:auto, auto, 520px;
  opacity:.85;
}
.buehne-inhalt{ position:relative; z-index:2; padding-right:calc(44px + 1.2rem); }

.titel{ margin:0 0 1.5rem; max-width:16ch; }
.titel-zeile{ display:block; }
.titel-rot{ font-style:italic; color:var(--rot); }

.unterzeile{ margin:0 0 .6rem; max-width:44ch; color:var(--tinte); font-size:clamp(1.02rem,.98rem+.3vw,1.2rem); }
.unterzeile-fein{ font-size:.95rem; color:var(--grau); margin-bottom:2rem; max-width:46ch; }
.unterzeile strong{ font-weight:600; }

.status{
  display:flex; align-items:center; gap:.55rem; margin:0 0 2rem;
  font-size:.86rem; color:var(--grau); letter-spacing:.01em;
}
.status-punkt{ width:7px; height:7px; border-radius:50%; background:var(--grau); flex:none; }
.status.offen .status-punkt{ background:#3B8F5C; }
@media (prefers-reduced-motion:no-preference){
  .status.offen .status-punkt{ animation:puls 2.8s ease-out infinite; }
}
@keyframes puls{ 0%{box-shadow:0 0 0 0 rgba(59,143,92,.5)} 70%{box-shadow:0 0 0 8px rgba(59,143,92,0)} 100%{box-shadow:0 0 0 0 rgba(59,143,92,0)} }
.status.zu .status-punkt{ background:var(--rot); }
.status.offen .status-text{ color:var(--tinte); }

.tasten{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; }
.taste{ text-decoration:none; font-family:var(--text); }
.taste-voll{
  display:inline-flex; flex-direction:column; background:var(--rot); color:#fff;
  padding:.8rem 1.4rem; font-weight:600; font-size:.95rem; line-height:1.25;
  transition:background-color .18s ease;
}
.taste-voll:hover{ background:var(--rot-tief); }
.taste-klein{ font-weight:400; font-size:.76rem; opacity:.88; letter-spacing:.04em; }
.taste-linie{
  color:var(--tinte); font-size:.92rem; border-bottom:1px solid var(--linie);
  padding-bottom:.2rem;
}
.taste-linie:hover{ border-bottom-color:var(--rot); color:var(--rot); }
.taste-gross{ font-size:1rem; padding:.95rem 1.7rem; }

/* Das Schild — hängt wie an der Fassade von oben herein */
.buehne-schild{
  position:absolute; z-index:2; top:0; right:clamp(1rem,5vw,4.5rem);
  display:flex; flex-direction:column-reverse; align-items:center; pointer-events:none;
}
.schild-kasten{
  width:clamp(44px,10vw,88px);
  background:var(--schild-kasten);
  border:2px solid var(--schild-rahmen); border-radius:2px;
  padding:clamp(8px,1.6vw,13px) clamp(6px,1.2vw,10px);
  transition:background-color .9s ease, border-color .9s ease;
}
.schild-halter{ width:4px; height:clamp(18px,4vw,40px); background:var(--schild-rahmen); transition:background-color .9s ease; }
.buehne-schild .bu{ background-color:var(--rot); filter:var(--schild-glut); transition:filter .9s ease; }
[data-tag="zu"] .buehne-schild .bu{ background-color:#C4B9A5; filter:none; }

@media (min-width:900px){
  .buehne{ display:flex; align-items:center; min-height:min(80svh,700px); padding-inline:clamp(2rem,6vw,5rem); }
  .buehne-inhalt{ padding-right:0; }
}

/* ============================================================
   DIE DREI KATEGORIEN — die Hauptnavigation der Seite
   ============================================================ */
.drei{ padding:var(--luft) 0 calc(var(--luft) * .7); }
.drei-liste{ list-style:none; margin:0; padding:0; display:grid; gap:2.5rem; }
.drei-kachel a{ display:block; text-decoration:none; color:inherit; }
.drei-kachel picture{ display:block; overflow:hidden; background:var(--sand); }
.drei-kachel img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; }
.drei-kachel a:hover img{ transform:scale(1.03); }
.drei-text{ padding-top:1.2rem; }
.drei-zeit{ display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rot); font-weight:600; }
.drei-kachel h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,4vw,2.1rem); margin:.5rem 0 .6rem; }
.drei-kachel p{ margin:0 0 1rem; color:var(--grau); font-size:.95rem; max-width:36ch; }
.drei-pfeil{ font-size:.85rem; font-weight:600; border-bottom:1px solid var(--rot); padding-bottom:.15rem; }
.drei-kachel a:hover .drei-pfeil{ color:var(--rot); }
@media (min-width:900px){ .drei-liste{ grid-template-columns:repeat(3,1fr); gap:2.5rem; } }

/* ============================================================
   BEWERTUNG
   ============================================================ */
.bewertung{ background:var(--sand); padding:calc(var(--luft) * .6) 0; }
.bewertung-raster{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 3rem; }
.bewertung-zahl{ flex:none; }
.bew-wert{ font-family:var(--display); font-size:clamp(3.2rem,9vw,4.6rem); line-height:1; margin:0; }
.bew-sterne{ margin:.2rem 0 0; color:var(--rot); letter-spacing:.16em; font-size:1rem; }
.bewertung-text{ flex:1 1 22rem; }
.bewertung-text h2{ margin:0 0 .6rem; }
.bewertung-text p{ margin:0 0 .9rem; color:var(--grau); max-width:52ch; }
.bewertung-link{ font-size:.85rem; color:var(--tinte); border-bottom:1px solid var(--rot); padding-bottom:.15rem; text-decoration:none; }
.bewertung-link:hover{ color:var(--rot); }

/* ============================================================
   BILDER
   ============================================================ */
.bilder{ padding:var(--luft) 0; }
.bilder .gross-titel{ margin-bottom:2.5rem; }
.bilder-raster{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); }
.bild{ margin:0; position:relative; }
.bild img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--sand); }
.bild figcaption{
  position:absolute; left:0; bottom:0; padding:.45rem .8rem;
  background:rgba(27,26,23,.72); color:#fff; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.bild-gross img{ aspect-ratio:4/3; }
@media (min-width:900px){
  .bilder-raster{ grid-template-columns:repeat(4,1fr); }
  .bild-gross{ grid-column:span 2; grid-row:span 2; }
  .bild-gross img{ aspect-ratio:1/1; }
}
.bilder-fuss{ margin-top:1.2rem; font-size:.78rem; color:var(--grau); }

/* ============================================================
   RESERVIEREN
   ============================================================ */
.reservieren{ background:var(--tinte); color:var(--papier); padding:var(--luft) 0; }
.reservieren .gross-titel{ color:var(--elfenbein); }
.res-raster{ display:grid; gap:3rem; }
.res-text{ color:rgba(247,244,237,.66); max-width:38ch; margin:1.8rem 0 1.6rem; }
.res-telefon{
  font-family:var(--display); font-size:1.9rem; color:var(--elfenbein);
  text-decoration:none; border-bottom:1px solid var(--rot); padding-bottom:.2rem;
}
.res-telefon:hover{ color:var(--rot); }

.res-form{ display:grid; gap:1.1rem; align-content:start; }
.feld{ margin:0; display:flex; flex-direction:column; gap:.35rem; }
.feld-paar{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
.feld label{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,244,237,.62); }
.feld-optional{ letter-spacing:.06em; text-transform:none; opacity:.7; }
.feld input,.feld select,.feld textarea{
  font:inherit; font-size:1rem; color:var(--elfenbein);
  background:rgba(247,244,237,.06); border:1px solid rgba(247,244,237,.22);
  padding:.7rem .8rem; border-radius:0; width:100%;
  -webkit-appearance:none; appearance:none;
}
.feld select{ background-image:linear-gradient(45deg,transparent 50%,rgba(247,244,237,.6) 50%),linear-gradient(135deg,rgba(247,244,237,.6) 50%,transparent 50%); background-position:calc(100% - 18px) 1.35rem,calc(100% - 12px) 1.35rem; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.feld textarea{ resize:vertical; min-height:3.5rem; }
.feld input:focus,.feld select:focus,.feld textarea:focus{ outline:2px solid var(--rot); outline-offset:1px; border-color:transparent; }
.feld input[aria-invalid="true"],.feld select[aria-invalid="true"]{ border-color:var(--rot); }
.feld-falle{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.feld-hinweis{ font-size:.78rem; color:rgba(247,244,237,.5); margin:.2rem 0 .4rem; max-width:44ch; }
.feld-hinweis a{ color:rgba(247,244,237,.8); }
#res-senden{ justify-self:start; border:0; cursor:pointer; font-family:var(--text); }
#res-senden[disabled]{ opacity:.6; cursor:progress; }
.res-antwort{ margin:.4rem 0 0; font-size:.92rem; min-height:1.2em; }
.res-antwort.gut{ color:#8ED6A6; }
.res-antwort.schlecht{ color:#FF9A7A; }
.res-erfolg{ border:1px solid rgba(247,244,237,.22); padding:1.6rem; }
.res-erfolg h3{ font-family:var(--display); font-weight:400; font-size:1.6rem; margin:0 0 .6rem; color:var(--elfenbein); }
.res-erfolg p{ margin:0 0 .5rem; color:rgba(247,244,237,.72); font-size:.95rem; }
.res-erfolg dl{ margin:1rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; font-size:.92rem; }
.res-erfolg dt{ color:rgba(247,244,237,.5); }
@media (min-width:900px){ .res-raster{ grid-template-columns:.9fr 1.1fr; gap:5rem; } }

/* ============================================================
   DAS HAUS
   ============================================================ */
.haus{ background:var(--sand); padding:var(--luft) 0; }
.haus-raster{ display:grid; gap:3rem; }
.haus .gross-titel{ margin-bottom:1.8rem; }
.haus-text p{ max-width:52ch; color:var(--grau); }
.haus-text strong{ color:var(--tinte); font-weight:600; }
.haus-zitat{
  margin:0; align-self:center; border-left:2px solid var(--rot); padding-left:1.6rem;
}
.haus-zitat p{
  font-family:var(--display); font-style:italic; font-size:clamp(1.4rem,3.4vw,2rem);
  line-height:1.25; margin:0 0 .9rem;
}
.haus-zitat footer{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grau); }
.haus-bild{ margin:0; }
.haus-bild img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; background:var(--papier); }
.haus-bild figcaption{ margin-top:.7rem; font-size:.78rem; color:var(--grau); }
.haus-zitat{ margin-top:2.5rem; }
@media (min-width:920px){ .haus-raster{ grid-template-columns:1.25fr .8fr; gap:5rem; } }

/* ============================================================
   DIE KARTE
   ============================================================ */
.karte{ padding:var(--luft) 0; }
.karte-kopf{ margin-bottom:3rem; }

.reiter{
  display:flex; flex-wrap:wrap; gap:0 1.4rem;
  border-bottom:1px solid var(--linie);
}
@media (min-width:560px){ .reiter{ flex-wrap:nowrap; gap:2rem; } }
.reiter button{
  font:inherit; font-family:var(--display); font-size:clamp(1.05rem,2.4vw,1.3rem);
  background:none; border:0; border-bottom:2px solid transparent; color:var(--grau);
  cursor:pointer; padding:0 0 .8rem; white-space:nowrap; transition:color .18s, border-color .18s;
}
.reiter button[aria-selected="true"]{ color:var(--tinte); border-bottom-color:var(--rot); }
.reiter button:hover:not([aria-selected="true"]){ color:var(--tinte); }

.karte-blatt[hidden]{ display:none; }
.karte-blatt{ padding-top:2.5rem; }
.blatt-kopf{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.4rem; margin:0 0 .5rem; }
.blatt-kopf h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,4vw,2.2rem); margin:0; }
.blatt-zeit{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rot); font-weight:600; }
.blatt-vorspann{ max-width:56ch; color:var(--grau); margin:0 0 3rem; }

.blatt-teil + .blatt-teil{ margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--linie); }
.karte-hinweis{ font-size:.85rem; color:var(--grau); margin:1rem 0 0; }
.gruppe{ margin:0; border-bottom:1px solid var(--linie); }
.gruppe summary{
  display:flex; align-items:baseline; gap:1rem; cursor:pointer; list-style:none;
  padding:1.05rem 0; font-family:var(--display); font-size:1.25rem;
}
.gruppe summary::-webkit-details-marker{ display:none; }
.gruppe summary::after{
  content:'+'; margin-left:auto; font-family:var(--text); font-size:1.3rem;
  line-height:1; color:var(--rot); transition:transform .2s ease;
}
.gruppe[open] summary::after{ content:'–'; }
.gruppe summary:hover .gruppe-name{ color:var(--rot); }
.gruppe-anzahl{ font-family:var(--text); font-size:.72rem; letter-spacing:.1em; color:var(--grau); }
.gruppe-inhalt{ padding-bottom:1.6rem; }
.gruppe-notiz{ font-size:.82rem; color:var(--grau); margin:1rem 0 0; max-width:58ch; }
.gericht-liste{ list-style:none; margin:0; padding:0; }
.gericht{ padding:.85rem 0; border-bottom:1px solid var(--linie-fein); }
.gericht-zeile{ display:flex; align-items:baseline; gap:.55rem; margin:0; }
.gericht-name{ font-weight:600; font-size:1rem; }
.gericht-punkte{ flex:1; border-bottom:1px dotted rgba(27,26,23,.28); transform:translateY(-.28em); min-width:1.5rem; }
.gericht-preis{ font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--tinte); }
.gericht-unter{ display:block; font-size:.84rem; color:var(--rot); margin-top:.2rem; }
.gericht-text{ margin:.35rem 0 0; font-size:.9rem; color:var(--grau); max-width:60ch; }
.gericht-zusatz{ margin:.4rem 0 0; font-size:.82rem; color:var(--tinte); }
.gericht-preise{ display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; margin:.5rem 0 0; font-variant-numeric:tabular-nums; font-size:.86rem; color:var(--tinte); }
.wein-tipp{
  display:inline-block; margin:.55rem 0 0; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gruen);
}
.wein-tipp::before{ content:'Dazu '; color:var(--grau); }
.kennz{
  display:inline-block; margin-left:.5rem; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; vertical-align:.15em; color:var(--gruen);
  border:1px solid rgba(44,79,67,.35); padding:.1rem .4rem; font-weight:600;
}
.gruppe-kompakt .gericht{ padding:.45rem 0; }
.gruppe-kompakt .gericht-name{ font-weight:400; font-size:.96rem; }
@media (min-width:860px){
  /* Nur EINE Spaltenebene — verschachtelte Spalten brechen den Umbruch auf und
     zerreißen den Ausgleich zwischen den beiden Kartenspalten. */
  .gruppe-inhalt .gericht-liste{ columns:2; column-gap:4rem; }
  .gruppe-inhalt .gericht{ break-inside:avoid; }
}
.karte-fuss{
  margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid var(--linie);
  font-size:.84rem; color:var(--grau); max-width:68ch;
}
.preis-stand{ display:block; color:var(--rot); margin-bottom:.4rem; letter-spacing:.14em; text-transform:uppercase; font-size:.68rem; font-weight:600; }

/* ============================================================
   SONNTAGSBRATEN
   ============================================================ */
.braten{ background:var(--sand); padding:var(--luft) 0; }
.braten-raster{ display:grid; gap:2rem; }
.braten-text p{ max-width:46ch; color:var(--grau); }
.braten-preis{ font-family:var(--display); font-style:italic; font-size:clamp(1.6rem,4vw,2.2rem); margin:1.2rem 0 0; color:var(--rot); }
@media (min-width:900px){ .braten-raster{ grid-template-columns:1fr 1fr; align-items:center; gap:5rem; } }

/* ============================================================
   FINDEN
   ============================================================ */
.finden{ padding:var(--luft) 0; }
.finden-raster{ display:grid; gap:3.5rem; }
.finden-adresse{ font-size:1.05rem; line-height:1.8; margin:1.8rem 0 2.2rem; color:var(--grau); }
.finden-hinweis{ font-size:.88rem; color:var(--grau); margin:1.2rem 0 0; max-width:36ch; }
.finden-social{ list-style:none; padding:0; margin:2.5rem 0 0; display:flex; gap:1.6rem; }
.finden-social a{
  color:var(--tinte); text-decoration:none; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid var(--rot); padding-bottom:.15rem;
}
.finden-social a:hover{ color:var(--rot); }
.finden-rechts .mittel-titel{ margin:0 0 1rem; }
.finden-rechts .mittel-titel + .zeiten{ margin-bottom:2.5rem; }
.zeiten{ width:100%; border-collapse:collapse; }
.zeiten th,.zeiten td{ text-align:left; padding:.65rem 0; border-bottom:1px solid var(--linie-fein); font-weight:400; font-size:.95rem; }
.zeiten th{ color:var(--grau); }
.zeiten td{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.zeiten-fuss{ font-size:.86rem; color:var(--grau); max-width:44ch; }
@media (min-width:900px){ .finden-raster{ grid-template-columns:1.05fr .95fr; gap:6rem; } }

/* ============================================================
   FUSS
   ============================================================ */
.fuss{ background:var(--tinte); color:var(--papier); padding:3rem 0; }
.fuss-raster{ display:flex; flex-wrap:wrap; gap:1.5rem 2rem; align-items:center; justify-content:space-between; }
.fuss-marke{ display:flex; align-items:center; gap:1rem; }
.fuss-marke p{ margin:0; font-family:var(--display); font-size:1.05rem; line-height:1.5; }
.fuss-marke span{ font-family:var(--text); color:rgba(247,244,237,.55); font-size:.85rem; }
.fuss-nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.fuss-nav a{ color:rgba(247,244,237,.72); font-size:.85rem; text-decoration:none; border-bottom:1px solid transparent; }
.fuss-nav a:hover{ color:#fff; border-bottom-color:var(--rot); }

/* ============================================================
   RECHTSSEITEN
   ============================================================ */
.rechtstext{ padding:clamp(3rem,7vw,5rem) 0 var(--luft); }
.rechtstext h1{ font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,6vw,3.4rem); margin:0 0 2.5rem; }
.rechtstext h2{ font-family:var(--display); font-weight:400; font-size:1.3rem; margin:2.6rem 0 .6rem; }
.rechtstext p,.rechtstext li{ max-width:66ch; color:var(--grau); }
.rechtstext strong{ color:var(--tinte); font-weight:600; }
.rechtstext a{ color:var(--rot); }
.zurueck{
  display:inline-block; margin-bottom:2.5rem; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinte); text-decoration:none;
  border-bottom:1px solid var(--rot); padding-bottom:.15rem;
}

/* ============================================================
   DIE UHR — dreht sich beim Scrollen durch den Tag
   ============================================================ */
.uhr-block{ position:relative; background:var(--elfenbein); border-block:1px solid var(--linie-fein); }
.uhr-laenge{ height:280vh; }
.uhr-klebt{
  position:sticky; top:0; height:100svh; display:grid; align-items:center;
  overflow:hidden;
}
.uhr-raster{ display:grid; gap:2rem; align-items:center; justify-items:center; text-align:center; }

.uhr{ width:min(46vw,220px); height:auto; display:block; }
.uhr-rand{ fill:none; stroke:var(--linie); stroke-width:1.5; }
.uhr-striche line{ stroke:var(--tinte); stroke-width:2; opacity:.35; }
.uhr-striche line.gross{ stroke-width:3; opacity:.7; }
.zeiger{ stroke:var(--tinte); stroke-linecap:round; transform-origin:120px 120px; }
.zeiger-stunde{ stroke-width:7; }
.zeiger-minute{ stroke-width:3; stroke:var(--rot); }
.uhr-mitte{ fill:var(--rot); }

.uhr-text{ max-width:34ch; }
.uhr-zeit{
  font-family:var(--display); font-size:clamp(2.6rem,9vw,4.4rem); line-height:1;
  margin:0 0 .3rem; font-variant-numeric:tabular-nums;
}
.uhr-was{
  font-family:var(--display); font-weight:400; font-style:italic; color:var(--rot);
  font-size:clamp(1.8rem,6vw,3rem); line-height:1.05; margin:0 0 .8rem;
}
.uhr-detail{ margin:0 0 1.4rem; color:var(--grau); }
.uhr-marke{
  display:inline-block; margin:0; padding:.5rem .9rem;
  border:1px solid var(--rot); color:var(--rot);
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.uhr-liste{ padding:2rem 0; }
.uhr-liste p{ margin:.3rem 0; color:var(--grau); }
.uhr-liste strong{ color:var(--tinte); }

@media (min-width:820px){
  .uhr-raster{ grid-template-columns:auto 1fr; gap:5rem; text-align:left; justify-items:start; }
  .uhr{ width:min(28vw,300px); }
}
@media (prefers-reduced-motion:reduce){
  .uhr-laenge{ height:0; }
  .uhr-klebt{ position:static; height:auto; padding:var(--luft) 0; }
  .zeiger{ transition:none; }
}