/* =====================================================================
   Dale's Cake — Design-System  ·  NGenAro Web
   Warm-Handmade Editorial: englisches Tea-Garden-Café mit texanischer Seele.
   Signatur: botanischer Linien-Divider (Secret Garden) + Caveat-Akzent.
   ===================================================================== */

:root{
  --cream:#F8F4ED; --warm-white:#FFFDF9; --paper:#F2EBDF;
  --terracotta:#C97B63; --terracotta-dk:#A85F49;
  --sage:#8A9B7A; --sage-dk:#6E7E60;
  --brass:#C9A24B; --ink:#2E2A26; --ink-soft:#5A524A;
  --line:#E2D8C8;
  --shadow:0 18px 50px -28px rgba(46,42,38,.45);
  --r:14px; --r-lg:26px;
  --maxw:1200px; --gut:clamp(20px,5vw,64px);
  --display:"Fraunces",Georgia,serif;
  --body:"Inter",system-ui,sans-serif;
  --hand:"Caveat",cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--terracotta-dk); text-decoration:none}
a:hover{color:var(--terracotta)}
h1,h2,h3{font-family:var(--display); font-weight:500; line-height:1.08; letter-spacing:-.01em; margin:0}
h1{font-size:clamp(2.6rem,6.4vw,5rem); font-weight:400}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
p{margin:0 0 1rem}
.muted{color:var(--ink-soft)}
.small{font-size:.86rem}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); width:100%}

/* eyebrow / Akzent */
.eyebrow{font-family:var(--body); text-transform:uppercase; letter-spacing:.22em;
  font-size:.74rem; font-weight:600; color:var(--sage-dk); margin:0 0 .8rem}
.hand{font-family:var(--hand); color:var(--terracotta); font-size:1.5em; line-height:1}

/* Skip + Focus (Barrierefreiheit) */
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:200}
.skip:focus{left:8px; top:8px}
a:focus-visible,button:focus-visible{outline:3px solid var(--sage); outline-offset:3px; border-radius:6px}

/* ---------- Buttons (NGenAro: .ngx-go, kein "btn") ---------- */
.ngx-go,.ngx-go-ghost{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:.98rem; line-height:1;
  padding:.85em 1.5em; border-radius:999px; border:1.5px solid transparent;
  transition:transform .25s ease, background .25s ease, color .25s, box-shadow .25s;
}
.ngx-go{background:var(--terracotta); color:#fff; box-shadow:0 10px 26px -14px var(--terracotta-dk)}
.ngx-go:hover{background:var(--terracotta-dk); color:#fff; transform:translateY(-2px)}
.ngx-go-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.ngx-go-ghost:hover{background:var(--ink); color:var(--cream)}
.linkbtn{background:none;border:0;color:inherit;cursor:pointer;font:inherit;text-decoration:underline;padding:0}

/* ---------- Header / Nav ---------- */
.site-head{position:sticky; top:0; z-index:100; background:rgba(248,244,237,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.head-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px}
.brand{display:flex; flex-direction:column; line-height:.95}
.brand-mark{font-family:var(--display); font-size:1.6rem; color:var(--ink)}
.brand-sub{font-family:var(--hand); font-size:1.15rem; color:var(--terracotta); margin-top:-.1em}
.brand img{height:42px; width:auto; display:block}
.primary-nav ul{display:flex; align-items:center; gap:.4rem 1.05rem; list-style:none; margin:0; padding:0}
.primary-nav a{color:var(--ink); font-weight:500; font-size:.92rem; position:relative; padding:.3em 0; white-space:nowrap}
.primary-nav a:hover{color:var(--terracotta-dk)}
.primary-nav a[aria-current]{color:var(--terracotta-dk)}
.primary-nav a:not(.ngx-go)::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--terracotta); transition:width .3s}
.primary-nav a:not(.ngx-go):hover::after,.primary-nav a[aria-current]::after{width:100%}
.nav-cta{margin-left:.4rem}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle span{width:26px; height:2px; background:var(--ink); transition:.3s}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero (asymmetrisch, Bild dominiert) ---------- */
.hero{position:relative; display:grid; grid-template-columns:1.4fr 1fr; min-height:clamp(440px,62vh,600px)}
.hero-media{position:relative; overflow:hidden}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(46,42,38,.18), transparent 55%)}
.hero-panel{background:var(--warm-white); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,5vw,4.5rem); position:relative; z-index:2}
.hero-panel .hand{font-size:2rem; display:block; margin-bottom:.3rem}
.hero-panel p.lead{font-size:1.12rem; color:var(--ink-soft); max-width:34ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem}
/* Überlappung: Panel schiebt sich über das Bild */
@media (min-width:921px){ .hero-panel{margin-left:-90px; box-shadow:var(--shadow); border-radius:var(--r-lg) 0 0 var(--r-lg)} }

