/* Unterseiten Paartherapie und Erziehungsberatung — Gestaltung Oktober 2026
   Wird nur von den beiden Unterseiten geladen, nach kurswechsel.css.
   Die Startseite bleibt davon unberuehrt. */

:root{--leinen:#E9DAC5;--terrakotta:#AE5238}

/* ---------- Zweispaltige Textabschnitte ----------
   Ueberschrift links, sie bleibt beim Lesen stehen. Text rechts in
   lesbarer Zeilenlaenge statt ueber die volle Breite. */
.zwei{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 88px;align-items:start}
.zwei-kopf{position:sticky;top:108px}
.zwei-kopf h2{font-size:clamp(31px,3.3vw,45px);line-height:1.16;margin-bottom:0}
.zwei-kopf p:not(.marke){margin:24px 0 0;font-size:16px;max-width:40ch}
.zwei-text p{max-width:62ch}
.zwei-text>:last-child{margin-bottom:0}
@media (max-width:980px){
  .zwei{grid-template-columns:1fr}
  .zwei-kopf{position:static;margin-bottom:28px}
}

/* ---------- Die Stimme der Anrufenden ----------
   Saetze, wie Klientinnen sie am Telefon sagen: kursiv, in Anfuehrungszeichen.
   Claudias eigene Saetze bleiben aufrecht. */
.stimme{font-style:italic;text-indent:-.34em}
.stimme::before{content:"\201E";color:var(--terrakotta)}
.stimme::after{content:"\201C";color:var(--terrakotta)}
.dunkel .stimme::before,.dunkel .stimme::after{color:#D4A74A}
.zwei-text em{font-family:var(--serif);font-style:italic;font-size:1.13em;line-height:1.5;color:#7A2428}
.dunkel .zwei-text em{color:#F4EDE2}

/* ---------- Bildband: Themenbild im Weinrot-Ton neben einem Kernsatz ---------- */
section.bildband{padding:0;background:var(--leinen);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:540px}
.bildband-bild{margin:0;position:relative;overflow:hidden;background:#7A2428}
.bildband-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
.bildband-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(233,218,197,0) 72%,var(--leinen) 100%)}
.bildband-text{display:flex;align-items:center;padding:96px max(40px,calc((100vw - 1160px)/2 + 40px)) 96px 64px}
.bildband-text p{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.35vw,32px);line-height:1.42;color:#7A2428;max-width:31ch;margin:0}
.bildband.links-person .bildband-bild img{object-position:34% 70%}
/* dunkle Silhouette: klare Kante statt Verlauf, sonst entsteht ein brauner Schleier */
.bildband.links-person .bildband-bild::after{display:none}
@media (max-width:820px){
  section.bildband{grid-template-columns:1fr;min-height:0}
  .bildband-bild{aspect-ratio:4/3}
  .bildband-bild::after{background:linear-gradient(180deg,rgba(233,218,197,0) 70%,var(--leinen) 100%)}
  .bildband-text{padding:44px 24px 72px}
}

/* Bildband mit einem einzelnen, als Zitat gesetzten Satz (Systemische Arbeit) */
.bildband-text .ich-satz{font-style:italic;font-size:clamp(28px,3.1vw,42px);line-height:1.28;max-width:17ch;text-indent:-.34em}
.ich-satz::before{content:"\201E";color:var(--terrakotta)}
.ich-satz::after{content:"\201C";color:var(--terrakotta)}

/* Eigene Praxisfotos unter der Ueberschrift in der linken Spalte.
   Mit Bild bleibt die Spalte nicht stehen, sonst ragt sie bei niedrigen Fenstern ueber den Rand. */
.zwei-kopf.mit-bild{position:static}
.zwei-bild{margin:36px 0 0}
.zwei-bild img{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:4/5;object-fit:cover}
.zwei-bild.quadrat img{aspect-ratio:1/1}
@media (max-width:980px){
  .zwei-bild{margin:28px 0 0}
  .zwei-bild img{max-width:none;aspect-ratio:4/3;object-position:50% 12%}
  .zwei-bild.quadrat img{aspect-ratio:1/1;max-width:520px}
}

/* Breites Foto ueber die ganze Seitenbreite */
section.bildstreifen{padding:0;background:#7A2428}
.bildstreifen img{display:block;width:100%;height:clamp(240px,36vw,560px);object-fit:cover;object-position:50% 55%}

/* Unterzeile im Kopf ohne einzelnes Wort in der letzten Zeile */
.unterseite-kopf .unter{text-wrap:pretty}

/* Kopf: Dauer und Preis sichtbar, bevor man scrollt */
.kopf-zeile{font-size:13.5px;letter-spacing:.04em;color:rgba(244,237,226,.72);margin:22px 0 0}

/* ---------- Themenliste auf Leinen, in der Schrift der Ueberschriften ---------- */
.leinen{background:var(--leinen)}
.leinen .themen{margin:0;max-width:none}
.leinen .themen li{font-family:var(--serif);font-size:clamp(20px,1.85vw,23px);line-height:1.35;color:#7A2428;padding:13px 0;border-bottom:1px solid rgba(122,36,40,.2)}
.leinen .themen li:first-child{border-top:1px solid rgba(122,36,40,.2)}
.leinen .zwei-text>p{margin-top:28px}

/* ---------- Hinweise am Ende von "Wie ein Anfang aussieht" ---------- */
.zwei-text .krise{max-width:62ch;margin-top:40px}
.zwei-text .krise+.krise{margin-top:22px}

/* ---------- Handy: Leiste zum Anrufen und Buchen ----------
   Erscheint erst nach dem Kopfbereich und verschwindet beim Terminblock. */
.handy-leiste{display:none}
@media (max-width:720px){
  .handy-leiste{display:grid;grid-template-columns:1fr 1.5fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#7A2428;border-top:1px solid rgba(244,237,226,.18);padding-bottom:env(safe-area-inset-bottom);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility .25s}
  .handy-leiste.an{transform:none;visibility:visible}
  .handy-leiste a{display:block;text-align:center;padding:16px 10px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
  .handy-leiste .anrufen{color:#F4EDE2}
  .handy-leiste .buchen{color:#7A2428;background:#F4EDE2}
}
@media (prefers-reduced-motion:reduce){.handy-leiste{transition:none}}