/* Kurswechsel · Unterseiten (Paartherapie, Erziehungsberatung, Systemische Arbeit) · 29.10.2026
   Wird nach start.css geladen und nutzt deren Farben und Schriften.
   Grundsatz wie auf der Startseite: helle Flächen, Weinrot nur für Überschriften, Knöpfe
   und den Teppich. Fotos ohne Rahmen, weich in den Hintergrund auslaufend.
   Der kleine Teppich im ersten Abschnitt zeigt, wer im Raum ist: volle Matten sind da,
   gestrichelte gehören zum System, sitzen aber nicht mit im Raum. */

/* ---------- Kopf: Text links, Foto weich rechts ---------- */
.unterseite-kopf{position:relative;overflow:hidden;background:#EFEDE9;padding:clamp(140px,19vh,200px) 0 clamp(88px,13vh,140px)}
.unterseite-kopf .kopf-raster{position:static}
.unterseite-kopf .kopf-raster>div:first-child{position:relative;z-index:2;max-width:min(620px,54vw)}
.kopf-portraet{position:absolute;z-index:1;top:61px;right:0;bottom:0;width:56%;margin:0}
.kopf-portraet img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 14%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 22%,rgba(0,0,0,.8) 44%,#000 60%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 22%,rgba(0,0,0,.8) 44%,#000 60%);
  animation:ruhig-an 1.4s ease-out both}
@keyframes ruhig-an{from{opacity:0}to{opacity:1}}
.brotkrume{font-size:13.5px;letter-spacing:.02em;color:var(--leise);margin:0 0 22px}
.brotkrume a{color:var(--wein);text-decoration:none;border-bottom:1px solid rgba(122,36,40,.3)}
.brotkrume a:hover{border-bottom-color:var(--wein)}
.unterseite-kopf h1{font-size:clamp(44px,5.4vw,82px);line-height:1;letter-spacing:-.015em;max-width:12ch;text-wrap:balance}
.unterseite-kopf .unter{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2vw,27px);line-height:1.36;color:var(--graphit);margin:24px 0 0;max-width:30ch;text-wrap:pretty}
.kopf-knopf{margin:34px 0 0}
.kopf-zeile{font-size:14px;letter-spacing:.02em;color:var(--text);margin:18px 0 0}
@media (max-width:900px){
  .unterseite-kopf{display:flex;flex-direction:column;padding:61px 0 56px}
  .unterseite-kopf .kopf-raster{display:contents}
  .kopf-portraet{order:-1;position:relative;top:auto;width:100%;height:min(112vw,560px)}
  .kopf-portraet img{object-position:50% 10%;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
  .unterseite-kopf .kopf-raster>div:first-child{max-width:none;padding:0 var(--rand);margin-top:-20px}
}

/* ---------- Flächen ---------- */
section.weiss{background:var(--weiss)}
section.grau{background:var(--nebel)}
section.leinen{background:var(--creme)}

/* ---------- Zweispaltige Abschnitte: Überschrift links, Text rechts ---------- */
.zwei{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 96px;align-items:start}
.zwei-kopf h2{font-size:clamp(34px,3.6vw,52px);line-height:1.08;margin-bottom:0}
.zwei-kopf p:not(.marke):not(.hinweis-klein){margin:24px 0 0;font-size:16px;max-width:40ch;color:var(--text)}
@media (min-width:981px) and (min-height:780px){.zwei-kopf{position:sticky;top:110px}.zwei-kopf.mit-bild{position:static}}
.zwei-text p{max-width:62ch}
.zwei-text>:last-child{margin-bottom:0}
.zwei-text .gross{font-size:clamp(19px,1.7vw,22px);line-height:1.6}
.zwei-text em{font-family:var(--serif);font-style:italic;font-size:1.16em;line-height:1.45;color:var(--wein)}
.zwei-text b{font-weight:600;color:var(--graphit)}
@media (max-width:980px){.zwei{grid-template-columns:1fr}.zwei-kopf{margin-bottom:28px}}

/* Sätze, wie Anrufende sie sagen: kursiv und in Anführungszeichen */
.stimme{font-style:italic}
.stimme::before{content:"\201E";color:var(--leise)}
.stimme::after{content:"\201C";color:var(--leise)}

/* ---------- Der kleine Teppich ---------- */
.zwei-kopf .system.klein{max-width:360px;margin:40px 0 0}
.hinweis-klein{max-width:360px;margin:12px 0 0;text-align:center;font-size:13.5px;line-height:1.4;color:var(--leise);transition:opacity .5s}
.benutzt .hinweis-klein{opacity:0}
.brett .m-geist .matte{fill:rgba(244,237,226,.08);stroke:#F4EDE2;stroke-opacity:.9;stroke-width:3;stroke-dasharray:7 9}
.brett .m-geist .figur{fill:none;stroke:#F4EDE2;stroke-opacity:.9;stroke-width:2.2;opacity:1}
.brett line.geist{stroke-dasharray:5 7}
.brett .m-geist:hover .matte{stroke-opacity:1}
@media (max-width:980px){.zwei-kopf .system.klein,.hinweis-klein{max-width:300px;margin-left:auto;margin-right:auto}}

/* ---------- Eigene Fotos in der linken Spalte ---------- */
.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}
.zwei-bild.flipchart img{aspect-ratio:auto;max-width:360px}
.zwei-bild.quer img{aspect-ratio:auto;max-width:460px}
@media (max-width:980px){.zwei-bild{margin:24px 0 0}.zwei-bild img{max-width:420px}}

/* ---------- Themenliste in der Schrift der Überschriften ---------- */
.themen{list-style:none;padding:0;margin:0}
.leinen .themen li{font-family:var(--serif);font-size:clamp(21px,1.9vw,24px);line-height:1.35;color:var(--graphit);padding:13px 0;border-bottom:1px solid var(--strich)}
.leinen .themen li:first-child{border-top:1px solid var(--strich)}
.leinen .zwei-text>p{margin-top:28px}

/* ---------- Bildband: eigenes Foto neben einem Kernsatz ---------- */
section.bildband{padding:0;background:var(--creme);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:560px}
.bildband-bild{margin:0;position:relative;overflow:hidden;background:var(--nebel)}
.bildband-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block}
.bildband.links-person .bildband-bild img{object-position:50% 40%}
.bildband-bild::after{display:none}
.bildband-text{display:flex;align-items:center;padding:96px max(var(--rand),calc((100vw - 1180px) / 2 + var(--rand))) 96px 72px}
.bildband-text p{font-family:var(--serif);font-size:clamp(25px,2.4vw,34px);line-height:1.4;color:var(--wein);max-width:30ch;margin:0}
.bildband-text .ich-satz{font-style:italic;font-size:clamp(30px,3.3vw,46px);line-height:1.24;max-width:16ch}
.ich-satz::before{content:"\201E";color:var(--leise)}
.ich-satz::after{content:"\201C";color:var(--leise)}
@media (max-width:820px){
  section.bildband{grid-template-columns:1fr;min-height:0}
  .bildband-bild{aspect-ratio:4/3}
  .bildband-text{padding:44px var(--rand) 72px}
}

/* ---------- Breites Foto ---------- */
section.bildstreifen{padding:0;background:var(--weiss)}
.bildstreifen img{display:block;width:100%;height:clamp(240px,36vw,560px);object-fit:cover;object-position:50% 55%}
.bildstreifen.raum img{height:clamp(220px,30vw,460px);object-position:50% 40%}

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

/* ---------- Termin ---------- */
.termin-foto-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:88px;align-items:center}
.termin h2{font-size:clamp(38px,4.4vw,60px)}
.termin-foto{margin:0;aspect-ratio:4/5;overflow:hidden;background:transparent;border-radius:0}
.termin-foto::after{display:none}
.termin-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 42%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 72% 78% at 50% 42%,#000 55%,transparent 100%)}
.termin .kontakt{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){
  .termin-foto-raster{grid-template-columns:1fr;gap:28px}
  .termin-foto{order:-1;max-width:320px}
  .termin .kontakt{grid-template-columns:1fr}
}

/* ---------- Handy: Leiste zum Anrufen und Buchen ---------- */
.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:var(--weiss);border-top:1px solid var(--strich);padding-bottom:env(safe-area-inset-bottom,0px);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:15px;font-weight:500;text-decoration:none}
  .handy-leiste .anrufen{color:var(--wein)}
  .handy-leiste .buchen{color:var(--weiss);background:var(--wein)}
}
@media (prefers-reduced-motion:reduce){.handy-leiste{transition:none}}

/* ---------- Fuß ---------- */
.seite footer{padding:72px 0 44px}
.seite .horizont{margin:0 auto 32px}

/* ===== Korrekturen 29.10.2026 (Thomas/Claude) — nach Kontrastmessung ===== */
/* Brotkrume am Handy liegt auf dem auslaufenden Foto: #67626A erreichte dort nur 4,0:1 */
@media (max-width:900px){.brotkrume{color:#57525A}}