/* =========================================================
   PIZZA amore · Hannover
   Steinofenpizzeria, dunkles Holz + Orange/Rot
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --ink:        #0a0908;   /* Seite ausserhalb des Rahmens */
  --wood:       #14100e;   /* Fallback unter der Holztextur */
  --paper:      #ffffff;
  --text:       #ece3db;   /* Fliesstext auf dunkel */
  --muted:      #b3a69b;   /* Sekundaertext auf dunkel */
  --dark:       #1b1613;   /* Text auf hellen Karten */
  --dark-soft:  #6a5f57;

  --orange:     #e8752e;   /* Marke, Akzent auf dunkel (6,3:1) */
  --orange-ink: #c4491a;   /* Akzenttext auf weiss (4,9:1) */
  --orange-glow:rgba(232,117,46,.5);
  --red:        #e6332b;   /* Logo-Script, Telefon-Icon */
  --cta-a:      #d2340f;
  --cta-b:      #f2701f;
  --cta-solid:  #cf3f14;   /* Vollflaeche mit weissem Text (4,8:1) */

  --frame:      rgba(232,117,46,.66);
  --line:       rgba(232,117,46,.24);
  --card-sh:    0 18px 40px -22px rgba(0,0,0,.85);

  --ff-d: "Gabarito", system-ui, sans-serif;
  --ff-b: "Figtree", system-ui, sans-serif;
  --ff-s: "Kaushan Script", "Brush Script MT", cursive;

  --wrap: 1180px;
  --gap: clamp(1rem, 2.4vw, 1.75rem);
  --sec: clamp(4.5rem, 9vw, 8rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t: .32s var(--ease);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
:where(a,button,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:4px;
}

html{scroll-behavior:smooth;scroll-padding-top:110px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--ff-b);
  font-size:clamp(.975rem,.93rem + .22vw,1.06rem);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.sr,.skip:not(:focus){
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:1rem;left:1rem;z-index:200;
  background:var(--cta-solid);color:#fff;padding:.7rem 1.1rem;border-radius:999px;
  font-weight:700;text-decoration:none;
}

/* ---------- Rahmen um die gesamte Seite ---------- */
.frame{
  position:relative;
  margin:12px;
  border:1px solid var(--frame);
  border-radius:26px;
  background-color:var(--wood);
  background-image:
    linear-gradient(rgba(9,7,6,.34),rgba(9,7,6,.34)),
    url("../img/wood-bg.jpg");
  background-size:auto, 1400px auto;
  background-attachment:scroll, fixed;
  background-position:center top;
  isolation:isolate;
}
@media (max-width:700px){
  .frame{margin:7px;border-radius:16px;background-attachment:scroll,scroll}
}

.wrap{width:min(var(--wrap),calc(100% - 2*var(--gap)));margin-inline:auto}

/* ---------- Typo ---------- */
.h2{
  font-family:var(--ff-d);
  font-weight:800;
  font-size:clamp(1.95rem,1.2rem + 2.9vw,3.25rem);
  line-height:1.06;
  letter-spacing:-.018em;
  color:#fff;
}
.h2--c{text-align:center}
.kicker{
  font-family:var(--ff-d);font-weight:700;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange);margin-bottom:.9rem;
}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;text-decoration:none;font-family:var(--ff-d);font-weight:700;
  border-radius:999px;overflow:hidden;isolation:isolate;
  transition:transform var(--t), box-shadow var(--t), color var(--t), border-color var(--t);
}
.btn > span{position:relative;z-index:2}

