/* Kontakt: "Ein Gespraech mit Lisa" um ihre Klangschale (nur kontakt.html) */
body.seite-kontakt{--grund:var(--kontakt-grund);background:var(--kontakt-grund)}
.kontakt-anfang{padding:clamp(48px,6vw,96px) 0 clamp(36px,4vw,56px)}
.kontakt-anfang-innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:2rem clamp(32px,6vw,96px);align-items:center;padding-inline:var(--rand);max-width:1320px;margin-inline:auto}
.kontakt-titel h1{font-size:clamp(50px,6.4vw,96px);line-height:1;margin-bottom:.2em}
.kontakt-titel p:last-child{max-width:30em;margin:0}
.kontakt-flyerform{background:var(--salbei-hell);padding:2.2rem 2.8rem 2.4rem 2.4rem;border-radius:46% 54% 40% 60%/58% 46% 54% 42%;min-width:min(100%,400px)}
.kontakt-flyerform .kontakt-zeilen a{font-size:clamp(21px,1.9vw,26px);gap:.8em}
.kontakt-flyerform .kontakt-zeilen svg{width:32px;height:32px}
@media (max-width:899px){
  .kontakt-anfang-innen{grid-template-columns:minmax(0,1fr)}
  .kontakt-flyerform{border-radius:40px 52px 36px 48px/36px 44px 40px 34px;padding:1.4rem 1.6rem}
}
.szene{position:relative;padding:clamp(40px,5vw,80px) 0 clamp(64px,7vw,110px)}
.szene-innen{min-height:calc(100svh + 140px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);padding-inline:var(--rand);max-width:1360px;margin-inline:auto;align-items:start}
.schale-seite{position:sticky;top:calc(var(--kopf) + 24px)}
.schale-buehne{position:relative;width:min(100%,620px);aspect-ratio:1;margin-inline:auto}
.schale-flaeche{position:absolute;inset:13%;background:var(--haferlicht)}
.schale-ringe{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.schale-ringe .ring-punkte{fill:none;stroke:var(--klangschale);stroke-width:1.6;stroke-dasharray:1.5 7;stroke-linecap:round;opacity:.7;transition:opacity 400ms ease}
.schale-ringe .ring-strich{fill:none;stroke:var(--siegelrot);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.schale-ringe .ring.voll .ring-strich{stroke-dashoffset:0;opacity:1}
.schale-ringe .ring.voll .ring-punkte{opacity:0}
.schale-ringe .ring.zeichnet .ring-strich{animation:ring-zeichnen 1100ms var(--aus) both}
@keyframes ring-zeichnen{from{stroke-dashoffset:1;opacity:1}to{stroke-dashoffset:0;opacity:1}}
.schale-ringe text{font-family:var(--serif);font-style:italic;font-weight:300;font-size:19px;fill:var(--klangschale-tief);letter-spacing:.02em;transition:fill 300ms ease}
.schale-ringe .ring.voll text{fill:var(--weinrot);font-size:20px}
.schale-ringe .welle{fill:none;stroke-width:1.5;transform-origin:0 0;transform-box:view-box}
.schale-knopf{position:absolute;left:25%;top:25%;width:50%;height:50%;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;transition:transform 160ms var(--aus)}
.schale-knopf:active{transform:scale(.97)}
.schale-knopf .blase-bild{display:block;position:absolute;inset:0}
.schale-knopf .hof{stroke-opacity:.55}
.schale-knopf:focus-visible{outline-offset:8px}
.glanz{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,244,214,.55) 48%,transparent 60%);transform:translateX(-120%);mix-blend-mode:soft-light}
.schale-knopf.glaenzt .glanz{animation:glanz 1500ms var(--innen-aus) 200ms both}
@keyframes glanz{to{transform:translateX(120%)}}
.schale-hinweis{display:flex;align-items:center;justify-content:center;gap:.5em;font-size:16px;color:var(--tinte-leise);margin:.6rem 0 0}
.schale-hinweis svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* ---------- Ein Gespraech mit Lisa (Fassung 29.10.2026) ---------- */
.schale-ringe .ring{transform-origin:0 0;transform-box:view-box}
.schale-ringe .ring.jetzt .ring-punkte{stroke:var(--siegelrot);opacity:.85}
.schale-ringe .ring.leer .ring-punkte{opacity:.38}
.schale-ringe .ring.jetzt text{fill:var(--klangschale-tief)}
.formular-seite h2{font-size:clamp(30px,2.8vw,42px)}
.formular-einleitung{color:var(--tinte-leise);margin-bottom:1.4rem;max-width:32em}
/* Grundform, auch ohne JavaScript: ein normales Formular, jede Frage mit ihrem Feld */
.schritt{margin:0 0 1.9rem}
.gf-text{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(25px,2.2vw,32px);line-height:1.18;color:var(--weinrot);margin:0 0 .9rem;text-wrap:balance}
.gf-text .frei{font-family:var(--sans);font-size:15.5px;font-weight:420;white-space:nowrap}
.gf-portraet,.gf-js,.gf-verlauf{display:none}
.gf-kiesel{display:flex;flex-wrap:wrap;gap:12px 12px}
.kw{position:relative;display:inline-flex;align-items:center;min-height:56px;padding:14px 24px 15px;background:#fff;color:var(--tinte);font-size:17.5px;font-weight:470;line-height:1.25;cursor:pointer;box-shadow:0 12px 26px -18px rgba(80,40,20,.55),inset 0 0 0 1.5px rgba(118,87,60,.22);transition:transform 160ms var(--aus),background-color 220ms ease,color 220ms ease,box-shadow 220ms ease;-webkit-tap-highlight-color:transparent}
.kw1{border-radius:58% 42% 55% 45%/52% 48% 52% 48%}
.kw2{border-radius:44% 56% 48% 52%/56% 44% 56% 44%}
.kw3{border-radius:52% 48% 40% 60%/48% 56% 44% 52%}
.kw4{border-radius:40% 60% 56% 44%/54% 46% 54% 46%}
.kw5{border-radius:60% 40% 46% 54%/46% 54% 46% 54%}
.kw input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
@media (hover:hover){.kw:hover{box-shadow:0 14px 28px -18px rgba(80,40,20,.6),inset 0 0 0 1.5px var(--klangschale)}}
.kw:active{transform:scale(.97)}
.lebt .gf-kiesel{flex-direction:column;align-items:flex-start;gap:10px}
.lebt .kw2{margin-left:22px}.lebt .kw3{margin-left:8px}.lebt .kw4{margin-left:30px}.lebt .kw5{margin-left:14px}
.kw.gewaehlt{background:var(--siegelrot);color:var(--creme);box-shadow:0 14px 28px -16px rgba(103,32,28,.6)}
.kw:has(input:focus-visible){outline:2px solid var(--siegelrot);outline-offset:4px}
.gf-feld{display:block;width:100%;max-width:520px;font:inherit;font-size:19px;color:var(--tinte);background:#fff;border:1.5px solid var(--klangschale);border-radius:999px;padding:.8rem 1.35rem;min-height:60px;box-shadow:0 12px 26px -20px rgba(80,40,20,.5)}
textarea.gf-feld{max-width:none;border-radius:30px 34px 28px 36px/28px 30px 34px 30px;min-height:170px;resize:vertical;line-height:1.5;padding:1rem 1.35rem}
.gf-feld::placeholder{color:#8A7568;opacity:1}
.gf-feld:focus{outline:none;border-color:var(--siegelrot);box-shadow:0 0 0 4px rgba(148,64,64,.14)}
.gf-feld[aria-invalid="true"]{border-color:var(--siegelrot)}
.pflicht{display:inline-block;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--siegelrot);border:1px solid rgba(148,64,64,.4);border-radius:999px;padding:0 .55em;margin-left:.3em;vertical-align:4px;line-height:1.6}
.frei{font-weight:400;color:var(--tinte-leise)}
.feld-hinweis{font-size:16px;color:var(--tinte-leise);margin:.6rem 0 0}
.feld-fehler{display:flex;gap:.5rem;align-items:center;color:var(--siegelrot);font-weight:520;font-size:16px;margin:.6rem 0 0}
.feld-fehler .ring-punkt{border-color:var(--siegelrot);width:12px;height:12px}
.haekchen{display:flex;gap:.85rem;align-items:flex-start;font-size:17px;line-height:1.5;cursor:pointer;max-width:34em}
.haekchen input{width:26px;height:26px;margin:.1rem 0 0;accent-color:var(--siegelrot);flex:none}
.form-fehler{background:#FFF1EE;color:var(--siegelrot);border-radius:22px 26px 20px 28px;padding:.9rem 1.2rem;font-weight:520;margin:1rem 0 0}
.senden-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:1.4rem}
.senden{min-height:60px;font-size:18.5px;padding:.8em 2.1em}
.gf-vorschau{font-size:16px;color:var(--tinte-leise);margin:1.6rem 0 0}
.beispiel-knopf{background:none;border:0;font:inherit;font-size:16px;line-height:inherit;color:var(--klangschale-tief);text-decoration:underline;text-underline-offset:.25em;cursor:pointer;padding:.15em 0;margin-right:.4em}

/* Mit JavaScript: Lisa fragt, Frage fuer Frage */
.anfrage.lebt{min-height:500px;display:flex;flex-direction:column}
.lebt .gf-js{display:revert}
.lebt .gf-tun.gf-js,.lebt .gf-fortschritt.gf-js{display:flex}
.lebt .schritt{margin:0}
.lebt .schritt.offen{display:none}
.lebt .schritt.erledigt .gf-frage{display:none}
.lebt .schritt.erledigt .gf-verlauf{display:flex}
.lebt .schritt:not(.erledigt) .gf-verlauf{display:none}
.lebt .gf-text .pflicht{display:none}
.lebt [data-schritt="anliegen"]:not(:has(input:checked)) .gf-tun{display:none}
.lebt .gf-frage{display:grid;grid-template-columns:66px minmax(0,1fr);gap:0 20px;align-items:start;margin:1.5rem 0 0}
.lebt .gf-portraet{display:block;width:66px;height:66px;padding:3px;background:var(--hafer);margin-top:.2rem}
.lebt .gf-portraet>span{display:block;width:100%;height:100%;overflow:hidden}
.lebt .gf-portraet img{width:100%;height:100%;object-fit:cover}
.lebt .gf-text{font-size:clamp(30px,2.7vw,41px);line-height:1.14;margin-bottom:1.3rem}
.gf-verlauf{align-items:center;flex-wrap:wrap;gap:.3rem .75rem;width:100%;background:none;border:0;padding:.35rem 0 .35rem 86px;margin:0;font:inherit;text-align:left;cursor:pointer;color:inherit;border-radius:18px}
.gf-vf{font-family:var(--serif);font-style:italic;font-weight:300;font-size:20px;line-height:1.3;color:var(--tinte-leise)}
.gf-vz{display:inline-flex;align-items:center;gap:.65rem;min-width:0;max-width:100%}
.gf-va{display:inline-block;min-width:0;max-width:min(100%,24em);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#fff;color:var(--siegelrot);font-size:15.5px;font-weight:540;line-height:1.3;padding:.42em 1em .46em;border-radius:58% 42% 55% 45%/52% 48% 52% 48%;box-shadow:0 8px 18px -14px rgba(80,40,20,.55);transition:box-shadow 200ms ease}
.gf-va.ueber{background:transparent;color:var(--tinte-leise);font-style:italic;font-weight:420;box-shadow:inset 0 0 0 1.5px var(--hafer)}
.gf-aendern{flex:none;font-size:14px;color:var(--klangschale-tief);text-decoration:underline;text-decoration-color:rgba(118,87,60,.4);text-underline-offset:.22em}
@media (hover:hover){.gf-verlauf:hover .gf-va{box-shadow:0 8px 18px -14px rgba(80,40,20,.55),inset 0 0 0 1.5px var(--siegelrot)}.gf-verlauf:hover .gf-aendern{text-decoration-color:currentColor}}
.gf-verlauf:focus-visible{outline-offset:2px}
.gf-tun{align-items:center;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.2rem}
.gf-weiter{min-height:56px;padding:.7em 2em;font-size:18px}
.gf-ueber{background:none;border:0;font:inherit;font-size:17px;color:var(--tinte-leise);text-decoration:underline;text-decoration-color:rgba(94,75,71,.4);text-underline-offset:.25em;cursor:pointer;padding:.7em .3em;min-height:50px}
.gf-ueber:hover{color:var(--tinte);text-decoration-color:currentColor}
.gf-fortschritt{align-items:center;gap:14px;margin-top:auto;padding:2.4rem 0 0 86px;font-size:15px;color:var(--tinte-leise)}
.gf-punkte{display:flex;gap:9px;align-items:center}
.gf-punkte i{width:13px;height:13px;border-radius:50%;border:1.5px dashed var(--klangschale);transition:background-color 300ms ease,border-color 300ms ease,box-shadow 300ms ease}
.gf-punkte i.ja{border:1.5px solid var(--siegelrot);background:var(--siegelrot)}
.gf-punkte i.ueber{border:1.5px solid var(--hafer);background:var(--haferlicht)}
.gf-punkte i.jetzt{border:1.5px solid var(--siegelrot);box-shadow:0 0 0 4px rgba(148,64,64,.14)}
.lebt .gf-vorschau{padding-left:86px;margin-top:1rem}
.lebt [data-schritt="schluss"] .haekchen{margin-top:.2rem}
/* leise nach oben ruecken: die neue Frage kommt von unten, die beantwortete legt sich in den Verlauf */
.schritt.kommt .gf-frage{animation:gf-kommt 560ms var(--aus) both}
.schritt.rueckt .gf-verlauf{animation:gf-rueckt 520ms var(--aus) both}
@keyframes gf-kommt{from{opacity:0;transform:translateY(22px)}}
@keyframes gf-rueckt{from{opacity:0;transform:translateY(34px)}}
@media (prefers-reduced-motion:reduce){.schritt.kommt .gf-frage,.schritt.rueckt .gf-verlauf{animation:none}}
html.ruhig .schritt.kommt .gf-frage,html.ruhig .schritt.rueckt .gf-verlauf{animation:none}
@media (max-width:899px){
  .anfrage.lebt{min-height:0}
  .lebt .gf-frage{grid-template-columns:50px minmax(0,1fr);gap:0 14px;margin-top:1.2rem}
  .lebt .gf-koerper{display:contents}
  .lebt .gf-koerper>*{grid-column:1/-1}
  .lebt .gf-koerper>.gf-text{grid-column:2;align-self:center}
  .lebt .gf-portraet{width:50px;height:50px;padding:2.5px;grid-row:1;margin-top:.15rem}
  .lebt .gf-text{font-size:clamp(25px,7vw,30px);margin-bottom:1.1rem}
  .gf-verlauf{padding-left:0;gap:.2rem .6rem}
  .gf-vf{font-size:18px}
  .gf-va{max-width:100%}
  .lebt .gf-kiesel{gap:10px}
  .lebt .kw2{margin-left:16px}.lebt .kw3{margin-left:4px}.lebt .kw4{margin-left:0}.lebt .kw5{margin-left:20px}
  .kw{font-size:17px;padding:13px 20px 14px;min-height:56px}
  .gf-feld{font-size:18px;max-width:none}
  .gf-tun{gap:.4rem 1rem}
  .gf-weiter{flex:1 1 auto;max-width:320px}
  .gf-fortschritt,.lebt .gf-vorschau{padding-left:0}
  .gf-fortschritt{padding-top:1.8rem}
  .schritt,.gf-frage{scroll-margin-top:calc(var(--kopf) + 14px)}
}
.danke{padding:clamp(20px,4vw,60px) 0}
.danke h2{font-size:clamp(30px,3vw,44px);font-weight:300}
.danke-frage{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(23px,2vw,28px);color:var(--klangschale-tief)}
.danke .knopf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.danke:focus{outline:none}
.praxisraum{padding:clamp(40px,5vw,80px) 0 clamp(80px,9vw,140px)}
.praxisraum-innen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center;padding-inline:var(--rand);max-width:1100px;margin-inline:auto}
.praxisraum-blase{width:min(100%,420px);aspect-ratio:1/1.05;justify-self:center}
.adresse{display:flex;gap:.7rem;align-items:flex-start;font-size:21px;font-weight:520}
.adresse svg{width:26px;height:26px;fill:none;stroke:var(--siegelrot);stroke-width:1.4;flex:none;margin-top:.15em}
@media (max-width:899px){
  .szene-innen{grid-template-columns:minmax(0,1fr)}
  .schale-seite{position:relative;top:auto}
  .schale-buehne{width:min(100%,320px)}
  .szene-innen{min-height:0;gap:20px}
  .szene{padding-top:12px}
  .schale-ringe text{font-size:25px}
  .schale-ringe .ring.voll text{font-size:26px}
  .praxisraum-innen{grid-template-columns:minmax(0,1fr)}
}