/* ============================================================
   ETV TRATTORIA · le due racchette — Stylesheet
   Palette: Papier #FAF5EB · Tinte #1D1D1B · Tomate #C2331B
            Basilikum #2F5439 · Kruste #E3A857
   Fonts (self-hosted): Fraunces Variable · Outfit Variable
   ============================================================ */

@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-var-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Outfit';
  src:url('../fonts/outfit-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --paper:#FAF5EB;
  --paper-deep:#F0E7D6;
  --ink:#1D1D1B;
  --ink-soft:#4A4741;
  --tomato:#C2331B;
  --tomato-deep:#9C2411;
  --basil:#2F5439;
  --crust:#E3A857;
  --line:rgba(29,29,27,.14);
  --radius:18px;
  --shadow:0 18px 50px -18px rgba(29,29,27,.28);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Outfit',system-ui,sans-serif;
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
/* clip (nicht hidden!) – hidden würde position:sticky der Speisekarte brechen */
html{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 70px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-weight:380;
  font-size:1.05rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* Lange zusammenhängende Zeichenketten – vor allem die E-Mail-Adresse im
     Impressum und in der Datenschutzerklärung – laufen auf 320px sonst über
     den Bildschirmrand hinaus und werden abgeschnitten. */
  overflow-wrap:break-word;
}
img,video{max-width:100%;display:block}
a{color:inherit;overflow-wrap:anywhere}
::selection{background:var(--tomato);color:var(--paper)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:560;line-height:1.06;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.1rem,1.9vw,1.3rem);color:var(--ink-soft);max-width:62ch}

.container{width:min(1180px,92vw);margin-inline:auto}
.narrow{width:min(820px,92vw);margin-inline:auto}
section{padding:clamp(4rem,9vw,7.5rem) 0;position:relative}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-style:italic;font-weight:480;
  font-size:1.05rem;color:var(--tomato);margin-bottom:1rem;
}
.eyebrow::before{content:'';width:34px;height:1.5px;background:var(--tomato)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(250,245,235,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.site-header.scrolled{border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.brand img{height:46px;width:auto}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:.02em}
.brand-text span{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.main-nav{display:flex;align-items:center;gap:1.7rem}
.main-nav a{
  text-decoration:none;font-weight:480;font-size:.95rem;letter-spacing:.01em;
  padding-block:.35rem;position:relative;
}
.main-nav a:not(.btn)::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--tomato);transition:width .28s;
}
.main-nav a:not(.btn):hover::after,
.main-nav a[aria-current="page"]:not(.btn)::after{width:100%}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem;z-index:70}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:6px 0;transition:.3s}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;
  font-family:var(--font-body);font-weight:520;font-size:.98rem;
  border:1.5px solid var(--ink);color:var(--ink);background:transparent;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s;cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--tomato);border-color:var(--tomato);color:var(--paper)}
.btn-primary:hover{background:var(--tomato-deep);border-color:var(--tomato-deep);box-shadow:0 14px 30px -12px rgba(194,51,27,.55)}
.btn-light{border-color:var(--paper);color:var(--paper)}
.btn-light:hover{background:var(--paper);color:var(--ink)}
.btn-whatsapp{background:#1FA855;border-color:#1FA855;color:#fff}
.btn-whatsapp:hover{background:#178a45;border-color:#178a45}

/* ---------- Hero ---------- */
.hero{
  min-height:min(94vh,900px);display:flex;align-items:flex-end;
  position:relative;overflow:hidden;background:var(--ink);color:var(--paper);
  padding:0;
}
/* inset statt scale: der Puffer für die Parallax-Bewegung entsteht durch
   Überstand nach oben/unten, nicht durch seitliche Skalierung. */
.hero-media{position:absolute;inset:-6% 0}
.hero-media picture{display:block;width:100%;height:100%}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
/* Abdunklung in zwei Lagen. Die schräge Variante von vorher reichte für das
   dunkle KI-Bild, nicht aber für das echte Foto: helle Rucola- und
   Parmesanflächen lagen genau unter der Überschrift. Jetzt dunkelt Lage 1 die
   linke Hälfte ab, auf der der Text steht, Lage 2 den unteren Rand für die
   Infozeile – rechts bleibt das Motiv frei. */
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(20,18,16,.70) 0%,rgba(20,18,16,.38) 24%,
                           rgba(20,18,16,0) 52%),
    linear-gradient(to right,
      #14120F 0%, #14120F 20%,
      rgba(20,18,15,.94) 34%, rgba(20,18,15,.76) 48%,
      rgba(20,18,15,.48) 66%, rgba(20,18,15,.28) 84%,
      rgba(20,18,15,.22) 100%);
}
/* Auf schmalen Displays steht der Text über dem Bild statt daneben – ein
   waagerechter Verlauf träfe ihn dort nicht. Deshalb von unten abdunkeln. */
