/* =========================================================================
   Ristorante Pizzeria Da Franco · Marktplatz 4, Butzbach

   Die Gestaltung kommt vom Haus selbst, nicht aus dem Italien-Klischee:
   das schwarze Lackschild mit weißem Schriftzug, die Tricolore-Pinselstriche
   des Logos, die creme-beige Markise, das rotbraune Fachwerk und die
   geschnitzte Inschrift über den Fenstern.

   Ein einziges kräftiges Rot trägt die Seite. Grün erscheint nur in der
   Tricolore und bei "vegetarisch". Alles andere ist Pergament und Tinte.

   Bewusst einthemig. Alle Flächen sind ausdrücklich gefüllt, nie durchsichtig.
   ========================================================================= */

:root{
  /* Grund: der helle Putz zwischen den Balken */
  --pergament:#FAF5EB;
  --pergament-2:#F3EADA;
  --papier:#FFFDF9;

  /* Das schwarze Lackschild */
  --lack:#17120F;
  --lack-2:#241C17;

  /* Schrift */
  --tinte:#2A201A;
  --tinte-2:#5F5147;
  --tinte-3:#968678;
  --hell:rgba(250,245,235,.95);
  --hell-2:rgba(250,245,235,.66);
  --hell-3:rgba(250,245,235,.4);

  /* Linien */
  --linie:rgba(42,32,26,.14);
  --linie-stark:rgba(42,32,26,.26);
  --linie-dunkel:rgba(250,245,235,.16);

  /* Die drei Farben vom Pinselstrich */
  --tomate:#A8341F;
  --tomate-hell:#C24628;
  --basilikum:#45683F;

  /* Das warme Licht der Glühbirnen */
  --messing:#B08442;
  --balken:#6B3A2E;

  --schreib:"Pinyon Script","Segoe Script",cursive;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Karla","Segoe UI",system-ui,-apple-system,sans-serif;

  --breit:1140px;
  --schmal:740px;
  --rand:clamp(1.4rem,5vw,3rem);

  --radius:18px;
  --radius-klein:11px;

  --ease:cubic-bezier(.2,.9,.3,1);
  --ease-weich:cubic-bezier(.4,0,.2,1);

  --schatten:0 2px 4px rgba(42,32,26,.04),0 12px 32px rgba(42,32,26,.07);
  --schatten-tief:0 4px 8px rgba(42,32,26,.06),0 24px 60px rgba(42,32,26,.12);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}

body{
  font-family:var(--text);
  font-size:clamp(16px,.4vw + 15px,17.5px);
  font-weight:400;
  line-height:1.68;
  color:var(--tinte-2);
  background:var(--pergament);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--tomate);outline-offset:4px;border-radius:5px}

/* ---------- Typografie ----------
   Fraunces hat eine weiche, leicht eigenwillige Zeichnung. Genau die
   Wärme, die eine Trattoria braucht - und das Gegenteil von technisch. */
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--tinte);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.018em;
  text-wrap:balance;
  /* Fraunces bringt opsz mit: grosse Zeilen bekommen den feineren
     Display-Schnitt, kleine den robusteren. */
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 45,"WONK" 1;
}
h1{font-size:clamp(2.7rem,7vw,5rem);line-height:1.02}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:600}
h4{font-size:1.1rem;font-weight:600}

.leise{color:var(--tinte-3)}

.marker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--text);
  font-size:.7rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--tomate);
  margin-bottom:1.4rem;
}
.marker::before{
  content:"";width:22px;height:2px;border-radius:2px;
  background:var(--tomate);flex:none;
}
.dunkel .marker{color:var(--messing)}
.dunkel .marker::before{background:var(--messing)}

.lead{
  font-family:var(--display);
  font-size:clamp(1.25rem,2vw,1.7rem);
  font-weight:400;line-height:1.42;
  letter-spacing:-.012em;
  color:var(--tinte);
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 65,"WONK" 1;
}

p{max-width:64ch}
p + p{margin-top:1.1em}

/* ---------- Raster ---------- */
.huelle{width:min(100% - var(--rand)*2,var(--breit));margin-inline:auto}
.huelle-schmal{width:min(100% - var(--rand)*2,var(--schmal));margin-inline:auto}
section{padding-block:clamp(4.5rem,9vw,8rem)}

.spalten{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5.5vw,5rem);
  align-items:center;
}

/* ---------- Markise ----------
   Die creme-beige Streifenmarkise über dem Eingang, als Band. */
.markise{
  height:22px;
  background:repeating-linear-gradient(90deg,
    #E2D3B7 0 22px, #FBF6EC 22px 44px);
  border-bottom:1px solid rgba(42,32,26,.1);
}

/* ---------- Pinselstrich ----------
   Die drei Bögen aus dem Logo, als kleines Zeichen. */
.strich{display:inline-block;width:74px;height:26px;flex:none}
.strich svg{width:100%;height:100%;display:block;overflow:visible}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:999px;
  font-size:.9rem;font-weight:700;letter-spacing:.01em;
  border:1.5px solid transparent;
  transition:transform .4s var(--ease),background .3s var(--ease-weich),
             color .3s var(--ease-weich),border-color .3s var(--ease-weich),
             box-shadow .4s var(--ease);
}
.knopf:hover{transform:translateY(-2px)}
.knopf:active{transform:translateY(0)}
.knopf svg{width:16px;height:16px;flex:none}

