/* ─────────────────────────────────────────────
   VERGLEICHS-STRIP (3 Karten nebeneinander)
───────────────────────────────────────────── */

.compare-strip {
  background : var(--charcoal);
  padding    : 4rem;
}

.compare-strip-inner {
  max-width : 1160px;
  margin    : 0 auto;
}

.compare-title {
  font-family   : 'Cormorant Garamond', serif;
  font-size     : 1.6rem;
  font-weight   : 300;
  color         : rgba(255,255,255,0.6);
  text-align    : center;
  margin-bottom : 2.5rem;
}

.compare-title em { font-style: italic; color: #fff; }

.compare-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 16px;
}

@media (max-width: 760px) {
  .compare-grid { grid-template-columns: 1fr; }
}

.compare-card {
  background    : rgba(255,255,255,0.04);
  border        : 1px solid rgba(255,255,255,0.08);
  border-radius : 2px;
  padding       : 2rem;
  position      : relative;
  transition    : border-color 0.2s;
}

.compare-card:hover { border-color: rgba(255,255,255,0.2); }
.compare-card.red   { border-top: 3px solid var(--main-red-color); }
.compare-card.blue  { border-top: 3px solid var(--main-blue-color); }
.compare-card.earth { border-top: 3px solid var(--earth); }

.compare-card h3 {
  font-family   : 'Cormorant Garamond', serif;
  font-size     : 1.4rem;
  font-weight   : 400;
  color         : #fff !important;
  margin-bottom : 0.4rem;
}

.compare-card .kcal {
  font-family    : 'Cormorant Garamond', serif;
  font-size      : 2.5rem;
  font-weight    : 300;
  display        : block;
  line-height    : 1;
  margin         : 1.2rem 0 0.3rem;
}