/* grosser Gradient-CTA (Schrift >= 18px = grosser Text, 3:1 erfuellt) */
.btn--cta{
  padding:1.05rem 2.5rem;
  font-size:clamp(1.06rem,1rem + .3vw,1.2rem);
  letter-spacing:.055em;text-transform:uppercase;color:#fff;
  background:linear-gradient(96deg,var(--cta-a),var(--cta-b));
  box-shadow:0 14px 30px -14px rgba(210,52,15,.9);
}
.btn--cta::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,#b62a08,#d95a12);
  transform:translateY(101%);transition:transform .38s var(--ease-out);
}
.btn--wide{width:100%}
.btn--ghost{
  padding:1rem 2rem;font-size:1.02rem;color:var(--text);
  border:1px solid var(--line);
}
.btn--ghost::before{
  content:"";position:absolute;inset:0;z-index:1;background:rgba(232,117,46,.14);
  transform:translateY(101%);transition:transform .38s var(--ease-out);
}
/* kleiner Vollflaechen-Button auf weiss */
.btn--buy{
  margin-top:1rem;padding:.66rem 1.9rem;
  font-size:.95rem;font-weight:700;
  color:var(--orange-ink);
  border:1.5px solid var(--orange-ink);
  background:transparent;
}
.btn--buy::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--cta-solid);
  transform:translateY(101%);transition:transform .34s var(--ease-out);
}
.btn--buy.is-added{color:#fff;border-color:var(--cta-solid)}
.btn--buy.is-added::before{transform:translateY(0)}

@media (hover:hover) and (pointer:fine){
  .btn--cta:hover,.btn--ghost:hover{transform:translateY(-2px)}
  .btn--cta:hover{box-shadow:0 18px 34px -14px rgba(210,52,15,1)}
  .btn--cta:hover::before,.btn--ghost:hover::before,.btn--buy:hover::before{transform:translateY(0)}
  .btn--buy:hover{color:#fff;border-color:var(--cta-solid)}
  .btn--ghost:hover{border-color:var(--orange)}
}
.btn:active{transform:translateY(0) scale(.985)}

/* ---------- Marke ---------- */
.brand{
  display:grid;justify-items:start;line-height:.82;text-decoration:none;
  transition:transform var(--t);
}
.brand__top{
  font-family:var(--ff-d);font-weight:900;font-style:italic;
  font-size:1.62rem;letter-spacing:.01em;color:#fff;text-transform:uppercase;
}
.brand__script{
  font-family:var(--ff-s);font-size:1.5rem;color:var(--red);
  margin-top:-.14em;margin-left:.06em;
}
@media (hover:hover) and (pointer:fine){.brand:hover{transform:translateY(-1px)}}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:80;
  transition:background-color var(--t), box-shadow var(--t), backdrop-filter var(--t);
}
.hdr.is-stuck{
  background:rgba(14,11,9,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line), 0 14px 30px -26px #000;
}
.hdr__in{
  width:min(1320px,calc(100% - 2*var(--gap)));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);
  padding:1.15rem 0;
}
.nav{display:flex;gap:clamp(1rem,2vw,1.9rem);margin-inline:auto}
.nav__l{
  position:relative;text-decoration:none;font-weight:600;font-size:.98rem;
  color:var(--text);padding:.25rem 0;transition:color var(--t);
}
.nav__l::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav__l:hover{color:#fff}
  .nav__l:hover::after{transform:scaleX(1)}
}
.nav__l.is-active{color:#fff}
.nav__l.is-active::after{transform:scaleX(1)}

.tel{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700}
.tel__ic{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:50%;background:rgba(230,51,43,.14);
}
.tel__ic svg{width:19px;height:19px;fill:var(--red)}
.tel__no{font-size:1rem;white-space:nowrap;color:#fff}
@media (hover:hover) and (pointer:fine){
  .tel:hover .tel__ic{animation:ring .5s var(--ease)}
  .tel:hover .tel__no{color:var(--orange)}
}
@keyframes ring{
  0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}
  55%{transform:rotate(12deg)}80%{transform:rotate(-6deg)}
}

.cart-btn{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  font-weight:700;color:#fff;padding:.4rem .2rem;transition:color var(--t);
}
.cart-btn__ic svg{
  width:26px;height:26px;fill:none;stroke:var(--red);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t);
}
.cart-btn__cnt{
  position:absolute;top:-2px;left:16px;min-width:19px;height:19px;
  display:grid;place-items:center;padding:0 5px;
  border-radius:999px;background:var(--cta-solid);color:#fff;
  font-size:.72rem;font-weight:800;font-family:var(--ff-d);
}
.cart-btn__cnt[hidden]{display:none}
@media (hover:hover) and (pointer:fine){
  .cart-btn:hover{color:var(--orange)}
  .cart-btn:hover .cart-btn__ic svg{transform:translateY(-2px) scale(1.05)}
}