/* ---------- Sektionen ---------- */
.section{padding:clamp(2.25rem,4.5vw,4rem) 0}
.section.alt{background:var(--warm-white)}
.section.paper{background:var(--paper)}

/* sticky Torten-Subnavigation – als Banner mit Pillen */
.subnav{position:sticky; top:73px; z-index:90; background:var(--sage); box-shadow:0 6px 18px -14px rgba(46,42,38,.5)}
.subnav ul{display:flex; flex-wrap:wrap; gap:.5rem .7rem; align-items:center; justify-content:center; list-style:none; margin:0 auto; padding:.65rem var(--gut); max-width:var(--maxw)}
.subnav a{font-family:var(--body); font-weight:600; font-size:.92rem; color:#fff; padding:.42em 1.05em; border-radius:999px; white-space:nowrap; transition:background .25s, color .25s}
.subnav a:hover,.subnav a.active{background:var(--warm-white); color:var(--sage-dk)}
@media (max-width:920px){ .subnav ul{justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch} }
section[id]{scroll-margin-top:138px}
.sec-head{max-width:60ch; margin-bottom:clamp(1.3rem,2.6vw,2rem)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head p{color:var(--ink-soft); font-size:1.08rem}

/* botanischer Divider */
.leaf-divider{width:100%; height:38px; color:var(--sage); display:block; margin:0}
.leaf-divider path,.leaf-divider line{stroke:currentColor; stroke-width:1.4; fill:none; opacity:.65}
.leaf-divider .leaf path{fill:var(--sage); stroke:none; opacity:.5}

/* ---------- Karten: Tortenarten (Thumbnail + Link) ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:clamp(1rem,2.4vw,1.8rem)}
.card{position:relative; display:block; background:var(--warm-white); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); color:var(--ink); isolation:isolate}
.card .thumb{aspect-ratio:4/3; overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .thumb img{transform:scale(1.07)}
.card-body{padding:1.2rem 1.3rem 1.4rem}
.card-body h3{margin-bottom:.35rem}
.card-body p{margin:0; color:var(--ink-soft); font-size:.96rem}
.card .go{margin-top:.9rem; display:inline-flex; align-items:center; gap:.4em; font-weight:600; color:var(--terracotta-dk)}
.card .go::after{content:"→"; transition:transform .3s}
.card:hover .go::after{transform:translateX(5px)}
/* großes Hervorhebungs-Card */
.cards .card.feature{grid-column:span 2}
@media (max-width:640px){.cards .card.feature{grid-column:span 1}}

/* ---------- Zig-Zag Feature-Reihen ---------- */
.zig{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
.zig + .zig{margin-top:clamp(1.8rem,3.5vw,3rem)}
.zig .zig-media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}
.zig .zig-media img{width:100%; height:clamp(240px,32vw,400px); object-fit:cover}
.zig:nth-child(even) .zig-media{order:2}
.zig .zig-text .eyebrow{color:var(--terracotta)}

/* ---------- Masonry-Galerie ---------- */
.masonry{column-count:3; column-gap:clamp(.8rem,1.6vw,1.2rem)}
@media (max-width:900px){.masonry{column-count:2}}
@media (max-width:520px){.masonry{column-count:1}}
.masonry figure{break-inside:avoid; margin:0 0 clamp(.8rem,1.6vw,1.2rem); position:relative;
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.masonry img{width:100%; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.masonry figure::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(46,42,38,.55),transparent 45%);
  opacity:0; transition:opacity .4s}
.masonry figcaption{position:absolute; left:14px; bottom:12px; color:#fff; font-family:var(--display);
  font-size:1.05rem; opacity:0; transform:translateY(8px); transition:.4s; z-index:2}
.masonry figure:hover img{transform:scale(1.06)}
.masonry figure:hover::after,.masonry figure:hover figcaption{opacity:1; transform:none}

/* ---------- Preis-Tabelle ---------- */
.price-list{background:var(--warm-white); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden}
.price-row{display:grid; grid-template-columns:1fr auto; gap:.4rem 1.2rem; align-items:baseline;
  padding:1rem clamp(1.2rem,3vw,2rem); border-bottom:1px solid var(--line)}
.price-row:last-child{border-bottom:0}
.price-row .name{font-family:var(--display); font-size:1.12rem}
.price-row .meta{grid-column:1; color:var(--ink-soft); font-size:.9rem; margin-top:-.2rem}
.price-row .amt{font-weight:600; color:var(--terracotta-dk); white-space:nowrap; font-size:1.05rem}
.price-note{margin-top:1rem; color:var(--ink-soft); font-size:.9rem}

/* ---------- Bewertungen ---------- */
.ratings{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center}
.rating{background:var(--warm-white); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.5rem; text-align:center; min-width:150px}
.rating .stars{color:var(--brass); font-size:1.1rem; letter-spacing:.1em}
.rating .num{font-family:var(--display); font-size:1.9rem; line-height:1; margin:.2rem 0}
.rating .src{font-size:.82rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.12em}

/* ---------- Info-Bänder (Öffnungszeiten, Lieferung) ---------- */
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(1rem,2.4vw,2rem)}
.info-card{background:var(--warm-white); border-radius:var(--r); padding:1.6rem 1.7rem; box-shadow:var(--shadow)}
.info-card h3{margin-bottom:.7rem}
.hours-line{display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; border-bottom:1px dotted var(--line)}
.hours-line:last-of-type{border-bottom:0}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem}
.chip{border:1.5px solid var(--sage); color:var(--sage-dk); border-radius:999px; padding:.35em .9em; font-size:.9rem; font-weight:500}
span.chip{cursor:default}
a.chip:hover{background:var(--sage); color:#fff}

/* Lieferservice-Banner */
.deliveryband{background:linear-gradient(135deg,var(--terracotta),var(--terracotta-dk)); color:#fff}
.deliveryband .wrap{display:grid; gap:1rem; text-align:center; padding-block:clamp(2.25rem,4.5vw,3.5rem)}
.deliveryband .eyebrow{color:rgba(255,255,255,.85)}
.deliveryband h2{color:#fff}
.deliveryband .lead{color:rgba(255,255,255,.92); max-width:54ch; margin:0 auto; font-size:1.08rem}
.deliv-btns{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:.4rem}
.deliv-btn{display:inline-flex; align-items:center; justify-content:center; min-width:150px; padding:.85em 1.6em;
  border-radius:999px; background:var(--warm-white); color:var(--terracotta-dk); font-weight:700; font-size:1rem;
  transition:transform .25s ease, box-shadow .25s}
.deliv-btn:hover{transform:translateY(-2px); color:var(--terracotta-dk); box-shadow:0 12px 26px -14px rgba(0,0,0,.5)}
.deliv-menu{display:inline-block; margin-top:.3rem; color:#fff; font-weight:600; text-decoration:underline}
.deliv-menu:hover{color:#fff; opacity:.85}
.deliveryband .note{color:rgba(255,255,255,.72); font-size:.84rem; margin:0}

/* ---------- Karte (Klick-to-Load) ---------- */
.mapwrap{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/9; background:var(--paper)}
.map-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem; text-align:center; padding:1.5rem; background:
  linear-gradient(rgba(242,235,223,.85),rgba(242,235,223,.85))}
.mapwrap iframe{width:100%; height:100%; border:0}

/* ---------- Kontakt-Formular ---------- */
.form{display:grid; gap:1rem; max-width:560px}
.form label{font-weight:600; font-size:.92rem; display:block; margin-bottom:.3rem}
.form input,.form textarea{width:100%; font:inherit; padding:.8em 1em; border:1.5px solid var(--line);
  border-radius:var(--r); background:var(--warm-white); color:var(--ink)}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--sage)}
.form .row2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:560px){.form .row2{grid-template-columns:1fr}}

/* ---------- Über-uns / Story ---------- */
.story-quote{font-family:var(--display); font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.3;
  border-left:3px solid var(--terracotta); padding-left:1.2rem; color:var(--ink); max-width:34ch}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink); color:#E9E1D6; padding:clamp(2.5rem,5vw,4rem) 0 1.5rem}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2rem}
