/* ==========================================================================
   Getränke-Lieferdienst Rosenheim – Sortiment, Kategorien und Artikelseiten
   (vom Server gebaut, Shop/pb_hooks/lib/ro_sortiment.js). Ergänzt ro.css.
   ========================================================================== */
.sprung{position:fixed;left:var(--rand);top:-100px;z-index:80;background:var(--helles);color:#160E02;padding:.7em 1em;font:600 .9rem/1 var(--text);text-decoration:none}
.sprung:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}

.rs{padding-block:clamp(26px,4vw,56px) clamp(70px,9vw,120px);display:grid;gap:clamp(18px,2.4vw,28px);justify-items:start}
.rs>*{max-width:100%}
.rs h1{font:900 italic clamp(2.3rem,5.4vw,4.4rem)/.92 var(--display);text-transform:uppercase;text-wrap:balance}
.rs h1.gross{font-size:clamp(2.6rem,7vw,5.4rem)}
.rs h2{font:900 italic clamp(1.5rem,2.8vw,2.2rem)/1 var(--display);text-transform:uppercase}
.rs h2 small{font:500 .8rem/1 var(--mono);color:var(--dunst);letter-spacing:.1em;vertical-align:middle}
.rs-text{color:#D9D4C7;max-width:44em}
.rs-text a,.rs-hinweis a{color:var(--helles)}
.rs-klein{font-size:.85rem;color:var(--dunst)}

.rs-krumen{font:500 .72rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dunst)}
.rs-krumen a{color:var(--dunst);text-decoration:none}
.rs-krumen a:hover{color:var(--helles)}
.rs-krumen i{font-style:normal;opacity:.5;margin-inline:.3em}
.rs-krumen span{color:var(--schaum)}

/* Bilder: freigestellte Flasche auf dunklem Grund, Shopfoto als helle Kachel */
.rs-bild{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 70%,rgba(246,176,46,.16),transparent 62%),var(--flasche)}
.rs-bild img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.rs-flasche img{filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.rs-foto{background:#fff}
.rs-foto img{inset:8%;width:84%;height:84%}
.rs-folgt{font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dunst)}

/* Artikel */
.rs-oben{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:start;width:100%}
.rs-gross{position:sticky;top:calc(var(--navh) + 20px)}
.rs-kauf{display:grid;gap:14px;justify-items:start}
.rs-gebinde{font:500 .9rem/1.4 var(--mono);color:var(--dunst)}
.rs-alter{display:inline-block;margin-left:.6em;padding:.15em .5em;border:1px solid var(--rot);color:var(--rot);border-radius:4px;font-size:.8em}
.rs-preis{font:900 italic 1.3rem/1 var(--display);color:var(--helles)}
.rs-preis em{font:500 .62rem/1 var(--mono);font-style:normal;letter-spacing:.12em;color:var(--schaum);border:1px solid var(--linie);padding:.25em .45em;margin-left:.4em;vertical-align:middle}
.rs-preis-gross{font-size:clamp(2.4rem,5vw,3.4rem)}
.rs-zusatz{font-size:.9rem;color:var(--dunst)}
.rs-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.rs-liefer{display:grid;gap:8px;width:100%;margin-top:6px;padding:clamp(16px,2.2vw,24px);border:1px solid var(--linie);background:rgba(14,27,22,.7);font-size:.95rem;color:#D9D4C7}
.rs-liefer b{display:inline-block;min-width:13.5em;font:500 .72rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--helles)}

.rs-angaben{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(24px,4vw,56px);width:100%;padding-top:clamp(20px,3vw,40px);border-top:1px solid var(--linie)}
.rs-angaben section{display:grid;gap:14px;align-content:start}
.rs-angaben dl{display:grid;gap:0}
.rs-angaben dl div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:16px;padding-block:10px;border-bottom:1px solid var(--linie)}
.rs-angaben dt{font:500 .72rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dunst)}
.rs-angaben dd{margin:0;color:#D9D4C7}
.rs-angaben table{border-collapse:collapse;width:100%}
.rs-angaben th,.rs-angaben td{text-align:left;padding:9px 0;border-bottom:1px solid var(--linie);font-weight:400}
.rs-angaben th{color:var(--dunst)}
.rs-angaben td{text-align:right}
.rs-hinweis{color:#D9D4C7}

/* Karten, Raster, Kategorien */
.rs-aehnlich,.rs-gruppe{display:grid;gap:18px;width:100%;padding-top:clamp(18px,2.6vw,30px)}
.rs-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(12px,1.6vw,20px);width:100%}
.rs-karte{display:grid;gap:12px;align-content:start;text-decoration:none;padding:12px;border:1px solid var(--linie);border-radius:16px;background:rgba(14,27,22,.6);transition:border-color .25s,transform .35s var(--weich)}
.rs-karte:hover{border-color:var(--helles);transform:translateY(-3px)}
.rs-karte-text{display:grid;gap:4px}
.rs-karte b{font:700 1rem/1.25 var(--text)}
.rs-karte small{font-size:.8rem;color:var(--dunst)}
.rs-kats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(12px,1.8vw,22px);width:100%}
.rs-kat{display:grid;gap:10px;align-content:start;padding:12px;border:1px solid var(--linie);border-radius:16px;background:rgba(14,27,22,.6)}
.rs-kat>a{display:grid;gap:12px;text-decoration:none}
.rs-kat b{font:900 italic 1.6rem/1 var(--display);text-transform:uppercase}
.rs-kat>a span{display:grid;gap:4px}
.rs-kat small{font:500 .72rem/1 var(--mono);letter-spacing:.12em;color:var(--dunst)}
.rs-kat>a:hover b{color:var(--helles)}
.rs-sorten{display:flex;flex-wrap:wrap;gap:6px}
.rs-sorten a{display:inline-block;padding:.35em .7em;border:1px solid var(--linie);border-radius:99px;font:500 .72rem/1 var(--mono);letter-spacing:.06em;color:var(--schaum);text-decoration:none}
.rs-sorten a:hover{border-color:var(--helles);color:var(--helles)}
.rs-sorten-oben{margin-bottom:6px}
.rs-gruppe{scroll-margin-top:calc(var(--navh) + 16px)}

@media (max-width:860px){
  .rs-oben,.rs-angaben{grid-template-columns:minmax(0,1fr)}
  .rs-gross{position:relative;top:auto;max-width:420px}
  .rs-liefer b{display:block;min-width:0}
}
@media (max-width:480px){
  .rs-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-karte{padding:10px}
  .rs-angaben dl div{grid-template-columns:minmax(0,1fr);gap:4px}
}