/* ============================================================
   Giotto — Caffè & Cucina
   Shared stylesheet
   ============================================================ */

:root{
  --terracotta:#C1502E;
  --terracotta-dark:#9E3E22;
  --cream:#FBF6EE;
  --cream-dim:#F3ECE0;
  --dark:#2B211A;
  --dark-soft:#3A2E24;
  --green:#4B6B3E;
  --gray:#8A8078;
  --border:#E7DECF;
  --white:#ffffff;
  --maxw:1160px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--dark);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4,.logo,.display{
  font-family:'Fraunces','Georgia',serif;
  font-style:normal;
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.1;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--terracotta);color:#fff;
  padding:14px 26px;border-radius:2px;
  font-size:14px;font-weight:600;letter-spacing:0.02em;
  border:none;cursor:pointer;transition:background .2s,transform .1s;
}
.btn:hover{background:var(--terracotta-dark);}
.btn:active{transform:scale(.98);}
.btn-outline{
  background:transparent;border:1px solid var(--dark);color:var(--dark);
}
.btn-outline:hover{background:var(--dark);color:var(--cream);}
.btn-light{background:var(--cream);color:var(--dark);}
.btn-light:hover{background:#fff;}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(251,246,238,0.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav .logo{font-size:24px;color:var(--dark);}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--dark);
  position:relative;transition:color .2s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-6px;width:0;height:1.5px;
  background:var(--terracotta);transition:width .25s;
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{margin-left:6px;}
.nav-toggle{display:none;background:none;border:none;font-size:24px;color:var(--dark);cursor:pointer;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:82vh;
  display:flex;align-items:center;
  padding:60px 0 80px;
  overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr 0.95fr;
  gap:56px;align-items:center;width:100%;
}
.hero-eyebrow{
  display:inline-block;font-size:12px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--terracotta);
  margin-bottom:22px;
}
.hero h1{font-size:clamp(44px,6.4vw,82px);margin-bottom:24px;}
.hero h1 .accent{color:var(--terracotta);}
.hero p{
  font-size:18px;color:var(--dark-soft);max-width:440px;
  margin-bottom:34px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-visual{
  position:relative;aspect-ratio:4/5;border-radius:4px;
  background:linear-gradient(150deg,var(--dark) 0%,var(--dark-soft) 100%);
  overflow:hidden;display:flex;align-items:flex-end;
}
.hero-visual .badge-float{
  position:absolute;top:24px;right:24px;
  background:var(--cream);color:var(--dark);
  padding:10px 16px;border-radius:2px;font-size:12px;font-weight:600;
  letter-spacing:0.02em;
}
.hero-visual-inner{padding:32px;color:var(--cream);}
.hero-visual-inner .k{font-family:'Fraunces',serif;font-size:56px;line-height:1;}
.hero-visual-inner .kl{font-size:13px;color:#C9BFB2;letter-spacing:0.14em;text-transform:uppercase;margin-top:8px;}
.hero-scoops{
  position:absolute;inset:0;opacity:0.14;
  background-image:radial-gradient(circle at 30% 30%,var(--terracotta) 0,transparent 42%),radial-gradient(circle at 70% 60%,var(--green) 0,transparent 40%);
}

/* ---------- Sections ---------- */
section{padding:96px 0;}
.section-head{max-width:560px;margin-bottom:56px;}
.section-head .eyebrow{
  font-size:12px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--terracotta);display:block;margin-bottom:16px;
}
.section-head h2{font-size:clamp(32px,4.2vw,48px);margin-bottom:18px;}
.section-head p{font-size:17px;color:var(--dark-soft);}

/* ---------- Feature cards ---------- */
.features{background:var(--white);}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);}
.feature{
  padding:44px 36px;border-right:1px solid var(--border);
  transition:background .25s;
}
.feature:last-child{border-right:none;}
.feature:hover{background:var(--cream);}
.feature .fi{font-size:26px;margin-bottom:22px;}
.feature h3{font-size:22px;margin-bottom:12px;}
.feature p{font-size:15px;color:var(--dark-soft);}