.burger{display:none;width:44px;height:38px;padding:8px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform var(--t),opacity var(--t)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

@media (max-width:1080px){
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;margin:0;
    background:rgba(14,11,9,.98);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:.5rem clamp(1rem,4vw,2rem) 1.2rem;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .3s var(--ease-out),opacity .3s var(--ease-out);
  }
  .nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav__l{padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:1.05rem}
  .nav__l::after{display:none}
  .burger{display:flex}
  .hdr__in{position:relative;gap:1.1rem}
  .tel{margin-left:auto}          /* Marke links, Rest als Block rechts */
  .tel__no{display:none}
}
@media (max-width:620px){
  .cart-btn__sum{display:none}
}
@media (max-width:560px){
  .brand__top{font-size:1.36rem}.brand__script{font-size:1.26rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(2rem,4vw,3.5rem) 0 clamp(4rem,8vw,7rem)}
.hero__in{
  width:min(1320px,calc(100% - 2*var(--gap)));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  align-items:center;gap:clamp(1.5rem,3vw,3rem);
  min-height:min(72vh,640px);
}
.hero__h1{
  font-family:var(--ff-d);font-weight:800;
  font-size:clamp(2.6rem,1.1rem + 6.4vw,5.1rem);
  line-height:.98;letter-spacing:-.028em;color:#fff;
  text-wrap:balance;
  text-shadow:0 6px 40px rgba(0,0,0,.6);
}
.hero__lede{
  max-width:34ch;margin-top:1.5rem;color:var(--text);
  font-size:clamp(1rem,.95rem + .3vw,1.14rem);
}
.hero .btn--cta{margin-top:2.1rem}
.hero__facts{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:2.4rem;
  font-size:.9rem;color:var(--muted);
}
.hero__facts li{display:flex;align-items:baseline;gap:.45rem}
.hero__facts strong{font-family:var(--ff-d);font-size:1.06rem;color:var(--orange);font-weight:800}

.hero__art{position:relative;justify-self:center}
.hero__art::before{
  content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(232,117,46,.34),transparent 66%);
  filter:blur(28px);z-index:0;
}
.hero__pizza{
  position:relative;z-index:1;
  width:min(52vw,600px);height:auto;
  filter:drop-shadow(0 36px 46px rgba(0,0,0,.75));
  animation:float 9s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(2.4deg)}}

/* Deko */
.deco{position:absolute;pointer-events:none;user-select:none;z-index:2}
.deco--basil1{left:-2.5%;bottom:2%;width:clamp(90px,10vw,168px);filter:drop-shadow(0 0 26px rgba(120,200,90,.28))}
.deco--basil2{right:-1%;bottom:6%;width:clamp(100px,11vw,190px);filter:drop-shadow(0 0 26px rgba(120,200,90,.24))}
.deco--basil3{right:-1.5%;top:14%;width:clamp(70px,7vw,120px);opacity:.85}
.deco--tomato{left:52%;bottom:8%;width:clamp(38px,4vw,64px);filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.spice{
  position:absolute;border-radius:50%;background:#6b5442;
  box-shadow:0 2px 6px rgba(0,0,0,.6);filter:blur(.4px);z-index:2;
}
.spice--1{width:9px;height:9px;left:47%;top:40%;background:#7b3b2b}
.spice--2{width:7px;height:7px;left:54%;top:58%}
.spice--3{width:6px;height:6px;left:59%;top:52%;background:#4c5f2c}
.spice--4{width:8px;height:8px;left:63%;top:68%;background:#7a4a2f}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;text-align:center;min-height:0;padding-top:1rem}
  .hero__lede{margin-inline:auto}
  .hero__facts{justify-content:center}
  .hero__art{order:-1}
  .hero__pizza{width:min(66vw,400px)}
  .deco--tomato,.spice{display:none}
  .deco--basil1{width:78px;bottom:1%}
  .deco--basil2{width:86px;bottom:1%}
}

/* ---------- Menue ---------- */
.menue{position:relative;overflow:hidden;padding:var(--sec) 0}
.tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.1rem,3vw,2.6rem);
  margin:clamp(1.8rem,3vw,2.8rem) 0 clamp(2rem,3.5vw,3rem);
}
.tab{
  position:relative;padding:.45rem .2rem;
  font-family:var(--ff-d);font-weight:600;font-size:1.02rem;
  color:var(--orange);opacity:.72;transition:opacity var(--t),color var(--t);
}
.tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:center;
  transition:transform .36s var(--ease-out);
}
.tab[aria-selected="true"]{opacity:1;color:var(--orange)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .tab:hover{opacity:1}
  .tab:hover::after{transform:scaleX(.6)}
}

.grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,1.7vw,1.55rem);
}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.grid{grid-template-columns:1fr}}

/* MUSS mitgeschrieben werden: '.card{display:flex}' schlaegt das UA-Default
   '[hidden]{display:none}' (gleiche Spezifitaet, spaeter im Stylesheet).
   Ohne diese Zeile schaltet der Tab-Filter das Attribut um, ohne dass sich
   sichtbar etwas aendert. */
.card[hidden]{display:none}
.card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--paper);border-radius:6px;
  padding:1.5rem 1.25rem 1.7rem;
  box-shadow:var(--card-sh);
  transition:transform var(--t),box-shadow var(--t);
}
.card__media{width:78%;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:50%}
.card__media img{width:100%;height:auto;transition:transform .5s var(--ease-out)}
.card__name{
  margin-top:1.15rem;font-family:var(--ff-d);font-weight:800;
  font-size:1.24rem;color:var(--dark);letter-spacing:-.01em;
  transition:color var(--t);
}
.card__ing{margin-top:.35rem;font-size:.855rem;line-height:1.45;color:var(--dark-soft);min-height:2.6em}
.card__price{
  margin-top:.85rem;font-family:var(--ff-d);font-weight:800;
  font-size:1.32rem;color:var(--orange-ink);
}
.card .btn--buy{margin-top:auto}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-6px);box-shadow:0 26px 46px -20px rgba(0,0,0,.9)}
  .card:hover .card__media img{transform:scale(1.07) rotate(-4deg)}
  .card:hover .card__name{color:var(--orange-ink)}
}
.menue__note{
  margin-top:clamp(1.6rem,3vw,2.4rem);text-align:center;
  font-size:.86rem;color:var(--muted);max-width:62ch;margin-inline:auto;
}

/* ---------- Ueber uns ---------- */
.about{padding:var(--sec) 0;border-top:1px solid rgba(255,255,255,.05)}
.about__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.about__copy p{margin-top:1.1rem;color:var(--text);max-width:52ch}
.about__list{margin-top:2rem;display:grid;gap:.9rem}
.about__list li{
  display:flex;gap:1rem;align-items:baseline;
  padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.98rem;
}
.about__list span{
  font-family:var(--ff-d);font-weight:800;font-size:1.02rem;color:var(--orange);flex:none;
}
/* Die linke, hohe Aufnahme gibt die Gesamthoehe vor (definite aspect-ratio),
   rechts sitzt oben das zweite Foto, darunter fuellt die Verlaufskachel den Rest.
   Kein height:100% auf dem Bild, das waere gegen eine unbestimmte Zeilenhoehe zirkulaer. */
.about__art{
  position:relative;display:grid;gap:1rem;
  grid-template-columns:1.06fr .94fr;grid-template-rows:auto 1fr;
}
.about__img{width:100%;border-radius:8px;object-fit:cover;box-shadow:var(--card-sh)}
.about__img--1{grid-column:1;grid-row:1 / span 2;aspect-ratio:4/5.4}
.about__img--2{grid-column:2;grid-row:1;aspect-ratio:9/7}
/* Das dritte Bild fuellt die Restzeile exakt aus. Deshalb ein Rahmen-Element
   mit absolut gesetztem <img> darin: so traegt das Bild NICHTS zur Zeilenhoehe
   bei und die 1fr-Zeile bleibt genau der Rest unter dem zweiten Foto. Ein
   height:100% direkt auf dem <img> waere gegen eine erst zu berechnende
   Zeilenhoehe zirkulaer. */
