/* Elaya Spirit Healing - Website-Stile
   Quelle: Entwurf B2, freigegeben 04.09.2026.
   Die Markenfarben im :root-Block sind Fallback; das Layout ueberschreibt sie
   mit den Werten aus den globalen Einstellungen im Control Panel. */

:root{
  --gold:#BC9410;
  --gold-dark:#7D5F08;
  --rose:#9A1915;
  --wald:#475929;

  --cream:#F7F3E8;      /* Grundflaeche, heller Gold-Tint */
  --cream-deep:#F2EACF; /* 20% Gold */
  --wald-tint:#E2E7DA;  /* sanfter Waldgruen-Tint */
  --rose-tint:#F3E2E1;  /* sanfter Rose-Tint */
  --paper:#FFFDF8;

  --ink:#3B3A31;
  --ink-soft:#6C6A5C;
  --line:rgba(188,148,16,.32);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Jost',system-ui,sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.8;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:'Cinzel',Georgia,serif;font-weight:500;line-height:1.25;letter-spacing:.01em}
h2{font-size:clamp(26px,3.4vw,40px);color:var(--wald)}
h3{font-size:clamp(19px,2vw,23px);color:var(--wald)}

p + p{margin-top:1.05em}

.wrap{max-width:1200px;margin:0 auto;padding:0 26px}
.narrow{max-width:780px;margin:0 auto}

section{scroll-margin-top:78px}
.band{padding:clamp(66px,8vw,116px) 0}
.band-cream{background:var(--cream)}
.band-paper{background:var(--paper)}
.band-wald{background:var(--wald-tint)}
.band-rose{background:var(--rose-tint)}
.band-golden{background:var(--cream-deep)}

/* ---------- Kleinteile ---------- */
.eyebrow{
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:400;
}
.rule{width:64px;height:1px;background:var(--gold);border:0;margin:22px 0}
.rule.center{margin-left:auto;margin-right:auto}
.lead{font-size:clamp(18px,2vw,20px);line-height:1.85}
.sec-head{margin-bottom:clamp(34px,4vw,54px)}
.sec-head.center{text-align:center}
.sec-head.center .rule{margin-left:auto;margin-right:auto}
.sec-head h2{margin-top:10px}

.btn{
  display:inline-block;
  background:var(--gold);color:var(--ink);
  font-size:14px;letter-spacing:.15em;text-transform:uppercase;font-weight:400;
  padding:14px 32px;border:1px solid var(--gold);
  transition:background .25s ease,color .25s ease;
}
.btn:hover{background:transparent;color:var(--gold-dark)}
.btn-ghost{background:transparent;color:var(--gold-dark)}
.btn-ghost:hover{background:var(--gold);color:var(--ink)}
.btn-light{background:transparent;color:#F7F3E8;border-color:rgba(247,243,232,.7)}
.btn-light:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

.textlink{
  font-size:14px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-dark);border-bottom:1px solid var(--line);
  padding-bottom:3px;transition:border-color .25s ease;
}
.textlink:hover{border-color:var(--gold)}

/* ---------- Navigation ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(247,243,232,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* Nur vertikal setzen: die Kurzform padding:12px 0 hat das seitliche
   padding von .wrap ueberschrieben (gleiche Spezifitaet, spaetere Regel),
   wodurch das Logo bündig am Bildschirmrand klebte. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:12px;padding-bottom:12px}
.nav .brand img{height:54px;width:auto}
.nav ul{display:flex;align-items:center;gap:20px;list-style:none}
.nav ul a{
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:400;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease;
  white-space:nowrap;
}
.nav ul a:hover{color:var(--gold-dark);border-bottom-color:var(--gold)}
.burger{
  display:none;background:none;border:0;cursor:pointer;
  padding:8px;line-height:0;
}
.burger span{display:block;width:26px;height:1.5px;background:var(--wald);margin:5px 0}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(84vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.hero picture,.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 42%}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(38,42,26,.84) 0%,rgba(38,42,26,.56) 38%,rgba(38,42,26,.16) 70%,rgba(38,42,26,.26) 100%);
}
.hero .hero-inner{position:relative;z-index:2;width:100%;padding:0 0 clamp(56px,7vw,96px)}
.hero .hero-text{max-width:720px}
.hero .eyebrow{color:#FBF8EF;font-size:14.5px;font-weight:400;letter-spacing:.2em;text-shadow:0 1px 4px rgba(30,32,20,.85),0 2px 18px rgba(30,32,20,.8)}
.hero h1{
  font-size:clamp(32px,5.4vw,66px);
  color:#F7F3E8;margin:18px 0 0;
  text-shadow:0 2px 24px rgba(30,32,20,.45);
}
.hero .sub{
  font-size:clamp(17px,1.9vw,21px);color:#F0EBDC;font-weight:300;
  letter-spacing:.04em;margin-top:16px;
  text-shadow:0 1px 12px rgba(30,32,20,.7);
}
.hero .btn{margin-top:34px}
.hero .hero-rule{width:70px;height:1px;background:#D9BC5E;border:0;margin:26px 0 0}

/* ---------- Intro / Ueber mich ---------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,64px);align-items:center}
.split img{width:100%;height:100%;object-fit:cover}
.figure-frame{position:relative;padding:10px;background:var(--paper);box-shadow:0 1px 0 var(--line)}
.figure-frame img{aspect-ratio:4/3}
.figure-tall img{aspect-ratio:3/4}

.pullquote{
  font-family:'Cinzel',Georgia,serif;font-size:clamp(19px,2.2vw,25px);
  color:var(--gold-dark);line-height:1.5;margin-top:30px;
}

/* ---------- Angebote ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:26px}
.card{
  background:var(--paper);
  display:flex;flex-direction:column;
  border:1px solid rgba(188,148,16,.16);
  transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(71,89,41,.10)}
.card .thumb{aspect-ratio:4/3;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:19px}
.card .kicker{font-size:14px;font-style:italic;color:var(--gold-dark);margin-top:6px}
.card hr{width:44px;height:1px;background:var(--gold);border:0;margin:16px 0 14px}
.card p{font-size:16px;line-height:1.75;color:var(--ink-soft)}
.card .textlink{margin-top:auto;padding-top:22px;align-self:flex-start;border-bottom:0}
.card .textlink span{border-bottom:1px solid var(--line);padding-bottom:3px}

#einzelbegleitung .thumb img{object-position:50% 18%}
#schwangerschaft .thumb img{object-position:50% 70%}

/* ---------- Wie ich arbeite ---------- */
.two-col{columns:2;column-gap:52px}
.two-col p{break-inside:avoid}
.frage,
#arbeitsweise .narrow h3,
.narrow .bard-text h3{
  font-family:'Cinzel',Georgia,serif;color:var(--wald);
  font-size:20px;margin:34px 0 14px;
}

/* ---------- Rueckblick / Aktivitaetenliste ---------- */
.aktivitaeten{display:grid;grid-template-columns:1fr;gap:14px}
.aktivitaet{
  background:var(--paper);
  border:1px solid rgba(188,148,16,.16);
  border-left:3px solid var(--gold);
  padding:26px 26px 28px;
  display:grid;grid-template-columns:1fr;gap:14px 34px;align-items:start;
}
.aktivitaet .zeit{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.aktivitaet .zeit-badge{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dark);background:var(--cream);
  border:1px solid rgba(188,148,16,.3);
  padding:6px 12px;line-height:1.4;
}
.aktivitaet .zeit-sub{font-size:14.5px;font-style:italic;color:var(--ink-soft);line-height:1.5}
.aktivitaet h3{font-size:20px}
.aktivitaet .ort{
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dark);margin-top:9px;line-height:1.7;
}
.aktivitaet .themen{
  font-size:16px;line-height:1.75;color:var(--ink-soft);
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(188,148,16,.16);
}
.aktivitaet .themen-label{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dark);margin-right:12px;
}
.aktivitaet.ghost{
  grid-template-columns:1fr;
  background:transparent;
  border-style:dashed;border-left-style:dashed;
  border-color:rgba(188,148,16,.4);
  border-left-color:rgba(188,148,16,.4);
  padding:22px 26px;margin-top:8px;
  opacity:.62;text-align:center;
}
.aktivitaet.ghost p{font-size:15.5px;font-style:italic;color:var(--ink-soft)}
.beispiel-badge{
  align-self:flex-start;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose);border:1px solid rgba(154,25,21,.3);
  padding:4px 10px;line-height:1.4;
}