/* ---------- Split / order promo ---------- */
.split{background:var(--dark);color:var(--cream);}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split .eyebrow{color:var(--terracotta);}
.split h2{font-size:clamp(32px,4.2vw,50px);margin-bottom:22px;color:var(--cream);}
.split p{font-size:17px;color:#C9BFB2;margin-bottom:22px;}
.split ul{list-style:none;margin-bottom:34px;}
.split li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:15px;color:#E4DCCF;}
.split li .c{color:var(--terracotta);font-weight:700;}
.phone-mock{
  background:var(--cream);border-radius:22px;padding:10px;
  max-width:290px;margin:0 auto;box-shadow:0 30px 60px rgba(0,0,0,0.35);
}
.phone-screen{background:#fff;border-radius:14px;overflow:hidden;}
.pm-head{padding:14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.pm-head .t{font-family:'Fraunces',serif;font-size:13px;}
.pm-chip{background:var(--dark);color:var(--cream);font-size:9px;padding:4px 8px;border-radius:2px;}
.pm-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);}
.pm-row .n{font-family:'Fraunces',serif;font-size:12px;}
.pm-row .p{font-size:10px;color:var(--gray);}
.pm-bar{background:var(--dark);color:var(--cream);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;font-size:11px;}
.pm-bar .go{background:var(--terracotta);color:#fff;padding:6px 12px;border-radius:2px;font-size:10px;}

/* ---------- Menu preview ---------- */
.menu-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;}
.menu-cat h3{font-size:24px;margin-bottom:8px;padding-bottom:16px;border-bottom:2px solid var(--terracotta);display:inline-block;}
.menu-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--border);}
.menu-line .ml-name{font-weight:500;font-size:16px;}
.menu-line .ml-desc{font-size:13px;color:var(--gray);margin-top:3px;}
.menu-line .ml-dots{flex:1;border-bottom:1px dotted var(--border);transform:translateY(-4px);}
.menu-line .ml-price{font-family:'Fraunces',serif;font-weight:600;color:var(--terracotta-dark);white-space:nowrap;}