.compare-card.red   .kcal { color: red; }
.compare-card.blue  .kcal { color: var(--main-blue-color); }
.compare-card.earth .kcal { color: #c4a47a; }

.compare-card .kcal-label {
  font-size      : 0.62rem;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  color          : rgba(255,255,255,0.3);
  display        : block;
  margin-bottom  : 1.2rem;
}

.compare-card p {
  font-size   : 0.83rem;
  color       : rgba(255,255,255,0.5);
  line-height : 1.75;
  margin-bottom: 1.5rem;
}

.compare-link {
  font-size      : 0.7rem;
  font-weight    : 500;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  text-decoration: none;
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
  transition     : gap 0.2s;
}

.compare-card.red   .compare-link { color: white; }
.compare-card.blue  .compare-link { color: var(--main-blue-color); }
.compare-card.earth .compare-link { color: #c4a47a; }
.compare-link:hover { gap: 9px; }
.compare-link::after { content: '→'; }

/* Schwierigkeits-Balken */
.diff-bar {
  display       : flex;
  gap           : 4px;
  margin-bottom : 1rem;
  align-items   : center;
}

.diff-label {
  font-size      : 0.62rem;
  letter-spacing : 0.08em;
  text-transform : uppercase;
  color          : rgba(255,255,255,0.3);
  min-width      : 80px;
}

.diff-dots {
  display : flex;
  gap     : 3px;
}

.diff-dot {
  width         : 8px;
  height        : 8px;
  border-radius : 50%;
  background    : rgba(255,255,255,0.1);
}

.diff-dot.on { background: rgba(255,255,255,0.6); }
.compare-card.red   .diff-dot.on { background: red }
.compare-card.blue  .diff-dot.on { background: var(--main-blue-color); }
.compare-card.earth .diff-dot.on { background: #c4a47a; }

/* ─────────────────────────────────────────────
   DETAIL-SEKTIONEN
───────────────────────────────────────────── */

.section {
  max-width : 1160px;
  margin    : 0 auto;
  padding   : 5rem 4rem;
  scroll-margin-top: 2rem;
}

.section + .section {
  padding-top : 0;
}

@media (max-width: 768px) {
  .section   { padding: 3rem 2rem; }
  .compare-strip { padding: 3rem 2rem; }
  .hero      { padding: 5rem 2rem 3rem; }
}

.section-badge {
  font-size      : 0.62rem;
  font-weight    : 500;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : #fff;
  padding        : 3px 10px;
  border-radius  : 1px;
  display        : inline-block;
  margin-bottom  : 1.2rem;
}

.section-badge.buchingerfasten { background: var(--color-buchinger); }
.section-badge.basenfasten { background: var(--color-basenfasten); }
.section-badge.vitalfasten { background: var(--color-vitalfasten); }


.section h2 {
  font-family   : 'Cormorant Garamond', serif;
  font-size     : clamp(2rem, 3.5vw, 2.8rem);
  font-weight   : 300;
  color         : var(--charcoal);
  line-height   : 1.2;
  margin-bottom : 0.5rem;
}

.section h2 em { font-style: italic; }

.section-kcal {
  font-family    : 'Cormorant Garamond', serif;
  font-size      : 1rem;
  color          : var(--muted);
  margin-bottom  : 3rem;
  display        : block;
}

/* Zweispaltig: Detail-Grid */
.detail-grid {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 1px;
  background            : var(--border);
  border                : 1px solid var(--border);
  border-radius         : 2px;
  overflow              : hidden;
  margin-bottom         : 2rem;
}

@media (max-width: 640px) {
  .detail-grid { grid-template-columns: 1fr; }
}

.detail-cell {
  background : var(--main-bg-color2);
  padding    : 1.6rem;
}

.detail-cell-label {
	font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform : uppercase;
  color          : var(--main-red-color);
  display        : block;
  margin-bottom  : 0.7rem;
}




/* Ziele-Liste */
.ziele {
  list-style : none;
  display    : grid;
  grid-template-columns: 1fr 1fr;
  gap        : 6px;
  margin-top : 1.5rem;
}

@media (max-width: 640px) {
  .ziele { grid-template-columns: 1fr; }
}

.ziele li {
  display       : flex;
  gap           : 8px;
  align-items   : flex-start;
  font-size     : 14px;
  color         : #555;
  padding       : 0.7rem 0.9rem;
  background    : var(--main-bg-color2);
  border        : 1px solid var(--border);
  border-radius : 2px;
  line-height   : 1.5;
  font-style	: italic;
}

.ziele li::before {
  content       : '';
  width         : 6px;
  height        : 6px;
  border-radius : 50%;
  flex-shrink   : 0;
  margin-top    : 5px;
}

.ziele.red li::before   { background: var(--main-red-color); }
.ziele.blue li::before  { background: var(--main-blue-color); }
.ziele.earth li::before { background: var(--earth); }

/* Trennlinie zwischen Sektionen */
.section-divider {
  border     : none;
  border-top : 1px solid var(--border);
  max-width  : 1160px;
  margin     : 0 auto;
  padding    : 0 4rem;
}

/* CTA am Ende einer Sektion */
.section-cta {
  margin-top      : 2rem;
  display         : flex;
  gap             : 1rem;
  flex-wrap       : wrap;
  align-items     : center;
}

.btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  padding        : 0.75rem 1.8rem;
  font-family    : 'DM Sans', sans-serif;
  font-size      : 0.75rem;
  font-weight    : 500;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  border-radius  : 2px;
  text-decoration: none;
  transition     : all 0.2s;
}

.btn.buchingerfasten     { background: var(--color-buchinger); color: #fff; border: 1px solid var(--color-buchinger); }
.btn.buchingerfasten:hover { background: transparent; color: var(--color-buchinger); }

.btn.basenfasten     { background: var(--color-basenfasten); color: #fff; border: 1px solid var(--color-basenfasten); }
.btn.basenfasten:hover { background: transparent; color: var(--color-basenfasten);  }

.btn.vitalfasten	{ background: var(--color-vitalfasten); color: #fff; border: 1px solid var(--color-vitalfasten); }
.btn.vitalfasten:hover { background: transparent; color: var(--color-vitalfasten);  }