/* griffcall.pro — Bäckerei & Konditorei Hamburg — prefix gr- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Nunito+Sans:wght@400;600;700&display=swap');

:root{
  --gr-choc:#4a3528;
  --gr-cocoa:#6b4f3a;
  --gr-crust:#c98a3e;
  --gr-honey:#e8a94d;
  --gr-rose:#e7b7a3;
  --gr-cream:#fbf4e9;
  --gr-paper:#fffaf2;
  --gr-mut:#9a8b7a;
  --gr-line:#efe2cf;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito Sans',sans-serif;color:var(--gr-choc);background:var(--gr-paper);line-height:1.7}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;line-height:1.1}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.gr-wrap{max-width:1160px;margin:0 auto;padding:0 26px}

/* header */
.gr-head{position:sticky;top:0;z-index:50;background:var(--gr-paper);border-bottom:1px solid var(--gr-line)}
.gr-nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.gr-logo{font-family:'Fraunces';font-size:27px;font-weight:600;color:var(--gr-choc);display:flex;align-items:center;gap:10px}
.gr-logo i{font-style:normal;font-size:26px}
.gr-logo span{color:var(--gr-crust)}
.gr-menu{display:flex;gap:32px;list-style:none}
.gr-menu a{color:var(--gr-cocoa);font-weight:600;font-size:15px;transition:.2s}
.gr-menu a:hover,.gr-menu a.gr-active{color:var(--gr-crust)}
.gr-burger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.gr-burger span{width:26px;height:2px;background:var(--gr-choc)}