@media(max-width:760px){
  /* Hochkant ist der Hero so schmal, dass von einem 3:2-Bild nur knapp ein
     Drittel der Breite sichtbar bleibt. Aus der Mitte wäre das der unscharfe
     Tisch – deshalb den Ausschnitt nach rechts auf die Pizza schieben. */
  .hero-media img{object-position:66% center}
  .hero-media::after{
    background:linear-gradient(to top,#14120F 0%,rgba(20,18,15,.90) 30%,
                               rgba(20,18,15,.76) 62%,rgba(20,18,15,.70) 100%);
  }
}
.hero-content{position:relative;z-index:2;padding:clamp(6rem,12vh,9rem) 0 clamp(3rem,7vh,5rem)}
/* Auf hellem Grund trägt das Tomatenrot, über dem abgedunkelten Foto nicht:
   dort kommt es nur auf 2,7:1 statt der nötigen 4,5:1. Im Hero deshalb der
   hellere Krustenton – gleiche Handschrift, lesbarer Wert. */
.hero .eyebrow{color:var(--crust)}
.hero .eyebrow::before{background:var(--crust)}
.hero h1{max-width:14ch}
.hero .lead{color:rgba(250,245,235,.85);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.6rem;
  padding-top:1.4rem;border-top:1px solid rgba(250,245,235,.25);
  font-size:.92rem;color:rgba(250,245,235,.8);
}
.hero-meta b{display:block;color:var(--paper);font-weight:560}
.hero-logo-mark{
  position:absolute;right:-4vw;top:6vh;width:clamp(220px,30vw,430px);
  opacity:.16;z-index:1;pointer-events:none;filter:invert(1);
}

/* ---------- Bild-Slots ----------
   .ai-badge bleibt bewusst stehen: aktuell zeigt die Seite nur echte Fotos,
   aber sobald doch einmal ein KI-Motiv dazukommt, ist die Kennzeichnung
   nach Art. 50 EU AI Act sofort einsatzbereit. */
/* margin:0 ist Pflicht – <figure> bringt vom Browser 1em/40px Rand mit.
   Der hat im Hero der Feiern-Seite links und rechts schwarze Streifen
   erzeugt (das Bild war 1200 statt 1280 breit) und in der Galerie die
   Kacheln auseinandergeschoben. */
.media{position:relative;margin:0;overflow:hidden;border-radius:var(--radius);background:var(--paper-deep)}
/* <picture> ist per Default inline und hat keine eigene Höhe – ohne diese
   Zeile läuft das height:100% des Bildes ins Leere. */
