/* ==========================================================================
   Praxis Johanna Theis – Haupt-Stylesheet
   Unverändert aus johanna-website.html übernommen (Design-System identisch).
   Ergänzungen am Dateiende unter 'Ergänzungen Multi-Page-Umbau'.
   ========================================================================== */


:root{
  --creme:       #F6DCC7;
  --creme-tief:  #F0C6A6;
  --brombeere:   #5A2340;
  --brombeere-2: #7A3A5C;
  --gruen-bg:    #4A6350;
  --gold-bg:     #E0A430;
  --gruen:       #7FA07F;
  --gruen-dunkel:#3C5245;
  --gelb:        #E2A23C;
  --orange:      #C1663D;
  --tinte:       #3A2A22;
  --tinte-soft:  #7A5C4D;
  --linie:       rgba(58,42,34,0.16);
  --linie-hell:  rgba(246,220,199,0.28);
  --radius-blob: 62% 38% 55% 45% / 45% 40% 60% 55%;

  /* Schrift-Stacks. Die Ausweichschriften greifen, wenn Fraunces/Karla nicht
     geladen werden können – etwa beim Öffnen per Doppelklick (file://), wo
     Browser das Nachladen von Schriften aus Sicherheitsgründen blockieren,
     oder bei sehr langsamer Verbindung. Georgia bzw. die Systemschrift kommen
     den Originalen deutlich näher als das generische serif/sans-serif. */
  --schrift-serif: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --schrift-sans:  'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--creme);
  color:var(--tinte);
  font-family:var(--schrift-sans);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--schrift-serif);
  font-weight:500;
  margin:0 0 .5em 0;
  color:var(--brombeere);
  letter-spacing:-0.01em;
}
/* Einheitliche Groesse fuer alle Abschnittsueberschriften. Vorher hatten nur
   die Seiten eine Angabe, die sie im HTML mitbrachten; die uebrigen blieben
   bei der Grundgroesse und wirkten kleiner. */
h2{ font-size:clamp(1.5rem,2.8vw,2rem); }
p{margin:0 0 1.15em 0;}
a{color:inherit;}
img{max-width:100%;display:block;}
.eyebrow{
  font-family:var(--schrift-sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:600;
  color:var(--gruen-dunkel);
  margin-bottom:.9em;
  display:inline-block;
}
.serif-italic{font-family:var(--schrift-serif);font-style:italic;font-weight:420;}

/* ---------- Platzhalter & Entwurf-Kennzeichnung ---------- */
.platzhalter{
  color:var(--orange);
  border-bottom:1.5px dashed var(--orange);
  font-style:italic;
  white-space:nowrap;
}
.entwurf-box{
  border:1.5px dashed var(--gruen);
  background:rgba(124,146,104,0.08);
  border-radius:14px;
  padding:1.3em 1.5em;
  margin:1.6em 0;
}
.entwurf-badge{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-size:.68rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gruen-dunkel);
  background:rgba(124,146,104,0.16);
  padding:.3em .7em;
  border-radius:100px;
  margin-bottom:.8em;
}
.entwurf-badge::before{content:"✎";font-size:.9em;}

/* ---------- Blüten-Signet (SVG Linienzeichnung) ---------- */
.signet{display:block;}
.divider-signet{
  display:flex;justify-content:center;margin:2.8em 0;opacity:.85;
}

/* ---------- Navigation ---------- */
header.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(246,220,199,0.98);
  border-bottom:1px solid var(--linie);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85em 1.8em;
}
.brand{
  display:flex;align-items:center;gap:.5em;
  font-family:var(--schrift-serif);font-weight:500;font-size:1rem;color:var(--brombeere);
  cursor:pointer;text-decoration:none;opacity:.9;
}
.brand small{
  display:block;font-family:var(--schrift-sans);font-weight:400;font-size:.6rem;
  letter-spacing:.03em;color:var(--tinte-soft);margin-top:.05em;opacity:.85;
  line-height:1.5;
}
/* Die Berufsbezeichnung steht so auch im Logo. Auf dem Handy bricht schon die
   zweite Zeile um; eine dritte wuerde die Kopfzeile ueberfuellen und an den
   Menue-Knopf stossen. Deshalb nur ab Tablet-Breite. */
@media(max-width:900px){ .brand .nur-breit{ display:none; } }

/* ---------- Kopfbereich der Startseite ----------
   Am Rechner: Text links, Foto rechts daneben, ueber beide Zeilen hinweg.
   Auf dem Handy brauchte es eine andere Reihenfolge. Zuerst stand das Foto
   ganz unten, hinter allem; dann ganz oben, aber dadurch kam die Willkommen-
   Zeile erst nach dem Bild, obwohl sie einfuehrt. Jetzt: Zeile und
   Ueberschrift, dann das Foto, dann der Text.
   Deshalb drei benannte Bereiche statt zwei Spalten - nur so laesst sich
   das Foto zwischen zwei Teile derselben Textspalte schieben. */
.hero-raster{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  grid-template-areas:"kopf foto" "text foto";
  column-gap:3.2em;
  row-gap:0;
  align-items:center;
}
.hero-kopf{ grid-area:kopf; }
.hero-text{ grid-area:text; }
.hero-foto{ grid-area:foto; }

