/* ============ REYS CANDY — geteiltes CSS (Basis: Design v2) ============ */

/* ---- Fonts (self-hosted, cookieless) ---- */
@font-face{ font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/anton-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+2000-206F; }
@font-face{ font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/anton-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA; }
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-400-latin.woff2) format('woff2'); }
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-500-latin.woff2) format('woff2'); }
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-700-latin.woff2) format('woff2'); }
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:800; font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-800-latin.woff2) format('woff2'); }

/* ---- Tokens ---- */
:root{
  --pink:#FF4FA3;
  --cherry:#E32636;
  --vanilla:#FFF3DF;
  --lemon:#FFCE3F;
  --mint:#47D6A5;
  --choc:#2B1016;
  --disp:'Anton', impact, sans-serif;
  --sans:'Schibsted Grotesk', system-ui, sans-serif;
  --pad:clamp(20px,4vw,64px);
}
*{ margin:0; padding:0; box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans); color:var(--choc); background:var(--vanilla);
  font-size:1.06rem; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--choc); color:var(--pink); }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--disp); font-weight:400; text-transform:uppercase; }
img{ max-width:100%; }
button{ font:inherit; color:inherit; }

.wrap{ max-width:1240px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* Zackenkante wie eine aufgerissene Bonbonverpackung */
.rip{ height:26px; margin-bottom:-1px;
  -webkit-mask:conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 50% / 36px 100%;
  mask:conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 50% / 36px 100%;
}

/* Sticker: gekippte Etiketten */
.sticker{
  display:inline-block; font-weight:800; font-size:.86rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--cherry); color:var(--vanilla); border:3px solid var(--choc);
  padding:.5em 1em; transform:rotate(-2.2deg);
}
.sticker--mint{ background:var(--mint); color:var(--choc); }
.sticker--lemon{ background:var(--lemon); color:var(--choc); }

/* Buttons */
.btn{
  display:inline-block; font-weight:800; font-size:1.02rem; letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; background:var(--cherry); color:var(--vanilla);
  border:3px solid var(--choc); padding:1em 1.7em; transform:rotate(-1.2deg);
  cursor:pointer;
}
.btn--choc{ background:var(--choc); }
.btn--sm{ padding:.65em 1.1em; font-size:.95rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn:focus-visible, a:focus-visible, .candy:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:4px solid var(--cherry); outline-offset:4px;
}

/* ---- Topbar ---- */
.bar{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
}
.bar__brand{ font-family:var(--disp); font-size:1.4rem; text-transform:uppercase; text-decoration:none; }
.bar__nav{ display:flex; gap:24px; align-items:center; }
.bar__nav a{ font-weight:700; font-size:.95rem; text-decoration:none; text-transform:uppercase; letter-spacing:.05em; }
.bar__nav a:not(.btn):hover, .bar__nav a.is-active{
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:3px;
}
.bar__nav .btn{ padding:.55em 1em; font-size:.9rem; }
/* Mobile: Links kompakt statt versteckt (Laden/Kontakt waren unter 760px unerreichbar) */
@media (max-width:760px){
  .bar .bar__nav{ gap:12px; }
  .bar .bar__nav a:not(.btn){ display:inline-block; font-size:.78rem; letter-spacing:.03em; }
  .bar .bar__brand{ font-size:1.15rem; }
}

/* Unterseiten: Topbar im Fluss auf Vanille */
.bar--flow{ position:static; border-bottom:3px solid var(--choc); background:var(--vanilla); }
@media (max-width:760px){
  .bar--flow .bar__nav{ gap:14px; }
  .bar--flow .bar__nav a:not(.btn){ display:inline-block; font-size:.82rem; }
}

/* Entwurfs-Marker: vor Livegang loeschen */
.draft{
  position:fixed; z-index:40; bottom:14px; left:14px;
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  background:var(--choc); color:var(--lemon); padding:.4em .8em; opacity:.85;
}