.knopf-rot{background:var(--tomate);color:#FFF6EE;box-shadow:0 6px 20px rgba(168,52,31,.28)}
.knopf-rot:hover{background:var(--tomate-hell);box-shadow:0 10px 28px rgba(168,52,31,.36)}
.knopf-hell{background:var(--pergament);color:var(--tinte)}
.knopf-hell:hover{background:#fff}
.knopf-rand-hell{border-color:rgba(250,245,235,.36);color:var(--hell)}
.knopf-rand-hell:hover{border-color:var(--pergament);background:rgba(250,245,235,.1)}
.knopf-rand{border-color:var(--linie-stark);color:var(--tinte)}
.knopf-rand:hover{border-color:var(--tinte);background:var(--tinte);color:var(--pergament)}

/* =========================================================================
   Startvorhang
   ========================================================================= */
.vorhang{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--lack);
  animation:vorhang-schliesst .5s var(--ease-weich) 1.48s forwards;
}
@keyframes vorhang-schliesst{to{opacity:0;visibility:hidden}}
.vorhang.weg{display:none}
body.vorhang-laeuft{overflow:hidden}

.pizza{
  position:relative;
  width:clamp(210px,34vw,430px);
  animation:pizza-auftritt 1.62s var(--ease) forwards;
}
/* Die Drehung liegt auf einer eigenen Ebene, damit der Dampf stehen bleibt.
   Flach gedreht statt im Raum - so dreht ein Pizzabäcker den Teig. */
.pizza-dreh{
  transform-origin:50% 50%;will-change:transform;
  animation:pizza-dreht 1.62s var(--ease) forwards;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
.pizza svg{width:100%;height:auto;display:block}

@keyframes pizza-auftritt{
   0%  {opacity:0;transform:scale(.7)}
  16%  {opacity:1;transform:scale(1)}
  84%  {opacity:1;transform:scale(1)}
 100%  {opacity:0;transform:scale(1.22)}
}
@keyframes pizza-dreht{
   0%,26%  {transform:rotate(0deg)}
  78%,100% {transform:rotate(360deg)}
}

.dampf{
  position:absolute;left:50%;bottom:88%;
  transform:translateX(-50%);
  display:flex;align-items:flex-end;gap:clamp(14px,2.2vw,24px);
  pointer-events:none;
}
.dampf i{
  display:block;width:4px;height:clamp(38px,5.6vw,62px);border-radius:999px;
  background:linear-gradient(to top,rgba(250,245,235,.6),rgba(250,245,235,0));
  opacity:0;animation:dampf-steigt 1.5s var(--ease-weich) infinite;
}
.dampf i:nth-child(2){animation-delay:.24s;height:clamp(50px,7.2vw,80px)}
.dampf i:nth-child(3){animation-delay:.48s}

@keyframes dampf-steigt{
   0%{opacity:0;transform:translateY(14px) scaleY(.5)}
  35%{opacity:.8}
 100%{opacity:0;transform:translateY(-30px) scaleY(1.15)}
}

.vorhang-wort{
  position:absolute;left:0;right:0;bottom:clamp(3rem,9vh,6rem);
  text-align:center;
  font-family:var(--schreib);
  font-size:clamp(1.9rem,4vw,2.8rem);
  color:rgba(250,245,235,.5);
  animation:wort-auf 1.58s var(--ease) forwards;
}
@keyframes wort-auf{0%{opacity:0}25%{opacity:1}78%{opacity:1}100%{opacity:0}}

/* =========================================================================
   Kopfzeile
   ========================================================================= */
.kopf{
  position:fixed;inset:0 0 auto;z-index:90;
  display:flex;align-items:center;gap:2rem;
  padding:1.2rem var(--rand);
  transition:background .5s var(--ease-weich),padding .5s var(--ease),
             box-shadow .5s var(--ease-weich);
}
.kopf::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(250,245,235,.9);
  backdrop-filter:saturate(1.5) blur(16px);
  -webkit-backdrop-filter:saturate(1.5) blur(16px);
  opacity:0;transition:opacity .5s var(--ease-weich);
}
.kopf.fest{padding-block:.75rem;box-shadow:0 1px 0 var(--linie)}
.kopf.fest::before{opacity:1}

/* Das Logo in der Kopfleiste.
   Die Pinselstriche behalten ihre Farben, der Schriftzug erbt sie: oben über
   dem Video hell, nach dem Scrollen auf dem cremefarbenen Band dunkel. */
.marke{display:flex;align-items:center;gap:.85rem;flex:none}
.marke-logo{
  height:clamp(2.9rem,4.2vw,3.5rem);width:auto;flex:none;
  color:var(--hell);
  transition:color .5s var(--ease-weich),height .5s var(--ease);
}
.kopf.fest .marke-logo{color:var(--tinte);height:clamp(2.3rem,3.2vw,2.7rem)}

/* Schriftzug als Text - nur noch in der Fußzeile in Gebrauch */
.marke-name{
  font-family:var(--schreib);
  font-size:1.75rem;line-height:.9;
  color:var(--hell);
}
.marke-sub{
  font-size:.53rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--hell-3);margin-top:.34rem;
}

.navi{margin-left:auto;display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2rem)}
.navi a:not(.knopf-tel){
  font-size:.87rem;font-weight:500;
  color:var(--hell-2);position:relative;padding-block:.3rem;
  transition:color .35s var(--ease-weich);
}
.navi a:not(.knopf-tel):hover,.navi a:not(.knopf-tel).aktiv{color:var(--hell)}
.kopf.fest .navi a:not(.knopf-tel){color:var(--tinte-2)}
.kopf.fest .navi a:not(.knopf-tel):hover,
.kopf.fest .navi a:not(.knopf-tel).aktiv{color:var(--tinte)}
.navi a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background:var(--tomate);opacity:0;transform:scaleX(.3);
  transition:opacity .35s var(--ease-weich),transform .45s var(--ease);
}
.navi a.aktiv::after{opacity:1;transform:scaleX(1)}

.knopf-tel{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--tomate);border-radius:999px;
  padding:.62rem 1.2rem;
  font-size:.82rem;font-weight:700;
  color:#FFF6EE;white-space:nowrap;
  transition:background .35s var(--ease-weich),transform .4s var(--ease);
}
.knopf-tel:hover{background:var(--tomate-hell);transform:translateY(-1px)}
.knopf-tel svg{width:14px;height:14px;flex:none}

/* Der Knopf ist 44 x 44 groß, auch wenn die drei Striche kleiner sind —
   darunter wird das Tippen auf dem Handy zur Glückssache. */
