/* =====================================================================
   rio-regalsystem – Bausteine fuer Inhaltsseiten (neues Design ab 11/2026)
   ---------------------------------------------------------------------
   Gemeinsame Bausteine fuer Kontakt, Showroom, Materialproben und alle
   weiteren neu gestalteten Seiten. Alle Farben, Schriften und Abstaende
   kommen aus rio-design.css (:root, --rio-…). Hier keine festen Werte.
   Seitenspezifisches steht in der jeweiligen Seite, nicht hier.

   Aufbau einer Seite:
     <main class="rs">
       {% include '_components/rio/band' with {…} %}   Titelband .rs-band
       <div class="rs-wrap">                             Inhaltsbreite
         <section class="rs-abschnitt">                  Abschnitt (Abstand oben)
           <div class="rs-kopf"><h2>…</h2><p>…</p></div> Abschnittstitel
           .rs-split  .rs-karten  .rs-galerie  .rs-linkliste  .rs-fakten
     .rs-schluss (dunkles Band am Ende)
   Knoepfe: .rs-btn, .rs-btn--rahmen, .rs-btn--hell; Gruppe: .rs-knoepfe
   Formulare: .rs-felder(--2|--6) .rs-feld .rs-fehler .rs-check .rs-falle
   ===================================================================== */

