/* ===================================================
   Herzverwandt – gemeinsames Stylesheet für alle Seiten
   Farben, Typografie, Navigation, Footer, Bausteine
   =================================================== */
:root{
  --pflaume:#3A2334;
  --pflaume-tief:#2B1826;
  --ivory:#FBF9F6;
  --ivory-warm:#F5F1EC;
  --rose:#C08A9B;
  --rose-tief:#A96C80;
  --bronze:#A8825F;
  --tinte:#2E2429;
  --grau:#6E6068;
  --linie:rgba(58,35,52,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Mulish',sans-serif;
  color:var(--tinte);
  background:var(--ivory);
  line-height:1.7;
  font-size:17px;
}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.15;letter-spacing:.005em}
a{color:var(--rose-tief)}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.schmal{max-width:760px}

/* ---------- Navigation ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,249,246,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:1080px;margin:0 auto}
.wordmark{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.5rem;
  color:var(--pflaume);text-decoration:none;letter-spacing:.02em;
  display:flex;align-items:center;gap:10px;
}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{color:var(--tinte);text-decoration:none;font-weight:500;font-size:.92rem;letter-spacing:.02em}
.nav-links a:hover,.nav-links a.aktiv{color:var(--rose-tief)}
.btn{
  display:inline-block;background:var(--pflaume);color:var(--ivory);text-decoration:none;
  font-family:'Mulish',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.03em;
  padding:14px 32px;border-radius:2px;border:none;cursor:pointer;
  transition:background .2s ease;
}
.btn:hover{background:var(--pflaume-tief)}
.btn:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.btn.klein{padding:10px 22px;font-size:.86rem}
.btn.hell{background:var(--ivory);color:var(--pflaume)}
.btn.hell:hover{background:#fff}
@media(max-width:820px){.nav-links a:not(.btn){display:none}}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf{padding:88px 0 56px;text-align:center;border-bottom:1px solid var(--linie)}
.seitenkopf h1{font-size:clamp(2.3rem,4.8vw,3.4rem);color:var(--pflaume);margin-bottom:16px}
.seitenkopf p{color:var(--grau);max-width:36em;margin:0 auto;font-size:1.1rem}
.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:24px;display:block;
}
.kicker{font-size:.76rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze);margin-bottom:18px}

/* ---------- Sektionen & Text ---------- */
section{padding:96px 0}
h2{font-size:clamp(1.9rem,3.8vw,2.6rem);color:var(--pflaume);margin-bottom:22px;max-width:20em}
h3{font-size:1.5rem;color:var(--pflaume);margin-bottom:12px}
.intro{max-width:38em;color:var(--grau);margin-bottom:52px;font-size:1.08rem}
.zentriert{text-align:center}
.zentriert h2,.zentriert .intro{margin-left:auto;margin-right:auto}
.fliesstext p{margin-bottom:20px;color:var(--grau);max-width:42em}
.fliesstext h2{margin-top:44px}
.fliesstext h3{margin-top:32px}

/* ---------- Hero (Startseite) ---------- */
header.hero{padding:104px 0 96px;position:relative;overflow:hidden}
.hero-inner{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:2}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.1rem);color:var(--pflaume);margin-bottom:28px}
.hero h1 em{font-style:italic;color:var(--rose-tief)}
.lead{font-size:1.16rem;color:var(--grau);max-width:36em;margin:0 auto 44px}
.hero-kreise{position:absolute;inset:0;pointer-events:none;opacity:.5}
.hero-kreise svg{position:absolute}
.kreis-links{left:-140px;top:40px;width:420px;height:420px}
.kreis-rechts{right:-160px;bottom:-60px;width:480px;height:480px}

/* ---------- Formular ---------- */
.signup{max-width:520px;margin:0 auto}
.signup form{display:flex;gap:0;border:1px solid var(--pflaume);border-radius:2px;background:#fff;padding:5px}
.signup input[type=email]{
  flex:1;min-width:0;padding:12px 18px;font-size:1rem;font-family:'Mulish',sans-serif;
  border:none;background:transparent;color:var(--tinte);
}
.signup input[type=email]:focus-visible{outline:2px solid var(--rose);outline-offset:-2px;border-radius:2px}
.signup .hinweis{font-size:.84rem;color:var(--grau);margin-top:14px}
.signup .erfolg{display:none;background:var(--pflaume);color:var(--ivory);padding:18px 24px;border-radius:2px;font-weight:500}
@media(max-width:520px){
  .signup form{flex-direction:column;gap:8px;border:none;padding:0;background:transparent}
  .signup input[type=email]{border:1px solid var(--pflaume);border-radius:2px;background:#fff;padding:14px 18px}
}

/* Kontaktformular */
.kontaktform{max-width:560px}
.kontaktform label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--pflaume)}
.kontaktform input,.kontaktform textarea{
  width:100%;padding:13px 16px;font-size:1rem;font-family:'Mulish',sans-serif;
  border:1px solid var(--linie);border-radius:2px;background:#fff;color:var(--tinte);margin-bottom:22px;
}
.kontaktform input:focus-visible,.kontaktform textarea:focus-visible{outline:2px solid var(--rose)}
.kontaktform textarea{min-height:150px;resize:vertical}
.kontaktform .erfolg{display:none;background:var(--pflaume);color:var(--ivory);padding:18px 24px;border-radius:2px;font-weight:500}

/* ---------- Zahlen-Band ---------- */
.band{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--ivory-warm)}
.band .wrap{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.band > .wrap > div{padding:44px 28px;border-right:1px solid var(--linie)}
.band > .wrap > div:last-child{border-right:none}
.band strong{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:2.6rem;color:var(--pflaume);line-height:1.1;margin-bottom:6px}
.band span{font-size:.9rem;color:var(--grau);max-width:22em;display:inline-block}
@media(max-width:760px){
  .band .wrap{grid-template-columns:1fr}
  .band > .wrap > div{border-right:none;border-bottom:1px solid var(--linie);padding:32px 20px}
  .band > .wrap > div:last-child{border-bottom:none}
}

/* ---------- Karten-Raster ---------- */
.raster-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie)}
.raster-3 .karte{background:var(--ivory);padding:40px 32px}
.raster-3 .karte h3{font-size:1.5rem;margin-bottom:14px}
.raster-3 .karte p{font-size:.98rem;color:var(--grau)}
.karte .nummer{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1rem;
  color:var(--rose-tief);display:block;margin-bottom:22px;letter-spacing:.06em;
}
@media(max-width:860px){.raster-3{grid-template-columns:1fr}}

.raster-2{display:grid;grid-template-columns:1fr 1fr;gap:56px 64px;max-width:920px}
.raster-2 .karte{padding-top:26px;border-top:1px solid var(--linie)}
.raster-2 .karte h3{font-size:1.55rem;margin-bottom:12px}
.raster-2 .karte p{color:var(--grau);font-size:.98rem}
.tag{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rose-tief);display:block;margin-bottom:14px;
}
@media(max-width:760px){.raster-2{grid-template-columns:1fr;gap:40px}}

/* ---------- Phasen ---------- */
.phasen{background:var(--pflaume);color:var(--ivory)}
.phasen h2{color:var(--ivory)}
.phasen .kicker{color:var(--rose)}
.phasen .intro{color:rgba(251,249,246,.72)}
.phasen-liste{max-width:820px}
.phase{
  display:grid;grid-template-columns:88px 1fr;gap:32px;align-items:baseline;
  padding:34px 0;border-top:1px solid rgba(251,249,246,.16);
}
.phase:last-child{border-bottom:1px solid rgba(251,249,246,.16)}
.phase .nr{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.9rem;color:var(--rose)}
.phase h3{font-size:1.45rem;margin-bottom:8px;color:var(--ivory)}
.phase p{color:rgba(251,249,246,.72);max-width:38em;font-size:.98rem}
@media(max-width:640px){.phase{grid-template-columns:1fr;gap:6px}}

/* ---------- Preis ---------- */
.preis-karte{
  max-width:560px;margin:0 auto;border:1px solid var(--pflaume);padding:48px 44px;text-align:center;background:#fff;
}
.preis-karte .betrag{font-family:'Cormorant Garamond',serif;font-size:3.4rem;color:var(--pflaume);line-height:1}
.preis-karte .betrag small{font-size:1.1rem;color:var(--grau);font-family:'Mulish',sans-serif}
.preis-karte ul{list-style:none;margin:28px 0 32px;text-align:left}
.preis-karte li{padding:10px 0 10px 30px;border-bottom:1px solid var(--linie);position:relative;color:var(--grau);font-size:.98rem}
.preis-karte li::before{content:"—";position:absolute;left:0;color:var(--rose-tief)}
.preis-karte li:last-child{border-bottom:none}

/* ---------- Über uns / Zitat / Foto ---------- */
.ueber-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.zitat{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
  font-size:1.6rem;line-height:1.35;color:var(--pflaume);
  margin-top:34px;padding-top:30px;border-top:1px solid var(--linie);
}
.platzhalter-foto{
  aspect-ratio:4/5;border:1px solid var(--linie);background:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:28px;font-size:.9rem;color:var(--grau);
}
@media(max-width:820px){.ueber-grid{grid-template-columns:1fr;gap:44px}}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--linie);max-width:760px;margin:0 auto}
details:first-of-type{border-top:1px solid var(--linie)}
details summary{
  cursor:pointer;padding:24px 44px 24px 0;font-family:'Cormorant Garamond',serif;
  font-weight:500;font-size:1.35rem;color:var(--pflaume);list-style:none;position:relative;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"+";position:absolute;right:4px;top:20px;font-family:'Mulish',sans-serif;
  font-size:1.3rem;font-weight:300;color:var(--rose-tief);
}
details[open] summary::after{content:"−"}
details p{padding:0 0 26px;color:var(--grau);max-width:42em;font-size:.98rem}

/* ---------- Abschluss-CTA-Band ---------- */
.cta-band{background:var(--ivory-warm);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);text-align:center}
.cta-band h2{margin-left:auto;margin-right:auto}
.cta-band p{color:var(--grau);max-width:34em;margin:0 auto 32px}

/* ---------- Footer ---------- */
footer{background:var(--pflaume-tief);color:rgba(251,249,246,.75);padding:56px 0;font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer .wordmark{color:var(--ivory);margin-bottom:10px;font-size:1.35rem}
footer .disclaimer{max-width:44em;line-height:1.7}
footer a{color:var(--rose)}
footer .fusslinks{display:flex;gap:20px;margin-top:8px;flex-wrap:wrap}
footer .fusslinks a{text-decoration:none;color:rgba(251,249,246,.75)}
footer .fusslinks a:hover{color:var(--rose)}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}