.burger{
  display:none;width:44px;height:44px;position:relative;margin-left:auto;
  z-index:97;background:none;border:0;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.burger span{
  position:absolute;left:7px;width:30px;height:2px;border-radius:2px;
  background:var(--hell);transition:all .4s var(--ease);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.kopf.fest .burger span{background:var(--tinte)}
body.menue-offen .burger span{background:var(--pergament)}
body.menue-offen .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menue-offen .burger span:nth-child(2){opacity:0;transform:scaleX(.4)}
body.menue-offen .burger span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* Bei offenem Menü bleibt das Logo oben links stehen und wird hell —
   sonst steht der Schließen-Knopf allein auf schwarzer Fläche. */
body.menue-offen .kopf{box-shadow:none}
body.menue-offen .kopf::before{opacity:0}
body.menue-offen .marke{position:relative;z-index:96}
body.menue-offen .marke-logo{color:var(--hell)}

/* Die Seite darf hinter dem offenen Menü nicht mitscrollen. */
body.festgehalten{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* Menüfuß: nur im Overlay auf kleinen Bildschirmen */
.navi-fuss{display:none}

/* =========================================================================
   Kopfbild
   ========================================================================= */
.buehne{
  position:relative;min-height:100svh;
  display:grid;place-items:center;text-align:center;
  padding:8.5rem var(--rand) 5.5rem;
  background:var(--lack);overflow:hidden;
}
.buehne-bild{position:absolute;inset:0;z-index:0;background:var(--lack)}
.buehne-bild img,.buehne-bild video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  transform:scale(1.04);display:block;
}
.buehne-bild video{opacity:0;transition:opacity 1.1s var(--ease-weich)}
.buehne-bild video.laeuft{opacity:1}
.buehne-bild::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(74% 54% at 50% 46%,rgba(23,18,15,.5) 0%,rgba(23,18,15,.72) 58%,rgba(23,18,15,.9) 100%),
    linear-gradient(180deg,rgba(23,18,15,.8) 0%,rgba(23,18,15,.48) 30%,rgba(23,18,15,.62) 70%,rgba(23,18,15,.96) 100%);
}
.buehne-inhalt{position:relative;z-index:2;max-width:900px}

.status{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid rgba(250,245,235,.22);border-radius:999px;
  padding:.48rem 1.1rem;margin-bottom:2.2rem;
  font-size:.76rem;font-weight:500;
  color:var(--hell);background:rgba(23,18,15,.34);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.status-punkt{
  width:6px;height:6px;border-radius:50%;background:var(--hell-3);flex:none;
  transition:background .4s,box-shadow .4s;
}
.status.offen .status-punkt{background:#7CC48C;box-shadow:0 0 0 3px rgba(124,196,140,.22)}
.status.zu .status-punkt{background:#D08670;box-shadow:0 0 0 3px rgba(208,134,112,.2)}

/* Das Logo im Kopfbild, so groß wie vorher der Schriftzug */
.buehne-marke{display:grid;justify-items:center;gap:.9rem;font-size:0}
.buehne-logo{
  width:min(100%,clamp(300px,54vw,600px));height:auto;
  color:var(--pergament);
}

/* Für Vorleseprogramme und Suchmaschinen: das Logo ist ein Bild, der Name
   muss trotzdem als Text dastehen. */
.nur-vorlesen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%);
}

.buehne-text{
  margin:2rem auto 0;max-width:40ch;
  font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.6;
  color:var(--hell-2);
}
.buehne-knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2.6rem}
.buehne-ort{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:2.2rem;
  font-size:.8rem;color:var(--hell-3);
}
.buehne-ort svg{width:13px;height:13px}

.buehne-fuss{position:absolute;left:0;right:0;bottom:2rem;z-index:2;display:flex;justify-content:center}
.buehne-fuss i{
  display:block;width:1px;height:42px;
  background:linear-gradient(rgba(250,245,235,.5),rgba(250,245,235,0));
  animation:linie-sinkt 2.8s var(--ease-weich) infinite;transform-origin:top;
}
@keyframes linie-sinkt{0%,100%{transform:scaleY(.35);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* =========================================================================
   Die Inschrift
   Steht seit Jahrhunderten in den Balken über den Fenstern.
   ========================================================================= */
.inschrift{
  background:var(--lack);
  padding-block:clamp(4rem,8vw,7rem);
  text-align:center;
}
.inschrift blockquote{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,2.7rem);
  font-weight:400;line-height:1.32;
  color:var(--pergament);
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 75,"WONK" 1;
  text-wrap:balance;max-width:22ch;margin-inline:auto;
}
.inschrift cite{
  display:block;margin-top:1.8rem;
  font-family:var(--text);font-style:normal;
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hell-3);
}
.inschrift .strich{margin-bottom:1.8rem}

/* =========================================================================
   Inhalt
   ========================================================================= */
.hell{background:var(--pergament)}
.getoent{background:var(--pergament-2)}
.dunkel{background:var(--lack);color:var(--hell-2)}
.dunkel h2,.dunkel h3,.dunkel .lead{color:var(--pergament)}

.bild{border-radius:var(--radius);overflow:hidden;background:var(--pergament-2);box-shadow:var(--schatten)}
.bild img,.bild video{width:100%;height:100%;object-fit:cover;display:block}
.bild-4-3 img{aspect-ratio:4/3}
.bild-3-2 img{aspect-ratio:3/2}
.bild-4-5 img{aspect-ratio:4/5}
.bild-1-1 img{aspect-ratio:1}

.foto{display:block}
.foto figcaption{
  margin-top:.85rem;font-size:.78rem;line-height:1.5;color:var(--tinte-3);
  display:flex;align-items:flex-start;gap:.55rem;
}
.foto figcaption::before{
  content:"";flex:none;width:14px;height:1.5px;background:var(--messing);margin-top:.62rem;
}

/* Kennzahlen */
.zahlen{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,3vw,2.5rem);margin-top:2.8rem;padding-top:2rem;
  border-top:1.5px solid var(--linie);
}
.zahl b{
  display:block;font-family:var(--display);
  font-size:clamp(1.7rem,3vw,2.4rem);font-weight:600;
  color:var(--tinte);line-height:1;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.zahl span{display:block;margin-top:.5rem;font-size:.78rem;color:var(--tinte-3)}

.liste{list-style:none;margin-top:2rem;border-top:1px solid var(--linie)}
.liste li{
  padding:.9rem 0 .9rem 1.9rem;border-bottom:1px solid var(--linie);
  font-size:.96rem;color:var(--tinte-2);position:relative;
}
.liste li::before{
  content:"";position:absolute;left:0;top:1.42em;
  width:8px;height:8px;border-radius:50%;
  border:2px solid var(--tomate);
}

/* =========================================================================
   Speisekarte
   Gesetzt wie eine gedruckte Trattoria-Karte: Nummer, Name,
   Punktlinie, Preis.
   ========================================================================= */
.karte-kopf{max-width:640px;margin-bottom:clamp(2.4rem,4.5vw,3.6rem)}
.karte-kopf.mittig{margin-inline:auto;text-align:center}
.karte-kopf.mittig .marker{justify-content:center}
.karte-kopf p{margin-top:1.1rem}
.karte-kopf.mittig p{margin-inline:auto}

.reiter{
  display:flex;flex-wrap:wrap;gap:.4rem;
  margin-bottom:clamp(2.4rem,4vw,3.2rem);
  padding-bottom:1.3rem;border-bottom:1.5px solid var(--linie);
}
.reiter button{
  padding:.58rem 1.15rem;border-radius:999px;
  font-size:.87rem;font-weight:600;color:var(--tinte-3);
  transition:color .3s var(--ease-weich),background .3s var(--ease-weich);
}
.reiter button:hover{color:var(--tinte)}
.reiter button.aktiv{background:var(--tomate);color:#FFF6EE}

.tafel{display:none}
.tafel.aktiv{display:block;animation:tafel-auf .5s var(--ease)}
@keyframes tafel-auf{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.speisen{columns:2;column-gap:clamp(2.5rem,5.5vw,4.5rem)}
.gruppe{break-inside:avoid;margin-bottom:2.6rem}
.gruppe h4{
  margin-bottom:1.1rem;padding-bottom:.7rem;
  border-bottom:2px solid var(--tomate);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.gruppe h4 small{
  font-family:var(--text);font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3);
}

.gericht{display:flex;align-items:baseline;gap:.55rem;padding:.55rem 0}
.gericht-nr{
  font-size:.76rem;font-weight:700;color:var(--tomate);
  min-width:1.9rem;flex:none;font-variant-numeric:tabular-nums;
}
.gericht-text{flex:0 1 auto;min-width:0}
.gericht-name{color:var(--tinte);font-size:.99rem;font-weight:500}
.gericht-zutaten{
  display:block;font-size:.83rem;color:var(--tinte-3);
  line-height:1.5;margin-top:.1rem;
}
/* Punktlinie wie auf einer gedruckten Karte */
.gericht-linie{
  flex:1 1 auto;min-width:1.5rem;
  border-bottom:1.5px dotted var(--linie-stark);
  transform:translateY(-.3em);
}
.gericht-preis{
  font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--tinte);font-size:.95rem;white-space:nowrap;flex:none;
}

/* Kennzeichen */
.mm{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;flex:none;
  margin-left:.4rem;vertical-align:-.2em;border-radius:50%;
}
.mm svg{width:10.5px;height:10.5px}
.mm.veg{color:var(--basilikum);background:rgba(69,104,63,.15)}
.mm.scharf{color:var(--tomate);background:rgba(168,52,31,.14)}
.mm.haus{color:var(--messing);background:rgba(176,132,66,.18)}

.legende{
  display:flex;flex-wrap:wrap;gap:1.3rem;
  margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--linie);
  font-size:.79rem;color:var(--tinte-3);
}
.legende span{display:inline-flex;align-items:center;gap:.15rem}
.legende .mm{margin-left:0;margin-right:.35rem}
.karte-fuss{margin-top:1.6rem;font-size:.82rem;color:var(--tinte-3)}

/* =========================================================================
   Galerie
   ========================================================================= */
.galerie-raster{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(110px,10vw,168px);grid-auto-flow:row dense;
  gap:clamp(.55rem,1vw,.95rem);
}
.feld{
  position:relative;overflow:hidden;border-radius:var(--radius-klein);
  background:var(--pergament-2);grid-row:span 2;box-shadow:var(--schatten);
}
.feld img,.feld video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.feld:hover img,.feld:hover video{transform:scale(1.05)}
.feld-breit{grid-column:span 2}
.feld::after{
  content:attr(data-titel);
  position:absolute;left:.9rem;right:.9rem;bottom:.8rem;
  font-size:.73rem;font-weight:600;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.85);
  opacity:0;transform:translateY(7px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.feld::before{
  content:"";position:absolute;inset:auto 0 0;height:46%;
  background:linear-gradient(transparent,rgba(15,10,8,.68));
  opacity:0;transition:opacity .45s var(--ease);
}
.feld:hover::after,.feld:hover::before{opacity:1}
.feld:hover::after{transform:none}

/* =========================================================================
   Stimmen
   ========================================================================= */

/* =========================================================================
   Finden
   ========================================================================= */


.merkmale{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.8rem}
.merkmale span{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--linie-stark);border-radius:999px;
  padding:.4rem .9rem;font-size:.8rem;color:var(--tinte-2);
}
.merkmale svg{width:12px;height:12px}
.merkmale .nein{color:var(--tinte-3);border-style:dashed}

.kontakt{margin-top:2.2rem;display:grid;gap:1.4rem}
.kontakt-zeile b{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tinte-3);margin-bottom:.3rem;
}
.kontakt-zeile a,.kontakt-zeile span{color:var(--tinte);font-size:1rem}
.kontakt-zeile a:hover{color:var(--tomate)}

