/* ===== Bildwelt-Ergänzungen für index-neu.html =====
   Lädt ZUSÄTZLICH zu style.css. style.css bleibt unverändert. */

/* ---------- Hero: Desktop = Text auf Foto (wie Claus), Mobil = Bild oben/Text unten ---------- */
.hero-mono{position:relative;padding-top:76px}
.hero-mono-bild{display:block;width:100%;height:auto;object-position:center}
.hero-mono-text{padding:32px clamp(24px,6vw,90px) 48px}
.hero-mono-inner{max-width:640px}
.hero-mono-inner h1{max-width:16em}
.hero-mono-inner h1 em{font-style:italic;color:inherit;text-decoration:underline;text-decoration-color:var(--terra);text-decoration-thickness:3px;text-underline-offset:6px}
.hero-claim{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:.95rem;font-weight:600;color:var(--petrol)}
.hero-claim-dot{width:8px;height:8px;border-radius:50%;background:var(--terra);flex-shrink:0}

@media (min-width:681px){
  .hero-mono{padding-top:76px;display:grid}
  .hero-mono-bild{grid-column:1;grid-row:1;align-self:start;width:100%;height:clamp(760px,72vh,860px);object-fit:cover;object-position:75% 15%;z-index:0}
  .hero-mono::before{
    content:'';grid-column:1;grid-row:1;align-self:start;width:100%;height:clamp(760px,72vh,860px);z-index:1;
    background:linear-gradient(100deg, rgba(15,35,37,.72) 0%, rgba(15,35,37,.55) 32%, rgba(15,35,37,.15) 58%, rgba(15,35,37,0) 72%);
  }
  .hero-mono-text{grid-column:1;grid-row:1;position:relative;z-index:2;padding:96px clamp(24px,6vw,90px);width:100%}
  .hero-mono-inner{max-width:620px}
  .hero-mono-inner .eyebrow{color:var(--sand)}
  .hero-mono-inner h1{color:#fff}
  .hero-mono-inner .lead{color:rgba(255,255,255,.92)}
  .hero-claim{color:#fff}
  .mehr-zeile{color:var(--sand)!important}
  .hero-mono-inner .btn-secondary{color:#fff;border-color:rgba(255,255,255,.8);background:rgba(15,35,37,.35)}
  .hero-mono-inner .btn-secondary:hover{border-color:#fff;background:rgba(15,35,37,.55)}
}
@media (max-width:680px){
}

/* ---------- Story: großes Editorial-Bild statt rundem Foto ---------- */
.foto-editorial{
  display:block;width:100%;height:auto;
  border-radius:var(--radius);
  box-shadow:0 20px 45px rgba(23,76,79,.14);
}
#ueber-heike .foto-figure{align-items:stretch;text-align:left}
#ueber-heike .foto-caption{align-self:center;text-align:center}

/* Bühnen-Bild klein am Ende der Textspalte */
.buehne-figure{margin:2.4em auto 0;max-width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.buehne-figure img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 14px 34px rgba(23,76,79,.14)}
.buehne-figure .foto-caption{margin-top:14px}

/* ---------- Story: normales Rechteckbild statt Kreis ---------- */
.foto-normal{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:0 20px 45px rgba(23,76,79,.14)}

/* ---------- Einzelbild-Abschnitte (Das echte Leben, Möglichkeiten) ---------- */
.leben-einzelbild{margin:clamp(48px,7vw,80px) auto 0;max-width:520px;text-align:center}
.leben-einzelbild img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 24px 50px rgba(23,76,79,.16)}

/* Zwei oder drei Bilder nebeneinander, gleich groß */
.einzelbild-duo{
  display:flex;gap:24px;justify-content:center;flex-wrap:wrap;
  margin:clamp(48px,7vw,80px) auto 0;max-width:1140px;
}
.einzelbild-duo figure{margin:0;flex:1 1 280px;max-width:360px}
.einzelbild-duo img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 20px 45px rgba(23,76,79,.15)}

/* ---------- Vollbreiter Bild-Break (Weite) ---------- */
.bild-break{max-width:1700px;margin:0 auto}
.bild-break img{
  display:block;width:100%;height:auto;
  aspect-ratio:21/10;
  object-fit:cover;object-position:center 55%;
}
/* Normale Bildproportion für Breaks, bei denen die Person im Vordergrund steht (nicht die Landschaft) */
.bild-break-normal{max-width:640px}
.bild-break-normal img{aspect-ratio:auto}

/* ---------- Woran ich glaube: Foto + Text ---------- */
.haltung-grid{display:grid;grid-template-columns:340px 1fr;gap:clamp(36px,6vw,72px);align-items:center}
.haltung-grid .foto-round{max-width:280px}
@media (max-width:760px){
  .haltung-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .haltung-grid ul{text-align:left}
}