:root{
  --gof-ink:#222;
  --gof-muted:#666;
  --gof-line:#e5e5e5;
  --gof-bg:#fff;
  --gof-card:#f9fafb;
  --gof-accent:#4caf50;
  --gof-accent-soft:rgba(76,175,80,0.10);
  --gof-chip:#eef2f7;
  --gof-chip-text:#274052;
}

.gof-facts-card{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--gof-ink);background:var(--gof-bg);border:1px solid var(--gof-line);border-radius:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);padding:12px 14px;margin-bottom:40px;position:relative;
}
.gof-facts-head{display:flex;align-items:center;gap:10px;}
.gof-facts-title{font-weight:800;font-size:1.6rem;margin-right:auto;}
.gof-type-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  background:var(--gof-accent-soft);color:var(--gof-accent);
  font-weight:700;font-size:1.2rem;position:absolute;top:12px;right:14px;
  margin-bottom:8px;
}
.gof-type-badge .ico{width:16px;height:16px;}

.gof-facts-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;margin-top:15px;
}
.fact{
  display:grid;grid-template-columns:1fr;
  grid-template-rows:auto auto;
  gap:6px 0;align-items:flex-start;
  padding:8px 10px;border:1px solid var(--gof-line);border-radius:10px;background:var(--gof-card);
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  will-change: transform;
}
.fact:hover{
  transform: translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  border-color:#e0e0e0;
}
.label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:1.1rem;color:#333;font-weight:700;min-width:0;max-width:100%;
}
.value{
  font-weight:700;min-width:0;max-width:100%;
  overflow-wrap:anywhere;word-break:break-word;white-space:normal;
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
}
.sep-text{color:#888;font-weight:normal;padding:0 2px;}

.label-ico{width:18px;height:18px;color:var(--gof-accent);flex:0 0 18px;}
.info-ico{width:20px;height:20px;margin-left:6px;flex:0 0 20px;display:inline-block;vertical-align:middle;}

.chips{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center;}
.chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-weight:800;font-size:1.1rem;line-height:1;}
.chip-sep,.sep-text{color:#888;font-weight:normal;padding:0 2px;}
.chip--leicht{background:#e6f2ff;color:#1e3a8a;}
.chip--mittel{background:#ffe6e6;color:#991b1b;}
.chip--schwierig{background:#000;color:#fff;}

/* Fitnessbedarf – 5 Kreise (neue Grünabstufung) */
.fact.fitness{grid-column: span 2;}
.value.fitness-line{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;}
.fitness-circles{display:inline-flex;gap:8px;align-items:center;flex-wrap:nowrap;}
.fitness-label{margin-left:10px;font-weight:700;color:#444;font-size:1rem;margin-left:auto;text-align:right;white-space:nowrap;}
.fitness-circles .circle{
  width:16px;height:16px;border-radius:50%;
  border:2px solid #cbd5e1;background:transparent;display:inline-block;
}
.fitness-circles .circle.filled{border-color:transparent;}
.fitness-circles .circle-1.filled{background:#c5e99c;}  /* sehr hell */
.fitness-circles .circle-2.filled{background:#a6dd67;}  /* hellgrün */
.fitness-circles .circle-3.filled{background:#4caf50;}  /* mittelgrün */
.fitness-circles .circle-4.filled{background:#347837;}  /* waldgrün */
.fitness-circles .circle-5.filled{background:#224f24;}  /* sehr dunkel */
.fitness-plus{font-weight:900;color:#000;margin-left:4px;}

/* Responsiv für Fitnesskreise + Label */
@media (max-width:900px){
  .gof-facts-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fact.fitness{grid-column: span 3;}
}
@media (max-width:640px){
  .gof-facts-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fact.fitness{grid-column: span 2;}
}
@media (max-width:480px){
  .value.fitness-line{flex-direction:column;align-items:center;}
  .fitness-label{margin-left:0;margin-top:6px;text-align:center;white-space:normal;}
  .fitness-circles .circle{width:14px;height:14px;}
}
@media (max-width:420px){
  .gof-facts-row{grid-template-columns:1fr;}
  .fact.fitness{grid-column: span 1;}
  .fitness-circles .circle{width:13px;height:13px;}
}