/* ==========================================================================
   Architequus – Baukasten: wiederverwendbare Sektions-Templates
   Baut auf styles.css (Tokens/Header/Footer) und quelle.css
   (Sidebar, Farb-Bänder, .section-inner, .reveal, .ph-Platzhalter, .text-link)
   auf. Jeder Baustein ist unabhängig einsetz- und kombinierbar.
   ========================================================================== */

/* Kleine Kennzeichnung, welcher Baustein hier verwendet wird – rein zur
   Orientierung für das Team, unauffällig genug für den Live-Betrieb. */
.block-kicker{
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-line);
  margin: 0 0 1.4rem;
}

.block-num{
  display:block;
  font-family: var(--font-display);
  color: var(--color-accent);
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.lede-accent{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-accent);
  margin: 0 0 0.9rem;
}

/* ==========================================================================
   1) HERO-FRAGE – Bild bündig zum Bildschirmrand, Text linksbündig,
      Frage als Überschrift statt Titel
   ========================================================================== */
.block-hero{
  background: var(--color-bg-alt);
  display:flex;
  flex-direction:column;
}
.block-hero__text{
  padding: clamp(2.5rem, 7vw, 4rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 5vw, 3rem);
}
.block-hero__question{
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  line-height:1.35;
  margin: 0 0 1.3rem;
  max-width: 16ch;
}
.block-hero__divider{
  width: 48px;
  height: 1px;
  background: var(--color-line);
  margin: 0 0 1.3rem;
}
.block-hero__body{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  max-width: 34ch;
  margin:0;
}
.block-hero__image{ position:relative; min-height: 260px; }
.block-hero__image .ph{ width:100%; height:100%; border:none; border-radius:0; }

@media (min-width: 700px){
  .block-hero{ flex-direction:row; align-items:stretch; }
  .block-hero__text{
    flex: 0 0 46%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  }
  .block-hero__image{ flex: 1 1 54%; }
  .block-hero__image::before{
    content:"";
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(to right, var(--color-bg-alt) 0%, rgba(236,227,211,0) 22%);
  }
}

/* ==========================================================================
   2) BILD-TEXT SPLIT – halbe/halbe Fläche, Bild bündig zur äußeren Kante.
      Modifier .img-right stellt Bild und Text auf den Kopf.
   ========================================================================== */
.block-split{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.block-split__image{ position:relative; min-height: 220px; }
.block-split__image .ph{ width:100%; height:100%; }
.block-split__text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
}
.block-split__heading{
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0 0 1rem;
}
.block-split__divider{
  width: 32px; height:1px; background: var(--color-accent);
  margin: 0 0 1rem;
}
.block-split p{
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  line-height:1.7;
  margin: 0 0 0.9rem;
}

@media (min-width: 700px){
  .block-split{ grid-template-columns: 1fr 1fr; align-items:stretch; gap: 0; }
  .block-split.img-right .block-split__image{ order:2; }
  .block-split.img-right .block-split__text{ order:1; }
}

/* ==========================================================================
   3) ZENTRIERTER TEXTBLOCK – nummeriert, ohne Bild, für ruhige Zäsuren
   ========================================================================== */
.block-centered{
  text-align:center;
  max-width: 640px;
  margin: 0 auto;
}
.block-centered__heading{
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0 0 1.6rem;
}
.block-centered p{
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  line-height: 1.8;
  margin: 0 auto 1.1rem;
  max-width: 56ch;
}
.block-centered .text-link{ justify-content:center; margin-top: 0.6rem; }

/* ==========================================================================
   4) TRIO – drei nummerierte Karten mit Bild, für parallele Gedanken
   ========================================================================== */
.block-trio{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2.6rem;
}
@media (min-width: 700px){
  .block-trio{ grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.block-trio__card .block-num{ margin-bottom: 0.3rem; }
.block-trio__heading{
  font-family: var(--font-display);
  font-weight:400;
  font-size: 1.2rem;
  line-height:1.3;
  margin: 0 0 1rem;
}
.block-trio__card p{
  color: var(--color-ink-soft);
  font-size: 0.94rem;
  line-height:1.65;
  margin: 0.9rem 0 0.9rem;
}

/* ==========================================================================
   5) TRIPTYCHON – Text | Bild | Text, für gegenüberstellende Gedanken
   ========================================================================== */
.block-triptych{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items:center;
}
@media (min-width: 900px){
  .block-triptych{ grid-template-columns: 1fr 1.1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
}
.block-triptych__image .ph{ width:100%; }
.block-triptych__heading{
  font-family: var(--font-display);
  font-weight:400;
  font-size: 1.3rem;
  margin: 0 0 1rem;
}
.block-triptych p{
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height:1.7;
  margin: 0 0 0.9rem;
}
.block-triptych__accent{
  color: var(--color-accent);
  font-style: italic;
}

/* ==========================================================================
   6) BILD-PAUSE – vollflächiges Bild ohne Text, als ruhiger Szenenwechsel
   ========================================================================== */
.block-image-break{ min-height: 320px; position:relative; }
.block-image-break .ph{ width:100%; height:100%; border-radius:0; }
@media (min-width: 700px){
  .block-image-break{ min-height: 420px; }
}