/* ============================================================
   RPD Online – Redesign Stylesheet
   Produktauswahl-Flow (Stepper, Cards, Pills, Tabelle) + Modal
   ============================================================ */

.rpd-wrapper{
  --rpd-rot: rgb(239,46,45);
  --rpd-rot-dark: rgb(200,30,30);
  --rpd-grau-bg:#f4f5f7;
  --rpd-grau-line:#e3e6ea;
  --rpd-text:#1d1d1f;
  --rpd-muted:#6b7280;
  --rpd-radius:12px;
  --rpd-shadow:0 1px 3px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.05);
  margin-bottom:30px;
}
.rpd-wrapper *{box-sizing:border-box;}

/* ---------- Section-Headings ---------- */
.rpd-wrapper .rpd-section-title{font-size:1.35rem; font-weight:700; margin:0 0 4px;}
.rpd-wrapper .rpd-section-sub{color:var(--rpd-muted); margin:0 0 18px; font-size:.95rem;}

/* ---------- Stepper ---------- */
.rpd-wrapper .rpd-stepper{display:flex; align-items:center; margin:8px 0 24px; flex-wrap:wrap;}
.rpd-wrapper .rpd-step{display:flex; align-items:center; gap:10px; flex:1; min-width:170px;}
.rpd-wrapper .rpd-step .rpd-num{
  width:30px; height:30px; border-radius:50%; flex:0 0 30px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem; background:var(--rpd-grau-bg);
  color:var(--rpd-muted); border:2px solid var(--rpd-grau-line); transition:.25s;
}
.rpd-wrapper .rpd-step .rpd-lbl{font-size:.92rem; color:var(--rpd-muted); font-weight:500;}
.rpd-wrapper .rpd-step .rpd-num,
.rpd-wrapper .rpd-step .rpd-lbl{cursor:pointer;}
.rpd-wrapper .rpd-step .rpd-num:hover{border-color:var(--rpd-rot); color:var(--rpd-rot);}
.rpd-wrapper .rpd-step .rpd-lbl:hover{color:var(--rpd-text); text-decoration:underline;}
.rpd-wrapper .rpd-step.is-active .rpd-num{background:var(--rpd-rot); border-color:var(--rpd-rot); color:#fff;}
.rpd-wrapper .rpd-step.is-active .rpd-lbl{color:var(--rpd-text); font-weight:600;}
.rpd-wrapper .rpd-step.is-done .rpd-num{background:#fff; border-color:var(--rpd-rot); color:var(--rpd-rot);}
.rpd-wrapper .rpd-step.is-done .rpd-lbl{color:var(--rpd-text);}
.rpd-wrapper .rpd-step .rpd-bar{flex:1; height:2px; background:var(--rpd-grau-line); margin:0 6px;}
.rpd-wrapper .rpd-step.is-done .rpd-bar{background:var(--rpd-rot);}
@media(max-width:680px){
  .rpd-wrapper .rpd-step .rpd-lbl{display:none;}
  .rpd-wrapper .rpd-step{min-width:0; flex:0 0 auto;}
  .rpd-wrapper .rpd-step .rpd-bar{width:34px; flex:0 0 34px;}
}

/* ---------- Auswahl-Breadcrumb ---------- */
.rpd-wrapper #rpd-selection-bar{
  display:none; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--rpd-grau-bg); border:1px solid var(--rpd-grau-line);
  border-radius:var(--rpd-radius); padding:10px 14px; margin-bottom:24px;
}
.rpd-wrapper .rpd-crumb{
  display:inline-flex; align-items:center; gap:6px; background:#fff;
  border:1px solid var(--rpd-grau-line); border-radius:999px; padding:5px 12px;
  font-size:.88rem; cursor:pointer; transition:.15s;
}
.rpd-wrapper .rpd-crumb:hover{border-color:var(--rpd-rot); color:var(--rpd-rot);}
.rpd-wrapper .rpd-crumb b{font-weight:600;}
.rpd-wrapper .rpd-crumb .rpd-x{font-size:1.1rem; line-height:1; color:var(--rpd-muted);}
.rpd-wrapper .rpd-reset{margin-left:auto; font-size:.85rem; color:var(--rpd-muted); cursor:pointer; text-decoration:underline;}