.media picture{display:block;width:100%;height:100%}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.ai-badge{
  position:absolute;left:12px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(29,29,27,.78);color:#fff;backdrop-filter:blur(6px);
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:520;
  padding:.32rem .7rem;border-radius:999px;pointer-events:none;
}
.ai-badge::before{content:'✦';color:var(--crust)}
.hero .ai-badge{left:auto;right:20px;bottom:20px;z-index:4}
.media-note{display:none}
.media.is-missing{
  background:
    radial-gradient(120% 120% at 20% 0%,rgba(227,168,87,.35),transparent 55%),
    linear-gradient(160deg,var(--tomato) 0%,var(--tomato-deep) 100%);
  min-height:260px;display:flex;align-items:center;justify-content:center;
}
.media.is-missing img,.media.is-missing video{display:none}
.media.is-missing .media-note{
  display:block;color:rgba(250,245,235,.95);text-align:center;
  font-size:.85rem;max-width:26ch;padding:1rem;
}
.media.is-missing .media-note code{
  display:block;margin-top:.4rem;font-size:.75rem;background:rgba(0,0,0,.25);
  padding:.3rem .6rem;border-radius:8px;
}
.hero.is-missing-media .hero-media{
  background:radial-gradient(90% 120% at 75% 10%,#3a2a20,transparent 60%),linear-gradient(150deg,#26211c,#141210)
}

/* ---------- Marquee ---------- */
/* Gerades Band – keine Rotation, daher auch kein Kippungs-Ausgleich nötig. */
.marquee-wrap{position:relative;isolation:isolate}
.marquee{
  background:var(--tomato);color:var(--paper);overflow:hidden;
  padding:.9rem 0;
  border-block:2px solid var(--ink);position:relative;z-index:5;
}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marquee 26s linear infinite}
.marquee span{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:1.15rem;white-space:nowrap;display:flex;align-items:center;gap:3rem;
}
.marquee i{font-style:normal;color:var(--crust)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Karten-Slider ---------- */
/* flex-wrap, sonst schieben die beiden 48px-Pfeile die Zeile bei sehr schmalen
   Displays (320px) über den Bildschirmrand hinaus. */
.slider-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2rem}
.slider-nav{display:flex;gap:.6rem;flex-shrink:0}
.slider-nav button{
  width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);
  background:transparent;cursor:pointer;font-size:1.1rem;color:var(--ink);
  transition:background .2s,color .2s,transform .2s;
}
.slider-nav button:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.slider{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(310px,78vw);
  gap:1.4rem;overflow-x:auto;overflow-y:hidden;
  /* proximity statt mandatory: mandatory zwingt den Browser, immer auf einem
     Snap-Punkt zu landen – beim Laden blockiert das kurz das vertikale Scrollen. */
  scroll-snap-type:x proximity;
  /* pan-y gibt vertikale Gesten IMMER an die Seite weiter, statt sie als
     horizontales Wischen zu deuten. overscroll-behavior stoppt das Chaining. */
  touch-action:pan-y pinch-zoom;
  overscroll-behavior-x:contain;overscroll-behavior-y:auto;
  padding:.5rem .5rem 1.5rem;margin:-.5rem;scrollbar-width:none;
}
.slider::-webkit-scrollbar{display:none}
.slider > *{scroll-snap-align:start}
.dish-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .28s,box-shadow .28s;
}
.dish-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
/* 1:1 statt 4/5 mit max-height: die Höhenbegrenzung hat das Seitenverhältnis
   ohnehin auf knapp quadratisch gedrückt, und object-fit:cover hat den
   Tellern dabei oben und unten den Rand abgeschnitten. Jetzt passen
   Rahmen und Bilddatei zusammen. */
/* Passepartout um die Gerichtefotos.
   Die Teller füllen das Originalfoto randlos aus – ein weiterer Ausschnitt ist
   nicht möglich, und ein künstlich angebauter Rand im Bild sah wie ein
   aufgesetzter Rahmen aus. Die Luft kommt deshalb hier aus der Gestaltung:
   ein Rand in Papierfarbe, in dem das Foto sitzt. */
.dish-card .media{
  border-radius:0;aspect-ratio:1/1;
  background:var(--paper-deep);padding:clamp(10px,3.5%,18px);
}
.dish-card .media img{border-radius:10px}
.dish-card-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.dish-num{
  font-family:var(--font-display);font-weight:600;color:var(--tomato);
  font-size:.95rem;letter-spacing:.05em;
}
.dish-card h3{margin:0;font-size:1.25rem}
.dish-card p{color:var(--ink-soft);font-size:.92rem;margin:0;flex:1}
.dish-price{font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin-top:.5rem}