.besuch-bild{position:sticky;top:96px;align-self:start}

/* =========================================================================
   Fußzeile
   ========================================================================= */
.fuss{background:var(--lack);color:var(--hell-2);padding-block:clamp(3.5rem,6vw,5.5rem) 2rem}
.fuss-raster{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);padding-bottom:2.6rem;
  border-bottom:1px solid var(--linie-dunkel);
}
.fuss .marke-name{color:var(--pergament);font-size:2.1rem}
.fuss .marke-sub{color:var(--hell-3)}
.fuss-marke p{margin-top:1.2rem;font-size:.92rem;max-width:32ch}
.fuss h4{
  font-family:var(--text);font-size:.68rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--hell-3);margin-bottom:1.1rem;
}
.fuss ul{list-style:none;display:grid;gap:.55rem;font-size:.93rem}
.fuss a:hover{color:var(--pergament)}
.fuss-unten{
  display:flex;flex-wrap:wrap;gap:1.2rem 2rem;justify-content:space-between;
  align-items:center;padding-top:1.8rem;font-size:.8rem;color:var(--hell-3);
}
.fuss-unten a:hover{color:var(--hell)}

.insta{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--linie-dunkel);border-radius:999px;
  padding:.5rem 1rem;font-size:.83rem;color:var(--hell-2);
  transition:all .35s var(--ease-weich);
}
.insta:hover{border-color:rgba(250,245,235,.4);color:var(--pergament);background:rgba(250,245,235,.06)}
.insta svg{width:15px;height:15px}

.fuss-heute{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.7rem;
  padding:.3rem .7rem;border:1px solid var(--linie-dunkel);border-radius:999px;
  font-size:.74rem;color:var(--hell-2);
}
.fuss-heute b{color:var(--pergament);font-weight:700}
.fuss-heute .punkt{width:5px;height:5px;border-radius:50%;background:#7CC48C;flex:none}
.fuss-heute.zu .punkt{background:#D08670}

.s4y-knopf{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--linie-dunkel);border-radius:999px;
  padding:.6rem 1.1rem;font-size:.8rem;color:var(--hell-2);
  transition:all .35s var(--ease-weich);
}
.s4y-knopf:hover{border-color:rgba(250,245,235,.4);color:var(--pergament);background:rgba(250,245,235,.06);transform:translateY(-1px)}
.s4y-knopf b{color:var(--pergament);font-weight:700}
.s4y-knopf svg{width:13px;height:13px;flex:none;opacity:.6}

/* =========================================================================
   Sides4you-Ebene
   ========================================================================= */
.s4y{
  position:fixed;inset:0;z-index:180;display:grid;place-items:center;
  padding:var(--rand);background:#0C0A14;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease-weich),visibility .45s;
}
.s4y.offen{opacity:1;visibility:visible}
body.s4y-offen{overflow:hidden}
.s4y::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 22%,rgba(91,33,224,.3) 0%,transparent 70%),
    radial-gradient(50% 40% at 80% 85%,rgba(91,33,224,.14) 0%,transparent 70%);
}
.s4y-inhalt{position:relative;z-index:2;text-align:center;max-width:620px;width:100%}
.s4y-geraet{
  width:min(340px,72%);margin:0 auto 2.4rem;
  opacity:0;transform:perspective(900px) rotateX(26deg) translateY(34px) scale(.9);
}
.s4y.offen .s4y-geraet{animation:geraet-auf .9s var(--ease) .1s forwards}
@keyframes geraet-auf{to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0) scale(1)}}
.s4y-geraet svg{width:100%;height:auto;display:block}
.s4y h2{color:#fff;font-size:clamp(1.8rem,4.4vw,2.9rem);margin-bottom:.9rem}
.s4y h2 em{font-style:normal;color:#B79BFF}
.s4y p{color:rgba(255,255,255,.6);margin-inline:auto;max-width:44ch;font-size:clamp(.98rem,1.5vw,1.06rem)}
.s4y-inhalt > *:not(.s4y-geraet){opacity:0;transform:translateY(18px)}
.s4y.offen .s4y-inhalt > *:not(.s4y-geraet){animation:s4y-auf .75s var(--ease) forwards}
.s4y.offen h2{animation-delay:.4s}
.s4y.offen .s4y-text{animation-delay:.5s}
.s4y.offen .s4y-punkte{animation-delay:.58s}
.s4y.offen .s4y-aktion{animation-delay:.66s}
.s4y.offen .s4y-zurueck{animation-delay:.76s}
@keyframes s4y-auf{to{opacity:1;transform:none}}
.s4y-punkte{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.8rem}
.s4y-punkte span{
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:.42rem 1rem;font-size:.8rem;color:rgba(255,255,255,.72);
}
.s4y-aktion{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;align-items:center;margin-top:2.2rem}
.knopf-lila{background:#5B21E0;color:#fff;box-shadow:0 10px 34px rgba(91,33,224,.42)}
.knopf-lila:hover{background:#6C33F0}
.knopf-glas{border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.86)}
.knopf-glas:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.45)}
.s4y-zurueck{
  display:block;margin:1.9rem auto 0;font-size:.84rem;color:rgba(255,255,255,.42);
  border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:.2rem;
  transition:color .3s var(--ease-weich),border-color .3s var(--ease-weich);
}
.s4y-zurueck:hover{color:#fff;border-color:rgba(255,255,255,.6)}

/* =========================================================================
   Korn und Einblenden
   ========================================================================= */
.koernung{
  position:fixed;inset:0;z-index:50;pointer-events:none;
  background-image:url("../img/koernung.png");background-size:128px 128px;
  opacity:.05;mix-blend-mode:multiply;
}

.auf{opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.auf.da{opacity:1;transform:none}
.auf.v2{transition-delay:.08s}
.auf.v3{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  .auf{opacity:1;transform:none;transition:none}
  .buehne-fuss i,.dampf i{animation:none}
  .vorhang{display:none}
  .pizza,.pizza-dreh{animation:none;opacity:1;transform:none}
  .buehne-bild video{display:none}
  .s4y-geraet,.s4y-inhalt > *{opacity:1;transform:none;animation:none}
  .knopf:hover,.feld:hover img{transform:none}
  *{scroll-behavior:auto}
}

/* =========================================================================
   Kleinere Bildschirme
   ========================================================================= */
@media (max-width:960px){
  .spalten{grid-template-columns:1fr;gap:2.4rem}
  .spalten .bild,.spalten .foto{order:-1}
  .speisen{columns:1}
  .lob{grid-template-columns:1fr}
  .galerie-raster{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(112px,18vw,158px)}
  .besuch-bild{position:static}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1/-1}
}

@media (max-width:720px){
  /* Das Menü legt sich über die ganze Seite. Geschlossen ist es nicht nur
     durchsichtig, sondern per visibility auch für die Tastatur weg — sonst
     wandert der Fokus in Links, die niemand sehen kann. */
  .navi{
    position:fixed;inset:0;z-index:94;
    flex-direction:column;align-items:center;justify-content:center;
    gap:0;margin:0;padding:6.5rem var(--rand) 2.4rem;
    background:
      radial-gradient(115% 62% at 50% 0%,rgba(168,52,31,.15) 0%,transparent 62%),
      var(--lack);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;
    transition:opacity .35s var(--ease-weich),visibility 0s linear .35s;
  }
  body.menue-offen .navi{
    opacity:1;visibility:visible;
    transition:opacity .35s var(--ease-weich),visibility 0s linear 0s;
  }
  /* Beim Öffnen springt der Fokus auf das Menü selbst, damit Vorleseprogramme
     wissen, wo sie sind. Das Menü ist kein Bedienelement, es bekommt deshalb
     keinen Rahmen - die Einträge darin sehr wohl. */
  .navi:focus,.navi:focus-visible{outline:none}

  /* Die Einträge kommen nacheinander herein, nicht alle auf einmal. */
  body.menue-offen .navi > *{animation:menue-eintrag .45s var(--ease) backwards}
  body.menue-offen .navi > *:nth-child(1){animation-delay:.04s}
  body.menue-offen .navi > *:nth-child(2){animation-delay:.08s}
  body.menue-offen .navi > *:nth-child(3){animation-delay:.12s}
  body.menue-offen .navi > *:nth-child(4){animation-delay:.16s}
  body.menue-offen .navi > *:nth-child(5){animation-delay:.20s}
  body.menue-offen .navi > *:nth-child(6){animation-delay:.24s}
  body.menue-offen .navi > *:nth-child(7){animation-delay:.30s}
  body.menue-offen .navi > *:nth-child(8){animation-delay:.36s}
  @keyframes menue-eintrag{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  .navi a:not(.knopf-tel),
  .kopf.fest .navi a:not(.knopf-tel){
    font-family:var(--display);font-size:1.45rem;font-weight:500;
    color:var(--hell);width:100%;max-width:20rem;
    text-align:center;padding:.9rem 0;
    border-bottom:1px solid rgba(250,245,235,.11);
  }
  .navi a:not(.knopf-tel):first-child{border-top:1px solid rgba(250,245,235,.11)}
  .navi a::after{left:50%;right:auto;width:38%;transform:translateX(-50%) scaleX(.3);bottom:-1px}
  .navi a.aktiv::after{transform:translateX(-50%) scaleX(1)}
  .navi .knopf-tel,.kopf.fest .navi .knopf-tel{
    font-size:1rem;padding:1rem 1.9rem;margin-top:2rem;
  }

  /* Öffnungsstatus und Adresse unter den Einträgen */
  .navi-fuss{
    display:flex;flex-direction:column;align-items:center;gap:.9rem;
    margin-top:2.2rem;
  }
  .navi-fuss .status{margin-bottom:0}
  .navi-ort{
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:.82rem;color:var(--hell-3);
  }
  .navi-ort svg{width:13px;height:13px;flex:none}

  .burger{display:block}
  .buehne{min-height:92svh;padding-top:7.5rem}
  .zahlen{grid-template-columns:1fr;gap:0}
  .zahl{display:flex;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--linie)}
  .zahl span{margin-top:0}
  .fuss-raster{grid-template-columns:1fr;gap:2.2rem}
  .fuss-unten{flex-direction:column;align-items:flex-start;gap:1.3rem}
}

@media (max-width:460px){
  .galerie-raster{grid-template-columns:1fr;grid-auto-rows:105px}
  .feld-breit{grid-column:span 1}
  .buehne-knoepfe .knopf{width:100%;justify-content:center}
  .s4y-aktion .knopf{width:100%;justify-content:center}
  .gericht-zutaten{font-size:.8rem}
}

@media print{
  .kopf,.buehne-fuss,.reiter,.burger,.vorhang,.s4y,.s4y-knopf,.koernung{display:none}
  .tafel{display:block !important}
  body{background:#fff;color:#000}
  .auf{opacity:1;transform:none}
}

/* =========================================================================
   Rechtstexte
   ========================================================================= */
.rechts-kopf{background:var(--lack);padding:9rem var(--rand) clamp(3rem,6vw,5rem)}
.rechts-kopf h1{color:var(--pergament);font-family:var(--display);font-size:clamp(2.4rem,5.5vw,4rem)}
.rechts-kopf .marker{color:var(--messing)}
.rechts-kopf .marker::before{background:var(--messing)}

.rechtstext{padding-block:clamp(3.5rem,7vw,5.5rem)}
.rechtstext h2{
  font-size:clamp(1.35rem,2.4vw,1.8rem);margin:2.8rem 0 .9rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--linie);
}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:1.05rem;margin:1.8rem 0 .45rem}
.rechtstext p,.rechtstext li{font-size:.96rem}
.rechtstext ul{margin:.6rem 0 1.2rem 1.15rem;display:grid;gap:.4rem}
.rechtstext a{
  color:var(--tomate);text-decoration:underline;
  text-decoration-color:rgba(168,52,31,.35);text-underline-offset:4px;
}
.rechtstext a:hover{text-decoration-color:var(--tomate)}
/* Ein Knopf im Fließtext ist kein Fließtextlink: die Linkfarbe von oben
   ist spezifischer als .knopf-rot und faerbte die Schrift sonst genau wie
   den Hintergrund - der Knopf war leer. */
.rechtstext a.knopf{text-decoration:none;color:inherit}
.rechtstext a.knopf-rot{color:#FFF6EE}
.rechtstext a.knopf-hell{color:var(--tinte)}
.rechtstext a.knopf-rand{color:var(--tinte)}
.rechtstext a.knopf-rand:hover{color:var(--pergament)}
.rechtstext a.knopf-rand-hell{color:var(--hell)}
.luecke{
  display:inline-block;min-width:11rem;
  border-bottom:1.5px dashed var(--messing);color:var(--messing);font-size:.86rem;
}
/* Kurze Lücke für ein einzelnes Wort mitten im Satz - die breite Fassung
   reißt die Zeile auseinander, wenn nur ein Vorname fehlt. */
.luecke-kurz{min-width:6rem}
.merkkasten{
  background:var(--pergament-2);border-radius:var(--radius-klein);
  padding:1.3rem 1.5rem;margin:1.6rem 0;font-size:.92rem;
  border-left:3px solid var(--messing);
}
.merkkasten b{
  display:block;margin-bottom:.35rem;font-size:.66rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--messing);
}
.zurueck{display:inline-flex;align-items:center;gap:.6rem;margin-top:3rem;font-size:.88rem;color:var(--tinte-2)}
.zurueck:hover{color:var(--tomate)}
.zurueck svg{width:15px;height:15px;transform:rotate(180deg)}

/* Längerer Hinweis unter einer Gruppenüberschrift */
.gruppe-hinweis{
  font-size:.8rem;line-height:1.5;color:var(--tinte-3);
  margin:-.4rem 0 .9rem;max-width:none;
}

/* Reiter mit nur einer Kategorie: Überschrift über die volle Breite,
   die Gerichte darunter zweispaltig. Sonst bliebe die rechte Hälfte leer. */
.gruppe-einzeln .gruppe{margin-bottom:0}
.speisen-flach{columns:2;column-gap:clamp(2.5rem,5.5vw,4.5rem)}
.speisen-flach .gericht{break-inside:avoid}
@media (max-width:960px){.speisen-flach{columns:1}}

/* Fußzeilen-Logo: untereinander statt nebeneinander.
   Oben im Kopf steht inzwischen das echte Logo, hier noch der Textsatz. */
.fuss-strich{width:58px;height:auto;display:block;margin-bottom:.5rem}
.fuss .marke-name{display:block;line-height:1}
.fuss .marke-sub{display:block;margin-top:.45rem}

/* =========================================================================
   Bewegung
   Jede Regung hat einen Grund: der Pinselstrich zeichnet sich wie mit dem
   Pinsel, die Zahlen zählen hoch, über der Pizza steigt Dampf auf.
   ========================================================================= */

/* Fortschrittsbalken in den Farben der Tricolore */
.fortschritt{
  position:fixed;inset:0 0 auto;height:3px;z-index:95;
  background:linear-gradient(90deg,#4A7C3F 0 33.3%,#F4EFE4 33.3% 66.6%,#BE3A22 66.6%);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* Das Logo tritt auf, sobald der Vorhang weg ist: erst setzt der Pinsel auf,
   dann geht der Schriftzug darunter hoch. */
.buehne-logo .logo-pinsel,
.buehne-logo .logo-wort{opacity:0;transform-box:fill-box}
.buehne-logo .logo-pinsel{transform-origin:10% 82%}
.buehne-logo .logo-wort{transform-origin:50% 100%}
.buehne-logo.gezeichnet .logo-pinsel{
  animation:logo-pinsel-setzt-auf .95s var(--ease) forwards;
}
.buehne-logo.gezeichnet .logo-wort{
  animation:logo-wort-geht-auf .85s var(--ease) .34s forwards;
}
@keyframes logo-pinsel-setzt-auf{
  from{opacity:0;transform:rotate(-7deg) scale(.86)}
  to  {opacity:1;transform:none}
}
@keyframes logo-wort-geht-auf{
  from{opacity:0;transform:translateY(9%) scale(.985)}
  to  {opacity:1;transform:none}
}

/* Der Punkt der Öffnungsanzeige atmet, solange geöffnet ist */
.status.offen .status-punkt{animation:punkt-atmet 2.6s var(--ease-weich) infinite}
@keyframes punkt-atmet{
  0%,100%{box-shadow:0 0 0 0 rgba(124,196,140,.5)}
  60%    {box-shadow:0 0 0 7px rgba(124,196,140,0)}
}

/* Zahlen zählen hoch, wenn sie ins Bild kommen */
.zahl b{font-variant-numeric:tabular-nums}

/* Bilder fahren beim Erscheinen leicht zusammen */
.bild img{transform:scale(1.055);transition:transform 1.5s var(--ease)}
.auf.da .bild img,.da.bild img{transform:scale(1)}

/* Dampf über dem Pizzafoto im Ofen-Abschnitt */
.ofen-bild{position:relative}
.ofen-dampf{
  position:absolute;left:50%;top:-14px;z-index:2;
  transform:translateX(-50%);
  display:flex;align-items:flex-end;gap:16px;pointer-events:none;
}
.ofen-dampf i{
  display:block;width:4px;height:48px;border-radius:999px;
  background:linear-gradient(to top,rgba(250,245,235,.42),rgba(250,245,235,0));
  opacity:0;animation:dampf-steigt 3.4s var(--ease-weich) infinite;
  filter:blur(1.5px);
}
.ofen-dampf i:nth-child(2){animation-delay:.9s;height:64px}
.ofen-dampf i:nth-child(3){animation-delay:1.8s;height:40px}

/* Überschriften: Zeile für Zeile aufsteigen */
.steigt{display:block;overflow:hidden}
.steigt > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.1s var(--ease);
}
.auf.da .steigt > span{transform:none}
.auf.da .steigt:nth-child(2) > span{transition-delay:.08s}

@media (prefers-reduced-motion:reduce){
  .fortschritt{display:none}
  .buehne-logo .logo-pinsel,
  .buehne-logo .logo-wort{opacity:1;transform:none;animation:none}
  body.menue-offen .navi > *{animation:none}
  .status.offen .status-punkt{animation:none}
  .bild img,.auf.da .bild img{transform:none;transition:none}
  .ofen-dampf{display:none}
  .steigt > span{transform:none;transition:none}
}

/* =========================================================================
   Anrufen statt reservieren
   Es gibt kein Buchungssystem — also muss der Anruf das Auffälligste
   im ganzen Abschnitt sein, nicht ein Kasten am Rand.
   ========================================================================= */
.anruf{
  position:relative;overflow:hidden;
  background:var(--lack);color:var(--hell-2);
  border-radius:var(--radius);
  padding:clamp(1.8rem,3.2vw,2.6rem);
  margin-top:2.4rem;
  box-shadow:var(--schatten-tief);
  border-left:none;
}
.anruf::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,#4A7C3F 0 33.3%,#F4EFE4 33.3% 66.6%,#BE3A22 66.6%);
}
.anruf::after{
  content:"";position:absolute;right:-70px;bottom:-90px;
  width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,52,31,.34),transparent 68%);
  pointer-events:none;
}
.anruf h3{color:var(--pergament);margin-bottom:.5rem;position:relative;z-index:1}
.anruf p{font-size:.93rem;color:var(--hell-2);max-width:38ch;
  margin-bottom:0;position:relative;z-index:1}

