/* Erstgespräch: dieselbe Gestaltung, konzentriert auf die persönliche Anfrage. */
.kopf { padding-inline:max(48px,calc((100% - 1192px) / 2)); }
.knopf { background:linear-gradient(115deg,#b45029,#d78245 55%,#bb552c); box-shadow:0 7px 23px #b8603027,inset 0 0 0 1px #ffffff29; }
.gespraech-inhalt { padding-block:35px 70px; }
.gespraech-brotkrumen { display:flex; gap:12px; font-size:13px; color:var(--grau); margin-bottom:40px; }
.gespraech-brotkrumen a { text-underline-offset:4px; }
.gespraech-raster { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:64px; align-items:start; }
.gespraech-einleitung h1 { text-align:left; font-size:clamp(38px,4.5vw,62px); line-height:1.08; letter-spacing:-.045em; margin:20px 0 28px; }
.gespraech-einleitung h1 em { color:var(--gruen); font-family:var(--serif); font-weight:400; }
.gespraech-vorspann { font-size:21px; line-height:1.55; color:var(--tinte); }
.gespraech-einleitung > p:not(.etikett):not(.gespraech-vorspann):not(.gespraech-termin) { color:var(--grau); }
.gespraech-person { display:flex; align-items:center; gap:20px; padding-block:28px; margin-top:26px; border-block:1px solid var(--linie); }
.gespraech-person img { width:82px; height:100px; object-fit:cover; object-position:center 30%; border-radius:8px; }
.gespraech-person strong,.gespraech-person span,.gespraech-person small { display:block; }
.gespraech-person strong { font-size:16px; }.gespraech-person span{font-size:15px}.gespraech-person small{font-size:12px;color:var(--grau);margin-top:5px}
.gespraech-themen { margin-top:30px; }.gespraech-themen h2 { font-size:25px; line-height:1.25; margin-bottom:18px; letter-spacing:-.025em; }
.gespraech-themen ul { padding-left:20px; }.gespraech-themen li { margin:12px 0; padding-left:4px; }.gespraech-themen li::marker{color:var(--gruen)}
.gespraech-themen p { font-size:15px; color:var(--grau); }
.gespraech-termin { background:var(--salbei); border-left:3px solid var(--gruen); padding:20px 22px; margin-top:30px; font-size:13px; }.gespraech-termin strong,.gespraech-termin span{display:block}.gespraech-termin span{margin-top:5px}
.gespraech-formularkarte { background:#fffefb; border:1px solid var(--linie); border-radius:18px; padding:36px; box-shadow:0 16px 55px #173d2c08; min-width:0; }
.gespraech-formularkarte h2 { font-size:32px; line-height:1.15; letter-spacing:-.035em; margin:14px 0; }
.gespraech-formularkarte > p:not(.etikett) { color:var(--grau); font-size:15px; }
#erstgespraech-formular { margin-top:26px; scroll-margin-top:110px; }
.formular-pflicht { font-size:12px; color:var(--grau); margin-bottom:18px; }
.formular-felder { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; }
.formular-felder label { display:block; font-size:13px; font-weight:600; min-width:0; }.formular-felder label>span{font-weight:400;color:var(--grau)}
.formular-felder :is(input,textarea,select) { display:block; width:100%; margin-top:8px; border:1px solid #becbc0; border-radius:7px; background:#fafbf8; color:var(--tinte); padding:13px 12px; font:400 16px/1.5 Werk,Arial,sans-serif; min-height:50px; }
.formular-felder textarea{resize:vertical;min-height:150px}.formular-breit{grid-column:1/-1}
.formular-felder :is(input,textarea,select):focus-visible,.formular-einwilligung input:focus-visible { outline:3px solid #c45d3166; outline-offset:2px; border-color:var(--gruen); }
.formular-felder [aria-invalid="true"] { border-color:#a34520; }
.formular-einwilligung { display:flex; align-items:flex-start; gap:12px; margin:25px 0; font-size:13px; line-height:1.65; }.formular-einwilligung input{width:19px;height:19px;flex-shrink:0;margin:2px 0;accent-color:var(--gruen)}
.formular-einwilligung a { text-decoration:underline; text-underline-offset:3px; }
.honigtopf { position:absolute; width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.formular-senden { width:100%; justify-content:space-between; font-size:16px; }.formular-senden:disabled{opacity:.6;cursor:wait}
.formular-vertrauen{font-size:12px;text-align:center;color:var(--grau);margin:12px 0 0}
.formular-meldung:not([hidden]) { padding:16px; border-radius:7px; border:1px solid #a3452066; background:#fff3e9; color:#853917; font-size:14px; white-space:pre-line; margin:0 0 20px; }.formular-meldung.gut{border-color:#285c4c;background:var(--salbei);color:var(--tinte)}
.gespraech-direkt { border-top:1px solid var(--linie); margin-top:28px; padding-top:22px; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; }.gespraech-direkt span{flex-basis:100%;color:var(--grau);font-size:13px}.gespraech-direkt a{font-weight:600;text-underline-offset:4px}
.gespraech-zurueck { display:inline-block; margin-top:36px; }
@media(max-width:1100px) and (min-width:761px){.kopf nav{gap:14px}.kopf nav>a:not(.knopf){font-size:11px}}
@media(max-width:1000px){.kopf{padding-inline:28px}}
@media(max-width:1100px){.gespraech-raster{gap:34px}.gespraech-formularkarte{padding:26px}.formular-felder{grid-template-columns:1fr}}
@media(max-width:900px){.gespraech-raster{grid-template-columns:1fr}.gespraech-einleitung{max-width:660px}.formular-felder{grid-template-columns:repeat(2,minmax(0,1fr))}.gespraech-themen{margin-top:24px}}
@media(max-width:760px){.kopf{padding-inline:20px}.gespraech-inhalt{padding-block:24px 45px}.gespraech-brotkrumen{margin-bottom:28px}.gespraech-einleitung h1{font-size:42px}.gespraech-vorspann{font-size:19px}.gespraech-formularkarte{padding:24px 20px}.gespraech-formularkarte h2{font-size:28px}.gespraech-raster{gap:30px}.gespraech-person{gap:16px}}
@media(max-width:540px){.formular-felder{grid-template-columns:1fr}.gespraech-person strong{font-size:15px}.gespraech-termin{padding:18px}.gespraech-einleitung h1{font-size:clamp(34px,10vw,42px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== Vers.69 ===== */
/* Navigation wie auf der Startseite (Kalle, 15.10.2026). Abstände oben angepasst,
   die verkleinerte Menüschrift gilt wie dort nur zwischen 761 und 1100 px.
   Lichteffekt des Erstgespräch-Knopfs aus startseite.css, nur für den Knopf im Kopf.
   Bei „Bewegung reduzieren" stoppt die Regel in gestaltung.css alle Animationen. */
:root { --bewegung-kurve: cubic-bezier(.16,1,.3,1); }
.kopf .knopf { position:relative; overflow:hidden; isolation:isolate; transition:transform .45s var(--bewegung-kurve),box-shadow .4s; }
.kopf .knopf::before { content:''; position:absolute; z-index:-1; pointer-events:none; inset:-90%; background:radial-gradient(ellipse at center,#ffd0a588,transparent 58%); animation:licht-wandert 9s linear infinite; }
.kopf .knopf::after { content:''; position:absolute; pointer-events:none; inset:-40% auto -40% -65%; width:45%; background:linear-gradient(100deg,transparent,#fff6,transparent); transform:skewX(-20deg); animation:lichtreflex 5.5s ease-in-out infinite; }
.kopf .knopf:hover { transform:translateY(-3px) scale(1.025); box-shadow:0 12px 34px #b8603045; }
.kopf .knopf>span { transition:transform .4s var(--bewegung-kurve); }
.kopf .knopf:hover>span { transform:translate(4px,-4px); }
@keyframes licht-wandert { 0%{transform:translate(-18%,-10%)}50%{transform:translate(25%,16%)}100%{transform:translate(-18%,-10%)} }
@keyframes lichtreflex { 0%,58%{left:-65%}95%,100%{left:150%} }

/* Knopf „Nach oben" unten rechts (Vers.69). Gleiche Regeln in startseite.css,
   erstgespraech.css und rechtliches.css; Sichtbarkeit schaltet nach-oben.js. */
.nach-oben { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); z-index:30; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#285c4c; color:#fff; font:600 22px/1 Werk,Arial,sans-serif; text-decoration:none; box-shadow:0 8px 24px #172e2833; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s,transform .3s,visibility .3s,background-color .2s; }
.nach-oben.sichtbar { opacity:1; visibility:visible; transform:none; }
.nach-oben:hover { background:#1f4a3d; color:#fff; }
.nach-oben:focus-visible { outline:3px solid #c45d31; outline-offset:3px; }
@media(max-width:760px) { .nach-oben { width:44px; height:44px; font-size:20px; } }

/* ===== Vers.70: Schriftskala ===== */
/* Dieselben sechs Stufen wie in startseite.css (Kalle, 15.10.2026). Werte nur hier
   in den Variablen ändern. „!important“ nur für font-size, siehe startseite.css. */
:root {
  --schrift-klein:13px;
  --schrift-text:17px;
  --schrift-betont:20px;
  --schrift-zwischentitel:24px;
  --schrift-abschnitt:clamp(32px,3.75vw,48px);
  --schrift-blickfang:46px;
}
@media(max-width:760px) {
  :root {
    --schrift-klein:12px;
    --schrift-text:16px;
    --schrift-betont:18px;
    --schrift-zwischentitel:20px;
    --schrift-abschnitt:32px;
    --schrift-blickfang:32px;
  }
}

/* Text */
:where(main) :where(p,li,label,.knopf,.textlink,.formular-felder input,.formular-felder textarea,.formular-felder select) { font-size:var(--schrift-text)!important; }
:where(main) :where(p,li) > :where(strong,em,b,a,span:not([aria-hidden="true"])) { font-size:inherit!important; }
.sprunglink, .kopf nav>a, .kopf nav .knopf, .gespraech-direkt a, .gespraech-person strong, .gespraech-person span,
.gespraech-termin strong { font-size:var(--schrift-text)!important; }
/* Klein (Navigation 761–1100 px wie auf der Startseite) */
.hinweisleiste, .hinweisleiste :not([aria-hidden="true"]), .etikett,
.fuss p, .fuss small, .fuss small time, .fuss nav a,
.gespraech-brotkrumen, .gespraech-brotkrumen *, .gespraech-termin span, .gespraech-person small,
.gespraech-direkt span, .formular-pflicht, .formular-vertrauen,
.formular-felder label, .formular-einwilligung label { font-size:var(--schrift-klein)!important; }
/* Kleine Tablets (761–920 px): Mit 13 px passt das Menü erst ab rund 900 px in eine
   Zeile (gemessen). Darunter dasselbe aufklappbare Menü wie am Handy; die Regeln sind
   aus dem Handy-Abschnitt übernommen. */
@media (min-width:761px) and (max-width:920px) {
  .menuschalter { display:block; border:1px solid var(--linie); border-radius:5px; background:transparent; padding:7px 12px; }
  .kopf nav { display:none; position:absolute; top:100%; left:0; right:0; padding:24px; background:var(--papier); border-bottom:1px solid var(--linie); box-shadow:0 15px 20px #142b2510; }
  .kopf nav.offen { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .kopf nav>a:not(.knopf) { padding:12px 0; }
  .kopf nav .knopf { margin-top:14px; }
  .kopf nav>a, .kopf nav .knopf { font-size:var(--schrift-text)!important; }
  .menuschalter { font-size:var(--schrift-klein)!important; }
}
/* Bis 1260 px reicht der Platz für 17 px im Menü nicht (gemessen: Menü stößt ans Logo). */
@media (max-width:1260px) and (min-width:921px) { .kopf nav>a, .kopf nav .knopf { font-size:var(--schrift-klein)!important; } }
/* Feldinhalte bleiben auf Textgröße, auch wenn das Feld im label steckt. */
.formular-felder label :is(input,textarea,select) { font-size:var(--schrift-text)!important; }
/* Betont */
.gespraech-vorspann { font-size:var(--schrift-betont)!important; }
/* Zwischentitel: die beiden Kartentitel */
.gespraech-themen h2, .gespraech-formularkarte h2 { font-size:var(--schrift-zwischentitel)!important; }
/* Abschnitt: Seitentitel */
.gespraech-einleitung h1, .gespraech-einleitung h1 em { font-size:var(--schrift-abschnitt)!important; }

/* ===== Vers.77: Abschluss der Menüleiste ===== */
/* Vorher nur eine blasse, halb durchsichtige Linie ohne Schatten; das Ende der
   Leiste verschwamm mit dem hellen Hintergrund (Kalle, 15.10.2026). Jetzt eine
   deutliche Linie und ein weicher Schatten nach unten. Gleich in startseite.css
   und erstgespraech.css, damit die Navigation auf beiden Seiten gleich aussieht. */
.kopf { border-bottom:1px solid #c5cdc1; box-shadow:0 10px 24px -14px #172e2859; }