/* hero */
.gr-hero{padding:80px 0;background:radial-gradient(circle at 80% 20%,#fff3e0,var(--gr-cream))}
.gr-hgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:center}
.gr-pill{display:inline-block;background:#fff;border:1px solid var(--gr-line);color:var(--gr-crust);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:7px 18px;border-radius:30px;margin-bottom:20px}
.gr-hero h1{font-size:clamp(38px,5.4vw,62px);margin-bottom:18px}
.gr-hero h1 em{font-style:italic;color:var(--gr-crust)}
.gr-hero p{font-size:18px;color:var(--gr-cocoa);max-width:480px;margin-bottom:30px}
.gr-hpic{position:relative}
.gr-hpic img{border-radius:24px;box-shadow:0 30px 60px -28px rgba(74,53,40,.4)}
.gr-badge{position:absolute;bottom:-22px;left:-22px;background:var(--gr-choc);color:var(--gr-cream);padding:18px 24px;border-radius:18px;font-family:'Fraunces';font-style:italic;font-size:18px}
.gr-badge b{display:block;font-style:normal;font-size:30px;color:var(--gr-honey)}
.gr-btn{display:inline-block;background:var(--gr-crust);color:#fff;font-weight:700;font-size:16px;padding:15px 32px;border-radius:40px;transition:.25s;border:none;cursor:pointer}
.gr-btn:hover{background:var(--gr-choc);transform:translateY(-2px)}
.gr-btn-out{background:transparent;color:var(--gr-choc);border:1px solid var(--gr-choc);margin-left:10px}
.gr-btn-out:hover{background:var(--gr-choc);color:#fff}

/* sections */
.gr-sec{padding:90px 0}
.gr-soft{background:var(--gr-cream)}
.gr-shead{text-align:center;max-width:640px;margin:0 auto 54px}
.gr-shead .gr-kick{color:var(--gr-crust);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:13px}
.gr-shead h2{font-size:clamp(30px,4.4vw,46px);margin:10px 0 12px}
.gr-shead p{color:var(--gr-mut);font-size:17px}

/* product grid */
.gr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.gr-card{background:var(--gr-paper);border-radius:22px;overflow:hidden;border:1px solid var(--gr-line);transition:.3s}
.gr-card:hover{transform:translateY(-6px);box-shadow:0 24px 46px -22px rgba(74,53,40,.3)}
.gr-card img{height:200px;width:100%;object-fit:cover}
.gr-cbody{padding:24px 26px}
.gr-card h3{font-size:23px;margin-bottom:8px}
.gr-card p{color:var(--gr-mut);font-size:15px}

/* split */
.gr-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.gr-split img{border-radius:24px;box-shadow:0 26px 50px -26px rgba(74,53,40,.35)}
.gr-split h2{font-size:clamp(28px,4vw,42px);margin-bottom:16px}
.gr-split h2 em{font-style:italic;color:var(--gr-crust)}
.gr-split p{color:var(--gr-cocoa);margin-bottom:14px}
.gr-list{list-style:none;margin-top:18px}
.gr-list li{padding:9px 0 9px 34px;position:relative;color:var(--gr-choc)}
.gr-list li::before{content:"🥨";position:absolute;left:0;top:8px;font-size:17px}

/* steps round */
.gr-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.gr-step{text-align:center}
.gr-circle{width:84px;height:84px;border-radius:50%;background:#fff;border:2px dashed var(--gr-crust);display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 16px}
.gr-step h3{font-size:22px;margin-bottom:8px}
.gr-step p{color:var(--gr-mut);font-size:15px}

/* band */
.gr-band{background:var(--gr-choc);color:var(--gr-cream);text-align:center;padding:74px 0}
.gr-band h2{font-size:clamp(28px,4.4vw,44px);margin-bottom:14px}
.gr-band h2 em{font-style:italic;color:var(--gr-honey)}
.gr-band p{color:rgba(251,244,233,.78);max-width:520px;margin:0 auto 28px;font-size:17px}
.gr-band .gr-btn{background:var(--gr-honey);color:var(--gr-choc)}
.gr-band .gr-btn:hover{background:#fff}

/* contact */
.gr-cgrid{display:grid;grid-template-columns:1fr 1fr;gap:54px}
.gr-form{display:flex;flex-direction:column;gap:16px;background:var(--gr-paper);border:1px solid var(--gr-line);padding:34px;border-radius:24px}
.gr-form label{font-weight:700;font-size:14px;margin-bottom:-8px}
.gr-form input,.gr-form textarea{padding:14px 16px;border:1px solid var(--gr-line);border-radius:12px;font-family:inherit;font-size:15px;background:var(--gr-cream)}
.gr-form input:focus,.gr-form textarea:focus{outline:none;border-color:var(--gr-crust)}
.gr-info{display:flex;flex-direction:column;gap:22px}
.gr-iblock{display:flex;gap:16px;align-items:flex-start}
.gr-iico{width:50px;height:50px;border-radius:50%;background:var(--gr-cream);border:1px solid var(--gr-line);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.gr-iblock h4{font-family:'Fraunces';font-size:19px}
.gr-iblock p{color:var(--gr-mut);font-size:15px}
.gr-map{border-radius:18px;overflow:hidden;border:1px solid var(--gr-line);margin-top:8px}
.gr-map iframe{width:100%;height:270px;border:0;display:block}

/* legal */
.gr-legal{max-width:800px;margin:0 auto;padding:74px 0}
.gr-legal h1{font-size:42px;margin-bottom:6px}
.gr-legal .gr-upd{color:var(--gr-mut);margin-bottom:30px;font-style:italic}
.gr-legal h2{font-size:25px;margin:32px 0 12px}
.gr-legal p{color:var(--gr-cocoa);margin-bottom:14px}
.gr-legal ul{margin:0 0 14px 22px;color:var(--gr-cocoa)}
.gr-legal li{margin-bottom:7px}

/* footer */
.gr-foot{background:var(--gr-cream);border-top:1px solid var(--gr-line);color:var(--gr-cocoa);padding:60px 0 26px}
.gr-fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:38px}
.gr-foot .gr-logo{margin-bottom:14px}
.gr-foot h5{color:var(--gr-choc);font-family:'Fraunces';font-size:18px;margin-bottom:14px}
.gr-foot ul{list-style:none}
.gr-foot li{margin-bottom:9px}
.gr-foot a:hover{color:var(--gr-crust)}
.gr-fbot{border-top:1px solid var(--gr-line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--gr-mut)}

/* cookie */
.gr-cookie{position:fixed;left:24px;right:24px;bottom:24px;max-width:540px;background:#fff;color:var(--gr-cocoa);padding:26px;border-radius:22px;box-shadow:0 24px 60px -20px rgba(74,53,40,.4);z-index:200;transform:translateY(170%);transition:.5s;border:1px solid var(--gr-line)}
.gr-cookie.show{transform:translateY(0)}
.gr-cookie h4{font-family:'Fraunces';color:var(--gr-choc);font-size:21px;margin-bottom:8px}
.gr-cookie p{font-size:14px;margin-bottom:14px}
.gr-cats{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.gr-cat{display:flex;align-items:center;gap:10px;font-size:14px}
.gr-cbtns{display:flex;gap:10px;flex-wrap:wrap}
.gr-cookie .gr-btn{padding:11px 22px;font-size:14px}
.gr-cmini{background:transparent;border:1px solid var(--gr-line);color:var(--gr-choc)}

@media(max-width:860px){
  .gr-menu{position:fixed;top:78px;right:0;flex-direction:column;background:var(--gr-paper);width:240px;padding:26px;gap:18px;transform:translateX(110%);transition:.3s;height:calc(100vh - 78px);border-left:1px solid var(--gr-line)}
  .gr-menu.open{transform:translateX(0)}
  .gr-burger{display:flex}
  .gr-hgrid,.gr-grid,.gr-steps,.gr-split,.gr-cgrid,.gr-fgrid{grid-template-columns:1fr}
  .gr-badge{left:10px}
  .gr-btn-out{margin-left:0;margin-top:12px}
}