/* ============================================================
   Variablen
   ============================================================ */
:root{
  --eaa-accent: #8aa236;
  --eaa-border: #eee;
  --eaa-text-weak: #666;
  --eaa-bg-soft: #FCFFF3;
  --eaa-radius: .5rem;
  --eaa-gap: .75rem;
}

/* ============================================================
   Grundlayout
   ============================================================ */
.eaa-productdata {
  display: grid;
  gap: 1.25rem;
}

/* ============================================================
   Badges vor dem Testbericht
   ============================================================ */
.eaa-feature-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1rem 0;
}
.eaa-feature-badge{
  padding:.3rem .65rem;
  border:1px solid #CBEFF4;
  border-radius:var(--eaa-radius);
  font-size:.8em;
  line-height:1.2;
  background:#F2FDFE;
  color: #007585;
  white-space:nowrap;
}

/* ============================================================
   FIT-Block
   ============================================================ */
.eaa-fit {
  margin-bottom: 4rem;
}
.eaa-fit-title{
  margin-bottom: 0;
}
.eaa-fitcheck{
  font-size: .9em;
}

/* Metrics: klare, lesbare Chips */
.eaa-metrics{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(265px,1fr));
  gap: .75rem;
  margin: .1rem 0 .5rem;
  padding:0;
  list-style:none;
}
.eaa-metric{
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: .55rem;
  padding: .6rem .7rem;
  background: var(--eaa-bg-soft);
  border: 1px solid var(--eaa-border);
  border-radius: var(--eaa-radius);
}
.eaa-metric-ico{
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--eaa-border);
  border-radius: 50%;
  background: #fff;
  color: var(--eaa-accent);
}
.eaa-metric-ico i{
  font-size: 1rem;
  line-height: 1;
}
.eaa-metric-text{
  display: grid;
  gap: .15rem;
}
.eaa-metric-label{
  font-size: .85rem;
  color: var(--eaa-text-weak);
  border-bottom: 1px dashed var(--eaa-border);
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  line-height: 1.25;
}
.eaa-metric-value{
  font-size: 1.05rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.35;
}

/* Badges (mit optionalen Icon-Farben) */
.eaa-fit-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.25rem 0 .5rem;
}
.eaa-fit-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .65rem;
  border:1px solid var(--eaa-border);
  border-radius:999px;
  font-size:.95rem;
  line-height:1.2;
  white-space:nowrap;
  background:#fff;
}
.eaa-fit-badge i{ font-size:.95em; opacity:.9; }
.eaa-fit-badge--height i{ color: var(--eaa-accent); }
.eaa-fit-badge--weight i{ color:#54733a; }

/* Kurzliste im Fit-Block */
.eaa-checklist{
  margin:.5rem 0 0;
  padding:0;
  list-style:none;
}
.eaa-checklist li{
  position: relative;
  padding-left: 1.4rem;
  margin: .35rem 0;
}
.eaa-checklist li strong{ font-weight:600; }
.eaa-checklist li::before {
  content: "\f0da"; /* fa-angle-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .15rem;
  color: var(--eaa-accent);
  font-size: .85rem;
  opacity: .8;
}

/* ============================================================
   Tabelle (Produktdaten)
   ============================================================ */
.eaa-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--eaa-border);
  border-radius:var(--eaa-radius);
  overflow:hidden;
  background:#fff;
  font-size: 0.9em;
}
.eaa-table th{
  width:34%;
  text-align:left;
  vertical-align:top;
  padding:.9rem .9rem;
  background:linear-gradient(#fafafa, #f7f7f7);
  color:#222;
  font-weight:600;
}
.eaa-table td{
  padding:.9rem .9rem;
  vertical-align:top;
  color:#222;
}
.eaa-table tbody tr + tr td,
.eaa-table tbody tr + tr th{
  border-top:1px solid var(--eaa-border);
}
.eaa-table tbody tr:nth-child(even) td{
  background:#fcfcfc;
}

/* Hover-Highlight (nur Desktop) */
@media (hover:hover){
  .eaa-table tbody tr:hover td{ background: var(--eaa-bg-soft); }
}

/* ============================================================
   Listenpunkte innerhalb der Tabelle
   ============================================================ */
.eaa-bullets{
  margin:0;
  padding-left:0;       /* Standards bullets aus */
  list-style:none;
}
.eaa-bullets li{
  position:relative;
  padding-left:1.25rem; /* Platz für Marker */
  margin:.25rem 0;
}
.eaa-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65rem;
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:var(--eaa-accent);
  opacity:.6;           /* dezent */
}

/* INLINE: grüner Punkt VOR der ganzen Zeile + Trenner zwischen Items */
.eaa-table .eaa-bullets.eaa-inline{
  position:relative;         /* für den vorgesetzten Punkt */
  padding-left:1.25rem;      /* Platz für den Punkt */
  margin:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem .5rem;
  align-items:baseline;
}

/* vorderer grüner Punkt (gleich wie in der Basisliste) */
.eaa-table .eaa-bullets.eaa-inline::before{
  content:"";
  position:absolute;
  left:0;
  top:.75rem;
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:var(--eaa-accent);
  opacity:.6;
}

/* Items inline; alten Punkt pro LI abschalten */
.eaa-table .eaa-bullets.eaa-inline > li{
  display:inline;            /* fließt in einer Zeile */
  margin:.125rem 0;
  padding-left:0;
  position:static;
}
.eaa-table .eaa-bullets.eaa-inline > li::before{
  content:none !important;   /* Basis-Bullet sicher aus */
}

/* Trenner zwischen Items (z. B. | oder • ) */
.eaa-table .eaa-bullets.eaa-inline > li:not(:last-child)::after{
  content:"|";
  margin-left:.5rem;
  opacity:.6;
  color:currentColor;
}

/* wichtige Schlagworte (z. B. "4D-Armlehnen") */
.eaa-hit{ font-weight:700; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px){
  .eaa-table th{
    width:auto;
    display:block;
    border-bottom:1px solid var(--eaa-border);
  }
  .eaa-table td{
    display:block;
    padding-top:.5rem;
  }
  .eaa-table tbody tr + tr th{
    border-top:1px solid var(--eaa-border);
  }
}

/* Sehr kleine Screens – Badge-Feinschliff */
@media (max-width: 420px){
  .eaa-metrics{ grid-template-columns: 1fr; }
  .eaa-fit-badges{ gap:.35rem; }
  .eaa-fit-badge{ padding:.3rem .55rem; font-size:.9rem; }
}