@media(max-width:900px){
  .hero-raster{
    grid-template-columns:1fr;
    grid-template-areas:"kopf" "foto" "text";
    column-gap:0;
  }
  /* Breite muss gesetzt sein, sonst bemisst sich der Rahmen nach seinem
     Inhalt, das Bild darin rechnet mit width:100% gegen eine unbestimmte
     Breite, und beides zusammen ergibt 0. */
  .hero-foto{
    width:100%;
    max-width:250px !important;
    margin:1.8em auto 0 !important;
  }
}

/* Themenzeilen: Die einzelnen Begriffe stehen im HTML mit white-space:nowrap,
   damit kein Begriff mitten im Wort umbricht. Auf dem Handy ist die Spalte
   aber schmaler als lange Begriffe wie "Lebenskrisen wie Trennungen oder
   Verluste" - der Text lief dann ueber den Rahmen hinaus und wurde
   abgeschnitten. Unter 640px darf deshalb umgebrochen werden: eine
   umgebrochene Zeile ist besser lesbar als eine abgeschnittene. */
@media(max-width:640px){
  p span[style*="white-space:nowrap"]{ white-space:normal !important; }
}

/* Der senkrechte Trennstrich in der Unterzeile gruppiert dort, wo die Punkte
   in einer Reihe stehen. Sobald sie umbrechen, haengt er als einzelner Strich
   am Zeilenende und sieht nach einem Fehler aus. Auf schmalen Bildschirmen
   also weg - die Gruppierung uebernimmt dort der Umbruch. */
@media(max-width:640px){
  .subnav-divider{ display:none; }
}
nav.primary{display:flex;align-items:center;gap:.3em;}
.nav-item{position:relative;}
.nav-link{
  background:none;border:none;font-family:var(--schrift-sans);font-size:.92rem;font-weight:500;
  color:var(--tinte);padding:.7em .85em;cursor:pointer;border-radius:8px;
  display:flex;align-items:center;gap:.3em;transition:background .15s,color .15s;
}
.nav-link:hover,.nav-link.active{background:rgba(90,35,64,0.08);color:var(--brombeere);}
.nav-link.cta{
  background:var(--brombeere);color:var(--creme);padding:.7em 1.2em;border-radius:100px;
}
.nav-link.cta:hover{background:var(--brombeere-2);color:var(--creme);}
.caret{font-size:.6em;transform:translateY(1px);opacity:.65;}
.caret-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4em .6em;color:var(--brombeere);}
.dropdown{
  position:absolute;top:100%;left:0;background:var(--creme);
  border:1px solid var(--linie);border-radius:12px;padding:.5em;min-width:240px;
  box-shadow:0 14px 34px rgba(90,35,64,0.14);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.nav-item:hover .dropdown,.nav-item.open .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{
  display:block;padding:.55em .8em;border-radius:8px;font-size:.87rem;text-decoration:none;color:var(--tinte);
}
.dropdown a:hover{background:var(--gruen-bg);color:var(--gruen-dunkel);}
.dropdown-divider{height:1px;background:var(--linie);margin:.4em .3em;}
.menu-toggle{display:none;background:none;border:none;font-size:1.4rem;color:var(--brombeere);cursor:pointer;}

@media(max-width:900px){
  .grid-2col-mobile{grid-template-columns:1fr !important;}
  /* width:100% ist noetig. Ohne feste Breite bemisst sich der Rahmen nach
     seinem Inhalt, das Bild darin rechnet mit width:100% gegen eine noch
     unbestimmte Breite, und beides zusammen ergibt 0. Der Rahmen kommt dann
     nie in den sichtbaren Bereich, also laedt das lazy-Bild nie nach. */
  .grid-2col-mobile .foto-weich{width:100%;max-width:260px;margin:1.6em auto 0;}

  /* Startseite: Das Portrait stand auf dem Handy ganz unten, hinter dem
     gesamten Text und sogar hinter den Knoepfen. Man las alles und sah das
     Gesicht erst nach anderthalb Bildschirmen.
     order:-1 zieht es im Raster nach oben, vor die Textspalte. Die inline
     gesetzte Breite gilt fuer die zweispaltige Ansicht und muss hier
     ueberschrieben werden, sonst nimmt das Bild die halbe Bildschirmhoehe. */

  .caret-toggle{display:inline-flex;align-items:center;justify-content:center;padding:.6em .9em;}
  .caret-toggle .caret{font-size:1.3rem;opacity:.85;}
  .nav-item{display:flex;flex-wrap:wrap;align-items:center;}
  .nav-item .nav-link{flex:1;}
  .nav-item .dropdown{width:100%;}

  .gestalt-grid{grid-template-columns:1fr !important;}
  .gestalt-grid > div:last-child{width:100%;max-width:220px;margin:1.6em auto 0;}

  .behandlungsfelder-grid{grid-template-columns:1fr !important;}
  .behandlungsfelder-grid .foto-weich{width:150px;margin:1.6em auto 0;}

  .wichtig-karte{grid-template-columns:1fr !important;padding:2em !important;}

  nav.primary{
    position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--creme);
    flex-direction:column;align-items:stretch;padding:1em;gap:0;
    transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;
  }
  nav.primary.mobile-open{transform:translateX(0);}
  .nav-link{width:100%;justify-content:space-between;padding:1em .5em;border-bottom:1px solid var(--linie);border-radius:0;}
  .nav-link.cta{border-radius:100px;justify-content:center;margin-top:1em;border-bottom:none;}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    display:none;padding-left:1em;background:transparent;}
  .nav-item.open .dropdown{display:block;}
  .menu-toggle{display:block;}
}

