/* =========================
   ROMIRA Produktfinder UI
   ========================= */
.romira-pf { --pf-bg:#575757; --pf-accent:#24186b; --pf-white:#fff; --pf-ink:#111;
             --pf-border:#e6e7eb; --pf-muted:#8e90a0; font-size:16px; color:#111; }
.romira-pf * { box-sizing:border-box; }

/* BAR / HEADER ------------------------------------------------------------ */
.romira-pf .pf-bar{
  background:var(--pf-bg);
  color:#fff;
  padding:22px;
  margin:0 0 18px 0;
}
.romira-pf .pf-heading{
  display:flex; align-items:center; gap:.7rem;
  font-weight:700; font-size:20px; margin:0 0 14px 0;
}
.romira-pf .pf-bullet{
  display:inline-block; width:6px; height:18px; background:#9fc3e8; border-radius:3px;
}

/* LAYOUT der Filterzeile */
.romira-pf .pf-field, .romira-pf .pf-actions, .romira-pf .pf-reset-wrap{ display:inline-block; vertical-align:top; }
.romira-pf .pf-field{ margin-right:18px; }

/* „Faux Select“ Boxen (weiß) */
.romira-pf .pf-dd-toggle, .romira-pf .pf-select-marke{
  background:#fff !important; color:#111; border:1px solid var(--pf-border);
  height:46px; padding:0 42px 0 16px; border-radius:2px; line-height:44px; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; position:relative; min-width:310px;
}
.romira-pf .pf-dd-toggle .pf-caret{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#3a3765; }
.romira-pf .pf-dd-toggle .pf-count{ display:none; } /* nicht anzeigen – wie im ROMIRA-Design */
.romira-pf .pf-dd-toggle .pf-dd-label{ font-weight:700; }

/* natives <select> wie das weiße Feld aussehen lassen */
.romira-pf .pf-select-marke{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; min-width:360px;
  background-image:linear-gradient(45deg,transparent 50%,#3a3765 50%),linear-gradient(135deg,#3a3765 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(50% - 4px), calc(100% - 13px) calc(50% - 4px);
  background-size:8px 8px, 8px 8px; background-repeat:no-repeat;
}

/* Suchbutton (breit, violett) */
.romira-pf .pf-actions .pf-btn{
  background:var(--pf-accent); color:#fff; border:0; height:46px; padding:0 26px;
  font-weight:700; letter-spacing:.2px; cursor:pointer; min-width:300px;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
}
.romira-pf .pf-actions .pf-arrow{ font-weight:900; }

/* „Filter zurücksetzen“ links mit Pfeil */
.romira-pf .pf-reset-wrap{ display:block; margin-top:14px; }
.romira-pf .pf-reset{
  background:none; border:0; color:#d5d7de; cursor:pointer; padding:0; font-weight:600;
}
.romira-pf .pf-reset::before{ content:"➜ "; }

/* DROPDOWN LISTE ---------------------------------------------------------- */
.romira-pf .pf-eigenschaften{ position:relative; }
.romira-pf .pf-dd{
  position:absolute; left:0; top:46px; z-index:20; width:420px;
  background:#fff; border:1px solid var(--pf-border); border-top:0; box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.romira-pf .pf-dd-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px; border-bottom:1px solid var(--pf-border); }
.romira-pf .pf-dd-head .pf-dd-actions button{
  background:none; border:0; color:#3a3765; font-weight:600; cursor:pointer; margin-left:8px;
}
.romira-pf .pf-search-input{ width:100%; height:36px; padding:0 10px; border:1px solid var(--pf-border); }

.romira-pf .pf-dd-list{ max-height:280px; overflow:auto; }
.romira-pf .pf-group-title{
  font-weight:700; color:#444; padding:10px 12px; border-top:1px solid var(--pf-border);
  background:#fafbfc;
}
.romira-pf .pf-check{
  display:flex; align-items:center; gap:10px; padding:12px; border-top:1px solid #f1f2f5;
}
.romira-pf .pf-check input{ width:18px; height:18px; }

/* ERGEBNISSE -------------------------------------------------------------- */
.romira-pf .pf-table{ width:100%; margin-top:12px; }
.romira-pf .pf-thead{ display:grid; grid-template-columns:220px 180px 1fr 52px; background:var(--pf-accent); color:#fff; padding:10px 12px; }
.romira-pf .pf-th{ font-weight:700; }

.romira-pf .pf-brandbar{ background:var(--pf-accent); color:#fff; padding:10px 12px; font-weight:700; margin-top:16px; }

.romira-pf .pf-row{
  display:grid; grid-template-columns:220px 180px 1fr 52px; align-items:center;
  padding:12px; background:#f3f3f7; border-top:8px solid #fff;
}
.romira-pf .pf-td-toggle button{
  width:36px; height:36px; border:0; border-radius:6px; background:#4b4a64; color:#fff; cursor:pointer;
}
.romira-pf .pf-row-details{ display:none; background:#ececf5; padding:16px 12px; }
.romira-pf .pf-row-details[aria-hidden="false"]{ display:block; }

.romira-pf .pf-details-left .pf-product-title{ margin:0 0 8px; font-size:22px; }
.romira-pf .pf-features{ margin:0; padding-left:18px; }
.romira-pf .pf-docs{ list-style:none; margin:0; padding:0; }
.romira-pf .pf-docs .pf-doc{
  display:block; text-decoration:none; background:#3a3765; color:#fff; padding:12px 14px; margin:0 0 8px; border-radius:4px;
}

/* Loader & Empty */
.romira-pf .pf-loading{ color:#666; padding:16px 0; }
.romira-pf .pf-empty{ color:#666; padding:16px 0; }

/* RESPONSIVE -------------------------------------------------------------- */
@media (max-width: 980px){
  .romira-pf .pf-dd-toggle, .romira-pf .pf-select-marke{ min-width:260px; }
  .romira-pf .pf-thead, .romira-pf .pf-row{ grid-template-columns: 1fr 150px 1fr 48px; }
}
@media (max-width: 680px){
  .romira-pf .pf-field, .romira-pf .pf-actions{ display:block; margin:0 0 12px 0; }
  .romira-pf .pf-select-marke{ width:100%; }
  .romira-pf .pf-thead, .romira-pf .pf-row{ grid-template-columns: 1fr; }
  .romira-pf .pf-td-toggle{ justify-self:flex-end; }
}

/* 1) Grundfarbe in der Bar dunkel setzen (damit Kinder wie das Dropdown NICHT weiß erben) */
.romira-pf .pf-bar { color: #111 !important; }

/* 2) Überschrift und Reset-Text explizit weiß */
.romira-pf .pf-heading,
.romira-pf .pf-reset { color: #fff !important; }

/* 3) Falls noch nötig: Dropdown nochmal hart auf dunkel */
.romira-pf .pf-dd,
.romira-pf .pf-dd *,
.romira-pf .pf-dd .pf-group-title,
.romira-pf .pf-dd .pf-check span { color: #111 !important; }

/* 4) Platzhalter im Suchfeld */
.romira-pf .pf-search-input::placeholder { color: #777; }