.about__img--3{
  grid-column:2;grid-row:2;position:relative;overflow:hidden;
  min-height:110px;border-radius:8px;box-shadow:var(--card-sh);
}
.about__img--3 img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:8px;box-shadow:none;
}
@media (max-width:880px){
  .about__in{grid-template-columns:1fr}
  .about__art{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .about__img--1{grid-row:auto;aspect-ratio:4/5}
  .about__img--2{grid-row:auto;aspect-ratio:4/5}
  .about__img--3{grid-column:auto;grid-row:auto;aspect-ratio:8/5;min-height:0}
}

/* ---------- Ablauf ---------- */
.steps{padding:var(--sec) 0}
.steps__in{
  margin-top:clamp(2rem,4vw,3.4rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.steps__media img{width:100%;border-radius:8px;box-shadow:0 26px 50px -26px rgba(0,0,0,.95)}
.steps__list{display:grid;gap:clamp(1.6rem,3vw,2.4rem)}
.step{position:relative;display:flex;align-items:flex-start;gap:clamp(.6rem,1.6vw,1.4rem)}
.step__no{
  font-family:var(--ff-d);font-weight:900;
  font-size:clamp(3.4rem,7vw,5.6rem);line-height:.8;
  color:rgba(232,117,46,.17);flex:none;width:2.1em;
  letter-spacing:-.04em;
}
.step__txt h3{font-family:var(--ff-d);font-weight:800;font-size:1.22rem;color:#fff}
.step__txt p{margin-top:.5rem;font-size:.94rem;color:var(--muted);max-width:46ch}
@media (max-width:880px){
  .steps__in{grid-template-columns:1fr}
  .step__no{font-size:3rem;width:1.9em}
}

/* ---------- Bewertungen ---------- */
.revs{padding:var(--sec) 0}
.revs__list{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:clamp(1.1rem,2.2vw,1.8rem)}
.rev{
  display:flex;align-items:center;gap:clamp(1.1rem,2.6vw,2.2rem);
  padding:clamp(1.3rem,2.6vw,2rem) clamp(1.3rem,3vw,2.4rem);
  border:1px solid var(--line);border-radius:18px;
  background:rgba(20,15,12,.42);
  transition:border-color var(--t),transform var(--t),background-color var(--t);
}
.rev__ava{
  width:clamp(78px,9vw,112px);aspect-ratio:1;border-radius:50%;
  object-fit:cover;flex:none;border:2px solid rgba(232,117,46,.3);
}
.rev__name{font-family:var(--ff-d);font-weight:800;font-size:1.28rem;color:#fff}
.rev blockquote{margin-top:.5rem}
.rev blockquote p{font-size:.94rem;line-height:1.6;color:var(--muted);max-width:78ch}
@media (hover:hover) and (pointer:fine){
  .rev:hover{border-color:rgba(232,117,46,.55);transform:translateY(-3px);background:rgba(26,19,15,.6)}
}
.revs__note{margin-top:1.8rem;font-size:.82rem;color:var(--muted);text-align:center}
@media (max-width:620px){
  .rev{flex-direction:column;text-align:center}
}

/* ---------- Kontakt ---------- */
.kontakt{padding:var(--sec) 0}
.kontakt__in{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.kontakt__dl{margin-top:2rem;display:grid;gap:.15rem}
.kontakt__dl dt{font-weight:700;color:#fff;margin-top:1.15rem;font-size:.98rem}
.kontakt__dl dt:first-child{margin-top:0}
.kontakt__dl dd{color:var(--muted)}
.kontakt__dl a{text-decoration:none;transition:color var(--t)}
@media (hover:hover) and (pointer:fine){.kontakt__dl a:hover{color:var(--orange)}}

.socials{display:flex;gap:.8rem;margin-top:2rem}
.soc{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--text);
  transition:background-color var(--t),border-color var(--t),transform var(--t);
}
.soc svg{width:20px;height:20px;fill:var(--text);transition:fill var(--t)}
@media (hover:hover) and (pointer:fine){
  .soc:hover{background:var(--cta-solid);border-color:var(--cta-solid);transform:translateY(-3px)}
  .soc:hover svg{fill:#fff}
}

.kontakt__map{position:relative}
.kontakt__map iframe{
  width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:6px;
  filter:saturate(.85) contrast(1.02);
}
.kontakt__maplink{
  display:inline-block;margin-top:.8rem;font-size:.86rem;color:var(--orange);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--t);
}
@media (hover:hover) and (pointer:fine){.kontakt__maplink:hover{border-color:var(--orange)}}
@media (max-width:880px){.kontakt__in{grid-template-columns:1fr}}

/* ---------- Bestellung ---------- */
.order{position:relative;padding:clamp(2rem,4vw,4rem) 0 var(--sec);overflow:hidden}
.order__in{
  width:min(1320px,calc(100% - 2*var(--gap)));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
.order__art{position:relative;margin-left:clamp(-14rem,-14vw,-3rem)}
.order__art img{width:100%;filter:drop-shadow(0 34px 44px rgba(0,0,0,.8))}
.order__lede{margin-top:.9rem;color:var(--muted);max-width:40ch}
.form{margin-top:clamp(1.6rem,3vw,2.4rem);display:grid;gap:1rem;max-width:460px}
.field{position:relative}
.field input,.field select{
  width:100%;padding:1.05rem 1.6rem;border:1px solid transparent;border-radius:999px;
  background:var(--paper);color:var(--dark);font-size:1rem;
  transition:border-color var(--t),box-shadow var(--t);
}
.field select{
  appearance:none;color:var(--dark);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23c4491a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.35rem center;background-size:18px;
  padding-right:3.2rem;cursor:pointer;
}
.field select:invalid{color:#8b8078}
.field input::placeholder{color:#8b8078}
.field input:focus,.field select:focus{outline:none;border-color:var(--cta-solid);box-shadow:0 0 0 3px rgba(207,63,20,.28)}
.field.has-err input,.field.has-err select{border-color:#ff6a52;box-shadow:0 0 0 3px rgba(255,106,82,.22)}
.err{margin-top:.4rem;padding-left:1.6rem;font-size:.83rem;color:#ffab9b}
.err[hidden]{display:none}
.form .btn--cta{margin-top:.4rem}
.form__note{font-size:.8rem;color:var(--muted);line-height:1.5}
@media (max-width:880px){
  .order__in{grid-template-columns:1fr}
  .order__art{margin-left:0;max-width:340px;margin-inline:auto;order:-1}
  .form{max-width:none}
}

/* ---------- Footer ---------- */
.ftr{
  background:#0c0a09;border-top:1px solid rgba(255,255,255,.06);
  border-radius:0 0 25px 25px;
  padding:clamp(2.6rem,5vw,4rem) 0 1.6rem;
}
@media (max-width:700px){.ftr{border-radius:0 0 15px 15px}}
.ftr__in{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;
  gap:clamp(1.8rem,4vw,3rem);align-items:start;
}
.brand--ftr .brand__top{font-size:2.05rem}
.brand--ftr .brand__script{font-size:1.9rem}
.ftr__h{
  font-family:var(--ff-d);font-weight:800;font-size:.9rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin-bottom:1.1rem;
}
.ftr__nav{display:grid;gap:.6rem;justify-items:start}
.ftr__nav a{
  text-decoration:none;font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);transition:color var(--t),transform var(--t);
}
@media (hover:hover) and (pointer:fine){
  .ftr__nav a:hover{color:var(--orange);transform:translateX(3px)}
}
.ftr__tel{
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  font-weight:700;font-size:1.02rem;color:#fff;
}
.ftr__tel .tel__ic{background:rgba(255,255,255,.08)}
.ftr__tel .tel__ic svg{fill:#fff}
@media (hover:hover) and (pointer:fine){.ftr__tel:hover{color:var(--orange)}}
.socials--ftr{margin-top:1.4rem}
.socials--ftr .soc{width:40px;height:40px;border:0;background:#fff}
.socials--ftr .soc svg{fill:#141110}
@media (hover:hover) and (pointer:fine){
  .socials--ftr .soc:hover{background:var(--cta-solid)}
  .socials--ftr .soc:hover svg{fill:#fff}
}
.ftr__legal{
  width:min(var(--wrap),calc(100% - 2*var(--gap)));margin:clamp(2rem,4vw,3rem) auto 0;
  padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.07);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.4rem;
  font-size:.82rem;color:var(--muted);
}
.ftr__legal nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.ftr__legal a{text-decoration:none;transition:color var(--t)}
@media (hover:hover) and (pointer:fine){.ftr__legal a:hover{color:var(--orange)}}
@media (max-width:760px){.ftr__in{grid-template-columns:1fr;gap:2.2rem}}

/* ---------- Warenkorb ---------- */
.cart[hidden]{display:none}
.cart{position:fixed;inset:0;z-index:120}
.cart__backdrop{position:absolute;inset:0;background:rgba(6,4,4,.66);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s var(--ease)}
.cart.is-open .cart__backdrop{opacity:1}
.cart__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw);
  background:#141110;border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .38s var(--ease-out);
}
.cart.is-open .cart__panel{transform:translateX(0)}
.cart__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.4rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.08);
}
.cart__head h2{font-family:var(--ff-d);font-weight:800;font-size:1.3rem;color:#fff}
.x{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);transition:transform var(--t),background-color var(--t)}
.x svg{width:18px;height:18px;fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round}
@media (hover:hover) and (pointer:fine){
  .x:hover{transform:rotate(90deg);background:rgba(232,117,46,.16)}
}
.cart__list{flex:1;overflow-y:auto;padding:1rem 1.5rem;display:grid;gap:.9rem;align-content:start}
.cart__li{
  display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;align-items:center;
  padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.07);
}
.cart__li h3{font-family:var(--ff-d);font-weight:700;font-size:1.02rem;color:#fff}
.cart__li .p{font-size:.85rem;color:var(--muted)}
.cart__qty{display:flex;align-items:center;gap:.5rem;grid-column:2;grid-row:1/3}
.qbtn{
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--text);font-weight:700;line-height:1;
  transition:background-color var(--t),color var(--t),border-color var(--t);
}
@media (hover:hover) and (pointer:fine){
  .qbtn:hover{background:var(--cta-solid);border-color:var(--cta-solid);color:#fff}
}
.cart__n{min-width:1.4ch;text-align:center;font-weight:700;font-family:var(--ff-d)}
.cart__empty{padding:2rem 1.5rem;color:var(--muted);font-size:.94rem}
.cart__empty[hidden]{display:none}
.cart__foot{padding:1.3rem 1.5rem 1.6rem;border-top:1px solid rgba(255,255,255,.08)}
.cart__total{display:flex;justify-content:space-between;align-items:baseline;font-size:1rem}
.cart__total strong{font-family:var(--ff-d);font-size:1.5rem;color:#fff}
.cart__ship{margin:.4rem 0 1.1rem;font-size:.83rem;color:var(--orange)}

/* ---------- Modal ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:1rem}
.modal__backdrop{position:absolute;inset:0;background:rgba(6,4,4,.72);backdrop-filter:blur(4px)}
.modal__box{
  position:relative;width:min(540px,100%);max-height:88vh;overflow-y:auto;
  background:#171310;border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.6rem,4vw,2.4rem);
  animation:pop .34s var(--ease-out) both;
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal__box .x{position:absolute;top:1rem;right:1rem}
.modal__box h2{font-family:var(--ff-d);font-weight:800;font-size:1.6rem;color:#fff;padding-right:3rem}
.modal__box > p{margin-top:.6rem;color:var(--muted);font-size:.95rem}
.modal__prev{
  margin:1.2rem 0;padding:1rem 1.1rem;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.6;
  color:var(--text);white-space:pre-wrap;max-height:240px;overflow-y:auto;
}
.modal__acts{display:flex;flex-wrap:wrap;gap:.8rem}
.modal__acts .btn{flex:1 1 180px}

/* ---------- Toast ---------- */
.toast:empty{display:none}          /* leerer Toast ragte sonst unten ins Bild */
.toast{
  position:fixed;left:50%;bottom:2rem;z-index:160;
  transform:translate(-50%,calc(100% + 3rem));
  padding:.85rem 1.5rem;border-radius:999px;
  background:var(--cta-solid);color:#fff;font-weight:700;font-size:.94rem;
  box-shadow:0 18px 34px -16px rgba(0,0,0,.9);
  transition:transform .38s var(--ease-out);pointer-events:none;
}
.toast.is-on{transform:translate(-50%,0)}

/* ---------- Reveal (nur mit JS) ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .hero__pizza{animation:none}
}