/* ---------- Seiten / Sections ---------- */
main{overflow:hidden;}
/* overflow:hidden macht main zum Scroll-Container und setzt damit jedes
   position:sticky im Inhalt außer Kraft. overflow-x:clip schneidet genauso ab,
   ohne einen Scroll-Container zu erzeugen. Die alte Regel bleibt als Rückfall
   für Browser ohne clip stehen. */
@supports (overflow:clip){
  main{overflow:visible;overflow-x:clip;}
}
.page{display:none;}
.page.active{display:block;animation:fade .5s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.block{padding:5.5em 1.6em;}
.block-inner{max-width:760px;margin:0 auto;}
.block-inner.wide{max-width:1080px;}
.bg-creme{background:var(--creme);}
.bg-creme-tief{background:var(--creme-tief);}
.bg-gruen{background:var(--gruen-bg);color:var(--creme-tief);}
.bg-gruen h1,.bg-gruen h2,.bg-gruen h3{color:var(--creme);}
.bg-gruen .eyebrow{color:var(--gelb);}
.bg-gruen .small{color:var(--creme-tief);opacity:.85;}
.bg-gruen p{color:var(--creme-tief);}
.bg-gruen .platzhalter{color:var(--gelb);border-color:var(--gelb);}
.bg-gruen .entwurf-badge{background:rgba(246,220,199,0.14);color:var(--gelb);}
.bg-gruen .entwurf-box{border-color:var(--gelb);background:rgba(246,220,199,0.07);}
.bg-gruen .entwurf-box p{color:var(--creme-tief);}
.bg-gruen .ausbildungs-liste li{border-color:var(--linie-hell);color:var(--creme-tief);}
.bg-gruen .faq-q{color:var(--creme);}
.bg-gruen .faq-a p{color:var(--creme-tief);}
.bg-gruen .subnav a{color:var(--creme);border-color:var(--linie-hell);}

.bg-gold{background:var(--gold-bg);color:var(--creme-tief);}
.bg-gold h1,.bg-gold h2,.bg-gold h3{color:var(--brombeere);}
.bg-gold .eyebrow{color:var(--brombeere);}
.bg-gold .small{color:var(--tinte);opacity:.75;}
.bg-gold p{color:var(--tinte);}
.bg-gold .platzhalter{color:var(--brombeere);border-color:var(--brombeere);}
.bg-gold .entwurf-badge{background:rgba(90,35,64,0.14);color:var(--brombeere);}
.bg-gold .entwurf-box{border-color:var(--brombeere);background:rgba(255,255,255,0.18);}
.bg-gold .entwurf-box p{color:var(--tinte);}
.bg-gold .ausbildungs-liste li{border-color:rgba(90,35,64,0.2);color:var(--tinte);}
.bg-gold .faq-q{color:var(--brombeere);}
.bg-gold .faq-a p{color:var(--tinte);}
.bg-gold .subnav a{color:var(--brombeere);border-color:rgba(90,35,64,0.2);}
.bg-brombeere{background:var(--brombeere);color:var(--creme);}
.bg-orange{background:var(--orange);color:var(--creme);}
.bg-orange .btn{background:var(--creme);color:var(--orange);}
.bg-orange .platzhalter{color:var(--creme);border-color:var(--creme);}
.bg-brombeere h1,.bg-brombeere h2,.bg-brombeere h3{color:var(--creme);}

/* ---------- Foto-Rahmen (organisch) ---------- */
.foto-blob{
  border-radius:var(--radius-blob);
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(90,35,64,0.35);
}
.foto-blob img{width:100%;height:100%;object-fit:cover;}
.foto-rund{
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(90,35,64,0.35);
}
.foto-rund img{width:100%;height:100%;object-fit:cover;}
.foto-kreis{
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 12px 26px -10px rgba(90,35,64,0.22);
}
.foto-kreis img{width:100%;height:100%;object-fit:cover;}
.foto-weich{
  border-radius:56px;
  overflow:hidden;
  box-shadow:0 24px 48px -18px rgba(90,35,64,0.30);
}
.foto-weich img{width:100%;height:100%;object-fit:cover;}
.foto-platzhalter{
  border-radius:56px;
  border:1.5px dashed var(--gruen);
  background:rgba(124,146,104,0.10);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--gruen-dunkel);font-style:italic;font-size:.9rem;
  padding:2em;min-height:220px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--brombeere);color:var(--creme);
  font-family:var(--schrift-sans);font-weight:600;font-size:.95rem;
  padding:.95em 1.9em;border-radius:100px;text-decoration:none;border:none;cursor:pointer;
  transition:background .18s,transform .18s;
}
.btn:hover{background:var(--brombeere-2);transform:translateY(-1px);}
.btn.outline{background:transparent;color:var(--brombeere);border:1.5px solid var(--brombeere);}
.btn.outline:hover{background:var(--brombeere);color:var(--creme);}
.bg-brombeere .btn{background:var(--creme);color:var(--brombeere);}
.bg-brombeere .btn:hover{background:var(--gelb);color:var(--brombeere);}

/* ---------- Sub-Navigation innerhalb einer Seite ---------- */
.subnav{
  display:flex;flex-wrap:wrap;gap:.6em;justify-content:center;
  padding:0 1.6em 2.5em;max-width:900px;margin:0 auto;
}
.subnav a{
  font-size:.82rem;font-weight:600;color:var(--brombeere);text-decoration:none;
  border:1.3px solid var(--linie);padding:.55em 1.1em;border-radius:100px;
  transition:background .15s,border-color .15s;white-space:nowrap;
}
.subnav a:hover{background:rgba(90,35,64,0.08);border-color:var(--brombeere);}
.subnav-divider{width:1px;align-self:stretch;background:var(--linie);margin:.3em .2em;}
.theme-chip{
  font-size:.85rem;font-weight:500;color:var(--brombeere);
  background:rgba(90,35,64,0.07);border:1px solid rgba(90,35,64,0.15);
  padding:.5em 1.1em;border-radius:100px;white-space:nowrap;
}
.theme-chip-gold{
  display:inline-block;margin:.25em .3em;
  font-size:.85rem;font-weight:600;color:var(--brombeere);
  background:var(--creme);border:1px solid rgba(90,35,64,0.2);
  padding:.5em 1.1em;border-radius:100px;white-space:nowrap;
}
.zeitstrahl{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.5em;
  position:relative;
}
.zeitstrahl::before{
  content:"";position:absolute;top:16px;left:calc(16.66% + 0px);right:calc(16.66% + 0px);
  height:2px;background:var(--linie);z-index:0;
}
.zeitstrahl-schritt{position:relative;z-index:1;text-align:center;}
.zeitstrahl-punkt{
  width:34px;height:34px;border-radius:50%;background:var(--brombeere);color:var(--creme);
  display:flex;align-items:center;justify-content:center;font-family:var(--schrift-serif);
  font-weight:600;font-size:1.05rem;margin:0 auto .9em;position:relative;z-index:2;
}
.zeitstrahl-schritt h3{margin-bottom:.2em;}
.zeitstrahl-schritt p{text-align:center;}
@media(max-width:800px){
  .zeitstrahl{grid-template-columns:1fr;gap:2.2em;}
  .zeitstrahl::before{display:none;}
}
.cluster-kicker{
  text-align:center;font-family:var(--schrift-sans);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brombeere);opacity:.6;
  padding:2em 1.6em .6em;
}

/* ---------- Listen / Themen ---------- */
.themen-liste{list-style:none;padding:0;margin:1.6em 0;display:grid;grid-template-columns:1fr 1fr;gap:.65em 1.4em;}
.themen-liste li{
  position:relative;padding-left:1.3em;font-size:.98rem;
}
.themen-liste li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gelb);
}
@media(max-width:640px){.themen-liste{grid-template-columns:1fr;}}

.ausbildungs-liste{list-style:none;padding:0;margin:1.8em 0;}
.ausbildungs-liste li{
  padding:1em 0 1em 2.2em;border-top:1px solid var(--linie);position:relative;font-size:1rem;
}
.ausbildungs-liste li:last-child{border-bottom:1px solid var(--linie);}
.ausbildungs-liste li::before{
  content:"◆";position:absolute;left:0;top:1.1em;color:var(--gelb);font-size:.6em;
}

/* ---------- FAQ Akkordeon ---------- */
.faq-item{border-bottom:1px solid var(--linie);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--schrift-serif);font-size:1.05rem;color:var(--brombeere);
  padding:1.1em 0;display:flex;justify-content:space-between;align-items:center;gap:1em;
}
.faq-q .plus{transition:transform .2s;font-size:1.3rem;color:var(--orange);flex-shrink:0;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{padding-bottom:1.2em;color:var(--tinte-soft);}

/* ---------- Zitat ---------- */
blockquote{
  font-family:var(--schrift-serif);font-style:italic;font-weight:420;
  font-size:1.35rem;color:var(--brombeere);text-align:center;
  margin:2em 0;padding:0 1em;line-height:1.5;
}

/* ---------- Footer ---------- */
footer{
  background:var(--brombeere);color:var(--creme-tief);
  padding:2.1em 1.6em 1.5em;text-align:center;font-size:.85rem;
}
footer a{color:var(--creme);text-decoration:none;}
footer a[aria-label="Instagram"]:hover{border-color:var(--gelb);color:var(--gelb);}

/* ---------- Nach-oben-Button ---------- */
#backToTop{
  position:fixed;right:1.4em;bottom:1.4em;z-index:200;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:var(--brombeere);color:var(--creme);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(90,35,64,0.45);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s,transform .25s,visibility .25s,background .15s;
}
#backToTop.visible{opacity:1;visibility:visible;transform:translateY(0);}
#backToTop:hover{background:var(--brombeere-2);}
@media(max-width:640px){
  .gestalt-grid, .gespraech-offset{margin-left:0 !important;margin-right:0 !important;}
  #backToTop{right:1em;bottom:1em;width:42px;height:42px;}
}

/* ---------- Typo Größen ---------- */
.h1-hero{text-wrap:balance;font-size:clamp(2.1rem,4.5vw,3.1rem);line-height:1.15;font-optical-sizing:none;font-variation-settings:'opsz' 30;}
.h2-page{font-size:clamp(1.7rem,3.5vw,2.35rem);}
.lead{font-size:1.12rem;color:var(--tinte);}
.small{font-size:.85rem;color:var(--tinte-soft);}


/* ==========================================================================
   Ergänzungen Multi-Page-Umbau
   Alles oberhalb dieser Linie ist unverändert aus der Einzeldatei übernommen.
   ========================================================================== */

/* ---------- Navigation: Links statt Buttons ----------
   Die Navigation besteht jetzt aus echten <a href="…">-Elementen statt
   <button>. Dadurch funktionieren Zurück-Button, Mittelklick (neuer Tab),
   Lesezeichen und Screenreader-Navigation wie erwartet.                     */
a.nav-link{text-decoration:none;}
a.brand{text-decoration:none;}

/* ---------- Sichtbarer Tastaturfokus ----------
   Vorher war der Fokus beim Durchtabben nicht erkennbar.                    */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:2.5px solid var(--brombeere);
  outline-offset:3px;
  border-radius:4px;
}
.bg-gruen a:focus-visible,
.bg-gold a:focus-visible,
.bg-orange a:focus-visible,
.bg-orange input:focus-visible,
.bg-orange select:focus-visible,
.bg-orange textarea:focus-visible,
.bg-orange button:focus-visible,
footer a:focus-visible{
  outline-color:var(--creme);
}

/* ---------- Sprunglink „Zum Inhalt springen" ----------
   Erste Station beim Tabben; für Tastatur- und Screenreader-Nutzung.        */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brombeere);color:var(--creme);
  padding:.8em 1.4em;border-radius:0 0 12px 0;
  font-family:var(--schrift-sans);font-size:.92rem;font-weight:500;
  text-decoration:none;
}
.skip-link:focus{left:0;}

/* ---------- Formular-Rückmeldung ----------
   Ersetzt die frühere mailto:-Lösung, die auf vielen Rechnern wortlos
   nichts tat. Das Formular sendet jetzt serverseitig und meldet zurück.    */
.form-status{
  display:none;margin:0 0 1.2em;padding:1em 1.2em;border-radius:12px;
  font-size:.9rem;line-height:1.6;
}
.form-status.sichtbar{display:block;}
.form-status.ok{
  background:rgba(124,160,127,0.22);
  border:1px solid rgba(124,160,127,0.5);
  color:var(--creme);
}
.form-status.fehler{
  background:rgba(246,220,199,0.14);
  border:1px solid rgba(246,220,199,0.45);
  color:var(--creme);
}
.form-hinweis{
  font-size:.78rem;line-height:1.55;color:var(--creme-tief);
  opacity:.9;margin:.2em 0 1.2em;
}
.form-hinweis a{color:var(--creme);}
/* Honeypot: für Menschen unsichtbar, Spam-Bots füllen es aus. */
.hp-feld{
  position:absolute!important;left:-9999px!important;
  width:1px;height:1px;overflow:hidden;
}
button[type="submit"][disabled]{opacity:.6;cursor:wait;}

/* ---------- Bilder: Layoutsprung vermeiden ----------
   Bilder tragen jetzt width/height im HTML; damit das Seitenverhältnis
   trotzdem flexibel bleibt, hier auf auto gesetzt.                         */
img{height:auto;}
.foto-weich img,.foto-blob img,.foto-rund img,.foto-kreis img{height:100%;}