.site-foot a{color:#E9E1D6}
.site-foot a:hover{color:var(--brass)}
.foot-brand{font-family:var(--display); font-size:1.5rem; color:#fff; margin-bottom:.6rem}
.foot-h{font-family:var(--body); text-transform:uppercase; letter-spacing:.18em; font-size:.74rem;
  color:var(--brass); margin-bottom:.8rem}
.foot-col p{margin:.15rem 0}
.foot-col p span{color:#bdb2a3; display:inline-block; min-width:120px}
.foot-links{list-style:none; margin:0; padding:0}
.foot-links li{margin:.25rem 0}
.foot-bar{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; align-items:center;
  margin-top:2.5rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.12)}
.foot-bar .muted{color:#a99e8e}
.foot-legal{display:flex; gap:1.2rem; align-items:center}
.site-foot .leaf-divider{color:var(--brass); opacity:.5}
.foot-credit{text-align:center; margin:1.4rem 0 0; color:#a99e8e}
.foot-credit a{color:var(--brass); font-weight:600}
.foot-credit a:hover{color:#fff}

/* ---------- Cookie-Banner ---------- */
.cookie{position:fixed; inset:auto 0 0 0; z-index:150; padding:clamp(.8rem,2vw,1.4rem); display:flex; justify-content:center}
.cookie[hidden]{display:none}
.cookie-card{background:var(--warm-white); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:0 -10px 40px -18px rgba(46,42,38,.6);
  padding:1.3rem 1.5rem; max-width:680px; width:100%}
.cookie-title{font-family:var(--display); font-size:1.2rem; margin-bottom:.3rem}
.cookie-text{font-size:.92rem; color:var(--ink-soft); margin-bottom:1rem}
.cookie-btns{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:flex-end}
.cookie-btns .ck-btn{flex:1 1 170px; max-width:240px; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--body); font-weight:600; font-size:.96rem; line-height:1; padding:.9em 1.4em;
  border-radius:999px; border:0; cursor:pointer; transition:filter .2s, transform .2s}
.cookie-btns .ck-btn:hover{filter:brightness(.94); transform:translateY(-1px)}
.ck-accept{background:var(--terracotta); color:#fff}
.ck-decline{background:var(--sage); color:#fff}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr}
  .hero-media{min-height:46vh}
  .zig{grid-template-columns:1fr}
  .zig:nth-child(even) .zig-media{order:0}
  .nav-toggle{display:flex}
  .primary-nav{position:fixed; inset:74px 0 auto 0; background:var(--warm-white);
    border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .35s ease;
    box-shadow:var(--shadow); max-height:calc(100vh - 74px); overflow:auto}
  .primary-nav.open{transform:none}
  .primary-nav ul{flex-direction:column; align-items:stretch; gap:0; padding:.6rem var(--gut) 1.4rem}
  .primary-nav li{border-bottom:1px solid var(--line)}
  .primary-nav a{display:block; padding:.95rem 0}
  .nav-cta{margin:1rem 0 0}
  .nav-cta a{justify-content:center}
}