/* ---------- Stimmen ---------- */
.stimmen-icon{display:block;width:46px;height:auto;color:var(--gold);margin:0 auto 18px}
.stimmen{display:grid;grid-template-columns:1fr;gap:18px}
.stimme{
  background:var(--paper);padding:24px 24px 26px;
  border-top:2px solid var(--rose);
  display:flex;flex-direction:column;
}
.stimme .platzhalter{
  align-self:flex-start;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose);border:1px solid rgba(154,25,21,.3);
  padding:4px 10px;margin-bottom:13px;line-height:1.4;
}
.stimme .stimme-text{font-size:16.5px;line-height:1.7;color:var(--ink)}
.stimme .wer{
  margin-top:auto;padding-top:18px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);
}
.stimme .beispiel-badge{margin-bottom:13px}
.stimme .stimme-kopf{display:flex;align-items:center;gap:14px;margin-bottom:15px}
.stimme .stimme-kopf .beispiel-badge{margin-bottom:0;align-self:center}
.stimme .stimme-thumb{flex:0 0 80px;width:80px;height:80px;overflow:hidden}
.stimme .stimme-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.stimme.is-platzhalter,.stimme.is-beispiel{border-top-color:rgba(154,25,21,.4)}
.stimme.is-platzhalter .stimme-text,.stimme.is-beispiel .stimme-text{color:var(--ink-soft);font-style:italic}

/* ---------- Naechster Termin ---------- */
.termin-banner{
  background:var(--paper);
  border:1px solid rgba(188,148,16,.2);
  border-left:3px solid var(--gold);
  padding:clamp(28px,3.4vw,42px) clamp(26px,3vw,40px);
  display:grid;grid-template-columns:1fr;gap:22px;align-items:center;
}
.termin-banner .t-titel{font-family:'Cinzel',Georgia,serif;font-size:clamp(20px,2.2vw,25px);color:var(--wald);line-height:1.4}
.termin-banner .t-zuletzt{
  font-size:15.5px;color:var(--ink-soft);margin-top:12px;
  padding-top:12px;border-top:1px solid rgba(188,148,16,.16);
}
.termin-banner .t-zuletzt b{font-weight:500;color:var(--gold-dark)}
.termin-banner .t-themen{font-size:16px;line-height:1.75;color:var(--ink-soft);margin-top:12px}
.termin-banner > *{min-width:0}
.termin-banner .btn{justify-self:start}

/* ---------- Rueckblick: Zeitstrahl ---------- */
.frisch-band{
  background:var(--paper);border:1px solid rgba(188,148,16,.2);
  border-left:3px solid var(--gold);
  padding:16px 22px;margin-bottom:34px;
  font-size:16px;color:var(--ink-soft);
}
.frisch-band b{font-family:'Cinzel',Georgia,serif;font-weight:500;color:var(--wald);margin-right:8px}
.strahl{list-style:none;position:relative;padding-left:34px}
.strahl::before{
  content:"";position:absolute;left:6px;top:9px;bottom:9px;
  width:1px;background:rgba(188,148,16,.36);
}
.st{position:relative;padding:0 0 34px}
.st:last-child{padding-bottom:0}
.st::before{
  content:"";position:absolute;left:-34px;top:8px;
  width:13px;height:13px;border-radius:50%;
  background:var(--cream-deep);border:1px solid var(--gold);
}
.st--frisch::before{background:var(--gold);box-shadow:0 0 0 4px rgba(188,148,16,.16)}
.st-zeit{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dark);line-height:1.6;
}
.st-titel{font-size:20px;margin-top:7px}
.st-eck{font-size:14.5px;font-style:italic;color:var(--ink-soft);margin-top:6px}
.st-themen{font-size:16px;line-height:1.75;color:var(--ink-soft);margin-top:10px}
.st.ghost .st-titel{font-size:15.5px;font-style:italic;font-family:'Jost',sans-serif;color:var(--ink-soft);font-weight:300}
.st.ghost::before{background:transparent;border-style:dashed}

