/* Korrekturphase 4: visuelle Verdichtung nach Soll-/Ist-Vergleich. */

/* Allgemeiner Rhythmus: näher an den freigegebenen Gesamtvisualisierungen. */
.section{padding-block:clamp(3.75rem,6vw,6.5rem)}
.section-heading{margin-bottom:1.8rem}
.section-heading p{margin-bottom:0}

/* Desktop-Hero: etwas mehr Luft um das Line-up. */
@media (min-width:641px){
  .hero-layer--products img{transform:translate(2.5%,-1.5%) scale(.91);transform-origin:right bottom}
  .hero-layer--shadow img{transform:translate(2%,-1%) scale(.94);transform-origin:right bottom;opacity:.82}
}

/* Beispielsorten: kompaktere Übersicht, Details erst auf Anforderung. */
.variety-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}
.variety-card{border-radius:1.15rem}
.variety-card__visual{min-height:12.4rem}
.variety-card__ingredients{inset:-10%;width:120%;height:120%;opacity:.36}
.variety-card__product{height:11.25rem;max-width:76%;filter:none}
.variety-card__body{padding:.78rem .82rem .9rem}
.variety-card__body h3{font-size:1.08rem;margin-bottom:.32rem}
.variety-card__body>p:not(.variety-card__teaser){font-size:.78rem;line-height:1.4;margin-bottom:.55rem;min-height:2.2em}
.variety-card__details-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:2rem;padding:.25rem .1rem;border:0;background:transparent;color:var(--cocoa);font-weight:850;font-size:.76rem;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.2em;cursor:pointer}
.variety-card__details-toggle::after{content:"+";margin-left:.4rem;font-size:1rem;text-decoration:none}
.variety-card__details-toggle[aria-expanded="true"]::after{content:"–"}
.variety-card__details{padding-top:.45rem}
.variety-card__details[hidden]{display:none}
.variety-card__teaser{margin:.05rem 0 .45rem;font-size:.78rem!important}
.flavor-tag-list{gap:.28rem}
.flavor-tag{padding:.2rem .42rem;font-size:.68rem}
.variety-card--future{min-height:auto;padding:1.1rem}
.variety-card--future img{width:1.7rem;margin-bottom:.55rem}
.variety-card--future h3{font-size:1.05rem}
.variety-card--future p{font-size:.78rem;margin-bottom:0}

/* Geschmackswelten: eine kompakte Reihe auf großen Bildschirmen. */
.taste-world-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem}
.taste-world-card{min-height:17rem;border-radius:1.25rem}
.taste-world-card__copy{left:.55rem;right:.55rem;bottom:.55rem;padding:.68rem .7rem;border-radius:.75rem}
.taste-world-card__copy h3{font-size:1.08rem;margin-bottom:.28rem}
.taste-world-card__copy p{font-size:.72rem;line-height:1.35}
.taste-world-scroll-hint{display:none;color:var(--muted);font-size:.82rem;margin:-.75rem 0 1rem}

/* Priorität-2-Feinschliff. */
.surprise-visual__products img{transform:scale(.92);transform-origin:center center}
.faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.faq details{min-width:0}

@media (max-width:1199px){
  .variety-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .taste-world-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .taste-world-card{min-height:18rem}
}

@media (max-width:820px){
  .variety-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .faq{grid-template-columns:1fr}
  .taste-world-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .taste-world-card{min-height:17rem}
}

