/* sections.css – Hero und sektionsspezifische Layouts */

/* ---- Hero ---- */
.hero { padding-block: var(--space-4); overflow: hidden; }
.hero__grid { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 54rem) { .hero__grid { grid-template-columns: 1.15fr 0.85fr; } }
@media (max-width: 64rem) { :root[data-text-size="xlarge"] .hero__grid { grid-template-columns: 1fr; } }
.hero__copy { max-width: 42rem; }
.hero h1 { margin-bottom: var(--space-2); font-size: var(--fs-800); hyphens: manual; overflow-wrap: normal; }
.hero .accent { color: var(--accent); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.hero__trust { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--fs-300); }

/* Hero-Visual: Arbeitsbild plus kurzer Ergebnisrhythmus */
.hero__visual { position: relative; display: flex; flex-direction: column; gap: var(--space-2); margin: 0; min-width: 0; }
.hero__visual picture { display: block; width: 100%; }
.hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.proof-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: -1.5rem var(--space-2) 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.proof-card span {
  padding: 0.75rem 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.proof-card span:last-child { color: var(--accent-3); font-weight: 700; }
.combo__caption { font-size: var(--fs-300); color: var(--text-muted); margin: 0; max-width: 30rem; }
@media (max-width: 44rem) {
  .hero { padding-block: var(--space-3); }
  .hero h1 { font-size: var(--fs-800); line-height: 1.12; hyphens: manual; overflow-wrap: normal; }
  :root[data-text-size="xlarge"] .hero h1 { font-size: 1.55rem; }
  .hero .lede { font-size: 1rem; line-height: 1.55; }
  .hero__cta { align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__visual { display: flex; margin-top: var(--space-1); }
  .hero__image { aspect-ratio: 16 / 11; }
  .proof-card {
    grid-template-columns: 1fr;
    margin: 0.25rem 0 0;
  }
  .proof-card span { padding: 0.6rem 0.75rem; }
}

@media (max-width: 22rem) {
  .hero h1 { hyphens: auto; overflow-wrap: break-word; }
}

/* Altes Code/Text-Visual, bewusst behalten fuer eventuelle Unterseiten */
.combo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  min-height: 15rem;
}
.combo__half { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.4rem; }
.combo__half--code { background: var(--accent-2); color: var(--accent-2-ink); font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.7; }
.combo__half--code .tag { color: #a8c2de; }
.combo__half--text { background: var(--surface); }
.combo__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0; text-transform: uppercase; opacity: 0.8; margin-bottom: 0.4rem; }
.combo__half--text p { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.5; margin: 0; color: var(--text); }

/* ---- Statistik-Reihe (Problem) ---- */
.stats { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2); }
.stat__num { font-family: var(--font-serif); font-size: var(--fs-700); color: var(--accent); line-height: 1; }
.stat__label { color: var(--text-muted); font-size: var(--fs-300); margin-top: 0.3rem; }

/* ---- Scope-Tabelle (wen es trifft) ---- */
.scope { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 44rem) { .scope { grid-template-columns: 1fr 1fr; } }
.scope__col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); }
.scope__col h3 { display: flex; align-items: center; gap: 0.5rem; margin-top: 0; }
.scope__col ul { margin: 0; padding-left: 1.2rem; }
.scope__col li { margin-bottom: 0.4rem; }
.scope__col--yes { border-top: 4px solid var(--accent); }
.scope__col--no { border-top: 4px solid var(--accent-2); }

/* ---- Duo ---- */
.duo { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 44rem) { .duo { grid-template-columns: 1fr 1fr; } }

/* ---- Trust / Ehrlichkeit ---- */
.honest { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 44rem) { .honest { grid-template-columns: 1fr 1fr; } }
.honest blockquote { margin: 0; padding: var(--space-3); background: var(--surface); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.honest blockquote p:last-child { margin-bottom: 0; }

/* ---- Referenz-Zitat ---- */
.quote { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow); border: 1px solid var(--border); }
.quote blockquote { font-family: var(--font-serif); font-size: var(--fs-500); line-height: 1.5; margin: 0 0 var(--space-2); }
.quote cite { font-style: normal; color: var(--text-muted); font-size: var(--fs-300); }

.section-head { max-width: 46rem; margin-bottom: var(--space-3); }
.center { text-align: center; margin-inline: auto; }

/* ---- Leichte-Sprache-Seite ---- */
.easy-page .hero__copy,
.easy-page .section-head {
  max-width: 40rem;
}
.easy-page .lede {
  font-size: var(--fs-500);
  line-height: 1.65;
}
.easy-page h1,
.easy-page h2,
.easy-page h3,
.easy-page .trust-strip__item {
  font-family: var(--font-sans);
}
.easy-page p,
.easy-page li {
  line-height: 1.75;
}
.easy-page .card p,
.easy-page .honest p,
.easy-page .callout p {
  margin-block: 0.35rem;
}
.easy-page .card h3,
.easy-page .scope__col h3,
.easy-page .honest h3 {
  margin-bottom: 0.7rem;
}
.easy-page .accordion__trigger {
  line-height: 1.3;
}
.easy-page .accordion__panel p {
  margin-block: 0.3rem;
}

@media (max-width: 44rem) {
  .easy-page .hero__copy,
  .easy-page .section-head {
    max-width: none;
  }
  .easy-page .calc li {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}