/* ---- Bonbon (eingewickeltes Zaeltli) ---- */
.candy{ display:inline-flex; align-items:center; border:0; background:none; font:inherit; color:inherit; text-decoration:none; }
.candy__end{ width:.62em; height:1.35em; background:var(--c,var(--cherry)); flex:none; }
.candy__end--l{ clip-path:polygon(100% 50%, 0 4%, 32% 50%, 0 96%); }
.candy__end--r{ clip-path:polygon(0 50%, 100% 4%, 68% 50%, 100% 96%); }
.candy__body{
  width:2.5em; height:1.8em; flex:none;
  background:repeating-linear-gradient(-55deg, var(--c,var(--cherry)) 0 .42em, var(--c2,var(--vanilla)) .42em .68em);
  border:3px solid var(--choc);
}
.candy--sm{ font-size:.55rem; }
.candy--sm .candy__body{ border-width:2px; }

/* ---- Seitenkopf fuer Unterseiten ---- */
.pagehead{ padding:clamp(44px,6vw,76px) var(--pad) clamp(28px,4vw,48px); }
.pagehead h1{ font-size:clamp(2.4rem,6.4vw,4.4rem); line-height:1.05; margin-top:18px; }
.pagehead .lead{ margin-top:14px; max-width:36em; font-weight:500; }

/* ---- Preisschild ---- */
.pricetag{
  display:inline-block; font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--vanilla); border:3px solid var(--choc); padding:.35em .7em; transform:rotate(1.6deg);
  font-variant-numeric:tabular-nums;
}

/* ---- Shop: Regalboden ---- */
.floor{ background:var(--pink); position:relative; padding:clamp(56px,8vw,96px) 0 clamp(90px,11vw,140px); }
.floor .rip{ position:absolute; top:0; left:0; right:0; background:var(--vanilla); transform:scaleY(-1); }
.pgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(24px,3.5vw,40px); margin-top:clamp(28px,4vw,48px);
}
.pcard{
  background:var(--vanilla); border:3px solid var(--choc); padding:22px;
  display:flex; flex-direction:column; gap:10px;
}
.pcard:nth-child(odd){ transform:rotate(-.7deg); }
.pcard:nth-child(even){ transform:rotate(.8deg); }
.pcard__visual{ min-height:110px; display:grid; place-items:center; position:relative; }
.pcard__visual .candy{ font-size:2.4rem; }
.pcard__visual img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:3px solid var(--choc); }
.pcard__visual .sold{ position:absolute; top:6px; right:2px; }
.pcard h3{ font-size:1.45rem; line-height:1.05; }
.pcard .desc{ font-size:.95rem; font-weight:500; flex-grow:1; }

/* Zutaten & Nährwerte: aufklappbar auf der Produktkarte (nur wenn gepflegt) */
.pinfo{ border-top:2px dashed var(--choc); padding-top:8px; font-size:.85rem; }
.pinfo summary{
  cursor:pointer; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  list-style:none; display:flex; align-items:center; gap:.5em; min-height:32px;
}
.pinfo summary::-webkit-details-marker{ display:none; }
.pinfo summary::before{ content:'+'; font-size:1.15em; line-height:1; }
.pinfo[open] summary::before{ content:'\2212'; }
.pinfo h4{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  margin:10px 0 2px; opacity:.75;
}
.pinfo p{ white-space:pre-line; font-weight:500; margin:0; }
.pcard__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:4px; }

/* Mengen-Stepper */
.stepper{ display:inline-flex; align-items:stretch; border:3px solid var(--choc); background:var(--vanilla); }
.stepper button{
  width:44px; min-height:44px; border:0; background:none; font-weight:800; font-size:1.2rem; cursor:pointer;
}
.stepper button:hover{ background:var(--lemon); }
.stepper .val{
  min-width:2.4ch; display:grid; place-items:center; font-weight:800;
  font-variant-numeric:tabular-nums; border-left:3px solid var(--choc); border-right:3px solid var(--choc);
  padding:0 .4em;
}