/* ---------- Seite ---------- */
.rs { background: var(--rio-paper); color: var(--rio-ink-soft); font: 400 var(--rio-fs-base)/var(--rio-lh-text) var(--rio-font-body); padding-bottom: var(--rio-section); -webkit-font-smoothing: antialiased; }
.rs *, .rs *::before, .rs *::after { box-sizing: border-box; }
.rs-wrap { max-width: var(--rio-wrap); margin: 0 auto; padding: 0 var(--rio-gutter); }
.rs h1, .rs h2, .rs h3 { font-family: var(--rio-font-head); color: var(--rio-ink); margin: 0; line-height: var(--rio-lh-head); font-weight: 600; }
.rs h1 { font-size: var(--rio-fs-h1); letter-spacing: -.01em; }
.rs h2 { font-size: var(--rio-fs-h2); }
.rs h3 { font-size: var(--rio-fs-base); margin-bottom: var(--rio-space-2); }
.rs p { margin: 0; }
.rs img { display: block; max-width: 100%; height: auto; }
.rs a { color: var(--rio-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rs a:hover { color: var(--rio-red); }
.rs-eyebrow { font: 600 var(--rio-fs-xs)/1.3 var(--rio-font-head); letter-spacing: var(--rio-tracking-caps); text-transform: uppercase; color: var(--rio-muted); margin-bottom: var(--rio-space-3) !important; }
.rs-hinweis { margin-top: var(--rio-space-2) !important; color: var(--rio-muted); font-size: var(--rio-fs-sm); }
.rs-text p + p, .rs-text p + ul, .rs-text ul + p { margin-top: var(--rio-space-4); }
.rs-text ul { margin: 0; padding-left: 1.2em; }
.rs-text li + li { margin-top: var(--rio-space-1); }

/* ---------- Titelband ---------- */
.rs-band { background: var(--rio-band); padding: var(--rio-space-8) 0 var(--rio-space-7); }
.rs-band p:not(.rs-eyebrow) { margin-top: var(--rio-space-3); font-size: var(--rio-fs-lead); color: var(--rio-ink); max-width: 38em; }

/* ---------- Abschnitte ---------- */
.rs-abschnitt { padding-top: var(--rio-section); }
.rs-abschnitt--linie { margin-top: var(--rio-section); padding-top: var(--rio-space-7); border-top: 1px solid var(--rio-line); }
.rs-kopf { max-width: 40em; margin-bottom: var(--rio-space-6); }
.rs-kopf h2::before { content: ""; display: block; width: 36px; height: var(--rio-ply-h); margin-bottom: var(--rio-space-4); background: var(--rio-ply); }
.rs-kopf p { margin-top: var(--rio-space-3); }

/* ---------- Fakten: Adresse, Oeffnungszeiten, Kontakt ---------- */
.rs-fakten { display: grid; gap: var(--rio-space-6); padding: var(--rio-space-7) 0; }
@media (min-width: 720px) { .rs-fakten { grid-template-columns: repeat(3, 1fr); } }
.rs-fakten dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
.rs-fakten dt { color: var(--rio-muted); }
.rs-fakten dd { margin: 0; color: var(--rio-ink); }
.rs-zeiten .ist-heute { font-weight: 600; }

/* ---------- Bilder ---------- */
.rs-foto { margin: 0; }
.rs-foto img, .rs-bild { width: 100%; object-fit: cover; }
.rs-foto img { aspect-ratio: 16 / 9; }
.rs-foto--3-2 img { aspect-ratio: 3 / 2; }
.rs-foto--4-3 img { aspect-ratio: 4 / 3; }
.rs-foto figcaption { margin-top: var(--rio-space-2); font-size: var(--rio-fs-sm); color: var(--rio-muted); }

/* ---------- Text und Bild nebeneinander ---------- */
.rs-split { display: grid; gap: var(--rio-space-6); align-items: center; }
@media (min-width: 900px) {
  .rs-split { grid-template-columns: 1fr 1fr; gap: var(--rio-space-8); }
  .rs-split--umgekehrt > :first-child { order: 2; }
  .rs-split--oben { align-items: start; }
}
.rs-split .rs-kopf { margin-bottom: var(--rio-space-4); }

/* ---------- Liste mit Links (z. B. Regalarten) ---------- */
.rs-linkliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--rio-space-6); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rs-linkliste li { border-top: 1px solid var(--rio-line); }
.rs-linkliste a { display: flex; justify-content: space-between; gap: var(--rio-space-3); padding: var(--rio-space-3) 0; color: var(--rio-ink); text-decoration: none; }
.rs-linkliste a::after { content: "→"; color: var(--rio-muted); transition: transform .15s; }
.rs-linkliste a:hover::after { transform: translateX(3px); color: var(--rio-ink); }

/* ---------- Karten ---------- */
.rs-karten { display: grid; gap: var(--rio-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rs-karte { background: var(--rio-surface); border: 1px solid var(--rio-line); border-radius: var(--rio-radius); padding: var(--rio-space-5); }
.rs-karte p + p { margin-top: var(--rio-space-3); }

/* ---------- Bildergalerie ---------- */
.rs-galerie { display: grid; gap: var(--rio-space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .rs-galerie { grid-template-columns: repeat(4, 1fr); gap: var(--rio-space-4); } }
.rs-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Dunkles Band am Ende ---------- */
.rs-schluss { position: relative; margin-top: var(--rio-section); background: var(--rio-ink); color: #e9e3da; padding: var(--rio-space-8) 0; }
.rs-schluss::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--rio-ply-h); background: var(--rio-ply); }
.rs-schluss h2 { color: #fff; }
.rs-schluss p { margin-top: var(--rio-space-3); max-width: 34em; }
.rs-schluss a:not(.rs-btn) { color: #fff; }
.rs:has(> .rs-schluss:last-child) { padding-bottom: 0; }

/* ---------- Knoepfe ---------- */
.rs-knoepfe { display: flex; flex-wrap: wrap; gap: var(--rio-space-3); margin-top: var(--rio-space-5); }
.rs-btn { appearance: none; border: 1.5px solid var(--rio-ink); cursor: pointer; display: inline-block; background: var(--rio-ink); color: #fff; font: inherit; font-weight: 600; line-height: 1.3; padding: 12px 26px; border-radius: var(--rio-radius); text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; }
.rs-btn:hover { background: var(--rio-ink-hover); border-color: var(--rio-ink-hover); }
.rs a.rs-btn, .rs a.rs-btn:hover { color: #fff; text-decoration: none; }
.rs-btn--rahmen, .rs a.rs-btn--rahmen { background: transparent; color: var(--rio-ink); }
.rs-btn--rahmen:hover, .rs a.rs-btn--rahmen:hover { background: var(--rio-ink); border-color: var(--rio-ink); color: #fff; }
.rs-btn--hell, .rs a.rs-btn--hell { background: #fff; border-color: #fff; color: var(--rio-ink); }
.rs-btn--hell:hover, .rs a.rs-btn--hell:hover { background: var(--rio-birch); border-color: var(--rio-birch); color: var(--rio-ink); }
.rs-btn--hell-rahmen, .rs a.rs-btn--hell-rahmen { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.rs-btn--hell-rahmen:hover, .rs a.rs-btn--hell-rahmen:hover { background: #fff; border-color: #fff; color: var(--rio-ink); }
.rs-btn[disabled] { opacity: .6; cursor: wait; }

/* ---------- Formulare ---------- */
.rs-felder { display: grid; gap: var(--rio-space-5); }
@media (min-width: 640px) { .rs-felder--2 { grid-template-columns: 1fr 1fr; } .rs-felder--2 .rs-voll { grid-column: 1 / -1; } }
.rs-felder--6 { gap: var(--rio-space-4); grid-template-columns: repeat(6, 1fr); }
.rs-felder--6 .rs-feld { grid-column: span 6; }
@media (min-width: 640px) { .rs-felder--6 .rs-feld.h { grid-column: span 3; } .rs-felder--6 .rs-feld.g { grid-column: span 4; } .rs-felder--6 .rs-feld.k { grid-column: span 2; } }
.rs-feld label { display: block; font-size: var(--rio-fs-sm); color: var(--rio-ink); margin-bottom: 4px; }
.rs-feld input, .rs-feld textarea, .rs-feld select { width: 100%; font: inherit; color: var(--rio-ink); background: var(--rio-surface); border: 1px solid var(--rio-line); border-radius: var(--rio-radius); padding: 11px 12px; }
.rs-feld textarea { min-height: 170px; resize: vertical; }
.rs-feld input:focus, .rs-feld textarea:focus, .rs-feld select:focus { outline: 2px solid var(--rio-ink); outline-offset: -1px; border-color: var(--rio-ink); }
.rs-fehler { color: var(--rio-red-dark); font-size: var(--rio-fs-sm); margin-top: 6px !important; }
.rs-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--rio-fs-sm); margin: var(--rio-space-5) 0; }
.rs-check input { margin-top: 3px; accent-color: var(--rio-ink); width: 17px; height: 17px; flex: none; }
.rs-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }