/* ==========================================================
   DAS LAUSCHENDE HERZ — Wireframe-Layout  (v2)
   Neu: Hero mit Hintergrundbild, Atembilder, Duett-Layout
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  line-height: var(--zeilenhoehe);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 500; line-height: var(--zeilenhoehe-titel); }
h1 { font-size: var(--groesse-h1); }
h2 { font-size: var(--groesse-h2); margin-bottom: var(--raum-element); }
h3 { font-size: var(--groesse-h3); margin-bottom: 0.6rem; }
p  { margin-bottom: 1.4rem; max-width: 65ch; }
p:last-child { margin-bottom: 0; }
a  { color: var(--farbe-akzent); text-decoration: none; border-bottom: 1px solid var(--farbe-akzent-hauch); transition: border-color var(--uebergang); }
a:hover { border-color: var(--farbe-akzent); }
ul li { margin-bottom: 0.6rem; }

.vorzeile {
  display: block; font-size: 0.8rem; letter-spacing: var(--laufweite-klein);
  text-transform: uppercase; color: var(--farbe-text-leise); margin-bottom: 1.2rem;
}
.gross { font-size: var(--groesse-text-gross); }
.leise { color: var(--farbe-text-leise); font-size: 0.95rem; }

/* ---------- Kopf & Navigation ---------- */
.kopf {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--farbe-grund) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--farbe-linie);
}
.kopf-innen {
  max-width: var(--breite-weit); margin: 0 auto; padding: 1.1rem var(--raum-innen);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.marke { font-family: var(--schrift-titel); font-size: 1.25rem; color: var(--farbe-text); border: none; }
.nav { display: flex; gap: 2.2rem; align-items: center; }
.nav a { color: var(--farbe-text); border: none; font-size: 0.95rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--farbe-akzent); }

/* ---------- Buttons ---------- */
.button {
  display: inline-block; padding: 0.9rem 2.4rem;
  background: var(--farbe-akzent); color: var(--farbe-grund);
  border: none; border-radius: var(--radius);
  font-size: 1rem; letter-spacing: 0.03em; cursor: pointer;
  transition: background var(--uebergang);
}
.button:hover { background: var(--farbe-akzent-tief); }
.button--kopf { padding: 0.55rem 1.4rem; font-size: 0.9rem; }

/* ==========================================================
   HERO MIT HINTERGRUNDBILD
   ========================================================== */
.hero--voll {
  position: relative;
  min-height: calc(100svh - 4rem);   /* voller Bildschirm minus Kopfzeile */
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.hero-hintergrund { position: absolute; inset: 0; z-index: -2; }
.hero-hintergrund img,
.hero-hintergrund .bild-platzhalter { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    var(--hero-scrim-oben) 0%,
    var(--hero-scrim-mitte) 45%,
    var(--hero-scrim-unten) 100%);
}
.hero-inhalt { padding: var(--raum-abschnitt) var(--raum-innen); max-width: 44rem; }
.hero-inhalt h1 { margin-bottom: 1.2rem; }
.hero-inhalt .claim { font-family: var(--schrift-titel); font-size: 1.55rem; margin-bottom: 2.2rem; }
.hero-inhalt .untertitel { max-width: 34rem; margin: 0 auto 3rem; }
.hero-pfeil {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: var(--farbe-text-leise); font-size: 1.4rem; border: none;
}

/* ==========================================================
   ATEMBILDER — randlose Panoramen zwischen den Kapiteln
   ========================================================== */
.atem { width: 100%; height: var(--atem-hoehe); }
.atem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atem .bild-platzhalter { height: 100%; }

/* ==========================================================
   DUETT — Text und Hochformat-Bild asymmetrisch nebeneinander
   ========================================================== */
.duett {
  max-width: var(--breite-weit); margin: 0 auto;
  display: grid; grid-template-columns: 3fr 2fr;
  gap: clamp(2.5rem, 7vw, 6rem); align-items: center;
}
.duett--bild-links { grid-template-columns: 2fr 3fr; }
.duett--bild-links .bild { order: -1; }
@media (max-width: 760px) {
  .duett, .duett--bild-links { grid-template-columns: 1fr; }
  .duett--bild-links .bild { order: 0; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--raum-abschnitt) var(--raum-innen); }
.abschnitt-innen { max-width: var(--breite-lesespalte); margin: 0 auto; }
.abschnitt-innen--weit { max-width: var(--breite-weit); margin: 0 auto; }
.abschnitt--ton { background: var(--farbe-grund-ton); }
.abschnitt--dunkel { background: var(--farbe-grund-dunkel); color: var(--farbe-text-hell); }
.abschnitt--dunkel h2 { color: var(--farbe-text-hell); }
.abschnitt--dunkel .leise { color: var(--farbe-text-hell-leise); }

/* ---------- Die fünf Bewegungen ---------- */
.bewegung { margin-top: 4rem; }
.bewegung li {
  list-style: none; padding: 3.2rem 0; border-top: 1px solid var(--farbe-akzent-hauch);
}
.bewegung li:last-child { border-bottom: 1px solid var(--farbe-akzent-hauch); }
.bewegung h3 { font-size: 1.5rem; }

/* ---------- Wegschritte / Karten ---------- */
.schritte { margin-top: 3rem; }
.schritt {
  padding: 2.4rem 0; border-top: 1px solid var(--farbe-linie);
  display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem;
}
.schritt-name { font-family: var(--schrift-titel); font-size: 1.2rem; color: var(--farbe-akzent); }

.karte {
  border: 1px solid var(--farbe-linie); border-radius: var(--radius);
  padding: 2.5rem; margin-bottom: 2rem; background: var(--farbe-grund);
}
.karte .meta { color: var(--farbe-text-leise); font-size: 0.95rem; margin: 1rem 0; }

/* ---------- Person ---------- */
.person { display: grid; grid-template-columns: minmax(14rem, 2fr) 3fr; gap: 3.5rem; align-items: start; }
@media (max-width: 720px) { .person { grid-template-columns: 1fr; } }

/* ==========================================================
   BILDER & PLATZHALTER
   ========================================================== */
.bild { width: 100%; }
.bild img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); }
.bild-platzhalter {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, var(--farbe-platzhalter-a), var(--farbe-platzhalter-b));
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; padding: 1.5rem; text-align: center;
}
.bild-name { font-size: 0.85rem; letter-spacing: var(--laufweite-klein); text-transform: uppercase; color: var(--farbe-text-leise); }
.bild-format { font-size: 0.8rem; color: var(--farbe-text-leise); }
.bild-stimmung { font-size: 0.85rem; font-style: italic; color: var(--farbe-text-leise); max-width: 28rem; }
.bild--abstand { margin: 3.5rem 0 2rem; }
.format-3-2 { aspect-ratio: 3/2; }
.format-4-5 { aspect-ratio: 4/5; }

/* ---------- Vertrauen ---------- */
.vertrauen { text-align: center; }
.vertrauen p { max-width: 38rem; margin-left: auto; margin-right: auto; }

/* ---------- Wegweiser ---------- */
.wegweiser {
  max-width: var(--breite-lesespalte); margin: 0 auto;
  padding: var(--raum-abschnitt) var(--raum-innen);
  text-align: center;
}
.wegweiser::before {
  content: ""; display: block; width: 3rem; height: 1px;
  background: var(--farbe-akzent); margin: 0 auto 2.5rem;
}
.wegweiser .vorzeile { margin-bottom: 0.8rem; }
.wegweiser p { margin: 0 auto 1.8rem; }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 1rem; max-width: 26rem; margin-top: 2rem; }
.formular--zentriert { margin-left: auto; margin-right: auto; }
.formular input, .formular textarea {
  padding: 0.85rem 1rem; border: 1px solid var(--farbe-linie); border-radius: var(--radius);
  background: var(--farbe-grund); font: inherit; color: var(--farbe-text);
}
.formular textarea { min-height: 9rem; }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--farbe-linie); padding: 1.3rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--farbe-linie); }
.faq summary { font-family: var(--schrift-titel); font-size: 1.15rem; cursor: pointer; }
.faq details p { margin-top: 1rem; }

/* ---------- Preise ---------- */
.preise { margin: 1.5rem 0; }
.preise div { display: flex; justify-content: space-between; padding: 0.7rem 0; border-top: 1px solid var(--farbe-linie); }

/* ---------- Footer ---------- */
.fuss { background: var(--farbe-grund-dunkel); color: var(--farbe-text-hell-leise); padding: 4rem var(--raum-innen) 3rem; }
.fuss-innen { max-width: var(--breite-weit); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 3rem; justify-content: space-between; }
.fuss a { color: var(--farbe-text-hell-leise); border: none; display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
.fuss a:hover { color: var(--farbe-text-hell); }
.fuss .satz { font-family: var(--schrift-titel); color: var(--farbe-text-hell); max-width: 20rem; }

@media (max-width: 720px) {
  .nav { gap: 1.2rem; flex-wrap: wrap; }
  .schritt { grid-template-columns: 1fr; gap: 0.4rem; }
}