.anruf-nr{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:1rem;
  margin-top:1.5rem;
  font-family:var(--display);
  font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:600;
  color:var(--pergament);letter-spacing:-.01em;
  transition:color .3s var(--ease-weich);
}
.anruf-nr:hover{color:#fff}
.anruf-hoerer{
  display:grid;place-items:center;flex:none;
  width:clamp(46px,6vw,58px);height:clamp(46px,6vw,58px);
  border-radius:50%;background:var(--tomate);
  transition:transform .45s var(--ease),background .3s var(--ease-weich);
}
.anruf-hoerer svg{width:46%;height:46%;color:#FFF6EE}
.anruf-nr:hover .anruf-hoerer{transform:scale(1.08);background:var(--tomate-hell)}
.anruf-klein{
  margin-top:1rem;font-size:.82rem;color:var(--hell-3);
  position:relative;z-index:1;
}
@media (prefers-reduced-motion:no-preference){
  .anruf-hoerer{animation:hoerer-puls 3s var(--ease-weich) infinite}
}
@keyframes hoerer-puls{
  0%,100%{box-shadow:0 8px 26px rgba(168,52,31,.45),0 0 0 0 rgba(168,52,31,.5)}
  55%    {box-shadow:0 8px 26px rgba(168,52,31,.45),0 0 0 16px rgba(168,52,31,0)}
}

/* =========================================================================
   Gästestimmen
   Dunkles Band zwischen zwei hellen Abschnitten. Die Bewertung ist die
   Nachricht, also bekommt sie die Größe.
   ========================================================================= */

/* =========================================================================
   Speisekarte als Kartenblatt
   Sie soll aussehen wie die Karte, die im Haus auf dem Tisch liegt:
   Papier, Tricolore an der Oberkante, darüber drei Teller aus der Küche.
   ========================================================================= */
.teller-reihe{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,1.8vw,1.4rem);
  margin-bottom:clamp(2rem,3.5vw,3rem);
}
.teller-reihe figure{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--schatten);
}
.teller-reihe img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.teller-reihe figure:hover img{transform:scale(1.05)}
.teller-reihe figcaption{
  position:absolute;inset:auto 0 0;
  padding:2.6rem 1.1rem .9rem;
  background:linear-gradient(transparent,rgba(15,10,8,.84));
  color:#fff;font-size:.86rem;font-weight:600;
}