/* ---------- Druckausgabe ---------- */
@media print{
  header.site-nav,#backToTop,footer .signet{display:none;}
  body{background:#fff;color:#000;}
  .block{padding:1.5em 0;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;}
}

/* ---------- Bewegung reduzieren ----------
   Respektiert die Systemeinstellung „Bewegung reduzieren".                 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .page.active{animation:none;}
}


/* ==========================================================================
   Mobile First – Feinschliff fürs Handy
   Behebt Fehler, die erst auf echten Geräten auffallen.
   ========================================================================== */

/* ---------- 1. Formularfelder ----------
   Die Feldgestaltung stand vorher als Inline-Style direkt im HTML. Inline
   schlägt jede Stylesheet-Regel, dadurch ließ sich die Schriftgröße auf dem
   Handy nicht korrigieren. Jetzt hier – zentral und überschreibbar.

   16px ist Absicht: iOS Safari zoomt automatisch in die Seite, sobald ein
   Eingabefeld eine kleinere Schrift hat. Die Besucherin muss danach von Hand
   wieder herauszoomen.                                                     */
.feld{
  width:100%;
  padding:.7em 1em;
  border-radius:10px;
  border:1px solid rgba(246,220,199,0.4);
  background:var(--creme);
  color:var(--tinte);
  font-family:var(--schrift-sans);
  font-size:16px;
}
textarea.feld{ resize:vertical; }
.btn-absenden{
  width:100%;
  justify-content:center;
  border:none;
  cursor:pointer;
}
(min-width:901px){
  /* Am Schreibtisch darf es wieder die feinere Größe sein. */
  .feld{ font-size:.95rem; }
}

/* Schriftgröße nicht durch Gerätedrehung verändern lassen. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* ---------- 2. Tap-Highlight in Markenfarbe ----------
   Standard ist ein grelles Systemblau, das hier fremd wirkt.              */
*{ -webkit-tap-highlight-color:rgba(90,35,64,0.12); }

/* ---------- 3. Randabstände auf Geräten mit Aussparung (Notch/Dynamic Island) ---- */
@supports(padding:max(0px)){
  .block{
    padding-left:max(1.6em, env(safe-area-inset-left));
    padding-right:max(1.6em, env(safe-area-inset-right));
  }
  footer{ padding-bottom:max(2.5em, env(safe-area-inset-bottom)); }
}

@media(max-width:900px){

  /* ---------- 4. Menü sitzt exakt unter dem Header ----------
     Vorher stand top:64px fest, der Header ist aber 72px hoch – die oberste
     Menüzeile verschwand dadurch unter dem Header. Die Höhe wird jetzt von
     main.js gemessen und in --header-h geschrieben.                        */
  nav.primary{
    position:fixed;
    top:var(--header-h,72px);
    left:0; right:0;
    height:auto;
    max-height:calc(100dvh - var(--header-h,72px));
    background:var(--creme);
    flex-direction:column;
    align-items:stretch;
    padding:1em;
    padding-bottom:max(2em, env(safe-area-inset-bottom));
    gap:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:translateX(100%);
    transition:transform .25s ease;
  }
  /* Diese Regel muss nach der obigen stehen, sonst gewinnt der geschlossene
     Zustand und das Menü bleibt beim Antippen unsichtbar. */
  nav.primary.mobile-open{ transform:translateX(0); }

  /* Seite hinter dem offenen Menü nicht mitscrollen lassen. */
  body.menue-offen{ overflow:hidden; }

  /* ---------- 5. Touch-Ziele auf mindestens 44x44 px ----------
     Apple und WCAG 2.5.5 nennen 44px als Mindestmaß. Darunter trifft man
     mit dem Daumen daneben.                                               */
  .menu-toggle{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
    margin-right:-.4em;   /* optisch bündig trotz größerer Trefferfläche */
  }
  .caret-toggle{ min-width:48px; min-height:48px; }
  .nav-link{ min-height:52px; align-items:center; }
  .dropdown a{ min-height:46px; display:flex; align-items:center; }

  /* Footer- und Fließtextlinks bekommen mehr Fläche, ohne optisch zu wachsen. */
  footer a{
    display:inline-block;
    padding:.45em .2em;
    margin:-.45em -.2em;
  }
  footer a[aria-label="Instagram"]{
    width:44px; height:44px; padding:0; margin:0;
  }

  /* ---------- 6. Nach-oben-Button gut treffbar, über der Home-Leiste ---- */
  #backToTop{
    width:48px; height:48px;
    bottom:max(1.2em, env(safe-area-inset-bottom));
  }

  /* ---------- 7. Formular: bequemer zu bedienen ---------- */
  .feld{
    min-height:48px;
    padding:.85em 1em;
  }
  textarea.feld{ min-height:130px; }
  #kontaktForm input[type="checkbox"]{
    min-height:0;
    width:24px; height:24px;
  }
  .btn-absenden{
    min-height:52px;
    font-size:1rem;
  }

  /* ---------- 8. Buttons füllen die Breite, statt schmal zu stehen ------ */
  .btn{
    min-height:48px;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* ---------- 9. FAQ-Fragen als großzügige Tippfläche ---------- */
  .faq-q{ min-height:52px; display:flex; align-items:center; }

  /* ---------- 11. Lange Wörter nicht über den Rand laufen lassen -------- */
  h1,h2,h3,h4,p,li,a{ overflow-wrap:break-word; }

  /* Keine automatische Silbentrennung, nirgends. Entschieden am 01.10.2026.
     Der Browser trennte auch dort, wo es nicht noetig war ("Elemen-te"), und
     in einem Absatz kamen schnell vier Trennstriche zusammen. Die Zeilenenden
     sind jetzt ungleichmaessiger, dafuer bleibt jedes Wort ganz.
     Ueberlange Woerter faengt overflow-wrap oben weiterhin ab - der bricht
     nur im Notfall und ohne Strich. */
  h1,h2,h3,h4,p,li,a{ hyphens:manual; -webkit-hyphens:manual; }
}

/* ---------- 12. Sehr schmale Geräte (iPhone SE, 320px) ---------- */
@media(max-width:360px){
  .block{ padding-left:1.15em; padding-right:1.15em; }
  .brand small{ display:none; }   /* Platz für Name und Menüknopf */
}

/* ---------- 13. Querformat auf niedrigen Handys ----------
   Damit das Menü im Liegen nicht länger als der Bildschirm wird.          */
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  nav.primary{ max-height:calc(100dvh - var(--header-h,72px)); overflow-y:auto; }
  .nav-link{ min-height:44px; padding-top:.6em; padding-bottom:.6em; }
}

/* Einwilligungs-Häkchen: als Touch-Ziel groß genug (24px statt 17px). */
.feld-check{
  margin-top:.2em;
  flex-shrink:0;
  width:24px;
  height:24px;
  accent-color:var(--brombeere);
  cursor:pointer;
}

/* Drei kurze Ergänzungen nebeneinander (Therapie-Seite). Auf schmalen
   Bildschirmen untereinander, sonst werden die Spalten zu eng zum Lesen. */
.dreispalter h3{font-family:var(--schrift-serif);color:var(--brombeere);}
.dreispalter p{font-size:.97rem;}
.dreispalter p:last-child{margin-bottom:0;}
@media (max-width:860px){
  .dreispalter{grid-template-columns:1fr !important;gap:1.8em !important;}
}

/* Praxisbeispiele stehen jeweils direkt unter dem Begriff, den sie zeigen.
   Der gelbe Strich links macht das Paar auf einen Blick erkennbar. */
.praxis{border-left:2px solid var(--gelb);padding-left:1.15em;margin:0 0 1.15em;}
.praxis > *:last-child{margin-bottom:0;}

/* ---------- Flattersatz im Fließtext ----------
   Blocksatz war hier bis 30.09.2026 eingestellt und ist wieder raus.
   Im Web bestimmt der Browser die Silbentrennung; bei langen deutschen
   Komposita bricht er oft nicht, und dann reißen die Wortabstaende auf.
   In schmalen Spalten faellt das besonders auf, also auf dem Handy, wo
   die meisten die Seite ansehen. Linksbuendig liest sich ruhiger.
   Keine Regel noetig: linksbuendig ist die Vorgabe des Browsers. */
/* Blocksatz nur in breiten Textspalten. Neben einem Bild sind die Zeilen zu
   kurz, dort reißt er sichtbare Lücken zwischen die Wörter. */
.dreispalter p,
.grid-2col-mobile p:not(.small),
.gestalt-grid p:not(.small){
  text-align:left;
  -webkit-hyphens:manual; hyphens:manual;
}

/* Silbentrennung nur im Blocksatz. Wo der Text linksbuendig oder zentriert
   steht, entstehen ohne Trennung keine Luecken, sondern nur ein unruhiger
   rechter Rand - und getrennte Woerter wie "beglei-tet" stoeren dort mehr,
   als sie nuetzen. Lange Woerter faengt overflow-wrap weiter ab. */
p[style*="text-align:center"],
p[style*="text-align: center"],
.small{
  -webkit-hyphens:manual; hyphens:manual;
}
/* Bereiche, die schon im Stylesheet zentrieren, bleiben zentriert.
   Sie haben kein style="text-align:center" im HTML, werden von der Regel
   darüber also nicht erfasst. */
footer p:not(.small){ text-align:inherit; }   /* folgt dem Footer: links, mobil mittig */

.zeitstrahl-schritt p:not(.small),
.platzhalter p:not(.small),
blockquote{ text-align:center; }

/* ---------- Abschnitt mit Bild als Hintergrund ----------
   Das Bild liegt hinter dem Text, eine Lage in Brombeere legt sich darüber,
   damit der Text lesbar bleibt. Bewusst ohne background-attachment:fixed,
   das ruckelt auf iPhones und wird dort teilweise ignoriert. */
.bild-hintergrund{
  position:relative; isolation:isolate;
  background-size:cover; background-position:center 38%;
}
/* Das Bild bleibt stehen, der Abschnitt zieht darueber hinweg.
   Nur auf groesseren Bildschirmen mit Maus: iOS ignoriert background-attachment
   fixed und wuerde sonst ruckeln. Dort bleibt es beim normalen Mitscrollen. */
@media (min-width:861px) and (hover:hover){
  .bild-hintergrund{ background-attachment:fixed; background-position:center; }
}
.bild-hintergrund::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(58,42,34,.55), rgba(90,35,64,.72));
}
.bild-hintergrund .eyebrow{color:var(--gelb);}
.bild-hintergrund h2{color:var(--creme);}
.bild-hintergrund p{color:var(--creme);}
.bild-hintergrund .btn.outline{color:var(--creme);border-color:var(--creme);}
.bild-hintergrund .btn.outline:hover{background:var(--creme);color:var(--brombeere);}

/* Das VFP-Logo liegt schwarz auf transparent vor. Auf den dunklen Flächen
   (Footer, grüner Block) wird es über einen Filter nach Weiß gedreht. */
.logo-hell{ filter:brightness(0) invert(1); opacity:.82; transition:opacity .18s; }
a:hover > .logo-hell{ opacity:1; }

/* ---------- Footer: Kontakt links, Verbandslogo rechts ---------- */
footer{ text-align:left; }
.footer-oben{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto; gap:2.5em; align-items:center;
}
.footer-oben p{ line-height:1.55; }
.footer-titel{
  color:var(--creme); font-size:1.2rem; margin:0 0 .6em;
  font-optical-sizing:none; font-variation-settings:'opsz' 30;
}
.footer-zeichen{ display:flex; align-items:center; gap:1em; margin-top:.8em; }
.footer-logo{ justify-self:end; }
.footer-unten{
  max-width:1100px; margin:1.4em auto 0; padding-top:1em;
  border-top:1px solid rgba(246,220,199,0.22);
}
@media (max-width:760px){
  footer{ text-align:center; }
  .footer-oben{ grid-template-columns:1fr; gap:1.8em; justify-items:center; }
  .footer-zeichen{ justify-content:center; }
  .footer-logo{ justify-self:center; }
}

/* ---------- Zitat im laufenden Text ----------
   Das zentrierte blockquote steht quer zum linksbündigen Fließtext.
   Diese Variante bleibt linksbündig und wird über eine farbige Linie
   vom übrigen Text abgesetzt. */
blockquote.zitat-links{
  text-align:left;margin:1em 0 1.4em;padding:.1em 0 .1em 1.1em;
  border-left:3px solid var(--brombeere);
}

/* Der letzte Absatz in einem farbigen Kasten bringt seinen Außenabstand mit,
   dadurch stand unten mehr Luft als oben. */
.bg-gruen > :last-child,
.bg-gold > :last-child,
.bg-brombeere > :last-child{ margin-bottom:0; }

/* ---------- Weiterführender Textlink ----------
   Ersetzt auf der Startseite die Zweitknöpfe. Ein Knopf ist eine Entscheidung,
   ein Textlink ein Angebot. Die helle Variante steht auf dunklem Grund. */
.weiterlink{
  color:var(--brombeere);font-weight:600;text-decoration:underline;
  text-underline-offset:.22em;
}
.weiterlink-hell{ color:var(--creme); }

/* ---------- Eingerahmter Abschnitt ----------
   Gibt einem Abschnitt Struktur, ohne ihn farbig zu füllen. Gedacht für
   Stellen, an denen ein Farbwechsel zu viel wäre. */
.rahmen{
  border:1px solid var(--creme-tief);
  padding:2.4em 2em 2em;
}
@media (max-width:640px){
  .rahmen{ padding:1.8em 1.2em 1.5em; }
}

/* ---------- Bildspalte läuft mit ----------
   Auf der Gestalttherapie-Seite ist die Textspalte gut doppelt so hoch wie Bild
   und Zitat. Damit die rechte Spalte nicht ab der Hälfte leer bleibt, bleibt sie
   beim Scrollen stehen. Der Abstand nach oben hält Abstand zur festen Kopfleiste.
   Auf schmalen Bildschirmen steht die Spalte ohnehin unter dem Text, dort greift
   die Regel nicht, weil sie im Ein-Spalten-Layout nichts zu halten gäbe. */
@media (min-width:861px){
  .gestalt-grid > div:last-child{
    position:sticky;
    top:6.5rem;
  }
}

/* ---------- Formular auf hellem Grund ----------
   Das Kontaktformular stand in einem orangefarbenen Kasten, deshalb waren
   Felder, Hinweise und Statusmeldungen auf helle Schrift ausgelegt. Seit der
   Kasten weg ist, brauchen sie Textfarbe und eine sichtbare Feldkante. */
.feld{ background:#FFFDFA; border-color:rgba(90,35,64,0.20); }
.form-hinweis{ color:var(--tinte-soft); }
.form-hinweis a{ color:var(--brombeere); }
.form-status.ok{ color:var(--gruen-dunkel); }
.form-status.fehler{ background:rgba(193,102,61,0.12); border-color:rgba(193,102,61,0.5); color:var(--orange); }

/* Name und E-Mail nebeneinander, damit das Formular nicht so hoch wird. */
.feld-paar{ display:grid; grid-template-columns:1fr 1fr; gap:.8em; }
@media (max-width:560px){ .feld-paar{ grid-template-columns:1fr; gap:0; } }

/* Kleines Platzhalterfeld neben den Kontaktdaten: weniger Polster als das
   große, sonst passt die Beschriftung nicht hinein. */
.foto-platzhalter.klein{ padding:1.2em; min-height:0; font-size:.82rem; }

/* ---------- Fussbereich auf der Kontaktseite ----------
   Dort stehen Adresse, Telefon und E-Mail schon im Seiteninhalt. Die
   Wiederholung im Fussbereich entfällt, Zeichen und Verbandslogo bleiben. */
body[data-seite="kontakt"] .footer-kontakt{ display:none; }

/* ---------- Bildfolge: Fotos wechseln von selbst ----------
   Im Abschnitt „Was in einer Sitzung geschieht". Was man wegklicken muss,
   sieht kaum jemand, deshalb wechselt es von allein. Die Punkte darunter
   dienen zum Vorgreifen, nicht als einziger Weg. */
.bildfolge{ position:relative; }
.bildfolge img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
}
.bildfolge img.aktiv{ opacity:1; }
.bildfolge-punkte{
  display:flex; justify-content:center; gap:.5em; margin-top:.9em;
}
.bildfolge-punkte button{
  width:8px; height:8px; padding:0; border:none; border-radius:50%;
  background:var(--creme-tief); cursor:pointer;
  transition:background .25s, transform .25s;
}
.bildfolge-punkte button.aktiv{ background:var(--brombeere); transform:scale(1.25); }
@media (prefers-reduced-motion:reduce){
  .bildfolge img{ transition:none; }
}

/* ---------- Terminkalender, Zwei-Klick ----------
   Der Kalender von Cal.com wird erst auf ausdrücklichen Klick geladen. Bis
   dahin steht hier nur ein Platzhalter und es fließen keine Daten. */
.kalender-wrap{
  margin-top:1.6em;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(90,35,64,0.18);
}
.kalender-wrap.geladen{ background:none; border:none; }
.kalender-platzhalter{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2.4em 1.6em;
}
.kalender-platzhalter .small{ max-width:34em; }
.kalender-wrap iframe{
  display:block; width:100%; min-height:760px; border:0;
}
/* Cal.com blendet die Uhrzeiten neben dem Kalender erst ab etwa 900 px ein.
   Darunter erscheint die einspaltige Ansicht, die weniger Höhe braucht. */
@media (max-width:900px){
  .kalender-wrap iframe{ min-height:700px; }
}
@media (max-width:640px){
  .kalender-platzhalter{ padding:1.8em 1em; }
  .kalender-wrap iframe{ min-height:640px; }
}

}