/* ==========================================================================
   CEx — Blockstile fuer den Baukasten
   --------------------------------------------------------------------------
   Jede Regel haengt an einer Blockklasse (.is-style-cex-*, .wp-block-*,
   .cex-contact-block). Keine dieser Klassen kommt auf den 33 migrierten
   Seiten vor, deshalb kann diese Datei dort nichts veraendern — und weil sie
   NICHT auf eine Seitenklasse angewiesen ist, gilt sie im Editor-Rahmen
   genauso wie auf der Seite. Beides ist Absicht.

   Farben, Schriftgroessen und Abstaende kommen aus theme.json. Hier stehen
   nur Form und Anordnung, damit Raoul jede Farbe und jeden Abstand weiter im
   Baukasten umstellen kann, ohne dass eine Regel von hier dazwischenfunkt.
   ========================================================================== */

/* --- Kicker ------------------------------------------------------------ */
.is-style-cex-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--wp--preset--color--muted);
}
.is-style-cex-eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: var(--wp--preset--color--accent);
}

/* --- Vorspann und Schlusssatz ------------------------------------------ */
.is-style-cex-lead {
  max-width: 66ch;
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.7;
  color: var(--wp--preset--color--muted);
}
.is-style-cex-outro {
  max-width: 76ch;
  padding-left: 20px;
  border-left: 3px solid var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.7;
  color: var(--wp--preset--color--muted);
}

/* --- Abschnittsueberschrift -------------------------------------------- */
.is-style-cex-section-title {
  max-width: 22ch;
  margin: 0 0 18px;
  font-size: var(--wp--preset--font-size--section);
  line-height: 1.08;
  letter-spacing: -.025em;
}

/* --- Nummer ------------------------------------------------------------ */
.is-style-cex-num {
  margin: 0 0 14px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  color: var(--wp--preset--color--accent);
  font-variant-numeric: tabular-nums;
}

/* --- Karten ------------------------------------------------------------ */
.wp-block-group.is-style-cex-card,
.wp-block-group.is-style-cex-card-dark,
.wp-block-group.is-style-cex-step {
  box-sizing: border-box;
  height: 100%;
  border-radius: 0;
  transition: transform .25s cubic-bezier(.85,0,0,1), border-color .25s cubic-bezier(.85,0,0,1);
}
.wp-block-group.is-style-cex-card {
  padding: clamp(24px, 2.4vw, 34px);
  background: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--hairline);
}
.wp-block-group.is-style-cex-card:hover {
  transform: translateY(-2px);
  border-color: rgba(30,35,39,.28);
}
.wp-block-group.is-style-cex-card-dark {
  padding: clamp(24px, 2.4vw, 34px);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
}
.wp-block-group.is-style-cex-card :where(h2,h3,h4),
.wp-block-group.is-style-cex-card-dark :where(h2,h3,h4) {
  margin: 0 0 10px;
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.25;
  letter-spacing: -.015em;
}
.wp-block-group.is-style-cex-card > p:last-child,
.wp-block-group.is-style-cex-card-dark > p:last-child { margin-bottom: 0; }

/* --- Vorgehensschritt: Nummer links, Text rechts ------------------------ */
.wp-block-group.is-style-cex-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 22px;
  align-items: start;
  padding: 0 0 30px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.wp-block-group.is-style-cex-step > .is-style-cex-num {
  grid-row: 1 / span 20;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--charcoal);
  font-size: .72rem;
}
.wp-block-group.is-style-cex-step > :not(.is-style-cex-num) { grid-column: 2; }

/* --- Dunkles Band ------------------------------------------------------- */
.wp-block-group.is-style-cex-band,
.wp-block-group.has-charcoal-background-color {
  color: var(--wp--preset--color--band-ink);
}
.wp-block-group.is-style-cex-band :where(h1,h2,h3,h4),
.wp-block-group.has-charcoal-background-color :where(h1,h2,h3,h4) { color: #fff; }
.wp-block-group.is-style-cex-band .is-style-cex-eyebrow,
.wp-block-group.has-charcoal-background-color .is-style-cex-eyebrow { color: var(--wp--preset--color--band-muted); }
.wp-block-group.is-style-cex-band .is-style-cex-lead,
.wp-block-group.has-charcoal-background-color .is-style-cex-lead { color: rgba(255,255,255,.74); }
.wp-block-group.is-style-cex-band .is-style-cex-num,
.wp-block-group.has-charcoal-background-color .is-style-cex-num { color: var(--wp--preset--color--accent-soft); }

/* --- FAQ (core/accordion) ---------------------------------------------- */
.wp-block-accordion.is-style-cex-faq { display: grid; gap: 0; }
.is-style-cex-faq .wp-block-accordion-item {
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.is-style-cex-faq .wp-block-accordion-heading {
  margin: 0;
  font-size: var(--wp--preset--font-size--large);
}
.is-style-cex-faq .wp-block-accordion-heading__toggle {
  width: 100%;
  padding: 26px 44px 26px 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.is-style-cex-faq .wp-block-accordion-heading__toggle-icon { color: var(--wp--preset--color--accent); }
.is-style-cex-faq .wp-block-accordion-panel { padding: 0 0 28px; }
.is-style-cex-faq .wp-block-accordion-panel p {
  max-width: 76ch;
  margin: 0 0 14px;
  color: var(--wp--preset--color--muted);
}
.is-style-cex-faq .wp-block-accordion-panel p:last-child { margin-bottom: 0; }

/* --- Querverweis-Kacheln ------------------------------------------------ */
.cex-cross-link {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--wp--preset--color--hairline);
  text-decoration: none;
  color: inherit;
  transition: transform .25s cubic-bezier(.85,0,0,1), border-color .25s cubic-bezier(.85,0,0,1);
}
.cex-cross-link:hover { transform: translateY(-2px); border-color: rgba(30,35,39,.28); }

/* --- Kontaktformular-Block ---------------------------------------------- */
.cex-contact-block { width: 100%; }
.cex-contact-block--full .cx-form,
.cex-contact-block--hero .hero__card { margin: 0; }

/* --- Editor-Rahmen: der Blockeinschub soll aussehen wie die Seite -------- */
.editor-styles-wrapper .is-style-cex-step > .is-style-cex-num { color: var(--wp--preset--color--charcoal); }