/* ---------- Locations ---------- */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.loc-card{
  background:var(--white);border:1px solid var(--border);border-radius:4px;
  padding:38px 34px;transition:transform .2s,box-shadow .2s;
}
.loc-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(43,33,26,0.08);}
.loc-card .tag{font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--terracotta);}
.loc-card h3{font-size:26px;margin:10px 0 18px;}
.loc-row{display:flex;gap:12px;padding:8px 0;font-size:15px;color:var(--dark-soft);align-items:flex-start;}
.loc-row .li{color:var(--terracotta);width:20px;flex:0 0 20px;}
.loc-card .loc-actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--terracotta);color:#fff;text-align:center;}
.cta-band h2{font-size:clamp(30px,4vw,46px);margin-bottom:18px;color:#fff;}
.cta-band p{font-size:18px;color:#F6E4DC;margin-bottom:32px;max-width:520px;margin-left:auto;margin-right:auto;}

/* ---------- Footer ---------- */
footer{background:var(--dark);color:#C9BFB2;padding:64px 0 32px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:48px;}
footer .logo{font-size:26px;color:var(--cream);margin-bottom:14px;}
footer p{font-size:14px;line-height:1.7;max-width:280px;}
.foot-col h4{font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--cream);margin-bottom:16px;font-family:'Inter',sans-serif;font-weight:600;}
.foot-col a{display:block;font-size:14px;padding:6px 0;color:#C9BFB2;transition:color .2s;}
.foot-col a:hover{color:var(--terracotta);}
.foot-bottom{border-top:1px solid #43372C;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#8A8078;}

/* ---------- Page header (subpages) ---------- */
.page-head{padding:72px 0 48px;background:var(--white);border-bottom:1px solid var(--border);}
.page-head .eyebrow{font-size:12px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--terracotta);display:block;margin-bottom:16px;}
.page-head h1{font-size:clamp(38px,5vw,60px);}
.page-head p{font-size:18px;color:var(--dark-soft);max-width:560px;margin-top:16px;}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .nav-links{
    position:fixed;top:63px;left:0;right:0;
    background:var(--cream);flex-direction:column;gap:0;
    padding:8px 0;border-bottom:1px solid var(--border);
    transform:translateY(-120%);transition:transform .3s;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links a{padding:14px 28px;width:100%;}
  .nav-links a::after{display:none;}
  .nav-toggle{display:block;}
  .hero-grid,.split-grid,.foot-grid{grid-template-columns:1fr;gap:40px;}
  .hero-visual{aspect-ratio:16/11;order:-1;}
  .feature-grid{grid-template-columns:1fr;}
  .feature{border-right:none;border-bottom:1px solid var(--border);}
  .feature:last-child{border-bottom:none;}
  .menu-cats,.loc-grid{grid-template-columns:1fr;gap:32px;}
  section{padding:64px 0;}
}
@media(max-width:480px){
  .wrap,.nav-inner{padding-left:20px;padding-right:20px;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{justify-content:center;}
}

/* ============================================================
   Erweiterungen — ilpizzaiolo-inspirierte Sektionen & Legal
   ============================================================ */

/* ---------- Standort-Blöcke (großflächig, wie ilpizzaiolo) ---------- */
.loc-blocks{display:grid;gap:2px;background:var(--border);}
.loc-block{
  position:relative;background:var(--dark);color:var(--cream);
  min-height:340px;display:flex;align-items:flex-end;overflow:hidden;
}
.loc-block .loc-bg{position:absolute;inset:0;opacity:0.5;transition:transform .8s ease;}
.loc-block:hover .loc-bg{transform:scale(1.05);}
.loc-block .lb-g{position:absolute;inset:0;background:linear-gradient(0deg,rgba(43,33,26,0.92) 0%,rgba(43,33,26,0.25) 100%);}
.loc-block-inner{position:relative;padding:40px 36px;width:100%;}
.loc-block .lb-tag{font-size:11px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--terracotta);}
.loc-block h3{font-size:30px;margin:8px 0 12px;color:var(--cream);}
.loc-block p{font-size:14px;color:#D8CFC2;margin-bottom:6px;line-height:1.5;}
.loc-block .lb-actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;}
.loc-block-a{background:linear-gradient(135deg,#7a3b1f,#C1502E);}
.loc-block-b{background:linear-gradient(135deg,#2f4a26,#4B6B3E);}

/* ---------- Social / Instagram-Band ---------- */
.social-band{background:var(--white);text-align:center;}
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px;}
.social-tile{aspect-ratio:1;border-radius:4px;overflow:hidden;position:relative;background:var(--cream-dim);display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--terracotta);transition:transform .2s;}
.social-tile:hover{transform:scale(1.03);}
.social-tile.t1{background:#F0DFD5;}
.social-tile.t2{background:#E4E9DC;}
.social-tile.t3{background:#EDE0D0;}
.social-tile.t4{background:#E9DFD4;}

/* ---------- App / QR-Sektion ---------- */
.app-band{background:var(--cream-dim);}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.app-badges{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;}
.app-badge{display:inline-flex;align-items:center;gap:10px;background:var(--dark);color:var(--cream);padding:12px 20px;border-radius:6px;font-size:13px;}
.app-badge .big{font-size:16px;font-weight:600;font-family:'Fraunces',serif;}

/* ---------- Legal-Seiten ---------- */
.legal{padding:64px 0 96px;max-width:820px;}
.legal h2{font-size:26px;margin:40px 0 14px;}
.legal h2:first-of-type{margin-top:0;}
.legal h3{font-size:18px;margin:26px 0 10px;}
.legal p{font-size:15px;color:var(--dark-soft);margin-bottom:14px;line-height:1.7;}
.legal ul{margin:0 0 16px 20px;}
.legal li{font-size:15px;color:var(--dark-soft);margin-bottom:8px;line-height:1.6;}
.legal a{color:var(--terracotta-dark);text-decoration:underline;}
.legal .ph{background:#FBEEE7;border-left:3px solid var(--terracotta);padding:14px 18px;border-radius:0;font-size:14px;color:var(--terracotta-dark);margin:16px 0;}
.legal strong{color:var(--dark);}

@media(max-width:860px){
  .social-grid{grid-template-columns:repeat(2,1fr);}
  .app-grid{grid-template-columns:1fr;gap:32px;}
}