/* ==========================================================================
   GELATERIA COCCATO — foglio di stile unico per tutto il sito
   Palette e caratteri: scheda "Identità visiva Coccato"
   Modificando questo file cambi TUTTE le pagine insieme.
   ========================================================================== */

/* ==========================================================================
   CARATTERI OSPITATI SUL NOSTRO SERVER  (aggiunti il 10 set 2026)
   Prima Fraunces e Figtree venivano scaricati dai server di Google a ogni
   visita: in Germania questo e' stato oggetto di causa (LG Muenchen I, 2022)
   perche' manda l'indirizzo IP del visitatore a Google senza consenso.
   Ora i file stanno in assets/font/ e il sito non chiama piu' nessun server
   esterno per i caratteri. I file vengono dai pacchetti npm
   @fontsource-variable/fraunces e @fontsource-variable/figtree.
   Sono file "variabili": un solo file copre tutti i pesi.
   ========================================================================== */

/* Fraunces - solo il CORSIVO, perche' nel sito e' sempre usato in corsivo.
   Versione "full": contiene tutti gli assi, compresi SOFT e WONK. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url(font/fraunces-italic-latin.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url(font/fraunces-italic-latin-ext.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Figtree - solo il tondo, pesi da 300 a 900. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(font/figtree-latin.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(font/figtree-latin-ext.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --crema:        #FCF6ED;
  --crema-scuro:  #F5EADC;
  --marrone:      #594B40;
  --marrone-med:  #68574A;
  --marrone-cupo: #3B2F27;
  --rosa:         #BB586F;
  --rosa-scuro:   #A8455C;
  --oro:          #876A24;
  --oro-chiaro:   #C3A359;
  --bianco:       #FFFCF8;
  --linea:        rgba(89,75,64,.14);
  --ombra:        0 18px 44px rgba(89,75,64,.13);
  --ombra-alta:   0 26px 60px rgba(89,75,64,.20);
  --display:'Fraunces','Georgia',serif;
  --testo:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --wonk:'SOFT' 60,'WONK' 1;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--crema);color:var(--marrone);
  font-family:var(--testo);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--rosa-scuro);outline-offset:3px;border-radius:4px}
.salta{position:absolute;left:-9999px;top:0}
.salta:focus{left:12px;top:12px;z-index:200;background:#fff;padding:12px 18px;border-radius:10px;box-shadow:var(--ombra)}

.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.wrap-stretto{max-width:780px;margin:0 auto;padding:0 26px}

/* ---------- tipografia ---------- */
.occhiello{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--marrone-med)}
.titolo{
  font-family:var(--display);font-variation-settings:var(--wonk),'opsz' 96;
  font-style:italic;font-weight:700;line-height:1.1;color:var(--rosa);text-wrap:balance;
}
h1.titolo{font-size:clamp(34px,5.6vw,58px)}
h2.titolo{font-size:clamp(30px,4.4vw,44px);margin-top:12px}
h3{font-family:var(--display);font-variation-settings:var(--wonk),'opsz' 48;
   font-style:italic;font-weight:700;font-size:26px;line-height:1.15;color:var(--rosa)}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  padding:13px 26px;border-radius:999px;cursor:pointer;
  background:var(--rosa-scuro);color:#fff;border:2px solid var(--rosa-scuro);
  transition:background .2s,border-color .2s,transform .2s,color .2s;
}
.btn:hover{background:var(--marrone-cupo);border-color:var(--marrone-cupo);color:#fff;transform:translateY(-2px)}
.btn-vuoto{background:transparent;color:var(--rosa-scuro)}
.btn-vuoto:hover{background:var(--rosa-scuro);color:#fff;border-color:var(--rosa-scuro)}
.btn-chiaro{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.75);color:#fff;backdrop-filter:blur(4px)}
.btn-chiaro:hover{background:#fff;color:var(--rosa-scuro);border-color:#fff}

/* ---------- testata ---------- */
.testata{position:sticky;top:0;z-index:60;background:rgba(252,246,237,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
.marchio{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--display);font-variation-settings:var(--wonk),'opsz' 48;
  font-style:italic;font-weight:700;font-size:25px;color:var(--rosa);white-space:nowrap}
.marchio-logo{width:46px;height:46px;border-radius:12px;background:var(--marrone-cupo);
  flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.marchio-logo img{height:32px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:26px}
.menu a{font-size:15.5px;font-weight:500;transition:color .2s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--rosa-scuro)}
.menu a[aria-current="page"]{font-weight:600}
.lingua{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border:1px solid var(--linea);border-radius:999px;color:var(--marrone-med)}
.lingua:hover{border-color:var(--rosa-scuro);color:var(--rosa-scuro)}
.hamburger{display:none;width:44px;height:44px;border:1px solid var(--linea);border-radius:10px;
  background:transparent;cursor:pointer;color:var(--marrone);align-items:center;justify-content:center}
.hamburger svg{width:22px;height:22px;fill:currentColor}

/* ---------- slideshow ---------- */
.slider{position:relative;height:min(78vh,660px);min-height:420px;background:var(--marrone-cupo);overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;will-change:opacity}
.slide.attiva{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
/* Velo localizzato: la foto resta luminosa, solo l'angolo in basso a sinistra
   (dove sta il testo) ha una sfumatura scura che tiene leggibili le scritte. */
.velo{position:absolute;inset:0;
  background:
    linear-gradient(0deg, rgba(45,30,24,.68) 0%, rgba(45,30,24,.30) 30%, rgba(45,30,24,0) 58%),
    linear-gradient(90deg, rgba(45,30,24,.42) 0%, rgba(45,30,24,0) 42%)}
.slider-testo{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;text-align:left;color:#fff;padding:0 56px 64px 72px}
.slider-testo .occhiello{color:rgba(255,255,255,.85)}
.slider-testo h1{color:#fff;text-shadow:0 3px 22px rgba(0,0,0,.35);max-width:15ch}
.slider-testo p{margin-top:16px;max-width:44ch;font-size:18px;
  color:rgba(255,255,255,.93);text-shadow:0 2px 14px rgba(0,0,0,.35)}
.slider-azioni{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start;margin-top:28px}
.freccia{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:48px;height:48px;
  border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);transition:background .2s}
.freccia:hover{background:rgba(255,255,255,.34)}
.freccia svg{width:17px;height:17px;fill:currentColor}
.freccia.prec{left:22px}
.freccia.succ{right:22px}
.punti{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:4;display:flex;gap:11px}
.punto{width:11px;height:11px;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.75);
  transition:background .25s,width .25s,border-radius .25s}
.punto[aria-current="true"]{background:#fff;width:30px;border-radius:999px}

/* versione ridotta della testata (se un giorno serve su qualche pagina) */
.slider-basso{height:min(48vh,420px);min-height:320px}

/* FASCIA DEL MARCHIO — sta fra la testata e il primo blocco, su tutte le pagine.
   Logo a sinistra, nome a destra (variante B, scelta da Marco il 9 set 2026). */
.fascia-marchio{background:var(--marrone-cupo);padding:26px 0}
.fascia-marchio .fm-wrap{max-width:1180px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:center;gap:34px}
.fascia-marchio img{height:82px;width:auto;display:block;flex:none}
.fascia-marchio .fm-nome{font-family:var(--display);font-variation-settings:var(--wonk);
  font-style:italic;font-weight:700;font-size:clamp(30px,4.2vw,46px);line-height:1.05;
  color:var(--crema)}
.fascia-marchio .fm-sotto{font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;margin-top:9px;color:rgba(252,246,237,.62)}

/* ---------- sezioni ---------- */
section.blocco{padding:92px 0}
.blocco-bianco{background:var(--bianco)}
.blocco-crema{background:var(--crema-scuro)}
.intestazione{text-align:center;max-width:60ch;margin:0 auto 54px}
.intestazione p{margin-top:14px;color:var(--marrone-med)}

/* testo lungo */
.prosa p{margin-top:22px;max-width:68ch}
.prosa p:first-child{margin-top:0}
.prosa h2{margin-top:52px}
.prosa h2:first-child{margin-top:0}
.prosa h3{margin-top:40px}
.prosa ul{margin-top:20px;padding-left:22px;display:flex;flex-direction:column;gap:9px;max-width:66ch}
.prosa a{color:var(--rosa-scuro);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.prosa strong{color:var(--marrone-cupo)}

/* STORIA DI FAMIGLIA (pagina Über uns) — foto d'epoca in colonna a sinistra,
   testo a destra. Sotto, la foto a colori grande che chiude la pagina. */
.storia{display:grid;grid-template-columns:264px 1fr;gap:52px;align-items:start}
.storia-foto{display:flex;flex-direction:column;gap:18px}
.storia-foto img{width:100%;height:auto;display:block;border-radius:14px;
  box-shadow:var(--ombra);background:var(--crema-scuro)}
.storia-seguito{margin-top:62px}
.foto-chiusura{margin-top:62px}
.foto-chiusura img{width:100%;height:auto;display:block;
  border-radius:18px;box-shadow:var(--ombra-alta)}
.nota{margin-top:26px;padding:18px 22px;background:var(--crema-scuro);
  border-left:3px solid var(--oro-chiaro);border-radius:0 12px 12px 0;font-size:15.5px}

/* Willkommen */
.willkommen{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.willkommen-foto{border-radius:22px;overflow:hidden;box-shadow:var(--ombra);aspect-ratio:4/3;background:var(--crema-scuro)}
.willkommen-foto img{width:100%;height:100%;object-fit:cover}
/* Foto verticale in evidenza (volantino/azione): si vede TUTTA, senza tagli.
   Usare "foto-intera" insieme a "willkommen-foto", dentro un blocco "foto-azione". */
.foto-azione{display:flex;flex-direction:column;align-items:center;gap:16px}
.willkommen-foto.foto-intera{aspect-ratio:auto;width:100%;max-width:430px}
.willkommen-foto.foto-intera img{width:100%;height:auto;object-fit:contain;display:block}
.didascalia-azione{font-size:15px;line-height:1.5;color:var(--marrone-med);max-width:430px;text-align:center}
.willkommen-testo{display:flex;flex-direction:column;align-items:flex-start}
.willkommen-testo p{margin-top:22px;max-width:34em}
.numeri{display:flex;gap:56px;flex-wrap:wrap;margin-top:38px}
.numero b{display:block;font-family:var(--display);font-variation-settings:var(--wonk),'opsz' 72;
  font-style:italic;font-weight:700;font-size:39px;line-height:1;color:var(--oro);font-variant-numeric:tabular-nums}
.numero span{display:block;margin-top:8px;font-size:13px;color:var(--marrone-med)}

/* striscia banner */
/* La striscia "Nicht nur Eis": tre riquadri per riga, e se l'ultima riga
   non e' piena i riquadri restano centrati invece di accostarsi a sinistra. */
.striscia{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.banner{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--ombra);
  flex:0 1 calc((100% - 32px)/3);min-width:0}
.banner img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s}
.banner:hover img{transform:scale(1.05)}
.banner b{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  font-family:var(--display);font-variation-settings:var(--wonk),'opsz' 36;
  font-style:italic;font-weight:700;font-size:19px;color:#fff;
  background:linear-gradient(180deg,rgba(45,30,24,0),rgba(45,30,24,.72));
  text-shadow:0 2px 10px rgba(0,0,0,.4)}

/* filiali */
.filiali{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.filiale{background:var(--bianco);border:1px solid var(--linea);border-radius:22px;overflow:hidden;
  box-shadow:var(--ombra);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.filiale:hover{transform:translateY(-5px);box-shadow:var(--ombra-alta)}
.filiale > img{height:236px;width:100%;object-fit:cover}
.filiale-corpo{padding:30px 32px 32px;display:flex;flex-direction:column;flex:1;align-items:flex-start}
.indirizzo{margin-top:10px;color:var(--marrone-med);font-size:15.5px;line-height:1.5}
.orari{width:100%;margin-top:20px;background:var(--crema);border-radius:14px;padding:16px 18px;font-size:15px}
.orari-riga{display:flex;justify-content:space-between;gap:14px;padding:4px 0}
.orari-riga + .orari-riga{border-top:1px solid var(--linea)}
.orari-riga span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--marrone-cupo);font-weight:500}
.filiale-corpo .mappa-mini{margin-top:18px}
.telefono{margin-top:22px;font-size:19px;font-weight:600;color:var(--oro);font-variant-numeric:tabular-nums}

/* speisekarte */
.karte{display:grid;grid-template-columns:1fr 1.05fr;gap:66px;align-items:center}
.karte-foto{border-radius:20px;overflow:hidden;box-shadow:var(--ombra);transform:rotate(-2deg);aspect-ratio:4/3}
.karte-foto img{width:100%;height:100%;object-fit:cover}
.karte-testo p{margin-top:20px;max-width:38em;color:var(--marrone-med)}
.karte-testo .btn{margin-top:28px}
.elenco{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.elenco li{font-size:14.5px;font-weight:500;padding:7px 16px;border-radius:999px;
  background:var(--crema-scuro);border:1px solid var(--linea);color:var(--marrone)}

/* Speisekarte: il testo d'apertura sta vicino alla carta sfogliabile, cosi' chi
   arriva vede subito che la si puo' sfogliare. La nota sugli allergeni sta in
   mezzo, tra il libro e la carta scritta. */
.blocco.intro-carta{padding:74px 0 30px}
.blocco.carta-sezione{padding-top:44px}
.nota-carta{max-width:820px;margin:36px auto 0}

/* DOVE CI TROVATE — le due schede con i loghi dei centri commerciali.
   I loghi sono PNG con lo sfondo gia' del colore della scheda (--bianco). */
.trovarci-blocco h3{margin-bottom:14px}
.trovarci-blocco > p{color:var(--marrone-med);max-width:46ch}
.trovarci{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px}
.trovarci-carta{flex:1 1 210px;background:var(--bianco);border:1px solid var(--linea);
  border-radius:18px;box-shadow:var(--ombra);padding:24px 20px 22px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
  transition:box-shadow .25s,transform .25s}
a.trovarci-carta:hover{box-shadow:var(--ombra-alta);transform:translateY(-3px)}
.trovarci-logo{height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.trovarci-logo img{max-height:100%;width:auto;display:block}
.trovarci-logo img.logo-largo{max-width:178px}
.trovarci-carta b{font-family:var(--display);font-variation-settings:var(--wonk),'opsz' 48;
  font-style:italic;font-weight:700;font-size:21px;color:var(--rosa)}
.trovarci-dove{font-size:13.5px;line-height:1.5;color:var(--marrone-med)}

/* libro sfogliabile (StPageFlip, ospitato da noi — nessun servizio esterno) */
.libro{border-radius:18px;overflow:hidden;box-shadow:var(--ombra);background:var(--crema-scuro)}
.libro iframe{width:100%;height:min(80vh,820px);border:0;display:block}
.libro-bloccato{
  min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:16px;padding:56px 30px;border:1px dashed var(--linea);
}
.libro-bloccato p{max-width:48ch;color:var(--marrone-med);font-size:15.5px}
.libro-vano{display:flex;flex-direction:column;align-items:center;gap:18px;padding:44px 20px}
#carta-libro{margin:0 auto}
#carta-libro .page{background:var(--bianco)}
#carta-libro img{width:100%;height:100%;display:block}
.libro-comandi{display:flex;gap:12px;align-items:center}
.libro-comandi button{font-family:var(--testo);font-size:15px;font-weight:600;cursor:pointer;
  border:1px solid var(--linea);background:var(--bianco);color:var(--marrone);
  padding:9px 20px;border-radius:999px;transition:box-shadow .2s,transform .2s}
.libro-comandi button:hover{box-shadow:var(--ombra);transform:translateY(-2px)}
.libro-conta{font-size:15px;color:var(--marrone-med);font-variant-numeric:tabular-nums;min-width:70px;text-align:center}

/* carta scritta (sotto il libro sfogliabile) — colonne che si bilanciano da sole */
.carta-scritta{margin-top:70px}
.carta-griglia{columns:2;column-gap:56px;margin-top:38px}
.carta-gruppo{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 36px;padding-top:2px}
.carta-gruppo h3{font-size:23px;padding-bottom:10px;border-bottom:2px solid var(--linea)}
.piatto{display:flex;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linea)}
.piatto:last-child{border-bottom:0}
.piatto-testo{flex:1;min-width:0}
.piatto-testo b{display:block;font-size:16px;font-weight:600;color:var(--marrone-cupo)}
.piatto-testo > span{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--marrone-med)}
.misura{font-weight:400;font-size:14px;color:var(--marrone-med)}
.prezzo{font-family:var(--display);font-variation-settings:var(--wonk),'opsz' 36;
  font-style:italic;font-weight:700;font-size:19px;color:var(--oro);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.portioni{margin-top:10px;padding:24px 26px;background:var(--crema-scuro);border-radius:14px}
.portioni h3{margin-bottom:6px}
.portioni-nota{margin-top:4px;color:var(--marrone-med);font-size:14.5px}
.portioni-riga{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--linea);font-size:15px}
.portioni-riga:last-child{border-bottom:0}
.portioni-riga b{color:var(--marrone-cupo);font-weight:600}
.portioni-riga span:last-child{font-weight:700;color:var(--oro);white-space:nowrap}

/* video */
.video-vetrina{border-radius:20px;overflow:hidden;box-shadow:var(--ombra);
  aspect-ratio:16/9;background:var(--marrone-cupo);max-width:900px;margin:0 auto}
.video-vetrina video{width:100%;height:100%;object-fit:cover;display:block}

/* galleria */
/* Galleria: come la striscia, se l'ultima riga non e' piena resta centrata. */
.galleria{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.galleria figure{border-radius:16px;overflow:hidden;box-shadow:var(--ombra);aspect-ratio:3/2;
  flex:0 1 calc((100% - 32px)/3);min-width:0}

/* Collegamento alla pagina Facebook, sotto la galleria della pagina Milano */
.social-pagina{display:flex;justify-content:center;margin-top:40px}
.social-pagina a{display:inline-flex;align-items:center;gap:13px;font-size:16px;font-weight:600;
  color:var(--marrone);text-decoration:none;background:var(--crema);border:1px solid var(--linea);
  border-radius:999px;padding:9px 24px 9px 9px;transition:box-shadow .2s,transform .2s,color .2s}
.social-pagina a:hover{box-shadow:var(--ombra);transform:translateY(-2px);color:var(--rosa-scuro)}
.social-pagina span{width:40px;height:40px;border-radius:50%;flex:none;background:var(--rosa-scuro);
  display:flex;align-items:center;justify-content:center}
.social-pagina svg{width:20px;height:20px;fill:#fff}
.galleria img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.galleria figure:hover img{transform:scale(1.05)}

/* collegamento social piccolo, dentro la scheda contatti */
.social-mini,.mappa-mini{margin-top:16px}
.social-mini a,.mappa-mini a{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
  color:var(--marrone);text-decoration:none;background:var(--crema);border:1px solid var(--linea);
  border-radius:999px;padding:5px 16px 5px 5px;transition:box-shadow .2s,transform .2s,color .2s}
.social-mini a:hover,.mappa-mini a:hover{box-shadow:var(--ombra);transform:translateY(-2px);color:var(--rosa-scuro)}
.social-mini span,.mappa-mini span{width:26px;height:26px;border-radius:50%;flex:none;background:var(--rosa-scuro);
  display:flex;align-items:center;justify-content:center}
.social-mini svg,.mappa-mini svg{width:14px;height:14px;fill:#fff}

/* scheda contatto */
.scheda-contatto{background:var(--bianco);border:1px solid var(--linea);border-radius:20px;
  padding:34px 36px;box-shadow:var(--ombra);display:flex;flex-direction:column;align-items:flex-start}

/* ---------- piede ---------- */
.piede{background:var(--marrone-cupo);color:#E4D9CB;padding:70px 0 30px}
.piede-colonne{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:52px;align-items:start}
.piede-logo{width:82px;margin-bottom:20px}
.piede p{font-size:15px;color:#BFAF9E;max-width:32em}
.piede h4{font-family:var(--display);font-variation-settings:var(--wonk),'opsz' 36;
  font-style:italic;font-weight:700;font-size:20px;color:#fff;margin-bottom:16px}
.piede ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.piede li{font-size:15px}
.piede a:hover{color:var(--oro-chiaro)}
.piede-contatti{font-size:15px;line-height:1.75;color:#BFAF9E}
.piede-contatti a{color:var(--oro-chiaro);font-weight:500}
.social{display:flex;gap:12px;margin-top:20px}
.social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.social a:hover{background:var(--rosa-scuro)}
.social svg{width:19px;height:19px;fill:#fff}
.chiusura{border-top:1px solid rgba(255,255,255,.13);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#A08F7D}
.chiusura a:hover{color:var(--oro-chiaro)}
.firma{font-family:var(--display);font-variation-settings:var(--wonk),'opsz' 30;
  font-style:italic;font-weight:600;font-size:16px;color:var(--oro-chiaro)}

/* ---------- banner cookie ---------- */
.cookie{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:120;
  background:var(--bianco);border:1px solid var(--linea);border-radius:20px;
  box-shadow:var(--ombra-alta);padding:26px 28px;
  max-width:580px;margin-inline:auto;
  display:none;flex-direction:column;gap:14px;
}
.cookie.visibile{display:flex;animation:sali .4s ease}
@keyframes sali{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cookie h2{font-family:var(--display);font-variation-settings:var(--wonk),'opsz' 36;
  font-style:italic;font-weight:700;font-size:22px;color:var(--rosa)}
.cookie p{font-size:15px;color:var(--marrone-med)}
.cookie p a{color:var(--rosa-scuro);text-decoration:underline;text-underline-offset:3px}
.cookie-bottoni{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.cookie .btn{padding:11px 22px;font-size:14.5px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .willkommen,.karte{grid-template-columns:1fr;gap:42px}
  .filiali{grid-template-columns:1fr}
  .banner{flex-basis:calc((100% - 16px)/2)}
  .galleria figure{flex-basis:calc((100% - 16px)/2)}
  .storia{grid-template-columns:1fr;gap:34px}
  .storia-foto{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
  .carta-griglia{columns:1}
  .piede-colonne{grid-template-columns:1fr;gap:38px}
  .karte-foto{transform:none;max-width:440px}
  .menu{display:none;position:absolute;top:78px;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:18px;background:var(--crema);padding:24px 26px 28px;
    border-bottom:1px solid var(--linea);box-shadow:var(--ombra)}
  .menu.aperto{display:flex}
  .hamburger{display:flex}
  section.blocco{padding:66px 0}
  .blocco.intro-carta{padding:54px 0 22px}
  .blocco.carta-sezione{padding-top:32px}
  .slider{height:min(70vh,540px)}
  .slider-testo{padding:0 40px 60px 46px}
  .fascia-marchio{padding:22px 0}
  .fascia-marchio .fm-wrap{gap:24px}
  .fascia-marchio img{height:68px}
}
@media (max-width:560px){
  .striscia{gap:12px}
  .banner{flex-basis:calc((100% - 12px)/2)}
  .banner b{font-size:16px;padding:22px 12px 10px}
  .galleria figure{flex-basis:100%}
  .trovarci-logo{height:80px}
  .numeri{gap:30px}
  .numero b{font-size:32px}
  .freccia{display:none}
  .slider-testo{padding:0 22px 66px 24px}
  /* sul telefono il testo occupa quasi tutta la foto: la sfumatura
     deve salire piu' in alto, altrimenti le scritte non si leggono */
  .velo{background:linear-gradient(0deg, rgba(45,30,24,.70) 0%, rgba(45,30,24,.48) 42%,
    rgba(45,30,24,.20) 72%, rgba(45,30,24,0) 100%)}
  .filiale > img{height:190px}
  .cookie{left:10px;right:10px;bottom:10px;padding:22px 20px}
  .marchio{font-size:21px;gap:9px}
  .marchio-logo{width:38px;height:38px;border-radius:10px}
  .marchio-logo img{height:26px}
  .scheda-contatto{padding:26px 24px}
  .fascia-marchio{padding:18px 0}
  .fascia-marchio .fm-wrap{gap:16px;padding:0 18px}
  .fascia-marchio img{height:54px}
  .fascia-marchio .fm-nome{font-size:25px}
  .fascia-marchio .fm-sotto{font-size:11px;letter-spacing:.12em;margin-top:6px}
  .libro-comandi{gap:8px}
  .libro-comandi button{padding:9px 15px;font-size:14px;white-space:nowrap}
  .libro-conta{min-width:44px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

@media print{
  .testata,.piede,.cookie,.slider,.freccia,.punti{display:none!important}
  body{background:#fff;color:#000}
}