@media (max-width:640px){
  :root{--section:3.35rem}
  .section{padding-block:3.35rem}
  .section-heading{margin-bottom:1.35rem}
  .section-heading h2{font-size:clamp(1.85rem,8.8vw,2.55rem);margin-bottom:.65rem}
  .section-heading p{font-size:.92rem;line-height:1.48}

  /* Mobile Hero: CTA-Block bleibt klar oberhalb der Produktwelt. */
  .hero{min-height:52rem}
  .hero__inner{min-height:52rem}
  .hero::after{height:32.5rem;background:linear-gradient(180deg,#fff8ef 0%,#fff8ef 82%,rgba(255,248,239,.95) 92%,rgba(255,248,239,0) 100%)}
  .hero__copy{padding-top:1.75rem}
  .hero__copy h1{font-size:clamp(2.25rem,10.6vw,3.18rem);max-width:21rem;margin-bottom:.7rem}
  .hero__lead{font-size:.93rem;line-height:1.45;max-width:22rem;margin-bottom:.55rem}
  .reassurance{font-size:.82rem;line-height:1.35;margin:.65rem 0;padding:.55rem .65rem;max-width:22rem}
  .button-row{display:grid;grid-template-columns:1fr;gap:.3rem;max-width:22rem}
  .button-row .btn--primary{min-height:3rem}
  .button-row .btn--secondary{justify-content:flex-start;width:max-content;min-height:2.25rem;padding:.2rem .05rem;border:0;background:transparent;box-shadow:none;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.28em}
  .button-row .btn--secondary:hover{background:transparent;transform:none}
  .hero-layer--products,.hero-layer--ingredients,.hero-layer--shadow{top:32.25rem;bottom:-.2rem}
  .hero-layer--light{top:28rem}
  .hero-layer--products img{transform:scale(.86);transform-origin:center bottom}
  .hero-layer--ingredients img{transform:scale(.9);transform-origin:center bottom;opacity:.88}
  .hero-layer--shadow img{transform:scale(.84);transform-origin:center bottom;opacity:.68}

  /* Vorteile: 2×2 statt vier lange Einzelkarten. */
  .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .benefit-card{padding:.8rem;border-radius:1rem}
  .benefit-card .icon-circle{width:2.25rem;height:2.25rem;margin-bottom:.45rem}
  .benefit-card .icon-circle img{width:1.2rem}
  .benefit-card h3{font-size:.98rem;line-height:1.15;margin-bottom:.35rem}
  .benefit-card p{font-size:.75rem;line-height:1.4}

  /* Beispielsorten: weiterhin gut scannbar, aber deutlich kürzer. */
  .variety-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .variety-card__visual{min-height:11.25rem}
  .variety-card__product{height:10.35rem;max-width:82%}
  .variety-card__body{padding:.65rem .68rem .72rem}
  .variety-card__body h3{font-size:.96rem}
  .variety-card__body>p:not(.variety-card__teaser){font-size:.71rem;min-height:2.7em;margin-bottom:.35rem}
  .variety-card__details-toggle{font-size:.7rem;min-height:1.7rem}
  .variety-card--future{grid-column:1/-1;padding:1rem 1.2rem;min-height:9.5rem}

  /* Geschmackswelten: eine horizontale Swipe-Reihe statt sechs gestapelter Karten. */
  .taste-world-scroll-hint{display:block}
  .taste-world-grid{display:flex;gap:.75rem;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;padding:.15rem .65rem .8rem .05rem;margin-right:-.625rem;scrollbar-width:thin}
  .taste-world-card{flex:0 0 min(76vw,18rem);min-height:21rem;scroll-snap-align:start}
  .taste-world-card__copy{left:.65rem;right:.65rem;bottom:.65rem;padding:.75rem}
  .taste-world-card__copy h3{font-size:1.2rem}
  .taste-world-card__copy p{font-size:.78rem}

  /* Ablauf: 2×2 kompakt. */
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .step{padding:.85rem .65rem .75rem;min-height:11.5rem}
  .step__number{top:.55rem;left:.55rem;width:1.4rem;height:1.4rem;font-size:.7rem}
  .step__icon{width:2.7rem;height:2.7rem;margin:.1rem auto .5rem;border-radius:.8rem}
  .step__icon img{width:1.35rem}
  .step h3{font-size:.94rem;line-height:1.18;margin-bottom:.35rem}
  .step p{font-size:.72rem;line-height:1.38}

  /* Geschmacksfinder: kurze 2×2-Auswahl. */
  .quiz-shell{gap:1.25rem}
  .quiz-copy h2{font-size:clamp(1.85rem,8.8vw,2.45rem)}
  .quiz-copy p{font-size:.9rem;line-height:1.45;margin-bottom:0}
  .quiz-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .quiz-option__body{grid-template-columns:2rem 1fr;column-gap:.5rem;min-height:6.7rem;padding:.7rem;border-radius:1rem}
  .quiz-option__icon{width:2rem;height:2rem;border-radius:.65rem}
  .quiz-option__icon img{width:1.05rem}
  .quiz-option__body strong{font-size:.82rem;line-height:1.2;align-self:center}
  .quiz-option__body>span:last-child{display:none}
  .quiz-result{grid-template-columns:5rem 1fr;gap:.75rem;padding:.75rem}
  .quiz-result__image img{width:4.5rem;height:6.5rem}
  .quiz-result h3{font-size:1.15rem}
  .quiz-result p{font-size:.78rem}

  /* Überraschungsbild und allgemeine Abstände. */
  .surprise-visual__products img{transform:scale(.88);transform-origin:center center}
  .moment-grid{gap:.8rem}
  .moment-card{min-height:27rem}
}

@media (max-width:380px){
  .hero{min-height:52.5rem}
  .hero__inner{min-height:52.5rem}
  .hero-layer--products,.hero-layer--ingredients,.hero-layer--shadow{top:32.75rem}
  .benefit-card h3{font-size:.9rem}
  .benefit-card p{font-size:.7rem}
  .variety-card__visual{min-height:10.4rem}
  .variety-card__product{height:9.55rem}
  .taste-world-card{flex-basis:80vw}
}
/* Verhindert, dass die allgemeine Grid-Regel das native hidden-Attribut überstimmt. */
.quiz-result[hidden]{display:none}
.variety-card__details-toggle:focus-visible,.taste-world-grid:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.early-form .consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:.55rem;color:var(--muted);font-size:.82rem;line-height:1.4}
.early-form .consent input{flex:0 0 auto;margin-top:.15rem;accent-color:var(--orange)}
.early-form .consent a{text-underline-offset:.15em}
.quiz-option__icon{background:transparent}
.quiz-option__icon img{width:2.15rem;height:2.15rem}
@media (max-width:640px){
  .quiz-option__icon img{width:1.8rem;height:1.8rem}
}

/* Cookie-Consent wie in der technischen Vorlage. */
.cookie-banner{
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  z-index:1000;
  background:#321609;
  color:#fff2df;
  box-shadow:0 -16px 42px rgba(43,23,13,.24);
}
.cookie-banner__inner{
  display:flex;
  align-items:center;
  gap:12px;
  width:min(760px,calc(100% - 28px));
  margin:0 auto;
  padding:10px 0;
}
.cookie-banner__text{
  flex:1;
  color:#fff2df;
  font-size:.78rem;
  line-height:1.45;
}
.cookie-banner__text a{
  color:#ffb75e;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:.15em;
}
.cookie-banner__actions{
  display:inline-flex;
  flex:0 0 auto;
  gap:8px;
}
.cookie-btn{
  min-height:40px;
  padding:8px 12px;
  border:0;
  border-radius:999px;
  background:#ea696f;
  color:#fff;
  font:inherit;
  font-size:.8rem;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:background-color var(--ease),transform var(--ease),box-shadow var(--ease);
}
.cookie-btn.secondary{
  background:#f5e6d8;
  color:#2b140d;
}
.cookie-btn:hover{
  background:#d45159;
  transform:translateY(-1px);
}
.cookie-btn.secondary:hover{background:#fff8ef}
.cookie-btn:focus-visible{
  outline:3px solid #ffb75e;
  outline-offset:3px;
}
@media (max-width:980px){
  .cookie-banner__inner{
    align-items:stretch;
    flex-direction:column;
    padding:12px 0;
  }
  .cookie-banner__actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .cookie-btn{width:100%}
}
@media (max-width:380px){
  .cookie-banner__actions{grid-template-columns:1fr}
}