/* ---------- Seelenbilder-Slider ---------- */
/* Seelenbilder kommen quer und hochformat gemischt (Mail Frau Bantel 04.09.).
   Deshalb wird das Bild vollstaendig in die Buehne eingepasst und nicht formatfuellend
   beschnitten: ein Seelenbild ist ein Werk und soll nicht angeschnitten werden. Die
   Buehne traegt dafuer ein dunkles Passepartout, auf dem beide Formate stehen koennen
   und die helle Bildunterschrift in jedem Fall lesbar bleibt. */
.sb-buehne{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--wald)}
.sb-folie{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.sb-folie.aktiv{opacity:1;pointer-events:auto}
.sb-folie img{width:100%;height:100%;object-fit:contain}
.sb-text{
  position:absolute;left:0;right:0;bottom:0;
  padding:30px 26px 22px;
  background:linear-gradient(to top,rgba(38,42,26,.86) 0%,rgba(38,42,26,.6) 55%,transparent 100%);
  color:#F3EFE2;
}
.sb-text .sb-titel{font-family:'Cinzel',Georgia,serif;font-size:17px;color:#F7F3E8;letter-spacing:.02em}
.sb-text p{font-size:15.5px;line-height:1.65;margin-top:5px;color:#E6E1D2}
.sb-marke{
  display:inline-block;margin-left:10px;vertical-align:middle;
  font-family:'Jost',sans-serif;font-weight:300;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#F0E4B8;border:1px solid rgba(240,228,184,.5);padding:3px 8px;line-height:1.3;
}
.sb-punkte{list-style:none;display:flex;justify-content:center;gap:4px;margin-top:20px}
/* Der Punkt bleibt optisch 10px klein, die Schaltflaeche darum ist 24px gross,
   damit sie sich auf dem Telefon zuverlaessig treffen laesst. */
.sb-punkte button,
.stimmen-punkte button{
  width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.sb-punkte button::before,
.stimmen-punkte button::before{
  content:"";width:10px;height:10px;border-radius:50%;
  background:transparent;border:1px solid var(--gold);
  transition:background .25s ease;
}
.sb-punkte button.aktiv::before,
.stimmen-punkte button.aktiv::before{background:var(--gold)}
.sb-hinweis{font-size:13.5px;font-style:italic;color:var(--ink-soft);text-align:center;margin-top:16px}

/* ---------- Stimmen: grosse Stimmen plus Datenpunkte ---------- */
/* Mehrere lange Stimmen wechseln sich ab. Ohne JavaScript stehen sie untereinander,
   erst das Skript stapelt sie und blendet sie ineinander. Durch das Stapeln im selben
   Rasterfeld richtet sich die Hoehe nach der laengsten Stimme, der Abschnitt springt
   beim Wechsel also nicht. */
.stimmen-slider{display:grid;gap:18px}
/* Gestapelt richtet sich die Hoehe nach der jeweils sichtbaren Stimme und wandert
   beim Wechsel weich mit. Ohne das stuende unter der kuerzeren Stimme der Leerraum
   der laengeren, auf dem Telefon ein halber Bildschirm. */
.stimmen-slider.gestapelt{gap:0;align-items:start;overflow:hidden;transition:height .5s ease}
.stimmen-slider.gestapelt > .stimme-gross{
  grid-area:1/1;opacity:0;transition:opacity 1.1s ease;pointer-events:none;
}
.stimmen-slider.gestapelt > .stimme-gross.aktiv{opacity:1;pointer-events:auto}
/* Die Steuerungszeile erscheint erst, wenn das Skript sie gefuellt hat: ohne
   JavaScript gibt es nichts zu steuern, die Stimmen stehen dann untereinander. */
.stimmen-steuerung{display:none}
.stimmen-steuerung.aktiv{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:20px}
.stimmen-punkte{list-style:none;display:flex;gap:4px}
/* Anhalten fuer alle, die in Ruhe lesen wollen. Bewusst so klein und farblos wie
   die Punkte daneben: zwei goldene Striche, im angehaltenen Zustand ein Dreieck. */
.stimmen-pause{
  width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;margin-left:6px;
}
.stimmen-pause::before{
  content:"";width:8px;height:10px;
  border-left:2px solid var(--gold);border-right:2px solid var(--gold);
}
.stimmen-pause.angehalten::before{
  width:0;height:0;margin-left:2px;
  border-left:9px solid var(--gold);border-right:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.stimme-gross{
  background:var(--paper);border-top:2px solid var(--rose);
  padding:clamp(28px,3.4vw,42px) clamp(26px,3vw,40px);
}
.stimme-gross .dp-text{
  font-family:'Jost',system-ui,sans-serif;font-weight:300;
  font-size:clamp(17px,1.9vw,21px);line-height:1.75;color:var(--ink);
}
.stimme-gross.is-platzhalter .dp-text{
  font-family:'Jost',sans-serif;font-weight:300;font-style:italic;
  font-size:clamp(17px,2vw,20px);color:var(--ink-soft);
}
.stimme-gross .dp-meta{
  display:block;margin-top:20px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);
}
.datenpunkte{list-style:none;display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px}
.datenpunkte li{
  background:var(--paper);border:1px solid rgba(188,148,16,.16);
  border-left:3px solid rgba(154,25,21,.45);
  padding:20px 22px 22px;
}
.datenpunkte .dpz-meta{
  display:block;margin-bottom:9px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);
}
.datenpunkte .dpz-text{font-size:16px;line-height:1.7;color:var(--ink)}
.datenpunkte .offen .dpz-text{font-style:italic;color:var(--ink-soft)}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,64px)}
.kontakt-liste{list-style:none;margin-top:6px}
.kontakt-liste li{
  padding:13px 0;border-bottom:1px solid var(--line);
  display:flex;gap:14px;align-items:baseline;font-size:16.5px;
}
.kontakt-liste li:first-child{border-top:1px solid var(--line)}
.kontakt-liste .label{
  min-width:118px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dark);
}
/* Auf sehr schmalen Telefonen (320px) darf die lange E-Mail-Adresse umbrechen.
   Ohne das bleibt sie ein einziges unteilbares Wort, drueckt die Spalte auf
   317px und schiebt den ganzen Kontaktbereich ueber den Bildschirmrand. */