/* ---------- Story / Split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split .media{aspect-ratio:4/3;box-shadow:var(--shadow)}
.split.reverse > :first-child{order:2}
.racket-divider{display:flex;justify-content:center;margin:0 0 1.4rem;color:var(--basil)}
.section-tomato{background:var(--tomato);color:var(--paper)}
.section-tomato .eyebrow{color:var(--crust)}
.section-tomato .eyebrow::before{background:var(--crust)}
.section-tomato .lead{color:rgba(250,245,235,.85)}
.section-basil{background:var(--basil);color:var(--paper)}
.section-basil .eyebrow{color:var(--crust)}
.section-basil .eyebrow::before{background:var(--crust)}
.section-basil .lead{color:rgba(250,245,235,.85)}
.section-deep{background:var(--paper-deep)}

/* ---------- Öffnungszeiten ---------- */
.hours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem;margin-top:2rem}
.hours-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.6rem;
}
.hours-card.closed{background:var(--paper-deep)}
/* Täglich-geöffnet-Karte: positiv hervorgehoben statt ausgegraut */
.hours-card.open{background:var(--basil);border-color:var(--basil);color:#fff}
.hours-card.open b{color:#fff}
.hours-card.open span{color:rgba(255,255,255,.88)}
.hours-card b{font-family:var(--font-display);font-weight:600;font-size:1.1rem;display:block;margin-bottom:.4rem}
.hours-card span{color:var(--ink-soft)}
.info-chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1.5px solid var(--ink);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.9rem;font-weight:480;background:#fff;
}

/* ---------- Speisekarte ---------- */
.menu-nav{
  position:sticky;top:var(--header-h);z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);padding:.8rem 0;
  will-change:transform;
}
.menu-nav-track{
  display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none;
  scroll-behavior:smooth;overscroll-behavior-x:contain;
  touch-action:pan-y pinch-zoom;   /* vertikal wischen bleibt Seiten-Scroll */
}
.menu-nav-track::-webkit-scrollbar{display:none}
.menu-nav a{
  white-space:nowrap;text-decoration:none;font-size:.88rem;font-weight:500;
  padding:.45rem 1rem;border-radius:999px;border:1.5px solid var(--line);
  transition:.2s;
}
.menu-nav a:hover{border-color:var(--ink)}
.menu-nav a.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu-section{padding:clamp(2.8rem,6vw,4.5rem) 0 1rem}
.menu-section-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.6rem;border-bottom:2px solid var(--ink);padding-bottom:.7rem}
.menu-section-head h2{margin:0;font-size:clamp(1.7rem,3.4vw,2.5rem)}
.menu-section-head em{font-family:var(--font-display);color:var(--tomato);font-weight:480}
.menu-list{display:grid;gap:.1rem}
.menu-item{
  display:grid;grid-template-columns:3.2rem 1fr auto;gap:.4rem 1rem;
  align-items:baseline;padding:.85rem .6rem;border-radius:12px;
  transition:background .2s;
}
.menu-item:hover{background:rgba(255,255,255,.75)}
.menu-item + .menu-item{border-top:1px dashed var(--line)}
.mi-num{font-family:var(--font-display);font-weight:600;color:var(--tomato);font-size:1.05rem}
.mi-name{font-weight:520;font-size:1.05rem}
.mi-name sup{font-size:.62em;color:var(--ink-soft);font-weight:400;letter-spacing:.04em}
.mi-desc{grid-column:2;color:var(--ink-soft);font-size:.9rem;line-height:1.45}
.mi-price{font-family:var(--font-display);font-weight:600;font-size:1.1rem;white-space:nowrap}
.drink-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2.4rem;align-items:start}
.drink-group h3{border-bottom:1.5px solid var(--ink);padding-bottom:.5rem;margin-bottom:.8rem}
.drink-row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .2rem;border-bottom:1px dashed var(--line);font-size:.98rem}
.drink-row span:first-child sup{font-size:.62em;color:var(--ink-soft)}
.drink-row b{font-family:var(--font-display);font-weight:600;white-space:nowrap}
.drink-size{color:var(--ink-soft);font-size:.82rem;margin-left:.35rem}
.allergen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.4rem 2rem;font-size:.9rem;color:var(--ink-soft)}
.menu-note{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--tomato);
  border-radius:12px;padding:1.1rem 1.4rem;font-size:.94rem;color:var(--ink-soft);
}

