/* ==========================================================================
   Irgendeine — grundriss-visualisieren.css
   Seitenspezifische Styles für die Homepage / Ranking-Seite
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  padding-top: 56px;
  padding-bottom: 56px;
}
.hero .container { display: flex; flex-direction: column; gap: 32px; }

.hero-image { margin-bottom: 8px; }

.hero h1 { max-width: 700px; margin-bottom: 18px; }

.hero-subtitle {
  font-size: 18px;
  color: var(--color-text-muted);
  max-width: 640px;
  margin-bottom: 20px;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}
.trust-strip span { display: inline-flex; align-items: center; gap: 6px; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

@media (min-width: 1024px) {
  .hero { padding-top: 72px; padding-bottom: 72px; }
}

/* ---------- Definition ---------- */
.definition .container { max-width: var(--container-width); }

/* ---------- Ranking Cards ---------- */
.ranking-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}

.rank-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
  background-color: var(--color-bg);
}

.rank-card--featured {
  border: 2px solid var(--color-accent);
  background-color: var(--color-bg-subtle);
}

.rank-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.rank-number {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.rank-card h3 { margin-bottom: 4px; }
.rank-card .vendor { font-size: 14px; color: var(--color-text-muted); margin-bottom: 12px; }

.star-row { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.star-row .icon { color: var(--color-star); }
.star-row .rating-text { font-size: 14px; color: var(--color-text-muted); margin-left: 4px; }

.price-line { font-size: 14px; font-weight: 500; margin-bottom: 12px; }

.rank-bullets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.rank-bullets li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--color-text-muted); }
.rank-bullets .icon { color: var(--color-success); margin-top: 2px; }

.rank-card-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Comparison Table Callout ---------- */
.vergleich .callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.vergleich .callout p { margin-bottom: 0; max-width: 520px; }

/* ---------- Review Cards ---------- */
.review-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 28px;
  margin-top: 24px;
}

.review-card--featured {
  border: 2px solid var(--color-accent);
  background-color: var(--color-bg-subtle);
}

.review-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.score-bars { margin: 18px 0; display: flex; flex-direction: column; gap: 10px; }
.score-bar-row { display: grid; grid-template-columns: 160px 1fr 50px; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-muted); }
.score-bar-track {
  height: 8px;
  background-color: var(--color-bg-accent);
  border-radius: 4px;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 4px;
}
.score-overall { font-weight: 500; color: var(--color-text); margin-top: 4px; }

.strengths-weaknesses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 18px 0;
}
@media (min-width: 640px) {
  .strengths-weaknesses { grid-template-columns: 1fr 1fr; }
}
.strengths-weaknesses ul { display: flex; flex-direction: column; gap: 8px; }
.strengths-weaknesses li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.strengths-weaknesses .icon-check { color: var(--color-success); margin-top: 2px; }
.strengths-weaknesses .icon-x { color: var(--color-danger); margin-top: 2px; }

.key-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background-color: var(--color-bg-accent);
  border-radius: 8px;
  padding: 16px;
  font-size: 14px;
  margin: 18px 0;
}
@media (min-width: 640px) {
  .key-facts { grid-template-columns: repeat(4, 1fr); }
}
.key-facts dt { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.key-facts dd { font-weight: 500; margin-bottom: 0; }

/* ---------- Zielgruppen (Audience Tiles) ---------- */
.tiles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}
@media (min-width: 640px) {
  .tiles-grid { grid-template-columns: 1fr 1fr; }
}

.tile {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
  background-color: var(--color-bg);
}
.tile-icon { margin-bottom: 14px; color: var(--color-accent); }
.tile h3 { margin-bottom: 10px; }
.tile .recommendation { font-size: 14px; font-weight: 500; color: var(--color-accent); margin-top: 8px; }

/* ---------- Use Cases ---------- */
.use-cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}
@media (min-width: 640px) {
  .use-cases-grid { grid-template-columns: 1fr 1fr; }
}

.use-case-box {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
}
.use-case-icon { margin-bottom: 14px; color: var(--color-accent); }
.use-case-box .recommendation { font-size: 14px; margin: 12px 0 6px; }
.use-case-box .recommendation strong { color: var(--color-text); }

/* ---------- CTA Banner ---------- */
.cta-banner {
  background-color: var(--color-accent);
  color: #FFFFFF;
}
.cta-banner .container { text-align: center; max-width: 640px; }
.cta-banner h2 { color: #FFFFFF; font-size: clamp(20px, 3vw, 28px); margin-bottom: 12px; }
.cta-banner p { color: rgba(255,255,255,0.88); margin-bottom: 24px; }
.cta-banner-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cta-banner .fine-print { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 0; }

/* ---------- Fazit ---------- */
.fazit .container { max-width: var(--container-width); }
.fazit-cta-wrap { margin-top: 8px; }

/* ---------- FAQ Section ---------- */
.faq .container { max-width: var(--container-width); }
.faq-list { margin-top: 24px; }