/* Lokale Schriften statt Google-CDN.
   Erzeugt von fonts.py - nicht von Hand bearbeiten. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jost-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jost-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jost-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jost-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/newsreader-300i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/newsreader-300i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/newsreader-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/newsreader-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html { scroll-behavior: smooth; }
  body { margin: 0; background: #FAF7F3; color: #4A3931; font-family: Newsreader, Georgia, serif; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  :focus-visible { outline: 2px solid #5E463B; outline-offset: 3px; }
  input, textarea, button, select { font: inherit; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* --- aus style-hover / style-focus des Prototyps erzeugt --- */
.x1:focus{left:16px}
.x2:hover{color:#C4A69B}
.x3:hover{background:transparent;color:#5E463B}
.x4:hover{border-color:#C4A69B}
.x5:hover{opacity:.8}
.x6:hover{color:#ECE4DB}

/* --- Navigation: im Prototyp per JS-Breitenmessung, hier per CSS.
       !important, weil die Elemente aus dem Prototyp Inline-Styles tragen. --- */
@media (min-width:960px){
  .nav-breit{display:flex!important}
  .menue-schalter{display:none!important}
  #mobilmenue{display:none!important}
}
@media (max-width:959px){
  .nav-breit{display:none!important}
  .menue-schalter{display:block!important}
  #mobilmenue{display:none!important}
  #mobilmenue.offen{display:block!important}
}

/* --- Navigation einzeilig halten ---
   Nachgemessen an der echten Schrift: mit der Laufweite 0,13em und 30 px
   Abstand braucht die Leiste 708 px, verfuegbar sind aber nur 678 px
   (1088 max-width minus 2x64 Innenabstand, minus Logoblock und Zwischenraum).
   Deshalb brachen "Ueber mich" und "Ablauf & Kosten" um - die einzigen
   Eintraege mit Leerzeichen. Etwas engere Laufweite und Abstaende ergeben
   637 px, also 41 px Reserve. Die Schriftgroesse bleibt unveraendert.
   !important, weil die Werte aus dem Prototyp als Inline-Style kommen. */
.nav-breit{gap:clamp(12px,1.6vw,22px)!important}
.nav-breit a{letter-spacing:0.09em!important;white-space:nowrap}

/* --- Zurueck-nach-oben (Inline-Style setzt opacity:0) --- */
#nach-oben.sichtbar{opacity:1!important;pointer-events:auto!important}

/* --- Bilder nie ueber die Breite hinaus --- */
img{max-width:100%}

/* --- Waagerechten Ueberlauf auf schmalen Bildschirmen verhindern ---
   Nachgerechnet: die Fusszeile braucht mindestens 476 px, die Kopfzeile
   363 px. Auf Telefonen stehen 280-387 px zur Verfuegung - deshalb liess
   sich die Seite seitlich wegschieben. */

/* Fusszeile: das Raster hat keine auto-fit-Angabe und wird nie einspaltig. */
@media (max-width:700px){
  .fuss-raster{grid-template-columns:1fr!important}
  /* Das Portraet ragt per negativem Abstand nach oben. Einspaltig gestapelt
     wuerde es in den Abschnitt darueber hineinlaufen.
     Die Begrenzung auf 320 px bleibt bewusst bestehen - sonst wird das Bild
     auf groesseren Telefonen unnoetig breit. */
  .fuss-raster>div:first-child{margin-top:0!important}
}

/* --- iOS erkennt Telefonnummern selbsttaetig und macht Links daraus ---
   Safari faerbt sie dann blau und unterstreicht sie - im dunklen Fuss der
   Seite faellt das unangenehm auf. Diese Regel gibt ihnen das Aussehen des
   umgebenden Textes zurueck. Antippen zum Anrufen bleibt erhalten, was
   gerade bei den Notrufnummern sinnvoll ist. */
a[x-apple-data-detectors]{
  color:inherit!important;
  text-decoration:none!important;
  font-size:inherit!important;
  font-family:inherit!important;
  font-weight:inherit!important;
  line-height:inherit!important;
}

/* --- Zu lange Zeilen mit Umbruchsperre ---
   Zeilen, die breiter als das schmalste Telefon waeren, duerfen dort
   umbrechen. Am Rechner bleibt die Umbruchsperre bestehen. Welche Zeilen
   betroffen sind, meldet das Bauskript beim Erzeugen. */
@media (max-width:700px){
  .nowrap-mobil-aus{white-space:normal!important}
}

/* --- Verlinkte Verbandslogos in der Fusszeile --- */
a.logo-link:hover,a.logo-link:focus-visible{opacity:.8}

/* --- Anwaehlbare Rufnummern ---
   Sollen wie normaler Text aussehen, nicht wie Links. Beim Ueberfahren bzw.
   Antippen deutet eine feine Unterstreichung an, dass sie anwaehlbar sind. */
a.tel{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .25s}
a.tel:hover,a.tel:focus-visible{border-bottom-color:currentColor}

/* --- Fusszeile: die beiden Logos nebeneinander statt untereinander ---
   In der einspaltigen Ansicht ist dafuer reichlich Platz (2x92 px plus
   10 px Abstand = 194 px bei 280-387 px verfuegbarer Breite). */
@media (max-width:700px){
  .logo-reihe{flex-direction:row!important;flex-wrap:wrap;align-items:flex-start}
}

/* --- Psychotherapie: Bezeichnungen der Methoden groesser ---
   EMDR, ACT, Systemische Therapie und die uebrigen standen als
   Kleinversalien in 13,6 px ueber der jeweiligen Ueberschrift - am Handy
   zu unscheinbar. Betrifft nur diesen Bereich, nicht die gleichartigen
   Beschriftungen auf den anderen Seiten. */
@media (max-width:700px){
  .methoden p[style*="font-size:13.6px"]{
    font-size:16px!important;
    letter-spacing:0.12em!important;
  }
}

/* --- Logos koennen nie verzerren ---
   Sollte der Platz doch einmal knapp werden, staucht die Breitenbegrenzung
   sonst die Breite, waehrend die Hoehe fest bleibt. Mit "contain" behaelt das
   Bild in jedem Fall sein Seitenverhaeltnis und wird hoechstens kleiner.
   Rechnerisch tritt der Fall erst unter 295 px Geraetebreite ein - diese
   Zeile ist die Rueckversicherung, keine Notwendigkeit. */
.kopf-logo img{object-fit:contain}

/* Kopfzeile: Logoblock darf schrumpfen, Untertitel darf umbrechen. */
@media (max-width:480px){
  .kopf-logo{flex:0 1 auto!important;min-width:0}
  .kopf-untertitel{white-space:normal!important}
}
/* Auf sehr schmalen Geraeten zusaetzlich das Logo etwas kleiner. */
@media (max-width:400px){
  .kopf-logo{gap:12px!important}
  /* Nur das Logo-Zeichen, nicht die Wortmarke.
     ACHTUNG: "img:first-child" waere falsch - das trifft jedes Bild, das
     erstes Kind SEINES Elternelements ist, also auch die Wortmarke in der
     Textspalte. Die bekaeme dann 44 px Hoehe aufgezwungen, die
     Breitenbegrenzung wuerde die Breite stauchen, und das Logo waere
     verzerrt. Das Zeichen ">" trifft dagegen nur unmittelbare Kinder. */
  .kopf-logo>img{height:44px!important}
  .kopf-wortmarke{height:16px!important}
}

/* Bewusst KEIN overflow-x:hidden auf html/body: das wuerde die klebende
   Kopfzeile (position:sticky) ausser Kraft setzen. Die Ursachen sind oben
   behoben, eine Kaschierung ist nicht noetig. */

/* --- Rueckmeldung des Kontaktformulars --- */
.formular-meldung{font-family:Newsreader,Georgia,serif;font-size:17px;line-height:1.75;
  border-radius:4px;padding:16px 20px;margin:0 0 28px}
.formular-meldung.ok{background:#EDF2EA;border:1px solid #B9CBB0;color:#3D5233}
.formular-meldung.fehler{background:#F6E9E6;border:1px solid #D9B5AC;color:#7A3B2C}

/* --- Handyansicht: erst Überschrift und Text, dann Bild ---
   Am Rechner wechseln sich die Bilder links und rechts ab. Wird der
   Block einspaltig, ergibt das mal Bild-über-Text und mal umgekehrt.
   Diese Regeln vereinheitlichen das. Der Umbruchpunkt hängt an der
   jeweiligen Mindestspaltenbreite des Blocks. */
@media (max-width:773px){
  .bild-nach-unten-774>:first-child{order:2}
  .bild-nach-unten-774>:last-child{order:1}
}
@media (max-width:960px){
  .bild-nach-unten-961>:first-child{order:2}
  .bild-nach-unten-961>:last-child{order:1}
}
@media (max-width:977px){
  .bild-nach-unten-978>:first-child{order:2}
  .bild-nach-unten-978>:last-child{order:1}
}