/* ---------- Formulare ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-grid .full{grid-column:1/-1}
label{font-size:.85rem;font-weight:520;display:block;margin-bottom:.35rem}
input,select,textarea{
  width:100%;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:12px;
  font:inherit;background:var(--paper);color:var(--ink);transition:border-color .2s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--tomato)}
.hp{position:absolute !important;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-note{font-size:.82rem;color:var(--ink-soft)}

/* ---------- Galerie ---------- */
/* Galerie-Raster.
   Spaltenzahl fest per Breakpoint statt auto-fill: so gibt es keine
   Zwischenbreite, in der das Raster anders umbricht als geplant.
   Die Reihenfolge der Bilder in build.py ist darauf abgestimmt
   (2 breite + 14 quadratische Kacheln = 18 Einheiten: 6 volle Zeilen bei
   3 Spalten, 9 bei 2). dense bleibt als Sicherheitsnetz, falls jemand Bilder
   ergänzt und die Rechnung nicht mehr aufgeht. */
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:dense;gap:1.4rem}
/* Alle schmalen Kacheln quadratisch: stehen 1:1 und 4:5 in einer Zeile,
   bleibt unter den Quadraten ein weißer Streifen. */
.gallery-grid .media{aspect-ratio:1/1}
/* Breite Kachel über 2 Spalten. Das Bild liegt absolut darin, damit seine
   eigene 16:9-Höhe die Zeile nicht höher macht als die Quadrate daneben –
   die Kachel übernimmt einfach die Zeilenhöhe. */
.gallery-grid .media.wide{grid-column:span 2;aspect-ratio:auto}
.gallery-grid .media.wide picture{position:absolute;inset:0}
@media(max-width:960px){
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Bei 2 Spalten steht die breite Kachel allein in ihrer Zeile und braucht
     eine eigene Höhe – 2:1 entspricht fast genau zwei Quadraten. */
  .gallery-grid .media.wide{aspect-ratio:2/1}
}
@media(max-width:560px){
  .gallery-grid{grid-template-columns:minmax(0,1fr)}
  /* Einspaltig bleiben die breiten Bilder quer. */
  .gallery-grid .media.wide{grid-column:span 1;aspect-ratio:3/2}
}

/* ---------- Karte / Kontakt ---------- */
.map-wrap{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:var(--paper-deep);box-shadow:var(--shadow)}
/* Auf schmalen Displays wäre die 16:9-Fläche nur rund 190px hoch und der
   Einwilligungstext würde mitten im Satz abgeschnitten. Dort deshalb eine
   feste Mindesthöhe – und aspect-ratio ausschalten, sonst rechnet der Browser
   aus der Höhe die Breite zurück und die Karte läuft seitlich aus dem Bild. */
@media(max-width:760px){
  .map-wrap{aspect-ratio:auto;min-height:340px}
}
.map-wrap iframe{width:100%;height:100%;border:0;display:block;position:relative;z-index:1}
.map-wrap iframe[hidden]{display:none}

/* Vorschaufeld der 2-Klick-Karte. Das Hintergrundbild ist ein eigenes Foto –
   ein Kartenausschnitt von Google als Vorschau wäre bereits der Abruf, den
   die Einwilligung erst erlauben soll. */
.map-consent{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center}
.map-consent img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.map-consent::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,16,.74),rgba(20,18,16,.86));
}
.map-consent-inner{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.9rem;
  padding:clamp(1.4rem,4vw,2.4rem);max-width:46ch;color:var(--paper);
}
.map-adresse{
  margin:0;font-family:var(--font-display);font-weight:560;
  font-size:clamp(1.15rem,2.4vw,1.5rem);
}
.map-hinweis{margin:0;font-size:.82rem;line-height:1.5;color:rgba(250,245,235,.88)}
/* Papierfarbe statt Krustenton: der warme Gelbton kam auf schmalen Displays
   über der hellen Stelle des Fotos nur auf 1,7:1. */
.map-hinweis a{color:var(--paper);text-underline-offset:2px}
.map-consent .btn-primary{border-color:var(--tomato)}

.map-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1.2rem}
.map-widerruf{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-body);font-size:.82rem;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:3px;
}
.map-widerruf:hover{color:var(--tomato)}
.map-widerruf[hidden]{display:none}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin:2rem 0}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.6rem}
.contact-card b{font-family:var(--font-display);font-weight:600;display:block;margin-bottom:.5rem;font-size:1.05rem}
.contact-card a{color:var(--tomato);text-decoration:none;font-weight:500}
.contact-card a:hover{text-decoration:underline}