.kartenblatt{
  position:relative;
  background:var(--papier);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3.4vw,3rem);
  box-shadow:var(--schatten-tief);
  overflow:hidden;
}
.kartenblatt::before{
  content:"";position:absolute;inset:0 0 auto;height:5px;
  /* Mitte in Markisen-Creme statt Reinweiss, sonst ist sie auf dem
     hellen Kartenblatt unsichtbar. */
  background:linear-gradient(90deg,#4A7C3F 0 33.3%,#E2D3B7 33.3% 66.6%,#BE3A22 66.6%);
}
.kartenblatt .reiter{margin-top:.5rem}
.kartenblatt .karte-fuss{margin-bottom:0}

/* Preis bekommt etwas mehr Gewicht als vorher */
.gericht-preis{
  color:var(--tomate);font-weight:700;
}

/* =========================================================================
   Instagram als eigener Abschnitt
   ========================================================================= */
.insta-band{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.insta-text .knopf{margin-top:1.8rem}
.insta-text p{margin-top:1.2rem}
.insta-bilder{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.5rem,1.2vw,.9rem);
}
.insta-kachel{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--radius-klein);box-shadow:var(--schatten);
}
.insta-kachel img{
  width:100%;aspect-ratio:1;object-fit:cover;
  transition:transform 1s var(--ease);
}
.insta-kachel:hover img{transform:scale(1.07)}
.insta-schleier{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(168,52,31,.4);
  opacity:0;transition:opacity .4s var(--ease-weich);
}
.insta-kachel:hover .insta-schleier{opacity:1}
.insta-schleier svg{width:26px;height:26px;color:#fff}

@media (max-width:960px){
  .lob{grid-template-columns:1fr;gap:1.8rem}
  .insta-band{grid-template-columns:1fr}
  .teller-reihe{grid-template-columns:1fr 1fr}
  .teller-reihe figure:last-child{grid-column:1/-1}
  .stimmen-text{margin-left:0}
}
@media (max-width:560px){
  .teller-reihe{grid-template-columns:1fr}
  .teller-reihe figure:last-child{grid-column:auto}
  .wertung-gross{gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .anruf-hoerer{animation:none}
  .teller-reihe figure:hover img,.insta-kachel:hover img{transform:none}
}

/* =========================================================================
   Abschluss: Gästestimmen und Fußzeile auf einem gemeinsamen dunklen Grund.
   Das italienische Motiv liegt unten drin und läuft in beide Abschnitte
   hinein — dadurch wirken sie wie ein Stück, nicht wie zwei.
   ========================================================================= */
.abschluss{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 108%,rgba(69,104,63,.22) 0%,transparent 62%),
    var(--lack);
  overflow:hidden;
  isolation:isolate;
}
.abschluss-motiv{
  position:absolute;inset:auto 0 0;z-index:0;
  pointer-events:none;user-select:none;
}
.abschluss-motiv img{
  width:min(1500px,132%);margin-inline:auto;display:block;
  opacity:.72;
}
/* Die Schrift muss lesbar bleiben, also legt sich ein Verlauf darüber */
.abschluss::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(23,18,15,.92) 0%,rgba(23,18,15,.7) 38%,
    rgba(23,18,15,.5) 68%,rgba(23,18,15,.72) 100%);
}
.abschluss > .huelle,.abschluss > .fuss{position:relative;z-index:2}