.kontakt-liste a{min-width:0;overflow-wrap:anywhere}
/* Unter 380px passen Beschriftung und Wert nicht mehr nebeneinander: die
   E-Mail-Adresse allein ist 185px breit. Statt sie mitten im Wort zu brechen,
   steht die Beschriftung dort ueber dem Wert. */
@media (max-width:379px){
  .kontakt-liste li{flex-direction:column;gap:3px;align-items:flex-start}
  .kontakt-liste .label{min-width:0}
}
.kontakt-liste a:hover{color:var(--gold-dark)}
.angebot-art{margin-bottom:26px}
.angebot-art strong{font-weight:500}

form{background:var(--paper);padding:clamp(26px,3vw,40px);border:1px solid rgba(188,148,16,.2)}
form label{
  display:block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:7px;
}
form input,form textarea{
  width:100%;font-family:inherit;font-size:16px;font-weight:300;color:var(--ink);
  background:var(--cream);border:1px solid rgba(188,148,16,.28);
  padding:12px 14px;margin-bottom:20px;
}
form input:focus,form textarea:focus{outline:0;border-color:var(--gold)}
form textarea{min-height:130px;resize:vertical}
.form-hint{font-size:13.5px;color:var(--ink-soft);margin-top:16px;font-style:italic}

/* ---------- Footer ---------- */
footer{background:var(--wald);color:#E4E8DA;padding:64px 0 34px}
footer .f-top{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
footer img{height:96px;width:auto}
footer h3{font-family:'Cinzel',serif;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#EBD9A4;margin-bottom:14px}
footer a:hover{color:#EBD9A4}
footer .f-nav{list-style:none;font-size:15.5px;line-height:2}
footer .f-bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(235,217,164,.24);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:13.5px;color:#CBD1BE;
}
footer .f-bottom a{border-bottom:1px solid rgba(235,217,164,.3);padding-bottom:2px}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav ul{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:8px 26px 20px;
  }
  .nav ul.open{display:flex}
  .nav ul li{width:100%}
  .nav ul a{display:block;padding:13px 0;font-size:13.5px;border-bottom:1px solid rgba(188,148,16,.14)}
  .nav ul a:hover{border-bottom-color:rgba(188,148,16,.14)}
  .nav ul li.sprachwahl{padding:14px 0 4px;margin-left:0}
  .nav .lang a,.nav .lang b{display:inline-block;padding:7px 12px;font-size:11px;border-bottom:0}
  .burger{display:block}
  header{position:sticky}
  .nav{position:relative}
}
@media (min-width:640px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
/* Auf dem Telefon ist die Buehne nur rund 250px hoch, die Bildunterschrift deckte
   davon ueber die Haelfte ab (Rueckmeldung Frau Bantel 30.09.). Kleinere Schrift und
   engerer Rand, damit das Seelenbild sichtbar bleibt. */
@media (max-width:639px){
  .sb-text{padding:22px 14px 12px}
  .sb-text .sb-titel{font-size:14px}
  .sb-text p{font-size:13px;line-height:1.5;margin-top:3px}
}
@media (min-width:760px){
  .aktivitaet{grid-template-columns:224px 1fr;padding:30px 34px 32px}
  .aktivitaet.ghost{grid-template-columns:1fr;padding:22px 34px}
}
@media (max-width:760px){
  .two-col{columns:1}
  .hero picture,.hero img.bg{object-position:74% 34%}
  .hero .eyebrow{font-size:11.5px;letter-spacing:.18em}
  .hero h1 br{display:none}
}
@media (min-width:760px){
  .termin-banner{grid-template-columns:1fr auto;gap:34px}
  .termin-banner .btn{white-space:nowrap}
  .datenpunkte{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr 1fr}
  .split.reverse .txt{order:2}
  .split.reverse .pic{order:1}
  .kontakt-grid{grid-template-columns:1fr 1fr}
  footer .f-top{grid-template-columns:1.2fr 1fr 1fr}
}
@media (min-width:1080px){
  /* 6 Spalten, jede Karte ueber 2: die letzte Reihe mit 2 Karten sitzt mittig */
  .cards{grid-template-columns:repeat(6,1fr)}
  .card{grid-column:span 2}
  .card:nth-child(4){grid-column:2 / span 2}
  .card:nth-child(5){grid-column:4 / span 2}
}

/* ------------------------------------------------------------------
   Ergaenzungen fuer das Statamic-Backend: Unterseiten, Formularzustaende
   und Bausteine, die im Entwurf als Inline-Stil standen.
   ------------------------------------------------------------------ */

/* Kopfbereich der Unterseiten: gleiche Bildsprache wie die Startseite, halbe Hoehe */
.hero-unterseite{min-height:clamp(280px,38vh,420px)}
.hero-unterseite h1{font-size:clamp(30px,4.2vw,52px)}

/* Erste Sektion einer Unterseite ohne Bild braucht Abstand zur Kopfzeile */
.band-erste{padding-top:clamp(96px,11vw,150px)}

/* Platzhalter-Markierung der noch nicht freigegebenen Stimme */
.platzhalter-marke{
  display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose);border:1px solid rgba(154,25,21,.3);padding:4px 10px;
  margin-bottom:16px;line-height:1.4;
}

/* Rechtlicher Hinweis am Ende einer Angebotsseite */
.rechtshinweis{
  margin-top:44px;padding:18px 22px;border-left:2px solid var(--line);
  background:var(--cream);font-size:15.5px;color:var(--ink-soft);
}

/* Hinweis auf das Kinderbuch */
.buch-hinweis{
  margin-top:44px;padding:26px 28px;background:var(--cream-deep);
  border:1px solid var(--line);
}
.buch-hinweis h3{margin-top:6px}
.buch-hinweis p{margin-top:10px}

/* Rechtstexte: engere Ueberschriften, damit die Gliederung lesbar bleibt */
.rechtstext h2{font-size:clamp(20px,2.2vw,25px);margin-top:38px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{margin-top:12px}

/* Einwilligung und Fallenfeld im Kontaktformular */
.dsgvo{display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px}
.dsgvo input{width:auto;margin-top:5px;flex:none}
.dsgvo label{font-size:14.5px;line-height:1.55;color:var(--ink-soft);text-transform:none;letter-spacing:0}
.dsgvo a{text-decoration:underline}

.feld-versteckt{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Rueckmeldung nach dem Absenden */
.form-ok{color:var(--wald);font-weight:500}
.form-fehler{color:var(--rose);font-weight:500}

/* Links, die die Kundin im Editor setzt (ohne Klasse). Der Reset am
   Dateianfang gibt a color:inherit ohne Unterstreichung, im Fliesstext
   waren sie dadurch unsichtbar. Gold wie .textlink auf Ueber mich. */
.fliesstext a:not([class]),
.rechtstext a:not([class]){
  color:var(--gold-dark);border-bottom:1px solid var(--gold);
  padding-bottom:1px;transition:color .25s ease,border-color .25s ease;
}
.fliesstext a:not([class]):hover,
.rechtstext a:not([class]):hover{color:var(--ink);border-color:var(--ink)}

/* Ueberschriften innerhalb eines Fliesstextes aus dem Control Panel.
   Der Reset am Dateianfang nimmt allen Elementen die Abstaende, im Editor
   gesetzte Zwischenueberschriften klebten dadurch am Absatz darunter. */
.fliesstext h2,
.rechtstext h2{margin:46px 0 14px}
.fliesstext h2:first-child,
.rechtstext h2:first-child{margin-top:0}
.fliesstext h3,
.rechtstext h3{margin:34px 0 12px}
.fliesstext p,
.rechtstext p{margin-top:14px}
.fliesstext ul,
.rechtstext ul{margin:16px 0 16px 22px}
.fliesstext li,
.rechtstext li{margin-top:6px}
.fliesstext blockquote,
.rechtstext blockquote{
  margin:28px 0;padding-left:20px;border-left:2px solid var(--line);
  font-style:italic;color:var(--ink-soft);
}

/* Lange Woerter in Ueberschriften umbrechen lassen. Deutsche Komposita wie
   "Schwangerschaftssegnung" sind in Cinzel breiter als eine Telefonspalte und
   schoben sonst die ganze Seite auf. Die Silbentrennung greift ueber lang="de"
   am html-Element. */
h1, h2, h3, h4,
.st-titel, .t-titel, .sb-titel{
  overflow-wrap:break-word;
  hyphens:auto;
}

/* Bilder mitten im Fliesstext einer Angebotsseite. Bewusst ohne Beschnitt:
   die Motive sind quadratisch oder hochformatig und sollen ganz sichtbar bleiben. */
.text-bilder{margin:36px 0}
.text-bilder .tb-reihe{display:grid;gap:16px;grid-template-columns:1fr}
.text-bilder img{width:100%;height:auto;display:block;border-radius:8px}
.text-bilder figcaption{margin-top:10px;font-size:14px;color:#6b6a63;font-style:italic;text-align:center}
@media (min-width:640px){
  .text-bilder .tb-reihe:has(img + img){grid-template-columns:1fr 1fr}
}

/* Sprachwechsel in der Hauptnavigation, bewusst zurueckhaltend gesetzt. */
/* Sprachumschalter: kleine Box mit beiden Kuerzeln, die aktuelle Sprache
   hinterlegt. Bewusst kleiner und anders geformt als die Menuepunkte, damit
   er nicht als weiterer Navigationspunkt gelesen wird. Die Flaeche traegt
   cream-deep statt Gold: Gold auf kleiner Schrift kommt nur auf 4,0:1. */
.nav .sprachwahl{margin-left:6px}
.nav .lang{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--line);border-radius:999px;
  overflow:hidden;line-height:1;
}
.nav .lang a,.nav .lang b{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;
  padding:6px 10px;border-bottom:0;white-space:nowrap;
}
.nav .lang b{background:var(--cream-deep);color:var(--ink);font-weight:500}
.nav .lang a{color:var(--ink-soft);transition:background .25s ease,color .25s ease}
.nav .lang a:hover{background:var(--wald-tint);color:var(--gold-dark);border-bottom-color:transparent}
/* Nur fuer Vorleseprogramme, nicht sichtbar. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Hinweis auf die massgebliche deutsche Fassung, nur auf den englischen Rechtsseiten. */
.rechtstext .sprachhinweis{background:#F7F3E8;border-left:3px solid #BC9410;padding:12px 16px;margin:0 0 28px;font-size:14.5px;color:#6b6a63}
.rechtstext .sprachhinweis a{color:#9A1915}