/* ---------- CTA-Band ---------- */
.cta-band{background:var(--ink);color:var(--paper);text-align:center}
.cta-band .mg-mark{width:72px;margin:0 auto 1.2rem;opacity:.9}
.cta-band h2{max-width:20ch;margin-inline:auto}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(250,245,235,.75);padding:3.5rem 0 2rem;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.site-footer h2{color:var(--paper);font-size:1rem;font-family:var(--font-body);font-weight:600;letter-spacing:.02em;margin-bottom:.8rem}
.site-footer a{color:rgba(250,245,235,.75);text-decoration:none}
.site-footer a:hover{color:var(--paper);text-decoration:underline}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer-brand img{height:56px;filter:invert(1) brightness(1.6);margin-bottom:.8rem}
.footer-bottom{border-top:1px solid rgba(250,245,235,.15);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.8rem;color:rgba(250,245,235,.55)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}

/* ---------- Placeholder-Hinweis (Rechtstexte) ---------- */
.todo{background:#FFF3D6;border:1.5px dashed var(--crust);border-radius:12px;padding:1rem 1.3rem;font-size:.9rem;color:#7A5A17}

/* ---------- Responsive ---------- */
@media(max-width:920px){
  .split{grid-template-columns:1fr}
  .split.reverse > :first-child{order:0}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  :root{--header-h:64px}
  .brand img{height:38px}
  .brand-text span{display:none}
  .nav-toggle{display:block}
  .main-nav{
    position:fixed;inset:0;background:var(--paper);z-index:60;
    flex-direction:column;justify-content:center;gap:1.6rem;
    transform:translateY(-102%);transition:transform .4s cubic-bezier(.7,0,.3,1),visibility .4s;
    /* visibility nimmt die geschlossene Nav aus der Tab-Reihenfolge –
       sonst tabbt man durch unsichtbare Links. */
    visibility:hidden;
  }
  .main-nav a{font-size:1.5rem;font-family:var(--font-display)}
  /* backdrop-filter auf dem Header macht diesen zum Bezugsrahmen für
     position:fixed-Kinder – die Overlay-Nav wäre dann nur header-hoch.
     Bei offener Nav daher abschalten. */
  body.nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
  body.nav-open .main-nav{transform:none;visibility:visible}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  body.nav-open{overflow:hidden}
  .form-grid{grid-template-columns:1fr}
  .menu-item{grid-template-columns:2.4rem 1fr auto}
  .footer-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Scroll-Animationen ---------- */
.hero-media{will-change:transform}

/* Rollender Pizzaschneider – zieht beim Scrollen die Schnittlinie */
.roll-divider{
  position:relative;height:64px;margin:clamp(2rem,6vw,4.5rem) 0;
  --p:0;
}
.roll-divider .roll-line{
  position:absolute;left:0;right:0;top:50%;height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 20px);
}
.roll-divider .roll-line::after{
  content:'';position:absolute;left:0;top:0;height:100%;
  width:calc(var(--p) * 100%);background:var(--tomato);
}
.roll-divider .roll-item{
  position:absolute;top:50%;left:0;
  width:60px;height:60px;margin-top:-30px;
  border-radius:50%;
  box-shadow:0 8px 18px -6px rgba(29,29,27,.45);
  transform:translate3d(var(--x,0px),0,0) rotate(calc(var(--p) * 900deg));
  will-change:transform;backface-visibility:hidden;
}
.roll-divider .roll-item svg{width:100%;height:100%;display:block}

/* Zusätzliche Reveal-Varianten */
.reveal-left{opacity:0;transform:translateX(-34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal-right{opacity:0;transform:translateX(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal-left.in,.reveal-right.in,.reveal-scale.in{opacity:1;transform:none}

/* Karten heben sich beim Reveal leicht gestaffelt an */
.menu-card{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.menu-card:hover{transform:translateY(-6px) rotate(-.6deg)}

@media(prefers-reduced-motion:reduce){
  .hero-media,.roll-divider .roll-item{transform:none !important}
  .roll-divider .roll-line::after{width:100%}
  .marquee-track{animation:none}
}