/* ---------- Produkttyp-Cards ---------- */
.rpd-wrapper .rpd-pt-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:24px;
}
.rpd-wrapper button.rpd-produkttyp-btn{
  background:#fff !important; border:1.5px solid var(--rpd-grau-line) !important;
  border-radius:var(--rpd-radius) !important; padding:16px 14px !important; cursor:pointer;
  text-align:left; display:flex; flex-direction:column; gap:8px; position:relative;
  transition:.18s; color:var(--rpd-text) !important; font-weight:600; box-shadow:none !important;
  text-transform:none !important; letter-spacing:normal !important; width:100%; min-height:auto;
}
.rpd-wrapper button.rpd-produkttyp-btn:hover{
  border-color:var(--rpd-rot) !important; transform:translateY(-2px); box-shadow:var(--rpd-shadow) !important;
}
.rpd-wrapper button.rpd-produkttyp-btn.is-active{border-color:var(--rpd-rot) !important; background:#fff5f5 !important;}
.rpd-wrapper button.rpd-produkttyp-btn.is-active::after{
  content:"\2713"; position:absolute; top:10px; right:10px; width:20px; height:20px;
  background:var(--rpd-rot); color:#fff; border-radius:50%; font-size:.75rem;
  display:flex; align-items:center; justify-content:center;
}
.rpd-wrapper .rpd-produkttyp-btn .rpd-pt-ico{width:24px; height:24px; color:var(--rpd-rot); flex:0 0 auto;}
.rpd-wrapper .rpd-produkttyp-btn .rpd-pt-name{font-weight:600; font-size:.95rem;}

/* ---------- Family-Cards ---------- */
.rpd-wrapper .rpd-fam-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-bottom:24px;}
.rpd-wrapper button.rpd-family-btn{
  border:1.5px solid var(--rpd-grau-line) !important; border-radius:var(--rpd-radius) !important;
  overflow:hidden; cursor:pointer; transition:.18s; background:#fff !important; padding:0 !important;
  display:block; width:100%; box-shadow:none !important;
}
.rpd-wrapper button.rpd-family-btn:hover{border-color:var(--rpd-rot) !important; transform:translateY(-2px); box-shadow:var(--rpd-shadow) !important;}
.rpd-wrapper button.rpd-family-btn.is-active{border-color:var(--rpd-rot) !important;}
.rpd-wrapper .rpd-family-btn .rpd-fam-img{
  height:140px; background:var(--rpd-grau-bg); display:flex; align-items:center; justify-content:center;
}
.rpd-wrapper .rpd-family-btn .rpd-fam-img img{max-width:80%; max-height:80%; object-fit:contain;}
.rpd-wrapper .rpd-family-btn .rpd-fam-cap{
  padding:10px 12px; font-weight:600; font-size:.92rem; text-align:center;
  color:var(--rpd-text); text-transform:none; letter-spacing:normal;
}