/* ---- Tuete (fix unten rechts) ---- */
#bag{
  position:fixed; right:18px; bottom:18px; z-index:30;
  border:0; background:none; cursor:pointer; color:var(--choc);
  filter:drop-shadow(0 4px 0 rgba(43,16,22,.3)); text-align:center;
}
#bag .bag__paper{
  width:86px; height:96px; margin:0 auto;
  background:var(--lemon); border:3px solid var(--choc);
  clip-path:polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  display:grid; place-items:center;
}
#bag .bag__count{ font-family:var(--disp); font-size:2rem; line-height:1; font-variant-numeric:tabular-nums; }
#bag .bag__lbl{
  display:block; margin-top:6px; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--choc); color:var(--vanilla); padding:.35em .6em; font-variant-numeric:tabular-nums;
}
@media (max-width:760px){ #bag .bag__paper{ width:70px; height:78px; } #bag .bag__count{ font-size:1.6rem; } }
.flyer{ position:fixed; z-index:35; pointer-events:none; }

/* ---- Formulare ---- */
.form{ display:grid; gap:20px; max-width:560px; }
.field label{
  display:block; font-weight:800; font-size:.88rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px;
}
.field input, .field textarea{
  width:100%; border:3px solid var(--choc); background:var(--vanilla);
  padding:.75em .9em; font:inherit; min-height:44px;
}
.field textarea{ min-height:110px; resize:vertical; }
.field .err{ display:none; color:var(--cherry); font-weight:700; font-size:.9rem; margin-top:6px; }
.field.bad input, .field.bad textarea{ border-color:var(--cherry); }
.field.bad .err{ display:block; }
.choice{ display:flex; gap:14px; flex-wrap:wrap; }
.choice label{
  display:flex; align-items:center; gap:10px; border:3px solid var(--choc);
  padding:.8em 1.1em; font-weight:800; text-transform:uppercase; font-size:.92rem; letter-spacing:.05em;
  cursor:pointer; min-height:44px; background:var(--vanilla);
}
.choice label:has(input:checked){ background:var(--lemon); }
.choice input{ width:20px; height:20px; accent-color:var(--cherry); }
.formerr{
  display:none; background:var(--cherry); color:var(--vanilla); border:3px solid var(--choc);
  padding:.8em 1em; font-weight:700;
}
.formerr.show{ display:block; }

/* ---- Kasse ---- */
.kasse__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:start; }
@media (max-width:900px){ .kasse__grid{ grid-template-columns:1fr; } }
.cartrow{
  display:flex; align-items:center; gap:14px; padding:16px 0;
  border-bottom:3px solid rgba(43,16,22,.15); flex-wrap:wrap;
}
.cartrow .candy{ font-size:.9rem; }
.cartrow .nm{ flex:1 1 140px; font-weight:700; }
.cartrow .nm small{ display:block; font-weight:500; opacity:.7; }
.cartrow .line{ font-weight:800; font-variant-numeric:tabular-nums; min-width:6.5ch; text-align:right; }
.cartrow .x{
  width:44px; height:44px; border:3px solid var(--choc); background:var(--vanilla);
  font-weight:800; font-size:1.1rem; cursor:pointer;
}
.cartrow .x:hover{ background:var(--cherry); color:var(--vanilla); }
.summary{
  border:3px solid var(--choc); background:var(--mint); padding:22px; transform:rotate(-.6deg);
}
.summary .row{ display:flex; justify-content:space-between; gap:16px; font-variant-numeric:tabular-nums; padding:.3em 0; font-weight:500; }
.summary .row.total{ font-weight:800; font-size:1.25rem; border-top:3px solid var(--choc); margin-top:10px; padding-top:12px; }
.summary .coupon{ margin-top:16px; border-top:3px solid var(--choc); padding-top:14px; }
.summary .coupon label{ display:block; font-weight:800; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.summary .coupon .cr{ display:flex; gap:8px; flex-wrap:wrap; }
.summary .coupon input{ flex:1 1 120px; min-width:0; border:3px solid var(--choc); background:var(--vanilla); padding:.55em .8em; font:inherit; min-height:44px; }
.summary .coupon .msg{ font-weight:700; font-size:.9rem; margin-top:8px; }
.summary .coupon .msg.bad{ color:var(--cherry); }
/* Guthaben-Check im Shop (nur sichtbar, wenn der Gutschein-Chip offen ist) */
.vbalance{ max-width:520px; margin-top:14px; border:3px solid var(--choc); background:#fff; padding:14px 16px; transform:rotate(-.4deg); }
.vbalance label{ display:block; font-weight:800; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.vbalance .cr{ display:flex; gap:8px; flex-wrap:wrap; }
.vbalance input{ flex:1 1 140px; min-width:0; border:3px solid var(--choc); background:var(--vanilla); padding:.55em .8em; font:inherit; min-height:44px; }
.vbalance .msg{ font-weight:700; font-size:.9rem; margin-top:8px; }
.vbalance .msg.bad{ color:var(--cherry); }
.note{
  display:inline-block; background:var(--lemon); border:3px solid var(--choc);
  padding:.6em 1em; font-weight:700; transform:rotate(-.8deg); font-variant-numeric:tabular-nums;
}

/* ---- Sektionen der Startseite / Laden-Seite ---- */
.hero{
  background:var(--vanilla); position:relative; overflow:hidden;
  min-height:min(100svh,1050px); display:grid; align-content:center; justify-items:center;
  text-align:center; padding:110px var(--pad) 70px;
}
.sign{ width:min(92vw,900px); transform-origin:50% -80px; }
.sign text{ font-family:var(--disp); font-size:118px; letter-spacing:.02em; fill:var(--choc); }
.hero__claim{
  margin-top:10px; font-family:var(--disp); text-transform:uppercase;
  font-size:clamp(2rem,5.4vw,3.6rem); line-height:1;
  background:var(--pink); border:4px solid var(--choc); color:var(--choc);
  padding:.28em .55em .22em; transform:rotate(-1.6deg);
}
.hero__sub{ margin-top:26px; max-width:34em; font-weight:500; font-size:clamp(1.02rem,1.5vw,1.22rem); }
.hero__cta{ margin-top:34px; }
.hero__hint{ display:block; margin-top:14px; font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.65; }
.rain{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.rain .candy{ position:absolute; cursor:default; }
.hero > :not(.rain){ position:relative; z-index:1; }

.sortiment{ background:var(--pink); position:relative; padding:clamp(80px,10vw,140px) 0; }
.sortiment .rip{ position:absolute; top:0; left:0; right:0; background:var(--vanilla); transform:scaleY(-1); }
.sortiment h2{ font-size:clamp(2.4rem,6.4vw,4.6rem); line-height:1.1; max-width:11em; margin-top:18px; }
.sortiment .lead{ margin-top:16px; max-width:33em; font-weight:500; }
.shelf{ margin-top:clamp(44px,6vw,80px); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,4.5vw,60px); }
@media (max-width:820px){ .shelf{ grid-template-columns:1fr; } }
.jar{ text-align:left; }
.jar .candy{ font-size:clamp(2rem,4vw,3rem); cursor:pointer; }
.jar h3{ margin-top:18px; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1; }
.jar p{ margin-top:10px; font-weight:500; max-width:26em; }
.jar .pricetag{ margin-top:12px; }
.jar:nth-child(2n) .pricetag{ transform:rotate(-1.8deg); }
.jar:nth-child(1){ transform:rotate(-.7deg); }
.jar:nth-child(2){ transform:rotate(.9deg); }
.jar:nth-child(3){ transform:rotate(.6deg); }
.jar:nth-child(4){ transform:rotate(-1deg); }

.laden{ background:var(--choc); color:var(--vanilla); position:relative; padding:clamp(80px,10vw,140px) 0; }
.laden .rip{ position:absolute; top:0; left:0; right:0; background:var(--pink); transform:scaleY(-1); }
.laden--after-vanilla .rip{ background:var(--vanilla); }
.laden__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,90px); align-items:center; }
@media (max-width:820px){ .laden__grid{ grid-template-columns:1fr; } }
.laden h2{ font-size:clamp(2.4rem,6.4vw,4.6rem); line-height:1.04; margin-top:18px; }
.laden p{ margin-top:20px; max-width:36em; }
.polaroid{
  background:var(--vanilla); color:var(--choc); padding:16px 16px 20px; transform:rotate(2.4deg);
  max-width:420px; justify-self:center;
}
/* Regal-Stillleben: CSS-gezeichnete Wickelbonbons auf Brettern (kein Foto noetig) */
.polaroid__art{
  aspect-ratio:4/5; background:var(--vanilla); border:3px solid var(--choc);
  display:flex; flex-direction:column; justify-content:space-evenly;
  padding:clamp(16px,3vw,26px) clamp(14px,2.6vw,22px);
}
.polaroid__shelf{
  display:flex; align-items:flex-end; justify-content:space-evenly;
  border-bottom:6px solid var(--choc); padding:0 4px 7px;
}
.polaroid__shelf .candy{ font-size:clamp(1.15rem,3.2vw,1.55rem); }
.polaroid__shelf .candy:nth-child(1){ transform:rotate(-4deg); }
.polaroid__shelf .candy:nth-child(2){ transform:rotate(3deg); }
.polaroid__shelf .candy:nth-child(3){ transform:rotate(-2.5deg); }
.polaroid__shelf:nth-child(2) .candy:nth-child(1){ transform:rotate(2.5deg); }
.polaroid__shelf .pricetag{ font-size:.68rem; }
.polaroid__cap{ margin-top:12px; font-weight:700; text-align:center; font-size:.95rem; }

.besuch{ background:var(--mint); position:relative; padding:clamp(80px,10vw,140px) 0 clamp(90px,11vw,150px); }
.besuch .rip{ position:absolute; top:0; left:0; right:0; background:var(--choc); transform:scaleY(-1); }
.besuch h2{ font-size:clamp(2.4rem,6.4vw,4.6rem); line-height:1.04; margin-top:18px; max-width:12em; }
.facts{ margin-top:clamp(36px,5vw,60px); display:flex; gap:clamp(18px,3vw,40px); flex-wrap:wrap; }
.fact{ background:var(--vanilla); border:3px solid var(--choc); padding:20px 24px; min-width:230px; }
.fact:nth-child(1){ transform:rotate(-1.4deg); }
.fact:nth-child(2){ transform:rotate(1.1deg); }
.fact:nth-child(3){ transform:rotate(-.8deg); }
.fact .k{ display:block; font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.fact .v{ display:block; margin-top:8px; font-size:1.15rem; font-weight:700; }
.fact .v a{ text-decoration-thickness:3px; text-underline-offset:4px; }
.besuch__cta{ margin-top:clamp(36px,5vw,54px); display:flex; gap:18px; flex-wrap:wrap; align-items:center; }

/* ---- Textseiten (Impressum, Datenschutz) ---- */
.prose{ max-width:46em; padding-bottom:clamp(60px,8vw,100px); }
.prose h2{ font-size:1.5rem; margin:1.8em 0 .5em; }
.prose p{ margin:.8em 0; }
.prose ul{ margin:.8em 0 .8em 1.3em; }
.prose li{ margin:.3em 0; }
.prose .addr{ font-style:normal; font-weight:700; }

/* ---- Footer ---- */
footer{ background:var(--choc); color:var(--vanilla); padding:40px 0 60px; }
.foot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.92rem; font-weight:500; }
.foot a{ text-underline-offset:4px; }
.foot .mut{ opacity:.65; }

/* ---- Motion ---- */
.pop{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .pop{ opacity:1; }
  html{ scroll-behavior:auto; }
}