:root{
  --hf24-yellow:#F5BB00;
  --hf24-grey:#65655E;
  --hf24-greige:#8F857D;
  --hf24-offwhite:#F8F7F1;
  --hf24-border:#e6e6e6;
  --hf24-card:#ffffff;
  --hf24-shadow:0 10px 24px rgba(0,0,0,0.06);
}

.hf24-compare{
  max-width:1000px;
  margin:0 auto;
  font-family:Lato, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:var(--hf24-grey);
}

.hf24-disclaimer{
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid var(--hf24-border);
  border-radius:14px;
  background:var(--hf24-offwhite);
  color:var(--hf24-greige);
  font-size:14px;
  line-height:1.5;
}

.hf24-compare a{
  color:var(--hf24-grey);
  text-decoration:underline;
  text-decoration-color:var(--hf24-yellow);
  text-underline-offset:3px;
}
.hf24-compare a:hover{ text-decoration-thickness:2px; }

.hf24-compare .hf24-btn-table,
.hf24-compare .hf24-btn-sticky{
  display:inline-block;
  background:var(--hf24-yellow);
  color:#000 !important;
  padding:11px 16px;
  border-radius:12px;
  font-weight:900;
  text-decoration:none !important;
  text-align:center;
  white-space:nowrap;
  box-shadow:0 10px 18px rgba(245,187,0,0.18);
}
.hf24-compare .hf24-btn-table.is-disabled{
  opacity:.5;
  cursor:not-allowed;
  user-select:none;
}
.hf24-compare .hf24-btn-table:hover,
.hf24-compare .hf24-btn-sticky:hover{ filter:brightness(0.96); }

/* Cards */
.fv-cards{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2, minmax(0,1fr));
  margin:12px 0 12px;
}
.fv-cards--cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width: 780px){
  .fv-cards, .fv-cards--cols-3{ grid-template-columns:1fr; }
}

.fv-card{
  border:1px solid var(--hf24-border);
  border-radius:14px;
  padding:14px;
  background:var(--hf24-card);
  box-shadow:var(--hf24-shadow);
}
.fv-card-title{ font-weight:900; font-size:1.05em; margin:0 0 4px; }
.fv-card-sub{ color:var(--hf24-greige); font-weight:700; margin:0 0 10px; font-size:.95em; }

.fv-mini{ margin-top:8px; font-size:12px; color:var(--hf24-greige); }

/* Highlights */
.fv-highlight{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(143,133,125,0.10);
  border:1px solid rgba(143,133,125,0.35);
}
.fv-highlight-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
}
.fv-highlight-strong .fv-value{ font-weight:900; color:var(--hf24-grey); }

/* Weight buttons */
.fv-weight{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:8px 0 14px;
  flex-wrap:wrap;
}
.fv-weight-label{ font-weight:900; }
.fv-weight-buttons{ display:flex; gap:8px; flex-wrap:wrap; }

.hf24-compare .hf24-weight-btn{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--hf24-border);
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.hf24-compare .hf24-weight-btn.is-active{
  background:var(--hf24-yellow);
  border-color:rgba(0,0,0,.15);
}

/* Table */
.hf24-compare .hf24-table-wrap{
  overflow-x:auto;
  border:1px solid var(--hf24-border);
  border-radius:16px;
  background:var(--hf24-card);
  box-shadow:var(--hf24-shadow);
}
.hf24-compare table.hf24-table{
  width:100%;
  border-collapse:collapse;
  font-size:16px;
  min-width:720px;
  margin:0;
}
.hf24-compare .hf24-table th,
.hf24-compare .hf24-table td{
  padding:12px 14px;
  border-bottom:1px solid #eee;
  vertical-align:top;
  text-align:left;
  background:transparent;
}
.hf24-compare .hf24-table thead th{
  background:var(--hf24-offwhite);
  font-weight:900;
}
.hf24-compare .hf24-table tbody th{
  width:34%;
  font-weight:800;
  color:var(--hf24-grey);
}
.fv-section-row th.fv-section{
  background:rgba(143,133,125,0.10);
  color:var(--hf24-grey);
  font-weight:900;
}

/* Accordion */
.hf24-accordion{
  border:1px solid var(--hf24-border);
  border-radius:14px;
  padding:12px 14px;
  background:var(--hf24-card);
  box-shadow:var(--hf24-shadow);
  margin:10px 0;
}
.hf24-accordion summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:900;
  cursor:pointer;
  color:var(--hf24-grey);
}
.hf24-accordion summary::-webkit-details-marker{ display:none; }
.hf24-accordion summary::after{
  content:"▾";
  font-weight:900;
  color:var(--hf24-greige);
  transition:transform .18s ease;
}
.hf24-accordion[open] summary::after{ transform:rotate(180deg); }
.hf24-accordion-body{ margin-top:10px; line-height:1.6; }

.hf24-mini-table-wrap{
  overflow-x:auto;
  border:1px solid var(--hf24-border);
  border-radius:12px;
  background:#fff;
}
.hf24-mini-table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
  font-size:14px;
  margin:0;
}
.hf24-mini-table th,
.hf24-mini-table td{
  padding:10px 12px;
  border-bottom:1px solid #eee;
  text-align:left;
  vertical-align:top;
  background:transparent;
}
.hf24-mini-table thead th{
  background:var(--hf24-offwhite);
  font-weight:900;
}

/* Geeignet / Weniger geeignet aligned under product columns */
.hf24-fit-grid{
  display:grid;
  gap:14px;
  margin:18px 0 0;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.hf24-fit-grid--cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width: 780px){
  .hf24-fit-grid, .hf24-fit-grid--cols-3{ grid-template-columns:1fr; }
}

.hf24-box{
  border:1px solid var(--hf24-border);
  border-radius:14px;
  padding:14px;
  background:var(--hf24-card);
  box-shadow:var(--hf24-shadow);
  margin:0 0 14px;
}
.hf24-box h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
}
.hf24-box ul{
  margin:0;
  padding-left:18px;
  line-height:1.55;
}
.hf24-muted{ margin:0; opacity:.8; }

/* Stand */
.hf24-stand{
  font-size:14px;
  color:var(--hf24-greige);
  margin:10px 0 0;
}

/* Sticky CTA (Desktop) */
.hf24-sticky-cta{ display:none; }
@media(min-width:900px){
  .hf24-sticky-cta{
    display:block;
    position:sticky;
    bottom:12px;
    margin-top:18px;
    z-index:50;
  }
  .hf24-sticky-inner{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    border:1px solid var(--hf24-border);
    border-radius:16px;
    background:var(--hf24-card);
    box-shadow:0 12px 26px rgba(0,0,0,0.10);
  }
  .hf24-sticky-title{
    font-weight:900;
    white-space:nowrap;
  }
}