/* ---------- Gästestimmen ---------- */
.stimmen-raster{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:center;
  padding-block:clamp(3.2rem,6vw,5rem);
}
.stimmen-zahl{flex:none}
.stimmen-zahl .marker{margin-bottom:1rem}
.wertung-gross{display:flex;align-items:baseline;gap:1rem}
.wertung-gross > b{
  font-family:var(--display);
  font-size:clamp(3.4rem,7vw,5.4rem);font-weight:600;
  color:var(--pergament);line-height:.85;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
.wertung-neben{display:grid;gap:.5rem}
.sterne{display:flex;gap:.18rem}
.sterne svg{width:20px;height:20px;color:#E8A33A}
.google-quelle{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.82rem;color:var(--hell-3);
  transition:color .3s var(--ease-weich);
}
.google-quelle:hover{color:var(--hell-2)}
.google-quelle b{font-family:var(--text);font-size:1em;font-weight:700;
  color:var(--hell-2);letter-spacing:0}
.google-g{width:15px;height:15px;flex:none}

/* ---------- Der Wechsler ---------- */
.stimmen-buehne{position:relative;min-height:11rem}
.stimme{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s;
}
.stimme.da{opacity:1;visibility:visible;transform:none;position:relative}
.stimme blockquote{
  font-family:var(--display);
  font-size:clamp(1.05rem,1.8vw,1.42rem);
  font-weight:400;font-style:italic;line-height:1.5;
  color:var(--pergament);letter-spacing:-.008em;
  text-wrap:pretty;
}
.stimme cite{
  display:block;margin-top:1.1rem;font-style:normal;
  font-size:.86rem;color:var(--hell-3);
}
.stimme cite b{color:var(--hell-2);font-weight:700}

.stimmen-steuer{
  display:flex;align-items:center;gap:1rem;
  margin-top:1.8rem;min-height:42px;
}
.stimmen-knopf{
  display:grid;place-items:center;flex:none;align-self:center;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--linie-dunkel);color:var(--hell-2);
  transition:all .35s var(--ease-weich);
}
.stimmen-knopf:hover{border-color:var(--pergament);color:var(--pergament);
  background:rgba(250,245,235,.08)}
.stimmen-knopf svg{width:15px;height:15px}
/* Eigene Klasse - .zurueck gehoert dem Link auf den Rechtsseiten
   und bringt margin-top:3rem mit. */
.stimmen-knopf.rueck svg{transform:rotate(180deg)}
.stimmen-punkte{display:flex;gap:.5rem;margin-left:.4rem}
.stimmen-punkte button{
  width:7px;height:7px;border-radius:50%;padding:0;
  background:rgba(250,245,235,.26);
  transition:background .3s var(--ease-weich),transform .3s var(--ease);
}
.stimmen-punkte button.da{background:var(--tomate);transform:scale(1.35)}
.stimmen-punkte button:hover{background:rgba(250,245,235,.55)}

/* ---------- Fußzeile auf demselben Grund ---------- */
.abschluss .fuss{background:none;padding-block:0 2rem}
.abschluss .fuss-raster{border-top:1px solid var(--linie-dunkel);padding-top:clamp(2.4rem,4vw,3.4rem)}


@media (max-width:900px){
  .stimmen-raster{grid-template-columns:1fr;gap:2.2rem}
  .stimmen-buehne{min-height:16rem}
  .abschluss-motiv img{width:180%;opacity:.34}
}
@media (max-width:560px){
  .stimmen-buehne{min-height:20rem}
  .marken{gap:1rem}
  .marken img{height:28px}
  .marken .gerolsteiner{height:25px}
}
@media (prefers-reduced-motion:reduce){
  .stimme{transition:none}
}

/* =========================================================================
   Abschnitt "Das Haus"
   Hinter dem Text liegt eine gezeichnete Butzbacher Häuserzeile, die sich
   beim Erscheinen selbst zeichnet. Rechts das Foto mit gerissener Kante,
   darauf ein Siegel.
   ========================================================================= */
.haus-abschnitt{position:relative;overflow:hidden}

.haus-raster{
  display:grid;grid-template-columns:1fr 1.06fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  position:relative;z-index:2;
}

/* Die gezeichnete Stadt, sehr zurückgenommen */
.stadt{
  position:absolute;z-index:0;
  left:-2%;bottom:-4%;
  width:min(620px,58%);
  pointer-events:none;
  color:var(--balken);
  opacity:.14;
}
.stadt svg{width:100%;height:auto;display:block}
.stadt path,.stadt circle,.stadt line,.stadt rect{
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* Zeichnet sich beim Erscheinen */
.stadt.zeichnen path,.stadt.zeichnen circle,
.stadt.zeichnen line,.stadt.zeichnen rect{
  stroke-dasharray:var(--laenge,900);
  stroke-dashoffset:var(--laenge,900);
  animation:stadt-laeuft 2.6s var(--ease) forwards;
}
@keyframes stadt-laeuft{to{stroke-dashoffset:0}}

/* Handschriftlicher Gruß */
.gruss{
  display:block;margin-top:2rem;
  font-family:var(--schreib);
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  color:var(--tomate);line-height:1;
}

/* Foto mit gerissener Kante */
.haus-foto{position:relative}
.haus-foto .bild{
  border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:var(--schatten-tief);
  /* Linke Kante unregelmäßig, wie abgerissenes Papier */
  clip-path:polygon(
    2% 0%, 100% 0%, 100% 100%, 1.5% 100%,
    2.8% 90%, .6% 80%, 2.6% 70%, 1% 60%, 2.9% 50%,
    .8% 40%, 2.7% 30%, 1.2% 20%, 2.5% 10%);
}
.haus-foto img{aspect-ratio:4/3}
.haus-foto figcaption{margin-top:.9rem}

/* Siegel, unten rechts über der Kante */
.siegel{
  position:absolute;right:-14px;bottom:34px;z-index:3;
  width:clamp(84px,10vw,116px);height:auto;
  color:var(--pergament);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.siegel-scheibe{fill:var(--tomate)}
.siegel text{
  font-family:var(--text);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  fill:var(--pergament);
}
@media (prefers-reduced-motion:no-preference){
  .siegel-ring{animation:siegel-dreht 46s linear infinite;transform-origin:60px 60px}
}
@keyframes siegel-dreht{to{transform:rotate(360deg)}}

@media (max-width:900px){
  .haus-raster{grid-template-columns:1fr}
  .haus-foto{order:-1}
  .haus-foto .bild{border-radius:var(--radius);clip-path:none}
  .stadt{width:80%;opacity:.1;bottom:auto;top:0}
  .siegel{right:10px;bottom:auto;top:-22px}
}

/* =========================================================================
   Abschnitt "Finden" — kompakt
   Eine Spalte Bild, eine Spalte alles Praktische. Öffnungszeiten als
   schmale Liste, Anruf als Kasten darunter.
   ========================================================================= */
.finden-raster{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.finden-bild .bild img{aspect-ratio:3/4}
.finden-daten{display:grid;gap:1.6rem}

.zeiten{list-style:none;margin:0;border-top:1px solid var(--linie)}
.zeiten li{
  display:flex;align-items:baseline;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--linie);font-size:.92rem;
}
.zeiten .tag{width:5.6rem;flex:none;color:var(--tinte-2)}
.zeiten .spanne{
  margin-left:auto;text-align:right;color:var(--tinte-2);
  font-variant-numeric:tabular-nums;line-height:1.45;
}
.zeiten li.heute{background:rgba(168,52,31,.06);margin-inline:-.6rem;
  padding-inline:.6rem;border-radius:7px}
.zeiten li.heute .tag,.zeiten li.heute .spanne{color:var(--tinte);font-weight:700}
.zeiten li.heute .tag::after{
  content:"heute";margin-left:.45rem;
  font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#FFF6EE;background:var(--tomate);
  padding:.2em .48em;border-radius:999px;vertical-align:.16em;
}
.zeiten li.ruhe .spanne{color:var(--tinte-3)}

.finden-fuss{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  padding-top:.2rem;
}
.finden-fuss .merkmale{margin:0}

/* =========================================================================
   Gästestimmen — kompakter
   ========================================================================= */
.stimmen-raster{padding-block:clamp(2.6rem,4.5vw,3.6rem)}
.stimmen-buehne{min-height:8.5rem}
.wertung-gross > b{font-size:clamp(2.6rem,5vw,3.8rem)}
.sterne svg{width:17px;height:17px}
.stimme blockquote{font-size:clamp(1rem,1.55vw,1.2rem);line-height:1.48}
.stimmen-steuer{margin-top:1.3rem}
.stimmen-knopf{width:38px;height:38px}

/* Ausschank-Logos ohne Plättchen, dafür etwas aufgehellt */
.marken{
  display:flex;align-items:center;gap:1.3rem;
  margin-top:1.5rem;padding:0;background:none;box-shadow:none;
  width:fit-content;
}
.marken img{
  flex:none;height:36px;width:auto;display:block;
  filter:brightness(1.22) drop-shadow(0 2px 10px rgba(0,0,0,.55));
  transition:filter .35s var(--ease-weich);
}
.marken img:hover{filter:brightness(1.35) drop-shadow(0 2px 14px rgba(0,0,0,.7))}
.marken .gerolsteiner{height:31px;filter:brightness(1.9) drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.marken .gerolsteiner:hover{filter:brightness(2.1) drop-shadow(0 2px 14px rgba(0,0,0,.7))}

@media (max-width:900px){
  .finden-raster{grid-template-columns:1fr}
  .finden-bild{order:-1}
  .finden-bild .bild img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .stadt.zeichnen path,.stadt.zeichnen circle,
  .stadt.zeichnen line,.stadt.zeichnen rect{
    stroke-dasharray:none;stroke-dashoffset:0;animation:none;
  }
  .siegel-ring{animation:none}
}

/* Die "Heute"-Marke auch auf hellem Grund */
.fuss-heute.hell-heute{
  margin-top:1.6rem;border-color:var(--linie-stark);color:var(--tinte-2);
}
.fuss-heute.hell-heute b{color:var(--tinte)}