/* ---------- Filter-Pills ---------- */
.rpd-wrapper #rpd-filter-row{margin-bottom:24px;}
.rpd-wrapper .rpd-filter-block{background:var(--rpd-grau-bg); border-radius:var(--rpd-radius); padding:18px 18px 6px;}
.rpd-wrapper .rpd-filter-intro{color:var(--rpd-muted); font-size:.92rem; margin:0 0 16px;}
.rpd-wrapper .rpd-filter-group{margin-bottom:16px;}
.rpd-wrapper .rpd-filter-group h4{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--rpd-muted); margin:0 0 10px;
}
.rpd-wrapper .rpd-pills{display:flex; flex-wrap:wrap; gap:8px;}
.rpd-wrapper .rpd-pill{
  position:relative; display:inline-flex; align-items:center;
  border:1.5px solid var(--rpd-grau-line); background:#fff; border-radius:999px;
  padding:6px 14px; font-size:.88rem; cursor:pointer; transition:.15s; user-select:none;
}
.rpd-wrapper .rpd-pill:hover{border-color:var(--rpd-rot);}
.rpd-wrapper .rpd-pill input{position:absolute; opacity:0; width:0; height:0; margin:0;}
.rpd-wrapper .rpd-pill.is-on,
.rpd-wrapper .rpd-pill:has(input:checked){background:var(--rpd-rot); border-color:var(--rpd-rot); color:#fff;}

/* ---------- Ergebnis-Tabelle ---------- */
.rpd-wrapper .rpd-res-head{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 14px;}
.rpd-wrapper .rpd-res-head .rpd-count{color:var(--rpd-muted); font-size:.9rem;}
.rpd-wrapper .rpd-res-wrap{border:1px solid var(--rpd-grau-line); border-radius:var(--rpd-radius); overflow:hidden;}
.rpd-wrapper table.rpd-res{width:100%; border-collapse:collapse; font-size:.9rem; margin:0;}
.rpd-wrapper table.rpd-res thead th{
  position:sticky; top:0; background:#fff; z-index:2; text-align:left;
  padding:12px 14px; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--rpd-muted); border-bottom:2px solid var(--rpd-grau-line); white-space:nowrap;
}
.rpd-wrapper table.rpd-res tbody td{padding:12px 14px; border-bottom:1px solid var(--rpd-grau-line); vertical-align:middle;}
.rpd-wrapper table.rpd-res tbody tr{cursor:pointer; transition:background .12s;}
.rpd-wrapper table.rpd-res tbody tr:nth-child(even){background:#fafbfc;}
.rpd-wrapper table.rpd-res tbody tr:hover{background:#fff5f5;}
.rpd-wrapper table.rpd-res .rpd-res-name{font-weight:600;}
.rpd-wrapper table.rpd-res .rpd-res-han{color:var(--rpd-muted); font-variant-numeric:tabular-nums; white-space:nowrap;}
.rpd-wrapper table.rpd-res td.rpd-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.rpd-wrapper table.rpd-res .rpd-open{color:var(--rpd-rot); text-align:center; width:40px; font-size:1.2rem; line-height:1;}
.rpd-wrapper table.rpd-res .rpd-empty{padding:18px; color:var(--rpd-muted);}
@media(max-width:680px){
  .rpd-wrapper table.rpd-res thead{display:none;}
  .rpd-wrapper table.rpd-res, .rpd-wrapper table.rpd-res tbody,
  .rpd-wrapper table.rpd-res tr, .rpd-wrapper table.rpd-res td{display:block; width:100%;}
  .rpd-wrapper table.rpd-res tbody tr{padding:12px 14px;}
  .rpd-wrapper table.rpd-res tbody td{border:0; padding:2px 0;}
  .rpd-wrapper table.rpd-res td.rpd-num::before,
  .rpd-wrapper table.rpd-res td.rpd-res-han::before{content:attr(data-label) ": "; color:var(--rpd-muted); font-weight:600;}
  .rpd-wrapper table.rpd-res td.rpd-num{text-align:left;}
  .rpd-wrapper table.rpd-res .rpd-open{display:none;}
}

/* ============================================================
   MODAL – Klebende Kopfleiste mit Schließen-Button (immer erreichbar)
   ============================================================ */
/* Erste Zeile im Modal = Kopfleiste, bleibt beim Scrollen oben kleben */
#rpd-modal .rpd-modal-content > div:first-child{
  position:sticky; top:0; z-index:10;
  margin:-1.5rem -1.5rem 0.75rem; padding:0.6rem 1rem;
  background:#fff; border-bottom:1px solid #e3e6ea; text-align:right;
}
#rpd-modal .rpd-modal-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:#f4f5f7; color:#333; font-size:1.7rem; line-height:1;
  cursor:pointer; transition:background .15s;
}
#rpd-modal .rpd-modal-close:hover{background:#e3e6ea;}

/* ---------- Mobile: bildschirmfüllend ---------- */
@media (max-width: 768px){
  #rpd-modal{padding:0 !important;}
  #rpd-modal .rpd-modal-content{
    margin:0 !important; max-width:100% !important; width:100% !important;
    min-height:100vh; min-height:100dvh; max-height:none !important;
    border-radius:0 !important; padding:1rem !important;
  }
  /* Kopfleiste randlos über die ganze Breite, größerer Tap-Button */
  #rpd-modal .rpd-modal-content > div:first-child{
    margin:-1rem -1rem 0.75rem; padding:0.6rem 0.9rem;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
  }
  #rpd-modal .rpd-modal-close{width:46px; height:46px;}
  #rpd-modal .rpd-modal-content > div:nth-child(4){grid-template-columns:1fr !important;}
  #modal-info-grid{grid-template-columns:1fr 1fr !important;}
}