/* Desktop-Layout (ab 1100 px). Das Handy- und Tablet-Layout bleibt unverändert: Alle Regeln stehen in
   dieser Datei, die per media-Attribut am <link> nur ab 1100 px angewendet wird.
   Das Zweispalten-Raster nutzt :has(); Browser ohne :has() behalten das bisherige einspaltige Layout. */

/* ── Hero: sauberes Raster, Text weg vom Bildmotiv ── */
.ci-hero { height: 86svh; min-height: 600px; max-height: 860px; }
.ci-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.38) 36%, rgba(8,8,10,0) 62%);
}
.ci-hero-content { max-width: 620px; padding: 0 3rem 5.5rem; }
.ci-hero-h1 { font-size: clamp(2.8rem, 4.3vw, 4.2rem); line-height: 1.06; margin-bottom: 1.4rem; }
.ci-hero-sub { max-width: 440px; font-size: 1rem; line-height: 1.75; }

/* ── Kennzahlen ── */
.ci-stats { padding: 5.5rem 3rem; }
.ci-stats-grid { max-width: 1000px; }
.ci-stat-num { font-size: clamp(3.2rem, 4.4vw, 4.6rem); }
.ci-stat-label { font-size: .68rem; }
.ci-stat-sub { font-size: .8rem; }

/* ── Lesbarkeit auf dem breiten Bildschirm ── */
.ci-body { font-size: 1.08rem; line-height: 1.85; color: #54483f; max-width: 620px; }
.ci-section li { font-size: 1.05rem; }
.ci-num-title { font-size: 1.18rem; }
.ci-num-sub { font-size: .92rem; }
.ci-faq-item summary { font-size: 1rem; }
.ci-faq-item p { font-size: 1rem; line-height: 1.8; }

/* ── Kernaussage: grösser ── */
.ci-positioning-text { max-width: 820px; font-size: clamp(2rem, 3.2vw, 3.1rem); line-height: 1.25; }

.ci-nw { white-space: nowrap; }

@supports selector(:has(*)) {

  /* Abschnitte: Titel links, Inhalt rechts (Editorial-Layout) */
  .ci-sep { width: calc(100% - 6rem); max-width: 1160px; margin: 0 auto; }
  .ci-section { max-width: 1160px; padding: 7.5rem 3rem; display: flow-root; }
  .ci-section > .ci-label,
  .ci-section > .ci-h2,
  .ci-section > .ci-rule { float: left; clear: left; }
  .ci-section > .ci-label,
  .ci-section > .ci-h2 { width: 36%; }
  .ci-section > :not(.ci-label):not(.ci-h2):not(.ci-rule) { margin-left: 42%; }
  .ci-section > .ci-h2 { font-size: clamp(2.2rem, 2.9vw, 3.1rem); text-wrap: balance; }
  .ci-section > .ci-h2 br { display: none; }

  /* Bild im Textteil: rechts neben dem Titel */
  .ci-section > .ci-section-img { width: 58%; height: 380px; margin: 0 0 2rem 42%; filter: brightness(.82); }

  /* Zentrierte Abschnitte (z. B. "Philosophie") bleiben zentriert */
  .ci-section:has(> .ci-label--center) { max-width: 880px; text-align: center; }
  .ci-section:has(> .ci-label--center) > * { float: none !important; clear: none !important; width: auto !important; margin-left: 0 !important; }
  .ci-section:has(> .ci-label--center) > .ci-label { justify-content: center; }
  .ci-section:has(> .ci-label--center) > .ci-rule { width: 30px !important; margin-left: auto !important; margin-right: auto !important; }
  .ci-positioning { max-width: 880px; padding: 9rem 3rem; }
  .ci-positioning-text { margin-left: auto; margin-right: auto; }

  /* Einleitung mit H1 (Unterseiten): Kopf über die volle Breite, Text darunter */
  .ci-section:has(> .ci-h1) > .ci-label,
  .ci-section:has(> .ci-h1) > .ci-h1,
  .ci-section:has(> .ci-h1) > .ci-rule { float: none; clear: none; margin-left: 0 !important; }
  .ci-section:has(> .ci-h1) > .ci-label,
  .ci-section:has(> .ci-h1) > .ci-h1 { width: auto; }
  .ci-section:has(> .ci-h1) > .ci-rule { width: 30px; }
  .ci-section:has(> .ci-h1) > .ci-h1 { font-size: clamp(2.6rem, 3.8vw, 3.8rem); max-width: 900px; text-wrap: balance; }
  .ci-section:has(> .ci-h1) > .ci-h1 br { display: none; }
  .ci-section:has(> .ci-h1) > :not(.ci-label):not(.ci-h1):not(.ci-rule) { margin-left: 0; max-width: 680px; }
  .ci-section:has(> .ci-h1) > .ci-section-img { width: 100%; max-width: 640px; height: 380px; margin: 0 0 2rem 0; }
}